/* ==========================================================================
   BLUE OKRA — RESPONSIVE STYLES
   Mobile-first overrides layered on top of style.css.
   Breakpoints: 1180 (laptop) / 980 (tablet) / 680 (mobile) / 420 (small mobile)
   ========================================================================== */

/* ---------------- Laptop / small desktop ---------------- */
@media (max-width: 1180px) {
  :root { --section-pad: 96px; --container-w: 100%; }
  .container { padding: 0 28px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-list { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .timeline-track { display: none; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-visual { height: 400px; }
  .constellation-wide { height: 340px; }
  .tc-node.tc-node { font-size: 0.8rem; padding: 11px 15px; }
}

/* ---------------- Tablet ---------------- */
@media (max-width: 980px) {
  :root { --section-pad: 76px; --nav-h: 72px; }

  /* Nav */
  .nav-links { position: fixed; top: 0; right: -100%; width: min(340px, 84vw); height: 100vh; background: var(--white); flex-direction: column; align-items: flex-start; gap: 2px; padding: 110px 28px 40px; box-shadow: -20px 0 60px rgba(7,59,102,0.18); transition: right var(--dur-med) var(--ease); overflow-y: auto; }
  .nav-links.is-open { right: 0; }
  .nav-links a { color: var(--text-dark) !important; width: 100%; padding: 14px 12px; font-size: 1.02rem; }
  .nav-toggle { display: flex; }
  .nav-right .btn-sm.desktop-only { display: none; }
  .nav-overlay { position: fixed; inset: 0; background: rgba(7,15,26,0.5); opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease); z-index: 999; }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }

  /* Hero */
  .hero { padding-top: calc(var(--nav-h) + 60px); }
  .hero .container { grid-template-columns: 1fr; text-align: left; }
  .hero-visual { height: 340px; margin-top: 30px; order: 2; }
  .hero h1, .hero p.lead { max-width: 100%; }

  /* Everything Connects */
  .tech-connect-section { padding: 48px 24px 20px; margin: 0 20px; }
  .constellation-wide { height: 300px; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .stat-item:nth-child(3) { border-left: none; }

  /* Why section */
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-visual { max-width: 420px; margin: 0 auto; order: -1; }

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

  /* Projects */
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card { grid-column: span 1 !important; }

  /* Pricing / blog / team */
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* Case study */
  .case-study-card { grid-template-columns: 1fr; }
  .case-study-visual { min-height: 220px; }
  .case-study-body { padding: 32px; }

  /* Split sections */
  .split-section { grid-template-columns: 1fr; gap: 36px; }
  .value-grid { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }

  /* CTA */
  .cta-section { padding: 60px 34px; margin: 0 20px; }

  /* Form */
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 680px) {
  :root { --section-pad: 60px; --nav-h: 68px; }
  .container { padding: 0 20px; }

  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: 1.6rem; }

  .hero { padding-bottom: 70px; }
  .hero-eyebrow { font-size: 0.72rem; padding: 7px 14px; }
  .hero h1 { font-size: 2rem; }
  .hero p.lead { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .hero-visual { height: 280px; }
  .const-node { padding: 10px 12px; font-size: 0.75rem; }
  .const-node.n-brand { width: 44px; height: 44px; }
  .const-node svg { width: 15px; height: 15px; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }

  .tech-connect-section { padding: 40px 18px 16px; margin: 0 16px; }
  .tech-connect-head p { font-size: 0.94rem; }
  .constellation-wide { height: 400px; }
  .tc-brand { width: 44px; height: 44px; font-size: 0.9rem; }
  .tc-node.tc-1 { top: 2%; left: 4%; }
  .tc-node.tc-2 { top: 2%; right: 2%; }
  .tc-node.tc-3 { bottom: 30%; left: 2%; }
  .tc-node.tc-4 { bottom: 2%; right: 4%; }
  .tc-brand { top: 44%; left: 50%; transform: translateX(-50%); }
  .tc-dot-a { top: 40%; left: 30%; }
  .tc-dot-b { bottom: 40%; right: 20%; }

  .services-grid { grid-template-columns: 1fr; }
  .why-list { grid-template-columns: 1fr; }
  .timeline-grid { grid-template-columns: 1fr 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .value-grid { grid-template-columns: 1fr; }

  .cta-section h2 { font-size: 1.5rem; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { justify-content: center; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .whatsapp-float { right: 16px; bottom: 16px; }
  .whatsapp-btn { width: 52px; height: 52px; }
  .whatsapp-tooltip { display: none; }
  .back-to-top { left: 16px; right: auto; bottom: 16px; width: 42px; height: 42px; }

  .ai-agent { right: 16px; bottom: 78px; }
  .ai-agent-toggle { width: 52px; height: 52px; }
  .ai-agent-panel {
    position: fixed;
    right: 12px; left: 12px; bottom: 138px;
    width: auto;
    max-height: 65vh;
  }

  .case-study-body { padding: 26px; }
  .case-metrics-row { flex-wrap: wrap; gap: 18px 24px; }

  /* Disable parallax / cursor / heavy floats on mobile */
  .cursor-dot { display: none !important; }
  .hero-bg-shape { filter: blur(40px); opacity: 0.25; }
  .page-hero::after { width: 200px; height: 200px; top: -60px; }
}

/* ---------------- Small mobile ---------------- */
@media (max-width: 420px) {
  .hero h1 { font-size: 1.7rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .timeline-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .nav-links { width: 100%; }
}

/* Disable JS-driven parallax transform on touch devices via class toggle from main.js */
.no-parallax [data-parallax] { transform: none !important; }