/* ============ Astitva marketing site — matches the app's design system ============ */
:root{
  --bg:#fdf6ef; --bg-deep:#f3e8dc; --surface:#ffffff; --surface-high:#fbf0e6; --surface-low:#fffaf4;
  --ink:#3d2c21; --ink-2:#6f5b4c; --line:#e8d8c8;
  --rose:#c2185b; --rose-c:#ffd9e4; --rose-deep:#75123c; --rose-bright:#d81b60;
  --teal:#00796b; --teal-c:#cdeae3; --teal-deep:#06453c;
  --saffron:#b25e00; --saffron-c:#ffe3c2; --saffron-deep:#6b3900;
  --error:#c62828;
  --flag-blue:#5BCEFA; --flag-pink:#F5A9B8;
  --r-lg:24px; --r-md:18px; --r-sm:12px;
  --shadow-toy:0 4px 14px rgba(61,44,33,.10), 0 1px 3px rgba(61,44,33,.06);
  --shadow-float:0 18px 44px rgba(117,18,60,.16), 0 4px 12px rgba(61,44,33,.08);
  --font-head:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible","Plus Jakarta Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.02em;line-height:1.15}
.material-symbols-rounded{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;user-select:none}
::selection{background:var(--rose-c);color:var(--rose-deep)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 20px}}
@media(max-width:380px){.wrap{padding:0 16px}}

/* ---- trans-flag stripe ---- */
.flag{display:flex;height:6px;width:72px;border-radius:99px;overflow:hidden}
.flag i{flex:1}
.flag i:nth-child(1),.flag i:nth-child(5){background:var(--flag-blue)}
.flag i:nth-child(2),.flag i:nth-child(4){background:var(--flag-pink)}
.flag i:nth-child(3){background:#fff;box-shadow:inset 0 0 0 1px #eee}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:100;background:rgba(253,246,239,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(232,216,200,.6)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{width:40px;height:40px;border-radius:50%;border:2px solid var(--rose);flex-shrink:0}
.brand-name{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--rose);line-height:1.1}
.brand-sub{font-size:10.5px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.nav-links{display:flex;gap:26px;font-family:var(--font-head);font-weight:600;font-size:13.5px;color:var(--ink-2)}
.nav-links a{transition:color .18s}
.nav-links a:hover{color:var(--rose)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);font-weight:700;border-radius:99px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s;border:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--rose);color:#fff;padding:12px 26px;font-size:14.5px;box-shadow:0 6px 18px rgba(194,24,91,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(194,24,91,.38);background:var(--rose-bright)}
.btn-ghost{background:var(--surface);color:var(--ink);padding:12px 24px;font-size:14.5px;border:1.5px solid var(--line);box-shadow:var(--shadow-toy)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--rose-c)}
.btn-nav{background:var(--rose);color:#fff;padding:9px 20px;font-size:13px;box-shadow:0 4px 12px rgba(194,24,91,.28)}
.btn-nav:hover{background:var(--rose-bright)}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:480px){.brand-sub{display:none}}

/* ---- hero ---- */
.hero{position:relative;padding:64px 0 40px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.blob-1{width:440px;height:440px;background:#ffd9e4;top:-140px;right:6%}
.blob-2{width:380px;height:380px;background:#cdeae3;bottom:-160px;left:-90px;animation-delay:-6s}
.blob-3{width:300px;height:300px;background:#ffe3c2;top:30%;left:38%;opacity:.4;animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(46px,-34px) scale(1.09)}}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
/* grid items default to min-width:auto, so the phone mockup was widening the
   column past the screen on very narrow phones and cutting the text off */
.hero-in>*{min-width:0}
@media(max-width:920px){.hero-in{grid-template-columns:1fr;gap:52px}.hero{padding-top:44px}}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 15px 7px 9px;font-size:12px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-toy);margin:18px 0 20px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.7rem);font-weight:800;color:var(--ink)}
.hero h1 .l2{color:var(--rose)}
.hero h1 .l3{color:var(--teal)}
.hero-sub{font-size:clamp(1rem,1.6vw,1.14rem);color:var(--ink-2);max-width:520px;margin:20px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.play-soon{display:inline-flex;align-items:center;gap:10px;background:var(--surface-high);border:1.5px dashed var(--line);border-radius:99px;padding:11px 22px;font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--ink-2)}
.play-soon b{color:var(--saffron);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;background:var(--saffron-c);padding:3px 9px;border-radius:99px}
/* "you can use it today" note under the main buttons — the Play Store "coming soon"
   badge otherwise reads as if the whole app is not out yet */
.cta-note{margin-top:14px;font-size:13px;color:var(--ink-2);max-width:460px}
.cta-note b{color:var(--teal-deep)}
.hero-langs{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.lang-chip{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 15px;font-size:12.5px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-toy)}
.lang-chip b{color:var(--rose);margin-right:3px}

/* ---- phone mockup — a scaled replica of the app's real Home screen ---- */
.phone-zone{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:min(308px,100%);background:#3d2c21;border-radius:44px;padding:11px;box-shadow:var(--shadow-float);animation:bob 5.5s ease-in-out infinite;z-index:2}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(.6deg)}}
.phone-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:22px;background:#3d2c21;border-radius:0 0 16px 16px;z-index:5}
.screen{position:relative;background:var(--bg);border-radius:34px;overflow:hidden;height:646px;display:flex;flex-direction:column}
/* header: logo + wordmark + language switcher + profile, as in the app */
.scr-head{background:var(--surface-high);border-radius:0 0 22px 22px;padding:29px 12px 10px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-toy);position:relative;z-index:3}
.scr-head img.logo{width:32px;height:32px;border-radius:50%;border:2px solid var(--rose);flex-shrink:0}
.scr-head .id{min-width:0;flex:1}
.scr-head .t{font-family:var(--font-head);font-weight:800;font-size:14px;color:var(--rose);line-height:1.15}
.scr-head .s{font-size:7px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.scr-lang{display:flex;align-items:center;gap:2px;background:#fff;border-radius:99px;padding:2px;flex-shrink:0}
.scr-lang b{font-size:7px;font-weight:800;color:var(--ink-2);padding:3px 6px;border-radius:99px}
.scr-lang b.on{background:var(--rose);color:#fff}
.scr-prof{width:22px;height:22px;border-radius:50%;background:var(--rose-c);color:var(--rose-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.scr-prof .material-symbols-rounded{font-size:13px}
.scr-body{flex:1;padding:10px 11px 0;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.scr-welcome{background:linear-gradient(120deg,#fde7f0 0%,#f6e3f7 55%,#fdeee2 100%);border-radius:20px;padding:10px 11px;display:flex;gap:8px;align-items:center;box-shadow:var(--shadow-toy)}
.scr-welcome .hi{font-size:8px;font-weight:700;color:var(--ink-2)}
.scr-welcome .w1{font-family:var(--font-head);font-weight:800;font-size:12.5px;color:#c2185b;margin-top:1px}
.scr-welcome .w2{font-size:8px;color:var(--ink);font-weight:700;line-height:1.4;margin-top:2px}
.scr-welcome .w3{font-size:8px;font-weight:700;color:#d81b60;margin-top:2px}
.scr-welcome .rb{height:3px;width:62px;border-radius:99px;margin-top:5px;background:linear-gradient(90deg,#e91e63,#ff9800,#4caf50,#2196f3,#9c27b0)}
.scr-welcome img{width:50px;height:50px;border-radius:50%;flex-shrink:0;animation:bob2 4s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* the app's six numbered service cards, two per row */
.scr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scr-card{border-radius:18px;padding:9px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-toy)}
.scr-card .row{display:flex;align-items:center;justify-content:space-between}
.scr-card .ic{width:23px;height:23px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(61,44,33,.12)}
.scr-card .ic .material-symbols-rounded{font-size:13px}
.scr-card .go{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.scr-card .go .material-symbols-rounded{font-size:10px;color:#fff}
.scr-card h4{font-size:9.5px;font-weight:800;line-height:1.25}
.scr-card p{font-size:7.6px;color:var(--ink);font-weight:600;line-height:1.4}
/* trailblazers strip — peeks above the bottom bar exactly like the app */
.scr-tb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
.scr-tb-head b{font-family:var(--font-head);font-size:11px;font-weight:800;color:var(--ink);display:block}
.scr-tb-head span{font-size:7.5px;color:var(--ink-2)}
.scr-tb-head i{font-style:normal;font-size:8.5px;font-weight:800;color:var(--rose);display:flex;align-items:center;gap:2px;flex-shrink:0}
.scr-tb-head i .material-symbols-rounded{font-size:10px}
.scr-tb{display:flex;gap:7px;margin:0 -11px;padding:0 11px}
.scr-tb figure{position:relative;width:88px;height:116px;border-radius:16px;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow-toy)}
.scr-tb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scr-tb figcaption{position:absolute;inset-inline:0;bottom:0;padding:6px;background:linear-gradient(to top,rgba(40,10,22,.88),rgba(40,10,22,.4) 55%,transparent);color:#fff;font-family:var(--font-head);font-weight:700;font-size:7.5px;line-height:1.2}
.scr-tb figcaption i{display:block;font-style:normal;font-weight:400;font-size:6.4px;color:rgba(255,255,255,.8);margin-top:1px}
/* floating bottom bar with the raised SOS button */
.scr-nav{position:absolute;left:12px;right:12px;bottom:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:22px;box-shadow:var(--shadow-float);display:flex;align-items:flex-end;padding:4px 6px 6px;z-index:4}
.scr-nav .ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:6.4px;font-weight:700;color:var(--ink-2)}
.scr-nav .ni em{font-style:normal;width:26px;height:17px;border-radius:99px;display:flex;align-items:center;justify-content:center}
.scr-nav .ni .material-symbols-rounded{font-size:14px}
.scr-nav .ni.on{color:var(--rose)}
.scr-nav .ni.on em{background:var(--rose-c)}
.scr-nav .sos{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:6.4px;font-weight:700;color:var(--error)}
.scr-nav .sos em{font-style:normal;margin-top:-17px;width:31px;height:31px;border-radius:50%;background:linear-gradient(140deg,#e53935,#c2185b);border:3px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(198,40,40,.42)}
.scr-nav .sos em .material-symbols-rounded{font-size:15px}
/* floating chips around phone */
.chip-float{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 13px;font-size:11.5px;font-weight:700;box-shadow:var(--shadow-float);display:flex;align-items:center;gap:8px;z-index:3;animation:bob2 6s ease-in-out infinite}
.chip-float .material-symbols-rounded{font-size:17px}
.cf-1{top:9%;left:-4%;color:var(--teal);animation-delay:-1.5s}
.cf-2{top:44%;right:-7%;color:var(--rose);animation-delay:-3s}
.cf-3{bottom:8%;left:-2%;color:var(--saffron);animation-delay:-4.5s}
@media(max-width:480px){.cf-1{left:0}.cf-3{left:2%}.cf-2{right:0}}

/* ---- ribbon marquee ---- */
.ribbon{background:var(--ink);color:#fdf6ef;padding:13px 0;overflow:hidden;margin:44px auto 0;max-width:min(1112px,100% - 48px);border-radius:99px;box-shadow:0 8px 24px rgba(61,44,33,.18)}
.ribbon-track{display:flex;white-space:nowrap;width:max-content;animation:slide 60s linear infinite;font-family:var(--font-head);font-weight:700;font-size:13.5px;letter-spacing:.04em}
.ribbon-track span{display:flex;align-items:center;gap:44px;padding-right:44px}
.ribbon-track i{font-style:normal;color:var(--flag-pink)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- sections ---- */
section{position:relative}
/* Vertical only: sections carry .wrap as well, and a padding shorthand here
   would wipe out .wrap's side padding — which left text touching the screen
   edge on phones. */
.sec{padding-top:88px}
.sec-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);background:var(--rose-c);border-radius:99px;padding:6px 15px}
.sec-label.teal{color:var(--teal-deep);background:var(--teal-c)}
.sec-label.saffron{color:var(--saffron-deep);background:var(--saffron-c)}
.sec h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;margin:18px 0 12px}
.sec-sub{font-size:15.5px;color:var(--ink-2);max-width:620px}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;text-align:center;box-shadow:var(--shadow-toy);transition:transform .25s ease,box-shadow .25s ease}
.stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-float)}
.stat .n{font-family:var(--font-head);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;line-height:1}
.stat .l{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:9px}
.stat:nth-child(1) .n{color:var(--rose)}.stat:nth-child(2) .n{color:var(--teal)}
.stat:nth-child(3) .n{color:var(--saffron)}.stat:nth-child(4) .n{color:#7c3aed}

/* ---- feature cards (mirror of app home) ---- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:920px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feats{grid-template-columns:1fr}}
.feat{border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-toy);transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.feat:hover{transform:translateY(-7px) scale(1.012);box-shadow:var(--shadow-float)}
.feat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.feat .ic{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(61,44,33,.12);display:flex;align-items:center;justify-content:center}
.feat .ic .material-symbols-rounded{font-size:25px}
.feat .num{font-family:var(--font-head);font-weight:800;font-size:13px;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.feat h3{font-size:17.5px;font-weight:800;margin-bottom:8px}
.feat p{font-size:13.5px;color:var(--ink);opacity:.82;font-weight:600;line-height:1.6}
.feat .bar{height:4px;width:44px;border-radius:99px;margin-top:16px;transition:width .3s ease}
.feat:hover .bar{width:76px}

/* ---- privacy ---- */
.priv-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;margin-top:44px}
@media(max-width:880px){.priv-grid{grid-template-columns:1fr;gap:40px}}
.pattern-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:38px;box-shadow:var(--shadow-float);display:flex;flex-direction:column;align-items:center;gap:18px;max-width:360px;margin:0 auto}
.pattern-card .cap{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--teal-deep);text-align:center}
.pattern-card .sub{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:-8px}
.priv-list{display:flex;flex-direction:column;gap:16px}
.priv-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--shadow-toy);transition:transform .22s ease,box-shadow .22s ease}
.priv-item:hover{transform:translateX(7px);box-shadow:var(--shadow-float)}
.priv-item .ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.priv-item .ic .material-symbols-rounded{font-size:23px}
.priv-item h3{font-size:15.5px;font-weight:800;margin-bottom:4px}
.priv-item p{font-size:13px;color:var(--ink-2)}

/* ---- trailblazers ---- */
.tb-strip{overflow:hidden;margin:40px auto 0;max-width:min(1112px,100% - 48px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tb-track{display:flex;width:max-content;animation:slide 72s linear infinite}
.tb-strip:hover .tb-track{animation-play-state:paused}
.tb-card{position:relative;width:196px;height:256px;margin-right:18px;border-radius:var(--r-lg);overflow:hidden;flex-shrink:0;box-shadow:var(--shadow-toy);transition:transform .25s ease}
.tb-card:hover{transform:translateY(-7px)}
.tb-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tb-card .ov{position:absolute;inset-inline:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(40,10,22,.9) 0%,rgba(40,10,22,.42) 55%,transparent 100%)}
.tb-card .tx{position:absolute;inset-inline:0;bottom:0;padding:14px}
.tb-card .tx b{color:#fff;font-family:var(--font-head);font-size:14.5px;display:block;line-height:1.25}
.tb-card .tx span{color:rgba(255,255,255,.82);font-size:11px}

/* ---- helplines ---- */
.helps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
@media(max-width:880px){.helps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.helps{grid-template-columns:1fr}}
.help{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-toy);display:block;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.help:hover{transform:translateY(-6px);box-shadow:var(--shadow-float);border-color:var(--rose-c)}
.help .num{font-family:var(--font-head);font-weight:800;font-size:clamp(1.35rem,2vw,1.7rem);color:var(--rose);display:flex;align-items:center;gap:9px}
.help .num .material-symbols-rounded{font-size:20px;color:var(--teal)}
.help b{display:block;font-size:13.5px;margin-top:8px}
.help span{font-size:12px;color:var(--ink-2)}
.sos-note{margin-top:22px;background:var(--rose-c);border-radius:var(--r-md);padding:15px 20px;font-size:13.5px;font-weight:700;color:var(--rose-deep);display:flex;gap:11px;align-items:center}
.sos-note .material-symbols-rounded{color:var(--rose);font-size:21px;animation:pulse 2.2s infinite}

/* ---- mission / rights ---- */
.mission{margin-top:44px;display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
@media(max-width:880px){.mission{grid-template-columns:1fr}}
.m-quote{background:linear-gradient(130deg,#fde7f0,#f6e3f7 55%,#fdeee2);border-radius:28px;padding:40px 38px;box-shadow:var(--shadow-toy)}
.m-quote p{font-family:var(--font-head);font-size:clamp(1.15rem,2vw,1.42rem);font-weight:700;color:var(--rose-deep);line-height:1.5}
.m-quote .rb{height:5px;width:110px;border-radius:99px;margin-top:22px;background:linear-gradient(90deg,#e91e63,#ff9800,#4caf50,#2196f3,#9c27b0)}
/* centred variant — used for the full-width founder quote on the About page,
   where left-aligned text leaves the right half of the card empty */
.m-quote-center{text-align:center;align-items:center}
.m-quote-center p{max-width:900px;margin-left:auto;margin-right:auto}
.m-quote-center .rb{margin-left:auto;margin-right:auto}
.m-rights{background:var(--teal-c);border-radius:28px;padding:34px 32px;box-shadow:var(--shadow-toy);display:flex;flex-direction:column}
.m-rights h3{color:var(--teal-deep);font-size:19px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.m-rights p{font-size:13.5px;color:var(--teal-deep);opacity:.88}
.m-rights p+p{margin-top:14px}
/* Govt portals go down for weeks at a time — the app shows the same offline fallback. */
.m-rights .m-note{flex:1;background:rgba(255,255,255,.55);border-radius:16px;padding:14px 16px;opacity:1}
.m-rights .m-note b{color:var(--teal-deep)}
.m-rights a{margin-top:20px;align-self:flex-start;background:var(--teal);color:#fff;border-radius:99px;padding:11px 22px;font-family:var(--font-head);font-weight:700;font-size:13px;display:inline-flex;gap:8px;align-items:center;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 16px rgba(0,121,107,.3)}
.m-rights a:hover{transform:translateY(-2px)}
.m-rights a .material-symbols-rounded{font-size:16px}

/* ---- final CTA ---- */
.cta-big{margin-top:96px;background:linear-gradient(135deg,var(--rose) 0%,#a3134d 60%,#8e1243 100%);border-radius:34px;padding:64px 40px;text-align:center;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(194,24,91,.35)}
.cta-big .glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
.cta-big .g1{width:340px;height:340px;background:var(--flag-blue);top:-140px;left:-80px;animation:drift 14s ease-in-out infinite alternate}
.cta-big .g2{width:300px;height:300px;background:var(--flag-pink);bottom:-130px;right:-60px;animation:drift 16s ease-in-out infinite alternate-reverse}
.cta-big h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem);position:relative}
.cta-big p{color:#ffd9e4;font-size:15.5px;margin:14px auto 32px;max-width:480px;position:relative}
.cta-big .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.btn-white{background:#fff;color:var(--rose);padding:14px 32px;font-size:15px;box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn-white:hover{transform:translateY(-2px)}
.cta-big .play-soon{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.35);color:#ffd9e4}
.cta-big .play-soon b{background:rgba(255,255,255,.2);color:#ffe3c2}
.cta-foot{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:30px;position:relative}
.cta-foot span{color:rgba(255,255,255,.85);font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.cta-foot .material-symbols-rounded{font-size:15px}

/* ---- footer ---- */
footer{margin-top:96px;border-top:1px solid var(--line);background:var(--surface-low);padding:44px 0 38px}
/* top row: brand, then the link columns kept close together instead of pushed
   to the far edges of a 1160px page */
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px;align-items:start}
.foot-brand{display:flex;align-items:center;gap:11px}
.foot-brand img{width:38px;height:38px;border-radius:50%;border:2px solid var(--rose)}
.foot-links{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--ink-2)}
.foot-links b{font-family:var(--font-head);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.foot-links a:hover{color:var(--rose)}
@media(max-width:820px){.foot-in{grid-template-columns:1fr 1fr;gap:32px}.foot-in>:first-child{grid-column:1/-1}}
@media(max-width:480px){.foot-in{grid-template-columns:1fr}}
/* everything below the divider is one centred block, so the tags no longer sit
   left while the credit and legal lines sit centred */
.foot-tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.foot-tags span{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#b7a292;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 13px}
.foot-credit{margin-top:22px;font-size:12.5px;color:var(--ink-2);text-align:center}
.foot-credit a{color:var(--ink-2);text-decoration:underline}

/* ---- brand intro (logo reveal video) ---- */
#intro{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center}
html.intro-on #intro{display:flex}
html.intro-on body{overflow:hidden}
.intro-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#f7ecdc 0%,#eddcc6 62%,#e6d2b8 100%);transition:opacity .42s ease}
#intro video{position:relative;width:min(94vmin,640px);height:min(94vmin,640px);object-fit:cover;cursor:pointer;transition:opacity .3s ease;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
#introLogo{position:fixed;left:0;top:0;opacity:0;border-radius:50%;transform-origin:0 0;transition:transform .68s cubic-bezier(.55,.05,.22,1);will-change:transform;box-shadow:0 10px 40px rgba(61,44,33,.18)}
#introSound{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:99px;padding:9px 20px;font-family:var(--font-head);font-weight:700;font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:background .2s}
#introSound:hover{background:#fff}
#intro.landing video{opacity:0}
#intro.landing .intro-bg{opacity:0}
#intro.landing #introSound{display:none}
.brand img.pop{animation:logopop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes logopop{from{transform:scale(1.7)}to{transform:scale(1)}}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---- founder block (About page) ---- */
.founder{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start;margin-top:42px}
@media(max-width:880px){.founder{grid-template-columns:1fr;gap:32px}}
.founder-col{max-width:340px;width:100%;margin:0 auto}
.founder-photo{position:relative;width:100%;aspect-ratio:4/5;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-float);background:linear-gradient(140deg,#fde7f0,#f6e3f7 55%,#fdeee2)}
.founder-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ph-fallback{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center}
.ph-fallback .init{width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:var(--shadow-toy);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:33px;color:var(--rose)}
.ph-fallback span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.founder-label{margin-top:20px;text-align:center}
.founder-label b{display:block;font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);line-height:1.25}
.founder-label i{display:block;font-style:normal;font-family:var(--font-head);font-size:13.5px;font-weight:800;color:var(--rose);margin-top:5px}
.founder-label span{display:block;font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.55}
.founder-body p{font-size:15px;color:var(--ink-2);line-height:1.78}
.founder-body p+p{margin-top:16px}
.founder-body p.lead{font-family:var(--font-head);font-size:clamp(1.1rem,1.9vw,1.3rem);font-weight:700;color:var(--ink);line-height:1.45}
.founder-body em{font-style:italic;color:var(--ink);font-weight:700}

/* ---- founder strip (homepage teaser) ---- */
.founder-strip{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-toy);transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.founder-strip:hover{transform:translateY(-4px);box-shadow:var(--shadow-float);border-color:var(--rose-c)}
.founder-strip .av{position:relative;width:58px;height:58px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--rose-c);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--rose)}
.founder-strip .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.founder-strip .tx{flex:1;min-width:0}
.founder-strip .tx b{display:block;font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--ink)}
.founder-strip .tx span{font-size:12.5px;color:var(--ink-2)}
.founder-strip .go{flex-shrink:0;display:flex;align-items:center;gap:5px;font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--rose)}
.founder-strip .go .material-symbols-rounded{font-size:16px}
@media(max-width:560px){.founder-strip{flex-wrap:wrap}.founder-strip .go{width:100%;justify-content:flex-end}}

/* ---- page hero for secondary pages (About) ---- */
.page-hero{position:relative;padding-top:56px;padding-bottom:8px;overflow:hidden;text-align:center}
.page-hero .flag{margin:0 auto}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;color:var(--ink);margin:18px 0 14px}
.page-hero h1 .hl{color:var(--rose)}
.page-hero .sub{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--ink-2);max-width:640px;margin-left:auto;margin-right:auto}
/* two-up variant of .feats, used on the About page */
.feats-2{grid-template-columns:1fr 1fr}
@media(max-width:720px){.feats-2{grid-template-columns:1fr}}
/* footer fine print — disclaimer and copyright */
.foot-fine{margin-top:11px;font-size:11.5px;line-height:1.65;color:#b7a292;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.foot-credit+.foot-fine{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);max-width:820px}.foot-fine b{color:var(--ink-2)}
.foot-fine a{color:var(--ink-2);text-decoration:underline}
/* ---- legal / privacy page ---- */
.legal-list{display:flex;flex-direction:column;gap:14px;max-width:820px}
.legal-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--shadow-toy)}
.legal-item .ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.legal-item .ic .material-symbols-rounded{font-size:23px}
.legal-item h2{font-size:16.5px;font-weight:800;margin-bottom:6px}
.legal-item p{font-size:14px;color:var(--ink-2);line-height:1.7}
.legal-item a{color:var(--rose);font-weight:700;text-decoration:underline}
.legal-item b{color:var(--ink)}
.legal-note{max-width:820px;margin-top:22px;font-size:13px;color:var(--ink-2);line-height:1.7}
.legal-note a{color:var(--rose);font-weight:700;text-decoration:underline}
@media(max-width:560px){.legal-item{padding:18px;gap:13px}}
/* ---- trailblazers page: one person per block, photo beside the story ---- */
.tb-person{display:grid;grid-template-columns:340px 1fr;gap:46px;align-items:start;margin-top:44px;scroll-margin-top:96px}
@media(max-width:880px){.tb-person{grid-template-columns:1fr;gap:30px}}
.tb-person+.tb-person{margin-top:74px;padding-top:66px;border-top:1px solid var(--line)}
.tb-person .col{max-width:340px;width:100%;margin:0 auto;position:sticky;top:96px}
@media(max-width:880px){.tb-person .col{position:static}}
.tb-portrait{position:relative;width:100%;aspect-ratio:4/5;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-float);background:linear-gradient(140deg,#fde7f0,#f6e3f7 55%,#fdeee2)}
.tb-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:2}
.tb-portrait .no{position:absolute;top:14px;left:14px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:14px;color:var(--rose);box-shadow:var(--shadow-toy)}
.tb-name{margin-top:20px;text-align:center}
.tb-name b{display:block;font-family:var(--font-head);font-weight:800;font-size:21px;color:var(--ink);line-height:1.25}
.tb-name i{display:block;font-style:normal;font-family:var(--font-head);font-size:13.5px;font-weight:800;color:var(--rose);margin-top:5px}
.tb-name span{display:block;font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.55}
.tb-story p{font-size:15px;color:var(--ink-2);line-height:1.78}
.tb-story p+p{margin-top:16px}
.tb-story p.lead{font-family:var(--font-head);font-size:clamp(1.1rem,1.9vw,1.28rem);font-weight:700;color:var(--ink);line-height:1.5}
.tb-story b{color:var(--ink)}
.tb-quote{margin-top:20px;background:var(--rose-c);border-radius:20px;padding:20px 24px}
.tb-quote p{font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--rose-deep);line-height:1.6}
.tb-quote span{display:block;margin-top:9px;font-size:12px;font-weight:700;color:var(--rose-deep);opacity:.8}
.tb-marks{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.tb-marks span{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-toy)}
.tb-marks span b{color:var(--rose);font-weight:800}
.tb-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.tb-jump a{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 17px 7px 7px;box-shadow:var(--shadow-toy);transition:transform .2s ease,border-color .2s}
.tb-jump a:hover{transform:translateY(-3px);border-color:var(--rose-c)}
.tb-jump img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center top}
.tb-jump b{font-family:var(--font-head);font-size:13.5px;font-weight:800;color:var(--ink)}
/* closing section is centred; the sources card inside stays left-aligned */
.tb-why{text-align:center}
.tb-why .sec-sub{margin-left:auto;margin-right:auto}
.tb-why .tb-sources{text-align:left;max-width:900px;margin-left:auto;margin-right:auto}
.tb-sources{margin-top:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--shadow-toy)}
.tb-sources h3{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--ink);margin-bottom:12px}
.tb-sources p{font-size:13px;color:var(--ink-2);line-height:1.75}
.tb-sources p+p{margin-top:9px}
.tb-sources a{color:var(--rose);font-weight:700;text-decoration:underline}

/* ---- language switcher (English · हिन्दी · मराठी) ---------------------- */
/* Injected into the nav by /public/i18n.js — same pill-and-slider shape the
   app uses in its own header. */
.lang-switch{position:relative;display:flex;align-items:center;flex-shrink:0;
  background:var(--surface-high);border:1px solid rgba(232,216,200,.9);border-radius:99px;
  padding:3px;box-shadow:inset 0 1px 3px rgba(61,44,33,.07)}
.lang-switch .lang-pill{position:absolute;top:3px;bottom:3px;left:3px;width:46px;border-radius:99px;
  background:var(--rose);box-shadow:0 2px 8px rgba(194,24,91,.30);
  transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.lang-switch[data-active="1"] .lang-pill{transform:translateX(100%)}
.lang-switch[data-active="2"] .lang-pill{transform:translateX(200%)}
.lang-switch button{position:relative;z-index:1;width:46px;padding:6px 0;border:none;background:none;
  cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:11px;line-height:1.2;
  text-align:center;color:var(--ink-2);transition:color .2s}
.lang-switch button[aria-pressed="true"]{color:#fff}
.lang-switch button:active{transform:scale(.94)}
@media(max-width:520px){
  .lang-switch .lang-pill,.lang-switch button{width:40px}
  .lang-switch button{font-size:10px}
}
@media(max-width:380px){
  .lang-switch .lang-pill,.lang-switch button{width:34px}
  .lang-switch button{font-size:9.5px}
  .btn-nav{padding:9px 14px;font-size:12px}
}

/* Devanagari needs a face that actually covers it — Plus Jakarta Sans and
   Atkinson Hyperlegible do not. The stylesheet is fetched only when Hindi or
   Marathi is chosen (see i18n.js), so English visitors never pay for it. */
html[lang="hi"],html[lang="mr"]{
  --font-head:"Noto Sans Devanagari","Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Noto Sans Devanagari","Atkinson Hyperlegible",system-ui,sans-serif;
}
/* Devanagari sits taller than Latin, so headings need a little more room. */
html[lang="hi"] h1,html[lang="mr"] h1,
html[lang="hi"] h2,html[lang="mr"] h2,
html[lang="hi"] h3,html[lang="mr"] h3{line-height:1.32;letter-spacing:0}
html[lang="hi"] body,html[lang="mr"] body{line-height:1.75}

/* ---- mobile navigation menu (three-line button + drop-down panel) --------- */
/* Built by /public/nav.js. Above 860px nothing here shows: the normal links
   and the "Get Started" button are used instead. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
  padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  box-shadow:var(--shadow-toy);cursor:pointer;flex-shrink:0}
.nav-toggle span{display:block;height:2.5px;width:100%;border-radius:99px;background:var(--rose);
  transition:transform .28s ease,opacity .18s ease}
.nav-toggle.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.on span:nth-child(2){opacity:0}
.nav-toggle.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:64px 0 0;z-index:98;background:rgba(61,44,33,.34);
  opacity:0;transition:opacity .24s ease}
.nav-backdrop.in{opacity:1}
.nav-drawer{position:fixed;top:64px;left:0;right:0;z-index:99;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-float);
  padding:14px 18px 20px;max-height:calc(100vh - 64px);overflow-y:auto;
  transform:translateY(-10px);opacity:0;transition:transform .24s ease,opacity .24s ease}
.nav-drawer.in{transform:translateY(0);opacity:1}
.nav-drawer-links{display:flex;flex-direction:column}
.nav-drawer-links a{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);
  padding:14px 6px;border-bottom:1px solid var(--line)}
.nav-drawer-links a:last-child{border-bottom:none}
.nav-drawer-links a.on{color:var(--rose)}
.nav-drawer-cta{width:100%;margin-top:16px;padding:14px 26px;font-size:15px}
body.nav-open{overflow:hidden}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav-in .btn-nav{display:none}
}
@media(min-width:861px){
  .nav-drawer,.nav-backdrop{display:none}
}