:root{
  --bg-0:#05060d;
  --bg-1:#0a0b1a;
  --fg:#eaf0ff;
  --muted:#8893b3;
  --accent-1:#7c5cff;
  --accent-2:#22d3ee;
  --accent-3:#ff4ecd;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:radial-gradient(ellipse at 20% 10%,#1a0f3a 0%,var(--bg-0) 45%) ,
             radial-gradient(ellipse at 80% 90%,#0c2a3a 0%,var(--bg-0) 55%);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;
}

.noise{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.stage{
  position:relative;z-index:3;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(20px,4vw,60px);
  text-align:center;
}

/* badge */
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:32px;
  opacity:0;transform:translateY(-10px);
  animation:fadeDown .8s .2s ease-out forwards;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:#22d3ee;box-shadow:0 0 12px #22d3ee;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.4}
}
@keyframes fadeDown{
  to{opacity:1;transform:translateY(0)}
}

/* headline */
.headline{
  font-weight:700;
  font-size:clamp(2.4rem,9vw,7.5rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
.line{display:flex;flex-wrap:wrap;justify-content:center;gap:.25em}
.word{
  position:relative;display:inline-block;
  opacity:0;transform:translateY(60%) rotate(4deg);
  animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.line-1 .word:nth-child(1){animation-delay:.4s}
.line-1 .word:nth-child(2){animation-delay:.55s}
.line-2 .word:nth-child(1){animation-delay:.75s}
.line-2 .word:nth-child(2){animation-delay:.9s}

@keyframes rise{
  to{opacity:1;transform:translateY(0) rotate(0)}
}

.gradient{
  background:linear-gradient(110deg,var(--accent-1) 0%,var(--accent-3) 40%,var(--accent-2) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards,
            shine 6s linear infinite 1s;
}
@keyframes shine{
  0%{background-position:0% 50%}
  100%{background-position:250% 50%}
}

.word::after{
  content:attr(data-text);
  position:absolute;inset:0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:blur(28px);opacity:.45;
  background:linear-gradient(110deg,var(--accent-1),var(--accent-3),var(--accent-2));
  z-index:-1;
}

.cursor{
  display:inline-block;color:var(--accent-2);
  animation:blink 1s steps(2) infinite;
  margin-left:.05em;
  text-shadow:0 0 18px var(--accent-2);
}
@keyframes blink{50%{opacity:0}}

/* subtitle / typewriter */
.sub{
  margin-top:28px;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(.85rem,1.4vw,1.05rem);
  color:var(--muted);
  letter-spacing:.04em;
  min-height:1.4em;
  opacity:0;
  animation:fadeDown .6s 1.6s ease-out forwards;
}
.caret{
  display:inline-block;
  color:var(--accent-2);
  animation:blink 1s steps(2) infinite;
}

/* progress bar */
.progress{
  margin-top:48px;
  width:min(420px,80vw);
  opacity:0;
  animation:fadeDown .6s 2s ease-out forwards;
}
.progress-bar{
  position:relative;height:3px;border-radius:999px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.progress-bar::before{
  content:'';position:absolute;inset:0 100% 0 0;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));
  box-shadow:0 0 20px rgba(124,92,255,.6);
  animation:fill 4.5s cubic-bezier(.65,0,.35,1) forwards 2s;
}
@keyframes fill{
  to{right:0}
}
.progress-label{
  display:flex;justify-content:space-between;
  margin-top:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}

/* footer */
.foot{
  position:absolute;bottom:24px;
  display:flex;align-items:center;gap:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  opacity:0;
  animation:fadeDown .6s 2.4s ease-out forwards;
}
.sep{width:24px;height:1px;background:var(--muted);opacity:.5}

/* orbs */
.stage::before,.stage::after{
  content:'';position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.45;z-index:-1;pointer-events:none;
}
.stage::before{
  width:420px;height:420px;
  background:radial-gradient(circle,var(--accent-1) 0%,transparent 70%);
  top:-80px;left:-100px;
  animation:floatA 14s ease-in-out infinite;
}
.stage::after{
  width:520px;height:520px;
  background:radial-gradient(circle,var(--accent-2) 0%,transparent 70%);
  bottom:-160px;right:-120px;
  animation:floatB 18s ease-in-out infinite;
}
@keyframes floatA{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(80px,60px) scale(1.15)}
}
@keyframes floatB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-90px,-70px) scale(1.1)}
}

@media (max-width:560px){
  .foot{flex-direction:column;gap:6px}
  .sep{display:none}
}