/* ============================================================
   Vlow — responsive + accessibility
   ============================================================ */

/* ---- tablet ---- */
@media (max-width: 960px) {
  .demo-grid { grid-template-columns: 1fr; }
  .capture-grid { grid-template-columns: 1fr; }
  .privacy-grid { grid-template-columns: 1fr; }
  .privacy-more { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.span-2 { grid-column: span 2; }
  .price-grid { grid-template-columns: 1fr; max-width: 440px; }
  .price-card.featured { transform: none; order: -1; }
  .voices-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

/* ---- mobile ---- */
@media (max-width: 600px) {
  :root { --glass-blur: 12px; }
  .nav { padding: 0.55rem 0.7rem 0.55rem 0.9rem; }
  .brand-name { font-size: 1.1rem; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; }
  .pillars { width: 100%; }
  .pillars li { flex: 1; min-width: 0; }
  .bento { grid-template-columns: 1fr; }
  .bento-card.span-2 { grid-column: span 1; }
  .capture-steps { grid-template-columns: 1fr; }
  .privacy-more { grid-template-columns: 1fr; }
  .mb-flow { flex-direction: column; }
  .mb-arr { transform: rotate(90deg); }
  .modes-tabs { gap: 0.4rem; }
  .mode-tab { padding: 0.5em 0.8em; font-size: var(--text-xs); }
  .capsule { padding: 12px 18px; }
  .footer-inner { flex-direction: column; gap: 2rem; }
  .footer-cols { gap: 2.5rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .price-num { font-size: 2.4rem; }
}

/* ---- large ---- */
@media (min-width: 1280px) {
  .demo, .modes, .capture, .models, .privacy, .features, .compare, .pricing, .voices, .faq { padding-left: 0; padding-right: 0; }
}

/* ============ accessibility ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wave .wbar { transform: scaleY(0.8); }
  .capsule { animation: none; }
  .fx-grid, .fx-scanlines { animation: none; }
  .fx-cursor { display: none; }
  .reveal { opacity: 1; transform: none; }
  .caret { animation: none; opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-chip, .nav, .capsule, .mb-node, .mode-tab, .keycap {
    background: rgba(14,15,32,0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .fx-grid, .fx-cursor, .page-bloom { opacity: 0.3; }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(124,140,255,0.42);
    --hairline: rgba(124,140,255,0.3);
    --fg-muted: #c5c9ee;
    --fg-faint: #9aa0cf;
  }
}