
:root {
  --bg: #080809; --surface: #0f1011; --surface-2:#151617; --text:#f8f8f5;
  --muted:#a2a3a8; --line:rgba(255,255,255,.10); --orange:#ff7424;
  --orange-2:#ffb24c; --success:#2cc96b; --radius:24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Inter, "Segoe UI", Arial, sans-serif; color:var(--text); background:var(--bg); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button, input, select, textarea { font: inherit; }
button { cursor:pointer; }
.container { width:min(1220px, calc(100% - 40px)); margin:auto; }
.eyebrow { color:var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase; }
.muted { color:var(--muted); }
.small { font-size:.88rem; }
.topbar { background:#111; border-bottom:1px solid var(--line); color:var(--muted); font-size:.84rem; }
.topbar .container { display:flex; justify-content:space-between; gap:16px; padding:10px 0; flex-wrap:wrap; }
.header { position:sticky; top:0; z-index:30; backdrop-filter:blur(16px); background:rgba(8,8,9,.92); border-bottom:1px solid var(--line); }
.header-row { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.logo { height:62px; width:auto; object-fit:contain; }
.nav { display:flex; align-items:center; gap:26px; color:#d8d8db; font-weight:700; font-size:.94rem; }
.nav a:hover { color:var(--orange); }
.header-actions { display:flex; align-items:center; gap:10px; }
.btn { border:1px solid var(--line); border-radius:13px; padding:14px 21px; display:inline-flex; gap:9px; align-items:center; justify-content:center; background:rgba(255,255,255,.04); color:#fff; font-weight:800; transition:.2s; }
.btn:hover { transform:translateY(-1px); border-color:rgba(255,116,36,.48); background:rgba(255,116,36,.08); }
.btn-primary { border:0; color:#090909; background:linear-gradient(100deg,var(--orange),var(--orange-2)); box-shadow:0 10px 32px rgba(255,116,36,.20); }
.btn-primary:hover { background:linear-gradient(100deg,#ff7d2e,#ffc16d); }
.btn-sm { padding:11px 15px; font-size:.9rem; }
.hero { position:relative; overflow:hidden; padding:70px 0 34px; }
.hero:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 84% 20%,rgba(255,116,36,.28),transparent 31%),radial-gradient(circle at 16% 80%,rgba(255,116,36,.12),transparent 31%); pointer-events:none; }
.hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,116,36,.28); background:rgba(255,116,36,.1); color:#ffcb9e; padding:10px 15px; border-radius:999px; font-size:.9rem; font-weight:800; }
.hero h1 { margin:23px 0 20px; font-size:clamp(3.25rem,5.8vw,5.35rem); letter-spacing:-.065em; line-height:1.03; }
.gradient-text { background:linear-gradient(90deg,var(--orange),#ffd08f,#fff); color:transparent; background-clip:text; }
.hero-copy { max-width:665px; color:#d2d3d7; font-size:1.08rem; line-height:1.85; }
.hero-sub { max-width:650px; color:var(--muted); line-height:1.8; margin:16px 0 0; font-size:.93rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.banner { position:relative; overflow:hidden; min-height:510px; padding:35px; border-radius:34px; border:1px solid rgba(255,116,36,.22); background:linear-gradient(145deg,#151616,#090909 55%,#050505); box-shadow:0 18px 80px rgba(255,116,36,.12); }
.banner:before { content:""; position:absolute; width:310px;height:310px; right:-120px; top:-110px; border-radius:50%; background:rgba(255,116,36,.24); filter:blur(55px); }
.banner:after { content:""; position:absolute; width:300px;height:2px; right:-40px; top:175px; transform:rotate(-25deg); background:linear-gradient(90deg,transparent,var(--orange),transparent); box-shadow:0 14px 0 rgba(255,255,255,.23); }
.banner-content { position:relative; z-index:1; }
.banner .logo { height:90px; margin-bottom:34px; }
.banner h2 { font-size:clamp(2.6rem,4vw,3.5rem); font-weight:900; font-style:italic; letter-spacing:-.05em; margin:16px 0 5px; }
.banner h2 span { color:var(--orange); }
.banner-note { border:1px solid rgba(255,116,36,.22); background:rgba(255,116,36,.07); border-radius:18px; padding:15px 17px; margin:30px 0 22px; color:#ffca9b; letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; font-weight:900; }
.stock-highlight { border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; align-items:end; }
.stock-number { font-size:3.2rem; font-weight:900; letter-spacing:-.05em; }
.stock-number span { color:var(--orange); }
.trust-grid { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:45px 0 52px; }
.trust-card { display:flex; gap:12px; align-items:center; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:18px; padding:16px; }
.icon { width:43px; height:43px; border-radius:13px; display:grid; place-items:center; background:rgba(255,116,36,.12); color:var(--orange-2); font-size:1.25rem; flex:none; }
.trust-card strong { display:block; font-size:.91rem; }
.trust-card span { display:block; color:var(--muted); margin-top:4px; font-size:.75rem; }
.section { padding:82px 0; }
.surface { background:rgba(255,255,255,.022); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
.section-head { max-width:720px; margin:0 auto 42px; text-align:center; }
.section-head.left { margin:0 0 38px; text-align:left; }
.section-head h2 { font-size:clamp(2rem,3.5vw,3.2rem); letter-spacing:-.045em; margin:14px 0 15px; line-height:1.14; }
.section-head p { color:var(--muted); line-height:1.8; margin:0; }
.between { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:38px; }
.between .section-head { margin-bottom:0; }
.vehicle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.vehicle-card { overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:25px; transition:.2s; }
.vehicle-card:hover { transform:translateY(-3px); border-color:rgba(255,116,36,.38); }
.vehicle-image { height:228px; position:relative; background:#121315; overflow:hidden; }
.vehicle-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.vehicle-card:hover .vehicle-image img { transform:scale(1.035); }
.badges { position:absolute; left:15px; top:15px; display:flex; gap:7px; }
.badge { border-radius:999px; padding:6px 11px; font-size:.68rem; font-weight:900; color:white; background:var(--success); }
.badge.featured { background:var(--orange); }
.badge.reserved { background:#ffbb34; color:#111; }
.badge.sold { background:#dd4650; }
.vehicle-body { padding:21px; }
.vehicle-make { font-size:.7rem; letter-spacing:.23em; color:var(--orange); font-weight:900; text-transform:uppercase; }
.vehicle-title-row { display:flex; gap:10px; justify-content:space-between; align-items:start; margin-top:9px; }
.vehicle-title { font-size:1.15rem; font-weight:900; line-height:1.35; }
.price { color:var(--orange-2); font-size:1.2rem; font-weight:900; white-space:nowrap; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:18px; }
.fact { background:rgba(255,255,255,.05); border-radius:10px; padding:10px; font-size:.75rem; color:#d6d6d8; display:flex; align-items:center; gap:6px; }
.vehicle-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.vehicle-actions .btn { padding:12px 9px; font-size:.84rem; }
.search-row { display:flex; gap:11px; flex-wrap:wrap; align-items:center; }
.control { min-height:49px; color:white; background:#111214; border:1px solid var(--line); border-radius:13px; padding:0 15px; outline:none; }
.control:focus { border-color:var(--orange); }
.search { min-width:245px; }
.filter-chip { border:1px solid rgba(255,116,36,.28); background:rgba(255,116,36,.09); color:#ffd4ad; border-radius:12px; padding:14px; font-weight:700; }
.empty { border:1px dashed rgba(255,116,36,.32); background:rgba(255,116,36,.035); border-radius:26px; padding:50px 25px; text-align:center; color:var(--muted); }
.ranges { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.range-card { width:100%; text-align:left; padding:30px; border-radius:25px; border:1px solid var(--line); color:white; background:rgba(255,255,255,.035); transition:.2s; }
.range-card:hover { border-color:rgba(255,116,36,.4); transform:translateY(-3px); }
.range-card h3 { margin:20px 0 11px; font-size:1.45rem; }
.range-card p { color:var(--muted); line-height:1.75; margin:0; font-size:.93rem; }
.range-link { display:inline-flex; color:var(--orange-2); font-weight:800; font-size:.9rem; margin-top:20px; }
.brands { border:1px solid var(--line); background:rgba(255,255,255,.026); border-radius:25px; padding:27px; margin-top:32px; }
.brand-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.brand-list span { border:1px solid var(--line); border-radius:999px; padding:9px 15px; color:#d6d6d9; font-size:.78rem; font-weight:700; }
.two-col { display:grid; grid-template-columns:.9fr 1.1fr; gap:45px; align-items:start; }
.steps { display:grid; gap:12px; }
.step { display:flex; gap:15px; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:18px; padding:17px; color:#d4d5d8; line-height:1.6; font-size:.92rem; }
.num { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#111;font-weight:900; flex:none; }
.form-card { border-radius:28px; border:1px solid rgba(255,116,36,.25); background:rgba(255,255,255,.035); padding:28px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.field.full { grid-column:1/-1; }
.field label { display:block; font-size:.7rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input, .field select, .field textarea { width:100%; background:#131416; color:white; border:1px solid var(--line); border-radius:12px; padding:13px 14px; outline:none; }
.field textarea { resize:vertical; min-height:105px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--orange); }
.consent { margin:16px 0; display:flex; gap:9px; align-items:start; color:var(--muted); font-size:.8rem; line-height:1.6; }
.story-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:25px; }
.panel { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:28px; padding:34px; }
.panel h2 { font-size:2.35rem; letter-spacing:-.04em; margin:14px 0 18px; }
.panel p { line-height:1.85; color:#cbcdd1; }
.people { display:grid; gap:16px; }
.person { border:1px solid rgba(255,116,36,.24); background:linear-gradient(145deg,rgba(255,116,36,.13),transparent); border-radius:23px; padding:25px; }
.person h3 { font-size:1.35rem; margin:11px 0 8px; }
.person p { color:var(--muted); line-height:1.75; font-size:.9rem; }
.review-delivery { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.review-card { border-radius:28px; padding:34px; border:1px solid rgba(255,116,36,.22); background:linear-gradient(135deg,rgba(255,116,36,.13),rgba(255,255,255,.024)); }
.review-card h2, .delivery-card h2 { margin:15px 0 14px; font-size:2.1rem; letter-spacing:-.04em; }
.review-card p, .delivery-card p { color:var(--muted); line-height:1.8; }
.delivery-card { border-radius:28px; padding:34px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.service-line { display:flex; gap:15px; margin-top:20px; }
.location-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:25px; }
.map-card { min-height:400px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,#121315,#080809); padding:28px; }
.map-card h3 { margin:16px 0 7px; font-size:1.3rem; }
.contact-stack { display:grid; gap:12px; }
.contact-row { display:flex; gap:15px; align-items:start; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:17px; padding:17px; }
.contact-row strong { display:block; }
.contact-row span { display:block; margin-top:4px; color:var(--muted); font-size:.9rem; line-height:1.55; }
.hours { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:17px; padding:19px; }
.hours-row { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:.9rem; margin:12px 0; }
.hours-row strong { color:#f3f3f3; }
.footer { border-top:1px solid var(--line); background:#050505; padding:52px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1.25fr .75fr .9fr .9fr; gap:35px; }
.footer .logo { height:70px; }
.footer p { color:var(--muted); line-height:1.8; font-size:.87rem; }
.footer h4 { color:var(--orange); font-size:.7rem; letter-spacing:.23em; text-transform:uppercase; margin:0 0 19px; }
.footer-links { display:grid; gap:13px; color:var(--muted); font-size:.9rem; }
.footer-links a:hover { color:var(--orange-2); }
.copyright { border-top:1px solid var(--line); margin-top:42px; padding-top:22px; display:flex; justify-content:space-between; gap:14px; color:#777980; font-size:.78rem; }
.floating { position:fixed; right:22px; bottom:20px; z-index:20; display:grid; gap:10px; }
.floating a { width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.whatsapp { background:#26d366; }
.instagram { background:linear-gradient(135deg,#fd1d1d,#e1306c,#f77737); }
.modal-backdrop { display:none; position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.83); backdrop-filter:blur(5px); overflow-y:auto; padding:20px; }
.modal-backdrop.open { display:flex; align-items:center; justify-content:center; }
.modal { width:min(700px,100%); max-height:min(92vh,900px); overflow:auto; border-radius:28px; background:#101112; border:1px solid var(--line); }
.modal-head { padding:23px 25px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; }
.modal-head h3 { margin:6px 0 0; font-size:1.7rem; }
.close { background:transparent; border:1px solid var(--line); color:white; height:40px; width:40px; border-radius:11px; }
.modal-body { padding:25px; }
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; margin-bottom:22px; }
.gallery img { height:100%; min-height:145px; width:100%; object-fit:cover; border-radius:14px; }
.gallery img:first-child { grid-row:span 2; min-height:298px; }
.specs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:17px 0; }
.spec { background:rgba(255,255,255,.05); border-radius:12px; padding:12px; color:#dedee0; font-size:.82rem; }
.status-message { margin-top:16px; border-radius:12px; padding:13px; background:rgba(44,201,107,.12); color:#b7f6ce; display:none; }
.status-message.show { display:block; }
.legal-page { max-width:850px; margin:auto; padding:65px 0 90px; }
.legal-page h1 { font-size:clamp(2.3rem,4vw,3.6rem); margin:14px 0 24px; }
.legal-page h2 { margin:32px 0 10px; font-size:1.3rem; }
.legal-page p, .legal-page li { color:#c7c9ce; line-height:1.9; }
.notice { position:fixed; z-index:70; left:50%; transform:translateX(-50%); bottom:22px; padding:13px 20px; border:1px solid rgba(255,116,36,.25); background:#121314; color:#ffe0c3; border-radius:999px; display:none; }
.notice.show { display:block; }
.admin-shell { min-height:100vh; background:#080809; }
.admin-container { width:min(1300px,calc(100% - 36px)); margin:auto; padding:35px 0 60px; }
.login-card { width:min(460px,100%); margin:64px auto; border:1px solid var(--line); background:#101112; border-radius:25px; padding:30px; }
.admin-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:22px; }
.admin-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.inventory-list { display:grid; gap:12px; max-height:1000px; overflow:auto; }
.inventory-row { display:grid; grid-template-columns:90px 1fr auto; gap:13px; padding:12px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.inventory-row img { width:90px;height:70px;object-fit:cover;border-radius:10px; }
.row-actions { display:flex; gap:6px; align-items:center; }
.row-actions button { border:1px solid var(--line); background:transparent; color:white; border-radius:9px; padding:8px; }
.danger { color:#ff8d93 !important; }
.hidden { display:none !important; }
.admin-warning { padding:13px; border:1px solid rgba(255,180,70,.3); border-radius:12px; background:rgba(255,180,70,.09); color:#ffd79a; font-size:.84rem; line-height:1.7; margin:15px 0; }
@media (max-width:1020px) {
 .nav { display:none; }
 .hero-grid,.two-col,.story-grid,.review-delivery,.location-grid,.admin-grid { grid-template-columns:1fr; }
 .trust-grid,.vehicle-grid,.ranges { grid-template-columns:repeat(2,1fr); }
 .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:650px) {
 .container { width:min(100% - 28px,1220px); }
 .topbar .container { justify-content:center; text-align:center; }
 .header-row { min-height:76px; gap:9px; }
 .logo { height:46px; }
 .header-actions .btn:first-child { display:none; }
 .hero { padding-top:43px; }
 .hero h1 { font-size:2.7rem; }
 .banner { min-height:unset; padding:25px; }
 .banner .logo { height:68px; }
 .trust-grid,.vehicle-grid,.ranges,.form-grid,.review-delivery,.specs,.footer-grid { grid-template-columns:1fr; }
 .between { flex-direction:column; align-items:start; }
 .search-row { width:100%; }
 .control { width:100%; }
 .gallery { display:block; }
 .gallery img { margin-bottom:8px; min-height:unset !important; height:auto; }
 .copyright { flex-direction:column; }
}
