/* ═══════════════════════════════════════════════════════════════════════════
   30minutes.io landing — design system v4 "Instrument", static build.
   Token VALUES mirror src/app/globals.css (the platform source of truth).
   This file must stay self-contained: the landing is served as a static file
   and never imports app CSS. If v4 tokens change, re-mirror them here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Geist, self-hosted — THREE files serve five weights ────────────────────
   500 borrows the 400 file and 700 borrows the 800 file: at the sizes those
   weights are used here the substitution is invisible, and it cuts ~70KB from
   a 4G first paint. The 500/700 files stay on disk; only these rules changed. */
@font-face{font-family:'Geist';src:url('/landing-v2/fonts/geist-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/landing-v2/fonts/geist-400.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/landing-v2/fonts/geist-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/landing-v2/fonts/geist-800.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/landing-v2/fonts/geist-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  --void:#0a0c0e; --canvas:#0f1113; --surface:#16191c; --surface-2:#1f1f1f;
  --surface-3:#24262a; --line:#262a2e; --line-2:#33383d;
  --ink:#ffffff; --ink-soft:#c7ccd1; --ink-muted:#8a9199; --ink-faint:#5a6169;
  --accent:#ffffff; --accent-ink:#0f1113;
  --accent-soft:rgba(255,255,255,.08); --accent-line:rgba(255,255,255,.28);
  --ok:#4ade80; --ok-bg:rgba(74,222,128,.1); --ok-bd:rgba(74,222,128,.28);
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,Consolas,monospace;
  --fs-display:clamp(2.9rem,1.1rem + 7vw,6.4rem);
  --fs-hero:clamp(2.25rem,1.1rem + 4.6vw,4.25rem);
  --fs-title:clamp(1.75rem,1.15rem + 2.2vw,2.75rem);
  --tr-display:-.035em; --tr-tight:-.02em; --tr-label:.09em;
  --r:14px; --r-sm:10px;
  --wrap:1140px;
}

/* ── ground ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--canvas)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
b,strong{font-weight:600;color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--font); letter-spacing:var(--tr-tight);
  padding:0 22px;height:44px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn.solid{background:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{transform:translateY(-1px);background:#e9ecef}
.btn.ghost{border-color:var(--line-2);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--accent-line);color:var(--ink)}
.btn.lg{height:52px;padding:0 28px;font-size:16px}
.btn.full{width:100%}
.btn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}

/* THE MONEY BUTTON — every "Start for ₹20" (hero, pricing, close) is the
   loudest element on its screen: bigger, glowing, with a light sweep. One
   treatment, three conversion points.
   NOTE: the old breathing box-shadow animation is gone on purpose — animated
   box-shadow repaints every frame on the main thread, on the exact element
   the funnel needs tappable on cheap Androids. The glow is now static and the
   sweep is compositor-only (transform, never `left`). */
.btn.solid.lg{
  position:relative;overflow:hidden;
  height:60px;padding:0 38px;font-size:17.5px;font-weight:700;border-radius:15px;
  letter-spacing:var(--tr-tight);
  box-shadow:0 16px 40px -10px rgba(0,0,0,.6), 0 0 30px -5px rgba(255,255,255,.45);
}
.btn.solid.lg::after{
  content:'';position:absolute;top:0;bottom:0;left:-44%;width:44%;
  background:linear-gradient(105deg,transparent,rgba(15,17,19,.08) 50%,transparent);
  animation:fabSheen 3.4s ease-in-out infinite;will-change:transform;
}
.btn.solid.lg:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 52px -12px rgba(0,0,0,.7), 0 0 38px -4px rgba(255,255,255,.55);
}
.btn.solid.lg:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){
  .btn.solid.lg::after{animation:none;display:none}
}

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:color-mix(in srgb,var(--canvas) 82%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;gap:28px;
}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.wordmark{font:600 17px/1 var(--font);letter-spacing:var(--tr-tight)}
.tld{color:var(--ink-muted)}
.nav-links{display:flex;gap:22px;margin-left:12px}
.nav-links a{font:500 14px/1 var(--font);color:var(--ink-muted);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;gap:10px}
.nav .btn{height:38px;padding:0 16px;font-size:14px}

/* ── hero ───────────────────────────────────────────────────────────────── */
/* ORDER MATTERS HERE. Media queries carry NO extra specificity, so every
   breakpoint override below MUST come after these base rules — when the
   ≥1024 block sat above them, `.hero-btns{justify-content:center}` silently
   won and the desktop CTA sat 181px right of the headline it belongs under. */
.hero{padding:132px 0 0;text-align:center}
.hero-h{
  font-size:var(--fs-display);font-weight:800;line-height:1.02;
  letter-spacing:var(--tr-display);text-wrap:balance;
}
.hw{display:inline-block}
.hl{position:relative;white-space:nowrap}
.hl-rail{
  position:absolute;left:0;right:0;bottom:-.06em;height:3px;
  background:var(--ink);transform-origin:left center;
}
.hero-sub{
  margin:22px auto 0;max-width:560px;
  font-size:16.5px;line-height:1.6;color:var(--ink-muted);text-wrap:balance;
}
.hero-btns{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero-micro{margin-top:18px;font-size:14px;color:var(--ink-faint);line-height:1.7}
.hero-micro b{color:var(--ink-soft);font-weight:500}

/* the founder chips — quiet mono credentials, never shouting */
.cred{
  margin-top:22px;display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  font:500 11px/1.5 var(--mono);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-muted);
}
.cred-dot{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:none}

/* ≥1024: a real desktop composition — words left, film right — instead of a
   scaled-up phone layout. Everything in the left column shares ONE left edge:
   headline, sub, CTA, micro, chips. That single alignment is what makes it
   read as composed rather than assembled. */
@media (min-width:1024px){
  .hero{
    display:grid;grid-template-columns:1.05fr .95fr;gap:0 72px;align-items:center;
    text-align:left;padding-top:128px;
  }
  /* the display clamp is tuned for a FULL-width line; in a half-width column
     it wraps one word per line. Cap it so the headline sets in three lines. */
  .hero-h{grid-column:1;font-size:clamp(3rem,4.4vw,4.5rem);line-height:1.04}
  .hero-sub{grid-column:1;margin:24px 0 0;text-wrap:pretty}
  .h-film{grid-column:2;grid-row:1 / span 5;margin:0;justify-content:flex-end}
  .hero-btns{grid-column:1;justify-content:flex-start;margin-top:34px}
  .hero-micro{grid-column:1;text-align:left;margin-top:20px}
  .cred{grid-column:1;justify-content:flex-start}
  .build{grid-column:1 / -1}
  .film{width:min(520px,42vw,calc(100vh - 220px))}
}

/* THE FILM — the hardcoded 1:1 product explainer. Sized to be unmissable:
   as wide as the viewport allows while still fitting on a desktop screen
   below the fold line (capped against viewport height, square aspect). */
.h-film{display:flex;justify-content:center;margin:48px auto 0}
.film{
  position:relative;aspect-ratio:1/1;overflow:hidden;cursor:pointer;
  width:min(600px, 92vw, calc(100vh - 240px));
  border:1px solid var(--line-2);border-radius:20px;background:var(--surface);
  box-shadow:0 40px 110px -40px rgba(0,0,0,.8);
}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* no scrim wash: the poster frame carries real information and must stay
   clean — the play circle and the caption pill supply their own contrast */
.film-cover{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:opacity .25s ease;
}
.film-cover.off{opacity:0;pointer-events:none}
.film-cap{position:absolute;bottom:16px;left:50%;transform:translateX(-50%)}
.play{
  width:76px;height:76px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;padding-left:5px;
  box-shadow:0 14px 40px -8px rgba(0,0,0,.55);
  transition:transform .18s ease;
}
.film:hover .play{transform:scale(1.07)}
.film-cap{
  font:600 11px/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:#fff;background:rgba(10,12,14,.62);border-radius:999px;padding:9px 14px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;
}

/* ── the build device ───────────────────────────────────────────────────── */
.build{margin:40px auto 0;max-width:860px}
.build-head{display:flex;justify-content:center;margin-bottom:18px}
.build-tag{
  display:inline-flex;align-items:center;gap:8px;
  font:500 11px/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--ink-muted);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

.device{
  border:1px solid var(--line);border-radius:var(--r);background:var(--void);
  overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.dv-bar{
  display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--surface-3)}
/* the honesty tag: this device plays fictional businesses, and says so */
.dv-demo{
  font:500 9.5px/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:4px 8px;
}
/* url pill: `building…` and the live domain occupy the SAME grid cell, so the
   pill is always sized by the widest child and the flip never shifts layout. */
.dv-url{
  margin:0 auto;display:inline-grid;justify-items:center;align-items:center;
  font:500 11px/1 var(--mono);color:var(--ink-muted);
  background:var(--canvas);border:1px solid var(--line);border-radius:6px;
  padding:5px 22px;letter-spacing:.02em;min-width:200px;
}
.dv-url > span{grid-area:1/1;white-space:nowrap}
.u-building{opacity:0} /* default = live state; the loop flips these */
.u-building i{font-style:normal}
.u-live{display:inline-flex;align-items:center;gap:6px}
.u-dot{
  position:relative;width:6px;height:6px;border-radius:50%;background:var(--ok);
  display:inline-block;
}
.u-ring{
  position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--ok);
  opacity:0;pointer-events:none;
}
.u-live em{font-style:normal;color:var(--ok);letter-spacing:.08em;text-transform:uppercase;font-size:10px}

/* ── the mini customer site — the ONLY colour on the page, by design ──────
   Palette arrives via --m-* vars; the loop swaps them while everything is
   hidden (no CSS transition here: a transition would bleed the previous
   customer's colour into the next cycle's scan). Real content is the CSS
   default; .wf wireframe twins are the JS-only build state. */
.dv-main{position:relative}
.mini{
  --m-bg:#f6f1e7; --m-panel:#efe6d6; --m-ink:#2a2118; --m-acc:#b4552d; --m-cta-ink:#f6f1e7;
  background:var(--m-bg);padding:1.6em 1.75em 1.4em;min-height:300px;position:relative;overflow:hidden;
  /* every size inside the mini is in em: the whole site scales with the
     device instead of rendering at postage-stamp size on wide screens */
  font-size:clamp(9px, 1.5vw, 15px);
  /* inner hairline in the customer's own ink: keeps the site's boundary
     visible even when a dark palette sits inside the dark device */
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m-ink) 12%,transparent);
}
.scan{
  position:absolute;left:0;right:0;top:0;height:2px;background:var(--m-acc);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--m-acc) 60%,transparent);
  opacity:0;pointer-events:none;will-change:transform;
}
.glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--m-acc) 30%,transparent),transparent 70%);
}

/* twin-layer DEVICE slots: wireframe + real stacked in one grid cell (no
   absolute positioning). Named .dslot because .slot already belongs to the
   trust-section cards — one shared name overlapped every child there. */
.dslot{display:grid;min-width:0}
.dslot > *{grid-area:1/1}
.wf{
  opacity:0;border:1px dashed color-mix(in srgb,var(--m-ink) 35%,transparent);
  border-radius:6px;width:100%;height:100%;box-sizing:border-box;
}

/* nav row */
.mini-nav{display:flex;align-items:center;gap:1em;margin-bottom:1.5em}
.m-wordmark{font:700 1.15em/1.4 var(--font);color:var(--m-ink);white-space:nowrap}
.m-links{display:flex;gap:1em;align-items:center}
.m-links i{font:500 .8em/1.4 var(--font);font-style:normal;color:color-mix(in srgb,var(--m-ink) 62%,transparent);white-space:nowrap}
.s-pill{margin-left:auto}
.m-pill{width:4.5em;height:1.6em;border-radius:.4em;background:var(--m-acc)}

/* hero row */
.mini-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:1.8em;align-items:center}
.mini-copy{display:grid;gap:.8em;justify-items:start}
.m-head{
  font:700 1.75em/1.22 var(--font);letter-spacing:-.015em;color:var(--m-ink);
  min-height:2.44em;display:block;text-align:left;
}
.m-sub{font:500 .9em/1.5 var(--font);color:color-mix(in srgb,var(--m-ink) 70%,transparent);text-align:left}
.m-cta{
  font:600 .9em/1 var(--font);color:var(--m-cta-ink);background:var(--m-acc);
  border-radius:.5em;padding:.85em 1.2em;white-space:nowrap;justify-self:start;
}
.s-img{width:100%}
.m-img-lo,.m-img{aspect-ratio:4/3;border-radius:.8em;width:100%;position:relative;overflow:hidden}
.m-img-lo{background:var(--m-panel);opacity:0}
.m-img{background:linear-gradient(135deg,color-mix(in srgb,var(--m-acc) 55%,var(--m-bg)),var(--m-panel))}
/* the "photo" reads as a composed image, not a flat wash: one soft light
   sweep and one accent form give it depth at zero bytes */
.m-img::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
}
.m-img::after{
  content:'';position:absolute;right:12%;bottom:14%;width:34%;aspect-ratio:1;
  border-radius:50%;background:color-mix(in srgb,var(--m-acc) 70%,var(--m-bg));
  box-shadow:-1.2em 1em 0 -0.55em color-mix(in srgb,var(--m-ink) 30%,var(--m-bg));
}

/* cards row */
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin-top:1.5em}
.m-card{
  display:flex;flex-direction:column;gap:.35em;align-items:flex-start;
  background:var(--m-panel);border-radius:.65em;padding:.8em .9em;min-height:4.6em;
}
.m-sw{width:100%;height:1.1em;border-radius:.35em;background:color-mix(in srgb,var(--m-acc) 45%,var(--m-panel))}
.c-name{font:600 .85em/1.4 var(--font);color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.c-price{font:600 .85em/1.2 var(--font);font-style:normal;color:var(--m-acc)}
.c-price:empty{display:none}

/* ── the stepped progress rail (replaces the old chips) ─────────────────── */
.steps{
  position:relative;display:flex;justify-content:space-between;gap:8px;
  padding:13px 16px 11px;background:var(--surface);border-top:1px solid var(--line);
  overflow-x:auto;
}
.st-fill{
  position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ink);
  transform:scaleX(1);transform-origin:left center; /* default: complete */
}
.st{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font:500 10.5px/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--ink-faint);transition:color .3s;
}
.st-dot{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background .3s,transform .3s}
.st.on{color:var(--ink)}
.st.on .st-dot{background:var(--ink);transform:scale(1.15)}
.st.done{color:var(--ink-muted)}
.st.done .st-dot{background:var(--ink-muted)}
.st-live.on{color:var(--ok)}
.st-live.on .st-dot{background:var(--ok)}

/* ── rails — the structural device between sections ─────────────────────── */
.rail{
  position:relative;max-width:var(--wrap);margin:110px auto 0;padding:0 24px;
  display:flex;align-items:center;gap:14px;
}
.rail::after{
  content:'';flex:1;height:1px;background:var(--line-2);
  transform-origin:left center;
  transform:scaleX(var(--rx,1)); /* --rx tweened by GSAP; defaults to drawn */
}
.rail-tag{
  font:500 11px/1 var(--mono);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}

/* ── the wall — real generated sites, openable ─────────────────────────────
   Phone screenshots in device-ish frames. The card is an <a>: the whole
   surface opens the real site. Third card is the mirror ("Yours next"). */
.work-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}
.work-card{
  display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.work-card:hover{
  transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.work-shot{
  display:block;aspect-ratio:3/3.6;overflow:hidden;background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.work-meta{display:flex;flex-direction:column;gap:3px;padding:16px 18px 18px}
.work-meta b{font:600 16px/1.3 var(--font);letter-spacing:var(--tr-tight)}
.work-kind{font-size:13px;color:var(--ink-muted)}
.work-open{
  margin-top:10px;font:600 13.5px/1 var(--font);font-style:normal;color:var(--ink);
  transition:transform .18s ease;
}
.work-card:hover .work-open{transform:translateX(3px)}
/* the "Yours next" card — same frame, dashed invitation instead of a shot */
.work-shot-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:
    radial-gradient(70% 55% at 50% 42%,rgba(255,255,255,.05),transparent 70%),
    var(--void);
}
.wn-mark{color:var(--ink-faint)}
.wn-line{
  font:500 11px/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--ink-muted);border:1px dashed var(--line-2);border-radius:999px;padding:8px 14px;
}

/* the breadth band — six real recipe palettes, drawn small */
.dir-band{max-width:980px;margin:44px auto 0;text-align:center}
.dir-lead{font-size:14.5px;color:var(--ink-muted)}
.dir-lead b{color:var(--ink)}
.dir-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}
.dmini{
  position:relative;display:flex;flex-direction:column;gap:5px;
  aspect-ratio:1/1.06;border-radius:12px;padding:12px 12px 26px;
  background:var(--db);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--di) 14%,transparent);
}
.dm-bar{display:flex;align-items:center;height:8px;margin-bottom:4px}
.dm-bar b{width:34%;height:4px;border-radius:2px;background:var(--di);opacity:.85}
.dm-t{width:86%;height:7px;border-radius:3px;background:var(--di);opacity:.9}
.dm-t2{width:58%;opacity:.45}
.dm-cta{width:44%;height:11px;border-radius:4px;background:var(--da);margin-top:6px}
.dm-cap{
  position:absolute;left:0;right:0;bottom:8px;
  font:500 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--di);opacity:.65;text-align:center;
}

/* ── sections ───────────────────────────────────────────────────────────── */
.sec{padding:84px 0 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 48px}
.sec-head h2,.close h2{
  font-size:var(--fs-title);font-weight:700;letter-spacing:var(--tr-tight);
  line-height:1.12;text-wrap:balance;
}
.u{border-bottom:3px solid var(--ink);padding-bottom:.04em;white-space:nowrap}
.sec-sub{margin-top:16px;color:var(--ink-muted);font-size:16px}

/* ── pricing ────────────────────────────────────────────────────────────── */
.price-row{display:flex;justify-content:center}
.pcard{
  width:100%;max-width:520px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:36px 34px 30px;
}
.p-for{font:500 11px/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-faint)}
.p-name{font:700 22px/1.2 var(--font);letter-spacing:var(--tr-tight);margin-top:10px}
.p-cost{display:flex;align-items:flex-start;justify-content:flex-start;gap:4px;margin-top:18px;
  font-weight:800;font-size:76px;line-height:1;letter-spacing:var(--tr-display)}
.p-cost sup{font-size:26px;font-weight:600;color:var(--ink-muted);margin-top:10px}
.p-num{font-variant-numeric:tabular-nums}
.p-per{margin-top:10px;color:var(--ink-muted);font-size:14px}
.p-then{margin-top:4px;font:500 13.5px/1.5 var(--font);color:var(--ink-faint)}
/* the day-7 mechanics — the mandate fear, answered where the price is read */
.p-day7{
  margin-top:14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--canvas);font-size:12.5px;line-height:1.6;color:var(--ink-muted);
}
/* the app caveat, on the card instead of hidden in /terms */
/* the solo list opens with its own quiet rule + air, so the price block and
   the ticks never crowd each other */
.p-list-solo{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}

.p-group{margin-top:24px}
.pg-label{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
  font:500 11px/1 var(--mono);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}
.pg-label::after{content:'';flex:1;height:1px;background:var(--line)} /* mini-rail */
.p-under{margin-top:12px;text-align:center;font-size:12.5px;color:var(--ink-faint)}
/* the solo list needs air before the CTA now that the footnote is gone
   (the caveat itself lives in /terms — "outside the ₹20 introductory month") */
.p-list-solo{margin-bottom:26px}

.p-list{list-style:none;display:grid;gap:10px}
.p-list li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.tick{
  flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
  background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok);
  font-size:11px;display:flex;align-items:center;justify-content:center;
}
.p-note{text-align:center;color:var(--ink-faint);font-size:13.5px;max-width:560px;margin:26px auto 0;line-height:1.7}

/* ── trust ──────────────────────────────────────────────────────────────── */
.trust{
  display:grid;grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--line);gap:1px;   /* hairline grid drawn with the gap */
}
/* cells sit on the canvas — the hairline grid alone draws the structure.
   Panel fills made this read as four heavy grey boxes. */
.tk{background:var(--canvas);padding:24px 26px 22px;position:relative;transition:background .25s ease}
.tk:hover{background:var(--surface)}
.tk-head{display:flex;align-items:flex-start;gap:14px}
.tk-ic{
  flex:none;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}
.tk:hover .tk-ic{
  transform:translateY(-2px);border-color:var(--accent-line);
  color:var(--accent-ink);background:var(--accent);
}
.tk-qa{min-width:0}
/* the customer's own words, in the page's mono micro-label voice */
.tk-q{
  font:500 10.5px/1.4 var(--mono);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;
}
.tk-t{font:600 17px/1.3 var(--font);letter-spacing:var(--tr-tight)}
.tk-d{margin-top:12px;color:var(--ink-muted);font-size:14.5px;line-height:1.6}

.stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
/* min-width:0 is load-bearing: the marquee track inside is width:max-content,
   and without it the grid column inflates to the track's full width */
.slot{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:24px 26px;min-width:0}
.slot-t{font:600 16px/1.3 var(--font)}
.slot-s{margin-top:6px;color:var(--ink-muted);font-size:14px}
.chip{
  font:500 12.5px/1 var(--font);color:var(--ink-soft);white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:8px 13px;
}

/* integration marquees — an endless drift of chips, edge-faded, paused on
   hover. Two identical sets per track make the -50% translate seamless. */
.marq{
  overflow:hidden;margin-top:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marq-track{display:flex;gap:8px;width:max-content;animation:marq 26s linear infinite}
.marq-track.marq-rev{animation-direction:reverse}
.marq-set{display:flex;gap:8px;padding-right:8px}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marq-track{animation:none;flex-wrap:wrap}
  .marq-set:nth-child(2){display:none}   /* static: one wrapped set, no clone */
  .marq{mask-image:none;-webkit-mask-image:none}
}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq{max-width:720px;margin:0 auto;border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:22px 4px;font:600 16.5px/1.4 var(--font);letter-spacing:var(--tr-tight);
  transition:color .15s;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--ink-soft)}
.pm{
  margin-left:auto;flex:none;position:relative;width:18px;height:18px;color:var(--ink-faint);
  transition:transform .25s ease;
}
.pm::before,.pm::after{content:'';position:absolute;background:currentColor;inset:auto}
.pm::before{left:0;right:0;top:8px;height:2px}
.pm::after{top:0;bottom:0;left:8px;width:2px}
.fq[open] .pm{transform:rotate(45deg)}
.fq-a{overflow:hidden}
.fq-a p{padding:0 40px 22px 4px;color:var(--ink-muted);font-size:15px;line-height:1.7}

/* ── close ──────────────────────────────────────────────────────────────── */
.close{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
  padding:130px 0 120px;text-align:center;
  /* The finale's markers enter from x:±28 (GSAP .from, which immediate-renders
     its start state at load) — on a 375px viewport the +28 offset pushed .mk-r
     4px past the page edge and the WHOLE PAGE scrolled sideways. Clip here,
     where the animation lives, so its travel can never widen the document. */
  overflow-x:clip;
}
/* a faint stage light behind the finale — depth without another colour */
.close::before{
  content:'';position:absolute;left:50%;top:50%;width:min(720px,90vw);aspect-ratio:1.6;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.05),transparent 70%);
}
.close-mark{display:flex;justify-content:center;margin-bottom:28px;color:var(--ink)}
.close-mid{position:relative}
.close-mid h2{font-size:var(--fs-hero);font-weight:800;letter-spacing:var(--tr-display)}
.close-cta{margin-top:30px}
.marker{
  font:500 12px/1.8 var(--mono);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-faint);
}
.mk-l{text-align:right}.mk-r{text-align:left}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);background:var(--void)}
.sf-in{max-width:var(--wrap);margin:0 auto;padding:56px 24px 40px}
.sf-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sf-brand{max-width:360px}
.sf-brand-row{display:flex;align-items:center;gap:10px;color:var(--ink)}
.sf-tag{margin-top:14px;color:var(--ink-muted);font-size:14px;line-height:1.7}
.sf-links{display:grid;grid-template-columns:repeat(2,auto);gap:10px 36px;align-content:start}
.sf-links a{color:var(--ink-muted);font-size:14px;transition:color .15s}
.sf-links a:hover{color:var(--ink)}
.sf-legal{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--ink-faint);font-size:13px;line-height:1.8;
}
.sf-legal a{color:inherit}
.sf-legal strong{color:var(--ink-muted)}

/* ── fab ────────────────────────────────────────────────────────────────── */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:60;
  opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;
  /* springy entrance: overshoot curve, not a plain fade */
  transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab-in{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:16px;
  background:var(--accent);color:var(--accent-ink);
  border-radius:16px;padding:12px 14px 12px 20px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.65), 0 0 28px -5px rgba(255,255,255,.42);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* a light sweep crosses the bar every few seconds — alive, not noisy.
   transform-only: the old `left` keyframes forced layout on every frame. */
.fab-in::after{
  content:'';position:absolute;top:0;bottom:0;left:-44%;width:44%;
  background:linear-gradient(105deg,transparent,rgba(15,17,19,.07) 50%,transparent);
  animation:fabSheen 3.4s ease-in-out infinite;will-change:transform;
}
@keyframes fabSheen{0%,55%{transform:translateX(0)}90%,100%{transform:translateX(420%)}}
.fab-in:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 52px -12px rgba(0,0,0,.7), 0 0 34px -4px rgba(255,255,255,.5);
}
.fab-in:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.fab-in::after{animation:none;display:none}.fab{transition:opacity .25s ease}}
.fab-txt{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
/* color:inherit is load-bearing: the global `b{color:var(--ink)}` rule would
   otherwise print WHITE text on this white bar — invisible */
.fab-txt b{font:700 17px/1 var(--font);letter-spacing:var(--tr-tight);color:inherit}
.fab-sub{font:500 12px/1 var(--font);opacity:.62}
.fab-arrow{
  flex:none;width:44px;height:44px;border-radius:13px;
  background:var(--accent-ink);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:600;
  animation:fabNudge 2.4s ease-in-out infinite;
  transition:transform .18s ease;
}
@keyframes fabNudge{0%,72%,100%{transform:translateX(0)}82%{transform:translateX(4px)}92%{transform:translateX(0)}}
.fab-in:hover .fab-arrow{animation:none;transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.fab-arrow{animation:none}}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .close{grid-template-columns:1fr;gap:20px}
  .mk-l,.mk-r{text-align:center}
}
@media (max-width:767px){
  .nav-links{display:none}
  /* backdrop-filter on a fixed bar re-blurs every scroll frame on cheap
     Androids — a solid tint costs nothing and looks near-identical */
  .nav{background:rgba(15,17,19,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* On a phone the logo + two CTAs were wider than the screen, so the right
     button (Start Building) was clipped off-frame. Tighten the rail: less side
     padding, a smaller gap, and slightly smaller buttons that never wrap. */
  .nav-in{padding:0 12px;gap:10px}
  .nav-cta{gap:8px;min-width:0}
  .nav .btn{height:36px;padding:0 12px;font-size:13px;white-space:nowrap}
  .hero{padding-top:118px}
  .hero-btns{flex-direction:column;align-items:stretch;padding:0 8px}
  .trust{grid-template-columns:1fr}
  .stack{grid-template-columns:1fr}
  .mini-hero{grid-template-columns:1fr;gap:16px}
  .m-img-lo,.m-img{aspect-ratio:16/7}
  .rail{margin-top:76px}
  .sec{padding-top:64px}
  .pcard{padding:28px 22px 24px}
  .p-cost{font-size:64px}
  .close{padding:90px 0 84px}
  .fq-a p{padding-right:8px}
  /* the wall becomes one swipeable row with snap points — the next card must
     PEEK, or the row reads as a single image and nobody swipes it */
  .work-row{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding:0 4px 8px;margin:0 -4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .work-row::-webkit-scrollbar{display:none}
  .work-card{flex:0 0 78%;scroll-snap-align:center}
  .dir-row{
    display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;
    scrollbar-width:none;
  }
  .dir-row::-webkit-scrollbar{display:none}
  .dmini{flex:0 0 108px}
  /* the fab becomes a full-width sticky action bar on phones */
  .fab{left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .fab-in{width:100%;justify-content:space-between;padding:15px 15px 15px 24px}
  .fab-txt b{font-size:18px}
}

/* FINAL ORDER PASS (2026-08-08): the film moved to sit straight under the
   headline, so it no longer needs the 48px of mid-page air, and with hero-sub
   deleted the right-hand desktop column spans one row fewer. Placed ABOVE the
   mobile block on purpose — see that block's header. */
.h-film{margin-top:26px}
@media (min-width:1024px){
  .h-film{grid-row:1 / span 4}
}

/* ── MOBILE FOLD RESCUE — deliberately the LAST rules in the file ──────────
   Media queries add no specificity, so these overrides only win by ORDER
   (the file's own header comment: "ORDER MATTERS HERE"). The previous
   version of this block sat above the base .h-film rule and above the 767px
   block, and both of its savings silently lost the cascade — measured cost:
   the ₹20 button's bottom edge at exactly the 667px fold line. Keep this
   block at the END, always. */
@media (max-width:640px){
  .hero{padding-top:96px}
  .hero-h{font-size:clamp(2.05rem,8.6vw,2.6rem);line-height:1.07}
  .hero-sub{margin-top:14px;font-size:14.5px;max-width:88vw}
  .hero-btns{margin-top:20px}
  .hero-micro{margin-top:12px;font-size:12.5px;line-height:1.6}
  .cred{margin-top:14px;font-size:9.5px;gap:8px}
  /* THE FILM IS 1:1 AND STAYS 1:1. It was forced to 16/9 here, which was
     right when it sat BELOW the CTA and its only job was to cost less scroll.
     It now sits between the headline and the button, and the source is
     1080x1080 — so 16/9 was cropping a square through object-fit:cover and
     reading as a squeezed video.
     Height is capped against the VIEWPORT instead: 92vw square on a 390px
     phone is 359px tall, which pushed the Start button onto the fold line.
     min(92vw, 42vh) keeps the square honest and keeps the button visible on
     a 667px screen, which is the shortest phone that matters. */
  .h-film{margin-top:22px}
  .film{aspect-ratio:1/1;width:min(92vw,42vh)}
  /* THE BUILD ANIMATION IS BACK ON PHONES.
     It was hidden here on the reasoning that it duplicated the film's job.
     That was true when the film sat mid-page doing the same explaining; it is
     not true now. The film is a 90-second explainer above the button, and this
     is the thing itself — a site assembling in front of you — which is the one
     piece of proof the page cannot make in words. It is also the only thing
     left between the CTA and the pricing card now that the real-sites wall is
     gone, so hiding it leaves a phone scrolling through nothing.
     Scaled down rather than removed. */
  .build{display:block;margin-top:28px;transform:scale(.92);transform-origin:top center}
}




/* SPACING PASS (2026-08-08): the gap between the build animation and the first
   rail was sized when a whole section sat in it. Nothing does now. */
.build{margin-bottom:0}
.rail{margin-top:26px}
@media (max-width:640px){
  .build{margin-bottom:0}
  .rail{margin-top:18px;margin-bottom:18px}
  .sec{padding-top:26px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   MATERIAL + CARD DECK (2026-08-08)
   Both were generated against a hardcoded #e4572e. Re-pointed at --accent-anim
   so every animation shares ONE orange and a change is one line.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --accent-anim:#e4572e; }

/* ── THE TWO ANIMATION STAGES ────────────────────────────────────────────────
   Both fragments were authored as a self-contained 16:10 demo tile: an opaque
   near-black ground with the artwork centred inside it. Dropped onto a page
   that is ALSO near-black, that ground stops being a background and becomes a
   visible rectangle — a slightly different black, with hard edges, sitting in
   the middle of the page. It reads as an embedded video that failed to load.

   Two facts about the artwork decide the fix:
     · the material board is 190×260, and
     · the deck's cards are centred at 50%/50% and pushed ±90px across and
       −124→+116 down, so its content is ~200×260.
   BOTH ARE PORTRAIT, and small. A 16:10 landscape box is the wrong shape at
   the wrong scale, which is why the art looked marooned on desktop.

   So: drop the ground entirely and let the animation sit directly on the page,
   and size the stage to the artwork instead of to an arbitrary ratio. Because
   every part is positioned from the centre, scaling the STAGE magnifies the
   whole composition without touching a single child transform — the cards keep
   their own animations untouched. Height is set per breakpoint to stay ahead of
   the scaled height (260 × scale), so nothing clips and nothing overlaps. */
.build .gm-root,
.deck-slot .wd-root{
  /* No ground, no edge — there is no box, only the animation. */
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  /* The authored 16:10 tile shape, undone. */
  width:100%;
  max-width:none;
  aspect-ratio:auto;
  margin:0 auto;
  position:relative;
  /* The clip STAYS. Panels and cards animate in from off-stage, and this edge
     is what hides them until they arrive — with the ground now transparent it
     is an invisible boundary rather than a wall. Removing it would let panels
     fly across the copy on either side. */
  overflow:hidden;
}

/* Magnify with `zoom`, not `transform: scale()`. The artwork is a fixed-pixel
   composition, so it has to be enlarged rather than laid out larger — but a
   transform scales the box only visually: a width:100% stage would render 1.5
   screens wide and push the page sideways, and its extra height would land on
   top of the next section. `zoom` enlarges the drawing AND reserves the space,
   so the stage still spans exactly its column and the section below still
   starts below it. */
/* The two stages need DIFFERENT heights, and the reason is worth writing down.

   The material board flies in from far outside the tile — measured by seeking
   its 8s cycle, it reaches ~260px past the top and bottom edges, and it does
   that at ANY stage height, so the crop is the entrance working as authored,
   not something to size around. Give it back its 16:10 tile and leave it be.

   The card deck is different: it is genuinely portrait. Seeking it through its
   8s cycle, the cards span 270×350, because they deal in from further out than
   they settle. 16:10 gave it 179px of height for 350px of composition, which is
   why the deck looked static and half-missing — the entrance was cropped away.
   370px is that measured span, and at it the deck clips 0px left, right and
   bottom; the 94px still cropped off the top is the deal-in, which is supposed
   to arrive from off-stage. */
.build .gm-root{ aspect-ratio:16/10; zoom:1; }
.deck-slot .wd-root{ height:370px; zoom:1; }

/* PHONE: fit to screen, which means the ARTWORK, not the frame.

   The frame was already spanning its column. What read as "a black patch with
   a video in it" was the drawing sitting small inside a 16:10 box — and the
   drawing is fixed-pixel, so it cannot grow while the stage is trapped inside
   the text column's gutters. The two are coupled: to enlarge one, bleed the
   other to the screen edge.

   (Removing the stage's own background did nothing for this. It was #0b0d0f
   against a #0f1113 page — four values out of 255, invisible. That fix was
   aimed at the wrong thing.)

   The heading keeps the text gutter so only the animation goes edge to edge. */
@media (max-width:759px){
  .build{ width:100vw; margin-left:calc(50% - 50vw); }
  .build .build-head{ padding-left:20px; padding-right:20px; }
  .build .gm-root{ zoom:1.15; }
}

/* DESKTOP. Two opposite failures had to be fixed here, and neither was the
   black box — that was only ever the mobile symptom.

   `.build` is a grid item that sizes to its content, and the dotted device it
   used to hold had an intrinsic width to keep it open. A width:100% stage
   contributes nothing to intrinsic width, so the column collapsed to the width
   of its little heading — 147px — and the animation was squeezed into it. That
   is what "बहुत गंदा" was. The track is 484px; take it.

   The deck had the opposite problem: nothing capped it, so a composition that
   is 270px wide was handed a 1052px stage and sat marooned in the middle of it.
   Capped so the stage stays close to the artwork it holds. */
@media (min-width:760px){
  .build{ width:100%; }
  .build .gm-root{ zoom:1.35; max-width:360px; }
  .deck-slot .wd-root{ zoom:1.3; max-width:340px; }
}

.deck-slot{ margin:8px auto 0; padding:0 20px; }
@media (max-width:640px){ .deck-slot{ margin-top:4px; } }

/* ══ g1-material ══ */
.gm-root {
  /* Strict Palette */
  --gm-ground: #0b0d0f;
  --gm-surface: #14171a;
  --gm-line: #262a2e;
  --gm-line-2: #363b41;
  --gm-ink: #ffffff;
  --gm-muted: #8a9199;
  --gm-accent: var(--accent-anim);
  --gm-live: #4ade80;

  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--gm-ground);
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.gm-root * {
  box-sizing: border-box;
}
.gm-scene {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  animation: gm-scene-flow 8s infinite;
}
.gm-board {
  width: 190px;
  height: 260px;
  background: var(--gm-surface);
  border: 2px solid var(--gm-line);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  /* Isometric Projection */
  transform: rotateX(60deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  
  /* Thick Slab Extrusion */
  box-shadow:
    -1px 1px 0 var(--gm-line),
    -2px 2px 0 var(--gm-line),
    -3px 3px 0 var(--gm-line),
    -4px 4px 0 var(--gm-line),
    -5px 5px 0 var(--gm-line),
    -6px 6px 0 var(--gm-ground);
}
.gm-panel {
  background: var(--gm-surface);
  border: 1px solid var(--gm-line-2);
  border-radius: 4px;
  transform-style: preserve-3d;
  opacity: 0;
  
  /* Panel Thickness */
  box-shadow:
    -1px 1px 0 var(--gm-line-2),
    -2px 2px 0 var(--gm-ground);
}
/* 
  Panel Internal Layouts 
*/
.gm-header {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  animation: gm-drop-header 8s infinite;
}
.gm-logo {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gm-ink);
}
.gm-nav {
  display: flex;
  gap: 4px;
}
.gm-nav-line {
  width: 10px;
  height: 3px;
  background: var(--gm-muted);
  border-radius: 2px;
}
.gm-hero {
  height: 70px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  animation: gm-drop-hero 8s infinite;
}
.gm-hero-img {
  flex: 1;
  background: var(--gm-line);
  border-radius: 2px;
}
.gm-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.gm-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gm-btn {
  width: 28px;
  height: 10px;
  background: var(--gm-accent);
  border-radius: 2px;
}
.gm-features {
  display: flex;
  gap: 6px;
  transform-style: preserve-3d;
}
.gm-feat {
  flex: 1;
  height: 50px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.gm-f1 { animation: gm-drop-f1 8s infinite; }
.gm-f2 { animation: gm-drop-f2 8s infinite; }
.gm-f3 { animation: gm-drop-f3 8s infinite; }
.gm-icon {
  width: 12px;
  height: 12px;
  background: var(--gm-muted);
  border-radius: 2px;
  margin-bottom: 2px;
}
.gm-footer {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  animation: gm-drop-footer 8s infinite;
}
.gm-live-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gm-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gm-live);
  opacity: 0;
  animation: gm-pop-live 8s infinite;
}
/* 
  Utility Elements 
*/
.gm-text-line {
  height: 3px;
  background: var(--gm-line-2);
  border-radius: 2px;
}
.gm-text-line.gm-ink {
  background: var(--gm-ink);
}
.gm-w-full { width: 100%; }
.gm-w-half { width: 60%; }
@keyframes gm-scene-flow {
  0% { transform: translateY(-150%); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  10% { transform: translateY(0); opacity: 1; animation-timing-function: linear; }
  85% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  95%, 100% { transform: translateY(150%); opacity: 0; }
}
@keyframes gm-drop-header {
  0%, 12% { transform: translateZ(150px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  17% { transform: translateZ(2px); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  19% { transform: translateZ(6px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  21%, 100% { transform: translateZ(2px); opacity: 1; }
}
@keyframes gm-drop-hero {
  0%, 22% { transform: translateZ(150px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  27% { transform: translateZ(2px); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  29% { transform: translateZ(6px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  31%, 100% { transform: translateZ(2px); opacity: 1; }
}
@keyframes gm-drop-f1 {
  0%, 32% { transform: translateZ(150px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  37% { transform: translateZ(2px); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  39% { transform: translateZ(6px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  41%, 100% { transform: translateZ(2px); opacity: 1; }
}
@keyframes gm-drop-f2 {
  0%, 36% { transform: translateZ(150px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  41% { transform: translateZ(2px); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  43% { transform: translateZ(6px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  45%, 100% { transform: translateZ(2px); opacity: 1; }
}
@keyframes gm-drop-f3 {
  0%, 40% { transform: translateZ(150px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  45% { transform: translateZ(2px); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  47% { transform: translateZ(6px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  49%, 100% { transform: translateZ(2px); opacity: 1; }
}
@keyframes gm-drop-footer {
  0%, 50% { transform: translateZ(150px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  55% { transform: translateZ(2px); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  57% { transform: translateZ(6px); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  59%, 100% { transform: translateZ(2px); opacity: 1; }
}
@keyframes gm-pop-live {
  0%, 62% { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
  65% { transform: scale(1.2); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  68%, 100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-scene,
  .gm-panel,
  .gm-live-dot {
    animation: none !important;
  }
  
  .gm-scene {
    transform: translateY(0);
    opacity: 1;
  }
  
  .gm-panel {
    transform: translateZ(2px);
    opacity: 1;
  }
  
  .gm-live-dot {
    transform: scale(1);
    opacity: 1;
  }
}

/* ══ w4 · The card deck ══ */
.wd-root {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #0b0d0f;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  perspective: 1200px;
}
.wd-scene {
  width: 10px;
  height: 10px;
  position: relative;
  transform-style: preserve-3d;
  animation: wd-scene-anim 8s infinite;
}
.wd-card {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #14171a;
  border: 1px solid #262a2e;
  border-radius: 6px;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Card 1: Nav */
.wd-card-1 {
  width: 180px;
  height: 24px;
  margin: -12px 0 0 -90px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  animation: wd-c1-anim 8s infinite;
}
.wd-c1-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  transform: translateZ(1px);
}
.wd-c1-line {
  width: 24px;
  height: 6px;
  background: #363b41;
  border-radius: 3px;
  transform: translateZ(1px);
}
/* Card 2: Hero */
.wd-card-2 {
  width: 180px;
  height: 64px;
  margin: -32px 0 0 -90px;
  padding: 8px 10px;
  animation: wd-c2-anim 8s infinite;
}
.wd-c2-img {
  width: 100%;
  height: 24px;
  background: #262a2e;
  border-radius: 4px;
  margin-bottom: 8px;
  transform: translateZ(1px);
}
.wd-c2-t1 {
  width: 60%;
  height: 6px;
  background: #ffffff;
  border-radius: 3px;
  margin-bottom: 6px;
  transform: translateZ(1px);
}
.wd-c2-t2 {
  width: 40%;
  height: 6px;
  background: #8a9199;
  border-radius: 3px;
  transform: translateZ(1px);
}
/* Card 3: Text */
.wd-card-3 {
  width: 180px;
  height: 32px;
  margin: -16px 0 0 -90px;
  padding: 6px 10px;
  animation: wd-c3-anim 8s infinite;
}
.wd-c3-t1, .wd-c3-t2, .wd-c3-t3 {
  height: 6px;
  background: #8a9199;
  border-radius: 3px;
  margin-bottom: 4px;
  transform: translateZ(1px);
}
.wd-c3-t1 { width: 100%; }
.wd-c3-t2 { width: 85%; }
.wd-c3-t3 { width: 40%; margin-bottom: 0; }
/* Cards 4 & 5: Grid */
.wd-card-4, .wd-card-5 {
  width: 86px;
  height: 56px;
  margin: -28px 0 0 -43px;
  padding: 6px;
}
.wd-card-4 { animation: wd-c4-anim 8s infinite; }
.wd-card-5 { animation: wd-c5-anim 8s infinite; }
.wd-cg-img {
  width: 100%;
  height: 28px;
  background: #262a2e;
  border-radius: 3px;
  margin-bottom: 6px;
  transform: translateZ(1px);
}
.wd-cg-t1 {
  height: 6px;
  background: #ffffff;
  border-radius: 3px;
  transform: translateZ(1px);
}
.wd-card-4 .wd-cg-t1 { width: 60%; }
.wd-card-5 .wd-cg-t1 { width: 40%; }
/* Card 6: CTA */
.wd-card-6 {
  width: 180px;
  height: 32px;
  margin: -16px 0 0 -90px;
  background: var(--accent-anim);
  border-color: var(--accent-anim);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  animation: wd-c6-anim 8s infinite;
}
.wd-c6-line {
  width: 48px;
  height: 6px;
  background: #ffffff;
  border-radius: 3px;
  transform: translateZ(1px);
}
@keyframes wd-scene-anim {
  0%, 15% { transform: scale(0.6) rotateX(60deg) rotateZ(-45deg) translate3d(0, 20px, -50px); }
  32% { transform: scale(0.6) rotateX(60deg) rotateZ(-45deg) translate3d(0, 20px, -50px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  38% { transform: scale(0.85) rotateX(-5deg) rotateZ(2deg) translate3d(0, 0, 20px); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  41% { transform: scale(0.8) rotateX(0deg) rotateZ(0deg) translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  43% { transform: scale(0.75) rotateX(2deg) rotateZ(-1deg) translate3d(0, 0, -30px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  47%, 75% { transform: scale(0.8) rotateX(0deg) rotateZ(0deg) translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
  82%, 100% { transform: scale(0.6) rotateX(60deg) rotateZ(-45deg) translate3d(0, 20px, -50px); }
}
@keyframes wd-c1-anim {
  0%, 10% { transform: translate3d(0, 0, 12px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  14% { transform: translate3d(20px, -60px, 150px) rotateZ(10deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  18%, 75% { transform: translate3d(0, -112px, 0px); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
  82%, 100% { transform: translate3d(0, 0, 12px); }
}
@keyframes wd-c2-anim {
  0%, 13% { transform: translate3d(0, 0, 10px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  17% { transform: translate3d(-30px, -20px, 150px) rotateZ(-15deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  21%, 75% { transform: translate3d(0, -60px, 0px); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
  82%, 100% { transform: translate3d(0, 0, 10px); }
}
@keyframes wd-c3-anim {
  0%, 16% { transform: translate3d(0, 0, 8px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  20% { transform: translate3d(30px, 10px, 150px) rotateZ(15deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  24%, 75% { transform: translate3d(0, -4px, 0px); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
  82%, 100% { transform: translate3d(0, 0, 8px); }
}
@keyframes wd-c4-anim {
  0%, 19% { transform: translate3d(0, 0, 6px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  23% { transform: translate3d(-50px, 70px, 150px) rotateZ(-20deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  27%, 75% { transform: translate3d(-47px, 48px, 0px); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
  82%, 100% { transform: translate3d(0, 0, 6px); }
}
@keyframes wd-c5-anim {
  0%, 22% { transform: translate3d(0, 0, 4px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  26% { transform: translate3d(50px, 70px, 150px) rotateZ(20deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  30%, 75% { transform: translate3d(47px, 48px, 0px); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
  82%, 100% { transform: translate3d(0, 0, 4px); }
}
@keyframes wd-c6-anim {
  0%, 26% { transform: translate3d(0, 0, 2px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  33% { transform: translate3d(0, 40px, 480px) rotateX(25deg) rotateZ(10deg); animation-timing-function: ease-in-out; }
  37% { transform: translate3d(0, 45px, 500px) rotateX(20deg) rotateZ(8deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 1); }
  41% { transform: translate3d(0, 100px, 0px) rotateX(0deg) rotateZ(0deg); }
  41.1%, 75% { transform: translate3d(0, 100px, 0px); animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1); }
  82%, 100% { transform: translate3d(0, 0, 2px); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-scene, .wd-card {
    animation: none !important;
  }
  .wd-scene {
    transform: scale(0.8) rotateX(0deg) rotateZ(0deg) translate3d(0, 0, 0);
  }
  .wd-card-1 { transform: translate3d(0, -112px, 0px); }
  .wd-card-2 { transform: translate3d(0, -60px, 0px); }
  .wd-card-3 { transform: translate3d(0, -4px, 0px); }
  .wd-card-4 { transform: translate3d(-47px, 48px, 0px); }
  .wd-card-5 { transform: translate3d(47px, 48px, 0px); }
  .wd-card-6 { transform: translate3d(0, 100px, 0px); }
}