:root{
  --bg:#030612;
  --panel:#070a1c;
  --ink:#f7f8ff;
  --muted:#a7b0d7;
  --purple:#7627ff;
  --violet:#b142ff;
  --blue:#2d7cff;
  --green:#22f7b2;
  --line:rgba(167,176,215,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 77% 22%,rgba(45,124,255,.16),transparent 29%),
    radial-gradient(circle at 73% 48%,rgba(118,39,255,.17),transparent 38%),
    radial-gradient(circle at 88% 72%,rgba(34,247,178,.08),transparent 28%),
    linear-gradient(145deg,#02040c 0%,#050719 48%,#030510 100%);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 75%);
  z-index:-4;
}
.noise{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
.site-header{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px clamp(22px,5vw,72px);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:10;
}
.brand img{width:132px;height:auto;display:block;filter:drop-shadow(0 0 18px rgba(83,108,255,.24))}
.socials{display:flex;gap:28px}
.socials a{color:#dfe3ff;text-decoration:none;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.86;transition:.25s}
.socials a:hover{color:var(--green);opacity:1}
.hero{
  min-height:calc(100svh - 52px);
  max-width:1580px;
  margin:0 auto;
  padding:68px clamp(24px,5.2vw,84px) 18px;
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(500px,1.16fr);
  align-items:center;
  gap:18px;
  position:relative;
}
.copy-panel{position:relative;z-index:4;max-width:620px}
.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.4em;color:var(--green);margin:0 0 18px}
.eyebrow:before{content:"";display:inline-block;width:42px;height:1px;background:linear-gradient(90deg,var(--green),transparent);vertical-align:middle;margin-right:12px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.7rem,6vw,6.8rem);line-height:.82;letter-spacing:-.055em;margin:0;text-transform:uppercase;text-shadow:0 5px 35px rgba(0,0,0,.6)}
h1 span{display:inline-block;margin-top:16px;background:linear-gradient(180deg,#fff 0%,#e1e7ff 37%,#4c8cff 86%,#2037d9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(49,104,255,.18))}
.lede{font-size:1.03rem;line-height:1.72;color:var(--muted);max-width:535px;margin:26px 0 28px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}
.cta{min-height:50px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;text-decoration:none;font-size:.77rem;font-weight:900;letter-spacing:.14em;transition:.25s}
.primary{color:#050713;background:linear-gradient(110deg,var(--green),#74ffd4);box-shadow:0 0 30px rgba(34,247,178,.18)}
.primary:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(34,247,178,.35)}
.microline{display:flex;align-items:center;gap:14px;margin-top:28px;color:#737da7;font-size:.6rem;letter-spacing:.35em}
.microline span{height:1px;flex:0 1 72px;background:linear-gradient(90deg,transparent,#5d6790)}
.microline span:last-child{background:linear-gradient(90deg,#5d6790,transparent)}
.art-panel{position:relative;height:min(61vw,650px);min-height:500px;display:grid;place-items:center;z-index:2}
.hero-art{width:min(690px,96%);height:auto;display:block;position:relative;z-index:4;filter:drop-shadow(0 34px 64px rgba(0,0,0,.72));animation:float 7s ease-in-out infinite}
.moon{position:absolute;width:min(540px,74%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 44% 38%,#d8f8ff 0%,#79d7ff 22%,#2e8bff 42%,rgba(53,78,240,.76) 55%,rgba(53,78,240,.13) 72%,transparent 73%);filter:blur(.4px) drop-shadow(0 0 42px rgba(58,119,255,.35));opacity:.56;top:8%;z-index:0}
.art-halo{position:absolute;width:66%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(34,247,178,.24);box-shadow:0 0 55px rgba(34,247,178,.07),inset 0 0 55px rgba(118,39,255,.06);z-index:1;animation:pulse 5s ease-in-out infinite}
.rune{position:absolute;z-index:5;color:#c8b2ff;text-shadow:0 0 16px currentColor;font-size:18px;animation:blink 3.5s infinite}.rune-1{top:22%;right:4%}.rune-2{bottom:18%;left:4%;animation-delay:1.1s}.rune-3{top:52%;right:0;animation-delay:2s}
.orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-2}.orb-a{width:350px;height:350px;right:-120px;top:4%;background:rgba(117,31,255,.18)}.orb-b{width:300px;height:300px;left:-130px;bottom:0;background:rgba(0,238,174,.095)}
.energy{position:absolute;height:2px;width:45vw;min-width:400px;pointer-events:none;z-index:1;filter:drop-shadow(0 0 14px currentColor);opacity:.48}.energy:after{content:"";position:absolute;inset:-4px 0;border-radius:50%;background:currentColor;filter:blur(8px);opacity:.35}.energy-a{right:-13vw;top:61%;background:linear-gradient(90deg,transparent,var(--green),transparent);color:var(--green);transform:rotate(-11deg)}.energy-b{right:-9vw;top:67%;background:linear-gradient(90deg,transparent,var(--purple),transparent);color:var(--purple);transform:rotate(8deg)}
footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px clamp(24px,5vw,72px);color:#737da7;font-size:.72rem;background:rgba(2,4,12,.35)}
footer img{width:82px}footer p{margin:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{transform:scale(.98);opacity:.62}50%{transform:scale(1.03);opacity:.95}}
@keyframes blink{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

@media(min-width:981px) and (min-height:650px){
  body{height:100svh;overflow-y:hidden}
  .hero{height:calc(100svh - 50px);min-height:0}
  footer{height:50px}
}
@media(max-width:980px){
  .site-header{position:relative;height:70px;padding-top:12px;padding-bottom:4px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:14px;gap:0}
  .copy-panel{text-align:center;max-width:760px;margin:0 auto;order:2;margin-top:-48px}
  .eyebrow:before{display:none}
  .lede{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .microline{justify-content:center}
  .art-panel{height:auto;min-height:0;order:1}
  .hero-art{width:min(650px,90vw)}
  .moon{width:68%;top:4%}
}
@media(max-width:620px){
  .site-header{height:62px;padding:10px 16px 0}
  .brand img{width:106px}
  .socials a{font-size:.61rem;letter-spacing:.08em}
  .hero{padding:8px 14px 42px}
  .art-panel{margin:0 -8px}
  .hero-art{width:99vw;max-width:none}
  .copy-panel{margin-top:-24px}
  .eyebrow{font-size:.63rem;letter-spacing:.23em;margin-bottom:13px}
  h1{font-size:clamp(3rem,15.5vw,5rem)}
  .lede{font-size:.94rem;line-height:1.66;margin-top:20px;margin-bottom:24px}
  .cta{width:100%}
  .microline{margin-top:24px}
  footer{flex-direction:column;text-align:center;padding-top:16px;padding-bottom:16px}
  .energy{width:90vw;min-width:0}
  .moon{width:79%;top:1%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.hero-art,.art-halo,.rune{animation:none!important}}