/* ═══════════════════════════════════════════════════════════════
   MUNIMO — site design system
   Canvas: cinematic dark (Designer A) · Machinery: conversion-first India (Designer B)
   Rules: animate only transform/opacity · no libraries · self-contained
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:#0a0f0d; --ink2:#0d1310; --surface:#121a16; --s2:#17221d; --s3:#1d2a24;
  --hair:#233029; --hair2:#2e4036;
  --t:#f4f7f5; --m:#8fa098; --f:#5c6b63;
  --em:#19c37d; --em2:#34d399; --em3:#6ee7b7; --emdark:#0e5e42;
  --gold:#e8b84b; --gold2:#f5d47e;
  --red:#f87171; --blue:#60a5fa;
  --wa:#25d366;
  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','Noto Sans Devanagari','Noto Sans Tamil','Noto Sans Gujarati','Noto Sans Bengali',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--t);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(25,195,125,.3)}

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

/* ─── type scale ─── */
.h-display{font-size:clamp(38px,7vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.h1{font-size:clamp(30px,5vw,56px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.h2{font-size:clamp(24px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.h3{font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(16px,2vw,20px);color:var(--m);line-height:1.65}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--em2);margin-bottom:14px}
.gold{color:var(--gold)}
.muted{color:var(--m)}
.num{font-variant-numeric:tabular-nums}

/* ─── header ─── */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,15,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.01em;flex-shrink:0}
.logo-m{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;color:#04110b;font-weight:900;font-size:15px;box-shadow:0 2px 14px rgba(16,185,129,.35)}
.nav{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:600;color:var(--m);margin-left:6px}
.nav a{padding:6px 2px;transition:color .18s}
.nav a:hover,.nav a.on{color:var(--t)}
.hd-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14.5px;border-radius:12px;padding:11px 20px;transition:transform .18s var(--ease),box-shadow .18s,opacity .18s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-em{background:linear-gradient(135deg,#10b981,#059669);color:#04110b;box-shadow:0 4px 24px rgba(16,185,129,.35)}
.btn-em:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(16,185,129,.45)}
.btn-wa{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.45);color:#4ade80}
.btn-wa:hover{background:rgba(37,211,102,.2)}
.btn-ghost{border:1px solid var(--hair2);color:var(--t)}
.btn-ghost:hover{border-color:var(--em);color:var(--em2)}
.btn-big{font-size:16.5px;padding:15px 28px;border-radius:14px}
@media(max-width:820px){.nav{display:none}.hd-cta .btn-ghost{display:none}}

/* ─── mobile sticky action bar (Designer B's law) ─── */
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:99;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(10,15,13,.92);backdrop-filter:blur(14px);border-top:1px solid var(--hair2);transform:translateY(110%);transition:transform .35s var(--ease)}
.mbar.show{transform:none}
.mbar .btn{flex:1;font-size:14px;padding:12px 8px}
@media(max-width:820px){.mbar{display:flex}}

/* ─── sections ─── */
.sec{padding:clamp(72px,12vw,150px) 0;position:relative}
.sec-tight{padding:clamp(48px,8vw,90px) 0}
.center{text-align:center}
.sechead{max-width:720px;margin:0 auto clamp(36px,6vw,64px)}

/* ─── reveal on scroll ─── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv2{transition-delay:.12s}.rv3{transition-delay:.24s}.rv4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ─── device frames ─── */
.stage{perspective:1400px}
.phone{position:relative;width:min(340px,86vw);aspect-ratio:340/700;border-radius:38px;background:#0c1210;border:1px solid #2a3a32;box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 6px #060a08,0 0 80px rgba(16,185,129,.12);overflow:hidden;transform-style:preserve-3d;will-change:transform}
.phone::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:22px;background:#060a08;border-radius:12px;z-index:5}
.phone::after{content:'';position:absolute;inset:0;border-radius:38px;background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,transparent 32%);pointer-events:none;z-index:6}
.phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#070b0a}
.laptop{position:relative;border-radius:14px 14px 0 0;background:#0c1210;border:1px solid #2a3a32;border-bottom:none;padding:10px 10px 0;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.laptop-screen{border-radius:8px 8px 0 0;overflow:hidden;background:#0a0f0d}
.laptop-base{height:14px;background:linear-gradient(#1a2620,#0c1210);border-radius:0 0 16px 16px;border:1px solid #2a3a32;border-top:none;margin:0 -26px}
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--hair2);background:#0c1210;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#121a16;border-bottom:1px solid var(--hair)}
.bdot{width:10px;height:10px;border-radius:50%}
.burl{margin-left:10px;flex:1;background:#0a0f0d;border:1px solid var(--hair);border-radius:8px;font-size:11.5px;color:var(--f);padding:4px 12px;font-weight:600}

/* ─── theatre (screenshot player with Ken Burns + hotspots) ─── */
.theatre-vp{position:relative;aspect-ratio:1280/800;overflow:hidden;background:#0a0f0d}
.theatre-vp .shot{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.theatre-vp .shot.on{opacity:1}
.theatre-vp .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1);transform-origin:var(--ox,50%) var(--oy,30%);will-change:transform}
.theatre-vp .shot.on img{animation:kb 7s var(--ease) forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.14)}}
.hotspot{position:absolute;width:34px;height:34px;margin:-17px;border-radius:50%;border:2px solid var(--gold);background:rgba(232,184,75,.15);opacity:0;z-index:4}
.shot.on .hotspot{animation:hs 2.4s var(--ease) .9s infinite}
@keyframes hs{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.4)}}
.theatre-cap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:var(--surface);border-top:1px solid var(--hair)}
.theatre-cap .tc-txt{font-size:14px;font-weight:600;color:var(--t)}
.theatre-cap .tc-sub{font-size:12px;color:var(--f)}
.tdots{display:flex;gap:6px;flex-shrink:0}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--hair2);transition:transform .2s,background .2s;cursor:pointer}
.tdot.on{background:var(--em);transform:scale(1.4)}
.ttabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.ttab{padding:9px 18px;border-radius:22px;font-size:13.5px;font-weight:700;color:var(--m);border:1px solid var(--hair2);transition:all .2s}
.ttab.on{color:#04110b;background:linear-gradient(135deg,#10b981,#059669);border-color:transparent}

/* ─── ladder cards ─── */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ladder{grid-template-columns:1fr}}
.lcard{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:20px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;display:flex;flex-direction:column}
.lcard:hover{transform:translateY(-6px);border-color:rgba(16,185,129,.5);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 50px rgba(16,185,129,.1)}
.lcard .shotwrap{aspect-ratio:16/10.5;overflow:hidden;background:#0a0f0d;border-bottom:1px solid var(--hair)}
.lcard .shotwrap img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s var(--ease)}
.lcard:hover .shotwrap img{transform:scale(1.05)}
.lcard .lbody{padding:20px;display:flex;flex-direction:column;flex:1;gap:8px}
.lcard .lstep{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--f)}
.lcard h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.lcard p{font-size:13.5px;color:var(--m);line-height:1.55;flex:1}
.lcard .lprice{font-size:13px;font-weight:700;color:var(--gold)}
.lcard .larrow{margin-top:6px;font-size:13.5px;font-weight:700;color:var(--em2)}

/* ─── AI chat (self-writing ledger) ─── */
.chat{background:var(--surface);border:1px solid var(--hair2);border-radius:22px;padding:22px;max-width:560px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.langchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.lchip{padding:7px 15px;border-radius:20px;font-size:13.5px;font-weight:700;color:var(--m);border:1px solid var(--hair2);transition:all .2s}
.lchip.on{color:#04110b;background:linear-gradient(135deg,#10b981,#059669);border-color:transparent}
.bubble-u{max-width:88%;margin-left:auto;background:#1d4536;border:1px solid rgba(16,185,129,.3);border-radius:16px 16px 4px 16px;padding:12px 16px;font-size:15.5px;min-height:48px}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--em2);vertical-align:text-bottom;animation:blink 1s steps(1) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}
.ai-entry{margin-top:14px;background:var(--ink2);border:1px solid var(--hair2);border-radius:16px 16px 16px 4px;padding:14px 16px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ai-entry.in{opacity:1;transform:none}
.ai-entry .ae-top{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--em2);margin-bottom:9px}
.ae-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--hair);font-size:14px}
.ae-row .cat{font-size:11px;color:var(--f);display:block}
.ae-row .amt{font-weight:800;white-space:nowrap}

/* ─── compare table ─── */
.cmp{border:1px solid var(--hair2);border-radius:20px;overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;border-top:1px solid var(--hair)}
.cmp-row:first-child{border-top:none;background:var(--surface);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--m)}
.cmp-row>div{padding:15px 16px;font-size:14.5px;border-left:1px solid var(--hair)}
.cmp-row>div:first-child{border-left:none;color:var(--m);font-weight:600}
.cmp-row .mu{background:rgba(16,185,129,.07);font-weight:700}
.cmp-row .bad{color:var(--red)}
.cmp-row .good{color:var(--em2);font-weight:700}
@media(max-width:700px){.cmp-row{grid-template-columns:1.2fr 1fr 1fr}.cmp-row>div.hide-m{display:none}.cmp-row>div{padding:12px 10px;font-size:12.5px}}

/* ─── stats ─── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:22px}
.stat .sv{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--gold)}
.stat .sl{font-size:12.5px;color:var(--m);font-weight:600;margin-top:4px}

/* ─── budget slider ─── */
.budget{background:var(--surface);border:1px solid var(--hair2);border-radius:22px;padding:clamp(22px,4vw,38px)}
input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--em) var(--fill,30%),var(--s3) var(--fill,30%));outline:none;margin:18px 0 8px}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--em2);border:4px solid #04110b;box-shadow:0 2px 14px rgba(16,185,129,.6);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--em2);border:4px solid #04110b;cursor:grab}

/* ─── footer ─── */
.ft{border-top:1px solid var(--hair);padding:56px 0 120px;background:var(--ink2)}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}}
.ft h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--f);margin-bottom:14px}
.ft a{display:block;font-size:14px;color:var(--m);padding:4px 0;transition:color .15s}
.ft a:hover{color:var(--em2)}
.ft .made{margin-top:40px;padding-top:24px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--f)}
.tri{display:inline-flex;gap:5px;align-items:center;font-weight:700}
.tri i{width:14px;height:4px;border-radius:2px;display:inline-block}

/* ─── floating WhatsApp (desktop) ─── */
.wafloat{position:fixed;bottom:26px;right:26px;z-index:90;width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(37,211,102,.6);background:rgba(10,15,13,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.wafloat:hover{background:var(--wa);transform:scale(1.08)}
.wafloat svg{width:26px;height:26px;fill:#25d366;transition:fill .2s}
.wafloat:hover svg{fill:#04110b}
@media(max-width:820px){.wafloat{display:none}}

/* ─── misc ─── */
.glow{position:absolute;pointer-events:none;filter:blur(90px);opacity:.5;border-radius:50%}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--em3);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:7px 15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
@media(max-width:880px){.grid2{grid-template-columns:1fr}}
.checks{display:flex;flex-direction:column;gap:13px;margin-top:20px}
.checks li{list-style:none;display:flex;gap:11px;font-size:15px;color:var(--m);align-items:flex-start}
.checks li b{color:var(--t);font-weight:700}
.ck{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.4);display:flex;align-items:center;justify-content:center;margin-top:3px}
.ck svg{width:11px;height:11px;stroke:var(--em2);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}