/* Shared stylesheet for secondary pages (privacy, terms, accessibility, 404)
 * Mirrors the index.html design tokens — kept in sync manually until v1.1.
 */
:root{
  --primary-base: #0D47A1;
  --primary-base-2: #1156c4;
  --primary-accent: #00E5FF;
  --neutral-dark: #0F172A;
  --neutral-darker: #070C18;
  --neutral-light: #F8FAFC;
  --neutral-light-2: #EEF2F7;
  --ui-border: #E2E8F0;
  --ink: #0F172A;
  --ink-muted: #475569;
  --ink-inverse: #F8FAFC;
  --ink-inverse-muted: #A6B3C7;

  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'JetBrains Mono', SFMono-Regular, monospace;

  --radius-sm: 4px;
  --radius-md: 6px;

  --container: 880px;
  --gutter: 24px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
*,*::before,*::after{ box-sizing:border-box }
/* Defensive horizontal overflow guard (1.1.0) — matches index.html. The
   `overflow-x: clip` declaration wins on modern browsers and preserves
   sticky behaviour; older mobile Chrome falls back to `hidden`. */
html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
}
body{
  background: var(--neutral-light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: var(--primary-base); text-decoration: underline; text-underline-offset: 2px }
a:hover{ color: var(--primary-base-2) }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) }

/* Slim nav */
header.nav{
  background: var(--neutral-light);
  border-bottom: 1px solid var(--ui-border);
  padding: 16px 0;
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(140%) blur(8px);
}
header.nav .container{ display:flex; justify-content: space-between; align-items: center }
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.02em;
  font-size: 16px; color: var(--ink); text-decoration: none;
}
.brand-mark{
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--neutral-dark);
  position: relative; overflow: hidden;
}
.brand-mark::before, .brand-mark::after{
  content:""; position:absolute; left:-2px; right:-2px;
  height:1.5px; background: var(--primary-accent);
  box-shadow: 0 0 6px rgba(0,229,255,0.7);
}
.brand-mark::before{ top: 9px; transform: rotate(-12deg) }
.brand-mark::after{ bottom: 9px; transform: rotate(12deg); background: #fff; box-shadow:none; opacity:0.55 }
.brand-amp{ color: var(--primary-base); margin: 0 1px }

.nav-back{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-decoration: none;
}
.nav-back:hover{ color: var(--ink) }

main{ padding: 64px 0 96px }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-base);
  font-weight: 500;
  display: inline-flex;
  align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.eyebrow::before{
  content: ""; width: 24px; height: 1px; background: currentColor;
}

h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
}
h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 28px 0 8px;
}
p{ margin: 0 0 14px; max-width: 70ch; color: var(--ink-muted) }
ul{ padding-left: 20px; margin: 0 0 14px; color: var(--ink-muted); max-width: 70ch }
li{ margin-bottom: 6px }
strong{ color: var(--ink) }

.lede{
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 60ch;
  margin-bottom: 28px;
}

.meta{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  border-top: 1px solid var(--ui-border);
  padding-top: 16px;
  margin-top: 48px;
}

footer{
  background: var(--neutral-darker);
  color: var(--ink-inverse-muted);
  padding: 32px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
footer .container{ display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
footer a{ color: var(--ink-inverse); text-decoration: none }
footer a:hover{ color: var(--primary-accent) }

/* 404 specific */
.notfound-hero{
  text-align: center;
  padding: 96px 0 48px;
}
.notfound-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(120px, 22vw, 240px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #00E5FF 0%, #0D47A1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 16px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  background: var(--primary-base);
  color: #fff;
  text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease);
  box-shadow: 0 8px 28px rgba(13,71,161,0.25);
}
.btn:hover{
  transform: translateY(-1px);
  background: var(--primary-base-2);
  color: #fff;
  box-shadow: 0 0 0 1px var(--primary-accent), 0 0 24px rgba(0,229,255,0.35);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: 0ms !important; transition-duration: 0ms !important }
}