/* ============================================================
   BYTEPLAYNUDGE.BOND — RESPONSIVE STYLESHEET
   Mobile-first breakpoints
   ============================================================ */

/* ─── TABLET (≤ 1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --spacing-xxl: 80px;
    --spacing-xl:  60px;
  }

  .container { padding: 0 24px; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  .process-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  .process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  .process-connector {
    width: 1px;
    height: 40px;
    margin-top: 0;
    margin-left: 28px;
    background: var(--gradient-main);
  }

  .two-col { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .footer-links { grid-template-columns: repeat(3, 1fr); }

  .service-item { grid-template-columns: 64px 1fr; }
  .service-item-cta { grid-column: 2; }

  .contact-layout { grid-template-columns: 1fr; }
}

/* ─── MOBILE (≤ 768px) ──────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --spacing-xxl: 60px;
    --spacing-xl:  48px;
    --spacing-lg:  32px;
  }

  .container { padding: 0 16px; }

  /* Header */
  .main-nav { display: none; }
  .header-cta { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero-section { min-height: auto; padding: calc(var(--header-h) + 48px) 0 80px; }
  .hero-headline { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .hero-sub { font-size: 1rem; }
  .hero-ctas { gap: 12px; }
  .hero-stats { gap: var(--spacing-md); }
  .stat-num { font-size: 1.6rem; }
  .hero-scroll-hint { display: none; }

  /* Sections */
  .features-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }

  /* Service items */
  .service-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  .service-item-icon { width: 48px; height: 48px; font-size: 1.5rem; }
  .service-item-cta { grid-column: 1; }

  /* Footer */
  .footer-links { grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
  .footer-inner { gap: var(--spacing-md); }

  /* CTA Banner */
  .cta-banner { padding: var(--spacing-lg) var(--spacing-md); }
  .cta-banner h2 { font-size: 1.7rem; }

  /* Page hero */
  .page-hero { padding: calc(var(--header-h) + 40px) 0 40px; }

  /* Legal */
  .legal-body h2 { font-size: 1.05rem; }

  /* Buttons */
  .btn-lg { padding: 14px 28px; font-size: 0.95rem; }
}

/* ─── SMALL MOBILE (≤ 480px) ────────────────────────────── */
@media (max-width: 480px) {
  .hero-headline { font-size: 2rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; text-align: center; }
  .hero-stats { flex-direction: column; gap: var(--spacing-sm); }
  .stat-divider { display: none; }

  .footer-links { grid-template-columns: 1fr; }
  .cta-banner-actions { flex-direction: column; }
  .cta-banner-actions .btn { width: 100%; text-align: center; }

  .contact-form-wrap { padding: var(--spacing-md); }

  .section-title { font-size: 1.7rem; }
  .page-hero-title { font-size: 2rem; }
}