:root{
  --bg:#050505;
  --surface:#101010;
  --surface-2:#171717;
  --text:#f5f5f5;
  --muted:#b4b4b4;
  --primary:#7A1C56;
  --accent:#f78b00;
  --border:rgba(255,255,255,.08);
  --radius:24px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:Inter,system-ui,sans-serif;
 background:
 radial-gradient(circle at 85% 10%, rgba(122,28,86,.22), transparent 35%),
 radial-gradient(circle at 15% 80%, rgba(247,139,0,.08), transparent 30%),
 var(--bg);
 color:var(--text);
 line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;transition:.3s}



.navbar{
    position: fixed;
    top: 18px;

    left: 50%;
    transform: translateX(-50%);

    width: min(1280px,95%);

    background: rgba(10,10,10,.55);
    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;

    padding: .4rem 1.2rem;

    z-index: 9999;
}


.navbar-toggler{
    background-color: #7A1C56;
    border: none;
    box-shadow: none !important;
}

.navbar-toggler:focus{
    box-shadow: none;
}

.navbar-toggler-icon{
    filter: invert(1);
}




#banner{

    min-height:100vh;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    padding:120px 30px;

    position:relative;

}

.hero-network{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-network svg{

    width:100%;

    max-width:500px;

    height:auto;

}

.hero-content h1{

    font-size:clamp(4rem,8vw,7rem);

    line-height:.9;

    font-weight:900;

    letter-spacing:-4px;

    margin:30px 0;

}

.hero-content p{

    max-width:600px;

    color:var(--muted);

    font-size:1.2rem;

    line-height:1.8;

}

.hero-tag{

    color:var(--accent);

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:700;

}

.hero-buttons{

    margin-top:50px;

    display:flex;

    gap:20px;

}

.btn-outline{

    border:1px solid rgba(255,255,255,.15);

    color:white;

    border-radius:999px;

    padding:14px 28px;

}

.hero-visual{

    position:relative;

    height:600px;

}



#services{

    max-width:1400px;

    margin:0 auto;

    padding:140px 30px;

}

.services-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 80px;

}

.services-tag{

    color:#f78b00;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:700;

}

.services-title{

    font-size:clamp(4rem,8vw,6.5rem);

    font-weight:900;

    line-height:.9;

    margin:20px 0;

    letter-spacing:-4px;

}

.services-description{

    color:#b4b4b4;

    font-size:1.2rem;

    line-height:1.8;

}

.services-grid{

    display:grid;

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

    gap:32px;

}

.service-card{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:40px;

    transition:.35s;

    display:flex;

    flex-direction:column;

}

.service-card:hover{

    transform:translateY(-8px);

    border-color:#f78b00;

    box-shadow:

    0 20px 60px rgba(0,0,0,.35),

    0 0 40px rgba(247,139,0,.12);

}

.service-card img{

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:30px;

}

.service-card h3{

    font-size:1.8rem;

    margin-bottom:15px;

}

.service-card p{

    color:#b4b4b4;

    flex:1;

    line-height:1.8;

    margin-bottom:30px;

}




.card{
 background:rgba(18,18,18,.75)!important;
 border:1px solid var(--border)!important;
 border-radius:var(--radius)!important;
 overflow:hidden;
 transition:.35s;
 box-shadow:var(--shadow);
}
.card:hover{
 transform:translateY(-10px);
 border-color:rgba(247,139,0,.35)!important;
}
.card img{
 padding:2rem;
 aspect-ratio:1;
 object-fit:contain;
}
.card-body{
 background:transparent!important;
 padding:1.75rem;
}
.card-title{
 color:#fff;
 font-weight:700;
 margin-bottom:.8rem;
}
.card-text{
 color:var(--muted)!important;
}
.btn{
 background:var(--accent)!important;
 color:#111!important;
 border:none!important;
 border-radius:999px!important;
 padding:.8rem 1.4rem!important;
 font-weight:700!important;
}
.btn:hover{
 transform:translateY(-2px);
 box-shadow:0 12px 28px rgba(247,139,0,.28);
}
#objetivo{
 padding:7rem 1rem;
 background:linear-gradient(180deg,#090909,#121212);
}
#objetivo .card{
 background:rgba(255,255,255,.02)!important;
}
#objetivo .card-body{
 border-top:3px solid var(--primary);
}

#objetivo{

    padding:120px 0;

    background:#080808;

}

#objetivo .container{

    max-width:1400px;

    margin:auto;

}

.missao-title{

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

    font-weight:900;

    text-align:center;

    margin-bottom:10px;

}

.missao-subtitle{

    font-size:clamp(2rem,4vw,3.5rem);

    font-weight:800;

    text-align:center;

    margin-bottom:70px;

    color:#e5e5e5;

}

.objetivos-grid{

    display:grid;

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

    gap:30px;

}

.objetivo-card{

    background:rgba(18,18,18,.8);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:40px;

    transition:.35s;

    backdrop-filter:blur(10px);

}

.objetivo-card:hover{

    transform:translateY(-8px);

    border-color:#f78b00;

    box-shadow:

    0 20px 60px rgba(0,0,0,.4),

    0 0 30px rgba(247,139,0,.15);

}

.objetivo-card h4{

    font-size:1.7rem;

    margin-bottom:20px;

    font-weight:700;

    color:white;

}

.objetivo-card p{

    color:#bdbdbd;

    line-height:1.9;

    font-size:1rem;

}


#quemsomos{
 padding:7rem 2rem;
 background:#060606;
}
#quemsomos img{
 border-radius:32px;
 border:1px solid var(--border);
 box-shadow:var(--shadow);
}
#quemsomos .descritivo{
 background:rgba(255,255,255,.03);
 backdrop-filter:blur(10px);
 border:1px solid var(--border);
 border-radius:32px;
 padding:3rem;
}
#quemsomos h3{
 font-size:clamp(2.2rem,5vw,4rem);
 font-weight:800;
}
#quemsomos p,#quemsomos h6{
 color:var(--muted);
}




#contato{

    max-width: 1400px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;

    padding: 120px 30px;
}

.contato-right{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.terminal{

    width:100%;

    background:#090909;

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    overflow:hidden;

    max-width:900px;

    margin:0 auto;

    box-shadow:

    0 30px 80px rgba(0,0,0,.45);

}



.terminal-header{

    height:60px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 25px;

    background:#111;

}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

}

.red{

    background:#ff5f56;

}

.yellow{

    background:#ffbd2e;

}

.green{

    background:#27c93f;

}

.terminal-title{

    margin-left:20px;

    color:#888;

    font-family:monospace;

}

.terminal-body{

    padding:40px;

    font-family:monospace;

    font-size:18px;

    color:#6ef3ff;

    line-height:2;

    white-space:pre-wrap;

    word-break:break-word;

    overflow-wrap:anywhere;

}


.cursor{

    display:inline-block;

    width:12px;

    height:22px;

    background:#6ef3ff;

    margin-left:5px;

    animation:blink .8s infinite;

}


.terminal-button{

    display:inline-block;

    margin:0 40px 40px;

    padding:18px 36px;

    border-radius:50px;

    background:#f78b00;

    color:black;

    font-weight:700;

    transition:.3s;

}

.terminal-button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 0 30px rgba(247,139,0,.4);

}


.terminal-button{

    opacity:0;

    transform:translateY(20px);

    transition:.5s;

}

.terminal-button.show{

    opacity:1;

    transform:translateY(0);

}


.contact-cta{

    background:
    linear-gradient(
        135deg,
        rgba(247,139,0,.08),
        rgba(122,28,86,.10)
    );

    border:1px solid rgba(247,139,0,.15);

    border-radius:28px;

    padding:50px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:22px;

    backdrop-filter:blur(20px);

    max-width:600px;

    transition:.35s;

}

.contact-cta:hover{

    border-color:rgba(247,139,0,.35);

    transform:translateY(-4px);

}

.contact-tag{

    color:#f78b00;

    font-size:.8rem;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

}

.contact-cta h3{

    font-size:2.2rem;

    margin:15px 0;

    font-weight:800;

}

.contact-cta p{

    color:#b4b4b4;

    max-width:650px;

    margin:0;

    line-height:1.8;

}

.whatsapp-cta{

    display:flex;

    align-items:center;

    gap:15px;

    padding:22px 36px;

    border-radius:999px;

    background:#25D366;

    color:white;

    font-size:1.1rem;

    font-weight:700;

    transition:.35s;

    white-space:nowrap;

    box-shadow:
        0 0 30px rgba(37,211,102,.25);

}

.whatsapp-cta i{

    font-size:1.8rem;

}

.whatsapp-cta:hover{

    transform:translateY(-5px) scale(1.03);

    box-shadow:
        0 0 50px rgba(37,211,102,.45);

    color:white;

}


.section-header{

    max-width:900px;

    margin:0 auto 80px;

    text-align:center;

}
.section-tag{

    display:inline-block;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:20px;

}

.section-title{

    font-size:clamp(4rem,8vw,6.5rem);

    font-weight:900;

    line-height:.9;

    letter-spacing:-4px;

    margin-bottom:25px;

}

.section-description{

    max-width:700px;

    margin:auto;

    color:var(--muted);

    font-size:1.2rem;

    line-height:1.8;

}


footer{
 padding:3rem;
 text-align:center;
 color:var(--muted);
}


@media (max-width: 992px) {

    .navbar{

        left: 12px;
        right: 12px;

        width: auto;

        transform: none;

        border-radius: 18px;

        padding: 10px 16px;
    }


    .navbar-collapse{

        margin-top:15px;

        background:#111;

        border-radius:18px;

        padding:15px;

        width:100%;
    }

    .navbar-nav{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:8px;
    }

    .nav-item{

        width:100%;
    }

    .nav-link{

        width:100%;

        text-align:center;

        padding:14px 18px !important;

        border-radius:12px;
    }

}


 .services,#objetivo,#quemsomos,#contato-geral{padding:4rem 1rem}
 .card{margin-bottom:1.5rem}
 #quemsomos .descritivo{margin-top:2rem}

@media (prefers-reduced-motion:no-preference){
 .card,.btn,.nav-link,#banner img{transition:all .35s ease}
}

@media (max-width: 768px){

    .objetivos-grid{

        grid-template-columns:1fr;

    }

    .missao-title{

        font-size:3rem;

    }

    .missao-subtitle{

        font-size:1.5rem;

    }

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

.services-title{

font-size:3rem;

}

.services-description{

font-size:1rem;

}

}

@media(max-width:768px){

.section-title{

font-size:3rem;

letter-spacing:-2px;

}

.section-description{

font-size:1rem;

}

}

@media(max-width:768px){

    .contact-cta{

        flex-direction:column;

        text-align:center;

        padding:30px;

    }

    .contact-cta h3{

        font-size:1.8rem;

    }

    .whatsapp-cta{

        width:100%;

        justify-content:center;

    }

}

@media (max-width: 992px){

    #banner{
        grid-template-columns:1fr;
        text-align:center;
        gap:50px;
    }

    .hero-content{
        align-items:center;
    }

    .hero-network svg{
        max-width:320px;
    }

    #contato{
        grid-template-columns:1fr;
        gap:40px;
        padding:80px 20px;
    }

    .contact-cta{
        width:100%;
        max-width:100%;
        padding:30px;
    }

    .contato-right{
        width:100%;
    }

    .terminal{
        width:100%;
        max-width:100%;
    }

    .terminal-body{
        font-size:15px;
        padding:25px;
        white-space:pre-wrap;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .terminal-button{
        width:calc(100% - 50px);
        margin:0 25px 25px;
        text-align:center;
    }

}

@media (max-width: 768px){

    #banner{
        grid-template-columns: 1fr;
        padding: 110px 20px 60px;
        gap: 40px;
        text-align: center;
    }

    .hero-content{
        align-items: center;
    }

    .hero-content h1{
        font-size: 2.5rem;     
        letter-spacing: -1px; 
        line-height: 1;
        width: 100%;
        overflow: visible;
    }


    .hero-content p{
        font-size: 1rem;
        max-width: 100%;
    }

    .hero-buttons{
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-network{
        width: 100%;
    }

    .hero-network svg{
        width: 85%;
        max-width: 320px;
        margin: auto;
    }

}