/* ============================================================
   ДИЗАЙН-ТОКЕНЫ  (палитра выведена из логотипа «Свой мастер»)
   ============================================================ */
:root{
  /* Бренд */
  --brand-blue:   #0B4A93;   /* синий круг логотипа */
  --brand-indigo: #2E2A85;   /* индиго словесного знака */
  --brand-red:    #D81824;   /* красный акцент */
  --brand-red-dk: #B01019;

  /* Поверхности */
  --navy-900: #08172C;
  --navy-800: #0C2444;
  --navy-700: #16325C;
  --ink:      #0F172A;
  --ink-2:    #334155;
  --ink-3:    #64748B;
  --line:     #E2E8F0;
  --line-2:   #CBD5E1;
  --surface:  #FFFFFF;
  --surface-2:#F6F8FB;
  --surface-3:#EDF2F8;

  /* Статусы */
  --ok:      #16794C;
  --ok-bg:   #E7F6EE;
  --warn:    #9A5B00;
  --warn-bg: #FFF4E0;

  /* Типографика */
  --font: 'Golos Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ритм */
  --wrap: 1200px;
  --pad: 24px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 12px 32px rgba(15,23,42,.08);
  --shadow-lg: 0 18px 50px rgba(8,23,44,.18);
}

/* ============================================================
   БАЗА
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--surface); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:800}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.section{padding:76px 0}
.section--tight{padding:56px 0}
.section--alt{background:var(--surface-2)}

.eyebrow{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-red); margin-bottom:14px;
}
.h2{font-size:clamp(28px,3.4vw,42px)}
.lead{font-size:18px; color:var(--ink-2); max-width:62ch; margin-top:14px}
.sec-head{margin-bottom:38px}
.sec-head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}

/* Кнопки */
.btn{
  --bg:var(--brand-red); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-sm); border:1.5px solid var(--bd);
  background:var(--bg); color:var(--fg); font-weight:700; font-size:16px;
  text-decoration:none; cursor:pointer; transition:.16s ease; white-space:nowrap;
}
.btn:hover{--bg:var(--brand-red-dk); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn--ghost{--bg:transparent; --fg:var(--brand-blue); --bd:var(--line-2)}
.btn--ghost:hover{--bg:var(--surface-3); --fg:var(--brand-blue); box-shadow:none}
.btn--light{--bg:rgba(255,255,255,.1); --fg:#fff; --bd:rgba(255,255,255,.35)}
.btn--light:hover{--bg:rgba(255,255,255,.2)}
.btn--wide{width:100%}
.btn--lg{padding:18px 32px; font-size:17px}

/* Заглушки контента */
.ph{border-bottom:1px dashed transparent; transition:.15s}
body.show-ph .ph{
  background:#FFF3C4; border-bottom-color:#D9A400; border-radius:3px;
  box-shadow:0 0 0 2px #FFF3C4;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.topbar{background:var(--navy-900); color:#C7D6E8; font-size:13px; letter-spacing:.02em}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:44px}
.topbar__l,.topbar__r{display:flex; align-items:center; gap:22px}
.topbar a{text-decoration:none; opacity:.85}
.topbar a:hover{opacity:1; color:#fff}

.citypick{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0;
  color:#fff; font-weight:700; cursor:pointer; padding:0;
}
.citypick svg{width:15px; height:15px; flex:none}
.citypick__caret{opacity:.6}

.header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line)}
.header.is-stuck{box-shadow:var(--shadow-sm)}
.header__in{display:flex; align-items:center; gap:32px; height:82px}
.logo{flex:none}
.logo img{height:34px; width:auto}
/* Меню набрано в логике логотипа: прописные, плотный вес, разрядка.
   Строчные 16px рядом с плотным прописным знаком читались как чужой шрифт. */
.nav{display:flex; gap:24px; margin-inline-start:auto}
.nav a{
  text-decoration:none; font-weight:800; font-size:13.5px; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ink-2);
  padding:8px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.nav a:hover{color:var(--brand-blue); border-bottom-color:var(--brand-red)}
.header__cta{display:flex; align-items:center; gap:18px; flex:none}
.phone{text-decoration:none; font-weight:800; font-size:19px; letter-spacing:-.01em; white-space:nowrap}
.phone small{display:block; font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.phone-ico{
  display:none; width:42px; height:42px; border-radius:50%; background:var(--surface-3);
  place-items:center; flex:none; text-decoration:none;
}
.phone-ico svg{width:20px; height:20px; stroke:var(--brand-blue); fill:none; stroke-width:2}
.burger{display:none; background:none; border:0; padding:8px; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(46,42,133,.55) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 62%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(80% 70% at 25% 30%, #000, transparent 75%);
}
.hero__in{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:start; padding:70px 0 84px}
/* grid-элементы по умолчанию имеют min-width:auto — длинные <option> раздували колонку */
.hero__in>*,.appsec__in>*,.cta__in>*,.hero__stats>*{min-width:0}
.field select{max-width:100%}
.hero h1{letter-spacing:-.03em;
  /* Слоган разбит на три строки вручную (<br>). Кегль привязан к ширине окна,
     иначе самая длинная строка «Знаем Ваше оборудование —» переносится
     и композиция из трёх строк рассыпается. */
  font-size:clamp(30px,3.4vw,44px)}
.hero h1 em{font-style:normal; color:#FF6B72}
.hero__sub{margin-top:20px; font-size:19px; color:#B9CBE2; max-width:52ch}
.hero__acts{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}

.hero__stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:44px}
.stat{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md); padding:16px 18px; min-width:0; backdrop-filter:blur(4px);
}
.stat b{display:block; font-size:26px; letter-spacing:-.02em}
.stat span{font-size:13.5px; color:#9FB6D0; line-height:1.35; display:block; margin-top:4px}

/* Карточка заявки */
.leadcard{background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-lg)}
.leadcard h3{font-size:23px}
.leadcard__note{font-size:14.5px; color:var(--ink-3); margin-top:8px}
.field{margin-top:16px}
.field label{display:block; font-size:14px; font-weight:700; color:var(--ink-2); margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; padding:14px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  background:#fff; outline:0; transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(11,74,147,.12)}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13px; color:var(--ink-3); line-height:1.45}
.consent input{margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--brand-blue)}
.consent a{color:var(--brand-blue)}
.urgent{
  display:flex; gap:11px; align-items:center; margin-top:18px; padding:13px 15px;
  background:var(--ok-bg); border-radius:var(--r-sm); font-size:14.5px; color:var(--ok); font-weight:600;
}
.dot{width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; box-shadow:0 0 0 4px rgba(22,121,76,.18)}

/* ============================================================
   ПОЛОСА ДОВЕРИЯ
   ============================================================ */
.trust{border-bottom:1px solid var(--line); background:var(--surface)}
.trust__in{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.trust__i{background:#fff; padding:26px 24px}
.trust__i b{display:block; font-size:21px; letter-spacing:-.02em}
.trust__i span{display:block; font-size:14.5px; color:var(--ink-3); margin-top:5px}

/* ============================================================
   ЧТО РЕМОНТИРУЕМ
   ============================================================ */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:28px; transition:.18s; text-decoration:none; display:block;
}
.card:hover{border-color:var(--brand-blue); box-shadow:var(--shadow-md); transform:translateY(-3px)}
.card__ico{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--brand-blue), var(--brand-indigo)); margin-bottom:18px;
}
.card__ico svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.card h3{font-size:19px}
.card p{font-size:15px; color:var(--ink-3); margin-top:9px; line-height:1.5}
.card__from{display:inline-block; margin-top:16px; font-weight:800; color:var(--brand-blue); font-size:15px}

/* ============================================================
   ЦЕНЫ
   ============================================================ */
.price-wrap{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#fff}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 26px; border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
.price-row:nth-child(odd){background:var(--surface-2)}
.price-row__n{font-weight:600}
.price-row__n small{display:block; font-size:13.5px; color:var(--ink-3); font-weight:400; margin-top:3px}
.price-row__v{font-weight:800; font-size:19px; white-space:nowrap; color:var(--brand-blue)}
.price-row__v i{font-style:normal; font-size:14px; color:var(--ink-3); font-weight:600}
.price-note{margin-top:18px; font-size:14.5px; color:var(--ink-3); display:flex; gap:10px; align-items:flex-start}
.price-note svg{width:18px; height:18px; flex:none; margin-top:2px; stroke:var(--ink-3); fill:none; stroke-width:1.8}

/* Калькулятор */
.calc{
  margin-top:26px; background:linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color:#fff; border-radius:var(--r-lg); padding:38px; display:grid;
  grid-template-columns:1fr auto; gap:36px; align-items:center;
}
.calc h3{font-size:26px}
.calc p{color:#AEC3DC; margin-top:10px; max-width:56ch; font-size:16px}

/* ============================================================
   КАК РАБОТАЕМ
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s}
.step{position:relative; padding-top:52px}
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%;
  background:var(--brand-red); color:#fff; font-weight:800; display:grid; place-items:center; font-size:17px;
}
.step h3{font-size:18px}
.step p{font-size:15px; color:var(--ink-3); margin-top:9px; line-height:1.5}

/* ============================================================
   ПРИЛОЖЕНИЕ «СВОЙ МАСТЕР»
   ============================================================ */
.appsec{
  color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(110% 80% at 85% 15%, rgba(46,42,133,.6) 0%, transparent 55%),
             linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 65%);
}
.appsec__in{display:grid; grid-template-columns:1fr 420px; gap:60px; align-items:center}
.appsec h2{font-size:clamp(28px,3.4vw,42px)}
.appsec__lead{font-size:18px; color:#B9CBE2; margin-top:16px; max-width:58ch}
.appsec__feats{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:16px}
.appsec__feats li{display:flex; gap:13px; font-size:16.5px; line-height:1.45}
.appsec__feats li svg{width:22px; height:22px; flex:none; margin-top:2px; stroke:#5EE0A0; fill:none; stroke-width:2.2}
.appsec__feats b{display:block}
.appsec__feats span{color:#9FB6D0; font-size:15px}

.setup{margin-top:32px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:22px 24px}
.setup h4{font-size:15.5px; margin-bottom:10px}
.setup ol{margin:0; padding-inline-start:20px; color:#B9CBE2; font-size:15px; line-height:1.7}
.setup code{background:rgba(255,255,255,.12); border-radius:5px; padding:2px 7px; font-size:14px}
.stores{display:flex; gap:11px; margin-top:20px; flex-wrap:wrap}
.store{
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-sm); text-decoration:none;
  font-weight:700; font-size:14.5px; color:#fff;
}
.store:hover{background:rgba(255,255,255,.2)}
.stores__note{margin-top:14px; font-size:13.5px; line-height:1.55; color:#9FB6D0}
.stores__note b{color:#D7E4F3}

/* Реальные экраны приложения */
.shots{display:flex; align-items:flex-end; justify-content:center}
.shots img{display:block; filter:drop-shadow(0 26px 55px rgba(0,0,0,.55))}
.shots__main{width:62%; position:relative; z-index:2}
.shots__side{width:47%; margin-left:-13%; margin-bottom:7%; z-index:1}
.shots__cap{margin-top:20px; font-size:13.5px; color:#8FA8C4; text-align:center}

/* Плашка приложения в hero */
.hero__app{
  display:flex; align-items:center; gap:12px; margin-top:26px; padding:13px 17px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); font-size:15.5px; color:#CBDCF0; max-width:max-content;
}
.hero__app svg{width:20px; height:20px; flex:none; stroke:#5EE0A0; fill:none; stroke-width:2}
.hero__app a{color:#fff; font-weight:700}

/* ============================================================
   ГЕОГРАФИЯ
   ============================================================ */
.cities{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.city{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:24px; display:flex; flex-direction:column}
.city--soon{background:var(--surface-2); border-style:dashed}
.city h3{font-size:19px}
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800;
  padding:5px 11px; border-radius:99px; margin-bottom:14px; letter-spacing:.02em;
}
.badge--on{background:var(--ok-bg); color:var(--ok)}
.badge--soon{background:var(--warn-bg); color:var(--warn)}
.city__meta{font-size:14.5px; color:var(--ink-3); margin-top:10px; line-height:1.55; flex:1}
.city__link{margin-top:18px; font-weight:700; color:var(--brand-blue); text-decoration:none; font-size:15px}
.city__link:hover{text-decoration:underline}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:880px; margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q__btn{
  width:100%; background:none; border:0; text-align:left; padding:22px 44px 22px 0;
  font-size:18px; font-weight:700; cursor:pointer; position:relative; letter-spacing:-.01em;
}
.q__btn::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--brand-blue); border-bottom:2.5px solid var(--brand-blue);
  transform:translateY(-70%) rotate(45deg); transition:.2s;
}
.q.is-open .q__btn::after{transform:translateY(-20%) rotate(-135deg)}
.q__a{display:none; padding:0 40px 24px 0; color:var(--ink-2); font-size:16.5px; line-height:1.6}
.q.is-open .q__a{display:block}

/* ============================================================
   CTA + ПОДВАЛ
   ============================================================ */
.cta{background:linear-gradient(150deg, var(--brand-indigo), var(--navy-900)); color:#fff}
.cta__in{display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center; padding:72px 0}
.cta h2{font-size:clamp(28px,3.2vw,40px)}
.cta p{color:#BDCFE6; margin-top:14px; font-size:18px; max-width:48ch}
.cta__phone{display:block; margin-top:26px; font-size:32px; font-weight:800; text-decoration:none; letter-spacing:-.02em}

.footer{background:var(--navy-900); color:#93A9C4; font-size:15px; padding:56px 0 28px}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.footer img{height:28px; margin-bottom:16px}
.footer h4{color:#fff; font-size:15px; margin-bottom:14px; letter-spacing:0}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.footer a{text-decoration:none}
.footer a:hover{color:#fff}
.footer__bottom{
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:13.5px; color:#6E86A3;
}

/* ============================================================
   ПАНЕЛЬ ПРОТОТИПА
   ============================================================ */
.protobar{
  position:fixed; left:16px; bottom:16px; z-index:200; display:flex; align-items:center; gap:12px;
  background:var(--navy-900); color:#fff; padding:10px 14px; border-radius:99px;
  box-shadow:var(--shadow-lg); font-size:13.5px;
}
.protobar b{color:#FFD66B}
.protobar button{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff;
  border-radius:99px; padding:6px 13px; font-size:13px; font-weight:700; cursor:pointer;
}
.protobar button:hover{background:rgba(255,255,255,.26)}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr; gap:40px}
  .cities{grid-template-columns:repeat(3,1fr)}
  .trust__in{grid-template-columns:repeat(2,1fr)}
  .cta__in{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block; margin-inline-start:auto}
  .header__cta .btn{display:none}
  .grid-3,.steps{grid-template-columns:1fr}
  .appsec__in{grid-template-columns:1fr; gap:44px}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .calc{grid-template-columns:1fr; text-align:left}
  .topbar__r{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:52px 0}
  :root{--pad:16px}
  .header__in{height:64px; gap:14px}
  .logo img{height:24px}
  .phone{display:none}
  .phone-ico{display:grid}
  #topArrival{display:none}
  .trust__in{grid-template-columns:1fr}
  .cities{grid-template-columns:1fr}
  .price-row{flex-direction:column; align-items:flex-start; gap:6px}
  .footer__grid{grid-template-columns:1fr}
  .hero__in{padding:40px 0 52px}
  /* На телефоне кегль важнее композиции: 30px, первая строка переносится сама.
     Верхняя граница по ширине нужна только для узких экранов — чтобы не разорвалась
     акцентная строка «бесперебойную работу». */
  .hero h1{font-size:min(30px, calc(8.3vw - 3px))}
  .leadcard{padding:22px}
  .setup,.calc{padding:22px}
  .hero__app{max-width:none}
  .protobar{left:8px; right:8px; bottom:8px; justify-content:space-between}
}
/* ============================================================
   МЕНЮ НА ТЕЛЕФОНЕ
   На узких экранах горизонтальная навигация скрыта, поэтому
   выдвижное меню — единственный способ уйти с посадочной вглубь сайта.
   ============================================================ */
.mmenu{
  position:fixed; inset:0; z-index:200; background:#fff;
  display:flex; flex-direction:column; gap:8px;
  padding:16px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
}
.mmenu[hidden]{display:none}
.mmenu__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.mmenu__top img{height:26px; width:auto}
.mmenu__close{
  background:var(--surface-3); border:0; width:44px; height:44px; border-radius:50%;
  font-size:30px; line-height:1; color:var(--ink-2); cursor:pointer;
}
.mmenu__nav{display:flex; flex-direction:column}
.mmenu__nav a{
  display:block; padding:16px 4px; border-bottom:1px solid var(--line);
  font-size:17px; font-weight:700; text-decoration:none; color:var(--ink);
}
.mmenu__nav a.is-active{color:var(--brand-blue)}
.mmenu__phone{
  display:block; margin-top:22px; font-size:26px; font-weight:800;
  letter-spacing:-.02em; text-decoration:none; color:var(--brand-blue);
}
.mmenu__phone small{
  display:block; font-size:14px; font-weight:600; color:var(--ink-3); letter-spacing:0; margin-top:4px;
}
.mmenu .btn{margin-top:18px}
body.mmenu-open{overflow:hidden}

@media (min-width:901px){
  .mmenu{display:none !important}
}