/* ========== 1280px and below ========== */
@media (max-width: 1280px) {
  .container {
    max-width: 1100px;
  }

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

  .vr-comparison {
    max-width: 700px;
  }
}

/* ========== 1024px and below ========== */
@media (max-width: 1024px) {
  .container {
    padding: 0 var(--space-6);
  }

  /* Navbar */
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Products */
  .product-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-cards .product-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
  }

  /* Pipeline */
  .pipeline {
    flex-direction: column;
    gap: var(--space-4);
  }

  .pipeline-connector {
    width: 2px;
    height: 50px;
    margin-bottom: 0;
  }

  .pipeline-connector.active::before,
  .pipeline-connector.active::after {
    top: auto;
    left: -3px;
    animation-name: particle-flow-vertical;
  }

  /* Feature grid */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-grid .feature-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }

  /* AutoPay */
  .autopay-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .autopay-content {
    max-width: 100%;
    text-align: center;
  }

  .autopay-content .section-label,
  .autopay-content .section-title,
  .autopay-content .section-subtitle {
    text-align: center;
  }

  .autopay-content .section-subtitle {
    margin: 0 auto var(--space-6);
  }

  .autopay-features {
    max-width: 480px;
    margin: 0 auto;
  }

  /* VR setup */
  .setup-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .setup-steps::before {
    display: none;
  }

  /* Footer */
  .footer-content {
    flex-direction: column;
    gap: var(--space-5);
    text-align: center;
  }

  .footer-brand {
    align-items: center;
  }
}

/* Vertical particle flow for mobile pipeline */
@keyframes particle-flow-vertical {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ========== 768px and below ========== */
@media (max-width: 768px) {
  section {
    padding: var(--space-9) 0;
  }

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

  /* Hero */
  .hero {
    padding: var(--space-10) 0 var(--space-8);
  }

  .hero-blob-1 { width: 300px; height: 300px; }
  .hero-blob-2 { width: 250px; height: 250px; }
  .hero-blob-3 { width: 200px; height: 200px; }

  .hero-ctas {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero-ctas .btn {
    width: 100%;
    max-width: 280px;
  }

  .hero-stats {
    flex-direction: column;
    gap: var(--space-5);
  }

  .hero-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .hero-stat-value {
    font-size: var(--text-2xl);
  }

  /* Products */
  .product-cards {
    grid-template-columns: 1fr;
  }

  .product-cards .product-card:last-child {
    max-width: 100%;
  }

  /* Feature grid */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid .feature-card:last-child {
    max-width: 100%;
  }

  /* Phone mockup */
  .phone-mockup {
    width: 240px;
    height: 480px;
    border-radius: 30px;
  }

  .phone-notch {
    width: 100px;
    height: 24px;
  }

  .phone-screen-container {
    top: 30px;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }

  /* VR comparison */
  .vr-comparison {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .comparison-vs {
    text-align: center;
  }

  /* Setup steps */
  .setup-steps {
    grid-template-columns: 1fr 1fr;
  }

  /* CTA */
  .cta-buttons {
    flex-direction: column;
    gap: var(--space-3);
  }

  .cta-buttons .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Footer */
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }
}

/* ========== 480px and below ========== */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-3);
  }

  .section-header {
    margin-bottom: var(--space-7);
  }

  .pipeline-step-icon {
    width: 80px;
    height: 80px;
  }

  .setup-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .autopay-feature {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}