/* DriveLet design system ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#12314F;          /* deep navy — primary brand & headings */
  --ink-soft:#243447;
  --slate:#5B6472;
  --slate-light:#8A93A0;
  --paper:#F6F5F1;        /* warm ivory — page background */
  --surface:#FFFFFF;      /* card / panel surface */
  --mist:#EEF0F2;
  --mist-line:#E4E1D8;    /* warm hairline */
  --marigold:#C9A227;     /* champagne gold — accent */
  --marigold-dark:#A8841C;
  --route-green:#1F7A5C;
  --route-green-bg:#E7F3EE;
  --rust:#B3402A;
  --rust-bg:#F9E9E4;
  --radius-card: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,38,.06), 0 8px 24px -12px rgba(16,24,38,.18);
  --max-width: 1180px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em; max-width:62ch;}
a{color:inherit;}
img{max-width:100%;display:block;}
button, input, select, textarea{font-family:inherit; font-size:1rem;}
:focus-visible{outline:2px solid var(--marigold-dark); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.wrap{max-width:var(--max-width); margin:0 auto; padding:0 20px;}
.route-divider{
  border:none;
  border-top:2px dashed var(--mist-line);
  margin:40px 0;
}

/* -------- Top navigation -------- */
.topnav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mist-line);
  padding-top:env(safe-area-inset-top, 0px);
}
.topnav-row{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max-width); margin:0 auto; padding:14px 20px;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-family:'Space Grotesk'; font-weight:700; font-size:1.25rem;
  text-decoration:none; color:var(--ink);
}
.brand-mark{
  width:30px; height:30px; border-radius:8px;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.brand-mark::after{
  content:"";
  width:14px; height:3px; background:var(--marigold);
  border-radius:2px;
}
.nav-links{display:flex; align-items:center; gap:18px; font-size:.95rem;}
.nav-links a{text-decoration:none; color:var(--slate); font-weight:500;}
.nav-links a:hover{color:var(--ink);}
.nav-links .pill-btn{margin-left:4px;}
@media (max-width:700px){
  .topnav-row{padding:12px 14px; gap:10px;}
  .brand{font-size:1.08rem; gap:7px;}
  .brand-mark{width:34px; height:34px;}
  .topnav-row > .nav-links{gap:8px; font-size:.86rem;}
  .topnav-row > .nav-links > a:nth-child(-n+2){display:none;}
  .topnav-row > .nav-links .btn{padding:8px 13px;}
}
@media (max-width:380px){
  .topnav-row > .nav-links > a:not(.btn){display:none;}
}

/* -------- Buttons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:8px; border:1px solid transparent;
  padding:11px 20px; font-weight:600; font-size:.95rem;
  cursor:pointer; text-decoration:none; transition:transform .08s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--ink-soft);}
.btn-accent{background:var(--marigold); color:var(--ink);}
.btn-accent:hover{background:var(--marigold-dark); color:#fff;}
.btn-outline{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--mist);}
.btn-ghost{background:transparent; color:var(--slate);}
.btn-ghost:hover{color:var(--ink);}
.btn-danger{background:var(--rust); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:7px 14px; font-size:.85rem;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.pill-btn{border-radius:var(--radius-pill);}

/* -------- Hero -------- */
.hero{padding:56px 0 20px;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(2.2rem, 4vw, 3.4rem);}
.hero .lede{font-size:1.15rem; color:var(--slate); max-width:46ch;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.hero-stats{display:flex; gap:28px; margin-top:32px; flex-wrap:wrap;}
.hero-stat b{display:block; font-family:'Space Grotesk'; font-size:1.5rem;}
.hero-stat span{color:var(--slate); font-size:.85rem;}
.hero-art{
  background:linear-gradient(155deg, var(--ink) 0%, #1B2A44 60%, var(--ink) 100%);
  border-radius:18px; padding:26px; color:#fff; position:relative; overflow:hidden;
  min-height:320px; display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-art .route-line{
  position:absolute; top:26px; left:26px; right:26px; height:2px;
  background-image:repeating-linear-gradient(90deg, var(--marigold) 0 14px, transparent 14px 26px);
}
.hero-art .pin{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--marigold); box-shadow:0 0 0 6px rgba(232,163,61,.22);
}
.hero-art .card-float{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:14px 16px; backdrop-filter:blur(6px);
}
.hero-art .card-float b{font-family:'Space Grotesk'; display:block; font-size:1.1rem;}
.hero-art .card-float span{color:rgba(255,255,255,.65); font-size:.82rem;}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1; min-height:220px;}
}

/* -------- Section headings -------- */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.section-head h2{font-size:1.7rem; margin-bottom:4px;}
.section-head p{color:var(--slate); margin:0;}

/* -------- Feature grid -------- */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feature{padding:22px; border:1px solid var(--mist-line); border-radius:var(--radius-card); background:var(--surface); transition:transform .2s ease, box-shadow .2s ease;}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
.feature .icon{width:38px; height:38px; border-radius:9px; background:var(--mist); display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.2rem;}
.feature h3{font-size:1.05rem; margin-bottom:6px;}
.feature p{color:var(--slate); font-size:.92rem; margin:0;}
@media (max-width:760px){.feature-grid{grid-template-columns:1fr;}}

/* -------- Car cards -------- */
.car-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px;}
.car-card{
  border:1px solid var(--mist-line); border-radius:var(--radius-card);
  overflow:hidden; background:var(--surface); text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .1s ease;
}
.car-card:hover{box-shadow:var(--shadow-card); transform:translateY(-2px);}
.car-card .photo{
  aspect-ratio:16/10; background:var(--mist); position:relative; overflow:hidden;
}
.car-card .photo img{width:100%; height:100%; object-fit:cover;}
.car-card .distance-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(16,24,38,.85); color:#fff; font-size:.75rem; font-weight:600;
  padding:4px 9px; border-radius:var(--radius-pill);
}
.car-card .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.car-card h3{font-size:1.05rem; margin:0;}
.car-card .meta{color:var(--slate); font-size:.85rem;}
.car-card .price-row{display:flex; align-items:baseline; justify-content:space-between; margin-top:auto; padding-top:8px;}
.car-card .price{font-family:'Space Grotesk'; font-weight:600; font-size:1.15rem;}
.car-card .price span{font-family:'Inter'; font-weight:400; font-size:.78rem; color:var(--slate);}
.rating{display:inline-flex; align-items:center; gap:4px; font-size:.82rem; color:var(--slate);}
.rating .star{color:var(--marigold-dark);}

/* -------- Cards / panels -------- */
.card{background:var(--surface); border:1px solid var(--mist-line); border-radius:var(--radius-card); padding:22px;}
.panel-title{font-size:1.05rem; font-weight:600; margin-bottom:14px; font-family:'Space Grotesk';}

/* -------- Forms -------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--ink-soft);}
.field .hint{font-size:.78rem; color:var(--slate-light); margin-top:4px;}
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=datetime-local], select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--mist-line); border-radius:8px;
  background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus{border-color:var(--ink-soft);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}
.file-drop{
  border:1.5px dashed var(--mist-line); border-radius:10px; padding:16px;
  display:flex; align-items:center; gap:12px; background:var(--mist);
}
.file-drop input{min-width:0; max-width:100%; border:none; background:transparent; padding:0;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--ink-soft);}
.checkbox-row input{width:auto; margin-top:3px;}

.auth-shell{
  min-height:calc(100vh - 64px); display:grid; grid-template-columns:minmax(340px,.9fr) minmax(440px,1.1fr);
  align-items:stretch; gap:clamp(22px,4vw,58px); padding:clamp(24px,4vw,56px);
  background:
    radial-gradient(circle at 88% 8%, rgba(201,162,39,.16), transparent 25rem),
    linear-gradient(135deg,#e9edf0 0%,#f8f7f3 58%,#f1ead7 100%);
}
.auth-showcase{
  position:relative; isolation:isolate; min-height:570px; overflow:hidden; border-radius:26px;
  padding:clamp(28px,4vw,52px); color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  background:url('/images/drivelet-auth-road.webp') center center/cover no-repeat;
  box-shadow:0 28px 70px -30px rgba(18,49,79,.7);
}
.auth-showcase::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(145deg,rgba(8,28,47,.94) 0%,rgba(18,49,79,.69) 46%,rgba(18,49,79,.1) 78%),
    linear-gradient(0deg,rgba(6,22,36,.8),transparent 55%);
}
.auth-showcase::after{
  content:""; position:absolute; width:180px; height:180px; border:1px solid rgba(255,255,255,.18);
  border-radius:50%; right:-60px; top:-55px; box-shadow:0 0 0 28px rgba(255,255,255,.035);
}
.auth-kicker{display:inline-flex; align-items:center; gap:9px; width:max-content; font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#f4d567;}
.auth-kicker::before{content:""; width:28px; height:3px; border-radius:4px; background:var(--marigold);}
.auth-showcase h1{max-width:520px; margin-top:18px; font-size:clamp(2.1rem,4vw,4rem); line-height:1.02; color:#fff;}
.auth-showcase-copy{max-width:470px; color:rgba(255,255,255,.78); font-size:clamp(.95rem,1.2vw,1.08rem);}
.auth-trust-list{display:grid; gap:10px; max-width:470px; margin-top:24px;}
.auth-trust-item{
  display:flex; align-items:center; gap:11px; padding:11px 14px; border:1px solid rgba(255,255,255,.16);
  border-radius:12px; background:rgba(8,28,47,.5); backdrop-filter:blur(8px); font-size:.86rem; font-weight:600;
}
.auth-trust-item::before{
  content:"✓"; display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  background:var(--marigold); color:var(--ink); font-size:.72rem; font-weight:800;
}
.auth-road-tag{font-size:.74rem; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.65);}
.auth-card{
  width:100%; max-width:560px; align-self:center; justify-self:center; background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.9); border-radius:22px; padding:clamp(28px,4vw,46px);
  box-shadow:0 28px 70px -38px rgba(18,49,79,.55),0 1px 2px rgba(18,49,79,.08);
}
.auth-card h2{font-size:clamp(1.65rem,2.6vw,2.15rem);}
.auth-card input:not([type=checkbox]),.auth-card select{min-height:46px; border-color:#d8dde1; background:#fbfcfc;}
.auth-card input:focus,.auth-card select:focus{
  outline:none; border-color:var(--marigold); box-shadow:0 0 0 3px rgba(201,162,39,.16); background:#fff;
}
.auth-tabs{display:flex; gap:8px; margin-bottom:26px; background:var(--mist); padding:4px; border-radius:var(--radius-pill);}
.auth-tabs a{flex:1; min-width:0; text-align:center; padding:9px 8px; border-radius:var(--radius-pill); text-decoration:none; font-size:.85rem; font-weight:600; color:var(--slate);}
.auth-tabs a.active{background:var(--ink); color:#fff; box-shadow:0 4px 12px rgba(18,49,79,.18);}
@media (max-width:900px){
  .auth-shell{grid-template-columns:minmax(0,1fr); gap:18px; padding:20px;}
  .auth-showcase{min-width:0; min-height:270px; padding:28px;}
  .auth-showcase h1{font-size:2.35rem; max-width:460px;}
  .auth-showcase-copy{margin-bottom:0;}
  .auth-trust-list{display:none;}
  .auth-card{max-width:620px;}
}
@media (max-width:520px){
  .auth-shell{padding:12px; gap:12px;}
  .auth-showcase{min-height:195px; border-radius:18px; padding:22px; background-position:62% center;}
  .auth-showcase h1{font-size:1.85rem; max-width:280px; margin-top:12px;}
  .auth-showcase-copy,.auth-road-tag{display:none;}
  .auth-card{min-width:0; border-radius:18px; padding:26px 20px;}
  .auth-tabs a{font-size:.77rem; line-height:1.2; padding:9px 5px;}
}

/* -------- Badges / status -------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill);}
.badge-pending{background:#FDF3E3; color:var(--marigold-dark);}
.badge-approved, .badge-active, .badge-confirmed, .badge-completed, .badge-success{background:var(--route-green-bg); color:var(--route-green);}
.badge-rejected, .badge-suspended, .badge-cancelled{background:var(--rust-bg); color:var(--rust);}
.badge-ongoing, .badge-awaiting_payment, .badge-handover_pending, .badge-return_pending{background:#E9EEFB; color:#33489C;}

/* -------- Dashboard shell -------- */
.dash-shell{display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 64px);}
.dash-side{border-right:1px solid var(--mist-line); padding:24px 14px; background:var(--surface);}
.dash-side .role-tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-light); padding:0 10px 10px;}
.dash-side a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  text-decoration:none; color:var(--slate); font-size:.92rem; font-weight:500; margin-bottom:2px;
}
.dash-side a.active, .dash-side a:hover{background:var(--mist); color:var(--ink);}
.dash-main{padding:28px 26px 60px;}
@media (max-width:820px){
  .dash-shell{grid-template-columns:1fr;}
  .dash-side{display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--mist-line); padding:12px;}
  .dash-side a{white-space:nowrap;}
  .dash-side .role-tag{display:none;}
}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:28px;}
.stat-box{border:1px solid var(--mist-line); border-radius:var(--radius-card); padding:16px 18px;}
.stat-box b{display:block; font-family:'Space Grotesk'; font-size:1.6rem;}
.stat-box span{font-size:.82rem; color:var(--slate);}

table.simple-table{width:100%; border-collapse:collapse; font-size:.9rem;}
.simple-table th{text-align:left; color:var(--slate); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--mist-line);}
.simple-table td{padding:12px 10px; border-bottom:1px solid var(--mist-line); vertical-align:middle;}
.simple-table tr:last-child td{border-bottom:none;}
.table-wrap{border:1px solid var(--mist-line); border-radius:var(--radius-card); overflow:hidden;}
.table-wrap .simple-table{border:none;}

.doc-thumb{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--mist-line);
  border-radius:8px; text-decoration:none; color:var(--ink); font-size:.85rem; margin-bottom:8px;
}
.doc-thumb .ico{width:30px; height:30px; border-radius:6px; background:var(--mist); display:flex; align-items:center; justify-content:center;}

.empty-state{text-align:center; padding:50px 20px; color:var(--slate);}
.empty-state h3{color:var(--ink); margin-bottom:6px;}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:8px; font-size:.9rem;
  box-shadow:var(--shadow-card); z-index:100; max-width:90vw;
}
.toast.error{background:var(--rust);}
.toast.success{background:var(--route-green);}

.footer{border-top:1px solid var(--mist-line); padding:34px 0; margin-top:60px; color:var(--slate); font-size:.88rem;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}

.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:8px; margin-bottom:14px;}
.gallery img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--mist-line);}

.fare-line{display:flex; justify-content:space-between; font-size:.9rem; padding:6px 0; color:var(--slate);}
.fare-line.total{color:var(--ink); font-weight:700; border-top:1px solid var(--mist-line); margin-top:6px; padding-top:12px; font-size:1.05rem;}

.step-track{display:flex; gap:6px; margin-bottom:20px;}
.step-track .dot{flex:1; height:4px; border-radius:2px; background:var(--mist-line);}
.step-track .dot.done{background:var(--route-green);}
.step-track .dot.current{background:var(--marigold);}

.condition-photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:12px 0;}
.condition-photo-grid img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; border:1px solid var(--mist-line);}

.masked-notice{
  display:flex; gap:10px; align-items:flex-start; background:#FDF3E3; border:1px solid #F1DDAF;
  color:var(--marigold-dark); padding:12px 14px; border-radius:8px; font-size:.85rem; margin-bottom:14px;
}

/* ======================================================================= */
/* DriveLet — interactive landing enhancements                             */
/* ======================================================================= */

/* -------- Scroll reveal -------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1; transform:none;}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}

/* -------- Hero art: moving cars on a route -------- */
.hero-art{
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(201,162,39,.22) 0%, transparent 55%),
    linear-gradient(155deg, #1B3A5C 0%, #12314F 55%, #0B2338 100%);
  box-shadow:0 24px 60px -28px rgba(11,35,56,.75);
  animation:heroIn .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroIn{from{opacity:0; transform:translateY(24px) scale(.98);} to{opacity:1; transform:none;}}

.hero-art .route-line{animation:dashDrift 3s linear infinite;}
@keyframes dashDrift{to{background-position:52px 0;}}

.hero-art .pin{animation:pinPulse 2.6s ease-in-out infinite;}
.hero-art .pin.p1{top:20px; left:34px; animation-delay:0s;}
.hero-art .pin.p2{top:20px; right:34px; left:auto; animation-delay:1.3s;}
@keyframes pinPulse{
  0%,100%{box-shadow:0 0 0 5px rgba(232,163,61,.20); transform:scale(1);}
  50%{box-shadow:0 0 0 12px rgba(232,163,61,0); transform:scale(1.18);}
}

/* Road + driving cars */
.road{
  position:absolute; left:0; right:0; bottom:0; height:96px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.42) 100%);
  overflow:hidden;
}
.road::before{ /* lane markings */
  content:""; position:absolute; left:0; right:0; bottom:34px; height:4px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 26px, transparent 26px 56px);
  animation:laneMove 1.1s linear infinite;
}
@keyframes laneMove{to{background-position:-56px 0;}}

.drive{position:absolute; bottom:26px; left:-140px; will-change:transform;}
.drive svg{display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));}
.drive .wheel{transform-origin:center; animation:spin .5s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.drive-1{animation:driveAcross 7.5s linear infinite;}
.drive-2{animation:driveAcross 10s linear infinite 2.4s; bottom:52px; transform:scale(.82);}
.drive-3{animation:driveAcross 12.5s linear infinite 5s; bottom:14px; transform:scale(1.06);}
@keyframes driveAcross{
  0%{transform:translateX(0) scale(var(--s,1));}
  100%{transform:translateX(calc(100vw + 260px)) scale(var(--s,1));}
}
/* keep per-car scale while translating */
.drive-2{--s:.82;} .drive-3{--s:1.06;} .drive-1{--s:1;}

.hero-art .card-float{transition:transform .25s ease, background .25s ease;}
.hero-art .card-float:hover{transform:translateY(-3px); background:rgba(255,255,255,.14);}
.float-row{display:flex; gap:10px; margin-bottom:12px; position:relative; z-index:3;}
.float-row .card-float{flex:1;}
.hero-art .headline{position:relative; z-index:3;}
.hero-art .headline h3{color:#fff; font-size:1.35rem; margin-bottom:4px;}
.hero-art .headline p{color:rgba(255,255,255,.72); font-size:.9rem; margin:0;}
.live-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#40E08B; margin-right:6px; box-shadow:0 0 0 0 rgba(64,224,139,.6); animation:livePulse 1.8s infinite;}
@keyframes livePulse{70%{box-shadow:0 0 0 9px rgba(64,224,139,0);} 100%{box-shadow:0 0 0 0 rgba(64,224,139,0);}}

.hero-art{
  min-height:420px; display:block; isolation:isolate; padding:24px; border-radius:26px;
  background:url('/images/drivelet-live-fleet.webp') 58% center/cover no-repeat;
  box-shadow:0 32px 70px -32px rgba(11,35,56,.8); color:#fff;
}
.hero-art::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(90deg,rgba(7,26,43,.94) 0%,rgba(9,31,51,.7) 38%,rgba(9,31,51,.18) 69%,rgba(9,31,51,.08) 100%),
    linear-gradient(0deg,rgba(5,20,34,.88) 0%,transparent 53%);
}
.hero-art::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -100px 100px -90px rgba(0,0,0,.8);
}
.fleet-status-row{display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:2;}
.fleet-live,.fleet-updated{
  display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.18); border-radius:999px;
  background:rgba(7,26,43,.52); backdrop-filter:blur(10px); color:#fff; font-size:.7rem;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.fleet-live{padding:8px 12px;}
.fleet-updated{padding:8px 11px; color:rgba(255,255,255,.7); font-weight:600; letter-spacing:.03em; text-transform:none;}
.fleet-copy{position:relative; z-index:2; margin-top:50px; max-width:310px;}
.fleet-copy>span{display:block; color:#f3cf55; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;}
.fleet-copy h3{color:#fff; font-size:clamp(1.9rem,3.3vw,2.75rem); line-height:1.04; margin:0; text-shadow:0 3px 18px rgba(0,0,0,.38);}
.fleet-location{
  position:absolute; z-index:2; left:24px; bottom:122px; display:flex; align-items:center; gap:10px;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.fleet-location>svg{width:23px; height:23px; fill:none; stroke:#f3cf55; stroke-width:1.8;}
.fleet-location small,.fleet-location strong{display:block;}
.fleet-location small{font-size:.65rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.09em;}
.fleet-location strong{font-size:.82rem; margin-top:1px;}
.fleet-metrics{
  position:absolute; z-index:2; left:20px; right:20px; bottom:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.fleet-metric{
  min-width:0; display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid rgba(255,255,255,.18);
  border-radius:14px; background:rgba(8,29,48,.66); backdrop-filter:blur(12px); box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
  transition:transform .22s ease,background .22s ease;
}
.fleet-metric:hover{transform:translateY(-2px); background:rgba(12,42,68,.78);}
.fleet-icon{width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:rgba(243,207,85,.16); color:#f3cf55;}
.fleet-icon svg{width:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.fleet-icon.fleet-star{font-size:1.05rem;}
.fleet-metric b{display:block; font-family:'Space Grotesk'; font-size:1.12rem; line-height:1.1; color:#fff;}
.fleet-metric span:not(.fleet-icon){display:block; color:rgba(255,255,255,.67); font-size:.72rem; margin-top:3px; white-space:nowrap;}
@media (max-width:860px){
  .hero-art{min-height:390px; background-position:60% center;}
  .fleet-copy{margin-top:44px;}
}
@media (max-width:520px){
  .hero-art{min-height:370px; padding:18px; border-radius:20px; background-position:62% center;}
  .fleet-updated{display:none;}
  .fleet-copy{margin-top:42px; max-width:250px;}
  .fleet-copy h3{font-size:2rem;}
  .fleet-location{left:18px; bottom:118px;}
  .fleet-metrics{left:14px; right:14px; bottom:14px; gap:7px;}
  .fleet-metric{gap:8px; padding:12px 10px;}
  .fleet-icon{width:30px; height:30px; flex-basis:30px;}
  .fleet-metric b{font-size:1rem;}
  .fleet-metric span:not(.fleet-icon){font-size:.65rem;}
}
@media (prefers-reduced-motion:reduce){.hero-art,.live-dot{animation:none;}}

/* -------- Section shell for the new bands -------- */
.band{padding:8px 0;}
.band-head{text-align:center; max-width:640px; margin:0 auto 34px;}
.band-head .eyebrow{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.7);
  padding:5px 12px; border-radius:var(--radius-pill); margin-bottom:12px;
}
.band-head h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:8px; color:var(--ink);}
.band-head p{color:var(--slate); opacity:.95; margin:0 auto;}

/* -------- Figures & facts dashboard -------- */
.facts-card{
  background:linear-gradient(160deg,#ffffff 0%, #FBFAF6 100%);
  border:1px solid var(--mist-line); border-radius:20px; padding:28px;
  box-shadow:0 30px 70px -40px rgba(11,35,56,.55);
}
.fact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:820px){.fact-grid{grid-template-columns:repeat(2,1fr);}}
.fact{
  background:#fff; border:1px solid var(--mist-line); border-radius:14px; padding:18px 16px;
  position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fact:hover{transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent;}
.fact::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(180deg,var(--marigold),var(--ink));}
.fact .fact-ico{font-size:1.3rem; margin-bottom:8px;}
.fact b{display:block; font-family:'Space Grotesk'; font-size:2rem; line-height:1; color:var(--ink);}
.fact span{display:block; margin-top:6px; font-size:.82rem; color:var(--slate);}

.facts-lower{display:grid; grid-template-columns:1.2fr 1fr; gap:22px; margin-top:22px;}
@media (max-width:820px){.facts-lower{grid-template-columns:1fr;}}

.chart-box{background:#fff; border:1px solid var(--mist-line); border-radius:14px; padding:18px;}
.chart-box h4{font-size:.95rem; color:var(--ink); margin-bottom:16px;}
.bars{display:flex; align-items:flex-end; gap:10px; height:130px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%;}
.bar{
  width:100%; border-radius:6px 6px 0 0; height:0;
  background:linear-gradient(180deg,var(--marigold) 0%, var(--ink) 100%);
  transition:height 1.1s cubic-bezier(.22,.61,.36,1); position:relative;
}
.bar-col small{font-size:.7rem; color:var(--slate-light);}
.bar-col .bar-val{font-size:.72rem; font-weight:700; color:var(--ink);}

.ticker-box{background:var(--ink); border-radius:14px; padding:18px; color:#fff; overflow:hidden; position:relative;}
.ticker-box h4{color:#fff; font-size:.95rem; margin-bottom:14px; display:flex; align-items:center;}
.ticker{position:relative; height:52px;}
.ticker-item{
  position:absolute; inset:0; display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;
}
.ticker-item.on{opacity:1; transform:none;}
.ticker-item .t-av{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--marigold),var(--ink)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex:none;}
.ticker-item .t-txt{font-size:.86rem; line-height:1.35;}
.ticker-item .t-txt b{color:var(--marigold);}

/* -------- Happy customers -------- */
.testi-wrap{position:relative; max-width:960px; margin:0 auto;}
.testi-track{overflow:hidden; border-radius:20px;}
.testi-slides{display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.testi{
  min-width:100%; padding:34px 36px; background:#fff;
  border:1px solid var(--mist-line); border-radius:20px; box-shadow:var(--shadow-card);
}
.testi .quote{font-size:1.15rem; line-height:1.6; color:var(--ink-soft); font-style:italic; margin-bottom:22px;}
.testi .quote::before{content:"\201C"; font-family:'Space Grotesk'; font-size:3rem; color:var(--marigold); line-height:0; position:relative; top:14px; margin-right:6px;}
.testi-who{display:flex; align-items:center; gap:14px;}
.testi-who .av{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color:#fff; font-size:1.05rem; flex:none;}
.testi-who .who-txt b{display:block; color:var(--ink); font-family:'Space Grotesk';}
.testi-who .who-txt span{font-size:.82rem; color:var(--slate);}
.testi-stars{margin-left:auto; color:var(--marigold-dark); font-size:1rem; letter-spacing:2px;}
.testi-dots{display:flex; justify-content:center; gap:9px; margin-top:20px;}
.testi-dots button{
  width:10px; height:10px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(18,49,79,.22); transition:transform .2s ease, background .2s ease, width .2s ease;
}
.testi-dots button.active{background:var(--ink); width:26px; border-radius:var(--radius-pill);}
.testi-nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  border:1px solid var(--mist-line); background:#fff; cursor:pointer; font-size:1.2rem; color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); transition:transform .15s ease;}
.testi-nav:hover{transform:translateY(-50%) scale(1.08);}
.testi-nav.prev{left:-16px;} .testi-nav.next{right:-16px;}
@media (max-width:700px){.testi-nav{display:none;} .testi{padding:26px 22px;}}

/* -------- Car card entrance stagger -------- */
@keyframes cardPop{from{opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1; transform:none;}}
.car-grid .car-card{animation:cardPop .5s cubic-bezier(.22,.61,.36,1) both;}

/* -------- Button shine -------- */
.btn-accent{position:relative; overflow:hidden;}
.btn-accent::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-accent:hover::after{left:130%;}