/* H-MOTORS 1.3 — Premium showroom UI / desktop + mobile. Keeps existing app and API intact. */
:root{--red:#a1e72e;--red2:#81c927;--bg:#070a0b;--panel:#101719;--panel2:#182024;--line:rgba(205,230,220,.12);--muted:#9ca7a9;--white:#f7f8f9;--display:'Manrope',sans-serif}
body{background:radial-gradient(ellipse at 73% 29%,#10201a 0,transparent 38%),#070a0b}
.container{max-width:1420px;padding-inline:48px}
.topbar{background:rgba(5,8,10,.94);box-shadow:0 8px 40px rgba(0,0,0,.33);border-bottom:1px solid #ffffff13}
.nav-shell{height:74px}
.brand-mark{font-weight:900;letter-spacing:-5px;font-size:42px;text-shadow:0 2px 12px #0006}
.brand-sub{letter-spacing:3.2px}
.desktop-nav{gap:31px}.desktop-nav a{color:#d7dcdd;font-size:12px}.desktop-nav a.active:after,.desktop-nav a:hover:after{bottom:-27px}
.btn{border-radius:8px}.nav-actions .btn{padding-inline:18px}
.hero{height:680px;min-height:650px;border-bottom:1px solid #ffffff12}
.hero-photo{background-position:center 46%;filter:brightness(.79) saturate(.87) contrast(1.06);transform:scale(1.02);animation:heroZoom 14s ease-out both}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 43%,transparent 7%,rgba(0,0,0,.06) 45%,rgba(0,0,0,.35) 95%);pointer-events:none;z-index:-1}
.hero-tint{background:linear-gradient(90deg,#040809f7 0%,#05090aea 24%,#040708af 45%,#070a0b12 85%),linear-gradient(0deg,#070a0b 1%,transparent 35%),linear-gradient(180deg,#07090b55,transparent 20%)}
.hero:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 63%,rgba(161,231,46,.03)),radial-gradient(circle at 77% 58%,rgba(161,231,46,.13),transparent 30%);z-index:-1}
.hero-layout{align-items:center;padding-bottom:88px}.hero-copy{max-width:685px;width:62%}
.hero-index{margin-top:28px;font-size:10px;letter-spacing:2.2px;display:flex;gap:10px;align-items:center;color:#f5f8f4}
.hero-live-dot{width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 0 5px #a1e72e21}
.hero h1{font-size:clamp(54px,5.7vw,84px);line-height:1.08;letter-spacing:-4.6px;max-width:700px;margin:24px 0}
.hero-copy p{font-size:16px;max-width:480px;line-height:1.75;color:#c9d0cf}
.hero-cta{margin-top:30px;margin-bottom:35px}
.hero-benefits{gap:24px;padding-top:23px;border-top:1px solid #ffffff1f;max-width:610px}.hero-benefits span{font-size:11px}.hero-benefits svg{color:var(--red)}
.hero-side{display:none}
.hero-stats{position:absolute;right:max(4%,calc((100vw - 1360px)/2));bottom:119px;display:flex;gap:5px;flex-direction:column;align-items:flex-end;z-index:1;text-shadow:0 3px 15px #000;pointer-events:none}
.hero-stats span{font:900 27px var(--display);letter-spacing:5px;color:#fff}.hero-stats span b{color:var(--red)}.hero-stats small{font:800 9px var(--display);letter-spacing:3px;color:#e9efee}
.hero-bottom{bottom:49px}.hero-progress{position:absolute;height:2px;width:100%;top:-20px;left:0;background:rgba(255,255,255,.13)}.hero-progress>span{width:25%;height:100%;display:block;background:var(--red);box-shadow:0 0 16px var(--red)}
.hero-tag,.scroll-prompt{font-size:9px;letter-spacing:2px}
.finder-wrap{margin-top:-35px;max-width:1420px}.finder{border:1px solid #59645e80;box-shadow:0 35px 75px #000b,0 0 0 1px #a1e72e08 inset;border-radius:16px;padding:28px 32px 31px;background:linear-gradient(125deg,rgba(29,38,40,.98),rgba(11,17,19,.98))}
.finder-header{padding-bottom:5px}.finder h2{font-size:27px}.finder-total{font-size:11px;color:#b6c0c0}.tabs{gap:9px}.tab{padding:9px 17px}
.search-grid{grid-template-columns:1.15fr 1.15fr .85fr 1fr auto;gap:14px}.search-grid select{min-height:50px;background:#0c1013;border-color:#3d4747}.search-btn{min-height:50px;padding-inline:25px}
.brands-section{padding-top:50px;padding-bottom:18px}.brands-rail-header{display:flex;justify-content:space-between;align-items:center;padding:0 8px 15px}
.brand-strip-label{text-align:left;color:#a5aaae;font-size:10px;letter-spacing:2.7px}.brand-rail-hint{color:#748082;font-size:9px;letter-spacing:2px;font-weight:800}.brand-rail-hint span{color:var(--red);font-size:17px;padding-left:4px}
.brands-slider{display:flex;align-items:center;gap:0;background:linear-gradient(140deg,#f4f5f4,#d9dedc);border-radius:13px;box-shadow:0 25px 42px #0008,0 1px 2px #fff inset;border:1px solid #ffffffaa;overflow:hidden;position:relative}
.brand-arrow{width:48px;min-width:48px;align-self:stretch;color:#454e4b;background:transparent;border:none;font:300 37px/1 var(--display);z-index:3;transition:.2s}.brand-arrow:hover{color:#101815;background:#ffffffa0}
.brand-strip{display:flex;align-items:stretch;justify-content:flex-start;flex:1;min-width:0;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;gap:0;margin:0;padding:7px 0;filter:none}.brand-strip::-webkit-scrollbar{display:none}
.brand-loading{color:#171e1a;padding:28px}
.brand-item{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-width:146px;max-width:146px;padding:9px 12px 7px;border:0;background:transparent;transition:background .24s,transform .24s;cursor:pointer;color:#202828;border-right:1px solid #00000012}
.brand-item:hover,.brand-item.selected{background:#ffffffdd}.brand-item:hover .brand-symbol{transform:translateY(-3px) scale(1.05)}.brand-item.no-stock{opacity:.45}.brand-item.no-stock:hover{opacity:.85}
.brand-symbol{width:55px;height:48px;display:flex;align-items:center;justify-content:center;transition:transform .25s}.brand-symbol img{width:100%;height:100%;object-fit:contain;filter:grayscale(1)}.brand-symbol b{font-size:30px}.brand-name{font:800 10px/1.3 var(--display);text-align:center;white-space:nowrap;letter-spacing:-.15px;color:#252d2d}.brand-active-dot{width:4px;height:4px;background:#80bd1e;border-radius:50%;position:absolute;top:8px;right:11px}.brand-item.selected:after{content:'';position:absolute;inset:auto 22px 0;height:3px;background:#7eba19;border-radius:3px 3px 0 0}
.inventory{padding-top:82px;padding-bottom:70px}.section-head{margin-bottom:32px}.section-head h2{font-size:clamp(36px,4.3vw,60px);letter-spacing:-2.7px}.section-head p{font-size:14px;color:#adb6b8;margin-top:18px}.inventory-tools{margin-bottom:6px}
.inventory-tools select{background:#11171b;border-color:#42504c}.inventory-featureline{padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(105deg,#17281f,#121a1b 45%,#161d1e);border:1px solid #a1e72e32;border-radius:10px;margin-bottom:24px}
.featureline-copy{display:flex;align-items:center;gap:13px}.featureline-icon{background:#a1e72e1d;color:var(--red);width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:21px}.featureline-copy div{display:flex;gap:2px;flex-direction:column}.featureline-copy b{font:800 11px var(--display);letter-spacing:1.9px;color:#e9efe9}.featureline-copy div span{font-size:11px;color:#9da9a5}.featureline-right{font:800 10px var(--display);letter-spacing:1.2px;color:#aeb6b3}.featureline-right span{color:var(--red);font-size:20px;margin-left:5px}
.car-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;align-items:stretch}
.car-card{border-radius:13px;background:linear-gradient(165deg,#192123,#0c1012 85%);border:1px solid #36413f;box-shadow:0 13px 32px #0006;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;isolation:isolate}
.car-card:hover{transform:translateY(-8px);box-shadow:0 25px 65px #000c,0 0 25px #a1e72e0d;border-color:#97b37c}
.car-image-wrap{height:232px;background:linear-gradient(120deg,#121918,#28312e);isolation:isolate}
.car-image-wrap:after{inset:55% 0 0;z-index:0;background:linear-gradient(0deg,#0a1113b8,transparent)}
.car-image{object-fit:cover;object-position:center;filter:brightness(.95) saturate(.97);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}.car-card:hover .car-image{transform:scale(1.075);filter:brightness(1.09)}
.image-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;flex-direction:column;z-index:-1;color:#8c9f96;font-size:10px;letter-spacing:2px;font-weight:800}.image-fallback svg{width:42px;height:42px;color:var(--red)}.image-unavailable .image-fallback{z-index:0}
.card-image-link{position:absolute;inset:45px 0 30px;border:0;background:transparent;z-index:1;cursor:pointer}
.card-badge{left:15px;top:15px;background:var(--red);color:#122007;border-radius:5px;padding:8px 12px;font-size:9px;font-weight:900;letter-spacing:.7px;box-shadow:0 5px 12px #0004;z-index:4;display:flex;align-items:center;gap:6px}.badge-star{font-size:13px}
.favorite-btn{z-index:5;right:12px;top:12px;border-radius:9px;width:38px;height:38px;background:#0b1011bd;border-color:#e9efe955}.favorite-btn:hover{background:#e6ebe6;color:#162017}.favorite-btn.is-fav{color:var(--red)}.favorite-btn.is-fav svg{fill:#a1e72e44}
.image-bottom-meta{position:absolute;bottom:12px;left:15px;right:15px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:2;font-size:11px;color:#f5f7f8;text-shadow:0 1px 4px #0009;font-weight:700}.image-bottom-meta span{display:flex;align-items:center;gap:5px}.image-bottom-meta .icon{width:15px;height:15px;color:var(--red)}
.car-info{padding:19px 18px 17px}.card-title-group{min-height:75px}.car-make{font:800 10px var(--display);letter-spacing:1.9px;color:var(--red);text-transform:uppercase}.car-make>span{color:#727e79;padding:0 4px}.car-info h3{font:800 19px/1.28 var(--display);letter-spacing:-.65px;margin:9px 0 12px;min-height:0;color:#fff}
.car-meta{display:flex;gap:7px;flex-wrap:wrap;border:none;padding-bottom:0}.car-meta span{padding:6px 8px;border:1px solid #36413f;border-radius:6px;background:#222a2b;color:#bcc9c4;font-size:10px;white-space:nowrap;gap:5px}.car-meta .icon{width:13px;height:13px;color:#d3ddd2}
.price-block{display:flex;justify-content:space-between;align-items:center;padding:16px 0 13px;margin-top:18px;border-top:1px solid #ffffff1b}.card-price-label{margin-top:0;color:#81918c;font:800 9px var(--display);letter-spacing:1.3px}.card-price{font:900 clamp(21px,2.1vw,27px) var(--display);margin:3px 0 0;letter-spacing:-1px}.price-chevron{display:grid;place-items:center;width:33px;height:33px;border:1px solid #3a4c3b;color:var(--red);border-radius:50%;font-size:20px}
.card-actions{grid-template-columns:1fr 45px;gap:8px}.card-actions .btn{min-height:43px;font-size:11px;justify-content:space-between;padding:10px 13px}.btn-ghost{background:#222b2a;border-color:#4b5e4e;color:var(--red);border-radius:8px}.btn-ghost:hover{background:#a1e72e;color:#101810}
.inventory-end{padding:36px 0 0;display:flex;align-items:center;justify-content:center;gap:15px;color:#acb8b4;font-size:13px}.inventory-end .btn{min-height:40px;padding:10px 15px}
.finance-section{border-block:1px solid #a1e72e21}
.footer{background:#080b0d}
.reveal{will-change:transform,opacity}
@media(min-width:1550px){.hero{height:720px}.hero h1{font-size:88px}.car-image-wrap{height:250px}}
@media(max-width:1280px){.container{padding-inline:30px}.hero h1{font-size:64px}.car-grid{grid-template-columns:repeat(3,1fr)}.car-image-wrap{height:248px}.brand-item{min-width:132px;max-width:132px}.brand-arrow{width:40px;min-width:40px}}
@media(max-width:980px){.desktop-nav{gap:15px}.hero{height:650px}.hero-copy{width:75%}.hero h1{font-size:58px;letter-spacing:-3px}.hero-stats{display:none}.car-grid{grid-template-columns:repeat(2,1fr)}.car-image-wrap{height:265px}.search-grid{grid-template-columns:repeat(4,1fr)}.search-btn{grid-column:span 4}.inventory{padding-top:65px}}
@media(max-width:760px){
 .container{padding-inline:19px}.nav-shell{height:64px}.nav-actions .btn{display:none}.brand-mark{font-size:38px}.brand-sub{font-size:9px}.hero{min-height:760px;height:760px}.hero-photo{inset:0;background-position:63% 10%;filter:brightness(.78) contrast(1.09);transform:scale(1.04)}
 .hero-tint{background:linear-gradient(0deg,#070a0b 0%,#070a0bf0 18%,#070a0bd2 43%,#070a0b2e 76%,#070a0b42 100%),linear-gradient(90deg,#070a0b80,#070a0b20)}
 .hero-layout{align-items:flex-end;padding-top:275px;padding-bottom:85px;min-height:760px}.hero-copy{width:100%;max-width:100%}.hero-index{font-size:8px;letter-spacing:1.3px;margin-top:13px}.hero h1{font-size:clamp(39px,9.8vw,61px);line-height:1.09;letter-spacing:-2.3px;margin:13px 0 16px}.hero-copy p{font-size:13px;line-height:1.65;color:#d5d9d7;margin:0}.hero-cta{margin:22px 0 25px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.hero-cta .btn{white-space:normal;line-height:1.3;text-align:center;min-height:51px;padding:11px 7px;font-size:11px}.hero-cta svg{width:15px}.hero-benefits{padding-top:17px;gap:10px;justify-content:space-between}.hero-benefits span{font-size:9px;gap:4px}.hero-benefits svg{width:17px;height:17px}
 .hero-bottom{bottom:21px}.hero-tag,.scroll-prompt{font-size:8px}.hero-progress{top:-15px}
 .finder-wrap{margin-top:-1px}.finder{padding:21px 16px 19px;border-radius:12px}.finder h2{font-size:23px}.tabs{gap:3px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tab{font-size:10px;white-space:nowrap;padding:9px 11px}.search-grid{grid-template-columns:1fr 1fr;gap:10px}.search-grid label{font-size:11px}.search-grid select{min-height:45px}.search-btn{grid-column:span 2;min-height:45px}
 .brands-section{padding-top:30px;padding-bottom:0}.brands-rail-header{padding-bottom:12px}.brand-strip-label{font-size:8px;letter-spacing:1.6px}.brand-rail-hint{font-size:8px;letter-spacing:0}.brands-slider{border-radius:10px}.brand-arrow{width:27px;min-width:27px;font-size:28px}.brand-item{min-width:102px;max-width:102px;gap:3px;padding:8px 6px 9px}.brand-symbol{width:48px;height:45px}.brand-name{font-size:9px}
 .inventory{padding-top:59px}.section-head h2{font-size:clamp(34px,8vw,45px);letter-spacing:-1.9px}.section-head p{font-size:13px;margin-top:10px}.inventory-featureline{padding:13px;gap:8px;margin-bottom:19px}.featureline-icon{width:31px;height:31px}.featureline-copy{gap:10px}.featureline-copy b{font-size:10px;letter-spacing:1.1px}.featureline-copy div span{font-size:10px}.featureline-right{display:none}.inventory-tools{margin-top:21px}.car-grid{grid-template-columns:1fr;gap:20px}.car-image-wrap{height:auto;aspect-ratio:1.63}.car-info{padding:20px}.card-title-group{min-height:0}.car-info h3{font-size:21px}.car-meta{display:flex;gap:7px}.car-meta span{padding:7px 9px;font-size:11px}.card-price{font-size:28px}.card-actions .btn{min-height:47px;font-size:12px}.card-badge{top:14px;left:14px;font-size:10px}.inventory-end{flex-direction:column;gap:10px;padding-top:29px;text-align:center}.demo-note{font-size:10px;line-height:1.55}
 .footer-bottom{padding-bottom:90px}.bottom-bar{box-shadow:0 -4px 23px #0009}
}
@media(min-width:540px) and (max-width:760px){.car-grid{grid-template-columns:repeat(2,1fr);gap:12px}.car-image-wrap{aspect-ratio:1.4}.car-info{padding:12px}.car-info h3{font-size:16px}.car-meta span{font-size:9px}.card-price{font-size:21px}}
@media(max-width:385px){.hero{height:740px;min-height:740px}.hero-layout{min-height:740px;padding-top:230px}.hero h1{font-size:38px}.hero-benefits span{font-size:8px}.brand-arrow{width:25px;min-width:25px}.search-grid{grid-template-columns:1fr 1fr}.tab{font-size:9px;padding:8px 6px}}
@media(hover:none){.car-card:hover{transform:none}.car-card:hover .car-image{transform:none}.brand-item:hover .brand-symbol{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-photo{animation:none}.reveal{opacity:1;transform:none}}
/* The original style sets flex-wrap:wrap for text-only brands. Keep the premium rail strictly one line. */
.brands-section .brand-strip{flex-wrap:nowrap!important;flex-direction:row;align-items:stretch}
.brands-section .brand-item{flex:0 0 146px}
@media(max-width:1280px){.brands-section .brand-item{flex-basis:132px}}
@media(max-width:760px){.brands-section .brand-item{flex-basis:102px}}