/* Fixplace24 — стиль постов (CLAUDE.md): тёмный фон, оранжевый акцент, Unbounded / Manrope / JetBrains Mono.
   Визуальный язык — из мастерской: техническая разметка (вынески, размерные линии, метки обрезки),
   квитанция для расчёта цены, бирка ремонта для статуса. */

@font-face{font-family:Unbounded;font-weight:700;font-display:swap;src:url(../fonts/unbounded-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Unbounded;font-weight:700;font-display:swap;src:url(../fonts/unbounded-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2212}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(../fonts/manrope-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2212}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(../fonts/manrope-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2212}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(../fonts/manrope-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(../fonts/manrope-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2212}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2212}

:root{
  --bg:#121417; --bg2:#16191D; --card:#1C1F24; --line:#2A2E35;
  --text:#F2F0EA; --text2:#DADCE0; --text3:#C9CCD1; --muted:#A3A7AE;
  --accent:#FF6B1F; --on-accent:#121417; --ok:#3FBF7F;
  --paper:#F2F0EA; --ink:#121417; --ink2:#55595F; --paperline:#CFCBC0;
  --head:"Unbounded",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:18px; --gut:16px;
  --accent-text:#FF6B1F; --topbg:rgba(18,20,23,.9); --grid:rgba(42,46,53,.35); --shadow:rgba(0,0,0,.35);
  --onpaper-line:#CFCBC0;
}
/* Светлая тема: тот же фирменный набор, но основной фон — «бумага».
   Оранжевый для мелкого текста темнее, чтобы читался на светлом. */
[data-theme=light]{
  --bg:#F2F0EA; --bg2:#E9E6DD; --card:#FFFFFF; --line:#DCD8CD;
  --text:#121417; --text2:#2B2F35; --text3:#3D4148; --muted:#6B6F76;
  --accent-text:#C2410C; --ok:#1F8F57;
  --paper:#FFFFFF; --paperline:#E2DED3;
  --topbg:rgba(242,240,234,.92); --grid:rgba(18,20,23,.04); --shadow:rgba(18,20,23,.12);
}
/* подвал в светлой теме остаётся тёмным — как «якорь» страницы */
[data-theme=light] .foot{--bg:#121417;--card:#1C1F24;--line:#2A2E35;--text:#F2F0EA;--muted:#A3A7AE;background:var(--bg);color:var(--text)}
@media (min-width:720px){:root{--gut:40px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--ink)}
h1,h2,h3{font-family:var(--head);font-weight:700;margin:0;line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(36px,5.2vw,76px);line-height:1.02}
h2,.h2{font-size:clamp(28px,4.2vw,56px)}
h3,.h3{font-size:clamp(18px,1.6vw,22px);line-height:1.2}
p{margin:0}
.accent{color:var(--accent-text)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.01em}
.label{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.label--dark{color:var(--ink)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--text3);max-width:56ch}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:12px;border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);font:700 16px var(--body);text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn:disabled{opacity:.6;cursor:wait}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--text)}
.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--small{min-height:40px;padding:0 16px;font-size:15px}
.btn--wide{width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* шапка */
.top{position:sticky;top:0;z-index:30;background:var(--topbg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.logo{font:700 20px var(--head);letter-spacing:.02em;text-decoration:none}
.logo span{color:var(--accent)}
.nav{display:none;gap:28px}
.nav a{font:500 14px var(--mono);text-decoration:none;color:var(--text3);position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--accent);transition:right .2s}
.nav a:hover{color:var(--text)}
.nav a:hover::after{right:0}
@media (min-width:900px){.nav{display:flex}}

/* ---------- первый экран ---------- */
/* сетка-«миллиметровка» лежит ПОД текстом (z-index:-1 внутри своего слоя) и гаснет к низу */
.hero{position:relative;padding:48px 0 0;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%);mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
.hero__grid{position:relative;display:grid;gap:48px;align-items:center}
.hero__text{display:flex;flex-direction:column;gap:26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.ratings{list-style:none;margin:6px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 40px}
.ratings li{display:flex;align-items:baseline;gap:10px}
.ratings b{font:700 30px var(--head)}
.ratings span{font:500 13px var(--mono);color:var(--muted)}
@media (min-width:1000px){.hero{padding:72px 0 0}.hero__grid{grid-template-columns:minmax(0,1fr) 440px;gap:72px}}

/* фото с техническими вынесками */
.spec{position:relative;margin:0 auto;padding:16px;width:100%;max-width:560px}
.crop{position:absolute;z-index:1;width:18px;height:18px;border-color:var(--muted)}
.crop--tl{top:-14px;left:-14px;border-top:1.5px solid;border-left:1.5px solid}
.crop--tr{top:-14px;right:-14px;border-top:1.5px solid;border-right:1.5px solid}
.crop--bl{bottom:-14px;left:-14px;border-bottom:1.5px solid;border-left:1.5px solid}
.crop--br{bottom:-14px;right:-14px;border-bottom:1.5px solid;border-right:1.5px solid}
.spec__frame{position:relative;aspect-ratio:3/4;border-radius:6px}
.spec__frame img{width:100%;height:100%;object-fit:cover;border-radius:6px;filter:saturate(.9) contrast(1.05)}
.spec__frame::after{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(180deg,rgba(18,20,23,0) 60%,rgba(18,20,23,.35));pointer-events:none}
.pin{position:absolute;z-index:2;width:0;height:0}
.pin__dot{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink);font:700 13px var(--mono);box-shadow:0 0 0 6px rgba(255,107,31,.25);animation:pulse 2.6s ease-out infinite}
.pin:nth-of-type(2) .pin__dot{animation-delay:.6s}.pin:nth-of-type(3) .pin__dot{animation-delay:1.2s}.pin:nth-of-type(4) .pin__dot{animation-delay:1.8s}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,31,.5)}70%{box-shadow:0 0 0 14px rgba(255,107,31,0)}100%{box-shadow:0 0 0 0 rgba(255,107,31,0)}}
.pin__label{position:absolute;top:-22px;display:none;flex-direction:column;gap:1px;white-space:nowrap;padding:7px 11px;background:rgba(18,20,23,.9);border:1px solid var(--line);border-radius:8px;font:500 12px var(--mono);color:var(--text3)}
.pin__label b{font-weight:500;color:var(--text);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.pin__label::before{content:"";position:absolute;top:50%;width:34px;border-top:1.5px dashed var(--accent)}
.pin--left .pin__label{right:50px}
.pin--left .pin__label::before{left:100%}
.pin--right .pin__label{left:50px}
.pin--right .pin__label::before{right:100%}
.spec__cap{display:flex;align-items:center;gap:14px;margin-top:26px;font:500 12px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.spec__cap::after{content:"";order:1;flex:1;height:9px;border-left:1.5px solid var(--muted);border-right:1.5px solid var(--muted);background:linear-gradient(var(--muted),var(--muted)) center/100% 1.5px no-repeat}
.spec__dim{order:2}
.spec__legend{list-style:none;counter-reset:l;margin:16px 0 0;padding:0;display:grid;gap:10px;font:500 13px var(--mono);color:var(--muted)}
.spec__legend li{counter-increment:l;display:flex;gap:8px}
.spec__legend li::before{content:counter(l);flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-size:11px}
.spec__legend b{color:var(--text);font-weight:500}
@media (min-width:720px){.pin__label{display:flex}.spec__legend{display:none}}

.openbar{position:relative;list-style:none;margin:48px 0 0;padding:18px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 48px}
.openbar li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.is-open .dot{background:var(--ok);box-shadow:0 0 0 4px rgba(63,191,127,.18)}

/* бегущая строка услуг */
.band{background:var(--accent);color:var(--ink);overflow:hidden;border-block:1px solid var(--accent)}
.band__track{display:flex;width:max-content;animation:band 48s linear infinite}
.band__track span{display:flex;align-items:center;white-space:nowrap;padding:16px 0;font:700 clamp(16px,1.8vw,22px) var(--head);text-transform:uppercase;letter-spacing:.01em}
.band i{font-style:normal;margin:0 28px;opacity:.45}
@keyframes band{to{transform:translateX(-50%)}}

/* ---------- секции ---------- */
.sec{padding:80px 0}
.sec--panel{background:var(--bg2);border-block:1px solid var(--line)}
.sec__grid{display:grid;gap:20px}
.sec__side{display:flex;align-items:center;gap:14px}
.sec__num{font:700 44px/1 var(--head);color:transparent;-webkit-text-stroke:1.5px var(--line)}
.sec__title{margin-bottom:40px}
.sec__sub{margin:-28px 0 32px}
.sec--works .sec__grid{margin-bottom:28px}
@media (min-width:1000px){
  .sec{padding:120px 0}
  .sec__grid{grid-template-columns:200px minmax(0,1fr);gap:40px}
  .sec__side{flex-direction:column;align-items:flex-start;position:sticky;top:104px;align-self:start;gap:12px}
  .sec__num{font-size:96px;-webkit-text-stroke-width:2px}
}

/* статус — бирка */
.status-sec{display:grid;gap:36px;align-items:center}
.status-sec__text{display:flex;flex-direction:column;gap:18px}
.tag-card{position:relative;background:var(--paper);color:var(--ink);padding:30px 28px 30px 64px;border-radius:14px;
  clip-path:polygon(34px 0,100% 0,100% 100%,34px 100%,0 calc(100% - 34px),0 34px);
  transform:rotate(-1.2deg);box-shadow:0 30px 60px var(--shadow)}
.tag-card__hole{position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 4px #D9D5CA}
.tag-card__head{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.1em;padding-bottom:14px;margin-bottom:18px;border-bottom:1.5px dashed var(--paperline);color:var(--ink2)}
.tag-card label{color:var(--ink2)}
.tag-card input{background:transparent;border-color:var(--paperline);color:var(--ink)}
.tag-card input:focus{border-color:var(--ink)}
.tag-card input::placeholder{color:#A9A598}
.tag-card .status-result{border-color:var(--paperline)}
.tag-card .st-hist .muted,.tag-card .muted{color:var(--ink2)}
.tag-card .st-badge{background:var(--ink);color:var(--paper)}
.tag-card .st-badge--ready{background:#1F8F57;color:#fff}
.tag-card .st-badge--wait{background:var(--accent);color:var(--ink)}
.tag-card .st-err{color:#C2410C}
@media (min-width:1000px){.status-sec{grid-template-columns:1fr 520px;gap:80px}}

.status-form{display:grid;gap:12px}
.status-form--row{margin-top:28px}
@media (min-width:720px){.status-form--row{grid-template-columns:1fr 1fr auto;align-items:end}}

label{display:grid;gap:6px;font:500 13px var(--mono);color:var(--muted)}
input,select,textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--text);font:400 17px var(--body);transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--text);outline:none}
textarea{resize:vertical;min-height:120px}
input::placeholder,textarea::placeholder{color:#6B7078}
select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}

/* услуги */
.svc{list-style:none;margin:0;padding:0;display:grid;border-top:1.5px solid var(--line)}
.svc li{display:grid;align-content:start;grid-template-columns:44px 1fr;column-gap:16px;row-gap:6px;padding:24px 12px 24px 0;border-bottom:1.5px solid var(--line);transition:background .2s,padding .2s}
.svc li>p{grid-column:2}
.svc__n{color:var(--muted);font-size:15px;padding-top:3px;transition:color .2s}
.svc li:hover{background:var(--card);padding-left:14px}
.svc li:hover .svc__n{color:var(--accent-text)}
@media (min-width:900px){.svc{grid-template-columns:1fr 1fr;column-gap:40px}}

/* калькулятор */
.calc{display:grid;gap:32px}
.calc__steps{display:grid;gap:28px;align-content:start}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
legend i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border:1.5px solid var(--accent);color:var(--accent-text);border-radius:5px;font-size:12px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips--wrap{flex-wrap:wrap;overflow:visible}
@media (min-width:720px){.chips{flex-wrap:wrap;overflow:visible}}
.chips button{flex:none;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text);font:600 15px var(--body);cursor:pointer;transition:border-color .15s,background .15s}
.chips button:hover{border-color:var(--muted)}
.chips button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip{display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);font:600 15px var(--body);color:var(--text)}
.chip input:checked+span{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}

/* квитанция */
.receipt{position:relative;align-self:start;background:var(--paper);color:var(--ink);padding:28px 26px 30px;display:flex;flex-direction:column;gap:16px;margin:10px 0;filter:drop-shadow(0 24px 40px var(--shadow))}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:10px;background-size:16px 10px;background-repeat:repeat-x}
.receipt::before{top:-10px;background-image:linear-gradient(135deg,transparent 50%,var(--paper) 50%),linear-gradient(-135deg,transparent 50%,var(--paper) 50%);background-position:0 0,0 0}
.receipt::after{bottom:-10px;background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(-45deg,transparent 50%,var(--paper) 50%)}
.receipt__head{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.12em;color:var(--ink2);padding-bottom:12px;border-bottom:1.5px dashed var(--paperline)}
.receipt__rows{margin:0;display:grid;gap:10px;font-size:14px}
.receipt__rows div{display:flex;align-items:baseline;gap:8px}
.receipt__rows dt{color:var(--ink2);flex:none}
.receipt__rows div::after{content:"";order:1;flex:1;border-bottom:1.5px dotted var(--paperline);transform:translateY(-4px)}
.receipt__rows dd{order:2;margin:0;text-align:right;max-width:62%}
.receipt__total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:16px;border-top:2px solid var(--ink)}
.receipt__total .mono{font-size:13px;letter-spacing:.12em;padding-bottom:6px}
.receipt__price{font:700 clamp(32px,4vw,48px)/1 var(--head);text-align:right}
.receipt__price small{font-size:.42em;color:var(--ink2);margin-right:2px}
.receipt__price s{display:block;margin-top:6px;font:500 15px var(--mono);color:var(--ink2);text-decoration-thickness:1.5px}
.receipt__kind{font-size:15px;color:var(--ink)}
.receipt__note{font-size:13px;color:var(--ink2)}
.switch{display:flex;align-items:flex-start;gap:12px;font:600 15px var(--body);color:var(--ink);cursor:pointer;padding:12px 14px;border:1.5px solid var(--paperline);border-radius:10px}
.switch input,.check input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--accent);margin:1px 0 0}
@media (min-width:1100px){.calc{grid-template-columns:minmax(0,1fr) 420px;gap:56px}.receipt{position:sticky;top:110px}}

/* шаги */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:36px}
.steps li{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:28px}
.steps__rule{position:absolute;top:0;left:0;right:0;height:10px;border-left:1.5px solid var(--muted);
  background:linear-gradient(var(--line),var(--line)) 0 0/100% 1.5px no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1.5px,transparent 1.5px 12px) 0 0/100% 6px no-repeat}
.steps li:first-child .steps__rule{border-left-color:var(--accent)}
.steps__n{color:var(--accent-text);font-size:15px}
@media (min-width:800px){.steps{grid-template-columns:repeat(4,1fr);gap:28px}}

/* работы */
.works__stage{display:block}
.work{margin:0;display:grid;gap:28px;align-items:center}
.work__cap{display:flex;flex-direction:column;gap:14px}
.work__price{display:inline-flex;align-self:flex-start;padding:8px 14px;border:1.5px solid var(--accent);border-radius:8px;color:var(--accent-text)}
@media (min-width:900px){.work{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}}
.ba{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--card);touch-action:pan-y;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;min-height:0}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#F2F0EA;transform:translateX(-1px);pointer-events:none}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;background:#F2F0EA;transform:translate(-50%,-50%);box-shadow:0 4px 18px rgba(0,0,0,.45)}
.ba__handle::before{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font:700 20px var(--mono);color:#121417}
.tag{position:absolute;top:16px;padding:6px 12px;border-radius:8px;font:500 13px var(--mono);letter-spacing:.08em;pointer-events:none}
.tag--before{left:16px;background:var(--accent);color:var(--ink)}
.tag--after{right:16px;background:#F2F0EA;color:#121417}
.works__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin-top:28px;max-width:760px}
.works__thumbs button{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;text-align:left}
.works__thumbs img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;outline:2px solid transparent;outline-offset:2px;opacity:.55;transition:opacity .2s,outline-color .2s}
.works__thumbs button:hover img{opacity:.85}
.works__thumbs [aria-selected=true]{color:var(--text)}
.works__thumbs [aria-selected=true] img{opacity:1;outline-color:var(--accent)}
.works__thumbs .mono{font-size:12px;line-height:1.3}
@media (max-width:599px){.works__thumbs .mono{display:none}}

/* отзывы */
.reviews{columns:1;column-gap:20px;margin-bottom:32px}
@media (min-width:720px){.reviews{columns:2}}
.review{break-inside:avoid;margin:0 0 20px;padding:26px;background:var(--card);border-radius:var(--r);display:flex;flex-direction:column;gap:18px;border-top:3px solid var(--line);transition:border-color .2s}
.review:hover{border-top-color:var(--accent)}
.review p{font-size:17px;color:var(--text2)}
.review p::before{content:"“";display:block;font:700 52px/.7 var(--head);color:var(--accent-text);margin-bottom:10px}
.review footer{display:flex;flex-direction:column;gap:2px;color:var(--muted);font-size:13px}
.review footer b{color:var(--text);font-weight:500}

/* студенты */
.students{position:relative;overflow:hidden;display:grid;gap:24px;padding:40px 28px;border-radius:var(--r);background:var(--accent);color:var(--ink)}
.students h2{margin:10px 0 14px}
.students p{font-size:18px;font-weight:600;max-width:40ch}
.students__big{position:absolute;right:-10px;bottom:-40px;font:700 clamp(140px,22vw,300px)/1 var(--head);color:rgba(18,20,23,.1);pointer-events:none;letter-spacing:-.04em}
.students__list{position:relative;list-style:none;margin:0;padding:0;align-self:center}
.students__list li{padding:14px 0;border-top:1.5px solid rgba(18,20,23,.25);font-weight:700;font-size:17px}
.students__list li:last-child{border-bottom:1.5px solid rgba(18,20,23,.25)}
@media (min-width:860px){.students{grid-template-columns:1.2fr 1fr;gap:64px;padding:56px}}

/* адреса */
.points{display:grid;gap:20px}
@media (min-width:1000px){.points{grid-template-columns:1fr 1fr}}
.point{display:flex;flex-direction:column;gap:12px;height:100%;padding:28px;background:var(--card);border-radius:var(--r)}
.point__top{display:flex;justify-content:space-between;gap:12px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-bottom:16px;border-bottom:1.5px solid var(--line);margin-bottom:6px}
.point__state{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0}
.point.is-open .point__state{color:var(--ok)}
.point h3{font-size:clamp(24px,2.6vw,34px)}
.point__find{font-weight:600;color:var(--text2)}
.point dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:8px 0;padding:16px 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.point dt{color:var(--muted)}
.point dd{margin:0}
.points__note{margin:-20px 0 28px;font-size:16px}
.point__btns{margin-top:auto!important}
@media (max-width:559px){.point .point__btns{display:grid;grid-template-columns:1fr 1fr}.point .point__btns .btn:first-child{grid-column:1/-1}}
.point__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* заявка */
.contact{display:grid;gap:36px}
.contact .lead{margin-bottom:24px}
.contact__direct{list-style:none;margin:0;padding:0;display:grid;border-top:1.5px solid var(--line)}
.contact__direct li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1.5px solid var(--line);font-size:16px}
.contact__direct a{text-decoration:none}
.contact__direct a:hover{color:var(--accent)}
.lead-form{display:grid;gap:16px;padding:28px;background:var(--card);border-radius:var(--r)}
.check{display:flex;align-items:flex-start;gap:12px;font:400 14px var(--body);color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-msg{min-height:1.4em;font:500 14px var(--mono)}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--accent-text)}
@media (min-width:1100px){.contact{grid-template-columns:1fr 1fr;gap:56px}}

/* результат статуса */
.status-result{border-top:1.5px dashed var(--line);margin-top:18px;padding-top:18px;display:flex;flex-direction:column;gap:10px}
.status-result--page{margin-top:24px;border:0;padding:28px;background:var(--card);border-radius:var(--r)}
.st-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;font:500 13px var(--mono);letter-spacing:.04em;background:var(--line)}
.st-badge--ready{background:var(--ok);color:var(--ink)}
.st-badge--wait{background:var(--accent);color:var(--ink)}
.st-title{font:700 24px/1.2 var(--head)}
.st-hist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.st-hist li{display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:15px}
.st-err{color:var(--accent-text);font:500 14px var(--mono)}

/* документ */
.prose h2{margin:32px 0 10px}
.prose p{color:var(--text2);margin-bottom:10px}

/* подвал */
.foot{border-top:1px solid var(--line);padding:56px 0 40px;overflow:hidden}
.foot__in{display:grid;gap:32px}
.foot__cols{display:grid;gap:24px}
.foot__cols>div{display:flex;flex-direction:column;gap:6px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--accent)}
/* надпись во всю ширину колонки: шрифт считается от ширины, чтобы «24» не обрезалось (≈7.6em на всё слово) */
.foot__mark{margin-top:56px;font:700 min(calc((100vw - 2 * var(--gut)) / 8), 150px)/.8 var(--head);letter-spacing:-.03em;color:var(--card);white-space:nowrap;user-select:none}
.foot__mark span{color:rgba(255,107,31,.18)}
@media (min-width:860px){.foot__in{grid-template-columns:1fr 2fr}.foot__cols{grid-template-columns:repeat(3,1fr)}}

/* переключатель темы — как в CRM: луна в светлой, солнце в тёмной */
.top__actions{display:flex;align-items:center;gap:10px}
@media (max-width:419px){.top__actions .btn{display:none}}  /* на узком телефоне связь — в нижней панели */
.themebtn{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:10px;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:border-color .15s}
.themebtn:hover{border-color:var(--text)}
.themebtn svg{width:20px;height:20px}
.themebtn__sun,[data-theme=dark] .themebtn__moon{display:none}
[data-theme=dark] .themebtn__sun{display:block}
html.theme-anim *{transition:background-color .25s,border-color .25s,color .25s!important}

/* без некрасивых переносов: заголовки выравниваются по строкам, кнопки не рвутся */
h1,h2,h3,.h2,.h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.btn{white-space:nowrap}
.btn--2l{flex-direction:column;gap:2px;min-height:60px;padding:10px 20px;white-space:normal;text-align:center;line-height:1.2}
.btn--2l b{font:700 17px var(--body)}
.btn--2l small{font:500 13px var(--mono);opacity:.75}

/* Первый экран: заголовок во всю ширину, справа — текст и кнопки; ниже широкая панель калькулятора */
.hero__top{display:grid;gap:28px;align-items:start;margin-bottom:40px}
.hero__title{display:grid;gap:20px}
.hero__title h1{font-size:clamp(34px,4.4vw,68px);line-height:1.04;overflow-wrap:break-word}
.hero__side{display:grid;gap:20px}
.hero__side .ratings{margin:0}
.hero__title .lead{max-width:34em}
@media (min-width:1000px){
  .hero__top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px}
  /* текст справа начинается вровень с первой строкой заголовка, а не с надписи над ним */
  .hero__side{padding-top:calc(13px * 1.55 + 20px)}
}

/* «Что сломалось?» — схема телефона, список ремонтов с ценами, итог */
.fixer{position:relative;display:grid;gap:24px;padding:24px;background:var(--card);border:1.5px solid var(--line);border-radius:24px;box-shadow:0 30px 60px var(--shadow)}
.fixer::before{content:"";position:absolute;inset:-1.5px -1.5px auto;height:5px;border-radius:24px 24px 0 0;background:var(--accent)}
.fixer__head{display:grid;gap:14px;align-items:end}
.fixer__hint{margin-top:6px;font:700 clamp(18px,1.8vw,24px)/1.2 var(--head)}
.fixer__devices,.lead-form .chips{flex-wrap:wrap;overflow:visible}  /* на телефоне все устройства видны сразу, без прокрутки вбок */
.fixer__devices button{min-height:40px;padding:0 14px;font-size:14px}
@media (min-width:900px){.fixer{padding:32px}}

.fixer__body{display:grid;gap:24px;align-items:start}
.fixer__phonebox{display:flex;justify-content:center;padding:6px 0}
.fixer__phone{--pw:150px;position:relative;width:var(--pw);aspect-ratio:1/2;flex:none}
.phone{width:100%;height:100%;overflow:visible}
.phone__body{fill:var(--bg);stroke:var(--text);stroke-width:2}
.phone__screen{fill:none;stroke:var(--muted);stroke-width:1.5}
.phone__battery{fill:url(#hatch);stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4}
.phone__hatch{stroke:var(--line);stroke-width:2}
.phone__cam{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 3}
.phone__lens{fill:none;stroke:var(--muted);stroke-width:1.5}
.phone__slot,.phone__dot,.phone__btn{fill:var(--muted)}
.phone__dim{font:500 9px var(--mono);letter-spacing:.3em;fill:var(--muted);opacity:.6}
.phone [data-zone-shape]{transition:stroke .2s,fill .2s}
.phone .is-hot{stroke:var(--accent)!important;stroke-dasharray:none}
.phone .phone__slot.is-hot,.phone g.is-hot .phone__dot{fill:var(--accent)}
.phone__screen.is-hot{fill:rgba(255,107,31,.08)}

/* точка на детали; подпись — ровным столбцом за краем схемы, к ней тянется пунктир */
.hot{position:absolute;z-index:2;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:0;height:0;padding:0;border:0;background:none;cursor:pointer}
.hot__dot{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;background:var(--card);border:2px solid var(--accent);transition:transform .15s,background .15s}
.hot__dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--accent)}
.hot:hover .hot__dot{transform:scale(1.12)}
.hot.is-on .hot__dot{background:var(--accent);box-shadow:0 0 0 6px rgba(255,107,31,.22)}
.hot.is-on .hot__dot::after{background:var(--card)}
.hot__label{position:absolute;top:-11px;white-space:nowrap;padding:2px 7px;border-radius:6px;font:500 11.5px/18px var(--mono);color:var(--text);background:var(--card);border:1px solid var(--line);pointer-events:none;transition:background .15s,color .15s}
.hot__label::before{content:"";position:absolute;top:50%;border-top:1.5px dashed var(--accent);opacity:.7}
.hot--r .hot__label{left:calc((100 - var(--x)) * var(--pw) / 100 + 18px)}
.hot--r .hot__label::before{right:100%;width:calc((100 - var(--x)) * var(--pw) / 100 + 6px)}
.hot--l .hot__label{right:calc(var(--x) * var(--pw) / 100 + 18px)}
.hot--l .hot__label::before{left:100%;width:calc(var(--x) * var(--pw) / 100 + 6px)}
.hot:hover .hot__label{border-color:var(--accent)}
.hot.is-on .hot__label{background:var(--accent);color:#121417;border-color:var(--accent)}
.hot.is-on .hot__label::before{opacity:1}

.fixer__cap{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.fixer__repairs{display:grid;border-top:1.5px solid var(--line)}
.fixer__repairs button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:10px 12px;border:0;border-bottom:1.5px solid var(--line);background:transparent;color:var(--text);font:600 15px var(--body);text-align:left;cursor:pointer;transition:background .15s,padding .15s}
.fixer__repairs button:hover{background:var(--bg)}
.fixer__repairs button[aria-pressed=true]{background:var(--text);color:var(--bg);padding-left:16px}
.fixer__from{flex:none;font:500 13px var(--mono);color:var(--muted)}
.fixer__repairs button[aria-pressed=true] .fixer__from{color:inherit;opacity:.75}

.fixer__result{display:grid;gap:14px;align-content:start;padding:20px;border-radius:18px;background:var(--bg)}
.fixer__result select{background-color:var(--card)}
.fixer__total{display:grid;gap:4px}
.fixer__total .mono{color:var(--muted);font-size:13px}
.fixer__price{font:700 clamp(34px,3.4vw,46px)/1 var(--head)}
.fixer__price small{font-size:.42em;color:var(--muted);margin-right:2px}
.fixer__price s{display:block;margin-top:6px;font:500 15px var(--mono);color:var(--muted)}
.fixer__kind{font-size:14px;color:var(--muted)}
.fixer__kind b{color:var(--text);font-weight:600}
.fixer__kind [data-calc-warranty-row]:not([hidden]){display:block;margin-top:6px}
.fixer .switch{color:var(--text);border-color:var(--line);font-size:14px;background:var(--card)}
.fixer__note{font-size:12.5px;color:var(--muted)}

/* схема нужна только телефонам */
.fixer--nophone .fixer__phonebox{display:none}
@media (min-width:700px){
  .fixer__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fixer__phonebox{grid-column:1/-1;padding:6px 0 0}
}
@media (min-width:1100px){
  .fixer__body{grid-template-columns:430px minmax(0,1fr) 340px;gap:28px}
  .fixer__phone{--pw:170px}
  .fixer__phonebox{grid-column:auto}
  .fixer--nophone .fixer__body{grid-template-columns:minmax(0,1fr) 340px}
}
/* на телефоне подписи у всех точек не помещаются — показываем только у выбранной */
@media (max-width:699px){
  .fixer__phone{--pw:140px}
  .hot__label{display:none}
  .hot.is-on .hot__label{display:block}
}

/* первый экран: факты, звонок, мини-калькулятор */
.hero__facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hero__facts li{display:flex;gap:12px;align-items:baseline;font-weight:600;color:var(--text2)}
.hero__facts li::before{content:"";flex:none;width:14px;height:8px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg) translate(2px,-2px)}
.callmenu{position:relative}
.callmenu summary{list-style:none;cursor:pointer}
.callmenu summary::-webkit-details-marker{display:none}
.callmenu__list{position:absolute;z-index:40;top:calc(100% + 8px);left:0;min-width:280px;display:grid;padding:6px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;box-shadow:0 20px 40px var(--shadow)}
.callmenu__list a{display:flex;flex-direction:column;padding:12px 14px;border-radius:10px;text-decoration:none}
.callmenu__list a:hover{background:var(--bg)}
.callmenu__list b{font:700 18px var(--head)}
.callmenu__list span{font:500 13px var(--mono);color:var(--muted)}
.callmenu--up .callmenu__list{top:auto;bottom:calc(100% + 10px)}

.quick{position:relative;display:grid;gap:14px;padding:28px;background:var(--card);border-radius:22px;border:1.5px solid var(--line);box-shadow:0 30px 60px var(--shadow)}
.quick::before{content:"";position:absolute;inset:-1.5px -1.5px auto;height:5px;border-radius:22px 22px 0 0;background:var(--accent)}
.quick__head{display:grid;gap:6px;margin-bottom:4px}
.quick select{background-color:var(--bg)}
.quick__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:16px;margin-top:4px;border-top:1.5px dashed var(--line)}
.quick__total .mono{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.quick__price{font:700 clamp(30px,3.4vw,42px)/1 var(--head)}
.quick__price small{font-size:.45em;color:var(--muted);margin-right:2px}
.quick__kind{font-size:14px;color:var(--muted)}
.quick__more{justify-self:center;color:var(--muted);text-decoration:none;font-size:13px}
.quick__more:hover{color:var(--accent-text)}

/* почему к нам */
.why{padding-top:72px}
.why__head{display:grid;gap:16px;margin-bottom:36px}
.why__stat{font-size:clamp(18px,2vw,24px);max-width:40ch}
.why__stat b{font:700 1.6em var(--head);color:var(--accent-text);margin-right:6px}
.why__stat .mono{display:block;margin-top:6px;font-size:12px}
.why__grid{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.why__item{display:flex;flex-direction:column;gap:12px;padding:26px;background:var(--card);border-radius:var(--r);border:1.5px solid var(--line)}
.why__n{color:var(--accent-text);font-size:14px}
.why__item p{color:var(--text3);font-size:16px}
@media (min-width:720px){.why__grid{grid-template-columns:1fr 1fr}}


/* вопросы */
.faq{border-top:1.5px solid var(--line)}
.faq__item{border-bottom:1.5px solid var(--line)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:700 clamp(17px,1.6vw,20px)/1.3 var(--head)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary i{position:relative;flex:none;width:28px;height:28px;border:1.5px solid var(--line);border-radius:50%}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;background:var(--text);transform:translate(-50%,-50%)}
.faq__item summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.faq__item[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq__item[open] summary i{border-color:var(--accent);background:var(--accent)}
.faq__item p{padding:0 48px 24px 0;color:var(--text3);max-width:70ch}

/* нижняя панель на телефоне */
.mbar{position:fixed;z-index:50;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;padding:6px;border-radius:16px;background:#121417;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.mbar>a,.mbar summary{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:11px;color:#F2F0EA;font:700 15px var(--body);text-decoration:none;background:#1C1F24}
.mbar .mbar__main{background:var(--accent);color:#121417}
.mbar .callmenu__list{left:0;--card:#1C1F24;--line:#2A2E35;--bg:#121417;--muted:#A3A7AE;color:#F2F0EA}
body{padding-bottom:84px}
@media (min-width:900px){.mbar{display:none}body{padding-bottom:0}}

/* появление при прокрутке */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band__track,.pin__dot{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.svc li{transition:none}
}