/* ==========================================================
   CENTURION
   RESPONSIVE
   ========================================================== */

/* ==========================================================
   NOTEBOOK — 1200px
   ========================================================== */

@media (max-width:1200px){

    .navbar__menu{

        gap:24px;

    }

    .navbar__actions .button--ghost{

        display:none;

    }

    .steps{

        flex-wrap:wrap;

    }

    .app-window__body{

        grid-template-columns:110px 1fr;

    }

}

/* ==========================================================
   TABLET — 1024px
   ========================================================== */

@media (max-width:1024px){

    .hero .container,
    .platform .grid-2,
    .builder .grid-2,
    .philosophy .grid-2{

        grid-template-columns:1fr;

        gap:var(--space-3xl);

    }

    .hero{

        padding-top:calc(var(--navbar-height) + var(--space-xl));

        padding-bottom:var(--space-4xl);

        text-align:center;

    }

    .hero__battlefield{

        background:
            linear-gradient(
                180deg,
                rgba(9,9,9,.94) 0%,
                rgba(9,9,9,.72) 40%,
                rgba(9,9,9,.42) 70%,
                #090909 100%
            ),
            var(--hero-img) center 24% / cover no-repeat;

    }

    .hero__content{

        margin-inline:auto;

    }

    .hero__description{

        margin-inline:auto;

    }

    .hero__actions{

        justify-content:center;

    }

    .hero__helmet{

        width:min(340px,70%);

    }

    .hero__scroll{

        display:none;

    }

    .block-flow{

        flex-wrap:wrap;

        justify-content:center;

        gap:var(--space-md);

    }

    .block{

        flex:0 1 calc(33.333% - var(--space-md));

        min-width:150px;

    }

    .block-flow__arrow{

        display:none;

    }

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .philosophy__visual{

        order:-1;

    }

    /* Elmo deixa de ser coluna própria (ficava solto num vazio)
       e vira fundo atmosférico atrás do texto. */

    .philosophy .grid-2{

        position:relative;

        gap:0;

    }

    .philosophy__visual{

        position:absolute;

        top:-90px;

        right:-60px;

        width:min(320px,50%);

        pointer-events:none;

        opacity:.2;

    }

    .philosophy__visual + div{

        position:relative;

        z-index:1;

    }

    .philosophy__helmet{

        width:100%;

    }

}

/* ==========================================================
   MOBILE MENU — 1100px (6 itens + 2 botões não cabem antes)
   ========================================================== */

@media (max-width:1100px){

    .navbar__toggle{

        display:flex;

    }

    .navbar__menu{

        position:fixed;

        top:var(--navbar-height);

        left:0;

        right:0;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:var(--space-md) var(--space-lg) var(--space-lg);

        background:rgba(9,9,9,.97);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

        border-bottom:1px solid var(--color-border);

        transform:translateY(-12px);

        opacity:0;

        visibility:hidden;

        transition:var(--transition-fast);

    }

    .navbar__menu.is-open{

        transform:translateY(0);

        opacity:1;

        visibility:visible;

    }

    .navbar__item{

        width:100%;

    }

    .navbar__link{

        display:block;

        padding:14px 0;

        font-size:1.05rem;

    }

    .navbar__link::after{

        display:none;

    }

    .navbar__actions .button--ghost{

        display:none;

    }

}

/* ==========================================================
   MOBILE — 640px
   ========================================================== */

@media (max-width:640px){

    .section,.platform,.how,.builder,.philosophy,.faq,.planos,.cta{

        padding:var(--space-3xl) 0;

    }

    .section-sm{

        padding:var(--space-2xl) 0;

    }

    .grid-3{

        grid-template-columns:1fr;

    }

    :root{

        --button-height:52px;

        --button-padding-x:24px;

    }

    .navbar__wordmark{

        display:none;

    }

    .navbar__logo{

        width:42px;

        height:42px;

    }

    .hero__title{

        font-size:clamp(1.8rem,9vw,2.2rem);

        letter-spacing:.14em;

    }

    .section__header{

        margin-bottom:var(--space-2xl);

    }

    .grid-4{

        grid-template-columns:1fr;

    }

    .steps{

        flex-direction:column;

        align-items:center;

        gap:var(--space-lg);

    }

    .steps__arrow{

        margin-top:0;

        transform:rotate(90deg);

    }

    .hero__actions{

        flex-direction:column;

        width:100%;

    }

    .hero__actions .button{

        width:100%;

    }

    .app-window__sidebar{

        display:none;

    }

    .app-window__body{

        grid-template-columns:1fr;

    }

    .app-window__canvas{

        grid-template-columns:1fr;

    }

    .app-window__footer{

        grid-template-columns:repeat(2,1fr);

    }

    .app-window__chart{

        grid-column:1 / -1;

    }


    .philosophy__pillars{

        grid-template-columns:1fr;

    }

    .cta__brand{

        flex-direction:column;

        gap:var(--space-md);

    }

    .cta__wordmark{

        text-align:center;

    }

    .footer__inner{

        flex-direction:column;

        justify-content:center;

        text-align:center;

    }

}