/* AstroAshva home page (landing v2).
   Palette, theme ids and header come from site-theme.css; this file only adds
   the sections. Motion uses transform and opacity only, driven by landing.js. */

:root {
  --font-heading:'Noto Serif','Noto Serif Devanagari',Georgia,serif;
  --font-mantra:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif;
  --gutter:clamp(16px,4vw,40px);
  --maxw:1240px;
  --radius:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Meaning tones (AastroTone), used for feature icons only. */
  --t-saffron:#E4551F; --t-rose:#D6304F; --t-purple:#7C3AED; --t-teal:#0D9488;
  --t-blue:#2563EB; --t-gold:#B7791F; --t-green:#15803D; --t-indigo:#4F46E5;
}
[data-theme$="dark"] {
  --t-saffron:#FB8C3A; --t-rose:#FB7185; --t-purple:#A78BFA; --t-teal:#2DD4BF;
  --t-blue:#60A5FA; --t-gold:#F5B93A; --t-green:#4ADE80; --t-indigo:#818CF8;
}
/* B&W themes stay black and white. */
[data-theme^="mono"] {
  --t-saffron:var(--fg); --t-rose:var(--fg); --t-purple:var(--fg); --t-teal:var(--fg);
  --t-blue:var(--fg); --t-gold:var(--fg); --t-green:var(--fg); --t-indigo:var(--fg);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--fg); overflow-x:clip; line-height:1.5; }
@supports not (overflow:clip) { body { overflow-x:hidden; } }
img { display:block; max-width:100%; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html[data-lang="en"] [lang="hi"]:not(html), html[data-lang="hi"] [lang="en"]:not(html) { display:none !important; }
/* The language switch itself always shows both choices. */
html[data-lang="en"] .lang-seg button[lang="hi"] { display:inline-block !important; }
html[data-lang="hi"] .eyebrow, html[data-lang="hi"] .vs .who, html[data-lang="hi"] .chip i { letter-spacing:.03em; }
[data-theme$="dark"] .phone, [data-theme$="dark"] .side-phone { box-shadow:0 0 0 1px #3a3a3a, 0 40px 80px -30px rgba(0,0,0,.7); }
[data-theme$="dark"] .feat .peek > div { border-color:#2a2a2a; }
:focus-visible { outline:2px solid var(--tint); outline-offset:3px; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.grad { background:var(--tint-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
[data-theme^="mono"] .grad { background:none; color:var(--fg); -webkit-text-fill-color:currentColor; }
.h2 { font-family:var(--font-heading); font-weight:700; letter-spacing:-.025em; font-size:clamp(36px,6.2vw,84px); line-height:1.02; color:var(--fg); }
html[data-lang="hi"] .h2 { letter-spacing:0; line-height:1.18; }
.lead { font-size:clamp(17px,1.9vw,22px); line-height:1.5; color:var(--fg2); max-width:680px; text-wrap:balance; }
.h2, .q .txt, .foot-line, .hero-sub { text-wrap:balance; }
.sec { padding:clamp(80px,12vw,160px) 0; }
.sec-head { text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:clamp(40px,6vw,72px); }
.sec-head .lead { margin:0 auto; }

/* ---------- Header (site-theme.css), tightened for the home page ---------- */
.site-header { border-bottom:none; background:transparent; min-height:0; padding:16px var(--gutter); max-width:var(--maxw); margin:0 auto; }
.site-brand .site-mark { width:32px; height:32px; }
.lang-seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; }
.lang-seg button { border:none; background:transparent; color:var(--fg2); font:600 12px var(--font-body); padding:6px 11px; border-radius:999px; cursor:pointer; min-height:30px; }
.lang-seg button[aria-pressed="true"] { background:var(--tint-grad); color:var(--on-accent); }
.site-nav a { font-size:13px; }
@media (max-width:580px) {
  .site-header { flex-wrap:nowrap; align-items:center; padding:12px 16px; gap:10px; }
  .site-controls { width:auto; gap:10px; flex-wrap:nowrap; }
  .site-controls { gap:8px; }
  .site-nav a { font-size:12px; }
  .lang-seg button { padding:6px 9px; }
  .lang-seg, .site-themes { flex:none; }
}
@media (max-width:340px) {
  .site-themes button { width:28px; height:28px; }
  .site-brand .site-mark { width:28px; height:28px; }
}
@media (max-width:380px) {
  .site-header { padding:12px 12px; gap:6px; }
  .site-controls { gap:6px; }
  .lang-seg button { padding:6px 7px; }
}

/* ---------- 1. Hero ---------- */
.hero { text-align:center; }
.hero-top { display:flex; flex-direction:column; align-items:center; padding:clamp(34px,13vh,150px) 0 0; }
@media (max-width:760px) { .hero-top { padding-top:clamp(26px,6vh,56px); } }
/* The name is plain ink in every theme (black on light, white on dark).
   site-theme.css paints every h1 with the tint gradient, so undo that here. */
.wordmark, [data-theme] h1.wordmark {
  font-family:'Noto Serif',Georgia,serif; font-weight:700; text-transform:uppercase;
  white-space:nowrap; line-height:1; letter-spacing:-.01em;
  font-size:clamp(38px,7vw,124px);
  padding:0 var(--gutter); margin:0 auto;
  color:var(--fg); background:none; -webkit-text-fill-color:currentColor;
}
.tagline { margin-top:clamp(8px,1.2vw,16px); font-family:var(--font-heading); font-weight:600; font-size:clamp(19px,2.2vw,30px); color:var(--fg2); letter-spacing:-.01em; }
html[data-lang="hi"] .tagline { letter-spacing:0; }

.marquee { position:relative; margin-top:clamp(18px,3vh,36px); }
.marquee-scroll {
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; touch-action:pan-x pan-y; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.marquee-scroll::-webkit-scrollbar { display:none; }
.marquee-scroll.dragging { cursor:grabbing; }
.marquee-track { display:flex; gap:clamp(10px,1.3vw,18px); width:max-content; padding:4px clamp(10px,1.3vw,18px) 0 0; }
.card-shot {
  /* Top half of each screen only, sized from the viewport height so the whole
     row fits in the first screen under the name and badges. */
  --h:clamp(150px, calc(100svh - 610px), 330px);
  --w:calc(var(--h) * 1080 / 1110);
  flex:none; width:var(--w); height:var(--h); overflow:hidden; background:#fff;
  border-radius:0; border:1px solid var(--line); border-bottom:none;
  user-select:none; -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
}
@media (max-width:760px) { .card-shot { --h:clamp(170px, 35svh, 300px); } }
.card-shot img { width:100%; height:100%; object-fit:cover; object-position:top; pointer-events:none; -webkit-user-drag:none; }

.hero-sub { margin:clamp(12px,2vh,22px) auto 0; padding:0 var(--gutter); max-width:640px; font-size:clamp(16px,1.6vw,19px); color:var(--muted); }
.store-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-top:clamp(16px,2.6vh,26px); padding:0 var(--gutter); }
.dl-stat { margin-top:12px; font-size:14px; font-weight:600; color:var(--fg2); }
.dl-stat b { color:var(--fg); }
.play-badge img { height:56px; width:auto; }
.store-badge { display:inline-flex; align-items:center; gap:11px; height:56px; background:#000; color:#fff; border:1px solid #333; border-radius:12px; padding:0 18px; text-decoration:none; min-width:176px; }
.store-badge .ico { width:26px; height:26px; flex:none; }
.store-badge small { display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; line-height:1.2; }
.store-badge b { display:block; font-size:19px; font-weight:600; line-height:1.15; }
.play-badge, .store-badge { transition:transform .2s var(--ease); }
.play-badge:hover, .store-badge:hover { transform:translateY(-2px); }
.hero-note { margin-top:8px; font-size:13px; color:var(--muted); padding:0 var(--gutter); }
.hero-note a, .dl-note a { color:var(--fg); text-underline-offset:3px; }

/* ---------- 2. Scroll story ---------- */
.story { position:relative; height:600vh; margin-top:clamp(64px,9vw,120px); }
.story-pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mantra { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-evenly; pointer-events:none; padding:3vh 0; }
.m-row {
  font-family:var(--font-mantra); font-weight:400; white-space:nowrap; line-height:1.25;
  font-size:clamp(54px,10.5vw,176px); color:color-mix(in srgb,var(--fg) 8%,transparent);
  will-change:transform;
}
[data-theme$="dark"] .m-row { color:color-mix(in srgb,var(--fg) 9%,transparent); }
[data-theme="yellow-light"] .m-row { color:color-mix(in srgb,var(--tint) 16%,transparent); }
[data-theme="white-light"] .m-row { color:color-mix(in srgb,var(--tint) 12%,transparent); }
.m-row span { padding-right:.6em; }
.phone {
  --pw:min(clamp(214px,21vw,292px), calc((100svh - 230px) * 540 / 1110));
  position:relative; z-index:2; width:var(--pw); padding:9px; border-radius:calc(var(--pw) * .16);
  background:#0B0B0C; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px var(--line);
}
.phone .screen { position:relative; aspect-ratio:540/1110; border-radius:calc(var(--pw) * .13); overflow:hidden; background:#fff; isolation:isolate; }
.phone .screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; will-change:transform,opacity; }
.story .phone { --pw:min(clamp(196px,19vw,292px), calc((100svh - 300px) * 1206 / 2622)); }
/* Two phones, staggered for depth, showing the same feature: an Android phone
   (punch-hole camera, slim bezel, squarer corners) and an iPhone (Dynamic
   Island, rounder corners). Inside each, the screens are stacked and the
   current one fades out before the next fades in, so a phone never shows two
   screens at once. */
.story .phone.and { padding:6px; border-radius:calc(var(--pw) * .1); }
.story .phone.and .screen { border-radius:calc(var(--pw) * .075); }
.story .phone.and .screen::after { content:""; position:absolute; z-index:3; top:calc(var(--pw) * .03); left:50%; width:calc(var(--pw) * .045); aspect-ratio:1; margin-left:calc(var(--pw) * -.0225); border-radius:50%; background:#0B0B0C; box-shadow:0 0 0 1.5px rgba(255,255,255,.06); }
.story .phone.ios { padding:8px; border-radius:calc(var(--pw) * .19); background:#111113; box-shadow:0 0 0 1.5px #4a4a4e inset, 0 0 0 1px rgba(255,255,255,.1) inset, 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px var(--line); }
.story .phone.ios .screen { aspect-ratio:1206/2622; border-radius:calc(var(--pw) * .16); }
.story .phone.ios .screen::after { content:""; position:absolute; z-index:3; top:1.3%; left:50%; width:31%; aspect-ratio:125/37; transform:translateX(-50%); border-radius:999px; background:#000; }
.duo { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:center; gap:clamp(22px,4vw,64px); }
.pw { display:flex; flex-direction:column; align-items:center; }
.pw.a { transform:translate3d(0,-14px,0); }
.pw.b { transform:translate3d(0,0,0); }
.story .screen .reel { position:absolute; inset:0; }
.story .screen .sl { position:absolute; inset:0; overflow:hidden; opacity:0; will-change:opacity; }
.story .screen .sl:first-child { opacity:1; }
.story .phone .screen { background:#FBF7EE; }
[data-theme$="dark"] .story .phone .screen { background:#0B0B0C; }
/* Android: hide the capture's own status bar; the frame draws one. The iPhone
   captures keep their real iOS status bar (9:30, set on the simulator). */
.story .screen .sl img { position:absolute; left:0; top:-5.4%; width:100%; height:105.4%; object-fit:cover; object-position:top; }
.sbar { position:absolute; z-index:2; top:0; left:0; right:0; height:5.4%; display:flex; align-items:center; justify-content:space-between; padding:0 9% 0 10%;
  font:600 calc(var(--pw) * .043) var(--font-body); color:#1A1A1A; background:linear-gradient(#fff 55%,rgba(255,255,255,0)); }
.sbar svg { height:44%; width:auto; fill:#1A1A1A; }
.sl.dk .sbar { color:#F4F4F4; background:linear-gradient(#0B0B0C 55%,rgba(11,11,12,0)); }
.sl.dk .sbar svg { fill:#F4F4F4; }
.sl .sbar { font-size:calc(var(--pw) * .043); padding:0 7% 0 8%; }
.story .phone.ios .sl img { top:0; height:100%; }
.dev { margin-top:12px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--fg2); }
.pcaps { position:relative; z-index:2; margin-top:20px; height:74px; width:min(90vw,460px); }
.cap { position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.cap.on { opacity:1; transform:none; }
.chip { display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-weight:700; font-size:15px; box-shadow:0 10px 30px -18px rgba(0,0,0,.35); white-space:nowrap; }
.chip i { font-style:normal; font-size:11px; font-weight:700; letter-spacing:.06em; padding:3px 8px; border-radius:999px; background:var(--tint-grad); color:var(--on-accent); }
.cap p { font-size:15px; color:var(--fg2); max-width:440px; }
.story-bar { position:absolute; z-index:2; right:clamp(14px,3vw,40px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; }
.story-bar b { display:block; width:4px; height:34px; border-radius:4px; background:var(--line); overflow:hidden; position:relative; }
.story-bar b::after { content:""; position:absolute; inset:0; background:var(--tint); transform:scaleY(var(--f,0)); transform-origin:top; }
.story-static { display:none; }
@media (max-width:760px) {
  .story { height:480vh; }
  .story .phone { --pw:min(40vw, calc((100svh - 330px) * 1206 / 2622)); }
  .story .phone.and { padding:4px; }
  .story .phone.ios { padding:5px; }
  .dev { margin-top:8px; font-size:11px; }
  .duo { gap:14px; }
  .pw.a { transform:translate3d(0,-10px,0); }
  .pw.b { transform:translate3d(0,0,0); }
  .m-row { font-size:clamp(44px,14vw,96px); }
  .story-bar { display:none; }
  .pcaps { width:calc(100vw - 32px); height:68px; margin-top:10px; }
  .cap { gap:5px; }
  .cap p { font-size:13px; }
  .chip { font-size:13px; padding:5px 10px 5px 6px; gap:6px; }
  .chip i { font-size:10px; padding:2px 6px; }
}

/* ---------- 3. Why different ---------- */
.why .h2 { max-width:17ch; margin:0 auto; }
html[data-lang="hi"] .why .h2 { max-width:14ch; }
.vs { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:0 auto; }
.vs > div { border:1px solid var(--line); border-radius:22px; padding:clamp(20px,2.6vw,30px); background:var(--card); }
.vs .who { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.vs .big { margin-top:10px; font-family:var(--font-heading); font-weight:700; font-size:clamp(20px,2.3vw,28px); line-height:1.2; }
.vs .sm { margin-top:8px; color:var(--fg2); font-size:15px; }
.vs .us { border-color:color-mix(in srgb,var(--tint) 55%,var(--line)); background:color-mix(in srgb,var(--tint) 6%,var(--card)); }
.vs .them .big { color:var(--fg2); }
.q { text-align:center; margin:clamp(64px,9vw,110px) auto 0; max-width:960px; }
.q .txt { margin-top:14px; font-family:var(--font-heading); font-weight:700; font-size:clamp(30px,5vw,60px); line-height:1.1; letter-spacing:-.02em; }
html[data-lang="hi"] .q .txt { line-height:1.3; letter-spacing:0; }
.steps { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(36px,5vw,60px); counter-reset:s; }
.steps li { position:relative; border:1px solid var(--line); border-radius:22px; padding:24px 22px 26px; background:var(--card); }
.steps .n { font-family:var(--font-heading); font-weight:700; font-size:44px; line-height:1; }
.steps h3 { margin-top:16px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
html[data-lang="hi"] .steps h3 { letter-spacing:.02em; font-size:15px; }
.steps p { margin-top:8px; font-size:17px; line-height:1.45; }
.steps em { font-style:normal; font-weight:700; }
.steps li:last-child { border-color:color-mix(in srgb,var(--tint) 55%,var(--line)); }
.says { margin:16px auto 0; max-width:none; border-radius:26px; padding:clamp(26px,3.4vw,40px); background:var(--btn-bg); color:var(--btn-fg); display:grid; grid-template-columns:auto 1fr; gap:14px 28px; align-items:center; }
.says .eyebrow { color:inherit; opacity:.7; grid-column:1 / -1; }
.says blockquote { grid-column:1 / -1; font-family:var(--font-heading); font-weight:600; font-size:clamp(20px,2.6vw,32px); line-height:1.3; }
.foot-line { margin-top:clamp(40px,6vw,70px); text-align:center; font-family:var(--font-heading); font-weight:700; font-size:clamp(24px,3.4vw,42px); letter-spacing:-.015em; }

/* ---------- 3b. AshvaAI with several people: animated illustration ----------
   Play on view (landing.js adds s1..s5 to .ai-demo). Transforms and opacity
   only, except the thin SVG strokes that draw themselves. */
.ai .h2 { max-width:18ch; margin:0 auto; }
.demo-steps { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.demo-steps li { border:1px solid var(--line); border-radius:20px; padding:18px 20px 20px; background:var(--card); opacity:.42; transition:opacity .5s var(--ease), border-color .5s var(--ease); }
.demo-steps li.on { opacity:1; }
.demo-steps li.cur { border-color:color-mix(in srgb,var(--tint) 60%,var(--line)); }
.demo-steps .n { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); font-weight:700; font-size:15px; color:var(--muted); transition:background .4s, color .4s, border-color .4s; }
.demo-steps li.on .n { background:var(--tint-grad); border-color:transparent; color:var(--on-accent); }
.demo-steps b { display:block; margin-top:12px; font-family:var(--font-heading); font-weight:700; font-size:clamp(20px,2vw,27px); line-height:1.15; letter-spacing:-.015em; }
html[data-lang="hi"] .demo-steps b { line-height:1.35; letter-spacing:0; }
.demo-steps small { display:block; margin-top:6px; font-size:14.5px; line-height:1.45; color:var(--fg2); }

.stage { position:relative; display:grid; grid-template-columns:.85fr 1.05fr .8fr 1.5fr; gap:clamp(16px,2.6vw,40px); align-items:center;
  border:1px solid var(--line); border-radius:32px; padding:clamp(22px,3vw,44px); min-height:540px; overflow:hidden;
  background:radial-gradient(120% 90% at 60% 50%, color-mix(in srgb,var(--tint) 7%,var(--card)) 0%, var(--card) 70%); }
.flows { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.flows path { fill:none; stroke:color-mix(in srgb,var(--tint) 55%,var(--line)); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--ease); }
.flows path.f2 { transition-delay:.15s; }
.flows path.pulse { stroke:var(--tint); stroke-width:3.5; stroke-dasharray:.05 .95; stroke-dashoffset:1; opacity:0; transition:opacity .4s; }
.ai-demo.s2 .flows .f1, .ai-demo.s3 .flows .f2, .ai-demo.s4 .flows .f3 { stroke-dashoffset:0; }
.ai-demo.s3 .flows .pulse { opacity:1; animation:flow 1.8s linear infinite; }
@keyframes flow { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }

.stage .col { position:relative; z-index:1; display:flex; flex-direction:column; }
.stage .people, .stage .charts { align-self:stretch; justify-content:space-around; gap:18px; }
.person { display:flex; align-items:center; gap:12px; padding:9px 18px 9px 9px; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:0 14px 30px -20px rgba(0,0,0,.4); align-self:flex-start;
  opacity:0; transform:translate3d(-18px,0,0) scale(.92); transition:opacity .55s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i) * .22s); }
.person .av { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--tint-grad); color:var(--on-accent); font-weight:700; font-size:18px; flex:none; }
[data-theme="white-light"] .person .av, [data-theme="white-light"] .cq { color:#fff; }
.person .pn b { display:block; font-size:17px; line-height:1.2; }
.person .pn small { display:block; font-size:12.5px; color:var(--muted); }
.ai-demo.s1 .person { opacity:1; transform:none; }

.kc { display:flex; align-items:center; gap:12px; align-self:flex-start; opacity:0; transform:scale(.9); transition:opacity .5s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i) * .25s); }
.kcg { display:block; flex:none; line-height:0; }
.kcg svg { width:86px; height:86px; flex:none; background:var(--card); border-radius:10px; }
.kcg svg path { fill:none; stroke:var(--fg2); stroke-width:1.6; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease); transition-delay:calc(var(--i) * .25s + .1s); }
.kcg svg circle { fill:var(--tint); opacity:0; transform:scale(.2); transform-box:fill-box; transform-origin:center; transition:opacity .4s, transform .5s var(--ease); transition-delay:calc(var(--i) * .25s + 1s); }
.kc .facts { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.fact { font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:color-mix(in srgb,var(--tint) 14%,var(--card)); color:var(--fg); white-space:nowrap;
  opacity:0; transform:translate3d(0,6px,0); transition:opacity .4s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i) * .25s + .8s); }
.fact + .fact { transition-delay:calc(var(--i) * .25s + 1s); }
.ai-demo.s2 .kc { opacity:1; transform:none; }
.ai-demo.s2 .kcg svg path { stroke-dashoffset:0; }
.ai-demo.s2 .kcg svg circle { opacity:1; transform:none; }
.ai-demo.s2 .fact { opacity:1; transform:none; }

.stage .core { align-items:center; justify-content:center; gap:18px; }
.node { position:relative; width:108px; height:108px; border-radius:50%; background:var(--card); border:2px solid color-mix(in srgb,var(--tint) 70%,var(--line)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  opacity:.35; transform:scale(.86); transition:opacity .5s var(--ease), transform .7s var(--ease); }
.node .site-mark { width:40px; height:40px; }
.node b { font-size:13px; }
.node::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--tint); opacity:0; }
.ai-demo.s3 .node { opacity:1; transform:none; }
.ai-demo.s3 .node::after { animation:ring 2.4s var(--ease) infinite; }
@keyframes ring { 0% { opacity:.7; transform:scale(1); } 100% { opacity:0; transform:scale(1.45); } }
.rules { display:flex; flex-direction:column; gap:8px; align-items:center; }
.rule { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--tint) 45%,var(--line)); background:var(--card); white-space:nowrap;
  opacity:0; transform:translate3d(0,8px,0) scale(.9); transition:opacity .4s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i) * .3s + .6s); }
.rule::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--tint); flex:none; }
.ai-demo.s3 .rule { opacity:1; transform:none; }

.stage .chat { gap:14px; }
.cq { align-self:flex-end; max-width:92%; background:var(--tint-grad); color:var(--on-accent); font-weight:600; font-size:16px; line-height:1.4; padding:12px 16px; border-radius:18px 18px 4px 18px;
  opacity:0; transform:translate3d(0,10px,0); transition:opacity .5s var(--ease), transform .6s var(--ease); transition-delay:.7s; }
.ai-demo.s1 .cq { opacity:1; transform:none; }
.ca { background:var(--card); border:1px solid var(--line); border-radius:18px 18px 18px 4px; padding:14px 18px 16px; box-shadow:0 20px 40px -28px rgba(0,0,0,.4); min-height:206px;
  opacity:0; transform:translate3d(0,10px,0); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.ai-demo.s4 .ca { opacity:1; transform:none; }
.ca-h { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted); }
.ca-h .site-mark { width:20px; height:20px; }
.dots { display:inline-flex; gap:4px; margin-left:4px; transition:opacity .3s; }
.dots i { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay:.15s; } .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes dot { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }
.ai-demo.s5 .dots { opacity:0; }
.ln { margin-top:9px; font-size:15.5px; line-height:1.45; opacity:0; transform:translate3d(0,8px,0); transition:opacity .45s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i) * .5s); }
.ln b { color:var(--fg); }
.ai-demo.s5 .ln { opacity:1; transform:none; }
.src { margin-top:12px; display:flex; gap:8px; align-items:center; opacity:0; transition:opacity .5s var(--ease) 1.6s; }
.ai-demo.s5 .src { opacity:1; }
.chip-s, .lang-s { font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--fg2); }
.chip-s { border-color:color-mix(in srgb,var(--tint) 50%,var(--line)); color:var(--fg); }
.replay { margin:16px auto 0; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:transparent; color:var(--fg2); font:600 13px var(--font-body); padding:8px 16px; border-radius:999px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s; }
.replay svg { width:16px; height:16px; }
.ai-demo.done .replay { opacity:1; pointer-events:auto; }
.ai-note { margin:clamp(24px,4vw,44px) auto 0; max-width:720px; text-align:center; color:var(--muted); font-size:15px; }

@media (max-width:980px) {
  .demo-steps { grid-template-columns:repeat(2,1fr); }
  .stage { grid-template-columns:1fr; min-height:0; gap:30px; padding:24px 18px; }
  .stage .people, .stage .charts { flex-direction:row; justify-content:space-around; gap:8px; }
  .person { flex-direction:column; gap:6px; padding:10px 8px; border-radius:18px; text-align:center; align-self:auto; width:31%; transform:translate3d(0,-14px,0) scale(.92); }
  .kc { flex-direction:column; width:31%; gap:8px; }
  .kcg svg { width:min(76px,20vw); height:min(76px,20vw); }
  .kc .facts { align-items:center; }
  .fact { font-size:11px; padding:4px 8px; white-space:normal; text-align:center; }
  .stage .core { flex-direction:row; justify-content:center; gap:16px; }
  .node { width:88px; height:88px; flex:none; }
  .rules { align-items:flex-start; }
  .rule { white-space:normal; }
  .cq { font-size:15px; }
}
@media (max-width:420px) {
  .demo-steps small { font-size:13px; }
  .demo-steps li { padding:14px 14px 16px; }
}

.kc { flex-wrap:wrap; }
/* The four datasets AshvaAI reads per person; lit only where that person has it. */
.ds { flex-basis:100%; display:flex; gap:5px; }
.dsc { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 7px 3px 5px; border-radius:999px; border:1px dashed var(--line); color:var(--muted); background:var(--card);
  opacity:0; transform:translate3d(0,6px,0); transition:opacity .4s var(--ease), transform .5s var(--ease), background .4s, color .4s; transition-delay:calc(var(--i) * .25s + 1.1s + var(--j) * .1s); }
.dsc svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.dsc:not(.on) { opacity:0; }
.dsc.on { border-style:solid; border-color:color-mix(in srgb,var(--tint) 50%,var(--line)); color:var(--fg); }
.ai-demo.s2 .dsc { opacity:.45; transform:none; }
.ai-demo.s2 .dsc.on { opacity:1; }
.ai-demo.s3 .dsc.on { background:color-mix(in srgb,var(--tint) 16%,var(--card)); animation:dsflow 2.4s var(--ease) calc(var(--j) * .15s) 2; }
@keyframes dsflow { 0%,100% { transform:none; } 40% { transform:translate3d(4px,0,0) scale(1.06); } }
@media (max-width:980px) {
  .kc { flex-wrap:nowrap; }
  .ds { flex-basis:auto; display:grid; grid-template-columns:repeat(2,auto); justify-content:center; gap:3px; }
  .dsc { padding:2px; gap:0; }
  .dsc svg { width:12px; height:12px; }
  .dsl { display:none; }
}

/* ---------- 4. Everything in one app ---------- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(300px,auto); gap:14px; grid-auto-flow:dense; }
.feat { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:24px 24px 0; display:flex; flex-direction:column; min-height:330px; }
.feat.big { grid-column:span 2; grid-row:span 2; }
.feat.wide { grid-column:span 2; }
.feat .ic { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--tone); background:color-mix(in srgb,var(--tone) 13%,var(--card)); flex:none; }
.feat .ic svg { width:24px; height:24px; }
.feat h3 { margin-top:16px; font-family:var(--font-heading); font-weight:700; font-size:clamp(22px,2vw,28px); line-height:1.12; letter-spacing:-.015em; }
.feat.big h3 { font-size:clamp(28px,3.4vw,44px); }
html[data-lang="hi"] .feat h3 { letter-spacing:0; line-height:1.3; }
.feat p { margin-top:8px; color:var(--fg2); font-size:15.5px; line-height:1.45; max-width:420px; }
.feat.big p { font-size:clamp(16px,1.6vw,19px); }
.feat .peek { margin-top:auto; padding-top:22px; display:flex; justify-content:center; }
.feat .peek > div { width:min(72%,230px); aspect-ratio:540/640; overflow:hidden; border:7px solid #0B0B0C; border-bottom:none; border-radius:26px 26px 0 0; background:#fff; transition:transform .6s var(--ease); }
.feat.big .peek > div { width:min(62%,330px); aspect-ratio:540/880; border-width:9px; border-radius:36px 36px 0 0; }
.feat .peek img { width:100%; height:auto; }
.feat:hover .peek > div { transform:translateY(-8px); }
.feat .small { margin-top:6px; font-size:12px; color:var(--muted); }
.loshu { margin:auto auto 24px; padding-top:20px; display:grid; grid-template-columns:repeat(3,58px); gap:8px; }
.loshu span { height:58px; border-radius:14px; display:grid; place-items:center; font-family:var(--font-heading); font-weight:700; font-size:24px; border:1px solid var(--line); color:var(--muted); }
.loshu span.h { color:var(--tone); border-color:color-mix(in srgb,var(--tone) 45%,var(--line)); background:color-mix(in srgb,var(--tone) 10%,var(--card)); }
.feat.wide .loshu-wrap { display:flex; gap:28px; align-items:flex-end; margin-top:auto; }
@media (max-width:1000px) {
  .bento { grid-template-columns:repeat(2,1fr); }
  .feat.big { grid-column:span 2; grid-row:auto; }
}
@media (max-width:600px) {
  .bento { grid-template-columns:1fr; grid-auto-rows:auto; }
  .feat.big, .feat.wide { grid-column:auto; }
  .feat { min-height:0; }
  .feat .peek > div { width:min(66%,220px); }
}

/* ---------- 5. Reviews (hidden until reviews.json holds three) ---------- */
.reviews[hidden] { display:none; }
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rev { border:1px solid var(--line); border-radius:22px; padding:26px; background:var(--card); display:flex; flex-direction:column; gap:14px; }
.rev .stars { color:var(--tint); letter-spacing:2px; font-size:16px; }
.rev blockquote { font-size:17px; line-height:1.5; }
.rev .who { margin-top:auto; font-weight:700; font-size:14px; }
.rev .who small { display:block; font-weight:500; color:var(--muted); }
@media (max-width:860px) { .rev-grid { grid-template-columns:1fr; } }

/* ---------- 6. Download ---------- */
.dl { position:relative; overflow:hidden; }
.dl-cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,330px)); justify-content:center; gap:16px; }
.dl-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:28px 26px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; box-shadow:0 30px 60px -40px rgba(0,0,0,.35); }
.dl-card .plat { display:flex; align-items:center; gap:10px; font-weight:700; font-size:22px; }
.dl-card .plat svg { width:26px; height:26px; }
.dl-card .sub { font-size:14px; color:var(--muted); }
.dl-card .qr { margin:8px 0 6px; width:176px; height:176px; padding:10px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.dl-card .qr img { width:100%; height:100%; image-rendering:pixelated; }
.dl-card .scan { font-size:13px; color:var(--muted); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 22px; border-radius:14px; background:var(--btn-bg); color:var(--btn-fg); font-weight:700; font-size:15px; text-decoration:none; margin-top:6px; width:100%; transition:transform .2s var(--ease); }
.btn:hover { transform:translateY(-2px); }
.dl-note { margin-top:26px; text-align:center; font-size:14px; color:var(--muted); position:relative; z-index:2; }
.disclaimer { margin:14px auto 0; max-width:720px; text-align:center; font-size:12px; color:var(--muted); position:relative; z-index:2; }
.stats { display:flex; justify-content:center; gap:28px; margin-top:22px; position:relative; z-index:2; }
.stats .n { font-family:var(--font-heading); font-weight:700; font-size:26px; text-align:center; }
.stats .l { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.side-phone { position:absolute; z-index:1; top:50%; width:230px; padding:8px; border-radius:38px; background:#0B0B0C; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); display:none; }
.side-phone > div { aspect-ratio:540/1110; border-radius:31px; overflow:hidden; background:#fff; }
.side-phone img { width:100%; height:100%; object-fit:cover; object-position:top; }
.side-phone.l { left:max(2vw, calc(50% - 640px)); transform:translateY(-44%) rotate(-9deg); }
.side-phone.r { right:max(2vw, calc(50% - 640px)); transform:translateY(-40%) rotate(9deg); }
@media (min-width:1180px) { .side-phone { display:block; } }
@media (max-width:700px) {
  .dl-cards { grid-template-columns:minmax(0,360px); }
  .dl-card .qr { width:150px; height:150px; }
}

/* ---------- Reveal on scroll ---------- */
html.js [data-reveal] { opacity:0; transform:translate3d(0,34px,0); transition:opacity .9s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s); }
html.js [data-reveal].in { opacity:1; transform:none; }

/* ---------- 7. Footer (copied from the previous home page) ---------- */
footer { border-top:1px solid var(--line); }
.foot-simple { display:grid; grid-template-columns:repeat(5,1fr); max-width:var(--maxw); margin:0 auto; }
.foot-simple > * { padding:12px 30px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; text-decoration:none; }
.foot-simple > *:not(:last-child) { border-right:1px solid var(--line); }
.foot-simple a:hover { color:var(--tint); }
.foot-big { display:none; }
.foot-top { display:flex; flex-direction:column; gap:22px; padding:26px 22px; }
.fb-row { display:flex; align-items:flex-start; gap:9px; }
.fb-row .site-mark { width:26px; height:26px; }
.fb-name { font-family:'Noto Serif',serif; font-size:20px; font-weight:700; color:var(--fg); line-height:1; }
.fb-tag { margin-top:9px; font-size:14px; color:var(--fg2); }
.fb-sub { margin-top:3px; font-size:12.5px; color:var(--muted); }
.foot-cols { display:flex; gap:40px; flex-wrap:wrap; }
.fcol { display:flex; flex-direction:column; gap:9px; }
.fcol b { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:2px; }
.fcol a { font-size:14px; color:var(--fg2); text-decoration:none; }
.fcol a:hover { color:var(--tint); }
.fc-addr { font-size:12.5px; color:var(--muted); }
.foot-word { padding:clamp(26px,5vw,64px) clamp(16px,4vw,40px) clamp(10px,2vw,18px); max-width:var(--maxw); margin:0 auto; }
.foot-word svg { display:block; width:100%; height:auto; overflow:visible; }
.foot-word text { font-family:'Noto Serif',Georgia,serif; font-weight:700; fill:var(--fg); letter-spacing:-.012em; }
[data-theme="white-light"] .foot-word text { fill:var(--tint); }
.foot-word .fw-sub { text-align:center; margin-top:clamp(6px,1.2vw,14px); font-size:clamp(10px,1.05vw,13px); letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }
html[data-lang="hi"] .foot-word .fw-sub { letter-spacing:.06em; }
.foot-legal { border-top:1px solid var(--line); padding:15px clamp(16px,4vw,30px); display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; text-align:center; font-size:11.5px; color:var(--muted); }
.foot-legal a { color:inherit; text-decoration:none; }
footer { max-width:var(--maxw); margin:0 auto; }
@media (max-width:900px) {
  .foot-simple { display:none; }
  .foot-big { display:block; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width:1000px) {
  .steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .vs { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .play-badge img, .store-badge { height:50px; }
  .store-badge { min-width:160px; }
  .store-badge b { font-size:17px; }
}

@media (max-width:400px) {
  .store-row { gap:8px; padding:0 12px; }
  .play-badge img, .store-badge { height:46px; }
  .store-badge { min-width:0; padding:0 12px; gap:8px; }
  .store-badge .ico { width:22px; height:22px; }
  .store-badge b { font-size:16px; }
}

/* ---------- Reduced motion: no pinning, no drifting, everything visible ---------- */
@media (prefers-reduced-motion:reduce) {
  html.js [data-reveal] { opacity:1; transform:none; transition:none; }
  .story { height:auto; padding:60px 0; }
  .story-pin { position:relative; height:auto; overflow:visible; }
  .story-pin > .duo, .story-bar, .mantra { display:none; }
  .story-static { display:grid; grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:28px 20px; padding:0 var(--gutter); width:100%; }
  .story-static figure { text-align:center; }
  .story-static .pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
  .story-static img { border-radius:18px; border:5px solid #0B0B0C; aspect-ratio:540/1110; object-fit:cover; object-position:top; width:100%; height:auto; }
  .story-static img[data-dev="ios"] { border-radius:24px; aspect-ratio:1206/2622; }
  .story-static figcaption { margin-top:10px; font-weight:700; }
  .ai-demo *, .ai-demo *::before, .ai-demo *::after { transition:none !important; animation:none !important; }
  .cap, .feat .peek > div, .btn, .play-badge, .store-badge { transition:none; }
  body { transition:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:760px) {
  .story-static { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
}