/* ============================================================
   NativeFoundation — "Ghost in the Machine"
   Dark machine-space · cyberpunk display · terminal HUD throughout.
   Brand DNA kept: forest green, orange signal, cream ink, JetBrains Mono.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  /* machine atmosphere (overridable by tweaks via body[data-hero]) */
  --hero-1: #0C2A1A;
  --hero-2: #061710;
  --hero-3: #03100A;
  --hero-glow: #FF6B35;
  --hero-node: #F2EFE6;
  --hero-line: rgba(242,239,230,0.34);

  --ink: #F4F1E9;
  --mute: rgba(244,241,233,0.64);
  --faint: rgba(244,241,233,0.40);
  --ghost: rgba(244,241,233,0.26);
  --hair: rgba(244,241,233,0.13);
  --hair-soft: rgba(244,241,233,0.07);
  --panel: rgba(244,241,233,0.035);
  --ring: rgba(244,241,233,0.10);

  --display: "Chakra Petch", "Inter", system-ui, sans-serif;
}
body[data-hero="midnight"] { --hero-1: #1B2440; --hero-2: #0D1430; --hero-3: #070B1C; }
body[data-hero="ink"]      { --hero-1: #22262E; --hero-2: #14171C; --hero-3: #08090C; }

body {
  margin: 0;
  background: var(--hero-3);
  color: var(--mute);
  font-family: var(--nf-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 44px; position: relative; }
@media (max-width: 720px){ .wrap { padding: 0 22px; } }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── fixed ghost machine-space behind everything ──────────── */
#ghost {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(70% 55% at 84% 4%, color-mix(in srgb, var(--hero-glow) 13%, transparent) 0%, transparent 55%),
    radial-gradient(60% 50% at 6% 72%, color-mix(in srgb, var(--hero-1) 80%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--hero-2) 0%, var(--hero-3) 60%, #020a06 100%);
}
body[data-hero="midnight"] #ghost { background:
  radial-gradient(70% 55% at 84% 4%, color-mix(in srgb, var(--hero-glow) 13%, transparent) 0%, transparent 55%),
  radial-gradient(60% 50% at 6% 72%, color-mix(in srgb, var(--hero-1) 80%, transparent) 0%, transparent 60%),
  linear-gradient(180deg, var(--hero-2) 0%, var(--hero-3) 60%, #04060f 100%); }
body[data-hero="ink"] #ghost { background:
  radial-gradient(70% 55% at 84% 4%, color-mix(in srgb, var(--hero-glow) 13%, transparent) 0%, transparent 55%),
  radial-gradient(60% 50% at 6% 72%, color-mix(in srgb, var(--hero-1) 80%, transparent) 0%, transparent 60%),
  linear-gradient(180deg, var(--hero-2) 0%, var(--hero-3) 60%, #050608 100%); }
#ghost .net { position: absolute; right: -10%; top: 18%; width: min(60vw, 720px); aspect-ratio: 1/1; opacity: 0.16; }
#ghost .net svg { width: 100%; height: 100%; overflow: visible; animation: drift 40s ease-in-out infinite; }
#ghost .net2 { position: absolute; left: -16%; bottom: 6%; width: min(50vw, 560px); aspect-ratio: 1/1; opacity: 0.10; }
#ghost .net2 svg { width: 100%; height: 100%; overflow: visible; animation: drift 52s ease-in-out infinite reverse; }
#ghost::after { /* faint scanlines */
  content: ""; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: overlay;
  background: repeating-linear-gradient(180deg, rgba(244,241,233,0.025) 0 1px, transparent 1px 4px);
}
@keyframes drift { 0%,100%{ transform: translate(0,0) rotate(0deg);} 50%{ transform: translate(0,-3%) rotate(3deg);} }

main, .nav, footer { position: relative; z-index: 1; }

/* ── shared type helpers ──────────────────────────────────── */
.ital { color: var(--hero-glow); font-style: normal; }
.cap { text-transform: uppercase; }

/* status pellet / telemetry */
.pellet { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nf-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); }
.pellet .live { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-glow) 28%, transparent); animation: pulse 2.4s ease-in-out infinite; }
.pellet .ok { width: 6px; height: 6px; border-radius: 50%; background: #6FE39B; box-shadow: 0 0 8px rgba(111,227,155,0.6); }
@keyframes pulse { 0%,100%{ opacity: 1; } 50%{ opacity: 0.3; } }

.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--hero-glow); margin-left: 6px; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,50%{ opacity: 1; } 50.01%,100%{ opacity: 0; } }
body[data-motion="off"] .caret, body[data-motion="off"] .pellet .live { animation: none; }

/* ── eyebrow ──────────────────────────────────────────────── */
.eyebrow { font-family: var(--nf-mono); font-size: 11px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; color: var(--faint); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-glow) 25%, transparent); }
.eyebrow--orange { color: color-mix(in srgb, var(--hero-glow) 86%, #fff); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 74px;
  display: flex; align-items: center;
  transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  border-bottom: 1px solid transparent;
}
.nav .wrap { display: flex; align-items: center; gap: 34px; width: 100%; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink); }
.brand .mark { height: 30px; display: grid; place-items: center; }
.brand .mark img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav-links a { font-family: var(--nf-mono); font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mute); padding: 8px 12px; border-radius: var(--nf-rad-sm); transition: background 140ms ease, color 140ms ease; }
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.nav .spacer { flex: 1; }
.nav-cta { font-family: var(--nf-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--nf-rad-sm); background: var(--hero-glow); color: #18120E; box-shadow: 0 2px 14px rgba(255,107,53,0.4); transition: transform 140ms ease, box-shadow 140ms ease; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,107,53,0.5); }
.nav[data-mode="light"] { background: color-mix(in srgb, var(--hero-3) 78%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--hair); }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle { display: none; }
.nav-links .nav-cta { display: none; }

@media (max-width: 880px){
  .nav .wrap { gap: 14px; }

  /* turn the inline link row into a dropdown panel */
  .nav-links {
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 10px 0 14px;
    background: color-mix(in srgb, var(--hero-3) 94%, transparent);
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 20px 44px rgba(0,0,0,0.34);
    display: none;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { font-size: 13px; letter-spacing: 0.6px; padding: 14px 26px; border-radius: 0; color: var(--ink); }
  .nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.06); color: var(--ink); }
  .nav-links .nav-cta { display: inline-flex; align-self: flex-start; margin: 12px 22px 2px; }

  /* the inline desktop CTA is folded into the menu on mobile */
  .nav > .wrap > .nav-cta { display: none; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 40px; padding: 0 9px;
    background: transparent; border: 1px solid var(--hair); border-radius: var(--nf-rad-sm);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 200ms ease, opacity 160ms ease; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce){
  .nav-toggle span { transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; color: var(--ink);
  background:
    radial-gradient(120% 92% at 50% 44%, color-mix(in srgb, var(--hero-glow) 24%, transparent) 0%, transparent 48%),
    linear-gradient(168deg, var(--hero-1) 0%, var(--hero-2) 52%, var(--hero-3) 100%);
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    radial-gradient(140% 120% at 50% 0%, transparent 55%, rgba(0,0,0,0.36) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 32%),
    repeating-linear-gradient(180deg, rgba(244,241,233,0.03) 0 1px, transparent 1px 4px);
}
.hero-status { position: relative; z-index: 6; margin-top: 102px; display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--nf-mono); font-size: 11px; letter-spacing: 2px; color: var(--faint); text-transform: uppercase; }
.hero-status .seg { display: inline-flex; align-items: center; gap: 8px; }
.hero-status .live { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-glow) 30%, transparent); animation: pulse 2.4s ease-in-out infinite; }
.hero-status .div { opacity: 0.35; }
@media (max-width: 720px){ .hero-status { font-size: 9.5px; letter-spacing: 1.2px; flex-wrap: wrap; } .hero-status .seg:nth-child(n+4){ display:none; } }

.hero-body { position: relative; z-index: 6; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding-bottom: 14vh; }
.hero-copy { max-width: 1000px; margin: 0 auto; }
.hero-eyebrow { color: color-mix(in srgb, var(--hero-glow) 88%, #fff); margin-bottom: 24px; justify-content: center; }
.hero h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(46px, 8.4vw, 132px); line-height: 0.92; letter-spacing: -1px;
  margin: 0 0 28px; color: var(--ink); text-wrap: balance;
  text-shadow: 0 2px 50px rgba(0,0,0,0.5);
}
.hero h1 .ital { color: color-mix(in srgb, var(--hero-glow) 92%, #fff); font-style: italic; }
/* brush mode — the accent word is rendered as ASCII block-art */
body[data-net="brush"] .hero h1 .ital.ascii { display: block; color: var(--hero-glow); }
.hero h1 .ascii-art {
  font-family: var(--nf-mono); color: var(--hero-glow); font-style: normal;
  font-size: clamp(7px, 0.92vw, 11px); line-height: 1.05; letter-spacing: 0;
  margin: 10px 0 8px; white-space: pre;
  text-shadow: 0 0 16px rgba(255,107,53,0.42);
}
.hero-sub { font-family: var(--nf-sans); font-size: 17px; line-height: 1.62; max-width: 520px; color: var(--mute); margin: 0 auto 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }

/* field / brush — type steps into the corner, the network is the main event */
body[data-net="field"] .hero-body,
body[data-net="delicate"] .hero-body { align-items: flex-start; text-align: left; padding-bottom: 96px; }
body[data-net="field"] .hero-body .wrap,
body[data-net="delicate"] .hero-body .wrap { width: 100%; }
body[data-net="field"] .hero-copy,
body[data-net="delicate"] .hero-copy { max-width: 480px; margin: 0; }
body[data-net="field"] .hero-eyebrow,
body[data-net="delicate"] .hero-eyebrow { justify-content: flex-start; margin-bottom: 18px; }
body[data-net="field"] .hero h1,
body[data-net="delicate"] .hero h1 { font-size: clamp(36px, 4.6vw, 64px); margin-bottom: 20px; text-shadow: 0 2px 36px rgba(0,0,0,0.66); }
body[data-net="field"] .hero-sub,
body[data-net="delicate"] .hero-sub { margin: 0 0 28px; max-width: 420px; font-size: 15.5px; }
body[data-net="field"] .hero-actions,
body[data-net="delicate"] .hero-actions { justify-content: flex-start; }
body[data-net="field"] .hero-status,
body[data-net="delicate"] .hero-status { justify-content: flex-start; }
body[data-net="field"] .hero > .wrap,
body[data-net="delicate"] .hero > .wrap { width: 100%; }
/* delicate keeps its centred constellation, lifted to sit above the corner type */
body[data-net="delicate"] .constellation { top: 33%; }
@media (max-width: 980px){
  body[data-net="field"] .hero-body, body[data-net="delicate"] .hero-body { padding-bottom: 86px; }
}

/* buttons (cyber, squared) */
.btn { font-family: var(--nf-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: var(--nf-rad-sm); cursor: pointer; border: none; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease; }
.btn--primary { background: var(--hero-glow); color: #18120E; box-shadow: 0 3px 16px rgba(255,107,53,0.42); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,107,53,0.5); }
.btn--ghost-dark { background: rgba(255,255,255,0.05); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ring); }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* hero HUD */
.crop { position: absolute; width: 22px; height: 22px; z-index: 6; pointer-events: none; opacity: 0.5; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--faint); }
.crop::before { width: 22px; height: 1px; top: 0; left: 0; }
.crop::after { width: 1px; height: 22px; top: 0; left: 0; }
.crop.tl { top: 90px; left: 44px; }
.crop.tr { top: 90px; right: 44px; transform: scaleX(-1); }
.crop.bl { bottom: 60px; left: 44px; transform: scaleY(-1); }
.crop.br { bottom: 60px; right: 44px; transform: scale(-1); }
@media (max-width: 720px){ .crop { display: none; } }
.hero-meta { position: absolute; right: 44px; bottom: 64px; z-index: 6; text-align: right; font-family: var(--nf-mono); font-size: 11px; letter-spacing: 1.4px; color: var(--faint); text-transform: uppercase; line-height: 1.9; }
.hero-meta .on { color: color-mix(in srgb, var(--hero-glow) 80%, #fff); }
@media (max-width: 980px){ .hero-meta { display: none; } }

.hero-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; border-top: 1px solid var(--hair); background: linear-gradient(0deg, rgba(0,0,0,0.34), transparent); overflow: hidden; padding: 13px 0; }
.ticker-track { display: inline-flex; align-items: center; white-space: nowrap; animation: ticker 40s linear infinite; will-change: transform; }
.ticker-track span { font-family: var(--nf-mono); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--faint); padding: 0 22px; display: inline-flex; align-items: center; gap: 22px; }
.ticker-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--hero-glow); opacity: 0.85; }
@keyframes ticker { from { transform: translateX(0);} to { transform: translateX(-50%);} }
body[data-motion="off"] .ticker-track, body[data-motion="off"] #ghost .net svg, body[data-motion="off"] #ghost .net2 svg { animation: none; }

/* hero focal constellation */
.constellation { position: absolute; z-index: 4; left: 50%; top: 39%; transform: translate(-50%, -50%); width: min(70vw, 720px); aspect-ratio: 1/1; pointer-events: none; }
.constellation .ring { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hero-glow) 32%, transparent) 0%, transparent 62%); filter: blur(6px); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ opacity: .78; transform: scale(0.98);} 50%{ opacity: 1; transform: scale(1.04);} }
.constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: drift 26s ease-in-out infinite; }
body[data-motion="off"] .constellation .ring, body[data-motion="off"] .constellation svg, body[data-motion="off"] .hero-status .live { animation: none; }
@media (max-width: 980px){ .constellation { top: 34%; width: 110vw; opacity: 0.6; } .hero-body { padding-bottom: 17vh; } }

/* ── FIELD / BRUSH variants — living webs on canvas, cursor-reactive ── */
.hero-mesh { display: none; position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
body[data-net="field"] .hero-mesh, body[data-net="delicate"] .hero-mesh { display: block; }
body[data-net="field"] .constellation, body[data-net="delicate"] .constellation { display: none; }

/* ============================================================
   SECTION SCAFFOLD — blueprint / terminal
   ============================================================ */
section.band { position: relative; border-top: 1px solid var(--hair-soft); }
.sec-pad { padding: 120px 0; }
@media (max-width: 720px){ .sec-pad { padding: 76px 0; } }

/* per-section corner telemetry (HUD) */
.sysline { position: absolute; top: 26px; right: 44px; font-family: var(--nf-mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); display: inline-flex; align-items: center; gap: 9px; }
@media (max-width: 720px){ .sysline { display: none; } }

/* blueprint header: terminal command + hairline + coordinate */
.shead { margin-bottom: 56px; }
.shead-rule { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.cmd { font-family: var(--nf-mono); font-size: 13px; letter-spacing: 0.6px; color: var(--mute); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.cmd .pr { color: var(--hero-glow); }
.cmd b { color: var(--ink); font-weight: 500; }
.shead-rule .bar { flex: 1; height: 1px; background: var(--hair); position: relative; }
.shead-rule .bar::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 8px; height: 8px; background: var(--hero-glow); }
.coord { font-family: var(--nf-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.shead h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 5.4vw, 66px); line-height: 1.0; letter-spacing: -0.5px; color: var(--ink); margin: 0; text-wrap: balance; }
.shead h2 .ital { color: var(--hero-glow); font-style: italic; }
.shead p { font-family: var(--nf-sans); font-size: 16px; line-height: 1.65; color: var(--mute); margin: 24px 0 0; max-width: 580px; }

/* ── INTRO statement ──────────────────────────────────────── */
.intro-stmt { font-family: var(--display); font-weight: 600; text-transform: none; font-size: clamp(26px, 4.4vw, 52px); line-height: 1.18; letter-spacing: -0.5px; color: var(--ink); max-width: 1080px; margin: 0; text-wrap: pretty; }
.intro-stmt .mute { color: var(--faint); }
.intro-foot { display: flex; flex-wrap: wrap; margin-top: 66px; border-top: 1px solid var(--hair); }
.intro-foot .stat { padding: 32px 52px 0 0; margin-right: 52px; border-right: 1px solid var(--hair); }
.intro-foot .stat:last-child { border-right: none; margin-right: 0; }
.intro-foot .stat .n { font-family: var(--display); font-size: 60px; font-weight: 700; color: var(--ink); letter-spacing: -1px; line-height: 1; }
.intro-foot .stat .n em { font-style: normal; color: var(--hero-glow); }
.intro-foot .stat .l { font-family: var(--nf-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin-top: 16px; }
@media (max-width: 680px){ .intro-foot .stat { border-right: none; border-bottom: 1px solid var(--hair); margin: 0; padding: 24px 0; width: 100%; } .intro-foot .stat:last-child { border-bottom: none; } }

/* ── SERVICES — terminal ledger ───────────────────────────── */
.ledger { border-top: 1px solid var(--hair); }
.lrow { display: grid; grid-template-columns: clamp(92px,11vw,160px) minmax(0,1.5fr) minmax(0,1fr) 40px; align-items: center; gap: 30px; padding: 40px 0 38px; border-bottom: 1px solid var(--hair); position: relative; cursor: pointer; transition: padding-left 220ms ease; }
.lrow::before { content: ""; position: absolute; left: -44px; right: -44px; top: -1px; bottom: -1px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--ring); opacity: 0; transition: opacity 220ms ease; z-index: -1; }
.lrow:hover::before { opacity: 1; }
.lrow:hover { padding-left: 14px; }
.lnum { font-family: var(--display); font-weight: 700; font-size: clamp(54px, 7.5vw, 116px); line-height: 0.8; letter-spacing: -2px; color: transparent; -webkit-text-stroke: 1.4px var(--ghost); transition: -webkit-text-stroke-color 240ms ease, color 240ms ease; }
.lrow:hover .lnum { -webkit-text-stroke-color: var(--hero-glow); color: color-mix(in srgb, var(--hero-glow) 16%, transparent); }
.lmain h3 { font-family: var(--display); font-size: clamp(22px,2.5vw,32px); font-weight: 600; letter-spacing: -0.2px; color: var(--ink); margin: 0 0 9px; line-height: 1.06; }
.lmain p { font-family: var(--nf-sans); font-size: 14.5px; line-height: 1.55; color: var(--mute); margin: 0; max-width: 380px; }
.ltags { font-family: var(--nf-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--faint); line-height: 2; text-transform: uppercase; }
.larrow { font-family: var(--nf-mono); font-size: 20px; color: var(--faint); justify-self: end; transition: transform 220ms ease, color 220ms ease; }
.lrow:hover .larrow { transform: translateX(7px); color: var(--hero-glow); }
@media (max-width: 820px){ .lrow { grid-template-columns: 64px 1fr; grid-template-areas: "num main" "num tags"; row-gap: 14px; padding: 30px 0; } .lnum { grid-area: num; font-size: 48px; } .lmain { grid-area: main; } .ltags { grid-area: tags; } .larrow { display: none; } .lrow:hover { padding-left: 0; } }

/* ── PRODUCT — dark datasheet ─────────────────────────────── */
.product { position: relative; overflow: hidden; }
.product::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 90% 16%, color-mix(in srgb, var(--hero-glow) 12%, transparent), transparent 55%); pointer-events: none; }
.prod2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 2; }
@media (max-width: 920px){ .prod2 { grid-template-columns: 1fr; gap: 44px; } }
.prod2 h3 { font-family: var(--display); font-size: clamp(40px,6vw,80px); font-weight: 700; text-transform: uppercase; letter-spacing:-1px; line-height:0.92; color: var(--ink); margin: 18px 0 18px; }
.prod2 .lede { font-family: var(--nf-sans); font-size: 16px; line-height: 1.62; color: var(--mute); margin: 0 0 28px; max-width: 460px; }
.datasheet { margin: 0 0 30px; border-top: 1px solid var(--hair); max-width: 470px; }
.datasheet .dr { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-family: var(--nf-mono); font-size: 12px; letter-spacing: 0.3px; }
.datasheet .dk { color: var(--faint); text-transform: uppercase; letter-spacing: 1.2px; }
.datasheet .dv { color: var(--ink); }
.datasheet .dv em { font-style: normal; color: color-mix(in srgb, var(--hero-glow) 88%, #fff); }
.prod-feats { list-style: none; padding: 0; margin: 4px 0 30px; display: flex; flex-direction: column; gap: 12px; }
.prod-feats li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--nf-sans); font-size: 14px; color: var(--mute); line-height: 1.5; }
.prod-feats .ck { flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; background: rgba(255,255,255,0.08); display: grid; place-items: center; margin-top: 1px; box-shadow: inset 0 0 0 1px var(--ring); }
.prod-feats .ck svg { width: 12px; height: 12px; stroke: color-mix(in srgb, var(--hero-glow) 90%, #fff); }
.prod-right { position: relative; display: flex; align-items: center; justify-content: center; z-index: 2; }
.prod-right .glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; right: -50px; top: -60px; background: radial-gradient(circle, color-mix(in srgb, var(--hero-glow) 36%, transparent), transparent 65%); }

/* mini dashboard mock — the one bright interface */
.mock { position: relative; z-index: 2; width: 100%; max-width: 392px; background: #FCFBF7; border-radius: var(--nf-rad-md); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.04); overflow: hidden; }
.mock-top { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid #ECEAE3; }
.mock-top .d { width: 9px; height: 9px; border-radius: 50%; background: #D8D5CC; }
.mock-top .t { margin-left: 8px; font-family: var(--nf-mono); font-size: 10px; letter-spacing: 0.8px; color: #8A8678; }
.mock-body { padding: 18px; }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #ECEAE3; }
.mock-row:last-child { border-bottom: none; }
.mock-person { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.mock-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #E2E9E2, #F2F2F1); box-shadow: inset 0 0 0 1px rgba(20,62,41,0.1); flex-shrink: 0; }
.mock-person > div { min-width: 0; }
.mock-name { font-family: var(--nf-sans); font-size: 12.5px; font-weight: 600; color: #202A44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-meta { font-family: var(--nf-mono); font-size: 9.5px; letter-spacing: 0.4px; color: #8A8678; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-pill { font-family: var(--nf-mono); font-size: 9px; letter-spacing: 0.6px; padding: 4px 9px; border-radius: var(--nf-rad-pill); white-space: nowrap; flex-shrink: 0; }
.mock-pill.ok { color: #0A2918; background: #E2E9E2; }
.mock-pill.run { color: #B5491F; background: #FFE4D6; }

/* ── PROOF — giant bleeding metric ────────────────────────── */
.proof { position: relative; overflow: hidden; }
.proof-stage { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 880px){ .proof-stage { grid-template-columns: 1fr; gap: 48px; } }
.bigmetric .e { font-family: var(--nf-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hero-glow); display:block; margin-bottom: 16px; }
.bigmetric .n { font-family: var(--display); font-weight: 700; font-size: clamp(110px, 21vw, 280px); line-height: 0.78; letter-spacing: -6px; color: var(--ink); }
.bigmetric .n em { font-style: normal; color: var(--hero-glow); }
.bigmetric .l { font-family: var(--nf-sans); font-size: 16px; line-height: 1.5; color: var(--mute); margin-top: 20px; max-width: 360px; }
.mrows { border-top: 1px solid var(--hair); }
.mrow { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.mrow .n { font-family: var(--display); font-weight: 700; font-size: clamp(40px,5vw,62px); line-height: 0.9; letter-spacing: -1px; color: var(--ink); white-space: nowrap; }
.mrow .n em { font-style: normal; color: var(--hero-glow); }
.mrow .meta .e { font-family: var(--nf-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); display:block; margin-bottom: 6px; }
.mrow .meta .l { font-family: var(--nf-sans); font-size: 14px; line-height: 1.45; color: var(--mute); }

/* ── PHILOSOPHY — manifesto + big quote ───────────────────── */
.manifesto { border-top: 1px solid var(--hair); }
.mani { display: grid; grid-template-columns: clamp(70px,9vw,120px) 1fr; gap: 32px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--hair); }
.mani .mn { font-family: var(--display); font-weight: 700; font-size: clamp(38px,5vw,70px); line-height: 0.8; letter-spacing: -1px; color: transparent; -webkit-text-stroke: 1.4px var(--ghost); }
.mani h4 { font-family: var(--display); font-size: clamp(21px,2.3vw,29px); font-weight: 600; color: var(--ink); margin: 0 0 9px; letter-spacing: -0.2px; }
.mani p { font-family: var(--nf-sans); font-size: 15px; line-height: 1.6; color: var(--mute); margin: 0; max-width: 640px; }
@media (max-width: 640px){ .mani { grid-template-columns: 1fr; gap: 10px; } .mani .mn { font-size: 40px; } }

.bigquote { position: relative; }
.bigquote .qm { font-family: var(--display); font-weight: 700; font-size: 110px; line-height: 0.5; color: var(--hero-glow); display:block; margin-bottom: 14px; }
.bigquote blockquote { font-family: var(--display); font-weight: 600; font-size: clamp(26px,3.6vw,46px); line-height: 1.22; letter-spacing: -0.5px; color: var(--ink); margin: 0 0 30px; max-width: 1000px; text-wrap: balance; }
.bigquote blockquote .ital { color: var(--hero-glow); font-style: italic; }
.bigquote .who { display: flex; align-items: center; gap: 13px; }
.bigquote .who .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--hero-glow), #B5491F); box-shadow: 0 0 0 1px var(--ring); }
.bigquote .who .nm { font-family: var(--nf-sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.bigquote .who .rl { font-family: var(--nf-mono); font-size: 10.5px; letter-spacing: 0.8px; color: var(--faint); margin-top: 3px; text-transform: uppercase; }

/* ── CTA ──────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 130% at 82% 30%, color-mix(in srgb, var(--hero-glow) 18%, transparent) 0%, transparent 52%); pointer-events: none; }
.cta .wrap { position: relative; z-index: 2; }
.cta-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; }
@media (max-width: 860px){ .cta-grid { grid-template-columns: 1fr; gap: 36px; } }
.cta h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(36px,5.6vw,76px); letter-spacing: -1px; line-height: 0.96; margin: 22px 0 0; color: var(--ink); }
.cta h2 .ital { color: var(--hero-glow); font-style: italic; }
.cta-right { display: flex; flex-direction: column; gap: 18px; }
.cta-locs { display: flex; gap: 40px; }
.cta-loc .c { font-family: var(--display); font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--ink); }
.cta-loc .x { font-family: var(--nf-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.cta-email { font-family: var(--nf-mono); font-size: 13px; letter-spacing: 0.4px; color: var(--mute); }
.cta-email a { color: color-mix(in srgb, var(--hero-glow) 88%, #fff); }

/* ── FOOTER ───────────────────────────────────────────────── */
.foot { position: relative; border-top: 1px solid var(--hair); }
.foot .wrap { padding-top: 58px; padding-bottom: 40px; }
.foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--hair); }
.foot-brand { max-width: 340px; }
.foot-brand .brand { color: var(--ink); margin-bottom: 16px; }
.foot-brand p { font-family: var(--nf-sans); font-size: 14px; line-height: 1.5; color: var(--mute); margin: 0; }
.foot-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.foot-col h5 { font-family: var(--nf-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.foot-col a { display: block; font-family: var(--nf-mono); font-size: 12px; letter-spacing: 0.4px; color: var(--mute); padding: 5px 0; transition: color 120ms ease; }
.foot-col a:hover { color: var(--hero-glow); }
.foot-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 26px; }
.foot-meta { display: flex; align-items: center; gap: 16px; font-family: var(--nf-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--faint); flex-wrap: wrap; }
.foot-meta .sep { opacity: 0.4; }
.foot-build { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nf-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--mute); padding: 6px 12px; border-radius: var(--nf-rad-sm); background: var(--panel); box-shadow: inset 0 0 0 1px var(--ring); }
.foot-build .d { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-glow) 25%, transparent); }

/* ── reveal ───────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 720ms cubic-bezier(0.4,0,0.2,1), transform 720ms cubic-bezier(0.4,0,0.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 80ms; }
.reveal.d2 { transition-delay: 160ms; }
.reveal.d3 { transition-delay: 240ms; }
body[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ── Tweaks panel ─────────────────────────────────────────── */
#nf-tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: 280px; display: none; background: #10241A; border-radius: var(--nf-rad-md); box-shadow: 0 24px 60px rgba(0,0,0,0.55); outline: 1px solid var(--ring); outline-offset: -1px; font-family: var(--nf-sans); color: var(--ink); overflow: hidden; }
#nf-tweaks.open { display: block; }
.tw-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.tw-head .ttl { font-family: var(--nf-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mute); }
.tw-head button { background: none; border: none; cursor: pointer; color: var(--faint); font-size: 16px; line-height: 1; padding: 4px; border-radius: 6px; }
.tw-head button:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.tw-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.tw-grp .lbl { font-family: var(--nf-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.tw-opt { width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--nf-rad-sm); border: none; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--mute); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); margin-bottom: 6px; transition: all 120ms ease; }
.tw-opt:last-child { margin-bottom: 0; }
.tw-opt.on { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hero-glow); background: rgba(255,107,53,0.08); }
.tw-opt em { color: var(--hero-glow); font-style: italic; }
.tw-sw { display: flex; gap: 8px; }
.tw-sw button { width: 34px; height: 34px; border-radius: 8px; border: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ring); transition: transform 120ms ease; }
.tw-sw button.on { box-shadow: 0 0 0 2px #10241A, 0 0 0 4px var(--hero-glow); }
.tw-toggle { display: flex; align-items: center; justify-content: space-between; }
.tw-toggle .tg { width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.14); position: relative; cursor: pointer; transition: background 140ms ease; }
.tw-toggle .tg.on { background: var(--hero-glow); }
.tw-toggle .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 140ms ease; }
.tw-toggle .tg.on::after { transform: translateX(18px); }