/* ==========================================================================
   Направление 2 — «Приборка»
   Источник: ночная приборная панель турера. Синий графит, янтарная подсветка,
   моноширинные цифры, тонкие линии шкал. Оранжевый KTM — только на бренде.
   Подпись направления: цена и характеристики как приборный кластер,
   который «заводится» при загрузке страницы.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --sand:        #0d1219;   /* ночь */
  --sand-deep:   #111822;
  --surface:     #161d26;   /* панель */
  --ink:         #e4e9ef;   /* текст светлый */
  --ink-2:       #aab4c0;
  --muted:       #7c8896;
  --line:        #26303c;
  --line-soft:   #1e2732;

  --accent:      #ffb03a;   /* янтарная подсветка */
  --accent-dark: #ff9500;
  --accent-soft: #2a2418;
  --sea:         #4fd1c5;   /* «включено» — холодная подсветка */
  --sea-soft:    #14262a;
  --green:       #4fd1c5;
  --green-soft:  #14262a;
  --gold:        #ffb03a;
  --ktm:         #ff6b00;

  --font-display: "Exo 2", system-ui, sans-serif;
  --font-text:    "Exo 2", system-ui, sans-serif;
  --font-num:     "JetBrains Mono", ui-monospace, monospace;

  --shadow-sm: 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.65);
}

body { background:
  radial-gradient(900px 420px at 78% -8%, rgba(255,176,58,.08), transparent 60%),
  var(--sand); }

h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; }
.hero__title { text-transform: uppercase; letter-spacing: .01em; }
.hero__city { color: var(--ktm); }

/* Все числа — моноширинные, как на приборке */
.booking__amount, .spec__value, .rating__value, .mobile-bar__price strong,
.dist__count, .gallery__counter, .review__date, .booking__calc-row,
.booking__terms strong, .btn__count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* Поверхности — панели с тонкой окантовкой, без «бумажных» теней */
.spec, .term, .review, .city, .include, .booking__inner, .rating,
.model__media, .gallery, .modal__window {
  border: 1px solid var(--line);
  background: var(--surface);
}
.site-header { background: rgba(13,18,25,.9); backdrop-filter: blur(10px); }
.site-header.is-stuck { border-bottom: 1px solid var(--line); box-shadow: none; }
.site-footer { background: #080c11; }
.section--includes { background: var(--surface); }
.field input, .field select, .field textarea {
  background: #0f151d; border-color: var(--line); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,176,58,.14);
}
.booking__total { background: #0f151d; border: 1px solid var(--line); }
.dist__bar { background: #0f151d; }
.review__avatar--initials { background: #22303d; color: var(--accent); }
.gallery__nav { background: rgba(22,29,38,.9); color: var(--ink); }
.gallery__nav:hover { background: var(--surface); }
.lang.is-active { background: var(--accent); color: #12161c; }
.btn--outline { border-color: var(--line); }
.btn--outline:hover { background: var(--accent); color: #12161c; border-color: var(--accent); }
.btn--ghost { border-color: var(--line); }
/* Тёмный текст на оранжевом: белый давал контраст 2,86 при норме 4,5. */
.btn--primary { background: var(--ktm); color: #12161c; box-shadow: 0 6px 22px rgba(255,107,0,.28); }
.btn--primary:hover { background: #ff8124; color: #12161c; }
.mobile-bar { background: var(--surface); border-top: 1px solid var(--line); }
.site-footer__logo { filter: none; }
.logo__img--dark  { display: none; }
.logo__img--light { display: block; }
.model__media img { filter: brightness(.97); }

/* --- ПОДПИСЬ: приборный кластер --- */
.booking__price {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 130%, rgba(255,176,58,.14), transparent 65%);
  justify-content: center;
}
.booking__amount {
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem);
  color: var(--accent);
  text-shadow: 0 0 26px rgba(255,176,58,.45);
  animation: ignite 1.1s var(--ease) both;
}
.booking__price::after {
  content: "";
  position: absolute; left: 50%; bottom: 8px; translate: -50% 0;
  width: 72%; height: 42px;
  border-top: 2px solid rgba(255,176,58,.22);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.specs .spec { position: relative; overflow: hidden; }
.specs .spec::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.specs.is-revealed .spec::after { transform: scaleX(1); }
.spec__icon { color: var(--accent); }
.spec__value { color: var(--ink); }

@keyframes ignite {
  0%   { opacity: 0; filter: blur(6px); }
  40%  { opacity: .35; }
  55%  { opacity: 1; filter: blur(0); }
  62%  { opacity: .55; }
  100% { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .booking__amount { animation: none; }
}