:root{
  --bg:#070B0F;
  --bg2:#0B1017;
  --card:#0E141C;
  --line:#1B2531;
  --line2:#26323F;
  --txt:#E8EFF5;
  --dim:#7C8B9C;
  --faint:#4A5866;
  --ox:#3DDC84;
  --ox-deep:#1B6B44;
  --alarm:#E2606B;
  --amber:#E8B93D;
  --amber-deep:#8A6A18;
  --blue:#5B8DEF;
  --blue-deep:#28407D;
  --violet:#A090C9;
  --display:'Barlow Condensed',system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--body);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.btn,.wordmark{font-family:var(--display)}
.mono{font-family:var(--mono)}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ===== DEMO BANNER — mandatory, persistent, unmissable ===== */
.demoband{
  position:sticky;top:0;z-index:100;
  background:repeating-linear-gradient(135deg,var(--amber-deep),var(--amber-deep) 10px,#6b5211 10px,#6b5211 20px);
  color:#1a1400;padding:8px 16px;text-align:center;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
}
.demoband b{background:#1a1400;color:var(--amber);padding:2px 8px;border-radius:3px;margin:0 4px}

/* ===== HEADER ===== */
header{border-bottom:1px solid var(--line);background:rgba(7,11,15,.9);backdrop-filter:blur(6px);position:sticky;top:33px;z-index:99}
.hd{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1080px;margin:0 auto}
.wordmark{font-size:20px;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--txt)}
.wordmark .ex{color:var(--ox)}
.hnav{display:flex;gap:22px;align-items:center;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.hnav a{text-decoration:none;color:var(--dim)}
.hnav a:hover{color:var(--txt)}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:7px;
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .12s,border-color .12s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ox);color:#04150A}
.btn-primary:hover{background:#4EE894}
.btn-ghost{border-color:var(--line2);color:var(--txt);background:transparent}
.btn-ghost:hover{border-color:var(--ox-deep)}

section{padding:64px 0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ox-deep)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}

footer{border-top:1px solid var(--line);padding:32px 0;color:var(--faint);font-family:var(--mono);font-size:11.5px;text-align:center}

@media(max-width:720px){
  .hnav{display:none}
  section{padding:40px 0}
}