/* ========== Zero Resonance – Base Theme ========== */
:root{
  /* Neo-Noir Cyberpunk */
  --bg:#07090d;             /* deep noir */
  --bg-2:#0d1117;           /* cards/sections */
  --panel:#0f1624;          /* subtle panels */
  --text:#d9e4ef;           /* primary text */
  --muted:#8ca3b6;          /* secondary text */

  /* Neon accents (accessible on dark) */
  --accent:#17d4ff;         /* electric cyan */
  --accent-2:#ff3fa4;       /* neon magenta */
  --accent-amber:#ffc857;   /* warm detail (sparingly) */

  /* UI */
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --shadow-soft:0 10px 28px rgba(0,0,0,.30);

  /* Layout & type */
  --maxw:1120px;
  --pad:clamp(16px, 2vw, 24px);
  --pad-lg:clamp(20px, 3vw, 32px);
  --gap:clamp(16px, 2.2vw, 24px);

  --h1:clamp(36px, 4.5vw, 60px);
  --h2:clamp(26px, 3.2vw, 38px);
  --h3:clamp(20px, 2.2vw, 24px);
  --lead:clamp(16px, 1.4vw, 18px);

  --font: "Inter", ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

}


/* Reset-ish, accessibility */
*{box-sizing:border-box}
html,body{height:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}
body{
  margin:0; font-family:var(--font); background:linear-gradient(180deg, #070a0d 0%, var(--bg) 60%, #080b10 100%);
  color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Utilities */
.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.stack>*+*{margin-top:var(--gap)}
.grid-2{display:grid; gap:var(--gap); grid-template-columns:1fr; }
.grid-3{display:grid; gap:var(--gap); grid-template-columns:1fr; }
.center{text-align:center}
.muted{color:var(--muted)}
.card{background:var(--bg-2); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:var(--pad-lg)}
hr{border:0; height:1px; background:linear-gradient(90deg, transparent, #20303e, transparent); margin:var(--pad-lg) 0}

/* Links & buttons */
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.8rem 1.2rem; border-radius:999px; font-weight:600; text-decoration:none; border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-cta{background:radial-gradient(120% 120% at 30% 20%, rgba(33,198,240,.25), rgba(33,198,240,.05) 60%), linear-gradient(180deg, #1f9cc0, #1485a6);
  color:white; box-shadow:0 8px 30px rgba(33,198,240,.25)}
.btn-cta:hover{box-shadow:0 10px 40px rgba(33,198,240,.35)}
.btn-secondary{background:#1a2230; color:#dbe7f3; border-color:#2b3a4a}
.btn-secondary:hover{background:#1d2837}
.btn-ghost{background:transparent; color:var(--text); border-color:#2b3a4a}
.btn-ghost:hover{background:#121924}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px);
  background:linear-gradient(180deg, rgba(5,8,12,.9), rgba(5,8,12,.6) 60%, rgba(5,8,12,0));
  border-bottom:1px solid rgba(54,74,92,.25);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:12px var(--pad)}
.brand{font-weight:800; letter-spacing:.4px; color:#e8f3fb}
.brand:hover{text-decoration:none}
.nav a{padding:.5rem .8rem; border-radius:8px}
.nav a:hover{background:#111823}

/* Hero */
.hero{padding:clamp(36px, 6vw, 80px) 0}
.hero .wrap{display:grid; gap:var(--gap); grid-template-columns:1fr}
.hero .copy h1{font-size:var(--h1); line-height:1.08; margin:0}
.hero .copy p{font-size:var(--lead); color:var(--muted); margin:.8rem 0 1.2rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.8rem}
.badge{display:inline-block; font-size:12px; letter-spacing:.6px; color:#9ddaf0; border:1px solid #1f3344; padding:.25rem .55rem; border-radius:999px; margin-bottom:.5rem}

/* Media (responsive iframe) */
.media{position:relative; width:100%; border-radius:var(--radius); overflow:hidden; background:#0b1219; box-shadow:var(--shadow)}
.media:before{content:""; display:block; padding-top:56.25%} /* 16:9 */
.media > iframe, .media > video, .media > img{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Feature cards */
.features{padding:clamp(24px, 5vw, 64px) 0}
.grid-3 .card h3{font-size:var(--h3); margin:.2rem 0 .4rem}
.grid-3 .card p{color:var(--muted); margin:0}

/* Kickstarter block */
.kickstarter{padding:clamp(24px, 5vw, 64px) 0}
.ks-embed{background:#0b1219; border:1px solid #152332; border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow-soft)}

/* Press/newsletter */
.section{padding:clamp(24px, 5vw, 64px) 0}

/* Footer */
.site-footer{border-top:1px solid rgba(54,74,92,.25); padding:20px var(--pad); color:var(--muted); font-size:14px}

/* Small screens first; enhance ≥ 780px */
@media (min-width:780px){
  .grid-2{grid-template-columns:1.1fr .9fr}
  .grid-3{grid-template-columns:repeat(3, 1fr)}
  .hero .wrap{grid-template-columns:1.05fr .95fr; align-items:center}
}

/* Fun neon accents (sparingly) */
.accent{
  position:relative;
  background:linear-gradient(90deg, rgba(33,198,240,.06), rgba(255,63,164,.06));
  border:1px solid rgba(33,198,240,.15);
  box-shadow:inset 0 0 50px rgba(33,198,240,.06);
  border-radius:var(--radius);
}
/* === Extra Neon Effects === */
.neon {
  box-shadow:0 0 0px rgba(23,212,255,.0), 0 0 24px rgba(23,212,255,.25);
}

.btn-cta:hover {
  box-shadow:0 0 24px rgba(23,212,255,.32), 0 8px 32px rgba(23,212,255,.18);
}

hr {
  background:linear-gradient(90deg, transparent, #1b2936, transparent);
}