/* ─────────────────────────────────────────
   RESPONSIVE.CSS — Mobile & Tablet
───────────────────────────────────────── */

/* ── TABLET  (≤ 1024px) ─────────────────── */
@media (max-width: 1024px) {
  .services-grid    { grid-template-columns: repeat(2, 1fr); }
  .testi-grid       { grid-template-columns: repeat(2, 1fr); }
  .process-steps    { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .dash-metrics     { grid-template-columns: repeat(2, 1fr); }

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

  .eco-ring-3 { width: 320px; height: 320px; }
  .eco-node:nth-child(2) { right: 2px; }
  .eco-node:nth-child(4) { left: 2px; }
}

/* ── MOBILE LANDSCAPE / SMALL TABLET (≤ 768px) ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links,
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  /* Hero */
  #hero { padding: 100px 0 64px; }
  .hero-stats { gap: 24px; }
  .stat-item { min-width: 90px; }

  /* Ecosystem — stack vertically */
  .ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .eco-visual {
    height: 320px;
    order: -1;
  }
  /* Scale down orbits on mobile */
  .eco-orbit-3 { width: 290px; height: 290px; }
  .eco-orbit-2 { width: 210px; height: 210px; }
  .eco-orbit-1 { width: 140px; height: 140px; }
  .eco-center  { width: 72px; height: 72px; }
  .eco-center-icon { width: 30px; height: 30px; }
  /* Hide outer orbit items on mobile to avoid overflow */
  .eco-orbit-3 .eco-orbit-item:nth-child(3),
  .eco-orbit-3 .eco-orbit-item:nth-child(4) { display: none; }
  .eco-pill { font-size: 10px; padding: 5px 10px 5px 7px; }
  .eco-pill-icon { width: 20px; height: 20px; }
  .eco-sq { width: 36px; height: 36px; border-radius: 10px; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Dashboard */
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-agents  { grid-template-columns: 1fr; }
  .dash-url { display: none; }
  /* Hide some bar labels on small screens */
  .bar-label { font-size: 8px; }

  /* Process */
  .process-steps { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta-box { padding: 52px 28px; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { flex-wrap: wrap; gap: 20px; }
}

/* ── MOBILE PORTRAIT (≤ 480px) ─────────── */
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }

  /* Hero */
  .hero-btns { flex-direction: column; align-items: center; }
  .btn-primary,
  .btn-ghost { width: 100%; max-width: 300px; justify-content: center; }
  .hero-stats { gap: 18px; }

  /* Sections */
  #services,
  #ai-ecosystem,
  #dashboard,
  #process,
  #testimonials,
  #cta { padding: 80px 0; }

  /* Process: single column */
  .process-steps { grid-template-columns: 1fr; gap: 28px; }

  /* Dashboard metrics: 1 col */
  .dash-metrics { grid-template-columns: 1fr 1fr; }
  .dash-body { padding: 16px; }

  /* CTA btns stack */
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-box { padding: 44px 20px; }

  /* Smaller dashboard bars */
  .chart-bars { gap: 4px; }

  /* Section header */
  .section-header { margin-bottom: 44px; }

  /* Ecosystem visual */
  .eco-visual { height: 260px; }
  .eco-ring-3 { width: 245px; height: 245px; }
  .eco-ring-2 { width: 175px; height: 175px; }
  .eco-ring-1 { width: 115px; height: 115px; }
  .eco-node { width: 40px; height: 40px; border-radius: 9px; }
  .eco-node-icon { width: 18px; height: 18px; }
  .eco-center { width: 68px; height: 68px; }
  .eco-center-icon { width: 28px; height: 28px; }

  /* Service cards */
  .service-card { padding: 26px 22px; }

  /* Footer */
  .footer-links { flex-direction: column; gap: 12px; }
}

/* ── VERY SMALL (≤ 360px) ───────────────── */
@media (max-width: 360px) {
  .dash-metrics { grid-template-columns: 1fr; }
  .metric-value { font-size: 22px; }
}