/* Final Christmas hero composition: overrides legacy hero experiments. */
.hero {
  min-height: 820px !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
  padding-top: 82px !important;
  background:
    linear-gradient(90deg, #020a28f4 0%, #04133ed2 40%, #061a5830 73%, #061a5810 100%),
    url('../images/christmas-city-hero.png') center calc(50% + 42px) / cover no-repeat !important;
}

.hero-grid,
.hero .signal-orbit,
.hero .network-lights,
.hero-christmas-tree,
.hero-starfield {
  display: none !important;
}

.hero-logo-visual {
  position: absolute !important;
  z-index: 2 !important;
  top: 130px !important;
  left: 9% !important;
  right: auto !important;
  width: min(26vw, 320px) !important;
  height: auto !important;
  opacity: .96 !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 0 16px #0ae7ff8c) drop-shadow(0 0 30px #7667ff66) !important;
  animation: hero-logo-float 5s ease-in-out infinite !important;
}

.hero-logo-halo { position:absolute; z-index:1; top:145px; left:8%; width:min(27vw,340px); height:175px; border-radius:50%; background:radial-gradient(ellipse,#20dfff70 0%,#5c76ff42 40%,transparent 72%); filter:blur(13px); pointer-events:none; animation:hero-logo-halo 3.5s ease-in-out infinite; }

@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 16px #0ae7ff8c) drop-shadow(0 0 30px #7667ff66); }
  50% { transform: translateY(-5px); filter: drop-shadow(0 0 25px #3decffdc) drop-shadow(0 0 48px #9270ffc0); }
}

@keyframes hero-logo-halo{0%,100%{transform:scale(.88);opacity:.42}50%{transform:scale(1.08);opacity:.95}}

.tree-light-effects { position:absolute; z-index:1; top:72px; right:6%; width:min(31vw,420px); height:650px; overflow:hidden; pointer-events:none; }
.tree-light-effects::before { content:"✦"; position:absolute; top:0; left:46%; color:#efffff; font-size:46px; line-height:1; text-shadow:0 0 10px #d8ffff,0 0 28px #29dfff,0 0 46px #6c92ff; animation:tree-star-pulse 3.4s ease-in-out infinite; }
.tree-light-effects i { position:absolute; width:8px; height:8px; border-radius:50%; background:#eaffff; box-shadow:0 0 8px #fff,0 0 17px #2edfff; animation:tree-light-twinkle 2.8s ease-in-out infinite; }
.tree-light-effects i:nth-child(1){top:160px;left:46%;animation-delay:-.4s}.tree-light-effects i:nth-child(2){top:252px;left:31%;animation-delay:-1.5s}.tree-light-effects i:nth-child(3){top:300px;left:67%;animation-delay:-2.2s}.tree-light-effects i:nth-child(4){top:390px;left:21%;animation-delay:-.9s}.tree-light-effects i:nth-child(5){top:442px;left:76%;animation-delay:-1.8s}.tree-light-effects i:nth-child(6){top:540px;left:49%;animation-delay:-2.6s}
@keyframes tree-star-pulse{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.12);opacity:1}}@keyframes tree-light-twinkle{0%,100%{transform:scale(.55);opacity:.25}50%{transform:scale(1.35);opacity:1}}

.hero-content {
  position: absolute !important;
  z-index: 3 !important;
  top: 370px !important;
  right: 0 !important;
  left: 0 !important;
  padding: 0 !important;
}

.hero h1 {
  max-width: 620px !important;
  font-size: clamp(45px, 4.2vw, 64px) !important;
  letter-spacing: -2.8px !important;
}

.hero-copy {
  max-width: 545px !important;
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}

.hero-actions .button-plain {
  padding-right: 20px;
  border: 1px solid #76e9ff80;
  border-radius: 5px;
  background: #07245a75;
}

.hero-metrics {
  position: absolute !important;
  top: 354px !important;
  left: 0;
  margin: 0 !important;
  gap: 12px !important;
}

.hero-metrics div { min-width: 92px; }
.hero-metrics strong { font-size: 17px !important; }

.plans .section-heading { display: block; }
.plans .section-heading > p {
  max-width: 520px;
  margin: 16px 0 0;
}

@media (max-width: 600px) {
  .hero {
    min-height: 650px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 68px !important;
    background-position: 60% center !important;
  }

  .hero-logo-visual {
    top: 58% !important;
    left: auto !important;
    right: 6vw !important;
    width: 88vw !important;
    opacity: .5 !important;
    transform: translateY(-50%) !important;
  }

  .hero-logo-halo { display:none; }

  .tree-light-effects { top:116px; right:-8%; width:290px; height:470px; opacity:.72; }
  .tree-light-effects::before { font-size:31px; }
  .tree-light-effects i { transform:scale(.7); }

  .hero-content {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  .hero-metrics {
    position: static !important;
    margin-top: 40px !important;
    gap: 14px !important;
  }

  .hero-metrics div:nth-child(n+4) { display: none; }

  .hero h1 {
    font-size: 48px !important;
    letter-spacing: -2.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-visual,
  .hero-logo-halo,
  .tree-light-effects::before,
  .tree-light-effects i { animation: none !important; }
}
