/* ===== Design System (v3 SEO) ===== */
:root{
  --cover-blue: #0b1e2a;
  --cover-blue-2:#0e2a3a;
  --cover-red:  #e0463b;
  --cover-red-2:#b51f1f;

  --bg: var(--cover-blue);
  --bg-2:#0f2230;
  --fg: #e9edf2;
  --fg-dim:#b9c4cf;
  --card:#111923;
  --muted:#0a151e;

  --accent: var(--cover-red);
  --accent-2: #6bb1ff;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --grid: clamp(14px, 1.4vw, 18px);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fb; --bg-2:#eef1f6; --fg:#0b1218; --fg-dim:#3e4b58; --card:#ffffff; --muted:#e9eef6; }
}

*{ box-sizing:border-box; }
html:focus-within { scroll-behavior: smooth; }
html,body{ min-height:100%; }
body{
  margin:0; font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 520px at 80% -10%, rgba(224,70,59,.08) 0%, transparent 45%), var(--bg);
  letter-spacing:.2px;
}
a{ color:var(--accent-2); text-decoration: none; }
a:hover{ text-decoration: underline; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left: 10px; top:10px; width:auto; height:auto; padding:8px 10px; background:#000; color:#fff; border-radius:8px; }

.wrap{ max-width: 1200px; margin:0 auto; padding: 0 20px; }

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg), transparent 15%);
  border-bottom:1px solid color-mix(in srgb, var(--fg), transparent 90%);
}
.nav{ display:flex; align-items:center; justify-content: space-between; padding: 14px 0; }
.brand{ display:flex; gap:12px; align-items:center; }
.brand .logo{ width:30px; height:30px; border-radius:6px; background: conic-gradient(from 0deg, var(--cover-red), var(--cover-blue-2), var(--cover-red)); box-shadow: 0 0 0 1px #000 inset; }
.brand strong{ letter-spacing: .8px; }
nav ul{ display:flex; gap:22px; margin:0; padding:0; list-style:none; }
nav a{ color:var(--fg-dim); font-weight:600 }

/* CTA + Buttons → FLAT */
.cta, .btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px;
  background: var(--accent); color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  border:1px solid color-mix(in srgb, var(--accent), #000 25%); box-shadow:none; transform: translateY(0); transition: background .15s ease, transform .15s ease;
}
.cta:hover, .btn:hover{ background: color-mix(in srgb, var(--accent), white 8%); text-decoration:none; transform: translateY(-1px); }
.cta--ghost{
  background: transparent; color: var(--fg); border:1px solid color-mix(in srgb, var(--fg), transparent 70%);
}
button{
  padding:12px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--accent), #000 25%);
  background: var(--accent); color:#fff; font-weight:800; box-shadow:none; cursor:pointer;
}
button:hover{ background: color-mix(in srgb, var(--accent), white 8%); }
button:disabled{ opacity:.6; cursor:not-allowed; }

/* HERO */
.hero{ position:relative; overflow:hidden; min-height: clamp(560px, 88vh, 940px); display:grid; align-items:center; border-bottom: 1px solid color-mix(in srgb, var(--fg), transparent 90%); }
.hero-grid{ display:grid; grid-template-columns: 1.12fr .88fr; gap: clamp(24px, 5vw, 60px); align-items:center; }
@media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero h1{
  font-weight:900; line-height:1.08; margin: 0 0 12px 0;
  font-size: clamp(38px, 6.4vw, 90px);
  letter-spacing:.3px;
  background: linear-gradient(180deg, #fff, #c8d2db 70%); -webkit-background-clip: text; color: transparent;
  text-wrap: balance;
}
.sub{ color:var(--fg-dim); font-size: clamp(16px, 2.1vw, 20px); margin: 10px 0 22px; text-wrap: pretty; }
.pill{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:6px 10px; border-radius:999px; background: color-mix(in srgb, var(--cover-red), transparent 82%); color: var(--cover-red); border:1px solid color-mix(in srgb, var(--cover-red), transparent 62%); }

.controls{ display:grid; gap:16px; background:var(--card); border:1px solid color-mix(in srgb, var(--fg), transparent 90%); padding:16px; border-radius: var(--radius); }
.slider-row{ display:grid; grid-template-columns: 120px 1fr auto; align-items:center; gap:14px; }
input[type="range"]{ width:100%; accent-color: var(--cover-red); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .95rem; color: var(--fg-dim); }

/* Echo Card */
.echo-card{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius);
  background: radial-gradient(800px 520px at 80% -20%, rgba(224,70,59,.14), transparent), var(--muted);
  border:1px solid color-mix(in srgb, var(--fg), transparent 88%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
canvas{ width:100%; height:100%; display:block; }
.legend{
  position:absolute; inset:auto 12px 12px auto; background: color-mix(in srgb, var(--bg), transparent 30%); backdrop-filter: blur(6px);
  border:1px solid color-mix(in srgb, var(--fg), transparent 85%); border-radius:12px; padding:10px 12px; font-size:12px; color:var(--fg-dim);
}

/* Sections */
section{ padding: clamp(42px, 8vw, 90px) 0; border-bottom:1px solid color-mix(in srgb, var(--fg), transparent 90%); }
h2{ font-size: clamp(26px, 4.2vw, 44px); margin:0 0 12px 0; }
.cols{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4vw, 40px); align-items:start; }
@media (max-width: 960px){ .cols{ grid-template-columns:1fr; } }

.card{ background:var(--card); border:1px solid color-mix(in srgb, var(--fg), transparent 90%); border-radius: var(--radius); padding: clamp(16px, 2vw, 22px); box-shadow: var(--shadow); }

/* Book cover card */
.cover{ position:relative; overflow:hidden; border-radius: var(--radius); }
.cover img{ width:100%; height:auto; display:block; filter: saturate(92%); }

blockquote{ margin:0; padding: 0 0 0 14px; border-left:3px solid var(--cover-blue-2); color:var(--fg); }
blockquote + blockquote{ margin-top:12px; }
.cite{ display:block; color:var(--fg-dim); font-size:12px; margin-top:6px; }

/* Form */
.form{ display:grid; grid-template-columns: 1fr auto; gap:12px; }
input[type="email"]{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--fg), transparent 85%); background: var(--bg-2); color:var(--fg); }

/* Footer */
footer{ padding: 40px 0; color:var(--fg-dim); font-size:14px; }
.foot{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content: space-between; }

/* A11y + Motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip: rect(1px,1px,1px,1px); white-space:nowrap; }

/* Overlays (Easter Eggs) */
.overlay{ position: fixed; inset:0; background: color-mix(in srgb, var(--bg), transparent 12%);
  backdrop-filter: blur(8px) saturate(120%); display:none; place-items:center; z-index:999; }
.overlay.active{ display:grid; }
.panel{ max-width: 780px; background: var(--card); border:1px solid color-mix(in srgb, var(--fg), transparent 85%); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.panel h3{ margin-top:0; }
.chip{ display:inline-block; padding:6px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--fg), transparent 80%); margin: 6px 6px 0 0; color: var(--fg-dim); font-size: 12px; }

/* Details/summary FAQ */
details{ background: var(--card); border:1px solid color-mix(in srgb, var(--fg), transparent 90%); border-radius: 12px; padding: 12px 16px; }
details + details{ margin-top: 10px; }
summary{ cursor:pointer; font-weight:600; }


/* === Minimal Header/Mobile Fix (ONLY nav + width) === */
:root{ --navH: 42px; }
html, body { overflow-x: hidden; }

header nav ul{ display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none; }
header nav a{ display:inline-flex; align-items:center; height:var(--navH); padding:0 10px; line-height:1; border-radius:10px; }
header nav a.cta{ height:var(--navH); padding:0 14px; }

.menu-toggle{
  display:none; -webkit-tap-highlight-color: transparent;
  border:1px solid color-mix(in srgb, var(--fg), transparent 80%);
  background: var(--card); color: var(--fg);
  border-radius:10px; padding:10px 12px; line-height:1; cursor:pointer;
}

@media (max-width: 880px){
  header .nav{ position:relative; gap:10px; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  header nav ul{
    display:none; position:absolute; top:calc(100% + 8px);
    left:20px; right:20px; padding:10px; background:var(--card);
    border:1px solid color-mix(in srgb, var(--fg), transparent 88%);
    border-radius:12px; box-shadow: var(--shadow); z-index:60;
  }
  header nav[data-open="true"] ul{ display:grid; gap:6px; }
  header nav a{ height:44px; border-radius:10px; padding:0 12px; }
  .wrap{ padding: 0 16px; }
  .panel{ max-width: min(780px, calc(100vw - 28px)); }
}

body.nav-open{ overflow:hidden; }



/* Prevent menu overlay from causing page-length issues on small screens */
@media (max-width: 880px){
  header nav ul{
    max-height: calc(100vh - 120px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}