:root{
  --brand-blue:#0b63b7;
  --brand-orange:#f97316;
  --brand-dark:#0f1724;
  --muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; background:#f4f7fb; color:var(--brand-dark); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.container{max-width:1100px; margin:0 auto; padding:0 18px;}
.header{background:#fff; box-shadow:0 2px 10px rgba(15,23,42,0.06); position:relative; z-index:40;}
.header .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{display:flex; align-items:center; gap:12px;}
.logo .mark{width:56px; height:56px; border-radius:10px; background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
.nav{display:flex; gap:16px; align-items:center;}
.btn-primary{background:var(--brand-orange); color:#fff; padding:7px 16px; border-radius:8px; display:inline-block;}
.btn-accent{background:var(--brand-blue); color:#fff; padding:10px 14px; border-radius:8px; display:inline-block;}

/* Sticky tap-to-call on mobile */
.top-call{display:none; position:fixed; top:0; left:0; right:0; background:var(--brand-orange); color:#fff; padding:10px 14px; z-index:60; text-align:center; font-weight:700;}
.top-call a{color:#fff; font-weight:700;}

/* Hero */
.hero{background-image:url('images/hero-truck.jpg'); background-size:cover; background-position:center; color:#fff; position:relative; padding:100px 0 64px;}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,0.48), rgba(2,6,23,0.6));}
.hero .inner{position:relative; display:flex; gap:28px; align-items:center; z-index:2;}
.hero .left{flex:1;}
.hero h1{font-size:44px; line-height:1.03; margin:0; font-weight:800;}
.hero p{margin-top:12px; color:rgba(255,255,255,0.92); max-width:640px;}
.hero .actions{margin-top:18px; display:flex; gap:12px;}

/* reduced hero height on mobile */
@media(max-width:700px){
  .top-call{display:block;}
  .hero{padding:56px 0 28px; background-position: center 30%;}
  .hero h1{font-size:26px;}
  .hero p{font-size:14px;}
}

/* CTA bar */
.cta-bar{background:var(--brand-blue); color:#fff; padding:18px; border-radius:10px; margin:20px 0; display:flex; justify-content:space-between; align-items:center;}

/* Sections */
.section{padding:44px 0; background:transparent;}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}

/* Fleet */
.fleet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.card{background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 16px rgba(15,23,42,0.06);}

/* About */
.about { display:flex; gap:20px; align-items:center; }
.about .text{flex:1;}
.about .media{flex:1;}

/* Footer */
.footer{background:var(--brand-dark); color:#fff; padding:36px 0; margin-top:24px;}

/* Floating buttons */
.floating{position:fixed; right:36px; z-index:1000; display:flex; flex-direction:row; gap:12px; bottom:30px;}
.floating a{width:54px; height:54px; border-radius:999px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(2,6,23,0.18); text-decoration:none;}
.fab-call{background:var(--brand-orange); color:#fff;}
.fab-wa{background:#25D366; color:#fff;}

/* Responsive tweaks */
@media(max-width:900px){
  .hero .inner{flex-direction:column; text-align:center;}
  .fleet-grid{grid-template-columns:1fr;}
  .about{flex-direction:column;}
  .nav{display:none;}
  .hamburger{display:inline-flex;}
}
.hamburger{display:none; background:transparent; border:0; cursor:pointer;}
.mobile-nav{display:none; background:#fff; box-shadow:0 6px 20px rgba(2,6,23,0.08); position:absolute; right:18px; top:64px; border-radius:8px; overflow:hidden;}
.mobile-nav a{display:block; padding:12px 16px; border-bottom:1px solid #f1f5f9;}