/* ==========================================================
   G7 Jarvis OS Agent — Constellation.
   Built against the Dala reference: pure black, Switzer at
   ultra-light weights, one Electric Iris accent for anything
   pressable, Saffron for the single thing waiting on you.
   No cards, no panels, no shadows — hierarchy comes from
   scale, whitespace and hairlines, and display type rides on
   size and tracking rather than weight.
   ========================================================== */
:root {
  --void: #000000;
  --bone: #ffffff;
  --silver: #bdbdbd;
  --ash: #9a9a9a;
  --iris: #8052ff;
  --iris-lift: #9a72ff;
  --spark: #ffb829;
  --hair: rgba(255,255,255,.14);
  --hair-soft: rgba(255,255,255,.07);
  --r: 24px;
  --gut: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--void); color: var(--bone);
  font-family: Switzer, Inter, system-ui, -apple-system, sans-serif;
  /* 200 is the reference's body weight, and it looked right on short sparse
     lines. This page carries real paragraphs, and at that weight they kept
     reading as unreadable — twice, in two different sections. 300 is still
     light enough to hold the airy feel; the hierarchy was never coming from
     body weight anyway, it comes from scale and tracking on the headings. */
  font-size: 18px; font-weight: 300; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* Scale and tracking carry the hierarchy — never weight. */
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.9vw, 88px); line-height: 1.03; letter-spacing: -.04em; }
h2 { font-size: clamp(32px, 3.9vw, 46px); line-height: 1.1; letter-spacing: -.038em; }
h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
p { margin: 0; }
::selection { background: rgba(128,82,255,.32); }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 4px; }

/* the one small-caps label style, shared by every micro role */
.label, .eyebrow, .nav-links a, .tag, .foot-h, .cmp-head, .step-n, .vs-mark {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  letter-spacing: .6px; text-transform: uppercase;
}

/* ---------- telemetry-HUD hero (#top) ----------
   Replaces the old gradient-wordmark masthead. Scoped entirely to .hud so it
   can freely diverge from the flat, Switzer-only system everywhere else —
   same license the masthead always had. Barlow Condensed/Barlow loaded
   specifically for this section; nowhere else on the page uses them.
   The boot sequence (welcome line + staggered rise) plays on every load,
   by request — no once-per-session gate. */
.hud {
  position: relative; overflow: hidden;
  min-height: 820px; background: #04070b; color: #fff;
  font-family: Barlow, Switzer, system-ui, sans-serif;
}
.hud-frame { position: absolute; inset: 0; max-width: 1280px; margin: 0 auto; }

.hud-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; mix-blend-mode: screen; filter: saturate(.7);
}
.hud-video { animation: hudFadePlate 2s ease-out .6s both; }

/* ---------- drawn HUD panels: ticker, side data columns, bar strip ---------- */
.hud-panels { position: absolute; inset: 0; opacity: 0; }
.hud-panels { animation: hudPanels 1.6s ease-out .5s both; }

.hud-ticker { position: absolute; top: 96px; left: 0; right: 0; height: 22px; border-top: 1px solid rgba(56,214,232,.22); border-bottom: 1px solid rgba(56,214,232,.22); overflow: hidden; }
.hud-ticker-bar {
  position: absolute; top: 8px; left: 0; width: 200%; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(56,214,232,.5) 0 9px, transparent 9px 15px, rgba(124,92,240,.45) 15px 21px, transparent 21px 34px);
  animation: hudTicker 26s linear infinite;
}

.hud-col { position: absolute; top: 140px; display: flex; flex-direction: column; gap: 14px; }
.hud-col-l { left: 24px; width: 210px; }
.hud-col-r { right: 24px; width: 250px; }
.hud-pair { display: flex; gap: 10px; }
.hud-pair .hud-cell { flex: 1; height: 46px !important; }

.hud-cell { border: 1px solid rgba(56,214,232,.2); }
.hud-cell-rows-c { background: linear-gradient(rgba(56,214,232,.03), transparent), repeating-linear-gradient(180deg, rgba(56,214,232,.26) 0 1px, transparent 1px 11px); background-size: auto, 62% 11px; background-repeat: no-repeat, repeat-y; background-position: 0 0, 12px 12px; }
.hud-cell-rows-v { background: repeating-linear-gradient(180deg, rgba(124,92,240,.3) 0 1px, transparent 1px 9px); background-size: 44% 9px; background-repeat: repeat-y; background-position: 12px 12px; }
.hud-cell-grid { background: repeating-linear-gradient(90deg, rgba(56,214,232,.22) 0 4px, transparent 4px 12px); }
.hud-cell-pulse { border-color: rgba(56,214,232,.28); background: rgba(56,214,232,.08); animation: hudCell 4s ease-in-out infinite; }
.hud-cell-rows-c2 { background: repeating-linear-gradient(180deg, rgba(56,214,232,.24) 0 1px, transparent 1px 10px); background-size: 78% 10px; background-repeat: repeat-y; background-position: 12px 14px; }
.hud-cell-cross { background: repeating-linear-gradient(180deg, rgba(56,214,232,.2) 0 1px, transparent 1px 13px), repeating-linear-gradient(90deg, rgba(56,214,232,.14) 0 1px, transparent 1px 44px); background-position: 10px 12px, 10px 12px; }
.hud-cell-violet { border-color: rgba(124,92,240,.28); }
.hud-cell-violet.hud-cell-rows-v { background: repeating-linear-gradient(180deg, rgba(124,92,240,.32) 0 1px, transparent 1px 9px); background-size: 55% 9px; background-repeat: repeat-y; background-position: 12px 12px; }

.hud-bars { position: absolute; bottom: 84px; left: 264px; right: 296px; height: 54px; display: flex; align-items: flex-end; gap: 6px; }
.hud-bars span { flex: 1; background: rgba(56,214,232,.26); animation: hudBar 4s ease-in-out infinite; }
.hud-bars span.v { background: rgba(124,92,240,.3); }
.hud-bars span:nth-child(1) { animation-duration: 3.1s; }
.hud-bars span:nth-child(2) { animation-duration: 3.7s; animation-delay: .3s; }
.hud-bars span:nth-child(3) { animation-duration: 4.3s; animation-delay: .6s; }
.hud-bars span:nth-child(4) { animation-duration: 3.4s; animation-delay: .9s; }
.hud-bars span:nth-child(5) { animation-duration: 4.8s; animation-delay: .2s; }
.hud-bars span:nth-child(6) { animation-duration: 3.9s; animation-delay: .7s; }
.hud-bars span:nth-child(7) { animation-duration: 4.1s; animation-delay: .4s; }
.hud-bars span:nth-child(8) { animation-duration: 3.3s; animation-delay: 1s; }
.hud-bars span:nth-child(9) { animation-duration: 4.6s; animation-delay: .1s; }
.hud-bars span:nth-child(10) { animation-duration: 3.6s; animation-delay: .8s; }

/* ---------- reticle, core glow, vignette, scan ---------- */
.hud-reticle {
  position: absolute; left: 50%; top: 461px; width: 760px; height: 760px;
  transform: translate(-50%,-50%); opacity: 0;
}
.hud-reticle { animation: hudOpen 1.1s cubic-bezier(.2,.85,.2,1) both; }
.hud-spin-cw-60 { transform-origin: 380px 380px; animation: hudSpin 60s linear infinite; }
.hud-spin-ccw-90 { transform-origin: 380px 380px; animation: hudSpinR 90s linear infinite; }
.hud-spin-cw-120 { transform-origin: 380px 380px; animation: hudSpin 120s linear infinite; }

.hud-core { position: absolute; left: 50%; top: 461px; width: 700px; height: 700px; transform: translate(-50%,-50%); opacity: 0; }
.hud-core { animation: hudFade 1.1s ease-out .2s both; }
.hud-core-glow { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,240,.34), rgba(56,214,232,.1) 42%, rgba(4,7,11,0) 70%); animation: hudBreathe 7s ease-in-out infinite; }

.hud-vignette { position: absolute; inset: 0; background: radial-gradient(58% 46% at 50% 56%, rgba(4,7,11,.9) 20%, rgba(4,7,11,.35) 62%, rgba(4,7,11,0) 100%); }
.hud-scan { position: absolute; left: 0; right: 0; height: 160px; background: linear-gradient(180deg, rgba(56,214,232,0), rgba(56,214,232,.045), rgba(56,214,232,0)); animation: hudScan 11s linear 1.2s infinite; }
.hud-bottom-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(7,7,10,0), rgba(7,7,10,.75) 55%, #07070a); }

/* ---------- welcome overlay (boot only) ---------- */
.hud-welcome { position: absolute; left: 0; right: 0; top: 416px; text-align: center; pointer-events: none; }
.hud-welcome-line {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 56px; line-height: 1;
  letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: #eaf9fc;
  text-shadow: 0 0 30px rgba(56,214,232,.6); opacity: 0;
}
.hud-welcome-sub { margin-top: 16px; font-family: "Barlow Condensed", sans-serif; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #7f97a8; opacity: 0; }
.hud-welcome-line { animation: hudWelcome 2.6s ease-out .85s both; }
.hud-welcome-sub { animation: hudWelcomeSub 2.6s ease-out .85s both; }

/* ---------- content column ---------- */
.hud-content { position: absolute; inset: 150px 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 300px; }
.hud-kicker {
  font-family: "Barlow Condensed", sans-serif; font-size: 13px; letter-spacing: .28em;
  text-transform: uppercase; color: #7f97a8; opacity: 0;
}
.hud-kicker { animation: hudRise .6s ease-out 3.5s both; }

.hud-h1 {
  margin: 40px 0 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 78px; line-height: .96; letter-spacing: -.01em; text-wrap: balance; opacity: 0;
}
.hud-h1 { animation: hudRise .7s ease-out 3.6s both; }
.hud-h1 span { color: #b6a4f9; }

.hud-plate {
  position: relative; margin-top: 40px; padding: 26px 56px;
  border: 1px solid rgba(56,214,232,.5);
  background: linear-gradient(180deg, rgba(10,22,34,.82), rgba(4,7,11,.9));
  box-shadow: 0 0 80px rgba(56,214,232,.16), inset 0 0 50px rgba(124,92,240,.14);
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 68px; line-height: 1;
  letter-spacing: .2em; padding-left: calc(56px + .2em); color: #eaf9fc;
  text-shadow: 0 0 24px rgba(56,214,232,.8), 0 0 66px rgba(124,92,240,.5);
  opacity: 0;
}
.hud-plate { animation: hudRise .7s ease-out 3.7s both; }
.hud-mark { position: absolute; color: #38d6e8; font-size: 15px; line-height: 1; }
.hud-mark::before { content: "+"; }
.hud-mark-tl { top: -8px; left: -6px; } .hud-mark-tr { top: -8px; right: -6px; }
.hud-mark-bl { bottom: -8px; left: -6px; } .hud-mark-br { bottom: -8px; right: -6px; }

.hud-body { margin: 20px 0 0; max-width: 700px; font-size: 18px; line-height: 1.6; color: #a9b3bd; text-wrap: pretty; opacity: 0; }
.hud-body { animation: hudRise .7s ease-out 3.8s both; }

.hud-actions { display: flex; gap: 14px; margin-top: 32px; opacity: 0; }
.hud-actions { animation: hudRise .7s ease-out 3.9s both; }
.hud-actions .btn { border-radius: 0; font-family: "Barlow Condensed", sans-serif; letter-spacing: .14em; }

/* ---------- status strip ---------- */
.hud-status {
  position: absolute; bottom: 26px; left: 32px; right: 32px;
  display: flex; justify-content: space-between;
  font-family: "Barlow Condensed", sans-serif; font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  opacity: 0;
}
.hud-status { animation: hudFade .8s ease-out 4.1s both; }
.hud-status-l { display: flex; align-items: center; gap: 9px; color: #7f97a8; }
.hud-status-r { color: #f0b04a; }
.hud-dot { width: 6px; height: 6px; background: #38d6e8; animation: hudBlink 1.8s steps(1,end) infinite; }

@keyframes hudFadePlate { from { opacity: 0 } to { opacity: .34 } }
@keyframes hudPanels { from { opacity: 0 } to { opacity: .55 } }
@keyframes hudTicker { to { transform: translateX(-50%) } }
@keyframes hudCell { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes hudBar { 0%,100% { transform: scaleY(.55); transform-origin: bottom } 50% { transform: scaleY(1); transform-origin: bottom } }
@keyframes hudOpen { from { opacity: 0; transform: translate(-50%,-50%) scale(.32) } 55% { opacity: 1 } to { opacity: .85; transform: translate(-50%,-50%) scale(1) } }
@keyframes hudFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes hudBreathe { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes hudSpin { to { transform: rotate(360deg) } }
@keyframes hudSpinR { to { transform: rotate(-360deg) } }
@keyframes hudScan { from { transform: translateY(-40px) } to { transform: translateY(760px) } }
@keyframes hudWelcome { 0% { opacity: 0; letter-spacing: .58em } 14% { opacity: .62; letter-spacing: .32em } 82% { opacity: .62; letter-spacing: .32em } 100% { opacity: 0; letter-spacing: .28em } }
@keyframes hudWelcomeSub { 0%,12% { opacity: 0 } 24%,82% { opacity: .5 } 100% { opacity: 0 } }
@keyframes hudRise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes hudBlink { 0%,45% { opacity: 1 } 50%,95% { opacity: .15 } }

@media (max-width: 1279px) {
  .hud-h1 { font-size: 64px; }
  .hud-plate { font-size: 54px; padding-left: calc(56px + .2em); }
  .hud-content { padding: 0 15%; }
}
@media (max-width: 1099px) {
  .hud-col { display: none; }
}
@media (max-width: 767px) {
  .hud { min-height: 0; }
  .hud-content { inset: 150px 0 0; padding: 0 24px; }
  .hud-h1 { font-size: 44px; }
  .hud-plate { font-size: 34px; letter-spacing: .14em; padding: 20px 28px; padding-left: calc(28px + .14em); }
  .hud-actions { flex-wrap: wrap; }
  .hud-actions .btn { flex: 1 1 100%; }
  .hud-reticle { width: 110vw; height: 110vw; }
  .hud-core { width: 100vw; height: 100vw; }
  .hud-ticker, .hud-bars, .hud-scan { display: none; }
  .hud-status { font-size: 10px; letter-spacing: .14em; }
}

/* ---------- the particle field, fixed behind everything ---------- */
#field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; user-select: none;
}

/* ---------- nav: a floating glass bar ----------
   Constrained to the content width rather than spanning the viewport, so it
   lines up with the panels below it. The frosted surface replaces the old
   gradient scrim: it does the same job of separating the nav from whatever
   scrolls underneath, but as a deliberate object rather than a fade. */
.nav {
  position: fixed; top: 14px; z-index: 60;
  left: 50%; transform: translateX(-50%);
  width: min(1280px, calc(100% - 28px));
  height: 64px;
  display: flex; align-items: center; gap: 34px;
  padding: 0 14px 0 22px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.brand img { display: block; width: 28px; height: 28px; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
/* Navigation is interactive and sits on glass, which lifts the backdrop
   under it — worth a step brighter than the decorative labels. */
.nav-links a { color: var(--silver); transition: color .2s ease; }
.nav-links a:hover, .nav-links a.on { color: var(--bone); }
.nav .btn { margin-left: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 9999px;
  padding: 15px 22px; font-size: 12px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase;
  background: var(--iris); color: var(--bone); cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--iris-lift); }
.btn.ghost { background: transparent; border-color: var(--hair); }
.btn.ghost:hover { background: transparent; border-color: var(--bone); }

/* ---------- panels: one viewport each, alternating sides ---------- */
.panel { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 132px 0; }
.panel-in { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); display: flex; }
.panel.left  .panel-in { justify-content: flex-start; }
.panel.right .panel-in { justify-content: flex-end; }
.panel.mid   .panel-in { justify-content: center; }
.col { max-width: 560px; }
.col.hero { max-width: 740px; }
.col.wide { max-width: 1000px; }
.panel.mid .col { text-align: center; }

.eyebrow { color: var(--spark); margin-top: 22px; }
.lede { color: var(--bone); font-size: 18px; font-weight: 300; max-width: 46ch; margin-top: 22px; }
.lede.dim { color: var(--silver); }
.panel.mid .lede { margin-left: auto; margin-right: auto; }
.actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.panel.mid .actions { justify-content: center; }
.hint { font-size: 14px; color: var(--ash); }

/* statement panels: big centred type, nothing else */
.statement { font-size: clamp(24px, 2.6vw, 34px); font-weight: 200; line-height: 1.34; letter-spacing: -.025em; max-width: 46ch; margin: 0 auto; }
.statement + .statement { margin-top: 40px; }
.statement b { font-weight: 400; color: var(--spark); }

/* ---------- flow sections for the denser content ---------- */
.band { position: relative; padding: 132px 0; }
.band-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.grid { display: grid; gap: 56px; margin-top: 64px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
/* ---------- cards with an animated border beam ----------
   A conic gradient spun by an animated custom property and masked down to
   the 1px ring, so only the border lights. The same gradient, blurred and
   dropped behind the card's own background, becomes the bleed outside the
   edge — the card's fill hides the inner half, which is what keeps the glow
   outside where it belongs instead of washing the copy.

   @property is what makes this animate at all: without registering the
   angle as an <angle>, a custom property is just a string and the keyframe
   jumps from 0 to 360 instead of sweeping. */
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.item {
  position: relative;
  padding: 26px 24px;
  border-radius: 16px;
  /* Near-opaque on purpose. The bleed behind is only masked from the card's
     interior by this fill, so a 2%-white tint let the whole glow flood
     through and wash the copy. It has to actually be a surface. */
  background: rgba(7,6,13,.94);
  border: 1px solid rgba(255,255,255,.07);
  --beam: var(--iris);
  --beam-hot: #cbb8ff;
}
/* the ones waiting on you burn amber, so the beam carries the same
   handled/held signal the label and heading already do */
.item.held {
  --beam: var(--spark);
  --beam-hot: #ffe6a6;
}

.item::before,
.item::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg,
    transparent 232deg,
    var(--beam) 302deg,
    var(--beam-hot) 334deg,
    transparent 360deg);
  animation: beamSpin 6.5s linear infinite;
}
.item::before {
  inset: 0;
  padding: 1.2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.item::after {
  inset: -2px;
  z-index: -1;
  filter: blur(13px);
  opacity: .55;
}
@keyframes beamSpin { to { --beam-angle: 360deg; } }

/* Nine animated conic gradients, each blurred, is a real compositor cost —
   so they only run while the section is actually on screen. Paused is the
   default; the observer switches them on. */
.item::before, .item::after { animation-play-state: paused; }
#does.beams-on .item::before,
#does.beams-on .item::after { animation-play-state: running; }

/* offset each column, otherwise nine cards pulse in lockstep and it reads
   as one blinking block rather than nine independent things */
.item:nth-child(3n+2)::before, .item:nth-child(3n+2)::after { animation-delay: -2.1s; }
.item:nth-child(3n+3)::before, .item:nth-child(3n+3)::after { animation-delay: -4.3s; }

.item h3 { margin-bottom: 12px; }
.item p { color: var(--silver); }
.item .tag { display: block; color: var(--ash); margin-bottom: 18px; }
.item .tag.held { color: var(--spark); }
.item.held h3 { color: var(--spark); }
.item .icon { margin-bottom: 20px; }

/* the cards carry their own edges now, so the grid no longer needs the
   wide gutters that were doing that job */
#does .grid { gap: 20px; margin-top: 52px; }
.icon { width: 26px; height: 26px; color: var(--iris); display: block; margin-bottom: 22px; }
.icon.held { color: var(--spark); }
.step-n { display: block; color: var(--iris); margin-bottom: 20px; }
.rule { padding-top: 30px; border-top: 1px solid var(--hair); }

/* three pillars on glass — deliberately not the beam cards, so the two
   card treatments stay distinguishable and the beams keep their impact */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.pillar { padding: 30px 26px 32px; }
.pillar .icon { margin-bottom: 22px; }
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--silver); }
/* the specifics under each claim — a step down in size so the lead
   paragraph still reads as the point and these read as the evidence */
.pillar ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pillar li { position: relative; padding-left: 21px; font-size: 16px; line-height: 1.45; color: var(--silver); }
.pillar li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--iris);
}

/* comparison — hairlines only */
/* ---------- frosted glass ----------
   Shared by the comparison table and the FAQ. Two things it buys: the block
   lifts off the background and reads as one object, and because
   backdrop-filter blurs whatever sits behind it, the particle field passing
   underneath turns into soft colour rather than hard specks competing with
   the text. The saturate stops the blurred backdrop going muddy, and the
   inset top hairline is what actually sells it as glass — a lit edge where
   the panel catches light. */
.glass {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
          backdrop-filter: blur(20px) saturate(1.25);
  box-shadow:
    0 28px 70px -24px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.cmp-table { margin-top: 64px; padding: 2px 30px 12px; }
.faq-list  { margin-top: 52px; padding: 4px 32px 8px; }
.faq-list details:last-child { border-bottom: 0; }

.cmp-head, .cmp { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; gap: 28px; padding: 24px 0; }
.cmp-head { color: var(--ash); border-bottom: 1px solid var(--hair); }
.cmp-head .j { color: var(--iris); }
.cmp { border-bottom: 1px solid var(--hair-soft); }
.cmp:last-child { border-bottom: 0; }
/* Body-sized text at weight 200 — the same trap the footer had. These row
   labels get read, not glanced at, so they need the ink. The uppercase 600
   micro-labels elsewhere keep ash on purpose: they already carry enough
   weight, and their dimness is what makes them recede. */
.cmp .k { color: var(--silver); font-weight: 300; }
.cmp .o { color: var(--silver); }

/* the versus beat */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 44px; align-items: center; margin-top: 64px; }
.vs-side { display: flex; align-items: center; gap: 22px; }
.vs-side svg { width: 32px; height: 32px; flex: 0 0 auto; }
.vs-side.risk svg, .vs-side.risk h3 { color: var(--ash); }
.vs-side.safe svg, .vs-side.safe h3 { color: var(--spark); }
.vs-side p { color: var(--ash); font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin-top: 6px; }
.vs-mark { color: var(--ash); }

/* proof steps */
.steps { margin-top: 64px; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--hair-soft); }
.step .step-n { padding-top: 8px; color: var(--ash); margin: 0; }
.step h3 { margin-bottom: 12px; }
.step p { color: var(--silver); }
.step.hit .step-n, .step.hit h3 { color: var(--spark); }
.kicker { font-size: clamp(26px, 3.2vw, 40px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; margin-top: 64px; max-width: 30ch; }
.kicker b { font-weight: 400; color: var(--spark); }

/* faq */
details { border-bottom: 1px solid var(--hair-soft); }
summary { list-style: none; cursor: pointer; padding: 28px 52px 28px 0; position: relative; font-size: 24px; letter-spacing: -.02em; line-height: 1.3; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 26px; color: var(--iris); font-size: 26px; font-weight: 200; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details .a { padding: 0 0 30px; color: var(--silver); line-height: 1.6; max-width: 68ch; }

/* footer */
/* ---------- back to top ----------
   Hidden until you are a screen down, so it never sits over the hero. */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 65;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--bone); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, color .2s ease;
}
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--spark); }
.to-top svg { width: 18px; height: 18px; display: block; }

/* the same glass, closing the page the way the nav opens it */
.foot { padding: 0 var(--gut) 36px; }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 54px 44px 56px; display: flex; flex-wrap: wrap; gap: 40px 80px; align-items: flex-start; }
.foot-col { display: flex; flex-direction: column; gap: 14px; }
/* Ash at weight 200 cleared the contrast floor on paper but read as
   barely-there: hairline strokes lose far more legibility than a contrast
   ratio suggests, and the glass tint lifts the background beneath them.
   Fixed with both a lighter colour and a heavier stroke, not just one. */
.foot-col a { color: var(--silver); font-weight: 300; transition: color .2s ease; }
.foot-col a:hover { color: var(--bone); }
.foot-h { color: var(--bone); margin-bottom: 6px; }
.legal { margin-left: auto; max-width: 34ch; font-size: 14px; font-weight: 300; color: var(--silver); line-height: 1.65; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  :root { --gut: 22px; }
  .nav-links { display: none; }
  .nav { top: 10px; width: calc(100% - 20px); height: 58px; padding: 0 10px 0 16px; }
  .nav .btn { margin-left: auto; }
  .foot { padding: 0 14px 24px; }
  .foot-in { padding: 40px 24px 42px; }
  .panel { min-height: auto; padding: 120px 0; }
  .panel.right .panel-in, .panel.left .panel-in { justify-content: flex-start; }
  .band { padding: 96px 0; }
  .glass { border-radius: 16px; }
  .cmp-table { padding: 4px 18px 10px; margin-top: 44px; }
  .faq-list { padding: 2px 18px 6px; margin-top: 40px; }
  .cmp-head { display: none; }
  .cmp { grid-template-columns: 1fr; gap: 8px; }
  .cmp .k { color: var(--silver); }
  .cmp .o::before { content: "Most AI agents \2014 "; color: var(--ash); }
  .cmp .j::before { content: "Jarvis \2014 "; color: var(--iris); }
  .vs { grid-template-columns: 1fr; gap: 30px; }
  .pillars { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .pillar { padding: 26px 22px 28px; }
  .step { grid-template-columns: 40px 1fr; gap: 18px; }

  /* At 24px each question ran to three lines and the list became a wall */
  summary { font-size: 19px; padding: 22px 40px 22px 0; }
  summary::after { top: 20px; font-size: 22px; }
  details .a { padding-bottom: 24px; }

  /* Tap targets: footer links measured 27px and chips 33px, both under the
     44px guideline. Padding rather than font-size, so the type is unchanged. */
  .foot-col { gap: 4px; }
  .foot-col a { padding: 9px 0; }
  .chip { padding: 15px 16px; }
  .brand { padding: 6px 0; }
}
@media (max-width: 600px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; gap: 44px; }
  .legal { margin-left: 0; }
  .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* the hud boot animates from opacity 0, so with animations off every layer
     must be pinned at its resting state or the hero renders empty */
  .hud-video { opacity: .34 !important; }
  .hud-panels { opacity: .55 !important; }
  .hud-reticle { opacity: .85 !important; transform: translate(-50%,-50%) !important; }
  .hud-core, .hud-kicker, .hud-h1, .hud-plate, .hud-body, .hud-actions, .hud-status { opacity: 1 !important; transform: none !important; }
  .hud-welcome { display: none; }
}