:root{
  --bg:#05060A;
  --ink:#EAF2FF;
  --muted:#9BB4FF;
  --cyan:#00E5FF;
  --vio:#A45CFF;
  --blend1: rgba(0,229,255,.18);
  --blend2: rgba(164,92,255,.16);
  --glass: rgba(8,12,22,.55);
  --stroke: rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg)}
body{
  margin:0; color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Boot veil */
#veil{
  position:fixed; inset:0; z-index:999;
  background: radial-gradient(1200px 1200px at 50% 60%, rgba(255,255,255,.05), transparent 40%),
              linear-gradient(#000, #05060A 30%, #000);
  transform:translateZ(0);
}

/* Canvas background */
#bg{
  position:fixed; inset:0; width:100%; height:100%; display:block;
  background:
    radial-gradient(1400px 900px at 50% 45%, rgba(0,229,255,.08), transparent 60%),
    radial-gradient(1300px 900px at 60% 55%, rgba(164,92,255,.09), transparent 65%),
    linear-gradient(180deg, #05060A 0%, #04050A 60%, #020308 100%);
  filter:contrast(112%) saturate(110%) brightness(103%);
}

/* Light blooms (stronger, still classy) */
.bloom{
  position:fixed; inset:0; pointer-events:none; mix-blend-mode:screen;
  opacity:.75; filter:blur(48px);
}
.bloom-a{ background: radial-gradient(520px 360px at 22% 30%, var(--blend1), transparent 70%) }
.bloom-b{ background: radial-gradient(560px 380px at 78% 70%, var(--blend2), transparent 72%) }

/* Stage */
.stage{
  position:relative; z-index:4; height:100dvh;
  display:grid; place-items:center; text-align:center;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* Logo */
.logo-wrap{ position:relative; display:inline-block; will-change:transform }
.logo{
  letter-spacing:.18em; font-weight:600;
  font-size: clamp(44px, 10vw, 140px);
  line-height:.95;
  background: linear-gradient(180deg, #fff, #DDF1FF 40%, #BEE7FF 60%, #F2F7FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 16px rgba(0,229,255,.35));
}
.logo-glow{
  position:absolute; inset:-24% -14%;
  background:
    radial-gradient(65% 65% at 50% 50%, rgba(0,229,255,.12), transparent 60%),
    radial-gradient(65% 65% at 60% 55%, rgba(164,92,255,.12), transparent 65%);
  filter: blur(28px); z-index:-1; opacity:.95;
}

/* Tagline */
.tag{
  margin-top: clamp(6px, 1.8vh, 16px);
  font-weight:300; font-size: clamp(14px, 2.2vw, 22px);
  letter-spacing:.12em; color:var(--muted); text-transform:uppercase; opacity:0;
}

/* Holographic nav */
.holo-nav{
  margin-top: clamp(18px, 4vh, 32px);
  display:flex; gap: clamp(10px, 2vw, 24px); justify-content:center; flex-wrap:wrap;
}
.holo{
  padding: 10px 18px; border-radius: 999px; border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(17,25,45,.42), rgba(8,14,26,.26));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 16px 50px rgba(0,229,255,.10),
    0 10px 34px rgba(164,92,255,.09);
  color:var(--ink); text-decoration:none; font-weight:400; letter-spacing:.08em;
  position:relative; overflow:hidden; isolation:isolate;
  transition: transform .55s cubic-bezier(.2,.7,0,1), border-color .3s, box-shadow .3s;
}
.holo::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: conic-gradient(from 0deg, rgba(0,229,255,.45), rgba(164,92,255,.45), rgba(0,229,255,.45));
  filter: blur(26px); opacity:0; transition:opacity .4s;
}
.holo:hover{ transform: translateY(-2px) scale(1.03); border-color:transparent; }
.holo:hover::before{ opacity:1; }

/* Footer micro */
.micro{
  position:fixed; left:0; right:0; bottom:6px; z-index:4;
  display:flex; justify-content:center; gap:10px;
  font-size:12px; letter-spacing:.12em; color: rgba(200,220,255,.65);
  text-transform:uppercase; pointer-events:none;
}
.sep{ opacity:.5 }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .holo{ transition:none }
}