:root{
  --bg:#0c0c0f; --fg:#e8e8f1; --muted:#9aa0aa;
  --accent:#ffb300; --accent2:#37d7ff; --accent3:#ff4d9d;
  --card:#14141a; --border:#272733; --shadow:0 10px 30px rgba(0,0,0,.45); --radius:20px;
}
*{ box-sizing:border-box } html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial }
img{ max-width:100%; height:auto; display:block } code,pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace }

.container{ width:min(1100px,92%); margin-inline:auto }

.site-header{ position:sticky; top:0; backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(180deg, rgba(12,12,15,.85), rgba(12,12,15,.35));
  border-bottom:1px solid var(--border); z-index:20 }
.nav{ display:flex; align-items:center; gap:1rem; padding:.7rem 0 }
.brand{ font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--fg); text-decoration:none }
.menu{ list-style:none; display:flex; gap:1rem; margin:0 0 0 auto; padding:0 }
.menu a{ color:var(--fg); text-decoration:none; padding:.4rem .7rem; border-radius:12px; border:1px solid transparent }
.menu a:hover{ border-color:var(--border); background:#161622 }
.nav-toggle{ display:none; margin-left:auto; background:transparent; border:1px solid var(--border); color:var(--fg); padding:.35rem .6rem; border-radius:10px }
@media (max-width:720px){
  .menu{ display:none; flex-direction:column; background:#0f0f15; position:absolute; right:4%; top:56px; padding:.6rem; border:1px solid var(--border); border-radius:14px }
  .nav-toggle{ display:block } .menu.open{ display:flex }
}

.hero{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; padding:clamp(1rem,3vw,2rem) 0 2rem }
.hero-art{ position:relative; isolation:isolate; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); background:#111 }
.hero-art::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 15% 10%, rgba(255,179,0,.25), transparent 50%),
    radial-gradient(60% 50% at 85% 20%, rgba(55,215,255,.18), transparent 45%),
    radial-gradient(80% 70% at 50% 100%, rgba(255,77,157,.2), transparent 55%);
  mix-blend-mode:screen; pointer-events:none }
.hero-text h1{ font-size:clamp(2rem,4.5vw,3.6rem); line-height:1.1; margin:.25rem 0 .25rem }
.hero-text h1 span{ color:var(--accent2); text-shadow:0 0 12px rgba(55,215,255,.45) }
.tagline{ color:var(--muted); margin:.25rem 0 1rem; font-size:1.1rem }
.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin:.5rem 0 1rem }
.btn{ cursor:pointer; display:inline-block; padding:.7rem 1rem; border-radius:14px; border:1px solid var(--border); text-decoration:none; color:var(--fg);
  transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease }
.btn:hover{ transform:translateY(-1px) }
.btn.primary{ background:linear-gradient(90deg,var(--accent2),var(--accent3)); color:#0b0b10; font-weight:700; border:0 }
.btn.ghost{ background:#141421 }
.meta{ color:var(--muted); font-size:.95rem }
@media (max-width:900px){ .hero{ grid-template-columns:1fr } }

.panel{ margin:2.2rem auto; background:linear-gradient(180deg,#11121a,#0f0f16); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow) }
.panel h2{ margin-top:.2rem }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:.8rem }
@media (max-width:920px){ .cards{ grid-template-columns:1fr } }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:.9rem }
pre{ background:#0f0f16; border:1px dashed var(--border); border-radius:12px; padding:.6rem; overflow:auto }

.features{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1.2rem; padding-left:1rem }
@media (max-width:720px){ .features{ grid-template-columns:1fr } }
.rules{ padding-left:1.2rem }
.note{ color:var(--muted); margin-top:.6rem }

.site-footer{ border-top:1px solid var(--border); margin-top:2.5rem }
.site-footer .container{ padding:1.2rem 0; color:var(--muted) }
.noscript{ background:#201; color:#f9d; padding:.5rem 1rem; text-align:center }