:root{
--primary:#192943;
--secondary:#fdf8dd;
--glass:rgba(255,255,255,0.06);
--glass-border:rgba(255,255,255,0.12);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui;
}

html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
}

body{

color:white;

background:
radial-gradient(circle at 20% 30%, rgba(253,248,221,0.12), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(253,248,221,0.08), transparent 40%),
linear-gradient(180deg,#192943 0%,#0f1a2e 60%,#0a1322 100%);

}

/* LOGO BACKGROUND */

body::before{

content:"Ϙ";

position:fixed;

top:50%;
left:50%;

transform:translate(-50%,-50%);

font-size:800px;

color:rgba(253,248,221,0.03);

pointer-events:none;

z-index:0;

}

/* SECTIONS */

section{

position:relative;
z-index:1;

padding:84px 40px;

max-width:1400px;
margin:auto;

}

/* HEADER */

.header{

position:fixed;
top:0;

width:100%;
height:80px;

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

padding:0 60px;

background:rgba(20,30,50,0.35);

backdrop-filter:blur(20px);

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

z-index:10;

}

/* LOGO */

.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
letter-spacing:2px;
}

.logo-icon{
font-size:32px;
color:var(--secondary);
line-height:1;
}

.logo-text{
font-size:14px;
}

/* NAV */

.nav a{

margin-left:30px;
text-decoration:none;
color:white;

opacity:.85;

transition:.3s;

}

.nav a:hover{

opacity:1;
color:var(--secondary);

}

/* HERO */

.hero{

min-height:70vh;

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

text-align:center;

padding-top:120px;

}

.hero h1{

font-size:clamp(32px,5vw,54px);
margin-bottom:16px;

}

.hero h1 span{
color:var(--secondary);
display:block;
}

.hero p{
max-width:700px;
margin:auto;
line-height:1.6;
}

.hero-stats{

display:flex;
gap:28px;

justify-content:center;

margin:28px 0;

flex-wrap:wrap;

}

.stat strong{

font-size:28px;
color:var(--secondary);

}

/* HERO BUTTONS */

.hero-buttons{

display:flex;
gap:16px;
justify-content:center;
flex-wrap:wrap;

}

/* BOTÕES GLASS */

.btn-primary{

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(20px);

color:var(--secondary);

padding:12px 26px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

display:inline-block;

}

.btn-primary:hover{

transform:translateY(-2px);

background:rgba(255,255,255,0.1);

box-shadow:0 10px 30px rgba(0,0,0,0.3);

}

/* ENERGIA */

.energia-section{

background:transparent;

}

.energia-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:1fr minmax(300px,400px);

gap:42px;

align-items:center;

}

/* GLASS CARD */

.energia-card{

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(25px);

padding:32px;

border-radius:16px;

text-align:center;

box-shadow:0 10px 40px rgba(0,0,0,0.25);

transition:.3s;

}

.energia-card:hover{

transform:translateY(-5px);

}

.economy{

font-size:64px;

color:var(--secondary);

}

/* INFRA */

.infra-section{
text-align:center;
}

.infra-grid{

display:grid;

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

gap:24px;

margin-top:30px;

}

/* GLASS CARDS */

.infra-card,
.service-card{

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(25px);

padding:30px;

border-radius:16px;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,0.25);

}

.infra-card:hover,
.service-card:hover{

transform:translateY(-6px) scale(1.01);

box-shadow:0 15px 40px rgba(0,0,0,0.35);

}

/* SERVICES */

.services-section{
text-align:center;
}

.services-grid{

display:grid;

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

gap:24px;

margin-top:30px;

}

/* SOBRE */

.sobre-section{

background:transparent;

text-align:center;

max-width:900px;
margin:auto;

}

.sobre-section p{
line-height:1.6;
}

/* FOOTER */

.footer{

background:rgba(10,20,35,0.6);

backdrop-filter:blur(25px);

border-top:1px solid var(--glass-border);

padding:42px 40px;

}

.footer-container{

display:grid;

grid-template-columns:1fr 1fr;

max-width:1000px;

margin:auto;

gap:42px;

}

/* BENEFITS */

.benefits{

margin-top:16px;
margin-bottom:26px;

line-height:1.8;

}

/* MENU HAMBURGUER */

.menu-toggle{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}

.menu-toggle span{

width:25px;
height:3px;

background:white;

display:block;

}

/* RESPONSIVE */

@media (max-width:900px){

section{
padding:70px 25px;
}

.header{
padding:0 25px;
}

.hero{
height:auto;
padding-top:120px;
}

.hero h1{
font-size:40px;
}

.hero-stats{
flex-direction:column;
gap:12px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.energia-container{
grid-template-columns:1fr;
}

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

.nav a{
margin-left:15px;
font-size:14px;
}

}

/* MOBILE MENU */

@media (max-width:800px){

.nav{

position:fixed;

top:80px;
right:-100%;

width:220px;
height:100vh;

background:rgba(15,25,45,0.85);

backdrop-filter:blur(25px);

display:flex;

flex-direction:column;

padding:40px 25px;

gap:20px;

transition:0.3s;

}

.nav.active{
right:0;
}

.menu-toggle{
display:flex;
}

}

/* SMALL MOBILE */

@media (max-width:600px){

.hero h1{
font-size:34px;
}

.logo-icon{
font-size:28px;
}

.logo-text{
font-size:14px;
}

.hero-stats{
flex-direction:column;
}

.btn-primary{
width:100%;
max-width:260px;
text-align:center;
}

section{
padding:60px 20px;
}

body::before{
font-size:400px;
}

}