:root{
  --bg-1:#160f28;
  --bg-2:#2a1b63;
  --accent:#6cf6e7;
  --card:rgba(255,255,255,.06);
  --text:#fff;
  --muted:rgba(255,255,255,.75);
  --ring:rgba(108,246,231,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, var(--bg-2), var(--bg-1));
}

.wrap{width:min(1100px, 92vw); margin:0 auto;}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter:saturate(120%) blur(12px);
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); padding:12px 0; z-index:5;}
.site-header .brand{font-weight:800; text-decoration:none; color:var(--text); font-size:22px}
.site-header nav a{color:var(--muted); margin-left:18px; text-decoration:none}
[aria-current="page"]{color:var(--text); font-weight:700}

/* Hero */
.hero{display:grid; place-items:center; padding:52px 0 40px}
.hero-card{
  width:100%; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:36px;
  box-shadow:0 20px 60px rgba(0,0,0,.4); position:relative; overflow:hidden;
}
.hero-card::before{
  /* neon ring accent */
  content:""; position:absolute; inset:auto auto -120px -120px; width:540px; height:540px;
  border-radius:50%; box-shadow:0 0 0 80px var(--ring), 0 0 40px 100px rgba(108,246,231,.18);
  outline:1px solid rgba(108,246,231,.55);
  filter:blur(2px);
}
.hero h2{font-size:40px; margin:6px 0 10px}
.hero p{color:var(--muted); max-width:800px}
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px}
.tile{background:var(--card); border:1px solid rgba(255,255,255,.12); padding:14px 16px; border-radius:16px}
.tile strong{display:block}

.btn{
  display:inline-block; padding:12px 18px; border-radius:14px; text-decoration:none;
  color:#061012; background:var(--accent); font-weight:800; box-shadow:0 8px 28px rgba(108,246,231,.25);
  border:1px solid rgba(0,0,0,.25);
}
.btn[aria-disabled="true"]{opacity:.7; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.3); box-shadow:none; margin-left:10px}

/* Page */
.page{padding:40px 0 60px}
.page h1{font-size:34px; margin:8px 0 18px}
.card{background:var(--card); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:20px; margin:16px 0}
details{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:12px 14px; border-radius:12px; margin:10px 0}

/* Footer */
.site-footer{padding:18px 0 34px; color:var(--muted)}
.site-footer a{color:var(--muted); text-decoration:none}
.spacer{opacity:.5; margin:0 8px}
@media (max-width:800px){
  .tiles{grid-template-columns:1fr; }
}