/* ⛔ FONT AB HAMARA APNA HAI — 11 August 2026
   Pehle har safha do call Google ko bhejta tha: ek stylesheet, phir har wazan
   ki alag file. Teen baatein us mein ghalat thin, aur pehli sirf raftaar ki
   nahi hai:
     · har aane wale ka browser Google ko bata deta tha ke us ne hamara kaunsa
       safha khola. Is app ka usool hai ke aane wale ka kuch bhi bahar na jaye
     · wo call hamare haath mein nahi thi. Slow, block ya band — safha apni
       shakal kho deta hai, aur wo hamare bas mein nahi
     · kai file, jabke variable cut mein ek kaafi hai
   Sab apni hosting par, ek saal ke liye mehfooz (firebase.json), aur naam mein
   version — badalne par purani naqal apne aap chhut jati hai.
   IBM Plex Mono ka variable cut hai hi nahi, is liye us ke teen wazan alag. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/archivo-v25.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/manrope-v20.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-v20.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-v20.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600-v20.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   Zunix — shared styles
   Palette: lit glass counter at night. Graphite case, ember
   signal, cold screen-light. Numbers always in mono.
   ============================================================ */

:root{
  --void:#0A0D12;
  --case:#10151D;
  --case-2:#171E28;
  --edge:#232D3A;
  --signal:#FF5B2E;
  --signal-dim:#C43D18;
  --screen:#9FD4FF;
  --ok:#3FD9A0;
  --text:#E9EEF5;
  --dim:#8B99AC;
  --faint:#5B6878;
  --r:16px;
  --maxw:1180px;
  --nav-h:66px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:Manrope,system-ui,sans-serif;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:Archivo,Manrope,sans-serif;margin:0;line-height:1.06;font-weight:800;letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem)}
h3{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:6px}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal);display:inline-flex;align-items:center;
  gap:9px;margin-bottom:15px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--signal);opacity:.6}
.eyebrow.cool{color:var(--screen)}
.eyebrow.cool::before{background:var(--screen)}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:80;height:var(--nav-h);
  background:rgba(10,13,18,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge);
}
nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.06rem}
.brand .mark{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(150deg,var(--signal),var(--signal-dim));
  display:grid;place-items:center;font-size:.78rem;color:#fff;font-weight:800;
  box-shadow:0 0 0 1px rgba(255,91,46,.35),0 6px 18px -8px var(--signal);
}
.navlinks{display:flex;align-items:center;gap:26px;font-size:.92rem;color:var(--dim)}
.navlinks a:hover{color:var(--text)}
.navlinks a.on{color:var(--text)}
.navtoggle{display:none;background:none;border:1px solid var(--edge);color:var(--text);
  border-radius:9px;padding:7px 11px;font-size:.9rem;cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:11px;
  font-weight:700;font-size:.95rem;border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  font-family:inherit;
}
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 10px 30px -12px var(--signal)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px var(--signal)}
.btn-ghost{border-color:var(--edge);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--faint);transform:translateY(-2px)}
.btn-sm{padding:9px 16px;font-size:.88rem;border-radius:9px}

/* ---------- section rhythm ---------- */
section{padding:92px 0;position:relative}
section.tight{padding:64px 0}
.section-head{max-width:660px;margin-bottom:44px}
.section-head p{color:var(--dim);margin-top:15px;font-size:1.03rem}

/* ---------- glass display card ---------- */
.card{
  background:linear-gradient(180deg,var(--case-2),var(--case));
  border:1px solid var(--edge);border-radius:var(--r);padding:24px;position:relative;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.card h3{margin-bottom:8px}
.card p{color:var(--dim);font-size:.94rem}

/* ---------- hero ---------- */
.hero{padding:0;border-bottom:1px solid var(--edge);overflow:hidden}
.hero-grid{display:block;padding:58px 0 66px}
.hero-copy{max-width:760px;margin:0 auto 40px;text-align:center}
.hero-copy .eyebrow{justify-content:center}
.hero-sub{margin-left:auto;margin-right:auto}
.hero-cta,.hero-tags{justify-content:center}
.hero h1{margin-bottom:20px}
.hero h1 .lit{
  background:linear-gradient(96deg,var(--signal),#FF9366);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:var(--dim);font-size:1.09rem;max-width:33rem;margin-bottom:30px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.hero-tags{display:flex;gap:9px;flex-wrap:wrap}
.tag{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--edge);
  padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.02);
}

/* ---------- 3d stage ---------- */
.stage{position:relative;height:min(74vh,720px);min-height:440px;border-radius:20px;overflow:hidden;
  border:1px solid var(--edge);
  background:radial-gradient(120% 90% at 50% 10%,#151C28,#080A0F 72%);
  box-shadow:0 60px 120px -60px rgba(255,91,46,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.stage canvas{display:block;width:100%;height:100%}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 45%,transparent 40%,rgba(8,10,15,.55) 100%);
}
.stage-note{
  position:absolute;left:18px;bottom:15px;font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);z-index:2;
}
.stage-hud{
  position:absolute;right:18px;top:16px;z-index:2;display:flex;align-items:center;gap:9px;
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
  background:rgba(8,10,15,.6);border:1px solid var(--edge);border-radius:99px;
  padding:7px 14px;backdrop-filter:blur(8px);
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;
  box-shadow:0 0 10px var(--signal);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
/* ---------- stat band ---------- */
.band{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);background:var(--case)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge)}
.band-cell{background:var(--case);padding:26px 22px}
.band-cell .n{font-family:'IBM Plex Mono',monospace;font-size:1.5rem;color:var(--signal);font-weight:700}
.band-cell .l{color:var(--dim);font-size:.85rem;margin-top:5px}

/* ---------- feature grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feat .ic{font-size:1.35rem;margin-bottom:12px;display:block}
.feat .kick{
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);margin-top:13px;display:block;
}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.steps{counter-reset:s;margin-top:26px;display:grid;gap:18px}
.step{display:grid;grid-template-columns:38px 1fr;gap:15px;align-items:start}
.step .num{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--edge);
  display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;
  font-size:.82rem;color:var(--signal);background:var(--case);flex:none;
}
.step h3{margin-bottom:4px}
.step p{color:var(--dim);font-size:.94rem}

/* ---------- audit mock ---------- */
.mock{background:var(--case);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.mock-bar{
  padding:13px 17px;border-bottom:1px solid var(--edge);display:flex;
  justify-content:space-between;align-items:center;font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.mock-bar b{color:var(--signal);font-size:.95rem;letter-spacing:0}
.mrow{display:flex;justify-content:space-between;align-items:center;padding:12px 17px;border-bottom:1px solid rgba(35,45,58,.6);font-size:.9rem}
.mrow:last-child{border-bottom:0}
.mrow .id{font-family:'IBM Plex Mono',monospace;color:var(--faint);font-size:.8rem}
.mrow .yes{color:var(--ok)}
.mrow .no{color:var(--signal);font-family:'IBM Plex Mono',monospace;font-size:.78rem}
.mock-foot{padding:15px 17px;background:rgba(255,91,46,.07);border-top:1px solid var(--edge);
  display:flex;justify-content:space-between;align-items:center}
.mock-foot .lbl{color:var(--dim);font-size:.86rem}
.mock-foot .val{font-family:'IBM Plex Mono',monospace;color:var(--signal);font-size:1.15rem;font-weight:700}

/* ---------- compare table ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp-col{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.cmp-col header{padding:15px 20px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--edge)}
.cmp-old header{color:var(--faint);background:var(--case)}
.cmp-new header{color:var(--signal);background:rgba(255,91,46,.08)}
.cmp li{list-style:none;padding:12px 20px;border-bottom:1px solid rgba(35,45,58,.55);
  font-size:.92rem;display:flex;gap:11px;align-items:flex-start}
.cmp li:last-child{border-bottom:0}
.cmp ul{margin:0;padding:0}
.cmp-old li{color:var(--dim)}
.cmp-old .s{color:var(--faint);flex:none}
.cmp-new .s{color:var(--ok);flex:none}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.plan{position:relative;padding:30px}
.plan.best{border-color:rgba(255,91,46,.45);box-shadow:0 0 0 1px rgba(255,91,46,.14),0 30px 70px -50px var(--signal)}
.plan .flag{
  position:absolute;top:-11px;left:30px;background:var(--signal);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 11px;border-radius:99px;
}
.plan .pname{font-family:Archivo,sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.plan .ptag{color:var(--dim);font-size:.92rem;margin-top:5px}
.price{display:flex;align-items:baseline;gap:8px;margin:22px 0 6px}
.price .amt{font-family:'IBM Plex Mono',monospace;font-size:2.5rem;font-weight:700;letter-spacing:-.03em}
.price .per{color:var(--faint);font-size:.9rem}
.plist{margin:22px 0 26px;padding:0;display:grid;gap:11px}
.plist li{list-style:none;display:flex;gap:11px;font-size:.93rem;align-items:flex-start}
.plist .y{color:var(--ok);flex:none}
.plist .n{color:var(--faint);flex:none}
.plist .off{color:var(--faint)}
.plan .btn{width:100%;justify-content:center}

/* ---------- form ---------- */
.form{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px}
input,select,textarea{
  width:100%;background:var(--void);border:1px solid var(--edge);border-radius:10px;
  padding:12px 14px;color:var(--text);font-family:inherit;font-size:.95rem;
}
input:focus,select:focus,textarea:focus{border-color:var(--signal);outline:none}
textarea{min-height:88px;resize:vertical}
.form-note{color:var(--faint);font-size:.83rem;margin-top:4px}

/* ---------- faq ---------- */
.faq details{border:1px solid var(--edge);border-radius:12px;background:var(--case);margin-bottom:11px;overflow:hidden}
.faq summary{padding:16px 20px;cursor:pointer;font-weight:700;font-size:.98rem;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal);font-family:'IBM Plex Mono',monospace;font-size:1.15rem;flex:none}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 20px 18px;color:var(--dim);font-size:.94rem}

/* ---------- download / setup ---------- */
.dl-box{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:26px;border:1px solid rgba(255,91,46,.3);border-radius:var(--r);
  background:linear-gradient(120deg,rgba(255,91,46,.09),transparent 60%),var(--case);
}
.dl-box .big{font-size:2rem}
.dl-box h3{font-size:1.2rem;margin-bottom:5px}
.dl-box p{color:var(--dim);font-size:.92rem}

.req{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.req-row{background:var(--case);padding:15px 20px;display:flex;justify-content:space-between;gap:16px;font-size:.93rem}
.req-row .k{color:var(--dim)}
.req-row .v{font-family:'IBM Plex Mono',monospace;font-size:.86rem}

/* ---------- cta strip ---------- */
.cta-strip{
  border-top:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(255,91,46,.07),transparent);
  text-align:center;
}
.cta-strip h2{max-width:640px;margin:0 auto 16px}
.cta-strip p{color:var(--dim);max-width:520px;margin:0 auto 26px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--edge);padding:44px 0 34px;color:var(--dim);font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
.foot-grid h4{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:13px;font-weight:400}
.foot-links{display:grid;gap:9px}
.foot-links a:hover{color:var(--text)}
.foot-bot{margin-top:34px;padding-top:20px;border-top:1px solid var(--edge);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:.83rem}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .stage{height:min(66vh,600px);min-height:420px}
}
@media(max-width:960px){
  .hero-grid{padding:34px 0 42px}
  .hero-copy{margin-bottom:26px}
  .stage{height:min(64vh,620px);min-height:400px}
  .split{grid-template-columns:1fr;gap:32px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .plans,.cmp{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
  .navlinks.open{
    display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;
    background:var(--case);border-bottom:1px solid var(--edge);padding:18px 22px;gap:16px;
  }
  .navtoggle{display:block}
}
@media(max-width:620px){
  .grid-3,.grid-2,.frow{grid-template-columns:1fr}
  .stage{height:min(70vh,540px);min-height:340px}
  .stage-hud{right:10px;top:10px;font-size:.58rem;padding:5px 10px}
  .stage-note{left:12px;bottom:11px;font-size:.56rem}
  .dl-box{grid-template-columns:1fr;text-align:left}
  .foot-grid{grid-template-columns:1fr}
  section{padding:66px 0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .live-dot{animation:none}
}