/*
  Landing page is built mobile-first.
  Main targets:
  - iPhone 15 / 16: around 393 × 852
  - iPhone 15 / 16 Pro: around 393 × 852
  - iPhone 15 / 16 Plus / Pro Max: around 430 × 932
  - Android phones around 360–430 width
*/

.landing-page {
  --lp-x: clamp(14px, 4.2vw, 20px);
  --lp-top: clamp(8px, 1.35dvh, 14px);
  --lp-bottom: clamp(6px, 1dvh, 10px);

  --lp-hero-image-h: clamp(278px, 34dvh, 326px);
  --lp-hero-image-w: clamp(222px, 60vw, 272px);
  --lp-hero-block: clamp(500px, 58dvh, 556px);

  --lp-title-size: clamp(35px, 9.2vw, 41px);
  --lp-title-width: clamp(316px, 86vw, 356px);
  --lp-time-size: clamp(21px, 5.6vw, 26px);
  --lp-desc-size: clamp(13.3px, 3.55vw, 15.5px);

  --lp-card-radius: clamp(17px, 4.8vw, 22px);
  --lp-small-radius: clamp(13px, 3.8vw, 17px);

  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  padding: calc(var(--safe-top) + var(--lp-top)) var(--lp-x)
    calc(var(--safe-bottom) + var(--lp-bottom));
  background: linear-gradient(180deg, #f8fbff 0%, #fffaf8 42%, #ffffff 100%);
}

/* =========================
   HERO
========================= */

.landing-hero {
  position: relative;
  min-height: var(--lp-hero-block);
  padding-bottom: 0;
}

.landing-hero-image-wrap {
  position: absolute;
  top: calc(var(--lp-top) * -0.45);
  right: calc(var(--lp-x) * -1);
  width: var(--lp-hero-image-w);
  height: var(--lp-hero-image-h);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.landing-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% top;
}

.landing-hero-overlay {
  position: absolute;
  top: calc(var(--lp-top) * -0.45);
  left: calc(var(--lp-x) * -1);
  right: calc(var(--lp-x) * -1);
  height: calc(var(--lp-hero-image-h) + 10px);
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(248, 251, 255, 1) 0%,
      rgba(248, 251, 255, 0.98) 22%,
      rgba(248, 251, 255, 0.78) 44%,
      rgba(248, 251, 255, 0.25) 70%,
      rgba(248, 251, 255, 0.02) 100%
    ),
    linear-gradient(
      180deg,
      rgba(248, 251, 255, 0) 0%,
      rgba(248, 251, 255, 0) 64%,
      rgba(255, 250, 248, 0.92) 88%,
      rgba(255, 250, 248, 1) 100%
    );
}

.landing-hero-content {
  position: relative;
  z-index: 3;
}

/* =========================
   BRAND
========================= */

.landing-brand {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.9vw, 10px);
  margin-bottom: clamp(25px, 4dvh, 39px);
}

.landing-logo {
  width: clamp(31px, 8vw, 38px);
  height: clamp(31px, 8vw, 38px);
  object-fit: contain;
  flex: 0 0 auto;
}

.landing-brand-text {
  font-size: clamp(9.6px, 2.65vw, 11.4px);
  line-height: 1.15;
  font-weight: 820;
  color: var(--color-navy);
  letter-spacing: -0.2px;
}

/* =========================
   TEXT
========================= */

.landing-title {
  max-width: var(--lp-title-width);
  font-family: var(--font-title);
  font-size: var(--lp-title-size);
  line-height: 0.985;
  letter-spacing: clamp(-2.05px, -0.47vw, -1.4px);
  color: var(--color-navy);
}

.landing-time {
  margin-top: clamp(9px, 1.55dvh, 14px);
  font-family: var(--font-title);
  font-size: var(--lp-time-size);
  line-height: 1;
  font-weight: 900;
  color: #f3567d;
}

.landing-description {
  max-width: clamp(286px, 77vw, 322px);
  margin-top: clamp(12px, 1.85dvh, 17px);
  font-size: var(--lp-desc-size);
  line-height: 1.38;
  font-weight: 570;
  color: var(--color-text);
}

/* =========================
   CTA BUTTON
========================= */

.landing-cta {
  margin-top: clamp(14px, 2.05dvh, 19px);
  min-height: clamp(45px, 5.7dvh, 54px);
  border-radius: 999px;
  font-family: var(--font-title);
  font-size: clamp(17px, 4.55vw, 21px);
  font-weight: 900;
  letter-spacing: -0.2px;
  box-shadow: 0 12px 22px rgba(255, 47, 117, 0.25);
}

/* =========================
   RATING CARD
========================= */

.landing-rating-card {
  margin-top: clamp(13px, 1.9dvh, 18px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(9px, 2.6vw, 13px);
  padding: clamp(10px, 2.7vw, 14px);
  min-height: clamp(66px, 8.4dvh, 78px);
  border-radius: var(--lp-card-radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(7, 20, 63, 0.08);
}

.avatar-stack {
  display: flex;
  align-items: center;
  min-width: clamp(104px, 28vw, 124px);
}

.avatar-stack img {
  width: clamp(34px, 9.2vw, 42px);
  height: clamp(34px, 9.2vw, 42px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  margin-left: clamp(-10px, -2.2vw, -8px);
  box-shadow: 0 4px 9px rgba(7, 20, 63, 0.1);
}

.avatar-stack img:first-child {
  margin-left: 0;
}

.rating-title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-navy);
  font-size: clamp(13.3px, 3.55vw, 15.8px);
  font-weight: 900;
  line-height: 1.05;
}

.rating-star {
  color: #ffc72c;
  font-size: 1.16em;
  line-height: 1;
}

.rating-text {
  margin-top: 4px;
  font-size: clamp(11.1px, 3vw, 13px);
  line-height: 1.28;
  font-weight: 550;
  color: var(--color-text);
}

/* =========================
   TRUST CARDS
========================= */

.trust-grid {
  margin-top: clamp(9px, 1.35dvh, 13px);
  display: grid;
  grid-template-columns: 1.28fr 0.92fr 0.92fr;
  gap: clamp(5px, 1.55vw, 8px);
}

.trust-item {
  min-height: clamp(49px, 6.2dvh, 58px);
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.5vw, 7px);
  padding: clamp(6px, 1.7vw, 8px);
  border: 1px solid rgba(224, 228, 238, 0.88);
  border-radius: var(--lp-small-radius);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 6px 14px rgba(7, 20, 63, 0.04);
}

.trust-icon,
.discover-check,
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.trust-icon {
  width: clamp(28px, 7.4vw, 33px);
  height: clamp(28px, 7.4vw, 33px);
  border-radius: 50%;
  background: #edf6ff;
  color: #245f9d;
}

.trust-icon svg {
  width: 56%;
  height: 56%;
}

.trust-title {
  font-size: clamp(8.7px, 2.35vw, 10.2px);
  line-height: 1.08;
  font-weight: 900;
  color: var(--color-navy);
}

/* =========================
   DISCOVER CARD
========================= */

.discover-card {
  position: relative;
  margin-top: clamp(9px, 1.45dvh, 13px);
  padding: clamp(13px, 3.5vw, 17px);
  min-height: clamp(124px, 15dvh, 144px);
  border-radius: var(--lp-card-radius);
  background: linear-gradient(135deg, #fff0f3 0%, #ffe7eb 100%);
  overflow: hidden;
}

.discover-content {
  position: relative;
  z-index: 2;
  max-width: 71%;
}

.discover-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 5.35vw, 24px);
  line-height: 1.02;
  letter-spacing: -0.6px;
  color: var(--color-navy);
  margin-bottom: clamp(8px, 1.2dvh, 11px);
}

.discover-list {
  display: grid;
  gap: clamp(6px, 0.88dvh, 8px);
}

.discover-list li {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1.65vw, 8px);
  font-size: clamp(10.8px, 2.95vw, 12.6px);
  line-height: 1.18;
  font-weight: 660;
  color: var(--color-text);
}

.discover-check {
  width: clamp(16px, 4.2vw, 19px);
  height: clamp(16px, 4.2vw, 19px);
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  font-size: clamp(9.5px, 2.6vw, 11px);
  font-weight: 900;
  margin-top: -2px;
}

.discover-heart {
  position: absolute;
  top: clamp(13px, 3.3vw, 16px);
  right: clamp(14px, 3.6vw, 18px);
  color: #ff7aa0;
  opacity: 0.9;
  z-index: 3;
}

.discover-heart svg {
  width: clamp(23px, 6vw, 28px);
  height: clamp(23px, 6vw, 28px);
}

.discover-illustration {
  position: absolute;
  right: clamp(-9px, -1.6vw, -4px);
  bottom: clamp(8px, 1.4dvh, 13px);
  width: clamp(108px, 30vw, 132px);
  z-index: 1;
}

/* =========================
   STATS CARD
========================= */

.stats-card {
  margin-top: clamp(9px, 1.45dvh, 14px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(5px, 1.65vw, 8px);
  padding: clamp(9px, 2.8vw, 13px);
  min-height: clamp(66px, 8.2dvh, 82px);
  border-radius: var(--lp-card-radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 24px rgba(7, 20, 63, 0.065);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.65vw, 8px);
}

.stat-icon {
  width: clamp(31px, 8.6vw, 38px);
  height: clamp(31px, 8.6vw, 38px);
  border-radius: clamp(9px, 2.8vw, 12px);
  background: #fff1f5;
  color: var(--color-primary);
}

.stat-icon svg {
  width: 52%;
  height: 52%;
}

.stat-title {
  font-size: clamp(8.7px, 2.4vw, 10.8px);
  line-height: 1.08;
  font-weight: 900;
  color: var(--color-navy);
}

.stat-title strong {
  display: block;
  font-size: clamp(12px, 3.3vw, 14.5px);
  line-height: 1;
}

/* =========================
   BOTTOM NOTE
========================= */

.landing-bottom-note {
  position: relative;
  margin: clamp(10px, 1.65dvh, 15px) calc(var(--lp-x) * -1) 0;
  height: clamp(68px, 8.8dvh, 86px);
  min-height: clamp(68px, 8.8dvh, 86px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 var(--lp-x) calc(var(--safe-bottom) + clamp(7px, 1dvh, 10px));
  overflow: hidden;
}

.landing-bottom-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 6% 100%, rgba(255, 47, 117, 0.22), transparent 42%),
    radial-gradient(circle at 95% 100%, rgba(84, 181, 255, 0.28), transparent 48%),
    linear-gradient(180deg, transparent 0%, rgba(255, 244, 248, 0.96) 100%);
  border-top-left-radius: 58% 28%;
  border-top-right-radius: 58% 28%;
}

.landing-bottom-note p {
  position: relative;
  z-index: 2;
  max-width: clamp(260px, 72vw, 300px);
  text-align: center;
  font-size: clamp(10.7px, 2.95vw, 12.5px);
  line-height: 1.22;
  font-weight: 730;
  color: var(--color-navy);
}

.landing-bottom-note span {
  display: block;
  margin: 2px auto 0;
  color: #f35478;
  letter-spacing: 3px;
}

/* =========================
   iPhone 15 / 16 Plus and Pro Max
   430 × 932 and close sizes
========================= */

@media (min-width: 414px) and (min-height: 890px) {
  .landing-page {
    --lp-top: 13px;
    --lp-bottom: 8px;
    --lp-hero-image-h: 326px;
    --lp-hero-block: 552px;
    --lp-title-size: 41px;
    --lp-title-width: 358px;
    --lp-time-size: 26px;
    --lp-desc-size: 15.4px;
  }

  .landing-brand {
    margin-bottom: 38px;
  }
}

/* =========================
   iPhone 15 / 16 and Pro
   393 × 852 and close sizes
========================= */

@media (max-width: 414px) and (max-height: 880px) {
  .landing-page {
    --lp-x: clamp(14px, 4vw, 17px);
    --lp-top: 10px;
    --lp-bottom: 6px;
    --lp-hero-image-h: clamp(276px, 33dvh, 292px);
    --lp-hero-image-w: clamp(214px, 57vw, 240px);
    --lp-hero-block: clamp(486px, 57dvh, 510px);
    --lp-title-size: clamp(34px, 8.95vw, 37px);
    --lp-title-width: clamp(294px, 85vw, 330px);
    --lp-time-size: clamp(20px, 5.35vw, 23px);
    --lp-desc-size: clamp(12.8px, 3.45vw, 14px);
  }

  .landing-brand {
    margin-bottom: clamp(24px, 3.25dvh, 28px);
  }

  .landing-logo {
    width: 31px;
    height: 31px;
  }

  .landing-rating-card {
    min-height: 68px;
  }

  .discover-card {
    min-height: 126px;
  }

  .stats-card {
    min-height: 68px;
  }
}

/* =========================
   Small Android and iPhone mini/SE-like widths
========================= */

@media (max-width: 374px), (max-height: 780px) {
  .landing-page {
    --lp-x: 13px;
    --lp-top: 8px;
    --lp-bottom: 6px;
    --lp-hero-image-h: 258px;
    --lp-hero-image-w: 205px;
    --lp-hero-block: 462px;
    --lp-title-size: 31px;
    --lp-title-width: 286px;
    --lp-time-size: 19px;
    --lp-desc-size: 12.2px;
  }

  .landing-brand {
    gap: 6px;
    margin-bottom: 20px;
  }

  .landing-logo {
    width: 28px;
    height: 28px;
  }

  .landing-brand-text {
    font-size: 8.8px;
  }

  .landing-cta {
    min-height: 42px;
    font-size: 15.8px;
  }

  .landing-rating-card {
    padding: 8px;
    min-height: 60px;
  }

  .avatar-stack {
    min-width: 92px;
  }

  .avatar-stack img {
    width: 30px;
    height: 30px;
  }

  .rating-title {
    font-size: 12px;
  }

  .rating-text {
    font-size: 10px;
  }

  .trust-item {
    min-height: 43px;
  }

  .trust-icon {
    width: 25px;
    height: 25px;
  }

  .trust-title {
    font-size: 7.8px;
  }

  .discover-card {
    min-height: 112px;
    padding: 11px;
  }

  .discover-title {
    font-size: 18px;
  }

  .discover-list {
    gap: 5px;
  }

  .discover-list li {
    font-size: 9.8px;
  }

  .discover-check {
    width: 14px;
    height: 14px;
    font-size: 8px;
  }

  .discover-illustration {
    width: 92px;
  }

  .stats-card {
    min-height: 58px;
    padding: 7px;
  }

  .stat-icon {
    width: 27px;
    height: 27px;
  }

  .stat-title {
    font-size: 7.8px;
  }

  .stat-title strong {
    font-size: 10.8px;
  }

  .landing-bottom-note {
    height: 58px;
    min-height: 58px;
  }

  .landing-bottom-note p {
    font-size: 9.2px;
  }
}

/* If a screen is too short, allow scroll instead of breaking the layout. */
@media (max-height: 700px) {
  .landing-page {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
  }
}