/* ==========================================================================
   songzejiancai.com — Responsive Stylesheet
   Mobile-first overrides for all breakpoints
   ========================================================================== */

/* ----- Tablet & Below (1024px) ----- */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-subtitle { margin-left: auto; margin-right: auto; }

    .hero-stats { justify-content: center; }

    .hero-visual {
        height: 480px;
        max-width: 600px;
        margin: 0 auto;
    }

    .terminal-card {
        width: 320px;
        bottom: 0;
        right: 0;
    }

    .pillar-grid { grid-template-columns: repeat(2, 1fr); }
    .pillar-card:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }

    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }

    .process-step,
    .process-step.reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .process-step.reverse .step-content,
    .process-step.reverse .step-num,
    .process-step.reverse .step-visual {
        order: initial;
        text-align: center;
    }
    .process-step .step-visual,
    .process-step.reverse .step-visual {
        margin: 0 auto;
    }
    .process-step.reverse .step-tags { justify-content: center; }
    .process-step:hover,
    .process-step.reverse:hover { transform: translateY(-4px); }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
    .footer-brand {
        grid-column: 1 / -1;
        text-align: center;
    }
    .footer-tagline { margin-left: auto; margin-right: auto; }
}

/* ----- Small Tablet (768px) ----- */
@media (max-width: 768px) {
    :root {
        --header-h: 64px;
        --sp-10: 5rem;
        --sp-9: 4rem;
    }

    .primary-nav,
    .header-cta { display: none; }

    .nav-toggle { display: flex; }

    /* Mobile nav drawer */
    .primary-nav.mobile-open {
        display: block;
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: rgba(5, 5, 16, 0.97);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        padding: var(--sp-5);
        z-index: 99;
        animation: slide-in-bottom 0.4s var(--ease-out);
    }

    .primary-nav.mobile-open ul {
        flex-direction: column;
        gap: var(--sp-2);
    }

    .primary-nav.mobile-open a {
        display: block;
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--fs-base);
        border-radius: var(--radius-sm);
    }

    .primary-nav.mobile-open a:hover,
    .primary-nav.mobile-open a.active {
        background: rgba(0, 229, 255, 0.08);
    }

    .hero { padding-top: calc(var(--header-h) + var(--sp-6)); min-height: auto; }

    .hero-title { font-size: clamp(2.5rem, 9vw, 3.5rem); }
    .hero-subtitle { font-size: var(--fs-base); }

    .hero-stats {
        gap: var(--sp-4);
        flex-wrap: wrap;
    }
    .stat-divider:nth-of-type(2) { display: none; }
    .stat-value { font-size: var(--fs-2xl); }

    .hero-visual { height: 400px; }
    .terminal-card { display: none; }
    .orbit-4 { display: none; }

    .pillar-grid { grid-template-columns: 1fr; }
    .pillar-card:last-child { max-width: 100%; }

    .capability-grid { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: 1fr; }

    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-brand { grid-column: auto; }
    .footer-col ul { align-items: center; }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .section-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .page-title { font-size: clamp(2rem, 7vw, 3rem); }
    .cta-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }

    .cta-card { padding: var(--sp-7) var(--sp-5); }

    .process-step { padding: var(--sp-5); gap: var(--sp-4); }
    .step-num { font-size: var(--fs-4xl); }
}

/* ----- Mobile (480px) ----- */
@media (max-width: 480px) {
    :root {
        --sp-7: 2rem;
        --sp-8: 3rem;
        --sp-9: 3.5rem;
        --sp-10: 4rem;
    }

    .container { padding: 0 var(--sp-4); }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .stat-divider { display: none; }
    .hero-stats { gap: var(--sp-5); }
    .stat-item {
        flex: 1 0 40%;
        align-items: center;
    }

    .hero-visual { height: 320px; }
    .orbit-3 { display: none; }

    .section-header { margin-bottom: var(--sp-7); }
    .pillar-card { padding: var(--sp-5); }

    .btn-lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); }
}

/* ----- Wide Screens (1600px+) ----- */
@media (min-width: 1600px) {
    :root {
        --container: 1440px;
    }
    .hero-title { font-size: 6rem; }
}

/* ----- Print ----- */
@media print {
    .site-header,
    .site-footer,
    .matrix-rain,
    #particle-canvas,
    .cta-section,
    .nav-toggle,
    .marquee-section {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
    a { color: #000 !important; text-decoration: underline; }
}

/* ----- High DPI / Retina ----- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brand-mark,
    .pillar-icon,
    .card-icon {
        image-rendering: -webkit-optimize-contrast;
    }
}