/* =============================================================
   LeadVaults — marketing layer (app.css ke upar)

   Teen rules jo zupichat.com ke teardown se aaye hain:
   1. BAND ALTERNATION — page ek lambi safed scroll nahi. Dark sections par
      cards safed rehte hain, isliye wo "bahar se roshan" lagte hain.
   2. GLASS SIRF CHROME PAR — nav aur floating pill. Baaki sab near-opaque
      layered white hai. 28 cards par backdrop-filter perf bhi khata hai aur
      jab har surface frosted ho to frost material lagna band ho jaata hai.
   3. HOVER ME MOVEMENT NAHI — card uthta nahi, uski shadow gehri hoti hai aur
      border garm. Flicker-proof, aur reduced-motion me bhi zinda rehta hai.
   ============================================================= */

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s3)}
.narrow{max-width:860px;margin:0 auto}

/* ---------- announcement ---------- */
.announce{background:linear-gradient(100deg,var(--ink-dk),var(--brand));color:rgba(255,255,255,.88);
  font-size:var(--f-xs);text-align:center;padding:10px var(--s2);position:relative;z-index:40;
  letter-spacing:.005em}
.announce b{color:#fff} .announce a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}

/* ---------- nav — yahan glass CHAHIYE ---------- */
.topbar{position:sticky;top:0;z-index:30;padding:12px 0;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(5,40,36,.04);
  transition:box-shadow var(--d-base) var(--e-soft),background var(--d-base) var(--e-soft)}
.topbar.stuck{background:rgba(255,255,255,.88);
  box-shadow:0 1px 0 rgba(5,40,36,.06),0 8px 28px rgba(5,40,36,.09)}
.topbar .wrap{display:flex;align-items:center;gap:20px}
.topbar .brandmark{margin:0}
.topnav{display:flex;gap:2px;margin-left:var(--s2);flex:1}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;
  font-size:var(--f-sm);font-weight:560;color:var(--body);position:relative;
  transition:color var(--d-fast) var(--e-soft),background var(--d-fast) var(--e-soft)}
.topnav a:hover{background:rgba(6,78,74,.06);color:var(--ink)}
.topnav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topnav a.on{color:var(--ink);font-weight:650}
.topnav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--brand-2))}
.topacts{display:flex;gap:10px;flex:0 0 auto}
.burger{display:none}

/* ---------- SECTION GROUNDS ---------- */
.sec{padding:var(--s12) 0;position:relative}
.sec.tight{padding:var(--s8) 0}

/* light section: halka 44px grid jo kinaare par maskse ghul jaata hai (flat colour nahi) */
.sec-light{background:#f4f8f6;position:relative;isolation:isolate}
.sec-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(6,78,74,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(6,78,74,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 45%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 45%,#000 35%,transparent 78%)}

/* dark band: brand ink + teen radial aurora + grain. Andar ke cards safed rehte hain. */
.sec-dark{background:var(--ink-dk);color:rgba(255,255,255,.76);position:relative;isolation:isolate;overflow:hidden}
.sec-dark::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(52% 58% at 12% 8%,rgba(19,185,129,.20),transparent 62%),
  radial-gradient(45% 50% at 88% 14%,rgba(10,109,99,.34),transparent 60%),
  radial-gradient(60% 55% at 50% 104%,rgba(216,164,58,.10),transparent 64%)}
/* film grain — flat kaala "sasta" lagta hai, grain usse material bana deta hai */
.sec-dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .sub{color:rgba(255,255,255,.62)}
.sec-dark .eyebrow{color:var(--accent-2)}

/* seam: dark band ke kinaare par halka arc, taaki section juda hua lage */
.seam-top{border-radius:var(--s5) var(--s5) 0 0}
.seam-bot{border-radius:0 0 var(--s5) var(--s5)}

/* ---------- section headers ---------- */
.eyebrow{display:block;text-align:center;font-family:var(--sans);font-size:var(--f-xs);font-weight:750;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2);margin-bottom:14px}
.sec h2{text-align:center;font-size:var(--f-h2);margin-bottom:14px}
.sec h2 em{font-style:normal;color:var(--accent-dk,#0a7d5c)}
.sec-dark h2 em{color:var(--accent-2)}
/* gradient-clip wala showy treatment ab SIRF hero par — 10 baar dohrane se emphasis khatam ho jaata hai */
.sec .sub{text-align:center;color:var(--muted);max-width:58ch;margin:0 auto var(--s6);
  font-size:var(--f-lede);line-height:1.62}
.sec-dark .sub{color:rgba(255,255,255,.64)}

/* ---------- hero ---------- */
.hero{padding:var(--s10) 0 var(--s8);text-align:center;position:relative}
.sec-dark.hero{padding-top:var(--s8)}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;
  font-size:var(--f-xs);font-weight:650;letter-spacing:.01em;margin-bottom:var(--s3);
  color:var(--accent-2);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pill b{color:#fff}
.hero h1{font-size:var(--f-display);line-height:1.02;letter-spacing:-.035em;font-weight:500;
  max-width:17ch;margin:0 auto var(--s3);color:#fff}
.hero h1 em{font-style:normal;background:linear-gradient(118deg,var(--accent-2),var(--accent) 58%,#8fe3c4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:var(--f-lede);line-height:1.62;max-width:56ch;margin:0 auto var(--s5);
  color:rgba(255,255,255,.70)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.btn.lg{min-height:56px;padding:0 var(--s4);font-size:1.03rem;border-radius:15px}
.btn.white{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.9)}
.btn.white:hover{filter:brightness(1.02)}
.link-cta{color:rgba(255,255,255,.8);font-size:var(--f-sm);font-weight:560;padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.3);transition:color var(--d-fast),border-color var(--d-fast)}
.link-cta:hover{color:#fff;border-color:var(--accent-2)}
.link-cta:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* trust meta row — avatars nahi, sach wali baatein */
.ticks{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s5);
  font-size:var(--f-xs);color:rgba(255,255,255,.58)}
.ticks span{display:flex;align-items:center;gap:7px}
.ticks b{color:rgba(255,255,255,.85);font-weight:600}
.ticks svg{width:15px;height:15px;color:var(--accent-2);flex:none}

/* ---------- product window: tilted, grid se bahar nikalta hua ---------- */
/* ---------- product mock: premium window ----------
   Frame ko "screenshot" nahi, asli app jaisa dikhana hai — isliye tinted traffic
   lights, specular sheen, floor reflection aur andar asli UI ke elements
   (avatar, score pill, delta chip). Koi animation nahi: motion off par bhi same. */
/* ---------- dashboard shot + premium border ----------
   Mac frame hata diya. Ab sirf app window hai, par border "premium" tab lagta hai
   jab wo EK line na ho — teen parte hoti hain:
     1) gradient hairline (upar safed, neeche brand green) — ye "chamakti kinaar" hai;
     2) uske bahar do halke ring — tasveer ke mat/frame jaisa;
     3) neeche layered shadow + halka brand glow, taaki window tairta lage.
   Halka 3D tilt rakha hai — depth ke liye, padhne me rukawat ke bina.
   Mobile par rotateY band: transform document ki scroll-width badha deta hai. */
.mock-stage{perspective:2000px;perspective-origin:50% 26%;padding:0 10px 70px}

.shot{position:relative;max-width:1080px;margin:var(--s8) auto 0;
  /* mat/frame ki motai — yahi "premium border" hai. 1-2px ki line dikhti hi nahi. */
  padding:11px;border-radius:26px;border:1.5px solid transparent;
  background:
    /* andar ka translucent glass mat */
    linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 44%,rgba(19,185,129,.11)) padding-box,
    /* bahar ki chamakti gradient hairline */
    linear-gradient(150deg,
      rgba(255,255,255,.95) 0%,
      rgba(54,211,166,.62) 24%,
      rgba(255,255,255,.14) 48%,
      rgba(19,185,129,.58) 74%,
      rgba(255,255,255,.88) 100%) border-box;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.26),
    0 16px 32px rgba(0,0,0,.3),
    0 44px 80px rgba(0,0,0,.34),
    0 30px 90px rgba(19,185,129,.13);
  transform:rotateX(6deg) rotateY(-4deg) rotateZ(.3deg);
  animation:shotIn .8s var(--e-out) .15s both;
  transition:box-shadow var(--d-slow) var(--e-soft),transform var(--d-slow) var(--e-out)}
@keyframes shotIn{from{opacity:0;transform:rotateX(14deg) rotateY(-7deg) translateY(28px) scale(.97)}
  to{opacity:1;transform:rotateX(6deg) rotateY(-4deg) rotateZ(.3deg)}}
.shot::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 20%)}
/* farsh par parchhai */
.shot::after{content:"";position:absolute;left:5%;right:5%;bottom:-32px;height:44px;z-index:-1;
  border-radius:50%;filter:blur(28px);background:rgba(0,0,0,.45)}

.shot .mock{position:relative;overflow:hidden;border-radius:17px;background:#fff;
  /* mat aur window ke beech ek aur patli line — do-parton waala frame yahi banata hai */
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.2),0 12px 28px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.9)}
.shot .mock .bar{border-radius:17px 17px 0 0}
.shot .mock .scroll{border-radius:0 0 17px 17px}

/* andar ka UI ek-ek karke aata hai */
.shot .mk-k{opacity:0;animation:tileIn .45s var(--e-out) forwards}
.shot .mk-k:nth-child(1){animation-delay:.75s}
.shot .mk-k:nth-child(2){animation-delay:.85s}
.shot .mk-k:nth-child(3){animation-delay:.95s}
.shot .mk-k:nth-child(4){animation-delay:1.05s}
@keyframes tileIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.shot tbody tr{opacity:0;animation:rowIn .45s var(--e-out) forwards}
.shot tbody tr:nth-child(1){animation-delay:1.2s}
.shot tbody tr:nth-child(2){animation-delay:1.31s}
.shot tbody tr:nth-child(3){animation-delay:1.42s}
.shot tbody tr:nth-child(4){animation-delay:1.53s}
.shot tbody tr:nth-child(5){animation-delay:1.64s}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* hover par seedha ho jaata hai — "uchalta" nahi, isliye sasta nahi lagta */
  .shot:hover{transform:rotateX(2deg) rotateY(-1.5deg) rotateZ(0) translateY(-4px);
    box-shadow:
      0 0 0 9px rgba(255,255,255,.055),
      0 0 0 10px rgba(255,255,255,.09),
      0 2px 5px rgba(0,0,0,.28),
      0 20px 40px rgba(0,0,0,.32),
      0 56px 100px rgba(0,0,0,.36),
      0 36px 110px rgba(19,185,129,.18)}
  .shot .live b{animation:livePulse 2.2s ease-in-out infinite}
  @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(19,185,129,.55)}
    60%{box-shadow:0 0 0 7px rgba(19,185,129,0)}}
}

@media (max-width:860px){
  .mock-stage{perspective:1200px;padding:0 0 44px}
  .shot{border-radius:20px;padding:7px;transform:rotateX(3deg);
    box-shadow:
      0 2px 4px rgba(0,0,0,.26),
      0 14px 28px rgba(0,0,0,.3),
      0 34px 64px rgba(0,0,0,.34)}
  .shot .mock{border-radius:13px}
  .shot .mock .bar{border-radius:13px 13px 0 0}
  .shot .mock .scroll{border-radius:0 0 13px 13px}
  .shot::after{left:4%;right:4%;bottom:-20px;height:30px;filter:blur(20px)}
  @keyframes shotIn{from{opacity:0;transform:rotateX(9deg) translateY(20px)}
    to{opacity:1;transform:rotateX(3deg)}}
}
.mock .bar{position:relative;display:flex;align-items:center;gap:7px;padding:12px 16px;border-radius:20px 20px 0 0;}
  background:linear-gradient(180deg,#f7faf9,#eef4f2);
  box-shadow:inset 0 -1px 0 rgba(5,40,36,.08),inset 0 1px 0 rgba(255,255,255,.9)}
.mock .bar i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.mock .bar i:nth-child(1){background:#e8705f} .mock .bar i:nth-child(2){background:#e3b341}
.mock .bar i:nth-child(3){background:#58b67c}
.mock .bar>span{margin-left:10px;font-size:11.5px;color:var(--muted);font-family:var(--sans)}
.mock .bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--brand);background:rgba(19,185,129,.14);
  box-shadow:inset 0 0 0 1px rgba(19,185,129,.26)}
.mock .bar .live b{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(19,185,129,.2)}
.mock .inner{background:linear-gradient(180deg,#fff,#fbfdfc)}
.mock .mk-head{display:flex;gap:12px;padding:var(--s2);flex-wrap:wrap;
  box-shadow:inset 0 -1px 0 rgba(5,40,36,.07)}
.mock .mk-k{position:relative;overflow:hidden;flex:1 1 128px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(170deg,#f7fbf9,#eff6f3);
  box-shadow:inset 0 0 0 1px rgba(5,40,36,.055),0 1px 2px rgba(5,40,36,.04),0 6px 14px rgba(5,40,36,.05)}
.mock .mk-k::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0) 52%)}
.mock .mk-k.hot{background:linear-gradient(170deg,#073f3c,var(--ink-dk) 78%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2px 6px rgba(5,40,36,.18),0 12px 28px rgba(5,40,36,.2)}
.mock .mk-k.hot::before{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 52%)}
.mock .mk-k b{position:relative;display:block;font-family:var(--serif);font-size:26px;font-weight:600;
  color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.mock .mk-k.hot b{color:#fff}
.mock .mk-k span{position:relative;display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.mock .mk-k.hot span{color:rgba(255,255,255,.62)}
.mock .mk-k em{position:relative;display:inline-block;margin-top:9px;font-style:normal;font-size:10.5px;
  font-weight:650;color:var(--muted);letter-spacing:.01em}
.mock .mk-k em.up{color:var(--brand-2)}
.mock .mk-k.hot em.up{color:var(--accent-2)}
/* mobile par table apne frame me scroll kare — pehle overflow:hidden se Status column kat jaata tha */
.mock .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 20px 20px}
.mock table{font-size:13px;min-width:640px}
.mock th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;background:#f8fbfa;box-shadow:inset 0 -1px 0 rgba(5,40,36,.07)}
.mock th,.mock td{padding:12px var(--s2);white-space:nowrap;text-align:left}
.mock tbody tr{box-shadow:inset 0 -1px 0 rgba(5,40,36,.05)}
.mock tbody tr:last-child{box-shadow:none}
.mock .who{display:flex;align-items:center;gap:10px}
.mock .av{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--brand);
  background:linear-gradient(145deg,rgba(19,185,129,.2),rgba(6,78,74,.09));
  box-shadow:inset 0 0 0 1px rgba(19,185,129,.2)}
.mock .sc{display:inline-block;min-width:46px;text-align:center;padding:3px 9px;border-radius:8px;
  font-family:var(--sans);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--body);background:rgba(5,40,36,.055);box-shadow:inset 0 0 0 1px rgba(5,40,36,.05)}
.mock .sc.hi{color:var(--brand);background:rgba(19,185,129,.14);box-shadow:inset 0 0 0 1px rgba(19,185,129,.24)}
@media (max-width:620px){
  .mock{border-radius:16px}
  .mock .bar .live{display:none}
  .mock .mk-k{flex:1 1 calc(50% - 6px);padding:12px 13px}
  .mock .mk-k b{font-size:22px}
}

/* ---------- CARDS: near-opaque, glass NAHI ---------- */
.card-s{background:#fff;border-radius:18px;box-shadow:var(--sh);
  box-shadow:var(--sh),inset 0 0 0 1px rgba(5,40,36,.055);
  transition:box-shadow var(--d-base) var(--e-soft)}
/* hover me kuch HILTA nahi — shadow gehri, border garm. reduced-motion me bhi chalu rehta hai. */
.card-s:hover{box-shadow:var(--sh-hov),inset 0 0 0 1px rgba(19,185,129,.34)}
.sec-dark .card-s{background:#fff}
.card-ink{background:rgba(255,255,255,.055);border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:box-shadow var(--d-base) var(--e-soft),background var(--d-base) var(--e-soft)}
.card-ink:hover{background:rgba(255,255,255,.085);box-shadow:inset 0 0 0 1px rgba(54,211,166,.34)}

/* ---------- icon tiles (SVG, currentColor) ---------- */
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none;
  color:var(--brand-2);background:linear-gradient(145deg,rgba(19,185,129,.17),rgba(6,78,74,.08));
  box-shadow:inset 0 0 0 1px rgba(19,185,129,.18)}
.ico svg{width:21px;height:21px}
.sec-dark .ico{color:var(--accent-2);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ico-sm{width:34px;height:34px;border-radius:10px}.ico-sm svg{width:17px;height:17px}

/* ---------- grids + bento ---------- */
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:var(--s3)}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:var(--s3)}
/* bento: pehla card do column leta hai — saari baatein barabar nahi hoti */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
.bento>*{grid-column:span 2}
.bento>.wide{grid-column:span 4}
.bento>.half{grid-column:span 3}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}.bento>*,.bento>.wide,.bento>.half{grid-column:span 2}}

.feat{padding:var(--s4)}
.feat .ico{margin-bottom:var(--s3)}
.feat h3{margin-bottom:10px}
.feat p{font-size:.95rem;line-height:1.65}
.sec-dark .feat p{color:rgba(255,255,255,.66)}
.feat.wide{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start}
.feat.wide .ico{margin-bottom:0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:var(--s3);counter-reset:s}
.step{padding:var(--s4) var(--s3);position:relative}
.step .num{counter-increment:s;font-family:var(--serif);font-size:15px;font-weight:650;color:var(--brand-2);
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;margin-bottom:var(--s2);
  background:rgba(19,185,129,.14);box-shadow:inset 0 0 0 1px rgba(19,185,129,.2)}
.step .num::before{content:"0" counter(s)}
.sec-dark .step .num{color:var(--accent-2);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.step b{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-.012em}
.sec-dark .step b{color:#fff}
.step p{font-size:.9rem;line-height:1.6}
.sec-dark .step p{color:rgba(255,255,255,.64)}

/* ---------- compare list (✓ / ✕) ---------- */
.cmp{list-style:none;display:grid;gap:11px}
.cmp li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:.95rem;line-height:1.55}
.cmp svg{width:20px;height:20px;margin-top:1px}
.cmp .y{color:var(--accent)} .cmp .n{color:#c0594b}

/* ---------- terminal: yahi brand moment hai ---------- */
.term{border-radius:16px;overflow:hidden;background:#04110f;
  box-shadow:0 2px 6px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.08)}
.term .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.07)}
.term .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.17)}
.term .bar span{margin-left:8px;font-size:11.5px;color:rgba(255,255,255,.42);font-family:var(--sans)}
.term .body{padding:var(--s3);font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:13.5px;
  line-height:2.05;color:rgba(255,255,255,.82)}
.term .k{color:rgba(255,255,255,.44)}
.term .ok{color:#4ade9f} .term .no{color:#f0836f} .term .hi{color:#fff;font-weight:600}
.term .rel{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.term .rel b{color:var(--accent-2);letter-spacing:.06em}

/* ---------- numbers ---------- */
/* Number aur uska suffix EK hi line me. Pehle har <b> block tha, isliye "100" aur
   "%" alag-alag line par chale jaate the. Ab suffix <em> hai, number <i>. */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s4);text-align:center}
.nums b{display:flex;align-items:baseline;justify-content:center;gap:.06em;
  font-family:var(--serif);font-size:clamp(2.1rem,1.3rem + 2.6vw,3rem);font-weight:560;
  letter-spacing:-.03em;color:#fff;line-height:1.02;font-variant-numeric:tabular-nums;white-space:nowrap}
.nums b i{font-style:normal}
.nums b em{font-style:normal;color:var(--accent-2);font-size:.62em;letter-spacing:-.01em}
.nums span{display:block;font-size:var(--f-xs);margin-top:10px;color:rgba(255,255,255,.58);line-height:1.5}

/* ---------- testimonials / proof ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s3)}
.quote{padding:var(--s4);display:flex;flex-direction:column}
.quote p{font-family:var(--serif);font-size:1.06rem;line-height:1.62;color:var(--ink);flex:1;letter-spacing:-.008em}
.quote .by{display:flex;align-items:center;gap:13px;margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid rgba(5,40,36,.08)}
.quote .av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:14px;
  color:#fff;background:linear-gradient(145deg,var(--brand-2),var(--brand));flex:none;font-family:var(--sans)}
.quote .by b{display:block;font-size:var(--f-sm);color:var(--ink)}
.quote .by span{font-size:var(--f-xs);color:var(--muted)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:var(--s3);align-items:stretch}
.plan{padding:var(--s4);display:flex;flex-direction:column;position:relative}
.plan.best{box-shadow:var(--sh-lg),inset 0 0 0 2px var(--accent)}
.plan.best:hover{box-shadow:var(--sh-hov),inset 0 0 0 2px var(--accent)}
/* Tag card ke ANDAR hai, upar latka hua nahi — `.glass` par overflow:hidden hai,
   isliye `top:-12px` wala tag aadha kat jaata tha. Panel ke plan cards me bhi
   aise hi inline hai, to dono surface ek jaise dikhte hain. */
.plan .tag{display:inline-block;align-self:flex-start;margin-bottom:12px;
  padding:5px 13px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#04110f;white-space:nowrap;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  box-shadow:0 2px 8px rgba(19,185,129,.3)}
.plan h3{margin-bottom:6px}
.plan .desc{font-size:var(--f-sm);color:var(--muted);margin-bottom:var(--s3);line-height:1.55;min-height:42px}
.plan .price{font-family:var(--serif);font-size:2.4rem;font-weight:560;letter-spacing:-.032em;color:var(--ink);line-height:1}
.plan .price small{font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;margin:var(--s3) 0;flex:1;display:grid;gap:11px}
/* Marker CSS se banta hai, inline SVG se nahi — sprite sirf index.html me hai, aur
   API se bane cards me <svg> hota hi nahi. Pehle `grid-template-columns:20px 1fr`
   tha, to bina-svg wala text 20px ke column me chala jaata aur ek-ek shabd par
   toot ta tha. Ab marker absolute hai, text ko poori chaudai milti hai. */
.plan li{position:relative;padding-left:29px;font-size:.9rem;line-height:1.5}
.plan li::before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;
  border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;
  color:var(--brand);background:rgba(19,185,129,.17)}
.plan li svg{display:none}
.plan li.no{color:var(--muted)}
.plan li.no::before{content:"—";color:var(--muted);background:rgba(5,40,36,.07)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:820px;margin:0 auto}
.faq details{padding:0 var(--s3);background:#fff;border-radius:14px;
  box-shadow:var(--sh),inset 0 0 0 1px rgba(5,40,36,.055);
  transition:box-shadow var(--d-base) var(--e-soft)}
.faq details:hover{box-shadow:var(--sh-hov),inset 0 0 0 1px rgba(19,185,129,.3)}
.faq details[open]{box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(19,185,129,.26)}
.faq summary{list-style:none;cursor:pointer;padding:19px 0;font-family:var(--serif);font-size:1.05rem;
  font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);
  transition:transform var(--d-base) var(--e-out)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.faq .ans{padding:0 0 20px;font-size:.95rem;line-height:1.7;color:var(--body);max-width:68ch}

/* ---------- final CTA ---------- */
.cta-band{padding:var(--s10) var(--s5);text-align:center;position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:14px;text-align:center}
.cta-band p{max-width:52ch;margin:0 auto var(--s4);line-height:1.65;color:rgba(255,255,255,.72)}
.cta-band .btn.ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,.2)}
.trust-row{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s4);
  font-size:var(--f-xs);color:rgba(255,255,255,.55)}
.trust-row span{display:flex;align-items:center;gap:7px}
.trust-row svg{width:15px;height:15px;color:var(--accent-2)}

/* ---------- footer ---------- */
.foot-site{padding:var(--s10) 0 var(--s4);background:#f4f8f6;box-shadow:inset 0 1px 0 rgba(5,40,36,.07)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s5);margin-bottom:var(--s6)}
.foot-grid h4{font-family:var(--sans);font-size:11.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:var(--s2)}
.foot-grid a,.foot-grid p{display:block;font-size:var(--f-sm);color:var(--body);margin-bottom:10px;line-height:1.55}
.foot-grid a{transition:color var(--d-fast)} .foot-grid a:hover{color:var(--brand-2)}
.foot-grid a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.foot-bot{padding-top:var(--s3);border-top:1px solid rgba(5,40,36,.09);display:flex;justify-content:space-between;
  gap:var(--s2);flex-wrap:wrap;font-size:var(--f-xs);color:var(--muted)}

/* =============================================================
   GLOSS SYSTEM
   Do parat: (1) STATIC specular — hamesha dikhta hai, reduced-motion me bhi,
   isliye "premium" ka asli kaam yahi karta hai. (2) SWEEP — hover par bahta
   hua highlight, sirf bonus. Sirf-hover wala gloss motion-off machine par
   dikhta hi nahi, isliye usko akela kabhi mat chhodo.
   ============================================================= */
.gloss{position:relative;isolation:isolate}
/* top-edge light catch + diagonal specular — dono static */
.gloss::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 44%),
    linear-gradient(118deg,rgba(255,255,255,0) 33%,rgba(255,255,255,.5) 47%,rgba(255,255,255,0) 61%);
  opacity:.6;mix-blend-mode:soft-light}
/* dark surfaces par gloss thanda aur saaf */
.sec-dark .gloss::before,.gloss-dk::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 40%),
    linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.17) 48%,rgba(255,255,255,0) 62%);
  opacity:1;mix-blend-mode:screen}
/* hairline jo roshni pakadta hai */
.gloss::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 0 0 1px rgba(255,255,255,.3)}
.sec-dark .gloss::after,.gloss-dk::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.09)}
.gloss>*{position:relative;z-index:4}

/* sweep — sirf motion allow ho tab */
@media (prefers-reduced-motion:no-preference){
  .gloss-sweep>.shine{position:absolute;inset:-45% -65%;z-index:3;pointer-events:none;
    background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.48) 50%,transparent 62%);
    transform:translateX(-64%) rotate(4deg);opacity:0;
    transition:transform 950ms var(--e-out),opacity 300ms var(--e-soft)}
  .gloss-sweep:hover>.shine{transform:translateX(64%) rotate(4deg);opacity:1}
  .sec-dark .gloss-sweep>.shine{background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.21) 50%,transparent 62%)}
}

/* ---------- scroll reveal: FADE ONLY ----------
   zupichat ne 122 sliding elements isliye hataye the ki slide "sasta" lagta tha.
   Yahan sirf opacity — aur base state VISIBLE hai, motion sirf bonus. */
.rv{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transition:opacity var(--d-slow) var(--e-soft)}
  .rv.in{opacity:1}
  .rv-s>*{opacity:0;transition:opacity var(--d-slow) var(--e-soft)}
  .rv-s.in>*{opacity:1}
  .rv-s.in>*:nth-child(1){transition-delay:0ms}
  .rv-s.in>*:nth-child(2){transition-delay:70ms}
  .rv-s.in>*:nth-child(3){transition-delay:140ms}
  .rv-s.in>*:nth-child(4){transition-delay:210ms}
  .rv-s.in>*:nth-child(5){transition-delay:280ms}
  .rv-s.in>*:nth-child(6){transition-delay:350ms}
}

/* ---------- mobile ---------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:var(--s4)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s4)}
}
@media (max-width:860px){
  .wrap{padding:0 18px}
  .topnav{display:none}
  .topnav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:12px 18px 18px;
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    box-shadow:0 14px 30px rgba(5,40,36,.14)}
  .topnav.open a{min-height:46px;display:flex;align-items:center}
  .burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;
    border:0;cursor:pointer;background:rgba(6,78,74,.07);color:var(--ink);font-size:19px;
    transition:background var(--d-fast)}
  .burger:hover{background:rgba(6,78,74,.12)}
  .burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .topbar .wrap{position:relative}
  .sec{padding:var(--s8) 0} .sec.tight{padding:var(--s6) 0}
  .hero{padding:var(--s6) 0 var(--s5)}
  .cta-band{padding:var(--s8) var(--s3)}
  .foot-site{padding:var(--s8) 0 var(--s3)}
  .foot-grid{grid-template-columns:1fr}
  .ticks,.trust-row{gap:14px}
  .feat{padding:var(--s3)} .plan{padding:var(--s3)}
}

/* =============================================================
   CHAT WIDGET — limited-question bot, live data se jawab
   ============================================================= */
/* ---------- chat launcher: ek premium 3D circle ----------
   Pill ki jagah circle. Depth do cheezon se aati hai: upar se roshni
   (inset light rim + top crescent) aur neeche andar ki chhaya (inset dark),
   plus teen-tier drop shadow. "Ask a question" ab hover/focus par tooltip
   ban kar aata hai — button khud saaf aur chhota rehta hai. */
.cb-launch{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:60;
  width:64px;height:64px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(128% 128% at 32% 18%,#14907f 0%,var(--brand-2) 44%,#053f3b 100%);
  box-shadow:
    0 1px 2px rgba(5,40,36,.34),
    0 6px 14px rgba(5,40,36,.3),
    0 16px 34px rgba(5,40,36,.34),
    0 30px 60px rgba(5,40,36,.26),
    inset 0 2px 1px rgba(255,255,255,.42),
    inset 0 -10px 18px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(255,255,255,.16);
  transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-soft),filter var(--d-fast)}
/* upar ka glossy crescent — isi se gol cheez "uthi hui" lagti hai */
.cb-launch::before{content:"";position:absolute;left:9%;right:9%;top:6%;height:42%;border-radius:50%;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.33),rgba(255,255,255,0))}
.cb-launch:hover{filter:brightness(1.06);box-shadow:
  0 1px 2px rgba(5,40,36,.36),
  0 8px 18px rgba(5,40,36,.34),
  0 22px 44px rgba(5,40,36,.38),
  0 40px 78px rgba(5,40,36,.3),
  inset 0 2px 1px rgba(255,255,255,.48),
  inset 0 -10px 18px rgba(0,0,0,.3),
  inset 0 0 0 1px rgba(255,255,255,.2)}
.cb-launch:active{transform:scale(.95)}
.cb-launch:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}
.cb-launch svg{width:27px;height:27px;flex:none;position:relative;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}

/* "Ask a question" ab label nahi, tooltip hai — aria-label button par pehle se hai */
.cb-launch>span:not(.dot){position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  white-space:nowrap;padding:9px 14px;border-radius:12px;font-family:var(--sans);font-size:13.5px;
  font-weight:600;color:#fff;background:rgba(6,30,28,.94);
  box-shadow:0 2px 6px rgba(0,0,0,.26),0 10px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;visibility:hidden;transition:opacity var(--d-fast) var(--e-soft),visibility var(--d-fast)}
.cb-launch:hover>span:not(.dot),.cb-launch:focus-visible>span:not(.dot){opacity:1;visibility:visible}

/* live dot ab badge hai — circle ke kone par */
.cb-launch .dot{position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;
  background:var(--accent-2);box-shadow:0 0 0 3px #063b37,0 0 10px rgba(54,211,166,.7)}

@media (max-width:520px){
  .cb-launch{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:58px;height:58px}
  .cb-launch svg{width:25px;height:25px}
  .cb-launch>span:not(.dot){display:none}
}
.cb-panel{position:fixed;right:20px;bottom:20px;z-index:61;width:min(394px,calc(100vw - 32px));
  max-height:min(620px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 2px 8px rgba(5,40,36,.14),0 20px 50px rgba(5,40,36,.2),0 50px 110px rgba(5,40,36,.18),
             inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(5,40,36,.06)}
.cb-head{display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--brand-2),var(--ink-dk))}
.cb-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%);mix-blend-mode:screen}
.cb-head .av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;position:relative;
  background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cb-head .av svg{width:19px;height:19px}
.cb-head b{display:block;font-family:var(--sans);font-size:14.5px;position:relative}
.cb-head span{display:block;font-size:12px;color:rgba(255,255,255,.62);position:relative}
.cb-head .x{margin-left:auto;position:relative;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:17px;line-height:1;
  transition:background var(--d-fast)}
.cb-head .x:hover{background:rgba(255,255,255,.22)}
.cb-head .x:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

.cb-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,#f4f8f6,#eef3f1)}
.cb-msg{max-width:84%;padding:12px 15px;border-radius:16px;font-size:14.3px;line-height:1.6}
.cb-bot{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;
  box-shadow:0 1px 2px rgba(5,40,36,.05),0 4px 12px rgba(5,40,36,.06),inset 0 0 0 1px rgba(5,40,36,.05)}
.cb-you{align-self:flex-end;background:linear-gradient(145deg,var(--brand-2),var(--brand));color:#fff;
  border-bottom-right-radius:6px;box-shadow:0 2px 8px rgba(5,40,36,.2),inset 0 1px 0 rgba(255,255,255,.22)}
.cb-msg b{color:inherit;font-weight:700}
.cb-bot .live{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:650;color:#0a7d5c;background:rgba(19,185,129,.13)}
.cb-bot .live i{width:6px;height:6px;border-radius:50%;background:var(--accent);font-style:normal}

.cb-asks{padding:4px 18px 18px;display:flex;flex-wrap:wrap;gap:8px;background:#eef3f1}
.cb-asks button{border:0;cursor:pointer;padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;font-family:var(--sans);
  font-size:13px;font-weight:560;color:var(--brand);background:#fff;text-align:left;
  box-shadow:0 1px 2px rgba(5,40,36,.05),inset 0 0 0 1px rgba(6,78,74,.14);
  transition:background var(--d-fast),box-shadow var(--d-fast),transform var(--d-fast)}
.cb-asks button:hover{background:#fff;box-shadow:0 2px 8px rgba(5,40,36,.1),inset 0 0 0 1px rgba(19,185,129,.45)}
.cb-asks button:active{transform:scale(.97)}
.cb-asks button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-foot{padding:12px 18px 14px;background:#fff;box-shadow:inset 0 1px 0 rgba(5,40,36,.07);
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.cb-foot a{margin-left:auto;flex:none;min-height:44px}

.cb-typing{display:flex;gap:4px;align-items:center;padding:14px 16px}
.cb-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .cb-typing i{animation:cbt 1.1s infinite ease-in-out}
  .cb-typing i:nth-child(2){animation-delay:.15s} .cb-typing i:nth-child(3){animation-delay:.3s}
  @keyframes cbt{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  .cb-panel{animation:cbin var(--d-base) var(--e-out)}
  @keyframes cbin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
  .cb-msg{animation:cbmsg var(--d-base) var(--e-out)}
  @keyframes cbmsg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (max-width:520px){
  .cb-panel{right:10px;left:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 20px - env(safe-area-inset-bottom))}
}

/* gloss ko seedha in surfaces par lagao — HTML me class lagane ki zaroorat nahi */
/* .mock yahan NAHI hai — uske ::before/::after 3D layer hain (translateZ), gloss nahi.
   List me daala to floor shadow aur glass panel dono mit jaate hain. */
.card-s,.term,.plan,.faq details{position:relative;isolation:isolate}
.card-s::before,.plan::before,.faq details::before{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;z-index:2;opacity:.6;mix-blend-mode:soft-light;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 44%),
             linear-gradient(118deg,rgba(255,255,255,0) 33%,rgba(255,255,255,.5) 47%,rgba(255,255,255,0) 61%)}
.card-s::after,.plan::after,.faq details::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.card-s>*,.plan>*,.faq details>*{position:relative;z-index:4}
/* terminal par gloss thanda — screen blend, warna kaala dhul jaata hai */
.term::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 36%),
             linear-gradient(118deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.07) 48%,rgba(255,255,255,0) 60%)}
.term>*{position:relative;z-index:4}
/* card-ink (dark band ke andar) par bhi halka gloss */
.card-ink{position:relative;isolation:isolate}
.card-ink::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  mix-blend-mode:screen;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%)}
.card-ink>*{position:relative;z-index:4}