html{
scroll-behavior:smooth;
}

/* MENU HAMBURGUER */

.menu-toggle{

display:none;

flex-direction:column;

gap:6px;

cursor:pointer;

}

.menu-toggle span{

width:26px;
height:3px;

background:white;

display:block;

}

/* MOCKUP NOTEBOOK */

.mockup{

background:#111827;

padding:14px;

border-radius:18px;

box-shadow:
0 30px 70px rgba(0,0,0,0.6);

position:relative;

max-width:520px;

}

/* barra superior estilo mac */

.mockup::before{

content:"";

position:absolute;

top:8px;
left:14px;

width:10px;
height:10px;

background:#ff5f57;

border-radius:50%;

box-shadow:
18px 0 #febc2e,
36px 0 #28c840;

}

.mockup img{

width:100%;

border-radius:10px;

margin-top:16px;

display:block;

}

/* MOBILE */

@media (max-width:900px){

.menu{

position:absolute;

top:70px;
right:0;

background:#020617;

flex-direction:column;

width:220px;

padding:20px;

display:none;

}

.menu.active{

display:flex;

}

.menu-toggle{

display:flex;

}

}

/* RESET */

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

body{
font-family:'Inter',sans-serif;
background:#020617;
color:white;
line-height:1.6;
}

img{
max-width:100%;
display:block;
}

/* CONTAINER */

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
background:rgba(2,6,23,0.9);
backdrop-filter:blur(10px);
z-index:1000;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo img{
height: 70px;
width:auto;
display:block;
}

.menu{
display:flex;
gap:30px;
list-style:none;
}

.menu a{
color:white;
text-decoration:none;
font-weight:500;
position:relative;
transition:0.3s;
}

.menu a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#38bdf8;

transition:0.3s;

}

.menu .cta{

background:linear-gradient(135deg,#38bdf8,#6366f1);

padding:10px 18px;

border-radius:8px;

font-weight:600;

}

.menu .cta::after{
display:none;
}

.menu a:hover::after{

width:100%;

}

/* HERO */

.hero{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:60px;

padding:120px 10%;
}

.hero-mini{

margin-top:18px;

font-size:14px;

opacity:0.8;

}

/* GRADIENTE FUNDO */

.hero::before{

content:"";

position:absolute;

top:-200px;
left:-200px;

width:600px;
height:600px;

background:radial-gradient(
circle,
rgba(56,189,248,0.25),
transparent 70%
);

filter:blur(80px);

animation:floatGradient 10s infinite alternate;

z-index:-1;

}

@keyframes floatGradient{

0%{
transform:translate(0,0);
}

100%{
transform:translate(120px,80px);
}

}

.btn{

display:inline-block;

padding:14px 28px;

border-radius:10px;

background:linear-gradient(
135deg,
#38bdf8,
#6366f1
);

color:white;

font-weight:600;

text-decoration:none;

transition:.3s;

box-shadow:
0 10px 25px rgba(99,102,241,0.4);

}

.btn:hover{

transform:translateY(-3px);

box-shadow:
0 18px 35px rgba(99,102,241,0.5);

}

/* SEÇÕES */

section{
padding:100px 0;
}

h2{
text-align:center;
font-size:36px;
margin-bottom:60px;
}

/* SERVIÇOS */

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.service-card{

background:rgba(15,23,42,0.7);

border:1px solid rgba(255,255,255,0.05);

backdrop-filter:blur(12px);

padding:30px;

border-radius:14px;

transition:0.35s;

}

.service-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,0.4);

}

.service-card h3{
margin-bottom:10px;
}

/* PROCESSO */

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
text-align:center;
}

.process-card{
background:#0f172a;
padding:30px;
border-radius:12px;
}

/* SOBRE */

.about{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about img{
width:100%;
border-radius:14px;
box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

/* ===== PROJETOS PREMIUM ===== */

.projects-grid{

display:grid;

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

gap:35px;

}

/* CARD */

.project-card{

background:#0f172a;

border-radius:14px;

overflow:hidden;

border:1px solid #1e293b;

transition:0.4s;

position:relative;

}

/* GLOW */

.project-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
120deg,
transparent,
rgba(56,189,248,0.25),
transparent
);

opacity:0;

transition:0.4s;

}

/* HOVER */

.project-card:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:

0 30px 60px rgba(0,0,0,0.5),

0 0 20px rgba(56,189,248,0.2);

}

.project-card:hover::before{

opacity:1;

}

/* IMAGEM */

.project-card img{

width:100%;

height:220px;

object-fit:cover;

}

/* TEXTO */

.project-info{

padding:22px;

}

.project-info h3{

margin-bottom:8px;

font-size:20px;

}

.project-info p{

opacity:0.8;

font-size:15px;

}

/* CARD */

.project-card{

background:#0f172a;

border-radius:14px;

overflow:hidden;

transition:0.35s;

border:1px solid #1e293b;

}

.project-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,0.4);

}

/* IMAGEM */

.project-card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

/* TEXTO */

.project-info{

padding:22px;

}

.project-info h3{

margin-bottom:8px;

font-size:20px;

}

.project-info p{

font-size:15px;

opacity:0.8;

}

/* CONTATO */

.contact{
text-align:center;
}

.contact p{
margin-bottom:20px;
}

/* FOOTER */

footer{
background:#020617;
border-top:1px solid #1e293b;
padding:30px 0;
text-align:center;
font-size:14px;
opacity:0.7;
}

/* WHATSAPP */

.whatsapp{
position:fixed;
right:20px;
bottom:20px;
background:#25d366;
color:white;
padding:16px 18px;
border-radius:50%;
font-size:22px;
text-decoration:none;
z-index:1000;
}

/* RESPONSIVO */

@media(max-width:900px){

.hero{
grid-template-columns:1fr;
text-align:center;
}

.hero img{
margin:auto;
}

.about{
grid-template-columns:1fr;
}

.menu{
display:none;
}

}

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

.header{

position:fixed;
top:0;
width:100%;

background:rgba(2,6,23,0.6);
backdrop-filter:blur(12px);

transition:0.35s;

z-index:999;

}

.header.scrolled{

background:#020617;

box-shadow:0 10px 25px rgba(0,0,0,0.4);

}

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

.reveal{

opacity:0;

transform:translateY(60px) scale(0.98);

transition:all 0.9s cubic-bezier(.2,.8,.2,1);

}

.reveal.active{

opacity:1;

transform:translateY(0) scale(1);

}

.gradient{

background:linear-gradient(
90deg,
#38bdf8,
#6366f1
);

-webkit-background-clip:text;

color:transparent;

}

/* HERO IMAGE */

.hero img{
width:100%;
max-width:520px;
border-radius:24px;
display:block;
box-shadow:0 25px 60px rgba(0,0,0,0.45);
}

/* ===== PLANOS ===== */

.plans-grid{

display:grid;

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

gap:35px;

}

.plan-card{

background:#0f172a;

border-radius:14px;

overflow:hidden;

border:1px solid #1e293b;

transition:0.4s;

}

.plan-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,0.5);

}

.plan-card img{

width:100%;

height:200px;

object-fit:cover;

}

.plan-info{

padding:24px;

}

.plan-info h3{

font-size:22px;

margin-bottom:8px;

}

.price{

font-size:28px;

font-weight:700;

color:#38bdf8;

margin-bottom:15px;

}

.plan-info ul{

list-style:none;

margin-bottom:20px;

}

.plan-info ul li{

margin-bottom:8px;

opacity:0.85;

}

/* PLANO DESTACADO */

.plan-card.destaque{

border:2px solid #38bdf8;

transform:scale(1.05);

}

.plan-card.destaque:hover{

transform:scale(1.07);

}

/* BADGE MAIS POPULAR */

.plan-card{

position:relative;

}

.badge{

position:absolute;

top:14px;
left:14px;

background:#38bdf8;

color:#020617;

font-size:12px;

font-weight:700;

padding:6px 10px;

border-radius:6px;

}

/* GLOW DO CARD DESTACADO */

.plan-card.destaque{

border:2px solid #38bdf8;

box-shadow:
0 0 0 1px rgba(56,189,248,0.2),
0 20px 40px rgba(0,0,0,0.6),
0 0 25px rgba(56,189,248,0.25);

transform:scale(1.05);

}

.plan-card.destaque:hover{

transform:scale(1.08);

box-shadow:
0 0 0 1px rgba(56,189,248,0.3),
0 25px 60px rgba(0,0,0,0.7),
0 0 35px rgba(56,189,248,0.35);

}

/* FEATURES DOS PLANOS */

.plan-features{

list-style:none;

margin-bottom:22px;

}

.plan-features li{

margin-bottom:10px;

font-size:15px;

opacity:0.9;

}

.price span{

font-size:14px;

opacity:0.7;

font-weight:400;

}

/* FEATURES DOS PLANOS */

.plan-features{

list-style:none;

margin-bottom:22px;

}

.plan-features li{

position:relative;

padding-left:26px;

margin-bottom:10px;

font-size:15px;

opacity:0.9;

}

.plan-features li::before{

content:"✓";

position:absolute;

left:0;

color:#38bdf8;

font-weight:bold;

}

.price{

font-size:40px;

font-weight:700;

margin-bottom:15px;

color:white;

}

.currency{

font-size:18px;

opacity:0.7;

margin-right:4px;

}

.period{

font-size:14px;

opacity:0.6;

margin-left:6px;

}

.plan-card{

transition:0.4s;

}

.plan-card:hover{

transform:translateY(-10px);

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

}

/* TOPBAR */

.topbar{

background:linear-gradient(
90deg,
#38bdf8,
#6366f1
);

text-align:center;

padding:6px 10px;

font-size:14px;

font-weight:500;

color:white;

}

/* ===== SERVIÇOS COMPLEMENTARES ===== */

#extras{

background:#020617;

}

.extras-intro{

max-width:700px;

margin:0 auto 50px auto;

text-align:center;

opacity:0.85;

}

.extras-grid{

display:grid;

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

gap:30px;

}

.extra-card{

background:#0f172a;

border-radius:14px;

padding:30px;

border:1px solid #1e293b;

transition:0.35s;

}

.extra-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,0.4);

}

.extra-card h3{

margin-bottom:10px;

font-size:20px;

color:#38bdf8;

}

/* REDES SOCIAIS */

.social{

margin-top:20px;

display:flex;

justify-content:center;

gap:20px;

}

.social a{

color:white;

font-size:20px;

transition:0.3s;

}

.social a:hover{

color:#38bdf8;

transform:translateY(-3px);

}

/* REDES SOCIAIS FLUTUANTES */

.social-float{

position:fixed;
left:20px;
top:50%;
transform:translateY(-50%);

display:flex;
flex-direction:column;
gap:12px;

z-index:900;

}

.social-float a{

display:flex;
align-items:center;
justify-content:center;

width:42px;
height:42px;

background:#0f172a;

color:white;

border-radius:10px;

font-size:18px;

text-decoration:none;

box-shadow:0 8px 20px rgba(0,0,0,0.35);

transition:0.3s;

}