/* ============================= */
/* RESET */
/* ============================= */

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

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

html{
scroll-behavior:smooth;
}

html, body{
overflow-x:hidden;
}


body{

font-family:"Barlow",sans-serif;

background:#191919;

font-size:16px;

line-height:1.6;

color:#FFFFFF;

}


/* ============================= */
/* FORM */
/* ============================= */
.form-row{

display:flex;
gap:20px;
width:100%;

}

.form-row{
display:flex;
gap:20px;
width:100%;
margin-bottom:30px;
}

.form-row .form-group{

flex:1;

}


@media(max-width:768px){

.form-row{
flex-direction:column;
}

}

/* ============================= */
/* SECTION SYSTEM */
/* ============================= */


.services,
.contact,
.footer{
padding-top:80px;
padding-bottom:80px;
}

.hero + section{
padding-top:120px;
}



/* ============================= */
/* TYPOGRAPHY */
/* ============================= */

h1{
font-size:56px;
font-weight:700;
}

h2{
font-size:40px;
font-weight:600;
}

h3{
font-size:26px;
font-weight:600;
}

/* CONTAINER */
.container{

max-width:1200px;

margin:auto;

padding:0 20px;

}



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

header{

position:sticky;
top:0;

background:#191919;

border-bottom:1px solid #262626;

z-index:100;

}


.header-container{

width:100%;
padding:0 40px;

height:106px;

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

}

/* spinge la nav a destra */
.nav-container{
margin-left:auto;
}

/* opzionale per allineare bene i link */
.nav-menu{
display:flex;
gap:30px;
}

/* LOGO */

.logo{
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:#FFFFFF;
}

.logo img{
height:40px;
}

.logo-text{
font-size:18px;
font-weight:600;
}


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

.nav-menu{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:rgba(25,25,25,0.98);

backdrop-filter:blur(8px);

display:flex;
flex-direction:column;
justify-content:center;

align-items:flex-start;

padding:0 40px;

gap:28px;

opacity:0;
visibility:hidden;

transform:translateY(-10px);

transition:
opacity .35s ease,
transform .35s ease,
visibility .35s;

z-index:90;

}

.nav-menu.active{

opacity:1;
visibility:visible;

transform:translateY(0);

}

.nav-menu a{

font-size:clamp(22px,4vw,30px);

font-weight:500;

text-decoration:none;

color:#FFFFFF;

letter-spacing:.5px;

transition:
color .25s ease,
transform .25s ease;

}

.nav-menu a:hover{

color:#9EFF00;

transform:translateX(4px);

}

.nav-menu a{

opacity:0;
transform:translateY(10px);

transition:
opacity .35s ease,
transform .35s ease;

}

.nav-menu.active a{

opacity:1;
transform:translateY(0);

}

/* delay progressivo */

.nav-menu.active a:nth-child(1){transition-delay:.05s;}
.nav-menu.active a:nth-child(2){transition-delay:.1s;}
.nav-menu.active a:nth-child(3){transition-delay:.15s;}
.nav-menu.active a:nth-child(4){transition-delay:.2s;}
.nav-menu.active a:nth-child(5){transition-delay:.25s;}

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


.burger:hover{

background:#2F2F2F;

}

.burger{

width:44px;
height:44px;

background:#262626;

border:none;

border-radius:12px;

display:flex;
flex-direction:column;

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

gap:6px;

cursor:pointer;

z-index:110;

position:relative;

}

.burger span{

width:22px;
height:2px;

background:#D8FF99;

border-radius:2px;

transition:all .3s ease;

}

/* ANIMAZIONE */

.burger.active span:nth-child(1){

transform:translateY(7px) rotate(45deg);

}

.burger.active span:nth-child(2){

opacity:0;

}

.burger.active span:nth-child(3){

transform:translateY(-7px) rotate(-45deg);

}



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

.hero{

position:relative;

background-image:url("../assets/grid.svg");

min-height:calc(100svh - 106px);

display:flex;
align-items:center;

padding:0 20px;

text-align:center;

overflow:hidden;

}


.hero-container{

max-width:900px;

margin:0 auto;

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

width:100%;
position:relative;
z-index:2;

}

.hero-title{

font-size:clamp(32px,6vw,56px);

line-height:1.2;

margin-bottom:32px;

}

.hero-description{

max-width:600px;

margin:0 auto 32px;

background:#1B1B1B;

border:1px solid #262626;

border-radius:10px;

padding:18px 32px;

font-size:15px;

color:#9CA3AF;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



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

.btn-dark,
.btn-green{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 24px;

border-radius:10px;

font-size:15px;

cursor:pointer;

transition:.2s;

text-decoration:none;

}

.btn-dark{

background:#1B1C1B;

border:1px solid #333333;

color:#FFFFFF;

}

.btn-dark:hover{

background:#232423;

}

.btn-green{

background:#9EFF00;

color:#000;

border:none;

}

.btn-green:hover{

background:#b4ff33;

}

.btn-dark,
.btn-green{

transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;

}

.btn-dark:hover,
.btn-green:hover{

transform:translateY(-2px);

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

}



/* HERO WAVES */

.hero-waves{

position:absolute;

bottom:0;

left:50%;

transform:translateX(-50%);

width:850px;

z-index:0;

pointer-events:none;

}


/* ============================= */
/* SERVICES */
/* ============================= */

.services{
border-top:1px solid #262626;
}

.services-hero{
text-align:center;
margin-bottom:40px;
}

.services-hero-content{

max-width:620px;

margin:0 auto;

padding:0 20px;

}

.services-hero p{

color:#9CA3AF;

font-size:15px;

line-height:1.7;

}



/* SERVICES GRID */

.services-grid{

max-width:1200px;

margin:auto;

padding:0 20px;

display:grid;

grid-template-columns:1fr;

gap:20px;

}


/* SERVICE CARD */

.service-card{

padding:40px 24px;

border:1px solid #262626;

background:linear-gradient(
180deg,
rgba(255,255,255,0.02),
rgba(0,0,0,0)
);

display:flex;
flex-direction:column;

height:100%;

}

.service-card{

transition:
transform .25s ease,
border-color .25s ease;

}

.service-card:hover{

transform:translateY(-6px);

border-color:#9EFF00;

}



/* HEADER */

.service-header{

display:flex;

align-items:center;

gap:16px;

margin-bottom:20px;

}



/* ICON */

.service-icon{

width:60px;
height:60px;

}

.service-icon img{

width:100%;
height:100%;

}



/* TEXT */

.service-card p{

color:#9CA3AF;

line-height:1.7;

margin-bottom:30px;

/* stabilizza l'altezza del testo */

min-height:70px;

}



/* BUTTON */

.service-btn{

padding:14px;

border:1px solid #333333;

border-radius:10px;

background:#1E1E1E;

color:#FFFFFF;

cursor:pointer;

transition:.2s;

/* questo è il fix principale */

margin-top:auto;

}

.service-btn{

display:inline-flex;

align-items:center;

justify-content:center;

text-decoration:none;

}

.service-btn:hover{

background:#2A2A2A;

}



/* ============================= */
/* CONTACT */
/* ============================= */



.contact-hero{

text-align:center;

max-width:700px;

margin:auto;

margin-bottom:40px;

padding:0 20px;

}

.contact-logo{

width:64px;

margin:0 auto 20px;

display:block;

}

.contact-hero p{

color:#9CA3AF;

margin:16px auto 32px;

max-width:600px;

}

.whatsapp-cta{

display:inline-flex;

align-items:center;

justify-content:center;

}



/* FORM */

.contact-form-container{

max-width:900px;

margin:auto;

padding:0 20px;

}

.contact-form{

display:flex;
flex-direction:column;

gap:30px;

}

.form-group{

padding:30px;

background:#1F1F1F;

border:1px solid #262626;

border-radius:10px;

}

.form-group label{

display:block;

margin-bottom:12px;

}

.form-group input,
.form-group textarea{

width:100%;

border:none;

border-bottom:1px solid #333333;

background:transparent;

padding:10px 0;

color:#FFFFFF;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

color:#6B7280;

}

.checkbox-group{

display:flex;

flex-direction:column;

gap:12px;

color:#D1D5DB;

}

.checkbox-group label{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

}

.checkbox-group input{

width:16px;
height:16px;

accent-color:#9EFF00;

cursor:pointer;

}

.checkbox-group label:hover{
color:#FFFFFF;
}



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

.footer{

padding:60px 20px;

border-top:1px solid #262626;

margin-top:50px;

}

.footer-container{

max-width:1100px;

margin:auto;

display:flex;

flex-direction:column;

align-items:center;

gap:40px;

}

.footer-logo{

display:flex;

align-items:center;

gap:10px;

font-size:20px;

font-weight:600;

color:#FFFFFF;

text-decoration:none;

}

.footer-logo:hover{
color:#FFFFFF;
}

.footer-logo img{

width:48px;

}



/* CONTACT INFO */

.footer-contact{

width:100%;

border-top:1px solid #262626;

border-bottom:1px solid #262626;

}

.footer-contact-item{

display:flex;

align-items:center;

gap:14px;

padding:18px 0;

border-bottom:1px solid #262626;

color:#D1D5DB;

}

.footer-contact-item:last-child{
border:none;
}

.footer-contact-item img{

width:16px;
height:16px;

}

.footer-contact-item a{

text-decoration:none;

color:#D1D5DB;

transition:.2s;

}

.footer-contact-item a:hover{

color:#25D366;

}

.footer-copy{

font-size:14px;

color:#6B7280;

text-align:center;

}



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

@media(min-width:768px){

.hero-description{
font-size:18px;
}

.hero-buttons{
gap:24px;
}

.contact-form{
gap:32px;
}

}



/* ============================= */
/* DESKTOP */
/* ============================= */

@media(min-width:1024px){

.nav-menu{

position:absolute;

top:106px;

left:0;

width:100%;

flex-direction:column;

align-items:center;

gap:0;

max-height:0;

overflow:hidden;

background:#191919;

border-top:1px solid #262626;

padding:0;

}

.nav-menu.active{

max-height:500px;

padding:20px 0;

}

.nav-menu a{

font-size:18px;

padding:16px 0;

border-top:1px solid #262626;

}

.hero-waves{
width:1200px;
}

.services-grid{

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

}

.contact-form{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.contact-form button{

grid-column:span 2;

justify-self:center;

}

.form-group:nth-child(3),
.form-group:nth-child(4){
grid-column:span 2;
}

}

/* ============================= */
/* HERO FIX MOBILE */
/* ============================= */

@media (max-width:768px){

.hero{

padding:100px 20px 140px;

min-height:420px;

}

.hero-waves{
width:100%;
max-width:1200px;
}


.hero-buttons{

flex-direction:row;

}

.hero-buttons .btn-dark,
.hero-buttons .btn-green{

padding:12px 18px;
font-size:14px;

}

}