/* ========================================
   NYVEX • RESPONSIVE
   ======================================== */

@media (max-width: 900px) {

    .nav-links {
        gap: 20px;

        margin-right: 15px;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .future-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-links {
        max-width: 600px;
    }

    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .commands-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .workflow-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .platform-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-hero-content {
        padding: 90px 0;
    }
}


@media (max-width: 650px) {

    .container {
        width: min(
            100% - 30px,
            1180px
        );
    }

    .site-header,
    .navbar {
        height: 64px;
    }

    .navbar {
        gap: 10px;
    }

    .nav-links {
        display: none;
    }

    .nav-button {
        display: none;
    }

    .mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: auto;
        color: var(--nyvex-white);
        background: rgba(212, 175, 55, .08);
        border: 1px solid rgba(212, 175, 55, .28);
        border-radius: 10px;
    }

    .mobile-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 15px;
        right: 15px;
        display: grid;
        gap: 4px;
        padding: 10px;
        background: rgba(13, 13, 16, .98);
        border: 1px solid rgba(212, 175, 55, .2);
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    }

    .mobile-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-menu a {
        padding: 12px 14px;
        color: var(--text-secondary);
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
    }

    .mobile-menu a:hover {
        color: var(--nyvex-white);
        background: rgba(138, 124, 255, .12);
    }

    .hero {
        min-height: 560px;
    }

    .hero-content {
        padding: 58px 0 72px;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(40px, 12vw, 58px);
        overflow-wrap: anywhere;
    }

    .hero-tagline {
        max-width: 100%;
        font-size: clamp(23px, 6.5vw, 31px);
    }

    .hero-description {
        max-width: 34rem;
        padding-inline: 8px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .button {
        width: 100%;
        max-width: 260px;
    }

    .hero-actions .button {
        width: min(100%, 320px);
        max-width: none;
    }

    .products-section,
    .future-section {
        padding: 70px 0;
    }

    .ecosystem-section {
        padding: 100px 0;
    }

    .section-heading h2,
    .ecosystem-content h2 {
        font-size: clamp(34px, 9vw, 42px);
    }

    .product-card {
        min-height: auto;

        padding: 22px;
    }

    .footer-links {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 40px;
    }

    .language-selector {
        margin-left: auto;
    }

    .product-hero {
        min-height: 600px;
    }

    .product-dashboard .product-hero .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-hero-visual {
        max-width: 100%;
    }

    .product-hero h1 {
        font-size: 58px;
    }

    .product-hero-actions {
        flex-direction: column;
    }

    .product-meta {
        gap: 20px;
        flex-wrap: wrap;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .music-features,
    .commands-section {
        padding: 80px 0;
    }

    .product-cta {
        padding: 100px 0;
    }

    .collaborations-section {
        padding: 82px 0;
    }

    .collaborations-grid {
        grid-template-columns: 1fr;
    }

    .collaboration-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px;
    }

    .platform-grid {
        grid-template-columns: 1fr;
    }

    .platform-section,
    .workflow-section {
        padding: 82px 0;
    }

    .workflow-intro h2 {
        font-size: clamp(34px, 11vw, 52px);
    }

    .workflow-step {
        align-items: flex-start;
        gap: 16px;
        font-size: 15px;
    }

    .workflow-step b {
        flex: 0 0 30px;
    }

    .support-panel {
        width: min(360px, calc(100vw - 28px));
    }
}