/* ==========================================================================
   EcoTrust — landing page
   Mobile-first (393px design frame). On desktop the content column keeps its
   mobile width; only backgrounds, dividers, the activity ticker and the plan
   carousel stretch outwards.
   ========================================================================== */

@font-face {
  font-family: "IRANYekanXVF";
  src: url("../fonts/IRANYekanXVFaNumVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — taken from the Figma frame */
  --bg: #091a38;
  --ink: #ffffff;
  --ink-70: rgba(255, 255, 255, 0.7);
  --ink-60: rgba(255, 255, 255, 0.6);
  --muted: #9ca3af;
  --muted-2: #b3b4b6;
  --brand: #264aff;
  --danger: #ff5050;
  --green-1: #039874;
  --green-2: #33c6a1;

  --surface-04: rgba(255, 255, 255, 0.04);
  --surface-08: rgba(255, 255, 255, 0.08);
  --stroke-04: rgba(255, 255, 255, 0.04);
  --stroke-08: rgba(255, 255, 255, 0.08);
  --stroke-12: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.02);

  /* metrics */
  --frame: 393px;      /* design frame width */
  --content: 361px;    /* frame minus 16px gutters */
  --wide: 992px;       /* Plan Selection frame width — used on desktop */
  --gutter: 16px;
  --radius-card: 12px;
  --radius-plan: 16px;
}

/* --------------------------------------------------------- reset / base */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "IRANYekanXVF", "Segoe UI", Tahoma, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--bg);
  /* Figma runs this gradient over the whole 3141px frame — it must span the
     document, not repeat per viewport, or every section gets its own dark-to-
     light ramp and the mid-page cards read far too light. */
  background-image: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.4) 100%);
  background-repeat: no-repeat;
  line-height: 1.6;
  overflow-x: hidden;
  /* room for the sticky CTA so it never covers the last section */
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- page shell */

.page {
  position: relative;
  width: 100%;
  overflow-x: clip;
}

/* navy glow behind the hero (Figma: Ellipse 1, 504px, blur 400) */
.glow-hero {
  position: absolute;
  top: -240px;
  left: 50%;
  width: 504px;
  height: 504px;
  margin-inline-start: -180px;
  border-radius: 50%;
  background: var(--bg);
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}

main { position: relative; z-index: 1; }

/* every section keeps the mobile content column centred */
section {
  position: relative;
  padding: 40px var(--gutter);
}

.section-head,
.section-title,
.section-sub,
.hero__art,
.hero__copy,
.hero__cta,
.why__list,
.trust-pill,
.stats,
.steps__list {
  max-width: var(--content);
  margin-inline: auto;
}

.section-head { text-align: center; margin-bottom: 24px; }

.section-title {
  font-size: 24px;
  line-height: 44px;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title--plain {
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
}

.section-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-70);
  text-align: center;
}

/* 6. dividers — Figma height, capped at the mobile frame width on every screen */
.divider {
  width: 100%;
  max-width: var(--frame);
  height: 6px;
  margin-inline: auto;
  border: 0;
  background: var(--divider);
}

/* --------------------------------------------------------- buttons */

.btn {
  display: flex;
  flex-direction: row-reverse; /* icon renders to the left of the label */
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px 2px 8px;
  border: 1px solid var(--stroke-12);
  border-radius: var(--radius-card);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  transition: filter 0.18s ease, transform 0.18s ease;
}

.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.btn--primary { background: var(--brand); }
.btn--ghost { background: var(--surface-08); }
.btn--block { width: 100%; }

.btn__icon { flex: 0 0 24px; color: var(--ink); }
.btn__icon svg { width: 24px; height: 24px; }

/* ==========================================================================
   1. Header
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 12px 0;           /* Figma:s 73px tall header, logo 48px, sits at y=0 */
  border-bottom: 1px solid var(--stroke-08);
}

.logo { display: block; }

/* the exported artwork already contains the ECOTRUST wordmark under the mark */
.logo img { width: 56px; height: 56px; }

/* ==========================================================================
   2–5. Hero
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* Figma: header ends at y=73, Body starts at y=130 and pads 24px → 81px */
  padding-top: 60px;
}

/* 2. artwork — exported from Figma at 3x */
.hero__art {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3. headline */
.hero__copy { width: 100%; text-align: right; }

.hero__title {
  font-size: 24px;
  line-height: 44px;
  font-weight: 800;
  color: var(--ink);
}

.hero__title a { transition: opacity 0.18s ease; }
.hero__title a:hover { opacity: 0.85; }

.hero__sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 18px;
}

.hero__sub b { font-weight: 500; color: var(--ink); }
.hero__sub span { font-weight: 400; color: var(--ink-70); }

/* 4 + 5. CTA and gift countdown */
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.gift {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}

.gift__timer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border: 1px solid var(--stroke-04);
  border-radius: 8px;
  background: var(--surface-04);
  font-size: 12px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}

.gift__unit { color: var(--ink); }

.gift__unit--sec {
  background: linear-gradient(180deg, var(--danger) 0%, rgba(255, 80, 80, 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gift__sep { font-size: 10px; color: var(--ink); }

.gift__label {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 24px;
  color: var(--muted-2);
}

.gift__icon svg { width: 24px; height: 24px; }

/* ==========================================================================
   7. Why EcoTrust
   ========================================================================== */

.why { overflow: hidden; }

.why__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  translate: -50% -50%;
  rotate: -15deg;
  opacity: 0.08;
  pointer-events: none;
}

/* soft white glow behind the card stack (Figma: Vector 1, blur 120) */
.why__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

/* Figma's blurred Vector 1. A blurred rectangle leaves a visible boxy edge, so
   this is a radial falloff instead — same diffuse lift, no rectangle showing. */
.why__list::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(
    ellipse 55% 45% at 50% 50%,
    rgba(255, 255, 255, 0.022) 0%,
    rgba(255, 255, 255, 0.01) 45%,
    rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.why-card {
  position: relative;
  display: flex;
  flex-direction: row-reverse; /* first child sits on the left */
  align-items: center;
  gap: 8px;
  min-height: 110px;
  padding: 12px;
  overflow: hidden;                 /* keeps the oversized numeral inside the card */
  border: 1px solid #b7b4b447;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--surface-04), var(--surface-04)) padding-box,
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.0) 25%,
      rgba(255, 255, 255, 0.0) 75%,
      rgba(255, 255, 255, 0.0) 100%) border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Figma layers the numeral behind the row rather than placing it in the flow.
   Taking it out of flow keeps the title on one line and lets the card's
   overflow clip any glyph wider than its slot. */
.why-card__num {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  font-size: 64px;
  line-height: 64px;
  font-weight: 700;
  text-align: center;
  opacity: 0.1;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* reserve the 45px gutter Figma leaves for the numeral, on the relevant side */
.why-card--rtl { padding-left: 45px; }
.why-card--ltr { padding-right: 45px; }
.why-card--rtl .why-card__num { left: 2px; }
.why-card--ltr .why-card__num { right: 2px; }

.why-card__body { flex: 1 1 auto; min-width: 0; }

.why-card__title { white-space: nowrap; }

.why-card--rtl .why-card__body { text-align: right; }
.why-card--ltr .why-card__body { text-align: left; }

.why-card__title {
  font-size: 18px;
  line-height: 36px;
  font-weight: 700;
  color: var(--ink);
}

.why-card__text {
  font-size: 12px;
  line-height: 24px;
  color: var(--ink-70);
}

.why-card__img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }

/* ==========================================================================
   8–10. Social proof
   ========================================================================== */

.proof { overflow: hidden; }

/* diffuse white glow (Figma: Polygon 4, blur 120) — radial rather than a
   blurred box, and centred on the counter so the ticker cards below keep
   reading at their true 4% fill instead of sitting on a lit backdrop. */
.proof::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  width: 680px;
  height: 420px;
  translate: -50% 0;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.01) 45%,
    rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

/* 8. live trust counter */
.trust-pill {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  padding: 4px 12px 4px 8px;
  border: 1px solid transparent;
  border-radius: 99999px;
  background:
    linear-gradient(var(--surface-04), var(--surface-04)) padding-box,
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) border-box;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.trust-pill img { width: 24px; height: 24px; }

.trust-pill__text {
  font-size: 16px;
  line-height: 28px;
  color: var(--ink-70);
  white-space: nowrap;
}

.trust-pill__text b {
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* blinking green live dot with halo */
.live-dot {
  position: relative;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
}

.live-dot i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%);
}

.live-dot i:nth-child(1) { animation: live-halo 2s ease-out infinite; }
.live-dot i:nth-child(2) { animation: live-halo 2s ease-out infinite 1s; }
.live-dot i:nth-child(3) { animation: live-blink 2s ease-in-out infinite; box-shadow: 0 0 8px 2px rgba(51, 198, 161, 0.45); }

@keyframes live-halo {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(3.6); opacity: 0; }
}

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* 9. stats */
.stats {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat img { width: 48px; height: 48px; }

.stat__value {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.stat__value b {
  font-size: 20px;
  line-height: 36px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__unit { font-size: 10px; line-height: 20px; color: var(--ink-70); }

.stat__label { font-size: 12px; line-height: 24px; color: var(--ink-70); }

.stats__rule {
  flex: 0 0 1px;
  width: 1px;
  height: 80px;
  opacity: 0.4;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 50%,
    rgba(255, 255, 255, 0) 100%);
}

/* 10. activity ticker */
.ticker {
  position: relative;
  width: 100%;
  max-width: var(--content);
  margin: 24px auto 0;
}

.ticker__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* fade out the trailing half-card on the left */
  -webkit-mask-image: linear-gradient(to left, #000 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to left, #000 78%, rgba(0, 0, 0, 0) 100%);
}

.ticker__viewport::-webkit-scrollbar { display: none; }
.ticker__viewport.is-dragging { cursor: grabbing; }

.ticker__track {
  display: flex;
  gap: 12px;
  width: max-content;
}

.ticker__card {
  flex: 0 0 240px;
  width: 240px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* under RTL this is the right-hand edge */
  gap: 4px;
  padding: 4px 8px 8px;
  border: 1px solid #c9c5c52e;
  border-radius: var(--radius-card);
  background:
    linear-gradient(var(--surface-04), var(--surface-04)) padding-box,
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.0) 50%,
      rgba(255, 255, 255, 0.0) 100%) border-box;
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
}

.ticker__time {
  font-size: 12px;
  line-height: 24px;
  color: var(--ink-70);
  opacity: 0.6;
}

.ticker__row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ticker__text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 24px;
  text-align: right;
}

.ticker__text b { font-weight: 700; color: var(--ink); }
.ticker__text span { font-weight: 400; color: var(--ink-70); }

.ticker__bar {
  flex: 0 0 4px;
  width: 4px;
  height: 40px;
  border-radius: 4px;
  background: #ffffff;
  opacity: 0.2;
}

/* ==========================================================================
   11. Steps
   ========================================================================== */

.steps { overflow: hidden; }

.steps__stars {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 393px;   /* the exported star field is 393 × 502 */
  height: 502px;
  translate: -50% 0;
  background: url("../assets/stars.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.steps__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 4px;
}

.step {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 12px;
}

.step__body { flex: 1 1 auto; text-align: right; padding-bottom: 16px; }

.step__title {
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink);
}

.step__text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 24px;
  color: var(--ink-70);
}

.step__marker {
  flex: 0 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.step__num {
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step__line {
  flex: 1 1 auto;
  width: 2px;
  min-height: 40px;
  opacity: 0.1;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.1) 100%);
}

/* ==========================================================================
   12. Plans
   ========================================================================== */

.plans { overflow: hidden; }

/* full-bleed on mobile so the peeking cards are measured against the whole
   screen, not against the section's 16px gutter */
.plans__viewport {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.plans__viewport::-webkit-scrollbar { display: none; }

.plans__track {
  display: flex;
  flex-direction: row-reverse; /* ۸ / ۱۲ / ۴ left-to-right, as laid out in Figma */
  align-items: stretch;
  gap: 16px;
  width: max-content;
  /* centres the middle card and leaves a sliver of each neighbour showing */
  padding-inline: calc((100vw - min(321px, 100vw - 88px)) / 2);
  margin-inline: auto;
}

.plan {
  position: relative;
  flex: 0 0 min(321px, calc(100vw - 88px));
  width: min(321px, calc(100vw - 88px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke-08);
  border-radius: var(--radius-plan);
  background: rgba(22, 22, 26, 0.6);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  scroll-snap-align: center;
}

.plan.is-featured { background: rgba(26, 24, 38, 0.7); }

/* blurred polygon glow at the top of each card */
.plan__glow {
  position: absolute;
  top: -190px;
  left: 50%;
  width: 398px;
  height: 398px;
  translate: -50% 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.plan--8  .plan__glow { background: #506dff; opacity: 0.2; }
.plan--12 .plan__glow { background: var(--brand); opacity: 0.4; }
.plan--4  .plan__glow { background: #9cadff; opacity: 0.2; }

.plan > *:not(.plan__glow) { position: relative; z-index: 1; }

.plan__head { display: flex; flex-direction: column; gap: 4px; }

.plan__badge-row {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.plan__badge {
  padding: 2px 12px 4px;
  border: 1px solid var(--stroke-08);
  border-radius: 20px;
  background: var(--surface-04);
  font-size: 12px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink);
}

.plan__mark { width: 48px; height: 48px; }

.plan__title {
  font-size: 20px;
  line-height: 36px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.plan__sub {
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
  text-align: right;
}

.plan__pricing {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
}

.segmented {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 32px;
  padding: 4px;
  border: 1px solid var(--stroke-04);
  border-radius: 1000px;
  background: var(--surface-04);
}

.segmented__tab {
  padding: 0 8px;
  border-radius: 1000px;
  font-size: 12px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-70);
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.segmented__tab.is-active {
  background: rgba(0, 0, 0, 0.4);
  color: var(--ink);
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.06);
}

.segmented__tab:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }

.price {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
}

.price__unit,
.price__approx {
  font-size: 12px;
  line-height: 24px;
  color: var(--muted);
}

.price__value {
  font-size: 24px;
  line-height: 44px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.price.is-total .price__approx { visibility: hidden; }

.plan__divider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan__divider span {
  flex: 1 1 auto;
  height: 1px;
  border-radius: 8px;
  background: var(--surface-04);
}

.plan__divider em {
  font-style: normal;
  font-size: 12px;
  line-height: 24px;
  color: var(--ink-70);
  opacity: 0.6;
}

.plan__features { display: flex; flex-direction: column; gap: 4px; }

.plan__features li {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 22px;
  color: var(--ink);
  text-align: right;
}

.plan__features li::after {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--stroke-04);
  border-radius: 50%;
  background: var(--surface-04) url("../assets/icon-check.svg") center / 10px 10px no-repeat;
}

.plan__features li span { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   13. Sticky CTA
   ========================================================================== */

.sticky {
  position: fixed;
  inset-inline: 0;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.28s ease, translate 0.28s ease;
}

.sticky[hidden] { display: none; }
.sticky.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }

.sticky__bar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: var(--content);
  min-height: 72px;
  padding: 8px;
  border: 1px solid var(--surface-08);
  border-radius: var(--radius-card);
  background: var(--surface-08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.sticky__btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 8px 0px;
  font-size: 14px;
}

.sticky__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* under RTL this is the right-hand edge */
  gap: 4px;
  min-width: 0;
  padding-bottom: 2px;
}

.rotator { height: 28px; overflow: hidden; }

.rotator__list {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rotator__list li {
  height: 28px;
  font-size: 15px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.sticky__answer {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink);
}

.sticky__answer img { width: 20px; height: 20px; }

/* ==========================================================================
   Desktop — content column keeps its mobile width, surroundings expand
   ========================================================================== */

@media (min-width: 768px) {
  .glow-hero {
    width: 900px;
    height: 700px;
    top: -320px;
    margin-inline-start: -450px;
    filter: blur(180px);
  }

  section { padding: 40px var(--gutter); }

  /* 10. ticker — as wide as the plan section, with roomier cards */
  .ticker {
    max-width: var(--wide);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ticker__viewport {
    -webkit-mask-image: linear-gradient(to left, #000 92%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, #000 92%, rgba(0, 0, 0, 0) 100%);
  }

  .ticker__card {
    flex-basis: 320px;
    width: 320px;
    min-height: 104px;
    padding: 8px 12px 12px;
  }

  .ticker__text { font-size: 15px; line-height: 26px; }
  .ticker__bar { height: 48px; }

  /* 12. plans — all three side by side at the Figma frame width */
  .plans__viewport {
    width: auto;
    margin-inline: 0;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 12px 0 24px;
  }

  .plans__track {
    width: 100%;
    max-width: var(--wide);
    /* Figma centres the row, so the taller 12-month card overhangs evenly */
    align-items: center;
    justify-content: center;
    padding-inline: 0;
  }

  .plan {
    flex: 0 1 320px;
    width: 320px;
    min-height: 460px;             /* Figma: 4- and 8-month cards */
  }

  .plan.is-featured { min-height: 512px; } /* Figma: the 12-month card */

  /* 7. why-us glow reads better a touch wider */
  .why__watermark { width: 300px; height: 300px; }
}

@media (min-width: 1200px) {
  .glow-hero { width: 1100px; margin-inline-start: -550px; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}