/* ================= BASE RESET ================= */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
font-family:'Segoe UI',Roboto,Arial,sans-serif;
background:#f6f8fb;
color:#1f2933;
line-height:1.8;
overflow-x:hidden
}
a{text-decoration:none;color:#0b5fa5}
img{max-width:100%;height:auto;display:block}

/* ================= HEADER ================= */
header{
background:#fff;
border-bottom:1px solid #e5e7eb;
position:sticky;
top:0;
z-index:1000
}
header .container{
max-width:1200px;
margin:auto;
padding:18px 16px;
display:flex;
flex-direction:column;
align-items:center
}
.logo{
max-width:240px;
margin-bottom:14px
}

/* ================= NAV ================= */
nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px
}
nav a{
padding:12px 22px;
border-radius:999px;
background:#eef6fb;
font-weight:600;
font-size:15px;
transition:.3s
}
nav a:hover{
background:#0b5fa5;
color:#fff
}

/* ================= HERO ================= */
.hero{
background:linear-gradient(135deg,#0b5fa5,#0a4c85);
color:#fff;
padding:110px 20px;
text-align:center
}
.hero h1{
font-size:42px;
font-weight:700;
margin-bottom:18px
}
.hero p{
font-size:18px;
opacity:.95;
max-width:720px;
margin:auto
}
.hero .cta{
margin-top:28px;
display:inline-block;
background:#fff;
color:#0b5fa5;
padding:14px 32px;
border-radius:30px;
font-weight:700;
transition:.3s
}
.hero .cta:hover{
background:#e6f0fb
}

/* ================= SECTIONS ================= */
.section{
max-width:1200px;
margin:80px auto;
padding:0 16px
}
.section h2{
font-size:32px;
margin-bottom:20px;
color:#0b5fa5
}
.section p{
margin-bottom:18px;
color:#374151
}

/* ================= SERVICES ================= */
.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
margin-top:30px
}
.card{
background:#fff;
border-radius:14px;
padding:26px;
box-shadow:0 10px 25px rgba(0,0,0,.06);
transition:.3s
}
.card:hover{
transform:translateY(-6px)
}
.card h3{
margin-bottom:12px;
font-size:20px;
color:#0b5fa5
}

/* ================= TESTIMONIAL ================= */
.testimonial{
background:#fff;
border-radius:14px;
padding:24px;
box-shadow:0 10px 25px rgba(0,0,0,.06)
}

/* ================= FOOTER ================= */
footer{
background:#0f172a;
color:#cbd5e1;
padding:50px 16px;
text-align:center
}
.social-links{
display:flex;
justify-content:center;
gap:16px;
margin-top:14px
}
.social-links a{
width:44px;
height:44px;
border-radius:50%;
background:#1f2933;
display:flex;
align-items:center;
justify-content:center
}
.social-links img{
width:22px;
filter:invert(1)
}

/* ================= WHATSAPP ================= */
.whatsapp-float{
position:fixed;
right:24px;
bottom:24px;
width:90px;
height:90px;
background:#25d366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.whatsapp-float img{width:44px}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
.hero{padding:80px 16px}
.hero h1{font-size:30px}
.section{margin:60px auto}
.logo{max-width:260px}
nav a{padding:10px 18px;font-size:14px}
}