/* ВПРОД · Платформа — дизайн-система «инженерный терминал», paper-режим */

@font-face{
  font-family:"JetBrains Mono";
  src:url("/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/static/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

:root{
  --bg:#F4F1E8;--surface:#FAF7EE;--ink:#1E1B14;--muted:#6A6250;
  --line:#D9D2C0;--accent:#C24E0A;--accent-ink:#993D05;--ok:#3E6B2E;--err:#A32C1C;
  --term-bg:#171310;--term-surface:#201B15;--term-ink:#EDE4D2;--term-muted:#8A7F68;
  --term-line:#332C22;--term-accent:#FFB454;--term-ok:#9CCB72;
  --font:"JetBrains Mono","SFMono-Regular","Cascadia Code",Consolas,ui-monospace,monospace;
  --fs-micro:12px;--fs-small:14px;--fs-body:15px;--fs-h3:18px;--fs-h2:24px;--fs-h1:32px;
  --fs-display:clamp(2rem,1.2rem + 3.4vw,3.4rem);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:20px;--sp-5:32px;--sp-6:48px;--sp-7:80px;
  --measure:72ch;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:var(--fs-body);line-height:1.6;background:var(--bg);color:var(--ink);
  font-variant-ligatures:contextual;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a,.card p.descr,.row-i,.conf li,.meta,td,li{overflow-wrap:anywhere;word-break:break-word}
::selection{background:var(--ink);color:var(--bg)}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{background:var(--ink);color:var(--bg);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
mark{background:var(--accent);color:#FFF8EC;padding:0 .25ch}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small)}

/* labels / buttons / frames */
.lbl{font-size:var(--fs-small);letter-spacing:.05em;color:var(--accent-ink);text-transform:lowercase}
.lbl::before{content:"## ";color:var(--muted)}
.btn{display:inline-block;border:1px solid var(--ink);padding:12px 22px;font-family:var(--font);
  font-size:var(--fs-body);font-weight:700;cursor:pointer;background:var(--ink);color:var(--bg);
  text-decoration:none;min-height:44px}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#FFF8EC;transition:none}
.btn.ghost{background:transparent;color:var(--ink);font-weight:500}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.sm{padding:6px 12px;font-size:var(--fs-small);min-height:auto}
.frame{border:1px solid var(--line);position:relative;background:var(--surface)}
.frame>.frame-t{position:absolute;top:-11px;left:14px;background:var(--surface);padding:0 1ch;
  font-size:var(--fs-small);color:var(--muted);letter-spacing:.05em}
.frame>.frame-t::before{content:"─ "}
.frame>.frame-t::after{content:" ─"}
.frame.hot{border-color:var(--accent)}
.frame.hot>.frame-t{color:var(--accent-ink)}

/* header */
header.site{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:var(--sp-4);padding:14px 0}
.brand{font-weight:800;font-size:var(--fs-h3);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{background:none;color:var(--accent-ink)}
.brand .tilde{color:var(--accent)}
.nav-links{display:flex;gap:var(--sp-4);margin-left:auto;flex-wrap:wrap;align-items:center}
.nav-links a{font-size:var(--fs-small);color:var(--ink);text-decoration:none}
.nav-links a::before{content:"/";color:var(--muted)}
.nav-links a.plain::before{content:""}
.nav .btn{padding:10px 16px;font-size:var(--fs-small);min-height:auto}
.menu{margin-left:auto;position:relative;display:none}
.menu summary{list-style:none;cursor:pointer;font-size:22px;line-height:1;padding:6px 10px;
  border:1px solid var(--ink);min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--ink);
  display:flex;flex-direction:column;min-width:220px;z-index:20;box-shadow:4px 4px 0 rgba(30,27,20,.12)}
.menu-panel a{padding:12px 16px;font-size:var(--fs-body);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.menu-panel a:last-child{border-bottom:none}
.menu-panel a::before{content:""}
.menu-panel a:hover{background:var(--ink);color:var(--bg)}
@media(max-width:900px){.nav-links,.cta-header{display:none}.menu{display:block}.nav{justify-content:space-between}}

/* flash */
.flash{border:1px solid var(--line);background:var(--surface);padding:10px 16px;margin:var(--sp-4) 0 0;
  font-size:var(--fs-small)}
.flash.ok{border-color:var(--ok);color:var(--ok)}
.flash.err{border-color:var(--err);color:var(--err)}

/* page scaffolding */
.page{padding:var(--sp-6) 0 var(--sp-7)}
.page-head{margin:var(--sp-5) 0 var(--sp-6);max-width:var(--measure)}
.page-head h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.01em;line-height:1.2;
  margin-top:var(--sp-2);text-wrap:balance}
.page-head p{color:var(--muted);margin-top:var(--sp-3)}
section.land{padding:var(--sp-7) 0;border-top:1px solid var(--line)}
.sec-head{margin-bottom:var(--sp-6);max-width:var(--measure)}
.sec-head h2{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.01em;line-height:1.2;
  margin-top:var(--sp-2);text-wrap:balance}
.sec-head p{color:var(--muted);margin-top:var(--sp-3)}

/* cards / grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.card{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.card h3{font-size:var(--fs-h3);font-weight:700;line-height:1.35}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{background:var(--ink);color:var(--bg)}
.card .meta{font-size:var(--fs-small);color:var(--muted)}
.card .price{font-weight:800;font-size:var(--fs-h3)}
.card .price small{color:var(--accent-ink);font-weight:500;font-size:var(--fs-small)}
.card p.descr{font-size:var(--fs-small);color:var(--muted);flex:1}

/* chips (категории) */
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.chip{border:1px solid var(--line);padding:6px 12px;font-size:var(--fs-small);text-decoration:none;
  color:var(--ink);background:var(--surface)}
.chip:hover{background:var(--ink);color:var(--bg)}
.chip.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.chip .n{color:var(--accent-ink);font-weight:700}
.chip.on .n{color:var(--term-accent)}

/* badge-статусы */
.badge{display:inline-block;border:1px solid var(--line);padding:1px 8px;font-size:var(--fs-micro);
  letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.badge.approved,.badge.accepted,.badge.done,.badge.closed{border-color:var(--ok);color:var(--ok)}
.badge.pending,.badge.new,.badge.open{border-color:var(--accent);color:var(--accent-ink)}
.badge.rejected,.badge.declined,.badge.cancelled{border-color:var(--err);color:var(--err)}
.badge.in_progress,.badge.delivered{border-color:var(--ink);color:var(--ink)}

/* forms */
form.stack{display:flex;flex-direction:column;gap:var(--sp-3);max-width:64ch}
label.f{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);color:var(--muted)}
label.f b{color:var(--ink);font-weight:700}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  font-family:var(--font);font-size:var(--fs-body);padding:10px 12px;border:1px solid var(--ink);
  background:#FFFDF6;color:var(--ink);border-radius:0;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.hint{font-size:var(--fs-micro);color:var(--muted)}

/* config-dump списки */
.conf{list-style:none;max-width:var(--measure)}
.conf li{display:grid;grid-template-columns:minmax(11ch,22ch) 1fr;gap:2ch;padding:10px 0;
  border-top:1px dashed var(--line);font-size:var(--fs-small)}
.conf li:last-child{border-bottom:1px dashed var(--line)}
.conf .k{color:var(--accent-ink);white-space:nowrap;overflow:hidden}
.conf .k::after{content:" ........................................";color:var(--line)}
@media(max-width:560px){.conf li{grid-template-columns:1fr}.conf .k::after{content:""}}

/* таблицы-списки (заказы, отклики) */
.rows{border-top:1px solid var(--line)}
.row-i{display:flex;gap:var(--sp-4);align-items:baseline;flex-wrap:wrap;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.row-i .grow{flex:1;min-width:24ch}
.row-i b{font-size:var(--fs-body)}
.row-i form{display:inline}

/* терминальные блоки */
.term{background:var(--term-bg);color:var(--term-ink);border:1px solid var(--term-line);
  font-size:var(--fs-small);line-height:1.75;overflow-x:auto}
.term-bar{display:flex;gap:1ch;padding:8px 14px;border-bottom:1px solid var(--term-line);
  color:var(--term-muted);font-size:var(--fs-micro);letter-spacing:.05em}
.term-bar::before{content:"● ● ●";color:var(--term-line);letter-spacing:.2em}
.term-body{padding:14px 16px;white-space:pre;min-width:min-content}
.term .p{color:var(--term-accent)}
.term .c{color:var(--term-muted)}
.term .ok{color:var(--term-ok)}
.term .hl{color:var(--term-accent);font-weight:700}

/* hero лендинга */
.hero{padding:var(--sp-7) 0 var(--sp-6);
  background-image:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(30,27,20,.045) 27px 28px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-6);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.kicker{font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--sp-4)}
.kicker b{color:var(--accent-ink);font-weight:500}
h1.display{font-size:var(--fs-display);line-height:1.12;font-weight:800;letter-spacing:-.02em;
  text-wrap:balance;margin-bottom:var(--sp-4)}
.cursor{display:inline-block;width:.55ch;background:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cursor{animation:none}}
.hero-sub{max-width:56ch;margin-bottom:var(--sp-4)}
.hero-sub em{font-style:normal;color:var(--accent-ink)}
.hero-props{list-style:none;margin-bottom:var(--sp-5);color:var(--muted);font-size:var(--fs-small)}
.hero-props li::before{content:"+ ";color:var(--ok);font-weight:700}
.cta-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}

/* процесс-шаги на тёмном */
.steps{list-style:none;counter-reset:st;max-width:840px}
.steps li{counter-increment:st;display:grid;grid-template-columns:9ch 1fr;gap:var(--sp-4);
  padding:var(--sp-4) 0;border-top:1px solid var(--term-line)}
.steps li::before{content:"[" counter(st) "/4]";color:var(--term-accent);font-weight:700;white-space:nowrap}
.steps h3{font-size:var(--fs-body);font-weight:700;color:var(--term-ink)}
.steps p{color:var(--term-muted);font-size:var(--fs-small);margin-top:var(--sp-1)}
section.dark{background:var(--term-bg);border-top:1px solid var(--term-line)}
section.dark .lbl{color:var(--term-accent)}
section.dark .lbl::before{color:var(--term-muted)}
section.dark h2{color:var(--term-ink)}
section.dark .sec-head p{color:var(--term-muted)}

/* ── forge motif (метафора «кузница») ─────────────────────────────── */
.forge-scene{padding-bottom:var(--sp-3)}
.forge-svg-wrap{padding:10px 12px 2px}
.forge-svg-wrap svg{width:100%;height:auto;display:block}
.forge-readout{padding:2px 16px 14px;font-size:var(--fs-small);line-height:1.75;white-space:pre;overflow-x:auto}
.forge-readout .p{color:var(--term-accent)}
.forge-readout .c{color:var(--term-muted)}
.forge-readout .ok{color:var(--term-ok)}
.forge-readout .hl{color:var(--term-accent);font-weight:700}
.brand .anvil{width:1.15em;height:1.15em;vertical-align:-3px;margin-right:5px}
.brand .anvil path{fill:var(--ink)}
.brand .anvil .billet{fill:var(--accent)}
.brand:hover .anvil path{fill:var(--bg)}
.spark-rule{display:flex;align-items:center;gap:14px;margin:0 0 var(--sp-2)}
.spark-rule::before,.spark-rule::after{content:"";flex:1;height:1px;background:var(--line)}
.spark-rule svg{width:16px;height:16px;flex:none}
.spark-rule svg path{fill:var(--accent)}

/* forge animation — удар молота: дуга вокруг точки хвата (352,93 в координатах viewBox).
   Молот нарисован в позе удара (0deg — боёк плашмя на бруске, рукоять почти горизонтальна);
   положительный угол = замах. Цикл 1.4s: держим замах → короткая антиципация вверх →
   резкое ускоряющееся падение → контакт → отскок → микро-осадка → медленный подъём. */
.forge-scene .hammer-swing{transform-box:view-box;transform-origin:352px 93px;animation:forge-swing 1.4s infinite}
@keyframes forge-swing{
  0%{transform:rotate(36deg);animation-timing-function:linear}
  26%{transform:rotate(36deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}    /* держим замах */
  34%{transform:rotate(41deg);animation-timing-function:cubic-bezier(.85,0,1,.4)}   /* антиципация: чуть выше */
  43%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,.6,.4,1)}     /* падение с разгоном → УДАР */
  48%{transform:rotate(8deg);animation-timing-function:cubic-bezier(.5,0,.7,.4)}    /* отскок от металла */
  53%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.3,0,.2,1)}     /* микро-осадка */
  100%{transform:rotate(36deg)}                                                     /* плавный подъём */
}
.forge-scene .sparks{transform-box:view-box;transform-origin:258px 120px;opacity:0;animation:forge-sparks 1.4s ease-out infinite}
@keyframes forge-sparks{
  0%,41.5%{opacity:0;transform:scale(.4)}
  43%{opacity:1;transform:scale(.75)}               /* брызги в момент контакта */
  50%{opacity:.95;transform:scale(1.15)}
  68%,100%{opacity:0;transform:scale(1.5)}
}
.forge-scene .impact-flash{animation:forge-flash 1.4s linear infinite}
@keyframes forge-flash{
  0%,42%{opacity:0}
  43.5%{opacity:.9}                                 /* вспышка под бойком */
  48%{opacity:.25}
  54%,100%{opacity:0}
}
.forge-scene .anvil-g{animation:forge-jolt 1.4s linear infinite}
@keyframes forge-jolt{
  0%,42.5%{transform:translateY(0)}
  44.5%{transform:translateY(1.6px)}                /* наковальня вздрагивает от удара */
  49%{transform:translateY(0)}
  100%{transform:translateY(0)}
}
.forge-scene .billet-hot{animation:forge-heat 1.4s ease-in-out infinite}
@keyframes forge-heat{
  0%,40%{opacity:.88}
  43%{opacity:1}                                    /* металл вспыхивает от удара */
  62%{opacity:.85}
  100%{opacity:.88}
}
.forge-scene .coals{animation:forge-coals 3.1s ease-in-out infinite}
@keyframes forge-coals{0%,100%{opacity:.07}50%{opacity:.16}}
@media(prefers-reduced-motion:reduce){
  .forge-scene .hammer-swing,.forge-scene .sparks,.forge-scene .impact-flash,
  .forge-scene .anvil-g,.forge-scene .billet-hot,.forge-scene .coals{animation:none}
  .forge-scene .sparks{opacity:1}                   /* статичный кадр: боёк на бруске, искры видны */
}

/* express landing — крупный hero */
.hero-xl{padding:var(--sp-7) 0 var(--sp-7)}
.hero-xl .kicker{font-size:var(--fs-body);margin-bottom:var(--sp-5)}
.hero-xl .display{font-size:clamp(2.7rem,1.4rem + 7.2vw,6.6rem);line-height:1.0;letter-spacing:-.03em;margin-bottom:var(--sp-5)}
.hero-xl .hero-sub{font-size:clamp(1.05rem,0.95rem + 0.7vw,1.5rem);line-height:1.5;margin-bottom:var(--sp-5)}
.hero-xl .cta-row .btn{padding:16px 30px;font-size:var(--fs-h3)}
@media(max-width:560px){.hero-xl .cta-row .btn{font-size:var(--fs-body);padding:14px 22px}}

/* express landing — тарифные карточки */
.tariffs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);align-items:stretch}
@media(max-width:900px){.tariffs{grid-template-columns:1fr}}
.tariff{display:flex;flex-direction:column;padding:var(--sp-5) var(--sp-4) var(--sp-4)}
.tariff .t-price{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;line-height:1}
.tariff .t-days{color:var(--accent-ink);font-weight:700;font-size:var(--fs-body);margin:6px 0 var(--sp-3)}
.tariff h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3;margin-bottom:var(--sp-2)}
.tariff .descr{font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--sp-3)}
.tariff ul{list-style:none;font-size:var(--fs-small);flex:1;margin-bottom:var(--sp-4)}
.tariff li{padding:4px 0;border-top:1px dashed var(--line)}
.tariff li::before{content:"+ ";color:var(--ok);font-weight:700}
.tariff.feat{border-color:var(--ink);background:#FFFDF6}
.tariff.feat>.frame-t{background:#FFFDF6;color:var(--accent-ink);font-weight:700}
.tariff .btn{width:100%;text-align:center}

footer.site{padding:var(--sp-5) 0;font-size:var(--fs-small);color:var(--muted);border-top:1px solid var(--line);
  margin-top:var(--sp-7)}
footer.site .row{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
footer.site .sig::before{content:"// "}