/* ==========================================================================
   SparkFlow — responsive and reduced-motion
   ========================================================================== */

@media (max-width: 991.98px) {
  .sf-navbar {
    height: auto;
    min-height: var(--sf-nav-h);
    padding: 8px 0;
  }

  .sf-nav {
    gap: 0;
    padding: 12px 0 18px;
  }

  .sf-nav .nav-link {
    padding: 0.55rem 0 !important;
  }

  .sf-navbar .btn-sf-nav {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  .sf-hero-card {
    padding: 36px 28px 30px;
    border-radius: 36px 36px 0 0;
  }

  .sf-hero-card h1 {
    font-size: 30px;
  }

  .sf-section {
    padding: 64px 0;
  }

  .sf-section-title {
    font-size: 28px;
  }

  .sf-stat {
    border-right: 0;
    border-bottom: 1px solid var(--sf-border);
  }

  .sf-stat:nth-child(odd) {
    border-right: 1px solid var(--sf-border);
  }

  .sf-stat:nth-child(n + 3) {
    border-bottom: 0;
  }

  .sf-challenge-media img {
    height: 360px;
    max-width: 100%;
  }

  .sf-form {
    padding: 28px 22px 24px;
  }

  .sf-contact-card img {
    min-height: 280px;
  }

  .sf-footer {
    padding: 64px 0 80px;
  }

  .sf-footer-copy {
    max-width: none;
  }

  .sf-footer-mark {
    font-size: clamp(64px, 18vw, 120px);
    bottom: -0.38em;
  }
}

@media (max-width: 767.98px) {
  .sf-hero-card h1 {
    font-size: 26px;
  }

  .sf-hero-card p {
    font-size: 14px;
  }

  .sf-section-title {
    font-size: 24px;
  }

  .sf-dash-wrap {
    padding: 0;
  }

  .sf-3d {
    min-height: 300px;
    margin-top: 24px;
  }

  .sf-footer {
    padding: 48px 0 72px;
  }

  .sf-footer-mark {
    font-size: 72px;
    letter-spacing: 0.04em;
    bottom: -0.42em;
  }

  .sf-footer-line a {
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  :root {
    --sf-container: 92%;
  }

  .sf-hero-card {
    padding: 28px 18px 24px;
    border-radius: 28px 28px 0 0;
  }

  .sf-hero-actions .btn {
    width: 100%;
  }

  .sf-feature {
    margin-bottom: 8px;
  }

  .sf-challenge-media img {
    height: auto;
    max-height: 320px;
  }

  .sf-sticky-cta span {
    display: none;
  }

  .sf-sticky-cta {
    bottom: 20px;
    right: 16px;
    padding: 0.75rem;
    border-radius: 50%;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .sf-reveal {
    opacity: 1;
    transform: none;
  }

  .sf-3d__mark {
    will-change: auto;
  }
}