/* RESPONSIVE */
@media (max-width: 1024px) {
    .grid { grid-template-columns: 1fr 1fr; }
    .systems-grid { grid-template-columns: 1fr; gap: 48px; }
    .lightbox-prev { left: 16px; }
    .lightbox-next { right: 16px; }
    .lightbox-prev, .lightbox-next { width: 44px; height: 44px; background: rgba(0,0,0,0.5); }
    .project-story-grid { grid-template-columns: 1fr; }
    .project-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {

    /* ── Mobile Menu ── */
    .mobile-menu-toggle { display: flex; }

    /* Hide Privacy link on desktop */
    .nav-privacy-mobile { display: none; }

    .nav-links {
        position: fixed;
        top: 0; right: 0;
        width: min(340px, 88vw);
        height: 100vh;
        background: #000000;
        border-left: 1px solid rgba(255,255,255,0.12);
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        padding: 0 44px;
        z-index: 1000;
        /* GPU-composited transform — never use right/left for animation */
        transform: translateX(105%);
        transition: transform 0.52s cubic-bezier(0.77, 0, 0.18, 1),
                    box-shadow 0.52s ease;
        will-change: transform;
        box-shadow: none;
        text-align: left;
        overflow: hidden;
    }

    /* Decorative accent line on left edge */
    .nav-links::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%) scaleY(0);
        width: 1px;
        height: 50%;
        background: linear-gradient(to bottom, transparent, #ffffff, transparent);
        transition: transform 0.6s var(--ease-out) 0.3s;
    }
    .nav-links.active::before { transform: translateY(-50%) scaleY(1); }

    .nav-links.active {
        transform: translateX(0);
        box-shadow: -20px 0 60px rgba(0,0,0,0.5);
    }

    /* All links — hidden, slide from right */
    .nav-links a {
        display: block;
        width: 100%;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.65);
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        opacity: 0;
        transform: translateX(28px);
        transition: opacity 0.45s var(--ease-out),
                    transform 0.45s var(--ease-out),
                    color 0.2s ease,
                    border-color 0.2s ease;
        position: relative;
    }
    .nav-links a:last-child { border-bottom: none; }
    .nav-links a:hover { color: #ffffff; border-color: rgba(255,255,255,0.25); }

    /* Privacy & Terms — smaller, separated */
    .nav-links .nav-privacy-mobile {
        display: block;
        font-size: 11px;
        letter-spacing: 2px;
        color: rgba(255,255,255,0.5);
        opacity: 0;
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.12) !important;
        border-bottom: none !important;
        transform: translateX(28px);
    }
    .nav-links .nav-privacy-mobile:hover { color: var(--brand-400); }

    /* Links animate in when menu is active */
    .nav-links.active a { opacity: 1; transform: translateX(0); }

    /* Stagger delays — covers up to 9 links safely */
    .nav-links.active a:nth-child(1) { transition-delay: 0.12s; }
    .nav-links.active a:nth-child(2) { transition-delay: 0.18s; }
    .nav-links.active a:nth-child(3) { transition-delay: 0.24s; }
    .nav-links.active a:nth-child(4) { transition-delay: 0.30s; }
    .nav-links.active a:nth-child(5) { transition-delay: 0.36s; }
    .nav-links.active a:nth-child(6) { transition-delay: 0.42s; }
    .nav-links.active a:nth-child(7) { transition-delay: 0.48s; }
    .nav-links.active a:nth-child(8) { transition-delay: 0.54s; }
    .nav-links.active a:nth-child(9) { transition-delay: 0.60s; }

    /* Closing — links fade out quickly, no stagger */
    .nav-links:not(.active) a {
        opacity: 0;
        transform: translateX(16px);
        transition-delay: 0s !important;
        transition-duration: 0.18s;
    }

    /* ── Overlay (closes menu on tap outside) ── */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }

    /* ── Hero ── */
    .hero::before { display: none; }
    .hero { text-align: center; }
    .hero-eyebrow { justify-content: center; }
    .btn-group { flex-direction: column; align-items: center; width: 100%; max-width: 280px; margin: 0 auto; }
    .btn { text-align: center; justify-content: center; width: 100%; }

    /* ── Section headers ── */
    #fonts::before { display: none; }
    .section-header { text-align: center; }
    .section-tag { justify-content: center; }
    .section-tag::before { display: none; }
    .section-title { font-size: 32px !important; }

    /* ── Typography cards ── */
    .grid { grid-template-columns: 1fr; }
    .card { min-height: 360px; }
    .card-body { text-align: center; }
    .card-link { justify-content: center; }

    /* ── Systems ── */
    .systems-grid { grid-template-columns: 1fr; gap: 40px; }
    .systems-content { text-align: center; }
    .systems-content .section-title { text-align: center; }
    .systems-body { text-align: center; }
    .systems-content .btn { display: inline-flex; width: auto; }
    .image-stack { padding-bottom: 40px; padding-right: 40px; max-width: 340px; margin: 0 auto; }
    .image-stack::before, .image-stack::after { display: none; }

    /* ── Contact ── */
    .contact-form-container { padding: 28px 20px; }
    .form-row { grid-template-columns: 1fr; }
    .contact-intro { text-align: center; }

    /* ── About ── */
    .about-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .about-photo-container { display: flex; justify-content: center; width: 200px; height: 200px; margin: 0 auto; }
    .profile-photo { width: 200px; height: 200px; }
    .about-content { text-align: center; }
    .about-content .section-tag { justify-content: center; }
    .skills-grid-tags { justify-content: center; }

    /* ── Footer ── */
    footer .container { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
    .footer-brand { align-items: center; text-align: center; width: 100%; }
    .footer-contacts { align-items: center; text-align: center; width: 100%; }
    .social-links { justify-content: center; width: 100%; }
    .footer-right { align-items: center; text-align: center; width: 100%; }
    .footer-payments { gap: 8px; }
    .footer-payments-label { font-size: 9px; letter-spacing: 1.5px; }
    .footer-payment-icon { height: 13px; }

    /* ── Blog / Portfolio pages ── */
    .blog-grid, .portfolio-grid { grid-template-columns: 1fr; }

    /* ── Misc ── */
    .grid-2 { grid-template-columns: 1fr; }
    .scroll-hint { display: none; }
    .project-hero { padding: 100px 0 40px !important; }
    .project-hero h1 { font-size: 36px !important; text-align: center; }
    .docs-content { padding: 24px !important; }
    .gallery { grid-template-columns: 1fr !important; gap: 16px !important; }
    .project-story-card,
    .project-process-card,
    .project-checklist li,
    .project-stat { padding: 20px; }
    .project-stat-grid,
    .project-process-grid,
    .project-tech-grid { grid-template-columns: 1fr; }
    .project-stat strong { font-size: 30px; }
    .project-tech-grid .project-figure:first-child { grid-column: auto; }
}