.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  overflow: hidden;
  padding-top: 136px;
  padding-bottom: 16px;
  box-sizing: border-box;
}

/* ─── Background image with warm overlay ─── */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-bg-new.jpeg');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 9, 0, 0.35) 0%,
    rgba(18, 9, 0, 0.3) 20%,
    rgba(18, 9, 0, 0.4) 40%,
    rgba(18, 9, 0, 0.65) 65%,
    rgba(18, 9, 0, 0.95) 100%
  );
}

/* ─── Large pulsing amber glow behind content ─── */
.hero__bg::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 160, 48, 0.18) 0%, rgba(240, 160, 48, 0.06) 35%, transparent 65%);
  z-index: 1;
  pointer-events: none;
  animation: heroPulse 6s ease-in-out infinite alternate;
}

@keyframes heroPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

/* ─── Animated light rays from center ─── */
.hero__rays {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background:
    conic-gradient(
      from 0deg at 50% 40%,
      transparent 0deg,
      rgba(240, 160, 48, 0.04) 10deg,
      transparent 20deg,
      transparent 40deg,
      rgba(240, 160, 48, 0.03) 50deg,
      transparent 60deg,
      transparent 90deg,
      rgba(240, 160, 48, 0.04) 100deg,
      transparent 110deg,
      transparent 140deg,
      rgba(240, 160, 48, 0.03) 150deg,
      transparent 160deg,
      transparent 200deg,
      rgba(240, 160, 48, 0.04) 210deg,
      transparent 220deg,
      transparent 260deg,
      rgba(240, 160, 48, 0.03) 270deg,
      transparent 280deg,
      transparent 320deg,
      rgba(240, 160, 48, 0.04) 330deg,
      transparent 340deg
    );
  animation: raysRotate 60s linear infinite;
}

@keyframes raysRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── Sparkle stars ─── */
.hero__sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 6px rgba(255, 208, 128, 0.8), 0 0 12px rgba(240, 160, 48, 0.5);
  animation: sparklePulse 3s ease-in-out infinite;
}

.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: rgba(255, 208, 128, 0.6);
}

.sparkle::before {
  width: 12px;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sparkle::after {
  width: 1px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sparkle--1 { top: 12%; left: 15%; animation-delay: 0s; animation-duration: 2.5s; }
.sparkle--2 { top: 8%; right: 20%; animation-delay: 0.8s; animation-duration: 3.2s; }
.sparkle--3 { top: 25%; left: 8%; animation-delay: 1.5s; animation-duration: 2.8s; }
.sparkle--4 { top: 18%; right: 10%; animation-delay: 0.3s; animation-duration: 3.5s; }
.sparkle--5 { top: 35%; left: 5%; animation-delay: 2s; animation-duration: 2.3s; }
.sparkle--6 { top: 30%; right: 6%; animation-delay: 1.2s; animation-duration: 3s; }

@keyframes sparklePulse {
  0%, 100% { opacity: 0.2; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ─── Hero content ─── */
.hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  margin-bottom: auto;
}

/* Eyebrow text above title */
.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 4px;
  opacity: 0.95;
  margin-bottom: 0;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.9);
  animation: fadeSlideDown 1s ease-out 0.2s both;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--accent);
  text-shadow:
    0 0 40px rgba(240, 160, 48, 0.5),
    0 0 80px rgba(240, 160, 48, 0.25),
    0 0 120px rgba(240, 160, 48, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 0.9;
  letter-spacing: 6px;
  margin-bottom: 0;
  animation: heroGlow 4s ease-in-out infinite alternate, fadeSlideDown 1s ease-out 0s both;
  position: relative;
}

/* Underline glow beneath title */
.hero__title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 20px rgba(240, 160, 48, 0.6);
  animation: titleLineGlow 3s ease-in-out infinite alternate;
}

@keyframes titleLineGlow {
  0% { opacity: 0.4; width: 40%; }
  100% { opacity: 1; width: 70%; }
}

@keyframes heroGlow {
  0% {
    text-shadow:
      0 0 40px rgba(240, 160, 48, 0.4),
      0 0 80px rgba(240, 160, 48, 0.2),
      0 0 120px rgba(240, 160, 48, 0.08);
  }
  100% {
    text-shadow:
      0 0 60px rgba(240, 160, 48, 0.65),
      0 0 100px rgba(240, 160, 48, 0.4),
      0 0 160px rgba(240, 160, 48, 0.15);
  }
}

@keyframes fadeSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  color: var(--text-secondary);
  font-weight: 400;
  max-width: 600px;
  letter-spacing: 0.5px;
  opacity: 0.95;
  line-height: 1.5;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.8);
  animation: fadeSlideDown 1s ease-out 0.4s both;
}

/* ─── Mascot with animated glow rings ─── */
.hero__mascot-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  animation: fadeSlideDown 1s ease-out 0.6s both;
}

/* Radial glow behind mascot */
.hero__mascot-wrap::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 160, 48, 0.25) 0%, rgba(240, 160, 48, 0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: heroPulse 6s ease-in-out infinite alternate;
}

.hero__glow-ring {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(240, 160, 48, 0.15);
  box-shadow: 0 0 40px rgba(240, 160, 48, 0.1), inset 0 0 40px rgba(240, 160, 48, 0.05);
  animation: ringExpand 4s ease-in-out infinite;
  pointer-events: none;
}

.hero__glow-ring--2 {
  width: 360px;
  height: 360px;
  border-color: rgba(240, 160, 48, 0.08);
  animation-delay: 1.5s;
  animation-duration: 5s;
}

@keyframes ringExpand {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.hero__mascot {
  max-width: 300px;
  max-height: calc(100vh - 510px);
  min-height: 80px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 50px rgba(240, 160, 48, 0.4)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  animation: mascotFloat 5s ease-in-out infinite;
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  75% { transform: translateY(-14px) rotate(-1deg); }
}

/* ─── CTA buttons ─── */
.hero__ctas {
  display: flex;
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
  animation: fadeSlideDown 1s ease-out 0.8s both;
}

.btn--hero {
  padding: 16px 36px;
  font-size: 1.1rem;
  border-radius: var(--radius-sm);
}

/* Floating particles in hero */
.hero .particles {
  z-index: 1;
}


/* ─── Scroll indicator ─── */
.hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--accent-secondary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
  animation: scrollBounce 2s ease-in-out infinite;
}

.hero__scroll-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.5; }
}

/* ─── Hero Contract Address ─── */
.hero__ca {
  margin-top: 4px;
  width: 100%;
  max-width: 600px;
  animation: fadeSlideDown 1s ease-out 0.8s both;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 160, 48, 0.15);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  transition: border-color var(--transition-med), box-shadow var(--transition-med);
}

.hero__ca:hover {
  border-color: rgba(240, 160, 48, 0.3);
  box-shadow: 0 0 25px rgba(240, 160, 48, 0.1);
}

.hero__ca-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.hero__ca-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-right: auto;
}

.hero__ca-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bg-primary);
  background: linear-gradient(135deg, #F0B90B 0%, #C99A09 100%);
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.hero__ca-verify {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  font-size: 0.6rem;
  opacity: 0.75;
}

.hero__ca-verify svg {
  display: inline-block;
  vertical-align: middle;
  transition: transform var(--transition-fast);
}

.hero__ca-tag:hover .hero__ca-verify svg {
  transform: translate(1px, -1px);
}

.hero__ca-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(240, 185, 11, 0.4);
  filter: brightness(1.15);
}

.hero__ca-tag--bnb {
  background: linear-gradient(135deg, #F0B90B 0%, #C99A09 100%);
}

.hero__ca-tag--bnb:hover {
  box-shadow: 0 2px 10px rgba(240, 185, 11, 0.4);
}

.hero__ca-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 160, 48, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
}

.hero__ca-address {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  color: var(--highlight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  letter-spacing: 0.3px;
  user-select: all;
}

.hero__ca-copy {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(240, 160, 48, 0.1);
  border: 1px solid rgba(240, 160, 48, 0.2);
  border-radius: 5px;
  padding: 6px 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.hero__ca-copy:hover {
  background: rgba(240, 160, 48, 0.2);
  box-shadow: 0 0 12px rgba(240, 160, 48, 0.2);
}

.hero__ca-copy.copied {
  background: rgba(76, 175, 80, 0.15);
  color: #66BB6A;
  border-color: rgba(76, 175, 80, 0.3);
}

/* ─── Hero Buy Buttons ─── */
.hero__buy-btns {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  animation: fadeSlideDown 1s ease-out 1s both;
}

.hero__buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.hero__buy-btn--uni {
  background: linear-gradient(135deg, #FF007A 0%, #CC005E 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 0, 122, 0.25);
}

.hero__buy-btn--uni:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(255, 0, 122, 0.4);
  filter: brightness(1.1);
}

.hero__buy-btn--cake {
  background: linear-gradient(135deg, #F0B90B 0%, #C99A09 100%);
  color: #120900;
  box-shadow: 0 4px 20px rgba(240, 185, 11, 0.25);
}

.hero__buy-btn--cake:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(240, 185, 11, 0.4);
  filter: brightness(1.1);
}

.hero__buy-btn svg {
  display: block;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .hero__title { animation: none; }
  .hero__title::after { animation: none; }
  .hero__mascot { animation: none; }
  .hero__bg::before { animation: none; }
  .hero__rays { animation: none; }
  .hero__glow-ring { animation: none; }
  .sparkle { animation: none; opacity: 0.5; }
  .hero__eyebrow,
  .hero__subtitle,
  .hero__mascot-wrap,
  .hero__ca {
    animation: none;
  }
}