/* Шаблон «Быстрый груз» от Webman. Предложение как макет: короткая фраза набрана плакатом,
   а вместо среднего слова едет грузовик. Всё, что зависит от бренда, лежит в :root, в index.html и в CONFIG внутри app.js. */

@font-face { font-family: "Alumni Sans"; font-weight: 100 900; font-display: swap; src: url(fonts/alumni-sans-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alumni Sans"; font-weight: 100 900; font-display: swap; src: url(fonts/alumni-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url(fonts/golos-text-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url(fonts/golos-text-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #6bb4ee;          /* небо */
  --ink: #0e1822;         /* чернила и ночная дорога */
  --muted: #1b3d5c;
  --accent: #ff5a1f;      /* сигнальный оранжевый: кнопки, полоса на кузове, цена */
  --white: #ffffff;

  --t-small: 15px;
  --t-body: 18px;
  --t-lead: clamp(24px, 2vw + 8px, 36px);
  --t-head: clamp(64px, 9vw, 140px);
  --t-display: clamp(104px, 13.4vw, 210px);
  --t-stat: clamp(56px, 5.8vw, 88px);

  --m: clamp(16px, 2vw, 28px);
  --gap: clamp(96px, 11vw, 176px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: "Alumni Sans", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (min-width: 1024px) { :root { --t-body: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { font: 400 var(--t-body)/1.55 var(--text); color: var(--ink); background: var(--bg); overflow-x: clip; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- кнопки и ссылки: одна форма, полное скругление ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 0 34px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 var(--t-body)/1.1 var(--text); text-decoration: none; transition: transform 0.3s var(--ease), background-color 0.25s; }
.btn:hover { transform: translateY(-3px) scale(1.02); background: #ff7344; }
.btn:active { transform: scale(0.97); }
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: opacity 0.2s; }
.link svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.link:hover { opacity: 0.65; }

/* ---------- верхняя строка ---------- */
.top { position: absolute; z-index: 5; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--m); }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--ink); font: 800 var(--t-lead)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.top__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.top__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-small); font-weight: 500; text-underline-offset: 5px; }
.top__nav a:hover { text-decoration: underline; }
.top__tel { font-weight: 700 !important; text-decoration: underline; }

/* ---------- первый экран ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: clamp(112px, 21vh, 210px) var(--m) 36px; background: var(--bg); }
.sentence { display: flex; align-items: baseline; gap: 0.1em; font: 800 var(--t-display)/0.8 var(--display); text-transform: uppercase; letter-spacing: -0.005em; }
.sentence .w { display: inline-block; }
.strip { flex: 1; min-width: 0; height: 0.6em; border-radius: 14px; overflow: hidden; background: var(--ink); }
.strip__svg { width: 100%; height: 100%; }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: clamp(40px, 9vh, 100px); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); margin-top: auto; padding-top: 56px; }
.facts li { display: grid; gap: 6px; align-content: start; }
.facts b { font: 800 var(--t-stat)/0.9 var(--display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.facts span { font-size: var(--t-body); }
.hero__sub { margin: 56px auto 0; padding-top: 0; max-width: 44ch; text-align: center; font-size: var(--t-body); }
.hero__sub b { font-variant-numeric: tabular-nums; font-weight: 800; }

/* анимация полосы: ночной город едет назад, колёса крутятся */
.strip__svg .pan { animation: pan 46s linear infinite; }
.strip__svg .dash { animation: dash 0.55s linear infinite; }
.strip__svg .speed { animation: speed 0.9s linear infinite; }
.strip__svg .truck { animation: bump 0.34s ease-in-out infinite alternate; }
.strip__svg .wheel { animation: spin 0.5s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pan { to { transform: translateX(-1000px); } }
@keyframes dash { to { transform: translateX(-100px); } }
@keyframes speed { from { transform: translateX(0); opacity: 0.7; } to { transform: translateX(-46px); opacity: 0; } }
@keyframes bump { to { transform: translateY(-1.4px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- как работаем: по одному глаголу ---------- */
.panel { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); min-height: max(100svh, 640px); overflow: clip; background: var(--p-bg); color: var(--p-ink); }
.panel--ink { --p-bg: var(--ink); --p-ink: var(--white); }
.panel--white { --p-bg: var(--white); --p-ink: var(--ink); }
.panel--sky { --p-bg: var(--bg); --p-ink: var(--ink); }
.panel--orange { --p-bg: var(--accent); --p-ink: var(--ink); }
.panel__txt { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 64px var(--m); }
.verb { font: 800 var(--t-display)/0.84 var(--display); text-transform: uppercase; letter-spacing: -0.005em; }
.panel__txt p { margin-top: 32px; max-width: 32ch; font-size: var(--t-body); }
.panel__pic { grid-column: 7 / 13; position: relative; overflow: hidden; background: var(--muted); }
.panel__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; will-change: transform; }

/* ---------- почему мы: один абзац, картинки вместо слов ---------- */
.why { background: var(--white); padding: var(--gap) var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 72px; }
.why__p { grid-column: 1 / 12; font: 500 var(--t-lead)/1.18 var(--text); letter-spacing: -0.01em; }
.slot { display: inline-block; width: 2.6em; height: 1.3em; margin: 0 0.1em; vertical-align: -0.3em; border-radius: 0.2em; overflow: hidden; background: var(--muted); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.why__more { grid-column: 7 / 13; display: grid; gap: 24px; justify-items: start; }
.why__more p { max-width: 36ch; }

/* ---------- цена: предложение, которое можно собрать ---------- */
.cost { background: var(--ink); color: var(--white); min-height: 90svh; padding: var(--gap) var(--m); display: flex; flex-direction: column; justify-content: space-between; gap: 72px; }
.plan { --u: var(--t-head); font: 800 var(--u)/0.95 var(--display); text-transform: uppercase; letter-spacing: -0.005em; }
.plan__l { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.2em; }
.plan__c { margin-left: -0.2em; }
.var { font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--bg); text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; transition: opacity 0.2s, transform 0.25s var(--ease); }
.var:hover { opacity: 0.75; transform: translateY(-0.04em); }
.step { display: inline-flex; align-items: center; gap: 0.1em; }
.step button { width: calc(var(--u) * 0.5); height: calc(var(--u) * 0.5); border-radius: 50%; background: var(--bg); color: var(--ink); font: 800 var(--t-lead)/1 var(--text); display: grid; place-items: center; transition: transform 0.2s var(--ease), background-color 0.2s; }
.step button:hover { background: var(--white); transform: scale(1.08); }
.step button:active { transform: scale(0.92); }
.step output { min-width: 0.95em; text-align: center; font-variant-numeric: tabular-nums; }
.price { display: inline-block; margin-left: 0.15em; padding: 0 0.15em; background: var(--accent); color: var(--ink); font-variant-numeric: tabular-nums; transition: transform 0.3s var(--ease); }
.price.is-bump { animation: bump-price 0.4s var(--ease); }
@keyframes bump-price { from { transform: scale(0.94); } to { transform: none; } }
.cost__row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.cost__row p { flex: 1 1 36ch; max-width: 52ch; }

/* ---------- вопросы: таблица, всё открыто ---------- */
.faq { background: var(--white); padding: var(--gap) 0; }
.qa { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); padding: 0 var(--m); margin-top: clamp(40px, 5vw, 80px); align-items: baseline; }
.qa:first-child { margin-top: 0; }
.qa__q { grid-column: 1 / 7; font: 700 var(--t-lead)/1.1 var(--text); letter-spacing: -0.01em; }
.qa__q--soft { color: var(--muted); font-weight: 500; }
.qa__a { grid-column: 8 / 13; max-width: 40ch; }

/* ---------- заявка ---------- */
.cta { background: var(--ink); color: var(--white); min-height: 90svh; padding: var(--gap) var(--m) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.cta__h { font: 800 var(--t-display)/0.86 var(--display); text-transform: uppercase; }
.cta__h span { display: block; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta__row p { max-width: 40ch; }

/* ---------- контакты ---------- */
.contact { background: var(--bg); padding: 160px var(--m) 120px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: start; row-gap: 32px; }
.contact__p { grid-column: 1 / 7; font: 500 var(--t-lead)/1.15 var(--text); letter-spacing: -0.01em; }
.contact__pic { grid-column: 8 / 10; }
.contact__pic img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 30% 50%; }
.contact__links { grid-column: 10 / 13; display: grid; gap: 4px; justify-items: start; }
.contact__q { font-weight: 700; margin-bottom: 8px; }
.contact__city { margin-top: 16px; font-size: var(--t-small); color: var(--muted); }

/* ---------- подвал: телефон как заголовок ---------- */
.foot { background: var(--accent); color: var(--ink); min-height: 90svh; padding: 40px var(--m) 28px; display: flex; flex-direction: column; overflow: clip; }
.foot__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); font-size: var(--t-small); font-weight: 500; }
.foot__top p { grid-column: span 3; }
.foot__up { grid-column: 12 / 13; justify-self: end; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 5px; }
.foot__tel { margin-top: auto; font: 800 var(--t-display)/0.86 var(--display); letter-spacing: -0.01em; word-spacing: -0.06em; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: transform 0.4s var(--ease); display: block; }
.foot__tel:hover { transform: translateX(0.6vw); }
.foot__meta { margin-top: 28px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px var(--m); font-size: var(--t-small); }
.foot__meta p:nth-child(3) { text-align: right; }
.foot__credit { max-width: 60ch; }

/* ---------- движение ---------- */
.js [data-r] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-r].in { opacity: 1; transform: none; }
.js .sentence .w { opacity: 0; transform: translateY(0.25em); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); }
.js .sentence .w:last-child { transition-delay: 0.25s; }
.js .strip { clip-path: inset(0 100% 0 0 round 14px); transition: clip-path 1.1s var(--ease) 0.15s; }
.js .strip__svg { transform: scale(1.12); transition: transform 1.5s var(--ease) 0.15s; }
.js .hero__act, .js .hero__sub, .js .facts { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease) 0.7s, transform 0.9s var(--ease) 0.7s; }
.js.ready .sentence .w { opacity: 1; transform: none; }
.js.ready .strip { clip-path: inset(0 0 0 0 round 14px); }
.js.ready .strip__svg { transform: none; }
.js.ready .hero__act, .js.ready .hero__sub, .js.ready .facts { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-r], .js .sentence .w, .js .hero__act, .js .hero__sub, .js .facts { opacity: 1; transform: none; transition: none; }
  .js .strip { clip-path: none; transition: none; }
  .js .strip__svg { transform: none; transition: none; }
  .strip__svg .pan, .strip__svg .dash, .strip__svg .speed, .strip__svg .truck, .strip__svg .wheel { animation: none; }
  .btn, .step button, .var { transition: none; }
}

/* ---------- планшет и телефон ---------- */
@media (max-width: 1023.98px) {
  .top__nav a:not(.top__tel) { display: none; }
  .panel__txt { grid-column: 1 / 13; padding-right: var(--m); }
  .panel { grid-template-rows: auto minmax(320px, 56svh); min-height: 0; }
  .panel__pic { grid-column: 1 / 13; grid-row: 2; }
  .why__p { grid-column: 1 / 13; }
  .why__more { grid-column: 1 / 13; }
  .qa__q, .qa__a { grid-column: 1 / 13; }
  .qa__a { margin-top: 12px; }
  .contact { padding: 96px var(--m); }
  .contact__p { grid-column: 1 / 13; }
  .contact__pic { grid-column: 1 / 5; grid-row: 2; }
  .contact__links { grid-column: 5 / 13; grid-row: 2; }
  .foot__top p { grid-column: 1 / 13; }
  .foot__up { grid-column: 1 / 13; justify-self: start; }
  .foot__meta { grid-template-columns: 1fr; }
  .foot__meta p:nth-child(3) { text-align: left; }
}
@media (max-width: 767.98px) {
  :root { --t-body: 17px; --t-lead: 24px; --t-head: clamp(56px, 18vw, 84px); --t-display: 26vw; --t-stat: 56px; --gap: 88px; }
  .hero { padding-top: 104px; }
  .sentence { flex-wrap: wrap; align-items: baseline; gap: 0 0.14em; line-height: 0.84; }
  .strip { order: 3; flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 2 / 1; margin-top: 18px; }
  .hero__act { margin-top: 36px; }
  .btn, .hero__act .btn { width: 100%; }
  .facts { grid-template-columns: 1fr; padding-top: 96px; gap: 28px; }
  .plan { --u: clamp(52px, 15vw, 72px); }
  .cost { min-height: 0; }
  .cost__row .btn { width: 100%; }
  .why__p { font-size: var(--t-lead); line-height: 1.2; }
  .slot { width: 2.2em; }
  .cta__h { font-size: var(--t-head); }
  .foot { min-height: 0; padding-top: 28px; }
  .foot__tel { font-size: 12vw; margin-top: 96px; }
  .contact__pic { grid-column: 1 / 5; }
  .contact__links { grid-column: 5 / 13; }
}