@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&display=swap");
/* ===================================================================
   CorevioApp — website design system
   Brand: navy / sky / teal · clean modern SaaS
   =================================================================== */

:root{
  --navy:#0B1F4A; --ink:#0A1B35; --deep:#0F2A4A; --deep2:#16305C; --deep3:#0A2149;
  --sky:#0EA5E9; --sky-d:#0284C7; --teal:#0E9F8A; --teal-l:#3FD0BC;
  --purple:#6D28D9; --amber:#D97706; --green:#16A34A;
  --bg:#F7FAFC; --white:#FFFFFF; --card:#FFFFFF; --border:#E5EAF1;
  --slate:#334155; --muted:#5B6B84; --faint:#94A3B8;
  --tint:#E0F2FE; --tintline:#BAE6FD; --ice:#CFE3FF;
  --ring:rgba(14,165,233,.16);
  --shadow-sm:0 1px 2px rgba(11,31,74,.06), 0 1px 3px rgba(11,31,74,.05);
  --shadow:0 10px 30px rgba(11,31,74,.10), 0 2px 8px rgba(11,31,74,.06);
  --shadow-lg:0 30px 60px rgba(11,31,74,.16), 0 8px 20px rgba(11,31,74,.08);
  --r:14px; --r-lg:22px; --r-sm:10px;
  --wrap:1320px;
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); color:var(--slate); background:var(--bg);
      line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
      padding:13px 24px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; }
.btn-p{ background:var(--sky); color:#fff; box-shadow:0 8px 20px rgba(14,165,233,.28); }
.btn-p:hover{ background:var(--sky-d); transform:translateY(-1px); }
.btn-g{ background:#fff; color:var(--navy); border-color:var(--border); }
.btn-g:hover{ border-color:var(--sky); color:var(--sky-d); }
.btn-w{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-w:hover{ background:rgba(255,255,255,.18); }
.btn-t{ background:transparent; color:var(--sky); padding-left:0; padding-right:0; }
.btn-lg{ font-size:16px; padding:15px 30px; }
.arrow::after{ content:"→"; font-size:1.05em; }

/* ---------- header / nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(247,250,252,.86);
      backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); }
.nav .row{ display:flex; align-items:center; gap:26px; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px;
        color:var(--navy); letter-spacing:-.2px; }
.brand img{ width:34px; height:34px; border-radius:8px; }
.brand b{ color:var(--sky); font-weight:800; }
.nav .links{ display:flex; align-items:center; gap:24px; margin-left:8px; }
.nav .links a{ font-size:14.5px; font-weight:600; color:var(--slate); padding:8px 2px;
               border-bottom:2px solid transparent; }
.nav .links a:hover, .nav .links a.active{ color:var(--navy); border-color:var(--sky); }
.nav .sp{ flex:1; }
.nav .cta{ display:flex; align-items:center; gap:12px; }
.nav .phone{ font-size:13.5px; font-weight:600; color:var(--muted); }

/* ---------- section scaffolding ---------- */
.sec{ padding:88px 0; }
.sec-sm{ padding:60px 0; }
.dark{ background:var(--deep); color:#fff; }
.navybg{ background:var(--navy); color:#fff; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800;
          letter-spacing:1.6px; text-transform:uppercase; color:var(--sky); margin-bottom:16px; }
.eyebrow.teal{ color:var(--teal); }
.eyebrow::before{ content:"◆"; font-size:10px; }
h1,h2,h3{ color:var(--navy); letter-spacing:-.5px; line-height:1.12; font-weight:800; }
.dark h1,.dark h2,.dark h3,.navybg h1,.navybg h2,.navybg h3,
.hero h1,.hero h2,.hero h3,.cta-final h1,.cta-final h2,.cta-final h3,
.band h1,.band h2,.band h3{ color:#fff; }
.h-hero{ font-size:52px; }
.h-sec{ font-size:38px; }
.h-sub{ font-size:24px; }
.lead{ font-size:19px; color:var(--muted); line-height:1.6; }
.dark .lead,.navybg .lead{ color:var(--ice); }
.center{ text-align:center; }
.sec-head{ max-width:760px; }
.sec-head.center{ margin:0 auto; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt56{margin-top:56px}

/* ---------- grids ---------- */
.grid{ display:grid; gap:24px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.wide-r{ grid-template-columns:0.9fr 1.1fr; }
.split.wide-l{ grid-template-columns:1.1fr 0.9fr; }

/* ---------- cards ---------- */
.card{ display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--r);
       padding:26px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.card.hoverable:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card h3{ font-size:19px; }
.card p{ font-size:14.5px; color:var(--muted); margin-top:9px; }
.ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
     color:#fff; font-size:20px; font-weight:800; }
.ic.sky{background:var(--sky)} .ic.teal{background:var(--teal)} .ic.purple{background:var(--purple)}
.ic.amber{background:var(--amber)} .ic.green{background:var(--green)} .ic.navy{background:var(--navy)}
.ic svg{ width:24px; height:24px; }
.mcard .ic svg{ width:21px; height:21px; }
.chip{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
       color:var(--sky); background:var(--tint); padding:5px 11px; border-radius:999px; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--deep); color:#fff; overflow:hidden; padding:96px 0 90px; }
.hero .b1{ position:absolute; width:560px; height:560px; border-radius:50%; background:var(--deep2);
           right:-160px; top:-200px; opacity:.7; }
.hero .b2{ position:absolute; width:460px; height:460px; border-radius:50%; background:var(--deep3);
           right:-120px; top:180px; }
.hero .wrap{ position:relative; z-index:2; }
.hero .lead{ margin-top:20px; max-width:560px; }
.hero .actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero .trust{ margin-top:40px; font-size:12.5px; font-weight:700; letter-spacing:1.3px;
              text-transform:uppercase; color:#6E88AC; }

/* ---------- stat strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat b{ display:block; font-size:40px; font-weight:800; color:var(--teal-l); letter-spacing:-1px; }
.stat span{ display:block; font-size:13px; color:#9FB6D5; margin-top:4px; font-weight:600; }
.light .stat b{ color:var(--sky); }
.light .stat span{ color:var(--muted); }

/* ---------- ecosystem diagram ---------- */
.eco{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.eco .mod{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 16px;
           box-shadow:var(--shadow-sm); }
.eco .mod .t{ display:flex; align-items:center; gap:10px; }
.eco .mod .mi{ width:34px; height:34px; border-radius:9px; color:#fff; font-weight:800; font-size:12px;
               display:flex; align-items:center; justify-content:center; }
.eco .mod b{ font-size:15px; color:var(--navy); }
.eco .mod p{ font-size:12px; color:var(--muted); margin-top:9px; line-height:1.4; }
.spine{ margin:20px 0; background:var(--navy); border-radius:16px; padding:20px 28px; text-align:center;
        position:relative; box-shadow:var(--shadow); }
.spine .t{ font-size:19px; font-weight:800; color:#fff; }
.spine .t b{ color:var(--sky); }
.spine .s{ font-size:12px; letter-spacing:2px; color:var(--ice); margin-top:5px; font-weight:700; }

/* ---------- feature rows ---------- */
.shotframe{ border-radius:16px; border:1px solid var(--border); background:#fff; padding:10px;
            box-shadow:var(--shadow-lg); }
.shotframe img{ border-radius:8px; }
.browserbar{ display:flex; gap:6px; padding:8px 10px 10px; }
.browserbar i{ width:10px; height:10px; border-radius:50%; background:#E2E8F0; display:block; }
.feat-list{ list-style:none; margin-top:22px; display:grid; gap:14px; }
.feat-list li{ display:flex; gap:12px; font-size:15px; color:var(--slate); }
.feat-list li::before{ content:"✓"; color:var(--green); font-weight:800; flex:none; }

/* ---------- module strip ---------- */
.modrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mcard{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px;
        box-shadow:var(--shadow-sm); }
.mcard .ic{ width:42px; height:42px; border-radius:11px; font-size:16px; }
.mcard h4{ font-size:17px; color:var(--navy); margin-top:14px; font-weight:800; }
.mcard .tags{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.mcard .tags span{ font-size:11.5px; color:var(--muted); background:#F1F5FA; border:1px solid var(--border);
                   padding:3px 9px; border-radius:999px; }

/* ---------- app / phone ---------- */
.phone{ width:270px; background:#0A1B35; border-radius:34px; padding:12px; box-shadow:var(--shadow-lg);
        border:1px solid #1B3357; }
.phone .screen{ background:var(--bg); border-radius:24px; overflow:hidden; }
.phone .pbar{ background:var(--navy); color:#fff; padding:14px 16px 12px; }
.phone .pbar .st{ font-size:10px; color:var(--ice); display:flex; justify-content:space-between;
                  letter-spacing:.5px; }
.phone .pbar .ti{ font-size:15px; font-weight:800; margin-top:8px; }
.phone .pbody{ padding:14px; display:grid; gap:10px; }
.prow{ background:#fff; border:1px solid var(--border); border-radius:11px; padding:11px 12px;
       display:flex; align-items:center; gap:11px; }
.prow .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.prow .tx{ flex:1; }
.prow .tx b{ font-size:12.5px; color:var(--navy); display:block; }
.prow .tx span{ font-size:11px; color:var(--muted); }
.prow .pill{ font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; }
.pill.g{ background:#DCFCE7; color:#15803D; } .pill.a{ background:#FEF3C7; color:#B45309; }
.pill.s{ background:var(--tint); color:var(--sky-d); }

/* ---------- differentiator ---------- */
.diff .ic{ margin-bottom:16px; }
.diff h3{ font-size:20px; }

/* ---------- logos / proof band ---------- */
.band{ background:var(--navy); border-radius:var(--r-lg); padding:44px 48px; color:#fff; position:relative;
       overflow:hidden; }
.band .glow{ position:absolute; width:280px; height:280px; border-radius:50%; background:#12305F;
             right:-80px; top:-90px; }
.band .in{ position:relative; z-index:2; }

/* ---------- CTA ---------- */
.cta-final{ background:linear-gradient(135deg,var(--navy),var(--deep)); color:#fff; border-radius:var(--r-lg);
            padding:56px; text-align:center; position:relative; overflow:hidden; }
.cta-final .b{ position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(14,165,233,.14);
               left:-100px; bottom:-140px; }
.cta-final .in{ position:relative; z-index:2; }

/* ---------- forms ---------- */
.form{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:34px;
       box-shadow:var(--shadow); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--slate); margin-bottom:6px; }
.field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:14.5px;
       padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; background:#fff; color:var(--slate); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--sky);
       box-shadow:0 0 0 4px var(--ring); }
.form .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:#B9C7DD; padding:60px 0 26px; }
.foot .top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:34px; }
.foot .brand{ color:#fff; }
.foot p{ font-size:13.5px; color:#8CA0BE; margin-top:14px; max-width:280px; line-height:1.6; }
.foot h5{ font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:#6E88AC; margin-bottom:14px; }
.foot ul{ list-style:none; display:grid; gap:9px; }
.foot ul a{ font-size:13.5px; color:#B9C7DD; }
.foot ul a:hover{ color:#fff; }
.foot .bot{ margin-top:40px; padding-top:20px; border-top:1px solid #16305C; display:flex;
            justify-content:space-between; font-size:12.5px; color:#6E88AC; }

/* ---------- misc ---------- */
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.kv{ display:flex; gap:14px; align-items:flex-start; }
.kv .n{ font-size:22px; font-weight:800; color:var(--sky); flex:none; width:44px; }
.kv b{ font-size:16px; color:var(--navy); }
.kv p{ font-size:14px; color:var(--muted); margin-top:4px; }
.divider{ height:1px; background:var(--border); margin:0; border:0; }
.badge-live{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
             color:#15803D; background:#DCFCE7; padding:5px 12px; border-radius:999px; }
.badge-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#22C55E; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split,.g2,.g3,.g4,.eco,.stats,.modrow,.foot .top{ grid-template-columns:1fr; }
  .g4,.stats{ grid-template-columns:repeat(2,1fr); }
  .eco{ grid-template-columns:repeat(2,1fr); }
  .h-hero{ font-size:38px; } .h-sec{ font-size:30px; }
  .nav .links{ display:none; }
  .sec{ padding:60px 0; }
}

/* ---------- print/QA canvas (harmless on screen) ---------- */
@page{ size:1200px 5200px; margin:0; }

/* ============ real brand assets ============ */
.nav .brand{ flex:0 0 auto; white-space:nowrap; margin-right:14px; }
.nav .brand img{ width:34px; height:30px; object-fit:contain; border-radius:6px; }
.nav .links{ flex-wrap:nowrap; }
.foot .brand img,.footbrand img{ background:#fff; padding:5px; border-radius:8px;
   width:40px; height:31px; object-fit:contain; }
.prodlock{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.prodlock img{ width:48px; height:48px; border-radius:11px;
   box-shadow:0 0 0 1px rgba(255,255,255,.16); }
.prodlock .pn{ display:block; font-size:22px; font-weight:800; color:#fff;
   letter-spacing:-.3px; line-height:1.08; }
.prodlock .pn b{ color:#3FA9F5; }
.prodlock .pp{ display:block; font-size:11px; font-weight:800; letter-spacing:3px;
   color:var(--teal-l); margin-top:3px; }
.prodicon{ width:46px; height:46px; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm); }
.prodicon img{ width:100%; height:100%; object-fit:cover; }

/* ===================================================================
   DESIGN POLISH PASS  (Claude design craft — appended, HTML untouched)
   =================================================================== */
body{ font-feature-settings:"cv02","cv03","cv04","ss01"; letter-spacing:-.1px; }
h1,h2,h3,.h-hero,.h-sec,.h-sub{ font-family:var(--font-display); letter-spacing:-.8px; }
.h-hero{ line-height:1.05; }
.lead{ letter-spacing:-.1px; }

/* softer, more layered elevation */
:root{
  --shadow-sm:0 1px 2px rgba(11,31,74,.05), 0 2px 6px rgba(11,31,74,.05);
  --shadow:0 14px 34px -12px rgba(11,31,74,.16), 0 3px 10px rgba(11,31,74,.05);
  --shadow-lg:0 40px 80px -24px rgba(11,31,74,.28), 0 12px 28px -12px rgba(11,31,74,.16);
  --border:#EAEFF5;
}

/* refined nav */
.nav{ background:rgba(247,250,252,.82); box-shadow:0 1px 0 rgba(11,31,74,.04); }
.nav .links a{ transition:color .15s ease, border-color .15s ease; }
.nav .phone{ letter-spacing:.2px; }

/* buttons: subtle gradient + spring */
.btn{ border-radius:12px; transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, background .16s ease; }
.btn-lg{ border-radius:14px; }
.btn-p{ background:linear-gradient(135deg,#26B4F0,#0B8BDD); box-shadow:0 10px 24px -8px rgba(14,165,233,.55); }
.btn-p:hover{ background:linear-gradient(135deg,#3BBEF5,#0A84D8); transform:translateY(-2px);
   box-shadow:0 16px 30px -10px rgba(14,165,233,.6); }
.btn-w{ backdrop-filter:blur(6px); }

/* eyebrow: gradient tick */
.eyebrow{ letter-spacing:2px; }
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px;
   background:linear-gradient(90deg,var(--sky),transparent); }
.eyebrow.teal::before{ background:linear-gradient(90deg,var(--teal-l),transparent); }

/* hero: layered light, dot grid, screenshot glow */
.hero{ background:
   radial-gradient(1100px 460px at 82% -12%, rgba(14,165,233,.20), transparent 60%),
   radial-gradient(820px 460px at 6% 112%, rgba(14,159,138,.12), transparent 55%),
   linear-gradient(180deg,#0B2246,#0A1A34); }
.hero::before{ content:""; position:absolute; inset:0; opacity:.5; z-index:1; pointer-events:none;
   background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
   background-size:26px 26px;
   -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
           mask-image:linear-gradient(180deg,#000,transparent 70%); }
.hero .shotframe{ box-shadow:0 50px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04),
   0 30px 60px -20px rgba(14,165,233,.35); }
.hero .trust{ display:inline-flex; align-items:center; gap:9px; }
.hero .trust::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--teal-l);
   box-shadow:0 0 0 4px rgba(63,208,188,.18); }

/* section rhythm + hairline separation on tinted sections */
.sec{ position:relative; }

/* cards: crisper, interactive */
.card{ border-radius:16px; }
.card.hoverable{ cursor:pointer; }
.card.hoverable:hover{ transform:translateY(-4px); box-shadow:var(--shadow);
   border-color:rgba(14,165,233,.35); }
.ic{ background-image:linear-gradient(158deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%);
   box-shadow:0 8px 18px -6px rgba(11,31,74,.4); }

/* ecosystem: hub gradient + connectors + hover */
.spine{ background:linear-gradient(135deg,#0D2656,#0A1E48);
   box-shadow:0 22px 46px -16px rgba(11,31,74,.55); border-radius:18px; }
.spine::before,.spine::after{ content:""; position:absolute; left:50%; transform:translateX(-50%);
   width:2px; height:20px; }
.spine::before{ top:-20px; background:linear-gradient(var(--sky),rgba(14,165,233,0)); }
.spine::after{ bottom:-20px; background:linear-gradient(rgba(14,165,233,0),var(--sky)); }
.eco .mod{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.eco .mod:hover{ transform:translateY(-3px); box-shadow:var(--shadow);
   border-color:rgba(14,165,233,.3); }
.eco .mod .mi{ box-shadow:0 6px 14px -5px rgba(11,31,74,.5);
   background-image:linear-gradient(158deg,rgba(255,255,255,.3),transparent 55%); }

/* stat numerals: crisp, tabular */
.stat b{ font-family:var(--font-display); font-variant-numeric:tabular-nums; }

/* feature check → soft green chip */
.feat-list li{ align-items:flex-start; }
.feat-list li::before{ content:"✓"; width:20px; height:20px; border-radius:50%;
   background:#DCFCE7; color:#15803D; display:inline-flex; align-items:center; justify-content:center;
   font-size:12px; margin-top:1px; }

/* proof band + CTA: richer gradient */
.band{ background:linear-gradient(135deg,#0D2656,#0A1B36); box-shadow:var(--shadow-lg); }
.cta-final{ background:linear-gradient(135deg,#0E2A5E 0%,#0A1B36 60%); box-shadow:var(--shadow-lg); }
.cta-final::after{ content:""; position:absolute; width:420px; height:420px; border-radius:50%;
   right:-120px; top:-160px; background:radial-gradient(rgba(14,165,233,.22),transparent 70%); }

/* shot frames everywhere: glassy edge */
.shotframe{ border-radius:18px; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(11,31,74,.03); }
.browserbar i:nth-child(1){ background:#F4B7B0; } .browserbar i:nth-child(2){ background:#F6D998; }
.browserbar i:nth-child(3){ background:#B7E3B8; }

/* phone: crisper device */
.phone{ box-shadow:0 50px 90px -34px rgba(11,31,74,.5), 0 0 0 1px rgba(11,31,74,.04); }
.phone .pbar{ background:linear-gradient(135deg,#0D2656,#0A1B36); }

/* form focus polish */
.form{ border-radius:20px; }
.field input,.field select,.field textarea{ transition:border-color .15s ease, box-shadow .15s ease; }

/* footer refinement */
.foot{ background:linear-gradient(180deg,#0A1B35,#08152B); }
.foot ul a{ transition:color .15s ease; }

/* nice focus ring for keyboard users */
a:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
   outline:2px solid var(--sky); outline-offset:2px; }

/* ---------- Made in India badges ---------- */
.ibadge{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
   color:var(--navy); background:#fff; border:1.5px solid var(--border); border-radius:999px;
   padding:9px 16px; box-shadow:var(--shadow-sm); }
.ibadge svg{ width:18px; height:18px; color:var(--green); flex:none; }
.india-accent{ height:4px; border-radius:4px; width:64px; margin-bottom:18px;
   background:linear-gradient(90deg,#F59E0B 0 33%,#ffffff 33% 66%,#16A34A 66% 100%);
   box-shadow:0 0 0 1px var(--border); }
.minicard{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px;
   box-shadow:var(--shadow-sm); }
.minicard .ic{ width:38px; height:38px; border-radius:10px; }
.minicard .ic svg{ width:19px; height:19px; }
.minicard h4{ font-size:15.5px; color:var(--navy); font-weight:800; margin-top:12px;
   font-family:var(--font-display); }
.minicard p{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.45; }

/* ---------- placeholder slots — unused, no page references these ---------- */
.ph{ border:1.6px dashed #C3D0E0; background:#F6F9FC; border-radius:12px; color:#8CA0BC;
   display:flex; align-items:center; justify-content:center; text-align:center;
   font-size:12px; font-weight:700; padding:10px; min-height:64px; }
.ph-tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:1px;
   text-transform:uppercase; color:#B45309; background:#FEF3C7; padding:3px 9px; border-radius:999px; }
.ph-val{ color:#94A3B8; font-style:italic; font-weight:700; }
.reccard{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px;
   box-shadow:var(--shadow-sm); }
.reclogos{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.impgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.impcard{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px;
   box-shadow:var(--shadow-sm); }
.impcard b{ display:block; font-size:24px; font-weight:800; color:var(--sky); font-family:var(--font-display);
   letter-spacing:-.5px; }
.impcard span{ display:block; font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.4; }
@media (max-width:900px){ .reclogos,.impgrid{ grid-template-columns:1fr 1fr; } }

/* ---------- legal pages ---------- */
.legal{ max-width:820px; margin:0 auto; }
.legal .meta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.legal .meta .d{ font-size:13.5px; color:var(--muted); font-weight:600; }
.legal .toc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.legal .toc a{ font-size:12.5px; font-weight:700; color:var(--sky-d); background:var(--tint);
   padding:6px 12px; border-radius:999px; }
.legal h2{ font-size:21px; color:var(--navy); margin-top:36px; letter-spacing:-.3px; }
.legal h3{ font-size:15.5px; color:var(--navy); margin-top:20px; font-weight:800; }
.legal p{ font-size:15px; color:var(--slate); line-height:1.68; margin-top:12px; }
.legal p b, .legal li b{ color:var(--navy); }
.legal ul{ margin:12px 0 0 0; padding-left:20px; display:grid; gap:9px; }
.legal li{ font-size:15px; color:var(--slate); line-height:1.55; }
.legal .callout{ margin-top:38px; background:var(--tint); border:1px solid var(--tintline);
   border-radius:16px; padding:24px 26px; }
.legal .callout b{ color:var(--navy); font-size:16px; }
.legal .callout p{ margin-top:6px; }
.legal .fine{ margin-top:26px; font-size:12.5px; color:var(--faint); font-style:italic; line-height:1.5; }
.foot .bot a{ color:#6E88AC; } .foot .bot a:hover{ color:#fff; }

/* ===================================================================
   UI UPLIFT  ·  hero composition, motion, mobile menu, detailing
   =================================================================== */

/* ---- hero: layered composition ---- */
.herovis{ position:relative; }
.herovis .shotframe{ position:relative; z-index:2; }
.herovis .glow{ position:absolute; z-index:0; inset:-8% -6% -14% -6%; border-radius:50%;
   background:radial-gradient(60% 60% at 60% 40%, rgba(14,165,233,.35), transparent 70%);
   filter:blur(10px); }
.float-kpi{ position:absolute; z-index:3; left:-22px; bottom:-22px; background:#fff;
   border:1px solid var(--border); border-radius:16px; padding:13px 17px; box-shadow:var(--shadow-lg);
   display:flex; align-items:center; gap:13px; }
.float-kpi .ring{ width:40px; height:40px; border-radius:50%;
   background:conic-gradient(var(--green) 0 92%, #E6EEF6 92% 100%);
   display:flex; align-items:center; justify-content:center; }
.float-kpi .ring i{ width:28px; height:28px; border-radius:50%; background:#fff; display:block; }
.float-kpi b{ font-size:20px; color:var(--navy); font-family:var(--font-display); line-height:1;
   display:block; letter-spacing:-.5px; }
.float-kpi span{ font-size:11px; color:var(--muted); display:block; margin-top:2px; }
.float-badge{ position:absolute; z-index:3; right:-12px; top:-14px; background:#fff;
   border:1px solid var(--border); border-radius:999px; padding:8px 14px; box-shadow:var(--shadow);
   font-size:12px; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:8px; }
.float-badge .fl{ width:16px; height:11px; border-radius:2px; overflow:hidden; display:inline-block;
   background:linear-gradient(#F59E0B 0 33%, #fff 33% 66%, #16A34A 66% 100%); box-shadow:0 0 0 1px #E2E8F0; }
.trust-chips{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; }
.trust-chips span{ font-size:12px; font-weight:700; letter-spacing:.4px; color:#CFE0F5;
   background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:7px 13px;
   border-radius:999px; }
.trust-chips span::before{ content:"◆"; color:var(--teal-l); font-size:8px; margin-right:7px;
   vertical-align:middle; }
@media (max-width:900px){ .float-kpi,.float-badge{ display:none; } }

/* ---- nav: scroll shadow + mobile menu ---- */
.nav{ transition:box-shadow .2s ease, background .2s ease; }
.nav.scrolled{ box-shadow:0 6px 24px -12px rgba(11,31,74,.25); background:rgba(247,250,252,.94); }
.nav .burger{ display:none; width:42px; height:42px; border:1px solid var(--border); border-radius:11px;
   background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.nav .burger span, .nav .burger span::before, .nav .burger span::after{ content:""; display:block;
   width:18px; height:2px; background:var(--navy); border-radius:2px; position:relative; transition:.2s; }
.nav .burger span::before{ position:absolute; top:-6px; } .nav .burger span::after{ position:absolute; top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:rotate(45deg); top:0; }
body.menu-open .burger span::after{ transform:rotate(-45deg); top:0; }
.mobile-menu{ display:none; }
@media (max-width:900px){
  .nav .burger{ display:flex; }
  .nav .cta .btn{ display:none; }
  .mobile-menu{ display:block; position:fixed; inset:71px 0 auto 0; z-index:49; background:#fff;
     border-bottom:1px solid var(--border); box-shadow:var(--shadow); transform:translateY(-120%);
     transition:transform .28s cubic-bezier(.2,.7,.2,1); padding:14px 0 20px; }
  body.menu-open .mobile-menu{ transform:translateY(0); }
  .mobile-menu a{ display:block; padding:14px 28px; font-size:16px; font-weight:600; color:var(--slate);
     border-bottom:1px solid #F1F5FA; }
  .mobile-menu a.cta{ margin:14px 28px 0; text-align:center; background:var(--sky); color:#fff;
     border-radius:12px; border:0; }
}

/* ---- reveal on scroll (progressive — only when JS present) ---- */
html.js [data-reveal]{ opacity:0; transform:translateY(18px); }
html.js [data-reveal].in{ opacity:1; transform:none;
   transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce){ html.js [data-reveal]{ opacity:1; transform:none; } }

/* ---- back-to-top ---- */
.totop{ position:fixed; right:22px; bottom:22px; z-index:60; width:46px; height:46px; border-radius:50%;
   background:var(--navy); color:#fff; border:0; cursor:pointer; box-shadow:var(--shadow-lg);
   display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px);
   pointer-events:none; transition:opacity .2s ease, transform .2s ease, background .15s ease; }
.totop.show{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--sky-d); }
.totop svg{ width:20px; height:20px; }

/* ---- section detailing: soft top light on tinted sections ---- */
.sec.glowtop{ position:relative; }
.sec.glowtop::before{ content:""; position:absolute; left:0; right:0; top:0; height:180px;
   background:radial-gradient(60% 100% at 50% 0, rgba(14,165,233,.06), transparent 70%); pointer-events:none; }

/* ===================================================================
   SaaS PATTERNS  ·  bento grid, logo trust bar, testimonial
   =================================================================== */

/* ---- bento ---- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.bento .bt{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px;
   box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
   transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.bento .bt:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(14,165,233,.3); }
.bento .bt .ic{ margin-bottom:14px; }
.bento .bt h3{ font-size:17px; color:var(--navy); font-family:var(--font-display); }
.bento .bt p{ font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.5; }
.bento .big{ grid-column:span 2; grid-row:span 2; border:0; color:#fff; justify-content:space-between;
   background:linear-gradient(160deg,#0D2656,#0A1B36); box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.bento .big::after{ content:""; position:absolute; width:280px; height:280px; border-radius:50%;
   right:-90px; top:-90px; background:radial-gradient(rgba(14,165,233,.25),transparent 70%); }
.bento .big h3{ color:#fff; font-size:23px; letter-spacing:-.4px; position:relative; }
.bento .big p{ color:var(--ice); font-size:14.5px; position:relative; }
.bento .big .thumb{ margin-top:18px; border-radius:12px; overflow:hidden;
   border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 40px -18px rgba(0,0,0,.5); position:relative; }
.bento .wide{ grid-column:span 4; flex-direction:row; align-items:center; gap:20px; }
.bento .wide .ic{ margin-bottom:0; flex:none; }
.bento .wide h3{ margin-bottom:2px; }
@media(max-width:900px){
  .bento{ grid-template-columns:1fr 1fr; }
  .bento .big,.bento .wide{ grid-column:span 2; grid-row:auto; }
  .bento .wide{ flex-direction:column; align-items:flex-start; }
}

/* ---- logo / trust bar ---- */
.logobar{ padding:34px 0 8px; }
.logobar .lab{ text-align:center; font-size:12px; font-weight:800; letter-spacing:1.6px;
   text-transform:uppercase; color:var(--faint); }
.logorow{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; }
.logorow .lg{ height:52px; min-width:150px; border:1.4px dashed #C7D2E0; border-radius:12px;
   background:#F8FAFC; display:flex; align-items:center; justify-content:center; gap:9px;
   font-size:14px; font-weight:800; color:#8CA0BC; padding:0 20px; }
.logorow .lg .d{ width:9px; height:9px; border-radius:50%; }
.logorow .note{ width:100%; text-align:center; font-size:11.5px; color:var(--faint); font-style:italic;
   margin-top:6px; }

/* ---- testimonial ---- */
.quote{ max-width:900px; margin:0 auto; text-align:center; }
.quote .mark{ font-family:var(--font-display); font-size:60px; line-height:.5; color:var(--sky);
   opacity:.35; }
.quote blockquote{ font-family:var(--font-display); font-size:27px; line-height:1.35; color:var(--navy);
   font-weight:700; letter-spacing:-.4px; margin-top:8px; }
.quote .by{ display:inline-flex; align-items:center; gap:13px; margin-top:26px; }
.quote .av{ width:48px; height:48px; border-radius:50%; border:1.5px dashed #C7D2E0; background:#F1F5FA;
   display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#94A3B8; }
.quote .who b{ display:block; font-size:15px; color:var(--navy); }
.quote .who span{ display:block; font-size:13px; color:var(--muted); }
@media(max-width:900px){ .quote blockquote{ font-size:21px; } }

/* ===================================================================
   DESIGN REFINEMENT v2  ·  hero depth, stat dividers, nav + button polish
   =================================================================== */

/* ---- fix: nav phone was inheriting the .phone device-mockup box ---- */
.nav .phone{ width:auto; background:transparent; border:0; border-radius:0; padding:0; box-shadow:none;
   white-space:nowrap; display:inline-flex; align-items:center; gap:7px; color:var(--muted); }
.nav .phone::before{ content:""; width:15px; height:15px; flex:none; opacity:.7;
   background:no-repeat center/contain
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/></svg>"); }

/* ---- hero: layered depth (mesh glow + faint grid), content stays above ---- */
.hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
   background:
     radial-gradient(620px 320px at 84% 6%, rgba(14,165,233,.20), transparent 68%),
     radial-gradient(520px 340px at 6% 96%, rgba(14,159,138,.14), transparent 70%),
     radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
   background-size:auto, auto, 26px 26px;
   -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);
           mask-image:linear-gradient(180deg,#000 58%,transparent); }
.hero .b1,.hero .b2{ z-index:0; }

/* ---- stat strip: hairline dividers + a touch more presence ---- */
.stats .stat{ padding-left:26px; }
.stats .stat:first-child{ padding-left:0; }
.navybg .stats .stat + .stat,
.band .stats .stat + .stat{ border-left:1px solid rgba(255,255,255,.13); }
.light .stats .stat + .stat{ border-left:1px solid var(--border); }
.stat b{ line-height:1; }

/* ---- nav: crisper brand + refined link underline ---- */
.nav.scrolled{ background:rgba(247,250,252,.94); box-shadow:0 1px 0 var(--border), 0 6px 20px rgba(11,31,74,.06); }
.brand img{ box-shadow:0 4px 12px rgba(11,31,74,.14); }
.nav .links a{ position:relative; border-bottom:0; }
.nav .links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
   background:var(--sky); border-radius:2px; transition:right .22s ease; }
.nav .links a:hover::after, .nav .links a.active::after{ right:0; }

/* ---- buttons: keyboard focus + slightly softer primary shadow on press ---- */
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.btn-p:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(14,165,233,.24); }

/* ---- section eyebrow: a hair more refined ---- */
.eyebrow{ align-items:center; }
.eyebrow::before{ content:""; width:16px; height:2px; border-radius:2px; background:currentColor;
   opacity:.75; margin-right:2px; }

/* ---- card headings use the display face for consistency with bento ---- */
.card h3, .mcard h3, .eco .mod b{ font-family:var(--font-display); }

/* ===================================================================
   .appmock  ·  realistic mobile-app device mockup
   (self-contained light app UI; works on any site theme)
   =================================================================== */
.appmock{ position:relative; width:300px; margin:0 auto; padding:12px; border-radius:48px;
   background:linear-gradient(155deg,#2A2F39,#0B0D11 70%);
   box-shadow:0 60px 100px -34px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.06),
              0 0 0 1px rgba(0,0,0,.5); }
.appmock .am-island{ position:absolute; z-index:6; top:22px; left:50%; transform:translateX(-50%);
   width:98px; height:28px; background:#05070A; border-radius:16px;
   box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.am-screen{ position:relative; background:#EEF1F6; border-radius:37px; overflow:hidden;
   min-height:590px; display:flex; flex-direction:column; }
.am-head{ background:linear-gradient(160deg,var(--am1),var(--am2)); color:#fff; padding:14px 17px 17px; }
.am-status{ display:flex; justify-content:space-between; align-items:center; height:36px;
   padding-top:8px; font-size:13.5px; font-weight:700; }
.am-status .t{ letter-spacing:.4px; }
.am-status .ic{ display:inline-flex; gap:6px; align-items:center; }
.am-status .ic svg{ height:12px; width:auto; display:block; fill:currentColor; }
.am-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.am-title{ font-size:19px; font-weight:800; font-family:var(--font-display,inherit); line-height:1.1; }
.am-sub{ font-size:11.5px; opacity:.85; margin-top:3px; }
.am-avatar{ width:38px; height:38px; border-radius:50%; flex:none; background:rgba(255,255,255,.18);
   border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center;
   font-size:12.5px; font-weight:800; }
.am-live{ flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
   letter-spacing:.4px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
   padding:5px 10px; border-radius:999px; }
.am-live i{ width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.am-body{ flex:1; overflow:hidden; padding:14px; display:flex; flex-direction:column; gap:10px; }
.am-sec{ font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#8A93A3;
   margin:2px 2px -2px; }
.am-card{ background:#fff; border:1px solid #E6EBF2; border-radius:15px; padding:12px 13px;
   display:flex; align-items:center; gap:11px; box-shadow:0 1px 2px rgba(11,31,74,.05); }
.am-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.am-dot.g{background:#16A34A}.am-dot.b{background:#0EA5E9}.am-dot.a{background:#EA580C}
.am-dot.m{background:#94A3B8}.am-dot.p{background:#6D28D9}.am-dot.r{background:#DC2626}
.am-tx{ flex:1; min-width:0; }
.am-tx b{ display:block; font-size:13px; color:#0D1526; }
.am-tx span{ font-size:11.5px; color:#5B6675; }
.am-pill{ flex:none; font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.am-pill.g{background:#DCFCE7;color:#15803D}.am-pill.b{background:#E0F2FE;color:#0369A1}
.am-pill.a{background:#FFEDD5;color:#C2410C}.am-pill.m{background:#EEF1F6;color:#64748B}
.am-pill.r{background:#FEE2E2;color:#B91C1C}
.am-card.alert{ background:#FFF7ED; border-color:#FED7AA; }
.am-card.note{ background:#EFF6FF; border-color:#BFDBFE; }
.am-tabs{ display:flex; background:#fff; border-top:1px solid #E6EBF2; padding:9px 6px 15px; }
.am-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px;
   font-weight:700; color:#9AA4B2; }
.am-tab svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9;
   stroke-linecap:round; stroke-linejoin:round; }
.am-tab.on{ color:var(--am1); }
.am-home{ position:absolute; z-index:6; bottom:8px; left:50%; transform:translateX(-50%);
   width:126px; height:5px; border-radius:3px; background:#0D1526; opacity:.8; }
.am-driver{ --am1:#0284C7; --am2:#1D4ED8; }
.am-workshop{ --am1:#EA580C; --am2:#B45309; }
.am-commuter{ --am1:#0E9F6E; --am2:#0F766E; }
@media (max-width:520px){ .appmock{ width:270px; } .am-screen{ min-height:520px; } }

/* ################## THEME SCOPES ################## */
/* ===================================================================
   LIGHT · developer-grade theme  (light canvas, deep-aqua accent,
   mono micro-labels, fine grid, light hero & bands).
   =================================================================== */
[data-theme="light"]{
  --sky:#0EA79A; --sky-d:#0B8C82; --teal:#0EA79A; --teal-l:#0B8C82; --acc:#0EA79A;
  --tint:#DBF5F1; --tintline:#A7E7DF; --ring:rgba(14,167,154,.25);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="light"] body{ background-image:radial-gradient(rgba(13,26,50,.028) 1px, transparent 1.4px); background-size:30px 30px; }

/* mono eyebrows */
[data-theme="light"] .eyebrow{ font-family:var(--mono); font-weight:600; font-size:11.5px; letter-spacing:2px; color:var(--acc); text-transform:uppercase; }
[data-theme="light"] .eyebrow.teal{ color:var(--acc); }
[data-theme="light"] .eyebrow::before{ content:""; width:16px; height:2px; border-radius:2px; background:var(--acc); opacity:.9; }

/* buttons */
[data-theme="light"] .btn-p{ background:var(--acc); color:#fff; box-shadow:0 8px 22px rgba(14,167,154,.28); }
[data-theme="light"] .btn-p:hover{ background:var(--sky-d); }
[data-theme="light"] .btn-g:hover{ border-color:var(--acc); color:var(--sky-d); }
[data-theme="light"] .btn-t{ color:var(--acc); }
[data-theme="light"] .chip{ color:var(--sky-d); background:var(--tint); }
[data-theme="light"] .nav .brand b{ color:var(--acc); }
[data-theme="light"] .nav .links a::after{ background:var(--acc); }

/* HERO → light */
[data-theme="light"] .hero{ background:var(--bg); color:var(--slate); border-bottom:1px solid var(--border); }
[data-theme="light"] .hero h1{ color:var(--navy) !important; }
[data-theme="light"] .hero .lead{ color:var(--muted); }
[data-theme="light"] .hero .b1{ background:radial-gradient(circle,rgba(14,167,154,.13),transparent 70%); opacity:1; }
[data-theme="light"] .hero .b2{ background:radial-gradient(circle,rgba(99,102,241,.07),transparent 70%); }
[data-theme="light"] .hero::before{ background:
   radial-gradient(620px 320px at 84% 6%, rgba(14,167,154,.15), transparent 68%),
   radial-gradient(520px 340px at 6% 96%, rgba(99,102,241,.07), transparent 70%),
   radial-gradient(rgba(13,26,50,.05) 1px, transparent 1.4px);
   background-size:auto,auto,26px 26px;
   -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent); mask-image:linear-gradient(180deg,#000 58%,transparent); }
[data-theme="light"] .hero .btn-w{ background:#fff; color:var(--navy); border-color:var(--border); }
[data-theme="light"] .hero .btn-w:hover{ border-color:var(--acc); color:var(--sky-d); }
[data-theme="light"] .trust-chips span{ color:var(--muted); }
[data-theme="light"] .trust-chips span::before{ content:"//"; color:var(--acc); font-family:var(--mono); font-size:10px; margin-right:6px; }

/* STAT STRIP → light */
[data-theme="light"] .navybg{ background:var(--bg2,#F1F5FA); color:var(--slate); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
[data-theme="light"] .navybg h2{ color:var(--navy) !important; } [data-theme="light"] .navybg .lead{ color:var(--muted); }
[data-theme="light"] .stat b{ color:var(--acc); } [data-theme="light"] .stat span{ color:var(--muted); }
[data-theme="light"] .stats .stat + .stat{ border-left:1px solid var(--border) !important; }

/* BENTO big → light tinted focal */
[data-theme="light"] .bento .big{ background:linear-gradient(160deg,#EAFAF7,#DBF3EE); color:var(--navy); border:1px solid var(--tintline); }
[data-theme="light"] .bento .big h3{ color:var(--navy); } [data-theme="light"] .bento .big p{ color:var(--slate); }
[data-theme="light"] .bento .big::after{ background:radial-gradient(rgba(14,167,154,.22),transparent 70%); }
[data-theme="light"] .bento .bt:hover{ border-color:var(--acc); }

/* PROOF BAND → light card */
[data-theme="light"] .band{ background:linear-gradient(160deg,#FFFFFF,#EEF4F9); color:var(--slate); border:1px solid var(--border); box-shadow:var(--shadow); }
[data-theme="light"] .band h1, [data-theme="light"] .band h2, [data-theme="light"] .band h3{ color:var(--navy) !important; } [data-theme="light"] .band .lead{ color:var(--muted); }
[data-theme="light"] .band .eyebrow.teal{ color:var(--acc); }
[data-theme="light"] .band .glow{ background:radial-gradient(circle,rgba(14,167,154,.14),transparent 70%); }
[data-theme="light"] .band .stat b{ color:var(--acc); } [data-theme="light"] .band .stat span{ color:var(--muted); }

/* FINAL CTA → deep-aqua colored band (white text kept) */
[data-theme="light"] .cta-final{ background:linear-gradient(150deg,#0EA79A,#0B6E77); border:0; }
[data-theme="light"] .cta-final .b{ background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); }
[data-theme="light"] .cta-final .eyebrow{ color:#CFF6F0; } [data-theme="light"] .cta-final .lead{ color:#E4F7F4; }

/* logo bar / testimonial */
[data-theme="light"] .logobar .lab{ font-family:var(--mono); }
[data-theme="light"] .quote .mark{ color:var(--acc); }

/* legal page accents */
@media (max-width:520px){ [data-theme="light"] .appmock{ width:270px; } [data-theme="light"] .am-screen{ min-height:520px; } }
/* CTA-on-color: primary becomes white for contrast */
[data-theme="light"] .cta-final .btn-p{ background:#fff; color:var(--sky-d); box-shadow:0 10px 26px rgba(0,0,0,.2); }
[data-theme="light"] .cta-final .btn-p:hover{ background:#EFFFFB; }
[data-theme="light"] .cta-final .btn-w{ border-color:rgba(255,255,255,.55); color:#fff; }

/* ===================================================================
   DARK · developer-grade theme  (near-black canvas, electric aqua accent,
   fine grid texture, mono micro-labels).  Overrides the light system.
   =================================================================== */
[data-theme="charcoal"]{
  /* Zammad-inspired dark: clean near-black + teal-green signature */
  --bg:#0D1117; --bg2:#131922; --card:#161C25; --card2:#1B222D;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.16);
  --slate:#C6CEDA; --muted:#8B95A6; --faint:#5E6675;
  --navy:#F4F7FC; --ink:#F4F7FC;                 /* headings now near-white */
  --acc:#3DDCA6; --acc-d:#22C88C; --acc2:#7FB2FF; /* zammad-like green-teal + blue */
  --sky:#3DDCA6; --sky-d:#22C88C; --teal:#3DDCA6; --teal-l:#63E7BC;
  --tint:rgba(52,228,200,.12); --tintline:rgba(52,228,200,.32); --ice:#AEB8C8;
  --ring:rgba(52,228,200,.28);
  --deep:#0B0E13; --deep2:#12161D; --deep3:#0E1219;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --shadow-lg:0 40px 80px rgba(0,0,0,.6);
}

/* fine dot grid across the whole canvas */
[data-theme="charcoal"] body{ background:var(--bg); color:var(--slate);
  background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1.4px);
  background-size:30px 30px; }

/* ---- nav ---- */
[data-theme="charcoal"] .nav{ background:rgba(10,12,16,.72); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.3) blur(12px); }
[data-theme="charcoal"] .nav.scrolled{ background:rgba(10,12,16,.9); box-shadow:0 1px 0 var(--border),0 10px 30px rgba(0,0,0,.5); }
[data-theme="charcoal"] .brand{ color:var(--navy); } [data-theme="charcoal"] .brand b{ color:var(--acc); }
[data-theme="charcoal"] .brand img{ box-shadow:0 0 0 1px var(--border2); }
[data-theme="charcoal"] .nav .links a{ color:var(--muted); } [data-theme="charcoal"] .nav .links a:hover, [data-theme="charcoal"] .nav .links a.active{ color:var(--navy); }
[data-theme="charcoal"] .nav .phone{ color:var(--muted); }
[data-theme="charcoal"] .nav .phone::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/></svg>"); }

/* ---- buttons: aqua fill with dark text = dev-tool signature ---- */
[data-theme="charcoal"] .btn-p{ background:var(--acc); color:#06231E; box-shadow:0 8px 24px rgba(52,228,200,.28); font-weight:700; }
[data-theme="charcoal"] .btn-p:hover{ background:var(--acc-d); }
[data-theme="charcoal"] .btn-g{ background:transparent; color:var(--navy); border-color:var(--border2); }
[data-theme="charcoal"] .btn-g:hover{ border-color:var(--acc); color:var(--acc); }
[data-theme="charcoal"] .btn-w{ background:rgba(255,255,255,.06); color:#fff; border-color:var(--border2); }
[data-theme="charcoal"] .btn-w:hover{ background:rgba(255,255,255,.12); }
[data-theme="charcoal"] .btn-t{ color:var(--acc); }

/* ---- sections: flip every inline white section to dark ---- */
[data-theme="charcoal"] section[style*="#fff"], [data-theme="charcoal"] section[style*="#FFF"]{ background:var(--bg2) !important; }
[data-theme="charcoal"] .sec{ } [data-theme="charcoal"] .dark, [data-theme="charcoal"] .navybg{ background:var(--deep); }

/* eyebrow → mono uppercase micro-label */
[data-theme="charcoal"] .eyebrow{ font-family:var(--mono); color:var(--acc); letter-spacing:2px; font-weight:600; font-size:11.5px; }
[data-theme="charcoal"] .eyebrow.teal{ color:var(--acc); }
[data-theme="charcoal"] .eyebrow::before{ background:var(--acc); opacity:.9; }

[data-theme="charcoal"] h1, [data-theme="charcoal"] h2, [data-theme="charcoal"] h3{ color:var(--navy); }
[data-theme="charcoal"] .lead{ color:var(--muted); }

/* ---- hero ---- */
[data-theme="charcoal"] .hero{ background:var(--deep); }
[data-theme="charcoal"] .hero .b1{ background:radial-gradient(circle,rgba(52,228,200,.10),transparent 70%); opacity:1; }
[data-theme="charcoal"] .hero .b2{ background:radial-gradient(circle,rgba(138,160,255,.08),transparent 70%); }
[data-theme="charcoal"] .hero::before{ background:
   radial-gradient(620px 320px at 84% 6%, rgba(52,228,200,.16), transparent 68%),
   radial-gradient(520px 340px at 6% 96%, rgba(138,160,255,.10), transparent 70%),
   radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); }
[data-theme="charcoal"] .trust-chips span{ color:var(--ice); font-family:var(--mono); font-size:11px; letter-spacing:.5px; }
[data-theme="charcoal"] .trust-chips span::before{ content:"//"; color:var(--acc); font-family:var(--mono); }
[data-theme="charcoal"] .float-kpi, [data-theme="charcoal"] .float-badge{ background:var(--card2); border:1px solid var(--border2); }
[data-theme="charcoal"] .float-kpi b{ color:var(--navy); } [data-theme="charcoal"] .float-kpi span{ color:var(--muted); }
[data-theme="charcoal"] .float-kpi .ring{ background:conic-gradient(var(--acc) 0 97%, rgba(255,255,255,.1) 0); }
[data-theme="charcoal"] .float-kpi .ring i{ background:var(--card2); }
[data-theme="charcoal"] .float-badge{ color:var(--slate); }
[data-theme="charcoal"] .shotframe{ background:var(--card2); border:1px solid var(--border2); }
[data-theme="charcoal"] .browserbar i{ background:rgba(255,255,255,.14); }
[data-theme="charcoal"] .browserbar i:nth-child(1){ background:#F4B7B0; } [data-theme="charcoal"] .browserbar i:nth-child(2){ background:#F6D998; } [data-theme="charcoal"] .browserbar i:nth-child(3){ background:#B7E3B8; }

/* ---- stat strips ---- */
[data-theme="charcoal"] .navybg{ background:var(--bg2); }
[data-theme="charcoal"] .stat b{ color:var(--acc); } [data-theme="charcoal"] .stat span{ color:var(--muted); }
[data-theme="charcoal"] .stats .stat + .stat{ border-left:1px solid var(--border) !important; }
[data-theme="charcoal"] .band .stat b{ color:var(--acc); }

/* ---- cards / tiles ---- */
[data-theme="charcoal"] .card, [data-theme="charcoal"] .mcard, [data-theme="charcoal"] .impcard, [data-theme="charcoal"] .minicard, [data-theme="charcoal"] .reccard{ background:var(--card); border:1px solid var(--border); }
[data-theme="charcoal"] .card h3, [data-theme="charcoal"] .mcard h3{ color:var(--navy); } [data-theme="charcoal"] .card p, [data-theme="charcoal"] .mcard p{ color:var(--muted); }
[data-theme="charcoal"] .card.hoverable:hover{ border-color:var(--border2); box-shadow:0 20px 50px rgba(0,0,0,.5); }
[data-theme="charcoal"] .chip{ color:var(--acc); background:var(--tint); }
[data-theme="charcoal"] .prodicon{ background:var(--card2); border:1px solid var(--border); }

/* ecosystem */
[data-theme="charcoal"] .eco .mod{ background:var(--card); border:1px solid var(--border); }
[data-theme="charcoal"] .eco .mod b{ color:var(--navy); } [data-theme="charcoal"] .eco .mod p{ color:var(--muted); }
[data-theme="charcoal"] .spine{ background:linear-gradient(90deg,var(--card2),var(--card)); border:1px solid var(--border); }
[data-theme="charcoal"] .spine .t{ color:var(--navy); } [data-theme="charcoal"] .spine .t b{ color:var(--acc); } [data-theme="charcoal"] .spine .s{ color:var(--faint); }

/* bento */
[data-theme="charcoal"] .bento .bt{ background:var(--card); border:1px solid var(--border); }
[data-theme="charcoal"] .bento .bt:hover{ border-color:var(--acc); box-shadow:0 24px 60px rgba(0,0,0,.55); }
[data-theme="charcoal"] .bento .bt h3{ color:var(--navy); } [data-theme="charcoal"] .bento .bt p{ color:var(--muted); }
[data-theme="charcoal"] .bento .big{ background:linear-gradient(160deg,#101722,#0A0C10); border:1px solid var(--border2); }
[data-theme="charcoal"] .bento .big::after{ background:radial-gradient(rgba(52,228,200,.28),transparent 70%); }
[data-theme="charcoal"] .bento .big p{ color:var(--ice); }
[data-theme="charcoal"] .bento .big .thumb{ border-color:var(--border2); }

/* logo bar */
[data-theme="charcoal"] .logobar .lab{ color:var(--faint); font-family:var(--mono); }
[data-theme="charcoal"] .logorow .lg{ background:var(--card); border:1.4px dashed var(--border2); color:var(--muted); }
[data-theme="charcoal"] .logorow .note{ color:var(--faint); }

/* testimonial */
[data-theme="charcoal"] .quote .mark{ color:var(--acc); }
[data-theme="charcoal"] .quote blockquote{ color:var(--navy); }
[data-theme="charcoal"] .quote .av{ background:var(--card2); border:1px dashed var(--border2); color:var(--faint); }
[data-theme="charcoal"] .quote .who b{ color:var(--navy); } [data-theme="charcoal"] .quote .who span{ color:var(--muted); }

/* bands + final CTA */
[data-theme="charcoal"] .band{ background:linear-gradient(150deg,#0E1520,#0A0C10); border:1px solid var(--border); }
[data-theme="charcoal"] .band .glow{ background:radial-gradient(circle,rgba(52,228,200,.16),transparent 70%); }
[data-theme="charcoal"] .cta-final{ background:linear-gradient(150deg,#101823,#0A0C10); border:1px solid var(--border2); }
[data-theme="charcoal"] .cta-final .b{ background:radial-gradient(circle,rgba(52,228,200,.14),transparent 70%); }

/* section-specific white icon tiles keep their color fills (ic.sky etc. already colored) */
[data-theme="charcoal"] .ic{ box-shadow:0 6px 18px rgba(0,0,0,.4); }

/* placeholders */
[data-theme="charcoal"] .ph, [data-theme="charcoal"] .ph-tag, [data-theme="charcoal"] .ph-val, [data-theme="charcoal"] .ibadge, [data-theme="charcoal"] .india-accent{ }
[data-theme="charcoal"] .ph{ background:var(--card); border:1px dashed var(--border2); color:var(--muted); }
[data-theme="charcoal"] .ph-val{ color:var(--acc); }

/* legal pages */
[data-theme="charcoal"] .legal{ color:var(--slate); } [data-theme="charcoal"] .legal h1, [data-theme="charcoal"] .legal h2, [data-theme="charcoal"] .legal h3{ color:var(--navy); }
[data-theme="charcoal"] .legal .toc a{ background:var(--card); border:1px solid var(--border); color:var(--slate); }
[data-theme="charcoal"] .legal .callout{ background:var(--card); border:1px solid var(--border); }
[data-theme="charcoal"] .legal .meta .d{ color:var(--muted); }

/* footer */
[data-theme="charcoal"] .foot{ background:#07090C; border-top:1px solid var(--border); }
[data-theme="charcoal"] .foot .brand{ color:var(--navy); } [data-theme="charcoal"] .foot p, [data-theme="charcoal"] .foot li a, [data-theme="charcoal"] .foot .bot{ color:var(--muted); }
[data-theme="charcoal"] .foot h5{ color:var(--navy); }
[data-theme="charcoal"] .foot li a:hover{ color:var(--acc); }

/* forms (contact) */
[data-theme="charcoal"] input, [data-theme="charcoal"] select, [data-theme="charcoal"] textarea{ background:var(--card) !important; border:1px solid var(--border2) !important; color:var(--slate) !important; }

/* back-to-top */
[data-theme="charcoal"] .totop{ background:var(--acc); color:#06231E; }


/* ===================================================================
   DARK · developer-grade theme  (near-black canvas, electric aqua accent,
   fine grid texture, mono micro-labels).  Overrides the light system.
   =================================================================== */
[data-theme="pathfinder"]{
  --bg:#0A0C10; --bg2:#0E1116; --card:#14171E; --card2:#171B23;
  --border:rgba(255,255,255,.075); --border2:rgba(255,255,255,.14);
  --slate:#C3CAD6; --muted:#8B93A3; --faint:#606877;
  --navy:#F3F6FC; --ink:#F3F6FC;                 /* headings now near-white */
  --acc:#34E4C8; --acc-d:#17C7AC; --acc2:#8AA0FF; /* aqua signature + indigo */
  --sky:#34E4C8; --sky-d:#17C7AC; --teal:#34E4C8; --teal-l:#5BF0D8;
  --tint:rgba(52,228,200,.12); --tintline:rgba(52,228,200,.32); --ice:#AEB8C8;
  --ring:rgba(52,228,200,.28);
  --deep:#0B0E13; --deep2:#12161D; --deep3:#0E1219;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --shadow-lg:0 40px 80px rgba(0,0,0,.6);
}

/* fine dot grid across the whole canvas */
[data-theme="pathfinder"] body{ background:var(--bg); color:var(--slate);
  background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1.4px);
  background-size:30px 30px; }

/* ---- nav ---- */
[data-theme="pathfinder"] .nav{ background:rgba(10,12,16,.72); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.3) blur(12px); }
[data-theme="pathfinder"] .nav.scrolled{ background:rgba(10,12,16,.9); box-shadow:0 1px 0 var(--border),0 10px 30px rgba(0,0,0,.5); }
[data-theme="pathfinder"] .brand{ color:var(--navy); } [data-theme="pathfinder"] .brand b{ color:var(--acc); }
[data-theme="pathfinder"] .brand img{ box-shadow:0 0 0 1px var(--border2); }
[data-theme="pathfinder"] .nav .links a{ color:var(--muted); } [data-theme="pathfinder"] .nav .links a:hover, [data-theme="pathfinder"] .nav .links a.active{ color:var(--navy); }
[data-theme="pathfinder"] .nav .phone{ color:var(--muted); }
[data-theme="pathfinder"] .nav .phone::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/></svg>"); }

/* ---- buttons: aqua fill with dark text = dev-tool signature ---- */
[data-theme="pathfinder"] .btn-p{ background:var(--acc); color:#06231E; box-shadow:0 8px 24px rgba(52,228,200,.28); font-weight:700; }
[data-theme="pathfinder"] .btn-p:hover{ background:var(--acc-d); }
[data-theme="pathfinder"] .btn-g{ background:transparent; color:var(--navy); border-color:var(--border2); }
[data-theme="pathfinder"] .btn-g:hover{ border-color:var(--acc); color:var(--acc); }
[data-theme="pathfinder"] .btn-w{ background:rgba(255,255,255,.06); color:#fff; border-color:var(--border2); }
[data-theme="pathfinder"] .btn-w:hover{ background:rgba(255,255,255,.12); }
[data-theme="pathfinder"] .btn-t{ color:var(--acc); }

/* ---- sections: flip every inline white section to dark ---- */
[data-theme="pathfinder"] section[style*="#fff"], [data-theme="pathfinder"] section[style*="#FFF"]{ background:var(--bg2) !important; }
[data-theme="pathfinder"] .sec{ } [data-theme="pathfinder"] .dark, [data-theme="pathfinder"] .navybg{ background:var(--deep); }

/* eyebrow → mono uppercase micro-label */
[data-theme="pathfinder"] .eyebrow{ font-family:var(--mono); color:var(--acc); letter-spacing:2px; font-weight:600; font-size:11.5px; }
[data-theme="pathfinder"] .eyebrow.teal{ color:var(--acc); }
[data-theme="pathfinder"] .eyebrow::before{ background:var(--acc); opacity:.9; }

[data-theme="pathfinder"] h1, [data-theme="pathfinder"] h2, [data-theme="pathfinder"] h3{ color:var(--navy); }
[data-theme="pathfinder"] .lead{ color:var(--muted); }

/* ---- hero ---- */
[data-theme="pathfinder"] .hero{ background:var(--deep); }
[data-theme="pathfinder"] .hero .b1{ background:radial-gradient(circle,rgba(52,228,200,.10),transparent 70%); opacity:1; }
[data-theme="pathfinder"] .hero .b2{ background:radial-gradient(circle,rgba(138,160,255,.08),transparent 70%); }
[data-theme="pathfinder"] .hero::before{ background:
   radial-gradient(620px 320px at 84% 6%, rgba(52,228,200,.16), transparent 68%),
   radial-gradient(520px 340px at 6% 96%, rgba(138,160,255,.10), transparent 70%),
   radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); }
[data-theme="pathfinder"] .trust-chips span{ color:var(--ice); font-family:var(--mono); font-size:11px; letter-spacing:.5px; }
[data-theme="pathfinder"] .trust-chips span::before{ content:"//"; color:var(--acc); font-family:var(--mono); }
[data-theme="pathfinder"] .float-kpi, [data-theme="pathfinder"] .float-badge{ background:var(--card2); border:1px solid var(--border2); }
[data-theme="pathfinder"] .float-kpi b{ color:var(--navy); } [data-theme="pathfinder"] .float-kpi span{ color:var(--muted); }
[data-theme="pathfinder"] .float-kpi .ring{ background:conic-gradient(var(--acc) 0 97%, rgba(255,255,255,.1) 0); }
[data-theme="pathfinder"] .float-kpi .ring i{ background:var(--card2); }
[data-theme="pathfinder"] .float-badge{ color:var(--slate); }
[data-theme="pathfinder"] .shotframe{ background:var(--card2); border:1px solid var(--border2); }
[data-theme="pathfinder"] .browserbar i{ background:rgba(255,255,255,.14); }
[data-theme="pathfinder"] .browserbar i:nth-child(1){ background:#F4B7B0; } [data-theme="pathfinder"] .browserbar i:nth-child(2){ background:#F6D998; } [data-theme="pathfinder"] .browserbar i:nth-child(3){ background:#B7E3B8; }

/* ---- stat strips ---- */
[data-theme="pathfinder"] .navybg{ background:var(--bg2); }
[data-theme="pathfinder"] .stat b{ color:var(--acc); } [data-theme="pathfinder"] .stat span{ color:var(--muted); }
[data-theme="pathfinder"] .stats .stat + .stat{ border-left:1px solid var(--border) !important; }
[data-theme="pathfinder"] .band .stat b{ color:var(--acc); }

/* ---- cards / tiles ---- */
[data-theme="pathfinder"] .card, [data-theme="pathfinder"] .mcard, [data-theme="pathfinder"] .impcard, [data-theme="pathfinder"] .minicard, [data-theme="pathfinder"] .reccard{ background:var(--card); border:1px solid var(--border); }
[data-theme="pathfinder"] .card h3, [data-theme="pathfinder"] .mcard h3{ color:var(--navy); } [data-theme="pathfinder"] .card p, [data-theme="pathfinder"] .mcard p{ color:var(--muted); }
[data-theme="pathfinder"] .card.hoverable:hover{ border-color:var(--border2); box-shadow:0 20px 50px rgba(0,0,0,.5); }
[data-theme="pathfinder"] .chip{ color:var(--acc); background:var(--tint); }
[data-theme="pathfinder"] .prodicon{ background:var(--card2); border:1px solid var(--border); }

/* ecosystem */
[data-theme="pathfinder"] .eco .mod{ background:var(--card); border:1px solid var(--border); }
[data-theme="pathfinder"] .eco .mod b{ color:var(--navy); } [data-theme="pathfinder"] .eco .mod p{ color:var(--muted); }
[data-theme="pathfinder"] .spine{ background:linear-gradient(90deg,var(--card2),var(--card)); border:1px solid var(--border); }
[data-theme="pathfinder"] .spine .t{ color:var(--navy); } [data-theme="pathfinder"] .spine .t b{ color:var(--acc); } [data-theme="pathfinder"] .spine .s{ color:var(--faint); }

/* bento */
[data-theme="pathfinder"] .bento .bt{ background:var(--card); border:1px solid var(--border); }
[data-theme="pathfinder"] .bento .bt:hover{ border-color:var(--acc); box-shadow:0 24px 60px rgba(0,0,0,.55); }
[data-theme="pathfinder"] .bento .bt h3{ color:var(--navy); } [data-theme="pathfinder"] .bento .bt p{ color:var(--muted); }
[data-theme="pathfinder"] .bento .big{ background:linear-gradient(160deg,#101722,#0A0C10); border:1px solid var(--border2); }
[data-theme="pathfinder"] .bento .big::after{ background:radial-gradient(rgba(52,228,200,.28),transparent 70%); }
[data-theme="pathfinder"] .bento .big p{ color:var(--ice); }
[data-theme="pathfinder"] .bento .big .thumb{ border-color:var(--border2); }

/* logo bar */
[data-theme="pathfinder"] .logobar .lab{ color:var(--faint); font-family:var(--mono); }
[data-theme="pathfinder"] .logorow .lg{ background:var(--card); border:1.4px dashed var(--border2); color:var(--muted); }
[data-theme="pathfinder"] .logorow .note{ color:var(--faint); }

/* testimonial */
[data-theme="pathfinder"] .quote .mark{ color:var(--acc); }
[data-theme="pathfinder"] .quote blockquote{ color:var(--navy); }
[data-theme="pathfinder"] .quote .av{ background:var(--card2); border:1px dashed var(--border2); color:var(--faint); }
[data-theme="pathfinder"] .quote .who b{ color:var(--navy); } [data-theme="pathfinder"] .quote .who span{ color:var(--muted); }

/* bands + final CTA */
[data-theme="pathfinder"] .band{ background:linear-gradient(150deg,#0E1520,#0A0C10); border:1px solid var(--border); }
[data-theme="pathfinder"] .band .glow{ background:radial-gradient(circle,rgba(52,228,200,.16),transparent 70%); }
[data-theme="pathfinder"] .cta-final{ background:linear-gradient(150deg,#101823,#0A0C10); border:1px solid var(--border2); }
[data-theme="pathfinder"] .cta-final .b{ background:radial-gradient(circle,rgba(52,228,200,.14),transparent 70%); }

/* section-specific white icon tiles keep their color fills (ic.sky etc. already colored) */
[data-theme="pathfinder"] .ic{ box-shadow:0 6px 18px rgba(0,0,0,.4); }

/* placeholders */
[data-theme="pathfinder"] .ph, [data-theme="pathfinder"] .ph-tag, [data-theme="pathfinder"] .ph-val, [data-theme="pathfinder"] .ibadge, [data-theme="pathfinder"] .india-accent{ }
[data-theme="pathfinder"] .ph{ background:var(--card); border:1px dashed var(--border2); color:var(--muted); }
[data-theme="pathfinder"] .ph-val{ color:var(--acc); }

/* legal pages */
[data-theme="pathfinder"] .legal{ color:var(--slate); } [data-theme="pathfinder"] .legal h1, [data-theme="pathfinder"] .legal h2, [data-theme="pathfinder"] .legal h3{ color:var(--navy); }
[data-theme="pathfinder"] .legal .toc a{ background:var(--card); border:1px solid var(--border); color:var(--slate); }
[data-theme="pathfinder"] .legal .callout{ background:var(--card); border:1px solid var(--border); }
[data-theme="pathfinder"] .legal .meta .d{ color:var(--muted); }

/* footer */
[data-theme="pathfinder"] .foot{ background:#07090C; border-top:1px solid var(--border); }
[data-theme="pathfinder"] .foot .brand{ color:var(--navy); } [data-theme="pathfinder"] .foot p, [data-theme="pathfinder"] .foot li a, [data-theme="pathfinder"] .foot .bot{ color:var(--muted); }
[data-theme="pathfinder"] .foot h5{ color:var(--navy); }
[data-theme="pathfinder"] .foot li a:hover{ color:var(--acc); }

/* forms (contact) */
[data-theme="pathfinder"] input, [data-theme="pathfinder"] select, [data-theme="pathfinder"] textarea{ background:var(--card) !important; border:1px solid var(--border2) !important; color:var(--slate) !important; }

/* back-to-top */
[data-theme="pathfinder"] .totop{ background:var(--acc); color:#06231E; }


/* ---- PATHFINDER accent = orange, canvas = blue-black (product theme) ---- */
[data-theme="pathfinder"]{
  --acc:#F97316; --acc-d:#EA580C; --acc2:#60A5FA;
  --sky:#F97316; --sky-d:#EA580C; --teal:#F97316; --teal-l:#FB923C;
  --bg:#0A0F1C; --bg2:#0E1524; --card:#131C2E; --card2:#17203255;
  --deep:#080D18; --deep2:#101A2E; --deep3:#0B1322;
  --tint:rgba(249,115,22,.13); --tintline:rgba(249,115,22,.34); --ring:rgba(249,115,22,.30);
}
[data-theme="pathfinder"] body{ background:var(--bg);
  background-image:radial-gradient(rgba(255,255,255,.026) 1px, transparent 1.4px); background-size:30px 30px; }
[data-theme="pathfinder"] .btn-p{ background:var(--acc); color:#1A0E03; box-shadow:0 8px 24px rgba(249,115,22,.30); }
[data-theme="pathfinder"] .hero::before{ background:
   radial-gradient(620px 320px at 84% 6%, rgba(249,115,22,.18), transparent 68%),
   radial-gradient(520px 340px at 6% 96%, rgba(96,165,250,.10), transparent 70%),
   radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); }
[data-theme="pathfinder"] .hero .b1{ background:radial-gradient(circle,rgba(249,115,22,.12),transparent 70%); }
[data-theme="pathfinder"] .hero .b2{ background:radial-gradient(circle,rgba(96,165,250,.09),transparent 70%); }
[data-theme="pathfinder"] .bento .big{ background:linear-gradient(160deg,#16233B,#0A0F1C); }
[data-theme="pathfinder"] .bento .big::after{ background:radial-gradient(rgba(249,115,22,.30),transparent 70%); }
[data-theme="pathfinder"] .bento .bt:hover{ border-color:var(--acc); }
[data-theme="pathfinder"] .band{ background:linear-gradient(150deg,#111C30,#0A0F1C); }
[data-theme="pathfinder"] .band .glow{ background:radial-gradient(circle,rgba(249,115,22,.16),transparent 70%); }
[data-theme="pathfinder"] .cta-final{ background:linear-gradient(150deg,#13203A,#0A0F1C); }
[data-theme="pathfinder"] .cta-final .b{ background:radial-gradient(circle,rgba(249,115,22,.15),transparent 70%); }
[data-theme="pathfinder"] .float-kpi .ring{ background:conic-gradient(var(--acc) 0 97%, rgba(255,255,255,.1) 0); }
[data-theme="pathfinder"] .totop{ background:var(--acc); color:#1A0E03; }

/* ################## THEME + LANGUAGE SWITCHER ################## */
:root{ --acc:var(--sky); }   /* deck fallback for accent used by switchers */
.uiswitch{ display:inline-flex; align-items:center; gap:10px; }
.themesw{ display:inline-flex; gap:7px; padding:6px 8px; border:1px solid var(--border); border-radius:999px; background:var(--card); }
.themesw .sw{ width:16px; height:16px; border-radius:50%; border:2px solid transparent; cursor:pointer;
   padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); transition:transform .12s ease; }
.themesw .sw:hover{ transform:scale(1.12); }
.sw-deck{ background:linear-gradient(135deg,#0B1F4A,#0EA5E9); }
.sw-light{ background:linear-gradient(135deg,#F4F7FA 42%,#0EA79A); }
.sw-charcoal{ background:linear-gradient(135deg,#161C25,#3DDCA6); }
.sw-pathfinder{ background:linear-gradient(135deg,#0A0F1C,#F97316); }
.themesw .sw.on{ border-color:var(--acc); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px color-mix(in srgb,var(--acc) 40%,transparent); }
.langsw{ display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--card); }
.langsw .lg{ font-size:12px; font-weight:800; padding:7px 11px; color:var(--muted); cursor:pointer;
   background:transparent; border:0; font-family:inherit; line-height:1; }
.langsw .lg + .lg{ border-left:1px solid var(--border); }
.langsw .lg.on{ background:var(--acc); color:#fff; }
.langsw .lg:not(.on):hover{ color:var(--navy); }
@media (max-width:1280px){ .nav .phone{ display:none; } }
@media (max-width:980px){ .nav .uiswitch{ display:none; } .mobile-menu .uiswitch{ display:flex; margin:14px 28px 0; } }
.mobile-menu .uiswitch{ display:none; }

/* ---- RTL (Arabic) baseline ---- */
[dir="rtl"] body{ direction:rtl; text-align:right; }
[dir="rtl"] .nav .links{ margin-left:0; margin-right:8px; }
[dir="rtl"] .eyebrow::before{ margin-right:0; margin-left:2px; }
[dir="rtl"] .arrow::after{ content:"←"; }
[dir="rtl"] .btn.arrow{ flex-direction:row-reverse; }
[dir="rtl"] .trust-chips span::before,[dir="rtl"] .trust-chips span{ }
[dir="rtl"] .sec-head:not(.center){ text-align:right; }
[dir="rtl"] .foot .top,[dir="rtl"] .stats{ direction:rtl; }
[dir="rtl"] .am-screen{ direction:rtl; text-align:right; }

/* ---- language-specific font families (so HI/AR render everywhere) ---- */
[lang="hi"] body, [lang="hi"] .h-hero, [lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3,
[lang="hi"] .eyebrow, [lang="hi"] .btn{ font-family:"Noto Sans Devanagari","Inter",sans-serif; }
[lang="ar"] body, [lang="ar"] .h-hero, [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3,
[lang="ar"] .eyebrow, [lang="ar"] .btn{ font-family:"Noto Sans Arabic","Inter",sans-serif; }
[lang="ar"] .eyebrow{ letter-spacing:0; }   /* Arabic has no letter-spacing */
[lang="hi"] .eyebrow{ letter-spacing:.5px; }

/* ################## DECK identity + DROPDOWN switchers (v3) ################## */
/* --- Corevio deck: restore classic diamond eyebrow + deck-blue identity so it is clearly distinct from Light --- */
[data-theme="deck"] .eyebrow{ font-family:var(--font); letter-spacing:1.6px; }
[data-theme="deck"] .eyebrow::before{ content:"◆"; width:auto; height:auto; background:none; border-radius:0; margin:0; font-size:9px; }
[data-theme="deck"] .eyebrow{ color:var(--sky); }
[data-theme="deck"] .eyebrow.teal{ color:var(--teal); }
[data-theme="deck"] body{ background-image:none; }   /* deck = no grid texture */

/* --- dropdown switchers (replace inline swatches) --- */
.uiswitch{ display:inline-flex; align-items:center; gap:8px; }
.dd{ position:relative; }
.dd-btn{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13px; font-weight:700;
   color:var(--navy); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:7px 11px;
   cursor:pointer; line-height:1; transition:border-color .15s ease; }
.dd-btn:hover{ border-color:var(--acc); }
.dd-btn .sw{ width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.dd-cur{ white-space:nowrap; }
.dd-caret{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.6; opacity:.55; transition:transform .18s ease; }
.dd.open .dd-caret{ transform:rotate(180deg); }
.dd-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:194px; background:var(--card);
   border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:6px; display:none; z-index:70; }
.dd.open .dd-menu{ display:block; }
.dd-opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; font-family:inherit; font-size:13.5px;
   font-weight:600; color:var(--slate); background:transparent; border:0; border-radius:9px; padding:9px 11px; cursor:pointer; }
.dd-opt:hover{ background:color-mix(in srgb, var(--acc) 12%, transparent); color:var(--navy); }
.dd-opt.on{ color:var(--acc); font-weight:800; }
.dd-opt .sw{ width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); flex:none; }
[dir="rtl"] .dd-menu{ right:auto; left:0; }
[dir="rtl"] .dd-opt,[dir="rtl"] .dd-btn{ text-align:right; }
@media (max-width:1280px){ .nav .phone{ display:none; } }
@media (max-width:980px){ .nav .uiswitch{ display:none; } .mobile-menu .uiswitch{ display:flex; margin:16px 28px 0; } }

/* ################## REDESIGN v4 · Optibus/Trapeze best-practice patterns ################## */

/* ---- mega-menu nav ---- */
.nav .links .has-mega{ position:relative; }
.nav .links a.mega-t{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }

/* compact anchored dropdown (click-to-toggle; no full-width bar) */
.mega{ position:absolute; left:0; right:auto; top:100%; margin-top:12px;
   width:660px; max-width:92vw; background:var(--card); border:1px solid var(--border);
   border-radius:16px; box-shadow:0 30px 60px -24px rgba(11,31,74,.28), 0 8px 20px -12px rgba(11,31,74,.16);
   opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility .16s;
   z-index:55; overflow:hidden; }
.has-mega.open .mega{ opacity:1; visibility:visible; transform:none; }
.mega .wrap{ width:auto; max-width:none; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; padding:16px; }
.mega .mega-lead{ grid-column:1 / -1; padding:0 4px 12px; margin-bottom:8px; border-bottom:1px solid var(--border); }
.mega .mega-lead .k{ font-family:var(--mono,inherit); font-size:10.5px; font-weight:700; letter-spacing:1.6px;
   text-transform:uppercase; color:var(--acc); }
.mega .mega-lead h4{ font-family:var(--font-display); font-size:16px; color:var(--navy); margin-top:5px; }
.mega .mega-lead p{ font-size:12px; color:var(--muted); margin-top:5px; line-height:1.45; }
.mega .mega-lead .btn-t{ margin-top:9px; display:inline-flex; font-size:13px; }
.mega .mi-link{ display:block; padding:9px 10px; border-radius:10px; }
.mega .mi-link:hover{ background:color-mix(in srgb, var(--acc) 9%, transparent); }
.mega .mi-link b{ display:block; font-size:13.5px; color:var(--navy); font-weight:700; }
.mega .mi-link span{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.4; }
.megawrap-2 .wrap{ grid-template-columns:1fr 1fr; }
@media (max-width:980px){ .mega{ display:none !important; } }

/* ---- delivered-at strip (verifiable engagements, no fake logos) ---- */
.delivered{ padding:30px 0 6px; }
.delivered .lab{ text-align:center; font-family:var(--mono,inherit); font-size:11.5px; font-weight:700;
   letter-spacing:1.8px; text-transform:uppercase; color:var(--faint); }
.delivered .row{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.delivered .pin{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:12px;
   background:var(--card); border:1px solid var(--border); font-weight:700; font-size:14px; color:var(--navy); }
.delivered .pin svg{ width:16px; height:16px; color:var(--acc); flex:none; }
.delivered .pin span{ font-weight:600; color:var(--muted); font-size:12.5px; }

/* ---- generic tab component (who-we-serve + platform capabilities) ---- */
.pftabs{ margin-top:36px; }
.pftab-nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pftab-nav button{ font-family:inherit; font-size:14px; font-weight:700; color:var(--muted);
   background:var(--card); border:1px solid var(--border); border-radius:999px; padding:11px 20px; cursor:pointer;
   transition:all .16s ease; }
.pftab-nav button:hover{ color:var(--navy); border-color:var(--acc); }
.pftab-nav button.on{ background:var(--acc); color:#fff; border-color:var(--acc); box-shadow:0 8px 20px -6px color-mix(in srgb,var(--acc) 60%,transparent); }
[data-theme="charcoal"] .pftab-nav button.on,[data-theme="pathfinder"] .pftab-nav button.on{ color:#06231E; }
.pftab-panel{ display:none; margin-top:34px; }
.pftab-panel.on{ display:block; }
.pftab-split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.pftab-split.rev{ direction:ltr; }
.pftab-copy .k{ font-family:var(--mono,inherit); font-size:11px; font-weight:700; letter-spacing:1.6px;
   text-transform:uppercase; color:var(--acc); }
.pftab-copy h3{ font-size:29px; color:var(--navy); margin-top:12px; letter-spacing:-.5px; }
.pftab-copy .vp{ margin-top:20px; display:flex; flex-direction:column; gap:16px; }
.pftab-copy .vp .item b{ display:block; font-size:15.5px; color:var(--navy); }
.pftab-copy .vp .item p{ font-size:14px; color:var(--muted); margin-top:4px; line-height:1.55; }
.pftab-copy .vp .item{ padding-left:26px; position:relative; }
.pftab-copy .vp .item::before{ content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%;
   background:color-mix(in srgb,var(--acc) 18%,transparent);
   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA79A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
   background-repeat:no-repeat; background-position:center; background-size:11px; }
.pftab-copy .btn-t{ margin-top:22px; display:inline-flex; }
.pftab-visual{ border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); background:var(--card2,#0A1B35); }
.pftab-visual img{ width:100%; display:block; }
.pftab-visual .browserbar{ padding:10px 12px; }
@media (max-width:900px){ .pftab-split{ grid-template-columns:1fr; gap:28px; } }

/* audience visual card (when no screenshot) */
.aud-card{ border-radius:18px; padding:34px; color:#fff; position:relative; overflow:hidden;
   background:linear-gradient(150deg,var(--deep2,#16305C),var(--deep,#0F2A4A)); min-height:280px;
   display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--border); }
.aud-card .big{ font-family:var(--font-display); font-size:44px; font-weight:800; letter-spacing:-1px; color:#fff; }
.aud-card .cap{ font-size:14px; color:var(--ice,#CFE3FF); margin-top:6px; }
.aud-card .ic{ position:absolute; top:26px; left:26px; }
/* arrow links never wrap */
.pftab-copy .btn-t, .mega-lead .btn-t, .btn-t.arrow{ white-space:nowrap; }

/* ################## v5 · subtle switchers (extreme right) + full responsive ################## */
/* switchers: small, light weight, pushed to the extreme right of the bar */
.nav .cta{ display:flex; align-items:center; gap:12px; }
.nav .cta .phone{ order:1; }
.nav .cta .btn-p{ order:2; }
.nav .cta .uiswitch{ order:3; }
.nav .cta .burger{ order:4; }
.uiswitch{ gap:6px; }
.dd-btn{ font-size:11.5px; font-weight:500; color:var(--muted); padding:5px 9px; gap:5px; }
.dd-btn:hover{ color:var(--navy); border-color:var(--border); }
.dd-btn .sw{ width:12px; height:12px; }
.dd-caret{ width:11px; height:11px; opacity:.5; }
.dd-menu .dd-opt{ font-weight:500; }
.dd-menu .dd-opt.on{ font-weight:700; }

/* show desktop switchers down to 900px; below that they live in the mobile menu */
@media (min-width:901px){ .nav .cta .uiswitch{ display:inline-flex; } }
@media (max-width:900px){ .nav .cta .uiswitch{ display:none; } .mobile-menu .uiswitch{ display:flex; margin:16px 28px 4px; } }

/* ---- responsive layout ---- */
@media (max-width:960px){
  .split, .split.wide-l, .split.wide-r{ grid-template-columns:1fr; gap:30px; }
  .g3, .g4{ grid-template-columns:repeat(2,1fr); }
  .bento{ grid-template-columns:1fr; }
  .bento .big, .bento .wide{ grid-column:auto !important; grid-row:auto !important; }
  .pftab-split{ grid-template-columns:1fr; gap:26px; }
  .pftab-visual{ order:-1; }
  .h-hero{ font-size:38px; } .h-sec{ font-size:29px; } .h-sub{ font-size:21px; }
  .hero{ padding:64px 0 56px; } .sec{ padding:60px 0; } .sec-sm{ padding:44px 0; }
  .hero .lead, .sec-head .lead{ max-width:none; }
}
@media (max-width:720px){
  .g2, .g3, .g4{ grid-template-columns:1fr; }
  .eco{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:24px 18px; }
  .split{ gap:26px; }
  .foot .top{ grid-template-columns:1fr 1fr; gap:26px; }
}
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .h-hero{ font-size:30px; } .h-sec{ font-size:23px; } .lead{ font-size:16.5px; }
  .hero .actions{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero .actions .btn{ justify-content:center; }
  .eco{ grid-template-columns:1fr; }
  .stat b{ font-size:30px; }
  .pftab-nav{ gap:6px; } .pftab-nav button{ font-size:12.5px; padding:9px 12px; }
  .pftab-copy h3{ font-size:22px; }
  .delivered .row{ gap:8px; } .delivered .pin{ font-size:12.5px; padding:9px 12px; }
  .foot .top{ grid-template-columns:1fr; }
  .card, .bento .bt{ padding:20px; }
  .band, .cta-final{ padding:26px 20px; }
}



/* mega-menu dropdown chevron (background-image SVG = renders everywhere; ::before with order:2 sits after text) */
.nav .links a.mega-t{ display:inline-flex; align-items:center; }
.nav .links a.mega-t::before{ content:""; order:2; display:inline-block; width:13px; height:13px; margin-left:6px; flex:none;
   transition:transform .2s ease;
   background:no-repeat center / 13px 13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.has-mega.open a.mega-t::before{ transform:rotate(180deg); }
[data-theme="charcoal"] .nav .links a.mega-t::before,
[data-theme="pathfinder"] .nav .links a.mega-t::before{
   background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93A3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }

/* ################## T1 · form states, cookie banner ################## */
.demoform .field.invalid input, .demoform .field.invalid select, .demoform .field.invalid textarea{
   border-color:var(--er,#DC2626) !important; box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.demoform .field .err{ display:none; color:var(--er,#DC2626); font-size:12px; margin-top:5px; font-weight:600; }
.demoform .field.invalid .err{ display:block; }
.form-status{ border-radius:12px; padding:14px 16px; font-size:14px; font-weight:600; margin-bottom:14px; }
.form-status.ok{ background:#DCFCE7; color:#15803D; border:1px solid #A7F3C6; }
.form-status.bad{ background:#FEE2E2; color:#B91C1C; border:1px solid #FCA5A5; }
[data-theme="charcoal"] .form-status.ok,[data-theme="pathfinder"] .form-status.ok{ background:rgba(34,197,94,.12); }
[data-theme="charcoal"] .form-status.bad,[data-theme="pathfinder"] .form-status.bad{ background:rgba(220,38,38,.14); }

.cookie{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:560px; margin:0 auto;
   background:var(--card); border:1px solid var(--border2,var(--border)); border-radius:16px; box-shadow:var(--shadow-lg);
   padding:18px 20px; display:none; }
.cookie.show{ display:block; }
.cookie p{ font-size:13.5px; color:var(--muted); line-height:1.5; margin-bottom:14px; }
.cookie p a{ color:var(--acc); font-weight:700; }
.cookie .row{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie .btn{ font-size:13.5px; padding:10px 18px; }
.cookie .btn-min{ background:transparent; border:1px solid var(--border2,var(--border)); color:var(--navy); }
@media (max-width:520px){ .cookie .btn{ flex:1; justify-content:center; } }

/* ################## T3 · ROI calculator ################## */
.roi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch; }
.roi-inputs{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px; box-shadow:var(--shadow-sm); }
.roi-inputs .ri{ margin-bottom:24px; }
.roi-inputs label{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; font-weight:600; color:var(--slate); margin-bottom:10px; }
.roi-inputs label b{ font-size:16px; color:var(--acc); font-family:var(--font-display); }
.roi-inputs input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
   background:linear-gradient(90deg,var(--acc) var(--pct,50%), var(--border) var(--pct,50%)); outline:none; }
.roi-inputs input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
   background:#fff; border:3px solid var(--acc); cursor:pointer; box-shadow:0 2px 6px rgba(11,31,74,.25); }
.roi-inputs input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--acc); cursor:pointer; }
.roi-note{ font-size:12.5px; color:var(--muted); line-height:1.55; margin-top:6px; }
.roi-out{ background:linear-gradient(160deg,var(--deep2,#16305C),var(--deep,#0F2A4A)); color:#fff; border-radius:18px;
   padding:32px; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); border:1px solid var(--border); }
[data-theme="light"] .roi-out{ background:linear-gradient(160deg,#0EA79A,#0B6E77); }
.roi-big{ margin-bottom:22px; }
.roi-big span{ display:block; font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:var(--ice,#CFE3FF); font-weight:700; }
.roi-big b{ display:block; font-size:52px; line-height:1.05; font-family:var(--font-display); letter-spacing:-1px; margin-top:6px; color:#fff; }
.roi-sub{ display:flex; gap:14px; margin-bottom:24px; }
.roi-sub div{ flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:14px; }
.roi-sub b{ display:block; font-size:22px; font-family:var(--font-display); color:#fff; }
.roi-sub span{ font-size:11.5px; color:var(--ice,#CFE3FF); }
.roi-out .btn{ align-self:flex-start; }
.roi-fine{ font-size:11.5px; color:var(--ice,#CFE3FF); opacity:.85; margin-top:16px; line-height:1.5; }
@media (max-width:900px){ .roi-grid{ grid-template-columns:1fr; } .roi-big b{ font-size:42px; } }

/* ################## T3 · motion polish (staggered reveal) ################## */
html.js [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
html.js [data-reveal].in{ opacity:1; transform:none; }
html.js .grid [data-reveal]:nth-child(2){ transition-delay:.06s; }
html.js .grid [data-reveal]:nth-child(3){ transition-delay:.12s; }
html.js .grid [data-reveal]:nth-child(4){ transition-delay:.18s; }
html.js .grid [data-reveal]:nth-child(5){ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ html.js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ################## T3 · animated motion hero (cycling product screens) ################## */
.shotcycle{ position:relative; width:100%; padding-top:43.75%; border-radius:8px; overflow:hidden; background:#0A1B35; }
.shotcycle img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
   transition:opacity 1s cubic-bezier(.4,0,.2,1); }
.shotcycle img.on{ opacity:1; }
.browserbar{ align-items:center; }
.browserbar .shotlabel{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.4px;
   background:var(--tint); color:var(--sky-d); padding:3px 10px; border-radius:999px; transition:opacity .3s; }
[data-theme="charcoal"] .browserbar .shotlabel,[data-theme="pathfinder"] .browserbar .shotlabel{ color:var(--acc); }
@media (prefers-reduced-motion: reduce){ .shotcycle img{ transition:none; } }

/* ################## video band ################## */
.videoframe{ max-width:980px; margin:0 auto; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); background:#000; }
.videoframe video{ width:100%; display:block; }

/* anchored sections clear the sticky nav */
section[id], [id].sec{ scroll-margin-top:88px; }
.videoband{ padding-top:76px; }