/* Keep You Driving: prototype stylesheet (black / lime green / white). Mechanic-themed animations in pure CSS. */
:root{--bk:#0A0A0A;--bk2:#141414;--bk3:#1E1E1E;--lime:#7BE03A;--lime2:#A8F068;--gdk:#1F8A2B;--wh:#fff;--soft:#F3F5F0;--line:#DDE3D6;--mut:#5B6455;--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.65 Inter,system-ui,Arial,sans-serif;color:#141714;background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3{font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:700;line-height:1.05;margin:0 0 .45em;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(40px,6.6vw,82px)}h2{font-size:clamp(32px,4.6vw,56px)}h3{font-size:24px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}section{padding:92px 0;position:relative}
.lime{color:var(--lime)}.gd{color:var(--gdk)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;font:700 17px Oswald,Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:2px solid var(--lime);background:var(--lime);color:#000;cursor:pointer;border-radius:0;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(123,224,58,.25)}
.btn.dk{background:#000;border-color:#000;color:#fff}.btn.ol{background:transparent;color:#fff;border-color:#fff}.btn.ol:hover{background:#fff;color:#000}
.btn .g{width:20px;height:20px;animation:spin 6s linear infinite paused}.btn:hover .g{animation-play-state:running}
.btns{display:flex;flex-wrap:wrap;gap:12px}
/* header */
.util{background:var(--bk);color:#cfd6c9;font-size:14px}.util .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}.util b{color:var(--lime)}
header.top{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.1)}header .wrap{display:flex;align-items:center;gap:26px;height:78px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 26px Oswald,Arial;text-transform:uppercase;line-height:1}.logo small{display:block;font:600 11px Inter;letter-spacing:.16em;color:var(--gdk);margin-top:3px}
.mark{width:46px;height:46px;border-radius:50%;background:#000;display:grid;place-items:center;border:3px solid var(--lime)}.mark svg{width:26px;height:26px;animation:spin 8s linear infinite}
nav{display:flex;gap:4px;margin-left:auto}nav a{padding:8px 14px;font:600 15px Oswald;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}nav a:hover{color:var(--gdk)}
.menu{display:none;margin-left:auto;background:none;border:2px solid #000;padding:8px 14px;font:700 14px Oswald;text-transform:uppercase}
/* hero */
.hero{position:relative;color:#fff;background:#050505 url(images/hero.jpg) center/cover;padding:96px 0 150px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 60%,rgba(0,0,0,.3))}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.tag{display:inline-flex;gap:8px;align-items:center;font:600 14px Oswald;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}.tag i{width:34px;height:3px;background:var(--lime);display:block}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}.hero h1 .ln span{display:inline-block;transform:translateY(115%);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}.hero h1 .ln:nth-child(2) span{animation-delay:.15s}.hero h1 .ln:nth-child(3) span{animation-delay:.3s}
@keyframes up{to{transform:none}}
.hero p.lead{font-size:20px;color:#E4EADD;max-width:560px;margin:18px 0 28px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.chips span{border:1px solid rgba(255,255,255,.3);padding:8px 16px;font:600 13px Oswald;letter-spacing:.08em;text-transform:uppercase}
.chips span::before{content:"✓";color:var(--lime);margin-right:8px}
/* hero request card */
.card-q{background:#fff;color:#111;padding:26px;border-top:6px solid var(--lime);box-shadow:0 30px 70px rgba(0,0,0,.5)}.card-q h3{font-size:28px;margin-bottom:4px}.card-q p{margin:0 0 14px;color:var(--mut);font-size:15px}
label{display:block;font:600 13px Inter;margin:12px 0 5px}input,select,textarea{width:100%;padding:13px 14px;border:1px solid #BCC4B4;font:16px Inter,Arial;background:#fff;border-radius:0}textarea{min-height:84px}
.card-q .btn{width:100%;margin-top:14px}.note{font-size:12.5px;color:var(--mut);text-align:center;margin-top:10px}.ok{display:none;color:var(--gdk);font-weight:700;text-align:center;margin-top:10px}
/* road divider + driving car */
.road{position:absolute;left:0;right:0;bottom:0;height:92px;background:linear-gradient(180deg,transparent 0,#111 38%);overflow:hidden;z-index:2}.road::before{content:"";position:absolute;left:0;right:0;bottom:16px;height:4px;background:repeating-linear-gradient(90deg,var(--lime) 0 40px,transparent 40px 80px);animation:dash 1.2s linear infinite}
@keyframes dash{to{transform:translateX(-80px)}}
.car{position:absolute;bottom:22px;left:-170px;width:150px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.6));animation:drive 12s linear infinite;z-index:3}@keyframes drive{to{left:105%}}
.car .wl{transform-origin:center;transform-box:fill-box;animation:spin .6s linear infinite}
/* strip */
.strip{background:var(--lime);color:#000;padding:0;overflow:hidden}.strip .t{display:flex;width:max-content;animation:scroll 30s linear infinite}.strip span{display:flex;align-items:center;gap:14px;padding:18px 28px;font:700 20px Oswald;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.strip svg{width:22px;height:22px}
@keyframes scroll{to{transform:translateX(-50%)}}@keyframes spin{to{transform:rotate(360deg)}}
/* headings */
.hd{text-align:center;max-width:760px;margin:0 auto 52px}.hd p{color:var(--mut)}.hd h2::after{content:"";display:block;width:90px;height:5px;background:var(--lime);margin:14px auto 0}
.dark{background:var(--bk);color:#fff}.dark .hd p{color:#B9C2B3}.dark h2{color:#fff}
/* services */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}.svc:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(0,0,0,.15);border-color:var(--lime)}
.sc{aspect-ratio:4/3;position:relative;overflow:hidden;background:#111}.sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .8s,opacity .4s}.svc:hover .sc img{transform:scale(1.08);opacity:.4}
.sc svg{position:absolute;inset:0;width:100%;height:100%}.svc .b{padding:20px 22px 24px;flex:1}.svc h3{font-size:23px}.svc p{margin:0;color:var(--mut);font-size:15px}
.svc .num{position:absolute;top:10px;left:12px;font:700 15px Oswald;background:var(--lime);color:#000;padding:2px 10px;z-index:3}
.svc.cta .btn{height:50px;padding:0 18px;font-size:16px;white-space:nowrap;margin-top:12px}.svc.cta{background:var(--lime);border-color:var(--lime);justify-content:center;padding:30px}.svc.cta h3{font-size:30px}.svc.cta p{color:#1c3b0e}
/* service animation primitives (all SVG, started when card is in view) */
.sc svg *{animation-play-state:paused}.svc.in .sc svg *{animation-play-state:running}
.a-spin{transform-box:fill-box;transform-origin:center;animation:spin 5s linear infinite}.a-spinr{transform-box:fill-box;transform-origin:center;animation:spin 7s linear infinite reverse}
.pist{animation:pist 1.2s ease-in-out infinite}.pist.b{animation-delay:-.6s}@keyframes pist{0%,100%{transform:translateY(0)}50%{transform:translateY(34px)}}
.wr{transform-box:fill-box;transform-origin:20% 80%;animation:wrench 2.2s ease-in-out infinite}@keyframes wrench{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(18deg)}}
.dropd{animation:dropd 2s ease-in infinite}@keyframes dropd{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}70%{transform:translateY(70px);opacity:1}71%,100%{opacity:0;transform:translateY(70px)}}
.fillo{animation:fillo 4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}@keyframes fillo{0%{transform:scaleY(.1)}70%,100%{transform:scaleY(.85)}}
.blink{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:.15}}
.scan{animation:scan 3s linear infinite}@keyframes scan{from{transform:translateY(0)}to{transform:translateY(-60px)}}
.jack{animation:jack 3.4s ease-in-out infinite;transform-box:fill-box}@keyframes jack{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.sq{animation:sq 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:right center}@keyframes sq{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.7)}}
.swapo{animation:swapo 4s ease-in-out infinite}@keyframes swapo{0%,20%{transform:translateX(0);opacity:1}45%,100%{transform:translateX(-120px);opacity:0}}
.swapn{animation:swapn 4s ease-in-out infinite}@keyframes swapn{0%,35%{transform:translateX(120px);opacity:0}65%,100%{transform:translateX(0);opacity:1}}
/* steps with driving car line */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;padding-top:70px}.steps .rd{position:absolute;left:5%;right:5%;top:24px;height:6px;background:repeating-linear-gradient(90deg,#333 0 18px,transparent 18px 30px)}
.steps .rd i{position:absolute;left:0;top:-18px;width:56px;height:40px;transition:left 2.4s cubic-bezier(.3,.7,.2,1)}.steps.in .rd i{left:calc(100% - 56px)}
.stp{background:var(--bk3);padding:30px;border-top:5px solid var(--lime);position:relative}.stp b{display:block;font:700 54px Oswald;color:var(--lime);line-height:1;margin-bottom:8px}.stp p{color:#B9C2B3;margin:0}
/* areas */
.areas{background:#050505 url(images/areas-bg.jpg) center/cover;color:#fff;position:relative}.areas::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.7)}.areas .wrap{position:relative}
.pins{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}.pin{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:14px 24px;font:600 22px Oswald;text-transform:uppercase;backdrop-filter:blur(6px)}
.pin i{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--lime);position:relative;animation:pinb 2.2s ease-in-out infinite}.pin:nth-child(2) i{animation-delay:.3s}.pin:nth-child(3) i{animation-delay:.6s}.pin:nth-child(4) i{animation-delay:.9s}
@keyframes pinb{50%{transform:rotate(-45deg) translate(5px,-5px)}}
/* why/stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.stat{background:#fff;border:1px solid var(--line);padding:28px;text-align:center}.stat b{display:block;font:700 56px Oswald;color:var(--gdk);line-height:1}.stat span{font:600 14px Oswald;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.why{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.why img{width:100%;aspect-ratio:4/3;object-fit:cover}.why ul{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:12px}.why li{display:flex;gap:12px}.why li::before{content:"";flex:none;width:22px;height:22px;margin-top:3px;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/70%}
/* reviews */
.rev{background:#fff;color:#111;padding:30px;border-left:6px solid var(--lime);max-width:760px;margin:0 auto}.rev p{font-size:20px;margin:0 0 14px}.rev b{font-family:Oswald;text-transform:uppercase}.rev small{color:var(--mut)}.fb{display:inline-flex;gap:8px;align-items:center;margin-top:20px;font:700 15px Oswald;color:var(--lime);text-decoration:none;letter-spacing:.06em;text-transform:uppercase}
/* faq */
details{border:1px solid var(--line);margin-bottom:10px;background:#fff}summary{padding:18px 22px;font:600 20px Oswald;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between}summary::after{content:"+";color:var(--gdk);font-size:26px;line-height:1;transition:transform .25s}details[open] summary::after{transform:rotate(45deg)}details p{margin:0;padding:0 22px 20px;color:var(--mut)}
/* cta + footer */
.ctab{background:var(--lime);padding:60px 0}.ctab .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}.ctab h2{margin:0}.ctab p{margin:6px 0 0;font-weight:600}
footer{background:#000;color:#B9C2B3;padding:60px 0 100px}footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}footer h4{font:700 20px Oswald;color:var(--lime);text-transform:uppercase;margin:0 0 12px}footer a{display:block;text-decoration:none;padding:3px 0}footer a:hover{color:var(--lime)}.big{font:700 34px Oswald;color:#fff;text-decoration:none}
.fine{border-top:1px solid #222;margin-top:34px;padding-top:18px;font-size:14px;text-align:center;color:#78826F}
.mbar{display:none}.wa{position:fixed;right:18px;bottom:18px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.35);animation:pulse 2.4s infinite}.wa svg{width:30px;height:30px;fill:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--d,0s),transform .8s var(--d,0s)}.reveal.in{opacity:1;transform:none}
@media(max-width:1000px){.hero .wrap,.why{grid-template-columns:1fr}.sgrid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr;padding-top:30px}.steps .rd{display:none}footer .wrap{grid-template-columns:1fr}
nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:10px 20px;box-shadow:0 12px 24px rgba(0,0,0,.14)}nav.open{display:flex}.menu{display:block}header .btn.hb{display:none}section{padding:60px 0}.util .wrap{justify-content:center}}
@media(max-width:700px){h1{font-size:clamp(34px,10vw,48px)}.hero{padding:56px 0 90px}.btns .btn{flex:1 1 100%}.sgrid{grid-template-columns:1fr}.logo{font-size:21px}.mark{width:40px;height:40px}.hero p.lead{font-size:17px}.card-q{padding:20px}.pin{font-size:18px;padding:12px 18px}.stat b{font-size:42px}
.mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:65}.mbar a{height:58px;display:flex;align-items:center;justify-content:center;font:700 18px Oswald;text-transform:uppercase;text-decoration:none;color:#fff;background:#000}.mbar a+a{background:var(--lime);color:#000}.wa{bottom:74px;right:12px;width:50px;height:50px}.util{display:none}.ctab .btns .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.hero h1 .ln span{transform:none}}