/* Ek Vypaar landing */
.lp-hero{position:relative;overflow:hidden;background:radial-gradient(900px 480px at 85% -10%,#4b49c9 0,transparent 60%),linear-gradient(165deg,#14123a,#25236f);color:#fff;padding:84px 0 110px}
.lp-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.lp-hero h1{font-size:clamp(40px,6.2vw,74px);line-height:1;margin:16px 0 18px;letter-spacing:-.03em;font-weight:800}
.lp-hero h1 span{display:block;color:var(--accent)}
.lp-hero p.lead{font-size:19px;color:#d6d4f5;max-width:520px;margin:0 0 28px}
.lp-hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.lp-hero .note{margin-top:14px;font-size:13px;color:#a9a7d6}
.hero-coin{justify-self:center;position:relative;width:min(300px,70vw)}
.hero-coin .bub{position:absolute;left:50%;top:-6px;transform:translateX(-30%);background:#fff;color:var(--ink);padding:10px 14px;border-radius:16px 16px 16px 4px;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-coin svg{width:100%;height:auto;margin-top:44px;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(3deg)}}
.rain{position:absolute;inset:0;z-index:1;pointer-events:none}
.rain i{position:absolute;top:-40px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe08a,#ffb020 60%,#c9810a);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);animation:fall linear infinite;opacity:.8}
.rain i::after{content:"₹";position:absolute;inset:0;display:grid;place-items:center;font:800 11px var(--head);color:#7a4a00}
@keyframes fall{to{transform:translateY(115vh) rotate(360deg)}}
.hint{margin-top:34px;font-size:13px;color:#a9a7d6;display:flex;gap:8px;align-items:center}
.hint b{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

/* scroll story */
.story{position:relative;height:250vh;background:#f7f6fb}
.stage{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);padding-top:76px}
.stage .cap{text-align:center;padding:0 20px}
.stage .cap h2{margin:0;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.02em}
.stage .cap p{margin:4px 0 0;color:var(--ink2);font-size:14px}
.sgrid{max-width:1120px;width:100%;margin:0 auto;padding:10px 20px 18px;display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:stretch;min-height:0;overflow:hidden}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px;min-height:0}
.big{font:800 clamp(38px,5vw,60px)/1 var(--head);letter-spacing:-.03em;color:var(--brand)}
.lab{font-size:13px;color:var(--mute);font-weight:600}
.chart{flex:1;min-height:90px}
.chart svg{width:100%;height:100%;display:block}
.chart .ln{fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.chart .ar{fill:url(#ga);opacity:0}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini div{background:var(--bg);border-radius:14px;padding:10px 12px}
.mini b{display:block;font:800 26px var(--head);color:var(--ink)}
.mini span{font-size:12px;color:var(--mute)}
.eg{font-size:11px;color:var(--mute)}
.scene{position:relative;background:linear-gradient(180deg,#eceaff,#fff 70%);border:1px solid var(--line);border-radius:22px;overflow:hidden;min-height:0}
.ground{position:absolute;left:0;right:0;bottom:0;height:16%;background:#2b2a86;opacity:.08}
.ch{position:absolute;bottom:0;width:clamp(110px,15vw,170px);height:auto}
.ch.raju{left:6%}.ch.meena{right:6%}
.ek{position:absolute;left:50%;bottom:6%;width:clamp(70px,9vw,104px);transform:translateX(-50%);animation:bob 3.2s ease-in-out infinite}
.bubble{position:absolute;max-width:min(240px,42%);background:#fff;border:2px solid var(--ink);border-radius:18px;padding:10px 13px;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);opacity:0;transform:scale(.85) translateY(8px);transform-origin:bottom center;transition:opacity .25s,transform .25s;box-shadow:4px 4px 0 var(--ink)}
.bubble.on{opacity:1;transform:none}
.bubble.dim{opacity:.38}
.bubble.r{left:4%;top:5%}.bubble.m{right:4%;top:27%}.bubble.e{left:50%;top:49%;transform:translateX(-50%) scale(.85);max-width:44%;text-align:center}
.bubble.e.on{transform:translateX(-50%)}
.mouth{transform-box:fill-box;transform-origin:center}
.talk .mouth{animation:talk .28s ease-in-out infinite alternate}
@keyframes talk{from{transform:scaleY(.35)}to{transform:scaleY(1.25)}}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.pile{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:42%;pointer-events:none}
.sbar{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--line)}
.sbar i{display:block;height:100%;width:0;background:var(--accent)}
.endcard{max-width:1120px;margin:0 auto;padding:10px 20px}
.lp-hero + .story{margin-top:0}
.story-cta{display:none;text-align:center;padding:0}
.reveal-note{font-size:12px;color:var(--mute);text-align:center;margin-top:6px}
@media(max-width:860px){
  .lp-hero .wrap{grid-template-columns:1fr}.hero-coin{display:none}
  .story{height:260vh}
  .stage{padding-top:64px}
  .sgrid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:8px 14px 14px}
  .panel{padding:14px;gap:8px}.chart{min-height:60px}.mini{display:none}
  .bubble{font-size:12.5px;padding:8px 10px;max-width:46%}
  .bubble.r{top:3%}.bubble.m{top:26%}.bubble.e{top:50%}.ch{width:88px}.ek{width:60px}
}
@media(max-height:700px){.stage .cap p{display:none}.mini{display:none}}
@media(prefers-reduced-motion:reduce){.rain,.hero-coin svg,.ek,.eyes,.talk .mouth,.hint b{animation:none!important}.rain{display:none}}
.bubble.dim{transform:none}.bubble.e.dim{transform:translateX(-50%)}

/* Hindi story */
.hindi{background:linear-gradient(180deg,#fff,#eceaff);padding:84px 0 70px}
.hindi *{font-family:"Noto Sans Devanagari","Plus Jakarta Sans",system-ui,sans-serif}
.hcap{text-align:center;margin-bottom:26px}
.hcap h2{margin:0;font-size:clamp(30px,5vw,56px);font-weight:800;line-height:1.2;color:var(--brand)}
.hcap p{margin:6px 0 0;color:var(--ink2);font-size:17px}
.hgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:stretch}
.hscene{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;min-height:340px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.shops{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:18px}
.shops span{font-size:44px;opacity:.18;transform:scale(.8);filter:grayscale(1);transition:all .5s}
.shops span.on{opacity:1;transform:scale(1.25);filter:none}
.hchars{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:0 10px}
.hch{width:clamp(110px,14vw,160px);height:auto}
.hek{width:clamp(64px,8vw,92px);margin-bottom:10px;animation:bob 3.2s ease-in-out infinite}
.hchat{display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:340px}
.hb{max-width:88%;padding:12px 16px;border-radius:18px;font-size:17px;font-weight:600;line-height:1.5;opacity:0;transform:translateY(10px);transition:all .35s;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.hb.in{opacity:1;transform:none}
.hb.g{align-self:flex-start;background:#fff;border-radius:18px 18px 18px 4px}
.hb.e{align-self:flex-end;background:#ffe9a8;border-radius:18px 18px 4px 18px}
.hfoot{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
@media(max-width:860px){.hgrid{grid-template-columns:1fr}.hchat{min-height:0}.hscene{min-height:280px}}
@media(prefers-reduced-motion:reduce){.hek{animation:none!important}.hb{transition:none}}
