/* ============================================================
   Бьюти Сервис — дизайн-система beautyserv63.ru
   Канон сетевого сервисного центра: белый фон, один акцент,
   плотная информационная подача. Акцент — сталь заточенного
   лезвия, а не бьюти-пастель: сервис чинит инструмент, а не
   продаёт красоту, и должен читаться как техническая экспертиза,
   а не как ещё один маникюрный бренд. Нейтрали уведены в его
   сторону, чтобы серый не читался как случайный. Контраст
   просчитан по WCAG: текст 4.5:1, графика и рамки полей 3:1.
   ============================================================ */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/hanken-grotesk.woff2) format('woff2')}

:root{
  --bg:#ffffff;
  /* Нейтрали с уводом в холодную сталь: чистый серый читается как недодуманный */
  --surface:#f5f6f8; --surface-2:#eceef1; --surface-3:#12131a;
  --text:#14171c; --muted:#565d68; --faint:#737a85;
  /* --accent для графики (3:1), --accent-ink для текста и кнопок (4.5:1+) */
  --accent:#4a7fb0; --accent-ink:#2f5f8a; --accent-dark:#234a6d; --accent-soft:#e9eff5;
  --dark:#16181d;
  --border:#e2e5ea; --border-2:#cdd2d9;
  --field-border:#a3aebb;
  --save:#1f7a45; --save-soft:#e4f2ea;
  --warn:#a8590a;
  /* Шкала кегля: девять ступеней, дальше начинается каша. Заголовки h1/h2
     живут отдельно на clamp(), потому что тянутся вместе с шириной окна. */
  --fs-2xs:.68rem; --fs-xs:.78rem; --fs-sm:.86rem; --fs-base:.94rem;
  --fs-md:1rem; --fs-lg:1.06rem; --fs-h3:1.12rem; --fs-xl:1.3rem; --fs-2xl:1.6rem;
  --r:12px; --r-sm:8px; --r-pill:100px;
  --shadow-1:0 1px 2px rgba(22,24,29,.05), 0 2px 8px -4px rgba(22,24,29,.10);
  --shadow-2:0 2px 4px rgba(22,24,29,.05), 0 12px 28px -12px rgba(22,24,29,.20);
  /* Штатные CSS-кривые слабые: своя, с выраженным началом */
  --ease-out:cubic-bezier(.23,1,.32,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
/* Русские составные слова в крупных заголовках распирают узкие экраны */
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance;letter-spacing:-.021em;line-height:1.18}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-width:0}
img{max-width:100%}
main,section,.wrap,.hero-grid,.hero-grid>*{min-width:0}
/* Поверхности, которые рисует браузер, а не мы: выделение, каретка, полоса
   прокрутки. По умолчанию они принадлежат системе, а не сайту. */
::selection{background:var(--accent-ink);color:#fff}
input,select,textarea{caret-color:var(--accent-ink)}
@supports (scrollbar-color:auto){html{scrollbar-color:var(--border-2) transparent}}

/* Шапка липкая: без запаса переход по якорю прячет заголовок под неё */
:target,section[id],main[id]{scroll-margin-top:88px}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
.blk{padding:60px 0}
.blk-tight{padding:40px 0}
.blk-gray{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.h1{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:700}
.h2{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700}
.h3{font-size:var(--fs-h3);font-weight:700}
.lead{color:var(--muted);font-size:var(--fs-lg);max-width:68ch;text-wrap:pretty}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
/* Заголовок секции и подпись под ним: над заголовком воздуха больше, чем под */
.sec-head{margin-bottom:26px}
.sec-head .lead{margin-top:8px}
.center.sec-head .lead,.sec-head.center .lead{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* ---------- Верхняя строка: город, часы, телефон ---------- */
.topbar{background:var(--surface-3);color:#c9ced4;font-size:var(--fs-sm)}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline;text-underline-offset:3px}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--save);flex-shrink:0;display:inline-block;margin-right:6px}
@media(max-width:700px){
  .topbar{font-size:var(--fs-xs)}
  .topbar .wrap{min-height:34px;gap:10px;padding:0 16px}
  .topbar .tb-right>span{display:none}
}
@media(max-width:420px){.topbar .tb-hours{display:none}}

/* ---------- Шапка ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:14px}
/* Не сжимаем: при min-width:0 коробка лого становилась уже своего текста,
   подпись вылезала за её край и наезжала на меню — отступ был только на бумаге. */
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex-shrink:0}
.brand img{width:44px;height:44px;flex-shrink:0;border-radius:50%}
.brand .bn{line-height:1.1}
.brand .bn b{display:block;font-size:var(--fs-md);font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.brand .bn i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;letter-spacing:.01em}
/* margin-left:36px, не auto: auto забирал под себя всё свободное место в
   строке, и при длинном названии бренда «Заточка» вплотную липла к лого —
   тут гарантированный минимальный отступ, а вправо распорку держит nav-cta. */
.nav-links{display:flex;gap:20px;font-size:var(--fs-base);font-weight:500;flex-wrap:nowrap;margin-left:36px;margin-right:22px}
.nav-links a{color:var(--muted);text-decoration:none;white-space:nowrap;position:relative;padding:4px 0;transition:color .18s ease}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--accent-ink);transform:scaleX(0);transform-origin:right;transition:transform .24s var(--ease-out)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--text);font-weight:700}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-left:auto}
.header-phone{font-weight:700;font-size:var(--fs-md);color:var(--text);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.header-msg{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:#fff;flex-shrink:0;overflow:hidden;transition:transform .15s var(--ease-out)}
.header-msg:active{transform:scale(.94)}
.header-msg svg{width:100%;height:100%;display:block}
.header-msg.tg{background:none}
.header-msg.max{background:none;border-radius:9px}

/* Бургер. Ниже 1240px горизонтальное меню не помещается вместе
   с брендом и контактами. */
.burger{display:none;width:40px;height:40px;border:1px solid var(--border-2);background:#fff;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;order:3}
.burger span{display:block;width:17px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s var(--ease-out),opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1240px){
  .burger{display:flex}
  .nav{flex-wrap:wrap}
  .nav-cta{margin-left:0}
  .nav-links{order:4;flex-basis:100%;display:none;flex-direction:column;gap:0;padding:4px 0 12px;border-top:1px solid var(--border);margin-left:0;margin-right:0}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 4px;font-size:var(--fs-md);border-bottom:1px solid var(--border)}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a::after{display:none}
}
@media(max-width:560px){
  .brand .bn b{font-size:var(--fs-sm);letter-spacing:.02em}
  .brand .bn i{display:none}
  .brand img{width:38px;height:38px}
  .nav{gap:10px;min-height:60px}
}
@media(max-width:365px){.brand .bn{display:none}}
@media(max-width:430px){
  .header-phone .hp-num{display:none}
  .header-phone{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;max-width:100%;min-height:44px;font-weight:700;font-size:var(--fs-md);padding:.85rem 1.5rem;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;text-decoration:none;text-align:center;line-height:1.25;white-space:normal;overflow-wrap:anywhere;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .14s var(--ease-out)}
.btn:active{transform:scale(.975)}
.btn-accent{background:var(--accent-ink);color:#fff;box-shadow:var(--shadow-1)}
.btn-accent:hover{background:var(--accent-dark)}
.btn-primary{background:var(--dark);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:#000}
.btn-ghost{background:#fff;border-color:var(--border-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);background:var(--surface)}
.btn-lg{padding:1rem 1.8rem;font-size:var(--fs-lg)}
.btn-block{width:100%}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:var(--r-sm)}
:focus:not(:focus-visible){outline:none}

/* ---------- Первый экран ---------- */
/* Слева обещание и действие, справа цена. Человек с рекламы ищет цену,
   и её отсутствие на первом экране — главная причина ухода. */
.hero{padding:24px 0 32px}
/* На телефоне порядок задаёт DOM: заголовок, услуги, цена, доводы, кнопки.
   Цена обязана попасть в первый экран, это весь смысл страницы. */
.hero-grid{display:grid;gap:14px;align-items:start}
.hero h1{order:1}.hero .lead{order:2}.hero-side{order:3}.hero-btns{order:4}.hero-action-note{order:5}.hero-proof{order:6}.hero-facts{order:7}.hero-chips{order:8}
@media(min-width:900px){
  .hero{padding:44px 0 40px}
  .hero-grid{
    grid-template-columns:1.12fr .88fr;
    grid-template-areas:"title card" "lead card" "btns card" "action card" "proof card" "facts card" "chips card";
    column-gap:48px;row-gap:16px;align-content:start;
  }
  .hero h1{grid-area:title}
  .hero-chips{grid-area:chips}
  .hero .lead{grid-area:lead}
  .hero-side{grid-area:card;align-self:start}
  .hero-facts{grid-area:facts}
  .hero-btns{grid-area:btns}
  .hero-action-note{grid-area:action}
  .hero-proof{grid-area:proof}
}
/* Страница без ценовой карточки: пустая правая колонка зря сжимала бы текст */
@media(min-width:900px){
  .hero-grid.hero-solo{grid-template-columns:1fr;
    grid-template-areas:"title" "chips" "lead" "facts" "btns"}
}
.hero-solo .lead{max-width:66ch}
.hero h1{margin-bottom:0;max-width:100%;overflow-wrap:anywhere}
/* Первый экран без сетки (страница товаров): там нет row-gap, который
   расставляет строки на остальных страницах, и заголовок с подзаголовком
   слипались. Селектор бьёт только по прямому потомку .wrap — внутри
   .hero-grid отступ по-прежнему держит сетка. */
.hero>.wrap>.lead{margin-top:14px}
.hero .lead{font-size:var(--fs-lg);max-width:52ch}

/* Строка услуг. На телефоне меню спрятано под бургер, и без неё «муж на час»
   впервые встречается только через три экрана прокрутки. */
.hero-chips{display:flex;min-width:0;max-width:100%;flex-wrap:wrap;gap:7px;list-style:none}
.hero-chips li{min-width:0;max-width:100%}
.hero-chips a{display:inline-flex;align-items:center;max-width:100%;min-height:44px;padding:.42rem .66rem;border:1px solid var(--border-2);
  border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;
  color:var(--text);text-decoration:none;background:#fff;
  transition:border-color .18s ease,background .18s ease}
.hero-chips a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}

.hero-facts{list-style:none;margin:4px 0 0;display:grid;gap:9px}
.hero-facts li{display:flex;min-width:0;gap:10px;align-items:flex-start;font-size:var(--fs-md);color:var(--text)}
.hero-facts span{min-width:0;overflow-wrap:anywhere}
.hero-facts svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;color:var(--save)}
.hero-btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:8px}
.hero-action-note{margin:0;max-width:52ch;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.hero-proof{font-size:var(--fs-sm);color:var(--muted)}
.hero-proof a{color:var(--accent-ink);font-weight:700;text-underline-offset:3px}
.hero-proof.pending{padding:9px 12px;border:1px dashed var(--border-2);border-radius:var(--r-sm);background:var(--surface)}

/* Ценовая карточка первого экрана */
.pricecard{width:100%;max-width:100%;min-width:0;border:1px solid var(--border-2);border-radius:var(--r);background:#fff;box-shadow:var(--shadow-2);overflow:hidden}
.pricecard-top{background:var(--surface-3);color:#fff;padding:14px 20px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em}
.pc-note{background:var(--surface-2);color:var(--muted);text-align:center;padding:8px 20px;font-size:var(--fs-sm);border-bottom:1px solid var(--border)}
.pc-row{display:flex;min-width:0;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 20px;border-bottom:1px solid var(--border)}
@media(max-width:560px){
  .pc-row{padding:10px 15px;align-items:flex-start;flex-wrap:wrap;gap:6px 12px}
  .pricecard-top{padding:9px 15px}
  .pc-foot{padding:12px 15px}
  .pc-val b{font-size:var(--fs-h3)}
  .pc-name{flex:1 1 170px}
  .pc-val{flex:0 1 auto;margin-left:auto}
  .hero-btns{display:grid;grid-template-columns:1fr;width:100%}
  .hero-btns .btn{width:100%}
}
.pc-name{min-width:0}
.pc-name b{display:block;font-size:var(--fs-md);font-weight:700}
.pc-name span{display:block;font-size:var(--fs-sm);color:var(--muted)}
.pc-val{min-width:0;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.pc-val b{display:block;font-size:var(--fs-xl);font-weight:700;color:var(--accent-ink);line-height:1.15}
.pc-val s{display:block;font-size:var(--fs-sm);color:var(--faint);font-weight:400}
.pc-val i{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:400;font-style:normal}
.pc-foot{padding:18px 20px}
.pc-foot .btn{width:100%}
.pc-call{display:block;text-align:center;margin-top:11px;font-size:var(--fs-sm);color:var(--muted)}
.pc-call a{color:var(--text);font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-call a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Полоса доверия ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
@media(max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust{grid-template-columns:1fr}}
.trust-item{background:#fff;padding:20px 18px;display:flex;gap:13px;align-items:flex-start}
.trust-item svg{width:24px;height:24px;flex-shrink:0;color:var(--accent-ink);margin-top:2px}
.trust-item b{display:block;font-size:var(--fs-md);margin-bottom:2px}
.trust-item span{display:block;font-size:var(--fs-sm);color:var(--muted);line-height:1.45}

/* ---------- Карточки услуг ---------- */
/* Мера текста решает всё: в четырёх колонках по 245px русская строка
   вмещала 25 символов вместо комфортных 45-75. Две колонки дают ~500px. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* align-items:start — карточка занимает высоту своего содержимого, а не
   тянется до соседа в строке. Без этого разница в длине текста между
   двумя карточками одной строки превращалась в пустоту внутри короткой. */
.cards-4{grid-template-columns:repeat(2,1fr);align-items:start}
@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.cards,.cards-4{grid-template-columns:1fr;max-width:540px;margin-left:auto;margin-right:auto}}
.card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;color:var(--text);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease}
.card-art{padding:20px}
@media(hover:hover) and (pointer:fine){.card:hover{border-color:var(--accent);box-shadow:var(--shadow-2)}}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.card .ci{width:42px;height:42px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.card h3{font-size:var(--fs-h3);margin:0;min-width:0}
/* Раньше flex:1 растягивал текст, чтобы прижать «card-foot» к низу
   стретченной по сетке карточки — с align-items:start в этом смысла
   больше нет, футер и так идёт сразу за текстом. */
.card p{color:var(--muted);font-size:var(--fs-base)}
.card-foot{margin-top:12px;padding-top:11px;border-top:1px solid var(--border);display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card .cp{font-weight:700;color:var(--accent-ink);font-size:var(--fs-base)}
.card .go{font-size:var(--fs-sm);font-weight:600;color:var(--muted);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.card:hover .go{color:var(--accent-ink)}}

/* Карточки услуг с рисунком инструмента. Рисунки нарисованы под крупный
   размер: в прежнем чипе 42px от резьбы ключа и рёбер фрезера оставалось
   пятно, поэтому здесь предмет живёт отдельным элементом без подложки.
   Рисунок слева, заголовок справа — во всю ширину строки на любом экране. */
.card-art .ca-head{display:flex;flex-direction:row;align-items:center;gap:14px;margin-bottom:8px}
.card-art .cart{display:block;width:88px;height:88px;flex-shrink:0}
.card-art .cart img,.card-art .cart svg{display:block;width:100%;height:100%;object-fit:contain}
.card-art .cart svg{stroke-width:.9}
.card-art h3{min-width:0}
.card-art p{line-height:1.5}
@media(max-width:820px){
  .card-art .cart{width:58px;height:58px}
  .card-art .cart svg{stroke-width:1.3}
}

/* ---------- Блок выгоды «от 5 единиц» ---------- */
.offer5{background:var(--accent-soft);border:1px solid #d3dfe9;border-radius:var(--r);padding:26px 28px}
.o5-t{display:block;font-size:var(--fs-xl);line-height:1.2;margin-bottom:9px}
.o5-p{color:var(--muted);font-size:var(--fs-md);max-width:76ch;text-wrap:pretty}
.offer5-center{text-align:center;padding:32px 28px}
.offer5-center .o5-t{font-size:var(--fs-2xl);margin-bottom:10px}
.offer5-center .o5-p{font-size:var(--fs-lg);max-width:54ch;margin:0 auto}
@media(max-width:560px){.offer5{padding:22px 20px}.offer5-center .o5-t{font-size:var(--fs-xl)}}
/* Группа делит набор мастера от набора салона подписью, а не догадкой:
   раньше три «набора» и «забор/возврат» стояли в одну строку сетки, и
   человек не мог с ходу понять, что из них про маникюр, что про
   парикмахера, а что вообще не набор, а доставка. */
.o5-group{margin-top:20px;padding-top:20px;border-top:1px solid #d3dfe9}
.o5-group:first-child{margin-top:0;padding-top:0;border-top:none}
.o5-group-h{font-size:var(--fs-sm);font-weight:700;color:var(--accent-dark);margin-bottom:10px}
.o5-foot{margin-top:20px;padding-top:16px;border-top:1px solid #d3dfe9;color:var(--muted);font-size:var(--fs-sm)}
.o5-nums{display:grid;gap:16px}
@media(min-width:700px){.o5-nums{grid-template-columns:repeat(auto-fill,minmax(220px,280px));gap:26px}}
.o5-nums>div{display:flex;flex-direction:column;gap:2px}
.o5-l{font-size:var(--fs-sm);color:var(--muted)}
/* Цифра и есть сообщение блока, поэтому она крупнее заголовка */
.o5-n{font-size:var(--fs-2xl);font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums;line-height:1.12}
.o5-n s{color:var(--muted);font-weight:400;font-size:var(--fs-md);margin-right:.4em}
.o5-u{font-size:var(--fs-sm);color:var(--muted)}

/* Снимок работы с подписью. Подпись обязательна: она объясняет, что видно
   на фото, иначе макро кромки читается как абстрактная железка. */
.shot{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border-2);background:#fff}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:11px 15px;font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--border);text-align:left}
.split{display:grid;gap:22px;align-items:center}
@media(min-width:820px){
  .split{grid-template-columns:1fr 1fr;gap:42px}
  .split.rev>:first-child{order:2}
  .split .center{text-align:left}
}

/* ---------- Шаги ---------- */
/* Нумерация здесь несёт смысл: это последовательность, а не украшение. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
.step{position:relative;padding:22px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--r)}
.step .n{width:34px;height:34px;margin-bottom:12px;border-radius:50%;background:var(--accent-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.step b{display:block;font-size:var(--fs-md);margin-bottom:5px}
.step p{color:var(--muted);font-size:var(--fs-base)}

/* ---------- Таблицы цен ---------- */
.pt{width:100%;border-collapse:collapse;background:#fff;font-variant-numeric:tabular-nums}
.pt-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r)}
.pt th{background:var(--surface-2);text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:12px 16px;font-weight:700}
.pt td{padding:13px 16px;border-top:1px solid var(--border);font-size:var(--fs-base)}
.pt tr:hover td{background:var(--surface)}
.pt td:last-child{text-align:right;font-weight:700;white-space:nowrap}
/* Лестница цены за единицу: числовых колонок несколько, поэтому правое
   выравнивание вешаем классом, а не только на последнюю ячейку. */
.pt td.n{text-align:right;font-weight:700;white-space:nowrap}
.pt td.n.base{font-weight:400;color:var(--faint)}
.pt td.n.hi{color:var(--accent-ink)}
.pt th.n{text-align:right}
.pt th.n.hi{color:var(--accent-ink)}
@media(min-width:700px){
  .pt-ladder{table-layout:fixed}
  .pt-ladder th.n,.pt-ladder td.n{width:108px}
}
.pt .sub{display:block;color:var(--faint);font-weight:400;font-size:var(--fs-sm);margin-top:2px}
@media(max-width:560px){
  .pt th{padding:10px;font-size:var(--fs-2xs);letter-spacing:.03em}
  .pt td{padding:11px 10px;font-size:var(--fs-sm)}
  .pt .sub{font-size:var(--fs-xs)}
  .pt td.n,.pt th.n{padding-left:6px;padding-right:10px}
}
/* Текстовая «цена» («по фото в чате») переносится, иначе распирает таблицу */
.pt td.tx{white-space:normal;min-width:9ch;font-weight:400;color:var(--muted)}
.pt .old{color:var(--faint);text-decoration:line-through;font-weight:400;margin-right:.5em}
.pt .free{color:var(--save);font-weight:700;text-align:right;white-space:nowrap}
/* Заголовок колонки действия нужен разметке и скринридеру, но не глазу */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pt td.act{text-align:right;white-space:nowrap;width:1%}
.pt .rowbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0;border:0;background:none;font-size:var(--fs-sm);font-weight:600;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pt .rowbtn:hover{color:var(--accent-dark);text-decoration-thickness:2px}
@media(max-width:560px){.pt td.act{padding-left:4px;padding-right:8px}.pt .rowbtn{font-size:var(--fs-xs)}}
.pnote{color:var(--muted);font-size:var(--fs-sm);margin-top:12px;max-width:80ch;padding-left:17px}
@media(max-width:560px){.pnote{padding-left:11px}}

/* ---------- Вопросы и ответы ---------- */
.faq{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;padding:17px 52px 17px 20px;font-weight:700;font-size:var(--fs-md);position:relative;transition:background .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface)}
/* Плюс, который становится минусом: рисуем двумя линиями, без глифов */
.faq summary::before,.faq summary::after{content:"";position:absolute;right:22px;top:50%;background:var(--accent-ink);border-radius:2px;transition:transform .22s var(--ease-out),opacity .22s ease}
.faq summary::before{width:14px;height:2px;margin-top:-1px}
.faq summary::after{width:2px;height:14px;margin-top:-7px;right:28px}
.faq details[open] summary::after{transform:rotate(90deg);opacity:0}
.faq .fa{padding:0 20px 18px;color:var(--muted);font-size:var(--fs-base);max-width:80ch}
.faq .fa p+p{margin-top:9px}

/* ---------- Отзывы ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:start}
@media(max-width:880px){.reviews{grid-template-columns:1fr}}
.review{border:1px solid var(--border);border-radius:var(--r);padding:24px;background:#fff;display:flex;flex-direction:column;min-width:0}
.review .s{display:flex;gap:3px;margin-bottom:11px;color:#bd7f14}
.review .s svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.review p{font-size:var(--fs-md);margin-bottom:16px;flex:1}
.review .who b{display:block;font-size:var(--fs-base)}
.review .who span{font-size:var(--fs-sm);color:var(--faint)}
.review-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px;font-size:var(--fs-sm);color:var(--faint)}
.reviews-action{margin-top:20px}

/* ---------- Доказательства работы ---------- */
.proof-grid,.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.proof-grid{grid-auto-rows:1fr}
.proof-item,.case-card{display:flex;flex-direction:column;min-width:0;margin:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#fff}
.proof-media,.case-media{display:grid;aspect-ratio:16/9;background:var(--surface-2)}
.proof-media img,.case-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.proof-placeholder{display:block;width:100%;aspect-ratio:16/9}
.proof-placeholder{display:grid;place-items:center;padding:18px;background:var(--surface-2);color:var(--muted);font-size:var(--fs-sm);text-align:center;border-bottom:1px dashed var(--border-2)}
.proof-item figcaption{display:flex;align-items:center;min-height:46px;padding:10px 14px;font-size:var(--fs-sm);color:var(--muted)}
.case-grid{margin-top:28px}
.case-body{display:flex;flex:1;flex-direction:column;padding:16px}
.case-tag{display:block;margin-bottom:7px;color:var(--accent-ink);font-size:var(--fs-sm);font-weight:700}
.case-body h3{margin:0 0 8px;font-size:var(--fs-md)}
.case-body p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.proof-note{margin:14px 0 0;color:var(--faint);font-size:var(--fs-sm)}
@media(max-width:820px){.proof-grid,.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.proof-grid,.case-grid{grid-template-columns:1fr}.proof-item figcaption{min-height:0}.case-body{padding:14px}}

/* ---------- Хлебные крошки ---------- */
.breadcrumbs{padding-top:16px;font-size:var(--fs-sm);color:var(--muted)}
.breadcrumbs ol{display:flex;min-width:0;gap:8px;flex-wrap:wrap;list-style:none}
.breadcrumbs a{color:var(--accent-ink);text-underline-offset:3px}
.breadcrumbs li{min-width:0;overflow-wrap:anywhere}

/* ---------- Форма ---------- */
.form{max-width:520px;margin:0 auto;text-align:left}
.form .row{margin-bottom:14px}
.form label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;min-width:0;min-height:44px;padding:.85rem 1rem;border:1px solid var(--field-border);border-radius:var(--r-sm);font-family:inherit;font-size:var(--fs-md);background:#fff;color:var(--text);transition:border-color .15s ease,box-shadow .15s ease}
.form input::placeholder{color:#8f95a0}
.form input:focus,.form select:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(47,95,138,.16)}
.form .btn{width:100%;margin-top:4px}
.form .btn:disabled{cursor:wait;opacity:.68}
.form-ok{display:none;padding:26px;font-weight:700;font-size:var(--fs-xl);color:var(--save);text-align:center}
.formnote{text-align:center;color:var(--muted);font-size:var(--fs-sm);margin-top:11px}
.form-status{min-height:1.5em;margin-top:10px;text-align:center;font-size:var(--fs-sm);font-weight:600}
.form-status.error{color:#a32331}.form-status.loading{color:var(--muted)}
.form-more{margin:2px 0 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.form-more summary{min-height:44px;padding:10px 13px;cursor:pointer;font-weight:700;color:var(--accent-ink)}
.form-more-body{padding:2px 13px 13px}
.form label.consent{display:flex;gap:9px;align-items:flex-start;text-align:left;font-size:var(--fs-sm);font-weight:400;color:var(--muted);cursor:pointer;margin-bottom:12px}
.form label.consent input{width:16px;height:16px;padding:0;margin-top:2px;flex-shrink:0;accent-color:var(--accent-ink)}
.form a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.lbl-hint{font-weight:400;color:var(--faint);font-size:var(--fs-xs);margin-left:.5em}
.modepick{display:flex;flex-direction:column;gap:8px}
@media(min-width:520px){.modepick{flex-direction:row}.modeopt{flex:1}}
/* Четыре услуги в строку не помещаются: сетка 2x2 */
.modepick-4{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:460px){.modepick-4{grid-template-columns:1fr 1fr}}
.form .modeopt,.modeopt{display:flex;align-items:center;gap:10px;margin:0;padding:.8rem 1rem;min-height:46px;border:1px solid var(--field-border);border-radius:var(--r-sm);background:#fff;cursor:pointer;font-size:var(--fs-base);font-weight:600;color:var(--text);transition:border-color .15s ease,background .15s ease,transform .12s var(--ease-out)}
.form .modeopt:active,.modeopt:active{transform:scale(.985)}
.modeopt:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft)}
.modeopt input{width:auto;padding:0;margin:0;accent-color:var(--accent-ink);flex-shrink:0}
.msgalt-btns{display:flex;gap:9px;justify-content:center;margin-bottom:20px}
.msgbtn svg{flex-shrink:0}
.msgbtn{flex:1;max-width:170px;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:46px;padding:.7em 1em;border-radius:var(--r-sm);color:#fff;font-weight:700;text-decoration:none;font-size:var(--fs-base);transition:transform .15s var(--ease-out),filter .15s ease}
.msgbtn:hover{filter:brightness(.94)}
.msgbtn:active{transform:scale(.97)}
.msgbtn.tg{background:#2aabee}
.msgbtn.max{background:linear-gradient(100deg,#1BB0FF 0%,#2E82FF 28%,#4A4CFE 55%,#7A18FC 80%,#9424FC 100%)}
.msgbtn.tel{background:var(--dark)}
/* Форма стоит на сером фоне в белой карточке: канон сервисных сайтов */
.formcard{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-1);max-width:580px;margin:0 auto}
@media(max-width:560px){.formcard{padding:22px 18px}}

/* ---------- Подвал ---------- */
footer.site{background:var(--surface-3);color:#adb3ba;padding:44px 0 40px;margin-top:0}
footer.site .brand{color:#fff}
footer.site .brand .bn i{color:#848a93}
.foot-grid{display:grid;gap:28px;margin-bottom:28px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:#848a93;margin-bottom:12px;font-weight:700}
.foot-grid a{color:#dde1e5;text-decoration:none;font-size:var(--fs-base)}
.foot-grid a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-links{display:grid;gap:9px}
footer.site .muted{color:#adb3ba;font-size:var(--fs-base)}
.foot-phone{display:block;font-size:var(--fs-xl);font-weight:700;color:#fff!important;text-decoration:none!important;font-variant-numeric:tabular-nums;margin-bottom:4px}
.fsmall{border-top:1px solid #2b2d36;padding-top:20px;font-size:var(--fs-sm);color:#848a93}
.fsmall a{color:#848a93}

/* ---------- Плавающая кнопка заявки ---------- */
/* Заявку должно быть видно с любой страницы и с любой глубины прокрутки.
   На телефоне это полоса во всю ширину: палец там, промахнуться сложно. */
.cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--border)}
.cta-sticky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cta-sticky .btn{width:100%;min-width:0;padding:.72rem .45rem;font-size:var(--fs-sm)}
.cta-sticky .sticky-phone,.cta-sticky .sticky-telegram{box-shadow:none}
body{padding-bottom:82px}
@media(min-width:769px) and (max-width:1099px){.cta-sticky{display:none}body{padding-bottom:0}}
@media(min-width:1100px){
  /* На широком экране полоса во всю ширину избыточна и отъедает низ страницы */
  .cta-sticky{left:auto;right:24px;bottom:24px;padding:0;background:none;
    backdrop-filter:none;border:0}
  .cta-sticky{display:block}
  .cta-sticky .btn{width:auto;padding:.85rem 1.5rem;border-radius:var(--r-pill);
    box-shadow:0 6px 16px -4px rgba(47,95,138,.45)}
  .cta-sticky .sticky-phone,.cta-sticky .sticky-telegram{display:none}
  body{padding-bottom:0}
  .ckbar{bottom:12px}
}

/* ---------- Cookie ---------- */
.ckbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;background:var(--surface-3);color:#e2e5e8;padding:13px 18px;border-radius:var(--r);display:none;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:var(--fs-sm);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
/* Пока висит плашка, полосу заявки не показываем: вдвоём они съедали пятую
   часть экрана телефона и перекрывали кнопку в ценовой карточке. */
body.ck-open .cta-sticky{display:none}
body.ck-open{padding-bottom:0}
@media(max-width:768px){
  .ckbar{position:relative;left:auto;right:auto;bottom:auto;border-radius:0;box-shadow:none}
}
@media(max-width:560px){
  .ckbar{padding:8px 11px;gap:9px;font-size:var(--fs-2xs);
    flex-wrap:nowrap;text-align:left;line-height:1.3;border-radius:var(--r-sm)}
  .ckbar button{padding:.35rem .7rem;min-height:44px;font-size:var(--fs-2xs)}
}
.ckbar a{color:var(--accent-soft);text-decoration:underline}
.ckbar button{background:var(--accent-ink);color:#fff;border:none;border-radius:var(--r-sm);padding:.55rem 1.1rem;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;min-height:40px}
.ckbar button:active{transform:scale(.97)}

@media(max-width:768px),(pointer:coarse){
  .topbar .wrap{min-height:44px}
  .topbar a{display:inline-flex;align-items:center;min-height:44px}
  .header-msg,.burger{width:44px;height:44px}
  .header-phone{min-width:44px;min-height:44px}
}

/* ---------- Движение ---------- */
/* Один поставленный момент: первый экран собирается при загрузке.
   Ниже по странице движения нет — на сервисном сайте оно только мешает
   человеку, который пришёл за ценой. */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .anim{animation:rise .5s var(--ease-out) backwards}
.hero .anim:nth-child(1){animation-delay:.02s}
.hero .anim:nth-child(2){animation-delay:.08s}
.hero .anim:nth-child(3){animation-delay:.14s}
.hero .anim:nth-child(4){animation-delay:.2s}
.hero-side.anim{animation-delay:.12s}
/* Класс остался у страниц, которые ещё не перебраны: без него их контент
   останется невидимым. */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.08s!important;
    transition-property:color,background-color,border-color,box-shadow,outline-color!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero .anim{animation:none}
  .btn:hover,.card:hover,.msgbtn:hover{transform:none!important}
}

@media print{
  header.site,.topbar,.btn,.msgbtn,.cta-sticky,.ckbar,.no-print{display:none!important}
  .blk{padding:16px 0}
  body{background:#fff;padding-bottom:0}
  footer.site{background:#fff;color:#000}
}