/* ═══════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 900px) {
  .values-grid { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: 1fr; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .site-nav { padding: 14px 20px; }
  .nav-links { display: none; }

  .hero { padding: 120px 24px 60px; }
  .hero h1 { letter-spacing: -1.5px; }
  .hero-desc { font-size: 1.05rem; }
  .hero-actions { flex-direction: column; }

  .key-values { padding: 0 24px 60px; }

  .os-section,
  .devices,
  .contact { padding: var(--padding-section-mobile); }

  .os-card { padding: 36px 24px; }
  .layer-desc { display: none; }

  .site-footer {
    flex-direction: column; gap: 16px;
    text-align: center; padding: 28px 24px;
  }
}