* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 24px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input { font: inherit; color: inherit; }
h1, h2 { margin: 0; }

/* ---------- Шапка ---------- */

.hero { position: relative; min-height: 62svh; display: flex; flex-direction: column; }

.hero__media { position: absolute; inset: 0; background: #101317; overflow: hidden; }
.hero__placeholder {
  position: absolute; inset: 64px var(--s-4) var(--s-4);
  border: 1px dashed var(--stroke-strong); border-radius: var(--r-lg);
  display: grid; place-items: center;
  color: var(--text-3); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
/* Затемнение не для красоты, а чтобы белый текст читался поверх любого кадра */
.hero__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to bottom, rgba(11,13,16,0), rgba(11,13,16,.94) 78%, var(--bg));
  pointer-events: none;
}

.hero__top {
  position: relative; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--page-x);
}
.logo { width: 32px; height: 32px; display: block; }
.hero__name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

.hero__body { position: relative; margin-top: auto; padding: 0 var(--page-x) var(--s-8); }

.rubric {
  margin: 0 0 var(--s-2);
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.hero__title { font-size: 34px; line-height: 38px; font-weight: 600; letter-spacing: -.02em; }

.rating {
  display: inline-flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  margin: var(--s-4) 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--stroke); border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  text-decoration: none; color: inherit;
}
.rating__stars { color: var(--star); font-size: 15px; letter-spacing: .06em; }
.rating__value { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.rating__count { font-size: 13px; color: var(--text-2); }

.hero__addr { margin: 0 0 var(--s-1); font-size: 15px; line-height: 20px; color: var(--text-2); }
.hero__open { margin: 0; font-size: 15px; line-height: 20px; color: var(--text-2); }
.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); margin-right: var(--s-2); vertical-align: middle;
}

/* ---------- Шаги ---------- */

.page { padding: 0 var(--page-x); max-width: 560px; margin: 0 auto; }

.step { padding: var(--s-8) 0 0; }
.step__title { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; }
.step__hint { margin: var(--s-2) 0 var(--s-4); font-size: 15px; line-height: 20px; color: var(--text-2); }

.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text); font-size: 15px; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--stroke-strong);
}
.link--block { display: block; width: 100%; text-align: left; padding: var(--s-4) 0; color: var(--text-2); }

/* Машины */
.cars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.car {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: var(--s-3);
  min-height: 148px;
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.car:active { transform: scale(.985); }
.car[aria-checked="true"] { border-color: var(--accent); background: var(--accent-weak); }
.car__art {
  height: 44px; margin-bottom: var(--s-2); border-radius: var(--r-sm);
  background: var(--surface-2);
  display: block;
}
.car__name { display: block; font-size: 17px; font-weight: 600; }
.car__eg { display: block; font-size: 13px; line-height: 18px; color: var(--text-3); }
.car__from { display: block; margin-top: auto; font-size: 15px; font-weight: 600; color: var(--text-2); }

.plate-row { margin-top: var(--s-3); }
.plate { display: block; }
.plate__label { display: block; font-size: 13px; color: var(--text-3); margin-bottom: var(--s-2); }
.plate__input, .field__input {
  width: 100%; height: 56px; padding: 0 var(--s-4);
  background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--r-sm);
  outline: none; font-size: 17px; letter-spacing: .04em;
}
.plate__input::placeholder, .field__input::placeholder { color: var(--text-3); letter-spacing: normal; }
.plate__input:focus, .field__input:focus { border-color: var(--accent); }

/* Услуги — строки, а не сетка: строки читаются быстрее */
.services { display: flex; flex-direction: column; gap: var(--s-2); }
.service {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4);
  width: 100%; text-align: left; padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.service[aria-checked="true"] { border-color: var(--accent); background: var(--accent-weak); }
.service > span:first-child { display: block; }
.service__name { display: inline; font-size: 17px; font-weight: 600; }
.service__what { display: block; margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.service__dur { display: block; margin: var(--s-2) 0 0; font-size: 13px; color: var(--text-3); }
.service__tag {
  display: inline-block; margin-left: var(--s-2); padding: 1px 8px;
  font-size: 12px; font-weight: 600; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); color: var(--text-2);
}
.service__price { font-size: 22px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

/* Дни и время */
.days { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-3); scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day {
  flex: 0 0 auto; padding: var(--s-2) var(--s-4); min-height: var(--tap-min);
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-sm);
  cursor: pointer; text-align: center;
}
.day[aria-selected="true"] { border-color: var(--accent); background: var(--accent-weak); }
.day__name { display: block; font-size: 15px; font-weight: 600; }
.day__free { display: block; font-size: 12px; color: var(--text-3); }

.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.slot {
  height: 56px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--stroke);
  font-size: 17px; font-weight: 600; cursor: pointer;
}
.slot[aria-checked="true"] { border-color: var(--accent); background: var(--accent-weak); }

.empty { padding: var(--s-6); background: var(--surface); border-radius: var(--r-md); }
.empty b { display: block; font-size: 20px; margin-bottom: var(--s-2); }
.empty p { margin: 0; color: var(--text-2); font-size: 15px; }

.field { display: block; }
.field__label { display: block; font-size: 13px; color: var(--text-3); margin-bottom: var(--s-2); }
.hold {
  margin: var(--s-3) 0 0; font-size: 13px; color: var(--warning);
}

/* ---------- Готово ---------- */
.done { padding: var(--s-12) 0 var(--s-8); text-align: left; }
.done__mark {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; margin-bottom: var(--s-6);
}
.done__mark svg { width: 40px; height: 40px; }
.done__when { font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; }
.done__what { margin: var(--s-2) 0 0; font-size: 17px; }
.done__addr { margin: var(--s-1) 0 0; font-size: 15px; color: var(--text-2); }
.done__acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-6); }
.done__acts .ghost { cursor: pointer; }
.done__note {
  margin-top: var(--s-6); padding: var(--s-4);
  background: var(--surface); border-radius: var(--r-md); font-size: 15px; line-height: 21px;
}
.done__cancel { margin: var(--s-4) 0 0; font-size: 13px; color: var(--text-3); }

/* ---------- Доверие ---------- */
.reviews { padding: var(--s-12) 0 0; }
.reviews__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.reviews__big { font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -.03em; }
.reviews__count { margin: var(--s-1) 0 0; font-size: 13px; color: var(--text-2); }
.review {
  margin: 0 0 var(--s-3); padding: var(--s-4);
  background: var(--surface); border-radius: var(--r-md);
}
.review p { margin: 0 0 var(--s-2); font-size: 15px; line-height: 21px; }
.review cite { font-style: normal; font-size: 13px; color: var(--text-3); }

.perks { padding: var(--s-12) 0 0; }
.perks__title { font-size: 22px; line-height: 28px; font-weight: 600; margin-bottom: var(--s-4); }
.perks__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.perks__list li { font-size: 15px; color: var(--text-2); }

.contacts { padding: var(--s-12) 0 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ghost {
  display: block; height: 56px; line-height: 54px; text-align: center;
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-sm);
  text-decoration: none; color: var(--text); font-size: 15px; font-weight: 600;
}

.tail { height: 120px; }

/* ---------- Кнопка ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: var(--s-3) var(--page-x) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(11,13,16,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--stroke);
}
.cta {
  display: block; width: 100%; max-width: 560px; margin: 0 auto;
  height: 56px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform 90ms var(--ease);
}
.cta:active:not(:disabled) { transform: scale(.985); background: var(--accent-press); }
.cta:disabled { background: var(--surface-2); color: var(--text-2); cursor: default; }

/* Появление шага: одно короткое движение, ничего больше */
.step[hidden] { display: none; }
.step.is-entering { animation: rise var(--t-base) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* На большом экране шапка живёт в той же колонке, что и шаги */
@media (min-width: 768px) {
  .hero { min-height: 72vh; }
  .hero__top, .hero__body { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
  .hero__title { font-size: 40px; line-height: 46px; }
}

/* Постоянному клиенту — то, что ему нужно, сразу */
.usual {
  margin-top: var(--s-8); padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-md);
}
.usual__label { margin: 0; font-size: 13px; color: var(--text-3); }
.usual__what { margin: var(--s-1) 0 0; font-size: 17px; font-weight: 600; }
.usual__when { margin: 2px 0 0; font-size: 15px; color: var(--text-2); }
.usual__alt { display: flex; gap: var(--s-4); margin-top: var(--s-3); flex-wrap: wrap; }
.usual__alt .link { font-size: 13px; color: var(--text-2); }

/* Нет связи — телефон виден всегда */
.offline {
  position: sticky; top: 0; z-index: 20;
  padding: var(--s-2) var(--page-x);
  background: var(--warning); color: #1B1200;
  font-size: 13px; font-weight: 600; text-align: center;
}
.offline a { color: inherit; }

.note { margin: var(--s-3) 0 0; font-size: 13px; color: var(--text-2); }
.empty a { color: var(--text); }


/* Приеду сам или заберите машину — один переключатель, а не второй сценарий */
.segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin-bottom: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--r-sm);
}
.segment__btn {
  height: 44px; border: 0; background: none; border-radius: 12px;
  color: var(--text-2); font-size: 15px; cursor: pointer;
}
.segment__btn.is-on { background: var(--surface); color: var(--text); font-weight: 600; }