:root{
  --bg:#0a1016; --bg2:#0e1622; --txt:#e8eef7; --muted:#9db2c8;
  --pri:#35a3ff; --gold:#d8a64a; --stroke:#1b2633;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 90% -10%, rgba(53,163,255,.08), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(216,166,74,.08), transparent 60%),
              linear-gradient(180deg, #0a1016, #0d141d 40%, #0b121a);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px, 48px 48px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 60%, transparent 100%);
  pointer-events:none;
}
.wrap{max-width:1120px;margin:auto;padding:20px}

/* Top hero centered */
.top-center{
  text-align:center;
  padding:36px 20px 22px;
  background: linear-gradient(135deg, rgba(53,163,255,.10), rgba(216,166,74,.08));
  border:1px solid var(--stroke);
  border-radius:20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-logo{
  width:240px;height:240px;border-radius:20px;display:block;margin:0 auto 12px auto;
  box-shadow:0 0 0 3px rgba(216,166,74,.25);
  animation: popin .7s ease-out both;
}
@keyframes popin{
  from{opacity:0; transform:scale(.92)}
  to{opacity:1; transform:scale(1)}
}
.tagline{color:var(--muted); margin:6px 0 12px}

/* Buttons */
.btn{
  display:inline-block; padding:11px 18px; border-radius:12px; text-decoration:none;
  font-weight:800; letter-spacing:.3px;
  background: linear-gradient(180deg, var(--pri), #2b84d3);
  color:#031121; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(53,163,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition:.2s transform, .2s box-shadow;
  margin:0 6px;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 15px rgba(216,166,74,0.6),
    0 0 30px rgba(216,166,74,0.4),
    0 12px 24px rgba(53,163,255,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.ghost{
  background:linear-gradient(180deg, rgba(216,166,74,.08), rgba(216,166,74,.02));
  color:var(--txt); border:1px solid rgba(216,166,74,.35);
  box-shadow:0 6px 16px rgba(216,166,74,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.ghost:hover{
  box-shadow:
    0 0 15px rgba(216,166,74,0.8),
    0 0 30px rgba(216,166,74,0.5),
    0 6px 16px rgba(216,166,74,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.disabled{background:#475466; color:#cfd7e3; pointer-events:none; opacity:.7}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(14,22,34,.75), rgba(14,22,34,.55));
  border:1px solid var(--stroke); border-radius:16px; margin:18px 0; padding:18px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}

h1{font-size:44px;margin:0 0 6px; letter-spacing:.5px}
h2{margin:22px 0 10px; font-size:22px}
ul{padding-left:20px}
code{
  background:#0f1722; padding:3px 8px; border-radius:8px;
  border:1px solid #1a2533; color:#cfe7ff;
}
footer{border-top:1px solid var(--stroke); margin-top:28px; background:rgba(10,16,22,.6)}
footer small{color:var(--muted)}