/* Visual + motion layer: "Dawn" light theme.
   Motion rules:
   - html.motion is set by boot.js only when reduced motion is not requested.
   - html.lite (Save-Data, <=2 GB RAM, <=4 cores non-Apple) drops blur and ambient effects.
   - html.motion-paused (the "Pause animations" button) freezes everything that loops.
   Without JS, or with reduced motion, every element renders in its final, readable state. */
@font-face{font-family:Manrope;src:url(/manrope.woff2) format("woff2");font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/instrument-serif.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring-bounce:linear(0, 0.04, 0.144, 0.285, 0.443, 0.6, 0.746, 0.872, 0.973, 1.049, 1.1, 1.13, 1.142, 1.139, 1.127, 1.108, 1.086, 1.063, 1.042, 1.023, 1.008, 0.996, 0.988, 0.982, 0.98, 0.98, 0.981, 0.984, 0.987, 0.99, 0.993, 0.996, 0.998, 1, 1.001, 1.002, 1.003, 1.003, 1.003, 1.002, 1);
  --spring-snappy:linear(0, 0.017, 0.063, 0.128, 0.204, 0.288, 0.373, 0.456, 0.536, 0.611, 0.679, 0.74, 0.793, 0.84, 0.879, 0.913, 0.94, 0.963, 0.98, 0.994, 1.005, 1.012, 1.017, 1.02, 1.022, 1.023, 1.022, 1.021, 1.02, 1.018, 1.016, 1.014, 1.012, 1.011, 1.009, 1.007, 1.006, 1.005, 1.004, 1.003, 1);
  --spring-soft:linear(0, 0.018, 0.065, 0.132, 0.209, 0.292, 0.376, 0.458, 0.536, 0.607, 0.673, 0.731, 0.781, 0.826, 0.863, 0.895, 0.922, 0.943, 0.961, 0.975, 0.986, 0.994, 1, 1.004, 1.007, 1.009, 1.01, 1.011, 1.011, 1.01, 1.01, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.004, 1.003, 1.003, 1);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --two-tone:#7b7c94;
  --shadow-soft:0 1px 2px #1a1f4d0d,0 12px 32px -12px #1a1f4d26;
  --shadow-lift:0 2px 4px #1a1f4d0f,0 30px 60px -24px #2a2f8a4d;
}
@supports not (transition-timing-function:linear(0,1)){:root{--spring-bounce:cubic-bezier(.34,1.56,.64,1);--spring-snappy:cubic-bezier(.22,1.2,.36,1);--spring-soft:cubic-bezier(.16,1,.3,1)}}
html{overflow-x:clip}
body{container-type:inline-size}

/* ---------- scroll progress + header ---------- */
.scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:45;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent-2),var(--peach));display:none}
@supports (animation-timeline:scroll()){html.motion .scroll-progress{display:block;animation:progress linear both;animation-timeline:scroll(root)}}
@keyframes progress{to{transform:scaleX(1)}}
.site-bar{position:fixed;inset:0 0 auto;z-index:40;color:#fff;border-bottom:1px solid transparent;transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s;view-transition-name:site-bar}
.nav{display:flex;align-items:center;gap:1.4rem;padding:.7rem 0}
.nav nav{margin-left:auto}
.brand b{font-weight:800}
.brand img{border-radius:9px;transition:transform .6s var(--spring-bounce)}
.brand:hover img{transform:rotate(-18deg) scale(1.06)}
.nav nav a:not(.lang){position:relative;opacity:.92}
.nav nav a:not(.lang)::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav nav a:not(.lang):hover::after,.nav nav a[aria-current]::after{transform:scaleX(1)}
.lang{border:1px solid currentColor;border-radius:999px;padding:0 .85rem;opacity:.95}
.bar-cta{min-height:40px;padding:.4rem 1rem;font-size:.92rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s,transform .45s var(--spring-snappy),visibility 0s .35s}
.site-bar.scrolled,.site-bar.solid{color:var(--ink);background:#ffffffe6;border-bottom-color:var(--line);box-shadow:0 8px 24px -18px #1a1f4d40}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .site-bar.scrolled,html:not(.lite) .site-bar.solid{background:#ffffffb8;backdrop-filter:blur(16px) saturate(170%)}}
html:not(.js) .site-bar{position:absolute;color:var(--ink);background:#fff}
.site-bar.cta-on .bar-cta,.site-bar.solid .bar-cta{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* ---------- buttons ---------- */
.button,button{position:relative;isolation:isolate;transition:transform .5s var(--spring-snappy),translate .6s var(--spring-bounce),background-color .25s,border-color .25s,box-shadow .35s,color .25s}
@media (hover:hover){.button:hover,button:hover{transform:scale(1.03)}}
.button:active,button:active{transform:scale(.97);transition-duration:.16s}
.gloss{overflow:hidden;background:linear-gradient(180deg,#7381ff 0%,#4f5ef0 55%,#4453e8 100%);border-color:#3c4ad8;color:#fff;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -2px 6px #2a35b04d,0 8px 22px -8px #4453e8b3}
.gloss::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff70 48%,transparent 66%);transform:translateX(-130%);transition:transform .9s var(--ease-out)}
@media (hover:hover){.gloss:hover{box-shadow:inset 0 1px 0 #ffffff80,inset 0 -2px 6px #2a35b04d,0 14px 30px -10px #4453e8d9}.gloss:hover::after{transform:translateX(130%)}}
html.motion:not(.motion-paused) .hero .gloss::after{animation:shine 6.6s 2.4s cubic-bezier(.77,0,.175,1) infinite}
@keyframes shine{0%,91%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.glass{background:#2a359047;border-color:#ffffffa6;color:#fff;text-shadow:0 1px 2px #1e2a8a66}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .glass{backdrop-filter:blur(10px)}}
.glass:hover{background:#2a359066;border-color:#fff}
.ink{background:linear-gradient(180deg,#2a2b3a,#0f0f18);border-color:#0f0f18;color:#fff;box-shadow:inset 0 1px 0 #ffffff33,0 12px 26px -12px #0f0f18b3}
.ink:hover{border-color:#0f0f18}
.arrow{display:inline-block;transition:transform .45s var(--spring-bounce)}
.button:hover .arrow{transform:translate(3px,-3px)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;padding:clamp(7rem,13vw,9.5rem) 0 2rem;text-align:center}
.hero-sky{--horizon:clamp(500px,60vh,700px);position:absolute;inset:0 0 auto;height:clamp(1080px,150vh,1500px);z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
/* Layered dawn scene. Each .layer shifts with the pointer (translate) and with scroll (transform);
   ridge tracks drift sideways on their own transform, so the three motions never fight. */
.hero-sky .layer{position:absolute;inset:0;display:block;transition:translate 1.4s var(--ease-out)}
.sky{background:radial-gradient(ellipse 42% 34% at 0 0,#ffffffb3,#fff0 70%),radial-gradient(ellipse 34% 30% at 100% 0,#ffffffa6,#fff0 70%),linear-gradient(180deg,#4a6ef0 0,#7895f6 calc(var(--horizon) * .42),#b7c2f7 calc(var(--horizon) * .92),#f2cfc4 calc(var(--horizon) + 50px),#fbdccd calc(var(--horizon) + 130px),#fde8dd calc(var(--horizon) + 260px),#fdf0e9 100%)}
.sun i{position:absolute;display:block;left:76%;top:calc(var(--horizon) + 110px);transform:translate(-50%,-50%)}
.sun-core{height:clamp(520px,72vh,820px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 9%,#ffffffeb 15%,#ffe7d680 32%,#ffd9c400 62%)}
.sun-streak{width:46%;height:16px;border-radius:50%;background:radial-gradient(ellipse,#fffffff2 0,#ffffff00 70%)}
.cloud{position:absolute;left:0;display:block;width:30%;height:9%;opacity:.45;background:radial-gradient(ellipse 34% 60% at 30% 62%,#ffffffd9,#fff0 70%),radial-gradient(ellipse 30% 70% at 55% 42%,#ffffffe6,#fff0 70%),radial-gradient(ellipse 30% 55% at 78% 66%,#ffffffcc,#fff0 70%)}
.cloud.c1{top:15%;transform:translateX(8cqw)}
.cloud.c2{top:25%;width:22%;opacity:.35;transform:translateX(64cqw)}
.cloud.c3{top:6%;width:36%;opacity:.4;transform:translateX(38cqw)}
.hero-sky .ridge,.hero-sky .mist{inset:calc(var(--horizon) - 40px) 0 0}
.ridge-track{position:absolute;top:0;bottom:0;left:-90px;width:calc(2 * max(100cqw, 900px));background-repeat:repeat-x;background-position:0 0;background-size:50% 100%}
.r0 .ridge-track{background-image:url(/bg/ridge-0.svg)}
.r1 .ridge-track{background-image:url(/bg/ridge-1.svg)}
.r2 .ridge-track{background-image:url(/bg/ridge-2.svg)}
.r3 .ridge-track{background-image:url(/bg/ridge-3.svg)}
.r4 .ridge-track{background-image:url(/bg/ridge-4.svg)}
.r0{--drift:210s;--sy:150px}.r1{--drift:160s;--sy:120px}.r2{--drift:120s;--sy:90px}.r3{--drift:92s;--sy:64px}.r4{--drift:70s;--sy:40px}
.sun{--sy:-70px}.clouds{--sy:30px}.birds{--sy:80px}.mist{--sy:50px}
.mist{background:linear-gradient(180deg,#fff0 30%,#ffffff47 48%,#fff0 70%)}
.scene-fade{position:absolute;inset:0;display:block;background:linear-gradient(180deg,#fff0 70%,#fff 100%)}
.flock{position:absolute;left:0;top:var(--y);display:block;transform:translateX(var(--x))}
.flock.f1{--y:calc(var(--horizon) - 150px);--x:63cqw;--fly:48s;--delay:-30s}
.flock.f2{--y:calc(var(--horizon) - 250px);--x:27cqw;--fly:66s;--delay:-21s}
.flock.f3{--y:calc(var(--horizon) - 70px);--x:84cqw;--fly:40s;--delay:-4s}
.bird{position:absolute;display:block;width:calc(38px * var(--s,1))}
.bird:nth-child(2){left:calc(40px * var(--s,1));top:calc(-18px * var(--s,1));--s2:.86}
.bird:nth-child(3){left:calc(74px * var(--s,1));top:calc(10px * var(--s,1));--s2:.78}
.bird:nth-child(4){left:calc(-34px * var(--s,1));top:calc(17px * var(--s,1));--s2:.7}
.bird:not(:first-child){width:calc(38px * var(--s,1) * var(--s2))}
.flock.f2{--s:.68}.flock.f3{--s:1.12}
.bird svg{width:100%;overflow:visible;opacity:.74}
.bird svg path{fill:none;stroke:#363b7d;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bird svg .body{fill:#363b7d;stroke:none}
.bird .wing,.bird .w-in,.bird .w-out,.bird svg{transform-box:view-box}
.bird .w-in{transform-origin:20px 10px;transform:rotate(6deg)}
.bird .w-out{transform-origin:11px 7.2px;transform:rotate(-5deg)}
.bird .mirror{transform-origin:20px 10px;transform:scaleX(-1)}
html.motion .bird{animation:soar var(--soar,6.5s) var(--ease-io) infinite alternate}
html.motion .bird svg{animation:bird-body var(--wing,3.70s) var(--phase,0s) infinite}
html.motion .bird .w-in{animation:wing-in var(--wing,3.70s) var(--phase,0s) infinite}
html.motion .bird .w-out{animation:wing-out var(--wing,3.70s) var(--phase,0s) infinite}
.flock .bird:nth-child(1){--phase:-.35s}
.flock .bird:nth-child(2){--wing:3.96s;--phase:-1.9s;--soar:7.4s}
.flock .bird:nth-child(3){--wing:3.48s;--phase:-.9s;--soar:5.8s}
.flock .bird:nth-child(4){--wing:4.14s;--phase:-2.6s;--soar:8.2s}
.flock.f2 .bird{--phase:-1.4s}
.flock.f3 .bird:nth-child(1){--phase:-2.2s}
@keyframes wing-in{0.00%{transform:rotate(34deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}5.41%{transform:rotate(-30deg);animation-timing-function:cubic-bezier(.3,0,.4,1)}13.51%{transform:rotate(34deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}18.92%{transform:rotate(-30deg);animation-timing-function:cubic-bezier(.3,0,.4,1)}27.03%{transform:rotate(34deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}32.43%{transform:rotate(-30deg);animation-timing-function:cubic-bezier(.3,0,.4,1)}40.54%{transform:rotate(34deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}45.95%{transform:rotate(-30deg);animation-timing-function:cubic-bezier(.3,0,.4,1)}64.16%{transform:rotate(5deg);animation-timing-function:ease-in-out}93.11%{transform:rotate(8deg);animation-timing-function:ease-in-out}100.00%{transform:rotate(34deg);animation-timing-function:linear}}
@keyframes wing-out{0.00%{transform:rotate(10deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}5.41%{transform:rotate(-16deg);animation-timing-function:ease-out}9.73%{transform:rotate(30deg);animation-timing-function:ease-in-out}13.51%{transform:rotate(10deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}18.92%{transform:rotate(-16deg);animation-timing-function:ease-out}23.24%{transform:rotate(30deg);animation-timing-function:ease-in-out}27.03%{transform:rotate(10deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}32.43%{transform:rotate(-16deg);animation-timing-function:ease-out}36.76%{transform:rotate(30deg);animation-timing-function:ease-in-out}40.54%{transform:rotate(10deg);animation-timing-function:cubic-bezier(.5,0,.6,1)}45.95%{transform:rotate(-16deg);animation-timing-function:ease-out}50.27%{transform:rotate(30deg);animation-timing-function:ease-in-out}64.16%{transform:rotate(-6deg);animation-timing-function:ease-in-out}93.11%{transform:rotate(-3deg);animation-timing-function:ease-in-out}100.00%{transform:rotate(10deg);animation-timing-function:linear}}
@keyframes bird-body{0.00%{transform:translateY(.6px);animation-timing-function:cubic-bezier(.5,0,.6,1)}5.41%{transform:translateY(-1.8px);animation-timing-function:cubic-bezier(.3,0,.4,1)}13.51%{transform:translateY(.6px);animation-timing-function:cubic-bezier(.5,0,.6,1)}18.92%{transform:translateY(-1.8px);animation-timing-function:cubic-bezier(.3,0,.4,1)}27.03%{transform:translateY(.6px);animation-timing-function:cubic-bezier(.5,0,.6,1)}32.43%{transform:translateY(-1.8px);animation-timing-function:cubic-bezier(.3,0,.4,1)}40.54%{transform:translateY(.6px);animation-timing-function:cubic-bezier(.5,0,.6,1)}45.95%{transform:translateY(-1.8px);animation-timing-function:cubic-bezier(.3,0,.4,1)}64.16%{transform:translateY(.4px);animation-timing-function:ease-in-out}93.11%{transform:translateY(1.6px);animation-timing-function:ease-in-out}100.00%{transform:translateY(.6px);animation-timing-function:linear}}
@keyframes soar{0%{transform:translate(0,5px) rotate(-3deg)}50%{transform:translate(6px,-6px) rotate(2deg)}100%{transform:translate(-4px,-11px) rotate(4deg)}}
html.motion .flock{animation:fly var(--fly) var(--delay) linear infinite}
html.motion .cloud{animation:cloud-drift 120s -35s linear infinite}
html.motion .cloud.c2{animation-duration:150s;animation-delay:-60s}
html.motion .cloud.c3{animation-duration:180s;animation-delay:-110s}
html.motion:not(.lite) .ridge-track{animation:ridge-drift var(--drift) linear infinite}
html.motion .sun-core{animation:sun-pulse 7s var(--ease-io) infinite alternate}
html.motion .sun-streak{animation:streak 9s var(--ease-io) infinite alternate}
html.motion .mist{animation:mist 14s var(--ease-io) infinite alternate}
@keyframes ridge-drift{to{transform:translate3d(-50%,0,0)}}
@keyframes fly{from{transform:translateX(-14cqw)}to{transform:translateX(114cqw)}}
@keyframes cloud-drift{from{transform:translateX(-40cqw)}to{transform:translateX(110cqw)}}
@keyframes sun-pulse{to{transform:translate(-50%,-50%) scale(1.07)}}
@keyframes streak{from{opacity:.75}to{opacity:1;transform:translate(-50%,-50%) scaleX(1.08)}}
@keyframes mist{from{opacity:.5}to{opacity:1}}
@supports (animation-timeline:scroll()){
  html.motion:not(.lite) .hero-sky .layer:not(.sky,.mist){animation:scene-par linear both;animation-timeline:scroll(root);animation-range:0 100vh}
}
@keyframes scene-par{to{transform:translateY(var(--sy,0px))}}
html.scene-off .hero-sky *{animation-play-state:paused!important}
/* Pause freezes the scene in place (no jump back to the start). Scroll parallax stays user-driven. */
html.motion-paused .hero-sky :is(.flock,.bird,.bird svg,.bird .w-in,.bird .w-out,.cloud,.ridge-track,.sun-core,.sun-streak,.mist){animation-play-state:paused!important}
.cursor-glow{position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:radial-gradient(circle,#ffffff4d 0,#ffffff14 42%,transparent 70%);opacity:0;transition:translate 1.1s var(--ease-out),opacity .6s}
.hero:hover .cursor-glow.on{opacity:1}
.hero-copy{position:relative;z-index:1;display:grid;justify-items:center;color:#fff}
.phase{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .7rem;border:1px solid #ffffff66;border-radius:999px;background:#ffffff1f;color:#fff;font-weight:650;font-size:.93rem}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .phase{backdrop-filter:blur(8px)}}
.ping{position:relative;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #b5d86acc;flex-shrink:0}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);opacity:0}
html.motion:not(.motion-paused) .ping::after{animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.85}80%,100%{transform:scale(3.2);opacity:0}}
.headline{font-family:var(--serif);font-weight:400;font-size:clamp(3.5rem,8vw,6.4rem);line-height:.96;letter-spacing:-.02em;margin:1.2rem 0 1.2rem;color:#fff;filter:drop-shadow(0 2px 18px #1e2a8a40)}
.headline .wmask{display:inline-block;overflow:clip;padding:.04em .08em .24em;margin:-.04em -.08em -.24em;vertical-align:top}
[lang=hi] .headline .wmask{padding-top:.2em;margin-top:-.2em}
.headline .word{display:inline-block}
.headline .accent{font-style:italic}
[lang=hi] .headline{font-family:system-ui,sans-serif;font-weight:700;font-size:clamp(2.5rem,5.6vw,4.7rem);line-height:1.18;letter-spacing:0}
[lang=hi] .headline .accent{font-style:normal}
.hero-rule{display:block;width:min(420px,70%);height:1px;margin:0 0 1.3rem;background:linear-gradient(90deg,transparent,#ffffffb3,transparent)}
.hero .lead{color:#fff;max-width:34ch;font-size:clamp(1.08rem,1.9vw,1.3rem);font-weight:550;text-shadow:0 1px 2px #1e2a8a59,0 0 24px #1e2a8a40}
.hero .actions{justify-content:center;margin-top:1.6rem}
html.motion .headline .word{animation:word-in .55s cubic-bezier(.22,1,.36,1) both}
html.motion .headline .wmask:nth-of-type(2) .word{animation-delay:0.1s}
html.motion .headline .wmask:nth-of-type(3) .word{animation-delay:0.2s}
html.motion .headline .wmask:nth-of-type(4) .word{animation-delay:0.3s}
html.motion .headline .wmask:nth-of-type(5) .word{animation-delay:0.4s}
html.motion .headline .wmask:nth-of-type(6) .word{animation-delay:0.5s}
html.motion .headline .wmask:nth-of-type(7) .word{animation-delay:0.6s}
html.motion .headline .wmask:nth-of-type(8) .word{animation-delay:0.7s}
html.motion .phase{animation:rise .8s var(--ease-out) both}
html.motion .hero-rule{animation:rule-in .6s 1s var(--ease-out) both}
html.motion .hero .lead{animation:fade-up .5s 1.2s ease-out both}
html.motion .hero .actions{animation:fade-up .6s 1.3s var(--spring-soft) both}
@keyframes word-in{from{transform:translateY(1.25em)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}}
@keyframes rule-in{from{opacity:0;transform:scaleX(.2)}}

/* device stage */
.stage-wrap{position:relative;margin-top:clamp(2.5rem,5vw,3.6rem)}
.device-stage{position:relative;isolation:isolate;overflow:hidden;height:clamp(520px,52vw,640px);border-radius:28px;border:1px solid #ffffffb3;background:conic-gradient(from 180deg at 50% -10%,#ffffff00 0deg,#ffffff26 16deg,#ffffff00 32deg,#ffffff1f 52deg,#ffffff00 70deg,#ffffff00 290deg,#ffffff1f 310deg,#ffffff00 328deg,#ffffff26 344deg,#ffffff00 360deg),radial-gradient(120% 80% at 50% 118%,#7f5ae6 0%,#7f5ae600 60%),linear-gradient(180deg,#fbd09e 0%,#f6a676 34%,#eb8579 60%,#a873df 100%);box-shadow:0 2px 6px #1a1f4d1a,0 50px 100px -40px #3a3c9f80}
.stage-bar{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 .9rem;background:#ffffff26;color:#fff;font-size:.78rem;font-weight:700;z-index:3}
.stage-brand{display:inline-flex;align-items:center;gap:.4rem}
.stage-brand img{border-radius:4px}
.stage-icons{display:flex;gap:.4rem}
.stage-icons i{width:14px;height:10px;border-radius:3px;border:1.5px solid #fff}
.float-pill{position:absolute;z-index:5;top:52px;left:0;right:0;margin-inline:auto;width:max-content;display:flex;align-items:center;gap:.55rem;padding:.35rem .45rem .35rem .4rem;border-radius:999px;background:#16161fd9;border:1px solid #ffffff2b;color:#fff;font-size:.82rem;font-weight:650;box-shadow:0 10px 30px -10px #0008}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .float-pill{background:#16161fb3;backdrop-filter:blur(14px)}}
.float-pill img{border-radius:50%}
.fp-label{opacity:.75}
.float-pill .clock{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#d9f0a2}
.fp-stop{width:26px;height:26px;border-radius:50%;background:#ffffff1f;position:relative}
.fp-stop::after{content:"";position:absolute;inset:9px;border-radius:2px;background:#fff}
html.motion .float-pill{animation:drop .9s 2.1s var(--spring-bounce) both}
@keyframes drop{from{opacity:0;transform:translateY(-22px) scale(.92)}}
.phone{position:absolute;z-index:1;left:0;right:0;margin-inline:auto;top:108px;width:min(300px,64%);height:600px;border-radius:46px;border:10px solid #13131c;background:linear-gradient(170deg,#c9bbff 0%,#e9c4f2 45%,#ffc6a8 100%);box-shadow:0 0 0 1px #ffffff40,0 40px 80px -30px #1d1150b3}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1.1rem 0;color:#fff;font-size:.72rem;font-weight:700}
.cam{width:12px;height:12px;border-radius:50%;background:#13131c}
.sig{display:flex;gap:2px;align-items:end}.sig i{width:3px;background:#fff;border-radius:1px}.sig i:nth-child(1){height:5px}.sig i:nth-child(2){height:7px}.sig i:nth-child(3){height:9px}
.phone-clock{display:grid;justify-items:center;margin-top:1.4rem;color:#fff;text-shadow:0 2px 20px #5a3fb055}
.phone-clock strong{font-size:3.6rem;font-weight:600;letter-spacing:-.04em;line-height:1}
.phone-clock span{font-size:.8rem;font-weight:650;opacity:.9}
.phone-apps{position:absolute;left:1.1rem;right:1.1rem;bottom:2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.phone-apps i{aspect-ratio:1;border-radius:14px;background:#ffffff59;border:1px solid #ffffff66}
html.motion .phone{animation:phone-up 1.1s 1.75s var(--ease-out) both}
@keyframes phone-up{from{opacity:0;transform:translateY(60px)}}
.side-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:999px;background:#ffffffe6;color:var(--ink);font-size:.85rem;font-weight:700;box-shadow:var(--shadow-lift);white-space:nowrap}
.side-chip svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.side-chip.left{left:6%;top:44%}
.side-chip.right{right:6%;top:64%}
html.motion .side-chip{animation:pop .9s 2.7s var(--spring-bounce) both}
html.motion .side-chip.right{animation-delay:2.9s}
html.motion:not(.motion-paused):not(.lite) .side-chip.left{animation:pop .9s 2.7s var(--spring-bounce) both,bob 6s 3.6s var(--ease-io) infinite alternate}
html.motion:not(.motion-paused):not(.lite) .side-chip.right{animation:pop .9s 2.9s var(--spring-bounce) both,bob 7s 3.8s var(--ease-io) infinite alternate-reverse}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes bob{to{transform:translateY(-10px)}}
.stack{position:absolute;z-index:3;left:0;right:0;margin-inline:auto;top:206px;width:min(410px,90%);transform-style:preserve-3d;transition:transform .9s var(--spring-soft)}
.preview{position:relative;isolation:isolate;overflow:hidden;padding:1rem 1.1rem .9rem;border-radius:22px;text-align:left;color:#fff;border:1px solid #ffffff24;background:#17171fed;box-shadow:0 30px 70px -24px #0b0626cc,0 0 0 1px #00000014;view-transition-name:alert-card}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .preview{background:#17171fbf;backdrop-filter:blur(22px) saturate(160%)}}
html.motion .preview{animation:notify-in 1.1s 2.3s var(--spring-bounce) both}
@keyframes notify-in{from{opacity:0;transform:translateY(-40px) scale(.95)}}
.beam{position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.beam::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 64%,#a9b4ff 78%,#ffd2b8 86%,transparent 95%)}
html.motion:not(.motion-paused):not(.lite) .beam::before{animation:spin 6s linear infinite}
html:not(.motion) .beam,html.lite .beam{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.preview-top{display:flex;align-items:center;gap:.6rem;font-weight:780}
.preview-top img{border-radius:9px}
.preview-top .time{margin-left:auto;color:#c9c9d6;font-weight:600;font-size:.82rem}
.preview .chip{font-size:.78rem;color:#e6e6f0;margin:.6rem 0 0;padding:.12rem .6rem;border-radius:999px;background:#ffffff14;border:1px solid #ffffff1f}
.states{display:grid}
.state{grid-area:1/1;transition:opacity .5s var(--ease-out),transform .6s var(--spring-soft),visibility 0s .5s}
.state-guide,.state-done{opacity:0;visibility:hidden;transform:translateY(14px)}
.state-guide{display:grid;align-content:center}
.state-alert{transition:opacity .5s var(--ease-out),transform .6s var(--spring-soft)}
.preview[data-state=guide] .state-alert,.preview[data-state=done] .state-alert{opacity:0;transform:translateY(-14px)}
.preview[data-state=guide] .state-guide,.preview[data-state=done] .state-done{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}
.receipt{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.1rem .7rem;padding:.75rem 0 .6rem;margin:.7rem 0 .55rem;border-block:1px solid #ffffff1f}
.receipt>span:first-child{grid-column:1/-1;color:#e6e6f0;font-size:.92rem}
.receipt strong{font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:650;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.receipt .due{font-size:.84rem;color:#d9f0a2;padding-bottom:.35rem}
.alert-text{font-size:.93rem;margin:0 0 .75rem;color:#ededf5}
.pills{display:flex;gap:.4rem;flex-wrap:wrap}
.pills span{padding:.3rem .7rem;border-radius:999px;border:1px solid #ffffff2e;background:#ffffff0f;font-size:.78rem;font-weight:700;transition:transform .35s var(--spring-snappy),background-color .3s,color .3s}
.pills .hot{background:#4f5ef0;border-color:#7381ff}
.preview[data-press] .pills .hot{transform:scale(.92);background:#fff;color:#2c37b8}
.state-title{color:#fff;font-weight:750;font-size:1.02rem;margin:.9rem 0 .7rem}
.state-guide ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.state-guide li{display:flex;align-items:center;gap:.65rem;font-size:.9rem;color:#ededf5}
.state-guide li span{width:20px;height:20px;border-radius:50%;border:1.5px solid #ffffff66;flex-shrink:0;position:relative}
.state-guide li span::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#d9f0a2;transform:scale(0);transition:transform .45s var(--spring-bounce)}
.state-guide li.on span::after{transform:scale(1)}
.state-done{display:grid;justify-items:center;align-content:center;text-align:center}
.state-done p{margin:0;font-size:.86rem;color:#c9c9d6}
.state-done .state-title{margin:.6rem 0 .2rem}
.done-check{width:64px;height:64px;fill:none;stroke:#d9f0a2;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.done-check path{stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1}
.done-check circle{stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center}
.preview[data-state=done] .done-check circle{stroke-dashoffset:0;transition:stroke-dashoffset .7s .15s var(--ease-out)}
.preview[data-state=done] .done-check path{stroke-dashoffset:0;transition:stroke-dashoffset .45s .6s var(--ease-out)}
.tap{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#ffffff40;border:2px solid #fff;opacity:0;pointer-events:none;z-index:3}
.card-link{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;margin-top:.45rem;font-weight:750;color:#c5ccff;text-decoration:none}
.card-link span{transition:transform .4s var(--spring-bounce)}
.card-link:hover{color:#fff}
.card-link:hover span{transform:translateX(4px)}
.hero-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.hero-controls button{min-height:44px;padding:.35rem .95rem;font-size:.88rem;font-weight:650;color:#fff;background:#2a35903d;border-color:#ffffff73;text-shadow:0 1px 2px #1e2a8a66}
.hero-controls button:hover{background:#2a359066;border-color:#fff}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .hero-controls button{backdrop-filter:blur(8px)}}
html.motion .hero-controls{animation:fade-up .5s 1.45s ease-out both}
.play-dot{color:#d9f0a2;font-size:.72rem}
.motion-icon{width:12px;height:12px;display:inline-block;border-inline:3px solid #d9f0a2;border-block:0}
.motion-toggle[data-paused] .motion-icon{border:0;border-left:11px solid #d9f0a2;border-block:6px solid transparent;width:0;height:0}
html.motion .device-stage{animation:fly-in 1.3s 1.5s cubic-bezier(.22,1,.36,1) both}
@keyframes fly-in{0%{opacity:0;transform:perspective(800px) translate3d(0,200px,100px)}25%{opacity:1}100%{transform:none}}

/* ---------- sections ---------- */
.section{padding:clamp(4rem,8vw,8rem) 0}
.section h2,.final-copy h2{font-size:clamp(1.9rem,4.2vw,3.5rem);font-weight:500;line-height:1.2;letter-spacing:-.04em}
[lang=hi] .section h2,[lang=hi] .final-copy h2{letter-spacing:0;line-height:1.35;font-weight:600}
.two-tone{color:var(--ink);background:linear-gradient(90deg,#15151c 0%,#2a2b3a 40%,#5d5e74 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.two-tone span{opacity:.82}
.section-head{text-align:center;display:grid;justify-items:center}
.section-head p{max-width:52ch}

/* helps */
.helps h2{margin-bottom:2rem}
.helps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.h-card{position:relative;isolation:isolate;overflow:hidden;min-height:440px;padding:clamp(1.5rem,3vw,2.2rem);border-radius:28px;transition:transform .7s var(--spring-soft),box-shadow .4s}
@media (hover:hover){.h-card:hover{transform:translateY(-4px)}}
.h-card h3{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.3;font-weight:600;letter-spacing:-.025em;max-width:22ch}
[lang=hi] .h-card h3{letter-spacing:0;line-height:1.5}
.h-card p{max-width:40ch}
.h-card.blue{color:#fff;background:radial-gradient(90% 70% at 100% 100%,#8fa0ff 0%,#8fa0ff00 60%),linear-gradient(160deg,#7d8cff 0%,#5868f0 55%,#4453e8 100%);box-shadow:var(--shadow-lift)}
.h-card.blue p{color:#eef0ffe6}
.h-card.grey{background:#f3f4f9;border:1px solid var(--line)}
.inline-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.02em .55em .06em;border-radius:999px;background:#ffffff33;border:1px solid #ffffff73;vertical-align:baseline;white-space:nowrap}
.inline-chip::before{content:"";width:.42em;height:.42em;border-radius:50%;background:#d9f0a2}
.inline-chip.dark{background:#16161f;border-color:#16161f;color:#fff}
.inline-chip.dark::before{background:#7381ff}
.review-ring{position:absolute;left:clamp(1.5rem,3vw,2.2rem);right:clamp(1.5rem,3vw,2.2rem);bottom:clamp(1.5rem,3vw,2.2rem);display:flex;align-items:center;gap:1.2rem;padding:1rem 1.2rem;border-radius:20px;background:#ffffff26;border:1px solid #ffffff4d}
.review-ring svg{width:92px;height:92px;flex-shrink:0;fill:none;stroke-linecap:round;stroke-width:9}
.review-ring path{stroke:#fff;stroke-dasharray:1;stroke-dashoffset:0}
.review-ring path:nth-child(6){stroke:#d9f0a2}
.review-ring div{display:grid}
.review-ring strong{font-size:1.15rem;font-weight:700}
.review-ring span{color:#eef0ffd9;font-size:.92rem}
html.motion .h-card.lit .review-ring path{animation:draw .5s var(--ease-out) both}
html.motion .h-card.lit .review-ring path:nth-child(2){animation-delay:.18s}
html.motion .h-card.lit .review-ring path:nth-child(3){animation-delay:.36s}
html.motion .h-card.lit .review-ring path:nth-child(4){animation-delay:.54s}
html.motion .h-card.lit .review-ring path:nth-child(5){animation-delay:.72s}
html.motion .h-card.lit .review-ring path:nth-child(6){animation-delay:.9s}
.mini-alert{position:absolute;left:clamp(1.5rem,3vw,2.2rem);right:clamp(1.5rem,3vw,2.2rem);bottom:clamp(1.5rem,3vw,2.2rem);padding:1rem 1.1rem;border-radius:20px;background:#16161f;color:#fff;box-shadow:0 24px 50px -24px #16161fb3}
.ma-top{display:flex;align-items:center;gap:.5rem;font-weight:750;font-size:.9rem}
.ma-top img{border-radius:6px}
.ma-top span{margin-left:auto;color:#a9a9bb;font-weight:600;font-size:.8rem}
.mini-alert p{color:#ededf5;font-size:.92rem;margin:.6rem 0 .8rem}
.ma-actions{display:flex;flex-wrap:wrap;gap:.4rem}
.ma-actions span{padding:.35rem .8rem;border-radius:999px;border:1px solid #ffffff2e;font-size:.82rem;font-weight:700;transition:transform .4s var(--spring-snappy),background-color .3s}
.ma-actions .hot{background:#4f5ef0;border-color:#7381ff}
@media (hover:hover){.h-card.grey:hover .ma-actions .hot{transform:scale(1.05)}}

/* story + ledger */
.origin{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:2rem 4rem;align-items:center}
.origin h2{max-width:14ch}
.ledger{position:relative;overflow:hidden;padding:1.5rem 1.5rem 1.2rem;border:1px solid transparent;border-radius:28px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,#e3e6fb,#f9ddd0) border-box;box-shadow:var(--shadow-lift)}
.ledger::before{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(0deg,transparent 0 39px,#eef0f8 39px 40px);opacity:.7;pointer-events:none}
.ledger>*{position:relative}
.ledger-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .8rem}
.ledger-amount{font-size:clamp(2.4rem,5vw,3.5rem);font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ledger-label{color:var(--muted);font-size:.92rem}
.chart{position:relative;margin:1.3rem 0 .5rem}
.spark-line{position:absolute;left:0;right:0;top:0;width:100%;height:calc(100% - 1.6rem);overflow:visible;pointer-events:none}
.spark-line path{fill:none;stroke:#e9805c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.38rem;align-items:end;height:200px;margin:0;padding:0;list-style:none}
.months li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.35rem;height:100%}
.months .bar{position:relative;display:block;width:100%;border-radius:8px 8px 3px 3px;transform-origin:bottom}
.months .used .bar{height:12px;background:linear-gradient(180deg,#cfe89a,#a3c95a)}
.months .paid .bar{background:linear-gradient(180deg,#8392ff,#4453e8);box-shadow:0 10px 20px -10px #4453e8a6}
.months li:nth-child(7) .bar{height:15%}.months li:nth-child(8) .bar{height:29%}.months li:nth-child(9) .bar{height:43%}
.months li:nth-child(10) .bar{height:57%}.months li:nth-child(11) .bar{height:71%}.months li:nth-child(12) .bar{height:85%}
.months b{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:.66rem;font-weight:750;color:var(--accent-ink);white-space:nowrap}
.months .m{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.84rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.legend span::before{content:"";width:12px;height:12px;border-radius:4px}
.legend .used::before{background:#b8d97a}
.legend .paid::before{background:#5867f0}

/* official app cards */
.official .section-head{margin-bottom:2.4rem}
.official-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.o-card p{margin:1rem .2rem 0;color:var(--muted)}
.o-card strong{color:var(--ink);font-weight:700}
.o-visual{position:relative;display:grid;place-items:center;height:240px;border-radius:24px;overflow:hidden;border:1px solid var(--line);transition:transform .7s var(--spring-soft),box-shadow .4s}
@media (hover:hover){.o-card:hover .o-visual{transform:translateY(-4px);box-shadow:var(--shadow-lift)}}
.o-visual.play{background:radial-gradient(80% 80% at 20% 0%,#dfe4ff,transparent),linear-gradient(160deg,#eef0fb,#e4e8fb)}
.o-visual.upi{background:radial-gradient(80% 80% at 80% 0%,#ffe2d4,transparent),linear-gradient(160deg,#fbf0ea,#f5e7f3)}
.o-visual.confirm{background:radial-gradient(80% 80% at 50% 100%,#e2f2c4,transparent),linear-gradient(160deg,#f2f7e8,#eef0fb)}
.o-window{width:82%;padding:1rem;border-radius:16px;background:#fff;box-shadow:var(--shadow-soft);display:grid;gap:.55rem;text-align:left}
.o-dots{display:flex;gap:4px}.o-dots i{width:8px;height:8px;border-radius:50%;background:#e2e3ee}
.o-window ol{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.o-window ol li{display:flex;align-items:center;justify-content:space-between;padding:.45rem .7rem;border-radius:10px;background:#f4f5fa;font-size:.82rem;font-weight:650;color:var(--ink-2)}
.o-window ol li::after{content:"›";color:var(--faint);font-size:1.1rem;line-height:1}
.o-window ol li.hot{background:#4453e8;color:#fff}
.o-window ol li.hot::after{color:#fff}
.o-title{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
[lang=hi] .o-title{letter-spacing:0;text-transform:none}
.mandate{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:12px;background:#f7f4f2}
.m-icon{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,#ffb38e,#e8728a);flex-shrink:0}
.m-text{display:grid;flex:1;min-width:0}
.m-text b{font-size:.85rem;color:var(--ink)}
.m-text small{font-size:.74rem;color:var(--muted)}
.m-action{padding:.25rem .6rem;border-radius:999px;border:1px solid #e8a08a;color:#a63d22;font-size:.74rem;font-weight:750}
.mandate.ghost{opacity:.45}
.mandate.ghost .m-icon{background:#e6e3ee}
.mandate.ghost b{display:block;width:60%;height:9px;border-radius:5px;background:#e6e3ee}
.mandate.ghost small{display:block;width:40%;height:7px;margin-top:5px;border-radius:4px;background:#efedf3}
.c-yes,.c-no{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem;border-radius:999px;font-size:.84rem;font-weight:750}
.c-yes{background:#4453e8;color:#fff}
.c-yes svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.c-yes path{stroke-dasharray:1;stroke-dashoffset:0}
.c-no{border:1px solid var(--line-strong);color:var(--ink-2)}
.guides-row{display:grid;justify-items:center;margin-top:3rem}
.guides-row p{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
[lang=hi] .guides-row p{letter-spacing:0;text-transform:none;font-size:.9rem}
.guides-row ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;list-style:none;margin:0;padding:0}
.guides-row li{display:inline-flex;align-items:center;gap:.5rem;font-weight:650;color:var(--ink-2)}
.g-dot{width:18px;height:18px;border-radius:6px;background:linear-gradient(140deg,#8392ff,#4453e8);box-shadow:inset 0 1px 0 #ffffff66}
.guides-row li:nth-child(2) .g-dot{background:linear-gradient(140deg,#ffb38e,#e8728a)}
.guides-row li:nth-child(3) .g-dot{background:linear-gradient(140deg,#cfe89a,#86b33f)}
.guides-row li:nth-child(4) .g-dot{background:linear-gradient(140deg,#c7c9da,#8b8ea8)}

/* facts */
.facts{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem 4.5rem;align-items:center}
.history{padding:1.4rem;border-radius:28px;background:radial-gradient(90% 70% at 0% 0%,#dfe4ff,transparent),linear-gradient(160deg,#eceefe,#f6eaf0);border:1px solid var(--line)}
.h-head{display:flex;justify-content:space-between;align-items:center;margin:0 .3rem 1rem;font-weight:750;color:var(--ink)}
.h-sim{font-size:.75rem;font-weight:700;color:var(--accent-ink);padding:.15rem .6rem;border-radius:999px;background:#fff}
.history ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.history li{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:16px;background:#fff;box-shadow:var(--shadow-soft);transition:transform .7s var(--spring-soft)}
@media (hover:hover){.history li:hover{transform:translateX(6px)}}
.h-icon{width:38px;height:38px;border-radius:11px;flex-shrink:0}
.h-icon.t0{background:linear-gradient(140deg,#ffb38e,#e8728a)}.h-icon.t1{background:linear-gradient(140deg,#8392ff,#4453e8)}.h-icon.t2{background:linear-gradient(140deg,#9be3e0,#3fa6b3)}
.h-name{display:grid;flex:1;font-weight:700;color:var(--ink);font-size:.95rem}
.h-name small{color:var(--muted);font-weight:600}
.h-state{padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:750}
.h-state.s0{background:#eef7dc;color:#41600e}.h-state.s1{background:#eceefe;color:#2c37b8}.h-state.s2{background:#fff1e8;color:#9a3f1a}
.facts dl{margin:1.4rem 0 0}
.fact{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:.2rem 2rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.fact dt{display:contents}
.fact-n{grid-row:span 2;font-size:clamp(2.6rem,5vw,3.2rem);font-weight:400;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.fact-n small{font-size:.45em;letter-spacing:0;margin-left:.15em;color:var(--muted)}
.fact-label{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:400;color:var(--ink);letter-spacing:-.03em}
.fact dd{margin:0;color:var(--muted);max-width:44ch}

/* pilot band */
.pilot-band{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap;padding:clamp(1.5rem,4vw,2.4rem);border-radius:28px;background:linear-gradient(120deg,#eef0fb,#fbeee8);border:1px solid var(--line)}
.band-copy{max-width:62ch}
.band-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:750;color:var(--ink);font-size:1.1rem;margin-bottom:.5rem}
.band-copy p{margin:0}
.pilot-band .button.glass{color:var(--ink);background:#fff;border-color:var(--line-strong);box-shadow:var(--shadow-soft);backdrop-filter:none;text-shadow:none}

/* FAQ */
.faq{max-width:860px}
.faq h2{margin-bottom:1.5rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;padding:1.2rem 0;cursor:pointer;list-style:none;font-size:clamp(1.1rem,2vw,1.45rem);font-weight:500;letter-spacing:-.03em;color:var(--ink)}
[lang=hi] .faq summary{letter-spacing:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.chev{width:12px;height:12px;flex-shrink:0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.faq details[open] .chev{transform:translateY(2px) rotate(-135deg)}
.faq .answer p{margin:0 0 1.2rem;max-width:68ch}
html.motion .faq details[open] .answer{animation:rise .45s var(--ease-out) both}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  html.motion .faq details{interpolate-size:allow-keywords}
  html.motion .faq details::details-content{height:0;overflow:clip;transition:height .5s var(--ease-out),content-visibility .5s allow-discrete}
  html.motion .faq details[open]::details-content{height:auto}
}

/* final CTA with glossy keycaps */
.final-cta{position:relative;overflow:hidden;padding:clamp(5rem,10vw,8rem) 0;background:linear-gradient(180deg,#ffffff 0%,#eef0fe 40%,#e2e6fd 100%)}
.final-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:2rem}
.final-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);max-width:22ch;margin-bottom:1.6rem}
.keycaps{position:relative;height:340px}
.keycap{position:absolute;display:grid;place-items:center;width:132px;height:132px;border-radius:34px;background:linear-gradient(145deg,#ffffff 0%,#eef0fd 60%,#dfe3fb 100%);box-shadow:inset 0 2px 0 #fff,inset 0 -8px 16px #5a64c41f,0 34px 50px -22px #4453e866,0 10px 20px -10px #1a1f4d40}
.keycap span{font-size:3.4rem;font-weight:600;color:var(--accent)}
.keycap svg{width:56px;height:56px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.keycap.k1{left:8%;top:18%;transform:rotate(-14deg)}
.keycap.k2{left:46%;top:44%;width:150px;height:150px;transform:rotate(10deg);background:linear-gradient(145deg,#8f9cff 0%,#5a69f0 60%,#4453e8 100%);box-shadow:inset 0 2px 0 #ffffff80,inset 0 -10px 18px #2a35b066,0 40px 60px -24px #4453e899}
.keycap.k2 svg{stroke:#fff}
.keycap.k3{right:4%;top:2%;width:108px;height:108px;transform:rotate(18deg);opacity:.9}
.keycap.k3 svg{width:44px;height:44px}
html.motion:not(.motion-paused):not(.lite) .keycap.k1{animation:float-a 7s var(--ease-io) infinite alternate}
html.motion:not(.motion-paused):not(.lite) .keycap.k2{animation:float-b 8s var(--ease-io) infinite alternate}
html.motion:not(.motion-paused):not(.lite) .keycap.k3{animation:float-c 6s var(--ease-io) infinite alternate}
@keyframes float-a{to{transform:rotate(-8deg) translateY(-14px)}}
@keyframes float-b{to{transform:rotate(4deg) translateY(-18px)}}
@keyframes float-c{to{transform:rotate(24deg) translateY(-10px)}}

/* ---------- scroll reveals ---------- */
html.io-reveal .reveal{transition:opacity .5s ease-out,transform .7s var(--spring-soft),box-shadow .4s}
html.io-reveal .reveal:not(.in){opacity:0;transform:translateY(20px)}
html.io-reveal :is(.h-card,.o-card,.ledger,.history,.pilot-band).reveal:not(.in){transform:translateY(36px)}
html.io-reveal :is(.helps-grid,.official-grid,.facts dl) .reveal:nth-child(2){transition-delay:.12s}
html.io-reveal :is(.official-grid,.facts dl) .reveal:nth-child(3){transition-delay:.24s}
html.io-reveal .reveal.in{transition-delay:0s}
@keyframes reveal{from{opacity:0;transform:translateY(46px) scale(.98);filter:blur(6px)}}
@keyframes reveal-lite{from{opacity:0;transform:translateY(28px)}}
@keyframes draw{from{stroke-dashoffset:1}}

/* ---------- demo ---------- */
.demo-head{display:grid;justify-items:start}
.demo-head .chip{padding:.2rem .75rem;border-radius:999px;background:var(--bg-tint);border:1px solid #d9ddf8}
.due-chip{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.2rem;color:var(--ink-2);font-weight:650}
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;font-size:.84rem;color:var(--muted);font-weight:650}
.stepper li{display:grid;gap:.4rem}
.stepper span{position:relative;display:block;height:4px;border-radius:4px;background:#e8e9f3;overflow:hidden}
.stepper span::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent-2),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--spring-soft)}
.demo[data-step="0"] .stepper li:nth-child(-n+1) span::after,.demo[data-step="1"] .stepper li:nth-child(-n+2) span::after,.demo[data-step="2"] .stepper li:nth-child(-n+3) span::after,.demo[data-step="3"] .stepper li span::after{transform:scaleX(1)}
.demo[data-step="0"] .stepper li:nth-child(1),.demo[data-step="1"] .stepper li:nth-child(2),.demo[data-step="2"] .stepper li:nth-child(3),.demo[data-step="3"] .stepper li:nth-child(4){color:var(--ink)}
.stage{position:relative;isolation:isolate;overflow:hidden;padding:.8rem clamp(.8rem,3.5vw,1.6rem) clamp(1rem,3.5vw,1.6rem);border-radius:34px;border:1px solid #ffffffb3;background:radial-gradient(120% 80% at 50% 118%,#7f5ae6 0%,#7f5ae600 60%),linear-gradient(180deg,#fbd09e 0%,#f6a676 34%,#eb8579 62%,#a873df 100%);box-shadow:var(--shadow-lift);view-transition-name:alert-card}
.stage-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:.8rem;font-size:.8rem;font-weight:700;color:#fff}
.notch{width:96px;height:24px;border-radius:999px;background:#13131c}
.signal{display:flex;gap:2px;align-items:end;justify-self:end}
.signal i{width:4px;border-radius:1px;background:#fff}
.signal i:nth-child(1){height:5px}.signal i:nth-child(2){height:8px}.signal i:nth-child(3){height:11px}
.panels{view-transition-name:panel}
.demo .panel{position:relative;border-radius:24px;border:1px solid #ffffffcc;background:#fffffff2;box-shadow:0 24px 50px -24px #2a1a6b80;padding:clamp(1.1rem,4vw,1.6rem)}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .demo .panel{background:#ffffffe0;backdrop-filter:blur(18px) saturate(150%)}}
.panel-app{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem;font-weight:780;color:var(--ink);font-size:.95rem}
.panel-app img{border-radius:8px}
.panel-app span{margin-left:auto;color:var(--muted);font-weight:600;font-size:.82rem}
.panel h2 span{color:var(--accent-ink);margin-left:.35rem}
.choice{margin-top:1.1rem}
.choice button{flex:1 1 auto}
.choice.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.btn-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.guide-steps{counter-reset:step;list-style:none;margin:.4rem 0 1.2rem;padding:0;display:grid;gap:.7rem}
.guide-steps li{counter-increment:step;position:relative;padding-left:2.6rem;color:var(--ink-2)}
.guide-steps li::before{content:counter(step);position:absolute;left:0;top:.05rem;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--bg-tint);border:1px solid #d3d8f7;color:var(--accent-ink);font-size:.85rem;font-weight:800}
.outcome{text-align:center;display:grid;justify-items:center}
.outcome p{max-width:46ch}
.done-mark{display:grid;place-items:center;width:76px;height:76px;margin:.4rem 0 1rem;border-radius:50%;background:radial-gradient(circle,#eef7dc,#fff 70%);border:1.5px solid #b8d97a;box-shadow:0 0 40px -8px #b5d86a99}
.done-mark svg{width:36px;height:36px;fill:none;stroke:#4f7a17;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done-mark path{stroke-dasharray:1;stroke-dashoffset:0}
html.motion .arriving .done-mark{animation:pop .8s var(--spring-bounce) both}
html.motion .arriving .done-mark path{animation:draw .6s .25s var(--ease-out) both}
[data-view=done] h2,[data-view=kept] h2{color:#3a5e10}
html.motion [data-view].arriving{animation:panel-in .55s var(--spring-soft) both}
html.motion .arriving .guide-steps li,html.motion .arriving .choice button{animation:rise .5s var(--ease-out) both}
html.motion .arriving .guide-steps li:nth-child(2),html.motion .arriving .choice button:nth-child(2){animation-delay:.06s}
html.motion .arriving .guide-steps li:nth-child(3),html.motion .arriving .choice button:nth-child(3){animation-delay:.12s}
html.motion .arriving .guide-steps li:nth-child(4),html.motion .arriving .choice button:nth-child(4){animation-delay:.18s}
html.vt-panel [data-view].arriving{animation:none}
@keyframes panel-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
.spark{position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:2px;pointer-events:none;z-index:4}
.demo-tools{margin-top:1rem;display:flex;justify-content:center}
.install{margin-top:1rem;padding:1.1rem 1.2rem;border:1px dashed var(--line-strong);border-radius:20px;background:var(--bg-soft)}

/* ---------- reading pages ---------- */
.reading{position:relative;isolation:isolate}
.reading-art{position:absolute;z-index:-1;inset:-7.5rem calc(50% - 50cqw) auto;height:420px;background:url(/bg/dawn.svg) 50% 100%/cover;opacity:.45;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)}
html.motion .reading>h1,html.motion .reading>.lead,html.motion .reading>p,html.motion .reading>.panel{animation:rise .8s var(--ease-out) both}
html.motion .reading>.lead,html.motion .reading>p:nth-of-type(2){animation-delay:.1s}
html.motion .reading>.panel{animation-delay:.2s}
.panel.closed{position:relative;overflow:hidden;margin-top:1.5rem;box-shadow:var(--shadow-lift)}
.lock{display:grid;place-items:center;width:52px;height:52px;margin-bottom:1rem;border-radius:16px;background:var(--bg-tint);border:1px solid #d9ddf8}
.lock svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lock path{stroke-dasharray:1;stroke-dashoffset:0}
html.motion .lock path{animation:draw 1.2s .4s var(--ease-out) both}

/* ---------- footer ---------- */
.site-foot{padding:3rem 0 1.6rem;background:#e2e6fd}
.site-foot .copyright{border-top-color:#cdd2f0}
body:not([data-page=home]) .site-foot{background:var(--bg-soft);border-top:1px solid var(--line)}
.foot-top{display:flex;justify-content:space-between;gap:2rem 3rem;flex-wrap:wrap}
.foot-brand{display:grid;gap:1rem;align-content:start}
.foot-brand .brand span{font-weight:500}
.status-pill{display:inline-flex;align-items:center;gap:.5rem;width:max-content;padding:.3rem .8rem;border-radius:999px;background:#ffffff8c;border:1px solid #cdd2f0;font-size:.82rem;font-weight:650;color:var(--ink-2);margin:0}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:#e0a24a}
.status-pill .dot.open{background:#5c9e2b}
.foot-cols{display:flex;gap:2.5rem 4rem;flex-wrap:wrap}
.foot-cols div{display:grid;align-content:start;gap:.1rem}
.foot-cols h2{font-size:.9rem;font-weight:700;letter-spacing:0;margin-bottom:.4rem}
.foot-cols a{color:var(--ink-2);text-decoration:none;min-height:36px;display:inline-flex;align-items:center;font-size:.93rem}
.foot-cols a:hover{color:var(--ink)}
.copyright{margin:2.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.84rem}

/* ---------- film dialog ---------- */
.film-dialog{width:min(94%,860px);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:24px;padding:1rem;box-shadow:0 40px 120px -20px #1a1f4d80}
.film-dialog::backdrop{background:#0f1230b3}
@supports (backdrop-filter:blur(1px)){html:not(.lite) .film-dialog::backdrop{background:#0f123080;backdrop-filter:blur(8px)}}
.film-dialog video{width:100%;display:block;border-radius:14px;background:#17171f;aspect-ratio:16/9}
.film-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.film-head h2{font-size:1.2rem;margin:0}.film-head form{margin:0}.film-dialog p{margin:.7rem 0 0}
html.motion .film-dialog{transition:opacity .3s var(--ease-out),transform .5s var(--spring-soft),overlay .5s allow-discrete,display .5s allow-discrete}
html.motion .film-dialog:not([open]){opacity:0;transform:translateY(18px) scale(.97)}
html.motion .film-dialog::backdrop{transition:opacity .3s,overlay .5s allow-discrete,display .5s allow-discrete}
html.motion .film-dialog:not([open])::backdrop{opacity:0}
@starting-style{html.motion .film-dialog[open]{opacity:0;transform:translateY(18px) scale(.97)}html.motion .film-dialog[open]::backdrop{opacity:0}}

/* ---------- view transitions ---------- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root){animation:vt-out .26s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
::view-transition-group(alert-card){animation-duration:.6s;animation-timing-function:var(--ease-out)}
::view-transition-group(site-bar){animation:none}
html.vt-panel::view-transition-old(root),html.vt-panel::view-transition-new(root){animation:none}
html.vt-panel::view-transition-group(alert-card){animation-duration:.38s}
html.vt-panel::view-transition-old(panel){animation:panel-out .18s var(--ease-io) both}
html.vt-panel::view-transition-new(panel){animation:panel-enter .38s var(--ease-out) both}
html.vt-panel[data-dir=back]::view-transition-old(panel){animation-name:panel-out-back}
html.vt-panel[data-dir=back]::view-transition-new(panel){animation-name:panel-enter-back}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@keyframes panel-out{to{opacity:0;transform:translateX(-28px) scale(.98)}}
@keyframes panel-enter{from{opacity:0;transform:translateX(36px) scale(.98)}}
@keyframes panel-out-back{to{opacity:0;transform:translateX(28px) scale(.98)}}
@keyframes panel-enter-back{from{opacity:0;transform:translateX(-36px) scale(.98)}}

/* ---------- motion pause ---------- */
html.intro-done :is(.headline .word,.hero .lead,.hero .actions,.hero-controls,.phase,.preview,.phone,.float-pill,.hero-rule,.device-stage){animation:none!important}
html.intro-done:not(.lite):not(.motion-paused) .side-chip.left{animation:bob 6s var(--ease-io) infinite alternate!important}
html.intro-done:not(.lite):not(.motion-paused) .side-chip.right{animation:bob 7s var(--ease-io) infinite alternate-reverse!important}
html.intro-done.motion-paused .side-chip,html.intro-done.lite .side-chip{animation:none!important}
html.motion .due-chip .ping::after{animation-iteration-count:2}

@media (prefers-reduced-transparency:reduce){.site-bar.scrolled,.site-bar.solid{background:#fff!important;backdrop-filter:none!important}.preview{background:#17171f!important;backdrop-filter:none!important}.film-dialog::backdrop{backdrop-filter:none!important}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .helps-grid,.official-grid{grid-template-columns:1fr}
  .origin,.facts,.final-inner{grid-template-columns:1fr}
  .origin h2{max-width:none}
  .side-chip.left{left:3%;top:30%}
  .side-chip.right{right:3%;top:auto;bottom:6%}
  .keycaps{height:240px}
  .keycap{width:96px;height:96px;border-radius:26px}.keycap.k2{width:110px;height:110px}.keycap.k3{width:80px;height:80px}
  .keycap span{font-size:2.4rem}.keycap svg{width:40px;height:40px}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 2rem)}
  .nav{gap:.6rem;padding:.45rem 0}.nav nav{gap:.8rem;font-size:.92rem}.brand{font-size:1rem}.brand-co{display:none}.brand img{width:28px;height:28px}.lang{padding:0 .6rem}
  .bar-cta{display:none}
  .hero-sky{--horizon:600px}
  .sun i{left:90%}
  .sun-core{height:400px}
  .sun-streak{width:60%}
  .nav nav a{white-space:nowrap}
  [lang=hi] .nav nav{gap:.55rem;font-size:.88rem}
  .device-stage{height:600px;border-radius:24px}
  .phone{top:100px;width:78%}
  .stack{top:190px;width:92%}
  .side-chip{font-size:.78rem;padding:.4rem .7rem}
  .side-chip.left{top:auto;bottom:14%;left:4%}
  .side-chip.right{bottom:5%;right:4%}
  .h-card{min-height:470px}
  .months{height:170px;gap:.25rem}
  .months b{display:none}
  .fact{grid-template-columns:1fr;gap:.3rem}
  .fact-n{grid-row:auto}
  .choice.grid{grid-template-columns:1fr}
  .choice button{width:100%}
  .stage{border-radius:26px}
  .notch{width:70px}
  .foot-top{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}