/* ================================================
   SCROLL ANIMATION UTILITIES
   ================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.parallax-wrap {
  overflow: hidden;
}

/* ================================================
   MOBILE SMALL (< 640px)
   ================================================ */
@media (max-width: 639px) {
  .hero--video {
    min-height: 70vh;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .stats {
    gap: var(--space-6);
  }

  .stat__value {
    font-size: var(--font-size-3xl);
  }

  .footer__grid {
    text-align: center;
  }

  .footer__brand {
    margin-left: auto;
    margin-right: auto;
  }

  .footer__social {
    justify-content: center;
  }

  /* Product cards mobile fix */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .card__body {
    padding: var(--space-4);
  }

  .section__title {
    font-size: var(--font-size-2xl);
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ================================================
   TABLET (768px+)
   ================================================ */
@media (min-width: 768px) {
  .hero--video {
    min-height: 90vh;
  }
}

/* ================================================
   DESKTOP (1024px+)
   ================================================ */
@media (min-width: 1024px) {
  .hero--video .hero__content {
    max-width: 38rem;
  }
}


/* ================================================
   SPLIT DARK BOX (Video-like overlay on Mobile)
   ================================================ */
@media (max-width: 767px) {
  .split--dark-box {
    position: relative;
    background-color: #000 !important;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    isolation: isolate;
    padding: var(--space-8) var(--space-4);
    display: block !important;
  }

  .split--dark-box .split__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .split--dark-box .split__media .img-placeholder {
    height: 100% !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0;
    background: transparent;
  }

  .split--dark-box .split__media img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    opacity: 0.6;
  }

  /* Dark overlay - same as video hero */
  .split--dark-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
    z-index: 0;
  }

  .split--dark-box .split__text {
    position: relative;
    z-index: 1;
  }

  /* Force white text for contrast on dark background */
  .split--dark-box .section__label,
  .split--dark-box h2,
  .split--dark-box h4,
  .split--dark-box p {
    color: var(--color-white) !important;
  }

  .split--dark-box p {
    opacity: 0.85;
  }

  /* Step numbers */
  .split--dark-box [style*="border-radius: 50%"] {
    background: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
  }
}

/* Align the button specifically for this section */
@media (min-width: 768px) {
  .split+.text-center {
    text-align: left;
  }
}