/* ===========================================================================
   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("/assets/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("/assets/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("/assets/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("/assets/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 { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.05rem); line-height: 1.08; font-weight: 700; margin-top: 1.1rem; max-width: 24ch; }
.hero-lede { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--ink-2); max-width: 58ch; }
.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; }

/* ── 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); }
/* perf: a section below the fold is not laid out, painted or animated until it
   is scrolled near - this keeps the heavy architecture SVG and its animation
   off the main thread during the initial load. Design is unchanged; the
   `auto` keyword replaces the placeholder height with the real one after the
   first layout, so the scrollbar stays stable. Ignored by old browsers. */
.sec { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.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; }

/* ── 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); }

/* contact form: composes a mailto in the user's own client, sends nothing */
.cta-form { display: grid; gap: .85rem; width: min(100%, 25rem); justify-self: stretch; }
.fld { display: grid; gap: .35rem; }
.fld span { font-size: .8125rem; color: color-mix(in srgb, var(--on-deep) 72%, transparent); }
.cta-form textarea, .cta-form input {
  font-family: var(--sans); font-size: .9375rem; color: var(--on-deep);
  background: color-mix(in srgb, var(--on-deep) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-deep) 28%, transparent);
  border-radius: 4px; padding: .6rem .75rem; width: 100%;
}
.cta-form textarea { resize: vertical; min-height: 3.2rem; line-height: 1.5; }
.cta-form ::placeholder { color: color-mix(in srgb, var(--on-deep) 42%, transparent); }
.cta-form textarea:focus, .cta-form input:focus {
  outline: 2px solid var(--on-deep); outline-offset: 1px; border-color: transparent;
}
.cta-form .btn-solid { justify-content: center; margin-top: .25rem; }
.cta-form .mailto { justify-self: center; }

/* ── 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;
}

/* ── architecture diagram (home) ────────────────────────────────────────────
   A fixed dark panel in both themes: information visibly flows from the input
   to the output — running dotted streams plus bright pulses over them. */

.arch { margin: 0; }
.arch-frame {
  overflow-x: auto; background: #0A1420; border: 1px solid rgba(232, 238, 243, .12);
  border-radius: 8px; padding: .75rem .5rem .25rem; box-shadow: var(--shadow);
}
.arch-svg { display: block; width: 100%; height: auto; min-width: 56rem; }
.arch figcaption { margin-top: 1rem; font-size: .875rem; color: var(--ink-3); max-width: 64ch; }

.arch-svg text, .trit text { font-family: var(--sans); }
.al { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; fill: #6FB1D8; }
.altag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; fill: #8AC6E8; }
.altag-ok { fill: #58B98C; }
.altag-dim { fill: #728696; }
.as { font-size: 11px; fill: #8FA3B6; }
.at { font-size: 13.5px; font-weight: 600; fill: #E8EEF3; }
.atm { font-family: var(--mono); font-size: 14px; font-weight: 700; fill: #E8EEF3; }
.ats { font-size: 11px; fill: #8FA3B6; }
.abox { fill: #0F1B29; stroke: rgba(232, 238, 243, .2); }
.adash { fill: rgba(232, 238, 243, .03); stroke: rgba(232, 238, 243, .18); stroke-dasharray: 5 4; }
.achip { fill: rgba(94, 169, 210, .15); }
.achip-t { font-family: var(--mono); font-size: 11.5px; fill: #9FD0EC; }
.achip-b { font-family: var(--mono); font-size: 16px; font-weight: 700; fill: #FFC97A; }
.ald { stroke: rgba(232, 238, 243, .25); stroke-width: 1; stroke-dasharray: 2 3; }
.ami { fill: none; stroke: #9FB4C4; stroke-width: 1.6; stroke-linecap: round; }
.fl { fill: none; stroke: rgba(94, 169, 210, .2); stroke-width: 2; }
.fr {
  fill: none; stroke: #7FC4E8; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: .1 16; animation: arch-run 1.1s linear infinite;
}
.fr-slow { stroke: rgba(127, 196, 232, .55); animation-duration: 1.7s; }
.adot { fill: #FFC97A; }
.adot-halo { fill: url(#pg); }
.ahit { animation: arch-hit 9s var(--ease) infinite; }
.atk { transform-box: fill-box; transform-origin: center; animation: arch-chip 9s var(--ease) infinite; }
.aarc {
  fill: none; stroke: #8AC6E8; stroke-width: 1.3; stroke-dasharray: 4 5;
  animation: arch-march 1.1s linear infinite, arch-arc 9s linear infinite;
}

@keyframes arch-run { to { stroke-dashoffset: -16.1; } }
@keyframes arch-hit {
  0%, 11%, 100% { stroke: rgba(232, 238, 243, .2); fill: #0F1B29; }
  3%, 8% { stroke: #8AC6E8; fill: #16293C; }
}
@keyframes arch-chip {
  0%, 8%, 100% { transform: scale(1); }
  3% { transform: scale(1.14); }
}
@keyframes arch-march { to { stroke-dashoffset: -18; } }
@keyframes arch-arc {
  0%, 30%, 44%, 100% { opacity: .25; }
  33%, 41% { opacity: .85; }
}

.arch-cards { margin-top: clamp(2rem, 4vw, 2.75rem); }
.arch-nowhead { margin-top: clamp(2.5rem, 5vw, 3.25rem); margin-bottom: 1.4rem; }
.arch-nowhead h3 { font-size: 1.3rem; font-weight: 700; margin-top: .7rem; }
.arch-now { display: grid; gap: 1.1rem; }
@media (min-width: 52rem) { .arch-now { grid-template-columns: repeat(3, 1fr); } }

/* the counter demo: an integer accumulator fills, the trit clicks over */
.trit { display: block; width: 100%; max-width: 16rem; height: auto; margin-top: 1rem; }
.atrk { fill: var(--line); }
.trit-cell { fill: var(--bg); stroke: var(--line-2); }
.trit-w { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trit-t { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }
.trit-bar { fill: var(--signal); transform-box: fill-box; transform-origin: left center; animation: trit-fill 4.5s linear infinite; }
.trit-c0 { animation: trit-hold 4.5s linear infinite; }
.trit-cp { animation: trit-take 4.5s linear infinite; }

@keyframes trit-fill {
  0% { transform: scaleX(0); }
  55% { transform: scaleX(1); }
  62%, 100% { transform: scaleX(0); }
}
@keyframes trit-hold {
  0%, 54% { stroke: var(--brand); fill: var(--brand-bg); }
  58%, 100% { stroke: var(--line-2); fill: var(--bg); }
}
@keyframes trit-take {
  0%, 54% { stroke: var(--line-2); fill: var(--bg); }
  58%, 96% { stroke: var(--brand); fill: var(--brand-bg); }
  100% { stroke: var(--line-2); fill: var(--bg); }
}


/* ── hero: the live stand panel ─────────────────────────────────────────────
   The first screen shows the product's actual behaviour: the training error
   coming down and integer counters filling until a weight clicks. Same dark
   panel language as the architecture diagram. */

@media (min-width: 56rem) {
  .hero .page {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  }
  .hero .live { margin-top: 0; }
}

.live { margin: clamp(2rem, 6vw, 3rem) 0 0; }
.live-frame {
  background: #0A1420; border: 1px solid rgba(232, 238, 243, .12);
  border-radius: 8px; padding: .9rem .75rem .5rem; box-shadow: var(--shadow);
}
.live-svg { display: block; width: 100%; height: auto; }
.live-svg text { font-family: var(--sans); }
.live figcaption { margin-top: .85rem; font-size: .8125rem; color: var(--ink-3); max-width: 44ch; }

.hp-axis { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; fill: #728696; }
.hp-grid { stroke: rgba(232, 238, 243, .07); }
.hp-curve {
  fill: none; stroke: #7FC4E8; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 420; animation: hp-draw 7s var(--ease) infinite;
}
.hp-dot { fill: #FFC97A; animation: hp-dot 7s linear infinite; }
.hp-halo { fill: url(#hpg); animation: hp-dot 7s linear infinite; }
.hp-track { fill: rgba(232, 238, 243, .12); }
.hp-bar { fill: #DFA75A; transform-box: fill-box; transform-origin: left center; animation: hp-fill 4.5s linear infinite; }
.hp-cell { fill: #0F1B29; stroke: rgba(232, 238, 243, .22); }
.hp-ct { font-family: var(--mono); font-size: 12px; fill: #8FA3B6; }
.hp-take { animation: hp-take 4.5s linear infinite; }
.hp-late, .hp-late .hp-bar, .hp-late.hp-take { animation-delay: -2.2s; }
.hp-w { fill: none; stroke: rgba(232, 238, 243, .3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@keyframes hp-draw {
  0% { stroke-dashoffset: 420; opacity: 1; }
  52%, 90% { stroke-dashoffset: 0; opacity: 1; }
  97% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 420; opacity: 0; }
}
@keyframes hp-dot {
  0%, 50% { opacity: 0; }
  56%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes hp-fill {
  0% { transform: scaleX(0); }
  55% { transform: scaleX(1); }
  62%, 100% { transform: scaleX(0); }
}
@keyframes hp-take {
  0%, 54% { stroke: rgba(232, 238, 243, .22); fill: #0F1B29; }
  58%, 96% { stroke: #8AC6E8; fill: #16293C; }
  100% { stroke: rgba(232, 238, 243, .22); fill: #0F1B29; }
}

/* ── the trit pattern: -1 · 0 · +1 as a quiet background texture ────────── */

:root, :root[data-theme="light"] {
  --tritpat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%230E1B26' stroke-opacity='.05' stroke-width='2'%3E%3Cpath d='M12 22h12'/%3E%3Ccircle cx='64' cy='46' r='4.5'/%3E%3Cpath d='M28 70h12M34 64v12'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --tritpat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23E8EEF3' stroke-opacity='.045' stroke-width='2'%3E%3Cpath d='M12 22h12'/%3E%3Ccircle cx='64' cy='46' r='4.5'/%3E%3Cpath d='M28 70h12M34 64v12'/%3E%3C/g%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --tritpat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23E8EEF3' stroke-opacity='.045' stroke-width='2'%3E%3Cpath d='M12 22h12'/%3E%3Ccircle cx='64' cy='46' r='4.5'/%3E%3Cpath d='M28 70h12M34 64v12'/%3E%3C/g%3E%3C/svg%3E");
}
.hero { background-image: var(--tritpat); }

/* ── development diary strip (static feed, refreshed at deploy) ─────────── */

.diary { display: grid; gap: 1.1rem; }
@media (min-width: 56rem) { .diary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.diary-card {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.35rem 1.4rem 1.2rem; text-decoration: none; color: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.diary-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); color: inherit; }
.diary-date { font-size: .8125rem; color: var(--ink-3); }
.diary-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.diary-card p { color: var(--ink-2); font-size: .9375rem; }
.diary-more { margin-top: auto; padding-top: .6rem; font-size: .875rem; font-weight: 600; color: var(--brand); }
.diary-card:hover .diary-more { color: var(--brand-2); }

/* ── open-development section: chronicle + diary under one head ─────────── */

.open-h { font-size: 1.2rem; font-weight: 700; margin: 0 0 1.35rem; }
.open-h-2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ── stand chronicle: dated milestones, appended as they happen ─────────── */

.chron { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.chron li { position: relative; padding: 0 0 1.5rem 1.9rem; border-left: 2px solid var(--line-2); margin-left: .4rem; }
.chron li:last-child { border-left-color: transparent; padding-bottom: .2rem; }
.chron li::before {
  content: ""; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--brand);
}
.chron li.chron-now::before { background: var(--signal); border-color: var(--signal); }
.chron li.chron-next::before { background: var(--bg); border-color: var(--ink-3); }
.chron-d { display: block; font-size: .78125rem; color: var(--ink-3); margin-bottom: .3rem; }
.chron h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; }
.chron p { color: var(--ink-2); font-size: .9375rem; max-width: 60ch; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  /* the architecture panel is the product demo — it keeps moving even when the
     OS reports reduced motion (Windows over RDP does so by default) */
  .fr { animation-duration: 1.1s !important; }
  .fr-slow { animation-duration: 1.7s !important; }
  .ahit, .atk { animation-duration: 9s !important; }
  .aarc { animation-duration: 1.1s, 9s !important; }
  .trit-bar, .trit-c0, .trit-cp { animation-duration: 4.5s !important; }
  .hp-curve, .hp-dot, .hp-halo { animation-duration: 7s !important; }
  .hp-bar, .hp-take { animation-duration: 4.5s !important; }
}

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

/* ── advantages: six cards, three across on wide screens (2026-09-24) ── */
@media (min-width: 64rem) { #tech .guards { grid-template-columns: repeat(3, 1fr); } }
#tech .guard { padding: clamp(1.2rem, 2vw, 1.55rem); gap: .45rem; }
#tech .guard p { max-width: none; font-size: .9rem; }
#tech .guard-ic { margin-bottom: .1rem; }