@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500..800&family=Manrope:wght@400..800&display=swap');

/* ------------------------------------------------------------------
   MNR Drive — black & gold
   Display: Bodoni Moda (big headlines only). Body/UI: Manrope.
   ------------------------------------------------------------------ */
:root{
  --bg:#000000;
  --panel:#0f0e0c;
  --panel-2:#171510;
  --field:#0a0908;
  --line:#2b2619;
  --line-soft:#1c1911;
  --text:#f5f0e6;
  --text-dim:#aaa08d;
  --gold:#cda545;
  --gold-light:#ecd48c;
  --gold-dark:#8a6a1f;
  --gold-grad:linear-gradient(165deg,#f0d98f 0%,#cda545 52%,#b08a2e 100%);
  --ink-on-gold:#140f00;
  --ink-soft-on-gold:#3a2c05;
  --danger:#e0645a;
  --radius:14px;
  --r-md:20px;
  --r-lg:28px;
  --r-xl:34px;
  --display:'Bodoni Moda','Didot','Playfair Display',Georgia,serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:dark;
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html{scroll-padding-top:96px;}
html,body{margin:0;padding:0;}
body{background:var(--bg); color:var(--text); font-family:var(--body); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; margin:0; color:var(--text); letter-spacing:-0.015em; text-wrap:balance;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
[hidden]{display:none !important;}
.gold{color:var(--gold);}
.wrap{max-width:1180px; margin:0 auto;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px;}
.icon{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none;}

/* ---------- backdrop: soft black-and-white cars ---------- */
.backdrop{position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  background:radial-gradient(45% 40% at 100% 0%, rgba(205,165,69,0.07), transparent 70%), radial-gradient(50% 45% at 0% 100%, rgba(205,165,69,0.05), transparent 70%);}
.bd-photo{position:absolute; aspect-ratio:16/10; opacity:0; transition:opacity 1.6s ease; will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 62% 64% at 50% 50%, #000 38%, transparent 100%);
  mask-image:radial-gradient(ellipse 62% 64% at 50% 50%, #000 38%, transparent 100%);}
.bd-photo.on{opacity:var(--backdrop-strength,0.27);} /* raise for more presence, lower for less (0 hides them) */
.bd-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(0.9);}
main, footer.site-footer{position:relative; z-index:1;}

/* ---------- header: floating pill ---------- */
header.site-header{position:sticky; top:12px; z-index:40; padding:0 16px; margin-top:12px;}
.header-inner{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1180px; margin:0 auto; padding:9px 10px 9px 18px;
  background:rgba(15,14,12,0.80); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:999px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:36px; height:36px; border-radius:50%;}
.brand-name{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:0.02em;}
.brand-name span{color:var(--gold);}
nav.main-nav{display:flex; align-items:center; gap:6px;}
nav.main-nav a{font-size:14px; font-weight:600; color:var(--text-dim); padding:9px 14px; border-radius:999px; transition:color .15s, background-color .15s;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--text); background:rgba(205,165,69,0.12);}
nav.main-nav a.nav-cta{background:var(--gold-grad); color:var(--ink-on-gold) !important; padding:10px 20px; margin-left:6px; font-weight:700;}
nav.main-nav a.nav-cta:hover{filter:brightness(1.07);}
.menu-toggle{display:none; background:none; border:1px solid var(--line); color:var(--text); padding:9px 16px; border-radius:999px; cursor:pointer; font:600 14px var(--body);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; border-radius:999px; font:700 15px var(--body); letter-spacing:0.01em; cursor:pointer; border:1px solid transparent; transition:filter .15s, background-color .15s, border-color .15s, color .15s;}
.btn-gold{background:var(--gold-grad); color:var(--ink-on-gold);}
.btn-gold:hover{filter:brightness(1.07);}
.btn-outline{border-color:rgba(205,165,69,0.55); color:var(--gold-light); background:transparent;}
.btn-outline:hover{background:rgba(205,165,69,0.10); border-color:var(--gold);}
.btn-dark{background:#000; color:var(--gold-light);}
.btn-dark:hover{background:#15120a;}
.btn.secondary{background:transparent; border-color:var(--line); color:var(--text);}
.btn.secondary:hover{border-color:var(--gold-dark);}
.btn-block{width:100%;}
.btn:disabled{opacity:0.5; cursor:not-allowed; filter:none;}

/* ---------- generic sections (also used by the signing page) ---------- */
section{padding:72px 24px;}
.section-head{max-width:640px; margin:0 0 40px;}
.section-head h1,.section-head h2{font-size:clamp(2rem,4.2vw,3rem); line-height:1.08;}
.section-head p{color:var(--text-dim); margin:14px 0 0; font-size:16px; max-width:56ch;}
.band{padding:56px 24px;}
.empty-state{text-align:center; color:var(--text-dim); padding:60px 20px; grid-column:1/-1;}

/* ---------- home hero ---------- */
.hero-shell{padding:16px 16px 0;}
.hero{
  --hero-photo:none; /* to add a photo behind the hero, change this to url('./assets/hero.jpg') and put your image at assets/hero.jpg */
  max-width:1180px; margin:0 auto; border-radius:var(--r-xl); border:1px solid rgba(205,165,69,0.22);
  padding:72px 56px 56px;
  background-color:rgba(0,0,0,0.58);
  background-image:
    radial-gradient(60% 90% at 84% 30%, rgba(205,165,69,0.34), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.30) 100%),
    var(--hero-photo);
  background-size:cover; background-position:center;
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:center;
}
.hero h1{font-size:clamp(2.1rem,4.3vw,3.4rem); line-height:1.08; font-weight:800; letter-spacing:-0.02em; max-width:15em;}
.hero p.lede{color:#cfc6b4; font-size:clamp(1rem,1.5vw,1.15rem); max-width:34em; margin:0;}
.hero p.lede-intro{margin:22px 0 14px;}
.hero p.lede-outro{margin:16px 0 30px;}
.hero-points{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.hero-points li{display:flex; align-items:center; gap:12px; font-weight:700; font-size:clamp(1rem,1.5vw,1.1rem);}
.hero-points .icon{width:20px; height:20px; color:var(--gold); stroke-width:2.4;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.benefits{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:14px 34px; margin-top:44px; padding-top:28px; border-top:1px solid rgba(205,165,69,0.22);}
.benefit{display:flex; align-items:center; gap:12px; font-weight:700; font-size:14px; line-height:1.25;}
.benefit .ring{width:46px; height:46px; border-radius:50%; border:1px solid rgba(205,165,69,0.5); display:grid; place-items:center; color:var(--gold-light); background:rgba(205,165,69,0.08);}
.benefit small{display:block; color:var(--text-dim); font-weight:500; font-size:12.5px;}

/* lead-vehicle card inside the hero */
.hero-card{display:block; background:rgba(15,14,12,0.88); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; backdrop-filter:blur(10px); box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.hero-card .vcard-photo{border-radius:0; aspect-ratio:16/10;}
.hero-card-body{padding:22px 24px 26px;}
.hero-card-title{font:800 21px var(--body); letter-spacing:-0.01em;}
.hero-card-note{color:var(--text-dim); font-size:14px; margin:8px 0 0;}
.hero-card .vcard-price{margin:14px 0 18px;}
.hero-card.is-empty{padding:34px 28px;}
.hero-card.is-empty h3{font:800 22px var(--body); margin-bottom:10px;}
.hero-card.is-empty p{color:var(--text-dim); margin:0 0 22px;}
@media (prefers-reduced-motion:no-preference){
  .hero > div:first-child{animation:rise .7s ease-out both;}
  .hero > div:last-child{animation:rise .7s .12s ease-out both;}
  @keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
}

/* ---------- how it works ---------- */
.steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.step{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px 30px;}
.step-num{font-family:var(--display); font-weight:700; font-size:54px; line-height:1; color:var(--gold); margin-bottom:34px;}
.step h4{font:800 19px var(--body); letter-spacing:-0.01em; margin-bottom:8px;}
.step p{color:var(--text-dim); font-size:14.5px; margin:0;}
.steps-3{grid-template-columns:repeat(3,1fr);}
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.hero-solo{grid-template-columns:1fr; padding:72px 56px;}
.hero-solo h1{max-width:14em;}
.teaser{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:38px 44px; border-radius:var(--r-xl); border:1px solid rgba(205,165,69,0.35); background:linear-gradient(180deg,var(--panel-2),var(--panel));}
.teaser h2{font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1;}
.teaser p{color:var(--text-dim); margin:10px 0 0; max-width:38em;}
.cohost-card{max-width:820px; margin:0 auto;}
.cohost-card .fine{margin-top:26px;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.section-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px;}

/* ---------- why drivers choose us: bento ---------- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px;}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; position:relative;}
.tile h3{font:800 22px var(--body); letter-spacing:-0.015em; margin:18px 0 8px;}
.tile p{color:var(--text-dim); margin:0; font-size:15px;}
.tile .ring{width:48px; height:48px; border-radius:50%; border:1px solid rgba(205,165,69,0.5); display:grid; place-items:center; color:var(--gold-light); background:rgba(205,165,69,0.08);}
.tile-gold{background:var(--gold-grad); border-color:transparent; color:var(--ink-on-gold);}
.tile-gold h3{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,4vw,3.3rem); line-height:1.02; letter-spacing:-0.02em; color:var(--ink-on-gold); margin:auto 0 14px;}
.tile-gold p{color:var(--ink-soft-on-gold); font-size:16px; max-width:24em;}
.tile-gold .ring{border-color:rgba(20,15,0,0.45); background:rgba(20,15,0,0.08); color:var(--ink-on-gold);}
.t-miles{grid-column:span 5; grid-row:span 2; display:flex; flex-direction:column; min-height:360px;}
.t-maint{grid-column:span 7;}
.t-price{grid-column:span 4;}
.t-sign{grid-column:span 3;}
.t-apps{grid-column:span 12; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.t-apps h3{margin:0; max-width:15em;}
.apps-row{display:flex; flex-wrap:wrap; gap:10px;}
.app-chip{border:1px solid var(--line); background:var(--panel-2); color:var(--text); padding:9px 18px; border-radius:999px; font-size:14px; font-weight:600;}

/* ---------- calculator ---------- */
.calc{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; padding:52px; border-radius:var(--r-xl); background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);}
.calc h2{font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.1; max-width:14em;}
.calc-label{display:flex; justify-content:space-between; align-items:baseline; font-weight:700; font-size:15px; margin:34px 0 14px;}
.calc-label output{font-family:var(--body); font-size:26px; color:var(--gold-light); font-weight:800; font-variant-numeric:lining-nums;}
.range{-webkit-appearance:none; appearance:none; width:100%; height:10px; padding:0; border:0; border-radius:99px; outline-offset:8px; cursor:pointer;
  background:linear-gradient(90deg,var(--gold) 0 var(--fill,40%), #2a2619 var(--fill,40%) 100%);}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:var(--gold-grad); border:3px solid #000; box-shadow:0 0 0 1px var(--gold), 0 4px 14px rgba(0,0,0,0.6);}
.range::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#cda545; border:3px solid #000; box-shadow:0 0 0 1px var(--gold);}
.range-scale{display:flex; justify-content:space-between; color:var(--text-dim); font-size:12.5px; margin-top:10px;}
.calc-result{margin-top:34px;}
.calc-result .big{font-family:var(--body); font-weight:800; font-size:clamp(3.6rem,7.5vw,5.6rem); line-height:0.95; color:var(--gold); letter-spacing:-0.04em; font-variant-numeric:lining-nums;}
.calc-result .big small{font:700 20px var(--body); color:var(--text-dim); letter-spacing:0; margin-left:8px;}
.calc-result p{color:var(--text-dim); margin:14px 0 0; max-width:34em; font-size:15px;}
.calc-side{background:#000; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 30px 26px; align-self:start;}
.calc-side h3{font:800 18px var(--body); margin-bottom:16px;}
.checklist{list-style:none; margin:0; padding:0;}
.checklist li{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line-soft); font-size:15px; font-weight:600;}
.checklist li:first-child{border-top:0; padding-top:0;}
.checklist .icon{width:20px; height:20px; color:var(--gold); margin-top:2px; stroke-width:2.2;}
.checklist small{display:block; color:var(--text-dim); font-weight:400; font-size:13px;}
.fine{color:var(--text-dim); font-size:12.5px; margin:20px 0 0;}

/* ---------- fleet cards ---------- */
.fleet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px;}
.vcard{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .15s;}
.vcard:hover{border-color:var(--gold-dark);}
.vcard-photo{position:relative; width:100%; aspect-ratio:16/10; background:linear-gradient(160deg,var(--panel-2),#050504); overflow:hidden;}
.vcard-photo img{width:100%; height:100%; object-fit:cover;}
.vcard-photo.placeholder{display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:13px; font-weight:600;}
.vcard-photo .status-pill{position:absolute; top:14px; left:14px; margin:0;}
.vcard-body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1;}
.vcard-title{font:800 20px var(--body); letter-spacing:-0.01em;}
.vcard-price{margin-top:10px; color:var(--text-dim); font-size:14px;}
.vcard-price b{font-family:var(--body); font-weight:800; font-size:32px; color:var(--gold); letter-spacing:-0.02em; margin-right:2px; font-variant-numeric:lining-nums;}
.vcard-tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 22px; padding:0;}
.vcard-tags li{border:1px solid var(--line); background:var(--panel-2); border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--text-dim);}
.vcard-link{margin-top:auto; display:block; text-align:center; background:var(--gold-grad); color:var(--ink-on-gold); padding:14px; border-radius:999px; font-weight:700; font-size:15px; transition:filter .15s;}
.vcard:hover .vcard-link{filter:brightness(1.07);}
.status-pill{display:inline-block; padding:5px 13px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:0.01em; border:1px solid; background:rgba(0,0,0,0.72); backdrop-filter:blur(6px);}
.status-pill.avail{color:var(--gold-light); border-color:rgba(205,165,69,0.7);}
.status-pill.unavail{color:var(--text-dim); border-color:var(--line);}

/* unavailable vehicles stay visible, but quieter */
.vcard.is-unavailable .vcard-photo img{filter:grayscale(0.9) brightness(0.75);}
.vcard.is-unavailable .vcard-link{background:transparent; color:var(--gold-light); border:1px solid rgba(205,165,69,0.5);}
.vcard.is-unavailable:hover .vcard-link{background:rgba(205,165,69,0.1); filter:none;}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 26px;}
.chip{font:700 14px var(--body); color:var(--text-dim); background:transparent; border:1px solid var(--line); padding:10px 18px; border-radius:999px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s;}
.chip:hover{color:var(--text); border-color:var(--gold-dark);}
.chip[aria-pressed="true"]{background:rgba(205,165,69,0.14); border-color:var(--gold); color:var(--gold-light);}
.vd-note{margin:0 0 22px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--field); color:var(--text-dim); font-size:14px;}

/* ---------- closing call-to-action ---------- */
.cta-panel{max-width:1180px; margin:0 auto; border-radius:var(--r-xl); background:var(--gold-grad); color:var(--ink-on-gold); padding:68px 40px; text-align:center;}
.cta-panel h2{color:var(--ink-on-gold); font-size:clamp(2rem,4.5vw,3.4rem); line-height:1.05; font-weight:800;}
.cta-panel p{color:var(--ink-soft-on-gold); font-size:17px; margin:14px auto 30px; max-width:30em;}
.cta-panel .hero-ctas{justify-content:center;}
.cta-panel .btn-outline{border-color:rgba(20,15,0,0.55); color:var(--ink-on-gold);}
.cta-panel .btn-outline:hover{background:rgba(20,15,0,0.08);}

/* ---------- footer ---------- */
footer.site-footer{margin-top:40px; padding:48px 24px 40px; border-top:1px solid var(--line); color:var(--text-dim); font-size:14px;}
.footer-grid{max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start;}
.footer-grid p{margin:10px 0 0; max-width:26em;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-weight:600;}
.footer-links a:hover{color:var(--gold-light);}
footer.site-footer a{color:var(--gold-light);}
.footer-legal{max-width:1180px; margin:32px auto 0; font-size:12.5px;}
footer.site-footer > p{text-align:center; margin:6px 0;}

/* ---------- vehicle detail ---------- */
.back-link{display:inline-block; margin-bottom:28px; color:var(--text-dim); font-size:14px; font-weight:600;}
.back-link:hover{color:var(--gold-light);}
.vd-wrap{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:flex-start;}
.vd-gallery-main{width:100%; aspect-ratio:16/10; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px;}
.vd-gallery-main img{width:100%; height:100%; object-fit:cover;}
.vd-thumbs{display:flex; gap:10px; flex-wrap:wrap;}
.vd-thumbs img{width:76px; height:76px; object-fit:cover; border-radius:14px; border:2px solid var(--line); cursor:pointer; transition:border-color .15s;}
.vd-thumbs img:hover{border-color:var(--gold-dark);}
.vd-thumbs img.active{border-color:var(--gold);}
.vd-info{position:sticky; top:100px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px;}
.vd-info h1{font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.08; margin-bottom:14px;}
.vd-info .status-pill{margin:0 0 22px;}
.vd-price-box{margin-bottom:24px; padding:20px 22px; border-radius:var(--r-md); background:var(--field); border:1px solid var(--line);}
.vd-price-box .amount{font-family:var(--body); font-weight:800; font-size:42px; color:var(--gold); letter-spacing:-0.02em; font-variant-numeric:lining-nums;}
.vd-price-box .per{color:var(--text-dim); font-size:15px;}
.vd-features{list-style:none; padding:0; margin:0 0 28px; font-size:15px; font-weight:600;}
.vd-features li{display:flex; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line-soft);}
.vd-features li:first-child{border-top:0;}
.vd-features li::before{content:''; width:20px; height:20px; flex:none; background:var(--gold); -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat;}

/* ---------- apply page ---------- */
.apply-layout{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:0.82fr 1.18fr; gap:20px; align-items:start;}
.apply-aside{
  position:sticky; top:100px; border-radius:var(--r-xl); border:1px solid rgba(205,165,69,0.22); padding:44px 38px 40px;
  background-color:rgba(0,0,0,0.62);
  background-image:radial-gradient(90% 60% at 90% 0%, rgba(205,165,69,0.24), transparent 70%);
}
.apply-aside h1{font-size:clamp(2.2rem,4vw,3.3rem); line-height:1.04; font-weight:800; letter-spacing:-0.025em;}
.apply-aside p.lede{color:#cfc6b4; margin:16px 0 0;}
.aside-block{margin-top:34px; padding-top:26px; border-top:1px solid rgba(205,165,69,0.22);}
.aside-block h2{font:800 16px var(--body); letter-spacing:0; margin-bottom:12px;}
.aside-block .checklist li{font-weight:600; font-size:14.5px; padding:10px 0;}
.apply-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:40px 40px 38px;}
.applying-banner{background:rgba(205,165,69,0.08); border:1px solid rgba(205,165,69,0.4); border-radius:var(--r-md); padding:13px 18px; margin-bottom:26px; font-size:14.5px;}
.stepper{display:flex; align-items:center; gap:10px; margin-bottom:34px;}
.step-dot{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:800 14px var(--body); border:1px solid var(--line); color:var(--text-dim); background:var(--field);}
.step-dot.current{background:var(--gold-grad); color:var(--ink-on-gold); border-color:transparent;}
.step-dot.done{border-color:var(--gold); color:var(--gold-light);}
.step-bar{flex:1; height:2px; background:var(--line); border-radius:2px; max-width:70px;}
.step-bar.done{background:var(--gold);}
.stepper-label{margin-left:8px; font-weight:700; font-size:14px; color:var(--text-dim);}
.step-panel h2:focus{outline:none;}
.step-panel h2{font-size:clamp(1.6rem,2.6vw,2rem); margin-bottom:6px; font-weight:800;}
.step-panel > p.step-sub{color:var(--text-dim); margin:0 0 26px; font-size:15px;}
.form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-size:14px; font-weight:700; margin-bottom:8px;}
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row select, .form-row textarea{
  width:100%; background:var(--field); border:1px solid var(--line); color:var(--text);
  padding:14px 16px; border-radius:var(--radius); font:500 15px var(--body);
}
.form-row input::placeholder, .form-row textarea::placeholder{color:#6f6757;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(205,165,69,0.18);}
.form-row input[type="file"]{width:100%; background:var(--field); border:1px dashed #4a4129; color:var(--text-dim); padding:14px; border-radius:var(--radius); font:500 13.5px var(--body);}
.form-row input[type="file"]::file-selector-button{margin-right:14px; padding:9px 18px; border-radius:999px; border:1px solid rgba(205,165,69,0.6); background:transparent; color:var(--gold-light); font:700 13px var(--body); cursor:pointer;}
.form-hint{color:var(--text-dim); font-size:13px; margin-top:8px;}
.radio-group{display:grid; gap:10px;}
.form-row label.radio-option{display:flex; align-items:center; gap:12px; padding:15px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--field); font-size:15px; font-weight:600; cursor:pointer; margin:0;}
.radio-option input{accent-color:var(--gold); width:18px; height:18px; margin:0;}
.form-row label.radio-option:has(input:checked){border-color:var(--gold); background:rgba(205,165,69,0.08);}
.step-actions{display:flex; gap:12px; justify-content:space-between; margin-top:30px;}
.step-actions .btn{min-width:130px;}
.step-actions .btn-gold:only-child{margin-left:auto;}
.form-error{color:var(--danger); font-size:14px; margin-top:16px; min-height:20px;}
.success-panel{text-align:center; padding:56px 20px;}
.success-panel .ring{width:68px; height:68px; margin:0 auto 22px; border-radius:50%; background:var(--gold-grad); color:var(--ink-on-gold); display:grid; place-items:center;}
.success-panel .ring .icon{width:30px; height:30px; stroke-width:2.6;}
.success-panel h2{margin-bottom:12px; font-size:2rem;}
.success-panel p{color:var(--text-dim); max-width:30em; margin:0 auto;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; padding:48px 28px 36px; gap:36px;}
  .calc{grid-template-columns:1fr; padding:34px 26px; gap:30px;}
  .steps-row{grid-template-columns:repeat(2,1fr);}
  .apply-layout{grid-template-columns:1fr;}
  .apply-aside, .vd-info{position:static;}
  .vd-wrap{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .cards3{grid-template-columns:1fr;}
  nav.main-nav{display:none;}
  .menu-toggle{display:inline-block;}
  nav.main-nav.open{display:flex; position:absolute; top:calc(100% + 10px); left:0; right:0; flex-direction:column; align-items:stretch; gap:4px; padding:12px; background:#0f0e0c; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(0,0,0,0.7);}
  nav.main-nav.open a{padding:13px 16px;}
  nav.main-nav a.nav-cta{margin:6px 0 0; text-align:center;}
  .bento{grid-template-columns:repeat(6,1fr);}
  .t-miles{grid-column:span 6; grid-row:auto; min-height:260px;}
  .t-maint, .t-price, .t-sign{grid-column:span 6;}
  .t-apps{grid-column:span 6;}
}
@media (max-width:640px){
  section{padding:52px 18px;}
  .band{padding:40px 18px;}
  .hero-shell{padding:12px 12px 0;}
  .hero{padding:36px 20px 28px; border-radius:var(--r-lg);}
  .benefits{grid-template-columns:1fr; gap:16px;}
  .hero-ctas .btn{flex:1 1 100%;}
  .steps-row{grid-template-columns:1fr;}
  .step-num{margin-bottom:20px;}
  .tile{padding:26px;}
  .calc-label output{font-size:26px;}
  .apply-card{padding:28px 22px;}
  .apply-aside{padding:32px 24px;}
  .form-grid2{grid-template-columns:1fr;}
  .cta-panel{padding:48px 24px;}
  .hero-solo{padding:36px 20px 30px;}
  .teaser{padding:28px 24px;}
  .vd-info{padding:26px 22px;}
}