/* ══════════════════════════════════════════════════════════════
   KIVA LUMINAI — kivabot.net
   Aesthetic: engineering datasheet / technical drawing
   Display: Archivo (variable width)  ·  Body: IBM Plex Sans
   Labels:  IBM Plex Mono            ·  Accent: the robot's own amber light bar
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #0A0A0B;
  --bg-2:      #0E0F12;
  --bg-3:      #131519;
  --line:      rgba(255,255,255,.085);
  --line-2:    rgba(255,255,255,.14);

  --fg:        #E9EAEE;
  --fg-2:      #A9AFBB;
  --fg-3:      #7A818E;

  --accent:     #F5A524;
  --accent-dim: #B8791A;
  --accent-2:   #D93B3B;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --disp: "Archivo", var(--sans);

  --wrap: 1240px;
  --pad:  clamp(20px, 5vw, 64px);
  --r:    14px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; overflow-x:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* fine engineering grid over the whole page */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/56px 100%;
  mask-image:linear-gradient(180deg, #000, rgba(0,0,0,.55));
}

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{background-position:0 0}      16%{background-position:-24px -34px}
  33%{background-position:-52px 26px}   50%{background-position:34px -22px}
  66%{background-position:-18px 44px}   83%{background-position:26px 18px}
}

main, .foot{ position:relative; z-index:2; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

img, svg, video{ max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }
strong{ font-weight:600; color:#fff; }
em{ font-style:normal; }

::selection{ background:var(--accent); color:#0A0A0B; }

/* ─────────────  NAV  ───────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:28px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.nav.is-stuck{
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0; }
.nav__mark{ width:26px; height:26px; flex:none; }
.mk-shell{ fill:#E1E3E8; }
.mk-pod{ fill:#9AA0AC; }
.mk-screen{ fill:#080A0E; }
.mk-eye{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; }
.mk-mouth{ fill:var(--accent); }
.nav__brand:hover .mk-eye{ animation:blinkMark .5s var(--ease); }
@keyframes blinkMark{ 50%{ transform:scaleY(.2); transform-origin:center } }

.nav__word{
  font-family:var(--disp);
  font-variation-settings:"wdth" 108;
  font-weight:600; font-size:15px; letter-spacing:.02em;
  white-space:nowrap; color:var(--fg);
}
.nav__word em{ font-style:normal; font-weight:700; color:var(--accent); }
.nav__links{ display:flex; gap:22px; }
.nav__links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-2);
  padding-block:6px; position:relative; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .3s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ right:0; }

.nav__cta{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:999px; padding:8px 16px;
  display:inline-flex; gap:7px; align-items:center;
  transition:border-color .25s, color .25s, background .25s;
}
.nav__cta:hover{ border-color:var(--accent); color:var(--accent); background:rgba(245,165,36,.07); }
.nav__cta span{ transition:transform .25s var(--ease); }
.nav__cta:hover span{ transform:translateX(3px); }

.nav__toggle{
  display:none; width:38px; height:34px; background:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:9px; padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav__toggle span{ display:block; width:16px; height:1.4px; background:var(--fg); transition:transform .3s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

/* ─────────────  HERO  ───────────── */
.hero{
  position:relative; overflow:hidden;
  min-height:min(94vh, 900px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:clamp(88px,12vh,132px);
}
.hero__media{ position:absolute; inset:0; margin:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:64% 52%;
  /* The entrance animation must never gate visibility: a background tab pauses
     CSS animations mid-frame, which would strand the image at opacity 0. It
     only eases the scale, so a paused animation still shows the photo. */
  animation:heroIn 1.6s var(--ease);
}
@keyframes heroIn{ from{ transform:scale(1.06) } to{ transform:none } }
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(96deg, #0A0A0B 6%, rgba(10,10,11,.94) 30%, rgba(10,10,11,.55) 52%,
                    rgba(10,10,11,.12) 74%, transparent 90%),
    linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.15) 22%,
                    rgba(10,10,11,.1) 58%, #0A0A0B 98%);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(40px,7vw,90px) var(--pad) clamp(34px,4.5vw,58px);
}
.hero__copy{ max-width:min(560px, 52vw); }

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-2); display:flex; align-items:center; gap:9px; margin:0 0 24px;
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(245,165,36,.55); animation:pulse 2.6s infinite;
}
@keyframes pulse{ 70%{box-shadow:0 0 0 9px rgba(245,165,36,0)} 100%{box-shadow:0 0 0 0 rgba(245,165,36,0)} }

.hero__title{ margin:0 0 24px; font-family:var(--disp); line-height:.86; }
.hero__title .l1{
  display:block; font-size:clamp(50px,7.4vw,104px); font-weight:800;
  width:max-content; max-width:none;
  font-variation-settings:"wdth" 122; letter-spacing:-.035em;
  background:linear-gradient(178deg,#fff 20%,#AEB3BD 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 40px rgba(0,0,0,.5);
}
.hero__title .l2{
  display:block; font-size:clamp(20px,2.7vw,38px); font-weight:400;
  font-variation-settings:"wdth" 100; letter-spacing:.04em; color:var(--fg-2);
  margin-top:12px;
}
.hero__title .l2 em{ color:var(--accent); font-weight:600; margin-left:.45em; position:relative; }
.hero__title .l2 em::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.hero__lede{ margin:0 0 30px; max-width:50ch; color:#C2C7D1; font-size:clamp(15px,1.1vw,17px); }

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  transition:transform .22s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.btn--primary{ background:var(--accent); color:#1A1205; font-weight:600; }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(245,165,36,.7); }
.btn--ghost{
  border-color:rgba(255,255,255,.24); color:var(--fg);
  background:rgba(10,10,11,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:var(--fg-2); background:rgba(255,255,255,.09); transform:translateY(-2px); }

.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0;
  background:var(--line); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hero__stats > div{ background:rgba(10,10,11,.72); padding:16px 14px; }
.hero__stats dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:5px;
}
.hero__stats dd{
  margin:0; font-family:var(--disp); font-variation-settings:"wdth" 108;
  font-weight:600; font-size:clamp(17px,1.7vw,22px); color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.hero__stats .num{ color:var(--accent); }

/* ── ticker ── */
.ticker{
  border-block:1px solid var(--line); overflow:hidden;
  background:linear-gradient(90deg,rgba(245,165,36,.04),transparent 30%,transparent 70%,rgba(217,59,59,.035));
  padding-block:11px; margin-top:8px;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker__t{
  display:flex; gap:0; width:max-content; animation:slide 46s linear infinite;
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:var(--fg-3);
  white-space:nowrap;
}
.ticker__t span{ padding-inline:22px; }
.ticker__t i{ color:var(--accent); opacity:.5; font-style:normal; font-size:7px; align-self:center; }
@keyframes slide{ to{transform:translateX(-50%)} }

/* ─────────────  SECTION CHROME  ───────────── */
.sect{ padding-block:clamp(76px,10vw,140px); position:relative; }
.sect + .sect{ border-top:1px solid var(--line); }

.sect__head{ margin-bottom:clamp(36px,5vw,64px); max-width:820px; }
.sect__num{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--accent); border:1px solid rgba(245,165,36,.45); border-radius:4px;
  background:rgba(245,165,36,.07); padding:3px 9px; margin-bottom:18px;
}
.sect__title{
  margin:0; font-family:var(--disp); font-weight:700;
  font-variation-settings:"wdth" 112; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(31px,4.6vw,58px);
}
.sect__sub{ margin:18px 0 0; color:var(--fg-2); max-width:62ch; font-size:clamp(14.5px,1.05vw,16.5px); }

/* grid items must be allowed to shrink below their content (min-width:auto blows out tracks) */
.hw > *, .adv > *, .aud > *, .sensors > *, .hero__stats > *, .compare > *,
.ov > *, .design > *, .sys > *, .foot__in > *, .foot__nav > *,
.fn__row > *, .news__i a > *, .hero__copy > *{ min-width:0; }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s } .reveal[data-d="2"]{ transition-delay:.2s }
.reveal[data-d="3"]{ transition-delay:.3s } .reveal[data-d="4"]{ transition-delay:.4s }

/* ─────────────  01 OVERVIEW  ───────────── */
.ov{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:start; }
.ov__lead{
  margin:0; font-family:var(--disp); font-variation-settings:"wdth" 100; font-weight:400;
  font-size:clamp(18px,1.85vw,26px); line-height:1.45; color:#D6D8DE; letter-spacing:-.005em;
}
.ov__lead strong{ color:var(--accent); font-weight:600; }
.ov__side{ border-left:1px solid var(--line); padding-left:clamp(20px,2.4vw,34px); }
.ov__side p{ margin:0 0 16px; color:var(--fg-2); font-size:15px; }
.ov__side em{ color:var(--accent); font-weight:500; }
.ov__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:22px 0 0; }
.ov__tags li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--fg-3);
}

/* ─────────────  02 HARDWARE  ───────────── */
.hw__intro{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(24px,4vw,56px); align-items:end;
}
.hw__intro .sect__head{ margin-bottom:0; }
.plate{
  margin:0;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--bg-2);
}
.plate img{ display:block; width:100%; height:auto; }
.plate figcaption{
  padding:13px 16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; line-height:1.6; color:var(--fg-3);
  letter-spacing:.03em;
}
.plate__ix{
  color:var(--accent); letter-spacing:.14em; margin-right:8px;
}
.hw{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:clamp(34px,4.5vw,58px); }
.hw__card{
  background:linear-gradient(168deg,var(--bg-2),rgba(14,15,18,.35));
  border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px); position:relative; overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.hw__card::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,165,36,.5),transparent);
  transform:translateX(-100%); transition:transform .9s var(--ease);
}
.hw__card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.hw__card:hover::before{ transform:translateX(100%); }
.hw__card--wide{ grid-column:1 / -1; }
.hw__card header{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.hw__ix{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em; }
.hw__card h3{
  margin:0; font-family:var(--disp); font-weight:600; font-variation-settings:"wdth" 106;
  font-size:clamp(18px,1.6vw,22px); letter-spacing:-.008em;
}
.hw__badge{
  margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2); border:1px solid rgba(217,59,59,.28); border-radius:999px; padding:3px 10px;
}
.hw__card > p{ margin:0 0 20px; color:var(--fg-2); font-size:14.5px; }

.spec{ width:100%; border-collapse:collapse; font-size:13px; }
.spec tr{ border-top:1px solid var(--line); }
.spec tr:first-child{ border-top-color:var(--line-2); }
.spec th{
  text-align:left; font-family:var(--mono); font-weight:400; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--fg-3);
  padding:9px 14px 9px 0; white-space:nowrap; width:1%; vertical-align:top;
}
.spec td{ padding:9px 0; color:var(--fg); font-family:var(--mono); font-size:12.5px; }

.sensors{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.sensors li{
  background:var(--bg); padding:15px 16px; font-size:13.5px; color:var(--fg);
  display:flex; flex-direction:column; gap:6px;
  transition:background .3s;
}
.sensors li:hover{ background:var(--bg-3); }
.sensors li span{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
}

/* ─────────────  03 ADVANTAGES  ───────────── */
.compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2vw,26px);
  align-items:center; margin-bottom:clamp(36px,4vw,56px);
}
.compare__col{ border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; }
.compare__col--old{ opacity:.62; }
.compare__col--new{
  border-color:rgba(245,165,36,.3);
  background:linear-gradient(160deg,rgba(245,165,36,.055),transparent 60%);
}
.compare__tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); display:block; margin-bottom:14px;
}
.compare__col--new .compare__tag{ color:var(--accent); }
.compare__col ul{ list-style:none; padding:0; margin:0; }
.compare__col li{
  padding:7px 0 7px 20px; position:relative; font-size:14px; color:var(--fg-2);
  border-top:1px solid var(--line);
}
.compare__col li:first-child{ border-top:0; }
.compare__col li::before{
  content:"—"; position:absolute; left:0; color:var(--fg-3);
}
.compare__col--new li{ color:var(--fg); }
.compare__col--new li::before{ content:"+"; color:var(--accent); }
.compare__arrow{ color:var(--accent); width:52px; opacity:.6; }
.compare__arrow svg{ width:100%; display:block; }

.adv{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.adv__item{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.2vw,30px);
  background:var(--bg-2); position:relative; overflow:hidden;
  transition:border-color .35s, background .35s, transform .35s var(--ease);
}
.adv__item::after{
  content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,165,36,.16),transparent 70%);
  opacity:0; transition:opacity .45s;
}
.adv__item:hover{ border-color:rgba(245,165,36,.28); background:var(--bg-3); transform:translateY(-3px); }
.adv__item:hover::after{ opacity:1; }
.adv__ico{ width:38px; height:38px; color:var(--accent); margin-bottom:18px; }
.adv__ico svg{ width:100%; height:100%; display:block; }
.adv__item h3{
  margin:0 0 10px; font-family:var(--disp); font-weight:600; font-variation-settings:"wdth" 104;
  font-size:17.5px; letter-spacing:-.005em;
}
.adv__item p{ margin:0; color:var(--fg-2); font-size:14px; }

/* ─────────────  04 FUNCTIONS  ───────────── */
.fn{ border-top:1px solid var(--line); }
.fn__row{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(20px,3.5vw,56px);
  padding-block:clamp(26px,3vw,42px); border-bottom:1px solid var(--line);
  transition:background .4s;
}
.fn__row:hover{ background:rgba(255,255,255,.014); }
.fn__ix span{
  font-family:var(--disp); font-variation-settings:"wdth" 120; font-weight:700;
  font-size:clamp(30px,3.6vw,52px); letter-spacing:-.03em;
  background:linear-gradient(170deg,#575D6B,#2B2E37);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:background .4s;
}
.fn__row:hover .fn__ix span{ background:linear-gradient(170deg,var(--accent),var(--accent-dim)); -webkit-background-clip:text; background-clip:text; }
.fn__body h3{
  margin:0 0 12px; font-family:var(--disp); font-weight:600; font-variation-settings:"wdth" 104;
  font-size:clamp(19px,2vw,27px); letter-spacing:-.012em;
}
.fn__body p{ margin:0; color:var(--fg-2); max-width:66ch; font-size:15px; }
.wake{ color:var(--accent); font-family:var(--mono); font-size:.92em; }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:18px 0 0; }
.chips li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em;
  border:1px solid var(--line-2); border-radius:5px; padding:5px 10px; color:var(--fg-2);
  transition:border-color .25s, color .25s;
}
.fn__row:hover .chips li{ border-color:var(--line-2); color:var(--fg-2); }

.fn__media{
  margin:22px 0 0; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--bg-2); max-width:720px;
}
.fn__media img{
  display:block; width:100%; height:auto;
  transition:transform .7s var(--ease);
}
.fn__row:hover .fn__media img{ transform:scale(1.028); }
.fn__media figcaption{
  padding:11px 16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--fg-3); letter-spacing:.03em;
}

/* ─────────────  05 DESIGN  ───────────── */
/* Two columns while the scale-reference photo is pending; restore the
   three-column form (.72fr 1fr .88fr) when that figure comes back. */
.design{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px); align-items:start;
}
.design__scale{
  margin:0; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--bg-2);
}
.design__scale img{ display:block; width:100%; height:auto; }
.design__scale figcaption{
  padding:12px 15px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--fg-3); letter-spacing:.03em;
}
.design__lead{
  margin:0 0 20px; font-family:var(--disp); font-variation-settings:"wdth" 100;
  font-size:clamp(18px,1.8vw,25px); line-height:1.45; color:#D6D8DE;
}
.design__copy p{ color:var(--fg-2); font-size:15px; margin:0 0 16px; }
.design__note{
  border-left:2px solid var(--accent); padding-left:16px; color:var(--fg-2) !important;
  font-size:13.5px !important;
}
.box{ border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); overflow:hidden; }
.box__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015);
}
.box__kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.box__count{ font-family:var(--mono); font-size:11px; color:var(--fg-3); }
.box__list{ list-style:none; margin:0; padding:0; }
.box__list li{
  display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-top:1px solid var(--line); font-size:14.5px; transition:background .25s, padding-left .25s var(--ease);
}
.box__list li:first-child{ border-top:0; }
.box__list li:hover{ background:rgba(255,255,255,.02); padding-left:28px; }
.box__n{ font-family:var(--mono); font-size:10.5px; color:var(--fg-3); letter-spacing:.1em; }
.box__foot{
  display:flex; align-items:center; gap:9px; padding:14px 22px;
  border-top:1px solid var(--line); background:rgba(217,59,59,.035);
  font-family:var(--mono); font-size:11px; color:var(--fg-3); letter-spacing:.03em;
}
.box__foot svg{ width:15px; height:15px; color:var(--accent-2); flex:none; }

/* ─────────────  06 AUDIENCE  ───────────── */
.aud{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.aud__card{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.2vw,30px);
  position:relative; background:linear-gradient(172deg,var(--bg-2),transparent 75%);
  transition:border-color .35s, transform .35s var(--ease);
}
.aud__card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.aud__card--wide{ grid-column:span 2; }
.aud__k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--accent);
  display:block; margin-bottom:14px;
}
.aud__card h3{
  margin:0 0 10px; font-family:var(--disp); font-weight:600; font-variation-settings:"wdth" 108;
  font-size:clamp(17px,1.55vw,21px); letter-spacing:-.008em;
}
.aud__card p{ margin:0; color:var(--fg-2); font-size:14px; }
.aud__code{
  display:block; margin-top:18px; font-family:var(--mono); font-size:11.5px; color:var(--accent-2);
  background:rgba(217,59,59,.055); border:1px solid rgba(217,59,59,.16);
  border-radius:7px; padding:11px 14px; overflow-x:auto; white-space:nowrap;
}

/* ─────────────  07 SYSTEM  ───────────── */
.sect--sys{ background:linear-gradient(180deg,transparent,rgba(245,165,36,.03),transparent); }
.sys{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,72px); align-items:start; }
.sys__r p{ margin:0 0 24px; color:var(--fg-2); font-size:clamp(15px,1.2vw,17.5px); }
.sys__pills{ display:flex; flex-wrap:wrap; gap:9px; }
.sys__pills span{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--line-2); border-radius:999px; padding:8px 15px; color:var(--fg-2);
  transition:border-color .25s, color .25s, background .25s;
}
.sys__pills span:hover{ border-color:var(--accent); color:var(--accent); background:rgba(245,165,36,.06); }

/* ─────────────  08 NEWS  ───────────── */
.news{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.news__i{ border-bottom:1px solid var(--line); }
.news__i a{
  display:grid; grid-template-columns:200px 1fr 30px; gap:clamp(14px,2.5vw,34px);
  align-items:center; padding:22px 4px; transition:padding .35s var(--ease), background .35s;
}
.news__i a:hover{ padding-inline:16px 4px; background:rgba(255,255,255,.016); }
.news__src{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--fg-3);
  transition:color .3s;
}
.news__i a:hover .news__src{ color:var(--accent); }
.news__i h3{
  margin:0; font-family:var(--sans); font-weight:400; font-size:clamp(15px,1.35vw,18.5px);
  color:var(--fg); line-height:1.42;
}
.news__go{ font-size:16px; color:var(--fg-3); text-align:right; transition:transform .3s var(--ease), color .3s; }
.news__i a:hover .news__go{ transform:translate(3px,-3px); color:var(--accent); }

/* ─────────────  09 UPDATES  ───────────── */
.sect--upd{ text-align:center; }
.upd{ max-width:720px; margin-inline:auto; }
.upd__title{
  margin:14px 0 22px; font-family:var(--disp); font-weight:800; font-variation-settings:"wdth" 118;
  font-size:clamp(36px,6vw,78px); line-height:.92; letter-spacing:-.032em;
  background:linear-gradient(178deg,#fff,#8E939E);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.upd p{ margin:0 auto 12px; color:var(--fg-2); max-width:58ch; font-size:15.5px; }
.upd__stay{
  font-family:var(--mono) !important; color:var(--accent) !important;
  letter-spacing:.2em; text-transform:uppercase; font-size:12px !important; margin-top:22px !important;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── signup ── */
.signup{ margin:30px auto 0; max-width:470px; }
.signup__row{ display:flex; gap:10px; }
.signup__field{ flex:1 1 auto; min-width:0; display:block; }
.signup__field input{
  width:100%; box-sizing:border-box;
  font-family:var(--mono); font-size:13.5px; color:var(--fg);
  background:rgba(255,255,255,.045); border:1px solid var(--line-2);
  border-radius:999px; padding:14px 20px; outline:none;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.signup__field input::placeholder{ color:var(--fg-3); }
.signup__field input:focus{
  border-color:var(--accent); background:rgba(245,165,36,.06);
  box-shadow:0 0 0 3px rgba(245,165,36,.14);
}
.signup__btn{ flex:0 0 auto; padding-inline:24px; cursor:pointer; }
.signup__btn[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:none; }

/* keep the honeypot out of sight and out of the tab order */
.signup__trap{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.signup__note{
  margin:14px auto 0 !important; font-family:var(--mono) !important;
  font-size:11px !important; color:var(--fg-3) !important; letter-spacing:.02em;
}
.signup__msg{
  margin:12px auto 0 !important; min-height:1.2em;
  font-family:var(--mono) !important; font-size:12px !important; letter-spacing:.03em;
}
.signup__msg[data-state="ok"]{ color:var(--accent) !important; }
.signup__msg[data-state="err"]{ color:#FF8A6B !important; }

.upd__bar{
  height:2px; width:min(400px,70%); margin:34px auto 0; background:var(--line); border-radius:2px; overflow:hidden;
}
.upd__bar i{
  display:block; height:100%; width:38%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:load 2.6s var(--ease) infinite;
}
@keyframes load{ 0%{transform:translateX(-110%)} 100%{transform:translateX(370%)} }

/* ─────────────  FOOTER  ───────────── */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:clamp(48px,6vw,76px); }
.foot__in{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); padding-bottom:48px; }
.foot__word{
  font-family:var(--disp); font-variation-settings:"wdth" 106; font-weight:800;
  font-size:clamp(23px,3.1vw,40px); letter-spacing:-.005em; line-height:1.06;
  display:block; margin-bottom:14px; max-width:11ch;
  background:linear-gradient(178deg,#4A4E58,#1E2026);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.foot__word em{ font-style:normal; }
.foot__brand p{ margin:0; color:var(--fg-3); font-size:13.5px; max-width:44ch; }
.foot__nav{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.foot__nav h4{
  margin:0 0 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); font-weight:400;
}
.foot__nav a{ display:block; padding:5px 0; color:var(--fg-2); font-size:14px; transition:color .2s, transform .2s var(--ease); }
.foot__nav a:hover{ color:var(--accent); transform:translateX(3px); }
.foot__base{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-block:22px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; color:var(--fg-3);
}
.foot__spec{ color:rgba(245,165,36,.5); }

/* ─────────────  RESPONSIVE  ───────────── */
@media (max-width:1080px){
  .adv, .aud{ grid-template-columns:repeat(2,1fr); }
  .aud__card--wide{ grid-column:span 2; }
  .sys{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  /* stack it: the robot reads in the upper band, the type sits on solid ground below */
  .hero{ min-height:auto; padding-top:clamp(230px,44vh,350px); }
  .hero__copy{ max-width:none; }
  .hero__media{ bottom:auto; height:min(66vh,620px); }
  .hero__media img{ object-position:78% 34%; }
  .hero__media::after{
    background:
      linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.06) 22%,
                      rgba(10,10,11,.42) 46%, rgba(10,10,11,.95) 66%, #0A0A0B 86%);
  }
  .hero__inner{ padding-top:clamp(18px,4vw,32px); }
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .nav.is-open .nav__links{
    display:flex; position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0;
    background:rgba(10,10,11,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line); padding:8px var(--pad) 18px;
  }
  .nav.is-open .nav__links a{ padding-block:13px; border-top:1px solid var(--line); font-size:13px; }
  .ov, .design, .foot__in{ grid-template-columns:1fr; }
  .hw__intro{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .plate{ max-width:440px; }
  .design__scale{ max-width:420px; margin-inline:auto; }
  .ov__side{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:24px; }
  .hw{ grid-template-columns:1fr; }
  .sensors{ grid-template-columns:repeat(2,1fr); }
  .compare{ grid-template-columns:1fr; }
  .compare__arrow{ transform:rotate(90deg); margin-inline:auto; width:40px; }
  .news__i a{ grid-template-columns:1fr 26px; }
  .news__src{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
  .signup__row{ flex-direction:column; }
  .signup__btn{ width:100%; }
  .adv, .aud{ grid-template-columns:1fr; }
  .aud__card--wide{ grid-column:span 1; }
  .fn__row{ grid-template-columns:1fr; gap:10px; }
  .foot__base{ flex-direction:column; align-items:flex-start; }
}

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

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }