/* =====================================================================
   Breakpoints (mobile-first): 600px tablet · 900px laptop · 1100px desktop
   ===================================================================== */

@media (min-width: 600px) {
    :root { --gutter: 28px; --section-y: 88px; }
    .card-grid.grid-4, .card-grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
    .pill-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .field-full { grid-column: 1 / -1; }
    .form-card, .success-panel, .aside-card { padding: 32px; }
    .viz-body { grid-template-columns: 150px 1fr; }
    .viz-sources { grid-template-columns: 1fr; align-content: start; }
    .viz-float { display: inline-flex; }
    .viz-float-a { right: -14px; top: -18px; }
    .viz-float-b { left: -18px; bottom: -20px; animation-delay: -3s; }
    .mv-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .founder { grid-template-columns: 300px 1fr; gap: 48px; }
}

@media (min-width: 900px) {
    :root { --section-y: 104px; --header-h: 76px; }

    .nav-toggle { display: none; }
    .site-nav {
        position: static; display: flex !important; align-items: center; gap: 28px;
        background: none; border: 0; box-shadow: none; padding: 0;
    }
    .site-nav ul { display: flex; gap: 4px; margin: 0; }
    .site-nav a:not(.btn) { padding: 8px 14px; }
    .site-nav a.is-active { background: transparent; position: relative; }
    .site-nav a.is-active::after {
        content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--blue-600);
    }
    .nav-cta { width: auto; }

    .hero { padding: 84px 0 104px; }
    .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
    .page-hero { padding: 92px 0 88px; }

    .split { grid-template-columns: .9fr 1.1fr; gap: 64px; }
    .split-reverse > :first-child { order: 0; }
    .contact-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
    .cta-inner { grid-template-columns: 1fr auto; gap: 48px; }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1.3fr 1.3fr; gap: 40px; }
    .card-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }

    /* Horizontal timeline on desktop */
    .timeline { grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .timeline-step { grid-template-columns: 1fr; gap: 14px; padding-bottom: 0; }
    .timeline-step::before {
        left: 56px; right: -20px; top: 23px; bottom: auto; width: auto; height: 2px;
        background: linear-gradient(90deg, rgba(34, 195, 243, .6), rgba(34, 195, 243, .15));
    }
}

@media (min-width: 1100px) {
    .card-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
    .pill-grid { grid-template-columns: repeat(4, 1fr); }
    .card { padding: 26px; }
}

/* Very small phones */
@media (max-width: 380px) {
    :root { --gutter: 16px; }
    .brand-text { font-size: .98rem; }
    .btn-lg { padding: .8em 1.2em; font-size: .98rem; }
    .btn-row .btn { width: 100%; }
}

@media print {
    .site-header, .site-footer, .hero-visual, .cta-band, .nav-toggle { display: none !important; }
    .hero, .page-hero, .section-dark { background: #fff !important; color: #000 !important; }
    .hero h1, .page-hero h1, .section-dark h2, .section-dark h3 { color: #000 !important; }
}