/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-content { max-width: 640px; }
  .hero-visual { height: 420px; order: -1; }
  .value-grid { grid-template-columns: repeat(2,1fr); }
  .industries-grid { grid-template-columns: repeat(2,1fr); }
  .risk-grid { grid-template-columns: 1fr; gap: 40px; }
  #crystal-canvas { height: 360px; }
  .features-intro { grid-template-columns: 1fr; gap: 20px; }
  .feature-card { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); gap: 40px; }
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
  .media-placeholder--dashboard { height: 420px; }

  /* Business-impact arrows: 4 → 2 columns; swap the vertical dashed
     dividers for horizontal ones so the grid reads cleanly when wrapped. */
  .impact-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .impact-col { padding: 0 24px; }
  .impact-col + .impact-col { border-left: none; }
  .impact-col:nth-child(n+3) {
    border-top: 1px dashed rgba(255,255,255,.16);
    padding-top: 44px;
  }
  .impact-title { min-height: 0; }
}

@media (max-width: 860px) {
  /* Collapse desktop nav into mobile drawer */
  .nav-links,
  .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; }

  .navbar.open .nav-inner { border-radius: 22px; flex-wrap: wrap; }
  .navbar.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    order: 3;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid var(--border-glass);
  }
  .navbar.open .nav-ctas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    order: 4;
    margin: 10px 0 4px;
  }
  .navbar.open .nav-ctas .btn { justify-content: center; }
  .navbar.open .nav-toggle svg { transform: rotate(90deg); }

  /* Mobile: dropdowns become inline accordions */
  .nav-item.has-mega .nav-link { width: 100%; justify-content: space-between; }
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    transition: max-height .3s var(--ease-out);
  }
  .nav-item.has-mega.open .mega { max-height: 600px; padding: 10px 0; }
  .mega-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --space-section: 80px; }
  .container { padding: 0 20px; }
  .navbar { padding: 12px 16px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  /* Three building stats look lopsided as 2+1 — stack them. */
  .stats-grid--3 { grid-template-columns: 1fr; gap: 12px; }
  .stat-divider { border-right: none; }

  /* Business-impact arrows: single column on phones. */
  .impact-grid { grid-template-columns: 1fr; row-gap: 0; }
  .impact-col:nth-child(n+2) {
    border-top: 1px dashed rgba(255,255,255,.16);
    padding-top: 36px;
    margin-top: 36px;
  }
  .impact-col:nth-child(n+3) { padding-top: 36px; }
  .impact-chart { margin-bottom: 24px; }

  /* Our-Solution video: tighten the play button + spacing on small screens. */
  .solution-head { margin-bottom: 36px; }
  .video-play { width: 64px; height: 64px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .value-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .hero-title { letter-spacing: -.01em; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .browser-body { padding: 12px; }
  .browser-dots, .browser-actions { min-width: 40px; }
  .media-placeholder--dashboard { height: 300px; }
}