/* ============================================================
   Omlynk — Water, on autopilot.
   Single immersive scroll-driven product page.
   Brand tokens mirrored from BRAND_GUIDE.md + 05_MOBILE/DESIGN_TOKENS.md
   ============================================================ */

:root {
  /* Water palette (the gauge) */
  --water-deep:   #1b3aa0;
  --water-mid:    #3b5bdb;   /* primary brand */
  --water-bright: #4a8af0;
  --water-crest:  #5ad1e6;
  --water-foam:   #8fe6ff;

  /* Brand */
  --brand:   #3b5bdb;
  --bright:  #4a8af0;
  --crest:   #5ad1e6;
  --foam:    #8fe6ff;

  /* Ink / backgrounds */
  --ink-900: #070c18;   /* deepest */
  --ink-800: #0a0f1f;
  --ink-700: #0b1226;   /* page navy */
  --ink-600: #0c1838;
  --panel:   #0e1730;
  --panel-2: #111a31;

  /* Surfaces / elevation */
  --surf-1: #121a31;
  --surf-2: #141d36;
  --surf-3: #172038;
  --surf-4: #1a2236;
  --surf-5: #222d4c;

  /* Text */
  --text:      #eaf0fb;
  --muted:     #9fb0d4;
  --muted-2:   #6e7ea6;
  --line:      rgba(159,176,212,0.12);

  /* Semantic */
  --on:     #2fb86b;   /* motor on / success */
  --alert:  #f27472;
  --amber:  #e0a52f;

  /* Signature gradient */
  --grad: linear-gradient(135deg, #5ad1e6 0%, #3b5bdb 100%);
  --grad-soft: linear-gradient(135deg, rgba(90,209,230,0.16), rgba(59,91,219,0.16));

  --maxw: 1120px;
  --radius: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--ink-700);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient deep-water backdrop */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(59,91,219,0.22), transparent 60%),
    radial-gradient(1000px 620px at 10% 8%, rgba(90,209,230,0.10), transparent 55%),
    linear-gradient(180deg, #0a1024 0%, #070c18 55%, #060a15 100%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Type helpers ---------- */
.overline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crest);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.grad-text {
  background: linear-gradient(120deg, #eaf0fb 10%, #8fe6ff 45%, #4a8af0 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
section { position: relative; }

.scene {
  padding: clamp(72px, 12vh, 150px) 0;
}
.scene-head { max-width: 640px; margin-bottom: 44px; }
.scene-head h2 {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 14px;
}
.scene-head p.lead {
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 20px);
  margin-top: 18px;
  max-width: 56ch;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 44px);
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,13,26,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.brandmark { display: flex; align-items: center; gap: 11px; }
.brandmark svg { width: 30px; height: 30px; }
.brandmark .word { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.brandmark .word b { color: var(--crest); font-weight: 800; }
.nav-cta {
  font-size: 14px; font-weight: 700;
  padding: 9px 18px; border-radius: 100px;
  background: var(--grad);
  color: #061024;
  box-shadow: 0 6px 20px -6px rgba(74,138,240,0.6);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(74,138,240,0.75); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px;
  padding: 15px 28px; border-radius: 100px;
  border: 0; cursor: pointer; font-family: var(--font);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn-primary {
  background: var(--grad); color: #061024;
  box-shadow: 0 14px 40px -12px rgba(74,138,240,0.65);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -12px rgba(74,138,240,0.8); }
.btn-ghost {
  background: rgba(159,176,212,0.08);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: rgba(159,176,212,0.14); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  padding: 120px clamp(20px,5vw,44px) 60px;
  max-width: 1220px; margin-inline: auto;
}
.hero-copy { max-width: 560px; }
.hero h1 {
  font-size: clamp(44px, 7.2vw, 88px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 20px 0 0;
}
.hero .sub {
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--muted);
  margin-top: 22px; max-width: 46ch;
}
.hero .support {
  font-family: var(--mono);
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--crest);
  margin-top: 18px;
}
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 26px; font-size: 13.5px; color: var(--muted-2);
  display: flex; align-items: center; gap: 8px;
}
.hero-trust .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on); box-shadow: 0 0 10px var(--on); }
.hero-survey { margin-top: 14px; font-size: 13.5px; color: var(--muted-2); }
.hero-survey a { color: var(--crest); border-bottom: 1px solid rgba(90,209,230,0.4); font-weight: 600; }
.hero-survey a:hover { color: var(--foam); }

.hero-stage { display: flex; justify-content: center; align-items: center; }

/* Scroll cue */
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted-2);
}
.scroll-cue .mouse {
  width: 22px; height: 34px; border: 1.5px solid var(--muted-2); border-radius: 12px;
  position: relative;
}
.scroll-cue .mouse::after {
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:6px; border-radius:2px; background: var(--crest);
  animation: cue 1.6s var(--ease) infinite;
}
@keyframes cue { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* ============================================================
   PHONE MOCKUP — recreated app frame
   ============================================================ */
.phone {
  --pw: 320px;
  width: var(--pw);
  aspect-ratio: 320 / 660;
  background: #05080f;
  border-radius: 42px;
  padding: 11px;
  position: relative;
  box-shadow:
    0 2px 0 1px rgba(255,255,255,0.04) inset,
    0 50px 90px -30px rgba(0,0,0,0.75),
    0 0 0 1px rgba(159,176,212,0.10);
}
.phone::before { /* dynamic island */
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 20px; background: #05080f; border-radius: 20px; z-index: 6;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  background: var(--ink-700);
  border-radius: 32px; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-lg { --pw: 388px; }

/* status bar */
.p-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px 4px; font-size: 12px; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.p-statusbar .r { display: flex; gap: 5px; align-items: center; opacity: 0.9; font-family: var(--mono); font-size: 10px; }

/* app content scroll area */
.p-body { flex: 1; overflow: hidden; padding: 4px 16px 0; }

/* app header row */
.p-apphead { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 12px; }
.p-apphead .title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; display:flex; align-items:center; gap:8px; }
.p-apphead .tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--brand);
  background: rgba(59,91,219,0.18); padding: 3px 7px; border-radius: 100px; text-transform: uppercase; }
.p-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); display:grid; place-items:center;
  font-size: 13px; font-weight: 800; color: #fff; }

/* chip row */
.p-chips { display: flex; gap: 7px; margin-bottom: 12px; overflow: hidden; }
.p-chip {
  font-size: 10px; font-weight: 600; padding: 6px 10px; border-radius: 100px;
  background: var(--surf-2); color: var(--muted); white-space: nowrap; display:flex; gap:5px; align-items:center;
  border: 1px solid var(--line);
}
.p-chip .k { font-family: var(--mono); font-size: 8.5px; letter-spacing:.08em; color: var(--muted-2); text-transform: uppercase; }
.p-chip.ok { color: var(--on); }
.p-chip .cdot { width:6px; height:6px; border-radius:50%; background: var(--on); }

/* gauge card in phone */
.p-gauge {
  position: relative; width: 100%; aspect-ratio: 1 / 1.18;
  border-radius: 18px; overflow: hidden; background: #0a1122;
  border: 1px solid var(--line);
}
.p-gauge fluid-gauge { position: absolute; inset: 0; }
.p-gauge .readout {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 3; pointer-events:none;
}
.p-gauge .readout .pct { font-size: 62px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35); }
.p-gauge .readout .pct sup { font-size: 24px; font-weight: 700; top: -1.1em; margin-left: 2px; }
.p-gauge .readout .deep { font-size: 13px; color: rgba(234,240,251,0.85); margin-top: 4px; }

/* power button */
.p-power {
  width: 82px; height: 82px; border-radius: 50%; margin: 18px auto 6px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #5c86ff, #3b5bdb);
  box-shadow: 0 0 30px -4px rgba(74,138,240,0.7), 0 10px 24px -8px rgba(0,0,0,0.6);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.p-power.on { background: radial-gradient(circle at 50% 38%, #4bd886, #22a15e);
  box-shadow: 0 0 30px -2px rgba(47,184,107,0.75), 0 10px 24px -8px rgba(0,0,0,0.6); }
.p-power svg { width: 34px; height: 34px; }
.p-power-label { text-align: center; font-size: 15px; font-weight: 700; }
.p-power-sub { text-align:center; font-size: 11px; color: var(--muted-2); margin-top: 2px; }

/* bottom tab bar */
.p-tabs {
  display: flex; justify-content: space-around; align-items: center;
  padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
  margin: 10px 8px 8px; border-radius: 22px;
  background: rgba(18,26,49,0.6); border: 1px solid var(--line);
  flex-shrink: 0;
}
.p-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; color: var(--muted-2); }
.p-tab svg { width: 17px; height: 17px; }
.p-tab.active { color: var(--bright); }
.p-tab.active .pill { }

/* generic app cards inside phone */
.p-card {
  background: var(--surf-1); border: 1px solid var(--line);
  border-radius: 15px; padding: 13px; margin-bottom: 10px;
}
.p-card .lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing:.14em; text-transform: uppercase; color: var(--muted-2); }
.p-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-toggle { width: 38px; height: 22px; border-radius: 100px; background: var(--surf-5); position: relative; flex-shrink:0; transition: background .3s; }
.p-toggle::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition: left .3s var(--ease); }
.p-toggle.on { background: var(--brand); }
.p-toggle.on::after { left: 18px; }
.p-seg { display:flex; background: var(--surf-3); border-radius: 100px; padding: 3px; font-size: 11px; font-weight: 700; }
.p-seg span { flex:1; text-align:center; padding: 7px 0; border-radius: 100px; color: var(--muted); transition: all .3s; }
.p-seg span.sel { background: var(--surf-5); color: var(--text); }

/* device list rows */
.p-dev { display:flex; align-items:center; gap:11px; }
.p-dev .ic { width:44px; height:44px; border-radius:12px; background:#0c1730; display:grid; place-items:center; flex-shrink:0; border:1px solid var(--line); }
.p-dev .nm { font-size:14px; font-weight:700; }
.p-mini-chip { font-size:9px; padding:3px 7px; border-radius:100px; display:inline-flex; gap:4px; align-items:center; }
.p-mini-chip.ok { color: var(--on); background: rgba(47,184,107,0.14); }
.p-mini-chip.warn { color: var(--amber); background: rgba(224,165,47,0.14); }
.p-dev-ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;
  background: rgba(224,165,47,0.14); font-size:14px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 130px 0 90px; }
.legal h1 { font-size: clamp(30px,5vw,46px); font-weight: 800; letter-spacing:-0.02em; }
.legal .updated { font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }
.legal h2 { font-size: 20px; font-weight: 700; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--crest); }
.back-link { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-bottom: 30px; }

/* ============================================================
   FEATURE SCENE GRID (copy + phone)
   ============================================================ */
.scene-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.scene-split.reverse .col-media { order: -1; }
.col-media { display: flex; justify-content: center; }

.feature-list { margin-top: 26px; display: grid; gap: 16px; }
.feature-item { display: flex; gap: 13px; align-items: flex-start; }
.feature-item .fi-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--grad-soft);
  border: 1px solid rgba(90,209,230,0.25); color: var(--crest);
}
.feature-item .fi-ic svg { width: 19px; height: 19px; }
.feature-item h4 { font-size: 16.5px; font-weight: 700; }
.feature-item p { font-size: 14.5px; color: var(--muted); margin-top: 3px; }

/* ============================================================
   EXPLODED DIAGRAM (dry-run / sump story)
   ============================================================ */
.exploded {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 18px;
  padding: 30px 22px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(14,23,48,0.7), rgba(10,15,31,0.6));
  border: 1px solid var(--line);
  overflow: hidden;
}
.exploded::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(500px 300px at 70% 10%, rgba(90,209,230,0.10), transparent 60%);
  pointer-events:none;
}
.ex-node {
  display: flex; align-items: center; gap: 14px;
  background: var(--surf-1); border: 1px solid var(--line);
  border-radius: 16px; padding: 15px 16px; position: relative;
  transform: translateY(14px); opacity: 0;
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.exploded.in .ex-node { transform: none; opacity: 1; }
.exploded.in .ex-node:nth-child(2){ transition-delay:.08s }
.exploded.in .ex-node:nth-child(3){ transition-delay:.16s }
.exploded.in .ex-node:nth-child(4){ transition-delay:.24s }
.ex-node .ex-ic { width: 46px; height: 46px; border-radius: 13px; display:grid; place-items:center; flex-shrink:0;
  background: #0c1730; border: 1px solid var(--line); color: var(--crest); }
.ex-node .ex-ic svg { width: 24px; height: 24px; }
.ex-node h4 { font-size: 15.5px; font-weight: 700; }
.ex-node p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ex-node .ex-badge { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing:.06em;
  padding: 5px 9px; border-radius: 100px; white-space: nowrap; }
.ex-badge.guard { color: var(--on); background: rgba(47,184,107,0.14); }
.ex-badge.block { color: var(--amber); background: rgba(224,165,47,0.14); }
.ex-link {
  position: relative; height: 26px; margin: -6px 0; display:flex; align-items:center; justify-content:center;
}
.ex-link .rf {
  font-family: var(--mono); font-size: 10px; letter-spacing:.14em; color: var(--muted-2);
  text-transform: uppercase; padding: 3px 10px; border-radius: 100px;
  background: rgba(90,209,230,0.08); border: 1px solid rgba(90,209,230,0.2);
}

/* ============================================================
   FEATURE PILLS / small stat cards
   ============================================================ */
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.mini-stat { background: var(--surf-1); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.mini-stat .lbl { font-family: var(--mono); font-size: 10px; letter-spacing:.12em; text-transform: uppercase; color: var(--muted-2); }
.mini-stat .val { font-size: 26px; font-weight: 800; margin-top: 6px; }
.mini-stat .val small { font-size: 13px; font-weight: 600; color: var(--muted); }
.mini-stat .est { font-family: var(--mono); font-size: 9px; letter-spacing:.08em; color: var(--amber);
  background: rgba(224,165,47,0.12); padding: 3px 7px; border-radius: 100px; text-transform: uppercase; float: right; }

/* ============================================================
   TRUTH STRIP — what's real today
   ============================================================ */
.truth { padding: clamp(60px,9vh,110px) 0; }
.truth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.truth-card {
  background: linear-gradient(180deg, rgba(18,26,49,0.6), rgba(12,20,42,0.5));
  border: 1px solid var(--line); border-radius: 18px; padding: 22px;
}
.truth-card .tc-ic { width: 40px; height: 40px; border-radius: 12px; display:grid; place-items:center;
  background: var(--grad-soft); border: 1px solid rgba(90,209,230,0.22); color: var(--crest); margin-bottom: 14px; }
.truth-card .tc-ic svg { width: 21px; height: 21px; }
.truth-card h4 { font-size: 17px; font-weight: 700; }
.truth-card p { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* ============================================================
   WAITLIST CTA
   ============================================================ */
.waitlist {
  position: relative;
  padding: clamp(80px,14vh,160px) 0;
  text-align: center;
  overflow: hidden;
}
.waitlist::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(700px 380px at 50% 12%, rgba(90,209,230,0.18), transparent 65%),
    radial-gradient(600px 340px at 50% 90%, rgba(59,91,219,0.16), transparent 60%);
}
.waitlist h2 { font-size: clamp(32px, 6vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.waitlist p.lead { color: var(--muted); font-size: clamp(16px,2.4vw,20px); margin: 20px auto 0; max-width: 52ch; }

.wl-form {
  margin: 40px auto 0; max-width: 520px;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.wl-input {
  flex: 1 1 260px; min-width: 220px;
  background: rgba(10,16,32,0.7); border: 1px solid var(--line);
  border-radius: 100px; padding: 15px 22px; color: var(--text);
  font-family: var(--font); font-size: 16px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.wl-input::placeholder { color: var(--muted-2); }
.wl-input:focus { border-color: var(--crest); box-shadow: 0 0 0 3px rgba(90,209,230,0.15); }
.wl-note { margin-top: 18px; font-size: 13px; color: var(--muted-2); }
.wl-note a { color: var(--crest); border-bottom: 1px solid rgba(90,209,230,0.4); }
.wl-success {
  margin: 30px auto 0; max-width: 480px;
  background: rgba(47,184,107,0.10); border: 1px solid rgba(47,184,107,0.35);
  border-radius: 16px; padding: 18px 22px; color: #b6f0d0; font-size: 15px;
  display: none;
}
.wl-success.show { display: block; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: 54px 0 40px;
  background: rgba(6,10,21,0.5);
}
.footer-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer .brandmark .word { font-size: 20px; }
.footer .tagline { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 34ch; }
.footer-links { display: flex; gap: 46px; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.footer-col a, .footer-col span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 9px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted-2);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* Section divider glow line */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 108px; gap: 30px; }
  .hero-copy { max-width: 620px; margin-inline: auto; }
  .hero .sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
  .scene-split { grid-template-columns: 1fr; gap: 40px; }
  .scene-split.reverse .col-media { order: 0; }
  .scene-head { margin-inline: auto; text-align: center; }
  .truth-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .mini-grid { grid-template-columns: 1fr; }
  .phone { --pw: 300px; }
  .phone-lg { --pw: 322px; }
  .footer-top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .ex-node { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scroll-cue .mouse::after { animation: none; }
}

/* ============================================================
   ADDITIONS — status bar icons + capabilities grid
   ============================================================ */

/* ---- iOS-style status bar ---- */
.p-statusbar .t { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
.p-statusbar .r { display: flex; align-items: center; gap: 6px; opacity: 1; font-family: var(--font); color: var(--text); }
.p-statusbar .si { height: 11px; width: auto; display: block; }
.batt { display: inline-flex; align-items: center; }
.batt-body { width: 22px; height: 11px; border: 1px solid rgba(234,240,251,.5); border-radius: 3px; padding: 1.4px; display: block; }
.batt-body i { display: block; height: 100%; background: var(--text); border-radius: 1.5px; }
.batt-cap { width: 1.6px; height: 4px; background: rgba(234,240,251,.5); border-radius: 0 2px 2px 0; margin-left: 1px; }

/* ---- Capabilities grid ---- */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }
.cap-card {
  background: linear-gradient(180deg, rgba(18,26,49,0.6), rgba(12,20,42,0.5));
  border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  transition: transform .3s var(--ease), border-color .3s;
}
.cap-card:hover { transform: translateY(-4px); border-color: rgba(90,209,230,0.3); }
.cap-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid rgba(90,209,230,0.22); color: var(--crest); margin-bottom: 14px; }
.cap-ic svg { width: 22px; height: 22px; }
.cap-card h4 { font-size: 17px; font-weight: 700; }
.cap-card p { font-size: 14px; color: var(--muted); margin-top: 7px; }
@media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr; } }