/* =========================================================
   VSEC Cloud Security — Responsive Rules
   Desktop >= 1200px | Tablet 768-1199px | Mobile < 768px
   ========================================================= */

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  :root {
    --fs-4xl: 2.75rem;
    --fs-3xl: 2.25rem;
    --fs-huge: 3.75rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual { height: 260px; order: -1; }

  .main-nav { gap: var(--space-4); }

  .journey,
  .process-row,
  .ecosystem-row,
  .detail-scope-grid,
  .tech-layers,
  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cdr-process-row { grid-template-columns: repeat(2, 1fr); }

  .process-step:nth-child(3)::after,
  .process-step:nth-child(6)::after { display: none; }

  .services-grid,
  .usecase-grid,
  .resource-grid,
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cert-badge-grid { grid-template-columns: repeat(4, 1fr); }
  .cert-carousel .cert-badge-item { width: 90px; height: 76px; }

  .footer-row-1 { grid-template-columns: 1fr 1fr; }
  .footer-row-1 .footer-col-services { grid-column: 1 / -1; }
  .footer-row-2 { grid-template-columns: repeat(2, 1fr); }

  .team-wrap { grid-template-columns: 1fr; }
  .role-list { grid-template-columns: repeat(3, 1fr); }

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

/* ---- Hide desktop-only nav below tablet threshold ---- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .header-actions .btn-secondary,
  .header-actions .btn-outline-dark { display: none; }
  .nav-toggle { display: block; }
  .trust-badge span { display: none; }
}

@media (max-width: 640px) {
  .header-actions .trust-badge { display: none; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .section { padding: var(--space-8) 0; }
  .container { padding: 0 var(--space-4); }

  :root {
    --fs-4xl: 2.1rem;
    --fs-3xl: 1.75rem;
    --fs-2xl: 1.5rem;
    --fs-huge: 2.75rem;
  }

  .nowrap-line { white-space: normal; }

  .hero { padding: var(--space-8) 0 var(--space-8); }
  .hero-inner { padding: 0 var(--space-4); }
  .hero-visual { height: 180px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  .journey,
  .process-row,
  .cdr-process-row,
  .ecosystem-row,
  .detail-scope-grid,
  .tech-layers,
  .expertise-grid,
  .services-grid,
  .usecase-grid,
  .resource-grid,
  .value-grid,
  .role-list,
  .stat-badges,
  .modal-metrics,
  .usecase-metrics {
    grid-template-columns: 1fr;
  }

  .risk-list { flex-direction: column; }
  .risk-item { white-space: normal; }

  .cert-badge-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-carousel .cert-badge-item { width: 76px; height: 64px; }
  .cert-carousel-arrow { width: 32px; height: 32px; font-size: 0.8rem; }

  .footer-row-1,
  .footer-row-2,
  .footer-services-grid {
    grid-template-columns: 1fr;
  }

  .cert-badges { flex-wrap: wrap; }
  .footer-col-social .social-icons { margin-top: var(--space-2); }

  .process-step::after { display: none !important; }
  .eco-stage { border-right: none; border-bottom: 1px dashed rgba(255,255,255,0.25); }
  .eco-stage:last-child { border-bottom: none; }

  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: 1; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .cta-banner .btn-group { flex-direction: column; }
  .cta-banner .btn-group .btn { width: 100%; }

  .mobile-sticky-cta { display: block; }
  .micro-cta-bar { display: none; }

  body { padding-bottom: 72px; }

  .modal-panel { padding: var(--space-5); }

  .section-title { font-size: var(--fs-2xl); }
}

/* ---- Table-like data becomes cards on small screens ---- */
@media (max-width: 480px) {
  .header-inner { padding: var(--space-3) var(--space-4); }
  .brand img { height: 26px; }
}