/* ============================================================
   BURGER BUTTON
   ============================================================ */
.sp-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  z-index: 60;
}

.sp-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sp-text, #eaf1ff);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.sp-burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.sp-burger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.sp-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.sp-mobile-menu {
  display: none;
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 49;
  background: var(--sp-headerbg, rgba(8, 12, 24, 0.97));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 28px 24px 40px;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  border-top: 1px solid var(--sp-border, rgba(120, 150, 220, 0.14));
  animation: spMobileIn 0.22s ease;
}

.sp-mobile-menu.open {
  display: flex;
}

@keyframes spMobileIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav links inside mobile menu */
.sp-mobile-nav {
  display: flex;
  flex-direction: column;
}

.sp-mobile-nav a {
  display: block;
  padding: 17px 4px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--sp-text, #eaf1ff);
  border-bottom: 1px solid var(--sp-border, rgba(120, 150, 220, 0.12));
}

.sp-mobile-nav a:last-child {
  border-bottom: none;
}

/* Language switcher in mobile menu */
.sp-mobile-lang {
  display: flex;
  gap: 6px;
  margin-top: 28px;
  padding: 3px;
  border-radius: 999px;
  background: var(--sp-surface, #111a30);
  border: 1px solid var(--sp-border, rgba(120, 150, 220, 0.14));
  align-self: flex-start;
}

/* CTA buttons in mobile menu */
.sp-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.sp-mobile-cta a {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--sp-text, #eaf1ff);
  border: 1px solid var(--sp-border, rgba(120, 150, 220, 0.22));
}

.sp-mobile-cta a.sp-btn-primary {
  background: linear-gradient(135deg, var(--sp-accent, #2f7bff), var(--sp-accent2, #38bdf8));
  color: #fff !important;
  border: none;
  box-shadow: 0 8px 24px var(--sp-glow, rgba(47, 123, 255, 0.4));
}

/* ============================================================
   RESPONSIVE — TABLET & MOBILE  (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {

  /* Header */
  .sp-header-inner {
    padding: 14px 18px !important;
    gap: 14px !important;
  }

  .sp-nav {
    display: none !important;
  }

  .sp-header-actions {
    display: none !important;
  }

  .sp-burger {
    display: flex !important;
  }

  /* Hero — stack to single column */
  .sp-hero {
    grid-template-columns: 1fr !important;
    padding: 44px 18px 32px !important;
    gap: 28px !important;
  }

  .sp-hero-title {
    font-size: 30px !important;
    letter-spacing: -0.5px !important;
  }

  .sp-hero-sub {
    font-size: 16px !important;
    margin-bottom: 26px !important;
  }

  /* Show hero image below text, scaled down */
  .sp-hero-img {
    order: -1;
  }

  .sp-hero-img img {
    max-width: 320px !important;
    border-radius: 20px !important;
  }

  /* Stats — 2x2 grid */
  .sp-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* About — single column */
  .sp-about {
    grid-template-columns: 1fr !important;
    padding: 44px 18px !important;
    gap: 28px !important;
  }

  /* Team — single column */
  .sp-team-grid {
    grid-template-columns: 1fr !important;
  }

  /* Steps — 2x2 grid */
  .sp-steps-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* Contact — single column */
  .sp-contact {
    grid-template-columns: 1fr !important;
    padding: 30px 18px 60px !important;
    gap: 28px !important;
  }

  /* Heading sizes */
  .sp-h2 {
    font-size: 24px !important;
    letter-spacing: -0.3px !important;
  }

  .sp-faq-q {
    font-size: 16px !important;
  }

  .sp-faq-outro {
    font-size: 18px !important;
  }

  /* Section horizontal padding normalisation */
  section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

}

/* ============================================================
   EXTRA SMALL  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  .sp-hero-title {
    font-size: 25px !important;
  }

  /* Stats — single column on very small screens */
  .sp-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Steps — single column */
  .sp-steps-grid {
    grid-template-columns: 1fr !important;
  }

  /* Team card — smaller photo */
  .sp-team-card img {
    width: 80px !important;
    height: 80px !important;
  }

  /* Hero image — smaller */
  .sp-hero-img img {
    max-width: 260px !important;
  }
}