/* =========================================================
   Design tokens
   Change --brand and --brand-2 to re-skin the whole site.
   ========================================================= */
:root{
  --brand:#0a2540;    /* logo navy */
  --brand-2:#17436e;  /* hover */
  --brand-ink:#fff;
  --accent:#c9a227;   /* gold, for small accents only */

  /* The masthead + hero stay navy in both themes, so the white logo
     and the circuit animation always sit on the right background. */
  --navy:#0a2540;
  --navy-2:#061a2e;
  --on-navy:#e9f1f9;
  --on-navy-dim:#8fa6bd;

  --bg:#ffffff;
  --bg-alt:#f4f7f9;
  --surface:#ffffff;
  --text:#14212b;
  --muted:#5a6b78;
  --line:#e2e8ed;
  --shadow:0 1px 2px rgba(20,33,43,.06), 0 8px 24px rgba(20,33,43,.07);

  --wrap:1760px;
  --r:14px;
  --t:.25s cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1419;
    --bg-alt:#111b22;
    --surface:#14202a;
    --text:#e6edf3;
    --muted:#9bb0bf;
    --line:#223240;
    --brand:#d4af37;
    --brand-2:#e3c45c;
    --brand-ink:#0a2540;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0d1419;
  --bg-alt:#111b22;
  --surface:#14202a;
  --text:#e6edf3;
  --muted:#9bb0bf;
  --line:#223240;
  --brand:#d4af37;
  --brand-2:#e3c45c;
  --brand-ink:#0a2540;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

/* ───────────────────────── base ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:112px}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.65 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.18; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:700}
h3{font-size:1.15rem; font-weight:650}
p{margin:0 0 1em}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(16px,4vw,72px)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:99; background:var(--brand);
  color:var(--brand-ink); padding:10px 16px; border-radius:8px}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); margin:0 0 .75rem}

.grad{
  background:linear-gradient(100deg,var(--accent),#f0d98a);
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ───────────────────────── topbar ───────────────────────── */
.topbar{background:var(--navy-2); color:var(--on-navy-dim); font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.07)}
.topbar__in{display:flex; justify-content:space-between; gap:12px;
  align-items:center; min-height:38px; flex-wrap:wrap}
.topbar__tag{font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent)}
.topbar__links{display:flex; gap:18px}
.topbar a{color:var(--on-navy); opacity:.92}
.topbar a:hover{color:var(--accent); text-decoration:none}

/* ───────────────────────── header ───────────────────────── */
.header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--navy) 90%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--t), background var(--t);
}
.header.is-stuck{background:var(--navy); box-shadow:0 8px 28px rgba(0,0,0,.28)}
.header__in{display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:88px}

.brand{display:flex; align-items:center; gap:10px; color:var(--text)}
.brand:hover{text-decoration:none}
.brand__logo{height:54px; width:auto; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
/* The masthead is navy in BOTH themes, so the white logo is always the
   right one. No theme swap here — an earlier version of this file had
   one, and it showed the navy logo on the navy header in light mode. */
.brand__logo--onlight{display:none !important}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  padding:9px 14px; border-radius:9px; font-size:.93rem; font-weight:500;
  color:var(--on-navy); transition:background var(--t), color var(--t)}
.nav a:hover{background:rgba(255,255,255,.09); text-decoration:none}
.nav a.is-active{color:var(--accent)}
.nav__cta{
  background:var(--accent); color:var(--navy)!important; margin-left:8px;
  font-weight:700}
.nav__cta:hover{background:#dfb93f}

.burger{display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.2);
  border-radius:10px; background:rgba(255,255,255,.06); cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px}
.burger span{width:18px; height:2px; background:var(--on-navy); border-radius:2px;
  transition:transform var(--t), opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ───────────────────────── hero ───────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(620px, calc(100svh - 106px), 1000px);
  display:flex; align-items:center;
  padding:clamp(56px,7vw,96px) 0 clamp(72px,8vw,104px);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(32,86,145,.55) 0%, transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--on-navy)}
/* the animated circuit field */
#circuit{position:absolute; inset:0; width:100%; height:100%; z-index:-2;
  pointer-events:none}
.hero__glow{
  position:absolute; inset:-30% -10% auto -10%; height:640px; z-index:-1;
  background:
    radial-gradient(40% 58% at 20% 28%, rgba(201,162,39,.20), transparent 70%),
    radial-gradient(38% 55% at 80% 18%, rgba(61,139,253,.16), transparent 70%);
  filter:blur(26px); pointer-events:none}
/* soft fade into the light section below */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg))}
.hero__in{
  position:relative; z-index:1; width:100%; max-width:none;
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  column-gap:clamp(32px,5vw,88px); row-gap:0}
.hero .eyebrow, .hero h1, .hero__lead, .hero__btns{grid-column:1; max-width:46ch}
.hero h1{max-width:18ch; font-size:clamp(2.3rem,5.2vw,4.4rem)}
.hero__lead{max-width:56ch}
.hero__panel{grid-column:2; grid-row:1 / span 4; justify-self:end; width:min(100%,420px)}
.hero .stats{grid-column:1 / -1; margin-top:clamp(32px,5vw,56px)}
.hero h1{color:#fff; text-wrap:balance}
.hero .eyebrow{color:var(--accent)}
.hero__lead{font-size:clamp(1.02rem,1.9vw,1.2rem); color:var(--on-navy-dim);
  max-width:60ch; margin-bottom:2rem}
.hero__btns{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:3.5rem}

.btn{
  display:inline-block; padding:13px 26px; border-radius:11px;
  font-weight:600; font-size:.96rem; border:1px solid transparent;
  cursor:pointer; transition:transform var(--t), background var(--t),
  border-color var(--t), box-shadow var(--t)}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn--primary{background:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow)}
.btn--primary:hover{background:var(--brand-2)}
.btn--ghost{border-color:var(--line); color:var(--text); background:var(--surface)}
.btn--ghost:hover{border-color:var(--brand); color:var(--brand)}
/* on the navy hero the buttons invert */
.hero .btn--primary{background:var(--accent); color:var(--navy)}
.hero .btn--primary:hover{background:#dfb93f}
.hero .btn--ghost{background:rgba(255,255,255,.06); color:var(--on-navy);
  border-color:rgba(255,255,255,.26); backdrop-filter:blur(6px)}
.hero .btn--ghost:hover{border-color:var(--accent); color:var(--accent)}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,40px); margin:0;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.14)}
.stats dt{font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:800;
  color:var(--accent); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stats dd{margin:2px 0 0; font-size:.85rem; color:var(--on-navy-dim)}

/* ───────────────────────── sections ───────────────────────── */
.section{padding:clamp(60px,7vw,116px) 0}
.section--alt{background:var(--bg-alt)}
.shead{max-width:64ch; margin-bottom:3rem}
.shead__lead{color:var(--muted); margin:0}

.grid{display:grid; gap:clamp(18px,1.6vw,26px)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px 24px;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--brand) 42%,var(--line))}
.card__ico{
  width:54px; height:54px; display:grid; place-items:center; margin-bottom:1.1rem;
  border-radius:15px; position:relative; flex:none;
  background:linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 70%,transparent),
             0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform var(--t), box-shadow var(--t)}
.card__ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent 60%)}
.card__ico svg{width:27px; height:27px; stroke:#fff; stroke-width:1.7;
  fill:none; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1}
.card:hover .card__ico{transform:translateY(-3px) rotate(-4deg);
  box-shadow:0 14px 28px -10px color-mix(in srgb,var(--brand) 85%,transparent),
             0 1px 0 rgba(255,255,255,.4) inset}
.card p{color:var(--muted); font-size:.93rem}

.ticks{list-style:none; margin:1rem 0 0; padding:0; font-size:.88rem}
.ticks li{position:relative; padding-left:22px; margin-bottom:.45rem; color:var(--muted)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em; width:11px; height:6px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg)}

.prod{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:28px 26px;
  transition:transform var(--t), box-shadow var(--t)}
.prod:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.prod p{color:var(--muted); font-size:.93rem}
.tag{display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent);
  padding:5px 11px; border-radius:99px}

.chips{list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0}
.chips li{
  background:var(--surface); border:1px solid var(--line);
  padding:13px 20px; border-radius:99px; font-size:.92rem; font-weight:500;
  transition:border-color var(--t), color var(--t), transform var(--t)}
.chips li:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px)}

.about{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.about p{color:var(--muted)}
.why{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.why li{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:10px;
  padding:16px 20px; font-size:.91rem; color:var(--muted)}
.why strong{display:block; color:var(--text); font-size:.98rem; margin-bottom:3px}

/* ───────────────────────── contact ───────────────────────── */
.contact{display:grid; grid-template-columns:1fr 1.35fr; gap:48px; align-items:start}
.contact h3{margin-top:1.6rem; font-size:.78rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:700}
.contact h3:first-child{margin-top:0}
.contact address{font-style:normal; color:var(--muted); margin-bottom:0}
.contact p{color:var(--muted)}

.people{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.people li{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:10px;
  padding:14px 18px; display:grid; gap:1px;
  transition:border-color var(--t), transform var(--t)}
.people li:hover{transform:translateX(2px);
  border-left-color:var(--accent)}
.people strong{font-size:.98rem; color:var(--text); letter-spacing:-.01em}
.people span{font-size:.78rem; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase; font-weight:600}
.people a{font-size:.95rem; font-weight:600; margin-top:4px;
  font-variant-numeric:tabular-nums}

.form{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:28px; display:grid; gap:16px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form label{display:grid; gap:6px; font-size:.86rem; font-weight:600}
.form input,.form select,.form textarea{
  font:inherit; font-size:.94rem; font-weight:400; color:var(--text);
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; width:100%; transition:border-color var(--t), box-shadow var(--t)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.form textarea{resize:vertical; min-height:110px}
.form .btn{justify-self:start}
.form__note{margin:0; font-size:.86rem; min-height:1.2em; color:var(--muted)}
.form__note.ok{color:#0a7d4b; font-weight:600}
.form__note.err{color:#c0392b; font-weight:600}
.is-invalid{border-color:#c0392b!important}

/* ───────────────────────── footer ───────────────────────── */
.footer{background:var(--bg-alt); border-top:1px solid var(--line);
  padding-top:clamp(40px,6vw,64px); font-size:.9rem}
.footer__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:36px}
.footer__brand{display:block; font-size:1.02rem; margin-bottom:.5rem}
.footer p{color:var(--muted); margin:0}
.footer h4{font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.9rem}
.footer nav{display:flex; flex-direction:column; gap:9px}
.footer nav a{color:var(--text)}
.footer nav a:hover{color:var(--brand)}
.footer__legal{display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; padding-block:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.83rem}
.theme{font:inherit; font-size:.83rem; color:var(--muted); cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:8px; padding:6px 14px;
  transition:border-color var(--t), color var(--t)}
.theme:hover{border-color:var(--brand); color:var(--brand)}

/* ───────────────────────── reveal on scroll ───────────────────────── */
.reveal{opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .footer__in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:flex}
  .nav{
    position:fixed; inset:0 0 auto; top:0; padding:88px 16px 24px;
    flex-direction:column; align-items:stretch; gap:6px;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateY(-100%); transition:transform var(--t);
    max-height:100dvh; overflow-y:auto}
  .nav.is-open{transform:none}
  .nav a{padding:13px 14px; font-size:1rem}
  .nav__cta{margin:6px 0 0; text-align:center}
  .about,.contact{grid-template-columns:1fr; gap:32px}
  .stats{grid-template-columns:repeat(2,1fr); gap:24px}
}
@media (max-width:600px){
  .brand__logo{height:38px}
  .grid--4,.grid--3{grid-template-columns:1fr}
  .form{padding:20px}
  .form .row{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr; gap:28px}
  .topbar__tag{display:none}
  .topbar__in{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;
    transition-duration:.01ms!important}
  .reveal{opacity:1; transform:none}
}

/* ═════════════════════════ motion & new components ═════════════════════════ */

/* ── scroll progress bar ── */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:100;
  background:linear-gradient(90deg,var(--accent),#f0d98a);
  box-shadow:0 0 12px rgba(201,162,39,.6);
  transition:width .08s linear}

/* ── capability marquee ── */
.marquee{
  background:var(--navy-2); border-block:1px solid rgba(255,255,255,.08);
  padding:16px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex; width:max-content;
  animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__row{
  display:flex; align-items:center; gap:14px; list-style:none; margin:0;
  padding:0 7px}
.marquee__row li{
  display:flex; align-items:center; gap:14px; white-space:nowrap;
  font-size:.84rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-navy-dim)}
.marquee__row li::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--accent); opacity:.75}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ── FAQ accordion ── */
.faq-wrap{max-width:980px}
.acc{display:grid; gap:10px}
.acc__item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
  transition:border-color var(--t), box-shadow var(--t)}
.acc__item[open]{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));
  box-shadow:var(--shadow)}
.acc__item summary{
  list-style:none; cursor:pointer; padding:17px 52px 17px 20px;
  font-weight:600; font-size:1rem; position:relative;
  transition:color var(--t)}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary:hover{color:var(--brand)}
.acc__item summary::after{
  content:""; position:absolute; right:20px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(45deg); transition:transform var(--t)}
.acc__item[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.acc__body{padding:0 20px 18px; color:var(--muted); font-size:.94rem}
.acc__body p{margin:0}
.acc__item[open] .acc__body{animation:accIn .32s ease both}
@keyframes accIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ── card spotlight: a soft glow follows the cursor ── */
.card, .prod{position:relative; overflow:hidden}
.card::before, .prod::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--brand) 11%,transparent), transparent 65%);
  transition:opacity var(--t)}
.card:hover::before, .prod:hover::before{opacity:1}
.card > *, .prod > *{position:relative}

/* ── float the hero content slightly on scroll ── */
.hero__in{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .progress{display:none}
  .acc__item[open] .acc__body{animation:none}
}

/* ═════════════════════════ glossy cards & stronger motion ═════════════════════════ */

/* ── glass / glossy card treatment ── */
.card, .prod, .acc__item, .form, .people li, .why li{
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface) 86%, transparent),
      color-mix(in srgb, var(--surface) 99%, transparent));
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 10px 30px -14px rgba(10,37,64,.30);
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .prod,
:root[data-theme="dark"] .acc__item, :root[data-theme="dark"] .form,
:root[data-theme="dark"] .people li, :root[data-theme="dark"] .why li{
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
             0 12px 34px -16px rgba(0,0,0,.8)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .prod,
  :root:not([data-theme="light"]) .acc__item, :root:not([data-theme="light"]) .form,
  :root:not([data-theme="light"]) .people li, :root:not([data-theme="light"]) .why li{
    box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
               0 12px 34px -16px rgba(0,0,0,.8)}
}

/* the gloss sweep across the top of each card */
.card::after, .prod::after{
  content:""; position:absolute; inset:0 0 auto; height:46%;
  pointer-events:none; border-radius:var(--r) var(--r) 40% 40% / var(--r) var(--r) 100% 100%;
  background:linear-gradient(to bottom, rgba(255,255,255,.38), rgba(255,255,255,0));
  opacity:.7; transition:opacity var(--t)}
:root[data-theme="dark"] .card::after, :root[data-theme="dark"] .prod::after{
  background:linear-gradient(to bottom, rgba(255,255,255,.07), rgba(255,255,255,0))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card::after,
  :root:not([data-theme="light"]) .prod::after{
    background:linear-gradient(to bottom, rgba(255,255,255,.07), rgba(255,255,255,0))}
}
.card:hover::after, .prod:hover::after{opacity:1}

/* a light streak that sweeps across on hover */
.card .sheen, .prod .sheen{
  position:absolute; top:0; left:-60%; width:45%; height:100%;
  pointer-events:none; z-index:2; transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent,
             rgba(255,255,255,.42), transparent);
  transition:left .7s cubic-bezier(.25,.8,.3,1)}
.card:hover .sheen, .prod:hover .sheen{left:120%}

/* ── 3D tilt ── */
.tilt-wrap{perspective:900px}
.card, .prod{
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow var(--t), border-color var(--t)}
.card:hover, .prod:hover{
  border-color:color-mix(in srgb,var(--brand) 50%,var(--line));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 26px 54px -22px rgba(10,37,64,.5)}

/* ── hero headline word reveal ── */
.word{display:inline-block; opacity:0; filter:blur(10px);
  transform:translateY(26px) rotateX(-40deg); transform-origin:bottom;
  animation:wordIn .85s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes wordIn{to{opacity:1; filter:blur(0); transform:none}}

/* ── scroll cue ── */
.scrollcue{
  position:absolute; left:50%; bottom:22px; z-index:2;
  translate:-50% 0; display:grid; place-items:center; gap:7px;
  color:var(--on-navy-dim); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; pointer-events:none}
.scrollcue__mouse{
  width:22px; height:34px; border:1.5px solid rgba(255,255,255,.4);
  border-radius:12px; position:relative}
.scrollcue__mouse::after{
  content:""; position:absolute; left:50%; top:7px; translate:-50% 0;
  width:3px; height:6px; border-radius:2px; background:var(--accent);
  animation:wheel 1.7s ease-in-out infinite}
@keyframes wheel{0%{opacity:0; transform:translateY(0)}
  30%{opacity:1} 70%{opacity:1; transform:translateY(11px)}
  100%{opacity:0; transform:translateY(13px)}}

/* ── button shine + ripple ── */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 20%,
             rgba(255,255,255,.55) 42%, transparent 62%);
  translate:-120% 0; transition:translate .65s ease}
.btn--primary:hover::before{translate:120% 0}
.ripple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:3;
  background:rgba(255,255,255,.55); transform:scale(0);
  animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(2.6); opacity:0}}

/* ── stat glow ── */
.stats dt{text-shadow:0 0 26px rgba(201,162,39,.45)}

/* ── section headings get an underline that draws in ── */
.shead h2{position:relative; display:inline-block; padding-bottom:12px}
.shead h2::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transition:width .9s cubic-bezier(.2,.8,.25,1) .15s}
.reveal.in .shead h2::after, .shead.in h2::after{width:72px}

/* ── floating WhatsApp ── */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25d366; color:#fff; box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform var(--t), box-shadow var(--t)}
.wa:hover{transform:scale(1.08); text-decoration:none;
  box-shadow:0 14px 34px rgba(37,211,102,.6)}
.wa svg{width:28px; height:28px; fill:currentColor}
.wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25d366; animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1); opacity:.7}
  100%{transform:scale(1.65); opacity:0}}

@media (prefers-reduced-motion:reduce){
  .word{animation:none; opacity:1; filter:none; transform:none}
  .scrollcue__mouse::after, .wa::after{animation:none}
  .card .sheen, .prod .sheen{display:none}
  .shead h2::after{transition:none; width:72px}
}

/* ═════════════════════════ distribution diagram ═════════════════════════ */
.twin{position:relative; overflow:hidden; background:var(--navy); color:var(--on-navy)}
.twin__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 20% 10%, rgba(61,139,253,.18), transparent 65%),
    radial-gradient(50% 60% at 85% 80%, rgba(201,162,39,.14), transparent 65%),
    linear-gradient(170deg,var(--navy),var(--navy-2));
  }
.twin .wrap{position:relative; z-index:1}
.twin h2{color:#fff}
.twin .shead__lead{color:var(--on-navy-dim)}
.twin .shead h2::after{background:linear-gradient(90deg,var(--accent),#f0d98a)}

.twin__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:center}
.twin__viz{display:grid; place-items:center}
.sld{width:100%; max-width:560px; height:auto; overflow:visible}

.sld__box{fill:#12304d; stroke:rgba(255,255,255,.26); stroke-width:1.5}
.sld__box--hl{fill:#16406a; stroke:rgba(201,162,39,.7); stroke-width:1.8}
.sld__t{fill:#fff; font-size:13px; font-weight:700; text-anchor:middle;
  letter-spacing:.06em}
.sld__s{fill:#8fa6bd; font-size:10px; text-anchor:middle; letter-spacing:.04em}
.sld__s--bus{text-anchor:start; fill:var(--accent); font-weight:700;
  letter-spacing:.14em}
.sld__bus{stroke:var(--accent); stroke-width:5; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(201,162,39,.55))}

/* cables: dashes march along them like current */
.cab{fill:none; stroke:rgba(140,190,250,.75); stroke-width:2.2;
  stroke-linecap:round; stroke-dasharray:8 10;
  animation:flow 1.4s linear infinite}
.cab--b{animation-duration:2.2s; stroke:rgba(140,190,250,.4)}
.cab--main{stroke:var(--accent); stroke-width:3; animation-duration:1.1s}
.cab--f{stroke:rgba(201,162,39,.7); stroke-width:2.4; animation-duration:1.8s}
@keyframes flow{to{stroke-dashoffset:-36}}

.sld__earth path{stroke:rgba(255,255,255,.4); stroke-width:2;
  stroke-linecap:round; fill:none}

/* dim everything except the stage being pointed at */
.twin__grid.focusing .nd, .twin__grid.focusing .cab,
.twin__grid.focusing .sld__bus{opacity:.2; transition:opacity .35s ease}
.twin__grid.focusing .nd.lit, .twin__grid.focusing .cab.lit,
.twin__grid.focusing .sld__bus.lit{opacity:1}
.nd, .cab, .sld__bus{transition:opacity .35s ease}

/* telemetry tiles */
.twin__read{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.tele{
  position:relative; display:grid; align-items:center; gap:14px;
  grid-template-columns:auto 1fr auto; padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
  cursor:default; overflow:hidden;
  transition:transform var(--t), border-color var(--t), background var(--t)}
.tele:hover{transform:translateX(5px); border-color:rgba(201,162,39,.6);
  background:rgba(255,255,255,.09)}
.tele__dot{width:9px; height:9px; border-radius:50%; background:#3ddc84;
  box-shadow:0 0 0 0 rgba(61,220,132,.65); animation:beat 2.1s ease-out infinite}
@keyframes beat{70%{box-shadow:0 0 0 11px rgba(61,220,132,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.tele h3{margin:0; font-size:.98rem; color:#fff}
.tele p{margin:1px 0 0; font-size:.78rem; color:var(--on-navy-dim)}
.tele__val{font-size:1.5rem; font-weight:800; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap}
.tele__val i{font-size:.72rem; font-style:normal; font-weight:600;
  color:var(--on-navy-dim); margin-left:3px}
.spark{position:absolute; inset:auto 0 0; width:100%; height:26px; opacity:.5}
.spark polyline{fill:none; stroke:var(--accent); stroke-width:1.6;
  vector-effect:non-scaling-stroke}

@media (max-width:900px){
  .twin__grid{grid-template-columns:1fr}
  .sld{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cab,.tele__dot{animation:none}
}

/* ═════════════════════════ hero status panel ═════════════════════════ */
.hpanel{
  border-radius:18px; padding:20px 22px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
             0 28px 60px -28px rgba(0,0,0,.75)}
.hpanel__top{display:flex; justify-content:space-between; align-items:center;
  padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.hpanel__live{display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-navy)}
.hpanel__live i{width:8px; height:8px; border-radius:50%; background:#3ddc84;
  box-shadow:0 0 0 0 rgba(61,220,132,.7); animation:beat 2.1s ease-out infinite}
.hpanel__clock{font-size:.78rem; color:var(--on-navy-dim);
  font-variant-numeric:tabular-nums; letter-spacing:.06em}

.hpanel__rows{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.hpanel__rows li{display:grid; gap:7px;
  grid-template-columns:1fr auto; align-items:center}
.hpanel__name{font-size:.84rem; color:var(--on-navy-dim)}
.hpanel__num{font-size:.86rem; color:var(--on-navy-dim);
  font-variant-numeric:tabular-nums}
.hpanel__num b{color:var(--accent); font-size:1.02rem; font-weight:800}
.hpanel__bar{grid-column:1 / -1; height:5px; border-radius:3px;
  background:rgba(255,255,255,.12); overflow:hidden}
.hpanel__bar b{display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),#f0d98a);
  box-shadow:0 0 12px rgba(201,162,39,.55);
  transition:width 1.1s cubic-bezier(.4,0,.2,1)}

.hpanel__foot{display:flex; justify-content:space-between; align-items:center;
  margin-top:18px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12); font-size:.74rem}
.hpanel__ok{color:#3ddc84; font-weight:700; letter-spacing:.04em}
.hpanel__note{color:var(--on-navy-dim); opacity:.75;
  letter-spacing:.12em; text-transform:uppercase; font-size:.64rem}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr}
  .hero .eyebrow,.hero h1,.hero__lead,.hero__btns{grid-column:1; max-width:none}
  .hero__panel{grid-column:1; grid-row:auto; justify-self:stretch;
    width:100%; max-width:460px; margin-top:34px}
  .hero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .hpanel__live i{animation:none} }

/* ═════════════════════════ preloader ═════════════════════════ */
.pre{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:linear-gradient(165deg,var(--navy),var(--navy-2));
  transition:opacity .55s ease, visibility .55s ease}
.pre.done{opacity:0; visibility:hidden}
.pre__in{display:grid; justify-items:center; gap:26px}
.pre__mark{width:92px; height:auto; animation:preFloat 2.4s ease-in-out infinite}
@keyframes preFloat{0%,100%{transform:translateY(0) scale(1); opacity:.9}
  50%{transform:translateY(-9px) scale(1.04); opacity:1}}
.pre__bar{display:block; width:168px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.15); overflow:hidden}
.pre__bar b{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),#f0d98a);
  box-shadow:0 0 12px rgba(201,162,39,.7);
  animation:preFill 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes preFill{to{width:100%}}

/* ═════════════════════════ process steps ═════════════════════════ */
.steps{
  list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,1.6vw,24px);
  grid-template-columns:repeat(5,1fr); counter-reset:s}
.step{
  position:relative; padding:28px 22px 22px; border-radius:var(--r);
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--surface) 88%,transparent),
    color-mix(in srgb,var(--surface) 100%,transparent));
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t)}
.step:hover{transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--brand) 50%,var(--line));
  box-shadow:0 22px 44px -22px rgba(10,37,64,.5)}
/* connector line between steps */
.step::after{
  content:""; position:absolute; top:46px; right:-13px; width:14px; height:2px;
  background:linear-gradient(90deg,var(--brand),transparent); opacity:.5}
.step:last-child::after{display:none}
.step__n{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border-radius:11px; font-size:.86rem; font-weight:800; letter-spacing:.02em;
  color:#fff; margin-bottom:14px;
  background:linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand) 75%,transparent)}
.step h3{font-size:1.02rem; margin-bottom:.4rem}
.step p{font-size:.88rem; color:var(--muted); margin-bottom:.9rem}
.step__out{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand);
  background:color-mix(in srgb,var(--brand) 11%,transparent);
  padding:5px 10px; border-radius:99px}

/* ═════════════════════════ section dots ═════════════════════════ */
.dots{
  position:fixed; right:16px; top:50%; translate:0 -50%; z-index:55;
  display:grid; gap:12px; opacity:0; pointer-events:none;
  transition:opacity .4s ease}
.dots.show{opacity:1; pointer-events:auto}
.dots a{
  display:block; width:9px; height:9px; border-radius:50%;
  background:color-mix(in srgb,var(--text) 26%,transparent);
  position:relative; transition:background var(--t), transform var(--t)}
.dots a:hover{transform:scale(1.4); background:var(--brand)}
.dots a.on{background:var(--brand); transform:scale(1.35);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.dots a span{
  position:absolute; right:20px; top:50%; translate:0 -50%;
  white-space:nowrap; font-size:.72rem; font-weight:600;
  background:var(--navy); color:#fff; padding:5px 10px; border-radius:7px;
  opacity:0; pointer-events:none; transition:opacity var(--t), translate var(--t)}
.dots a:hover span{opacity:1; translate:-4px -50%}

/* ═════════════════════════ back to top ═════════════════════════ */
.totop{
  position:fixed; right:18px; bottom:84px; z-index:60;
  width:46px; height:46px; border-radius:13px; cursor:pointer;
  display:grid; place-items:center; color:#fff; border:none;
  background:var(--navy); box-shadow:0 10px 26px rgba(10,37,64,.45);
  opacity:0; translate:0 14px; pointer-events:none;
  transition:opacity var(--t), translate var(--t), background var(--t)}
.totop.show{opacity:1; translate:0; pointer-events:auto}
.totop:hover{background:var(--brand-2)}
.totop svg{width:20px; height:20px}

@media (max-width:1240px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .step::after{display:none}
}
@media (max-width:1100px){ .dots{display:none} }
@media (max-width:700px){ .steps{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .pre__mark{animation:none}
  .pre__bar b{animation:none; width:100%}
}


/* spam-trap field: hidden from people, visible to bots */
.hp{position:absolute!important; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none}