:root {
  --ink:#eaf4ff; --dim:#9fb4cf; --amber:#ffc46b; --hot:#ff9b3d; --deep:#0a1020;
  --panel:#111a2e; --line:#22304c;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:
    radial-gradient(1200px 500px at 70% -5%, #2a2044 0%, transparent 60%),
    radial-gradient(900px 400px at 20% 8%, #3a2033 0%, transparent 55%),
    var(--deep);
  color:var(--ink);
  font:16px/1.65 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x:hidden;
}
h1,h2 { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
main { max-width:1080px; margin:0 auto; padding:0 22px 40px; }
section { margin:52px 0; }
h2 { font-size:24px; letter-spacing:.14em; color:var(--amber); margin-bottom:14px; text-transform:uppercase; }
p { color:var(--dim); max-width:70ch; }

.hero {
  display:grid; grid-template-columns:minmax(320px,1fr) minmax(340px,1.15fr);
  gap:34px; align-items:center;
  max-width:1080px; margin:0 auto; padding:56px 22px 30px;
}
.eyebrow { letter-spacing:.35em; font-size:11px; color:#7fe8c9; margin-bottom:12px; }
h1 { font-size:clamp(38px,7vw,64px); letter-spacing:.06em; color:#fff;
  text-shadow:0 0 34px #ff7a2d55; line-height:1.05; }
h1 span { display:block; font-size:.42em; color:var(--amber); letter-spacing:.3em; margin-top:10px; }
.tagline { font-size:clamp(15px,2.2vw,19px); color:var(--ink); margin:18px 0 26px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.btn {
  display:inline-block; text-decoration:none; font-weight:700; letter-spacing:.18em;
  font-size:15px; color:#12100a; padding:15px 30px; border-radius:12px;
  background:linear-gradient(180deg,#ffd9a0,#ff9b3d);
  box-shadow:0 6px 28px #ff9b3d55, 0 0 0 1px #ffd9a066 inset;
}
.btn:hover { filter:brightness(1.12); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--amber); box-shadow:0 0 0 1px #ffc46b66 inset; }
.hero-stage { position:relative; }
#hero-preview {
  display:block; width:100%; aspect-ratio:16/10; border-radius:16px;
  background:#0d1322; box-shadow:0 20px 60px #000a, 0 0 0 1px #ffc46b33;
  overflow:hidden; position:relative;
}
#hero-preview canvas { display:block; width:100%; height:100%; }
.stage-cap { position:absolute; bottom:8px; right:14px; font-size:11px; letter-spacing:.2em;
  color:#7fe8c999; text-transform:uppercase; }

.band { background:linear-gradient(180deg,#131c31, #0e1526); border:1px solid var(--line);
  border-radius:16px; padding:28px 30px; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
#gallery img { width:100%; border-radius:12px; border:1px solid var(--line);
  box-shadow:0 12px 30px #0008; background:#0d1322; min-height:120px; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
#features { list-style:none; display:flex; flex-direction:column; gap:12px; }
#features li { padding:12px 14px 12px 40px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; position:relative; color:var(--ink); }
#features li::before { content:"✦"; position:absolute; left:15px; color:var(--hot); }
.controls-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.controls-card p { margin-bottom:12px; }
.controls-card table { width:100%; border-collapse:collapse; margin-bottom:14px; }
.controls-card td { padding:5px 8px; border-bottom:1px dashed var(--line); font-size:14px; color:var(--ink); }
.controls-card td:first-child { color:var(--amber); font-family:ui-monospace,Menlo,monospace; white-space:nowrap; }
.controls-card .btn { margin-top:8px; }
footer { border-top:1px solid var(--line); padding:26px 22px 44px; text-align:center; }
footer p { font-size:12px; letter-spacing:.14em; color:#5f7392; margin:0 auto; }

@media (max-width:760px) {
  .hero { grid-template-columns:1fr; padding-top:36px; gap:22px; }
  .two-col { grid-template-columns:1fr; }
}