/* ---------- Base ---------- */
:root{
  --bg:#0a0d12;
  --text:#e7eef7;
  --muted:#a8b3c7;
  --accent:#54b6ff;
  --card:#121822;
  --border:#1f2a3b;
}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
.container{ width:min(1100px, 92%); margin:0 auto; }
h1,h2,h3{ margin:0 0 .5rem 0; line-height:1.2 }
p{ color:var(--muted); line-height:1.7 }
img{ max-width:100%; display:block; border-radius:14px }
.section{ padding:64px 0 }
.section.alt{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.grid-2{ display:grid; gap:28px; grid-template-columns: repeat(1,1fr); }
@media(min-width:860px){ .grid-2{ grid-template-columns: 1.2fr 1fr; } }
.card{ background:var(--card); border:1px solid var(--border); padding:22px; border-radius:16px }
.card .wide{ border-radius:12px }
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; border:1px solid var(--border); text-decoration:none; color:var(--text); font-weight:600 }
.btn.primary{ background:var(--accent); color:#04131f; border-color:transparent }
.btn.ghost{ background:transparent }
.list{ padding-left:18px }
.facts{ list-style:none; padding-left:0; margin:0 }
.facts li{ padding:6px 0; border-bottom:1px dashed var(--border) }
.facts li:last-child{ border-bottom:none }
.badges{ list-style:none; padding:0; display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 0 0 }
.badges li{ background:var(--card); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:.9rem; color:var(--muted) }
.cards{ display:grid; grid-template-columns: repeat(1,1fr); gap:18px }
@media(min-width:860px){ .cards{ grid-template-columns: repeat(4,1fr); } }

/* ---------- Nav ---------- */
.nav{ position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:rgba(5,8,12,0.6); z-index:10; border-bottom:1px solid var(--border) }
.nav-inner{ display:flex; justify-content:space-between; align-items:center; padding:10px 0 }
.brand{ font-weight:800; letter-spacing:.5px }
.links a{ color:var(--text); text-decoration:none; margin:0 10px }
.theme-toggle{ margin-left:8px; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer }

/* ---------- Hero ---------- */
.hero{ padding:54px 0 20px 0; }
.hero-inner{ display:grid; gap:24px; grid-template-columns: 1fr; align-items:center }
@media(min-width:980px){ .hero-inner{ grid-template-columns: 1.15fr 1fr; } }
.hero h1{ font-size: clamp(32px, 6vw, 56px); font-weight:900 }
.accent{ color:var(--accent) }
.cta{ display:flex; gap:10px; margin-top:12px }

/* ---------- Footer ---------- */
.footer{ padding:30px 0; border-top:1px solid var(--border); margin-top:40px }
.footer-inner{ display:flex; justify-content:center; }

/* ---------- Forms ---------- */
form.contact{ display:grid; gap:10px; }
form.contact label{ display:grid; gap:6px; font-weight:600 }
form.contact input, form.contact textarea{
  background:#0e141d; border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:10px 12px; outline:none
}
.note{ color:var(--muted); margin-top:6px }

/* ---------- Theme Variants ---------- */
/* Bold Trucking: deep blues, metallic vibe */
body.bold-truck{
  --bg:#070b12; --text:#e9f1ff; --muted:#aab6c9; --accent:#4cc2ff; --card:#0e141d; --border:#172234;
}

/* Tech Logistics: darker base with neon accent and grid */
body.tech-logistics{
  --bg:#05060a; --text:#e9fffd; --muted:#a7d0cc; --accent:#27ffd2; --card:#081017; --border:#0f2a24;
  background-image:
    radial-gradient(transparent 0, transparent 2px, rgba(39,255,210,0.06) 3px),
    linear-gradient(transparent, transparent);
  background-size: 20px 20px, 100% 100%;
}