/* ============================================================
   Büro 901 — "WORKSPACE / IDE"
   Engineering code-editor homepage. Original chrome (not VS Code).
   Graphite UI · warm amber accent · muted syntax palette
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0e1014;            /* editor */
  --bg-side:#0a0c0f;       /* sidebar */
  --bg-act:#07080a;        /* activity bar */
  --bg-tab:#0a0c0f;        /* tab strip */
  --bg-tab-on:#0e1014;     /* active tab */
  --panel:#12151a;
  --ink:#d7dae0;
  --ink-2:#8b9099;
  --faint:#5a5f68;
  --line:rgba(215,218,224,0.09);
  --line-2:rgba(215,218,224,0.16);
  /* brand accent — ОДНА СТРОКА для переключения. Жёлтый/янтарь сейчас; красный = #e23a2c */
  --accent:oklch(0.82 0.12 80);
  --amber:var(--accent);
  --amber-dim:color-mix(in srgb, var(--accent) 16%, transparent);
  /* muted syntax palette */
  --sx-key:oklch(0.74 0.09 320);     /* keyword — dusty mauve */
  --sx-str:oklch(0.78 0.09 140);     /* string — sage */
  --sx-num:oklch(0.80 0.10 60);      /* number — sand */
  --sx-fn:oklch(0.80 0.08 230);      /* func — slate blue, muted */
  --sx-com:#5a6068;                  /* comment */
  --sx-punc:#7b818b;
  --sans:"Geist", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
  --ui:var(--sans);
  --display:var(--sans);
  --act:48px; --side:236px; --tabs:40px; --status:30px; --titleh:38px;

  /* ── TYPE SCALE (Basement) · desktop ≥1024 ── */
  --fs-h0:6.125rem;   --lh-h0:5.5rem;    --ls-h0:-0.04em;
  --fs-h1:4.75rem;    --lh-h1:4.25rem;   --ls-h1:-0.04em;
  --fs-h2:3.5rem;     --lh-h2:3.125rem;  --ls-h2:-0.04em;
  --fs-h3:2.375rem;   --lh-h3:2.25rem;   --ls-h3:-0.04em;
  --fs-h4:1.5rem;     --lh-h4:1.5rem;    --ls-h4:-0.03em;
  --fs-h5:1.25rem;    --lh-h5:1.25rem;   --ls-h5:-0.02em;
  --fs-body:1rem;     --lh-body:1.5rem;  --ls-body:0em;
  --fs-meta:0.8125rem; --lh-meta:1rem;   --ls-meta:0em;
  --fs-micro:0.75rem; --lh-micro:1rem;   --ls-micro:0em;
}
/* ── TYPE SCALE · mobile <1024 ── */
@media (max-width:1023.98px){ :root{
  --fs-h0:2.875rem;  --lh-h0:2.45rem;  --ls-h0:-0.04em;
  --fs-h1:2.1875rem; --lh-h1:2.25rem;  --ls-h1:-0.03em;
  --fs-h2:1.5rem;    --lh-h2:1.5rem;   --ls-h2:-0.03em;
  --fs-h3:1.25rem;   --lh-h3:1.25rem;  --ls-h3:-0.03em;
  --fs-h4:0.9375rem; --lh-h4:1rem;     --ls-h4:-0.02em;
  --fs-h5:1rem;      --lh-h5:1.5rem;   --ls-h5:-0.02em;
} }
/* responsive shell — step 2: sidebar narrows to give the editor room */
@media(max-width:1180px){ :root{ --side:212px; } }
@media(max-width:980px){ :root{ --side:188px; } }
*{ box-sizing:border-box; }
html{ font-size:16px; }
html,body{ margin:0; height:100%; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; -webkit-font-smoothing:antialiased; overflow:hidden; }
::selection{ background:var(--amber-dim); }
a{ color:inherit; text-decoration:none; }

.en{ display:none; }
body.lang-en .ru{ display:none; }
body.lang-en .en{ display:revert; }

/* ---------- IDE SHELL ---------- */
.ide{ display:grid; height:100vh; height:100svh;
  grid-template-columns:var(--act) var(--side) 1fr;
  grid-template-rows:var(--titleh) 1fr var(--status);
  grid-template-areas:
    "title  title  title"
    "act    side   main"
    "status status status"; }

/* ---------- TITLE BAR ---------- */
.titlebar{ grid-area:title; display:flex; align-items:center; gap:16px; padding:0 14px; background:var(--bg-act); border-bottom:1px solid var(--line); }
.lights{ display:flex; gap:8px; }
.lights i{ width:12px; height:12px; border-radius:50%; display:block; }
.lights i:nth-child(1){ background:#e0664f; } .lights i:nth-child(2){ background:#e0b24f; } .lights i:nth-child(3){ background:#5fae6b; }
.titlebar .logo{ display:inline-flex; align-items:center; margin-left:6px; cursor:default; }
.titlebar .logo svg{ height:15px; width:auto; display:block; color:#f4f4f5; transition:color .12s ease; }
.titlebar .logo.clickable{ cursor:pointer; }
.titlebar .crumbs{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); font-weight:600; color:var(--ink-2); }
.titlebar .crumbs b{ color:var(--ink); font-weight:500; }
.titlebar .crumbs .sep{ color:var(--faint); margin:0 7px; }
.titlebar .menu{ margin-left:auto; display:flex; gap:18px; }
.titlebar .menu span{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--ink-2); }
@media(max-width:760px){ .titlebar .menu, .titlebar .crumbs{ display:none; } }
.burger{ display:none; appearance:none; background:transparent; border:0; cursor:pointer; color:var(--ink-2); height:30px; padding:0 6px 0 10px; margin-left:auto; align-items:center; gap:9px; border-radius:6px; }
.burger svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
.burger:hover{ color:var(--ink); background:rgba(215,218,224,0.06); }
.burger .curpage{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); font-weight:600; color:var(--ink); }
.burger[aria-expanded="true"]{ color:var(--ink); }

/* mobile nav sheet — pages list */
.navsheet{ position:fixed; top:var(--titleh); right:0; left:0; z-index:40; background:var(--bg-tab); border-bottom:1px solid var(--line-2); box-shadow:0 18px 40px rgba(0,0,0,0.5); padding:6px 0; }
.navsheet[hidden]{ display:none; }
.navsheet button{ display:flex; align-items:center; gap:11px; width:100%; appearance:none; background:transparent; border:0; cursor:pointer; padding:13px 20px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--ink-2); text-align:left; border-left:2px solid transparent; }
.navsheet button .dot{ width:9px; height:9px; border-radius:2px; flex:none; }
.navsheet button .ext{ color:var(--faint); margin-left:auto; font-size:var(--fs-micro); line-height:var(--lh-micro); }
.navsheet button:hover{ color:var(--ink); background:rgba(215,218,224,0.04); }
.navsheet button.on{ color:var(--ink); border-left-color:var(--amber); background:var(--amber-dim); }
.navscrim{ position:fixed; inset:var(--titleh) 0 0 0; z-index:39; background:rgba(0,0,0,0.4); }
.navscrim[hidden]{ display:none; }

/* ---------- ACTIVITY BAR ---------- */
.activity{ grid-area:act; background:var(--bg-act); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:6px; }
.activity .ico{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--faint); position:relative; cursor:pointer; border-radius:7px; }
.activity .ico svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; }
.activity .ico.on{ color:var(--ink); }
.activity .ico.on::before{ content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:2px; background:var(--amber); border-radius:2px; }
.activity .ico:hover{ color:var(--ink); }
.activity .sp{ flex:1; }
@media(max-width:760px){
  .activity{ display:none; }
  .sidebar{ display:none; }
  .tabs{ display:none; }
  .burger{ display:inline-flex; }
  .ide{ grid-template-columns:0 0 1fr; }
  .block--cover{ min-height:calc(100svh - var(--titleh) - var(--status)); }
}

/* ---------- SIDEBAR / EXPLORER ---------- */
.sidebar{ grid-area:side; background:var(--bg-side); border-right:1px solid var(--line); overflow-y:auto; }
.side-head{ padding:13px 16px 11px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--ink-2); display:flex; justify-content:space-between; }
.side-head .x{ color:var(--faint); font-family:var(--mono); }
.tree{ padding:2px 0 14px; }
.tree__group{ padding:7px 16px 4px 16px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--faint); letter-spacing:var(--ls-micro); display:flex; align-items:center; gap:7px; }
.tree__group svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; }
.file{ display:flex; align-items:center; gap:9px; padding:5px 16px 5px 30px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--ink-2); cursor:pointer; border-left:2px solid transparent; }
.file:hover{ background:rgba(215,218,224,0.04); color:var(--ink); }
.file.on{ background:var(--amber-dim); color:var(--ink); border-left-color:var(--amber); }
.file .dot{ width:8px; height:8px; border-radius:2px; flex:none; }
.file .ext{ color:var(--faint); }
.side-foot{ padding:14px 16px; border-top:1px solid var(--line); margin-top:6px; }
.side-foot .row{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); font-weight:600; color:var(--ink-2); padding:4px 0; }
.side-foot .row svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.6; color:var(--faint); flex:none; }
.side-foot .row a:hover{ color:var(--amber); }

/* ---------- OUTLINE (sections of active page) ---------- */
.outline{ padding:4px 0 14px; }
.outline__root{ display:flex; align-items:center; gap:9px; padding:8px 16px 6px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); font-weight:600; color:var(--ink); }
.outline__root .dot{ width:8px; height:8px; border-radius:2px; flex:none; }
.outline__root .ext{ color:var(--faint); }
.sec-link{ position:relative; display:flex; align-items:baseline; gap:10px; padding:8px 16px 8px 32px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--ink-2); cursor:pointer; border-left:2px solid transparent; }
.sec-link::before{ content:""; position:absolute; left:21px; top:0; bottom:0; width:1px; background:var(--line); }
.sec-link:last-child::before{ bottom:50%; }
.sec-link .mk{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--faint); min-width:22px; flex:none; }
.sec-link .tx{ line-height:var(--lh-meta); }
.sec-link:hover{ color:var(--ink); background:rgba(215,218,224,0.04); }
.sec-link.on{ color:var(--ink); border-left-color:var(--amber); background:var(--amber-dim); }
.sec-link.on .mk{ color:var(--amber); }

/* section anchors inside a page */
.sec{ scroll-margin-top:22px; }

.outline__empty{ padding:10px 16px 6px 32px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--faint); letter-spacing:var(--ls-micro); }

/* ---------- HOME PAGE — stacked blocks/screens ---------- */
.home{ }
.block{ padding:clamp(46px,6vw,84px) clamp(40px,5vw,92px); }
.block__eye{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--amber); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.block__eye .n{ color:var(--faint); }
.block .readme{ padding:0; max-width:none; }
.block .view{ padding:0; max-width:none; }

/* ---------- COVER — document title screen (centered) ---------- */
.block--cover{ min-height:calc(100svh - var(--titleh) - var(--tabs) - var(--status)); display:flex; align-items:center; justify-content:center; padding-top:32px; padding-bottom:16px; }
.block--cover + .block{ padding-top:clamp(20px,2.4vw,40px); }
.cover{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:720px; }

/* split layout (G) */
.cover--split{ flex-direction:column; align-items:center; text-align:left; max-width:1040px; width:100%; margin:0 auto; }
.cover--split .cover__main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; width:100%; gap:clamp(34px,5vw,76px); }
.cover--split .cover__left{ min-width:0; display:flex; align-items:center; justify-content:center; }
.cover--split .cover__left .cover__logo{ margin:0; height:auto; width:auto; max-width:100%; max-height:clamp(204px,26cqw,280px); }
.cover--split .cover__right{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border-left:1px solid var(--line); padding-left:clamp(32px,4vw,60px); }
.cover--split .cover__meta{ justify-content:flex-start; color:var(--faint); }
.cover--split .cover__meta .dot{ color:var(--accent); }
.cover--split .cover__name{ font-family:var(--mono); --bs:0.82; --ds:0.82; margin-top:18px; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); font-weight:600; color:#aeb3bb; white-space:nowrap; }
.cover--split .cover__name .wm-d{ margin-left:0.16em; }
.cover--split .cover__tag{ justify-content:flex-start; flex-wrap:nowrap; white-space:nowrap; margin-top:18px; font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); }
.cover--split .cover__claim{ text-align:left; margin-top:16px; }
.cover--split .cover__dim{ width:100%; max-width:400px; margin-top:30px; }
.cover--split .cover__loc{ margin-top:24px; }
.cover--split .cover__lang--inline{ align-self:flex-start; margin-top:30px; }

/* CASCADE step 1 — tighter room: logo eases down a touch, still a row */
@container (max-width:980px){
  .cover--split .cover__left .cover__logo{ max-height:clamp(188px,22cqw,224px); }
}
/* CASCADE step 3 — row can't hold a one-line tagline: stack, logo stays proud, all centered */
@container (max-width:880px){
  .cover--split{ max-width:600px; }
  .cover--split .cover__main{ grid-template-columns:1fr; gap:0; }
  .cover--split .cover__left,
  .cover--split .cover__right{ width:100%; }
  .cover--split .cover__left .cover__logo{ height:auto; max-height:clamp(170px,40cqw,236px); }
  .cover--split .cover__right{ border-left:0; border-top:1px solid var(--line); align-items:center; text-align:center; padding-left:0; padding-top:30px; margin-top:32px; }
  .cover--split .cover__meta,
  .cover--split .cover__tag{ justify-content:center; }
  .cover--split .cover__tag{ font-size:var(--fs-micro); }
  .cover--split .cover__dim{ margin-left:auto; margin-right:auto; }
  .cover--split .cover__claim{ text-align:center; margin-left:auto; margin-right:auto; }
  .cover--split .cover__lang--inline{ align-self:center; }
}
/* CASCADE step 4 — phone-narrow: let the tagline wrap (centered) rather than overflow */
@container (max-width:520px){
  .cover--split .cover__tag{ flex-wrap:wrap; white-space:normal; font-size:var(--fs-micro); }
}
.cover__meta{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; white-space:nowrap; gap:13px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--ink-2); }
.cover__meta .cover__doc{ color:var(--amber); }
.cover__meta .bar{ width:26px; height:1px; background:var(--line-2); }
.cover__logo{ height:clamp(118px,22vh,240px); width:auto; filter:invert(0.9); margin:44px 0 0; }
.cover__name{ --ds:0.85; --bs:0.85; font-family:var(--mono); font-weight:600; letter-spacing:var(--ls-h4); font-size:var(--fs-h4); line-height:var(--lh-h4); text-transform:none; color:var(--ink-2); margin-top:34px; }
.cover__tag{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin-top:16px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--ink-2); }
.cover__tag .dot{ color:var(--accent); }
.cover__claim{ margin-top:18px; max-width:46ch; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--ink-2); text-align:center; }
.cover__dim{ display:flex; align-items:center; gap:14px; width:min(460px,80%); margin:24px 0 0; }
.cover__dim .lbl{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.cover__dim .lbl b{ color:var(--amber); font-weight:600; }
.cover__dim .seg{ flex:1; height:11px; position:relative; }
.cover__dim .seg::after{ content:""; position:absolute; top:5px; left:0; right:0; border-top:1px solid var(--line-2); }
.cover__dim .seg::before{ content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--line-2); }
.cover__dim .seg.l::before{ left:0; } .cover__dim .seg.r::before{ right:0; }
.cover__loc{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin-top:24px; }
.cover__lang{ display:inline-flex; background:var(--bg-side); border:1px solid var(--line-2); padding:3px; gap:2px; font-family:var(--mono); font-size:var(--fs-micro); line-height:1; letter-spacing:var(--ls-micro); margin-top:18px; }
.cover__lang button{ position:relative; appearance:none; border:0; background:transparent; cursor:pointer; padding:8px 17px; color:var(--ink-2); font:inherit; letter-spacing:inherit; transition:background .15s, color .15s; }
.cover__lang button.on{ background:var(--amber-dim); color:var(--ink); }
.cover__lang button.on::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); }
.cover__lang button:not(.on):hover{ color:var(--ink); }
.cover__lang button:not(.on):hover{ color:var(--ink); }
.cover__foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px; margin-top:24px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.cover__foot b{ color:var(--ink-2); font-weight:400; }

/* placeholder (future) pages */
.soon{ min-height:62vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:60px 40px; }
.soon .logo{ height:44px; width:auto; filter:invert(0.86); opacity:0.45; }
.soon h2{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); margin:8px 0 0; }
.soon p{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin:0; }
.soon .tagn{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink-2); border:1px solid var(--line-2); border-radius:5px; padding:7px 13px; margin-top:8px; }

/* ---------- MAIN / TABS + EDITOR ---------- */
.main{ grid-area:main; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg); position:relative; }
.editor-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .3s ease; }
.editor-glow::before{ content:""; position:absolute; left:var(--gx,50%); top:var(--gy,38%); width:min(720px,80%); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 17%, transparent), transparent 66%); }
.editor-glow.on{ opacity:1; }
.tabs{ height:var(--tabs); display:flex; background:var(--bg-tab); border-bottom:1px solid var(--line); overflow-x:auto; flex:none; position:relative; z-index:2; }
.tab{ display:flex; align-items:center; gap:9px; padding:0 16px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--ink-2); border-right:1px solid var(--line); cursor:pointer; white-space:nowrap; position:relative; }
.tab .dot{ width:8px; height:8px; border-radius:2px; flex:none; }
.tab.on{ background:var(--bg-tab-on); color:var(--ink); }
.tab.on::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--amber); }
.tab:hover:not(.on){ color:var(--ink); }

.editor{ flex:1; overflow-y:auto; overflow-x:hidden; position:relative; z-index:1; container-type:inline-size; }
.doc{ display:none; }
.doc.on{ display:block; }

/* code-style docs: gutter + lines */
.code{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); counter-reset:ln; padding:18px 0 60px; }
.cl{ display:grid; grid-template-columns:56px 1fr; min-height:1px; }
.cl::before{ counter-increment:ln; content:counter(ln); text-align:right; padding-right:20px; color:var(--faint); opacity:0.6; user-select:none; }
.cl > span{ padding-right:40px; white-space:pre-wrap; }
.cl.hl{ background:rgba(215,218,224,0.035); }
.cl.hl > span{ box-shadow:inset 2px 0 0 var(--amber-dim); }
.ind1{ padding-left:2ch; } .ind2{ padding-left:4ch; }
.k{ color:var(--sx-key); } .s{ color:var(--sx-str); } .n{ color:var(--sx-num); }
.f{ color:var(--sx-fn); } .c{ color:var(--sx-com); font-style:italic; } .p{ color:var(--sx-punc); }
.prop{ color:var(--ink); }

/* ---------- RENDERED PREVIEW DOCS (every file opens as a readable view) ---------- */
.view{ max-width:920px; padding:clamp(34px,5vw,72px); }
.view__meta{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); font-weight:600; color:var(--faint); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.view__meta .dot{ width:8px; height:8px; border-radius:2px; }
.view__meta b{ color:var(--ink-2); font-weight:600; }
.view__title{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); margin:0 0 16px; text-wrap:balance; }
.view__title .amber{ color:var(--amber); }
.view__intro{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); color:var(--ink-2); max-width:62ch; margin:0 0 38px; }
.view__intro b{ color:var(--ink); font-weight:600; }

/* services list */
.svc-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.svc-item{ display:grid; grid-template-columns:46px minmax(0,1fr) minmax(0,1.15fr); gap:clamp(14px,2.6vw,40px); align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); transition:padding-left .25s, background .25s; }
.svc-item:hover{ padding-left:12px; background:linear-gradient(90deg, rgba(215,218,224,0.03), transparent 45%); }
.svc-item__no{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--amber); }
.svc-item__nm{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); }
.svc-item__nm small{ display:block; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin-top:9px; font-weight:600; }
.svc-item__txt{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); }

/* ---------- "ЧТО ДЕЛАЕМ" — engineering spec grid (3×2 cards) ---------- */
.block--wide{ max-width:1080px; }
.rule-head{ display:flex; align-items:center; gap:16px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); text-transform:uppercase; margin-bottom:34px; }
.rule-head .n{ color:var(--amber); font-weight:600; }
.rule-head .t{ color:var(--ink-2); }
.rule-head .ln{ flex:1; height:1px; background:var(--line-2); }
.spec-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.spec-card{ display:flex; flex-direction:column; border:1px solid var(--line-2); border-radius:8px; padding:26px 24px 28px; background:var(--bg); }
/* AI service card highlighted like the active tree item — amber left edge only, no fill */
.spec-card--ai{ border-left:2px solid var(--amber); }
.spec-card--ai .no{ color:var(--amber); }
.spec-card .no{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:var(--ls-meta); color:var(--amber); }
.spec-card .nm{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); margin:18px 0 11px; }
.spec-card .tag{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.spec-card .txt{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); margin:22px 0 0; }
.sec-more{ display:inline-flex; align-items:center; gap:9px; margin-top:30px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--amber); border-bottom:1px solid var(--amber-dim); padding-bottom:3px; transition:border-color .2s; }
.sec-more:hover{ border-bottom-color:var(--amber); }

@media(max-width:980px){
  .spec-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:680px){
  .spec-grid{ grid-template-columns:1fr; }
  .spec-card--tall{ grid-template-columns:1fr; }
  .spec-card--tall .ai-steps{ margin-top:26px; align-self:start; }
}
/* 03.5 wide service band sits in normal flow at the bottom of #b-services */
#b-services .spec-card--tall{ margin-top:18px; }
#b-services .sec-more{ margin-top:22px; }

/* AI as a WIDE feature card: full-width bottom row; subtle accent — amber left edge only, no fill; left text (sticky) / right steps */
.spec-card--tall{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(40px,6vw,80px); align-items:start; padding:32px 30px; background:var(--bg); border-color:var(--line-2); border-left:2px solid var(--amber); }
.spec-card--tall .tall-l{ display:flex; flex-direction:column; }
.spec-card--tall .no{ color:var(--amber); }
.spec-card--tall .nm{ font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); margin-top:16px; }
.spec-card--tall .tag{ margin-top:9px; }
.spec-card--tall .txt{ margin-top:18px; max-width:46ch; }
.spec-card--tall .ai-steps{ margin-top:0; align-self:end; }
/* steps recolored to match dark card; neutral boxed index chips */
.spec-card--tall .ai-step .chip{ border-color:var(--line-2); color:var(--ink); }
.spec-card--tall .ai-step__nm{ color:var(--ink); }
.spec-card--tall .ai-step__tx{ color:var(--ink-2); }
/* AI card steps — square index chips (variant E) */
.ai-steps{ margin-top:26px; display:flex; flex-direction:column; gap:18px; }
.ai-step{ display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; }
.ai-step .chip{ width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; border:1.4px solid rgba(19,17,11,0.55); border-radius:6px; font-family:var(--mono); font-weight:600; font-size:var(--fs-meta); line-height:var(--lh-meta); color:#13110b; }
.ai-step__bd{ min-width:0; }
.ai-step__nm{ display:block; font-family:var(--sans); font-weight:600; font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); color:#13110b; margin:4px 0 3px; }
.ai-step__tx{ display:block; font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:rgba(19,17,11,0.72); }
@media(max-width:680px){
  .spec-card--tall{ grid-template-columns:1fr; }
  .spec-card--tall .tall-l{ position:static; }
  .spec-card--tall .ai-steps{ margin-top:26px; align-self:start; }
}

/* ---------- "НАМ ДОВЕРЯЮТ" — client register ---------- */
.sec-intro{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); max-width:60ch; margin:0 0 30px; }
/* trust grid/cell/logo styling now lives fully in ide-skin-v2.css (.home scope) */

/* ---------- v2-ported blocks: works / process / stack / contact ---------- */
/* works — case cards */
.case{ display:flex; flex-direction:column; min-width:0; }
.case__ph{ position:relative; aspect-ratio:16/10; border:1px solid var(--line-2); border-radius:8px; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(215,218,224,0.045) 0 2px, transparent 2px 9px), var(--panel); transition:border-color .2s; }
.case:hover .case__ph{ border-color:var(--accent); }
.case__ph .c{ position:absolute; top:0; left:0; padding:13px 15px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--accent); }
.case__ph .pl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.case__meta{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; margin-top:16px; min-width:0; }
.case__meta h3{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); margin:0; min-width:0; }
.case__meta .cat{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); white-space:nowrap; flex:none; }

/* works — sticky-stacking bands (Featured Projects), card-height */
.wstack{ position:relative; }
.wproj{ position:sticky; top:0; background:var(--bg); border-top:1px solid var(--line-2);
  box-shadow:0 -22px 46px -26px rgba(0,0,0,0.85);
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,0.52fr) minmax(0,0.78fr);
  grid-template-rows:auto 1fr auto; grid-template-areas:"img desc name" "img desc ." "img cat .";
  column-gap:clamp(20px,2.6vw,44px); align-items:start; padding:24px 0 30px; }
.wproj__img{ grid-area:img; align-self:stretch; position:relative; min-height:clamp(300px,40vh,440px);
  border:0; border-radius:8px; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(215,218,224,0.045) 0 2px, transparent 2px 9px), var(--panel); }
.wproj__img .c{ position:absolute; top:0; left:0; padding:13px 15px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--accent); z-index:2; }
.wproj__img--photo{ background:var(--panel-2); }
.wproj__img--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.wproj__img--photo::after{ content:""; position:absolute; top:0; left:0; right:0; height:64px; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0.5), transparent); pointer-events:none; }
.wproj__img .pl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.wproj__name{ grid-area:name; justify-self:end; text-align:right; font-family:var(--sans); font-weight:600;
  font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); color:var(--ink); text-wrap:balance; }
.wproj__name img{ display:block; height:clamp(40px,4.6vw,72px); width:auto; }
.wproj__desc{ grid-area:desc; padding-top:4px; font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); max-width:32ch; }
.wproj__cat{ grid-area:cat; align-self:end; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--amber); }
.wstack-more{ position:relative; z-index:1; background:transparent; }
@media(max-width:680px){
  .wproj{ grid-template-columns:1fr; grid-template-areas:"name" "img" "desc" "cat"; grid-template-rows:auto auto auto auto; row-gap:14px; }
  .wproj__name{ justify-self:start; text-align:left; }
  .wproj__img{ min-height:200px; }
}

/* process — bordered cards in a row */
.proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.proc__step{ border:1px solid var(--line-2); border-radius:8px; padding:26px 22px 28px; transition:border-color .2s, background .2s; }
.proc__step:hover{ border-color:var(--accent); background:var(--panel); }
.proc__step .num{ font-family:var(--mono); font-weight:600; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); color:var(--accent); }
.proc__step .num small{ color:var(--faint); font-weight:400; }
.proc__step h3{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); margin:18px 0 9px; }
.proc__step p{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); margin:0; }

/* stack — chip groups */
.stack{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.stack__group{ background:var(--bg); display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; padding:20px 24px; }
.stack__cat{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--accent); }
.stack__chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink); border:1px solid var(--line-2); border-radius:6px; padding:7px 12px; transition:border-color .2s, color .2s; }
.chip:hover{ border-color:var(--accent); }

/* contact — centered */
.contact-c{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(24px,4vw,64px) 0; }
.contact-c__h{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); margin:0 0 36px; text-wrap:balance; }
.contact-c__h .amber{ color:var(--accent); }
.contact-c__mail{ font-family:var(--sans); font-weight:600; color:var(--ink-2); font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); border-bottom:2px solid var(--amber-dim); padding-bottom:6px; transition:border-color .2s, color .2s; }
.contact-c__mail:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.contact-c__tel{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--ink-2); margin-top:24px; }
.contact-c__tel:hover{ color:var(--ink); }
.contact-c__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin-top:28px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.contact-c__meta .dot{ color:var(--line-2); }

/* contact — full-screen giant wordmark */
.contactx{ min-height:calc(100svh - var(--titleh) - var(--tabs) - var(--status)); display:flex; flex-direction:column; }
.contactx .contact-c{ flex:1; justify-content:center; }
.contact-c__wm{ width:100%; white-space:nowrap; font-family:var(--mono); font-weight:600;
  font-size:var(--fs-h0); line-height:var(--lh-h0); letter-spacing:var(--ls-h0); color:rgba(215,218,224,0.022); margin:0 0 clamp(30px,5vh,56px); }
/* wordmark digit alignment: digits drop to lowercase x-height, share baseline */
.wm-d{ font-size:calc(var(--ds, 0.74) * 1em); }
/* capital B shrunk to ~lowercase height — only slightly protrudes above x-height */
.wm-b{ font-size:calc(var(--bs, 0.85) * 1em); }
.contact-c__wm{ --ds:0.82; --bs:0.82; }
.contact-c__wm .wm-d{ margin-left:0.16em; }
@media(max-width:760px){ .contactx{ min-height:calc(100svh - var(--titleh) - var(--status)); } }

@media(max-width:760px){ .stack__group{ grid-template-columns:1fr; gap:12px; } }
@container (max-width:900px){ .proc{ grid-template-columns:repeat(2,1fr); } }
@container (max-width:480px){ .proc{ grid-template-columns:1fr; } }

/* steps (ai pipeline, process) */
.steps{ display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:8px; }
.step{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:clamp(16px,3vw,40px); align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line); }
.step__k{ font-family:var(--mono); font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); color:var(--amber); }
.step__nm{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); margin:0 0 7px; }
.step__txt{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); max-width:60ch; }

/* two-column body (ai) */
.cols{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.cols .lead2{ font-family:var(--sans); font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); font-weight:600; color:var(--ink-2); }
.cols .lead2 b{ color:var(--ink); font-weight:600; }

/* ---------- AI section · 04.1 service (Внедрение ИИ) ---------- */
.aiserv{ margin-bottom:clamp(48px,6vw,88px); }
.aiserv__grid{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:clamp(36px,5vw,80px); align-items:start; }
.aiserv__head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(16px,1.8vw,22px); }
.aiserv__no{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:var(--ls-meta); color:var(--amber); flex:none; }
.aiserv__nm{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); margin:0 0 7px; }
.aiserv__tag{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.aiserv__lead{ font-family:var(--sans); font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); font-weight:600; color:var(--ink-2); margin:0; }
.aiserv__steps{ display:flex; flex-direction:column; }
.aiserv__steps .ai-step{ align-items:start; padding:18px 0; border-top:1px solid var(--line); }
.aiserv__steps .ai-step:first-child{ border-top:0; padding-top:0; }
.aiserv__steps .chip{ border-color:var(--line-2); color:var(--ink); }
.aiserv__steps .ai-step__nm{ color:var(--ink); }
.aiserv__steps .ai-step__tx{ color:var(--ink-2); }
@media(max-width:760px){ .aiserv__grid{ grid-template-columns:1fr; gap:28px; } }

.ai-divider{ height:1px; background:var(--line-2); margin:clamp(40px,5vw,72px) 0 clamp(40px,5vw,64px); }
/* labeled seam between 04.1 service and 04.2 product */
.ai-seam{ display:flex; align-items:center; gap:18px; margin:clamp(34px,4vw,52px) 0; }
.ai-seam__ln{ flex:1; height:1px; background:var(--line-2); }
.ai-seam__lbl{ display:inline-flex; align-items:baseline; gap:7px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.ai-seam__lbl .m{ color:var(--amber); font-weight:600; }
.ai-seam__lbl .sep{ color:var(--faint); margin:0 5px; }
.gwhero__no{ display:block; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:var(--ls-meta); color:var(--amber); margin-bottom:12px; }

/* ---------- FLAGSHIP PRODUCT · unified AI gateway — pure flagship hero (W1) ---------- */
.gwhero{ margin-top:clamp(10px,1.5vw,20px); }
.gwhero__tagwrap{ margin-bottom:clamp(24px,3vw,40px); }
.gwhero__tag{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--amber); }
.gwhero__tag .gw-name{ color:#fff; font-weight:600; text-transform:none; font-size:1.24em; letter-spacing:0.01em; --ds:0.78; --bs:0.78; }
.gwhero__tag .gw-name .wm-d{ margin-left:0.16em; }
.gwhero__own{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); color:var(--faint); margin-top:8px; }
.gwhero__row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,80px); align-items:start; }
.gwhero__num{ position:sticky; top:clamp(24px,9vh,90px); align-self:start; font-family:var(--mono); font-weight:600; font-size:var(--fs-h0); line-height:var(--lh-h0); letter-spacing:var(--ls-h0); color:var(--ink); white-space:nowrap; }
.gwhero__num small{ display:block; font-family:var(--mono); font-weight:600; font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin-top:clamp(12px,1.4vw,18px); }
.gwhero__nm{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); margin:0 0 clamp(8px,1vw,12px); }
.gwhero__nm .amber{ color:var(--accent); }
.gwhero__sub{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--accent); margin:0 0 clamp(16px,1.8vw,22px); }
.gwhero__lead{ font-family:var(--sans); font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); font-weight:600; color:var(--ink-2); max-width:none; margin:0 0 clamp(22px,2.6vw,30px); }
.gwhero__benes{ list-style:none; margin:0 0 clamp(24px,2.8vw,32px); padding:0; display:flex; flex-direction:column; }
.gwhero__benes li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding:14px 0; border-top:1px solid var(--line); }
.gwhero__benes li:first-child{ border-top:0; padding-top:0; }
.gwhero__benes .bn{ font-family:var(--mono); font-weight:600; font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--accent); }
.gwhero__benes .bt{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.gwhero__models{ display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink); margin:0 0 clamp(22px,2.6vw,30px); }
.gwhero__models .d{ color:var(--accent); }
.gwhero__more{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--amber); border-bottom:1px solid var(--amber-dim); padding-bottom:3px; transition:border-color .2s; }
.gwhero__more:hover{ border-bottom-color:var(--accent); }
@media(max-width:760px){
  .gwhero__row{ grid-template-columns:1fr; gap:24px; }
  .gwhero__num{ position:static; }
}

/* gwx — секция «Продукты»: ИИ-шлюз пинится на весь экран, банковский шлюз въезжает справа и накрывает */
.gwx{ position:relative; z-index:2; height:calc(2.4 * (100svh - var(--titleh) - var(--tabs) - var(--status))); }
.gwx__pin{ position:sticky; top:0; height:calc(100svh - var(--titleh) - var(--tabs) - var(--status)); overflow:hidden; }
.gwx__panel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-start; padding:clamp(34px,5vw,84px) clamp(40px,5vw,92px); background:var(--bg); overflow:hidden; }
.gwx__panel .rule-head{ flex:none; width:100%; margin-bottom:0; }
.gwx__panel .gwhero{ margin:auto 0; width:100%; }
.rule-head .gw-name{ text-transform:none; color:var(--ink); font-weight:600; --ds:0.78; --bs:0.78; }
.rule-head .gw-name .wm-d{ margin-left:0.14em; }
#b-ai.gwx__panel{ z-index:1; }
#b-bank.gwx__panel{ z-index:2; transform:translate3d(100%,0,0); will-change:transform;
  box-shadow:-40px 0 80px -26px rgba(0,0,0,0.7); }
#b-ai .gwhero__num{ will-change:transform; }
@media(max-width:760px){
  .gwx{ position:static; z-index:auto; height:auto; }
  .gwx__pin{ position:static; height:auto; overflow:visible; }
  .gwx__panel{ position:static; transform:none !important; box-shadow:none; overflow:visible; padding:clamp(46px,6vw,84px) clamp(40px,5vw,92px); }}

/* ---------- BANK GATEWAY · схема маршрутизации (V3) ---------- */
.bw3{ display:flex; flex-direction:column; gap:clamp(26px,3vw,40px); width:100%; }
.bw3-head{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(18px,2.2vw,34px); align-items:end; }
.bw3-title .gwhero__nm{ margin:0; }
.bw3-title .gwhero__nm .amber{ display:block; }
.bw3-title .gwhero__sub{ margin:14px 0 0; }
.bw3-head .gwhero__lead{ margin:0; max-width:46ch; }
/* diagram: customers → orchestrator → banks */
.bw3-diagram{ display:grid; grid-template-columns:150px 1fr 1fr; align-items:center;
  border-top:1px solid var(--line); padding-top:clamp(24px,3vw,40px); }
.bw3-node{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink); text-align:center;
  border:1px solid var(--line-2); border-radius:7px; padding:18px 10px; background:var(--panel); }
.bw3-node small{ display:block; color:var(--faint); margin-top:6px; font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; }
.bw3-core{ position:relative; padding:0 clamp(20px,3vw,44px); }
.bw3-orch{ border:1px solid var(--amber); color:var(--amber); background:var(--amber-dim);
  font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); text-align:center; padding:22px 10px; border-radius:7px; letter-spacing:var(--ls-meta); }
.bw3-core::before, .bw3-core::after{ content:""; position:absolute; top:50%; height:1px; width:clamp(20px,3vw,44px); }
.bw3-core::before{ left:0; background:linear-gradient(90deg,var(--line-2),var(--amber)); }
.bw3-core::after{ right:0; background:linear-gradient(90deg,var(--amber),var(--line-2)); }
.bw3-banks{ display:grid; grid-template-columns:1fr 1fr; gap:9px; padding-left:clamp(20px,3vw,44px); position:relative; }
.bw3-banks::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line-2); }
.bw3-banks .bk{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:11px 14px; }
.bw3-banks .bk.more{ color:var(--amber); border-color:var(--amber-dim); }
/* foot: benefits 2×2 + cta */
.bw3-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:clamp(20px,2.4vw,30px); }
.bw3-bens{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.7vw,20px) clamp(30px,3.6vw,56px); max-width:780px; }
.bw3-bens li{ display:flex; gap:14px; }
.bw3-bens .bn{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:var(--ls-meta); color:var(--amber); padding-top:2px; flex:none; }
.bw3-bens .bt{ font-family:var(--sans); color:var(--ink-2); line-height:var(--lh-body); font-size:var(--fs-body); }
.bw3-foot .gwhero__more{ margin:0; }
@media(max-width:760px){
  .bw3-head{ grid-template-columns:1fr; gap:clamp(20px,4vw,30px); }
  .bw3-diagram{ grid-template-columns:1fr; gap:22px; }
  .bw3-core{ padding:0; }
  .bw3-core::before, .bw3-core::after{ display:none; }
  .bw3-banks{ padding-left:0; }
  .bw3-banks::before{ display:none; }
}
@media(max-width:680px){ .bw3-bens{ grid-template-columns:1fr; } }

/* works grid */
.work-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(20px,2.6vw,36px); }
.work-card .plate{ position:relative; aspect-ratio:16/10; border:1px solid var(--line-2); border-radius:7px; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 0%, rgba(215,218,224,0.05), transparent 65%), var(--panel); }
.work-card .plate .ix{ position:absolute; top:0; left:0; padding:12px 14px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--amber); }
.work-card .plate .tg{ position:absolute; bottom:0; right:0; padding:12px 14px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--ink-2); }
.work-card .plate .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.work-card h3{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); margin:16px 0 7px; }
.work-card p{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); margin:0; }

/* stack groups */
.stack-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.stack-g{ background:var(--bg); padding:22px 20px; }
.stack-g h4{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--amber); margin:0 0 15px; }
.stack-g ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.stack-g li{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }

/* contact block */
.contact-row{ display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; margin:6px 0 40px; }
.contact-row .btn{ display:inline-flex; align-items:center; gap:11px; background:var(--amber); color:#13110b; font-family:var(--sans); font-weight:600; font-size:var(--fs-body); line-height:var(--lh-body); padding:14px 24px; border-radius:7px; transition:filter .2s, transform .2s; }
.contact-row .btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.contact-row .tel{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); }
.contact-row .tel:hover{ color:var(--amber); }
.contact-info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px 26px; border-top:1px solid var(--line); padding-top:28px; }
.contact-info .blk{ display:flex; flex-direction:column; gap:8px; }
.contact-info .l{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.contact-info .v{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.contact-info .v a:hover{ color:var(--amber); }

@media(max-width:680px){
  .cols{ grid-template-columns:1fr; gap:28px; }
  .work-grid{ grid-template-columns:1fr; }
  .svc-item{ grid-template-columns:36px 1fr; }
  .svc-item__txt{ grid-column:2; }
}

/* README "preview" doc — rendered like a markdown preview pane */
.readme{ max-width:880px; padding:clamp(34px,5vw,72px); }
.readme__brand{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.readme__brand .logo{ height:54px; width:auto; filter:invert(0.86); }
.readme__brand .v{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink-2); }
.readme__brand .v b{ color:var(--amber); font-weight:500; }
.readme .kick{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; letter-spacing:var(--ls-meta); text-transform:uppercase; color:var(--amber); margin-bottom:20px; }
.readme h1{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); margin:0 0 24px; max-width:18ch; text-wrap:balance; }
.readme h1 .amber{ color:var(--amber); }
.readme .lead{ font-family:var(--sans); font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); font-weight:600; color:var(--ink-2); max-width:60ch; margin:0 0 18px; }
.readme .lead b{ color:var(--ink); font-weight:600; }
.readme hr{ border:0; border-top:1px solid var(--line); margin:32px 0; }
.readme .facts{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0; }
.readme .badge{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink-2); border:1px solid var(--line-2); border-radius:5px; padding:7px 12px; }
.readme .badge b{ color:var(--amber); font-weight:500; }
.readme .clients-h{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin:0 0 14px; }
.readme .clients{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.readme .clients span{ background:var(--bg); padding:13px 14px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink); }
.readme .run{ display:inline-flex; align-items:center; gap:11px; margin-top:32px; background:var(--amber); color:#13110b; font-family:var(--mono); font-weight:600; font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); padding:13px 20px; border-radius:6px; }
.readme .run:hover{ filter:brightness(1.08); }

/* section blocks inside README preview (services, works ...) when shown rendered */
.rblock{ margin:30px 0; }
.rblock h2{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); margin:0 0 18px; }

/* ---------- STATUS BAR ---------- */
.statusbar{ grid-area:status; background:var(--amber); color:#13110b; display:flex; align-items:center; gap:0; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; }
.statusbar .seg{ display:flex; align-items:center; gap:7px; padding:0 13px; height:100%; }
.statusbar .seg.split{ margin-left:auto; }
.statusbar .seg svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }
.statusbar .seg.hov:hover{ background:rgba(0,0,0,0.12); cursor:pointer; }
.statusbar .lang{ display:flex; height:100%; }
.statusbar .lang button{ appearance:none; border:0; background:transparent; font:inherit; cursor:pointer; padding:0 11px; color:rgba(19,17,11,0.55); }
.statusbar .lang button.on{ color:#13110b; background:rgba(0,0,0,0.14); }
@media(max-width:760px){ .statusbar .seg.opt{ display:none; } }

/* scrollbars */
.sidebar::-webkit-scrollbar, .editor::-webkit-scrollbar, .tabs::-webkit-scrollbar{ width:11px; height:11px; }
.sidebar::-webkit-scrollbar-thumb, .editor::-webkit-scrollbar-thumb{ background:rgba(215,218,224,0.12); border-radius:6px; border:3px solid transparent; background-clip:padding-box; }
.editor::-webkit-scrollbar-thumb:hover{ background:rgba(215,218,224,0.2); background-clip:padding-box; }

/* ============================================================
   ABOUT — история версий бюро (changelog / git log)
   ============================================================ */
.about{ }
.about__hero{ margin:0 0 clamp(36px,4.5vw,60px); border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); }
.about__hero img{ display:block; width:100%; height:clamp(220px,40vh,460px); object-fit:cover; object-position:50% 42%; }
.about__hero-cap{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); padding:11px 16px; border-top:1px solid var(--line); }
.about__lede{ display:grid; grid-template-columns:1.4fr 0.9fr; gap:clamp(28px,4vw,64px); align-items:start; margin-bottom:clamp(44px,5vw,72px); }
.about__lead{ font-family:var(--sans); font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); font-weight:600; color:var(--ink-2); margin:0; text-wrap:pretty; }
.about__lead b{ color:var(--ink); font-weight:600; }
.about__meta{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-2); padding-top:6px; }
.amark{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-family:var(--mono); }
.amark .k{ font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); }
.amark .v{ font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink); }
.amark .v.amber{ color:var(--amber); }

.rule-head--sub{ margin-bottom:8px; }
.rule-head--sub .t{ color:var(--ink); }
.rule-head .n2{ color:var(--faint); font-weight:400; }

/* version log — vertical rail of releases */
.vlog{ list-style:none; margin:0 0 clamp(40px,5vw,64px); padding:0; }
.vrel{ display:grid; grid-template-columns:34px 1fr; }
.vrel__rail{ position:relative; display:flex; justify-content:center; }
.vrel__rail::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:var(--line-2); }
.vrel:first-child .vrel__rail::before{ top:14px; }
.vrel:last-child .vrel__rail::before{ bottom:auto; height:14px; }
.vrel__node{ position:relative; z-index:1; width:11px; height:11px; margin-top:7px; border-radius:50%; background:var(--bg); border:2px solid var(--faint); }
.vrel--head .vrel__node{ border-color:var(--amber); background:var(--amber); box-shadow:0 0 0 4px var(--amber-dim); }
.vrel__body{ padding:0 0 clamp(34px,4vw,52px) clamp(18px,2vw,30px); }
.vrel:last-child .vrel__body{ padding-bottom:4px; }
.vrel__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px 14px; margin-bottom:13px; }
.vrel__tag{ font-family:var(--mono); font-weight:600; font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink); border:1px solid var(--line-2); border-radius:5px; padding:4px 9px; }
.vrel__tag--head{ color:#13110b; background:var(--amber); border-color:var(--amber); }
.vrel__year{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--faint); letter-spacing:var(--ls-meta); }
.vrel__branch{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); font-weight:600; letter-spacing:var(--ls-micro); color:var(--amber); border:1px solid var(--amber); border-radius:4px; padding:3px 7px; }
.vrel__name{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); color:var(--ink); margin:0; flex:1 1 100%; }
.vrel__text{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); max-width:64ch; margin:0 0 16px; text-wrap:pretty; }
.vrel__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.vchip{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); color:var(--ink-2); border:1px solid var(--line); border-radius:5px; padding:5px 10px; background:var(--bg); }

/* "А сайты?" — honest policy callout */
.about__note{ position:relative; border:1px solid var(--line-2); border-left:3px solid var(--amber); border-radius:8px; padding:clamp(22px,2.6vw,32px); background:var(--panel); margin-bottom:clamp(36px,4vw,52px); }
.about__note-tag{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--amber); margin-bottom:12px; }
.about__note p{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); margin:0; max-width:70ch; text-wrap:pretty; }

.about__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.about__btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:600; font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); cursor:pointer; background:var(--amber); color:#13110b; padding:13px 20px; border-radius:6px; transition:filter .15s; }
.about__btn:hover{ filter:brightness(1.08); }
.about__btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); font-weight:500; }
.about__btn--ghost:hover{ filter:none; border-color:var(--amber); color:var(--amber); }

@media(max-width:720px){
  .about__lede{ grid-template-columns:1fr; gap:26px; }
}

/* who we work with — sectors register */
.about__sub{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); max-width:62ch; margin:0 0 28px; }
.sectors{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:clamp(36px,4vw,52px); }
.sector{ background:var(--bg); padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; }
.sector__no{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--amber); letter-spacing:var(--ls-micro); }
.sector__name{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); color:var(--ink); margin:0; text-wrap:balance; }
.sector__cl{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); color:var(--faint); margin-top:auto; }
@media(max-width:880px){ .sectors{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media(max-width:520px){ .sectors{ grid-template-columns:1fr; } }

/* focus variant — two big sectors with descriptions */
.sectors--focus{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.sectors--focus .sector{ padding:26px 26px 28px; gap:11px; }
.sectors--focus .sector__cl{ margin-top:0; letter-spacing:0.08em; }
.sector__txt{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); margin:6px 0 0; text-wrap:pretty; }
/* clickable sectors */
a.sector{ text-decoration:none; cursor:pointer; transition:background .15s; outline:none; }
a.sector:hover, a.sector:focus-visible{ background:var(--panel); }
a.sector:focus-visible{ box-shadow:inset 0 0 0 2px var(--amber); }
.sector__go{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); color:var(--faint); transition:color .15s, transform .15s; }
a.sector:hover .sector__go, a.sector:focus-visible .sector__go{ color:var(--amber); transform:translateX(3px); }
@media(max-width:680px){ .sectors--focus{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICES — реестр направлений (services.ts)
   ============================================================ */
.srv{ }
/* the "export" sub-head sits a touch tighter to the register */
.srv .rule-head--sub{ margin-top:clamp(40px,5vw,68px); margin-bottom:0; }

/* register of service entries — hairline-separated rows */
.srv-reg{ border-top:1px solid var(--line); }
.srv-item{ padding:clamp(34px,4vw,52px) 0; border-bottom:1px solid var(--line); }

/* mono signature line — reads like a typed export */
.srv-sig{ display:flex; align-items:baseline; gap:14px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; margin-bottom:clamp(20px,2.4vw,30px); }
.srv-no{ color:var(--amber); font-weight:600; flex:none; }
.srv-slug{ color:var(--ink); flex:none; }
.srv-tag{ color:var(--faint); letter-spacing:var(--ls-micro); text-transform:uppercase; font-size:var(--fs-micro); line-height:var(--lh-micro); flex:none; }
.srv-ln{ flex:1; height:1px; background:var(--line-2); align-self:center; }

/* two-column body — name + description / "что входит" list */
.srv-row{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); column-gap:clamp(40px,6vw,88px); align-items:start; }
.srv-name{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); color:var(--ink); margin:0 0 16px; }
.srv-name .amber{ color:var(--amber); }
.srv-desc{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); max-width:46ch; margin:0; text-wrap:pretty; }
.srv-stack{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink-2); margin-top:22px; }
.srv-stack .k{ color:var(--faint); letter-spacing:0.06em; margin-right:9px; }

.srv-aside__h{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.srv-list{ list-style:none; margin:0; padding:0; }
.srv-list li{ position:relative; padding:13px 0 13px 22px; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); text-wrap:pretty; }
.srv-list li:last-child{ border-bottom:0; }
.srv-list li::before{ content:""; position:absolute; left:2px; top:19px; width:6px; height:6px; background:var(--amber); border-radius:1px; }

/* AI flagship entry — amber left edge, like the active tree item */
.srv-item--ai{ border-left:2px solid var(--amber); padding-left:clamp(22px,2.5vw,34px); margin-left:calc(-1 * clamp(22px,2.5vw,34px)); }
.srv-item--ai .srv-slug{ color:var(--amber); }
.srv-bridge{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); font-weight:600; color:var(--amber); border-bottom:1px solid var(--amber-dim); padding-bottom:3px; cursor:pointer; transition:border-color .15s, transform .15s; }
.srv-bridge:hover{ border-bottom-color:var(--amber); transform:translateX(2px); }

/* 03 — how we work: numbered cycle */
.srv .about__sub{ margin-top:18px; }
.srv-flow{ list-style:none; margin:8px 0 clamp(40px,5vw,60px); padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.srv-step{ background:var(--bg); padding:24px 22px 28px; display:flex; flex-direction:column; gap:9px; }
.srv-step__no{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; color:var(--amber); letter-spacing:var(--ls-meta); }
.srv-step__nm{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); color:var(--ink); margin:2px 0 0; }
.srv-step__tx{ font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); margin:0; text-wrap:pretty; }

@media(max-width:900px){
  .srv-row{ grid-template-columns:1fr; row-gap:30px; }
  .srv-desc{ max-width:62ch; }
  .srv-flow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:560px){
  .srv-sig{ flex-wrap:wrap; gap:8px 12px; }
  .srv-sig .srv-ln{ display:none; }
  .srv-flow{ grid-template-columns:1fr; }
}

/* ============================================================
   PORTFOLIO — архив-стеллаж (portfolio.json)
   ============================================================ */
.pf{ }

/* type tokens — simple geometric objects per project type */
.tok{ width:24px; height:24px; position:relative; flex:none; display:inline-block; color:inherit; }
.tok--web{ border:1.5px solid currentColor; border-radius:2px; }
.tok--web::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:currentColor; }
.tok--int{ background:linear-gradient(currentColor,currentColor) 50% 50%/12px 1.5px no-repeat; }
.tok--int::before{ content:""; position:absolute; left:0; top:7px; width:10px; height:10px; border:1.5px solid currentColor; border-radius:50%; }
.tok--int::after{ content:""; position:absolute; right:0; top:7px; width:10px; height:10px; border:1.5px solid currentColor; border-radius:50%; }
.tok--data{ background:
  linear-gradient(currentColor,currentColor) 2px 100%/4px 55% no-repeat,
  linear-gradient(currentColor,currentColor) 10px 100%/4px 100% no-repeat,
  linear-gradient(currentColor,currentColor) 18px 100%/4px 78% no-repeat; }
.tok--ai{ border:1.5px solid currentColor; border-radius:3px; }
.tok--ai::before{ content:""; position:absolute; inset:5px; border:1.5px solid currentColor; border-radius:1px; }
.tok--mob{ width:16px; height:24px; border:1.5px solid currentColor; border-radius:3px; margin:0 4px; }
.tok--mob::before{ content:""; position:absolute; top:3px; left:50%; transform:translateX(-50%); width:6px; height:1.5px; background:currentColor; }
.tok--infra{ width:18px; height:18px; border:1.5px solid currentColor; transform:rotate(45deg); margin:3px; }
.tok--infra::before{ content:""; position:absolute; inset:4px; border:1.5px solid currentColor; }

/* legend */
.pf-legend{ display:flex; flex-wrap:wrap; gap:16px 26px; margin:clamp(24px,3vw,38px) 0 28px; padding:16px 18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.pf-leg{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); color:var(--ink-2); }
.pf-leg .tok{ color:var(--faint); }

/* cabinet frame */
.cab{ position:relative; border:1px solid var(--line); border-radius:11px; background:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel) 65%, var(--bg))); padding:0 clamp(14px,2vw,28px); margin-top:6px; }
.cab__cornice, .cab__base{ height:10px; margin:0 calc(-1 * clamp(14px,2vw,28px)); background:linear-gradient(180deg, color-mix(in oklab,var(--line-2) 55%, var(--panel)), var(--panel)); }
.cab__cornice{ border-bottom:1px solid var(--line); border-radius:11px 11px 0 0; }
.cab__base{ border-top:1px solid var(--line-2); border-radius:0 0 11px 11px; }

/* shelf */
.shelf{ scroll-margin-top:14px; padding:clamp(22px,2.6vw,32px) 0 0; }
.shelf__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; font-family:var(--mono); }
.shelf__no{ color:var(--amber); font-size:var(--fs-meta); line-height:var(--lh-meta); font-weight:600; flex:none; }
.shelf__nm{ font-family:var(--sans); font-weight:600; font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); color:var(--ink); margin:0; }
.shelf__ln{ flex:1; height:1px; background:var(--line-2); align-self:center; min-width:20px; }
.shelf__ct{ color:var(--faint); font-size:var(--fs-meta); line-height:var(--lh-meta); flex:none; }

.shelf__rack{ position:relative; }
.shelf__row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); column-gap:clamp(10px,1.2vw,16px); row-gap:24px; align-items:start; padding-bottom:16px;
  background:repeating-linear-gradient(180deg,
    transparent 0 132px,
    var(--line-2) 132px 139px,
    rgba(0,0,0,.34) 139px 142px,
    transparent 142px 156px); }
.shelf__plank{ display:none; }

/* project box — file box standing on the shelf */
.box{ all:unset; box-sizing:border-box; cursor:pointer; height:132px; display:flex; flex-direction:column; gap:6px; padding:15px 15px 13px; position:relative; background:linear-gradient(180deg, color-mix(in oklab,var(--panel) 80%, var(--bg)), var(--panel)); border:1px solid var(--line-2); border-radius:4px 4px 2px 2px; box-shadow:0 2px 0 rgba(0,0,0,.28); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.box__lid{ position:absolute; top:0; left:0; right:0; height:7px; background:color-mix(in oklab,var(--ink-2) 30%, var(--panel)); border-radius:4px 4px 0 0; transition:background .18s ease; }
.box__tok{ margin-bottom:3px; color:var(--faint); transition:color .18s ease; }
.box__client{ font-family:var(--sans); font-weight:600; font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); color:var(--ink); }
.box__title{ font-family:var(--sans); font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--ink-2); flex:1; text-wrap:pretty; }
.box__meta{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); color:var(--faint); text-transform:uppercase; }
.box:hover, .box:focus-visible, .box.active{ transform:translateY(-7px); border-color:var(--amber); box-shadow:0 15px 24px -11px rgba(0,0,0,.62); }
.box:hover .box__lid, .box:focus-visible .box__lid, .box.active .box__lid{ background:var(--amber); }
.box:hover .box__tok, .box:focus-visible .box__tok, .box.active .box__tok{ color:var(--amber); }

/* dossier — expands inline under the shelf */
.dossier{ display:none; }
.dossier.open{ display:block; }
.dossier.open .dossier__inner{ animation:dosIn .32s ease both; }
@keyframes dosIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.dossier__inner{ min-height:0; }
.dossier__grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr); gap:clamp(26px,4vw,56px); padding:26px 2px 30px; border-bottom:1px solid var(--line); }
.dossier__field{ margin-bottom:18px; }
.dossier__field:last-child{ margin-bottom:0; }
.dossier__h{ display:block; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.dossier__field p{ margin:0; font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); max-width:56ch; text-wrap:pretty; }
.dossier__shot{ height:124px; border:1px solid var(--line); border-radius:6px; background:repeating-linear-gradient(135deg, var(--panel), var(--panel) 7px, transparent 7px, transparent 14px); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin-bottom:18px; }
.dossier__stack{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); color:var(--ink-2); margin-bottom:18px; }
.dossier__stack .k{ color:var(--faint); margin-right:8px; }
.dossier__metric{ display:block; font-family:var(--sans); font-weight:600; font-size:var(--fs-h5); line-height:var(--lh-h5); letter-spacing:var(--ls-h5); color:var(--amber); }

.pf-note{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--faint); letter-spacing:var(--ls-micro); margin:22px 0 0; }

@media(max-width:560px){
  .shelf__row{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); }
  .dossier__grid{ grid-template-columns:1fr; gap:8px; }
  .pf-legend{ gap:12px 18px; }
}

/* ============================================================
   PORTFOLIO — реестр / ведомость (registry)
   ============================================================ */
.reg-tools{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 16px; font-family:var(--mono); }
.reg-tools__lbl{ font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); margin-right:2px; }
.reg-sort{ appearance:none; cursor:pointer; background:transparent; padding:5px 12px; border:1px solid var(--line-2); border-radius:6px; color:var(--ink-2); font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); letter-spacing:var(--ls-meta); transition:color .14s ease, background .14s ease, border-color .14s ease; }
.reg-sort:hover{ color:var(--ink); }
.reg-sort.on{ color:#15130c; background:var(--amber); border-color:var(--amber); }

.reg__cols, .reg__row{ display:grid; grid-template-columns:42px 54px minmax(140px,1.9fr) minmax(90px,0.85fr) minmax(108px,1fr) minmax(96px,0.85fr) 24px; align-items:center; gap:16px; }
.reg__cols{ padding:0 18px 11px; font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line-2); }
.reg__ind{ font-family:var(--sans); font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.reg{ border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-top:2px; }
.reg__group{ border-bottom:1px solid var(--line); }
.reg__group:last-child{ border-bottom:0; }
.reg__row{ padding:13px 18px; min-height:56px; cursor:pointer; transition:background .14s ease; }
.reg__row:hover{ background:color-mix(in oklab, var(--amber) 8%, transparent); }
.reg__row.active{ background:var(--amber-dim); }
.reg__no{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--faint); }
.reg__y{ font-family:var(--mono); font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--ink-2); }
.reg__c{ min-width:0; }
.reg__c b{ font-family:var(--sans); font-weight:600; font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--ink); letter-spacing:var(--ls-meta); }
.reg__t{ display:block; font-family:var(--sans); font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--ink-2); margin-top:2px; text-wrap:pretty; }
.reg__ty{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--ink-2); }
.reg__ty .tok{ color:var(--faint); }
.reg__stk{ font-family:var(--mono); font-size:var(--fs-micro); line-height:var(--lh-micro); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reg__arr{ justify-self:end; color:var(--faint); font-size:var(--fs-h5); line-height:1; transition:transform .18s ease, color .18s ease; }
.reg__row:hover .reg__arr{ color:var(--amber); }
.reg__row.active .reg__arr{ color:var(--amber); transform:rotate(90deg); }

/* dossier inside the registry row */
.reg .dossier{ display:none; padding:0 18px; }
.reg .dossier.open{ display:block; }
.reg .dossier .dossier__grid{ border-bottom:0; border-top:1px dashed var(--line-2); padding:24px 0 26px; }

@media(max-width:820px){
  .reg__cols{ display:none; }
  .reg__row{ grid-template-columns:46px 1fr auto; grid-auto-rows:auto; row-gap:5px; column-gap:12px; min-height:0; }
  .reg__no{ grid-row:1; grid-column:1; }
  .reg__c{ grid-row:1; grid-column:2; }
  .reg__arr{ grid-row:1; grid-column:3; align-self:start; }
  .reg__y{ grid-row:2; grid-column:1; }
  .reg__ind{ grid-row:2; grid-column:2; }
  .reg__ty{ grid-row:3; grid-column:2; }
  .reg__stk{ grid-row:4; grid-column:2; }
}