.mp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--c-fg);
  background: #fefefe;
}

.mp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(3,105,161,.08), transparent 60%),
    radial-gradient(760px 520px at -6% 120%, rgba(14,165,233,.07), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #fefefe 42%, #f2f4f8 100%);
}
.mp-hero__inner { position: relative; z-index: 2; padding-block: clamp(1.9rem, 4.5vw, 3.25rem); }

.mp-hero h1 {
  color: var(--c-fg); font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.12; margin-bottom: var(--sp-4); text-wrap: balance;
}
.mp-hero--tall h1 { font-size: clamp(2rem, 1.1rem + 3vw, 3.25rem); }
.mp-hero .lead { color: var(--c-fg-2); max-width: 52ch; }
.mp-hero p { color: var(--c-fg-2); }
.mp-hero .eyebrow { color: var(--c-accent); }
.mp-hero a:not(.btn) { color: var(--c-accent-700); font-weight: 600; }
.mp-hero a:not(.btn):hover { color: var(--c-accent); }
.mp-hero .hero__actions { margin-top: var(--sp-5); }


.mp-hero .btn--on-dark { --btn-bg: transparent; --btn-fg: var(--c-navy); --btn-bd: var(--c-border-strong); }
.mp-hero .btn--on-dark:hover { --btn-bg: var(--c-surface); --btn-bd: var(--c-accent); --btn-fg: var(--c-accent-700); }


.mp-hero--anim .mp-hero__inner { padding-block: clamp(2.4rem, 6vw, 4.5rem); }
.mp-hero--anim { min-height: clamp(280px, 38vw, 420px); display: flex; align-items: center; }


.mp-hero--compact.mp-hero--anim { min-height: clamp(150px, 22vw, 230px); }
.mp-hero--compact .mp-hero__inner { padding-block: clamp(1.25rem, 3vw, 2rem); }
.mp-hero--compact h1 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); margin-bottom: var(--sp-3); }
@media (max-width: 600px) {
  .mp-hero--compact.mp-hero--anim { min-height: clamp(130px, 32vw, 190px); }
}

.mp-hero__anim { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mp-hero__anim .mp-hero__flow { position: absolute; inset: 0; width: 100%; height: 100%; }


.mp-hero__glow {
  position: absolute; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -18%; right: -8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.18), transparent 66%);
  filter: blur(6px); animation: mpGlow 12s ease-in-out infinite alternate;
}
@keyframes mpGlow {
  from { transform: translate3d(0,0,0) scale(1); opacity: .85; }
  to   { transform: translate3d(-3%, 4%, 0) scale(1.12); opacity: 1; }
}


.mp-wave { will-change: transform; animation: mpWave linear infinite; }
@keyframes mpWave {
  from { transform: translateX(0); }
  to   { transform: translateX(-720px); }
}

.mp-bubble { will-change: transform, opacity; opacity: 0; animation: mpBubble ease-in infinite; }
@keyframes mpBubble {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .85; }
  80%  { opacity: .5; }
  100% { transform: translate(var(--dx, 16px), -400px); opacity: 0; }
}


@media (max-width: 767px) {
  .mp-hero--anim { min-height: clamp(170px, 40vw, 250px); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-hero__glow, .mp-wave { animation: none; }
  .mp-bubble { animation: none; opacity: .5; }
}


.mp-hero__media { position: relative; width: 100%; overflow: hidden; z-index: 1; }
.mp-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.mp-hero__slide.is-active { opacity: 1; }
.mp-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }


.mp-hero--split { display: flex; flex-direction: column; }
.mp-hero--split .mp-hero__lead-block { order: 1; }
.mp-hero--split .mp-hero__media {
  order: 2; aspect-ratio: 1800 / 2250; max-height: 68vh;
  margin-block: clamp(1rem, 3vw, 1.5rem);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.mp-hero--split .mp-hero__cta-block { order: 3; padding-top: 0; }


@media (min-width: 768px) {
  .mp-hero--split { justify-content: center; min-height: calc(100dvh - var(--header-h)); }
  .mp-hero--split.mp-hero--mid { min-height: clamp(440px, 64vh, 640px); }
  .mp-hero--split .mp-hero__media {
    position: absolute; inset: 0; z-index: 0;
    aspect-ratio: auto; max-height: none; margin: 0;
    border-radius: 0; box-shadow: none;
  }
  
  .mp-hero--split .mp-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(8,24,48,.90) 0%, rgba(10,35,68,.62) 42%, rgba(12,60,110,.18) 70%, transparent 92%);
  }
  .mp-hero--split .mp-hero__lead-block,
  .mp-hero--split .mp-hero__cta-block { position: relative; z-index: 2; }
  .mp-hero--split .mp-hero__lead-block { padding-bottom: 0; }
  .mp-hero--split .mp-hero__cta-block { padding-top: var(--sp-4); }
  
  .mp-hero--split .mp-hero__lead-block h1 { color: #fff; font-size: clamp(2rem, 1rem + 2vw, 2.85rem); max-width: 17ch; }
  .mp-hero--split .mp-hero__lead-block .lead { color: rgba(255,255,255,.9); max-width: 40ch; }
  .mp-hero--split .hero__choose { color: #bae6fd; }
  .mp-hero--split .hero__choices { margin-inline: 0; }
  
  .mp-hero--split .mp-hero__cta-block .btn--on-dark { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.32); }
  .mp-hero--split .mp-hero__cta-block .btn--on-dark:hover { --btn-bg: rgba(255,255,255,.16); --btn-bd: #fff; }
}


@media (max-width: 767px) {
  .mp-hero--split .mp-hero__lead-block { padding-block: clamp(.9rem, 3.5vw, 1.3rem) 0; }
  .mp-hero--split .mp-hero__lead-block h1 { font-size: clamp(1.35rem, 4.8vw, 1.75rem); margin-bottom: .5rem; }
  .mp-hero--split .mp-hero__lead-block .lead { font-size: clamp(.78rem, 3.3vw, .85rem); line-height: 1.5; max-width: 44ch; }
  .mp-hero--split .mp-hero__media { margin-block: clamp(.75rem, 2.5vw, 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-hero__slide { transition: none; }
}


.hero-pin {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .9rem; margin-bottom: .9rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1;
  background: var(--c-accent-soft); color: var(--c-accent-700);
  border: 1px solid rgba(3,105,161,.18);
}
.hero-pin svg { width: 16px; height: 16px; flex: none; }
.hero-hl { color: var(--c-accent); }
.mp-hero--home .btn--primary svg { width: 18px; height: 18px; }


@media (min-width: 768px) {
  .mp-hero--home .mp-hero__lead-block { border-left: 4px solid rgba(255,255,255,.85); padding-left: 1.35rem; }
  .mp-hero--home .mp-hero__cta-block { padding-left: calc(1.35rem + 4px); }
  .mp-hero--home .hero-pin {
    background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.32);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .mp-hero--home .hero-hl { color: #7dd3fc; }
  .mp-hero--home .mp-hero__lead-block .lead { max-width: 50ch; }
}


@media (max-width: 767px) {
  .mp-hero--home .mp-hero__lead-block { text-align: center; }
  .mp-hero--home .hero-pin { margin-inline: auto; }
  .mp-hero--home .mp-hero__lead-block .lead { margin-inline: auto; }
  .mp-hero--home .mp-hero__cta-block .hero__actions { justify-content: center; }
  .mp-hero--home .mp-hero__cta-block .btn { flex: 1 1 auto; }
}


.hero__choose {
  margin: 0 0 .65rem; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-accent);
}
.hero__choices { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 480px) { .hero__choices { grid-template-columns: repeat(2, 1fr); max-width: 460px; } }
.hero__choices .btn { width: 100%; }