/*==================================================
RESPONSIVE
ArenaOS v2
==================================================*/


/*==================================================
BASE
==================================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}

body{

    overflow-x:hidden;

    -webkit-text-size-adjust:100%;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

button{

    font:inherit;

}

a{

    -webkit-tap-highlight-color:transparent;

}

body.menu-open{

    overflow:hidden;

}



/*==================================================
LAPTOP
==================================================*/

@media (max-width:1400px){

    .landing-container{

        width:min(1200px,94%);

    }

}



/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

    /*==============================
    CONTAINER
    ==============================*/

    .landing-container{

        width:100%;

        max-width:100%;

        padding-inline:24px;

    }

    /*==============================
    HEADER
    ==============================*/

    .landing-header{

        height:78px;

    }

    .landing-header .landing-container{

        height:100%;

    }

    .landing-logo img{

        height:40px;

    }

    .landing-nav,
    .landing-actions{

        display:none;

    }

    /*==============================
    MENU
    ==============================*/

    .menu-toggle{

        display:flex;

        position:fixed;

        top:15px;

        right:20px;

        z-index:9999;

    }

    .mobile-nav{

        width:min(360px,88vw);

    }

    /*==============================
    HERO
    ==============================*/

.hero{

    min-height:auto;

    padding:120px 0 80px;

    text-align:center;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-content{

    align-items:center;

}

.hero-badge{

    margin-bottom:24px;

}

.hero h1{

    max-width:720px;

    font-size:clamp(2.8rem,6vw,4rem);

    margin-bottom:24px;

}

.hero p{

    max-width:640px;

    margin:0 auto;

    font-size:1.08rem;

}

.hero-buttons{

    justify-content:center;

    margin-top:36px;

}

.hero-image{

    display:flex;

    justify-content:center;

    margin-top:20px;

}

.hero-image img{

    width:100%;

    max-width:760px;

}

.hero-preview{

    width:100%;

    max-width:760px;

    margin:auto;

}

    /*==============================
SOFTWARE
==============================*/

.software{

    padding:100px 0;

}

.software-demo{

    grid-template-columns:1fr;

    gap:50px;

}

.software-screen{

    order:1;

    width:100%;

    max-width:760px;

    margin:0 auto;

}

.software-screen img{

    border-radius:22px;

}

.software-menu{

    order:2;

    width:100%;

    max-width:760px;

    margin:0 auto;

}

.software-item{

    padding:24px;

}

.software-item:hover{

    transform:none;

}

    /*==============================
METRICS
==============================*/

.metrics{

    padding:90px 0 100px;

}

.metrics-grid{

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

    gap:24px;

}

.metric-card{

    padding:36px;

}

.metric-number{

    font-size:3.2rem;

}

.metric-card h3{

    margin:22px 0 14px;

    font-size:1.2rem;

}

.metric-card p{

    font-size:.95rem;

}

    /*==============================
PROCESS
==============================*/

.process{

    padding:100px 0;

}

.process-layout{

    grid-template-columns:1fr;

    gap:50px;

}

.process-preview{

    order:1;

    width:100%;

    display:flex;

    justify-content:center;

}

.process-preview .browser{

    width:100%;

    max-width:760px;

}

.process-sidebar{

    order:2;

    width:100%;

    max-width:760px;

    margin:0 auto;

    padding-left:34px;

}

.process-progress{

    left:15px;

}

.process-step{

    padding:22px;

}

.process-step::before{

    left:-27px;

}

.step-number{

    width:48px;

    font-size:1.8rem;

}

.step-content h3{

    font-size:1.15rem;

}

.step-content p{

    font-size:.95rem;

}

    /*==============================
ECOSYSTEM
==============================*/

.ecosystem{

    padding:100px 0;

}

.ecosystem-wrapper{

    display:grid;

    grid-template-columns:1fr;

    gap:36px;

    min-height:auto;

}

.ecosystem-lines{

    display:none;

}

.ecosystem-center{

    position:relative;

    width:260px;

    height:260px;

    margin:0 auto 20px;

}

.ecosystem-center img{

    width:145px;

}

.module{

    position:relative;

    inset:auto;

    width:100%;

    max-width:620px;

    margin:0 auto;

    padding:26px;

}

.module h3{

    font-size:1.2rem;

}

.module p{

    font-size:.95rem;

    line-height:1.7;

}

    /*==============================
PLANS
==============================*/

.plans{

    padding:100px 0;

}

.plans-grid{

    grid-template-columns:1fr;

    gap:28px;

    margin-top:60px;

}

.plan-card{

    padding:36px;

}

.plan-card h3{

    font-size:1.8rem;

}

.plan-description{

    margin-bottom:28px;

}

.plan-card li{

    margin-bottom:16px;

}

.plan-card .landing-btn{

    margin-top:32px;

}

.featured{

    transform:none;

    order:-1;

}

.featured:hover{

    transform:translateY(-8px);

}

    /*==============================
FOOTER
==============================*/

.footer-grid{

    grid-template-columns:1.2fr 1fr;

    gap:50px 40px;

}

.footer-brand{

    grid-column:1 / -1;

    text-align:center;

}

.footer-brand h2{

    font-size:2.4rem;

    margin-bottom:18px;

}

.footer-brand p{

    max-width:620px;

    margin:0 auto;

}

.footer-column{

    align-items:flex-start;

}

.footer-column h3{

    margin-bottom:18px;

}

.footer-bottom{

    margin-top:70px;

}

}



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

@media (max-width:768px){

    .landing-container{

        padding-inline:20px;

    }

    /*==============================
    HEADER
    ==============================*/

    .landing-header{

        height:72px;

    }

    .landing-header .landing-container{

        height:100%;

        padding-inline:18px;

    }

    .landing-logo img{

        height:32px;

    }

    .menu-toggle{

        width:46px;

        height:46px;

        top:13px;

        right:16px;

    }

    .menu-toggle span{

        width:24px;

    }

    .mobile-nav{

        width:100%;

        height:100dvh;

        padding:90px 28px 40px;

        gap:24px;

    }

    .mobile-nav a{

        font-size:1.15rem;

    }

    .mobile-login{

        margin-top:10px;

    }

    .mobile-whatsapp{

        margin-top:12px;

        padding:15px;

        font-size:1rem;

    }

    /*==============================
    HERO
    ==============================*/

    .hero{

        min-height:auto;

        padding:105px 0 70px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .hero-content{

        align-items:center;

        text-align:center;

    }

    .hero-badge{

        margin-bottom:20px;

        padding:9px 16px;

        font-size:.82rem;

    }

    .hero h1{

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

        line-height:1.08;

        margin-bottom:22px;

        letter-spacing:-1px;

    }

    .hero p{

        max-width:100%;

        font-size:1rem;

        line-height:1.75;

    }

    .hero-buttons{

        width:100%;

        margin-top:34px;

        display:flex;

        flex-direction:column;

        gap:14px;

        align-items:center;

    }

    .hero-buttons .landing-btn{

        width:100%;

        max-width:320px;

        justify-content:center;

    }

    .hero-image{

        margin-top:10px;

    }

    .hero-image img{

        width:100%;

        max-width:100%;

    }

    /*==============================
    METRICS
    ==============================*/

    .metrics{

        padding:80px 0;

    }

    .metrics-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .metric-card{

        padding:30px;

        text-align:center;

    }

    .metric-icon{

        margin:0 auto 18px;

    }

    .metric-number{

        font-size:2.8rem;

    }

    .metric-card h3{

        margin:18px 0 12px;

        font-size:1.15rem;

    }

    .metric-card p{

        font-size:.95rem;

        line-height:1.7;

    }

    /*==============================
    PROCESS
    ==============================*/

    .process{

        padding:90px 0;

    }

    .process-layout{

        grid-template-columns:1fr;

        gap:40px;

    }

    .process-preview{

        order:1;

    }

    .process-preview .browser{

        max-width:100%;

    }

    .process-sidebar{

        order:2;

        padding-left:28px;

    }

    .process-line{

        left:10px;

    }

    .process-step{

        display:flex;

        align-items:flex-start;

        gap:18px;

        width:100%;

        max-width:100%;

        min-width:0;

        box-sizing:border-box;

        padding:20px;

    }

    .process-dot{

        flex:0 0 10px;

        width:10px;

        height:10px;

    }

    .step-number{

        flex:0 0 42px;

        width:42px;

        font-size:1.6rem;

    }

    .step-content{

        flex:1 1 auto;

        min-width:0;

        overflow-wrap:anywhere;

    }

    .step-content h3{

        font-size:1.15rem;

        line-height:1.3;

    }

    .step-content p{

        font-size:.95rem;

        line-height:1.7;

        overflow-wrap:anywhere;

        word-break:break-word;

    }

    /*==============================
    SHOWCASE
    ==============================*/

    .showcase{

        padding:90px 0;

    }

    .showcase-step{

        padding:70px 0;

    }

    .showcase-title{

        max-width:100%;

    }

    .showcase-text{

        margin-bottom:36px;

        text-align:center;

    }

    .showcase-text span{

        letter-spacing:2px;

        font-size:.8rem;

    }

    .showcase-text h3{

        font-size:clamp(1.9rem,8vw,2.6rem);

        line-height:1.15;

        margin-bottom:18px;

    }

    .showcase-text p{

        font-size:1rem;

        line-height:1.75;

    }

    .showcase-browser{

        border-radius:18px;

        box-shadow:0 25px 60px rgba(0,0,0,.35);

    }

    .showcase-browser:hover{

        transform:none;

    }

    .showcase-browser::before{

        display:none;

    }

    /*==============================
    CTA
    ==============================*/

    .cta{

        padding:90px 0;

    }

    .cta-field{

        min-height:560px;

        border-radius:22px;

    }

    .cta-content{

        width:100%;

        padding:0 24px;

    }

    .cta-badge{

        margin-bottom:24px;

        padding:10px 18px;

        font-size:.8rem;

    }

    .cta-content h2{

        font-size:clamp(2.1rem,9vw,3rem);

    }

    .cta-divider{

        width:70px;

        margin:28px auto;

    }

    .cta-content p{

        max-width:100%;

        font-size:1rem;

    }

    .cta-content .landing-btn{

        width:100%;

        max-width:320px;

        margin-top:34px;

    }

    .field-border{

        inset:20px;

    }

    .field-middle-line{

        top:20px;

        height:calc(100% - 40px);

    }

    .field-center-circle{

        width:110px;

        height:110px;

    }

    .field-center-dot{

        width:6px;

        height:6px;

    }

    .field-area-left,
    .field-area-right,
    .field-goal-area-left,
    .field-goal-area-right,
    .goal-left,
    .goal-right{

        display:none;

    }

    /*==============================
    FOOTER
    ==============================*/

    .landing-footer{

        padding:80px 0 35px;

    }

    .footer-line{

        margin-bottom:50px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .footer-brand{

        text-align:center;

    }

    .footer-brand h2{

        font-size:2rem;

        margin-bottom:16px;

    }

    .footer-brand p{

        max-width:100%;

        margin:0 auto;

    }

    .footer-column{

        align-items:center;

    }

    .footer-column h3{

        margin-bottom:16px;

    }

    .footer-column a{

        margin-bottom:12px;

    }

    .footer-bottom{

        margin-top:50px;

        padding-top:30px;

    }

    .footer-bottom p{

        font-size:.9rem;

        line-height:1.7;

    }

}

/*==================================================
MOBILE SMALL
576px
==================================================*/

@media (max-width:576px){

    /*==============================
    CONTAINER
    ==============================*/

    .landing-container{

        padding-inline:18px;

    }

    /*==============================
    SECTION TITLE
    ==============================*/

    .section-title{

        margin-bottom:55px;

    }

    .section-title span{

        font-size:.78rem;

        letter-spacing:2px;

    }

    .section-title h2{

        font-size:2rem;

        line-height:1.15;

    }

    .section-title p{

        font-size:.98rem;

    }

    /*==============================
    BUTTONS
    ==============================*/

    .landing-btn{

        width:100%;

        justify-content:center;

        min-height:54px;

    }

    /*==============================
    PROCESS
    ==============================*/

    .process{

        padding:70px 0;

    }

    .process-layout{

        gap:30px;

    }

    .process-sidebar{

        padding-left:22px;

    }

    .process-line{

        left:8px;

    }

    .process-step{

        gap:14px;

        padding:16px;

        border-radius:16px;

    }

    .process-dot{

        flex:0 0 8px;

        width:8px;

        height:8px;

        margin-top:10px;

    }

    .step-number{

        flex:0 0 34px;

        width:34px;

        font-size:1.35rem;

    }

    .step-content{

        flex:1;

        min-width:0;

        width:100%;

    }

    .step-content h3{

        font-size:1rem;

        line-height:1.3;

        margin-bottom:6px;

        overflow-wrap:anywhere;

    }

    .step-content p{

        font-size:.88rem;

        line-height:1.55;

        overflow-wrap:anywhere;

        word-break:break-word;

    }

    /*==============================
    CARDS
    ==============================*/

    .module,
    .metric-card,
    .plan-card,
    .faq-item{

        border-radius:18px;

    }

    /*==============================
    BROWSER
    ==============================*/

    .browser{

        border-radius:18px;

    }

    .browser-top{

        padding:14px 18px;

    }

}

/*==================================================
EXTRA SMALL
420px
==================================================*/

@media (max-width:420px){

    /*==============================
    HERO
    ==============================*/

    .hero{

        padding:95px 0 60px;

    }

    .hero-badge{

        padding:8px 14px;

        font-size:.75rem;

    }

    .hero h1{

        font-size:2rem;

        line-height:1.1;

        letter-spacing:-.5px;

    }

    .hero p{

        font-size:.95rem;

    }

    /*==============================
    SECTION TITLE
    ==============================*/

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:1.75rem;

        line-height:1.15;

    }

    .section-title p{

        font-size:.92rem;

    }

    /*==============================
    BUTTONS
    ==============================*/

    .landing-btn{

        min-height:52px;

        padding:14px 20px;

        font-size:.95rem;

    }

    /*==============================
    PROCESS
    ==============================*/

    .process{

        padding:60px 0;

    }

    .process-layout{

        gap:26px;

    }

    .process-sidebar{

        padding-left:18px;

    }

    .process-line{

        left:6px;

    }

    .process-step{

        padding:14px;

        gap:12px;

        border-radius:14px;

    }

    .process-dot{

        flex:0 0 8px;

        width:8px;

        height:8px;

        margin-top:9px;

    }

    .step-number{

        flex:0 0 30px;

        width:30px;

        font-size:1.2rem;

        line-height:1;

    }

    .step-content{

        flex:1;

        min-width:0;

        width:100%;

    }

    .step-content h3{

        font-size:.95rem;

        line-height:1.3;

        margin-bottom:6px;

        overflow-wrap:anywhere;

        word-break:break-word;

    }

    .step-content p{

        font-size:.84rem;

        line-height:1.55;

        overflow-wrap:anywhere;

        word-break:break-word;

    }

    /*==============================
    ECOSYSTEM
    ==============================*/

    .ecosystem-center{

        width:220px;

        height:220px;

    }

    .ecosystem-center img{

        width:120px;

    }

    .module{

        padding:22px;

    }

    /*==============================
    PLANS
    ==============================*/

    .plan-card{

        padding:28px;

    }

    /*==============================
    CTA
    ==============================*/

    .cta-content h2{

        font-size:1.9rem;

    }

    .cta-content p{

        font-size:.95rem;

    }

    /*==============================
    FOOTER
    ==============================*/

    .footer-brand h2{

        font-size:1.8rem;

    }

}