*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

:root{

--bg:#050505;
--card:#111111;
--primary:#005eff;
--primary2:#3b82f6;
--text:#ffffff;
--text2:#cfcfcf;
--border:rgba(255,255,255,.08);

}

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
position:relative;

}

body::before{

content:"";
position:fixed;
top:-200px;
right:-200px;

width:600px;
height:600px;

background:radial-gradient(circle,
rgba(0,94,255,.18),
transparent 70%);

pointer-events:none;
z-index:-2;

}

body::after{

content:"";
position:fixed;
bottom:-250px;
left:-250px;

width:650px;
height:650px;

background:radial-gradient(circle,
rgba(0,94,255,.10),
transparent 70%);

pointer-events:none;
z-index:-2;

}

section{

padding:120px 8%;

}

h2{

font-size:2.8rem;
margin-bottom:25px;
text-align:center;
font-weight:700;

}

p{

line-height:1.9;
color:var(--text2);

}

.hero{

min-height:100vh;

display:flex;
align-items:center;

position:relative;

}

.hero-container{

display:flex;

align-items:center;
justify-content:space-between;

gap:80px;

max-width:1400px;
margin:auto;

}

.hero-text{

flex:1;

animation:fadeLeft 1.2s ease;

}

.hero-tag{

display:inline-block;

padding:12px 22px;

background:rgba(255,255,255,.05);

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

border-radius:50px;

backdrop-filter:blur(15px);

margin-bottom:25px;

font-size:.95rem;

}

.hero-text h1{

font-size:4.4rem;

line-height:1.1;

margin-bottom:25px;

max-width:700px;

}

.hero-text p{

font-size:1.15rem;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-top:35px;

flex-wrap:wrap;

}

.btn{

padding:16px 34px;

border-radius:60px;

text-decoration:none;

color:white;

font-weight:500;

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

transition:.35s;

display:inline-flex;

align-items:center;

gap:8px;

}

.btn:hover{

transform:translateY(-6px);

background:white;

color:#050505;

}

.btn-blue{

background:var(--primary);

border:none;

box-shadow:0 0 30px rgba(0,94,255,.35);

}

.btn-blue:hover{

background:#1b6dff;

color:white;

box-shadow:0 0 45px rgba(0,94,255,.55);

}

.hero-image{

flex:1;

display:flex;

justify-content:center;

animation:fadeRight 1.3s ease;

}

.hero-image img{

width:100%;

max-width:470px;

border-radius:35px;

box-shadow:

0 0 30px rgba(0,94,255,.20),

0 0 80px rgba(0,94,255,.18);

transition:.5s;

animation:float 5s ease-in-out infinite;

}

.hero-image img:hover{

transform:scale(1.03);

box-shadow:

0 0 35px rgba(0,94,255,.45),

0 0 90px rgba(0,94,255,.30);

}

/* ===========================
   SOBRE / IMPACTO
=========================== */

.impact,
.about{

max-width:1100px;
margin:auto;
text-align:center;

}

.impact p,
.about p{

max-width:850px;
margin:20px auto 0;

}


/* ===========================
   CARDS DE SERVIÇOS
=========================== */

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:60px;

}

.service-card{

background:rgba(255,255,255,.04);

backdrop-filter:blur(20px);

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

border-radius:28px;

padding:40px 30px;

text-align:center;

cursor:pointer;

transition:.4s;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:250px;
height:250px;

background:rgba(0,94,255,.15);

border-radius:50%;

transition:.6s;

}

.service-card:hover::before{

top:-60px;
left:-60px;

}

.service-card:hover{

transform:translateY(-12px);

border-color:rgba(0,94,255,.35);

box-shadow:

0 20px 40px rgba(0,0,0,.45),

0 0 25px rgba(0,94,255,.20);

}

.service-card i{

font-size:3rem;

color:#3b82f6;

margin-bottom:20px;

transition:.4s;

}

.service-card:hover i{

transform:scale(1.15) rotate(-6deg);

}

.service-card h3{

margin-bottom:15px;

font-size:1.4rem;

}


/* ===========================
   DIFERENCIAIS
=========================== */

.features-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:50px;

}

.feature{

background:rgba(255,255,255,.04);

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

border-radius:24px;

padding:35px;

text-align:center;

transition:.4s;

}

.feature:hover{

transform:translateY(-10px);

box-shadow:0 0 25px rgba(0,94,255,.18);

}

.feature i{

font-size:2.4rem;

margin-bottom:18px;

color:#3b82f6;

}


/* ===========================
   PORTFÓLIO
=========================== */

.portfolio{

text-align:center;

}

.portfolio-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}

.portfolio-item{
    position:relative;
    height:260px;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
    cursor:pointer;
    background:rgba(255,255,255,.03);
}

.portfolio-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.portfolio-item:hover img{
    transform:scale(1.08);
}

.portfolio-item:hover{
    transform:translateY(-10px);
    box-shadow:0 0 30px rgba(0,94,255,.20);
}

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

.cta{

text-align:center;

padding:140px 8%;

}

.cta h2{

font-size:3rem;

margin-bottom:25px;

}

.cta p{

max-width:700px;

margin:auto;

margin-bottom:35px;

}


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

footer{

padding:60px 20px;

text-align:center;

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

background:#040404;

}

footer h3{

font-size:2rem;

margin-bottom:10px;

}

footer p{

margin-top:8px;

color:#9d9d9d;

}


/* ===========================
   WHATSAPP
=========================== */

.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:68px;

height:68px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#25D366;

color:white;

font-size:2rem;

text-decoration:none;

box-shadow:

0 0 25px rgba(37,211,102,.45);

transition:.4s;

z-index:999;

animation:pulse 2.5s infinite;

}

.whatsapp:hover{

transform:scale(1.12);

}


/* ===========================
   MODAL
=========================== */

.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.82);

justify-content:center;

align-items:center;

backdrop-filter:blur(8px);

z-index:9999;

}

.modal-content{

width:90%;

max-width:650px;

padding:45px;

border-radius:30px;

background:#101010;

border:1px solid rgba(0,94,255,.25);

box-shadow:

0 0 45px rgba(0,94,255,.20);

text-align:center;

animation:modal .35s ease;

position:relative;

}

.close{

position:absolute;

top:20px;

right:25px;

font-size:34px;

cursor:pointer;

transition:.3s;

}

.close:hover{

color:#3b82f6;

}


/* ===========================
   REVEAL
=========================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


/* ===========================
   ANIMAÇÕES
=========================== */

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

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

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

@keyframes modal{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}


/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:900px){

.hero-container{

flex-direction:column-reverse;

text-align:center;

gap:50px;

}

.hero-text h1{

font-size:2.8rem;

}

.hero-text p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image img{

max-width:340px;

}

h2{

font-size:2.2rem;

}

section{

padding:90px 7%;

}

}