/*
  Макет 7: подбор по поломке. Страница-инструмент: панель с клавишами слева, экран-чек справа.
  Тёплый серый корпус, клавиши с жёстким нижним бортиком, тёмный экран с салатовым текстом, оранжевая кнопка.
  Анимации: нажатие клавиши, построчная «печать» чека, счётчик цены, мигающий курсор.
*/
:root {
  --case: #e7e3da;
  --panel: #f6f4ee;
  --ink: #16211c;
  --muted: #59625d;
  --rule: #c9c4b6;
  --lcd: #16211c;
  --lime: #c5f24b;
  --lime-dim: #8fb034;
  --orange: #ff6a13;
  --orange-dark: #d9520a;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Fira Code", ui-monospace, Consolas, monospace;
  --wrap: 1120px;
}
@media (min-width: 1500px) { html { font-size: 112.5%; } :root { --wrap: 1280px; } }
@media (min-width: 1900px) { html { font-size: 125%; } :root { --wrap: 1440px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--font); color: var(--ink); background: var(--case); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
p, dl, dd, dt, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.wrap--narrow { width: min(800px, 100% - 40px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.btn { display: inline-block; padding: 15px 26px; border: 0; border-bottom: 4px solid var(--orange-dark); border-radius: 6px; background: var(--orange); color: #fff; font: 700 1.02rem var(--font); cursor: pointer; text-decoration: none; transition: transform .08s, border-bottom-width .08s; }
.btn:hover { background: #ff7a2c; }
.btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn--ghost { background: transparent; color: var(--lime); border: 2px solid var(--lime); border-bottom-width: 4px; }
.btn--ghost:hover { background: rgba(197, 242, 75, 0.12); }

/* Шапка */
.top { position: sticky; top: 0; z-index: 40; background: var(--case); border-bottom: 2px solid var(--ink); }
.top__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; }
.top__name { text-decoration: none; }
.top__phone { font-family: var(--mono); font-weight: 500; text-decoration: none; white-space: nowrap; }
.top__phone:hover { color: var(--orange-dark); }

/* Вступление */
.intro { padding: 44px 0 28px; }
.intro__in { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 40px; align-items: center; }
.intro__lead { margin-top: 16px; max-width: 34em; font-size: 1.15rem; }
.intro__face img { width: 150px; height: 150px; object-fit: cover; object-position: 40% 25%; border-radius: 50%; border: 4px solid var(--ink); }

/* Инструмент */
.tool { padding: 12px 0 64px; }
.tool__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.pad { background: var(--panel); border: 2px solid var(--ink); border-radius: 14px; padding: 28px; }
.pad h2 { margin-bottom: 18px; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.key { display: flex; align-items: center; min-height: 68px; padding: 10px 14px; text-align: left; font: 600 1rem/1.2 var(--font); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-bottom-width: 6px; border-radius: 10px; cursor: pointer; transition: transform .08s, border-bottom-width .08s, background .15s, color .15s; }
.key:hover { background: #fffbe8; }
.key:active { transform: translateY(4px); border-bottom-width: 2px; }
.key.is-on { background: var(--ink); color: var(--lime); transform: translateY(4px); border-bottom-width: 2px; }
.pad__hint { margin-top: 18px; font-size: 0.93rem; color: var(--muted); }

/* Экран-чек */
.lcd { position: sticky; top: 76px; background: var(--lcd); color: var(--lime); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; font-family: var(--mono); min-height: 420px; display: flex; flex-direction: column; }
.lcd__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: #0d1512; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--lime-dim); }
.lcd__led { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); animation: led 1.6s steps(2, jump-none) infinite; }
.lcd__idle { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 40px 20px; color: var(--lime-dim); font-size: 1.05rem; text-align: center; }
.lcd__idle[hidden], .lcd__body[hidden] { display: none; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--lime); animation: blink 1s steps(1) infinite; }
.lcd__body { padding: 22px 22px 24px; }
.lcd__sign { font-family: var(--font); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.lcd__cause { margin-top: 8px; font-family: var(--font); font-size: 0.98rem; color: #b8c7bd; }
.lcd__works { margin-top: 18px; border-top: 1px dashed var(--lime-dim); }
.lcd__works li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 11px 0; border-bottom: 1px dashed var(--lime-dim); font-size: 0.9rem; }
.lcd__works .w { grid-column: 1; color: var(--lime); }
.lcd__works .t { grid-column: 1; grid-row: 2; color: #8ea597; font-size: 0.78rem; }
.lcd__works .p { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #fff; white-space: nowrap; }
.lcd__total { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; flex-wrap: wrap; font-size: 0.9rem; }
.lcd__total b { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.lcd__rub { font-size: 1.6rem; color: #fff; }
.lcd__note { margin-top: 8px; font-family: var(--font); font-size: 0.85rem; color: #8ea597; }
.lcd__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; font-family: var(--font); }
/* печать чека построчно */
.lcd__body.is-in .lcd__sign { animation: type .35s steps(12) both; }
.lcd__body.is-in .lcd__cause { animation: rise .4s .12s ease-out both; }
.lcd__body.is-in .lcd__works li { animation: rise .4s var(--d, 200ms) ease-out both; }
.lcd__body.is-in .lcd__total, .lcd__body.is-in .lcd__note, .lcd__body.is-in .lcd__cta { animation: rise .4s .55s ease-out both; }
.lcd.is-flash { animation: flash .25s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes led { 50% { opacity: 0.25; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes flash { 50% { background: #1f3129; } }

/* Что не зависит от поломки */
.always { padding: 40px 0 56px; border-top: 2px solid var(--ink); }
.always h2 { margin-bottom: 22px; }
.conds { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); border-radius: 14px; background: var(--panel); overflow: hidden; }
.cond { padding: 22px 24px; border-left: 2px solid var(--ink); }
.cond:first-child { border-left: 0; }
.cond dt { font-size: 0.85rem; color: var(--muted); }
.cond dd { margin-top: 4px; }
.cond b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }

/* Полный прайс */
.full { padding: 0 0 56px; }
.fulldet { border: 2px solid var(--ink); border-radius: 14px; background: var(--panel); }
.fulldet summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.fulldet summary::-webkit-details-marker { display: none; }
.fulldet summary em { font: 500 0.85rem var(--mono); font-style: normal; color: var(--orange-dark); white-space: nowrap; }
.fulldet[open] summary em { visibility: hidden; }
.pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 4px 26px 8px; }
.pt { width: 100%; border-collapse: collapse; }
.pt caption { text-align: left; font-weight: 800; padding-bottom: 6px; }
.pt caption span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.pt td { padding: 8px 8px 8px 0; border-top: 1px solid var(--rule); font-size: 0.93rem; vertical-align: baseline; }
.t-time { font: 400 0.78rem var(--mono); color: var(--muted); white-space: nowrap; }
.t-price { font: 500 0.88rem var(--mono); text-align: right; white-space: nowrap; padding-right: 0 !important; }
.pts__fine { padding: 8px 26px 22px; font-size: 0.88rem; color: var(--muted); }

/* Кто приедет */
.me { padding: 56px 0; border-top: 2px solid var(--ink); }
.me__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.me__text h2 { margin-bottom: 18px; }
.me__text p + p { margin-top: 12px; }
.me__text p { max-width: 36em; }
.me__meta { margin-top: 16px !important; font-size: 0.95rem; color: var(--muted); }
.me__meta b { color: var(--ink); }
.me__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid var(--ink); border-radius: 14px; }
.me__photo figcaption { margin-top: 8px; font: 400 0.8rem var(--mono); color: var(--muted); }

/* FAQ */
.faqsec { padding: 56px 0; border-top: 2px solid var(--ink); }
.faqsec h2 { margin-bottom: 22px; }
.faq { border-bottom: 2px solid var(--ink); }
.qa { border-top: 2px solid var(--ink); }
.qa summary { cursor: pointer; padding: 16px 40px 16px 0; font-weight: 700; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font: 500 1.5rem var(--mono); color: var(--orange-dark); }
.qa[open] summary::after { content: "−"; }
.qa p { padding: 0 0 18px; color: var(--muted); max-width: 40em; }

/* Заявка */
.request { padding: 64px 0; background: var(--ink); color: #fff; }
.request__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.request__phone { display: inline-block; margin: 20px 0 12px; font-family: var(--mono); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.5rem); color: var(--lime); text-decoration: none; }
.request__phone:hover { color: #fff; }
.request__text > p { color: #b8c7bd; max-width: 26em; }
.messengers { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.msg { font-weight: 700; color: var(--lime); }
.form { display: grid; gap: 20px; }
.form label { display: grid; gap: 4px; font-size: 0.88rem; color: var(--muted); }
.request .form label, .request .form__note { color: #b8c7bd; }
.form input, .form textarea { font: 400 1.1rem var(--font); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 11px 13px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.form input.is-error { border-color: #d00; }
.form .btn { justify-self: start; }
.form__note { font-size: 0.8rem; color: var(--muted); max-width: 30em; }
.form__ok { font-weight: 700; color: #1f6b34; }
.form__ok.is-error { color: #b3261e; }
.request .form__ok { color: var(--lime); }

/* Подвал */
.foot { padding: 28px 0 32px; background: var(--case); border-top: 2px solid var(--ink); }
.foot__row { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap; }
.foot__phone { font-family: var(--mono); font-weight: 500; text-decoration: none; }
.foot__fine { margin-top: 14px; font-size: 0.85rem; color: var(--muted); }

/* Модальное окно */
.modal { width: min(440px, calc(100% - 32px)); padding: 30px 26px 22px; border: 2px solid var(--ink); border-radius: 14px; background: var(--panel); color: var(--ink); }
.modal::backdrop { background: rgba(22, 33, 28, 0.65); }
.modal[open] { animation: rise .2s ease-out; }
.modal h2 { font-size: 1.5rem; padding-right: 30px; margin-bottom: 18px; }
.modal__x { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); font: 500 1.9rem/1 var(--font); cursor: pointer; }
.modal .form .btn { justify-self: stretch; width: 100%; text-align: center; }
.modal__alt { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.93rem; color: var(--muted); }
.modal__alt a { color: var(--ink); font-family: var(--mono); white-space: nowrap; }
body.modal-open { overflow: hidden; }

.callbar { display: none; }

@media (max-width: 980px) {
  .tool__in, .me__in, .request__grid { grid-template-columns: 1fr; gap: 28px; }
  .lcd { position: static; min-height: 0; }
  .conds { grid-template-columns: 1fr; }
  .cond { border-left: 0; border-top: 2px solid var(--ink); }
  .cond:first-child { border-top: 0; }
  .pts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .intro { padding-top: 28px; }
  .intro__in { grid-template-columns: minmax(0, 1fr) 84px; gap: 16px; }
  .intro__face img { width: 84px; height: 84px; }
  .pad { padding: 20px 16px; }
  .keys { grid-template-columns: 1fr; }
  .key { min-height: 58px; }
  .top__full { display: none; }
  .btn { width: 100%; text-align: center; }
  .form .btn { justify-self: stretch; }
  .lcd__cta .btn { width: 100%; }
  .foot { padding-bottom: 84px; }
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; border-top: 2px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); background: var(--case); }
  .callbar a { text-align: center; padding: 15px 8px; font-weight: 700; text-decoration: none; }
  .callbar__call { background: var(--orange); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor, .lcd__led { animation: none; }
  .lcd__body.is-in * { animation: none !important; }
  .modal[open] { animation: none; }
}