/* =========================================================
   COMET SOUND — RESPONSIVE
   Breakpoints: 1024 / 900 / 760 / 640. Mobile-first safe.
   Loaded last. Depends on foundation + components.
   ========================================================= */

@media (max-width: 1024px) {
    .home-ai__layout,
    .cs-ai-console-wrap {
        grid-template-columns: 1fr;
    }

    /* stacked column: soften the GUI tilt so it doesn't crowd the copy */
    .home-ai__visual { margin-top: 1.2rem; }
    .home-ai__gui { transform: rotateX(8deg) rotateY(-8deg) rotate(1deg); }

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

    .comet-footer-brand {
        grid-column: 1 / -1;
        max-width: 46ch;
    }
}

@media (max-width: 900px) {
    /* hero: stack content to the left, stronger overlay for legibility */
    .comet-hero-overlay {
        background:
            linear-gradient(180deg, rgba(5, 7, 6, 0.5) 0%, rgba(5, 7, 6, 0.32) 36%, rgba(5, 7, 6, 0.85) 100%);
    }

    .comet-hero-main { justify-content: flex-start; }

    .comet-hero-headline {
        align-items: flex-start;
        max-width: 100%;
        text-align: left;
    }

    .comet-hero-title {
        max-width: 100%;
        margin: 0;
        text-align: left;
    }

    .comet-hero-actions { justify-content: flex-start; }

    .comet-hero-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .comet-hero-stats {
        justify-content: flex-start;
        gap: clamp(1.25rem, 6vw, 2.5rem);
    }

    .comet-hero-stats li { text-align: left; }

    /* section heads + splits collapse */
    .cs-section-head,
    .cs-split,
    .home-story__grid {
        grid-template-columns: 1fr;
    }

    /* plugin showcase: single column, shorter sticky stage */
    .cs-pgui-showcase { grid-template-columns: 1fr; }
    .cs-pgui-stage { height: clamp(280px, 52vh, 460px); }
    .cs-pgui-chapter { min-height: 60vh; }

    /* ----- navigation: hide centered nav, keep hamburger overlay ----- */
    .comet-main-nav { display: none; }

    .comet-site-header { grid-template-columns: 1fr auto; }
}

@media (max-width: 760px) {
    .comet-hero-video { object-position: 42% center; }
    .comet-hero-tag { display: none; }

    .cs-plugin-grid {
        grid-template-columns: 1fr;
    }

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

    .cs-param {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.7rem;
    }

    .cs-console__confirm {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    /* avoid crowding the header on small screens: account + hamburger stay */
    .comet-lang { display: none; }

    /* small screens: flat GUI preview, no 3D tilt */
    .home-ai__gui,
    .home-ai__gui:hover { transform: none; }

    .comet-hero-inner {
        padding: 1.25rem;
        gap: 1.75rem;
    }

    .comet-hero-title {
        max-width: 100%;
        font-size: clamp(2.4rem, 13vw, 4.2rem);
    }

    .comet-hero-actions .cs-btn { flex: 1 1 auto; }

    .comet-hero-stats {
        flex-wrap: wrap;
        gap: 1.25rem 2rem;
    }

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

    /* stacked footer: social row goes horizontal + left-aligned like the columns */
    .comet-footer-social-col { justify-self: start; }
    .comet-social--footer {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .comet-footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
    }
}