:root {
  --acid: #29e9ff;
  --x-blue: #087cff;
  --x-cyan: #18dfff;
  --x-green: #30e66c;
  --x-yellow: #f7df38;
  --x-red: #ff3b32;
  --chrome: #eef3f5;
  --panel: rgba(15, 21, 27, .78);
}

body { background: #070a0d; }

body::before {
  background: linear-gradient(90deg, #0786ff, #19dfff 23%, #33e55d 46%, #f6dc35 68%, #ff3c2f);
  content: "";
  height: 2px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.noise { display: none; }
.wrap { width: min(1240px, calc(100% - 56px)); }

.nav {
  backdrop-filter: blur(18px);
  background: rgba(7, 10, 13, .68);
  border-bottom-color: rgba(180, 210, 225, .12);
  height: 104px;
  position: relative;
  z-index: 10;
}

.brand-image img { display: block; height: 78px; max-width: 280px; object-fit: contain; object-position: left center; }
.nav nav { gap: 48px; }
.nav nav a { color: #9ba9b2; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.nav nav a:hover { color: #fff; text-shadow: 0 0 16px #19dfff; }
.nav-cta { background: linear-gradient(90deg, #35e86a, #19dfff); background-clip: text; color: transparent; letter-spacing: .4px; }

.hero { gap: 64px; grid-template-columns: 47% 53%; min-height: 720px; }
.hero-copy { padding: 90px 0; position: relative; z-index: 2; }
.eyebrow, .kicker { background: linear-gradient(90deg, var(--x-cyan), var(--x-green), var(--x-yellow)); background-clip: text; color: transparent; }
.eyebrow span { background: linear-gradient(90deg, var(--x-blue), var(--x-cyan)); box-shadow: 0 0 10px var(--x-cyan); }
.hero h1 { color: var(--chrome); font-size: clamp(55px, 6.2vw, 88px); letter-spacing: -5.5px; text-shadow: 0 10px 45px rgba(0,0,0,.55); }
.hero h1 em { background: linear-gradient(90deg, #17baff 0%, #38e97a 42%, #f0dc39 68%, #ff4a37 100%); background-clip: text; color: transparent; -webkit-text-stroke: 0; }
.hero-copy > p { color: #9aabb5; font-size: 14px; max-width: 560px; }

.primary {
  background: linear-gradient(105deg, #087cff, #17dfff 47%, #32e56c);
  box-shadow: 0 12px 35px rgba(0, 150, 255, .2), inset 0 1px rgba(255,255,255,.35);
  color: #031014;
  overflow: hidden;
  position: relative;
}
.primary:hover { box-shadow: 0 14px 45px rgba(23, 215, 255, .36); transform: translateY(-2px); }
.text-link { border-image: linear-gradient(90deg, #16dfff, #ff4337) 1; }
.text-link span { color: var(--x-cyan); }
.hero-stats { border-left: 1px solid rgba(41, 233, 255, .3); gap: 0; }
.hero-stats div { min-width: 130px; padding-left: 20px; }
.hero-stats strong { background: linear-gradient(#fff, #81919b); background-clip: text; color: transparent; }

.hero-art {
  background: linear-gradient(145deg, rgba(22,31,39,.86), rgba(5,8,11,.94));
  border: 1px solid rgba(97, 193, 255, .2);
  box-shadow: 0 32px 90px #000b, inset 0 0 80px rgba(3, 127, 255, .07);
  clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
  height: 530px;
  isolation: isolate;
}
.hero-art::before { background: conic-gradient(from 210deg, #087cff, #1ce5ff, #35e869, #f5dd35, #ff3b32, #087cff); content: ""; filter: blur(65px); inset: 18%; opacity: .22; position: absolute; }
.hero-art::after { background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.055) 50%, transparent 70%); content: ""; inset: 0; position: absolute; transform: translateX(-70%); animation: glassSweep 7s ease-in-out infinite; }
@keyframes glassSweep { 0%,30%{transform:translateX(-80%)} 70%,100%{transform:translateX(90%)} }
.hero-art .car, .hero-art .speed-lines { display: none; }
.hero-brand-logo { filter: drop-shadow(0 0 20px rgba(14, 139, 255, .18)); left: 50%; opacity: 1; position: absolute; top: 49%; transform: translate(-50%, -50%); width: 94%; z-index: 1; }
.edition { color: #72818a; z-index: 3; }
.edition b { color: var(--x-cyan); text-shadow: 0 0 12px var(--x-blue); }
.art-caption { color: #86949d; z-index: 3; }
.art-caption span:first-child { color: var(--x-cyan); }

.ticker { background: linear-gradient(90deg, #087cff, #17dfff 24%, #35e869 47%, #f5dc35 70%, #ff3b32); box-shadow: 0 0 36px rgba(19, 174, 255, .18); color: #02080b; padding: 15px; }

.collection { padding: 135px 0; }
.section-head h2, .faq h2, .quality h2 { background: linear-gradient(180deg, #fff, #83929b); background-clip: text; color: transparent; }
.section-head p { color: #788995; }
.filter-row button { background: rgba(13, 20, 25, .7); border-color: rgba(139, 183, 207, .16); color: #72838d; }
.filter-row button.active { background: linear-gradient(100deg, #087cff, #19dfff); border-color: transparent; box-shadow: 0 0 24px rgba(10, 151, 255, .22); color: #031015; }

.vehicle-card { background: linear-gradient(160deg, rgba(20,28,34,.92), rgba(7,10,13,.98)); border-color: rgba(135, 183, 207, .14); overflow: hidden; position: relative; }
.vehicle-card::before { background: linear-gradient(90deg, #087cff, #1ce4ff, #34e766, #f5dc35, #ff3c32); content: ""; height: 2px; left: 0; opacity: .55; position: absolute; right: 0; top: 0; z-index: 4; }
.vehicle-card:hover { border-color: rgba(30, 211, 255, .42); box-shadow: 0 22px 60px #0008, 0 0 30px rgba(0, 145, 255, .09); transform: translateY(-8px); }
.vehicle-visual { background: radial-gradient(circle at 55% 45%, #233442, #10171c 58%, #080b0d); }
.vehicle-visual.has-photo { background-position: center; background-size: cover; filter: none; }
.vehicle-visual.has-photo::after { background: linear-gradient(0deg, #070a0de6, transparent 62%); }
.vehicle-info h3 { background: linear-gradient(#fff, #9aa8b1); background-clip: text; color: transparent; }
.price { color: #e9f8ff; }
.price small, .spec-row { color: #667985; }
.spec-row b { color: var(--x-cyan); }
.type, .buy-button span { color: var(--x-cyan); }
.buy-button { background: rgba(11,16,20,.85); border-top-color: rgba(135,183,207,.13); }
.buy-button:hover { background: linear-gradient(90deg, #087cff, #18dfff, #32e56c); color: #031014; }

.quality { background: linear-gradient(135deg, #0d1419, #070a0d 55%, #111317); border-bottom: 1px solid rgba(255,58,48,.12); border-top: 1px solid rgba(28,222,255,.14); color: var(--chrome); overflow: hidden; position: relative; }
.quality::before { background: radial-gradient(circle, rgba(0,146,255,.14), transparent 65%); content: ""; height: 600px; left: -250px; position: absolute; top: -200px; width: 600px; }
.quality .kicker { color: transparent; }
.quality-list > div { border-top-color: rgba(133,177,200,.16); }
.quality-list b { color: var(--x-cyan); }
.quality-list p { color: #778994; }

.faq details { border-top-color: rgba(136,180,204,.16); }
.faq summary span { color: var(--x-cyan); text-shadow: 0 0 12px #087cff; }
footer { background: #050709; border-top-color: rgba(130,176,200,.15); }
.footer-brand img { height: 100px; }
.legal { border-top-color: rgba(130,176,200,.12); }

.modal-card { background: linear-gradient(145deg, #121a20, #080b0e); border-left: 1px solid rgba(24,211,255,.25); }
.order-line { border-color: rgba(126,174,198,.18); }
.success-mark { border-image: linear-gradient(135deg, #087cff, #31e46d) 1; color: var(--x-cyan); }

.media-button{background:rgba(4,9,12,.78);border:1px solid rgba(29,218,255,.35);bottom:14px;color:#dffaff;cursor:pointer;font:800 8px Manrope;letter-spacing:1.5px;padding:9px 11px;position:absolute;right:14px;z-index:5}.media-button span{color:var(--x-cyan)}.media-button:hover{background:linear-gradient(90deg,#087cff,#18dfff);color:#031014}.gallery-modal{display:none;inset:0;position:fixed;z-index:80}.gallery-modal.open{display:block}.gallery-backdrop{backdrop-filter:blur(18px);background:rgba(1,4,7,.9);inset:0;position:absolute}.gallery-panel{background:linear-gradient(145deg,#111a20,#06090c);border:1px solid rgba(54,204,255,.22);box-shadow:0 35px 100px #000;left:50%;max-height:92vh;overflow:auto;padding:18px;position:absolute;top:50%;transform:translate(-50%,-50%);width:min(1120px,94vw)}.gallery-panel:before{background:linear-gradient(90deg,#087cff,#18dfff,#34e76a,#f5dc35,#ff3b32);content:"";height:2px;left:0;position:absolute;right:0;top:0}.gallery-close{background:#090e12;border:1px solid #344854;color:#fff;cursor:pointer;font-size:25px;height:42px;position:absolute;right:28px;top:28px;width:42px;z-index:4}.gallery-stage{background:#030506;display:grid;height:min(62vh,680px);overflow:hidden;place-items:center}.gallery-stage img,.gallery-stage video{height:100%;object-fit:contain;width:100%}.gallery-meta{align-items:center;display:flex;justify-content:space-between;padding:24px 8px 14px}.gallery-meta h2{font:600 28px Space Grotesk;margin:6px 0 0}.gallery-controls{align-items:center;display:flex;gap:13px}.gallery-controls button{background:#0b1217;border:1px solid #2c414d;color:#d9f7ff;cursor:pointer;height:38px;width:42px}.gallery-controls button:hover{border-color:var(--x-cyan);color:var(--x-cyan)}.gallery-count{color:#71838e}.gallery-thumbs{display:flex;gap:10px;overflow-x:auto;padding:4px 8px 10px}.gallery-thumbs button{background:#090e12;border:1px solid #263943;cursor:pointer;display:grid;flex:0 0 100px;height:62px;overflow:hidden;padding:0;place-items:center}.gallery-thumbs button.active{border-color:var(--x-cyan);box-shadow:0 0 16px rgba(24,223,255,.22)}.gallery-thumbs img{height:100%;object-fit:cover;width:100%}.gallery-thumbs small{color:#95a9b4;font-size:7px;letter-spacing:1px}.play-icon{color:var(--x-cyan);font-size:18px}

@media (max-width: 850px) {
  .hero { gap: 20px; }
  .hero-art { height: 450px; }
  .brand-image img { height: 68px; max-width: 240px; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 28px, 1240px); }
  .nav { height: 82px; }
  .brand-image img { height: 54px; max-width: 190px; }
  .hero { padding-top: 25px; }
  .hero h1 { font-size: 49px; letter-spacing: -3.5px; }
  .hero-art { height: 330px; }
  .hero-stats div { min-width: 0; padding-left: 12px; }
  .footer-brand img { height: 76px; }
  .gallery-panel{padding:10px;width:96vw}.gallery-stage{height:46vh}.gallery-meta{align-items:flex-start;gap:16px}.gallery-meta h2{font-size:22px}.gallery-close{right:18px;top:18px}.gallery-thumbs button{flex-basis:78px;height:50px}
}