/* GENERATED - do not edit. Copy of site/assets/style.css, made by
   sync-from-site.ps1. Edit the site stylesheet and run that script. */

/* ===========================================================================
   Ternit — shared stylesheet, corporate direction (2026-09).

   Light-first: an institutional navy on cool paper, with amber kept for one
   job only — a number that was actually measured. Both themes are authored by
   hand, never a mechanical inversion.

   Golos Text (Paratype) and JetBrains Mono, both SIL OFL and both self-hosted:
   the site makes no third-party request at all, exactly like the products it
   sells. Fonts live in assets/fonts/ — see fetch-fonts.ps1 there.
   =========================================================================== */

/* ── faces ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/golos-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/golos-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/jbm-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/jbm-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  --sans: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --page: 72rem;
  --gut: clamp(1.15rem, 3.5vw, 2.75rem);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

:root, :root[data-theme="light"] {
  --bg:       #FFFFFF;
  --bg-2:     #F4F6F9;
  --bg-deep:  #0E2233;
  --on-deep:  #E8EEF3;

  --ink:      #0E1B26;
  --ink-2:    #4F6070;
  --ink-3:    #7C8B99;

  --line:     #E2E8EE;
  --line-2:   #C8D3DC;

  --brand:    #10466A;
  --brand-2:  #1B6A97;
  --brand-bg: #EAF1F6;
  --on-brand: #FFFFFF;

  --signal:   #8F5A0C;
  --signal-bg:#FAF2E4;
  --ok:       #1F6B4A;

  --shadow:   0 14px 30px -24px rgba(14, 34, 51, .55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #0A1219;
    --bg-2:     #0F1A23;
    --bg-deep:  #E8EEF3;
    --on-deep:  #0A1219;

    --ink:      #E7EEF4;
    --ink-2:    #9DAEBC;
    --ink-3:    #748695;

    --line:     #1B2833;
    --line-2:   #2A3A47;

    --brand:    #5EA9D2;
    --brand-2:  #8AC6E8;
    --brand-bg: #10222F;
    --on-brand: #07141D;

    --signal:   #DFA75A;
    --signal-bg:#231C10;
    --ok:       #58B98C;

    --shadow:   0 16px 34px -26px rgba(0, 0, 0, .9);
  }
}
:root[data-theme="dark"] {
  --bg:       #0A1219;
  --bg-2:     #0F1A23;
  --bg-deep:  #E8EEF3;
  --on-deep:  #0A1219;

  --ink:      #E7EEF4;
  --ink-2:    #9DAEBC;
  --ink-3:    #748695;

  --line:     #1B2833;
  --line-2:   #2A3A47;

  --brand:    #5EA9D2;
  --brand-2:  #8AC6E8;
  --brand-bg: #10222F;
  --on-brand: #07141D;

  --signal:   #DFA75A;
  --signal-bg:#231C10;
  --ok:       #58B98C;

  --shadow:   0 16px 34px -26px rgba(0, 0, 0, .9);
}

/* ── base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -.018em; }
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-2); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg); color: var(--ink); padding: .75rem 1rem; border: 1px solid var(--line-2); }
.skip:focus { left: .75rem; top: .75rem; }

.page { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gut); }

.lab {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── header ─────────────────────────────────────────────────────────────── */

.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.top .page {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1rem clamp(1rem, 3vw, 2.25rem); min-height: 4.5rem; padding-block: .7rem;
}

.logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.logo svg { width: 2rem; height: 2rem; flex: none; }
.logo b { font-size: 1.125rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; display: block; }
.logo i { font-style: normal; font-size: .75rem; color: var(--ink-3); display: block; line-height: 1.2; }
@media (max-width: 30rem) { .logo i { display: none; } }

.menu { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.85rem); flex-wrap: wrap; }
.menu a {
  color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 500;
  padding-block: .3rem; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--ink); }
.menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

.top-act { display: flex; align-items: center; gap: .55rem; }

.tgl {
  width: 2.15rem; height: 2.15rem; display: grid; place-items: center; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: 4px;
  color: var(--ink-2); cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tgl:hover { color: var(--ink); border-color: var(--ink-3); }
.tgl svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tgl .i-moon { display: none; }
:root[data-theme="dark"] .tgl .i-moon { display: block; }
:root[data-theme="dark"] .tgl .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tgl .i-moon { display: block; }
  :root:not([data-theme="light"]) .tgl .i-sun { display: none; }
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.25rem; border-radius: 4px; border: 1px solid transparent;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn-solid { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-solid:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }
.btn-line { border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { padding: .5rem .9rem; font-size: .875rem; }
@media (max-width: 46rem) { .btn-top { display: none; } }

/* ── hero (home) ────────────────────────────────────────────────────────── */

.hero { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.hero .page {
  display: grid; gap: clamp(2.25rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6.5vw, 5rem); align-items: center;
}
@media (min-width: 62rem) { .hero .page { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.05rem); line-height: 1.08; font-weight: 700; margin-top: 1.1rem; }
.hero-lede { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--ink-2); max-width: 40ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.75rem; font-size: .875rem; color: var(--ink-2); }
.hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-meta svg { width: .95rem; height: .95rem; flex: none; stroke: var(--ok); fill: none; stroke-width: 2.2; }

/* the perimeter diagram — what the customer keeps inside their own network */
.contour { background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.contour-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.contour-head .num { font-size: .75rem; color: var(--ink-3); }
.contour-body { padding: 1.35rem 1.25rem 1.25rem; }
.frame { position: relative; border: 1px dashed var(--line-2); border-radius: 5px; padding: 1.1rem; }
.frame > .lab { position: absolute; top: -.6rem; left: .9rem; background: var(--bg); padding-inline: .45rem; color: var(--ink-3); }
.blocks { display: grid; gap: .6rem; }
.block { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.block-ic {
  width: 1.9rem; height: 1.9rem; flex: none; border-radius: 4px; display: grid; place-items: center;
  background: var(--brand-bg); color: var(--brand); font-family: var(--mono); font-size: .8125rem; font-weight: 700;
}
.block b { display: block; font-size: .9375rem; font-weight: 600; }
.block small { color: var(--ink-3); font-size: .8125rem; }
.cut {
  display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2);
}
.cut .x {
  width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink-3); font-size: .75rem;
}

/* ── page head (inner pages) ────────────────────────────────────────────── */

.head { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.head .page { padding-block: clamp(2.75rem, 6vw, 4.25rem); }
.head h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.1; font-weight: 700; margin-top: 1rem; max-width: 24ch; }
.head p { margin-top: 1.15rem; font-size: 1.0625rem; color: var(--ink-2); max-width: 52ch; }

/* ── figures strip ──────────────────────────────────────────────────────── */

.figures { border-bottom: 1px solid var(--line); }
.figures .page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding-inline: 0; }
@media (min-width: 56rem) { .figures .page { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fig { padding: 1.6rem clamp(1.15rem, 3vw, 2.25rem); position: relative; margin: 0; }
.fig + .fig::before { content: ""; position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--line); }
.fig dt { font-size: .8125rem; color: var(--ink-3); margin-bottom: .45rem; }
.fig dd {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.15; color: var(--signal);
}
.fig dd small { display: block; margin-top: .4rem; font-family: var(--sans); font-size: .8125rem; font-weight: 400; color: var(--ink-2); }

/* ── sections ───────────────────────────────────────────────────────────── */

.sec { padding-block: clamp(3rem, 6vw, 4.75rem); border-bottom: 1px solid var(--line); }
.sec-2 { background: var(--bg-2); }
.sec-last { border-bottom: 0; }
.sec-head { display: grid; gap: .9rem; max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.15; font-weight: 700; }
.sec-head p { color: var(--ink-2); max-width: 54ch; }
.sec-foot { margin-top: 2rem; }

/* ── product cards ──────────────────────────────────────────────────────── */

.line { display: grid; gap: 1.1rem; }
@media (min-width: 58rem) { .line { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.item {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.item:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.item-head { padding: 1.2rem 1.35rem 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.item-head h3 { font-size: 1.1875rem; font-weight: 700; }
.tagx {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-bg); border-radius: 3px; padding: .3em .6em; white-space: nowrap;
}
.item-body { padding: .85rem 1.35rem 1.25rem; color: var(--ink-2); font-size: .9375rem; }
.item-spec { margin-top: auto; border-top: 1px solid var(--line); }
.item-spec div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 1.35rem; font-size: .875rem; color: var(--ink-3); }
.item-spec div + div { border-top: 1px solid var(--line); }
.item-spec b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }

/* ── four guarantees ────────────────────────────────────────────────────── */

.guards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
@media (min-width: 50rem) { .guards { grid-template-columns: repeat(2, 1fr); } }
.guard { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.1rem); display: grid; gap: .6rem; align-content: start; }
.sec-2 .guard { background: var(--bg-2); }
.guard h3 { font-size: 1.0625rem; font-weight: 700; }
.guard p { color: var(--ink-2); font-size: .9375rem; max-width: 46ch; }
.guard-ic {
  width: 2.1rem; height: 2.1rem; border-radius: 5px; display: grid; place-items: center;
  background: var(--brand-bg); color: var(--brand); margin-bottom: .3rem;
}
.guard-ic svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── delivery steps (a real sequence, hence numbered) ───────────────────── */

.steps { display: grid; gap: 1.1rem; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding-top: 1.1rem; border-top: 2px solid var(--brand); display: grid; gap: .5rem; align-content: start; }
.step .n { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--brand); }
.step h3 { font-size: 1rem; font-weight: 700; }
.step p { color: var(--ink-2); font-size: .9375rem; }

/* ── service rows ───────────────────────────────────────────────────────── */

.svc { border-top: 1px solid var(--line); }
.svc-row { display: grid; gap: .45rem; padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
@media (min-width: 50rem) { .svc-row { grid-template-columns: 18rem minmax(0, 1fr); gap: 2.25rem; align-items: baseline; } }
.svc-row h3 { font-size: 1rem; font-weight: 600; }
.svc-row p { color: var(--ink-2); font-size: .9375rem; max-width: 62ch; }

/* ── long product blocks (products page) ────────────────────────────────── */

.slab { padding-block: clamp(2.75rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.slab-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 58rem) { .slab-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.slab-head { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-bottom: 1rem; }
.slab-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
.slab-lede { font-size: 1.0625rem; max-width: 52ch; }
.slab-body { display: grid; gap: 1rem; margin-top: 1.1rem; }
.slab-body p { color: var(--ink-2); max-width: 60ch; }

.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 0; }
.fact { background: var(--bg); padding: 1.1rem 1.35rem; }
.fact dt { font-size: .8125rem; color: var(--ink-3); margin-bottom: .35rem; }
.fact dd {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: 1.1875rem; color: var(--signal);
}
.fact dd small { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .8125rem; font-weight: 400; color: var(--ink-2); }

/* ── prose, requisites, plain lists ─────────────────────────────────────── */

.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.prose { display: grid; gap: 1.1rem; }
.prose p { color: var(--ink-2); max-width: 60ch; }
.prose strong { color: var(--ink); font-weight: 600; }

.reqs { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 0; align-self: start; }
.reqs > div { display: grid; gap: .25rem; padding: .95rem 1.25rem; border-bottom: 1px solid var(--line); }
@media (min-width: 30rem) { .reqs > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; } }
.reqs > div:last-child { border-bottom: 0; }
.reqs dt { font-size: .8125rem; color: var(--ink-3); }
.reqs dd { margin: 0; font-size: .9375rem; }

.small { margin-top: 1.1rem; font-size: .875rem; color: var(--ink-3); max-width: 50ch; }

.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 46rem; }
.links li { color: var(--ink-2); font-size: .9375rem; }
.links a { font-weight: 600; text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* ── contact band ───────────────────────────────────────────────────────── */

.cta {
  background: var(--bg-deep); color: var(--on-deep); border-radius: 6px;
  padding: clamp(1.9rem, 4vw, 3rem); display: grid; gap: 1.75rem; align-items: center;
}
@media (min-width: 54rem) { .cta { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.cta h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; margin-top: .7rem; }
.cta p { margin-top: .8rem; color: color-mix(in srgb, var(--on-deep) 78%, transparent); max-width: 52ch; }
.cta .lab { color: color-mix(in srgb, var(--on-deep) 62%, transparent); }
.cta-act { display: grid; gap: .85rem; justify-items: start; }
.cta .btn-solid { background: var(--on-deep); border-color: var(--on-deep); color: var(--bg-deep); }
.cta .btn-solid:hover { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.cta .mailto {
  font-family: var(--mono); font-size: .9375rem; text-decoration: none;
  color: color-mix(in srgb, var(--on-deep) 85%, transparent); border-bottom: 1px solid currentColor;
}
.cta .mailto:hover { color: var(--on-deep); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { padding-block: clamp(2.5rem, 5vw, 3.25rem) 2rem; font-size: .9375rem; color: var(--ink-2); }
.foot-grid {
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--line);
}
.foot-col h4 {
  margin-bottom: .9rem; font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot-col a { color: var(--ink-2); text-decoration: none; }
.foot-col a:hover { color: var(--ink); }
.foot-about { max-width: 30ch; }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.4rem; color: var(--ink-3); font-size: .8125rem;
}

/* ── motion and print ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

@media print {
  .top, .tgl, .cta-act { display: none; }
  body { background: #FFFFFF; color: #000000; font-size: 12pt; }
  .hero, .head, .sec-2 { background: #FFFFFF; }
}