:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --fg: #efede8;
  --muted: #b9b2c0;
  --line: rgba(239,237,232,.12);
  --line-strong: rgba(239,237,232,.2);
  --accent: #8f79e6;
  --accent-2: #6e58c9;
  --glow: rgba(143,121,230,.26);
  --font: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --x: 50%;
  --y: 50%;
  --scroll: 0px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(143,121,230,.08), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(110,88,201,.06), transparent 24%),
    linear-gradient(180deg, #09090a 0%, var(--bg) 100%);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
body,* { cursor: none !important; }
.grain {
  position: fixed; inset: -25%; z-index: -3; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ambient {
  position: fixed; inset: -20%; z-index: -4; pointer-events: none; filter: blur(72px);
}
.ambient-a::before,
.ambient-b::after {
  content: ""; position: absolute; border-radius: 999px;
}
.ambient-a::before {
  width: 44vw; height: 44vw; min-width: 320px; min-height: 320px; right: -8vw; top: -4vh;
  background: radial-gradient(circle, rgba(143,121,230,.24), rgba(143,121,230,.08) 35%, transparent 72%);
  transform: translate3d(calc((var(--x) - 50%) * .08), calc((var(--y) - 50%) * .06 + var(--scroll) * .14), 0);
}
.ambient-b::after {
  width: 28vw; height: 28vw; min-width: 220px; min-height: 220px; left: -10vw; top: 36vh;
  background: radial-gradient(circle, rgba(143,121,230,.12), rgba(143,121,230,.04) 40%, transparent 72%);
  transform: translate3d(calc((50% - var(--x)) * .05), calc((var(--y) - 50%) * .04 + var(--scroll) * -.1), 0);
}
.cursor{position:fixed;left:0;top:0;width:44px;height:44px;pointer-events:none;z-index:50;transform:translate(-999px,-999px)}
.cursor-ring{width:44px;height:44px;border-radius:50%;border:1px solid rgba(143,121,230,.55);background:radial-gradient(circle at 40% 30%, rgba(143,121,230,.22), transparent 68%),rgba(11,11,12,.72);box-shadow:0 0 24px rgba(143,121,230,.36),0 0 0 1px rgba(239,237,232,.12);opacity:0;transition:opacity .2s ease,transform .2s ease}
.cursor-dot{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--fg);transform:translate(-50%,-50%);opacity:0}
.cursor--visible .cursor-ring,.cursor--visible .cursor-dot{opacity:1}
.page { min-height: 100svh; display: grid; place-items: center; padding: 48px 24px; }
.hero {
  width: min(920px, 100%);
  padding: clamp(40px, 8vw, 92px);
  border: 1px solid var(--line);
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 18%, rgba(143,121,230,.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 60px rgba(143,121,230,.04);
  position: relative;
  overflow: hidden;
  transform: perspective(1200px) rotateX(8deg) rotateY(-10deg);
}
.hero::before {
  content: ""; position: absolute; inset: -18%; pointer-events: none;
  background: radial-gradient(circle at var(--x) var(--y), rgba(143,121,230,.12), transparent 34%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(143,121,230,.06));
  mix-blend-mode: screen;
}
.eyebrow {
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  font-size: .82rem;
}
.helmet-badge {
  width: 122px;
  height: 122px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  background: radial-gradient(circle at 35% 30%, rgba(143,121,230,.18), rgba(11,11,12,.12));
  border: 1px solid rgba(239,237,232,.12);
  box-shadow: 0 0 26px rgba(143,121,230,.18), inset 0 0 24px rgba(143,121,230,.08);
  animation: floaty 7s ease-in-out infinite;
}
.helmet-badge svg{width:86px;height:86px;filter:drop-shadow(0 0 12px rgba(143,121,230,.18))}
.helmet-anim{transform-origin:50% 60%;animation: helmetBob 4.8s cubic-bezier(.16,1,.3,1) infinite}
.helmet-spark{opacity:.9;filter:drop-shadow(0 0 10px rgba(255,255,255,.8))}
.helmet-spark-a{animation:spark 2.8s ease-in-out infinite}
.helmet-spark-b{animation:spark 3.4s ease-in-out infinite .4s}
.helmet-spark-c{animation:spark 2.1s ease-in-out infinite .7s}
.dialect {
  margin: 0;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  line-height: 1;
  color: var(--fg);
  letter-spacing: -.05em;
  animation: revealUp 1s .08s cubic-bezier(.16,1,.3,1) both;
}
.hero h1 {
  margin: 14px 0 0;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: .94;
  letter-spacing: -.06em;
  color: var(--muted);
  animation: revealUp 1s .16s cubic-bezier(.16,1,.3,1) both;
}
.subcopy {
  margin: 18px 0 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: clamp(.98rem, 1.8vw, 1.08rem);
  line-height: 1.6;
  animation: revealUp 1s .24s cubic-bezier(.16,1,.3,1) both;
}
@keyframes revealUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes helmetBob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-4px) rotate(1deg)} }
@keyframes spark { 0%,100%{opacity:.15;transform:scale(.7)} 45%{opacity:1;transform:scale(1.2)} }
@media (max-width: 720px) {
  .hero { transform: none; border-radius: 28px; }
  .page { padding: 18px; }
}