/* ============ Hero ============ */
.hero {
  position: relative;
  padding: 132px 0 64px; /* [S2] 150/90 → 132/64px (위쪽은 고정 헤더 72px 포함) */
  overflow: hidden;
}
.hero .glow.g1 {
  width: 620px;
  height: 620px;
  background: var(--primary);
  top: -160px;
  left: -140px;
  opacity: 0.42;
}
.hero .glow.g2 {
  width: 560px;
  height: 560px;
  background: var(--accent);
  bottom: -220px;
  right: -120px;
  opacity: 0.32;
}
.hero .glow.g3 {
  width: 420px;
  height: 420px;
  background: var(--indigo);
  top: 120px;
  right: 34%;
  opacity: 0.35;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
/* 2단 레이아웃(≥961px)에서 "만나고 싶던 캐릭터가"([H2] 쉼표 삭제, 약 8.1em)가 카피 컬럼 안에 한 줄로 들어가는 상한 */
.hero h1 {
  font-size: clamp(48px, 5.4vw, 66px);
  margin: 22px 0 22px;
}
.hero h1 .grad-text {
  display: inline-block;
}
.hero-sub {
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 34px;
  text-wrap: pretty;
}
.hero-actions {
  margin-bottom: 26px;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
}
.hero-trust b {
  color: #fff;
}
.hero-trust .sep {
  width: 1px;
  height: 16px;
  background: var(--line);
}
/* [R3] 좁은 화면에서 마지막 항목만 줄바꿈되면 첫 줄 끝에 구분선이 홀로 남음 → 구분선 숨기고 간격으로 구분 */
@media (max-width: 420px) {
  .hero-trust {
    gap: 8px 18px;
  }
  .hero-trust .sep {
    display: none;
  }
}
/* [V2-4] 출시 전 주 행동: 사전 예약 버튼(스토어 버튼 위) */
.hero-prereg {
  font-size: 17px;
  padding: 17px 30px;
  margin-bottom: 18px; /* [H2] 버튼 아래 안내 문구 삭제 → 스토어 버튼과 간격 */
}
/* [S2] 히어로 아래 여백을 줄이면서 glow 가 히어로 경계(overflow:hidden)에서 선처럼 잘려 보임
   → 아래쪽을 배경색으로 서서히 이어 다음 섹션과 자연스럽게 연결 (콘텐츠 .hero-grid 는 z-index 2 로 위) */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(20, 18, 37, 0), var(--night));
  pointer-events: none;
  z-index: 1;
}