:root {
  --msp-bg: #12151c;
  --msp-panel: #1a1f2b;
  --msp-panel-light: #232939;
  --msp-border: #2b3242;
  --msp-text: #eef1f6;
  --msp-text-muted: #9aa4b8;
  --msp-accent: #23e0c4;      /* electric teal — primary */
  --msp-accent-dark: #14a992;
  --msp-accent2: #a78bfa;     /* violet — secondary highlight */
  --msp-accent3: #ff9466;     /* warm coral — tertiary highlight */
  --msp-accent4: #60a5fa;     /* sky blue — quaternary highlight */
  --msp-warn: #f5a623;
  --msp-danger: #f0576a;
  --msp-radius: 16px;
  --msp-font-heading: 'Sora', 'Manrope', sans-serif;
  --msp-font-body: 'Inter', sans-serif;
}

body {
  background: var(--msp-bg);
  color: var(--msp-text);
  font-family: var(--msp-font-body);
}
/* Sticky footer: <main> grows to fill whatever space content doesn't
   use, so the footer always sits at the bottom of the screen — never
   floating partway up on a short page. Scoped with :has(> footer) so
   this only activates on pages that actually have one. */
body:has(> footer) { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

h1, h2, h3, h4, .msp-heading {
  font-family: var(--msp-font-heading);
  font-weight: 700;
}

.msp-navbar {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding-top: 8px;
  padding-bottom: 8px;
}
.msp-navbar .nav-link { color: #2a2f3a; font-weight: 500; }
.msp-navbar .text-secondary { color: #5a6270 !important; }
.msp-navbar .btn-outline-light {
  border-color: var(--msp-bg); color: var(--msp-bg); background: transparent;
}
.msp-navbar .btn-outline-light:hover { background: var(--msp-bg); color: #fff; }

.msp-topbar {
  background: #000000;
  color: var(--msp-text-muted);
  font-size: 0.8rem;
  padding: 6px 0;
}
.msp-topbar-phone { color: var(--msp-accent); text-decoration: none; font-weight: 600; }
.msp-topbar-phone:hover { color: var(--msp-accent-dark); }
.msp-topbar-social { display: flex; gap: 0.9rem; }
.msp-topbar-social a { font-size: 1rem; text-decoration: none; opacity: 0.9; transition: opacity 0.15s ease, transform 0.15s ease; }
.msp-topbar-social a:hover { opacity: 1; transform: translateY(-1px) scale(1.1); }

.msp-card {
  background: var(--msp-panel);
  border: 1px solid var(--msp-border);
  border-radius: var(--msp-radius);
  padding: 1.5rem;
}

.btn-msp-primary {
  background: var(--msp-accent);
  color: #0a0d12;
  border: none;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.6rem 1.6rem;
}
.btn-msp-primary:hover { background: var(--msp-accent-dark); color: #fff; }

.btn-msp-outline {
  background: transparent;
  color: var(--msp-text);
  border: 1px solid var(--msp-border);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.6rem 1.6rem;
}
.btn-msp-outline:hover { border-color: var(--msp-accent); color: var(--msp-accent); }

/* ---------- Hero ---------- */
.msp-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 4rem;
  background:
    radial-gradient(60% 50% at 75% 10%, rgba(35,224,196,0.10), transparent 60%),
    var(--msp-bg);
}
.msp-hero .eyebrow {
  display: inline-block;
  color: var(--msp-accent);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.msp-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
.msp-hero p.lead { color: var(--msp-text-muted); max-width: 480px; }
.msp-hero img { max-width: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); }

/* ---------- Full-screen hero ---------- */
.msp-hero-full {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #0a0d12;
}
.msp-hero-full .carousel-item { position: relative; }
.hero-media-layer { position: absolute; inset: 0; overflow: hidden; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media-kenburns {
  background-size: cover;
  background-position: center;
  animation: heroKenBurns 14s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}
.hero-gradient {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.55) 45%, rgba(10,13,18,0.15) 100%),
    linear-gradient(to top, rgba(10,13,18,0.85) 0%, transparent 30%);
}
.hero-text-layer {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding-bottom: 6rem; /* room for the stats overlay */
}
.hero-text-inner {
  max-width: 640px;
  animation: heroTextIn 1s ease both;
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-text-inner h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
  margin: 0.6rem 0 1rem;
  color: var(--msp-text);
}
.hero-stats-overlay {
  position: absolute; left: 0; right: 0; bottom: 2.5rem; z-index: 3;
}
.msp-hero-indicators-full {
  bottom: auto; top: 1.5rem; margin: 0;
}
.msp-hero-indicators-full [data-bs-target] {
  width: 28px; height: 3px; border-radius: 2px;
  background-color: rgba(255,255,255,0.3); border: none; opacity: 1;
}
.msp-hero-indicators-full .active { background-color: var(--msp-accent); }
@media (max-width: 767px) {
  .msp-hero-full { height: 88vh; }
  .hero-stats-overlay .msp-stat .num { font-size: 1.4rem; }
}

/* ---------- Hero carousel (legacy, kept for any page still using it) ---------- */
.msp-hero-carousel .carousel-item {
  transition: opacity 0.9s ease, transform 0.9s ease;
  position: relative;
}
.msp-hero-carousel .carousel-item img {
  width: 100%;
  border-radius: 20px;
}
.msp-hero-carousel .hero-slide-caption {
  text-align: center;
  color: var(--msp-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-top: 14px;
  margin-bottom: 0;
}
.msp-hero-indicators { position: static; margin-top: 4px; }
.msp-hero-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%;
  background-color: var(--msp-border);
  border: none; opacity: 1; margin: 0 4px;
}
.msp-hero-indicators .active { background-color: var(--msp-accent); }

/* ---------- Secondary page banners ---------- */
.msp-page-banner { position: relative; height: 260px; overflow: hidden; }
.msp-page-banner .carousel-item {
  height: 260px;
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.4) saturate(1.1);
}
.msp-page-banner-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.55) 60%, rgba(10,13,18,0.25) 100%);
}
.msp-page-banner-overlay .msp-section-title { margin-bottom: 0.4rem; }
.msp-page-banner + .msp-section { padding-top: 3rem; }

/* ---------- Scroll-reveal animations ---------- */
.msp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.msp-reveal.msp-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children of a revealed group slightly, for a cascading feel */
.msp-reveal-group.msp-revealed > * {
  transition-delay: calc(var(--msp-reveal-index, 0) * 80ms);
}
@media (prefers-reduced-motion: reduce) {
  .msp-reveal, .msp-reveal-group > * { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Section rhythm ---------- */
.msp-section { padding: 4.5rem 0; }
.msp-section-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 0.5rem; }
.msp-section-sub { color: var(--msp-text-muted); max-width: 620px; }

.msp-icon-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(35,224,196,0.12); color: var(--msp-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem;
}
/* Rotating color variants so a grid of feature cards doesn't read as one
   flat block of teal — apply msp-icon-circle--2/3/4 in sequence. */
.msp-icon-circle--2 { background: rgba(167,139,250,0.14); color: var(--msp-accent2); }
.msp-icon-circle--3 { background: rgba(255,148,102,0.14); color: var(--msp-accent3); }
.msp-icon-circle--4 { background: rgba(96,165,250,0.14); color: var(--msp-accent4); }

.msp-stat { text-align: center; }
.msp-stat .num { font-family: var(--msp-font-heading); font-size: 2.2rem; font-weight: 700; color: var(--msp-accent); }
.msp-stat:nth-child(2) .num { color: var(--msp-accent2); }
.msp-stat:nth-child(3) .num { color: var(--msp-accent3); }
.msp-stat .label { color: var(--msp-text-muted); font-size: 0.9rem; }

.msp-step-number { background: var(--msp-accent); }
.msp-step-number:nth-of-type(4n+2) { background: var(--msp-accent2); }
.msp-step-number:nth-of-type(4n+3) { background: var(--msp-accent3); }
.msp-step-number:nth-of-type(4n) { background: var(--msp-accent4); }

.msp-step-number {
  width: 36px; height: 36px; border-radius: 50%; background: var(--msp-accent);
  color: #0a0d12; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.msp-final-cta {
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(35,224,196,0.14), rgba(20,169,146,0.05));
  border: 1px solid var(--msp-border);
  padding: 3rem;
  text-align: center;
}

/* ---------- Booking wizard slot cards ---------- */
.slot-card {
  border: 1px solid var(--msp-border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.slot-card.available:hover, .slot-card.partial:hover { border-color: var(--msp-accent); }
.slot-card.selected { border-color: var(--msp-accent); background: rgba(35,224,196,0.08); }
.slot-card.booked, .slot-card.blocked { opacity: 0.4; cursor: not-allowed; }
.slot-card.partial { border-color: var(--msp-warn); } /* still bookable, but sharing the hour with another campaign */

.msp-status-badge { border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.8rem; font-weight: 600; }
.status-pending_verification { background: rgba(245,166,35,0.15); color: var(--msp-warn); }
.status-payment_pending { background: rgba(245,166,35,0.15); color: var(--msp-warn); }
.status-approved, .status-scheduled, .status-live { background: rgba(35,224,196,0.15); color: var(--msp-accent); }
.status-rejected, .status-cancelled { background: rgba(240,87,106,0.15); color: var(--msp-danger); }
.status-completed { background: rgba(154,164,184,0.15); color: var(--msp-text-muted); }

.mobile-price-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--msp-panel); border-top: 1px solid var(--msp-border);
  padding: 0.75rem 1rem; display: none; z-index: 1030;
}
@media (max-width: 767px) { .mobile-price-bar { display: flex; } }

/* ---------- Nav link icons + hover motion, for a livelier modern header ---------- */
.msp-navbar .nav-link, .msp-navbar a:not(.navbar-brand):not(.btn) {
  transition: color 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.msp-navbar a:not(.navbar-brand):not(.btn):hover {
  color: var(--msp-accent) !important;
  transform: translateY(-1px);
}
.msp-navbar .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(35,224,196,0.25); }
.msp-navbar i.bi { font-size: 0.95em; }