/* HERO container */
.mi-hero{
  position: relative;
  min-height: 84svh;
  display: grid;
  place-items: center;
  padding: 96px 20px 72px;
  overflow: hidden;
}

/* Background image as an actual element (bulletproof) */
.mi-hero .mi-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(105%);
  z-index: 0;
}

/* Dark gradient overlay for contrast */
.mi-hero .mi-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,18,32,.55), rgba(11,18,32,.25) 45%, rgba(11,18,32,.08));
  z-index: 1;
}

/* Ensure content sits above */
.mi-hero > *:not(.mi-bg):not(.mi-overlay){
  position: relative;
  z-index: 2;
}

/* Panel + text (as you have now) */
.mi-panel{
  --panel-alpha: .45;
  background: rgba(17,24,39, var(--panel-alpha));
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  padding: 26px 26px 24px;
  max-width: 820px;
  width: min(92vw, 820px);
  text-align: center;
  box-shadow: 0 18px 50px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(120%);
}

.mi-kicker{ font-weight: 800; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:#cbd5e1; opacity:.95; margin-bottom:4px; }

.mi-title{ margin:6px 0 2px; line-height:1.06; }
.mi-title .mi-line1{
  display:block; font-family: "Great Vibes", cursive; font-weight:400; letter-spacing:.02em;
  font-size: clamp(34px, 6.2vw, 72px); color:#ffffff; text-shadow: 0 2px 14px rgba(0,0,0,.22);
}
.mi-title .mi-line2{
  display:block; font-family: "Great Vibes", cursive; font-weight:400; letter-spacing:.02em;
  font-size: clamp(28px, 5.2vw, 52px); color:#f1f5f9; text-shadow: 0 2px 12px rgba(0,0,0,.20); margin-top:2px;
}

@keyframes mi-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.mi-floaty{ animation: mi-bob 3.3s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce){ .mi-floaty{ animation:none } }

.mi-sub{ margin-top:8px; color:#dbe2ea; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.18) }
.mi-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; justify-content:center; }
.mi-btn{ appearance:none; border:none; cursor:pointer; text-decoration:none; font-weight:800; border-radius:12px; padding:10px 14px; }
.mi-btn.primary{ background: linear-gradient(135deg, #0ea5e9, #22d3ee); color:#fff; box-shadow: 0 12px 30px rgba(14,165,233,.30); }
.mi-btn.secondary{ background: rgba(255,255,255,.08); color:#e5e7eb; border:1px solid rgba(255,255,255,.18); }