/* ================================================================
   BOBOK — COMPLETE RESPONSIVE DESIGN SYSTEM
   Breakpoints:
     xs  : < 480px   (small phones)
     sm  : 480–767px (large phones)
     md  : 768–991px (tablets)
     lg  : 992–1199px (small desktop)
     xl  : 1200px+   (desktop)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --logo-navy:     #192B53;
  --logo-navy-mid: #28519B;
  --logo-navy-lt:  #3371D5;
  --logo-gold:     #EFB31C;
  --logo-gold-dk:  #C9920A;
  --logo-gold-lt:  #F4DB9B;

  --c-navy:        #0F1C35;
  --c-navy-2:      #192B53;
  --c-navy-3:      #1E3566;
  --c-blue:        #28519B;
  --c-blue-hover:  #1E3D7A;
  --c-blue-lt:     #3371D5;
  --c-gold:        #EFB31C;
  --c-gold-dk:     #C9920A;

  --c-bg:          #F5F7FB;
  --c-surface:     #FFFFFF;
  --c-border:      rgba(25,43,83,0.08);
  --c-border-md:   rgba(25,43,83,0.14);
  --c-muted:       #5C6E8A;
  --c-dark:        #0F1C35;

  --sh-sm:  0 4px 18px rgba(25,43,83,0.08);
  --sh-md:  0 12px 36px rgba(25,43,83,0.11);
  --sh-lg:  0 28px 70px rgba(25,43,83,0.15);
  --sh-xl:  0 48px 100px rgba(25,43,83,0.18);
  --glow-blue: 0 8px 32px rgba(40,81,155,0.28);
  --glow-gold: 0 8px 28px rgba(239,179,28,0.35);

  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-2xl: 48px;
  --r-pill:999px;

  --ease: cubic-bezier(0.16,1,0.3,1);
  --dur:  0.38s;
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--f-body); background:var(--c-bg); color:var(--c-dark); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }
h1,h2,h3,h4,h5,h6 { font-family:var(--f-display); line-height:1.12; letter-spacing:-0.025em; color:var(--c-dark); }
p    { color:var(--c-muted); line-height:1.75; }

/* ── EYEBROW ─────────────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-body); font-size:11px; font-weight:700;
  letter-spacing:0.13em; text-transform:uppercase;
  padding:7px 16px; border-radius:var(--r-pill);
}
.eyebrow-navy  { color:var(--logo-navy);  background:rgba(25,43,83,0.07);  border:1px solid rgba(25,43,83,0.15); }
.eyebrow-blue  { color:var(--c-blue);     background:rgba(40,81,155,0.08); border:1px solid rgba(40,81,155,0.18); }
.eyebrow-gold  { color:var(--c-gold-dk);  background:rgba(239,179,28,0.10); border:1px solid rgba(239,179,28,0.28); }
.eyebrow-white { color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); }

.sec-heading { font-size:clamp(26px,4vw,48px); font-weight:800; color:var(--c-dark); }
.sec-heading .accent-blue { color:var(--c-blue); }
.sec-heading .accent-gold { color:var(--c-gold); }
.sec-heading .accent      { color:var(--c-blue); }
.sec-sub { font-size:16px; color:var(--c-muted); line-height:1.75; max-width:520px; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-prime {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--c-navy-2); color:#fff;
  font-family:var(--f-body); font-weight:700; font-size:15px;
  padding:14px 28px; border-radius:var(--r-pill); border:none; cursor:pointer;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn-prime:hover { background:var(--c-navy-3); transform:translateY(-2px); box-shadow:var(--glow-blue); color:#fff; }

.btn-gold {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--c-gold); color:var(--c-navy);
  font-family:var(--f-body); font-weight:800; font-size:15px;
  padding:14px 28px; border-radius:var(--r-pill); border:none; cursor:pointer;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn-gold:hover { background:var(--c-gold-dk); transform:translateY(-2px); box-shadow:var(--glow-gold); color:var(--c-navy); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:var(--c-dark);
  font-family:var(--f-body); font-weight:700; font-size:15px;
  padding:13px 28px; border-radius:var(--r-pill); border:1.5px solid var(--c-border-md); cursor:pointer;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn-ghost:hover { border-color:var(--c-blue); color:var(--c-blue); transform:translateY(-2px); }

.btn-white {
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:var(--c-navy-2);
  font-family:var(--f-body); font-weight:800; font-size:15px;
  padding:14px 28px; border-radius:var(--r-pill); border:none; cursor:pointer;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn-white:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,0.14); color:var(--c-navy-2); }

.btn-outline-white {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; color:rgba(255,255,255,0.85);
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:13px 28px; border-radius:var(--r-pill); border:1.5px solid rgba(255,255,255,0.22); cursor:pointer;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn-outline-white:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.4); color:#fff; transform:translateY(-2px); }

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes heroFadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes heroFadeLeft  { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
@keyframes underlineReveal { to{transform:scaleX(1)} }
@keyframes orbFloat      { from{transform:translate(0,0) scale(1)} to{transform:translate(20px,-30px) scale(1.08)} }
@keyframes livePulse     { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }
@keyframes floatBadge    { from{transform:translateY(0)} to{transform:translateY(-8px)} }

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity 0.75s var(--ease),transform 0.75s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-delay="1"] { transition-delay:0.12s; }
[data-reveal][data-delay="2"] { transition-delay:0.22s; }
[data-reveal][data-delay="3"] { transition-delay:0.32s; }


/* ================================================================
   NAVBAR
   ================================================================ */
.bb-nav {
  position:sticky; top:0; z-index:999;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--c-border);
  transition:box-shadow 0.3s;
  padding:0;
}
.bb-nav.nav-scrolled { box-shadow:0 4px 28px rgba(25,43,83,0.08); }

.bb-nav .navbar-brand {
  font-family:var(--f-display); font-size:22px; font-weight:800;
  color:var(--logo-navy); letter-spacing:-0.03em;
}
.bb-nav .navbar-brand em { font-style:normal; color:var(--c-blue); }

.bb-nav .nav-link {
  font-family:var(--f-body); font-size:16px; font-weight:700;
  color:var(--c-dark) !important; padding:8px 14px !important;
  border-radius:var(--r-sm); transition:color 0.25s,background 0.25s;
}
.bb-nav .nav-link:hover { color:var(--c-blue) !important; background:rgba(40,81,155,0.06); }

/* Mobile nav buttons stack */
.bb-nav-btns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Tablet: collapse menu properly */
@media (max-width:991px) {
  .bb-nav { padding:10px 0; }
  .bb-nav .navbar-collapse {
    background:#fff; border-radius:var(--r-md);
    box-shadow:var(--sh-md); padding:16px 20px;
    margin-top:10px; border:1px solid var(--c-border);
  }
  .bb-nav .navbar-nav { gap:2px !important; }
  .bb-nav .nav-link { padding:10px 12px !important; }
  .bb-nav-btns { padding-top:12px; border-top:1px solid var(--c-border); flex-wrap:wrap; }
  .bb-nav-btns .btn-ghost,
  .bb-nav-btns .btn-prime,
  .bb-nav-btns .btn-gold { width:100%; justify-content:center; }
}

@media (max-width:480px) {
  .bb-nav .navbar-brand { font-size:19px; }
}


/* ================================================================
   HERO SECTION
   ================================================================ */
.bb-hero {
  background:var(--logo-navy);
  padding:120px 0 90px;
  position:relative; overflow:hidden;
  min-height:90vh; display:flex; align-items:center;
}
.display-5{color:#fff;}
/* Animated orbs */
.bb-hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); opacity:0.5; animation:orbFloat 8s ease-in-out infinite alternate; }
.bb-hero-orb-1 { width:640px;height:640px; background:radial-gradient(circle,rgba(40,81,155,0.7) 0%,transparent 70%); top:-15%;right:-5%; }
.bb-hero-orb-2 { width:520px;height:520px; background:radial-gradient(circle,rgba(239,179,28,0.35) 0%,transparent 70%); bottom:-20%;left:-5%; animation-delay:-3s; }
.bb-hero-orb-3 { width:320px;height:320px; background:radial-gradient(circle,rgba(51,113,213,0.5) 0%,transparent 70%); top:40%;left:32%; animation-delay:-5s; }

.bb-hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);
  background-size:50px 50px; pointer-events:none;
}
.bb-hero .container { position:relative; z-index:2; width:100%; }

/* Hero heading */
.bb-hero-eyebrow { animation:heroFadeUp 0.7s 0.1s var(--ease) both; }

.bb-hero h1 {
  font-size:clamp(34px,5.5vw,68px);
  font-weight:800; color:#fff;
  line-height:1.08; letter-spacing:-0.03em;
  animation:heroFadeUp 0.7s 0.2s var(--ease) both;
}
.bb-hero h1 .word-gold {
  color:var(--logo-gold); position:relative; display:inline-block;
}
.bb-hero h1 .word-gold::after {
  content:''; position:absolute; bottom:3px; left:0;
  width:100%; height:3px;
  background:linear-gradient(90deg,var(--logo-gold),var(--logo-gold-lt));
  border-radius:3px; transform:scaleX(0); transform-origin:left;
  animation:underlineReveal 0.6s 0.85s var(--ease) forwards;
}
.bb-hero h1 .word-blue { color:var(--logo-navy-lt); }

.bb-hero-desc {
  font-size:17px; color:rgba(255,255,255,0.62);
  max-width:460px; line-height:1.75;
  animation:heroFadeUp 0.7s 0.3s var(--ease) both;
}
.bb-hero-actions { animation:heroFadeUp 0.7s 0.4s var(--ease) both; }

/* Trust pills */
.bb-trust-row { display:flex; flex-wrap:wrap; gap:10px; animation:heroFadeUp 0.7s 0.55s var(--ease) both; }
.bb-trust-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,0.68);
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
  padding:7px 14px; border-radius:var(--r-pill); backdrop-filter:blur(6px);
}
.bb-trust-pill i { color:var(--logo-gold); font-size:11px; }

/* Hero panel (dashboard card) */
.bb-hero-panel {
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r-2xl); padding:28px;
  backdrop-filter:blur(18px);
  animation:heroFadeLeft 0.9s 0.35s var(--ease) both;
  position:relative; overflow:hidden;
}
.bb-hero-panel::before {
  content:''; position:absolute; top:0;left:0;right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,179,28,0.4),transparent);
}

.bb-panel-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:8px; }
.bb-panel-title  { font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.38); }

.bb-live-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#4ADE80; background:rgba(74,222,128,0.12); border:1px solid rgba(74,222,128,0.25); padding:5px 12px; border-radius:var(--r-pill); }
.bb-live-dot   { width:7px;height:7px; border-radius:50%; background:#4ADE80; animation:livePulse 1.4s ease-in-out infinite; display:inline-block; flex-shrink:0; }

.bb-panel-row {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.055);
  margin-bottom:10px; transition:all var(--dur) var(--ease); cursor:default;
}
.bb-panel-row:last-child { margin-bottom:0; }
.bb-panel-row:hover { background:rgba(255,255,255,0.09); border-color:rgba(239,179,28,0.25); transform:translateX(4px); }

.bb-panel-icon { width:44px;height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.icon-gold   { background:rgba(239,179,28,0.16); color:var(--logo-gold); }
.icon-blue   { background:rgba(40,81,155,0.20);  color:#7AABF5; }
.icon-green  { background:rgba(74,222,128,0.14); color:#4ADE80; }
.icon-purple { background:rgba(139,92,246,0.14); color:#A78BFA; }

.bb-panel-text strong { display:block; font-family:var(--f-body); font-weight:700; font-size:13.5px; color:rgba(255,255,255,0.92); }
.bb-panel-text span   { font-size:12px; color:rgba(255,255,255,0.42); }

/* ── Hero responsive ── */
@media (max-width:991px) {
  .bb-hero { padding:100px 0 70px; min-height:auto; }
  .bb-hero h1 { font-size:clamp(30px,5vw,52px); }
  .bb-hero-desc { font-size:16px; max-width:100%; }
  .bb-hero-panel { margin-top:8px; }
}

@media (max-width:767px) {
  .bb-hero { padding:90px 0 60px; }
  .bb-hero h1 { font-size:clamp(28px,7vw,42px); }
  .bb-hero-desc { font-size:15px; }
  .bb-hero-actions { flex-direction:column; align-items:center; }
  .bb-hero-actions .btn-prime,
  .bb-hero-actions .btn-outline-white { width:100%; justify-content:center; }
  .bb-trust-row { justify-content:center; }
  .bb-hero-panel { padding:20px; border-radius:var(--r-xl); }
  .bb-panel-row { padding:12px 14px; gap:12px; }
  .bb-panel-icon { width:38px;height:38px; font-size:16px; }
}

@media (max-width:480px) {
  .bb-hero { padding:80px 0 50px; }
  .bb-hero h1 { font-size:28px; }
  .bb-hero-desc { font-size:14px; }
  .bb-trust-pill { font-size:11px; padding:6px 11px; }
  .bb-hero-panel { padding:16px; border-radius:var(--r-lg); }
  .bb-panel-text strong { font-size:13px; }
  .bb-panel-text span   { font-size:11px; }
}


/* ================================================================
   STATS STRIP
   ================================================================ */
.bb-stats {
  background:#fff;
  border-top:3px solid var(--logo-gold);
  border-bottom:1px solid var(--c-border);
  padding:48px 0;
}
.bb-stat { text-align:center; padding:20px 16px; border-right:1px solid var(--c-border); }
.bb-stat:last-child { border-right:none; }

.bb-stat-num { font-family:var(--f-display); font-size:clamp(32px,4.5vw,52px); font-weight:800; color:var(--logo-navy); line-height:1; letter-spacing:-0.04em; }
.bb-stat-num .s-accent { color:var(--logo-gold); }
.bb-stat-num sub,.bb-stat-num sup { color:var(--logo-gold); font-weight:800; }
.bb-stat-label { font-size:12px; font-weight:600; color:var(--c-muted); margin-top:8px; text-transform:uppercase; letter-spacing:0.08em; }

/* Stats responsive */
@media (max-width:991px) {
  .bb-stats { padding:36px 0; }
  .bb-stat { border-right:none; border-bottom:1px solid var(--c-border); padding:18px 16px; }
  .bb-stat:last-child { border-bottom:none; }
}

@media (max-width:767px) {
  .bb-stats { padding:28px 0; }
  .bb-stat-num { font-size:36px; }
  .bb-stat-label { font-size:11px; }
}

@media (max-width:480px) {
  /* 2 per row on small phones */
  .bb-stat { padding:14px 10px; }
  .bb-stat-num { font-size:30px; }
}


/* ================================================================
   FEATURE SECTIONS (Parents / Schools / Drivers)
   ================================================================ */
.bb-feature { padding:100px 0; }

/* Checklist */
.bb-checklist { list-style:none; padding:0; margin:24px 0 0; }
.bb-checklist li {
  display:flex; align-items:flex-start; gap:13px;
  padding:12px 0; border-bottom:1px solid var(--c-border);
  font-size:14.5px; color:var(--c-dark); font-weight:500;
}
.bb-checklist li:last-child { border-bottom:none; }
.chk-icon {
  width:26px;height:26px; border-radius:50%;
  background:rgba(25,43,83,0.07); border:1.5px solid rgba(25,43,83,0.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--logo-navy); font-size:12px; flex-shrink:0; margin-top:1px;
}

/* Feature image wrapper */
.bb-feature-img-wrap { position:relative; }
.bb-feature-img-wrap img { border-radius:var(--r-xl); box-shadow:var(--sh-xl); width:100%; transition:transform 0.5s var(--ease); }
.bb-feature-img-wrap:hover img { transform:scale(1.02); }

/* Floating badge on images */
.bb-img-badge {
  position:absolute; bottom:-16px; left:-16px;
  background:var(--c-surface); border-radius:var(--r-lg); padding:13px 18px;
  box-shadow:var(--sh-md); border:1px solid var(--c-border); border-left:3px solid var(--logo-gold);
  display:flex; align-items:center; gap:12px;
  animation:floatBadge 3.5s ease-in-out infinite alternate;
  min-width:180px;
}
.bb-img-badge-icon { width:36px;height:36px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.bb-img-badge strong { font-size:13px; display:block; font-weight:700; color:var(--c-dark); white-space:nowrap; }
.bb-img-badge span   { font-size:11.5px; color:var(--c-muted); white-space:nowrap; }

/* Feature section responsive */
@media (max-width:991px) {
  .bb-feature { padding:72px 0; }
  .sec-sub { max-width:100%; }
  /* Image comes after text on tablet/mobile */
  .bb-feature .row.flex-lg-row-reverse > [class*="col-"]:first-child { order:1; }
  .bb-feature .row.flex-lg-row-reverse > [class*="col-"]:last-child  { order:0; }
}

@media (max-width:767px) {
  .bb-feature { padding:56px 0; }
  .bb-feature-img-wrap { margin-top:8px; }
  .bb-feature-img-wrap img { border-radius:var(--r-lg); }
  .bb-img-badge { display:none; } /* hide on small screens — too cramped */
  .bb-checklist li { font-size:14px; }
  .btn-prime { width:100%; justify-content:center; margin-top:24px !important; }
}

@media (max-width:480px) {
  .bb-feature { padding:44px 0; }
  .sec-heading { font-size:26px; }
  .sec-sub { font-size:14.5px; }
  .bb-checklist li { font-size:13.5px; gap:10px; }
}


/* ================================================================
   HOW IT WORKS
   ================================================================ */
.bb-hiw {
  padding:100px 0;
  background:var(--logo-navy);
  position:relative; overflow:hidden;
}
.bb-hiw::before {
  content:''; position:absolute; top:50%;left:50%; transform:translate(-50%,-50%);
  width:700px;height:700px; border-radius:50%;
  background:radial-gradient(circle,rgba(239,179,28,0.06) 0%,rgba(40,81,155,0.08) 40%,transparent 70%);
  pointer-events:none;
}

.bb-step-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.055);
  border-radius:var(--r-xl); overflow:hidden;
  margin-top:56px;
}

.bb-step-cell {
  background:rgba(255,255,255,0.03);
  padding:32px 26px;
  transition:all var(--dur) var(--ease);
  position:relative;
}
.bb-step-cell:hover { background:rgba(255,255,255,0.07); }

.bb-step-num { font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--logo-gold); margin-bottom:18px; }
.bb-step-icon {
  width:48px;height:48px; border-radius:var(--r-md);
  background:rgba(40,81,155,0.20); border:1px solid rgba(40,81,155,0.30);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#7AABF5; margin-bottom:18px;
}
.bb-step-cell h5 { font-family:var(--f-display); font-size:16px; font-weight:700; color:#fff; margin-bottom:8px; }
.bb-step-cell p  { font-size:13px; color:rgba(255,255,255,0.42); line-height:1.65; margin:0; }

/* How it works responsive */
@media (max-width:1199px) {
  .bb-step-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:991px) {
  .bb-hiw { padding:72px 0; }
  .bb-step-grid { margin-top:40px; }
  .bb-step-cell { padding:28px 22px; }
}

@media (max-width:767px) {
  .bb-hiw { padding:56px 0; }
  .bb-step-grid { grid-template-columns:1fr; margin-top:32px; border-radius:var(--r-lg); }
  .bb-step-cell { padding:24px 20px; }
  /* Horizontal layout for each step on phone */
  .bb-step-cell { display:flex; flex-direction:column; }
  .bb-step-num { margin-bottom:12px; }
}

@media (max-width:480px) {
  .bb-hiw { padding:44px 0; }
  .bb-step-cell { padding:20px 18px; }
  .bb-step-icon { width:42px;height:42px; font-size:18px; }
  .bb-step-cell h5 { font-size:15px; }
}


/* ================================================================
   SAFETY SECTION
   ================================================================ */
.bb-safety {
  padding:100px 0;
  background:linear-gradient(145deg,#0A1628,#0E1E3A,#081220);
  position:relative; overflow:hidden;
}
.bb-safety::before { content:''; position:absolute; top:-30%;right:-15%; width:700px;height:700px; border-radius:50%; background:radial-gradient(circle,rgba(40,81,155,0.14) 0%,transparent 65%); pointer-events:none; }
.bb-safety::after  { content:''; position:absolute; bottom:-20%;left:-10%; width:500px;height:500px; border-radius:50%; background:radial-gradient(circle,rgba(239,179,28,0.09) 0%,transparent 65%); pointer-events:none; }
.bb-safety .container { position:relative; z-index:2; }

.bb-safety-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:36px; }

.bb-safety-card {
  background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--r-lg); padding:26px;
  position:relative; overflow:hidden; transition:all var(--dur) var(--ease);
}
.bb-safety-card::before { content:''; position:absolute; top:0;left:0;right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(239,179,28,0.5),transparent); opacity:0; transition:opacity var(--dur); }
.bb-safety-card:hover { background:rgba(255,255,255,0.065); border-color:rgba(239,179,28,0.22); transform:translateY(-4px); }
.bb-safety-card:hover::before { opacity:1; }

.bb-safety-card-icon { width:48px;height:48px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.bb-safety-card h5 { color:#fff; font-size:15px; font-weight:700; margin-bottom:7px; font-family:var(--f-display); }
.bb-safety-card p  { color:rgba(255,255,255,0.44); font-size:13px; line-height:1.65; margin:0; }

/* Safety responsive */
@media (max-width:991px) {
  .bb-safety { padding:72px 0; }
  .bb-safety-grid { grid-template-columns:repeat(2,1fr); }
  /* Text column center on tablet */
  .bb-safety .col-lg-5 { text-align:center; }
  .bb-safety .col-lg-5 .d-flex { justify-content:center; }
}

@media (max-width:767px) {
  .bb-safety { padding:56px 0; }
  .bb-safety-grid { grid-template-columns:1fr; gap:12px; }
  .bb-safety-card { padding:20px; }
  .bb-safety .col-lg-5 { text-align:center; margin-bottom:8px; }
  .bb-safety .col-lg-5 .d-flex { justify-content:center; flex-direction:column; align-items:center; }
  .bb-safety .col-lg-5 .btn-white,
  .bb-safety .col-lg-5 .btn-outline-white { width:100%; justify-content:center; }
}

@media (max-width:480px) {
  .bb-safety { padding:44px 0; }
  .bb-safety-card { padding:18px; }
  .bb-safety-card-icon { width:42px;height:42px; font-size:18px; }
  .bb-safety-card h5 { font-size:14px; }
}


/* ================================================================
   TESTIMONIALS
   ================================================================ */
.bb-testi-section { padding:100px 0; background:#fff; }

.bb-testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }

.bb-testi-card {
  background:var(--c-surface); border-radius:var(--r-lg); padding:30px;
  border:1px solid var(--c-border); box-shadow:var(--sh-sm);
  position:relative; transition:all var(--dur) var(--ease); overflow:hidden;
}
.bb-testi-card::before { content:''; position:absolute; left:0;top:0;bottom:0; width:3px; background:var(--logo-gold); transform:scaleY(0); transform-origin:bottom; transition:transform var(--dur) var(--ease); border-radius:3px; }
.bb-testi-card::after  { content:'"'; position:absolute; bottom:-20px;right:16px; font-family:Georgia,serif; font-size:140px; line-height:1; color:rgba(25,43,83,0.05); pointer-events:none; }
.bb-testi-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:rgba(239,179,28,0.2); }
.bb-testi-card:hover::before { transform:scaleY(1); }

.bb-testi-stars { display:flex; gap:3px; margin-bottom:16px; }
.bb-testi-stars i { color:var(--logo-gold); font-size:14px; }
.bb-testi-card p  { font-size:14.5px; color:var(--c-dark); line-height:1.75; margin-bottom:20px; position:relative; z-index:1; }

.bb-testi-author { display:flex; align-items:center; gap:11px; }
.bb-avatar { width:42px;height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800; font-size:15px; flex-shrink:0; }
.av-navy  { background:rgba(25,43,83,0.12);  color:var(--logo-navy); }
.av-gold  { background:rgba(239,179,28,0.15); color:var(--c-gold-dk); }
.av-blue  { background:rgba(40,81,155,0.12);  color:var(--c-blue); }
.bb-testi-author strong { display:block; font-size:13.5px; color:var(--c-dark); font-weight:700; }
.bb-testi-author span   { font-size:12px; color:var(--c-muted); }

/* Testimonials responsive */
@media (max-width:1199px) {
  .bb-testi-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:991px) {
  .bb-testi-section { padding:72px 0; }
  .bb-testi-grid { margin-top:36px; }
}

@media (max-width:767px) {
  .bb-testi-section { padding:56px 0; }
  .bb-testi-grid { grid-template-columns:1fr; gap:16px; margin-top:28px; }
  .bb-testi-card { padding:24px; }
  .bb-testi-card p { font-size:14px; }
}

@media (max-width:480px) {
  .bb-testi-section { padding:44px 0; }
  .bb-testi-card { padding:20px; }
  .bb-testi-card::after { font-size:100px; }
}


/* ================================================================
   CTA SECTION
   ================================================================ */
.bb-cta {
  background:linear-gradient(135deg,var(--logo-navy) 0%,var(--c-navy-3) 60%,#1E3566 100%);
  padding:100px 0; text-align:center; position:relative; overflow:hidden;
}
.bb-cta::before { content:''; position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px); background-size:42px 42px; }
.bb-cta::after  { content:''; position:absolute; top:-40%;left:50%;transform:translateX(-50%); width:600px;height:600px; border-radius:50%; background:radial-gradient(circle,rgba(239,179,28,0.10) 0%,transparent 60%); pointer-events:none; }
.bb-cta .container { position:relative; z-index:2; }
.bb-cta h2 { font-size:clamp(26px,4.5vw,50px); font-weight:800; color:#fff; letter-spacing:-0.03em; }
.bb-cta p  { color:rgba(255,255,255,0.68); font-size:17px; }

/* CTA responsive */
@media (max-width:991px) {
  .bb-cta { padding:72px 0; }
  .bb-cta p { font-size:16px; }
}

@media (max-width:767px) {
  .bb-cta { padding:60px 0; }
  .bb-cta h2 { font-size:26px; }
  .bb-cta p { font-size:15px; }
  .bb-cta .d-flex { flex-direction:column; align-items:center; }
  .bb-cta .btn-gold,
  .bb-cta .btn-white,
  .bb-cta .btn-outline-white { width:100%; max-width:320px; justify-content:center; }
}

@media (max-width:480px) {
  .bb-cta { padding:48px 0; }
  .bb-cta h2 { font-size:23px; }
}


/* ================================================================
   FOOTER
   ================================================================ */
.bb-footer {
  background:var(--logo-navy);
  padding:72px 0 0; position:relative; overflow:hidden;
}
.bb-footer::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,var(--logo-gold),var(--logo-gold-lt),var(--logo-gold)); }
.bb-footer::after  { content:''; position:absolute; bottom:-20%;right:-10%; width:500px;height:500px; border-radius:50%; background:radial-gradient(circle,rgba(239,179,28,0.06) 0%,transparent 65%); pointer-events:none; }
.bb-footer .container { position:relative; z-index:2; }

.bb-footer-brand { font-family:var(--f-display); font-size:22px; font-weight:800; color:#fff; letter-spacing:-0.03em; margin-bottom:12px; }
.bb-footer-brand em { font-style:normal; color:var(--logo-gold); }
.bb-footer-desc { font-size:13.5px; color:rgba(255,255,255,0.44); line-height:1.8; max-width:240px; }

.bb-footer-title { color:var(--logo-gold); font-family:var(--f-display); font-weight:700; font-size:12px; margin-bottom:18px; letter-spacing:0.07em; text-transform:uppercase; }
.bb-footer-links { list-style:none; padding:0; margin:0; }
.bb-footer-links li { margin-bottom:10px; }
.bb-footer-links a { color:rgba(255,255,255,0.45); font-size:13.5px; transition:color 0.25s; }
.bb-footer-links a:hover { color:rgba(255,255,255,0.9); }

.bb-footer-social { display:flex; gap:9px; margin-top:22px; flex-wrap:wrap; }
.bb-footer-social a { width:36px;height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,0.6); font-size:14px; transition:all 0.3s var(--ease); }
.bb-footer-social a:hover { background:var(--logo-gold); border-color:var(--logo-gold); color:var(--logo-navy); transform:translateY(-3px); }

.bb-footer-bottom {
  border-top:1px solid rgba(255,255,255,0.07); margin-top:56px; padding:20px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bb-footer-bottom span { font-size:12.5px; color:rgba(255,255,255,0.32); }
.bb-footer-bottom a { color:rgba(255,255,255,0.55); font-size:12.5px; transition:color 0.25s; }
.bb-footer-bottom a:hover { color:var(--logo-gold); }
.bb-footer-bottom-links { display:flex; gap:20px; flex-wrap:wrap; }

/* Footer responsive */
@media (max-width:991px) {
  .bb-footer { padding:56px 0 0; }
  .bb-footer-desc { max-width:100%; }
}

@media (max-width:767px) {
  .bb-footer { padding:48px 0 0; }
  .bb-footer-brand { font-size:20px; }
  .bb-footer-bottom { flex-direction:column; text-align:center; gap:8px; }
  .bb-footer-bottom-links { justify-content:center; }
  .bb-footer-social { justify-content:flex-start; }
}

@media (max-width:480px) {
  .bb-footer { padding:40px 0 0; }
  .bb-footer-title { margin-top:8px; }
  .bb-footer-social { justify-content:flex-start; }
}


/* ================================================================
   DEMO MODAL
   ================================================================ */
.bb-modal .modal-content { border:none; border-radius:var(--r-xl); overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,0.22); }
.bb-modal-hd {
  background:var(--logo-navy);
  padding:28px 32px 24px; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.bb-modal-hd::before { content:''; position:absolute;top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,var(--logo-gold),var(--logo-gold-lt),var(--logo-gold)); }
.bb-modal-hd::after  { content:''; position:absolute;top:-60%;right:-15%; width:260px;height:260px; border-radius:50%; background:radial-gradient(circle,rgba(40,81,155,0.4),transparent 70%); }
.bb-modal-hd h5 { color:#fff; font-family:var(--f-display); font-size:20px; font-weight:800; }
.bb-modal-hd p  { color:rgba(255,255,255,0.52); font-size:13.5px; margin:4px 0 0; }

.bb-modal .modal-body { padding:28px 32px; }

.bb-label { font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--c-dark); margin-bottom:8px; display:block; }
.bb-input { width:100%; background:var(--c-bg); border:1.5px solid var(--c-border-md); border-radius:var(--r-md); padding:12px 15px; font-family:var(--f-body); font-size:14.5px; color:var(--c-dark); transition:all 0.25s; outline:none; }
.bb-input:focus { border-color:var(--logo-navy); background:#fff; box-shadow:0 0 0 4px rgba(25,43,83,0.09); }

.bb-radio  { display:none; }
.bb-option { border:1.5px solid var(--c-border-md); border-radius:var(--r-lg); padding:18px 12px; text-align:center; cursor:pointer; transition:all 0.3s var(--ease); background:var(--c-bg); height:100%; }
.bb-option:hover { border-color:var(--logo-navy); background:rgba(25,43,83,0.04); transform:translateY(-3px); }
.bb-radio:checked + .bb-option { border-color:var(--logo-gold); background:rgba(239,179,28,0.06); box-shadow:0 8px 24px rgba(239,179,28,0.15); transform:translateY(-3px); }
.bb-option i { font-size:24px; color:var(--logo-navy); display:block; margin-bottom:7px; }
.bb-option strong { display:block; font-size:13.5px; color:var(--c-dark); font-weight:700; }
.bb-option small  { font-size:11.5px; color:var(--c-muted); }

/* Modal responsive */
@media (max-width:767px) {
  .bb-modal-hd { padding:22px 20px 18px; }
  .bb-modal-hd h5 { font-size:18px; }
  .bb-modal .modal-body { padding:20px; }
  .bb-option { padding:14px 10px; }
  .bb-option i { font-size:20px; }
  .bb-option strong { font-size:12.5px; }
}

@media (max-width:480px) {
  .bb-modal-hd { padding:18px 16px; }
  .bb-modal .modal-body { padding:16px; }
  /* Role options become one column */
  .bb-modal .col-4 { width:100%; flex:0 0 100%; max-width:100%; }
  .bb-option { display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; }
  .bb-option i { font-size:20px; margin:0; }
}

/* ================================================================
   GENERAL UTILITY — section padding override at small screens
   ================================================================ */
.section { padding:100px 0; }

@media (max-width:991px) { .section { padding:72px 0; } }
@media (max-width:767px) { .section { padding:56px 0; } }
@media (max-width:480px) { .section { padding:44px 0; } }
/* ================================================================
   DRIVERS PAGE — ADDITIONAL CSS
   Append karo custom.css ke end mein
   ================================================================ */

/* ── DRIVER HERO ─────────────────────────────────────────────── */
.drv-hero {
  background: var(--logo-navy);
  padding: 120px 0 90px;
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}

/* Orbs */
.drv-hero::before {
  content: '';
  position: absolute; top: -20%; right: -5%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(40,81,155,0.55) 0%, transparent 70%);
  pointer-events: none; filter: blur(70px);
  animation: orbFloat 9s ease-in-out infinite alternate;
}
.drv-hero::after {
  content: '';
  position: absolute; bottom: -15%; left: -5%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,179,28,0.28) 0%, transparent 70%);
  pointer-events: none; filter: blur(70px);
  animation: orbFloat 7s ease-in-out infinite alternate-reverse;
}

/* Grid texture */
.drv-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.drv-hero .container { position: relative; z-index: 2; }

.drv-hero h1 {
  font-size: clamp(34px, 5.5vw, 66px);
  font-weight: 800; color: #fff;
  line-height: 1.08; letter-spacing: -0.03em;
  animation: heroFadeUp 0.7s 0.15s var(--ease) both;
}

.drv-hero h1 .word-gold {
  color: var(--logo-gold);
  position: relative; display: inline-block;
}
.drv-hero h1 .word-gold::after {
  content: ''; position: absolute; bottom: 2px; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--logo-gold), var(--logo-gold-lt));
  border-radius: 3px;
  transform: scaleX(0); transform-origin: left;
  animation: underlineReveal 0.6s 0.9s var(--ease) forwards;
}

.drv-hero-desc {
  font-size: 17px; color: rgba(255,255,255,0.62);
  max-width: 460px; line-height: 1.75;
  animation: heroFadeUp 0.7s 0.28s var(--ease) both;
}

.drv-hero-actions { animation: heroFadeUp 0.7s 0.4s var(--ease) both; }

/* Hero image wrapper */
.drv-hero-img {
  position: relative;
  animation: heroFadeLeft 0.9s 0.3s var(--ease) both;
}
.drv-hero-img img {
  border-radius: var(--r-xl);
  box-shadow: 0 40px 80px rgba(7,17,29,0.4);
  width: 100%;
}

/* Floating status card on hero image */
.drv-status-card {
  position: absolute;
  bottom: -18px; left: -18px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 14px 20px;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--logo-gold);
  display: flex; align-items: center; gap: 12px;
  animation: floatBadge 3.5s ease-in-out infinite alternate;
  z-index: 3;
}
.drv-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22C55E; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
  animation: livePulse 1.4s ease-in-out infinite;
}
.drv-status-card strong { display: block; font-size: 13px; font-weight: 700; color: var(--c-dark); }
.drv-status-card span   { font-size: 11.5px; color: var(--c-muted); }

/* Trust pills — same as home */
.drv-trust-row { display: flex; flex-wrap: wrap; gap: 10px; animation: heroFadeUp 0.7s 0.5s var(--ease) both; }
.drv-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.68);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  padding: 7px 14px; border-radius: var(--r-pill); backdrop-filter: blur(6px);
}
.drv-trust-pill i { color: var(--logo-gold); font-size: 11px; }


/* ── FEATURES STRIP (3 quick icons) ─────────────────────────── */
.drv-strip {
  background: #fff;
  border-top: 3px solid var(--logo-gold);
  border-bottom: 1px solid var(--c-border);
  padding: 40px 0;
}

.drv-strip-item {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  border-right: 1px solid var(--c-border);
}
.drv-strip-item:last-child { border-right: none; }

.drv-strip-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.drv-strip-text strong { display: block; font-size: 15px; font-weight: 700; color: var(--c-dark); }
.drv-strip-text span   { font-size: 13px; color: var(--c-muted); }


/* ── FEATURE DETAIL SECTIONS (alternating) ───────────────────── */
/* Reuses .bb-feature, .bb-checklist, .chk-icon from custom.css  */
/* Only page-specific overrides below                             */

.drv-img-wrap { position: relative; }
.drv-img-wrap img {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  width: 100%;
  transition: transform 0.5s var(--ease);
}
.drv-img-wrap:hover img { transform: scale(1.02); }

.drv-img-badge {
  position: absolute; bottom: -16px; left: -16px;
  background: #fff; border-radius: var(--r-lg);
  padding: 13px 18px; box-shadow: var(--sh-md);
  border: 1px solid var(--c-border); border-left: 3px solid var(--logo-gold);
  display: flex; align-items: center; gap: 12px;
  animation: floatBadge 3.5s ease-in-out infinite alternate;
}
.drv-img-badge-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.drv-img-badge strong { font-size: 13px; display: block; font-weight: 700; color: var(--c-dark); white-space: nowrap; }
.drv-img-badge span   { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }


/* ── APP PREVIEW SECTION ─────────────────────────────────────── */
.drv-app {
  background: var(--logo-navy);
  padding: 100px 0;
  position: relative; overflow: hidden;
}
.drv-app::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,179,28,0.06) 0%, rgba(40,81,155,0.09) 40%, transparent 70%);
  pointer-events: none;
}
.drv-app .container { position: relative; z-index: 2; }

/* App step cards grid */
.drv-app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 56px;
}

.drv-app-cell {
  background: rgba(255,255,255,0.03);
  padding: 32px 26px;
  transition: all var(--dur) var(--ease);
}
.drv-app-cell:hover { background: rgba(255,255,255,0.07); }

.drv-app-num {
  font-family: var(--f-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--logo-gold); margin-bottom: 18px;
}
.drv-app-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: rgba(40,81,155,0.20); border: 1px solid rgba(40,81,155,0.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #7AABF5; margin-bottom: 18px;
}
.drv-app-cell h5 { font-family: var(--f-display); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.drv-app-cell p  { font-size: 13px; color: rgba(255,255,255,0.42); line-height: 1.65; margin: 0; }


/* ── SAFETY HIGHLIGHT CARDS ──────────────────────────────────── */
.drv-safety-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.drv-safety-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px;
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
  transition: all var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
/* Gold bottom bar on hover */
.drv-safety-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--logo-gold), var(--logo-gold-lt));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.drv-safety-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(239,179,28,0.18); }
.drv-safety-card:hover::after { transform: scaleX(1); }

.drv-safety-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 18px;
}
.drv-safety-card h5 { font-size: 17px; font-weight: 700; color: var(--c-dark); margin-bottom: 8px; }
.drv-safety-card p  { font-size: 14px; color: var(--c-muted); line-height: 1.7; margin: 0; }


/* ── TESTIMONIAL — single driver quote ───────────────────────── */
.drv-quote {
  background: var(--c-bg);
  padding: 80px 0;
}

.drv-quote-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 48px;
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  position: relative; overflow: hidden;
  max-width: 780px; margin: 0 auto;
}
.drv-quote-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--logo-gold), var(--logo-gold-lt));
  border-radius: 4px;
}
.drv-quote-mark {
  font-family: Georgia, serif; font-size: 80px; line-height: 1;
  color: var(--logo-gold); opacity: 0.25; display: block;
  margin-bottom: -20px;
}
.drv-quote-card blockquote {
  font-size: 18px; font-style: italic; color: var(--c-dark);
  line-height: 1.75; margin: 0 0 24px;
}
.drv-quote-author { display: flex; align-items: center; gap: 14px; }
.drv-quote-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(25,43,83,0.10); color: var(--logo-navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: 18px; flex-shrink: 0;
}
.drv-quote-author strong { display: block; font-size: 15px; font-weight: 700; color: var(--c-dark); }
.drv-quote-author span   { font-size: 13px; color: var(--c-muted); }
.drv-quote-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.drv-quote-stars i { color: var(--logo-gold); font-size: 15px; }


/* ================================================================
   DRIVERS PAGE — RESPONSIVE
   ================================================================ */

/* Hero */
@media (max-width: 991px) {
  .drv-hero { padding: 100px 0 70px; min-height: auto; }
  .drv-hero-desc { max-width: 100%; font-size: 16px; }
  .drv-status-card { display: none; } /* too cramped on tablet */
}

@media (max-width: 767px) {
  .drv-hero { padding: 88px 0 56px; }
  .drv-hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .drv-hero-desc { font-size: 15px; }
  .drv-hero-actions { flex-direction: column; align-items: center; }
  .drv-hero-actions .btn-gold,
  .drv-hero-actions .btn-outline-white { width: 100%; justify-content: center; }
  .drv-trust-row { justify-content: center; }
  .drv-hero-img { margin-top: 8px; }
}

@media (max-width: 480px) {
  .drv-hero { padding: 78px 0 44px; }
  .drv-hero h1 { font-size: 28px; }
}

/* Strip */
@media (max-width: 991px) {
  .drv-strip { padding: 32px 0; }
  .drv-strip-item { border-right: none; border-bottom: 1px solid var(--c-border); padding: 16px 0; }
  .drv-strip-item:last-child { border-bottom: none; }
}

@media (max-width: 767px) {
  .drv-strip { padding: 24px 0; }
  .drv-strip-icon { width: 44px; height: 44px; font-size: 19px; }
  .drv-strip-text strong { font-size: 14px; }
}

/* Feature sections */
@media (max-width: 767px) {
  .drv-img-wrap img { border-radius: var(--r-lg); }
  .drv-img-badge { display: none; }
}

/* App grid */
@media (max-width: 1199px) {
  .drv-app-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .drv-app { padding: 72px 0; }
  .drv-app-grid { margin-top: 40px; }
}

@media (max-width: 767px) {
  .drv-app { padding: 56px 0; }
  .drv-app-grid { grid-template-columns: 1fr; margin-top: 32px; border-radius: var(--r-lg); }
  .drv-app-cell { padding: 24px 20px; }
}

@media (max-width: 480px) {
  .drv-app { padding: 44px 0; }
  .drv-app-cell { padding: 20px 16px; }
}

/* Safety cards */
@media (max-width: 991px) {
  .drv-safety-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .drv-safety-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .drv-safety-card { padding: 24px; }
}

@media (max-width: 480px) {
  .drv-safety-card { padding: 20px; }
  .drv-safety-icon { width: 46px; height: 46px; font-size: 20px; }
}

/* Quote */
@media (max-width: 991px) {
  .drv-quote { padding: 60px 0; }
  .drv-quote-card { padding: 36px; }
}

@media (max-width: 767px) {
  .drv-quote { padding: 48px 0; }
  .drv-quote-card { padding: 28px 24px; }
  .drv-quote-card blockquote { font-size: 16px; }
  .drv-quote-mark { font-size: 60px; }
}

@media (max-width: 480px) {
  .drv-quote { padding: 40px 0; }
  .drv-quote-card { padding: 22px 18px; }
  .drv-quote-card blockquote { font-size: 15px; }
}
/* ================================================================
   SCHOOLS PAGE — ADDITIONAL CSS
   Append karo custom.css ke end mein (drivers CSS ke baad)
   ================================================================ */

/* ── SCHOOL HERO ─────────────────────────────────────────────── */
.sch-hero {
  background: var(--logo-navy);
  padding: 120px 0 90px;
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}

.sch-hero::before {
  content: '';
  position: absolute; top: -20%; left: -5%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(40,81,155,0.55) 0%, transparent 70%);
  pointer-events: none; filter: blur(75px);
  animation: orbFloat 9s ease-in-out infinite alternate;
}
.sch-hero::after {
  content: '';
  position: absolute; bottom: -10%; right: -5%;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,179,28,0.28) 0%, transparent 70%);
  pointer-events: none; filter: blur(70px);
  animation: orbFloat 7s ease-in-out infinite alternate-reverse;
}

.sch-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.sch-hero .container { position: relative; z-index: 2; }

.sch-hero h1 {
  font-size: clamp(34px, 5.5vw, 66px);
  font-weight: 800; color: #fff;
  line-height: 1.08; letter-spacing: -0.03em;
  animation: heroFadeUp 0.7s 0.15s var(--ease) both;
}

.sch-hero h1 .word-gold {
  color: var(--logo-gold);
  position: relative; display: inline-block;
}
.sch-hero h1 .word-gold::after {
  content: ''; position: absolute; bottom: 2px; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--logo-gold), var(--logo-gold-lt));
  border-radius: 3px;
  transform: scaleX(0); transform-origin: left;
  animation: underlineReveal 0.6s 0.9s var(--ease) forwards;
}

.sch-hero-desc {
  font-size: 17px; color: rgba(255,255,255,0.62);
  max-width: 460px; line-height: 1.75;
  animation: heroFadeUp 0.7s 0.28s var(--ease) both;
}
.sch-hero-actions { animation: heroFadeUp 0.7s 0.4s var(--ease) both; }

/* Hero image */
.sch-hero-img {
  position: relative;
  animation: heroFadeLeft 0.9s 0.3s var(--ease) both;
}
.sch-hero-img img {
  border-radius: var(--r-xl);
  box-shadow: 0 40px 80px rgba(7,17,29,0.4);
  width: 100%;
}

/* Floating badge on hero image */
.sch-status-card {
  position: absolute; bottom: -18px; right: -18px;
  background: #fff; border-radius: var(--r-lg);
  padding: 14px 20px; box-shadow: var(--sh-lg);
  border: 1px solid var(--c-border); border-left: 3px solid var(--logo-gold);
  display: flex; align-items: center; gap: 12px;
  animation: floatBadge 3.5s ease-in-out infinite alternate;
  z-index: 3;
}
.sch-status-card strong { display: block; font-size: 13px; font-weight: 700; color: var(--c-dark); }
.sch-status-card span   { font-size: 11.5px; color: var(--c-muted); }

/* Trust pills */
.sch-trust-row { display: flex; flex-wrap: wrap; gap: 10px; animation: heroFadeUp 0.7s 0.5s var(--ease) both; }
.sch-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.68);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  padding: 7px 14px; border-radius: var(--r-pill); backdrop-filter: blur(6px);
}
.sch-trust-pill i { color: var(--logo-gold); font-size: 11px; }


/* ── STATS STRIP ─────────────────────────────────────────────── */
.sch-strip {
  background: #fff;
  border-top: 3px solid var(--logo-gold);
  border-bottom: 1px solid var(--c-border);
  padding: 40px 0;
}
.sch-strip-item {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  border-right: 1px solid var(--c-border);
}
.sch-strip-item:last-child { border-right: none; }
.sch-strip-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.sch-strip-text strong { display: block; font-size: 15px; font-weight: 700; color: var(--c-dark); }
.sch-strip-text span   { font-size: 13px; color: var(--c-muted); }


/* ── IMAGE BADGE (feature sections) ─────────────────────────── */
.sch-img-wrap { position: relative; }
.sch-img-wrap img {
  border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  width: 100%; transition: transform 0.5s var(--ease);
}
.sch-img-wrap:hover img { transform: scale(1.02); }

.sch-img-badge {
  position: absolute; bottom: -16px; left: -16px;
  background: #fff; border-radius: var(--r-lg);
  padding: 13px 18px; box-shadow: var(--sh-md);
  border: 1px solid var(--c-border); border-left: 3px solid var(--logo-gold);
  display: flex; align-items: center; gap: 12px;
  animation: floatBadge 3.5s ease-in-out infinite alternate;
}
.sch-img-badge-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.sch-img-badge strong { font-size: 13px; display: block; font-weight: 700; color: var(--c-dark); white-space: nowrap; }
.sch-img-badge span   { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }


/* ── DASHBOARD FEATURES GRID ─────────────────────────────────── */
.sch-dash {
  background: var(--logo-navy);
  padding: 100px 0;
  position: relative; overflow: hidden;
}
.sch-dash::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,179,28,0.06) 0%, rgba(40,81,155,0.09) 40%, transparent 70%);
  pointer-events: none;
}
.sch-dash .container { position: relative; z-index: 2; }

.sch-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 56px;
}

.sch-dash-cell {
  background: rgba(255,255,255,0.03);
  padding: 36px 30px;
  transition: all var(--dur) var(--ease);
}
.sch-dash-cell:hover { background: rgba(255,255,255,0.08); }

.sch-dash-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: rgba(40,81,155,0.20); border: 1px solid rgba(40,81,155,0.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #7AABF5; margin-bottom: 20px;
}
.sch-dash-icon.gold { background: rgba(239,179,28,0.16); border-color: rgba(239,179,28,0.25); color: var(--logo-gold); }
.sch-dash-icon.green { background: rgba(74,222,128,0.14); border-color: rgba(74,222,128,0.25); color: #4ADE80; }
.sch-dash-icon.purple { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.25); color: #A78BFA; }
.sch-dash-icon.red { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: #F87171; }
.sch-dash-icon.cyan { background: rgba(6,182,212,0.14); border-color: rgba(6,182,212,0.25); color: #22D3EE; }

.sch-dash-cell h5 { font-family: var(--f-display); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.sch-dash-cell p  { font-size: 13.5px; color: rgba(255,255,255,0.42); line-height: 1.65; margin: 0; }


/* ── FEATURE CARDS (light) ───────────────────────────────────── */
.sch-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.sch-feat-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px;
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
  transition: all var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
.sch-feat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--logo-gold), var(--logo-gold-lt));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.sch-feat-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(239,179,28,0.18); }
.sch-feat-card:hover::after { transform: scaleX(1); }

.sch-feat-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 18px;
}
.sch-feat-card h5 { font-size: 17px; font-weight: 700; color: var(--c-dark); margin-bottom: 8px; }
.sch-feat-card p  { font-size: 14px; color: var(--c-muted); line-height: 1.7; margin: 0; }


/* ── TESTIMONIAL ─────────────────────────────────────────────── */
.sch-quote { background: var(--c-bg); padding: 80px 0; }

.sch-quote-card {
  background: #fff; border-radius: var(--r-xl);
  padding: 48px; border: 1px solid var(--c-border); box-shadow: var(--sh-md);
  position: relative; overflow: hidden;
  max-width: 780px; margin: 0 auto;
}
.sch-quote-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--logo-gold), var(--logo-gold-lt));
  border-radius: 4px;
}
.sch-quote-mark { font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--logo-gold); opacity: 0.25; display: block; margin-bottom: -20px; }
.sch-quote-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.sch-quote-stars i { color: var(--logo-gold); font-size: 15px; }
.sch-quote-card blockquote { font-size: 18px; font-style: italic; color: var(--c-dark); line-height: 1.75; margin: 0 0 24px; }
.sch-quote-author { display: flex; align-items: center; gap: 14px; }
.sch-quote-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(25,43,83,0.10); color: var(--logo-navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: 18px; flex-shrink: 0;
}
.sch-quote-author strong { display: block; font-size: 15px; font-weight: 700; color: var(--c-dark); }
.sch-quote-author span   { font-size: 13px; color: var(--c-muted); }


/* ================================================================
   SCHOOLS PAGE — RESPONSIVE
   ================================================================ */

/* Hero */
@media (max-width: 991px) {
  .sch-hero { padding: 100px 0 70px; min-height: auto; }
  .sch-hero-desc { max-width: 100%; font-size: 16px; }
  .sch-status-card { display: none; }
}
@media (max-width: 767px) {
  .sch-hero { padding: 88px 0 56px; }
  .sch-hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .sch-hero-desc { font-size: 15px; }
  .sch-hero-actions { flex-direction: column; align-items: center; }
  .sch-hero-actions .btn-gold,
  .sch-hero-actions .btn-outline-white { width: 100%; justify-content: center; }
  .sch-trust-row { justify-content: center; }
  .sch-hero-img { margin-top: 8px; }
}
@media (max-width: 480px) {
  .sch-hero { padding: 78px 0 44px; }
  .sch-hero h1 { font-size: 28px; }
}

/* Strip */
@media (max-width: 991px) {
  .sch-strip { padding: 32px 0; }
  .sch-strip-item { border-right: none; border-bottom: 1px solid var(--c-border); padding: 16px 0; }
  .sch-strip-item:last-child { border-bottom: none; }
}
@media (max-width: 767px) {
  .sch-strip { padding: 24px 0; }
  .sch-strip-icon { width: 44px; height: 44px; font-size: 19px; }
}

/* Feature sections */
@media (max-width: 767px) {
  .sch-img-wrap img { border-radius: var(--r-lg); }
  .sch-img-badge { display: none; }
}

/* Dashboard grid */
@media (max-width: 991px) {
  .sch-dash { padding: 72px 0; }
  .sch-dash-grid { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
}
@media (max-width: 767px) {
  .sch-dash { padding: 56px 0; }
  .sch-dash-grid { grid-template-columns: 1fr; margin-top: 32px; border-radius: var(--r-lg); }
  .sch-dash-cell { padding: 24px 20px; }
}
@media (max-width: 480px) {
  .sch-dash { padding: 44px 0; }
}

/* Feature cards */
@media (max-width: 991px) {
  .sch-feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .sch-feat-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .sch-feat-card { padding: 24px; }
}
@media (max-width: 480px) {
  .sch-feat-card { padding: 20px; }
  .sch-feat-icon { width: 46px; height: 46px; font-size: 20px; }
}

/* Quote */
@media (max-width: 991px) {
  .sch-quote { padding: 60px 0; }
  .sch-quote-card { padding: 36px; }
}
@media (max-width: 767px) {
  .sch-quote { padding: 48px 0; }
  .sch-quote-card { padding: 28px 24px; }
  .sch-quote-card blockquote { font-size: 16px; }
  .sch-quote-mark { font-size: 60px; }
}
@media (max-width: 480px) {
  .sch-quote { padding: 40px 0; }
  .sch-quote-card { padding: 22px 18px; }
  .sch-quote-card blockquote { font-size: 15px; }
}