/* ============== MOBILE STYLES ============== */

@media (max-width: 768px) {
    .header {
        padding: 16px 20px;
    }

    .logo {
        font-size: 18px;
    }

    .header-right {
        gap: 16px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-logo-link {
        display: block;
        top: 16px;
        left: 20px;
    }

    .nav-logo {
        font-size: 18px;
    }
    .logo-icon {
        height: 24px;
    }

    .navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        background: var(--bg-primary);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        will-change: transform;
    }

    .navigation.active {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        pointer-events: auto;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .navigation a {
        font-size: 22px;
    }

    .hero {
        width: 92%;
        padding: 0 16px;
    }

    h1 {
        font-size: clamp(36px, 10vw, 56px);
    }

    .eyebrow {
        font-size: 10px;
        letter-spacing: 0.25em;
        margin-bottom: 20px;
    }

    .actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .button {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .gradients-container {
        filter: blur(60px);
        -webkit-filter: blur(60px);
    }

    .g1, .g2, .g3, .g4, .g5, .interactive {
        mix-blend-mode: normal;
    }

    .g1 { background: radial-gradient(circle, rgba(var(--color1), 0.6) 0, rgba(var(--color1), 0) 60%) no-repeat; width: 70%; height: 70%; top: -15%; left: -10%; opacity: 1; }
    .g2 { background: radial-gradient(circle, rgba(var(--color2), 0.55) 0, rgba(var(--color2), 0) 60%) no-repeat; width: 65%; height: 65%; top: 35%; right: -15%; opacity: 1; }
    .g3 { background: radial-gradient(circle, rgba(var(--color3), 0.55) 0, rgba(var(--color3), 0) 60%) no-repeat; width: 60%; height: 60%; bottom: -15%; left: 5%; opacity: 0.95; }
    .g4 { background: radial-gradient(circle, rgba(var(--color4), 0.5) 0, rgba(var(--color4), 0) 60%) no-repeat; width: 50%; height: 50%; top: 25%; left: 25%; opacity: 0.9; }
    .g5 { background: radial-gradient(circle, rgba(var(--color5), 0.5) 0, rgba(var(--color5), 0) 60%) no-repeat; width: 45%; height: 45%; top: 15%; left: 45%; opacity: 0.9; }
    .interactive { background: radial-gradient(circle, rgba(var(--color-interactive), 0.7) 0, rgba(var(--color-interactive), 0) 55%) no-repeat; width: 70%; height: 70%; top: 15%; left: 15%; opacity: 0.9; }
}

@media (max-width: 480px) {
    .header { padding: 14px 16px; }
    .logo { font-size: 16px; }
    
    .nav-logo-link {
        top: 14px;
        left: 16px;
    }

    .nav-logo {
        font-size: 16px;
    }
    .logo-icon {
        height: 16px;
    }

    h1 { font-size: clamp(32px, 11vw, 44px); }
    .subtitle { font-size: 15px; max-width: 280px; }
    .button { padding: 11px 20px; font-size: 14px; max-width: 260px; }

    .gradients-container { filter: blur(50px); -webkit-filter: blur(50px); }
    .g1 { width: 80%; height: 80%; top: -20%; left: -15%; }
    .g2 { width: 75%; height: 75%; top: 30%; right: -20%; }
    .g3 { width: 70%; height: 70%; bottom: -20%; left: 0%; }
    .g4 { width: 60%; height: 60%; top: 20%; left: 20%; }
    .g5 { width: 55%; height: 55%; top: 10%; left: 40%; }
    .interactive { width: 80%; height: 80%; top: 10%; left: 10%; }
}

@supports (padding: max(0px)) {
    .header {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}