:root{
  --bg:#02080e;
  --panel:#07131d;
  --panel2:#091925;
  --text:#f7f9fb;
  --muted:#a6b3bf;
  --line:#1d3344;
  --blue:#079cff;
  --blue2:#006fc7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:linear-gradient(180deg,#01070c 0%,#05111a 50%,#02070c 100%);
  font-family:Inter,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.nav{
  position:sticky;top:0;z-index:50;
  height:82px;padding:0 6vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(2,8,14,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:52px;height:52px;object-fit:cover;border-radius:50%}
.brand strong{font-family:Montserrat;font-size:25px;letter-spacing:3px}
.brand span{display:block;font-size:9px;letter-spacing:3px;color:#c8d1d9}
.navlinks{display:flex;gap:34px;font-size:13px;letter-spacing:1.4px}
.navlinks a:hover{color:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:18px}
.lang{background:none;border:none;color:#fff;cursor:pointer;font-size:13px;letter-spacing:1px}
.lang span{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:5px;font-weight:700;font-size:13px;letter-spacing:1px}
.btn-primary{background:linear-gradient(180deg,#0ca7ff,#0067bf);box-shadow:0 0 30px rgba(0,153,255,.18)}
.btn-outline{border:1px solid #73808a;background:rgba(0,0,0,.15)}

.hero{
  min-height:650px;
  display:grid;grid-template-columns:1fr 1.45fr 1fr;
  position:relative;overflow:hidden;border-bottom:1px solid #0f6fa8;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(0,144,255,.09),transparent 45%),
             linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.35),rgba(0,0,0,.25));
  pointer-events:none;z-index:1;
}
.hero-side{background-size:cover;background-position:center;filter:saturate(.9) contrast(1.08);position:relative}
.hero-side::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,14,.1),rgba(2,8,14,.72))}
.office{background-image:url('assets/office.jpg')}
.truck{background-image:url('assets/truck.jpg')}
.truck::after{background:linear-gradient(90deg,rgba(2,8,14,.72),rgba(2,8,14,.08))}
.hero-center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:45px 38px;
  background:linear-gradient(90deg,rgba(2,8,14,.82),rgba(4,13,21,.98),rgba(2,8,14,.82));
}
.hero-logo img{width:min(390px,65vw);max-height:275px;object-fit:contain;border-radius:24px}
.eyebrow{font-size:11px;letter-spacing:4px;color:#d6dfe6}.eyebrow b{color:var(--blue)}
h1,h2,h3{font-family:Montserrat,Inter,sans-serif}
h1{font-size:clamp(30px,4vw,58px);line-height:1.02;margin:18px 0 14px;letter-spacing:.5px}
h1 span,h2 span,h2 em{color:var(--blue);font-style:normal}
.lead{max-width:680px;color:var(--muted);font-size:17px;line-height:1.7}
.hero-buttons{display:flex;gap:16px;margin-top:22px;flex-wrap:wrap;justify-content:center}

.services{padding:70px 5vw 60px}
.section-heading{text-align:center;margin-bottom:34px}
.section-heading>span,.kicker{color:var(--blue);font-size:11px;letter-spacing:4px}
.section-heading h2{font-size:clamp(28px,3vw,44px);margin:8px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1450px;margin:auto}
.card{
  min-height:290px;padding:32px;border:1px solid #20394b;border-radius:8px;
  background:linear-gradient(180deg,rgba(10,27,40,.96),rgba(5,16,24,.96));
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.icon{font-size:36px;color:var(--blue);margin-bottom:18px}
.card h3{font-size:20px;margin:0 0 12px}
.card p{color:var(--muted);line-height:1.7}
.card a{display:inline-block;margin-top:18px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:1.5px}

.about{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
  padding:70px 7vw;border-top:1px solid #122939;border-bottom:1px solid #122939;
  background:linear-gradient(90deg,#06111a,#091925,#06111a);
}
.about h2,.contact h2{font-size:clamp(30px,4vw,54px);margin:12px 0}
.about p,.contact p{color:var(--muted);font-size:17px;line-height:1.8}

.feature-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:30px 6vw;background:#07131d;border-bottom:1px solid #172d3d;
}
.feature-strip div{padding:10px 28px;border-right:1px solid #294153}
.feature-strip div:last-child{border-right:none}
.feature-strip strong{display:block;font-size:12px;letter-spacing:1.3px}
.feature-strip span{display:block;margin-top:7px;color:var(--muted);font-size:12px}

.contact{
  padding:80px 7vw;display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center;
}
.contact-actions{display:grid;gap:16px}
.contact-btn{
  padding:20px 22px;border:1px solid #31516a;border-radius:6px;background:#081723;
  font-weight:700;font-size:18px;text-align:center
}
.contact-btn:hover{border-color:var(--blue);box-shadow:0 0 26px rgba(0,153,255,.12)}

footer{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;align-items:center;
  padding:35px 6vw;border-top:1px solid #193044;background:#02080e;color:#d8e0e7;
  font-size:11px;letter-spacing:2px;
}
footer div:nth-child(2){text-align:center}
footer div:nth-child(3){text-align:right}
footer small{color:#758595;letter-spacing:1px}

@media(max-width:980px){
  .navlinks{display:none}
  .nav{padding:0 20px}
  .brand span{display:none}
  .hero{grid-template-columns:1fr;min-height:760px}
  .hero-side{position:absolute;inset:0}
  .truck{display:none}
  .office{opacity:.22}
  .hero-center{min-height:760px;background:linear-gradient(rgba(2,8,14,.84),rgba(2,8,14,.96))}
  .cards{grid-template-columns:1fr}
  .about,.contact{grid-template-columns:1fr;gap:25px}
  .feature-strip{grid-template-columns:1fr 1fr}
  .feature-strip div{border-right:none;border-bottom:1px solid #294153}
  footer{grid-template-columns:1fr;text-align:center}
  footer div:nth-child(3){text-align:center}
}
@media(max-width:640px){
  .nav-actions .btn{display:none}
  .brand strong{font-size:21px}
  .hero{min-height:690px}
  .hero-center{min-height:690px;padding:30px 20px}
  .hero-logo img{width:250px}
  .eyebrow{font-size:9px;letter-spacing:2px}
  .lead{font-size:15px}
  .hero-buttons{width:100%}.hero-buttons .btn{width:100%}
  .services,.about,.contact{padding:55px 22px}
  .feature-strip{grid-template-columns:1fr;padding:20px}
  .feature-strip div{padding:18px 8px}
}