/* ===== Shared tokens + base ===== */
:root{
  --blue:#005BBB;
  --text:#0b1324;
  --muted:#5b6780;
  --grey-bg:#f7f9fc;
  --card:#fff;
  --radius:18px;
  --shadow:0 8px 24px rgba(9,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background:#fff;
}

/* Layout + utilities */
.container{width:min(1100px,calc(100% - 32px));margin:0 auto}
section{padding:56px 0}
section h2{text-align:center;margin:0 0 18px}
.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
@media (max-width:820px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* ===== NAV (shared hamburger) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:10px 16px; background:#fff; border-bottom:1px solid #eef2f6;
}
.logo-round{height:36px;width:36px;border-radius:50%;object-fit:cover}

.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.menu a,
.nav a{font-weight:600;text-decoration:none;color:var(--text)}
.nav a:hover{color:var(--blue)}
.menu a.active,
.nav a.active{color:var(--blue);font-weight:700}

.menu-toggle{
  display:none;background:none;border:0;font-size:28px;line-height:1;
  padding:6px 8px;cursor:pointer;border-radius:10px
}
.menu-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Mobile dropdown */
@media (max-width:768px){
  .menu-toggle{display:block}
  .menu{
    position:absolute; left:0; right:0; top:56px;
    display:none; flex-direction:column; gap:12px;
    padding:12px 16px; background:#fff; border-top:1px solid #eef2f6;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
  }
  /* Closed by default; open only when toggled */
  .nav > #primary-menu.menu{ display:none !important; }
  .nav > #primary-menu.menu.open{ display:flex !important; }
}

/* ===== Buttons ===== */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:2px solid transparent;text-decoration:none;font-weight:700;transition:.15s ease-in-out;box-shadow:var(--shadow);cursor:pointer}
.btn.white{background:#fff;color:var(--blue);border-color:#fff}
.btn.white:hover{transform:translateY(-1px)}
.btn.blue{background:transparent;color:#fff;border-color:#fff}
.btn.blue:hover{background:#ffffff20;transform:translateY(-1px)}
.cta-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}

/* ===== Hero ===== */
header.hero{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:72px 0 64px;
  position:relative;
  overflow:hidden;
}
header.hero .container{position:relative;z-index:1}
header.hero .logo-round{height:80px;width:80px;margin-bottom:12px}
header.hero h1{margin:10px 0 8px;font-size:clamp(26px,3.4vw,40px);line-height:1.15}
header.hero p{margin:0 auto 16px;opacity:.95;max-width:820px}

/* Background overlays */
header.hero::before{
  content:"";
  position:absolute;inset:0;
  background:url("../images/hero-bg.jpg") center/cover no-repeat;
  opacity:.22; pointer-events:none;
}
header.hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,#00000033,#00000014 40%,transparent);
  pointer-events:none;
}

/* ===== Homepage polish ===== */

/* Section spacing balance */
section + section { border-top: 1px solid #f0f4f9 }
section > .container > p.lead {
  margin: 0 auto 18px;
  max-width: 820px;
  text-align: center;
  color: var(--muted);
}

/* Generic 3-up cards */
.features, .values, .benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 12px;
}
.feature, .value, .benefit {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.feature h3, .value h3, .benefit h3 { margin: 0 0 6px; font-size: 1.05rem }
.feature p, .value p, .benefit p { margin: 0; color: var(--muted) }
@media (max-width: 900px){ .features, .values, .benefits { grid-template-columns: 1fr } }

/* Two-column highlight rows */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; align-items: center;
}
.split .card { padding: 24px }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr } }

/* Testimonial cards */
.testimonials{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.testimonial{ background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); font-style: italic; }
.testimonial .who{ margin-top:8px; font-style: normal; color: var(--muted); }
@media (max-width: 900px){ .testimonials{ grid-template-columns:1fr } }

/* FAQ blocks */
.faq{ display:grid; grid-template-columns:1fr; gap:12px; }
.faq .q{ background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.faq .q h3{ margin:0 0 6px; font-size:1.05rem }
.faq .q p{ margin:0; color:var(--muted) }

/* Blue CTA band */
section.cta-band { background:var(--blue); color:#fff; text-align:center; padding: 72px 20px }
section.cta-band h2{ color:#fff; margin:0 0 16px }
section.cta-band .cta-row { margin-top: 8px }

/* Footer */
footer{padding:36px 0}
footer .container { text-align: center }
footer img.logo-round{display:block;margin:0 auto 10px}
footer p { margin: 0 0 6px }
footer p:last-child { margin:0 }
footer a { text-decoration: none; color: var(--text); font-weight: 600 }
footer a:hover { color: var(--blue) }

/* ===== Overview (Drivers / Employers boxes) ===== */
.overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.overview-box { padding: 28px; text-align: left; }
.overview-box h2 { margin-top: 0; margin-bottom: 12px; }
.overview-box p { margin: 0 0 14px; color: var(--muted); }
.overview-box ul { padding-left: 18px; margin: 0 0 18px; color: var(--text); }
.overview-box li { margin-bottom: 6px }
@media (max-width: 900px) { .overview-grid { grid-template-columns: 1fr; } }
section.alt { background: var(--grey-bg); }

/* How It Works cards */
.hiw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.hiw .card { display: block; text-align: center; padding: 40px 24px; transition: transform 0.2s, box-shadow 0.2s; text-decoration:none; color:inherit; }
.hiw .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.hiw .icon{ display:flex; align-items:center; justify-content:center; margin-bottom:12px; color: var(--blue); }
@media (max-width: 900px){ .hiw { grid-template-columns: 1fr; } }
.hiw h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; }
.hiw p { margin: 0; color: var(--muted); }

/* Overview buttons inside white cards */
.overview-box .btn.white{ background:#fff; color:var(--blue); border:2px solid var(--blue); }
.overview-box .btn.white:hover{ background:var(--blue); color:#fff; }
.overview-box .btn.blue{ background:#fff; color:var(--blue); border:2px solid var(--blue); }
.overview-box .btn.blue:hover{ background:var(--blue); color:#fff; }