.hero {
  height: 100vh;
  min-height: 640px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 100px 24px 60px;
  position: relative;
  overflow: hidden;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-light);
  border-radius: 20px; padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; color: var(--gray);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 28px;
  animation: fadeUp 0.6s ease both;
  position: relative; z-index: 2;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chrome-1); box-shadow: 0 0 10px var(--chrome-1); }

.hero h1 {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(52px, 10vw, 128px);
  font-weight: 700;
  letter-spacing: -4px;
  line-height: 0.95;
  margin-bottom: 24px;
  animation: fadeUp 0.6s 0.1s ease both;
  pointer-events: none;
}

.hero-sub {
  position: relative; z-index: 2;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--gray);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 40px;
  font-weight: 400;
  animation: fadeUp 0.6s 0.2s ease both;
  pointer-events: none;
}

.hero-btns {
  position: relative; z-index: 2;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  animation: fadeUp 0.6s 0.3s ease both;
}
.hero-btns .pill-btn { padding: 16px 26px 16px 28px; font-size: 13px; }

.hero-scroll-cue {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px; color: #555;
  letter-spacing: 0.2em; text-transform: uppercase;
  animation: fadeUp 0.6s 0.6s ease both;
  pointer-events: none;
}
.hero-scroll-cue svg { width: 12px; height: 12px; animation: cueBob 1.8s ease-in-out infinite; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }