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

body{
font-family:'Inter',sans-serif;
background:#0f172a;
color:#e2e8f0;
line-height:1.6;
padding-top:90px; /* ✅ ENIGE header offset */
}

/* =========================
HEADER
========================= */
header{
position:fixed;
top:0;
left:0;
width:100%;
height:90px;
z-index:1000;
background:rgba(11,17,32,0.85);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,0.05);
}

header.scrolled{
background:#0b1120;
box-shadow:0 5px 20px rgba(0,0,0,0.4);
}

.nav{
width:90%;
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
height:100%;
}

.logo img{
height:70px;
}

/* =========================
NAV
========================= */
nav{
display:flex;
gap:30px;
}

nav a{
color:white;
text-decoration:none;
font-weight:500;
position:relative;
}

nav a.active{
color:#38bdf8;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:#38bdf8;
transition:0.3s;
}

nav a:hover::after{
width:100%;
}

/* =========================
HERO
========================= */
.hero{
background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url("../images/hero.webp");
background-size:cover;
background-position:center;
padding:120px 20px 100px;
text-align:center;
}

.hero-content{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
align-items:center;
}

.hero h1{
font-family:'Orbitron',sans-serif;
font-size:44px;
line-height:1.1;
margin-bottom:12px;
letter-spacing:-1px;
}

.hero p{
font-size:18px;
opacity:.85;
max-width:600px;
margin:0 auto 30px;
}

/* =========================
BUTTON
========================= */
.btn{
display:inline-block;
padding:16px 34px;
margin-top:10px;
background:linear-gradient(135deg,#38bdf8,#0ea5e9);
color:#000;
border-radius:40px;
font-weight:600;
text-decoration:none;
transition:.2s;
}

.btn:hover{
transform:scale(1.05);
}

/* =========================
TRUST
========================= */
.hero-trust{
margin-top:35px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
max-width:600px;
margin-left:auto;
margin-right:auto;
}

.trust-box{
background:#111827;
padding:14px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.05);
text-align:center;
}

.trust-box strong{
color:#38bdf8;
display:block;
font-size:16px;
}

.trust-box span{
font-size:12px;
opacity:.7;
}

/* =========================
SECTION
========================= */
.section{
width:90%;
max-width:1100px;
margin:80px auto;
}

.section-title{
text-align:center;
font-family:'Orbitron',sans-serif;
margin-bottom:40px;
font-size:30px;
}

.section-sub{
text-align:center;
max-width:600px;
margin:0 auto 40px;
opacity:.7;
}

/* =========================
GRID / CARDS
========================= */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

.card{
background:#0b1120;
padding:25px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.06);
transition:.2s;
}

.card:hover{
box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

/* =========================
SERVICES
========================= */
.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

.service-card{
background:#0b1120;
padding:26px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.06);
text-decoration:none;
color:white;
transition:.2s;
}

.service-card:hover{
transform:translateY(-4px);
border-color:#38bdf8;
box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

.service-card h3{
margin-bottom:6px;
font-size:17px;
}

.service-card p{
font-size:14px;
color:#9ca3af;
}

.price{
margin-top:14px;
display:inline-block;
padding:6px 14px;
border-radius:20px;
border:1px solid rgba(56,189,248,0.4);
color:#38bdf8;
font-size:13px;
}

/* =========================
STEPS
========================= */
.steps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
text-align:center;
}

.step{
background:#0b1120;
padding:25px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.06);
}

.step-number{
width:45px;
height:45px;
margin:0 auto 10px;
border-radius:50%;
background:#38bdf8;
display:flex;
align-items:center;
justify-content:center;
color:black;
font-weight:700;
}

/* =========================
CONTACT
========================= */
.contact-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:40px;
}

.contact-info,
.contact-form{
background:#0b1120;
padding:25px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.06);
}

.contact-info p{
margin-bottom:12px;
color:#9ca3af;
}

.contact-info a{
color:#38bdf8;
text-decoration:none;
}

.contact-info a:hover{
text-decoration:underline;
}

.contact-form form{
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.08);
background:#020617;
color:white;
font-size:14px;
}

.contact-form textarea{
resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border-color:#38bdf8;
}

.response-time{
margin-top:10px;
font-size:13px;
color:#9ca3af;
}

/* =========================
FOOTER
========================= */
footer{
text-align:center;
padding:40px;
background:#0b1120;
margin-top:80px;
}

/* =========================
WHATSAPP
========================= */
.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
padding:12px;
border-radius:50%;
z-index:999;
box-shadow:0 5px 20px rgba(0,0,0,0.4);
}

.whatsapp img{
width:26px;
}

/* =========================
ANIMATION
========================= */
.fade-in{
opacity:0;
transform:translateY(20px);
transition:0.5s ease;
}

.fade-in.visible{
opacity:1;
transform:translateY(0);
}

/* =========================
MOBILE
========================= */
.menu-toggle{
display:none;
}

@media(max-width:768px){

.menu-toggle{
display:block;
font-size:28px;
}

nav{
display:none;
flex-direction:column;
background:#0b1120;
position:absolute;
top:90px;
left:0;
width:100%;
text-align:center;
padding:20px 0;
}

nav.active{
display:flex;
}

.hero{
padding:100px 15px;
}

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

.hero-trust{
grid-template-columns:1fr 1fr;
}

.section-title{
font-size:24px;
}

.services-grid,
.grid,
.steps{
grid-template-columns:1fr;
}

.contact-wrapper{
grid-template-columns:1fr;
}
}