/* Alona: белое на чёрном. Белый цвет сам по себе акцент, других нет. */
:root {
  --k: #000;
  --w: #fff;
  --t2: #a3a3a8;   /* вторичный текст на чёрном, 8:1 */
  --t3: #6f6f75;   /* вторичный текст на белом, 5:1 */
  --ln: #2a2a2d;   /* линии на чёрном */
  --sf: #161618;   /* подложка на чёрном */
  --bar: #4a4a4e;  /* столбики смены администратора */
  --ln-w: #dcdcdf; /* линии на белом */
  --gut: clamp(16px, 4vw, 56px);
  --body: "Noto Sans Armenian", "Geist", system-ui, sans-serif;
  --num: "Unbounded", "Noto Sans Armenian", system-ui, sans-serif;
}
html[lang="ru"], html[lang="en"] { --body: "Geist", "Noto Sans Armenian", system-ui, sans-serif; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { background: var(--k); color: var(--w); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
ol { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.wm { font: 600 22px/1 "Unbounded", var(--body); letter-spacing: -.02em; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--w); color: var(--k); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.btn.lg { height: 56px; padding: 0 30px; font-size: 17px; }
.btn.dark { background: var(--k); color: var(--w); }
.btn:hover { opacity: .86; }
.btn:disabled { opacity: .5; cursor: default; }

/* шапка */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 var(--gut); background: var(--k); }
.lng { display: flex; gap: 4px; margin-left: auto; font-size: 14px; }
.lng a { display: grid; place-items: center; min-width: 44px; height: 40px; color: var(--t2); }
.lng a:hover { color: var(--w); }
.lng a[aria-current] { color: var(--w); font-weight: 600; }

/* первый экран: день как голосовая волна */
.hero { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100svh - 64px); padding: clamp(24px, 5vh, 64px) var(--gut) 20px; gap: 40px; }
h1 { font-weight: 600; font-size: clamp(40px, 7vw, 112px); line-height: 1.04; letter-spacing: -.03em; max-width: 15em; text-wrap: balance; }
.hero-s { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 64px; margin-top: clamp(24px, 4vh, 44px); }
.lead { flex: 1 1 360px; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); color: var(--t2); }
.hero-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.status { font-size: 14px; color: var(--t2); }

.wave { position: relative; padding-top: 34px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: clamp(110px, 24vh, 220px); }
.bars i { flex: 1 1 0; min-width: 0; height: var(--h); background: var(--bar); border-radius: 2px 2px 0 0; transform-origin: bottom; animation: rise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--n) * 9ms); }
.bars i.a { background: var(--w); }
@keyframes rise { from { transform: scaleY(.02); } to { transform: none; } }
.callout { position: absolute; left: 12.5%; top: 0; bottom: 100px; padding-left: 10px; border-left: 1px solid var(--w); font-size: 14px; line-height: 1.2; white-space: nowrap; animation: appear .4s 1.1s both; z-index: 1; pointer-events: none; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 12px/1 "Unbounded", var(--body); color: var(--t2); }
.wave figcaption { margin-top: 12px; font-size: 14px; color: var(--t2); }

/* секции */
.sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); padding: clamp(72px, 11vw, 150px) var(--gut) 0; }
h2 { font-weight: 600; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.head > p { margin-top: 16px; max-width: 30em; color: var(--t2); }
.note { margin-top: 16px; font-size: 14px; color: var(--t2); max-width: 44em; }

/* звонок */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button { height: 44px; padding: 0 16px; border: 1px solid var(--ln); border-radius: 999px; background: none; font-size: 15px; color: var(--t2); cursor: pointer; }
.tabs button:hover { color: var(--w); }
.tabs button[aria-selected="true"] { background: var(--w); border-color: var(--w); color: var(--k); font-weight: 600; }
.panel { margin-top: 28px; }
.panel[hidden] { display: none; }
.say { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -.01em; }
.say + .say { border-top: 1px solid var(--ln); }
.say span { padding-top: .35em; font-size: 14px; line-height: 1.3; letter-spacing: 0; color: var(--t2); }
.say.c p { color: var(--t2); }
.entry { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; margin-top: 14px; padding: 16px 20px; border-radius: 14px; background: var(--sf); }
.entry span { color: var(--t2); font-size: 14px; align-self: center; }
.entry b { font-weight: 600; }

/* цена */
.prices { display: flex; flex-wrap: wrap; gap: 28px 56px; margin-top: 36px; }
.prices dt { font-size: 15px; color: var(--t2); }
.prices dd { order: -1; font: 500 clamp(30px, 3.2vw, 46px)/1.15 var(--num); letter-spacing: -.03em; white-space: nowrap; }
.prices div { display: flex; flex-direction: column; gap: 6px; }
.prices small { font: 500 .5em var(--body); letter-spacing: 0; color: var(--t2); }

.rng { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; }
.rng + .rng { margin-top: 26px; }
.rng label { color: var(--t2); }
.rng output { font: 500 20px/1 var(--num); }
.rng input { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: none; cursor: pointer; }
.rng input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--w) var(--p, 0%), var(--ln) var(--p, 0%)); }
.rng input::-moz-range-track { height: 2px; background: var(--ln); }
.rng input::-moz-range-progress { height: 2px; background: var(--w); }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: var(--w); }
.rng input::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--w); }

.total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 34px; }
.total b { font: 500 clamp(40px, 6.4vw, 84px)/1.05 var(--num); letter-spacing: -.04em; white-space: nowrap; }
.total span { color: var(--t2); }
.total p { flex-basis: 100%; font-size: 15px; color: var(--t2); }
.cmp { margin-top: 26px; }
.rowb { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 10px 0; font-size: 15px; }
.rowb span:nth-child(2) { font-weight: 600; white-space: nowrap; }
.rowb i { grid-column: 1 / -1; display: block; height: 6px; width: 0; border-radius: 3px; background: var(--bar); transition: width .25s ease; }
.rowb:first-child i { background: var(--w); }

/* шаги */
.steps { counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 22px 0; border-top: 1px solid var(--ln); }
.steps li:last-child { border-bottom: 1px solid var(--ln); }
.steps li::before { content: counter(s); grid-row: span 2; font: 500 22px/1.25 var(--num); }
.steps h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.steps p { margin-top: 4px; color: var(--t2); }

/* вопросы */
.faq details { border-top: 1px solid var(--ln); }
.faq details:last-child { border-bottom: 1px solid var(--ln); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; font-weight: 400; }
details[open] > summary::after { content: "−"; }
.faq summary { min-height: 68px; padding: 14px 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; line-height: 1.3; }
.faq details p { padding: 0 40px 22px 0; color: var(--t2); max-width: 38em; }

/* заявка: единственный белый блок на странице */
.apply { margin-top: clamp(72px, 11vw, 150px); background: var(--w); color: var(--k); }
.apply-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px clamp(40px, 6vw, 96px); padding: clamp(56px, 8vw, 110px) var(--gut); }
.apply h2 { font-size: clamp(40px, 7vw, 112px); letter-spacing: -.03em; }
.apply .head > p { color: var(--t3); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fl { margin-bottom: 22px; border: 0; }
.fl > label, legend { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.fl input:not([type=radio]) { width: 100%; height: 52px; padding: 0 14px; border: 1px solid #8e8e93; border-radius: 12px; background: var(--w); font-size: 17px; outline: none; }
.fl input:focus { border-color: var(--k); box-shadow: 0 0 0 1px var(--k); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-block; cursor: pointer; font-size: 15px; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; height: 44px; padding: 0 16px; border: 1px solid #8e8e93; border-radius: 999px; }
.chip input:checked + span { background: var(--k); border-color: var(--k); color: var(--w); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--k); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; margin: 26px 0 20px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin-top: 1px; accent-color: #000; cursor: pointer; }
.trap { position: absolute; left: -9999px; }
.err { margin-bottom: 14px; font-weight: 600; font-size: 15px; }
#lead .btn { width: 100%; }
.done h3 { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.done p { margin: 12px 0 24px; max-width: 32em; }
.done:focus { outline: none; }
.pv { margin-top: 24px; border-top: 1px solid var(--ln-w); font-size: 15px; }
.pv summary { min-height: 52px; font-weight: 500; }
.pv dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; padding-bottom: 8px; }
.pv dt { color: var(--t3); }

.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 32px var(--gut); font-size: 14px; color: var(--t2); }
.foot .wm { color: var(--w); font-size: 18px; }
.foot span:last-child { margin-left: auto; }

/* внутренние страницы */
.doc { max-width: 980px; padding: clamp(28px, 6vw, 80px) var(--gut) 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--t2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a:hover { color: var(--w); }
.doc h1 { margin-top: 20px; font-size: clamp(38px, 6vw, 84px); }
.doc .lead { max-width: 36em; margin-top: 20px; flex: none; color: var(--w); }
.doc h2 { margin-top: clamp(48px, 7vw, 88px); margin-bottom: 20px; font-size: clamp(26px, 3vw, 40px); }
.doc p, .doc li { max-width: 40em; }
.doc > p:not(.lead) { margin-top: 14px; color: var(--t2); }
.doc ul:not(.crumbs) { list-style: none; border-top: 1px solid var(--ln); }
.doc ul:not(.crumbs) li { padding: 14px 0; border-bottom: 1px solid var(--ln); }
.doc .calc { max-width: 640px; }
.more { margin-top: 24px; }
.more a, .next a { text-decoration: underline; text-underline-offset: 4px; }
.next { margin-top: 48px; font-size: clamp(19px, 2vw, 24px); font-weight: 500; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--ln); text-align: left; vertical-align: top; font-weight: 400; }
.tbl thead th { color: var(--t2); font-size: 14px; }
.tbl tbody th { color: var(--t2); }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.doc .next { margin-top: 32px; }
.band { margin-top: clamp(64px, 9vw, 120px); padding: clamp(48px, 7vw, 88px) var(--gut); background: var(--w); color: var(--k); }
.band h2 { margin: 0 0 24px; font-size: clamp(30px, 4.4vw, 60px); }
.foot a:hover, .fn a:hover { color: var(--w); }
.fn { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 32px var(--gut) 0; font-size: 14px; color: var(--t2); }
.doc .say { max-width: 44em; }
.doc ul.links { display: flex; flex-wrap: wrap; gap: 8px 24px; border: 0; }
.doc ul.links li { padding: 0; border: 0; }
.doc ul.links a { text-decoration: underline; text-underline-offset: 4px; }
.doc .next + .next { margin-top: 12px; }

.nf { display: grid; align-content: center; gap: 16px; min-height: 100svh; padding: var(--gut); }
.nf .wm { font-size: 28px; margin-bottom: 16px; }
.nf p { color: var(--t2); }
.nf a:not(.wm) { color: var(--w); text-decoration: underline; }

@media (max-width: 860px) {
  .sec, .apply-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .bar { gap: 8px; height: 58px; }
  .wm { font-size: 19px; }
  .lng a { min-width: 34px; font-size: 13px; }
  .bar .btn { height: 36px; padding: 0 12px; font-size: 13px; }
  .hero { min-height: calc(100svh - 58px); padding-top: 20px; gap: 28px; }
  .btn.lg { width: 100%; }
  .bars i:nth-child(even) { display: none; }
  .callout { left: 12.5%; }
  .say { grid-template-columns: minmax(0, 1fr); padding: 12px 0; }
  .say span { padding-top: 0; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .doc h1 { font-size: 32px; }
  .tbl.kv, .tbl.kv tbody, .tbl.kv tr, .tbl.kv th, .tbl.kv td { display: block; }
  .tbl.kv thead { display: none; }
  .tbl.kv tr { padding: 12px 0; border-bottom: 1px solid var(--ln); }
  .tbl.kv th, .tbl.kv td { padding: 2px 0; border: 0; }
  .tbl.kv td::before { content: attr(data-l) ": "; color: var(--t2); }
  .foot span:last-child { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bars i, .callout { animation: none; }
  .rowb i { transition: none; }
}