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

:root{
--blue:#0D4AA6;
--deep-blue:#072E72;
--navy:#061D45;
--gold:#FDB813;
--orange:#FF8A1C;
--light:#F4F8FF;
--text:#172033;
}

body{
font-family:'Montserrat',sans-serif;
line-height:1.6;
color:var(--text);
background:#071f4d;
}

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

.header{
background:
linear-gradient(135deg,rgba(255,255,255,.96),rgba(242,247,255,.92));
padding:18px 0;
box-shadow:0 10px 40px rgba(7,46,114,.12);
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(14px);
border-bottom:6px solid var(--blue);
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:78px;
border-radius:0;
}

.nav-links{
display:flex;
list-style:none;
gap:34px;
}

.nav-links a{
text-decoration:none;
color:#0b3b87;
font-weight:700;
font-size:1rem;
}

.btn{
padding:16px 30px;
border-radius:14px;
text-decoration:none;
font-weight:800;
display:inline-block;
transition:.25s ease;
}

.btn:hover{
transform:translateY(-3px);
}

.btn-primary,
.btn-gold{
background:linear-gradient(135deg,var(--gold),#ff9f1c);
color:#073577;
box-shadow:0 14px 30px rgba(253,184,19,.35);
}

.btn-outline{
border:2px solid rgba(255,255,255,.9);
color:white;
background:rgba(255,255,255,.08);
}

.hero{
position:relative;
overflow:hidden;
color:white;
padding:150px 0;
min-height:620px;
display:flex;
align-items:center;
background:
linear-gradient(
90deg,
rgba(4,22,52,.88),
rgba(7,46,114,.58),
rgba(255,138,28,.18)
),
url("assets/images/road-hero.png");
background-size:cover;
background-position:center;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:64px 64px;
}

.hero-content{
position:relative;
z-index:2;
max-width:760px;
}

.hero-tag{
display:inline-block;
background:rgba(253,184,19,.18);
border:1px solid rgba(253,184,19,.45);
padding:10px 20px;
border-radius:50px;
margin-bottom:24px;
font-weight:800;
color:#fff;
}

.hero h1{
font-size:4.6rem;
line-height:1.05;
margin-bottom:22px;
letter-spacing:-2px;
}

.hero p{
font-size:1.25rem;
margin-bottom:38px;
color:#eef5ff;
max-width:680px;
}

.trust-bar{
background:
linear-gradient(135deg,#ffffff,#edf4ff);
padding:34px 0;
box-shadow:0 18px 40px rgba(7,46,114,.08);
}

.trust-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
font-weight:800;
gap:20px;
color:#172033;
}

.services{
position:relative;
overflow:hidden;
padding:110px 0;
background:
radial-gradient(circle at 15% 20%,rgba(253,184,19,.18),transparent 24%),
radial-gradient(circle at 85% 75%,rgba(255,138,28,.14),transparent 26%),
linear-gradient(135deg,#eef5ff,#dfeaff 45%,#f8fbff);
}

.services::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(13,74,166,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(13,74,166,.07) 1px,transparent 1px);
background-size:56px 56px;
opacity:.65;
}

.services::after{
content:"";
position:absolute;
width:600px;
height:600px;
right:-220px;
top:-220px;
border-radius:50%;
border:2px solid rgba(253,184,19,.22);
box-shadow:
0 0 0 70px rgba(253,184,19,.05),
0 0 0 140px rgba(13,74,166,.04);
}

.services .container{
position:relative;
z-index:2;
}

.card{
background:rgba(255,255,255,.78);
padding:38px;
border-radius:26px;
box-shadow:0 28px 70px rgba(7,46,114,.16);
border:1px solid rgba(255,255,255,.95);
backdrop-filter:blur(14px);
}
.about{
position:relative;
padding:110px 0;
background:
radial-gradient(circle at 15% 10%,rgba(255,138,28,.13),transparent 24%),
linear-gradient(135deg,#ffffff,#F3F7FD);
}

.section-title{
text-align:center;
margin-bottom:55px;
}

.section-title h2{
font-size:3rem;
color:#0B3D91;
margin-bottom:12px;
letter-spacing:-1px;
}

.section-title h2::after{
content:"";
display:block;
width:80px;
height:5px;
background:linear-gradient(90deg,var(--gold),var(--orange));
margin:18px auto 0;
border-radius:20px;
}

.section-title p{
color:#627086;
font-size:1.1rem;
}

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

.card{
background:rgba(255,255,255,.86);
padding:38px;
border-radius:24px;
box-shadow:0 22px 55px rgba(7,46,114,.13);
border:1px solid rgba(255,255,255,.9);
backdrop-filter:blur(10px);
transition:.25s ease;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 28px 70px rgba(7,46,114,.2);
}

.card h3{
color:#0B3D91;
margin-bottom:12px;
font-size:1.45rem;
}

.card p{
color:#384357;
}

.about-text{
max-width:850px;
margin:auto;
text-align:center;
font-size:1.15rem;
background:white;
padding:42px;
border-radius:24px;
box-shadow:0 20px 50px rgba(7,46,114,.1);
}

.cta{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at center,rgba(253,184,19,.34),transparent 30%),
radial-gradient(circle at bottom left,rgba(255,138,28,.22),transparent 28%),
linear-gradient(135deg,#061D45,#0B3D91);
color:white;
text-align:center;
padding:115px 0;
}

.cta::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:58px 58px;
}

.cta h2{
font-size:3rem;
margin-bottom:32px;
letter-spacing:-1px;
}

footer{
background:#041634;
color:white;
text-align:center;
padding:34px;
}

@media(max-width:768px){
.nav-links{
display:none;
}

.logo img{
height:62px;
}

.hero{
padding:95px 0;
}

.hero h1{
font-size:2.7rem;
}

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

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

.section-title h2,
.cta h2{
font-size:2.2rem;
}
}