:root {
  /* slate */
  --s50:#f8fafc; --s100:#f1f5f9; --s200:#e2e8f0; --s300:#cbd5e1; --s400:#94a3b8;
  --s500:#64748b; --s600:#475569; --s700:#334155; --s800:#1e293b; --s900:#0f172a;
  --s950:#020617;
  /* sky */
  --k50:#f0f9ff; --k100:#e0f2fe; --k200:#bae6fd; --k300:#7dd3fc; --k400:#38bdf8;
  --k500:#0ea5e9; --k600:#0284c7; --k700:#0369a1; --k800:#075985; --k900:#0c4a6e;

  --ink: var(--s900);
  --ink-soft: var(--s600);
  --ink-faint: var(--s500);
  --line: var(--s200);
  --line-soft: #e8edf3;
  --paper: var(--s50);
  --paper-pure: #ffffff;

  /* radii — rounded geometry everywhere */
  --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px;
  --r-2xl: 48px; --r-pill: 999px;

  /* elevation — layered, low-alpha, slate-tinted */
  --e1: 0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.04);
  --e2: 0 2px 4px rgba(15,23,42,.03), 0 8px 24px rgba(15,23,42,.06);
  --e3: 0 4px 8px rgba(15,23,42,.04), 0 18px 48px rgba(15,23,42,.08);
  --e4: 0 8px 16px rgba(15,23,42,.05), 0 32px 80px rgba(15,23,42,.11);
  --e-sky: 0 18px 48px -12px rgba(14,165,233,.32);

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.2,1.24,.36,1);
  --t-fast: 180ms; --t-mid: 320ms; --t-slow: 700ms;

  /* rhythm */
  --shell: 1220px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-y: clamp(88px, 12vw, 176px);

  /* live pointer (updated by JS, defaults keep CSS valid without JS) */
  --mx: 0.5; --my: 0.5; --px: 0px; --py: 0px;

  --z-atmos: 0; --z-base: 1; --z-lift: 10; --z-nav: 40; --z-menu: 45; --z-cursor: 90;
}

/* ── 2. reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 108px;
}

body {
  font-family: Vazirmatn, "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", sans-serif;
  font-size: clamp(16px, 1.02vw, 17px);
  line-height: 1.75;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
svg { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible {
  outline: 2.5px solid var(--k500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
::selection { background: var(--k200); color: var(--s900); }

.skip {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px;
  z-index: 100; padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--s900); color: #fff; font-weight: 600;
  transform: translateY(-160%); transition: transform var(--t-mid) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ── 3. typography ─────────────────────────────────────────────────────── */
.display {
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--s900);
  text-wrap: balance;
}
.h2 {
  font-size: clamp(28px, 4.1vw, 54px);
  font-weight: 800; line-height: 1.32; letter-spacing: -.014em;
  color: var(--s900); text-wrap: balance;
}
.h3 { font-size: clamp(20px, 2.1vw, 25px); font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.h4 { font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; line-height: 1.5; }

em {
  font-style: normal;
  background: linear-gradient(105deg, var(--k600) 0%, var(--k400) 45%, var(--k600) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheenText 9s linear infinite;
}
@keyframes sheenText { to { background-position: -220% 0; } }

.lede {
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 62ch;
  font-weight: 400;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--k700);
  background: linear-gradient(180deg, #fff, var(--k50));
  border: 1px solid var(--k100);
  padding: 8px 16px 8px 18px;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(15,23,42,.03), inset 0 1px 0 #fff;
}
.eyebrow--center { display: inline-flex; }
.eyebrow__dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--k500); flex: none;
  box-shadow: 0 0 0 0 rgba(14,165,233,.5);
  animation: dotPulse 2.6s var(--ease-out) infinite;
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,165,233,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(14,165,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}

/* ── 4. layout primitives ──────────────────────────────────────────────── */
.shell {
  inline-size: 100%;
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sec-y); position: relative; }

/* lazy rendering for below-the-fold weight */
.why, .audience, .diff, .place, .numbers {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ── 5. ambient atmosphere ─────────────────────────────────────────────── */
.atmosphere {
  position: fixed; inset: 0; z-index: var(--z-atmos);
  pointer-events: none; overflow: hidden;
}
.atmosphere__grain {
  position: absolute; inset: -50%;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.atmosphere__aurora {
  position: absolute;
  inline-size: 70vmax; block-size: 70vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.atmosphere__aurora--a {
  inset-block-start: -22vmax; inset-inline-end: -14vmax;
  background: radial-gradient(circle at 50% 50%, rgba(186,230,253,.72), rgba(224,242,254,0) 68%);
  transform: translate3d(var(--px), var(--py), 0);
}
.atmosphere__aurora--b {
  inset-block-end: -30vmax; inset-inline-start: -18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(226,232,240,.9), rgba(241,245,249,0) 70%);
  transform: translate3d(var(--px), var(--py), 0);
}

/* ── 6. cursor ─────────────────────────────────────────────────────────── */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; inset-block-start: 0; inset-inline-start: 0;
    z-index: var(--z-cursor); pointer-events: none;
    mix-blend-mode: multiply;
  }
  .cursor__dot, .cursor__ring {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    border-radius: var(--r-pill); will-change: transform;
  }
  .cursor__dot {
    inline-size: 6px; block-size: 6px; margin: -3px 0 0 -3px;
    background: var(--s900);
    transition: opacity var(--t-fast) linear, transform var(--t-fast) var(--ease-out);
  }
  .cursor__ring {
    inline-size: 34px; block-size: 34px; margin: -17px 0 0 -17px;
    border: 1.5px solid var(--s300);
    display: grid; place-items: center;
    transition: inline-size var(--t-mid) var(--ease-spring),
                block-size var(--t-mid) var(--ease-spring),
                margin var(--t-mid) var(--ease-spring),
                background-color var(--t-mid) var(--ease-out),
                border-color var(--t-mid) var(--ease-out);
  }
  .cursor__label {
    font-size: 12px; font-weight: 700; color: #fff;
    opacity: 0; transform: scale(.6);
    transition: opacity var(--t-fast) linear, transform var(--t-mid) var(--ease-spring);
    white-space: nowrap;
  }
  body[data-cursor="link"] .cursor__ring {
    inline-size: 58px; block-size: 58px; margin: -29px 0 0 -29px;
    border-color: var(--k300); background: rgba(224,242,254,.55);
  }
  body[data-cursor="link"] .cursor__dot { opacity: 0; }
  body[data-cursor="tag"] .cursor__ring {
    inline-size: 72px; block-size: 72px; margin: -36px 0 0 -36px;
    background: var(--k500); border-color: var(--k500);
  }
  body[data-cursor="tag"] .cursor__label { opacity: 1; transform: none; }
  body[data-cursor="tag"] .cursor__dot { opacity: 0; }
  body.is-touch .cursor { display: none; }
}

/* ── 7. scroll beam ────────────────────────────────────────────────────── */
.scrollbeam {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: 2px; z-index: calc(var(--z-nav) + 2); pointer-events: none;
}
.scrollbeam i {
  display: block; block-size: 100%; transform-origin: right center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--k600), var(--k400) 60%, var(--k300));
  box-shadow: 0 0 14px rgba(14,165,233,.45);
}
@supports (animation-timeline: scroll()) {
  .scrollbeam i { animation: beam linear both; animation-timeline: scroll(root); }
  @keyframes beam { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── 8. buttons ────────────────────────────────────────────────────────── */
.btn {
  --btn-y: 0px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--r-pill);
  font-weight: 700; letter-spacing: -.005em;
  white-space: nowrap; cursor: pointer;
  isolation: isolate; overflow: hidden;
  transform: translate3d(var(--mgx, 0px), calc(var(--mgy, 0px) + var(--btn-y)), 0);
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
  will-change: transform;
}
.btn__label { position: relative; z-index: 2; }
.btn__arrow {
  position: relative; z-index: 2;
  inline-size: 1.15em; block-size: 1.15em; flex: none;
  transition: transform var(--t-mid) var(--ease-spring);
}
.btn:hover .btn__arrow { transform: translateX(-5px); }

.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--lg { padding: 17px 30px; font-size: 16px; }
.btn--xl { padding: clamp(18px, 2.4vw, 24px) clamp(28px, 4vw, 44px); font-size: clamp(15px, 1.5vw, 19px); }

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--k500), var(--k600) 78%, var(--k700));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(3,105,161,.6),
    0 2px 4px rgba(3,105,161,.18),
    0 12px 28px -8px rgba(14,165,233,.5);
}
.btn--primary:hover {
  --btn-y: -2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(3,105,161,.6),
    0 4px 8px rgba(3,105,161,.16),
    0 22px 44px -10px rgba(14,165,233,.55);
}
.btn--primary:active { --btn-y: 1px; transition-duration: 70ms; }

/* travelling glass sheen */
.btn__sheen {
  position: absolute; inset-block: -60%; inline-size: 42%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55) 50%, transparent);
  transform: skewX(-18deg); z-index: 1; pointer-events: none;
  transition: inset-inline-start 720ms var(--ease-out);
}
.btn:hover .btn__sheen { inset-inline-start: 120%; }

.btn--ghost {
  color: var(--s700);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--e1), inset 0 1px 0 #fff;
}
.btn--ghost:hover {
  --btn-y: -2px;
  color: var(--s900); border-color: var(--k200);
  background: #fff; box-shadow: var(--e2), inset 0 1px 0 #fff;
}
.btn--ghost:active { --btn-y: 1px; }

/* ── 9. nav ────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-nav);
  padding: clamp(12px, 1.6vw, 20px) var(--gutter);
  transition: transform 480ms var(--ease-out);
}
.nav.is-hidden { transform: translateY(-130%); }

.nav__shell {
  max-inline-size: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: 9px 9px 9px 20px;
  border-radius: var(--r-pill);
  background: rgba(248,250,252,.6);
  border: 1px solid rgba(226,232,240,.6);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 18px rgba(15,23,42,.045);
  transition: background-color var(--t-slow) var(--ease-out),
              box-shadow var(--t-slow) var(--ease-out),
              border-color var(--t-slow) var(--ease-out);
}
.nav.is-stuck .nav__shell {
  background: rgba(255,255,255,.82);
  border-color: rgba(226,232,240,.95);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, var(--e2);
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark {
  inline-size: 34px; block-size: 34px; color: var(--k600);
  display: grid; place-items: center;
  transition: transform 620ms var(--ease-spring), color var(--t-mid) var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-14deg) scale(1.06); color: var(--k500); }
.brand__word {
  font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--s500);
  font-family: "Segoe UI", system-ui, sans-serif;
}
.brand__word b { font-weight: 800; color: var(--s900); }

.nav__links {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  margin-inline-end: auto;
}
.nav__links a {
  position: relative; z-index: 2;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  transition: color var(--t-mid) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--s900); }
.nav__pill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  box-shadow: var(--e1), inset 0 1px 0 #fff;
  opacity: 0; z-index: 1;
  transform: translate3d(var(--pill-x, 0px), 0, 0);
  transition: transform 520ms var(--ease-spring), inline-size 520ms var(--ease-spring),
              opacity var(--t-mid) var(--ease-out);
}
@media (max-width: 900px) { .nav__links { display: none; } }

.nav__burger {
  display: none; inline-size: 44px; block-size: 44px;
  border-radius: var(--r-sm); place-items: center; gap: 5px;
  margin-inline-start: auto;
}
.nav__burger i {
  display: block; inline-size: 20px; block-size: 2px; border-radius: 2px;
  background: var(--s700);
  transition: transform var(--t-mid) var(--ease-spring), opacity var(--t-fast) linear;
}
.nav__burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav__burger { display: grid; align-content: center; }
  .nav__shell > .btn--sm { display: none; }
}

.menu {
  max-inline-size: var(--shell); margin: 10px auto 0;
  padding: 14px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--e3);
  display: grid; gap: 2px;
  transform-origin: top center;
  animation: menuIn 420ms var(--ease-spring) both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.menu[hidden] { display: none; }
.menu a {
  padding: 14px 18px; border-radius: var(--r-md);
  font-weight: 600; color: var(--s700);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.menu a:hover { background: var(--s100); color: var(--s900); }
.menu__cta {
  margin-block-start: 6px; text-align: center; color: #fff !important;
  background: linear-gradient(180deg, var(--k500), var(--k600));
  box-shadow: var(--e-sky);
}

[data-reveal] { will-change: transform, opacity; }
[data-reveal="fade"]  { opacity: 0; transition: opacity 900ms var(--ease-out) var(--rd, 0ms); }
[data-reveal="up"]    { opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity 900ms var(--ease-out) var(--rd,0ms), transform 1000ms var(--ease-out) var(--rd,0ms); }
[data-reveal="card"]  { opacity: 0; transform: translate3d(0, 42px, 0) scale(.975);
  transition: opacity 900ms var(--ease-out) var(--rd,0ms), transform 1100ms var(--ease-out) var(--rd,0ms); }
[data-reveal="step"]  { opacity: 0; transform: translate3d(24px, 0, 0);
  transition: opacity 700ms var(--ease-out) var(--rd,0ms), transform 900ms var(--ease-out) var(--rd,0ms); }
[data-reveal="console"] { opacity: 0; transform: translate3d(0, 60px, 0) scale(.94);
  transition: opacity 1200ms var(--ease-out) 180ms, transform 1400ms var(--ease-out) 180ms; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].is-in { will-change: auto; }

/* per-line masked text reveal (built by JS) */
.line { display: block; overflow: hidden; padding-block-end: .08em; margin-block-end: -.08em; }
.line > i {
  display: block; font-style: inherit;
  transform: translate3d(0, 106%, 0) rotate(2.5deg);
  opacity: 0;
  transition: transform 1150ms var(--ease-out) var(--ld, 0ms),
              opacity 900ms var(--ease-out) var(--ld, 0ms);
  will-change: transform;
}
[data-split].is-in .line > i { transform: none; opacity: 1; }

/* ── 11. card chrome (shared) ──────────────────────────────────────────── */
.card {
  position: relative;
  background: linear-gradient(180deg, #fff, #fdfeff 60%, var(--s50));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--e2);
  transition: transform 620ms var(--ease-out), box-shadow 620ms var(--ease-out),
              border-color var(--t-slow) var(--ease-out);
}
/* cursor-following light */
.card__glow {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(56,189,248,.16), rgba(224,242,254,.06) 42%, transparent 72%);
  transition: opacity 420ms var(--ease-out);
}
.card:hover { transform: translate3d(0,-6px,0); box-shadow: var(--e4); border-color: var(--k100); }
.card:hover .card__glow { opacity: 1; }

/* top glass reflection line */
.card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 12%;
  block-size: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 30%, rgba(255,255,255,.95) 70%, transparent);
}

/* ── 12. HERO ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(132px, 17vh, 190px) clamp(64px, 9vw, 110px);
  isolation: isolate;
  overflow: clip;
}
.hero__field { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.hero__grid {
  position: absolute; inset-inline: -20%; inset-block-start: -10%; block-size: 130%;
  background-image:
    linear-gradient(to left, rgba(148,163,184,.19) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.19) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 12%, transparent 74%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 12%, transparent 74%);
  transform: translate3d(var(--px), var(--py), 0);
  animation: gridDrift 24s linear infinite;
  will-change: transform;
}
@keyframes gridDrift { to { background-position: -64px -64px; } }

.hero__glow {
  position: absolute; border-radius: 50%; filter: blur(70px);
  transform: translate3d(var(--px), var(--py), 0);
  will-change: transform;
}
.hero__glow--1 {
  inline-size: 46vmax; block-size: 46vmax;
  inset-block-start: -12vmax; inset-inline-start: -8vmax;
  background: radial-gradient(circle, rgba(125,211,252,.44), transparent 66%);
  animation: breathe 13s var(--ease-io) infinite;
}
.hero__glow--2 {
  inline-size: 38vmax; block-size: 38vmax;
  inset-block-end: -14vmax; inset-inline-end: -6vmax;
  background: radial-gradient(circle, rgba(224,242,254,.9), transparent 68%);
  animation: breathe 17s var(--ease-io) infinite reverse;
}
@keyframes breathe {
  0%,100% { transform: translate3d(var(--px), var(--py), 0) scale(1); opacity: .85; }
  50%     { transform: translate3d(var(--px), var(--py), 0) scale(1.16); opacity: 1; }
}

.hero__beam {
  position: absolute; inset-block-start: -30%; block-size: 160%;
  inline-size: clamp(140px, 20vw, 320px);
  background: linear-gradient(180deg, rgba(186,230,253,0), rgba(224,242,254,.65) 38%, rgba(186,230,253,0));
  filter: blur(28px); transform: rotate(14deg);
  mix-blend-mode: multiply;
}
.hero__beam--1 { inset-inline-start: 12%; animation: beamSway 19s var(--ease-io) infinite; }
.hero__beam--2 { inset-inline-end: 6%; opacity: .7; animation: beamSway 25s var(--ease-io) infinite reverse; }
@keyframes beamSway {
  0%,100% { transform: rotate(14deg) translateX(0); opacity: .55; }
  50%     { transform: rotate(9deg) translateX(4vw); opacity: .9; }
}
.hero__particles { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.hero__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.hero__title {
  font-size: clamp(31px, 5.1vw, 66px);
  margin-block: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 26px);
}
.hero__sub { max-width: 54ch; }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-block-start: clamp(28px, 3.4vw, 42px);
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px);
  margin-block-start: clamp(34px, 4.4vw, 54px);
  padding-block-start: clamp(22px, 2.6vw, 30px);
  border-block-start: 1px solid var(--line);
}
.hero__meta li { display: grid; gap: 2px; }
.hero__meta b { font-size: clamp(20px, 2.2vw, 27px); font-weight: 800; color: var(--s900); letter-spacing: -.02em; }
/* direct child only — the rotator nests spans inside the value and must not
   inherit the label's size */
.hero__meta li > span { font-size: 13.5px; color: var(--ink-faint); }

/* rotating value — words roll up behind a mask, one at a time */
.rotator { position: relative; display: block; }
.rotator__stack {
  display: grid;          /* every word shares one cell, so the box is sized by
                             the widest of them and the swap never reflows */
  overflow: hidden;
}
.rotator__stack > i {
  grid-area: 1 / 1;
  font-style: normal;
  transform: translate3d(0, 118%, 0);
  opacity: 0;
  transition: transform 760ms var(--ease-out), opacity 400ms var(--ease-out);
}
.rotator__stack > i.is-current { transform: none; opacity: 1; }
.rotator__stack > i.is-out { transform: translate3d(0, -118%, 0); opacity: 0; }
/* used for one frame to park a spent word below without animating it back
   down through the visible area */
.rotator__stack > i.no-anim { transition: none; }

.hero__scroll {
  position: absolute; inset-block-end: 26px; inset-inline-start: 50%;
  translate: 50% 0;
  inline-size: 26px; block-size: 44px; border-radius: var(--r-pill);
  border: 1.5px solid var(--s300); display: grid; justify-items: center;
  padding-block-start: 8px; background: rgba(255,255,255,.5);
  transition: border-color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.hero__scroll:hover { border-color: var(--k400); }
.hero__scroll span {
  inline-size: 3.5px; block-size: 9px; border-radius: 2px; background: var(--k500);
  animation: scrollDot 2.1s var(--ease-io) infinite;
}
@keyframes scrollDot {
  0%,100% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; } 75% { transform: translateY(15px); opacity: 0; }
}
@media (max-width: 1024px) { .hero__scroll { display: none; } }

/* ── 13. the console (procedural centerpiece) ──────────────────────────── */
.console { perspective: 1600px; perspective-origin: 50% 45%; }
.console__stage {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(calc((var(--mx) - .5) * -9deg))
             rotateX(calc((var(--my) - .5) * 6deg));
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}
.console__halo {
  position: absolute; inset: -14% -10%;
  background: radial-gradient(ellipse at 50% 55%, rgba(56,189,248,.24), transparent 66%);
  filter: blur(46px); animation: breathe 11s var(--ease-io) infinite;
}

.console__panel {
  position: relative;
  border-radius: clamp(20px, 2.2vw, 30px);
  background: linear-gradient(155deg, rgba(255,255,255,.93), rgba(248,250,252,.88));
  border: 1px solid rgba(255,255,255,.85);
  outline: 1px solid rgba(226,232,240,.9); outline-offset: -1px;
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 6px rgba(15,23,42,.04),
    0 30px 60px -22px rgba(15,23,42,.22),
    0 60px 120px -40px rgba(14,165,233,.28);
  overflow: hidden;
  transform: translate3d(var(--px), var(--py), 40px);
  will-change: transform;
}
.console__reflection {
  position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 62%;
  background: linear-gradient(196deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.14) 38%, transparent 62%);
  pointer-events: none; opacity: .9;
}

.cpanel__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-block-end: 1px solid rgba(226,232,240,.75);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,250,252,.4));
}
.cpanel__dots { display: flex; gap: 5px; }
.cpanel__dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--s200); }
.cpanel__dots i:first-child { background: var(--s300); }
.cpanel__title { font-size: 12px; font-weight: 600; color: var(--s400); }

.cpanel__body { display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 16px; }
.cpanel__rail { display: grid; align-content: start; gap: 11px; padding-block-start: 4px; }
.cpanel__rail i {
  block-size: 8px; inline-size: var(--w); border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--s200), var(--s100));
}
.cpanel__rail i:nth-child(2) { background: linear-gradient(90deg, var(--k200), var(--k100)); }

.cpanel__main { display: grid; gap: 14px; }

/* the exclusive slot */
.slot {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  padding: clamp(14px, 1.8vw, 22px);
  background:
    linear-gradient(135deg, rgba(240,249,255,.95), rgba(224,242,254,.75)),
    #fff;
  border: 1px solid var(--k200);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 0 rgba(14,165,233,.28),
    0 10px 24px -10px rgba(14,165,233,.4);
  animation: slotBreath 4.6s var(--ease-io) infinite;
}
@keyframes slotBreath {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 0 rgba(14,165,233,.3), 0 10px 24px -10px rgba(14,165,233,.35); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 7px rgba(14,165,233,.055), 0 18px 40px -12px rgba(14,165,233,.5); }
}
.slot__scan {
  position: absolute; inset-block: 0; inline-size: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: scan 5.2s var(--ease-io) infinite;
}
@keyframes scan {
  0%   { transform: translateX(160%); opacity: 0; }
  35%  { opacity: 1; }
  70%  { transform: translateX(-260%); opacity: 0; }
  100% { transform: translateX(-260%); opacity: 0; }
}
.slot__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slot__tag { font-size: clamp(11px, 1.05vw, 13.5px); font-weight: 700; color: var(--k800); }
.slot__logo {
  inline-size: clamp(30px, 3.6vw, 42px); block-size: clamp(30px, 3.6vw, 42px);
  border-radius: var(--r-sm); flex: none;
  background: linear-gradient(150deg, var(--k400), var(--k600));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px -4px rgba(14,165,233,.6);
}

.cpanel__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cpanel__stats span {
  block-size: clamp(34px, 4.2vw, 46px); border-radius: var(--r-sm);
  background: linear-gradient(180deg, #fff, var(--s50));
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 #fff;
}
.cpanel__chart {
  display: flex; align-items: flex-end; gap: clamp(5px, .8vw, 9px);
  block-size: clamp(58px, 7.4vw, 92px);
  padding: 10px; border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--s50), #fff);
  border: 1px solid var(--line-soft);
}
.cpanel__chart i {
  flex: 1; border-radius: var(--r-pill) var(--r-pill) 4px 4px;
  background: linear-gradient(180deg, var(--k300), var(--k500));
  block-size: var(--h);
  transform-origin: bottom;
  animation: bar 3.4s var(--ease-io) infinite alternate;
  animation-delay: calc(var(--i, 0) * 120ms);
  opacity: .55;
}
.cpanel__chart i:nth-child(1) { --i: 0 } .cpanel__chart i:nth-child(2) { --i: 1 }
.cpanel__chart i:nth-child(3) { --i: 2 } .cpanel__chart i:nth-child(4) { --i: 3 }
.cpanel__chart i:nth-child(5) { --i: 4 } .cpanel__chart i:nth-child(6) { --i: 5 }
.cpanel__chart i:nth-child(7) { --i: 6 }
.cpanel__chart i:nth-child(8) { --i: 7; opacity: 1; }
@keyframes bar { from { transform: scaleY(.62); } to { transform: scaleY(1); } }

/* floating fragments */
.frag {
  position: absolute;
  display: grid; gap: 3px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.9);
  outline: 1px solid rgba(226,232,240,.8); outline-offset: -1px;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px -14px rgba(15,23,42,.3);
  transform: translate3d(var(--px), var(--py), 90px);
  will-change: transform;
}
.frag figcaption { font-size: 12px; font-weight: 600; color: var(--s600); white-space: nowrap; }
.frag b { font-size: 22px; font-weight: 800; color: var(--s900); letter-spacing: -.02em; line-height: 1.2; }

.frag--targeting {
  inset-block-start: -6%; inset-inline-start: -7%;
  grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  animation: floatA 9s var(--ease-io) infinite;
}
.frag__icon { inline-size: 30px; block-size: 30px; color: var(--k600); }
.frag--reach {
  inset-block-end: 8%; inset-inline-start: -9%;
  animation: floatB 11s var(--ease-io) infinite;
}
.frag__spark { display: block; inline-size: 72px; block-size: 22px; color: var(--k500); margin-block-start: 4px; }
.frag--daily {
  inset-block-start: 26%; inset-inline-end: -8%;
  grid-template-columns: auto 1fr; align-items: center; gap: 9px;
  animation: floatC 13s var(--ease-io) infinite;
}
.frag__pulse {
  inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--k500);
  box-shadow: 0 0 0 0 rgba(14,165,233,.55);
  animation: dotPulse 2.4s var(--ease-out) infinite;
}
@keyframes floatA {
  0%,100% { transform: translate3d(var(--px), var(--py), 90px) translateY(0) rotate(-1deg); }
  50%     { transform: translate3d(var(--px), var(--py), 90px) translateY(-14px) rotate(1deg); }
}
@keyframes floatB {
  0%,100% { transform: translate3d(var(--px), var(--py), 90px) translateY(0) rotate(1.2deg); }
  50%     { transform: translate3d(var(--px), var(--py), 90px) translateY(-18px) rotate(-.8deg); }
}
@keyframes floatC {
  0%,100% { transform: translate3d(var(--px), var(--py), 90px) translateY(-10px) rotate(1deg); }
  50%     { transform: translate3d(var(--px), var(--py), 90px) translateY(8px) rotate(-1.4deg); }
}

/* ── 14. WHY — sticky narrative ────────────────────────────────────────── */
.why__shell {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 84px); align-items: start;
}
.why__sticky { position: sticky; inset-block-start: clamp(110px, 16vh, 150px); display: grid; gap: 22px; justify-items: start; }
.why__rail {
  inline-size: 3px; block-size: 130px; border-radius: var(--r-pill);
  background: var(--s200); overflow: hidden; margin-block-start: 8px;
}
.why__rail i {
  display: block; inline-size: 100%; block-size: 100%;
  background: linear-gradient(180deg, var(--k400), var(--k600));
  transform: scaleY(0); transform-origin: top;
  transition: transform 620ms var(--ease-out);
}
@media (max-width: 900px) { .why__rail { display: none; } }

.why__list { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.pillar {
  padding: clamp(26px, 3.2vw, 44px);
  display: grid; gap: 14px;
  overflow: hidden;
}
.pillar__num {
  position: absolute; inset-block-start: clamp(18px, 2.4vw, 30px);
  inset-inline-end: clamp(22px, 2.8vw, 36px);
  font-size: clamp(44px, 6vw, 84px); font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--s200);
  transition: -webkit-text-stroke-color 620ms var(--ease-out), transform 900ms var(--ease-out);
}
.pillar:hover .pillar__num { -webkit-text-stroke-color: var(--k200); transform: translateY(-4px); }
/* keep the outlined numeral clear of the heading */
.pillar h3 { color: var(--s900); padding-inline-end: clamp(56px, 8vw, 104px); }
.pillar p { color: var(--ink-soft); max-width: 58ch; }
.pillar__cases { display: grid; gap: 9px; margin-block-start: 6px; }
.pillar__cases li {
  position: relative; padding-inline-start: 20px;
  font-size: 15px; color: var(--ink-soft);
}
.pillar__cases li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .78em;
  inline-size: 10px; block-size: 1.5px; border-radius: 2px; background: var(--k400);
}

/* pillar micro-art */
.pillar__art { position: relative; block-size: 44px; inline-size: 92px; margin-block-end: 4px; }
.pillar__art--decision { display: flex; align-items: flex-end; gap: 7px; }
.pillar__art--decision i {
  inline-size: 12px; border-radius: var(--r-pill); background: var(--s200);
  block-size: 20px;
}
.pillar__art--decision i:nth-child(2) { block-size: 30px; }
.pillar__art--decision i:nth-child(3) { block-size: 24px; }
.pillar__art--decision b {
  inline-size: 12px; block-size: 44px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--k400), var(--k600));
  box-shadow: 0 6px 14px -6px rgba(14,165,233,.7);
  animation: bar 2.8s var(--ease-io) infinite alternate;
}
.pillar__art--audience { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: center; }
.pillar__art--audience i {
  inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--s200);
}
.pillar__art--audience i:nth-child(3),
.pillar__art--audience i:nth-child(6),
.pillar__art--audience i:nth-child(8) {
  background: var(--k500); box-shadow: 0 0 0 3px rgba(14,165,233,.13);
  animation: dotPulse 3s var(--ease-out) infinite;
}
.pillar__art--audience i:nth-child(6) { animation-delay: .6s; }
.pillar__art--audience i:nth-child(8) { animation-delay: 1.2s; }
.pillar__art--target { position: relative; inline-size: 56px; block-size: 56px; }
.pillar__art--target span, .pillar__art--target b {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: 50% -50%; border-radius: 50%;
}
.pillar__art--target span { border: 1.5px solid var(--s200); }
.pillar__art--target span:nth-child(1) { inline-size: 56px; block-size: 56px; animation: ring 3.4s var(--ease-io) infinite; }
.pillar__art--target span:nth-child(2) { inline-size: 38px; block-size: 38px; animation: ring 3.4s var(--ease-io) .35s infinite; }
.pillar__art--target span:nth-child(3) { inline-size: 22px; block-size: 22px; border-color: var(--k200); }
.pillar__art--target b {
  inline-size: 9px; block-size: 9px; background: var(--k500);
  box-shadow: 0 0 0 4px rgba(14,165,233,.15);
}
@keyframes ring {
  0%,100% { opacity: .45; transform: translate(50%,-50%) scale(.94); }
  50%     { opacity: 1; transform: translate(50%,-50%) scale(1.04); }
}

/* ── 15. AUDIENCE — kinetic belt ───────────────────────────────────────── */
.audience { padding-block: var(--sec-y); overflow: clip; }
.audience__head { display: grid; gap: 18px; justify-items: center; text-align: center; margin-block-end: clamp(36px, 5vw, 62px); }
.audience__title { max-inline-size: min(100%, 620px); }

.belt {
  position: relative;
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  padding-block: 14px;
  perspective: 1200px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.belt__row { overflow: hidden; }
.belt__track {
  display: flex; gap: clamp(12px, 1.4vw, 18px); inline-size: max-content;
  transform: translate3d(var(--bx, 0px), 0, 0);
  will-change: transform;
}
.chip {
  display: inline-flex; align-items: center;
  padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-pill);
  font-size: clamp(14px, 1.35vw, 17px); font-weight: 600; white-space: nowrap;
  color: var(--s700);
  background: linear-gradient(180deg, #fff, var(--s50));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, var(--e1);
  cursor: default;
  transition: transform 520ms var(--ease-spring), box-shadow 520ms var(--ease-out),
              color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out);
}
.chip:hover {
  transform: translateY(-4px) scale(1.035);
  color: var(--k800); border-color: var(--k200);
  background: linear-gradient(180deg, #fff, var(--k50));
  box-shadow: inset 0 1px 0 #fff, 0 16px 34px -14px rgba(14,165,233,.55);
}
.belt__lens {
  position: absolute; inset-block: -6%; inset-inline-start: 50%; translate: 50% 0;
  inline-size: clamp(200px, 26vw, 380px);
  background: radial-gradient(ellipse at center, rgba(224,242,254,.6), transparent 70%);
  filter: blur(20px); pointer-events: none;
}

/* ── 16. DIFFERENCE ────────────────────────────────────────────────────── */
.diff__head { display: grid; gap: 18px; justify-items: center; text-align: center; margin-block-end: clamp(38px, 5vw, 66px); }
.diff__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px); align-items: stretch;
}
.diff__card {
  position: relative;
  display: grid; align-content: start; gap: 12px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--r-xl);
  transition: transform 720ms var(--ease-out), box-shadow 720ms var(--ease-out),
              border-color var(--t-slow) var(--ease-out), filter 720ms var(--ease-out);
}
.diff__card--muted {
  background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(241,245,249,.72));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff;
  filter: saturate(.55);
}
.diff__card--muted h3 { color: var(--s600); }
.diff__card--muted p { color: var(--s500); font-size: 15.5px; }
.diff__card--muted:hover { filter: saturate(.85); transform: translateY(-3px); box-shadow: var(--e2), inset 0 1px 0 #fff; }

.diff__card--hero {
  background: linear-gradient(170deg, #fff, var(--k50) 88%);
  border: 1px solid var(--k200);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(15,23,42,.04), 0 30px 60px -26px rgba(14,165,233,.45);
  transform: translateY(-10px) scale(1.015);
}
.diff__card--hero:hover { transform: translateY(-18px) scale(1.02); box-shadow: inset 0 1px 0 #fff, 0 44px 84px -30px rgba(14,165,233,.55); }
.diff__card--hero h3 { color: var(--s900); }
.diff__badge {
  position: absolute; inset-block-start: 0; inset-inline-start: clamp(24px, 3vw, 38px);
  translate: 0 -50%;
  padding: 7px 16px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(180deg, var(--k500), var(--k600));
  box-shadow: 0 8px 20px -8px rgba(14,165,233,.8), inset 0 1px 0 rgba(255,255,255,.4);
  font-family: "Segoe UI", system-ui, sans-serif;
}
/* the badge carries the name visually; the heading stays for a11y + outline */
.sr-only,
.diff__card--hero h3 {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}
.diff__list { display: grid; gap: 11px; }
.diff__list li {
  position: relative; padding-inline-start: 26px;
  font-size: clamp(15px, 1.28vw, 16.5px); color: var(--s700); line-height: 1.7;
}
.diff__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .52em;
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0 32%, var(--k500) 34% 100%);
  box-shadow: 0 2px 6px -1px rgba(14,165,233,.6);
}

/* comparison micro-art */
.diff__art { position: relative; block-size: 52px; inline-size: 100%; margin-block-end: 6px; }
.diff__art--scatter i {
  position: absolute; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--s300); animation: drift 7s var(--ease-io) infinite;
}
.diff__art--scatter i:nth-child(1){inset:6% 4% auto auto; animation-delay:0s}
.diff__art--scatter i:nth-child(2){inset:60% 16% auto auto; animation-delay:.5s}
.diff__art--scatter i:nth-child(3){inset:22% 30% auto auto; animation-delay:1s}
.diff__art--scatter i:nth-child(4){inset:74% 42% auto auto; animation-delay:1.5s}
.diff__art--scatter i:nth-child(5){inset:14% 54% auto auto; animation-delay:2s}
.diff__art--scatter i:nth-child(6){inset:52% 66% auto auto; animation-delay:2.5s}
.diff__art--scatter i:nth-child(7){inset:30% 80% auto auto; animation-delay:3s}
.diff__art--scatter i:nth-child(8){inset:68% 92% auto auto; animation-delay:3.5s}
@keyframes drift {
  0%,100% { transform: translate(0,0); opacity: .45; }
  50%     { transform: translate(6px,-8px); opacity: .9; }
}
.diff__art--spike {
  border-block-end: 1.5px solid var(--s200);
  display: flex; align-items: flex-end;
}
.diff__art--spike i {
  inline-size: 10px; block-size: 100%; border-radius: var(--r-pill) var(--r-pill) 0 0;
  background: linear-gradient(180deg, var(--s400), var(--s200));
  margin-inline-start: 34%;
  transform-origin: bottom;
  animation: spike 4.4s var(--ease-io) infinite;
}
@keyframes spike {
  0%   { transform: scaleY(0); opacity: 0; }
  12%  { transform: scaleY(1); opacity: 1; }
  30%  { transform: scaleY(1); opacity: 1; }
  46%  { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(0); opacity: 0; }
}
.diff__art--rhythm { display: flex; align-items: flex-end; gap: 8px; }
.diff__art--rhythm i {
  inline-size: 10px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--k300), var(--k500));
  block-size: 100%; transform-origin: bottom;
  animation: rhythm 2.6s var(--ease-io) infinite;
}
.diff__art--rhythm i:nth-child(1){animation-delay:0ms}
.diff__art--rhythm i:nth-child(2){animation-delay:120ms}
.diff__art--rhythm i:nth-child(3){animation-delay:240ms}
.diff__art--rhythm i:nth-child(4){animation-delay:360ms}
.diff__art--rhythm i:nth-child(5){animation-delay:480ms}
.diff__art--rhythm i:nth-child(6){animation-delay:600ms}
.diff__art--rhythm i:nth-child(7){animation-delay:720ms}
@keyframes rhythm {
  0%,100% { transform: scaleY(.35); opacity: .5; }
  50%     { transform: scaleY(1); opacity: 1; }
}

/* ── 17. PLACEMENT ─────────────────────────────────────────────────────── */
.place__shell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(38px, 5.5vw, 84px); align-items: center;
}
.place__copy { display: grid; gap: 20px; justify-items: start; }

.scarcity {
  position: relative;
  aspect-ratio: 1 / .84;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(224,242,254,.9), transparent 62%),
    linear-gradient(180deg, #fff, var(--s50));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, var(--e3);
  overflow: hidden;
  display: grid; place-items: center;
}
.scarcity__noise {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
  gap: 14px; padding: 26px;
}
.scarcity__noise i {
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--s200), var(--s100));
  opacity: .5;
  animation: fadeOutIn 6.5s var(--ease-io) infinite;
}
.scarcity__noise i:nth-child(1){animation-delay:0s} .scarcity__noise i:nth-child(2){animation-delay:.25s}
.scarcity__noise i:nth-child(3){animation-delay:.5s} .scarcity__noise i:nth-child(4){animation-delay:.75s}
.scarcity__noise i:nth-child(5){animation-delay:1s} .scarcity__noise i:nth-child(6){animation-delay:1.25s}
.scarcity__noise i:nth-child(7){animation-delay:1.5s} .scarcity__noise i:nth-child(8){animation-delay:1.75s}
.scarcity__noise i:nth-child(9){animation-delay:2s} .scarcity__noise i:nth-child(10){animation-delay:2.25s}
.scarcity__noise i:nth-child(11){animation-delay:2.5s} .scarcity__noise i:nth-child(12){animation-delay:2.75s}
@keyframes fadeOutIn {
  0%,100% { opacity: .5; transform: scale(1); }
  45%,65% { opacity: .1; transform: scale(.94); }
}
.scarcity__one {
  position: relative; z-index: 2;
  display: grid; place-items: center; gap: 14px;
  padding: clamp(26px, 4vw, 40px) clamp(30px, 5vw, 52px);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.86);
  border: 1px solid var(--k200);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 #fff, 0 28px 60px -22px rgba(14,165,233,.55);
  animation: floatA 8s var(--ease-io) infinite;
}
.scarcity__pulse {
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: linear-gradient(150deg, var(--k400), var(--k600));
  box-shadow: 0 0 0 0 rgba(14,165,233,.6);
  animation: dotPulse 2.6s var(--ease-out) infinite;
}
.scarcity__label { font-size: clamp(15px, 1.7vw, 19px); font-weight: 800; color: var(--k800); white-space: nowrap; }

.steps { position: relative; z-index: 0; display: grid; gap: clamp(14px, 1.7vw, 20px); margin-block-start: 10px; }
.steps li {
  position: relative; padding-inline-start: 34px;
  font-size: clamp(15.5px, 1.4vw, 18px); font-weight: 500; color: var(--s700);
  line-height: 1.6;
}
.steps__dot {
  position: absolute; z-index: 2; inset-inline-start: 0; inset-block-start: .32em;
  inline-size: 15px; block-size: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--k300);
  box-shadow: 0 0 0 4px rgba(224,242,254,.8);
  transition: border-color 520ms var(--ease-out), background-color 520ms var(--ease-out);
}
.steps li:hover .steps__dot { background: var(--k500); border-color: var(--k500); }
.steps__line {
  position: absolute; z-index: 1; inset-inline-start: 6.5px; inset-block: .9em 1.2em;
  inline-size: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--k300), var(--k200) 55%, var(--s200));
}

/* ── 18. STATEMENT ─────────────────────────────────────────────────────── */
.statement {
  position: relative;
  padding-block: clamp(110px, 15vw, 200px);
  text-align: center;
  overflow: clip;
  isolation: isolate;
}
.statement .shell { display: grid; justify-items: center; gap: clamp(26px, 3.4vw, 42px); }
.statement__light {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: 50% -50%;
  inline-size: min(1100px, 120vw); block-size: min(700px, 90vw);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(224,242,254,.85), transparent 60%),
    conic-gradient(from 0deg at 50% 50%, rgba(186,230,253,.35), transparent 25%, rgba(226,232,240,.4) 55%, transparent 78%, rgba(186,230,253,.35));
  filter: blur(60px);
  z-index: -1;
  animation: spin 44s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.statement__type {
  font-size: clamp(25px, 3.9vw, 52px);
  line-height: 1.44;
  max-inline-size: min(100%, 900px);
}
.statement__foot {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 28px); flex-wrap: wrap;
  font-size: clamp(14.5px, 1.3vw, 17px); color: var(--ink-faint); font-weight: 500;
}
.statement__foot span {
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--k400); flex: none;
}

/* ── 19. NUMBERS ───────────────────────────────────────────────────────── */
.numbers__intro { display: grid; gap: 18px; justify-items: center; text-align: center; margin-block-end: clamp(40px, 5vw, 68px); }
.numbers__intro .lede { max-inline-size: 66ch; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.stat {
  position: relative;
  display: grid; gap: 6px; align-content: center;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #fff, var(--s50));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, var(--e1);
  overflow: hidden;
  transition: transform 620ms var(--ease-out), box-shadow 620ms var(--ease-out), border-color var(--t-slow) var(--ease-out);
}
.stat::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 24%;
  block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--k400), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 720ms var(--ease-out);
}
.stat:hover { transform: translateY(-6px); border-color: var(--k100); box-shadow: inset 0 1px 0 #fff, var(--e3); }
.stat:hover::after { transform: scaleX(1); }
.stat:hover .card__glow { opacity: 1; }
.stat__value {
  font-size: clamp(30px, 3.9vw, 50px); font-weight: 800; line-height: 1.2;
  letter-spacing: -.03em;
  background: linear-gradient(160deg, var(--s900), var(--s700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat__value--word {
  font-size: clamp(24px, 3.2vw, 40px);
  background: linear-gradient(160deg, var(--k600), var(--k800));
  -webkit-background-clip: text; background-clip: text;
}
.stat__label { font-size: clamp(13.5px, 1.2vw, 15px); color: var(--ink-faint); font-weight: 500; }

/* ── 20. FINAL CTA ─────────────────────────────────────────────────────── */
.cta {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(100px, 14vw, 190px);
  text-align: center;
  border-block-start: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--paper), var(--k50) 55%, #fff);
}
.cta__field { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cta__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to left, rgba(148,163,184,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.16) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000, transparent 76%);
  animation: gridDrift 30s linear infinite reverse;
}
.cta__beam {
  position: absolute; inset-block-start: -40%; inset-inline-start: 50%; translate: 50% 0;
  inline-size: min(760px, 90vw); block-size: 180%;
  background: linear-gradient(180deg, rgba(186,230,253,.55), rgba(224,242,254,.15) 55%, transparent);
  filter: blur(52px);
  animation: breathe 15s var(--ease-io) infinite;
}
.cta__orb { position: absolute; border-radius: 50%; filter: blur(64px);
  transform: translate3d(var(--px), var(--py), 0); will-change: transform; }
.cta__orb--1 {
  inline-size: 34vmax; block-size: 34vmax; inset-block-end: -12vmax; inset-inline-start: -8vmax;
  background: radial-gradient(circle, rgba(125,211,252,.45), transparent 68%);
}
.cta__orb--2 {
  inline-size: 28vmax; block-size: 28vmax; inset-block-start: -8vmax; inset-inline-end: -6vmax;
  background: radial-gradient(circle, rgba(226,232,240,.85), transparent 70%);
}
.cta__shell { display: grid; justify-items: center; gap: clamp(20px, 2.6vw, 30px); }
/* explicit measure caps: `ch` is unreliable for Persian glyph widths */
.cta__title { font-size: clamp(27px, 4vw, 54px); line-height: 1.42; max-inline-size: min(100%, 920px); }
.cta__sub { max-inline-size: min(100%, 680px); text-wrap: pretty; }
.cta__actions { margin-block-start: clamp(10px, 1.6vw, 18px); }

/* rotating halo behind the final button — lives on the wrapper because the
   button itself clips its own children for the sheen */
.cta__actions { position: relative; isolation: isolate; }
.cta__actions::before {
  content: ""; position: absolute; inset: -5px; z-index: -1;
  border-radius: var(--r-pill);
  background: conic-gradient(from 0deg, var(--k200), var(--k400), var(--k600), var(--k300), var(--k200));
  filter: blur(14px); opacity: .6;
  animation: spin 7s linear infinite;
  transition: opacity 520ms var(--ease-out);
}
.cta__actions:hover::before { opacity: .95; }

/* ── 21. FOOTER ────────────────────────────────────────────────────────── */
.foot { border-block-start: 1px solid var(--line); background: #fff; }
.foot__shell {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
  padding-block: clamp(30px, 4vw, 46px);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 6px; margin-inline: auto; }
.foot__links a {
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 14.5px; color: var(--ink-faint);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.foot__links a:hover { color: var(--s900); background: var(--s100); }
.foot__note { font-size: 13.5px; color: var(--ink-faint); }

/* ── 22. responsive — recomposed per breakpoint ────────────────────────── */
@media (max-width: 1180px) {
  .frag--targeting { inset-inline-start: -2%; }
  .frag--reach { inset-inline-start: -4%; }
  .frag--daily { inset-inline-end: -3%; }
}

@media (max-width: 1024px) {
  :root { --sec-y: clamp(72px, 11vw, 120px); }
  .hero__shell { grid-template-columns: 1fr; gap: clamp(48px, 8vw, 72px); }
  .hero__copy { max-inline-size: 720px; }
  .console { max-inline-size: 620px; margin-inline: auto; inline-size: 100%; }
  .why__shell { grid-template-columns: 1fr; }
  .why__sticky { position: static; }
  .place__shell { grid-template-columns: 1fr; }
  .place__visual { order: 2; max-inline-size: 520px; margin-inline: auto; inline-size: 100%; }
  /* at tablet the winning card goes full width — so it becomes a two-column
     composition rather than a stretched single column */
  .diff__grid { grid-template-columns: 1fr 1fr; }
  .diff__card--hero {
    grid-column: 1 / -1; transform: none;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center; column-gap: clamp(26px, 4vw, 48px);
  }
  .diff__card--hero:hover { transform: translateY(-6px); }
  .diff__art--rhythm { inline-size: 118px; block-size: 76px; margin-block-end: 0; }
  .diff__art--rhythm i { inline-size: 12px; }
}

@media (max-width: 760px) {
  html { scroll-padding-block-start: 92px; }
  .hero { padding-block: clamp(104px, 15vh, 132px) clamp(28px, 7vw, 48px); }
  .stats { grid-template-columns: 1fr 1fr; }
  .diff__grid { grid-template-columns: 1fr; }
  .diff__card--hero { grid-template-columns: minmax(0, 1fr); }
  .diff__art--rhythm { inline-size: 100%; block-size: 52px; margin-block-end: 6px; }
  .hero__actions { display: grid; }
  .hero__actions .btn { inline-size: 100%; }
  .hero__meta { gap: 16px 26px; }
  /* the fragments break out of the panel instead of covering it */
  .console { margin-block: 34px 26px; }
  .frag--targeting {
    inset-block-start: -28px; inset-inline-start: 5%;
    padding: 9px 13px; gap: 8px;
  }
  .frag__icon { inline-size: 22px; block-size: 22px; }
  .frag--reach {
    inset-block: auto -22px; inset-inline: auto 4%;
    padding: 9px 14px;
  }
  .frag--daily { display: none; }
  .frag figcaption { font-size: 11px; }
  .frag b { font-size: 17px; }
  .frag__spark { inline-size: 56px; block-size: 16px; }
  .belt { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .statement__foot { flex-direction: column; gap: 10px; }
  .statement__foot span { display: none; }
  .foot__shell { flex-direction: column; text-align: center; }
  .foot__links { margin-inline: 0; justify-content: center; }
}

@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .stats { grid-template-columns: 1fr; }
  .cpanel__body { grid-template-columns: 44px 1fr; padding: 12px; gap: 10px; }
  .cpanel__stats { gap: 7px; }
  .pillar { padding: 24px 20px; }
  .pillar__num { font-size: 46px; }
  .console__stage { transform: none; }
}

/* container-query polish: pillars adapt to their own column, not the viewport */
@supports (container-type: inline-size) {
  .why__list { container-type: inline-size; container-name: pillars; }
  /* the art becomes a hanging column once the card has room for it */
  @container pillars (min-width: 560px) {
    .pillar { grid-template-columns: 96px minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 32px); }
    .pillar__art { grid-column: 1; grid-row: 1; align-self: start; margin-block-start: 8px; }
    .pillar > h3, .pillar > p, .pillar__cases { grid-column: 2; }
  }
}

/* wide desktop: more air, more depth */
@media (min-width: 1440px) {
  :root { --shell: 1320px; }
  .hero { padding-block-start: 200px; }
}

/* ── 23. accessibility — motion off ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .line > i { opacity: 1 !important; transform: none !important; }
  .cursor { display: none !important; }
  .atmosphere__grain { display: none; }
  .diff__card--hero { transform: none; }
  .console__stage { transform: none !important; }
}

/* print */
@media print {
  .atmosphere, .cursor, .scrollbeam, .nav, .hero__field, .cta__field { display: none !important; }
  body { background: #fff; }
}