/* =============================================================
   EchoFind — Marketing Site Styles
   Brand palette: abyss (bg) → signal (teal) accent
   ============================================================= */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --abyss:      #080A1C;
  --deep:       #121233;
  --violet:     #261A54;
  --signal:     #29F2DB;
  --signal-dim: #299EEB;
  --pulse:      #7D73FF;
  --hot:        #FF5C73;

  --text-hi:    #FFFFFF;
  --text-lo:    rgba(255, 255, 255, 0.55);

  --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;

  --shadow-glow:  0 0 24px rgba(41, 242, 219, 0.25);
  --shadow-card:  0 4px 32px rgba(0, 0, 0, 0.45);
  --border-subtle: rgba(255, 255, 255, 0.07);

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --max-w:      1160px;

  /* Nav height — used for scroll offset */
  --nav-h:      64px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  font-size: 16px;
}

body {
  font-family:    var(--font-display);
  background:     var(--abyss);
  color:          var(--text-hi);
  line-height:    1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x:     hidden;
}

/* Field gradient: body background softens top to bottom */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--abyss) 0%, var(--deep) 50%, var(--violet) 100%);
  z-index: -2;
  pointer-events: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-display); }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Typography helpers ───────────────────────────────────── */
.mono { font-family: var(--font-mono); }

.gradient-text {
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--signal);
  margin-bottom:  12px;
}

/* ── Layout ───────────────────────────────────────────────── */
.container {
  width:   100%;
  max-width: var(--max-w);
  margin:  0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         13px 26px;
  border-radius:   var(--radius-md);
  font-family:     var(--font-display);
  font-weight:     700;
  font-size:       1rem;
  border:          none;
  transition:      transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  white-space:     nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.btn-primary {
  background:  linear-gradient(90deg, var(--signal-dim), var(--signal));
  color:       var(--abyss);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(41, 242, 219, 0.35); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background:  transparent;
  color:       var(--text-hi);
  border:      1.5px solid rgba(255, 255, 255, 0.2);
}
.btn-ghost:hover {
  border-color: var(--signal);
  color:        var(--signal);
  box-shadow:   0 0 16px rgba(41, 242, 219, 0.15);
}

.btn-sm {
  padding:   8px 18px;
  font-size: 0.875rem;
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  color:     var(--abyss);
}
.btn-sm:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }


/* ══════════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════════ */
.nav-wrap {
  position:   sticky;
  top:        0;
  z-index:    100;
  height:     var(--nav-h);
  backdrop-filter:         blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(8, 10, 28, 0.75);
  border-bottom: 1px solid var(--border-subtle);
}

.nav {
  height: 100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Wordmark */
.wordmark {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   1.35rem;
  font-weight: 900;
  line-height: 1;
}
.wordmark-glyph { flex-shrink: 0; }
.wordmark-echo  { color: var(--text-hi); }
.wordmark-find  {
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         32px;
}
.nav-links a {
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--text-lo);
  transition:  color var(--transition);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text-hi); }
.nav-links a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }

/* Hamburger */
.nav-toggle {
  display:        none;
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            5px;
  background:     transparent;
  border:         none;
  padding:        6px;
  width:          40px;
  height:         40px;
}
.nav-toggle span {
  display:        block;
  width:          22px;
  height:         2px;
  background:     var(--text-hi);
  border-radius:  2px;
  transition:     transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero {
  position:   relative;
  min-height: calc(100vh - var(--nav-h));
  display:    flex;
  align-items: center;
  padding:    80px 0;
  overflow:   hidden;
}

/* ── Sonar background ──── */
.sonar-bg {
  position:       absolute;
  inset:          0;
  overflow:       hidden;
  pointer-events: none;
}

.sonar-rings {
  position: absolute;
  top:      50%;
  right:    -10%;
  transform: translate(0, -50%);
  width:    900px;
  height:   900px;
}

.ring {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  border:        1.5px solid rgba(41, 242, 219, 0.09);
  animation:     sonar-pulse 5s ease-in-out infinite;
}
.ring-1 { animation-delay: 0s;    inset: 35%; }
.ring-2 { animation-delay: 0.6s;  inset: 20%; }
.ring-3 { animation-delay: 1.2s;  inset: 7%; }
.ring-4 { animation-delay: 1.8s;  inset: -8%; border-color: rgba(41, 242, 219, 0.05); }
.ring-5 { animation-delay: 2.4s;  inset: -25%; border-color: rgba(41, 242, 219, 0.03); }

@keyframes sonar-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.015); }
}

/* Radar sweep: conic gradient rotating */
.radar-sweep {
  position:   absolute;
  top:        50%;
  right:      -10%;
  width:      900px;
  height:     900px;
  transform:  translate(0, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(41, 242, 219, 0.06) 20deg,
    rgba(41, 242, 219, 0.025) 40deg,
    transparent 60deg
  );
  border-radius: 50%;
  animation:  radar-spin 8s linear infinite;
}

@keyframes radar-spin {
  from { transform: translate(0, -50%) rotate(0deg); }
  to   { transform: translate(0, -50%) rotate(360deg); }
}

/* ── Hero layout ──── */
.hero-inner {
  position:        relative;
  display:         flex;
  align-items:     center;
  gap:             64px;
  z-index:         1;
}

.hero-copy {
  flex:         1 1 0;
  min-width:    0;
}

.hero-badge {
  display:       inline-block;
  padding:       5px 14px;
  border-radius: 100px;
  border:        1px solid rgba(41, 242, 219, 0.3);
  color:         var(--signal);
  font-size:     0.78rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  background:    rgba(41, 242, 219, 0.07);
}

.hero-copy h1 {
  font-size:   clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.12;
  margin-bottom: 20px;
}

.hero-sub {
  font-size:     1.05rem;
  color:         var(--text-lo);
  max-width:     500px;
  margin-bottom: 36px;
  line-height:   1.7;
}

.hero-ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       14px;
}

/* ── Phone mockup ──── */
.hero-phone {
  flex-shrink: 0;
  display:     flex;
  justify-content: center;
}

.phone-frame {
  position:      relative;
  width:         230px;
  height:        460px;
  border-radius: 40px;
  border:        2px solid rgba(255, 255, 255, 0.15);
  background:    linear-gradient(160deg, #141430 0%, #0A0B1E 100%);
  box-shadow:
    0 0 0 1px rgba(41, 242, 219, 0.1),
    0 32px 80px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow:      hidden;
  padding:       14px 16px 20px;
}

.phone-notch {
  position:    absolute;
  top:         0;
  left:        50%;
  transform:   translateX(-50%);
  width:       80px;
  height:      26px;
  background:  var(--abyss);
  border-radius: 0 0 18px 18px;
  z-index:     2;
}

.phone-screen {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  height:         100%;
  padding-top:    20px;
  position:       relative;
}

/* Status bar */
.mock-status {
  width:           100%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.62rem;
  font-family:     var(--font-mono);
  color:           var(--text-hi);
  padding:         0 2px;
  margin-bottom:   8px;
  flex-shrink:     0;
}
.mock-status-icons { display: flex; align-items: center; gap: 4px; }

/* Mockup wordmark */
.mock-wordmark {
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     0.85rem;
  font-weight:   800;
  margin-bottom: 4px;
  flex-shrink:   0;
}
.mock-echo { color: var(--text-hi); }
.mock-find {
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sonar rings inside screen */
.mock-sonar {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  pointer-events: none;
}

.mock-ring {
  position:      absolute;
  border-radius: 50%;
  border:        1px solid rgba(41, 242, 219, 0.12);
  transform:     translate(-50%, -50%);
  top:           50%;
  left:          50%;
  animation:     mock-ring-pulse 3s ease-in-out infinite;
}
.mr1 { width: 90px;  height: 90px;  animation-delay: 0s; }
.mr2 { width: 145px; height: 145px; animation-delay: 0.7s; }
.mr3 { width: 200px; height: 200px; animation-delay: 1.4s; border-color: rgba(41, 242, 219, 0.06); }

@keyframes mock-ring-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* EQ bars */
.mock-eq {
  display:       flex;
  align-items:   flex-end;
  gap:           3px;
  height:        44px;
  margin-top:    auto;
  margin-bottom: 8px;
  position:      relative;
  z-index:       1;
}

.eq-bar {
  width:         6px;
  border-radius: 3px 3px 0 0;
  background:    linear-gradient(0deg, var(--signal-dim), var(--signal));
  animation:     eq-bounce var(--dur, 0.9s) ease-in-out infinite alternate;
}
/* Heights and durations per bar */
.b1 { height: 12px; --dur: 0.82s; animation-delay: 0.00s; }
.b2 { height: 28px; --dur: 0.70s; animation-delay: 0.10s; }
.b3 { height: 18px; --dur: 0.95s; animation-delay: 0.05s; }
.b4 { height: 36px; --dur: 0.60s; animation-delay: 0.15s; }
.b5 { height: 22px; --dur: 0.78s; animation-delay: 0.08s; }
.b6 { height: 40px; --dur: 0.68s; animation-delay: 0.12s; }
.b7 { height: 16px; --dur: 0.88s; animation-delay: 0.03s; }
.b8 { height: 30px; --dur: 0.72s; animation-delay: 0.18s; }
.b9 { height: 10px; --dur: 0.92s; animation-delay: 0.06s; }

@keyframes eq-bounce {
  from { transform: scaleY(0.25); opacity: 0.5; }
  to   { transform: scaleY(1);    opacity: 1; }
}

/* SPL meter */
.mock-spl {
  display:       flex;
  align-items:   center;
  gap:           7px;
  width:         100%;
  margin-bottom: 10px;
  position:      relative;
  z-index:       1;
  flex-shrink:   0;
}

.spl-val {
  font-size:   0.6rem;
  color:       var(--signal);
  white-space: nowrap;
  min-width:   44px;
}

.spl-bar-wrap {
  flex:          1;
  height:        4px;
  background:    rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow:      hidden;
}

.spl-bar-fill {
  height:        100%;
  width:         8%;
  border-radius: 2px;
  background:    linear-gradient(90deg, var(--signal-dim), var(--signal));
  animation:     spl-flicker 1.4s ease-in-out infinite alternate;
}

@keyframes spl-flicker {
  0%   { width: 5%; }
  100% { width: 18%; }
}

.spl-label {
  font-size:      0.52rem;
  font-family:    var(--font-mono);
  color:          var(--text-lo);
  letter-spacing: 0.08em;
  min-width:      28px;
  text-align:     right;
}

/* Record button */
.mock-record-btn {
  position:      relative;
  width:         72px;
  height:        72px;
  border-radius: 50%;
  border:        2px solid var(--signal);
  background:    radial-gradient(circle at 40% 35%, rgba(41, 242, 219, 0.18), rgba(41, 242, 219, 0.06));
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 10px;
  cursor:        default;
  flex-shrink:   0;
  box-shadow:    0 0 0 6px rgba(41, 242, 219, 0.06), 0 0 32px rgba(41, 242, 219, 0.2);
  animation:     btn-pulse 2.5s ease-in-out infinite;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(41, 242, 219, 0.06), 0 0 32px rgba(41, 242, 219, 0.2); }
  50%       { box-shadow: 0 0 0 12px rgba(41, 242, 219, 0.08), 0 0 48px rgba(41, 242, 219, 0.3); }
}

.record-glow {
  position:      absolute;
  inset:         -8px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(41, 242, 219, 0.12) 0%, transparent 70%);
  animation:     glow-breathe 2.5s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* Classification result */
.mock-result {
  font-size:   0.65rem;
  font-family: var(--font-mono);
  color:       var(--text-lo);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   WHAT IT IS — category chips
══════════════════════════════════════════════════════════ */
.what {
  background: rgba(18, 18, 51, 0.4);
  border-top:    1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.what h2 {
  font-size:     clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight:   800;
  margin-bottom: 14px;
}

.section-sub {
  font-size:     1.02rem;
  color:         var(--text-lo);
  max-width:     640px;
  margin-bottom: 40px;
  line-height:   1.7;
}

.category-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
}

.chip {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 18px 9px 14px;
  border-radius: 100px;
  border:        1px solid rgba(41, 242, 219, 0.2);
  background:    rgba(41, 242, 219, 0.05);
  font-size:     0.9rem;
  font-weight:   700;
  color:         var(--signal);
  transition:    background var(--transition), border-color var(--transition);
}
.chip:hover {
  background:   rgba(41, 242, 219, 0.1);
  border-color: rgba(41, 242, 219, 0.4);
}

.chip-icon {
  width:  18px;
  height: 18px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   WHY IT EXISTS
══════════════════════════════════════════════════════════ */
.why-inner {
  display:     flex;
  align-items: flex-start;
  gap:         80px;
}

.why-copy {
  flex: 1 1 0;
}

.why-copy h2 {
  font-size:     clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight:   800;
  line-height:   1.2;
  margin-bottom: 24px;
}

.why-copy p {
  color:         var(--text-lo);
  margin-bottom: 16px;
  line-height:   1.75;
  font-size:     1.02rem;
}
.why-copy p strong { color: var(--text-hi); }
.why-copy p em     { color: var(--text-hi); font-style: italic; }

.why-lead {
  font-size:   1.3rem !important;
  font-weight: 800;
  color:       var(--text-hi) !important;
  margin-top:  8px;
}

/* Stats cards */
.why-visual {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  flex-shrink:    0;
  width:          220px;
}

.why-card {
  background:    rgba(255,255,255,0.04);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding:       20px;
  transition:    transform var(--transition);
}
.why-card:hover { transform: translateY(-2px); }

.why-icon-wrap {
  margin-bottom: 10px;
}

.why-stat-label {
  font-size:     0.78rem;
  color:         var(--text-lo);
  margin-bottom: 4px;
  font-weight:   600;
  letter-spacing: 0.03em;
}

.why-stat {
  font-size:   1.25rem;
  font-weight: 800;
}


/* ══════════════════════════════════════════════════════════
   HOW TO USE — steps
══════════════════════════════════════════════════════════ */
.how {
  border-top: 1px solid var(--border-subtle);
}

.how h2 {
  font-size:     clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight:   800;
  margin-bottom: 48px;
}

.steps {
  display:   grid;
  grid-template-columns: repeat(3, 1fr);
  gap:       24px;
}

.step-card {
  position:      relative;
  background:    rgba(255,255,255,0.03);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding:       36px 28px 30px;
  transition:    transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.step-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(41, 242, 219, 0.2);
  box-shadow:   0 12px 40px rgba(0, 0, 0, 0.4);
}

.step-badge {
  position:      absolute;
  top:           24px;
  right:         24px;
  font-family:   var(--font-mono);
  font-size:     0.7rem;
  font-weight:   700;
  color:         var(--signal);
  opacity:       0.5;
  letter-spacing: 0.04em;
}

.step-icon {
  width:         52px;
  height:        52px;
  border-radius: var(--radius-sm);
  background:    rgba(41, 242, 219, 0.08);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 20px;
  padding:       12px;
}
.step-icon svg { width: 100%; height: 100%; }

.step-card h3 {
  font-size:     1.15rem;
  font-weight:   800;
  margin-bottom: 10px;
}

.step-card p {
  font-size:  0.95rem;
  color:      var(--text-lo);
  line-height: 1.65;
}


/* ══════════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════════ */
.features {
  background:    rgba(18, 18, 51, 0.4);
  border-top:    1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.features h2 {
  font-size:     clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight:   800;
  margin-bottom: 48px;
}

.features-grid {
  display:   grid;
  grid-template-columns: repeat(3, 1fr);
  gap:       20px;
}

.feature-card {
  position:      relative;
  background:    rgba(255,255,255,0.03);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding:       28px;
  transition:    transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
  transform:    translateY(-3px);
  border-color: rgba(41, 242, 219, 0.15);
  box-shadow:   var(--shadow-card);
}

.feature-card--coming-soon {
  border-color: rgba(125, 115, 255, 0.2);
  background:   rgba(125, 115, 255, 0.04);
}
.feature-card--coming-soon:hover {
  border-color: rgba(125, 115, 255, 0.35);
}

.coming-soon-badge {
  position:      absolute;
  top:           18px;
  right:         18px;
  padding:       3px 10px;
  border-radius: 100px;
  border:        1px solid rgba(125, 115, 255, 0.4);
  background:    rgba(125, 115, 255, 0.1);
  color:         var(--pulse);
  font-size:     0.68rem;
  font-weight:   700;
  letter-spacing: 0.04em;
}

.feature-icon {
  width:         46px;
  height:        46px;
  border-radius: var(--radius-sm);
  background:    rgba(41, 242, 219, 0.08);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 18px;
  padding:       10px;
}
.feature-card--coming-soon .feature-icon {
  background: rgba(125, 115, 255, 0.08);
}
.feature-icon svg { width: 100%; height: 100%; }

.feature-card h3 {
  font-size:     1rem;
  font-weight:   800;
  margin-bottom: 8px;
}

.feature-card p {
  font-size:  0.9rem;
  color:      var(--text-lo);
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════
   PRIVACY BAND
══════════════════════════════════════════════════════════ */
.privacy-band {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(41, 242, 219, 0.06) 0%, rgba(41, 158, 235, 0.04) 100%);
  border-top:    1px solid rgba(41, 242, 219, 0.15);
  border-bottom: 1px solid rgba(41, 242, 219, 0.15);
}

.privacy-inner {
  display:     flex;
  align-items: flex-start;
  gap:         48px;
}

.privacy-glyph {
  flex-shrink:  0;
  margin-top:   4px;
  width:        80px;
  height:       80px;
  border-radius: 50%;
  background:   rgba(41, 242, 219, 0.08);
  border:       1px solid rgba(41, 242, 219, 0.2);
  display:      flex;
  align-items:  center;
  justify-content: center;
}

.privacy-copy h2 {
  font-size:     clamp(1.6rem, 3vw, 2.4rem);
  font-weight:   900;
  margin-bottom: 28px;
  line-height:   1.2;
}

.privacy-list {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.privacy-list li {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  font-size:   0.98rem;
  line-height: 1.55;
  color:       var(--text-lo);
}

.privacy-list li strong { color: var(--text-hi); }

.check {
  flex-shrink:  0;
  width:        20px;
  height:       20px;
  margin-top:   1px;
}


/* ══════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════ */
.faq-inner {
  max-width: 800px;
}

.faq-inner h2 {
  font-size:     clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight:   800;
  margin-bottom: 40px;
}

.faq-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
  border-top:     1px solid var(--border-subtle);
}

.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}

.faq-q {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       20px 0;
  font-size:     1.02rem;
  font-weight:   700;
  cursor:        pointer;
  user-select:   none;
  list-style:    none;
  gap:           12px;
  color:         var(--text-hi);
  transition:    color var(--transition);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { display: none; }

/* Chevron via pseudo */
.faq-q::after {
  content:     '';
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:  transform var(--transition);
}

.faq-item[open] .faq-q::after {
  transform: rotate(180deg);
}

.faq-item[open] .faq-q { color: var(--signal); }

.faq-q:hover { color: var(--signal); }
.faq-q:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 3px;
}

.faq-a {
  padding:       0 0 20px;
  animation:     faq-open 0.18s ease-out;
}
.faq-a p {
  color:       var(--text-lo);
  font-size:   0.96rem;
  line-height: 1.7;
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════════════════════════
   NOTIFY
══════════════════════════════════════════════════════════ */
.notify {
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}

.notify-inner {
  max-width: 560px;
}

.notify h2 {
  font-size:     clamp(1.9rem, 4vw, 3rem);
  font-weight:   900;
  line-height:   1.15;
  margin-bottom: 12px;
}

.notify-sub {
  color:         var(--text-lo);
  font-size:     0.96rem;
  margin-bottom: 36px;
}

.notify-form { width: 100%; }

.form-row {
  display:       flex;
  gap:           10px;
  flex-wrap:     wrap;
}

.form-row input[type="email"] {
  flex:          1 1 220px;
  padding:       13px 18px;
  border-radius: var(--radius-md);
  border:        1.5px solid rgba(255,255,255,0.15);
  background:    rgba(255,255,255,0.06);
  color:         var(--text-hi);
  font-family:   var(--font-display);
  font-size:     1rem;
  outline:       none;
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.form-row input[type="email"]::placeholder { color: var(--text-lo); }
.form-row input[type="email"]:focus {
  border-color: var(--signal);
  box-shadow:   0 0 0 3px rgba(41, 242, 219, 0.12);
}

.form-status {
  margin-top:  12px;
  font-size:   0.9rem;
  font-weight: 600;
  min-height:  1.5em;
  color:       var(--signal);
}
.form-status.error { color: var(--hot); }


/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer {
  padding:       48px 0 40px;
  border-top:    1px solid var(--border-subtle);
  text-align:    center;
}

.footer-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
}

.footer-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   1.2rem;
  font-weight: 900;
}
.footer-brand img {
  border-radius: 12px;
  width:  36px;
  height: 36px;
}

.footer-tagline {
  color:     var(--text-lo);
  font-size: 0.9rem;
  margin-top: 4px;
}

.footer-copy {
  color:     var(--text-lo);
  font-size: 0.82rem;
}


/* ══════════════════════════════════════════════════════════
   INTERSECTION-OBSERVER FADE-INS
══════════════════════════════════════════════════════════ */
.fade-in {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in.visible {
  opacity:   1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 900px)
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-inner {
    flex-direction: column;
    gap: 40px;
  }
  .why-visual {
    flex-direction: row;
    width: 100%;
  }
  .why-card {
    flex: 1;
  }
  .privacy-inner {
    flex-direction: column;
    gap: 28px;
  }
  .hero-inner {
    flex-direction: column-reverse;
    gap: 48px;
  }
  .hero-copy h1 { text-align: center; }
  .hero-sub     { text-align: center; max-width: 100%; }
  .hero-ctas    { justify-content: center; }
  .hero-badge   { display: block; text-align: center; }
  .sonar-rings, .radar-sweep { right: auto; left: 50%; transform: translate(-50%, -50%); }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 600px)
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .section { padding: 64px 0; }

  /* Nav mobile */
  .nav-toggle { display: flex; }
  .nav-links {
    position:   fixed;
    top:        var(--nav-h);
    left:       0;
    right:      0;
    bottom:     0;
    background: rgba(8, 10, 28, 0.97);
    flex-direction: column;
    justify-content: center;
    align-items:    center;
    gap:            32px;
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--transition);
    z-index:        99;
  }
  .nav-links.open {
    opacity:        1;
    pointer-events: auto;
  }
  .nav-links a {
    font-size: 1.25rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .why-visual {
    flex-direction: column;
  }

  .hero-ctas {
    flex-direction: column;
  }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .form-row {
    flex-direction: column;
  }
  .form-row .btn { width: 100%; justify-content: center; }

  .phone-frame {
    width:  200px;
    height: 400px;
  }
}

/* ── Legal / support pages ───────────────────────────────── */
.legal {
  padding: calc(var(--nav-h) + 56px) 0 96px;
}
.legal .container {
  max-width: 760px;
}
.legal h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 900;
  margin-bottom: 8px;
}
.legal .effective {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-lo);
  margin-bottom: 36px;
}
.legal h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 36px 0 12px;
}
.legal p, .legal li {
  color: var(--text-lo);
  line-height: 1.75;
  margin-bottom: 12px;
}
.legal ul {
  padding-left: 22px;
}
.legal strong {
  color: var(--text-hi);
}
.legal a {
  color: var(--signal);
}
.legal .callout {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--hot);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 32px 0;
}