.hero{
  position:relative;min-height:100vh;
  padding:140px 32px 100px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;z-index:1;
  width:100%;max-width:1280px;margin:0 auto;overflow:visible;
}

.hero-badge,
.hero-promise,
h1.hero-hl,
.hero-sub,
.hero-actions,
.hero-scrollcue{position:relative;z-index:2;}

h1.hero-hl{max-width:920px;}
.hero-sub{max-width:540px;}

.hero-aurora{
  position:absolute;top:48%;left:50%;
  width:680px;height:420px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124,28,225,0.18) 0%, rgba(90,15,181,0.08) 50%, transparent 74%);
  filter:blur(60px);pointer-events:none;z-index:0;
  animation:auroraDrift 18s ease-in-out infinite;
}

.hero-particles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.particle{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--accent-bright);opacity:0;
  animation:particleFloat linear infinite;
}

.hero-badge{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px 6px 6px;background:var(--bg-3);
  border:1px solid var(--line);border-radius:100px;
  font-size:12px;color:var(--text-mid);margin-bottom:36px;
  opacity:0;animation:fadeUp .7s ease .1s forwards;
  transition:border-color .3s;
  isolation:isolate;
}

/* Shooting star border */
.hero-badge::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:100px;
  padding:1px;
  background:conic-gradient(
    from var(--badge-angle, 0deg),
    transparent 0deg,
    transparent 310deg,
    rgba(157,78,236,0.1) 328deg,
    rgba(157,78,236,0.6) 348deg,
    rgba(255,255,255,0.4) 354deg,
    transparent 360deg
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  animation:badgeStar 4s linear infinite;
  z-index:1;
}

@keyframes badgeStar{
  to{ --badge-angle:360deg; }
}

.hero-badge:hover{border-color:var(--line-strong);}

.hero-badge-pill{
  background:var(--accent);color:#fff;font-family:var(--mono);
  font-size:10px;font-weight:500;padding:3px 9px;
  border-radius:100px;letter-spacing:0.02em;
  position:relative;z-index:2;
}

.hero-badge svg{color:var(--text-dim);position:relative;z-index:2;}

.hero-promise{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  opacity:0;
  animation:fadeUp .8s ease .35s forwards;
}

.hero-tag-svg{
  width:clamp(180px, 22vw, 300px);
  height:auto;
  display:block;
  opacity:0.85;
  transition:opacity .3s ease;
}

.hero-tag-svg:hover{
  opacity:1;
}

h1.hero-hl{
  font-family:var(--sans);font-size:clamp(52px,7.5vw,96px);
  font-weight:600;line-height:1.02;letter-spacing:-0.035em;
  margin-bottom:28px;opacity:0;animation:fadeUp 1s ease .25s forwards;
}
h1.hero-hl em{
  font-family:var(--serif);font-style:italic;
  font-weight:400;letter-spacing:-0.01em;
}
h1.hero-hl em .ch{
  display:inline-block;color:var(--accent);
  animation:letterWave 2.8s ease-in-out infinite;
}

.hero-sub{
  font-size:18px;line-height:1.55;color:var(--text-mid);
  margin-bottom:42px;opacity:0;animation:fadeUp .8s ease .45s forwards;
}

.hero-actions{
  display:flex;gap:16px;align-items:center;
  margin-bottom:0;opacity:0;animation:fadeUp .8s ease .6s forwards;
  flex-wrap:wrap;justify-content:center;
}

.hero-scrollcue{
  position:absolute;bottom:36px;left:50%;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transform:translateX(-50%);
  animation:scrollCueIn 1s ease 1s forwards;
}
.hero-scrollcue span{
  font-family:var(--mono);font-size:9px;
  letter-spacing:0.25em;text-transform:uppercase;color:var(--text-dim);
}
.scrollcue-line{
  width:1px;height:48px;background:var(--line-strong);
  position:relative;overflow:hidden;
}
.scrollcue-dot{
  position:absolute;top:0;left:0;width:1px;height:16px;
  background:var(--accent-bright);animation:scrollDrop 2s ease-in-out infinite;
}

/* ── Light mode hero ── */
[data-theme="light"] .hero-badge {
  background: var(--bg-card);
  border-color: var(--line);
  color: var(--text-mid);
}
[data-theme="light"] .hero-sub { color: var(--text-mid); }
[data-theme="light"] .hero-aurora {
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(124,28,225,0.1) 0%, rgba(90,15,181,0.04) 50%, transparent 74%);
}