:root{
  --void-0: #07060f;
  --void-1: #0d0a1e;
  --blue-line: #3fa4ff;
  --blue-line-dim: #1f4d80;
  --gold-1: #ffd23f;
  --gold-2: #ff9d1a;
  --cyan-glow: #baf7ff;
  --cyan-glow-dim: #4fd6e8;
  --ink-0: #f5f3ff;
  --ink-1: #c9c3e6;
  --ink-2: #8a82ad;

  --font-display: "Unbounded", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --font-body: "Manrope", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100svh;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(63,164,255,0.10), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(255,157,26,0.08), transparent 50%),
    linear-gradient(160deg, var(--void-1), var(--void-0) 60%);
  color:var(--ink-0);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center;
  padding:56px 18px 80px;
}

#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:overlay;
}

.page{
  position:relative; z-index:2;
  width:100%; max-width:460px;
  display:flex; flex-direction:column; align-items:center;
  gap:34px;
}

.hero{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}
.avatar{
  width:128px; height:128px; border-radius:50%;
  object-fit:cover;
  border:2px solid var(--blue-line);
  box-shadow:0 0 30px rgba(63,164,255,0.4), 0 0 60px rgba(255,157,26,0.18);
  opacity:0; transform:scale(.85);
  animation:pop .6s cubic-bezier(.2,1.3,.4,1) .1s forwards;
}
@keyframes pop{ to{ opacity:1; transform:scale(1); } }

.wordmark{
  font-family:var(--font-display); font-weight:800;
  font-size:2rem; letter-spacing:.02em;
  background:linear-gradient(100deg, var(--gold-1), var(--gold-2) 60%, var(--gold-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; animation:fadeUp .5s ease .25s forwards;
}
.bio{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  line-height:1.6;
  color:var(--cyan-glow-dim);
  max-width:380px;
  opacity:0; animation:fadeUp .5s ease .38s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.section{
  width:100%;
  display:flex; flex-direction:column; gap:10px;
  opacity:0; animation:fadeUp .5s ease forwards;
}
.section:nth-of-type(1){ animation-delay:.5s; }
.section:nth-of-type(2){ animation-delay:.62s; }
.section:nth-of-type(3){ animation-delay:.74s; }

.section-label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em;
  color:var(--ink-2); padding-left:4px;
}

.link-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  text-decoration:none;
  color:var(--ink-0);
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.link-card:hover, .link-card:focus-visible{
  transform:translateY(-2px);
  border-color:var(--blue-line);
  background:rgba(63,164,255,0.08);
}
.link-card:active{ transform:translateY(0) scale(.99); }

.dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--cyan-glow);
  box-shadow:0 0 8px var(--cyan-glow);
}
.link-text{ display:flex; flex-direction:column; gap:2px; }
.link-title{ font-weight:800; font-size:.95rem; letter-spacing:.02em; }
.link-sub{ font-size:.78rem; color:var(--ink-2); }
.link-arrow{ margin-left:auto; color:var(--ink-2); font-family:var(--font-mono); }

.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}
.video-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

footer{
  font-family:var(--font-mono); font-size:.68rem; color:var(--ink-2);
  letter-spacing:.1em; opacity:0; animation:fadeUp .5s ease .9s forwards;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; }
}