:root{
  --bg:#04060f; --fg:#eaf0ff; --muted:#7d8bb0;
  --accent:#7aa2ff; --accent2:#c08bff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* layered cosmic backdrop */
#stars{position:fixed;inset:0;display:block;z-index:0}
.nebula{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 22% 28%, rgba(72,103,214,.20), transparent 60%),
    radial-gradient(50vw 50vw at 80% 72%, rgba(160,86,214,.18), transparent 60%),
    radial-gradient(40vw 40vw at 65% 20%, rgba(44,196,214,.10), transparent 60%);
  mix-blend-mode:screen;
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%);
}
.stage{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
}
.eyebrow{
  font-size:clamp(.7rem,1.4vw,.95rem);
  letter-spacing:.55em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.4rem;
  padding-left:.55em;
  opacity:0;animation:fade .9s .2s forwards;
}
.title{
  font-weight:700;
  font-size:clamp(2.6rem,11vw,9rem);
  line-height:.95;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#ffffff 0%, #cdd9ff 55%, #8fa6e6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(122,162,255,.25);
  opacity:0;animation:rise 1s .35s forwards;
}
.title .colon{
  display:inline-block;
  color:transparent;
}
.title .colon i{
  display:inline-block;
  padding-inline:.16em;
  margin-inline:-.16em;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.sub{
  margin-top:1.6rem;
  font-size:clamp(.85rem,1.8vw,1.1rem);
  color:var(--muted);max-width:32ch;line-height:1.6;
  opacity:0;animation:fade .9s .7s forwards;
}
.enter{
  margin-top:2.6rem;display:inline-flex;align-items:center;gap:.6rem;
  font-family:inherit;font-size:.95rem;font-weight:500;letter-spacing:.04em;
  color:var(--fg);text-decoration:none;
  padding:.7rem 1.3rem;border-radius:999px;
  border:1px solid rgba(122,162,255,.35);
  background:rgba(122,162,255,.06);
  transition:.25s ease;backdrop-filter:blur(6px);
  opacity:0;animation:fade .9s .95s forwards;
}
.enter:hover{
  border-color:rgba(122,162,255,.7);
  background:rgba(122,162,255,.14);
  box-shadow:0 0 26px rgba(122,162,255,.25);
  transform:translateY(-1px);
}
.enter .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);animation:blink 2.4s infinite;
}
.foot{
  position:fixed;left:0;right:0;bottom:18px;z-index:2;text-align:center;
  font-size:.72rem;letter-spacing:.25em;color:rgba(125,139,176,.6);
  text-transform:uppercase;
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){
  .eyebrow,.title,.sub,.enter{animation:none;opacity:1}
}