/* ══════════════════════════════════════════════════════════════
   ZIIRA — landing3
   The argument page. «زیرا» means "because", and every act opens
   with the brand as the reason-word. One particle field behind
   everything begins and ends as the official mark.

   Violet, asymmetric, RTL-native. Scroll-driven motion lives in
   main.js; CSS owns materials, type, and non-gesture states.
   ══════════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'SGKara';
  src: url('fonts/SGKara-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SGKara';
  src: url('fonts/SGKara-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SGKara';
  src: url('fonts/SGKara-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ─── Tokens ────────────────────────────────────────────── */
:root {
  --ink-0: #05030A;
  --ink-1: #090612;
  --ink-2: #100A1D;
  --ink-3: #170F2A;

  --v-200: #DDD0FF;
  --v-300: #C4A9FF;
  --v-400: #A855F7;
  --v-500: #8B3DF5;
  --v-600: #6D28D9;
  --v-700: #4C1D95;

  /* LCD greens — the "signal lost" costume. */
  --lcd-bg: #16240F;
  --lcd-tx: #B8E986;

  /* Live accent: everything accent-coloured points at these, so
     the SMS blackout can re-dress the whole page by tweening
     three variables. */
  --live-acc:  #A855F7;
  --live-deep: #6D28D9;
  --live-soft: #C4A9FF;

  --tx-0: #F6F2FF;
  --tx-1: rgba(246, 242, 255, 0.70);
  --tx-2: rgba(246, 242, 255, 0.48);
  --tx-3: rgba(246, 242, 255, 0.28);

  --mat-structural:  rgba(255, 255, 255, 0.028);
  --mat-raised:      rgba(255, 255, 255, 0.052);
  --mat-interactive: rgba(255, 255, 255, 0.085);

  --line-0: rgba(255, 255, 255, 0.07);
  --line-1: rgba(255, 255, 255, 0.12);
  --line-bright: rgba(255, 255, 255, 0.18);

  --gap-xs: 0.5rem;
  --gap-s: 0.875rem;
  --gap-m: 1.5rem;
  --gap-l: 2.5rem;
  --gap-xl: 4rem;
  --act-y: clamp(6rem, 13vw, 11rem);

  --r-s: 0.625rem;
  --r-m: 1rem;
  --r-l: 1.5rem;
  --r-xl: 2rem;

  --wrap: 78rem;
  /* One gutter value: .wrap, .nav__inner and the copy scrims all
     read it, so the scrim can bleed exactly to the screen edge on
     phones and no further. */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  --t-fast: 140ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-base: 260ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-slow: 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

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

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  /* `clip` where it exists: unlike `hidden` it makes no scroll
     container, so a stray overflow can't be panned to on touch —
     which is exactly how the decorative scrims used to let the
     whole page slide sideways on a phone. `hidden` first as the
     fallback for Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--tx-0);
  font-family: 'SGKara', system-ui, sans-serif;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

body.is-loading { overflow: hidden; }
body.is-loading main,
body.is-loading .nav,
body.is-loading .rail,
body.is-loading .footer { opacity: 0; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--v-500); color: #fff; }

:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; inset-inline-start: 1rem; top: -100%;
  z-index: 100; padding: 0.75rem 1.25rem;
  background: var(--v-500); color: #fff; border-radius: var(--r-s);
  transition: top var(--t-base);
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─── Field + light control layers ──────────────────────── */
.field {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Moderate global veil; text blocks add their own local scrim. */
.veil {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 42%, rgba(5, 3, 10, 0.30) 0%, rgba(5, 3, 10, 0.58) 64%, rgba(5, 3, 10, 0.9) 100%),
    linear-gradient(to bottom, rgba(5, 3, 10, 0.42) 0%, transparent 16%, transparent 84%, rgba(5, 3, 10, 0.72) 100%);
}

/* Film grain — one repeating turbulence tile. */
.grain {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ─── Loader ────────────────────────────────────────────── */
.boot {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center;
  gap: var(--gap-m);
  background: var(--ink-0);
}
.boot__mark {
  height: 88px; width: auto;
  overflow: visible;
}
.boot__mark path {
  fill: var(--v-400);
  fill-opacity: 0;                 /* GSAP raises it after the trace */
  stroke: var(--v-300);
  stroke-width: 4;                 /* viewBox units */
  stroke-linecap: round;
}
.boot__word {
  font-weight: 600; font-size: 1.15rem;
  letter-spacing: 0.35em; padding-inline-start: 0.35em; /* recentre the tracked text */
  color: var(--tx-2);
  opacity: 0;
}

/* ─── Rail (act index) ──────────────────────────────────── */
.rail {
  position: fixed; z-index: 40;
  left: clamp(1rem, 2.2vw, 2rem); top: 50%;
  translate: 0 -50%;
  display: grid; gap: 1.05rem;
  padding-inline-start: 1rem;
}
.rail__line {
  position: absolute; inset-block: 0.4rem; left: 0;
  width: 1px; background: var(--line-1);
}
.rail__line i {
  position: absolute; inset-inline: 0; top: 0;
  height: 100%; background: var(--live-acc);
  transform: scaleY(0); transform-origin: top;
}
.rail a {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.72rem; color: var(--tx-3);
  transition: color var(--t-base);
}
.rail a b { font-weight: 600; font-size: 0.78rem; }
.rail a span { letter-spacing: 0.06em; opacity: 0; translate: -4px 0; transition: opacity var(--t-base), translate var(--t-base); }
.rail a:hover span, .rail a.is-active span { opacity: 1; translate: 0 0; }
.rail a.is-active { color: var(--live-soft); }
@media (max-width: 1100px) { .rail { display: none; } }

/* ─── Nav ───────────────────────────────────────────────── */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  padding-block: var(--gap-s);
  transition: background var(--t-slow), backdrop-filter var(--t-slow),
              border-color var(--t-slow), padding var(--t-slow);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  padding-block: 0.625rem;
  background: rgba(9, 6, 18, 0.62);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: var(--line-0);
}
.nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--gap-m);
}

.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand__mark { height: 30px; width: 10.1px; fill: var(--live-acc); }
.brand__name { font-weight: 600; font-size: 1.25rem; }

.nav__links {
  display: flex; gap: var(--gap-m);
  margin-inline-start: auto;
  font-size: 0.95rem; color: var(--tx-1);
}
.nav__links a { position: relative; padding-block: 0.25rem; transition: color var(--t-fast); }
.nav__links a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0;
  height: 1px; background: var(--live-acc);
  transform: scaleX(0); transform-origin: inline-end;
  transition: transform var(--t-base);
}
.nav__links a:hover { color: var(--tx-0); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: inline-start; }

.nav__actions { display: flex; align-items: center; gap: var(--gap-xs); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions { margin-inline-start: auto; }
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  --btn-y: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-y) 1.15rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  line-height: 1.4; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-fast), background var(--t-base),
              border-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}
.btn--lg { --btn-y: 0.85rem; padding-inline: 1.75rem; font-size: 1.05rem; }

.btn--primary {
  background: linear-gradient(180deg, var(--live-acc), var(--live-deep));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
              0 10px 34px -12px color-mix(in srgb, var(--live-acc) 85%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
              0 16px 44px -12px var(--live-acc);
}
/* Feedback on press, never on release. */
.btn:active { transform: scale(0.97); transition-duration: 90ms; }

.btn--ghost { color: var(--tx-1); }
.btn--ghost:hover { color: var(--tx-0); background: var(--mat-interactive); }

.btn--quiet {
  background: var(--mat-raised);
  border-color: var(--line-1);
  color: var(--tx-0);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--quiet:hover { background: var(--mat-interactive); border-color: var(--line-bright); }

/* ─── Type ──────────────────────────────────────────────── */
/* Persian display type: generous leading, near-zero tracking —
   Latin display conventions collide the script. */
.hero__title, .act__title, .cta__title {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-wrap: balance;
  margin: 0;
}
.hero__title { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.32; }
.act__title  { font-size: clamp(1.8rem, 3.8vw, 3rem);   line-height: 1.42; }
.cta__title  { font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.32; }

.hero__title em {
  display: block;
  font-style: normal;
  background: linear-gradient(100deg, var(--v-200) 0%, var(--v-400) 50%, var(--v-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Split-text lines: the clip box grows past the line box and pulls
   back, so Persian descenders never get shaved. */
.line {
  display: block; overflow: hidden;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.line > span { display: block; will-change: transform; }

/* The «زیرا…» device — brand as the reason-word. */
.because {
  margin: 0 0 var(--gap-s);
  font-size: 0.98rem;
  color: var(--tx-2);
}
.because b {
  color: var(--live-acc);
  font-weight: 600;
  margin-inline-end: 0.15em;
}
.because--lg { font-size: 1.15rem; }

.act__lead {
  margin: var(--gap-m) 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(246, 242, 255, 0.82);
  line-height: 1.9;
}
.act__lead b { color: var(--tx-0); font-weight: 600; }

/* ─── Acts ──────────────────────────────────────────────── */
.act { position: relative; z-index: 3; padding-block: var(--act-y); }
.act__head { position: relative; max-width: 50rem; }
.act__head--center { text-align: center; margin-inline: auto; }
.act__head--center .act__lead { margin-inline: auto; }
.act__foot { margin-top: var(--gap-xl); }

/* Local scrim: guarantees copy contrast wherever the field is dense.
   The horizontal bleed is a percentage of the copy column, which is
   fine while .wrap has margins to spend it into. Once .wrap fills the
   viewport it has nowhere to go — see the phone override below, which
   trades the percentage for exactly one gutter. */
.act__head::before, .hero__copy::before, .cta__inner::before, .cols__text::before {
  content: ''; position: absolute; z-index: -1;
  inset: -12% -14%;
  background: radial-gradient(closest-side, rgba(5, 3, 10, 0.72), transparent);
  pointer-events: none;
}

.act__hint {
  display: flex; align-items: center; gap: 0.5rem;
  margin: var(--gap-l) 0 0;
  font-size: 0.85rem; color: var(--tx-2);
}
.act__hint svg { width: 14px; height: 14px; fill: none; stroke: var(--live-acc); stroke-width: 1.8; stroke-linecap: round; }

/* Pinned stages */
.pin {
  /* Always the containing block for its absolute children, so the
     kinetic type doesn't jump when GSAP fixes/unfixes the element. */
  position: relative;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: 5.5rem 3rem;
}
.pin__grid {
  display: grid; gap: var(--gap-xl);
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
}
@media (max-width: 940px) {
  .pin__grid { grid-template-columns: 1fr; gap: var(--gap-l); }
}
.act--pin { padding-block: 0; }
#switch, #sms { padding-block: 0; }

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 3;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: 7.5rem 5rem;
}
.hero__grid {
  display: grid; gap: var(--gap-xl);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.hero__copy { position: relative; }
.hero__mark { position: relative; min-height: 30rem; }
.hero__staticmark {
  display: none; /* the particle field is the mark; this is the reduced-motion stand-in */
  width: 34%; margin-inline: auto;
  fill: var(--v-400);
  filter: drop-shadow(0 0 34px rgba(139, 61, 245, 0.45));
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__mark { display: none; }
  .demo__thread { min-height: 15rem; }
  .pin { padding-block: 5rem 2rem; }
  .lcd__body { min-height: 9.5rem; }
}

/* WebGL refused the context: the static asset stands in. */
.no-field .hero__staticmark { display: block; }

.offer {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  margin-bottom: var(--gap-m);
  border: 1px solid var(--line-1); border-radius: 999px;
  background: var(--mat-raised);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 0.9rem; color: var(--tx-1);
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-fast);
}
.offer:hover { border-color: var(--line-bright); background: var(--mat-interactive); }
.offer:active { transform: scale(0.98); }
.offer__badge {
  padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--live-deep); color: #fff;
  font-size: 0.78rem; font-weight: 600;
}
.offer__text { color: var(--tx-0); }
.offer__arrow { width: 14px; height: 14px; fill: none; stroke: var(--tx-2); stroke-width: 1.8; stroke-linecap: round; }

.hero__sub {
  margin: var(--gap-m) 0 0;
  max-width: 42ch;
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  color: rgba(246, 242, 255, 0.86);
  line-height: 1.9;
}

.hero__cta {
  margin-top: var(--gap-l);
  display: flex; gap: var(--gap-xs); flex-wrap: wrap;
}

.hero__facts {
  margin: var(--gap-l) 0 0; padding: 0;
  list-style: none;
  display: flex; gap: var(--gap-m); flex-wrap: wrap;
  font-size: 0.9rem; color: var(--tx-2);
}
.hero__facts li { display: flex; align-items: center; gap: 0.5rem; }
.hero__facts li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--live-acc);
}

.scroller {
  position: absolute; inset-inline: 0; bottom: 2rem;
  display: grid; justify-items: center; gap: 0.6rem;
  font-size: 0.75rem; letter-spacing: 0.16em; color: var(--tx-3);
}
.scroller__line {
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, transparent, var(--live-acc));
}

/* ─── Demo (model switcher) ─────────────────────────────── */
.demo {
  border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
  background: rgba(16, 10, 29, 0.6);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 1px 0 var(--line-bright) inset,
              0 40px 90px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.demo__chrome {
  display: flex; align-items: center; gap: var(--gap-s); flex-wrap: wrap;
  padding: var(--gap-s) var(--gap-m);
  border-bottom: 1px solid var(--line-0);
}

.switcher {
  position: relative;
  display: flex; gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line-0);
}
.switcher__thumb {
  position: absolute; top: 0.25rem; bottom: 0.25rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--live-acc), var(--live-deep));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
              0 6px 20px -8px var(--live-acc);
  will-change: transform, width;
}
.switcher__opt {
  position: relative; z-index: 1;
  padding: 0.42rem 0.9rem;
  border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--tx-2); cursor: pointer;
  transition: color var(--t-base);
}
.switcher__opt:hover { color: var(--tx-1); }
.switcher__opt.is-active { color: #fff; }

.ctx {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-inline-start: auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  background: rgba(94, 234, 212, 0.08);
  color: #5EEAD4;
  font-size: 0.8rem; font-weight: 600;
}
.ctx svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ctx.is-pulsing { animation: ctxPulse 700ms cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes ctxPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); background: rgba(94, 234, 212, 0.18); }
  100% { transform: scale(1); }
}

.demo__thread {
  position: relative;
  display: grid; gap: var(--gap-s);
  padding: var(--gap-m);
  min-height: 19rem;
  align-content: start;
}
/* The context thread itself: one unbroken line beside every
   message. The line is the point of the section. */
.demo__spine {
  position: absolute; inset-block: 1.2rem;
  inset-inline-start: 0.95rem;
  width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--live-acc), color-mix(in srgb, var(--live-acc) 25%, transparent));
}
.msg { position: relative; max-width: 40ch; }
.msg p { margin: 0; font-size: 0.95rem; line-height: 1.8; }
.msg--user {
  justify-self: start;
  margin-inline-start: 1.4rem;   /* clears the spine */
  padding: 0.7rem 1rem;
  border-radius: var(--r-m) var(--r-m) var(--r-m) 0.3rem;
  background: var(--mat-interactive);
  border: 1px solid var(--line-0);
}
.msg--ai {
  justify-self: end;
  padding: 0.8rem 1.05rem;
  border-radius: var(--r-m) var(--r-m) 0.3rem var(--r-m);
  background: linear-gradient(180deg, rgba(139, 61, 245, 0.16), rgba(109, 40, 217, 0.07));
  border: 1px solid rgba(168, 85, 247, 0.24);
}
.msg--ai b { color: var(--v-200); font-weight: 600; }
.msg__who {
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--tx-2);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v-400); }
.dot[data-model="claude"]   { background: #E8845C; }
.dot[data-model="gemini"]   { background: #5B9BF8; }
.dot[data-model="deepseek"] { background: #4C6FFF; }

/* ─── Marquee ───────────────────────────────────────────── */
.strip {
  position: relative; z-index: 3;
  padding-block: var(--gap-m);
  border-block: 1px solid var(--line-0);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip__track {
  /* Latin belt loops by negative translate — needs LTR flow. */
  direction: ltr;
  display: flex; align-items: center; gap: var(--gap-m);
  width: max-content;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--tx-3);
  will-change: transform;
}
.strip__track i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--v-600); flex: none;
}

/* ─── Two-column acts ───────────────────────────────────── */
.cols {
  display: grid; gap: var(--gap-xl);
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
}
.cols__text { position: relative; }
@media (max-width: 940px) { .cols { grid-template-columns: 1fr; } }

.checks { margin: var(--gap-m) 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.checks li {
  position: relative; padding-inline-start: 1.75rem;
  font-size: 0.98rem; color: var(--tx-1);
}
/* Physical borders: logical ones flip under RTL and break the tick. */
.checks li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0.6em;
  width: 0.62rem; height: 0.34rem;
  border-left: 1.8px solid var(--live-soft);
  border-bottom: 1.8px solid var(--live-soft);
  transform: rotate(-45deg);
}

/* ─── Cashback counter ──────────────────────────────────── */
.cols__counter {
  display: grid; place-items: center;
  min-height: clamp(20rem, 46vw, 26rem);
}
.counter {
  display: grid; justify-items: center; gap: 0.3rem;
  text-align: center;
}
.counter__label { font-size: 0.85rem; color: var(--tx-2); }
.counter__amount {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem); font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(139, 61, 245, 0.5);
}
.counter__unit { font-size: 0.9rem; color: var(--tx-2); }
.counter__days {
  display: flex; align-items: flex-end; gap: 0.4rem;
  height: 78px; margin-top: var(--gap-s);
}
.counter__days span {
  width: 0.42rem; height: var(--h, 20px);
  border-radius: 999px;
  background: var(--v-600); opacity: 0.55;
  transform-origin: bottom;
}
.counter__note { margin-top: var(--gap-s); font-size: 0.8rem; color: var(--tx-3); }

/* ─── SMS blackout act ──────────────────────────────────── */
.act--sms { overflow: clip; }
.sms__kinetic {
  position: absolute; z-index: 0;
  top: 50%; left: 50%;
  translate: -50% -54%;
  font-size: clamp(9rem, 30vw, 24rem);
  font-weight: 600; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(159, 232, 111, 0.30);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
}
.pin__grid--sms { position: relative; z-index: 1; }

.lcd {
  justify-self: center;
  width: min(21rem, 92vw);
  border-radius: var(--r-l);
  background: var(--lcd-bg);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 6px #0D1508,
              0 0 0 7px rgba(184, 233, 134, 0.14),
              0 34px 80px -30px rgba(0, 0, 0, 0.95);
  padding: 0.85rem;
  color: var(--lcd-tx);
  font-size: 0.82rem; line-height: 1.7;
  position: relative;
}
/* Scanlines. */
.lcd::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
  pointer-events: none;
}
.lcd__bar {
  display: flex; justify-content: space-between;
  font-size: 0.62rem; opacity: 0.7;
  border-bottom: 1px solid rgba(184, 233, 134, 0.22);
  padding-bottom: 0.3rem; margin-bottom: 0.5rem;
}
.lcd__op { letter-spacing: 0.1em; }
.lcd__body { min-height: 11.5rem; display: grid; gap: 0.4rem; align-content: start; }
.lcd__body .l { white-space: pre-wrap; }
.lcd__body .l--me { opacity: 0.62; }
.lcd__hint {
  margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px solid rgba(184, 233, 134, 0.22);
  font-size: 0.72rem; opacity: 0;
}

/* ─── Cards ─────────────────────────────────────────────── */
.grid { display: grid; gap: var(--gap-s); margin-top: var(--gap-xl); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: var(--gap-m);
  border: 1px solid var(--line-0);
  border-radius: var(--r-l);
  background: rgba(9, 6, 18, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color var(--t-base), background var(--t-base);
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
              rgba(139, 61, 245, 0.16), transparent 70%);
  opacity: 0; transition: opacity var(--t-base);
  pointer-events: none;
}
.card:hover { border-color: var(--line-1); background: rgba(16, 10, 29, 0.6); }
.card:hover::before { opacity: 1; }

.card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 600; }
.card p { margin: 0; font-size: 0.95rem; color: var(--tx-1); line-height: 1.8; }
.card__icon {
  width: 26px; height: 26px; margin-bottom: var(--gap-s);
  fill: none; stroke: var(--live-soft); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.card--b { border-color: rgba(168, 85, 247, 0.14); }

.act--business { position: relative; }
.act--business::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 50% at 50% 0%, rgba(76, 29, 149, 0.26), transparent 70%);
  pointer-events: none;
}

/* ─── Trust strip ───────────────────────────────────────── */
.trust {
  margin: var(--gap-xl) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--gap-s);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) { .trust { grid-template-columns: 1fr; } }
.trust li {
  padding: var(--gap-m);
  border-inline-start: 2px solid var(--live-acc);
  background: linear-gradient(to left, transparent, rgba(139, 61, 245, 0.05));
}
.trust h3 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 600; }
.trust p { margin: 0; font-size: 0.92rem; color: var(--tx-1); line-height: 1.75; }

/* ─── Final CTA ─────────────────────────────────────────── */
.cta {
  position: relative; z-index: 3;
  padding-block: clamp(8rem, 18vw, 15rem);
  text-align: center;
}
.cta__inner { position: relative; }
.cta__sub {
  margin: var(--gap-m) auto var(--gap-l);
  max-width: 40ch; font-size: 1.1rem;
  color: rgba(246, 242, 255, 0.82); line-height: 1.85;
}

/* ─── Footer ────────────────────────────────────────────── */
.footer {
  position: relative; z-index: 3;
  border-top: 1px solid var(--line-0);
  background: rgba(5, 3, 10, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-block: var(--gap-xl) var(--gap-m);
}
.footer__inner {
  display: grid; gap: var(--gap-l);
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
/* Four columns since the legal pages landed; 700px was the right
   fold point for three and is too late for four. */
@media (max-width: 880px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
.footer__brand p { margin: var(--gap-s) 0 0; font-size: 0.92rem; color: var(--tx-2); max-width: 28ch; }
.footer__col { display: grid; gap: 0.5rem; align-content: start; font-size: 0.92rem; }
.footer__col h3 { margin: 0 0 0.25rem; font-size: 0.82rem; letter-spacing: 0.08em; color: var(--tx-3); font-weight: 600; }
.footer__col a { color: var(--tx-1); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--live-soft); }
.footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--gap-s);
  margin-top: var(--gap-xl); padding-top: var(--gap-m);
  border-top: 1px solid var(--line-0);
  font-size: 0.85rem; color: var(--tx-3);
}

/* ─── FAQ (non-act; crawlable answers) ──────────────────── */
.faq {
  position: relative; z-index: 3;
  padding-block: var(--act-y);
}
.faq__list {
  margin: var(--gap-xl) auto 0;
  max-width: 46rem;
}
.faq__item {
  padding-block: var(--gap-m);
  border-top: 1px solid var(--line-0);
}
.faq__item:last-child { border-bottom: 1px solid var(--line-0); }
.faq__item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem; font-weight: 600; color: var(--tx-0);
}
.faq__item p {
  margin: 0;
  font-size: 0.98rem; color: var(--tx-1); line-height: 1.9;
}

/* ─── Screen-reader-only (visible to crawlers/AT, not on screen) ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Phones ────────────────────────────────────────────── */
/* Everything above this point assumes .wrap has margins to spend.
   Below ~560px it doesn't: it fills the viewport, so any percentage
   bleed becomes page-wide horizontal overflow, and every intrinsic
   width has to be re-checked against ~350px of usable column. */
@media (max-width: 560px) {
  /* The overflow that let the whole page slide sideways. One gutter
     of bleed puts the scrim edge exactly on the screen edge; it also
     darkens harder, because on phones the field sits directly behind
     the copy instead of beside it. */
  .act__head::before, .hero__copy::before, .cta__inner::before, .cols__text::before {
    inset: -8% calc(-1 * var(--gutter));
    background: radial-gradient(closest-side, rgba(5, 3, 10, 0.88), rgba(5, 3, 10, 0.35));
  }

  /* Display type: the clamp minimums were tuned for tablets and
     don't survive a 320px screen. «بهترین جوابِ دنیا،» is the
     longest unbreakable run and sets these floors. */
  .hero__title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .cta__title  { font-size: clamp(1.85rem, 8.4vw, 2.3rem); }
  .act__title  { font-size: clamp(1.5rem, 6.4vw, 1.8rem); }

  .hero { padding-block: 6.5rem 4rem; }
  .hero__sub { font-size: 1rem; }

  /* 298px intrinsic doesn't fit a 320px screen's 280px column. */
  .offer {
    max-width: 100%;
    font-size: 0.82rem;
    padding-inline: 0.4rem 0.75rem;
  }

  /* The switcher is 318px intrinsic — wider than the column once the
     chrome's own padding is counted, and .demo clips its overflow, so
     the fourth model used to be cut off and untappable. Let the four
     options share the row instead of sizing to their labels. */
  .demo__chrome { padding: var(--gap-s); gap: var(--gap-xs); }
  .switcher { width: 100%; }
  .switcher__opt {
    flex: 1 1 0; min-width: 0;
    padding-inline: 0.35rem;
    font-size: 0.82rem;
  }
  .ctx { margin-inline-start: 0; font-size: 0.75rem; }

  .demo__thread { padding: var(--gap-s); }
  .msg { max-width: 100%; }

  /* Two footer columns leave ~155px each — narrower than the link
     text they hold. */
  .footer__inner { grid-template-columns: 1fr; gap: var(--gap-m); }
  .trust li { padding: var(--gap-s) var(--gap-m); }
}

/* ─── Touch ─────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* 38px was under the 44px floor on every button on the page. */
  .btn { --btn-y: 0.8rem; }
  .btn--lg { --btn-y: 0.95rem; }
  .switcher__opt { padding-block: 0.62rem; }
  .footer__col a, .faq__item h3 { padding-block: 0.15rem; }
}

/* Pointer-lit states only where a pointer exists: on touch, :hover
   latches after a tap and the element stays lit until you tap
   elsewhere. */
@media (hover: none) {
  .btn--primary:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
                0 10px 34px -12px color-mix(in srgb, var(--live-acc) 85%, transparent);
  }
  .btn--ghost:hover { color: var(--tx-1); background: none; }
  .btn--quiet:hover { background: var(--mat-raised); border-color: var(--line-1); }
  .offer:hover { border-color: var(--line-1); background: var(--mat-raised); }
  .switcher__opt:hover { color: var(--tx-2); }
  .switcher__opt.is-active:hover { color: #fff; }
  .card:hover { border-color: var(--line-0); background: rgba(9, 6, 18, 0.5); }
  .card:hover::before { opacity: 0; }
  .footer__col a:hover { color: var(--tx-1); }
  .nav__links a:hover { color: var(--tx-1); }
  .nav__links a:hover::after { transform: scaleX(0); }
}

/* ─── Accessibility preferences ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .line > span { transform: none !important; }
  .strip__track { transform: none !important; }
  .scroller, .grain { display: none; }
  .field { display: none; }             /* the static mark stands in */
  .hero__staticmark { display: block; }
  .sms__kinetic { opacity: 0.5; }
  .lcd__hint { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--ink-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .demo, .card { background: var(--ink-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .footer { background: var(--ink-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .veil { background: rgba(5, 3, 10, 0.85); }
  .grain { display: none; }
}

@media (prefers-contrast: more) {
  :root {
    --tx-1: rgba(246, 242, 255, 0.9);
    --tx-2: rgba(246, 242, 255, 0.75);
    --line-0: rgba(255, 255, 255, 0.24);
    --line-1: rgba(255, 255, 255, 0.34);
  }
  .card, .demo, .lcd { background: var(--ink-1); }
}