/* ============================================================
   zamok-servis.com.ua
   Напрямок «Нічна служба».
   Акцент --accent уживається ТІЛЬКИ для телефону і кнопок дії.
   ============================================================ */

@font-face {
  font-family: "Site";
  src: url("/assets/fonts/font-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Site";
  src: url("/assets/fonts/font-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* палітра */
  --ground:   #1B1F26;
  --surface:  #232A33;
  --accent:   #E8A33D;
  --text:     #EDEFF2;
  --muted:    #8E97A3;
  --hairline: #2C333D;

  /* шкала відступів, крок 4px */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --s7: 96px;

  /* типографічна шкала */
  --f1: 13px;
  --f2: 15px;
  --f3: 17px;
  --f4: 21px;
  --f5: clamp(26px, 6vw, 34px);
  --f6: clamp(34px, 9vw, 52px);

  --measure: 65ch;
  --radius: 10px;

  --font: "Site", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--f3);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 600;
}
h1 { font-size: var(--f6); }
h2 { font-size: var(--f5); }
h3 { font-size: var(--f4); }

p, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- каркас ---------- */

.wrap {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--s4);
}

.section {
  padding-block: var(--s6);
}
.section--tight { padding-block: var(--s5); }
.section--surface { background: var(--surface); }

.stack { display: flex; flex-direction: column; }
.stack--s2 { gap: var(--s2); }
.stack--s3 { gap: var(--s3); }
.stack--s4 { gap: var(--s4); }
.stack--s5 { gap: var(--s5); }

.eyebrow {
  font-size: var(--f1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.muted { color: var(--muted); }
.prose { max-width: var(--measure); }
.nums  { font-variant-numeric: tabular-nums; }

/* ---------- кнопка дії ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: var(--s3) var(--s4);
  background: var(--accent);
  color: var(--ground);
  font-size: var(--f3);
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.cta--block { display: flex; width: 100%; }

@media (hover: hover) {
  .cta:hover { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  .cta { transition: filter 0.15s ease; }
}

/* ---------- перший екран ---------- */

.hero {
  padding-block: var(--s6) var(--s5);
}

.hero__tel {
  display: block;
  color: var(--accent);
  font-size: var(--f6);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-decoration: none;
}

.hero__tel-label {
  display: block;
  font-size: var(--f1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  color: var(--muted);
  font-size: var(--f2);
}
.facts li { display: flex; align-items: center; gap: var(--s3); }
.facts li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hairline);
}

.msgr {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.msgr a {
  display: block;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border-radius: var(--radius);
  font-size: var(--f2);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- картки послуг ---------- */

.cards {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  padding: var(--s4);
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.card__price { color: var(--accent); font-weight: 700; font-size: var(--f4); }

/* Кнопка притиснута до низу картки: тексти послуг різної довжини, і без
   цього кнопки стояли б на різній висоті в сусідніх картках. Кольору тут
   немає — вона акцентна від .cta, нової появи --accent не з'являється. */
.card__cta { margin-top: auto; }

/* ---------- прайс ---------- */

.price {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.price th,
.price td {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--f2);
  font-weight: 400;
  vertical-align: baseline;
}
.price td {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  padding-left: var(--s3);
}
.price tr:last-child th,
.price tr:last-child td { border-bottom: 0; }

.price-extra {
  padding: var(--s4);
  background: var(--surface);
  border-radius: var(--radius);
}

/* ---------- причини ---------- */

.reasons li { max-width: var(--measure); }
.reasons b { font-weight: 700; }

/* ---------- форма ---------- */

.callback {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 420px;
}
.callback label {
  font-size: var(--f1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.callback input[type="tel"] {
  min-height: 52px;
  padding: var(--s2) var(--s3);
  background: var(--ground);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--f3);
}
.callback input[type="tel"]:focus-visible { border-color: var(--accent); }

.callback button { margin-top: var(--s2); }

.callback__msg { min-height: 1.6em; font-size: var(--f2); color: var(--muted); }
/* Успіх не фарбується акцентом: акцент належить дії — номеру телефону
   й кнопкам, — а повідомлення про успіх дією не є. */
.callback__msg[data-state="ok"] { color: var(--text); }
.callback__msg[data-state="error"] { color: var(--text); font-weight: 600; }

/* honeypot: прибраний з потоку, недоступний ні оку, ні клавіатурі */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- контакти ---------- */

.tels { font-size: var(--f4); font-weight: 700; }
.tels a { color: var(--accent); text-decoration: none; }

.places {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.place__map {
  display: inline-block;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-size: var(--f2);
}

@media (hover: hover) {
  .place__map:hover { background: var(--surface); }
}

/* ---------- плаваюча кнопка ---------- */

.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
}

/* Щоб плаваюча кнопка не перекривала кінець сторінки. */
body { padding-bottom: 84px; }

@media (min-width: 720px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- перемикач мов ---------- */
/* Не фарбується акцентом: акцент належить дії (дзвінку),
   а зміна мови нею не є. */

.langs {
  display: flex;
  gap: var(--s2);
  font-size: var(--f1);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.langs a,
.langs__current {
  padding: var(--s1) var(--s2);
  border-radius: 6px;
  text-decoration: none;
}
.langs__current { background: var(--surface); color: var(--text); }
.langs a { color: var(--muted); }

/* ---------- банер вибору мови ---------- */
/* Прихований у розмітці атрибутом hidden, показується лише скриптом:
   без JavaScript банера не видно, і жодного авто-перенаправлення тут немає. */

.langbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--f2);
}
.langbar[hidden] { display: none; }
.langbar p { margin-right: auto; }

.langbar__go,
.langbar__close {
  padding: var(--s2) var(--s3);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.langbar__go {
  background: var(--text);
  color: var(--ground);
  text-decoration: none;
}
.langbar__close {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--hairline);
}