:root{
  --bg:#0b0b10; --card:#141421; --text:#e9ebf1; --muted:#9aa3b2;
  --brand:#7a5cff; --brand2:#ff7a59; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:var(--text);text-decoration:none}
.container{width:min(1160px,92%);margin:auto}
.center{text-align:center}.small{font-size:.9rem}.muted{color:var(--muted)}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--brand);font-weight:700;box-shadow:var(--shadow);transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-alt{background:var(--card)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.15)}
.btn-sm{padding:10px 14px;border-radius:999px}

.wc-header{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.6);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;gap:18px;padding:12px 0}
.logo{font-weight:900;letter-spacing:.2px}
.nav{display:flex;gap:16px;flex:1}
.burger{display:none;background:none;border:0;color:#fff;font-size:22px}

.hero{position:relative;padding:80px 0 120px}
.hero-inner{text-align:center}
.hero h1{font-size:40px;margin:0 0 8px}
.hero p{margin:0 0 24px}
.glow{position:absolute;inset:0;background:
  radial-gradient(50% 60% at 50% 10%, rgba(122,92,255,.35), transparent 60%),
  radial-gradient(40% 40% at 20% 80%, rgba(255,122,89,.25), transparent 60%);
  filter:saturate(140%);pointer-events:none}

.section{padding:56px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--text);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip.is-active{background:var(--brand);border-color:transparent}

.grid{display:grid;gap:16px}
#fleetGrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .pic{aspect-ratio:16/10;background:#0f0f17}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:14px;display:flex;flex-direction:column;gap:8px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:.8rem;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08)}
.price{font-weight:800}
.card .actions{display:flex;gap:8px;margin-top:6px}

.band{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);padding:22px 0}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.perks>div{background:var(--card);padding:14px;border-radius:12px}

.services{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.service{background:var(--card);border-radius:12px;padding:14px;display:flex;gap:10px}
.service .icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}

.terms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.terms-grid>div{background:var(--card);border-radius:12px;padding:14px}

.accordion{display:grid;gap:10px}
.acc{background:var(--card);border-radius:12px;overflow:hidden}
.acc h3{margin:0;font-size:1rem}
.acc summary{cursor:pointer;padding:14px}
.acc .acc-body{padding:0 14px 14px;color:var(--muted)}

.reviews{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow:auto;padding-bottom:8px}
.review{background:var(--card);border-radius:12px;padding:14px;min-height:120px}
.review .author{margin-top:8px;color:var(--muted);font-size:.9rem}

.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--card);border-radius:16px;padding:16px}
.lead-form input,.lead-form select,.lead-form textarea{background:#0f0f17;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:var(--text);padding:12px}
.lead-form textarea{resize:vertical}
.lead-form .agree{grid-column:1/-1;font-size:.9rem;color:var(--muted)}
.lead-form .btn{grid-column:1/-1}

.contacts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.map-placeholder{height:240px;border-radius:16px;background:linear-gradient(120deg, rgba(122,92,255,.15), rgba(255,122,89,.12));display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px dashed rgba(255,255,255,.18)}

.footer{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

dialog{border:0;border-radius:16px;max-width:min(620px,92%);background:var(--card);color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.policy{padding:16px}

@media (max-width:880px){
  .nav{display:none}
  .burger{display:block;margin-left:auto}
  .lead-form{grid-template-columns:1fr}
  .contacts{grid-template-columns:1fr}
}

/* ===== Детальная панель в карточке ===== */
.card .details[hidden]{display:none!important;}
.card .details{
  border-top:1px solid rgba(255,255,255,.08);
  padding:12px 14px 14px;
  display:grid;
  gap:12px;
  animation:fadeSlide .18s ease;
}
.card.expanded{
  outline:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 12px rgba(0,0,0,0.3);
}
.details .pros{display:flex;gap:8px;flex-wrap:wrap;}
.details .pros .pro{background:rgba(255,255,255,.08);padding:4px 8px;border-radius:999px;font-size:.85rem;}
.details .specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;}
.details .specs div{background:#0f0f17;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px;font-size:.95rem;}
.details .when{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.details .actions2{display:flex;gap:8px;flex-wrap:wrap;}

@keyframes fadeSlide{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
/* ===== Галерея: строго в один экран, без обрезаний ===== */
#galleryModal{border:0;padding:0;background:transparent;}
#galleryModal::backdrop{background:rgba(0,0,0,.75);}

.gallery-wrap{
  position:relative;
  width:min(900px,94vw);
  max-height:90vh;                 /* вся модалка <= 90% экрана */
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:10px;
  display:grid;
  grid-template-rows: 1fr auto;    /* сверху сцена (фото), снизу детали */
  overflow:hidden;                 /* ничего не вылезает за края */
}

.g-stage{
  position:relative;
  background:#000;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:40vh;                 /* чтобы фото не было «низким» */
}
#gImage{
  max-width:100%;
  height:auto;
  object-fit:contain;              /* НЕ режем фото */
  border-radius:12px;
  display:block;
  /* max-height выставит JS под высоту экрана */
}

/* Узкая панель поверх фото */
.g-bar{
  position:absolute;left:10px;right:10px;bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px;border-radius:12px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
}
.g-bar-left{display:flex;flex-direction:column;gap:4px;min-width:0}
.g-title{font-weight:800}
.g-badges{display:flex;gap:6px;flex-wrap:wrap}
.g-badges .badge{background:rgba(255,255,255,.14);padding:4px 8px;border-radius:999px;font-size:.8rem}
.g-bar-right{display:flex;align-items:center;gap:10px}
.g-price{font-weight:900}

/* Стрелки / закрытие */
.g-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.g-prev,.g-next{
  pointer-events:auto;background:rgba(0,0,0,.35);color:#fff;border:0;
  width:38px;height:52px;border-radius:8px;font-size:26px;cursor:pointer;
}
.g-close{
  position:absolute;top:8px;right:8px;background:rgba(0,0,0,.45);
  color:#fff;border:0;border-radius:10px;padding:6px 10px;cursor:pointer;
}

/* Низ (детали): всегда помещается, лишнее прокручивается внутри */
.g-details{
  margin-top:10px;
  display:grid;gap:10px;
  max-height:28vh;                 /* не больше 28% экрана */
  overflow:auto;                   /* собственный скролл, страница не двигается */
}
.g-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.g-specs > div{
  background:#0f0f17;border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:10px;font-size:.95rem;
}
.g-specs .g-desc{grid-column:1/-1}
.g-when{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-actions{display:flex;gap:8px;flex-wrap:wrap}

@media (max-width:520px){
  .gallery-wrap{width:94vw;max-height:90vh;padding:8px}
  .g-bar{left:8px;right:8px;bottom:8px;padding:6px 8px}
  .g-title{font-size:1rem}
  .g-when{grid-template-columns:1fr}
}