/* Hero */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 24px; overflow:hidden;
}
.hero .bg {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero .star {
  width:min(700px,80vw); height:min(700px,80vw);
  opacity:0.06;
}
.hero .glow {
  position:absolute; width:400px; height:400px;
  background:#fff; border-radius:50%; filter:blur(120px); opacity:0.05;
}
.hero h1 {
  position:relative; z-index:10;
  font-size:clamp(40px,8vw,96px);
  font-weight:700; letter-spacing:-0.04em; line-height:1.1;
  text-align:center;
  animation:fadeUp 1.2s ease .5s both;
}
.hero p {
  position:relative; z-index:10; text-align:center;
  color:rgba(255,255,255,0.5); max-width:420px;
  margin:32px auto 0; font-size:14px; line-height:1.7;
  animation:fadeUp 1.2s ease .8s both;
}
@keyframes fadeUp { from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }

.scroll-cue {
  position:absolute; bottom:40px; right:32px; display:flex; align-items:center; gap:16px;
  animation:fadeIn 1s ease 2s both;
}
@media(min-width:768px){ .scroll-cue{ right:64px; } }
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
.scroll-cue .label { font-size:12px; letter-spacing:.3em; text-transform:uppercase; }
.scroll-cue .circle {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }