/* layout */
:root {
  --bg-dark-1: hsl(220 64% 5%);
  --bg-dark-2: hsl(225 19% 17%);
}
html, body { margin: 0; padding: 0; overflow-x: hidden; }

.hero {
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: clamp(5rem, 12vw, 7rem) 1rem 0;
  min-height: 100vh;
  z-index: 0; /* stacking context */
}

/* content */
.cs-container {
  width: 100%;
  max-width: 80rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding-top: 4rem;
  position: relative;
  z-index: 10; /* content above background */
}
.cs-flex-group { max-width: 39.125rem; width: 100%; display: flex; flex-direction: column; align-items: center; }
.cs-topper2 { font-size: 0.9rem; line-height: 1.2; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 0.25rem; }
.cs-title { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.2; font-weight: 900; margin: 0 0 0.75rem; color: #fff; }
.cs-text { font-size: 1rem; line-height: 1.5; color: #fff; margin: 0 0 1.5rem; }
.cs-button-group { display: flex; gap: 2rem; justify-content: center; align-items: center; margin-top: 3%; }
.cs-person { width: clamp(16rem, 80vw, 26rem); pointer-events: none; padding-top: 5%; }
.cs-person img { width: 100%; height: auto; display: block; }

/* bottom bar */
.hero-bottom-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 12%;
  background: #030a14;
  z-index: 1;
}

/* background scene */
.night-sky-scene {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0; /* behind content */
  background: linear-gradient(45deg, var(--bg-dark-1) 0%, var(--bg-dark-1) 30%, var(--bg-dark-2) 100%);
  isolation: isolate;
}
.background-layers { position: relative; width: 100%; height: 100%; z-index: 0; }

/* keep all sky layers below content */
.star-clusters,
.extra-stars,
.celestial-glow,
.drifting-haze,
.shadowed-peaks,
.horizon-gleam,
.moon-container,
.moon-glow,
.moon-sphere,
.night-ocean,
.moon-secondary-glow,
.moon-reflection,
.static-wave,
.far-wave,
.mid-wave,
.front-wave,
.star-container { position: absolute; z-index: 0; pointer-events: none; }

/* stars */
.star-clusters {
  z-index: 99;
  top: -90px; left: 0; width: 100%; height: 40%;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 40px 70px, #fff, transparent),
    radial-gradient(1px 1px at 50px 160px, #fff, transparent),
    radial-gradient(2px 2px at 200px 20px, #fff, transparent);
  background-size: 300px 300px;
  animation: starTwinkle 2s infinite;
}
@keyframes starTwinkle { 0%,100%{opacity:.7} 50%{opacity:1} }

.extra-stars {
  left: 23%; width: 100%; height: 100%;
  z-index: 99;
  background-image:
    radial-gradient(1px 1px at 7% 5%, #ffffff, transparent),
    radial-gradient(2px 2px at 15% 0%, #fff, transparent),
    radial-gradient(1px 1px at 20% 1%, #fff, transparent),
    radial-gradient(2px 2px at 25% 2%, #fff, transparent),
    radial-gradient(1px 1px at 32% 0%, #fff, transparent),
    radial-gradient(2px 2px at 35% 1%, #fff, transparent),
    radial-gradient(1px 1px at 34% 2%, #fff, transparent),
    radial-gradient(2px 2px at 42% 0%, #fff, transparent),
    radial-gradient(1px 1px at 50% 1%, #fff, transparent),
    radial-gradient(2px 2px at 55% 2%, #fff, transparent),
    radial-gradient(2px 2px at 75% 0%, #fff, transparent),
    radial-gradient(1px 1px at 5% 0%, #fff, transparent),
    radial-gradient(2px 2px at 85% 1%, #fff, transparent),
    radial-gradient(1px 1px at 95% 2%, #fff, transparent),
    radial-gradient(1px 1px at 5% 12%, #fff, transparent),
    radial-gradient(1px 1px at 7% 30%, #fff, transparent),
    radial-gradient(2px 2px at 69% 4%, #fff, transparent),
    radial-gradient(1px 1px at 10% 8%, #fff, transparent),
    radial-gradient(2px 2px at 35% 5%, #fff, transparent),
    radial-gradient(2px 2px at 28% 25%, #fff, transparent),
    radial-gradient(3px 3px at 15% 20%, #fff, transparent),
    radial-gradient(1px 1px at 22% 7%, #fff, transparent),
    radial-gradient(1px 1px at 85% 18%, #fff, transparent),
    radial-gradient(1px 1px at 1% 3%, #fff, transparent),
    radial-gradient(1px 1px at 3% 8%, #fff, transparent),
    radial-gradient(1px 1px at 5% 15%, #fff, transparent),
    radial-gradient(2px 2px at 65% 2%, #fff, transparent),
    radial-gradient(1px 1px at 10% 12%, #fff, transparent),
    radial-gradient(1px 1px at 13% 20%, #fff, transparent),
    radial-gradient(1px 1px at 17% 10%, #fff, transparent),
    radial-gradient(1px 1px at 22% 7%, #fff, transparent),
    radial-gradient(1px 1px at 26% 15%, #fff, transparent),
    radial-gradient(1px 1px at 30% 8%, #fff, transparent),
    radial-gradient(1px 1px at 35% 18%, #fff, transparent),
    radial-gradient(1px 1px at 40% 12%, #fff, transparent),
    radial-gradient(1px 1px at 45% 5%, #fff, transparent),
    radial-gradient(2px 2px at 50% 10%, #fff, transparent),
    radial-gradient(2px 2px at 55% 14%, #fff, transparent),
    radial-gradient(2px 2px at 60% 6%, #fff, transparent),
    radial-gradient(1px 1px at 65% 18%, #fff, transparent),
    radial-gradient(1px 1px at 70% 7%, #fff, transparent),
    radial-gradient(1px 1px at 75% 20%, #fff, transparent),
    radial-gradient(1px 1px at 95% 12%, #fff, transparent),
    radial-gradient(2px 2px at 97% 4%, #fff, transparent),
    radial-gradient(1px 1px at 99% 8%, #fff, transparent),
    radial-gradient(1px 1px at 5% 10%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 30% 25%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 50% 35%, rgba(255,255,255,.9), transparent),
    radial-gradient(3px 3px at 50% 27%, rgba(254,254,254,.438), transparent),
    radial-gradient(1px 1px at 25% 75%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 40% 78%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 55% 74%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 70% 73%, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 85% 76%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 90% 72%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 5% 38%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 15% 36%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 25% 39%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 35% 35%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 45% 34%, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 55% 37%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 65% 29%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 75% 32%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 85% 31%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 95% 30%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 10% 29%, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 20% 28%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 30% 27%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 40% 40%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 50% 39%, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 60% 38%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 70% 37%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 80% 36%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 95% 34%, rgba(255,255,255,.15), transparent),
    radial-gradient(2px 2px at 10% 34%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 30% 35%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 45% 33%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 60% 32%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 75% 34%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 88% 35%, rgba(255,255,255,.4), transparent),
    radial-gradient(3px 3px at 15% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(3px 3px at 35% 32%, rgba(255,255,255,.5), transparent),
    radial-gradient(3px 3px at 55% 31%, rgba(255,255,255,.45), transparent),
    radial-gradient(3px 3px at 75% 29%, rgba(255,255,255,.5), transparent),
    radial-gradient(3px 3px at 90% 30%, rgba(255,255,255,.55), transparent);
  background-size: 1400px 1250px;
  animation: starTwinkle2 4s infinite ease-in-out;
}
@keyframes starTwinkle2 { 0%,100%{opacity:.8} 50%{opacity:1} }

.celestial-glow {
  inset: 0;
  background: linear-gradient(45deg, var(--bg-dark-1) 0%, var(--bg-dark-1) 30%, var(--bg-dark-2) 100%);
  opacity: .8;
}

/* haze and mountains */
.drifting-haze {
  bottom: 39%; width: 100%; height: 7%;
  background: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.05), transparent);
  filter: blur(8px);
  z-index: 99;
}
.shadowed-peaks {
  bottom: 44%; right: 0; width: 30%; height: 10vh;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" preserveAspectRatio="none"><path fill="%23040b14" d="M0,200 L100,100 L150,150 L200,50 L250,120 L300,80 L350,160 L400,90 L450,140 L500,60 L500,200 Z"/></svg>') no-repeat right bottom / contain;
}
.horizon-gleam {
  bottom: 43.8%; left: 0; width: 100%; height: 1.5%;
  background: linear-gradient(to top, rgba(255,255,255,.4), transparent);
  filter: blur(4px); opacity: .2;
  z-index: 99;
}

/* moon */
.moon-container { top: 20%; right: 2%; width: 55px; height: 55px; }
.moon-sphere {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse at 52% 70%, rgba(255,255,255,.95) 15%, rgba(230,230,230,.9) 35%, rgba(210,210,210,.85) 60%, rgba(190,190,190,.8) 80%);
  z-index: 1; overflow: hidden;
}
.moon-sphere::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(50,50,50,.3) 8%, transparent 35%),
    radial-gradient(circle at 65% 60%, rgba(30,30,30,.35) 12%, transparent 40%),
    radial-gradient(circle at 50% 85%, rgba(40,40,40,.3) 10%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(60,60,60,.25) 7%, transparent 30%);
  mix-blend-mode:multiply; opacity:.8;
}
.moon-glow {
  position:absolute; top:50%; left:50%;
  width:150px; height:150px; transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle, #fff 0%, #fff 0%, hsl(240 100% 6%) 100%);
  opacity:.1; filter: blur(20px);
}

/* ocean */
.night-ocean {
  bottom: 0; left: 0; width: 100%; height: 45%;
  overflow: hidden; background: linear-gradient(to bottom, #0e1726 0%, #050a13 100%);
}
.night-ocean .static-wave {
  left: 0; width: 100%; height: 25vh;
  background-size: cover; background-repeat: no-repeat; background-position: bottom center;
}
.night-ocean .far-wave {
  bottom: 35%; opacity: .35;
  background-image: url('data:image/svg+xml;utf8,<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg"><path fill="%23050a13" d="M0,60 C500,120 1420,-50 1920,60 L1920,200 L0,200 Z"/></svg>');
}
.night-ocean .mid-wave {
  bottom: 20%; opacity: .15;
  background-image: url('data:image/svg+xml;utf8,<svg width="1920" height="220" xmlns="http://www.w3.org/2000/svg"><path fill="%23050a13" d="M0,80 C500,180 1420,-30 1920,90 L1920,220 L0,220 Z"/></svg>');
}
.night-ocean .front-wave {
  bottom: -1px; opacity: 1;
  /* colored fill + mask shape */
  background: linear-gradient(to bottom,#030a14 0%,#030a14 80%);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M0,50 C400,150 1520,-50 1920,50 L1920,200 L0,200 Z" fill="black"/></svg>') bottom center / cover no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M0,50 C400,150 1520,-50 1920,50 L1920,200 L0,200 Z" fill="black"/></svg>') bottom center / cover no-repeat;
}
.moon-secondary-glow {
  bottom: 55%; left: 50%; width: 180%; height: 30%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 70% 100% at center, rgba(255,255,255,.08) 0%, rgba(100,100,200,.05) 40%, rgba(0,0,30,0) 100%);
  opacity: .35; filter: blur(35px);
}
.moon-reflection {
  bottom: 61%; left: 55%; width: 40%; height: 85%;
  transform: translateX(-50%) scaleY(1.1);
  background: radial-gradient(ellipse 50% 95% at center,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.28) 10%,
    rgba(230,230,255,.2) 25%,
    rgba(200,200,255,.12) 40%,
    rgba(150,150,220,.08) 55%,
    rgba(100,100,200,.05) 70%,
    rgba(50,50,100,.02) 85%,
    rgba(0,0,30,0) 100%);
  opacity: .28;
}

/* starfield container (kept subtle) */
.star-container { top:0; left:0; width:100%; height:100%; overflow:hidden; }

/* shooting star */
.shooting-star {
  left: 40%; top: 0; width: 1px; height: 3.5%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  opacity: 0; transform-origin: center;
  animation: shootingStar 2.8s linear infinite;
}
@keyframes shootingStar {
  0%, 88% { transform: translate(0,0) rotate(-55deg); opacity: 0; }
  90% { opacity: 1; }
  100% { transform: translate(60vw, 50vh) rotate(-55deg); opacity: 0; }
}

/* responsive tweaks */
@media (min-width: 64rem) {
  .cs-text { font-size: 1.5rem; }
}
@media (max-width: 767px) {
  .moon-container { top: 18%; right: 2%; width: 45px; height: 45px; }
  @keyframes shootingStar {
    0%, 88% { transform: translate(0,0) rotate(-45deg); opacity: 0; }
    90% { opacity: 1; }
    100% { transform: translate(60vw, 50vh) rotate(-45deg); opacity: 0; }
  }
}
@media (max-width: 575px) {
  .moon-container { top: 15%; right: 2%; width: 30px; height: 30px; }
  @keyframes shootingStar {
    0%, 88% { transform: translate(0,0) rotate(-35deg); opacity: 0; }
    90% { opacity: 1; }
    100% { transform: translate(130vw, 50vh) rotate(-35deg); opacity: 0; }
  }
}

/* stacking fix for hero-358, no color changes, no button overrides */
#hero-358 { position: relative; z-index: 0; }
#hero-358 .night-sky-scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; isolation: isolate; }
#hero-358 .cs-container, #hero-358 .cs-flex-group, #hero-358 .cs-person { position: relative; z-index: 2; }
#hero-358 .hero-bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
/* fix image position back to yours */
#hero-358 .cs-container { position: relative; z-index: 2; }
/* don't force position on the image */
#hero-358 .cs-flex-group { position: relative; z-index: 2; }
#hero-358 .cs-person { position: static !important; z-index: auto !important; }

/* keep your original image block */
.cs-person {
  left: 50%;
  width: clamp(16rem, 80vw, 26rem);
  pointer-events: none;
  padding-top: 5%;
}
.cs-person img { width: 100%; height: auto; display: block; }