/* «Кодовый цех» — сайт компании. Графит, бумага, сигнальный оранжевый как акцент.
   Шрифты: Oswald (заголовки) и IBM Plex Sans (текст), оба SIL OFL 1.1, лежат в /fonts/. */

@font-face{font-family:"Oswald";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/oswald-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/oswald-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oswald";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/oswald-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --g:#1C1D22;      /* графит */
  --p:#F4EFE6;      /* бумага */
  --o:#FF6A1A;      /* сигнальный оранжевый — только акцент */
  --g2:#2B2C33;     /* ступень графита */
  --p2:#E8E1D3;     /* ступень бумаги */
  --mute:#4A4A52;   /* второстепенный текст на бумаге */
  --mute-d:#CFC9BD; /* второстепенный текст на графите */
  --display:"Oswald","Arial Narrow","Liberation Sans Narrow",Impact,sans-serif;
  --text:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --pad:clamp(20px,5vw,56px);
  --max:1280px;
  --line:4px;
  --focus:var(--g);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:var(--p);color:var(--g);font:400 1.0625rem/1.6 var(--text);overflow-x:hidden}
::selection{background:var(--g);color:var(--p)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:3px;text-decoration-color:var(--o);text-underline-offset:.2em}
a:hover{text-decoration-color:currentColor}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.on-dark{--focus:var(--p)}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(56px,9vw,112px) 0}
.sec-p2{background:var(--p2)}
.sec-g{background:var(--g);color:var(--p);--focus:var(--p)}
.sec-g a{text-decoration-color:var(--o)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(28px,5vw,56px);max-width:48rem}
.sec-head h2{font-size:clamp(2rem,6vw,3.75rem)}
.sec-head p{font-size:1.1875rem;color:var(--mute)}
.sec-g .sec-head p{color:var(--mute-d)}

/* ---------- логотип ---------- */
.logo{display:block;text-decoration:none;line-height:0}
.logo svg{width:100%;height:auto}

/* ---------- шапка ---------- */
.site-head{background:var(--g);color:var(--p);--focus:var(--p)}
.site-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding-top:14px;padding-bottom:6px}
.site-head .logo{width:min(188px,52vw);padding:6px 0}
.nav{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:0 22px}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:1rem;text-decoration:none;border-bottom:3px solid transparent}
.nav a:hover{border-color:var(--o)}
.head-cta{grid-column:2;grid-row:1;display:flex;gap:10px}
.head-cta .lg{display:none}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font:700 1.0625rem/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;background:var(--o);color:var(--g);border:3px solid var(--o);border-radius:0;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--g);color:var(--p);border-color:var(--g)}
.sec-g .btn:hover,.site-head .btn:hover,.hero .btn:hover{background:var(--p);color:var(--g);border-color:var(--p)}
.btn:active{transform:translateY(2px)}
.btn-sm{min-height:44px;padding:0 16px;font-size:1rem}
.btn-line{background:transparent;color:inherit;border-color:currentColor}
.btn-line:hover{background:var(--p);color:var(--g);border-color:var(--p)}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- первый экран ---------- */
.hero{background:var(--g);color:var(--p);--focus:var(--p);padding:clamp(36px,7vw,96px) 0 clamp(48px,8vw,104px)}
.hero .wrap{display:grid;gap:clamp(32px,5vw,56px)}
.hero h1{font-size:clamp(2.5rem,10.5vw,5.5rem);line-height:1}
.hero-lead{font-size:clamp(1.125rem,2.4vw,1.375rem);color:var(--mute-d);max-width:34rem;margin-top:20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-cta .btn{flex:1 1 220px}
.tag-plate{border:var(--line) solid var(--p);position:relative;padding:22px 22px 34px;align-self:start;background:var(--g)}
.tag-plate::after{content:"";position:absolute;left:18px;right:18px;bottom:-4px;height:8px;background:var(--o)}
.tag-plate dl{margin:0;display:grid;gap:14px}
.tag-plate dt{font:700 1.375rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.tag-plate dd{margin:2px 0 0;color:var(--mute-d);font-size:1rem}

/* ---------- что делаем ---------- */
.dirs{display:grid;gap:0;border-top:var(--line) solid var(--g)}
.dirs li{display:grid;gap:6px;padding:20px 0;border-bottom:var(--line) solid var(--g)}
.dirs h3{font-size:clamp(1.5rem,3.4vw,2.25rem)}
.dirs p{color:var(--mute)}
.who{display:grid;gap:20px;margin-top:clamp(36px,6vw,64px)}
.who h3{font-size:clamp(1.5rem,3.4vw,2.25rem)}
.who-box{border:var(--line) solid var(--g);padding:22px 22px 26px;display:grid;gap:8px;align-content:start;background:var(--p)}
.who-box p{color:var(--mute)}

/* ---------- услуги и цены ---------- */
.svc{display:grid;gap:clamp(28px,5vw,48px)}
.svc-group h3{font-size:clamp(1.5rem,3.4vw,2.25rem);padding-bottom:14px;border-bottom:var(--line) solid var(--g)}
.svc-row{display:grid;gap:8px 24px;padding:18px 0;border-bottom:2px solid var(--g)}
.svc-name{font-weight:600;font-size:1.1875rem;line-height:1.3}
.svc-desc{color:var(--mute);margin-top:4px}
.svc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.svc-price b{font:700 1.75rem/1.1 var(--display);letter-spacing:.01em;white-space:nowrap}
.svc-price span{color:var(--mute);font-size:1rem;white-space:nowrap}
.svc-note{margin-top:clamp(28px,5vw,48px);border:var(--line) solid var(--g);padding:20px 22px;display:grid;gap:8px;max-width:52rem;background:var(--p)}
.svc-note p:first-child{font-weight:600}

/* ---------- работы ---------- */
.works{display:grid;gap:clamp(20px,3vw,32px)}
.work{border:var(--line) solid var(--g);background:var(--p);display:grid;grid-template-rows:auto 1fr}
.work-thumb{aspect-ratio:8/5;overflow:hidden;border-bottom:var(--line) solid var(--g)}
.work-thumb svg{width:100%;height:100%}
.work-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px}
.stamp{display:inline-block;width:max-content;max-width:100%;background:var(--g);color:var(--p);font-weight:600;font-size:.9375rem;line-height:1.3;padding:4px 12px}
.work h3{font-size:1.625rem}
.work-body>p:not(.stamp){color:var(--mute);flex:1}
.go{display:inline-flex;align-items:center;min-height:48px;font-weight:600;color:var(--g);text-decoration:underline;text-decoration-color:var(--o);text-decoration-thickness:3px;text-underline-offset:.28em}
.go:hover{text-decoration-color:var(--g)}
.works-note{margin-top:28px;font-weight:600;max-width:46rem}

/* ---------- как работаем ---------- */
.stages{display:grid;gap:14px;counter-reset:st}
.stages li{counter-increment:st;display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;border:3px solid var(--p);padding:18px;align-content:start}
.stages li::before{content:counter(st);grid-row:1/3;display:grid;place-items:center;width:56px;height:56px;background:var(--p);color:var(--g);font:700 1.75rem/1 var(--display)}
.stages h3{font-size:1.5rem;align-self:center}
.stages p{grid-column:2;color:var(--mute-d);margin-top:6px}
.sec-g .foot-note{margin-top:clamp(28px,4vw,40px);max-width:46rem;color:var(--mute-d)}
.sec-g .foot-note b{color:var(--p);font-weight:600}

/* ---------- про ИИ и скидка ---------- */
.two{display:grid;gap:clamp(28px,5vw,56px)}
.ai h2,.promo h2{font-size:clamp(2rem,6vw,3.75rem)}
.statement{font:700 clamp(1.5rem,3.2vw,2.25rem)/1.2 var(--display);letter-spacing:.01em;text-transform:uppercase;max-width:24em;margin-top:22px;text-wrap:balance}
.ai-text{margin-top:20px;max-width:36rem;color:var(--mute)}
.promo-box{border:var(--line) solid var(--g);background:var(--p);padding:26px 24px 38px;position:relative;display:grid;gap:14px;align-content:start}
.promo-box::after{content:"";position:absolute;left:20px;right:20px;bottom:-4px;height:8px;background:var(--o)}
.promo-box .big{font:700 clamp(3.5rem,9vw,5.5rem)/1 var(--display)}
.promo-box p{color:var(--mute)}
.promo-box .big{color:var(--g)}

/* ---------- заявка ---------- */
.contact-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:start}
.form{border:var(--line) solid var(--g);background:var(--p);padding:clamp(20px,4vw,36px);display:grid;gap:4px}
.form h3{font-size:1.75rem;margin-bottom:8px}
.field{display:grid;gap:6px;margin-top:14px}
.field label{font-weight:600;font-size:1rem}
.field .opt{font-weight:400;color:var(--mute)}
.field input[type=text],.field textarea{width:100%;padding:12px 14px;font:inherit;color:var(--g);background:#fff;border:3px solid var(--g);border-radius:0}
.field textarea{min-height:128px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--g);outline-offset:3px}
.field [aria-invalid=true]{border-color:var(--g);box-shadow:inset 8px 0 0 var(--o)}
.ferr{font-weight:600;font-size:.9375rem;min-height:0}
.ferr:not(:empty){padding-left:10px;border-left:6px solid var(--o)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:14px;align-items:flex-start;min-height:44px;margin-top:18px;cursor:pointer;font-size:1rem}
.consent input{flex:none;width:28px;height:28px;margin:0;accent-color:var(--g)}
.form .btn{margin-top:20px;width:100%}
.form-hint{margin-top:12px;font-size:.9375rem;color:var(--mute)}
.status{margin-top:16px;padding:14px 16px;border:3px solid var(--g);font-weight:600;background:#fff}
.status[data-state=ok]{box-shadow:inset 10px 0 0 var(--o)}
.status[data-state=error]{box-shadow:inset 10px 0 0 var(--g)}
.status p+p{margin-top:6px;font-weight:400}
.contacts{display:grid;gap:22px;align-content:start}
.contacts h3{font-size:clamp(1.5rem,3.4vw,2.25rem)}
.contacts ul{display:grid;gap:14px}
.contacts a{font:700 1.5rem/1.2 var(--display);letter-spacing:.01em;overflow-wrap:anywhere;display:inline-block;padding:6px 0}
.contacts li span{display:block;color:var(--mute);font-size:1rem}
.contacts a.btn{font:700 1.0625rem/1.1 var(--display);letter-spacing:.04em;display:flex;padding:0 26px;margin-bottom:6px}
.contacts .hours{border:var(--line) solid var(--g);padding:16px 18px;background:var(--p)}

/* ---------- подвал ---------- */
.site-foot{background:var(--g);color:var(--p);--focus:var(--p);padding:clamp(40px,6vw,72px) 0}
.site-foot .wrap{display:grid;gap:28px}
.site-foot .logo{width:min(260px,70vw)}
.site-foot p{color:var(--mute-d);font-size:1rem;max-width:44rem}
.site-foot .legal{color:var(--p)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 24px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ---------- текстовые страницы (политика, согласие) ---------- */
.doc{padding:clamp(32px,6vw,72px) 0 clamp(56px,9vw,112px)}
.doc h1{font-size:clamp(1.75rem,6.5vw,4rem);margin-bottom:12px;max-width:20em}
.doc-meta{color:var(--mute);margin-bottom:32px}
.doc h2{font-size:clamp(1.5rem,3.6vw,2.25rem);margin:44px 0 14px;padding-top:18px;border-top:var(--line) solid var(--g)}
.doc p,.doc li{max-width:46rem}
.doc p+p{margin-top:12px}
.doc ol,.doc ul{margin-top:12px;display:grid;gap:8px;max-width:46rem}
.doc ul li{padding-left:1.4em;position:relative}
.doc ul li::before{content:"";position:absolute;left:0;top:.8em;width:.7em;height:4px;background:var(--o)}
.doc .ph{background:var(--p2);padding:0 4px;font-weight:600}
.toc{border:var(--line) solid var(--g);padding:18px 22px;max-width:46rem;display:grid;gap:2px;background:var(--p)}
.toc a{display:inline-flex;align-items:center;min-height:44px}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ---------- страницы-кейсы (/bot/, /automation/) ---------- */
.demo-bar{background:var(--p2);border-bottom:var(--line) solid var(--g);padding:10px 0;font-size:1rem;line-height:1.4}
.demo-bar p{display:flex;gap:12px;align-items:baseline}
.demo-bar p::before{content:"";flex:none;width:12px;height:12px;background:var(--o);align-self:center}
.case-hero{padding:clamp(28px,5vw,56px) 0 clamp(40px,6vw,72px)}
.case-hero .wrap{display:grid;gap:20px;justify-items:start}
.case-hero h1{font-size:clamp(2rem,7.5vw,4.5rem);max-width:16em}
.lead{font-size:1.1875rem;max-width:42em;color:var(--mute)}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.stack li{border:3px solid var(--g);padding:4px 14px;font-weight:600;font-size:1rem;line-height:1.4;background:var(--p)}
.case-sec{padding:clamp(40px,6vw,72px) 0;border-top:var(--line) solid var(--g)}
.case-sec .wrap{display:grid;gap:24px}
.case-sec .sec-head{margin-bottom:0}
.case-sec .sec-head h2{font-size:clamp(1.75rem,5vw,3rem)}
.case-sec h3{font-size:1.375rem}
.note{background:var(--p2);border:var(--line) solid var(--g);padding:16px 18px;max-width:46rem}
.facts{display:grid;gap:12px;max-width:46rem}
.facts li{padding-left:1.4em;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.8em;width:.7em;height:4px;background:var(--o)}
code{font:600 .9em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--p2);padding:1px 6px;overflow-wrap:anywhere}
.steps{counter-reset:s;max-width:54rem;border:var(--line) solid var(--g);background:var(--p)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:14px 16px;border-top:2px solid var(--g)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;background:var(--g);color:var(--p);font:700 1.375rem/1 var(--display)}
.steps b{display:block;font-weight:600}
.steps span{color:var(--mute)}

.shots-group{display:grid;gap:14px}
.shots{margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 12px;display:grid;grid-auto-flow:column;grid-auto-columns:min(68vw,300px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);-webkit-overflow-scrolling:touch}
.shots>li{scroll-snap-align:start;min-width:0}
.shot{margin:0}
.shot button{display:block;width:100%;padding:0;border:3px solid var(--g);border-radius:0;background:var(--p);cursor:zoom-in;overflow:hidden;font:inherit;color:inherit}
.shot button:hover{border-color:var(--o)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:600/1298}
.shot figcaption{margin-top:8px;font-size:.9375rem;line-height:1.35;color:var(--mute)}
.shot figcaption b{color:var(--g);font-weight:600}

.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;color:var(--p)}
.lightbox::backdrop{background:rgba(28,29,34,.96)}
.lb{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;height:100dvh;padding:12px;gap:10px}
.lb-img{min-height:0;display:grid;place-items:center;width:100%}
.lb-img img{max-width:100%;max-height:calc(100dvh - 150px);object-fit:contain;background:#fff}
.lb-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;padding-bottom:4px}
.lb-cap{flex:1 1 100%;text-align:center;font-size:1rem;line-height:1.35}
.lb-btn{min-width:48px;min-height:48px;padding:0 18px;border:3px solid var(--p);border-radius:0;background:transparent;color:var(--p);font:700 1.0625rem var(--display);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.lb-btn:hover{background:var(--p);color:var(--g)}
.lightbox :focus-visible{outline-color:var(--o)}

.fig-scroll{margin:0;display:grid;gap:10px}
.fig-box{overflow-x:auto;border:var(--line) solid var(--g);background:#fff;-webkit-overflow-scrolling:touch}
.fig-box img{display:block;width:2000px;max-width:none;height:auto}
.fig-scroll figcaption{color:var(--mute)}
.tap{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

.flow{display:grid;gap:34px}
.flow>li{position:relative;border:var(--line) solid var(--g);background:var(--p);padding:16px 18px;display:grid;gap:6px;align-content:start}
.flow>li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-27px;width:4px;height:20px;background:var(--o);transform:translateX(-50%)}
.flow h3{font-size:1.25rem}
.flow p{color:var(--mute)}
.flow .split{display:grid;gap:10px}
.flow .split div{border:3px solid var(--g);padding:10px 12px;background:#fff}
.flow .split b{display:block;font-weight:600}
.flow .split span{display:block;color:var(--mute);line-height:1.4}

.demo-wrap{display:grid;gap:28px;align-items:start}
.dform{background:var(--p);border:var(--line) solid var(--g);padding:22px;display:grid;gap:4px;max-width:34rem}
.dform h3{margin-bottom:8px}
.dform label{display:block;font-weight:600;font-size:1rem;margin:12px 0 4px}
.dform .opt{font-weight:400;color:var(--mute)}
.dform input[type=text],.dform input[type=tel],.dform textarea{width:100%;padding:12px;font:inherit;color:var(--g);background:#fff;border:3px solid var(--g);border-radius:0}
.dform textarea{min-height:92px;resize:vertical}
.dform input:focus,.dform textarea:focus{outline:3px solid var(--g);outline-offset:3px}
.dform [aria-invalid=true]{box-shadow:inset 8px 0 0 var(--o)}
.dform .ferr{margin-top:4px}
.dform .consent{margin-top:10px;font-weight:400;font-size:1rem}
.dform .consent input{margin:0;width:28px;height:28px;flex:none}
.dbtn{margin-top:14px;min-height:52px;padding:0 24px;font:700 1.0625rem var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--g);background:var(--o);border:3px solid var(--o);border-radius:0;cursor:pointer}
.dbtn:hover{background:var(--g);color:var(--p);border-color:var(--g)}
.dform .hint{font-size:.9375rem;color:var(--mute);margin-top:10px}
.mock{display:grid;gap:18px;min-width:0}
.mock-label{font-weight:600;color:var(--g);border-left:6px solid var(--o);padding-left:10px}
.tg{background:var(--p2);border:3px solid var(--g);padding:16px;min-width:0}
.tg-head{font-weight:600;margin-bottom:10px}
.tg-msg{background:#fff;border:3px solid var(--g);padding:12px 14px;max-width:26rem;white-space:pre-wrap;overflow-wrap:anywhere}
.sheet{border:3px solid var(--g);background:#fff;overflow-x:auto;min-width:0}
.sheet table{border-collapse:collapse;font-size:.9375rem;min-width:640px;width:100%}
.sheet th,.sheet td{border:2px solid var(--g);padding:8px 10px;text-align:left;vertical-align:top;overflow-wrap:break-word}
.sheet th{white-space:nowrap;background:var(--p2);font-weight:600}
.sheet td.n{background:var(--p2);text-align:center;width:2.5em}
.sheet tr.new td:not(.n){background:#fff}
.sheet tr.new td:first-child{box-shadow:inset 6px 0 0 var(--o)}
.mock-note{font-weight:600;border-left:6px solid var(--o);padding:4px 0 4px 12px}
.mock-spam{border:3px solid var(--g);padding:16px;background:var(--p)}
.mock-cap{color:var(--mute);margin-top:8px}
.mock-block{display:grid;gap:8px;min-width:0}
.mock-empty{border:3px solid var(--g);padding:24px;color:var(--mute)}
.code-link{color:var(--mute)}

@media (min-width:560px){
  .shots{margin:0;padding:0;overflow:visible;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));scroll-snap-type:none}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .who{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:720px){
  .site-head .wrap{grid-template-columns:auto 1fr auto;padding-top:12px;padding-bottom:12px;gap:0 36px}
  .nav{grid-column:2;grid-row:1;gap:0 28px}
  .head-cta{grid-column:3}
  .head-cta .lg{display:inline-flex}
  .head-cta .lg:not(.btn){display:inline}
  .svc-row{grid-template-columns:minmax(0,1fr) 15rem;align-items:baseline}
  .svc-price{flex-direction:column;align-items:flex-start;gap:0}
}
@media (min-width:1000px){
  .hero .wrap{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end}
  .hero h1{font-size:clamp(2.5rem,6vw,4.75rem)}
  .dirs li{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0 40px;align-items:baseline}
  .works{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stages{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stages li{grid-template-columns:1fr;gap:14px;padding:20px}
  .stages li::before{grid-row:auto}
  .stages p{grid-column:1;margin-top:0}
  .two{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
  .contact-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .site-foot .wrap{grid-template-columns:auto 1fr;gap:28px 64px;align-items:start}
  .site-foot .foot-main{grid-column:2}
  .shots{gap:24px}
  .flow{grid-template-columns:1fr 1fr 1.25fr 1fr;gap:44px}
  .flow>li:not(:last-child)::after{left:auto;right:-35px;bottom:auto;top:30px;width:26px;height:4px;transform:none}
  .demo-wrap{grid-template-columns:minmax(0,34rem) minmax(0,1fr);gap:48px}
}
@media (min-width:900px){
  .lb{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:0 20px;padding:12px 24px}
  .lb-img{grid-column:2;grid-row:1;width:auto;height:calc(100dvh - 24px)}
  .lb-img img{height:calc(100dvh - 24px);max-height:1688px;width:auto;max-width:100%}
  .lb-bar{display:contents}
  .lb-cap{grid-column:3;grid-row:1;align-self:end;margin-bottom:24px;flex:none;text-align:left;max-width:20rem}
  #lb-prev{grid-column:1;grid-row:1;justify-self:end}
  #lb-next{grid-column:3;grid-row:1;justify-self:start}
  #lb-close{grid-column:3;grid-row:1;align-self:start;justify-self:start;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:active{transform:none}}
.contacts-solo{max-width:36rem}
.promo-terms,.svc-note .promo-terms{font-size:.875rem;line-height:1.45;font-weight:400}
.promo-box p.promo-terms{color:var(--mute)}