@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --font-head: 'Bebas Neue', 'Work Sans', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  /* полночный графит с синим подтоном (как фон фотографий) + шампань в акцентах, слоновая кость в тексте */
  --bg: #0b0f15;
  --surface: #111722;
  --surface-2: #172031;
  --surface-3: #1f2a3d;
  --text: #f2ede3;
  --text-muted: #a8a397;
  --border: #1d2636;
  --border-strong: #34405a;

  --accent: #d2b27a;
  --accent-hover: #a8864f;
  --accent-contrast: #15120c;
  --accent-shadow: rgba(201,166,104,.34);
  --accent-soft: rgba(210,178,122,.11);
  --gold-line: linear-gradient(90deg, rgba(210,178,122,0), rgba(210,178,122,.55) 50%, rgba(210,178,122,0));

  --header-bg: rgba(9,13,19,.9);
  --hero-bg: linear-gradient(150deg, #080b10 0%, #111a29 58%, #2a2417 140%);
  --hero-text: #f2ede3;
  --hero-heading: #ecdcb8;

  --footer-bg: #070a0f;
  --footer-text: #e8e3d8;
  --footer-text-muted: #8c887f;
  --footer-border: #1a2231;

  --skeleton-bg: #18202d;
  --skeleton-shine: rgba(236,220,184,.07);

  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-logo: 8px;
  --shadow-1: 0 22px 48px -22px rgba(0,0,0,.7);
}

h1, h2, h3, h4 { letter-spacing: .01em; }
.logo { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.btn--primary { text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-head); font-size: 1.05rem; }
.eyebrow { font-family: var(--font-head); font-size: 1rem; letter-spacing: .1em; color: var(--accent); }
.eyebrow::before { background: var(--accent); }
.car-card__badge { background: var(--accent); color: var(--accent-contrast); border-radius: 4px; letter-spacing: .04em; }

/* Премиальные детали: золотая волосяная линия под шапкой, мягкая золотая рамка у карточек при наведении */
.site-header { border-bottom-color: transparent; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-line); pointer-events: none; }
.btn--primary { background: linear-gradient(135deg, #e3c893 0%, var(--accent) 45%, var(--accent-hover) 100%); }
.btn--outline:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.car-card:hover { border-color: rgba(210,178,122,.45); }
.car-card__price span:first-child { color: var(--hero-heading); }
.price { color: var(--hero-heading); }
.site-footer { border-top: 1px solid transparent; border-image: var(--gold-line) 1; }

/* Ticket-style credit calculator (site signature) */
.calc-ticket {
  position: relative; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
  padding: 34px; max-width: 720px; margin: 0 auto;
}
.calc-ticket::before, .calc-ticket::after {
  content: ""; position: absolute; width: 22px; height: 22px; background: var(--bg); border-radius: 50%; top: 50%; transform: translateY(-50%);
}
.calc-ticket::before { left: -11px; }
.calc-ticket::after { right: -11px; }
.calc-ticket__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px dashed var(--border-strong); padding-bottom: 16px; margin-bottom: 20px; }
.calc-ticket__head span { font-family: var(--font-head); font-size: 1.1rem; letter-spacing: .08em; color: var(--text-muted); }

/* Dark theme: hero outline button hovers to a white pill, so force dark text
   instead of the theme's light --text (which would be unreadable on white). */
.hero-slide .btn--outline:hover { color: #16161a !important; }

/* Пункты меню в одну строку: на 1181–1439 px уже не хватает места под широкий логотип и кнопку */
.main-nav a { white-space: nowrap; }
@media (max-width: 1439px) {
  .main-nav { gap: 2px; margin-left: 8px; }
  .main-nav a { padding: 10px 9px; font-size: .88rem; }
  .header-contact__cta { padding-left: 16px; padding-right: 16px; }
}
/* на узком десктопе кнопка звонка в шапке не помещается рядом с меню — остаётся плавающая «Перезвоните мне» */
@media (min-width: 1181px) and (max-width: 1359px) {
  .header-contact__cta { display: none; }
}