:root{
  --brand:#00c2ff;
  --brand2:#0a84ff;
  --bg:#070A0F;
  --card:#0e1424;
  --muted:#a8b3cf;
  --text:#eaf0ff;
}

html,body{height:100%}
body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(0,194,255,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(10,132,255,.20), transparent 60%),
              linear-gradient(180deg, #050712 0%, #070A0F 100%);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.navbar-glass{
  background: rgba(7,10,15,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-badge{
  width:42px;height:42px;border-radius:12px;
  background: linear-gradient(135deg, rgba(0,194,255,.25), rgba(10,132,255,.25));
  display:grid;place-items:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
}

.hero{ padding: 56px 0 28px; }
.hero h1{
  font-size: clamp(28px, 4vw, 46px);
  line-height:1.05;
  letter-spacing:-.02em;
}
.hero p{color: var(--muted); font-size: 1.05rem}

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: none;
  color:#03101b;
  font-weight:700;
  box-shadow: 0 10px 25px rgba(0,194,255,.18);
}
.btn-brand:hover{filter:brightness(1.05)}
.btn-ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
}
.btn-ghost:hover{background: rgba(255,255,255,.09); color: var(--text)}

.card-glass{
  background: rgba(14,20,36,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border-radius: 20px;
}

.section{padding: 40px 0}
.section-title{ font-size: 1.25rem; letter-spacing: .02em; }
.muted{color: var(--muted)}
.swiper{border-radius: 20px; overflow:hidden; border:1px solid rgba(255,255,255,.10)}
.swiper-slide img{width:100%; height: 420px; object-fit: cover}
@media (max-width: 768px){ .swiper-slide img{height: 260px} }

.vehicle-card img{
  height: 180px; width:100%; object-fit: cover;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
}
.vehicle-meta{color:var(--muted); font-size:.95rem}
.vehicle-price{font-weight:800; font-size:1.05rem}
.hr-soft{border-color: rgba(255,255,255,.10)}
.footer{
  padding: 32px 0;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,.08);
}
.badge-soft{
  background: rgba(0,194,255,.14);
  border:1px solid rgba(0,194,255,.25);
  color: #bfefff;
}

.gallery-card img{width:100%;height:220px;object-fit:cover;display:block}


.vehicle-pricelist{
  position:relative;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(5,10,28,.96) 0%, rgba(8,14,34,.94) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(122, 213, 255, .18);
  overflow:hidden;
}
.vehicle-pricelist::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,194,255,.05), transparent 32%);
  pointer-events:none;
}
.vehicle-pricelist-head{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background: linear-gradient(180deg, #0b55db 0%, #0a39b6 52%, #081f72 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.vehicle-pricelist-head::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 35%, rgba(255,255,255,.08));
  mix-blend-mode:screen;
  pointer-events:none;
}
.vehicle-pricelist-badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  letter-spacing:.18em;
  font-weight:800;
  color:#eef7ff;
}
.vehicle-pricelist-year{
  position:relative;
  z-index:1;
  font-size:.78rem;
  font-weight:700;
  color:#d8ecff;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:6px 10px;
}
.vehicle-pricelist-imagewrap{
  padding:22px 22px 8px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.16) 0, rgba(255,255,255,.06) 22%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.vehicle-pricelist .vehicle-pricelist-imagewrap img{
  height:230px;
  width:100%;
  object-fit:contain;
  border-radius:0;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
}
.vehicle-title-wrap{min-height:72px}
.vehicle-name-lg{
  font-size:1.3rem;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.vehicle-meta.chips{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.vehicle-meta.chips span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:.84rem;
}
.vehicle-short-desc{
  min-height:42px;
  font-size:.94rem;
}
.price-panel{
  border-radius:18px;
  padding:12px;
  background: linear-gradient(180deg, #1ab4ff 0%, #118df4 100%);
  box-shadow: 0 16px 28px rgba(0,132,255,.22);
  color:#ffffff;
}
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.price-row:last-child{border-bottom:none;padding-bottom:4px}
.price-row span{
  font-size:.88rem;
  line-height:1.35;
  color:rgba(255,255,255,.9);
}
.price-row strong{
  font-size:.94rem;
  line-height:1.35;
  text-align:right;
  max-width:48%;
}
.price-row.single strong{max-width:65%}
.price-notes{
  font-size:.83rem;
  line-height:1.5;
  color:#d7e8ff;
}
.price-notes b{color:#ffffff}
@media (max-width: 768px){
  .vehicle-pricelist .vehicle-pricelist-imagewrap img{height:180px}
  .vehicle-name-lg{font-size:1.08rem}
  .price-row{flex-direction:column; gap:4px}
  .price-row strong, .price-row.single strong{max-width:100%; text-align:left}
}


.gallery-section{padding-top:24px}
.gallery-shell{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(0,194,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(15,24,44,.9), rgba(8,12,22,.95));
}
.gallery-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.06), transparent 35%, rgba(255,255,255,.04));
}
.swiper-gallery{
  overflow:visible;
  border:none;
  border-radius:0;
  padding-bottom:38px;
}
.gallery-slide-card{
  width:100%;
  text-align:left;
  background:rgba(8,13,24,.92);
  border:1px solid rgba(122,213,255,.16);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  padding:0;
  color:var(--text);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.gallery-slide-card:hover,
.gallery-slide-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 24px 46px rgba(0,0,0,.38);
  border-color:rgba(122,213,255,.3);
}
.gallery-slide-media{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.gallery-slide-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(2,6,16,.2) 100%);
}
.gallery-slide-media img{
  width:100%;
  height:230px;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}
.gallery-slide-card:hover .gallery-slide-media img,
.gallery-slide-card:focus-visible .gallery-slide-media img{transform:scale(1.05)}
.gallery-slide-body{padding:16px 16px 18px}
.gallery-slide-kicker{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8fdcff;
  margin-bottom:8px;
  font-weight:700;
}
.gallery-slide-title{
  font-size:1.02rem;
  font-weight:800;
  line-height:1.25;
  margin-bottom:6px;
}
.gallery-slide-caption{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.7em;
}
.gallery-nav{display:flex; gap:10px}
.gallery-nav-btn{
  width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  display:grid; place-items:center;
  transition:all .2s ease;
}
.gallery-nav-btn:hover{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#03101b;
  border-color:transparent;
}
.gallery-pagination .swiper-pagination-bullet{
  width:9px; height:9px; background:rgba(255,255,255,.34); opacity:1;
}
.gallery-pagination .swiper-pagination-bullet-active{
  width:26px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand2));
}
.gallery-modal-content{
  background:rgba(7,10,15,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  overflow:hidden;
}
.gallery-modal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  background:rgba(0,0,0,.35);
  border-radius:999px;
  padding:.8rem;
}
.gallery-modal-media img{
  width:100%; max-height:min(72vh, 780px); object-fit:contain; display:block; background:#02050b;
}
.gallery-modal-body{padding:18px 20px 22px}
.gallery-modal-title{font-size:1.15rem; font-weight:800; margin-bottom:6px}
.gallery-modal-caption{color:var(--muted); line-height:1.6}
@media (max-width: 991.98px){
  .gallery-slide-media img{height:210px}
}
@media (max-width: 767.98px){
  .gallery-shell{padding:16px !important}
  .swiper-gallery{padding-bottom:30px}
  .gallery-slide-card{border-radius:18px}
  .gallery-slide-media img{height:200px}
  .gallery-slide-body{padding:14px 14px 16px}
  .gallery-slide-title{font-size:.98rem}
  .gallery-slide-caption{font-size:.86rem}
}