@import url('fonts.css');

/* ============================================================
   AZ TRADE — design tokens
   ============================================================ */
:root {
  --acc: #141414;
  --acc-hi: #000000;
  --bg: #F2F1EF;
  --surf: #FFFFFF;
  --surf2: #FAF8F5;
  --line: #DCDAD5;
  --tx: #16161A;
  --mut: #6B6B73;
  --tx-2: #3B3B42;
  --tx-3: #4E4E56;
  --tx-notice: #2B2B31;
  --faint: #8A8A92;
  --border-soft: #C9C6C0;
  --border-hover: #9A9790;
  --well: #ECEAE6;
  --footer-bg: #EAE8E4;
  --marquee-tx: #A3A09A;
  --ease: cubic-bezier(.16, .84, .24, 1);
  --display: 'Chakra Petch', system-ui, sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --container: 1240px;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

/* must outrank the component classes below — a class with `display` otherwise
   beats the UA's [hidden] rule and the element stays visible */
[hidden] { display: none !important; }

/* Horizontal overflow is clipped on <html>, never on <body>. Per spec, an
   overflow value other than `visible` on one axis forces the other axis to
   compute to `auto` — so `overflow-x: hidden` on <body> quietly turned <body>
   into its own scroll container. The viewport then stopped scrolling:
   window.scrollY stayed 0, scrollTo() and scrollIntoView() did nothing, and on
   a phone the page could not be scrolled past the first screen at all, which
   is why the vehicle list looked missing. `clip` does not create a scroll
   container; `hidden` before it is the fallback for older browsers, where
   <html> is the viewport scroller anyway. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--acc-hi); }
img { max-width: 100%; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
input, textarea, button, select { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--faint); }

h1, h2, h3 { font-family: var(--display); margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 900px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acc); color: #fff; padding: 12px 20px;
  font-family: var(--display); font-weight: 600; letter-spacing: .05em;
}
.skip-link:focus { left: 0; color: #fff; }

.kicker {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
}
.kicker__bar { width: 34px; height: 2px; background: var(--acc); flex: none; }
.kicker__text,
.section-num {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .26em; color: var(--acc);
}

.section-head {
  position: relative; display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 20px; margin-bottom: 46px; border-bottom: 1px solid var(--line);
}
.section-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--acc); transition: width 1.05s var(--ease) .1s;
}
.section-head.is-in::after { width: 92px; }
@media (prefers-reduced-motion: reduce) {
  .section-head::after { width: 92px; transition: none; }
}
.section-head h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.01em; }

h1.page-title {
  font-weight: 700; font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.05; letter-spacing: -.015em; text-wrap: balance;
  margin: 0 0 20px;
}
.lead {
  font-size: 19px; line-height: 1.6; color: var(--tx-2);
  text-wrap: pretty; margin: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 19px 34px; border-radius: 2px; border: 1px solid transparent;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn--primary { background: var(--acc); color: #fff; }
.btn--primary:hover { background: var(--acc-hi); color: #fff; }
.btn--ghost { border-color: var(--border-soft); color: var(--tx); background: transparent; font-weight: 600; }
.btn--ghost:hover { border-color: var(--acc); color: var(--acc); }
.btn--sm { padding: 12px 22px; font-size: 14px; letter-spacing: .06em; font-weight: 600; }
.btn--phone { font-size: 19px; letter-spacing: .03em; text-transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tx);
  border-bottom: 1px solid var(--border-soft); padding-bottom: 6px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover { color: var(--acc); border-color: var(--acc); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
/* The blur lives on a pseudo-element, not the header itself: backdrop-filter would
   make the header a containing block and trap the fixed-position mobile drawer inside it. */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(242, 241, 239, .90);
  backdrop-filter: blur(14px);
}
.site-header__progress {
  position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px;
  background: var(--acc); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
.site-header__bar {
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  height: 104px; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; transition: height .45s var(--ease);
}
.site-header.is-condensed .site-header__bar { height: 76px; }
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { height: 66px; width: auto; display: block; transition: height .45s var(--ease); }
.site-header.is-condensed .site-header__logo img { height: 46px; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__link {
  padding: 11px 16px; font-family: var(--display); font-weight: 600;
  font-size: 15px; letter-spacing: .03em; border-radius: 2px;
  color: var(--tx-2); border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.site-nav__link:hover { color: var(--acc); }
.site-nav__link[aria-current="page"] { color: var(--acc); border-bottom-color: var(--acc); }
.site-nav__phone {
  margin-left: 20px; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; background: var(--acc); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; border-radius: 2px; white-space: nowrap;
  transition: background .3s var(--ease);
}
.site-nav__phone:hover { background: var(--acc-hi); color: #fff; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; background: transparent;
  border: 1px solid var(--border-soft); border-radius: 2px;
  color: var(--tx); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--acc); color: var(--acc); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ============================================================
   Hero (home)
   ============================================================ */
.section { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.section--surf { background: var(--surf); }
.section--last { border-bottom: none; }

.glow { position: absolute; inset: 0; pointer-events: none; }
.glow--right { background: radial-gradient(110% 90% at 88% 0%, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 60%); }
.glow--left { background: radial-gradient(110% 90% at 12% 0%, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 58%); }
.glow--top { background: radial-gradient(110% 90% at 80% 0%, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 58%); }

.stripes-full {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(0,0,0,.04) 0 3px, transparent 3px 26px);
}

.hero__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 110px 32px 96px;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 72px; align-items: center;
}
.hero h1 {
  margin: 0 0 26px; font-weight: 700; font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.02; letter-spacing: -.015em; text-wrap: balance;
}
.hero h1 .accent { color: var(--acc); }
.hero__lead { margin: 0 0 40px; max-width: 620px; font-size: 19px; line-height: 1.62; color: var(--tx-2); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }

.notice {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px; background: rgba(0,0,0,.04);
  border-left: 2px solid var(--acc);
}
.notice svg { flex-shrink: 0; margin-top: 2px; }
.notice p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--tx-notice); }
.notice--max { max-width: 600px; }
.notice--card { background: var(--surf); border: 1px solid var(--line); border-left: 1px solid var(--line); }
.notice--card p { font-size: 15px; color: var(--tx-2); }
.ponudba-zastarela { grid-column: 1 / -1; }
.ponudba-zastarela a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.scroll-cue {
  display: flex; align-items: center; gap: 14px; margin-top: 44px;
  transition: opacity .5s ease;
}
.scroll-cue__capsule {
  display: flex; align-items: flex-start; justify-content: center;
  width: 22px; height: 34px; border: 1.5px solid var(--border-hover);
  border-radius: 999px; padding-top: 6px; flex: none;
}
.scroll-cue__dot {
  width: 3px; height: 8px; border-radius: 999px; background: var(--acc);
  animation: az-cue 1.9s var(--ease) infinite;
}
.scroll-cue__label {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--mut);
}

/* ============================================================
   Hero video background
   ============================================================ */
.hero--video { min-height: 720px; display: flex; align-items: center; border-bottom: none; }
.hero__video-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__video-bg .hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  filter: grayscale(1) contrast(1.1) brightness(.85);
}
.hero__video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.68) 40%, rgba(10,10,10,.32) 100%);
}
.hero__inner--video { grid-template-columns: minmax(0, 1fr); padding: 150px 32px 130px; }
.hero__inner--video > div { max-width: 700px; }
.hero--video h1, .hero--video .hero__lead { color: #fff; }
.hero--video .hero h1 .accent, .hero--video h1 .accent { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 6px; }
.hero--video .kicker__bar { background: #fff; }
.hero--video .kicker__text { color: #fff; }
.hero--video .notice { background: rgba(255,255,255,.1); border-left-color: #fff; }
.hero--video .notice p { color: #f2f2f0; }
.hero--video .notice svg { color: #fff; }
.hero--video .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.hero--video .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
.hero--video .btn--primary { background: #fff; color: #0a0a0a; }
.hero--video .btn--primary:hover { background: #e6e6e6; color: #0a0a0a; }
.hero--video .scroll-cue__capsule { border-color: rgba(255,255,255,.55); }
.hero--video .scroll-cue__dot { background: #fff; }
.hero--video .scroll-cue__label { color: rgba(255,255,255,.75); }
.hero__video-caption {
  position: absolute; z-index: 1; left: 32px; bottom: 24px;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7);
}

.ribbon {
  position: absolute; bottom: -1px; left: -1px; padding: 12px 18px;
  background: var(--acc); color: #fff; font-family: var(--display);
  font-weight: 700; font-size: 12px; letter-spacing: .2em; pointer-events: none;
}

/* ============================================================
   Photo wells / placeholders
   ============================================================ */
.well {
  position: relative; border: 1px solid var(--line); background: var(--surf);
  overflow: hidden;
}
.well--square { aspect-ratio: 1 / 1; }
.well--wide { aspect-ratio: 21 / 9; }
.well__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  padding: 32px; color: var(--mut);
  /* A deliberate blueprint-grid look rather than a flat grey box — the slot is
     still visibly a placeholder, it just doesn't read as an unfinished page. */
  background:
    linear-gradient(135deg, rgba(0,0,0,.045) 0%, rgba(0,0,0,0) 55%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.05) 0 2px, transparent 2px 26px),
    linear-gradient(to right, rgba(0,0,0,.055) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(to bottom, rgba(0,0,0,.055) 1px, transparent 1px) 0 0 / 46px 46px,
    var(--well);
}
.well__placeholder svg { color: var(--border-hover); }
.well__placeholder span {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; color: var(--mut); max-width: 34ch; line-height: 1.6;
}

/* ============================================================
   Photo band (section divider, home)
   ============================================================ */
.photo-band { position: relative; height: 420px; overflow: hidden; }
/* The interface is strictly monochrome; the photography is not. Colour lands only
   on these full-bleed bands, which is what makes them read as a break in rhythm
   rather than one more grey block. */
.photo-band__media {
  position: absolute; left: 0; right: 0; top: -8%; height: 116%;
  will-change: transform;
}
.photo-band__media picture { display: block; width: 100%; height: 100%; }
.photo-band__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04) saturate(1.03); }
.photo-band__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.6) 0%, rgba(10,10,10,.08) 55%, rgba(10,10,10,0) 75%);
}
.photo-band__caption { position: absolute; left: 0; right: 0; bottom: 32px; }
.photo-band__text {
  display: block; max-width: 560px; font-family: var(--display); font-weight: 600;
  font-size: 20px; line-height: 1.4; color: #fff; text-wrap: pretty;
}

/* ============================================================
   Brand marquee
   ============================================================ */
.marquee { position: relative; padding: 34px 0; overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: az-marquee 42s linear infinite; }
.marquee__item {
  display: flex; align-items: center; gap: 44px; padding-right: 44px;
  font-family: var(--display); font-weight: 600; font-size: 19px;
  letter-spacing: .16em; color: var(--marquee-tx); white-space: nowrap;
}
.marquee__dot { width: 5px; height: 5px; border-radius: 999px; background: var(--acc); opacity: .65; }
.marquee__fade { position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; }
.marquee__fade--l { left: 0; background: linear-gradient(to right, var(--surf), rgba(255,255,255,0)); }
.marquee__fade--r { right: 0; background: linear-gradient(to left, var(--surf), rgba(255,255,255,0)); }

/* ============================================================
   Hairline grids (services, facts, contact list)
   ============================================================ */
.hair-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.hair-grid--edges { border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

.service { padding: 44px 36px 48px; background: var(--surf); transition: background .3s var(--ease); }
.service:hover { background: var(--surf2); }
.service__icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 1px solid var(--border-soft); margin-bottom: 28px;
  color: var(--acc); background: var(--surf);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.service h3 { margin: 0 0 14px; font-weight: 700; font-size: 24px; letter-spacing: .01em; }
.service p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--mut); text-wrap: pretty; }

/* Cards that carry a photo: the image sits flush at the top and the icon square
   straddles its bottom edge, so the card reads as one object rather than a
   picture with a box under it. */
.hair-grid--media .service { padding: 0; overflow: hidden; }
.service__media { position: relative; aspect-ratio: 25 / 16; overflow: hidden; background: var(--well); }
.service__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.015); transition: transform .9s var(--ease);
}
.service:hover .service__media img { transform: scale(1.075); }
.service__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,14,16,.30) 0%, rgba(14,14,16,0) 55%);
}
.service__body { padding: 0 32px 42px; }
.service__body .service__icon { margin-top: -26px; margin-bottom: 24px; position: relative; z-index: 2; }
.service:hover .service__body .service__icon { background: var(--acc); border-color: var(--acc); color: #fff; }

.fact { padding: 44px 34px; background: var(--surf); }
.fact__label {
  display: block; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--acc); margin-bottom: 14px;
}
.fact p { margin: 0; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.3; }

/* ============================================================
   Vehicle cards
   ============================================================ */
.vehicle-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vehicle-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.vehicle-card {
  display: block; border: 1px solid var(--line); background: var(--surf);
  color: var(--tx); overflow: hidden; border-radius: 2px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.vehicle-card:hover {
  border-color: var(--border-hover); color: var(--tx);
  box-shadow: 0 18px 40px -24px rgba(22, 22, 26, .35);
  transform: translateY(-4px);
}
.vehicle-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--well); overflow: hidden; }
.vehicle-grid--4 .vehicle-card__media { aspect-ratio: 4 / 3; }
.vehicle-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease);
}
.vehicle-card:hover .vehicle-card__media img { transform: scale(1.06); }
.vehicle-card__badge {
  position: absolute; top: 0; left: 0; padding: 7px 12px;
  background: var(--acc); color: #fff; font-family: var(--display);
  font-weight: 700; font-size: 11px; letter-spacing: .18em; pointer-events: none;
}
.vehicle-card__body { padding: 24px 24px 26px; }
.vehicle-card__body h3 { margin: 0 0 8px; font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: .01em; }
.vehicle-card__note { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--mut); }
.vehicle-card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.vehicle-card__price { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--acc); }
.vehicle-card__out {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; color: var(--mut);
}
.vehicle-grid--4 .vehicle-card__body { padding: 20px 20px 22px; }
.vehicle-grid--4 .vehicle-card__body h3 { font-size: 18px; margin-bottom: 6px; }
.vehicle-grid--4 .vehicle-card__note { font-size: 13px; line-height: 1.45; margin-bottom: 16px; }
.vehicle-grid--4 .vehicle-card__foot { padding-top: 14px; }
.vehicle-grid--4 .vehicle-card__price { font-size: 18px; }
.vehicle-grid--4 .vehicle-card__badge { padding: 6px 11px; font-size: 10px; }

/* ============================================================
   Vehicles page
   ============================================================ */
.vozila-hero__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 88px 32px 76px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 64px; align-items: end;
}
.vozila-hero h1 { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.04; margin: 0 0 24px; }
.vozila-hero__aside { display: flex; flex-direction: column; gap: 16px; }

.cta-block {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 30px; background: var(--acc); color: #fff; border-radius: 2px;
  transition: background .3s var(--ease);
}
.cta-block:hover { background: var(--acc-hi); color: #fff; }
.cta-block__title { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .02em; line-height: 1.2; }
.cta-block__sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; opacity: .72; }
.cta-block svg { flex-shrink: 0; }

.grid-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 20px;
}
.grid-head h2 { font-weight: 700; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.005em; }
.grid-count { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: var(--mut); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.chip {
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: var(--tx); border: 1px solid var(--line);
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--border-hover); }
.chip[aria-pressed="true"] { background: var(--acc); color: #fff; border-color: var(--acc); }
.empty-state { margin: 24px 0 0; font-size: 17px; color: var(--mut); }

/* ============================================================
   Contact page
   ============================================================ */
.contact-layout {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 64px; align-items: start;
}
.detail-stack {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.detail {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 30px 28px; background: var(--surf); color: var(--tx);
}
a.detail { transition: background .3s var(--ease); }
a.detail:hover { background: var(--surf2); color: var(--tx); }
.detail > svg { flex-shrink: 0; margin-top: 4px; }
.detail__label {
  display: block; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--mut); margin-bottom: 8px;
}
.detail__phone { display: block; font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: .01em; }
.detail__value { display: block; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.35; }
.detail__value--acc { font-size: 19px; line-height: 1.4; color: var(--acc); }
.detail__value--mut { font-size: 19px; line-height: 1.4; color: var(--mut); }
.detail__sub { display: block; margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--mut); }
.detail__sub--faint { color: var(--faint); }
.detail--link {
  align-items: center; justify-content: space-between; padding: 26px 28px;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .02em;
}

.map-embed {
  position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line);
  background: var(--surf2); overflow: hidden;
}
.map-embed::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.map-embed iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.map-embed__link {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 16px 0 44px; padding: 0 0 3px;
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .02em;
  color: var(--tx); border-bottom: 1px solid var(--line);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.map-embed__link:hover { color: var(--acc); border-bottom-color: var(--acc); }
.map-embed__link svg { flex-shrink: 0; }

/* ============================================================
   Financiranje
   ============================================================ */
.finance-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.finance-card { padding: 44px 40px 48px; background: var(--surf); }
.finance-card__tag {
  display: inline-block; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .24em; color: var(--mut); margin-bottom: 20px;
}
.finance-card h3 { margin: 0 0 16px; font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: .01em; }
.finance-card__hi {
  margin: 0 0 18px; font-family: var(--display); font-weight: 600; font-size: 18px;
  line-height: 1.4; color: var(--acc);
}
.finance-card p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--mut); text-wrap: pretty; }

/* The 10-minute approval is the offer people actually come for, so it gets the
   one inverted card on the page rather than another identical white box. */
.finance-card--acc { background: #131315; }
.finance-card--acc .finance-card__tag { color: rgba(255,255,255,.55); }
.finance-card--acc h3 { color: #fff; }
.finance-card--acc .finance-card__hi { color: #fff; }
.finance-card--acc p { color: rgba(255,255,255,.68); }

.checklist { padding: 40px 34px 44px; background: var(--surf); }
.checklist__label {
  display: block; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--acc); margin-bottom: 22px;
}
.checklist__note { margin: -6px 0 20px; font-size: 15px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.checklist--acc { background: var(--surf2); }

.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.doc-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--tx-2); }
.doc-list li svg { flex: none; margin-top: 4px; color: var(--acc); }

.finance-note {
  margin: 28px 0 0; max-width: 720px; font-size: 14px; line-height: 1.6; color: var(--faint);
}

/* Partners read as a row across the full width, not as a column squeezed into
   a side panel — three logos stacked in a narrow box look cramped and the
   differing logo widths make the column look lopsided. */
.finance-teaser__text { max-width: 820px; }
.finance-teaser__partners { margin-top: 52px; }
.finance-teaser__label {
  display: block; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--mut); margin-bottom: 18px;
}
.partner-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.partner-strip .partner__mark {
  max-width: none; width: 100%; height: 122px; padding: 20px 28px;
  background: var(--surf); margin: 0;
}

.warranty {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px; align-items: center;
}
.warranty__options { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.warranty-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 46px 20px; background: var(--surf);
  transition: background .3s var(--ease);
}
.warranty-card__num { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: -.02em; }
.warranty-card__unit { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .22em; color: var(--mut); }
/* The longer cover is the one worth pointing at, so it carries the filled state. */
.warranty-card--acc { background: #131315; }
.warranty-card--acc .warranty-card__num { color: #fff; }
.warranty-card--acc .warranty-card__unit { color: rgba(255,255,255,.6); }

.partner-group {
  display: block; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--mut); margin-bottom: 18px;
}
.partner-group--gap { margin-top: 44px; }
.partner-grid.partner-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* CarGarantie and Moove have not supplied logo files yet, so their cards carry
   the name set in the site's own type rather than a redrawn trademark. */
.partner__mark--text {
  font-family: var(--display); font-weight: 700; font-size: 23px;
  letter-spacing: .01em; color: var(--tx);
}

.partner-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.partner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 46px 32px; background: var(--surf); transition: background .3s var(--ease);
}
.partner:hover { background: var(--surf2); }
/* Every logo arrives at a different size and aspect ratio, so each one is
   letterboxed into the same fixed box and contained inside it — that, not equal
   file dimensions, is what makes them read as the same size on the page. */
.partner__mark {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 230px; height: 112px; margin: 0 auto;
}
.partner__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.partner__role {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--mut);
}

/* ============================================================
   CTA bands
   ============================================================ */
.band__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 82px 32px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 48px;
}
.band__inner--tight { padding: 76px 32px; gap: 40px; }
.band h2 { margin: 0 0 16px; font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.01em; }
.band h2:only-child { margin-bottom: 0; }
.band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.band__line { margin: 0 0 6px; font-size: 17px; color: var(--tx-2); }
.band__line--mut { margin: 0; font-size: 15px; color: var(--mut); }

/* The closing call-to-action is the one dark surface on the site — after a page
   of white sections it stops the scroll, and the buttons invert to match. */
.band--photo { position: relative; overflow: hidden; background: #0E0E10; border-top: none; }
.band__photo { position: absolute; left: 0; right: 0; top: -8%; height: 116%; will-change: transform; }
.band__photo picture { display: block; width: 100%; height: 100%; }
.band__photo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .5; }
.band__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.62) 52%, rgba(10,10,12,.8) 100%);
}
.band--photo .band__inner { position: relative; z-index: 1; }
.band--photo h2 { color: #fff; }
.band--photo .band__line { color: rgba(255,255,255,.82); }
.band--photo .band__line--mut { color: rgba(255,255,255,.58); }
.band--photo .btn--primary { background: #fff; color: var(--acc); }
.band--photo .btn--primary:hover { background: var(--surf2); color: var(--acc); }
.band--photo .btn--ghost { border-color: rgba(255,255,255,.36); color: #fff; }
.band--photo .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.09); }

/* ============================================================
   About split (home)
   ============================================================ */
.about-split {
  max-width: var(--container); margin: 0 auto; padding: 96px 32px;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 72px; align-items: center;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); background: var(--footer-bg); }
.site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 72px 32px 32px; }
.site-footer__cols {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 48px; padding-bottom: 56px;
}
.site-footer__logo { height: 78px; width: auto; display: block; margin-bottom: 24px; }
.site-footer p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mut); max-width: 320px; }
.site-footer h2 {
  display: block; font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--faint); margin: 0 0 18px;
}
.site-footer__list { display: flex; flex-direction: column; gap: 11px; }
.site-footer__list a { font-size: 15px; color: var(--tx-2); transition: color .3s var(--ease); }
.site-footer__list a:hover { color: var(--acc); }
.site-footer__list a.phone { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--tx); }
.site-footer__list span { font-size: 15px; line-height: 1.55; color: var(--tx-2); }
.site-footer__list span.faint { font-size: 14px; color: var(--faint); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 28px; border-top: 1px solid var(--line);
}
.site-footer__bottom span { font-size: 14px; color: var(--faint); }
.site-footer__bottom .tag {
  font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; color: var(--border-soft);
}

/* ============================================================
   Motion
   ============================================================ */
@keyframes az-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes az-cue {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: 0; }
  61% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .vehicle-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-layout { gap: 44px; }
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 72px 32px 80px; }
  .hero__inner--video { padding: 110px 32px 90px; }
  .vozila-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 64px 32px 60px; }
  .about-split { grid-template-columns: 1fr; gap: 40px; padding: 72px 32px; }
  .about-split .well--square { order: 2; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

@media (max-width: 980px) {
  .finance-grid { grid-template-columns: 1fr; }
  .warranty { grid-template-columns: 1fr; gap: 36px; }
  .finance-card { padding: 38px 30px 42px; }
  .checklist { padding: 34px 26px 38px; }
  .service__body { padding: 0 26px 36px; }
  .partner { padding: 36px 22px; }
  .partner__mark { height: 96px; }
  .partner-strip .partner__mark { height: 104px; padding: 16px 20px; }
  .doc-list li { font-size: 15px; }
}

@media (max-width: 900px) {
  /* The open drawer spans the full height at the right edge, which puts it on
     top of the toggle — so the X could not be tapped and the menu could only be
     dismissed through the scrim. Lift the toggle above the drawer. */
  .nav-toggle { display: inline-flex; position: relative; z-index: 70; }
  .site-header__bar { gap: 16px; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 96px 24px 32px; background: var(--bg);
    border-left: 1px solid var(--line); transform: translateX(100%);
    transition: transform .35s var(--ease); z-index: 60; overflow-y: auto;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav__link { padding: 16px 12px; font-size: 18px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-nav__link[aria-current="page"] { border-bottom-color: var(--acc); }
  .site-nav__phone { margin: 20px 0 0; justify-content: center; padding: 16px 20px; font-size: 17px; }
  /* The scrim must sit BELOW the header, not above it. .site-header is
     position:sticky with z-index:50, so it forms a stacking context — the
     drawer's own z-index:60 counts only inside that context, which leaves the
     whole header stacked at 50. A scrim at 55 therefore covered the open menu
     and the toggle, and every tap landed on the scrim (whose only job is to
     close the menu) instead of the link. That is why the menu did nothing on
     a phone while desktop, which never opens the drawer, looked fine. */
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(22, 22, 26, .45);
    opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); z-index: 45;
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .container, .hero__inner, .vozila-hero__inner, .about-split,
  .band__inner, .band__inner--tight, .site-footer__inner { padding-left: 20px; padding-right: 20px; }
  .hero__inner { padding-top: 56px; padding-bottom: 64px; }
  .hero__inner--video { padding: 88px 20px 72px; }
  .hero--video { min-height: 560px; }
  .photo-band { height: 280px; }
  .photo-band__text { font-size: 17px; }
  .hero__lead { font-size: 17px; margin-bottom: 32px; }
  .hero__ctas { margin-bottom: 32px; }
  .btn { padding: 17px 26px; font-size: 15px; }
  .btn--phone { font-size: 17px; }
  .lead { font-size: 17px; }
  .section-head { margin-bottom: 34px; gap: 14px; padding-bottom: 16px; }
  .section-head.is-in::after { width: 64px; }
  .vehicle-grid, .vehicle-grid--4 { grid-template-columns: 1fr; gap: 18px; }
  .hair-grid { grid-template-columns: 1fr; }
  .service { padding: 32px 24px 36px; }
  .finance-grid { grid-template-columns: 1fr; }
  .finance-card { padding: 34px 24px 38px; }
  .finance-card h3 { font-size: 23px; }
  .checklist { padding: 32px 24px 36px; }
  .partner-grid { grid-template-columns: 1fr; }
  .partner-grid.partner-grid--2 { grid-template-columns: 1fr; }
  .warranty { grid-template-columns: 1fr; gap: 34px; }
  .warranty-card { padding: 34px 16px; }
  .warranty-card__num { font-size: 44px; }
  .finance-teaser__partners { margin-top: 36px; }
  .partner-strip { grid-template-columns: 1fr; }
  .partner-strip .partner__mark { height: 100px; padding: 16px 24px; }
  .partner__mark { height: 96px; max-width: 200px; }
  .partner { padding: 36px 24px; }
  .service__media { aspect-ratio: 16 / 9; }
  .service__body { padding: 0 24px 34px; }
  .service__body .service__icon { margin-top: -24px; margin-bottom: 20px; }
  .band__photo::after { background: linear-gradient(to bottom, rgba(10,10,12,.78) 0%, rgba(10,10,12,.86) 100%); }
  .fact { padding: 32px 24px; }
  .form__row { grid-template-columns: 1fr; }
  .band__inner, .band__inner--tight { padding-top: 56px; padding-bottom: 56px; gap: 32px; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .site-footer__inner { padding-top: 56px; }
  .detail { padding: 24px 20px; }
  .detail__phone { font-size: 24px; }
  .cta-block { padding: 22px 24px; }
  .cta-block__title { font-size: 19px; }
  .scroll-cue { display: none; }
  .stripes-full { opacity: .5; }
  .marquee__item { font-size: 16px; gap: 32px; padding-right: 32px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .scene { opacity: 1 !important; transform: none !important; }
  .scene__inner { transform: none !important; }
  .stagger > * { opacity: 1 !important; transform: none !important; }
}