/* =========================================================================
   Кейс «Магистраль Трансфер» — премиальная тема поверх base.css
   Тёмный графит + шампань-золото (палитра сайта клиента avtoarenda-kzn.ru)
   ========================================================================= */
.theme-premium {
  --p-bg: #0A0A0B;
  --p-surface: #111113;
  --p-surface-2: #161618;
  --p-surface-3: #1C1C1F;
  --p-line: #2A2A2E;
  --p-text: #F3F1EC;
  --p-text-2: #C9C7C1;
  --p-muted: #9C9A94;
  --p-gold: #C8B48C;
  --p-gold-soft: rgba(200, 180, 140, .14);
  background: var(--p-bg);
  color: var(--p-text);
}

/* Типографика: тонкие крупные заголовки, золотые надзаголовки */
.theme-premium .eyebrow { color: var(--p-gold); }
.theme-premium .section-title { color: var(--p-text); text-wrap: balance; }
.theme-premium .section-lead,
.theme-premium .step__lead,
.theme-premium .adv__lead,
.theme-premium .feature__text,
.theme-premium .numlist__text,
.theme-premium .stat__text { color: var(--p-muted); }
.theme-premium .feature__title,
.theme-premium .numlist__title { color: var(--p-text); }
.theme-premium .numlist__n,
.theme-premium .step__n { color: var(--p-gold); }
.theme-premium .stat__value { color: var(--p-gold); font-weight: 600; }

/* Hero */
.case-hero--magistral { background-image: url(/assets/img/magistral-hero.jpg); background-position: 62% 60%; padding-bottom: 64px; }
.case-hero--magistral::before { background: linear-gradient(90deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .78) 42%, rgba(10, 10, 11, .25) 75%, rgba(10, 10, 11, .55) 100%), linear-gradient(0deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, 0) 40%); }
.theme-premium .case-hero__title { font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -.01em; color: var(--p-text); }
.theme-premium .case-hero__lead { color: var(--p-text-2); max-width: 560px; }
.theme-premium .case-hero__site { color: var(--p-gold); }
.theme-premium .case-hero__site:hover { color: var(--p-text); }
.theme-premium .case-hero__meta { margin-top: 200px; color: var(--p-muted); }

/* Панели: фоны как в кейсе Profil Doors (светлая панель между тёмными) */
.theme-premium .dark-panel { background: #212121; }
.theme-premium .dark-panel .stat__value { color: var(--p-gold); }
.theme-premium .stats__label { color: var(--p-gold); }
.theme-premium .stats--line { padding-top: 56px; border-top: 1px solid var(--p-line); }

/* Светлая часть: те же компоненты, светлые значения токенов */
.theme-premium .panel-stack,
.theme-premium .brand {
  --p-surface-2: #fff;
  --p-surface-3: #fafafa;
  --p-bg: #f6f4ef;
  --p-line: #e7e3da;
  --p-text: #212121;
  --p-text-2: #424242;
  --p-muted: #8a8780;
  --p-gold: #9A7F4E;
  --p-gold-soft: rgba(154, 127, 78, .1);
  color: var(--p-text);
}
.theme-premium .brand { background: #f6f4ef; }

/* Цели — карточки с тонкой рамкой */

/* Бренд */
.theme-premium .brand__logo img { width: 300px; margin-left: 0; }
.theme-premium .brand__text { color: var(--p-text-2); }
.car-gallery { margin-top: 50px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.car-gallery figure { margin: 0; }
.car-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 62%; border-radius: 20px; }
.car-gallery figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-head); font-size: 16px; line-height: 22px; color: var(--p-text); }
.car-gallery figcaption span { color: var(--p-muted); font-size: 14px; }

/* Сегменты аудитории */
.segments { margin-top: 50px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--p-line); border: 1px solid var(--p-line); border-radius: 20px; overflow: hidden; }
.segment { padding: 26px 24px 30px; background: var(--p-surface-2); display: flex; flex-direction: column; gap: 10px; }
.segment__who { font-family: var(--f-head); font-size: 22px; font-weight: 600; line-height: 28px; color: var(--p-text); }
.segment__k { margin-top: 8px; font-family: var(--f-head); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--p-gold); }
.segment p:not([class]) { color: var(--p-muted); font-size: 14px; line-height: 21px; }

/* Карта: запросы → блоки сайта */
.qmap { margin-top: 50px; border: 1px solid var(--p-line); border-radius: 20px; overflow: hidden; }
.qmap__head, .qmap__row { display: grid; grid-template-columns: minmax(0, 1.25fr) 40px minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; column-gap: 20px; padding: 18px 28px; }
.qmap__head { font-family: var(--f-head); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--p-gold); background: var(--p-bg); }
.qmap__row { border-top: 1px solid var(--p-line); }
.qmap__q { display: flex; flex-wrap: wrap; gap: 8px; }
.qmap__q span { padding: 5px 12px; border-radius: 30px; background: var(--p-gold-soft); color: var(--p-text-2); font-size: 13px; line-height: 18px; }
.qmap__arrow { color: var(--p-gold); font-size: 20px; text-align: center; }
.qmap__block { font-family: var(--f-head); font-size: 17px; font-weight: 600; line-height: 22px; color: var(--p-text); }
.qmap__why { color: var(--p-muted); font-size: 14px; line-height: 20px; }

/* Палитра */
.swatches { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { border: 1px solid var(--p-line); border-radius: 16px; overflow: hidden; }
.swatch i { display: block; height: 96px; }
.swatch div { padding: 12px 14px; font-size: 13px; line-height: 18px; color: var(--p-muted); }
.swatch b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 14px; color: var(--p-text); }
.type-sample { margin-top: 16px; padding: 28px 30px; background: #0A0A0B; border: 1px solid var(--p-line); border-radius: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.type-sample__big { font-family: "Inter", var(--f-head); font-weight: 600; font-size: 34px; line-height: 38px; color: #F3F1EC; }
.type-sample__body { font-family: "Raleway", var(--f-text); font-weight: 300; font-size: 16px; line-height: 25px; color: #C9C7C1; }
.type-sample small { display: block; margin-top: 10px; font-family: var(--f-text); font-size: 12px; color: #C8B48C; letter-spacing: .05em; }

/* Сценарии поездок (фото) */
.trips { margin-top: 50px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.trips figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; }
.trips img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.trips figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; background: linear-gradient(0deg, rgba(10, 10, 11, .8), rgba(10, 10, 11, 0)); font-family: var(--f-head); font-size: 14px; font-weight: 600; line-height: 18px; color: #F3F1EC; }

/* Поток заявки */
.flow { margin: 50px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: flow; }
.flow li { position: relative; padding: 22px 22px 26px 0; border-top: 1px solid var(--p-gold); counter-increment: flow; }
.flow li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--p-gold); }
.flow__t { margin-top: 8px; font-family: var(--f-head); font-size: 17px; font-weight: 600; line-height: 22px; color: var(--p-text); }
.flow__d { margin-top: 8px; color: var(--p-muted); font-size: 14px; line-height: 21px; }
.flow__k { font-family: var(--f-head); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--p-gold); }

/* Заглушки под фото (будут заменены на реальные изображения) */
.ph { margin: 50px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; padding: 32px; border: 1.5px dashed var(--p-gold); border-radius: 20px; background: repeating-linear-gradient(135deg, var(--p-gold-soft) 0 14px, transparent 14px 28px); text-align: center; }
.ph__tag { font-family: var(--f-head); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--p-gold); }
.ph__title { font-family: var(--f-head); font-size: 18px; font-weight: 600; line-height: 24px; color: var(--p-text); max-width: 520px; }
.ph__text { max-width: 520px; font-size: 14px; line-height: 21px; color: var(--p-muted); }
.ph--tall { min-height: 560px; }
.ph--phone { width: 340px; max-width: 100%; min-height: 620px; margin: 130px 59px 0 0; justify-self: end; border-radius: 44px; }
.ph--wide { min-height: 420px; }
.ph-num { color: var(--p-gold); font-weight: 600; }

.theme-premium .figure figcaption { color: var(--p-muted); }
.two-col .ph { margin-top: 140px; }

@media (max-width: 1023px) {
  .theme-premium .case-hero__title { font-size: 48px; line-height: 50px; }
  .theme-premium .case-hero__meta { margin-top: 120px; }
  .segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qmap__head { display: none; }
  .qmap__row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 20px 22px; }
  .qmap__arrow { display: none; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li { padding: 0 0 26px 30px; border-top: 0; border-left: 1px solid var(--p-gold); }
  .flow li::before { top: 0; left: -5px; }
  .flow__k { display: block; }
  .ph--phone { margin: 0; justify-self: center; }
  .two-col .ph { margin-top: 0; }
  .type-sample { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 666px) {
  .theme-premium .case-hero__title { font-size: 38px; line-height: 42px; }
  .theme-premium .case-hero__meta { margin-top: 80px; }
  .car-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
  .car-gallery figure { scroll-snap-align: start; }
  .segments { grid-template-columns: minmax(0, 1fr); }
  .trips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph { min-height: 240px; padding: 24px 18px; }
  .ph--tall, .ph--wide { min-height: 300px; }
  .ph--phone { min-height: 480px; }
}

/* Оценки Google Lighthouse */
.lh { margin: 50px 0 0; border-radius: 24px; overflow: hidden; background: #1b1b1d; color: #F3F1EC; box-shadow: 0 30px 60px -30px rgba(33, 33, 33, .35); }
.lh__bar-top { display: flex; align-items: center; gap: 14px; padding: 16px 24px; background: #0A0A0B; border-bottom: 1px solid #2A2A2E; font-size: 14px; line-height: 20px; }
.lh__logo { width: 18px; height: 22px; flex-shrink: 0; background: linear-gradient(180deg, #F4B400 0 22%, #EA4335 22% 100%); clip-path: polygon(30% 0, 70% 0, 70% 20%, 85% 20%, 100% 100%, 0 100%, 15% 20%, 30% 20%); }
.lh__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border: 1px solid #3A3A40; border-radius: 6px; color: #F3F1EC; }
.lh__src { margin-left: auto; color: #8E8C86; white-space: nowrap; }
.lh__list { margin: 0; padding: 56px 40px 40px; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.lh__item { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lh__ring { width: 132px; height: 132px; }
.lh__track { fill: rgba(12, 206, 107, .1); stroke: rgba(12, 206, 107, .16); stroke-width: 8; }
.lh__bar { fill: none; stroke: #0CCE6B; stroke-width: 8; stroke-linecap: round; }
.lh__num { fill: #0CCE6B; font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 38px; font-weight: 500; }
.lh__label { max-width: 170px; font-family: var(--f-head); font-size: 17px; font-weight: 600; line-height: 22px; color: #F3F1EC; text-wrap: balance; }
.lh__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px 24px; border-top: 1px solid #2A2A2E; font-size: 13px; line-height: 18px; color: #8E8C86; }
.lh__cap span { display: inline-flex; align-items: center; gap: 8px; }
.lh__dot { width: 10px; height: 10px; border-radius: 50%; background: #0CCE6B; }
@media (prefers-reduced-motion: no-preference) {
  .lh__bar { animation: lh-draw 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes lh-draw { from { stroke-dashoffset: 326.73; } }
}
@media (max-width: 1023px) {
  .lh__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px 24px 32px; }
}
@media (max-width: 666px) {
  .lh__ring { width: 108px; height: 108px; }
  .lh__label { font-size: 15px; line-height: 20px; }
  .lh__src { display: none; }
}
@media (max-width: 666px) { .lh .lh__src { display: inline; margin-left: 0; font-size: 12px; } .lh__bar-top { flex-wrap: wrap; row-gap: 8px; } }

/* Таблица спроса из Яндекс Вордстат */
.ws { margin: 50px 0 0; padding: 32px 36px 28px; border: 1px solid var(--p-line); border-radius: 24px; background: var(--p-surface-2); }
.ws__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.ws__title { font-family: var(--f-head); font-size: 22px; font-weight: 600; line-height: 28px; color: var(--p-text); }
.ws__sub { font-size: 14px; line-height: 20px; color: var(--p-muted); }
.ws__scroll { margin-top: 20px; overflow-x: auto; }
.ws__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ws__table th, .ws__table td { padding: 11px 0; border-bottom: 1px solid var(--p-line); text-align: left; font-weight: 300; vertical-align: middle; }
.ws__table thead th { padding: 0 0 12px; font-family: var(--f-head); font-size: 12px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; color: var(--p-gold); }
.ws__table thead th:last-child, .ws__table td:last-child { text-align: right; white-space: nowrap; }
.ws__table tbody th { width: 38%; padding-right: 24px; color: var(--p-text-2); }
.ws__table td:last-child { width: 120px; padding-left: 24px; font-family: var(--f-head); font-size: 16px; font-weight: 600; color: var(--p-text); }
.ws__bar i { display: block; height: 8px; border-radius: 4px; background: var(--p-gold); }
.ws__group th, .ws__group td { padding-top: 26px; font-family: var(--f-head); font-size: 17px; font-weight: 600 !important; color: var(--p-text) !important; border-bottom-color: var(--p-text); }
.ws__group td span { font-weight: 300; color: var(--p-muted); }
.ws__table tbody tr.ws__group:first-child th, .ws__table tbody tr.ws__group:first-child td { padding-top: 14px; }
.ws__table tfoot th, .ws__table tfoot td { padding-top: 16px; border-bottom: 0; font-family: var(--f-head); font-size: 17px; font-weight: 600; color: var(--p-text); }
.ws figcaption { margin-top: 18px; max-width: 730px; font-size: 14px; line-height: 21px; color: var(--p-muted); }
@media (max-width: 666px) {
  .ws { padding: 22px 18px 20px; border-radius: 20px; }
  .ws__title { font-size: 19px; line-height: 24px; }
  .ws__table { min-width: 0; }
  .ws__table tbody th { width: auto; padding-right: 12px; font-size: 14px; line-height: 19px; }
  .ws__table .ws__bar, .ws__table thead th:nth-child(2) { width: 0; padding-left: 0; padding-right: 0; }
  .ws__bar i { display: none; }
  .ws__group th, .ws__table tfoot th { white-space: nowrap; }
  .ws__table td:last-child { width: auto; padding-left: 12px; font-size: 15px; }
  .ws__group th, .ws__group td, .ws__table tfoot th, .ws__table tfoot td { font-size: 15px; }
}

/* Смартфон с мобильной версией */
.phone { position: relative; justify-self: end; width: 320px; max-width: 100%; margin: 130px 59px 0 0; }
.phone__body { position: relative; padding: 11px; border-radius: 52px; background: #1a1a1c; box-shadow: inset 0 0 0 1.5px #3a3a40, inset 0 0 0 4px #0A0A0B, 0 40px 60px -30px rgba(33, 33, 33, .55), 0 18px 24px -18px rgba(33, 33, 33, .4); }
.phone__body img { display: block; width: 100%; height: auto; border-radius: 42px; }
.phone__island { position: absolute; top: 22px; left: 50%; z-index: 1; width: 92px; height: 26px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2c30; }
.phone::before { left: -3px; top: 120px; height: 56px; box-shadow: 0 74px 0 #2c2c30; }
.phone::after { right: -3px; top: 160px; height: 84px; }
@media (max-width: 1023px) { .phone { justify-self: center; margin: 0; } }
@media (max-width: 666px) { .phone { width: 280px; } .phone__body { border-radius: 46px; padding: 10px; } .phone__body img { border-radius: 37px; } .phone__island { top: 20px; width: 80px; height: 23px; } }

/* Автомобиль выезжает при прокрутке */
.arrival { --p: 1; position: relative; margin: 170px -70px 0 0; justify-self: end; width: calc(100% + 70px); max-width: 700px; }
.arrival__car { backface-visibility: hidden; }
.arrival.is-motion .arrival__car { will-change: transform, opacity; }
.arrival__car img { display: block; width: 100%; height: auto; }
.arrival__road { display: block; height: 1px; margin: -10px 4% 0 0; background: linear-gradient(90deg, transparent, var(--p-gold) 30%, var(--p-gold)); transform-origin: right; will-change: transform; }
.arrival__cap { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.arrival__cap span { padding: 7px 14px; border: 1px solid var(--p-line); border-radius: 30px; font-size: 13px; line-height: 18px; color: var(--p-text-2); background: var(--p-surface-2); }
.arrival.is-motion .arrival__cap span { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.arrival.is-motion.is-arrived .arrival__cap span { opacity: 1; transform: none; }
.arrival.is-motion.is-arrived .arrival__cap span + span { transition-delay: .15s; }
@media (max-width: 1199px) { .arrival { margin-right: 0; width: 100%; } }
@media (max-width: 1023px) { .arrival { margin: 0; justify-self: center; } .arrival__cap { justify-content: flex-start; } }
.two-col--arrival { align-items: start; }
.two-col--arrival .arrival { margin-top: 0; }
.two-col--arrival + .features { margin-top: 70px; }
@media (max-width: 1023px) { .two-col--arrival .arrival { margin-top: 0; } .two-col--arrival + .features { margin-top: 48px; } }