/* ===========================================
   FLOWBRAIN — Responsive Styles
   =========================================== */

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
  .container { padding: 0 20px; }
  .section { padding: var(--section-py-mobile) 0; }
  .btn { width: 100%; }

  .header__nav, .header__cta { display: none; }
  .header__hamburger { display: flex; }

  .hero { min-height: 90vh; }
  .hero__title { font-size: clamp(2.25rem, 9vw, 3rem); }
  .hero__scroll { display: none; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse { direction: ltr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  .why__grid { grid-template-columns: 1fr; }

  /* Services: vertical stack on mobile */
  .services__scroll-container { height: auto; }
  .services__scroll-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  .services__scroll-track {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
  .services__hcard {
    width: 100%;
    opacity: 1;
    transform: none;
  }

  /* Timeline: single column on mobile */
  .timeline { padding-left: 28px; }
  .timeline__content { grid-template-columns: 1fr; gap: 24px; }
  .timeline__content--reverse { direction: ltr; }
  .timeline__image { aspect-ratio: 16/9; }
  .timeline__step { padding-bottom: 60px; }
  .timeline__dot {
    left: -28px;
    width: 12px;
    height: 12px;
    transform: translateX(-4.5px);
  }

  .stats__grid { grid-template-columns: 1fr; gap: 40px; }

  .faq__list { padding: 0; }

  .final-cta { padding: var(--section-py-mobile) 0; }
  .final-cta__actions { flex-direction: column; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ---- Tablet (768px — 1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding: 0 32px; }
  .section { padding: 100px 0; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }

  /* Services: touch scroll with snap on tablet */
  .services__scroll-container { height: auto; }
  .services__scroll-sticky {
    position: static;
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .services__scroll-sticky::-webkit-scrollbar { display: none; }
  .services__scroll-track {
    padding: 0 32px;
  }
  .services__hcard {
    scroll-snap-align: center;
    opacity: 1;
    transform: none;
    width: clamp(300px, 45vw, 380px);
  }

  /* Timeline: slightly reduced spacing */
  .timeline__content { gap: 32px; }
  .timeline__step { padding-bottom: 72px; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ---- Desktop (768px+) ---- */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .mobile-only { display: none; }
}

@media (min-width: 1025px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Contact responsive ---- */
@media (max-width: 767px) {
  .contact-page__grid { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
}

/* ===========================================
   Aurora Dark — Performance & Accessibility
   =========================================== */

/* ---- Remove aurora orbs & heavy effects on mobile ---- */
@media (max-width: 767px) {
  .aurora-bg {
    display: none;
  }

  .tech-grid::before {
    display: none;
  }

  /* Reduce glass blur on mobile */
  .glass,
  .why__card,
  .services__hcard,
  .contact-form,
  .contact-cal,
  .contact-info,
  .cookie-banner {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Simplify glow on mobile */
  .btn--primary {
    box-shadow: 0 0 15px rgba(0, 200, 150, 0.2);
  }
  .btn--primary:hover {
    box-shadow: 0 0 20px rgba(0, 200, 150, 0.3);
  }

  /* Hide stats blobs on mobile */
  .stats__blobs {
    display: none;
  }
}

/* ---- Tablet aurora adjustments ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .aurora-orb {
    filter: blur(60px);
    opacity: 0.2;
  }
}

/* ---- Reduced motion accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  .aurora-orb {
    animation: none !important;
  }
  .hero__label-dot {
    animation: none !important;
  }
  .hero__bg img {
    animation: none !important;
  }

  /* Disable all new structural animations */
  .scroll-progress,
  .cursor-glow {
    display: none !important;
  }

  .hero__title-line {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hero__badge {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hero__subtitle,
  .hero__actions {
    animation: none !important;
  }

  .timeline__fill {
    transition: none;
  }

  .timeline__image {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .services__hcard {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stats__blob {
    animation: none !important;
  }

  .faq__answer {
    transition: none;
  }

  .faq__icon {
    transition: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}