/* ============================================
   ZUOZHILIN.COM - Responsive Styles
   ============================================ */

@media (max-width: 1024px) {
    :root { --space-3xl: 4rem; --space-2xl: 3rem; }
    .hero-title { font-size: clamp(2rem, 5vw, 3.5rem); }
    .nav-menu { gap: 1.5rem; }
    .nav-menu a { font-size: 0.9rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --header-height: 70px; --space-3xl: 3rem; --space-2xl: 2.5rem; --space-xl: 2rem; }
    body { font-size: 15px; }
    .container { padding: 0 1rem; }
    .section { padding: 3rem 0; }
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0; right: 0;
        flex-direction: column;
        background: rgba(5, 8, 16, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 2rem;
        gap: 1rem;
        border-bottom: 1px solid var(--border-subtle);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }
    .nav-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-menu li { width: 100%; }
    .nav-menu a { display: block; padding: 0.75rem 0; width: 100%; border-bottom: 1px solid var(--border-subtle); }
    .menu-toggle { display: block; }
    .menu-toggle svg { width: 24px; height: 24px; }
    .hero { min-height: 90vh; padding-top: calc(var(--header-height) + 2rem); }
    .hero-title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    .hero-subtitle { font-size: 1rem; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; max-width: 280px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .page-header { padding: calc(var(--header-height) + 3rem) 0 2rem; }
    .page-header h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .card { padding: 1.5rem; }
    .feature-card { padding: 1.5rem; }
    .service-block { grid-template-columns: 1fr; gap: 2rem; }
    .service-visual { min-height: 250px; }
    .team-grid, .news-grid { grid-template-columns: 1fr; }
    .contact-wrapper { grid-template-columns: 1fr; }
    .contact-info, .contact-form { padding: 2rem; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-brand { grid-column: 1 / -1; max-width: none; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal { justify-content: center; }
    .process-timeline::before { left: 20px; }
    .process-item { padding-left: 60px; }
    .process-number { width: 44px; height: 44px; font-size: 1rem; }
    .legal-content { padding: 2rem 0; }
    .legal-content h2 { font-size: 1.25rem; }
    .legal-content h3 { font-size: 1.05rem; }
    .legal-content table { font-size: 0.85rem; }
    .legal-content th, .legal-content td { padding: 0.5rem; }
    .desktop-only { display: none; }
}

@media (max-width: 480px) {
    :root { --space-3xl: 2.5rem; --space-2xl: 2rem; }
    .hero-badge { font-size: 0.75rem; padding: 0.4rem 1rem; }
    .hero-title { font-size: 1.75rem; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: 0.75rem; }
    .btn { padding: 0.6rem 1.25rem; font-size: 0.85rem; }
    .section-title h2 { font-size: 1.5rem; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-brand { text-align: center; }
    .footer-social { justify-content: center; }
    .footer-bottom { text-align: center; }
    .toc ul { column-count: 1; }
    .news-meta { flex-wrap: wrap; }
}

@media (min-width: 1440px) {
    :root { --container-max: 1400px; }
    body { font-size: 17px; }
    .hero-title { font-size: clamp(3rem, 5vw, 5rem); }
}

@media (min-width: 1920px) {
    :root { --container-max: 1600px; }
}

@media print {
    .site-header, .site-footer, .menu-toggle, .hero-actions, .loading-screen, .particles-container, .matrix-rain { display: none !important; }
    body { background: white; color: black; }
    .hero, .page-header { padding-top: 0; min-height: auto; }
    .card, .feature-card, .contact-info, .contact-form { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .particle, .matrix-char { animation: none !important; display: none; }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo svg { image-rendering: -webkit-optimize-contrast; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: 100vh; }
    .hero-stats { margin-top: 2rem; }
}

@media (hover: hover) {
    .card:hover, .feature-card:hover, .news-card:hover, .app-card:hover { cursor: pointer; }
}

@media (forced-colors: active) {
    .card, .feature-card, .news-card, .contact-info, .contact-form { border: 1px solid CanvasText; }
    .btn { border: 1px solid CanvasText; }
}