:root{
  --bgA:#0a0a0a;
  --bgB:#111114;
  --ink:#f7fafc;
  --muted:rgba(247,250,252,.72);
  --edge:rgba(255,255,255,.14);
  --accent:#60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 50% -20%, #ffffff12, transparent 60%),
    linear-gradient(180deg, var(--bgA), var(--bgB));
  color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Header */
.hdr{
  position:sticky; top:0; z-index:50; display:flex; justify-content:flex-start;
  padding:14px 20px; backdrop-filter: blur(8px);
  border-bottom:1px solid var(--edge);
  background: linear-gradient(180deg, #0b0b0bcc, #0b0b0b80);
}
.badge{padding:6px 12px; border: 1px solid var(--edge); border-radius:999px; color:var(--muted); font-weight:700; letter-spacing:.02em}

/* Hero */
.hero{position:relative; min-height:calc(100vh - 60px); display:grid; place-items:center; isolation:isolate;}
#stage{position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent}
.overlay{
  position:relative; text-align:center; z-index:2; padding:8vh 24px 12vh;
}
.kicker{display:inline-block; color:var(--muted); letter-spacing:.22em; font-weight:900; font-size:12px; margin-bottom:14px}
.brand-center{
  margin:0 0 10px; line-height:.9; font-weight:1000;
  font-size: clamp(56px, 12vw, 160px);
  letter-spacing:-.02em;
  text-shadow:0 1px 0 #000, 0 18px 60px rgba(0,0,0,.35);
}
.brand-center .accent{color:var(--accent)}
.sub{margin:0 auto; max-width:760px; font-size: clamp(16px, 2.2vw, 20px); color:var(--muted)}

/* Mystical overlays */
.radial{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1100px 640px at 50% 40%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(600px 420px at 50% 20%, rgba(96,165,250,.05), transparent 60%);
  mix-blend-mode:screen;
}
.grain{
  position:absolute; inset:-50%; z-index:3; pointer-events:none; opacity:.08;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation: drift 24s linear infinite alternate;
}
@keyframes drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}

/* Footer */
.ftr{display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; padding:16px 22px; border-top:1px solid var(--edge); color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  #stage{display:none}
}