/* SPECO — сайт. Фирменный стиль: Exo 2 / IBM Plex Sans / IBM Plex Mono, прямые углы, волосяные линии. */
:root{
  --brand:#005697; --band:#115899; --deep:#0f5089; --tint:#cfdeec; --brand-text:#005697;
  --accent:#901426; --ground:#dcdde2; --surface:#eceef1; --paper:#ffffff;
  --ink:#1d2126; --muted:#474d57; --line:#babdc5; --line-strong:#6f7581; --on-brand:#ffffff;
  --shadow:0 14px 36px rgba(29,33,38,.10);
  --display:"Exo 2","Arial Narrow",Arial,sans-serif;
  --sans:"IBM Plex Sans",Arial,Helvetica,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
  --wrap:1180px; --gut:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#2d7fc4; --band:#0f4a80; --deep:#0b3c69; --tint:#1c3b57; --brand-text:#82b7e6;
    --accent:#d8546a; --ground:#14181d; --surface:#1d2229; --paper:#242b34;
    --ink:#e9ecf0; --muted:#a6aeb9; --line:#39414b; --line-strong:#7c8695; --on-brand:#ffffff;
    --shadow:0 14px 36px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --brand:#2d7fc4; --band:#0f4a80; --deep:#0b3c69; --tint:#1c3b57; --brand-text:#82b7e6;
  --accent:#d8546a; --ground:#14181d; --surface:#1d2229; --paper:#242b34;
  --ink:#e9ecf0; --muted:#a6aeb9; --line:#39414b; --line-strong:#7c8695; --on-brand:#ffffff;
  --shadow:0 14px 36px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--brand-text);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;text-transform:uppercase;margin:0;text-wrap:balance;letter-spacing:.01em}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(44px,6vw,84px)}
/* первый блок после меню — отступ меньше, но не впритык */
main>.sec:first-child{padding-top:clamp(26px,3vw,44px)}
.sec--surface{background:var(--surface)}
.eyebrow{display:flex;align-items:center;gap:10px;font:600 12px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:4px;background:var(--accent);flex:none}
.h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1}
.h3{font-size:clamp(20px,2.2vw,26px);line-height:1.15}
.lead{margin-top:14px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Шапка */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--ground);background:color-mix(in srgb,var(--ground) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:clamp(12px,2vw,32px);min-height:72px}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{width:104px}
.brand span{display:none;font:600 11px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);max-width:170px}
@media (min-width:1080px){.brand span{display:block}}
.nav{display:none;gap:clamp(12px,1.6vw,26px);margin-left:auto;align-items:center}
@media (min-width:900px){.nav{display:flex}}
.nav a{font:600 14px/1 var(--sans);color:var(--ink);padding-block:8px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right .22s}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.top__cta{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (min-width:900px){.top__cta{margin-left:clamp(12px,2vw,28px)}}
.top__max{display:none;font:600 14px/1 var(--sans);color:var(--ink);white-space:nowrap;border-bottom:2px solid var(--accent);padding-bottom:3px}
.top__max:hover{color:var(--brand-text)}
@media (min-width:700px){.top__max{display:block}}
.burger{display:grid;place-items:center;width:44px;height:40px;background:none;border:1px solid var(--line-strong);color:var(--ink);cursor:pointer}
@media (min-width:900px){.burger{display:none}}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:currentColor;content:""}
.burger span{position:relative}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}
.mnav{display:grid;gap:2px;padding-block:12px;border-top:1px solid var(--line)}
.mnav a{font:600 16px/1 var(--sans);color:var(--ink);padding:12px 4px;border-bottom:1px solid var(--line)}
@media (min-width:900px){.mnav{display:none!important}}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;font:600 15px/1 var(--sans);border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn--main{background:var(--brand);color:#fff}
.btn--main:hover{background:var(--deep)}
.btn--ghost{background:none;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand-text)}
.btn--wa{background:#1f9d55;color:#fff}
.btn--tg{background:#1f7dbe;color:#fff}
.btn--sm{height:44px;padding:0 18px;font-size:14px}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Первый экран */
.hero{position:relative;overflow:hidden;padding-block:clamp(24px,3vw,44px) clamp(40px,6vw,72px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(29,33,38,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(29,33,38,.07) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(105deg,transparent 0 42%,#000 88%);-webkit-mask-image:linear-gradient(105deg,transparent 0 42%,#000 88%)}
.hero__grid{position:relative;display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:940px){.hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hero h1{font-size:clamp(30px,5vw,58px);line-height:1.02;font-weight:800}
.hero .lead{max-width:54ch}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:14px;color:var(--muted)}
.proof span{display:inline-flex;align-items:center;gap:8px}
.proof span::before{content:"";width:8px;height:8px;background:var(--brand);flex:none}
.hero__media{position:relative}
.hero__media img{width:100%;height:clamp(260px,42vw,440px);object-fit:cover}
.hero__cap{position:absolute;left:0;bottom:0;background:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--ink);padding:8px 12px;font-size:12px;max-width:92%}

/* Лента заказчиков */
.strip{background:var(--band);color:var(--on-brand);overflow:hidden}
.strip__in{display:flex;align-items:center;gap:clamp(14px,3vw,36px);padding-block:18px;min-width:0}
.strip__label{flex:none;font:600 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
@media (max-width:640px){.strip__label{display:none}}
.marquee{flex:1 1 0;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__track{display:flex;gap:44px;width:max-content}
.marquee__track b{font:700 16px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:.95}
@media (prefers-reduced-motion:no-preference){.marquee__track{animation:marq 42s linear infinite}.marquee:hover .marquee__track{animation-play-state:paused}}
@keyframes marq{to{transform:translateX(-50%)}}

/* Цифры */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:560px){.stats{grid-template-columns:1fr 1fr}}
@media (min-width:920px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats--2{grid-template-columns:1fr}
@media (min-width:560px){.stats--2{grid-template-columns:1fr 1fr}}
@media (min-width:920px){.stats--2{grid-template-columns:1fr 1fr}}
.stat{background:var(--paper);padding:26px 24px;overflow-wrap:anywhere}
.stat b{display:block;font:700 clamp(30px,3.4vw,44px)/1 var(--display);color:var(--brand-text);font-variant-numeric:tabular-nums}
.stat b small{font-size:.44em;margin-left:4px;letter-spacing:.04em}
.stat span{display:block;margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* Услуги */
.svcs{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
@media (min-width:760px){.svc{grid-template-columns:52px 1fr auto;gap:22px}}
.svc__n{font:700 15px/1.2 var(--mono);color:var(--muted);padding-top:3px}
.svc h3{font-family:var(--sans);font-weight:600;text-transform:none;font-size:18px;line-height:1.3}
.svc p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:70ch}
.tag{align-self:start;font:600 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;white-space:nowrap}
.tag--own{background:var(--tint);color:var(--brand-text)}
.tag--part{background:none;color:var(--muted);border:1px solid var(--line-strong)}
.note{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--band);color:var(--on-brand);padding:20px 24px;margin-top:28px}
.note b{font:700 14px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.note span{font-size:14.5px;line-height:1.55}

/* Объекты */
.cards{display:grid;gap:clamp(16px,2vw,22px)}
@media (min-width:680px){.cards{grid-template-columns:1fr 1fr}}
.cards--3{grid-template-columns:1fr}
@media (min-width:680px){.cards--3{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;background:var(--paper);transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow)}
.card__ph{position:relative;overflow:hidden;background:var(--band)}
.card__ph img{width:100%;height:230px;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__ph img{transform:scale(1.04)}
.card__badge{position:absolute;left:0;top:0;background:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--ink);padding:7px 11px;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.card__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__meta{font:600 11px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:21px;line-height:1.14}
.card p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.card__facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.card__facts div b{display:block;font:700 19px/1.15 var(--display);color:var(--brand-text);font-variant-numeric:tabular-nums}
.card__facts div span{font-size:11.5px;color:var(--muted)}
.card__link{font:600 14px/1 var(--sans);color:var(--brand-text);display:inline-flex;gap:8px;align-items:center}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:15px;line-height:1.5}
.ticks li{position:relative;padding-left:20px}
.ticks li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:4px;background:var(--accent)}

/* Две колонки */
.two{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:900px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.two--wide{grid-template-columns:1fr}
@media (min-width:900px){.two--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.panel{background:var(--paper);padding:clamp(22px,3vw,32px)}
.panel--surface{background:var(--surface)}
.panel h3{margin-bottom:12px}

/* Шаги */
.steps{counter-reset:s;display:grid;gap:2px;margin-top:30px}
.step{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font:700 30px/1 var(--display);color:var(--line-strong);font-variant-numeric:tabular-nums}
.step h3{font-family:var(--sans);font-weight:600;text-transform:none;font-size:17px;line-height:1.3}
.step p{margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:74ch}

/* Плитки выгод */
.gains{display:grid;gap:16px;margin-top:30px}
@media (min-width:640px){.gains{grid-template-columns:1fr 1fr}}
.gain{background:var(--band);color:var(--on-brand);padding:22px 24px;transition:transform .25s}
.gain:hover{transform:translateY(-3px)}
.gain b{display:block;font:700 18px/1.2 var(--display);text-transform:uppercase;margin-bottom:9px}
.gain span{font-size:14.5px;line-height:1.55;opacity:.95}

/* Доверие */
.docs{display:grid;gap:16px}
@media (min-width:640px){.docs{grid-template-columns:1fr 1fr}}
.doc{background:var(--paper);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.doc svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.6}
.doc h4{font-family:var(--sans);font-weight:600;text-transform:none;font-size:16.5px;line-height:1.3;margin-top:4px}
.doc p{font-size:14px;line-height:1.5;color:var(--muted)}
.req{margin-top:24px;background:var(--paper);padding:22px 24px;display:grid;gap:6px}
.req b{font:600 19px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.req span{font-size:14px;color:var(--muted)}

/* Таблица референс-листа */
.tw{overflow-x:auto;border:1px solid var(--line);background:var(--paper)}
table.ref{width:100%;min-width:760px;border-collapse:collapse;font-size:14px}
table.ref th{background:var(--tint);color:var(--brand-text);text-align:left;font:600 11.5px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:12px 14px}
table.ref td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;line-height:1.45}
table.ref td.y{font-family:var(--mono);color:var(--muted);white-space:nowrap}
table.ref td.v{font-family:var(--mono);white-space:nowrap;text-align:right}
table.ref td.l{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
table.ref tbody tr:hover{background:var(--surface)}

/* FAQ */
.faq{border-top:1px solid var(--line);margin-top:30px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:600 17px/1.4 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:6px;background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;max-width:76ch;color:var(--muted);font-size:15px;line-height:1.6}

/* Заявка */
.two>*,.cards>*,.stats>*,.gal>*,.docs>*,.gains>*{min-width:0}
.form{display:grid;gap:14px;min-width:0}
.field{display:grid;gap:6px;min-width:0}
.field input,.field textarea{min-width:0}
.fgrid>*{min-width:0}
.sendrow .btn{flex:0 1 auto;min-width:0}
.field label{font:600 12px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font:400 15px/1.5 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);padding:13px 14px;width:100%}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);color:color-mix(in srgb,var(--muted) 70%,transparent)}
.fgrid{display:grid;gap:14px}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
.sendrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.sendrow .btn{min-height:52px}
@media (max-width:760px){.field input,.field textarea{font-size:16px}}
.hint{font-size:13px;line-height:1.5;color:var(--muted)}
.hint--ok{color:var(--brand-text);font-weight:600}
.hint--warn{color:var(--accent);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Загрузка документов */
.drop{display:flex;align-items:center;gap:14px;padding:18px 18px;background:var(--ground);border:2px dashed var(--line-strong);cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.is-over{border-color:var(--brand);background:var(--surface)}
.drop svg{flex:none;width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:square}
.drop span{font-size:14.5px;line-height:1.45;color:var(--muted)}
.drop b{color:var(--brand-text);font-weight:600}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.flist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.flist li{display:flex;justify-content:space-between;gap:14px;background:var(--paper);padding:10px 14px;font-size:13.5px}
.flist li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flist li b{font-family:var(--mono);font-weight:400;color:var(--muted);white-space:nowrap}

/* Результат отправки */
.sent{background:var(--paper);border-left:4px solid var(--brand);padding:22px 24px;display:grid;gap:10px;justify-items:start}
.sent--err{border-left-color:var(--accent)}
.sent b{font:700 19px/1.25 var(--display);text-transform:uppercase}
.sent p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.steps-min{margin:22px 0 0;padding:0;counter-reset:n;display:grid;gap:12px}
.steps-min li{list-style:none;display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:15px;line-height:1.5}
.steps-min li::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:30px;height:30px;background:var(--brand);color:#fff;font:700 13px/1 var(--display)}

/* Галерея кейса */
.gal{display:grid;gap:12px}
@media (min-width:620px){.gal{grid-template-columns:1fr 1fr}}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--band)}
.gal img{width:100%;height:280px;object-fit:cover}
.gal--tall img{height:clamp(300px,40vw,460px)}
.gal figcaption{position:absolute;left:0;bottom:0;background:var(--paper);background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--ink);padding:7px 11px;font-size:12px;line-height:1.4;max-width:94%}

/* Текстовая страница */
.prose{max-width:74ch}
.prose h2{font-size:clamp(20px,2.4vw,26px);margin:34px 0 12px}
.prose h3{font-family:var(--sans);text-transform:none;font-size:18px;margin:26px 0 8px}
.prose p,.prose li{font-size:15.5px;line-height:1.68;color:var(--ink)}
.prose p+p{margin-top:12px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px;margin:12px 0}

/* Чипы */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{border:1px solid var(--line-strong);padding:8px 12px;font-size:13.5px;color:var(--ink)}

/* Подвал */
.foot{background:var(--band);color:var(--on-brand);padding-block:clamp(36px,5vw,60px) 28px;margin-top:0}
.foot a{color:#fff}
.foot__grid{display:grid;gap:28px}
@media (min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot img{width:132px;opacity:.96}
.foot h4{font-size:13px;letter-spacing:.12em;margin-bottom:12px;opacity:.85}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.foot__big{font:600 19px/1.3 var(--mono);display:block;margin-top:14px}
.foot__bot{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.28);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13px;opacity:.9}

/* Мобильная панель */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--ground);background:color-mix(in srgb,var(--ground) 96%,transparent);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .28s}
  .mbar.is-on{transform:none}
  .mbar .btn{height:46px;padding:0 10px;font-size:14px}
  /* чтобы нижняя панель не перекрывала кнопки и текст страницы */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}