/* ===========================================================================
   smartiegate.com — one stylesheet for every page.

   Rebuilt on the site's own design language: the deep navy, the Indian
   number-plate section headings, the animated ANPR stage. The stage SVG is
   Mohsin's, unchanged; what was missing was the CSS that makes it move, and
   that is written here to match the recording he sent — car in, scan, plate
   read, tick, arm up, car through.

   No framework, no icon library, no analytics. A gate company whose website
   takes eight seconds to open on a site-office connection is an argument
   against itself.
   =========================================================================== */

:root{
  --bg:#0E1B2E; --bg-2:#122238; --alt:#0B1626; --card:#152740; --line:#22304A;
  --ink:#EDF3FB; --muted:#9FB2CC; --dim:#B9C7DC;
  --brand:#3B82F6; --brand-2:#1B57D6; --ok:#0F7A3D; --plate-blue:#1B57D6;
  --btn-blue:#2563EB;   /* 5.17:1 with white — the brand blue is 3.68 */
  --r:14px; --ease:cubic-bezier(.22,.68,.32,1); --wrap:1140px;
  --font-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16.5px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%; display:block}
a{color:var(--brand)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; line-height:1.15}
h1{font-size:clamp(32px,4.6vw,50px); font-weight:780}
h2{font-size:clamp(25px,3.3vw,36px); font-weight:750}
h3{font-size:18.5px; font-weight:700; letter-spacing:-.01em}
p{margin:10px 0 0}
.lede{color:var(--dim); font-size:clamp(16px,1.8vw,18.5px); max-width:64ch}
.hint{color:var(--muted); font-size:14.5px}
section{padding:clamp(54px,6.5vw,88px) 0}
section.alt{background:var(--alt)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:10px; z-index:99; background:#fff; color:#0E1B2E;
  padding:10px 15px; border-radius:8px}

/* ---------------- the Indian number plate heading ----------------
   The thing that makes this site look like it was made in India rather than
   translated into rupees. Blue IND panel with the hologram dot, white field,
   blue outer line — the plate on every car outside the gate. */
.plate{display:inline-flex; align-items:stretch; border:2px solid var(--plate-blue);
  border-radius:7px; overflow:hidden; background:#fff; line-height:1;
  box-shadow:0 2px 0 rgba(0,0,0,.28); margin-bottom:16px}
.plate .ind{background:var(--plate-blue); color:#fff; font:700 9px/1 var(--mono);
  letter-spacing:.06em; padding:6px 5px 5px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px}
.plate .ind b{font-size:6px; line-height:1; opacity:.9}
.plate .num{color:#0B1220; font:700 12.5px/1 var(--mono); letter-spacing:.14em;
  padding:8px 13px; display:flex; align-items:center; white-space:nowrap}
.secHead{margin-bottom:34px; max-width:70ch}
.secHead h2{margin-top:2px}
.secHead .lede{margin-top:12px}
.center{text-align:center} .center .lede{margin-inline:auto}
.center .secHead{margin-inline:auto}


/* =====================================================================
   THE LIGHT BANDS

   The site was navy from top to bottom. A page with one value all the way
   down has no rhythm and nothing to rest the eye on — and on a phone in
   daylight, which is where a committee member will actually read it, an
   all-dark page is the harder one to read.

   So it alternates: the gate is at night, the argument is in daylight.
   Every colour below was checked for contrast rather than guessed; the
   body text on the light bands sits at about 12:1 against white, well past
   the 4.5:1 the standard asks for.
   ===================================================================== */
:root{
  --lt:#FFFFFF;          /* the white band */
  --lt-2:#F2F7FD;        /* the pale blue band */
  --lt-line:#D8E4F3;
  --lt-ink:#0C1A2E;      /* headings on light */
  --lt-body:#3A4A61;     /* body on light — 8.6:1 on white */
  --lt-muted:#4E6081;
}
section.light{background:var(--lt); color:var(--lt-ink)}
section.lightAlt{background:var(--lt-2); color:var(--lt-ink);
  border-block:1px solid var(--lt-line)}
section.light h1,section.light h2,section.light h3,section.light h4,
section.lightAlt h1,section.lightAlt h2,section.lightAlt h3,section.lightAlt h4{color:var(--lt-ink)}
section.light p,section.lightAlt p{color:var(--lt-body)}
section.light .lede,section.lightAlt .lede{color:var(--lt-body)}
section.light .hint,section.lightAlt .hint{color:var(--lt-muted)}
section.light a:not(.btn),section.lightAlt a:not(.btn){color:var(--brand-2)}

/* cards, steps, plans and tables invert with the band */
section.light .card,section.lightAlt .card{background:var(--lt);
  border-color:var(--lt-line); color:var(--lt-ink)}
section.lightAlt .card{background:var(--lt)}
section.light .card:hover,section.lightAlt .card:hover{border-color:#9FC0E8;
  box-shadow:0 14px 34px rgba(12,26,46,.10)}
section.light .card p,section.lightAlt .card p{color:var(--lt-body)}
section.light .step,section.lightAlt .step{border-top-color:var(--lt-line)}
section.light .step p,section.lightAlt .step p{color:var(--lt-body)}
section.light .plan,section.lightAlt .plan{background:var(--lt);
  border-color:var(--lt-line); color:var(--lt-ink)}
section.light .plan ul,section.lightAlt .plan ul{color:var(--lt-body)}
section.light .plan ul li::before,section.lightAlt .plan ul li::before{color:#0F7A3D}
section.light .plan .price small,section.lightAlt .plan .price small{color:var(--lt-muted)}
section.light .plan.best,section.lightAlt .plan.best{border-color:var(--brand-2);
  box-shadow:0 14px 40px rgba(27,87,214,.14)}
section.light .plan .tag,section.lightAlt .plan .tag{color:var(--brand-2)}
section.light details,section.lightAlt details{background:var(--lt);
  border-color:var(--lt-line)}
section.light summary,section.lightAlt summary{color:var(--lt-ink)}
section.light details p,section.lightAlt details p{color:var(--lt-body)}
section.light summary::after,section.lightAlt summary::after{color:var(--brand-2)}
section.light table.spec th,section.lightAlt table.spec th{color:var(--lt-muted)}
section.light table.spec td,section.lightAlt table.spec td{color:var(--lt-body)}
section.light table.spec th,section.light table.spec td,
section.lightAlt table.spec th,section.lightAlt table.spec td{border-bottom-color:var(--lt-line)}
section.light .pull,section.lightAlt .pull{background:var(--lt-2); color:var(--lt-body);
  border-left-color:var(--brand-2)}
section.lightAlt .pull{background:var(--lt)}
section.light .pull b,section.lightAlt .pull b{color:var(--lt-muted)}
section.light .pcard,section.lightAlt .pcard{background:var(--lt);
  border-color:var(--lt-line); color:var(--lt-ink)}
section.light .pcard p,section.lightAlt .pcard p{color:var(--lt-body)}
section.light .pcard .tag,section.lightAlt .pcard .tag{color:var(--lt-muted)}
section.light .pcard:hover,section.lightAlt .pcard:hover{border-color:var(--brand-2);
  box-shadow:0 18px 44px rgba(12,26,46,.13)}
section.light svg.ico,section.lightAlt svg.ico{color:var(--brand-2)}
section.light .pmore,section.lightAlt .pmore{color:var(--brand-2)}
section.light .step .n,section.lightAlt .step .n{background:var(--brand-2)}
section.light .btn.ghost,section.lightAlt .btn.ghost{color:var(--brand-2);
  border-color:#B7CDEA; background:transparent}
section.light .btn.ghost:hover,section.lightAlt .btn.ghost:hover{background:#EAF1FC;
  border-color:var(--brand-2)}
section.light .eyebrow,section.lightAlt .eyebrow{color:var(--brand-2)}
/* the demos stay dark on a light band — they are screens, and a screen is lit */
section.light .demo,section.lightAlt .demo{background:#132440; border-color:#22304A;
  color:var(--ink)}
section.light .demo h3,section.lightAlt .demo h3{color:var(--ink)}

/* the plate reads on both; on light it needs its own edge back */
section.light .plate,section.lightAlt .plate{box-shadow:0 1px 0 rgba(12,26,46,.14)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  /* --btn-blue, not --brand: white on #3B82F6 is 3.68:1, under AA. */
  background:var(--btn-blue); color:#fff; text-decoration:none; font-weight:650; font-size:15.5px;
  padding:13px 22px; border-radius:11px; border:1px solid var(--btn-blue); cursor:pointer;
  transition:background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease)}
.btn:hover{background:#1D4FD8; border-color:#1D4FD8; transform:translateY(-1px); box-shadow:0 8px 22px rgba(59,130,246,.3)}
.btn.lg{padding:15px 26px; font-size:16.5px}
.btn.ghost{background:transparent; color:#fff; border-color:#33496B}
.btn.ghost:hover{background:rgba(255,255,255,.07); border-color:#4E6A94}
.btn.light{background:#fff; color:#0E1B2E; border-color:#fff}
.btn.light:hover{background:#E8EEF7; border-color:#E8EEF7}

/* ---------------- header ---------------- */
header{position:sticky; top:0; z-index:60; background:rgba(14,27,46,.9);
  backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line)}
header .bar{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; white-space:nowrap}
.wm{font-family:var(--font-display); font-weight:800; letter-spacing:.08em; font-size:15px;
  color:var(--ink); display:inline-flex; align-items:center; gap:.34em; line-height:1}
.wm i{font-style:normal; color:var(--brand)}
.wm .pro{background:var(--btn-blue); color:#fff; font-size:.62em; letter-spacing:.1em;
  padding:.22em .42em; border-radius:.35em; margin-left:.18em}
header nav{display:flex; gap:3px; margin-left:auto; align-items:center}
header nav a{color:#C6D4E8; text-decoration:none; font-size:14.5px; font-weight:550;
  padding:8px 12px; border-radius:8px; white-space:nowrap;
  transition:color .15s, background .15s}
header nav a:hover,header nav a[aria-current]{color:#fff; background:rgba(255,255,255,.08)}
#navToggle{display:none; margin-left:auto; background:none; border:1px solid #33496B;
  color:#fff; border-radius:9px; padding:8px 11px; font-size:16px; cursor:pointer; line-height:1}
@media (max-width:980px){
  header nav{position:fixed; inset:64px 0 auto 0; background:var(--bg); flex-direction:column;
    align-items:stretch; gap:0; padding:10px 14px 18px; border-bottom:1px solid var(--line);
    display:none; max-height:calc(100vh - 64px); overflow:auto}
  header nav.open{display:flex}
  header nav a{padding:13px 10px; font-size:16px}
  header nav a.keep{margin-top:8px; text-align:center}
  #navToggle{display:block}
}

/* =====================================================================
   THE HERO STAGE — Mohsin's SVG, animated.

   The drawing is his, unchanged. This is the missing half: the timing that
   makes it read as a gate rather than a diagram. One 9-second loop —

     0.0s  car rolls in from the left
     2.2s  it stops at the line; the camera's cone falls on the plate
     2.8s  the readout appears: PLATE READ · 0.9s
     3.6s  the green tick lands
     4.0s  the arm lifts
     4.8s  the car drives on through and off to the right
     7.6s  the arm comes back down, the readout clears, and it begins again

   Stopped entirely for prefers-reduced-motion: this loops forever, and for
   some people looping motion causes real nausea.
   ===================================================================== */
.stage{position:relative; width:100%}
.stage svg{width:100%; height:auto; overflow:visible}

#car{animation:sgCar 9s var(--ease) infinite}
@keyframes sgCar{
  0%         {transform:translateX(-330px)}
  24%,50%    {transform:translateX(0)}        /* stopped at the line */
  78%        {transform:translateX(420px)}    /* away through the gate */
  78.01%,100%{transform:translateX(-330px)}   /* reset off-frame, unseen */
}
/* The arm is symmetric about its hinge in the drawing — a visible bar to the
   right, an invisible one of equal length to the left — so the centre of the
   group IS the pivot. transform-origin:center is then unambiguous in every
   browser. That counterweight bar is the reason this works. */
#boom{transform-origin:center; transform-box:fill-box; animation:sgBoom 9s var(--ease) infinite}
@keyframes sgBoom{
  0%,42%   {transform:rotate(0deg)}
  52%,80%  {transform:rotate(-72deg)}         /* up, clear of the lane */
  90%,100% {transform:rotate(0deg)}
}
#scan{opacity:0; animation:sgScan 9s var(--ease) infinite}
@keyframes sgScan{0%,22%{opacity:0} 27%,44%{opacity:1} 50%,100%{opacity:0}}
#readout{opacity:0; animation:sgRead 9s var(--ease) infinite}
@keyframes sgRead{
  0%,29%   {opacity:0; transform:translate(16px,0px)}
  34%,84%  {opacity:1; transform:translate(16px,8px)}
  92%,100% {opacity:0; transform:translate(16px,0px)}
}
#tick{opacity:0; transform-origin:center; transform-box:fill-box;
  animation:sgTick 9s var(--ease) infinite}
@keyframes sgTick{0%,38%{opacity:0; transform:scale(.6)}
  44%,84%{opacity:1; transform:scale(1)} 92%,100%{opacity:0; transform:scale(.6)}}
#lens{animation:sgLens 9s var(--ease) infinite}
@keyframes sgLens{0%,22%{filter:none} 30%,44%{filter:drop-shadow(0 0 6px #5AA9FF)}
  52%,100%{filter:none}}
#rec{animation:sgRec 2.4s steps(1) infinite}
@keyframes sgRec{0%,50%{opacity:1} 51%,100%{opacity:.15}}

@media (prefers-reduced-motion:reduce){
  #car,#boom,#scan,#readout,#tick,#lens,#rec{animation:none}
  #boom{transform:rotate(-72deg)}
  #scan,#readout,#tick{opacity:1}
  #readout{transform:translate(16px,8px)}
}

.hero{padding:clamp(40px,5.5vw,72px) 0 clamp(46px,6vw,78px);
  background:radial-gradient(120% 90% at 78% 8%,#16294A 0%,var(--bg) 58%)}
.hero .cols > *{min-width:0}
.hero .cols{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,4.5vw,54px);
  align-items:center}
@media (max-width:940px){ .hero .cols{grid-template-columns:1fr; gap:32px} }
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:14px}
.hero h1{margin-bottom:16px}
.heroActs{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.heroNote{color:var(--muted); font-size:14.5px; margin-top:16px}

/* ---------------- the fact strip ---------------- */
.strip{background:var(--alt); border-block:1px solid var(--line); padding:18px 0}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  font-size:14.5px; color:var(--dim)}
.strip b{color:var(--ink)}
@media (max-width:900px){ .strip .wrap{grid-template-columns:repeat(2,1fr); gap:14px} }
@media (max-width:480px){ .strip .wrap{grid-template-columns:1fr} }

/* ---------------- cards ---------------- */
.grid{display:grid; gap:18px}
.grid > *{min-width:0}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .g3,.g2{grid-template-columns:1fr} }
@media (max-width:560px){ .g4{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  transition:border-color .18s, transform .18s var(--ease), box-shadow .18s var(--ease)}
.card:hover{border-color:#33496B; transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card .ico{font-size:24px; line-height:1; display:block; margin-bottom:11px}
svg.ico{width:26px; height:26px; color:var(--brand); stroke-width:1.6; flex:none}
.phero svg.ico{width:34px; height:34px; margin-bottom:12px}
.card p{color:var(--muted); font-size:15px}

/* ---------------- numbered steps ---------------- */
.step{display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start;
  padding:22px 0; border-top:1px solid var(--line)}
.step:first-of-type{border-top:0}
.step .n{width:42px; height:42px; border-radius:50%; background:var(--btn-blue); color:#fff;
  display:grid; place-items:center; font-weight:750; font-size:17px}
.step p{color:var(--muted); font-size:15.5px}

/* ---------------- plans ---------------- */
.plan{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px;
  display:flex; flex-direction:column}
.plan.best{border-color:var(--brand); box-shadow:0 14px 40px rgba(59,130,246,.16)}
.plan .tag{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); min-height:16px}
.plan .price{font-size:31px; font-weight:770; letter-spacing:-.03em; margin:8px 0 0}
.plan .price small{font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0}
.plan ul{list-style:none; margin:16px 0 20px; padding:0; display:grid; gap:8px;
  font-size:14.5px; color:var(--dim)}
.plan ul li{padding-left:22px; position:relative}
.plan ul li::before{content:"✓"; position:absolute; left:0; color:#35C77A; font-weight:800}
.plan .btn{margin-top:auto}

/* ---------------- FAQ ---------------- */
details{border:1px solid var(--line); border-radius:11px; background:var(--card); overflow:hidden}
details + details{margin-top:10px}
summary{cursor:pointer; padding:16px 19px; font-weight:620; font-size:16px; list-style:none;
  display:flex; justify-content:space-between; gap:14px; align-items:center; color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--brand); font-size:21px; font-weight:400; line-height:1}
details[open] summary::after{content:"−"}
details p{padding:0 19px 18px; color:var(--muted); font-size:15.5px; margin:0}

/* ---------------- closing CTA ---------------- */
.cta{background:linear-gradient(150deg,#1B3A6B,#122238); text-align:center}
.cta .lede{margin-inline:auto; color:#CBD9EC}

/* ---------------- footer ---------------- */
footer{background:var(--alt); border-top:1px solid var(--line); color:var(--muted);
  padding:52px 0 26px; font-size:14.5px}
footer h4{color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:12px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:#fff; text-decoration:underline}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.fcols{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:34px}
@media (max-width:820px){ .fcols{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .fcols{grid-template-columns:1fr} }
.fbot{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px}

/* ---------------- reveal on scroll ---------------- */
[data-reveal]{opacity:0; transform:translateY(20px);
  transition:opacity .65s var(--ease), transform .65s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
}

/* =====================================================================
   THE VIDEO — click to load, never before.

   A YouTube iframe on page load pulls in about a megabyte of player and
   starts tracking every visitor before they have decided to watch anything.
   ===================================================================== */
.vidWrap{display:grid; grid-template-columns:minmax(0,290px) 1fr; gap:clamp(24px,5vw,50px);
  align-items:center}
@media (max-width:860px){ .vidWrap{grid-template-columns:1fr; gap:26px} }
.phone{position:relative; width:100%; max-width:290px; margin:0 auto; aspect-ratio:9/19.5;
  border-radius:34px; padding:9px; background:linear-gradient(160deg,#26364F,#0C1220);
  box-shadow:0 28px 66px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08)}
.phone::before{content:""; position:absolute; left:50%; top:17px; transform:translateX(-50%);
  width:76px; height:6px; border-radius:99px; background:rgba(255,255,255,.16); z-index:3}
.screen{position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden;
  background:linear-gradient(168deg,#16294A,#0B1626); display:block; border:0; padding:0;
  cursor:pointer}
.screen img{width:100%; height:100%; object-fit:cover}
.screen iframe{width:100%; height:100%; border:0; display:block}
.playdot{position:absolute; inset:0; display:grid; place-items:center;
  background-color:rgba(8,12,21,.62);
  background-image:linear-gradient(180deg,rgba(8,12,21,.22),rgba(8,12,21,.74)); z-index:2;
  transition:background .18s var(--ease)}
.screen:hover .playdot{background:linear-gradient(180deg,rgba(8,12,21,.04),rgba(8,12,21,.4))}
.playdot i{width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.95);
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .18s var(--ease)}
.screen:hover .playdot i{transform:scale(1.07)}
.playdot i::after{content:""; width:0; height:0; margin-left:5px;
  border-left:19px solid #0E1B2E; border-top:11px solid transparent;
  border-bottom:11px solid transparent}
.playdot b{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#fff;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ---------------- product cards & pages ---------------- */
.pcards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:940px){ .pcards{grid-template-columns:1fr} }
.pcard{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px;
  transition:border-color .2s, transform .2s var(--ease), box-shadow .2s var(--ease)}
.pcard:hover{border-color:var(--brand); transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.pcard svg.ico{width:32px; height:32px; color:var(--brand); margin-bottom:12px; stroke-width:1.6}
.pcard .tag{color:var(--muted); font-size:13.5px; margin-top:4px}
.pcard p{color:var(--muted); font-size:15px; flex:1}
.pmore{margin-top:14px; color:var(--brand-2); font-weight:650; font-size:15px;
  display:inline-flex; gap:7px; align-items:center}
.pcard:hover .pmore span{transform:translateX(3px)}
.pmore span{transition:transform .18s var(--ease)}
.crumb{font-size:13.5px; color:var(--muted); margin-bottom:14px}
.crumb a{color:var(--dim); text-decoration:none}
.crumb a:hover{color:#fff; text-decoration:underline}
table.spec{width:100%; border-collapse:collapse; font-size:15px}
table.spec th,table.spec td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--dim)}
table.spec th{color:var(--muted); font-weight:600; width:38%}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
.pull{border-left:3px solid var(--brand); padding:16px 20px; background:var(--card);
  border-radius:11px; font-size:15.5px; color:var(--dim)}
.pull b{display:block; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px}
.phero{padding:clamp(38px,5vw,64px) 0 clamp(42px,5.5vw,70px);
  background:radial-gradient(120% 90% at 78% 8%,#16294A 0%,var(--bg) 58%)}
.pheroGrid > *{min-width:0}
.pheroGrid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(26px,4.5vw,52px);
  align-items:center}
@media (max-width:900px){ .pheroGrid{grid-template-columns:1fr; gap:30px} }
.phero h1{font-size:clamp(29px,4.2vw,44px); margin:8px 0 14px}

/* ---------------- product-page demos ---------------- */
.demo{border-radius:16px; padding:24px; background:var(--card);
  border:1px solid var(--line); box-shadow:0 22px 54px rgba(0,0,0,.4)}
.demoCap{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:var(--muted); margin-bottom:15px}
.appr{display:grid; gap:11px}
.apprCard{display:flex; gap:12px; align-items:center; padding:13px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:12px; animation:apprIn 9s var(--ease) infinite}
.apprFace{width:44px; height:44px; border-radius:11px; flex:0 0 44px; position:relative;
  background:linear-gradient(150deg,#33507E,#1B2942)}
.apprFace::after{content:""; position:absolute; left:50%; top:10px; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.42)}
.apprFace::before{content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:25px; height:13px; border-radius:13px 13px 0 0; background:rgba(255,255,255,.42)}
.apprWho b{display:block; font-size:14.5px} .apprWho span{font-size:12.5px; color:var(--muted)}
@keyframes apprIn{0%,4%{opacity:0; transform:translateY(9px)} 10%,100%{opacity:1; transform:none}}
.apprBtns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.apprBtns div{text-align:center; padding:11px; border-radius:10px; font-size:13.5px;
  font-weight:650; border:1px solid var(--line); color:var(--muted)}
.apprBtns .yes{background:var(--btn-blue); border-color:var(--btn-blue); color:#fff;
  animation:apprTap 9s var(--ease) infinite}
@keyframes apprTap{0%,26%{transform:none; box-shadow:none}
  32%{transform:scale(.96); box-shadow:0 0 0 6px rgba(59,130,246,.28)} 40%,100%{transform:none}}
.apprDone{text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#35C77A; opacity:0; animation:apprDone 9s var(--ease) infinite}
@keyframes apprDone{0%,38%{opacity:0} 46%,88%{opacity:1} 96%,100%{opacity:0}}

.shots{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
@media (max-width:420px){ .shots{grid-template-columns:repeat(3,1fr)} }
.shot{aspect-ratio:1; border-radius:10px; background:var(--bg-2); border:1px solid var(--line);
  display:grid; place-items:center; position:relative; font-size:9.5px; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; color:var(--muted); text-align:center; padding:4px}
.shot::after{content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  background:var(--ok); color:#fff; font-size:22px; border-radius:9px; opacity:0;
  animation:shotTick 9s var(--ease) infinite}
.shot:nth-child(1)::after{animation-delay:.3s} .shot:nth-child(2)::after{animation-delay:.9s}
.shot:nth-child(3)::after{animation-delay:1.5s} .shot:nth-child(4)::after{animation-delay:2.1s}
.shot:nth-child(5)::after{animation-delay:2.7s} .shot:nth-child(6)::after{animation-delay:3.3s}
.shot:nth-child(7)::after{animation-delay:3.9s}
@keyframes shotTick{0%{opacity:0} 6%,86%{opacity:1} 94%,100%{opacity:0}}
.shotDone{margin-top:13px; padding:11px; border-radius:10px; text-align:center; font-size:12.5px;
  font-weight:700; background:rgba(15,122,61,.18); border:1px solid rgba(53,199,122,.4);
  color:#35C77A; opacity:0; animation:shotDone 9s var(--ease) infinite}
@keyframes shotDone{0%,50%{opacity:0} 58%,86%{opacity:1} 94%,100%{opacity:0}}

.meter{text-align:center}
.mPlate{font:700 20px/1 var(--mono); letter-spacing:.1em; padding:11px 14px; border-radius:8px;
  background:#fff; color:#0B1220; display:inline-block; border:2px solid var(--plate-blue)}
.mRow{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:15px}
.mBox{padding:13px; border-radius:11px; background:var(--bg-2); border:1px solid var(--line)}
.mBox span{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:6px}
.mBox b{font-size:21px; font-weight:750; letter-spacing:-.02em}
.mFee{color:#35C77A}
.mClock b::after{content:"00:00"; animation:mClock 9s steps(1) infinite}
@keyframes mClock{0%{content:"00:00"} 14%{content:"00:38"} 28%{content:"01:24"}
  42%{content:"02:10"} 56%{content:"02:57"} 70%,100%{content:"03:12"}}
.mFee b::after{content:"—"; animation:mFee 9s steps(1) infinite}
@keyframes mFee{0%,66%{content:"—"} 72%,100%{content:"₹120"}}
.mBar{margin-top:15px; height:9px; border-radius:99px; background:rgba(255,255,255,.09);
  overflow:hidden}
.mBar i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#3B82F6,#1B57D6); width:22%;
  animation:mBar 9s var(--ease) infinite}
@keyframes mBar{0%{width:22%} 60%{width:78%} 74%,100%{width:64%}}
.mCap{margin-top:9px; font-size:12px; color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .apprCard,.apprBtns .yes,.apprDone,.shot::after,.shotDone,
  .mClock b::after,.mFee b::after,.mBar i{animation:none}
  .apprCard,.apprDone,.shotDone{opacity:1; transform:none}
  .shot::after{opacity:1}
}