/* --- Hero ------------------------------------------------------------------ */
.so-hero {
  min-height: 100vh;
  padding: var(--nav-height) 0 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, var(--navy-glow) 0%, transparent 46%),
    linear-gradient(178deg, #0a1330 0%, var(--navy-900) 52%, #0a1532 100%);
  color: var(--paper);
}

/* Maan */
.so-hero__moon {
  position: absolute;
  top: 12%;
  right: 9%;
  width: clamp(90px, 13vw, 168px);
  height: clamp(90px, 13vw, 168px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fdf3cf, #f2d98c 58%, #e6c46a);
  box-shadow: 0 0 70px 14px rgba(242, 217, 140, 0.34);
}

/* Tekst */
.so-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 4vh;
  padding-bottom: 26vh;
}
.so-hero__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.so-hero__line { width: 26px; height: 1px; display: inline-block; flex-shrink: 0; }
.so-hero__line--left { background: linear-gradient(90deg, transparent, var(--gold-300)); }
.so-hero__line--right { background: linear-gradient(90deg, var(--gold-300), transparent); }

.so-hero__title { margin: 18px 0 0; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); }
.so-hero__title-accent { font-style: italic; color: var(--gold-300); }

.so-hero__lead {
  font-family: var(--sans);
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  max-width: 620px;
  margin: 26px 0 0;
  color: rgba(251, 243, 224, 0.86);
}

.so-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.so-hero__btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid rgba(251, 243, 224, 0.7);
}
.so-hero__btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* Water + boot */
.so-hero__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  z-index: 2;
  pointer-events: none;
}
.so-hero__boat {
  position: absolute;
  bottom: 16vh;
  left: 65%;
  width: clamp(176px, 24vw, 304px);
  height: auto;
  animation: bob 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
}
.so-hero__waves { position: absolute; inset: 0; }
.so-hero__wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
/* De achterste golf beweegt 2% heen en weer; maak hem breder dan het scherm zodat de randen nooit bloot komen. */
.so-hero__wave--back { left: -4%; width: 108%; max-width: none; animation: drift 9s ease-in-out infinite alternate; }
/* Smalle of staande schermen: hetzelfde tafereel als op een desktop, op de maat van de boot in
   plaats van de schermhoogte. Het water is 1,1x zo hoog als de boot breed is (desktop: 1 tot 1,2),
   de golven zijn 4,7x zo breed als hoog (niet samengeknepen; je ziet er een stuk van) en de golftop
   (op 62,5% van de golf) ligt onder het midden van de boot (65% van het scherm). */
@media (max-aspect-ratio: 3/2) {
  .so-hero__water { --so-water: calc(clamp(176px, 24vw, 304px) * 1.1); height: var(--so-water); }
  .so-hero__boat { bottom: calc(var(--so-water) * 0.47); }
  .so-hero__wave,
  .so-hero__wave--back { left: calc(65% - var(--so-water) * 2.94); width: calc(var(--so-water) * 4.7); max-width: none; }
}

/* Scroll-hint */
.so-hero__scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--gold-300);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.so-hero__scroll-arrow { font-size: 1.4rem; animation: nudge 1.8s ease-in-out infinite; }