/* ==========================================================================
   MediaKey — mediakey.in
   Palette is sampled from the MediaKey logo: navy ground, #0090ff M-blue,
   #35c6ff / #3ad8f8 K-cyan. Do not introduce colours outside these tokens.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ---- LIGHT THEME (default) ---------------------------------------------
     Base is the MediaKey logo navy (#06213F). The accent is a signal blue
     pulled from the Tarang banner artwork's own cyan-blue highlights, so the
     hero carousel and the rest of the site read as one family instead of
     clashing amber-vs-teal. Every colour on the site resolves to a token
     below; never hardcode a hex in a rule.
     Switching the site to dark is done with .theme-dark at the end of this
     file — nothing else changes. */

  /* surfaces */
  --bg:#ffffff;
  --bg2:#f5f7fa;
  --panel:#ffffff;
  --panel2:#eef2f7;
  --deep:#06213F;        /* logo navy — top bar, closing CTA, footer */
  --deep2:#0A305C;
  --line:#dfe5ee;
  --line2:#1b4173;

  /* type */
  --txt:#06213F;
  --mut:#55647a;
  --ontxt:#ffffff;
  --onmut:#a9bdd8;

  /* brand */
  --acc:#2E7DD6;         /* signal blue, from the banner artwork — primary action fill */
  --acc-h:#1E63B3;
  --onacc:#ffffff;       /* white on blue — blue reads too dark for navy text  */
  --acc2:#175A96;        /* deep blue for links and eyebrows (AA on white)    */
  --acc3:#6EC1EA;        /* bright cyan-blue, for use on navy                 */
  --acc-soft:#EAF3FC;
  --acc-line:#BFE0F7;

  /* decorative artwork */
  --glow1:rgba(46,125,214,.20);
  --glow2:rgba(6,33,63,.08);
  --gridline:rgba(6,33,63,.07);
  --shot1:#e4eaf3;
  --shot2:#c7d4e5;
  --shade:rgba(6,33,63,.14);

  /* warning strip */
  --warn-bg:#fff4e0;--warn-line:#f0c476;--warn-txt:#7a4a00;

  --maxw:1280px;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);
  font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------- top bar + nav ---------------- */
.topbar{background:var(--deep);border-bottom:1px solid var(--deep);font-size:12.5px;color:var(--onmut)}
.topbar .wrap{display:flex;justify-content:flex-end;gap:22px;height:38px;align-items:center}
.topbar a:hover{color:var(--ontxt)}

nav.main{position:sticky;top:0;z-index:100;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
nav.main .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px;width:auto}
footer .logo img{height:34px}
.logo .logo-icon{height:34px}
footer .logo .logo-icon{height:30px}
.logo .logo-word{height:30px}
footer .logo .logo-word{height:26px}

.nl{display:flex;gap:2px;align-items:center}
.nl > li{position:relative;list-style:none}
.nl > li > a{display:block;padding:26px 15px;font-size:14.5px;font-weight:500;color:var(--mut)}
.nl > li:hover > a,.nl > li > a.on{color:var(--txt)}
.nl > li.has > a::after{content:'▾';font-size:9px;margin-left:6px;opacity:.6}

.drop{position:absolute;top:100%;left:0;min-width:310px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;box-shadow:0 26px 60px -20px var(--shade)}
.nl > li:hover .drop,.nl > li:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:11px 14px;border-radius:8px;font-size:14px;color:var(--mut);list-style:none}
.drop li{list-style:none}
.drop a b{display:block;color:var(--txt);font-weight:600;font-size:14.5px}
.drop a span{font-size:12.5px}
.drop a:hover{background:var(--panel2);color:var(--txt)}

.navcta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:9px 12px;font-size:17px;cursor:pointer}

/* ---------------- buttons ---------------- */
.btn{display:inline-block;padding:12px 22px;border-radius:8px;font-size:14.5px;font-weight:600;transition:.18s;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--acc);color:var(--onacc);font-weight:700}
.btn.primary:hover{background:var(--acc-h)}
.btn.ghost{border-color:var(--line);color:var(--txt);background:transparent}
.btn.ghost:hover{border-color:var(--acc2);color:var(--txt)}
.btn.light{background:var(--acc);color:var(--onacc);font-weight:700}
.btn.light:hover{background:var(--acc-h)}


/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:118px 0 96px}
.bgart{position:absolute;inset:0;pointer-events:none}
.bgart .glow{position:absolute;border-radius:50%;filter:blur(90px)}
.g1{width:640px;height:440px;top:-140px;left:-120px;background:var(--glow1)}
.g2{width:520px;height:420px;top:40px;right:-140px;background:var(--glow2)}
.bgart .grid{position:absolute;inset:0;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(900px 520px at 30% 30%,#000,transparent);mask-image:radial-gradient(900px 520px at 30% 30%,#000,transparent)}
.hero .wrap{position:relative}
.hero.split .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}

.kick{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel2);color:var(--acc2);font-size:12.5px;font-weight:600;letter-spacing:.6px;padding:7px 15px;border-radius:999px;margin-bottom:24px}
.kick i{width:6px;height:6px;border-radius:50%;background:var(--acc3);display:block}

h1{font-size:58px;line-height:1.06;letter-spacing:-2.2px;font-weight:800;margin-bottom:22px}
h1 em{font-style:normal;color:var(--acc2)}
.sub{font-size:18.5px;color:var(--mut);max-width:600px;margin-bottom:34px}
.cta{display:flex;gap:13px;flex-wrap:wrap}
.trust{margin-top:38px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:34px;flex-wrap:wrap;color:var(--mut);font-size:13px}
.trust b{color:var(--txt)}

/* page hero (inner pages) */
.hero.page{padding:84px 0 70px;text-align:left}
.hero.page h1{font-size:48px;max-width:900px}
.hero.page .sub{margin-bottom:0}
.crumb{font-size:12.5px;color:var(--mut);letter-spacing:1.4px;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.crumb a{color:var(--acc2)}

/* ---------------- console mock visual ---------------- */
/* min-width:0 on every nested grid item below: without it, a plain "1fr"
   track's automatic minimum is its content's min/max-content size, not
   zero. .vhero/.vrow use aspect-ratio with no intrinsic content, which at
   some zoom levels/pixel-rounding thresholds computed to just enough of a
   transferred size to push the .vbody/.vmain tracks past their 50% share —
   forcing .visual wider than its .row column and overlapping .rtxt's text.
   min-width:0 removes that automatic minimum so the tracks always honour
   the explicit 1fr split instead of growing to fit content. */
.visual{border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--panel2),var(--panel));padding:16px;box-shadow:0 30px 70px -34px var(--shade);min-width:0}
.vtop{display:flex;gap:7px;margin-bottom:14px}
.vtop i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.vbody{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px}
.vside{display:grid;gap:9px;align-content:start}
.vside b{display:block;height:10px;border-radius:5px;background:var(--line)}
.vside b.on{background:var(--acc)}
.vmain{display:grid;gap:12px;min-width:0}
.vhero{aspect-ratio:16/7;border-radius:10px;background:linear-gradient(120deg,var(--shot1),var(--shot2));position:relative;min-width:0}
.vhero::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:var(--mut)}
.vrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.vrow i{display:block;aspect-ratio:2/3;border-radius:7px;background:linear-gradient(160deg,var(--shot1),var(--shot2))}

/* ---------------- sections ---------------- */
section{padding:92px 0}
section.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.tight{padding:64px 0}
.eyebrow{color:var(--acc2);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:12px}
h2{font-size:40px;line-height:1.1;letter-spacing:-1.4px;font-weight:800;margin-bottom:14px}
h3{font-weight:700}
.lead{color:var(--mut);font-size:17px;max-width:700px}
.shead{margin-bottom:50px}
.shead.center{text-align:center;max-width:730px;margin-left:auto;margin-right:auto}
.shead.center .lead{margin-left:auto;margin-right:auto}

/* stats band */
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.stat b{display:block;font-size:42px;font-weight:800;letter-spacing:-1.6px;color:var(--acc2)}
.stat span{color:var(--mut);font-size:13.5px}

/* two big cards */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pcard{border:1px solid var(--line);border-radius:16px;background:linear-gradient(165deg,var(--panel2),var(--panel));padding:34px;position:relative;overflow:hidden;transition:.2s}
.pcard::before{content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--glow1),transparent 70%)}
.pcard:hover{transform:translateY(-4px);border-color:var(--acc)}
.pcard .tagsm{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--acc3);font-weight:700;margin-bottom:14px}
.pcard h3{font-size:26px;letter-spacing:-.8px;margin-bottom:10px}
.pcard p{color:var(--mut);font-size:15px;margin-bottom:20px}
.arrow{color:var(--acc2);font-weight:600;font-size:14.5px}

/* feature cards */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px;transition:.2s;box-shadow:0 2px 6px -4px var(--shade)}
.card:hover{box-shadow:0 14px 34px -18px var(--shade)}
.card:hover{border-color:var(--acc);transform:translateY(-3px)}
.ico{width:44px;height:44px;border-radius:11px;background:var(--acc-soft);border:1px solid var(--acc-line);display:grid;place-items:center;font-size:19px;margin-bottom:16px}
.card h3{font-size:17.5px;margin-bottom:8px}
.card p{color:var(--mut);font-size:14.5px}

/* department strip */
.dept{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.dept > div{padding:28px 22px;border-right:1px solid var(--line);transition:.2s}
.dept > div:last-child{border-right:0}
.dept > div:hover{background:var(--panel2)}
.dept .dn{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc2);margin-bottom:11px}
.dept p{color:var(--mut);font-size:13.8px}

/* split with tick lists */
.e2e{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.e2e > div{border:1px solid var(--line);border-radius:16px;padding:36px;background:var(--panel)}
.e2e h3{font-size:23px;letter-spacing:-.7px;margin-bottom:8px}
.e2e > div > p{color:var(--mut);margin-bottom:22px;font-size:15px}
ul.ticks{list-style:none;display:grid;gap:11px}
ul.ticks li{padding-left:28px;position:relative;color:var(--mut);font-size:14.5px}
ul.ticks li::before{content:'✓';position:absolute;left:0;color:var(--acc3);font-weight:800}

/* alternating rows */
.rows{display:grid;gap:72px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.row.flip .rtxt{order:2}
.row > .rtxt,.row > .visual{min-width:0}

/* industry cards */
.ind{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);transition:.2s;box-shadow:0 2px 8px -5px var(--shade)}
.ind:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 18px 40px -22px var(--shade)}
.ind .top{aspect-ratio:16/10;background:linear-gradient(150deg,var(--shot1),var(--shot2));display:grid;place-items:center;font-size:30px}
.ind .bot{padding:22px}
.ind h3{font-size:17px;margin-bottom:7px}
.ind p{color:var(--mut);font-size:13.8px;margin-bottom:14px}

/* numbered flow */
.flow{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.flow > div{padding:26px 22px;border-right:1px solid var(--line)}
.flow > div:last-child{border-right:0}
.flow .n{font-size:11.5px;font-weight:800;letter-spacing:1.6px;color:var(--acc2);margin-bottom:10px}
.flow h4{font-size:15.5px;margin-bottom:6px}
.flow p{color:var(--mut);font-size:13.3px}

/* spec table */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14.8px;background:var(--panel)}
.tbl th,.tbl td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--panel2);font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--acc2)}
.tbl td:first-child{font-weight:600;width:230px}
.tbl td{color:var(--mut)}
.tbl tr:last-child td{border-bottom:0}

/* faq */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:20px 24px}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--acc2);font-weight:800}
.faq details[open] summary::after{content:'–'}
.faq p{color:var(--mut);font-size:14.8px;margin-top:12px}

/* prose (legal pages) */
.prose{max-width:820px}
.prose h2{font-size:25px;letter-spacing:-.6px;margin:40px 0 12px}
.prose h3{font-size:18px;margin:26px 0 8px}
.prose p,.prose li{color:var(--mut);font-size:15.3px}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--txt)}
.prose .updated{font-size:13px;color:var(--acc2);text-transform:uppercase;letter-spacing:1.3px;font-weight:700}

/* contact */
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.form{display:grid;gap:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--txt)}
.field input,.field select,.field textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;color:var(--txt);font-size:14.5px;font-family:inherit
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc2)}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cinfo{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:30px}
.cinfo h3{font-size:17px;margin-bottom:6px}
.cinfo p{color:var(--mut);font-size:14.5px;margin-bottom:22px}
.cinfo a{color:var(--acc2)}
.formnote{font-size:12.5px;color:var(--mut)}

/* final cta */
.final{position:relative;overflow:hidden;background:linear-gradient(125deg,var(--deep),var(--deep2));border-top:1px solid var(--deep)}
.final::before{content:'';position:absolute;width:700px;height:500px;border-radius:50%;filter:blur(100px);background:var(--glow1);top:-180px;left:35%}
.final .wrap{position:relative;text-align:center;padding:100px 32px}
.final h2{font-size:44px;color:var(--ontxt)}
.final p{color:var(--onmut);font-size:18px;margin-bottom:32px}
.final .cta{justify-content:center}
.final .btn.ghost{border-color:rgba(255,255,255,.32);color:var(--ontxt)}
.final .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* footer */
footer{background:var(--deep);border-top:1px solid var(--deep);padding:60px 0 30px;color:var(--onmut);font-size:13.5px}
.fgrid{display:grid;grid-template-columns:1.7fr repeat(5,1fr);gap:30px;margin-bottom:44px}
footer h4{color:var(--ontxt);font-size:12.5px;text-transform:uppercase;letter-spacing:1.3px;margin-bottom:14px}
footer nav a{display:block;margin-bottom:9px}
footer a:hover{color:var(--ontxt)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px}
.social a:hover{border-color:var(--acc2)}
.fbot{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px}
.fbot .lks{display:flex;gap:20px;flex-wrap:wrap}

/* ---------------- responsive ---------------- */
@media(max-width:1040px){
  .wrap{padding:0 20px}
  .hero.split .wrap,.two,.e2e,.row,.cgrid{grid-template-columns:1fr}
  .slide.img{padding:0}
  .row.flip .rtxt{order:0}
  .grid2,.grid3,.grid4,.stats,.flow,.dept,.fgrid{grid-template-columns:1fr}
  .flow > div,.dept > div{border-right:0;border-bottom:1px solid var(--line)}
  .flow > div:last-child,.dept > div:last-child{border-bottom:0}
  h1{font-size:38px;letter-spacing:-1.4px}
  .hero.page h1{font-size:32px}
  h2{font-size:29px}
  .final h2{font-size:30px}
  section{padding:64px 0}
  .hero{padding:70px 0 60px}

  .burger{display:block}
  .nl{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 20px 22px;max-height:calc(100vh - 76px);overflow-y:auto}
  .nl.open{display:flex}
  .nl > li > a{padding:14px 0;border-bottom:1px solid var(--line)}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:0;padding:6px 0 10px 10px;min-width:0}
  .topbar,.navcta .btn.ghost{display:none}
  .tbl td:first-child{width:auto}
  .two-up{grid-template-columns:1fr}
}
@media(max-width:420px){
  h1{font-size:31px}
  .navcta .btn{padding:10px 15px;font-size:13.5px}
  .logo img{height:32px}
  /* icon + wordmark together don't fit next to the CTA button at phone
     width — drop the wordmark and keep just the icon mark. */
  .logo .logo-word{display:none}
  .logo .logo-icon{height:30px}
}

/* ---------------- inline SVG icons ---------------- */
.ico .i{width:21px;height:21px;color:var(--acc2)}
.ind .top .i{width:36px;height:36px;color:var(--acc2);opacity:.9}
.ind .top{font-size:0}


/* ---------------- products mega menu ---------------- */
.drop.mega{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  min-width:700px;left:50%;transform:translate(-50%,8px);padding:14px
}
.nl > li:hover .drop.mega,.nl > li:focus-within .drop.mega{transform:translate(-50%,0)}
.mcol{padding:6px}
.mcol + .mcol{border-left:1px solid var(--line)}
.mcol ul{list-style:none}
.mhead{
  display:block;padding:12px 14px;border-radius:10px;margin-bottom:6px;
  background:linear-gradient(135deg,var(--panel2),var(--panel));border:1px solid var(--line)
}
.mhead b{display:block;color:var(--txt);font-size:17px;font-weight:800;letter-spacing:-.4px}
.mhead span{display:block;color:var(--acc2);font-size:12.5px;font-weight:600}
.mhead:hover{border-color:var(--acc)}
.mnote{display:block;padding:11px 14px;font-size:13px;color:var(--acc2);font-weight:600}
.mnote:hover{color:var(--txt)}

/* product index cards */
.prodcard{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  border:1px solid var(--line);border-radius:18px;padding:40px;
  background:linear-gradient(160deg,var(--panel2),var(--panel));position:relative;overflow:hidden
}
.prodcard::before{content:'';position:absolute;top:-90px;right:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,var(--glow1),transparent 70%)}
.prodcard > *{position:relative}
.prodcard .pname{font-size:34px;font-weight:800;letter-spacing:-1.2px;margin-bottom:6px}
.prodcard .prole{color:var(--acc2);font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:16px}
.prodcard p{color:var(--mut);font-size:15.5px;margin-bottom:22px}

/* spec chips (Pravaah at-a-glance) */
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.chip{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:22px 18px;text-align:center}
.chip b{display:block;font-size:27px;font-weight:800;letter-spacing:-1px;color:var(--acc2)}
.chip span{display:block;color:var(--mut);font-size:12.5px;margin-top:4px}

/* spec list columns */
.speccols{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.specbox{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.specbox h3{background:var(--panel2);padding:13px 20px;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--acc2);border-bottom:1px solid var(--line)}
.specbox ul{list-style:none;padding:18px 20px;display:grid;gap:9px}
.specbox li{color:var(--mut);font-size:14.3px;padding-left:16px;position:relative}
.specbox li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--acc2)}

@media(max-width:1040px){
  .drop.mega{min-width:0;grid-template-columns:1fr;left:0;transform:none;padding:0}
  .nl > li:hover .drop.mega,.nl > li:focus-within .drop.mega{transform:none}
  .mcol + .mcol{border-left:0;border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
  .prodcard,.speccols{grid-template-columns:1fr}
  .chips{grid-template-columns:repeat(2,1fr)}
}

/* Wide tables (Pravaah capacity, product comparison) would push the page
   sideways on a phone. Make the table itself the scroll container so the
   page body never scrolls horizontally. */
@media(max-width:1040px){
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .tbl td,.tbl th{white-space:normal;min-width:150px}
}

/* ---------------- in-page product sub-nav ---------------- */
.subnav{
  position:sticky;top:76px;z-index:90;
  background:color-mix(in srgb, var(--bg) 93%, transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{
  white-space:nowrap;padding:16px 16px;font-size:14px;font-weight:600;color:var(--mut);
  border-bottom:2px solid transparent
}
.subnav a:hover{color:var(--txt)}
.subnav a.on{color:var(--acc2);border-bottom-color:var(--acc)}
.theme-dark .subnav a.on{color:var(--acc3)}
/* anchored sections must clear both sticky bars when jumped to */
section[id],div[id].band{scroll-margin-top:136px}

/* ---------------- hero carousel ----------------
   All slides are stacked in one grid cell, so the carousel would otherwise
   take the height of its tallest slide and leave dead space under the
   shorter ones. Instead the carousel itself owns the height — a 2.5:1 box,
   matching the supplied banner artwork — and every slide fills it. */
.carousel{position:relative;overflow:hidden;padding:0}
.slides{display:grid;aspect-ratio:2.5/1;min-height:520px}
.slide{
  grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease;
  display:flex;align-items:center;padding:0;min-width:0
}
.slide.on{opacity:1;visibility:visible}
.slide > .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;width:100%}
.cdots{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:5}
.cdots button{
  width:32px;height:4px;border:0;border-radius:2px;background:var(--line);cursor:pointer;
  padding:0;transition:.25s
}
.cdots button.on{background:var(--acc);width:48px}
.carr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);cursor:pointer;font-size:17px;
  display:grid;place-items:center;transition:.2s
}
.carr:hover{border-color:var(--acc);background:var(--acc-soft)}
.carr.prev{left:18px}
.carr.next{right:18px}


@media(max-width:1040px){
  .subnav{top:76px}
  .slides{aspect-ratio:auto;min-height:470px}
  .slide{padding:52px 0 66px}
  .slide > .wrap{grid-template-columns:1fr;gap:30px}
  .carr{display:none}
  section[id],div[id].band{scroll-margin-top:130px}
}

/* ---------------- hardware / appliance cards ---------------- */
.hw{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hwcard{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;transition:.2s;box-shadow:0 2px 8px -5px var(--shade)}
.hwcard:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 18px 40px -22px var(--shade)}
.hwshot{
  aspect-ratio:16/9;background:linear-gradient(150deg,var(--shot1),var(--shot2));
  display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line)
}
.hwshot .unit{width:72%;height:44%;border-radius:6px;background:linear-gradient(180deg,var(--shot1),var(--shot2))}
.hwshot .rack{
  width:74%;border-radius:7px;border:1px solid var(--line2);
  background:linear-gradient(180deg,var(--shot1),var(--shot2));padding:10px 12px;display:grid;gap:7px
}
.hwshot .rack i{display:block;height:6px;border-radius:3px;background:var(--line2)}
.hwshot .rack i:first-child{background:var(--acc);width:40%}
.hwbody{padding:24px}
.hwbody .model{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--acc3);font-weight:700;margin-bottom:8px}
.hwbody h3{font-size:20px;letter-spacing:-.5px;margin-bottom:8px}
.hwbody p{color:var(--mut);font-size:14.3px;margin-bottom:16px}
.hwspec{display:grid;gap:7px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:16px}
.hwspec div{display:flex;justify-content:space-between;gap:12px;font-size:13.2px}
.hwspec span{color:var(--mut)}
.hwspec b{color:var(--txt);font-weight:600;text-align:right}

/* placeholder warning strip — delete with the dummy content */
.placeholder{
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;
  padding:14px 18px;color:var(--warn-txt);font-size:13.5px;margin-bottom:28px
}
.placeholder b{color:var(--warn-txt)}

@media(max-width:1040px){ .hw{grid-template-columns:1fr} }


/* ==========================================================================
   DARK THEME
   Add class="theme-dark" to <html> in src/_includes/layout.njk to switch the
   whole site. Nothing else changes — every rule reads these tokens.
   ========================================================================== */
.theme-dark{
  --bg:#041730;
  --bg2:#062341;
  --panel:#082B4E;
  --panel2:#0C3760;
  --deep:#020E1D;
  --deep2:#06213F;
  --line:#14406F;
  --line2:#1d5590;

  --txt:#eaf1fa;
  --mut:#9bb0c9;
  --ontxt:#ffffff;
  --onmut:#9bb0c9;

  --acc:#3B93E0;
  --acc-h:#5AA8EC;
  --onacc:#06213F;
  --acc2:#7EC8EE;
  --acc3:#A9DCF5;
  --acc-soft:rgba(59,147,224,.16);
  --acc-line:rgba(126,200,238,.32);

  --glow1:rgba(59,147,224,.24);
  --glow2:rgba(28,90,160,.30);
  --gridline:rgba(126,200,238,.08);
  --shot1:#0F3A66;
  --shot2:#061F3A;
  --shade:rgba(0,0,0,.8);

  --warn-bg:#4a2a00;--warn-line:#8a5200;--warn-txt:#ffd9a0;
}
.theme-dark .card,.theme-dark .hwcard,.theme-dark .ind{box-shadow:none}
.theme-dark .card:hover{box-shadow:none}
.theme-dark h1 em,
.theme-dark .stat b,
.theme-dark .chip b{color:var(--acc3)}

/* ---------------- image hero slides -------------------------------------
   The supplied Tarang banners carry their own headline text baked into the
   artwork. So on desktop the image IS the message and we overlay nothing but
   the buttons. At phone width that baked text is far too small to read, so
   below 900px the image drops back to a darkened backdrop and real HTML text
   takes over. Both sets of words are kept in sync by hand — if you edit the
   banner artwork, edit .bfall too. */
.slide.img{padding:0;position:relative;display:block}
.slide.img .shot{
  width:100%;height:100%;
  background-size:cover;background-position:center;
  background-image:var(--shot-lg)
}
.slide.img .over{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  /* the artwork is busy right down to the bottom edge, so the button row
     needs its own ground to sit on */
  background:linear-gradient(to top,rgba(6,33,63,.80) 0%,rgba(6,33,63,.45) 16%,rgba(6,33,63,0) 38%)
}
.slide.img .btn.ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(6,33,63,.25)}
.slide.img .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}
.slide.img .over .wrap{width:100%;display:block;padding-bottom:46px}
.slide.img .bfall{display:none}
.slide.img .cta{margin:0}

@media(max-width:900px){
  .slide.img .shot{
    min-height:100%;
    background-image:linear-gradient(105deg,rgba(6,33,63,.93) 0%,rgba(6,33,63,.86) 46%,rgba(6,33,63,.55) 100%),var(--shot-sm);
    background-position:center right
  }
  .slide.img .over{align-items:center}
  .slide.img .over .wrap{padding-bottom:0}
  .slide.img .bfall{display:block;margin-bottom:26px}
  .slide.img .bfall h1{color:var(--ontxt);font-size:33px}
  .slide.img .bfall h1 em{color:var(--acc3)}
  .slide.img .bfall p{color:var(--onmut);font-size:16px;margin-top:14px;max-width:520px}
  .slide.img .btn.ghost{border-color:rgba(255,255,255,.4);color:#fff}
}