/* Smartie Gate Pro — marketing site
   Palette from the logo: navy, shield blue, and a signal amber used only for
   moments the product records. Nothing else earns a colour. */
:root{
  --navy:#0E1B2E; --navy2:#16283F; --ink:#0A1420;
  --blue:#1B57D6; --blue-l:#3B82F6; --blue-d:#12408F;
  --paper:#FFFFFF; --wash:#F4F7FC; --line:#DCE4F0;
  --text:#0E1726; --muted:#54637C; --amber:#B4740A;
  --plate-face:#FFFFFF; --plate-ink:#111418; --plate-strip:#1B57D6;
  --r:14px; --maxw:1120px;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --plate:'Roboto Mono',ui-monospace,'Courier New',monospace;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.018em;line-height:1.08;margin:0}
h1{font-size:clamp(34px,6.2vw,62px);font-weight:700}
h2{font-size:clamp(26px,3.9vw,40px);font-weight:700}
h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
p{margin:.7em 0}
.lede{font-size:clamp(17px,2.1vw,20px);color:var(--muted);max-width:56ch}

/* ---- the signature: a real Indian number plate ---- */
.plate{display:inline-flex;align-items:stretch;border-radius:5px;overflow:hidden;
  background:var(--plate-face);border:2px solid var(--plate-ink);
  font-family:var(--plate);font-weight:700;letter-spacing:.06em;
  box-shadow:0 1px 0 rgba(0,0,0,.18)}
.plate .ind{background:var(--plate-strip);color:#fff;font-size:8px;line-height:1;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:3px 3px 2px;letter-spacing:.02em}
.plate .ind b{font-size:9px}
.plate .num{color:var(--plate-ink);padding:4px 9px;font-size:15px;white-space:nowrap}
.plate.sm .num{font-size:12px;padding:3px 7px}
.plate.lg .num{font-size:22px;padding:7px 14px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand .wm{font-family:var(--display);font-weight:700;letter-spacing:.02em;font-size:17px;color:var(--navy)}
.brand .wm i{font-style:normal;color:var(--blue)}
.brand .pro{background:var(--blue);color:#fff;font-size:9.5px;padding:2px 5px;border-radius:4px;
  margin-left:3px;letter-spacing:.09em;vertical-align:2px}
nav a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;margin-left:22px}
nav a:hover{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;text-decoration:none;font-weight:650;font-size:15px;
  padding:13px 20px;border-radius:11px;min-height:46px;border:0;cursor:pointer;
  transition:transform .12s var(--ease),background .12s var(--ease)}
.btn:hover{background:var(--blue-d);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--wash);border-color:var(--blue)}
.btn.lg{padding:16px 26px;font-size:16.5px;min-height:52px}
@media(max-width:760px){
  .bar{height:auto;flex-wrap:wrap;padding:10px 0 8px;gap:8px}
  .brand{margin-right:auto}
  nav{order:3;width:100%;display:flex;gap:0;justify-content:space-between;
      border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
  nav a{margin-left:0;font-size:13.5px;padding:8px 4px;min-height:44px;
        display:flex;align-items:center}
  nav a.keep{margin-left:0;padding:9px 14px;min-height:0}
}
@media(max-width:400px){ nav a{font-size:12.5px;letter-spacing:-.01em} }

/* ---- hero ---- */
.hero{background:
    radial-gradient(900px 420px at 78% -8%,rgba(59,130,246,.20),transparent 62%),
    linear-gradient(178deg,var(--navy) 0%,var(--navy2) 100%);
  color:#fff;padding:76px 0 0;overflow:hidden;position:relative}
.hero h1{color:#fff}
.hero .lede{color:#B9C7DC}
.hero .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:900px){.hero .cols{grid-template-columns:1fr;gap:28px}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8FB4F0;margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue-l);border-radius:2px}
.heroActs{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.heroNote{font-size:13.5px;color:#8496AF;margin-bottom:34px}

/* ---- the arrival, played once ----
   The sequence is the product: a car arrives, the camera reads the plate, the
   arm lifts, the car goes through without stopping. Timings are deliberately
   unhurried — the whole point is that nobody had to do anything, and a rushed
   animation reads as frantic rather than effortless. */
.stage{position:relative;height:320px}
@media(max-width:900px){.stage{height:250px}}
.stage svg{width:100%;height:100%;overflow:visible}

/* car: rolls in, waits, then drives through and out */
#car{transform-box:view-box;transform-origin:0 0;transform:translateX(-290px)}
.lift #car{animation:arrive .95s var(--ease) .25s forwards, depart 1.5s var(--ease) 3.5s forwards}
@keyframes arrive{to{transform:translateX(-6px)}}
@keyframes depart{from{transform:translateX(-6px)}to{transform:translateX(500px)}}

/* camera cone: sweeps across the plate while the car is stationary */
#scan{opacity:0;transform-box:view-box;transform-origin:368px 118px}
.lift #scan{animation:sweep 1.25s var(--ease) 1.25s forwards}
@keyframes sweep{
  0%{opacity:0;transform:rotate(6deg)}
  22%{opacity:1}
  70%{opacity:1;transform:rotate(-5deg)}
  100%{opacity:0;transform:rotate(-6deg)}}

/* the plate flashes as it is read */
#plateG{transform-box:view-box;transform-origin:188px 199px}
.lift #plateG{animation:readflash 1s var(--ease) 1.55s}
@keyframes readflash{
  0%,100%{filter:none}
  38%{filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
  52%{filter:drop-shadow(0 0 16px rgba(160,205,255,1)) brightness(1.35)}
  70%{filter:drop-shadow(0 0 8px rgba(90,169,255,.7))}}
/* the lens brightens as it fires */
#lens{transform-box:view-box;transform-origin:367px 115px}
.lift #lens{animation:lensFire 1.1s var(--ease) 1.5s}
@keyframes lensFire{0%,100%{opacity:1}40%{opacity:1;filter:drop-shadow(0 0 10px rgba(90,169,255,.9))}}
/* the verdict tick lands with a small pop */
#tick{transform-box:view-box;transform-origin:196px 44px}
.lift #tick{animation:tickIn .42s var(--ease) 2.55s both}
@keyframes tickIn{0%{transform:scale(.4);opacity:0}62%{transform:scale(1.12)}100%{transform:none;opacity:1}}

/* recording dot on the camera */
.lift #rec{animation:blink 1.1s steps(1) 0s infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.2}}

/* the verdict */
#readout{opacity:0}
.lift #readout{animation:verdict .5s var(--ease) 2.35s forwards}
@keyframes verdict{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* the arm: horizontal, then up. Positive rotation lifts the free end because
   the arm extends LEFT of its pivot and SVG's y-axis points down. */
#boom{transform-box:fill-box;transform-origin:center;transform:rotate(0deg)}
.lift #boom{animation:openarm 1.05s var(--ease) 2.75s forwards}
@keyframes openarm{to{transform:rotate(-74deg)}}

@media (prefers-reduced-motion:reduce){
  .lift #car,.lift #scan,.lift #readout,.lift #boom,.lift #plateG,.lift #rec{animation:none}
  #car{transform:translateX(-6px)}
  #boom{transform:rotate(-74deg)}
  #readout{opacity:1}
  #scan{opacity:.55}
}

/* ---- strip under hero ---- */
.strip{background:var(--ink);color:#fff;padding:16px 0}
.strip .wrap{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;
  font-size:13px;color:#95A6BE;letter-spacing:.03em}
.strip b{color:#fff;font-weight:600}

/* ---- sections ---- */
section{padding:78px 0}
section.alt{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.secHead{max-width:60ch;margin-bottom:38px}
.secHead .plate{margin-bottom:16px}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card h3{margin-bottom:7px}
.card p{color:var(--muted);font-size:15px;margin:0}
.card .ico{font-size:22px;display:block;margin-bottom:12px}
section.alt .card{background:#fff}

/* ---- steps: a real sequence, so numbered ---- */
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step .n{font-family:var(--display);font-size:26px;font-weight:700;color:var(--blue);line-height:1}
.step h3{margin-bottom:5px}
.step p{color:var(--muted);font-size:15.5px;margin:0}

/* ---- plans ---- */
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.plan.best{border:2px solid var(--blue);box-shadow:0 12px 34px rgba(27,87,214,.13)}
.plan .tag{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);margin-bottom:8px;min-height:15px}
.plan .price{font-family:var(--display);font-size:32px;font-weight:700;color:var(--navy);margin:6px 0 2px}
.plan .price small{font-size:13px;font-weight:500;color:var(--muted);font-family:var(--body)}
.plan ul{list-style:none;padding:0;margin:14px 0 20px;font-size:14.5px;color:var(--muted)}
.plan li{padding:5px 0 5px 21px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:6px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.plan .btn{margin-top:auto}

/* ---- faq ---- */
details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:22px;color:var(--blue);line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--muted);font-size:15.5px;max-width:70ch}

/* ---- forms ---- */
label{display:block;font-size:13.5px;font-weight:600;margin:14px 0 5px;color:var(--navy)}
input,textarea,select{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--body);font-size:16px;background:#fff;color:var(--text)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(27,87,214,.14)}
.hint{font-size:13px;color:var(--muted);margin-top:5px}

/* ---- cta ---- */
.cta{background:linear-gradient(178deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta .lede{color:#B9C7DC;margin:0 auto 26px}

/* ---- footer ---- */
footer{background:var(--ink);color:#94A5BD;font-size:14px;padding:46px 0 30px}
footer a{color:#C6D4E8;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:28px}
@media(max-width:700px){.fcols{grid-template-columns:1fr}}
footer h4{font-family:var(--display);color:#fff;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 10px}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:4px 0}
.fbot{border-top:1px solid #22304A;padding-top:18px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:13px}
:focus-visible{outline:2.5px solid var(--blue-l);outline-offset:3px;border-radius:5px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border-radius:8px;z-index:99}

/* team photos, on white so a portrait shot sits cleanly in a card */
.teamPhoto{width:160px;height:160px;object-fit:cover;object-position:center 22%;
  border-radius:14px;border:2px solid var(--line);background:#fff}
.photoSlot{width:160px;height:160px;border-radius:14px;border:2px dashed var(--line);
  background:var(--wash);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:42px;font-weight:700;color:var(--blue);opacity:.75}
/* Client logos are dark marks on transparent backgrounds — on a navy card they
   are invisible, which is why they did not show. A white tile fixes it. */
.logoCard{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:18px 12px;background:#fff;min-height:112px}
.logoCard img{max-width:120px;max-height:46px;width:auto;height:auto;object-fit:contain}
.logoCard span{font-size:12px;color:var(--muted);text-align:center;line-height:1.3}

/* ============================================================================
   MOTION
   ----------------------------------------------------------------------------
   Restrained on purpose. The hero sequence is the one bold moment; everything
   else supports it rather than competing with it.

   The hidden state is scoped to .js, which site.js sets before first paint. If
   that script never loads, or throws on an old browser, every section renders
   normally — content must never depend on an animation having run.
   ========================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js [data-reveal].shown{opacity:1;transform:none}

/* Cards lift very slightly on hover — enough to feel responsive, not enough to
   make a grid of them feel restless. */
.card{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.card:hover{transform:translateY(-2px);border-color:#C3D2EA;box-shadow:0 10px 30px rgba(14,27,46,.09)}
.plan{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.plan:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(27,87,214,.16)}
.step{transition:background .18s var(--ease);border-radius:10px}
.step:hover{background:rgba(27,87,214,.035)}
.logoCard:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}

/* The headline arrives with the page rather than sitting there flatly. */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:heroIn .6s var(--ease) .05s both}
.hero h1{animation:heroIn .7s var(--ease) .14s both}
.hero .lede{animation:heroIn .7s var(--ease) .26s both}
.hero .heroActs{animation:heroIn .7s var(--ease) .38s both}
.hero .heroNote{animation:heroIn .7s var(--ease) .48s both}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .hero .eyebrow,.hero h1,.hero .lede,.hero .heroActs,.hero .heroNote{animation:none}
  .card:hover,.plan:hover,.logoCard:hover{transform:none}
}