:root{
  --bg:#0e0f12;
  --card:#12141a;
  --muted:#9aa3af;
  --text:#f3f4f6;
  --brand:#22c1dc;
  --brand-2:#16a34a;
  --danger:#ff5d5d;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(34,193,220,.12), transparent 60%),
    radial-gradient(1100px 700px at -10% 20%, rgba(22,163,74,.10), transparent 60%),
    var(--bg);
  line-height:1.6;
}
a{color:var(--brand)}
.container{width:min(1100px,92vw); margin-inline:auto}

/* Visually hidden (kept for accessibility/SEO) */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(180deg, rgba(18,20,26,.92), rgba(18,20,26,.6));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.3px}
.logo-badge{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow)
}
.logo-badge svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.cta{display:flex; gap:10px; align-items:center}

/* Buttons */
.btn{
  appearance:none; border:none; border-radius:14px; padding:12px 16px;
  font-weight:600; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#071018; box-shadow:0 10px 22px rgba(34,193,220,.25)
}
.btn-outline{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18)}

/* ---------- Hero (stacked image first) ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr;   /* stack */
  gap:16px;
  padding:40px 0 24px;
  align-items:stretch;
}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;     /* horizontal center */
  justify-content: center; /* vertical center */
  text-align: center;      /* center the text itself */
  gap: 0px;                /* remove flexbox gap */
}

.hero-copy p {
  margin: 4px 0;           /* tighten spacing between the lines */
}
.truck-card{position:relative; overflow:hidden; padding:0}
.truck-graphic{
  width:100%;
  min-height:310px; /* banner height */
  background:#0f1114 url('assets/fast-track-hero.png') center/cover no-repeat;
  border-radius:var(--radius);
}
.hero p{color:var(--muted); font-size:clamp(16px, 1.3vw, 18px)}

/* ---------- Sections / Cards ---------- */
section{padding:56px 0}
h2{font-size:clamp(22px, 3vw, 34px); margin:0 0 16px}
.grid{display:grid; gap:18px}
.cards{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow)
}
.card h3{margin:10px 0 6px; font-size:18px}
.muted{color:var(--muted)}

/* ---------- Portfolio media grid ---------- */
.media-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px}
.media-grid img{
  width:100%; height:240px; object-fit:cover;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow)
}

/* ---------- Contact / Form ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:22px}
form{display:grid; gap:12px}
label{font-weight:600; font-size:14px}
input, textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03); color:var(--text);
  outline:none; transition:border .15s ease, box-shadow .15s ease
}
input:focus, textarea:focus, select:focus{border-color:rgba(34,193,220,.6); box-shadow:0 0 0 3px rgba(34,193,220,.15)}
textarea{min-height:120px; resize:vertical}
.inline{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.policy{font-size:12px; color:var(--muted)}
.status{margin-top:6px; font-size:14px}
.status.success{color:var(--brand)}
.status.error{color:var(--danger)}

/* ---------- Footer ---------- */
footer{padding:28px 0 56px; color:var(--muted); font-size:14px}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .contact{grid-template-columns:1fr}
  .truck-graphic{min-height:260px}
}