/* ============================================================
   Büro 901 — site skin (visual override layer)
   Loaded AFTER ide.css. Touches ONLY the look of homepage content.
   Mechanics (scroll, gwx, sticky works, sort), markup and text untouched.
   Scoped to .home so other pages (about/services/portfolio) stay as-is.
   ============================================================ */
/* Geist Sans (readable) + Geist Mono (chrome/meta-micro) — единственные две гарнитуры по типо-спеке (Basement). */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root{
  /* ШРИФТ заголовков + главных абзацев = Geist Sans (= base --sans). */
  --bm-display:var(--sans);
  --bm-ink:#f2f1ef;

  /* ===== Шрифты по типо-спеке: читаемое — Geist Sans, хром/тех-подписи — Geist Mono.
     (Раньше скин ставил --mono тоже в "Geist" sans — возвращаем mono к Geist Mono
     ради meta/micro IDE-хромировки.) */
  --ui:var(--sans);
  --mono:"Geist Mono", ui-monospace, monospace;
  --faint:#757575;

  /* ===== DEEP-BLACK GROUND (turn) — весь сайт в чёрный =====
     Переопределяем фоновые токены базового ide.css. Каркас IDE и весь контент
     читают эти переменные, поэтому одна перекраска меняет ВЕСЬ сайт.
     Сохранена МИКРО-ступень яркости, чтобы хром не сплющился в одно пятно:
     хром/канвас — чистый чёрный, активная вкладка и приподнятые карточки/плашка
     чуть выше чёрного. Откат к графиту — вернуть прежние значения ниже.
     Было: bg #0e1014 · side #0a0c0f · act #07080a · tab #0a0c0f · tab-on #0e1014 · panel #12151a */
  --bg:#000000;            /* editor + контент-карточки */
  --bg-side:#000000;       /* проводник */
  --bg-act:#000000;        /* активити-бар + тайтлбар */
  --bg-tab:#000000;        /* лента вкладок */
  --bg-tab-on:#0c0c0e;     /* активная вкладка — едва приподнята */
  --panel:#101014;         /* плашки/ховеры — приподняты над чёрным */

  /* ===== АКЦЕНТ (turn) — заменён янтарь на оранжево-красный по запросу клиента.
     ОТКАТ к янтарю: убрать эти 2 строки (база в ide.css = oklch(0.82 0.12 80)). */
  --accent:#FF4D00;
  --amber:#FF4D00;
}

/* ---- SECTION HEADER — Unbounded face + "NN  //  TITLE ————" on EVERY page ----
   flex order rebuilds the row without touching HTML:
   [n] → [//] → [title] → [trailing line] → [meta]               */
.rule-head .t{ font-family:var(--bm-display); font-weight:400; letter-spacing:0.06em; order:2;
  margin-left:-0.85em; }
.rule-head .n{ order:0; }
.rule-head::before{ content:"//"; order:1; font-family:var(--mono); font-size:0.875rem;
  color:var(--ink-2); letter-spacing:0.04em; align-self:center; }
.rule-head .ln{ display:none; }
.rule-head .n2{ order:4; }
.rule-head::after{ content:none; }

/* ---- SERVICES — restored bordered cards (display face on titles) ---- */
.home .spec-card{ padding:26px 24px 28px; }
.home .spec-card .nm{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:1.5625rem; line-height:1.06; letter-spacing:-0.015em; color:var(--bm-ink); margin:18px 0 12px; }
.home .spec-card:hover{ border-color:var(--line-2); }
.home .spec-card:hover .nm{ color:#757575; }
.home .spec-card .txt{ color:var(--ink-2); }

/* wide AI card keeps its original bordered look + two-col steps mechanic */
.home #b-services .spec-card--tall{ margin-top:18px; border-left:1px solid var(--line-2); }
.home .spec-card--tall .nm{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:2.375rem; letter-spacing:-0.02em; }
.home .spec-card--tall:hover{ border-color:var(--line-2); border-left:1px solid var(--line-2); }

/* ---- TRUST — Basement-style borderless logo wall ---- */
/* Basement hero lead: big headline + paragraph above the "Trusted by" label */
.home #b-trust .trust-hero{ margin:0 0 clamp(56px,9vh,120px); }
/* DESKTOP base (≥1024px). Tight vertical set: line-height < font-size on purpose. */
.home #b-trust .trust-hero__title{
  margin:0; font-family:var(--sans),Arial,sans-serif; font-weight:600;
  font-size:5.4375rem; line-height:4.875rem; letter-spacing:-0.04em;
  text-align:left; text-transform:none;
  color:#E6E6E6; text-wrap:balance;
  max-width:calc(100% * 11 / 12); }
.home #b-trust .trust-hero__lead{
  margin:1rem 0 0; font-family:var(--sans),Arial,sans-serif; font-weight:600;
  font-size:1.25rem; line-height:1.25rem; letter-spacing:-0.02em;
  color:#E6E6E6; text-wrap:balance; max-width:60%; }
@media (max-width:1023px){
  .home #b-trust .trust-hero__title{ font-size:2.875rem; line-height:2.45rem; }
  .home #b-trust .trust-hero__lead{ font-size:1rem; line-height:1rem; max-width:none; }
}
@media (min-width:1920px){
  .home #b-trust .trust-hero__title{ font-size:6.125rem; line-height:5.5rem; }
}

/* bare grey sticky header (no IDE number/slash), pins to top of .editor */
.home #b-trust .trust-head{
  position:sticky; top:0; z-index:10;
  margin:0; background:var(--bg);
  margin-inline:calc(-1 * clamp(40px,5vw,92px));
  padding-left:clamp(40px,5vw,92px); padding-right:clamp(40px,5vw,92px);
  padding-top:24px; padding-bottom:16px;
  font-family:var(--sans); font-weight:600;
  font-size:1.5rem; line-height:1.5rem; letter-spacing:-0.03em;
  color:#757575; text-align:left; text-transform:none; }

/* heading colours: "Доверяют" muted, "визионеры" bright; client-name swap on cell hover */
.home #b-trust .trust-head .th-pre{ color:#757575; }
.home #b-trust .trust-head .th-hl{ position:relative; display:inline-block; color:#E6E6E6; }
.home #b-trust .trust-head .th-word{ transition:opacity .25s ease-out; }
.home #b-trust .trust-head .th-client{
  position:absolute; left:0; top:0; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  opacity:0; transition:opacity .25s ease-out; }
.home #b-trust .trust-head .th-arrow{ display:inline-flex; align-items:center; }
.home #b-trust .trust-head .th-arrow svg{ width:16px; height:16px; display:block; }
.home #b-trust .trust-head.is-hover .th-word{ opacity:0; }
.home #b-trust .trust-head.is-hover .th-client{ opacity:1; }

.home .trust-grid{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr));
  gap:12px;
  background:transparent !important; border:0 !important; border-radius:0 !important; overflow:visible; }
/* dim siblings while any cell is hovered */
.home .trust-grid.has-active .trust-cell{ opacity:0.55; }
.home .trust-grid.has-active .trust-cell:hover{ opacity:1; }
/* cell = link, fixed 202:110 ratio, clips the hatch overlay */
.home .trust-cell{ position:relative; display:flex; aspect-ratio:202/110; min-height:0; padding:0;
  overflow:hidden; background:transparent !important; border:0 !important; border-radius:0 !important;
  cursor:pointer; text-decoration:none; opacity:1; transition:opacity .3s ease; }
.home .trust-cell:hover{ background:transparent !important; }
/* hover hatch — 45° diagonal lines, fades in 300ms, crawls 6s linear (behind logo) */
.home .trust-cell::before{ content:""; position:absolute; inset:-48px; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  background-image:url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ffffff' stroke-opacity='.10'%3E%3Cpath d='M-27 27 91-91M-27 35 91-83M-27 43 91-75M-27 51 91-67M-27 59 91-59M-27 67 91-51M-27 75 91-43M-27 83 91-35M-27 91 91-27M-27 99 91-19M-27 107 91-11M-27 115 91-3M-27 123 91 5M-27 131 91 13M-27 139 91 21M-27 147 91 29M-27 155 91 37'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px; background-repeat:repeat; }
.home .trust-cell:hover::before{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  .home .trust-cell:hover::before{ animation:tw-hatch 6s linear infinite; }
}
@keyframes tw-hatch{ from{ background-position:0 0; } to{ background-position:64px 0; } }
/* inner wrapper — relative, fills cell, centres logo, 8px side gutters */
.home .trust-cell__in{ position:relative; z-index:1; width:100%; height:100%; padding:0 8px;
  display:flex; align-items:center; justify-content:center; }
/* layer 1 — faint full frame */
.home .trust-cell__in::after{ content:""; position:absolute; inset:0; z-index:2;
  border:1px solid rgba(230,230,230,0.2); border-radius:0; pointer-events:none; }
/* layer 2 — 4 bright corner pixels (top + bottom 1px lines, only ends opaque) */
.home .trust-cell__in::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(to right,#E6E6E6 0,#E6E6E6 1px,transparent 1px,transparent calc(100% - 1px),#E6E6E6 calc(100% - 1px),#E6E6E6 100%),
    linear-gradient(to right,#E6E6E6 0,#E6E6E6 1px,transparent 1px,transparent calc(100% - 1px),#E6E6E6 calc(100% - 1px),#E6E6E6 100%);
  background-size:100% 1px,100% 1px; background-position:left top,left bottom; background-repeat:no-repeat; }
/* logo — centred, object-fit contain, recoloured to #E6E6E6. viewBoxes are tight,
   so a single uniform size fills every cell evenly (old + new logos match) */
.home .trust-logo{ position:relative; z-index:1; max-width:74%; max-height:62%; width:auto; height:auto;
  object-fit:contain; filter:brightness(0) invert(0.902); }
.home .trust-logo--wide{ max-width:86%; max-height:40%; }
.home .trust-logo--n77{ max-width:58%; max-height:52%; }
.home .trust-logo.trust-logo--mono{ filter:brightness(0.902); }
.home .trust-logo--tall{ max-height:58%; }
.home .trust-cell, .home .trust-cell *{ cursor:default !important; }
/* widen trust hero + grid to full-bleed (match AI scene / works width) */
.home #b-trust .trust-hero,
.home #b-trust .trust-grid{
  margin-inline:calc(-1 * clamp(40px,5vw,92px));
  padding-inline:clamp(16px,2vw,28px); }
.home #b-trust .trust-head{
  padding-left:clamp(16px,2vw,28px); padding-right:clamp(16px,2vw,28px); }
@container (max-width:1280px){ .home .trust-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
@container (max-width:1024px){ .home .trust-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; } }
@container (max-width:760px){ .home .trust-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } }
@container (max-width:480px){ .home .trust-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } }

/* ---- WORKS — photo left, description fills the whole right column ---- */
/* drop the name/logo column; stretch the description across the right side
   in the main-paragraph face (Unbounded, bright) */
.home .wproj{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  grid-template-areas:"img desc" "img cat"; grid-template-rows:1fr auto; }
.home .wproj__name{ display:none; }
.home .wproj__desc{ grid-area:desc; align-self:start; padding-top:2px; max-width:none;
  font-family:var(--bm-display); font-weight:400; font-size:1.875rem;
  line-height:1.2; letter-spacing:-0.022em; color:var(--bm-ink); text-wrap:pretty; }
.home .wproj__cat{ grid-area:cat; align-self:end; }
@media(max-width:680px){
  .home .wproj{ grid-template-columns:1fr; grid-template-areas:"img" "desc" "cat";
    grid-template-rows:auto auto auto; }
}

/* ---- WORKS — remove the CASE badge + skeleton loader / fade-in for photos ---- */
.home .wproj__img .c{ display:none; }
/* shimmer skeleton sits behind the image while it loads */
.home .wproj__img--photo::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,
    var(--panel) 28%,
    color-mix(in srgb, var(--panel) 55%, #d7dae0 9%) 50%,
    var(--panel) 72%);
  background-size:220% 100%; animation:wskel 1.25s ease-in-out infinite; }
.home .wproj__img--photo img{ opacity:0; transition:opacity .55s ease; z-index:1; }
.home .wproj__img--photo.is-loaded img{ opacity:1; }
.home .wproj__img--photo.is-loaded::before{ animation:none; opacity:0; transition:opacity .45s ease; }
@keyframes wskel{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce){
  .home .wproj__img--photo::before{ animation:none; }
  .home .wproj__img--photo img{ transition:none; }
}

/* ---- PROCESS — keep original bordered cards (boxes), restore the grid gap ---- */
.home .proc{ gap:18px; }
.home .proc__step .num{ font-family:var(--bm-display); font-weight:600; font-size:3.25rem; }
.home .proc__step h3{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:1.25rem; letter-spacing:-0.01em; }

/* ---- STACK — borderless tag ledger ---- */
.home .stack{ background:transparent !important; border:0 !important; border-radius:0 !important; gap:0; }
.home .stack__group{ background:transparent !important; border:0 !important;
  grid-template-columns:200px 1fr; padding:clamp(16px,1.9vw,24px) 0; }
.home .chip{ border:0 !important; border-radius:0 !important; padding:0; color:var(--ink-2);
  font-size:0.8125rem; transition:color .18s; }
.home .stack__chips{ gap:8px 20px; }
.home .chip:hover{ color:var(--amber); }

/* ---- CONTACT — heavy wordmark already huge; unify face + keep it centred
   (Unbounded is wider than the mono it was tuned for, so cap the size to fit
   and let text-align centre it) ---- */
.home .contact-c__wm{ font-family:var(--bm-display); font-weight:900;
  font-size:min(40vh, calc((100cqw - 2 * clamp(40px,5vw,92px)) / 3.8)); line-height:1em; white-space:nowrap; text-align:center; width:100%;
  color:rgba(255,77,0,0.10); }   /* accent fill (client). Размер выведен из ШИРИНЫ КОНТЕНТА (100cqw editor − боковые padding) ÷ глиф-аспект 3.8 → надпись ВСЕГДА вписывается по ширине с малым зазором и максимально растянута на любом экране. Потолок 40vh — страховка по высоте. Вес 900 + размер — исключение по запросу клиента (остальной сайт ≤600, шкала). */

/* ---- COVER — claim set EXACTLY like a section-header title (size + tracking),
   but kept lighter (--ink) instead of the header's dimmed --ink-2 ---- */
.home .cover--split .cover__claim{ color:var(--ink-2);
  font-family:var(--bm-display); font-weight:400;
  font-size:0.75rem; letter-spacing:0.06em; line-height:1.5; }

/* ---- COVER — hero wordmark «Büro 901» in the display face (Unbounded).
   Unbounded's x-height sits lower than the mono's, so the capital B and the
   digits «901» are squeezed harder (--bs/--ds) to land on the lowercase
   x-height; only the B-stem and the ü-dots rise above. Gap before 901 kept
   narrow. Colour unchanged. ---- */
.home .cover--split .cover__name{
  font-family:var(--bm-display); font-weight:500;
  font-size:1.3125rem; color:#9499a1;
  --bs:0.77; --ds:0.76; letter-spacing:0.02em; }
.home .cover--split .cover__name .wm-d{ margin-left:0.14em; }

/* ---- WORKS — drop the divider hairline AND the top shadow seam between stacked bands ---- */
.home .wproj{ border-top:0 !important; box-shadow:none !important; }

/* ---- PAYMENT ORCHESTRATOR — drop the section divider lines ---- */
.home .bw3-diagram{ border-top:0 !important; padding-top:0 !important; }
.home .bw3-foot{ border-top:0 !important; padding-top:0 !important; }

/* ---- PAYMENT ORCHESTRATOR — give the lead paragraph more room, extending it
   left toward the title (title size unchanged; its column just narrows, never
   below the word width) ---- */
.home #b-bank .bw3-head{ grid-template-columns:1fr 1.18fr; }
.home #b-bank .bw3-head .gwhero__lead{ font-family:var(--bm-display); font-weight:400;
  font-size:1.875rem; line-height:1.2; letter-spacing:-0.022em;
  color:var(--bm-ink); max-width:30ch; text-wrap:balance; }
.home #b-bank .bw3-head .gwhero__lead .amber{ color:var(--amber); }
/* anchor the product title to the SECTION HEADER with a FIXED, screen-independent
   gap (px, not vw/clamp) so it never drifts when the tree panel slides in/out or
   between small/large screens. Title + lead both top-aligned → same start line. */
.home #b-bank .rule-head{ margin-bottom:44px; }
.home #b-bank .bw3-head{ align-items:start; }
/* lead's cap sits a hair lower than the heavy title cap; raise it a relative
   amount (em → scales with font size, works in every browser) so their top
   lines match. No text-box-trim (not widely supported → caused drift). */
.home #b-bank .bw3-head .gwhero__lead{ transform:translateY(-0.085em); }

/* AI gateway main paragraph — superseded by variant A (.gwa__lead) */

/* ---- PAYMENT ORCHESTRATOR — three benefits in one full-width row, CTA below ---- */
.home #b-bank .bw3-foot{ display:flex; flex-direction:column; align-items:stretch; gap:clamp(20px,2.4vw,30px); }
.home #b-bank .bw3-bens{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none;
  gap:clamp(18px,2.4vw,34px); }
.home #b-bank .bw3-foot .gwhero__more{ align-self:start; }
@media (max-width:760px){
  .home #b-bank .bw3-bens{ grid-template-columns:1fr; }
}

/* ---- PRODUCT TITLES inside Products section → display face, matched to Services name scale ---- */
.home .gwhero__nm{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:2.5rem; line-height:1.04; letter-spacing:-0.025em; }
.home .bw3-title{ font-family:var(--bm-display); font-weight:600; letter-spacing:-0.02em; }

/* ============================================================
   PRODUCTS · colour scene (final)
   • AI gateway  = solid brand amber, permanent. Tokens remapped to
     dark-on-amber so all text stays legible on the yellow field.
   • Bank panel  = always its base editor colour (var(--bg)); it does NOT
     recolour on slide-in — stays one dark colour the whole time.
   Slide / sticky-num / parallax mechanics untouched.
   ============================================================ */
/* AI gateway — variant A, transplanted as-is on the dark editor background */
.home #b-ai.gwx__panel{
  background:var(--bg) !important;          /* dark, like the canvas frame — no amber fill, no border */
}
/* bank: stays its base colour permanently — no recolour */
.home #b-bank.gwx__panel{
  background:var(--bg) !important;
}
.home #b-bank.gwx__panel::before{ display:none !important; }

/* ===== AI gateway · VARIANT A (витрина) ===== */
/* anchor the AI gateway title to the SECTION HEADER exactly like the orchestrator:
   the base rule `.gwx__panel .gwhero{ margin:auto 0 }` VERTICALLY CENTERS this
   block (orchestrator's .bw3 is not centered) — that was the whole divergence.
   Kill the centering, pin to top, fixed 44px gap.
   TITLE-ALIGNMENT CONTRACT (do not break): the AI title `.gwa__title` and the
   orchestrator title `.bw3-head .gwhero__nm` must share IDENTICAL metrics — same
   font (bm-display), weight 700, line-height 1.04, font-size clamp(22px,2.9vw,40px),
   and NO text-box-trim on either side. Same metrics + same 44px header gap + both
   containers top-aligned ⇒ both caps land on one line in every browser, no script.
   Trim was the old fragility: support is browser-dependent, so any side losing it
   dropped ~5px (Unbounded's tall cap gap). Keep it OFF on both. */
.home #b-ai .gwhero{ margin:0; padding-top:0; flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; gap:0; }
/* нижний НЕПРОЗРАЧНЫЙ слой: выгоды + подвал. Перекрывает уезжающее «300+» (z-index ниже),
   тянется до низа панели — число ныряет под него и не просвечивает, остаток режет overflow:hidden панели. */
.home #b-ai .gwa__lower{ position:relative; z-index:2; background:var(--bg);
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-end; }
.home #b-ai .rule-head{ margin-bottom:clamp(20px,4vh,56px); }
.home #b-ai .rule-head .rh-flag{ order:5; color:var(--amber); }
.home #b-ai .rule-head .rh-flag::before{ content:"· "; color:var(--ink-2); }
.home #b-ai .gwa__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(36px,4.5vw,72px); align-items:start; }
.home #b-ai .gwa__num{ grid-column:1; }
.home #b-ai .gwa__body{ grid-column:2 / -1; }
.home #b-ai .gwa__num{ font-family:var(--mono); font-weight:600; letter-spacing:-0.05em; line-height:0.82;
  color:var(--bm-ink); font-size:10.5rem; z-index:0; }
.home #b-ai .gwa__num small{ display:block; font-family:var(--mono); font-weight:500; font-size:0.14em;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); margin-top:14px; }
.home #b-ai .gwa__body{ min-width:0; display:flex; flex-direction:column; gap:22px; }
.home #b-ai .gwa__title{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-0.025em; line-height:1.04; color:var(--bm-ink); margin:0; font-size:2.5rem; }
  /* NB: НИКАКОГО text-box-trim — метрики совпадают с заголовком оркестратора .gwhero__nm (см. контракт выше). */
.home #b-ai .gwa__title .amber{ color:var(--amber); }
.home #b-ai .gwa__lead{ font-family:var(--bm-display); font-weight:400; letter-spacing:-0.022em;
  line-height:1.2; color:var(--bm-ink); margin:0; font-size:1.875rem; max-width:30ch; }
.home #b-ai .gwa__benes{ list-style:none; margin:0; padding:0; }
.home #b-ai .gwa__benes li{ display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--line); }
.home #b-ai .gwa__benes .bn{ font-family:var(--mono); font-size:0.6875rem; font-weight:600; color:var(--amber); }
.home #b-ai .gwa__benes .bt{ font-size:0.875rem; color:var(--ink); }
.home #b-ai .gwa__models{ font-family:var(--mono); font-size:0.78125rem; letter-spacing:0.03em; color:var(--ink-2); }
.home #b-ai .gwa__models .d{ color:var(--faint); margin:0 5px; }
.home #b-ai .gwa__foot{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:4px; }
.home #b-ai .gwa__cta{ display:inline-flex; align-items:center; font-family:var(--mono); font-weight:600;
  font-size:0.75rem; letter-spacing:0.05em; color:#13110b; background:var(--amber); border-radius:999px;
  padding:11px 18px; text-decoration:none; }
@media (max-width:820px){
  .home #b-ai .gwa__row{ grid-template-columns:1fr; gap:20px; }
  .home #b-ai .gwa__num{ grid-column:auto; }
  .home #b-ai .gwa__body{ grid-column:auto; }
}
@media (max-width:760px){
  .home #b-ai .gwa__row{ grid-template-columns:1fr; gap:20px; }
  .home #b-ai .gwa__num{ grid-column:auto; }
  .home #b-ai .gwa__body{ grid-column:auto; }
}

/* ── V4 · выгоды-сетка: 3 колонки, призрачная оранжевая цифра + текст ── */
.home #b-ai .gwa__blist{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(36px,4.5vw,72px); margin-top:auto; }
.home #b-ai .gwa__b{
  position:relative; padding-top:26px; border-top:1px solid var(--line-2); min-width:0; }
.home #b-ai .gwa__b .gh{
  position:absolute; right:0; top:8px; font-family:"Geist",sans-serif; font-weight:600;
  font-size:3.5rem; line-height:0.8; letter-spacing:-0.05em; color:rgba(255,77,0,0.14);
  pointer-events:none; }
.home #b-ai .gwa__b h4{
  margin:0; max-width:none; padding-right:64px; text-wrap:balance;
  font-family:"Geist",sans-serif; font-weight:600;
  font-size:1.5rem; line-height:2rem; letter-spacing:-0.02em; color:#C4C4C4; }
.home #b-ai .gwa__foot{ margin-top:0; padding-top:clamp(18px,2.4vh,40px); }
@media (max-width:1023px){
  .home #b-ai .gwa__blist{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,40px); margin-top:auto; }
  .home #b-ai .gwa__row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,40px); }
  .home #b-ai .gwa__num{ grid-column:1; }
  .home #b-ai .gwa__body{ grid-column:2 / -1; }
  .home #b-ai .gwa__b{ padding-top:20px; }
  .home #b-ai .gwa__b .gh{ font-size:2.75rem; }
  .home #b-ai .gwa__b h4{ font-size:1.25rem; line-height:1.625rem; padding-right:48px; }
}
@media (max-width:760px){
  .home #b-ai .gwa__blist{ grid-template-columns:1fr; gap:0; }
  .home #b-ai .gwa__b{ padding:20px 0; }
}

/* ---- Payment orchestrator · benefits 01–04 — plain numbers, same grey as «Платёжный» (no accent) ---- */
.home #b-bank .bw3-bens .bn{
  background:none; color:#757575;
  border-radius:0; padding:0; line-height:1; align-self:start;
  flex:none; font-size:0.71875rem; letter-spacing:0.04em; }

/* ---- ORCHESTRATOR hub wordmark «Büro 901» → split-span alignment (B & 901
   squeezed to the üro x-height, 901 a touch smaller & pulled closer) ---- */
.home #b-bank .bw3-orch{ border-color:var(--line-2); color:#757575;
  background:rgba(255,255,255,0.03); }   /* accent removed → grey like «Платёжный» (client) */
.home #b-bank .bw3-orch .orch-wm{ --bs:0.78; --ds:0.72; font-size:1.22em; display:inline-block; margin-top:0.16em; }
.home #b-bank .bw3-orch .orch-wm .wm-d{ margin-left:0.12em; }

/* ---- collapsible file tree: shell grid drops the sidebar track (desktop only) ---- */
@media(min-width:761px){
  .ide.tree-collapsed{ grid-template-columns:var(--act) 0 1fr; }
  .ide.tree-collapsed .sidebar{ display:none; }
}
/* active (tree visible) state for the repurposed toggle icon */
.activity #treeToggle{ cursor:pointer; }
.activity #treeToggle.on{ color:var(--amber); }
.activity #treeToggle.on::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:2px; background:var(--amber); border-radius:0 2px 2px 0; }

/* ============================================================
   SEARCH · Spotlight (macOS-style). One big centred, glowing search bar.
   No results list — Enter jumps to the best match (page or section).
   ⌘K / Ctrl+K toggles, Esc / backdrop closes.
   ============================================================ */
.palette{ position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start;
  justify-content:center; padding-top:24vh; }
.palette[hidden]{ display:none; }
.palette__scrim{ position:absolute; inset:0; background:rgba(6,7,9,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:palFade .16s ease; }
.palette__box{ position:relative; width:min(720px,92vw); background:rgba(22,25,30,0.92);
  border:1px solid var(--line-2); border-radius:18px; overflow:hidden;
  box-shadow:0 40px 110px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 80px -10px color-mix(in srgb, var(--amber) 32%, transparent);
  animation:palPop .18s cubic-bezier(.2,.8,.3,1); }
.palette__field{ display:flex; align-items:center; gap:18px; padding:24px 26px; }
.palette__field svg{ width:28px; height:28px; flex:none; stroke:var(--amber); fill:none; stroke-width:1.7; }
.palette__field input{ flex:1; min-width:0; background:none; border:0; outline:none;
  font-family:var(--ui); font-size:1.875rem; font-weight:500; color:var(--ink); letter-spacing:-0.02em; }
.palette__field input::placeholder{ color:var(--faint); font-weight:400; }
.palette__esc{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.08em; color:var(--faint);
  border:1px solid var(--line-2); border-radius:5px; padding:5px 8px; flex:none; }
.palette__results{ display:none; }
@keyframes palFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes palPop{ from{ opacity:0; transform:translateY(-10px) scale(0.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .palette__scrim,.palette__box{ animation:none; } }

/* ============================================================
   SUPPORT CHAT · full editor page (Claude-Code style)
   Covers the editor area below the tabs. Centred hero when empty,
   compact centred message column, contained composer box at the bottom.
   Stub auto-reply for now (engine plugs into sendReply later).
   ============================================================ */
.cpage{ position:absolute; left:0; right:0; top:var(--tabs); bottom:0; z-index:30;
  display:flex; flex-direction:column; background:var(--bg);
  animation:cpFade .18s ease; }
.cpage[hidden]{ display:none; }
.cpage__bar{ flex:none; display:flex; align-items:center; gap:14px; height:38px;
  padding:0 12px 0 20px; border-bottom:1px solid var(--line); }
.cpage__title{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-2); }
.cpage__online{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:0.625rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); }
.cpage__dot{ width:7px; height:7px; border-radius:50%; background:#5fb87a; box-shadow:0 0 0 3px rgba(95,184,122,0.18); }
.cpage__x{ margin-left:auto; background:none; border:0; color:var(--faint); cursor:pointer; padding:6px; border-radius:6px; display:flex; }
.cpage__x svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; }
.cpage__x:hover{ color:var(--ink); background:var(--panel); }
.cpage__new{ margin-left:auto; display:flex; align-items:center; gap:7px; background:none;
  border:1px solid var(--line-2); border-radius:7px; padding:6px 11px; cursor:pointer;
  font-family:var(--mono); font-size:0.65625rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); }
.cpage__new svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.cpage__new:hover{ border-color:var(--amber); color:var(--amber); }
.cpage__new + .cpage__x{ margin-left:0; }

.cpage__scroll{ flex:1; overflow-y:auto; display:flex; flex-direction:column; }
/* hero — centred logo + hint, shown while the log is empty */
.cpage__hero{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 24px; gap:22px; }
.cpage.has-msgs .cpage__hero{ display:none; }
.cpage__logo{ width:clamp(120px,16vw,190px); aspect-ratio:441.377 / 247.957;
  background:var(--amber); opacity:0.8;
  -webkit-mask:url(logo-901.svg) center / contain no-repeat;
  mask:url(logo-901.svg) center / contain no-repeat; }
.cpage__mark{ font-family:var(--bm-display); font-weight:500; font-size:2.875rem;
  color:var(--ink-2); --bs:0.78; --ds:0.74; letter-spacing:0.01em; }
.cpage__mark .wm-d{ margin-left:0.12em; }
.cpage__hint{ font-family:var(--ui); font-size:0.9375rem; line-height:1.55; color:var(--faint);
  max-width:46ch; margin:0; }
.cpage__hint .wm--inline{ --bs:0.82; --ds:0.78; font-weight:600; color:var(--ink-2); }
.cpage__hint .wm--inline .wm-d{ margin-left:0.1em; }

.cpage__log{ width:100%; max-width:760px; margin:0 auto; padding:26px 24px 8px;
  display:flex; flex-direction:column; gap:14px; }
.cpage.has-msgs .cpage__log{ flex:1; }
.cmsg{ max-width:80%; padding:12px 15px; border-radius:14px; font-size:0.90625rem; line-height:1.5;
  font-family:var(--ui); white-space:pre-wrap; }
.cmsg--bot{ align-self:flex-start; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-bottom-left-radius:5px; }
.cmsg--me{ align-self:flex-end; background:var(--amber); color:#13110b; border-bottom-right-radius:5px; }
.cmsg__meta{ display:block; margin-top:5px; font-family:var(--mono); font-size:0.59375rem; letter-spacing:0.06em;
  text-transform:uppercase; opacity:0.55; }

/* composer — contained, centred box (not full-width) */
.composer{ flex:none; padding:14px 24px 22px; }
.composer__box{ width:100%; max-width:760px; margin:0 auto; background:var(--bg-side);
  border:1px solid var(--line-2); border-radius:14px; padding:6px 6px 6px 16px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 10%, transparent),
    0 14px 34px -20px rgba(0,0,0,0.7); transition:border-color .15s, box-shadow .15s; }
.composer__box:focus-within{ border-color:color-mix(in srgb, var(--amber) 70%, var(--line-2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent), 0 14px 34px -18px rgba(0,0,0,0.7); }
.composer__box input{ width:100%; background:none; border:0; outline:none; padding:12px 4px 6px;
  font-family:var(--ui); font-size:0.96875rem; color:var(--ink); letter-spacing:-0.01em; }
.composer__box input::placeholder{ color:var(--faint); }
.composer__row{ display:flex; align-items:center; justify-content:space-between; padding:2px 2px 2px 0; }
.composer__hint{ font-family:var(--mono); font-size:0.65625rem; letter-spacing:0.06em; color:var(--faint); }
.composer__send{ flex:none; width:36px; height:36px; border:0; border-radius:9px; background:var(--amber);
  color:#13110b; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.composer__send svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.composer__send:hover{ filter:brightness(1.06); }

.activity #chatBtn.on{ color:var(--amber); }
.activity #chatBtn.on::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:2px;
  background:var(--amber); border-radius:0 2px 2px 0; }
@keyframes cpFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .cpage{ animation:none; } }

/* ---- sidebar swaps to a chat list while the chat page is open ---- */
.side-head--chats{ display:none; align-items:center; justify-content:space-between; }
.chatlist{ display:none; }
.ide.chat-mode #sideHeadOutline,
.ide.chat-mode #outline{ display:none; }
.ide.chat-mode .side-head--chats{ display:flex; }
.ide.chat-mode .chatlist{ display:block; }
.side-newchat{ width:22px; height:22px; flex:none; border:1px solid var(--line-2); border-radius:6px;
  background:none; color:var(--ink-2); font-size:0.9375rem; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; }
.side-newchat:hover{ border-color:var(--amber); color:var(--amber); }
.chatlist{ padding:6px 8px; }
.chatrow{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; cursor:pointer;
  color:var(--ink-2); }
.chatrow svg{ width:15px; height:15px; flex:none; stroke:var(--faint); fill:none; stroke-width:1.7; }
.chatrow__t{ font-family:var(--ui); font-size:0.8125rem; line-height:1.3; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.chatrow:hover{ background:var(--panel); }
.chatrow.on{ background:var(--panel); color:var(--ink); box-shadow:inset 2px 0 0 var(--amber); }
.chatrow.on svg{ stroke:var(--amber); }

/* ============================================================
   PORTFOLIO — NDA registry list + hover peek card (peek = orchestrator-hub colour)
   Namespaced .preg/.prow/.ppeek to avoid ide.css .reg/.row collisions.
   ============================================================ */
/* ---- top intro lead in the brand display face (Unbounded) — matches Services big lead ---- */
.pf .about__lead{ font-family:var(--bm-display); font-weight:400;
  font-size:2.0625rem; line-height:1.16; letter-spacing:-0.022em;
  color:var(--bm-ink); max-width:30ch; text-wrap:balance;
  margin:clamp(4px,1vw,12px) 0 clamp(30px,3.6vw,46px); }
.pf .about__lead b{ font-weight:600; color:var(--bm-ink); }
.pf .preg-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 22px; }
.pf .preg-tools__lbl{ font-family:var(--mono); font-size:0.625rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); margin-right:4px; }
.pf .preg-sort{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.03em; color:var(--ink-2);
  background:transparent; border:1px solid var(--line-2); border-radius:7px; padding:6px 12px; cursor:pointer; }
.pf .preg-sort:hover{ border-color:var(--amber); color:var(--ink); }
.pf .preg-sort.on{ background:var(--amber); color:#13110b; border-color:var(--amber); }

.pf .preg{ border-top:1px solid var(--line-2); }
.pf .prow{ position:relative; display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:24px;
  align-items:center; padding:18px 4px; border-bottom:1px solid var(--line); cursor:default;
  transition:padding-left .18s ease, background .12s ease; }
.pf .pgut{ font-family:var(--mono); font-size:0.75rem; color:var(--faint); text-align:right; padding-right:14px;
  border-right:1px solid var(--line); align-self:stretch; display:flex; align-items:center; justify-content:flex-end;
  transition:color .15s; }
.pf .prow:hover{ padding-left:18px; background:rgba(215,218,224,0.04); }
.pf .prow:hover::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber); }
.pf .prow:hover .pgut{ color:var(--ink); }
.pf .prow:focus-visible{ outline:1px solid var(--amber); outline-offset:-1px; }

.pf .pmid{ min-width:0; display:flex; flex-direction:column; gap:7px; }
.pf .pnameline{ display:flex; align-items:center; gap:14px; min-width:0; }
.pf .pname{ font-family:var(--bm-display); font-weight:500; font-size:1.25rem;
  letter-spacing:-0.015em; color:var(--ink); white-space:nowrap; line-height:1; }
.pf .pname--open{ transition:color .15s; }
.pf .prow:hover .pname--open{ color:var(--bm-ink); }
.pf .popen{ font-family:var(--mono); font-size:0.5625rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--line-2); border-radius:999px; padding:3px 8px; flex:none; }
/* redaction bar — solid marker with NDA stamp */
.pf .predact{ position:relative; height:22px; border-radius:2px; flex:none; align-self:center;
  background:#08090b; box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink),transparent 62%); transition:background .15s, box-shadow .15s; }
.pf .predact::after{ content:"NDA"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:0.5625rem; letter-spacing:0.22em; color:var(--ink-2); }
.pf .prow:hover .predact{ background:#101216; box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--amber),transparent 55%); }
.pf .prow:hover .predact::after{ color:var(--amber); }
.pf .ptag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:0.5625rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); flex:none; }
.pf .ptag .tok{ width:7px; height:7px; border-radius:50%; flex:none; }
.pf .pprofile{ font-family:var(--mono); font-size:0.75rem; color:var(--faint); letter-spacing:0.02em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf .pprofile em{ font-style:normal; color:var(--ink-2); }
.pf .pyear{ font-family:var(--bm-display); font-weight:600; font-size:0.875rem; color:var(--ink-2);
  align-self:center; transition:color .15s; }
.pf .prow:hover .pyear{ color:var(--ink); }

/* peek card — VARIANT A «Редакционный»: tonal panel, hairline border, single amber
   tick, project NAME small/muted, the SCOPE line is the hero at lead size, ghost year. */
.ppeek{ position:fixed; z-index:120; width:clamp(360px,32vw,460px); pointer-events:none;
  background:var(--panel); border:1px solid var(--line-2); border-radius:14px;
  padding:26px 26px 24px; box-shadow:0 26px 70px -22px rgba(0,0,0,0.88); overflow:hidden;
  opacity:0; transform:translateY(8px) scale(.985); transition:opacity .13s ease, transform .13s ease; }
.ppeek.above{ transform:translateY(-8px) scale(.985); }
.ppeek.show{ opacity:1; transform:translateY(0) scale(1); }
.ppeek__yr{ position:absolute; top:8px; right:20px; font-family:var(--bm-display); font-weight:600;
  font-size:3.25rem; line-height:1; color:var(--bm-ink); opacity:.06; letter-spacing:-.02em; }
.ppeek__bar{ position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:0.65625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:15px; }
.ppeek__tick{ width:18px; height:2px; background:var(--amber); flex:none; }
.ppeek__bar b{ color:var(--ink-2); font-weight:500; }
.ppeek .pk-nda{ color:var(--amber); }
.ppeek .pk-title{ font-family:var(--bm-display); font-weight:600; font-size:0.90625rem; line-height:1.25;
  letter-spacing:-.005em; color:var(--ink-2); margin:0 0 14px; }
.ppeek .pk-scope{ font-family:var(--bm-display); font-weight:400; font-size:1.4375rem; line-height:1.22;
  letter-spacing:-.018em; color:var(--bm-ink); margin:0 0 22px; text-wrap:pretty; }
.ppeek__rows{ display:flex; flex-direction:column; }
.ppeek__r{ display:grid; grid-template-columns:100px 1fr; gap:16px; padding:11px 0;
  border-top:1px solid var(--line); align-items:baseline; }
.ppeek__r:last-child{ border-bottom:1px solid var(--line); }
.ppeek__r h5{ margin:0; font-family:var(--mono); font-size:0.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:500; }
.ppeek__r p{ margin:0; font-size:0.84375rem; color:var(--ink); line-height:1.4; }

@media (max-width:760px){
  .pf .prow{ grid-template-columns:30px minmax(0,1fr) auto; gap:13px; }
  .pf .pgut{ padding-right:9px; }
  .pf .pnameline{ flex-wrap:wrap; gap:9px; }
  .ppeek{ display:none !important; }
}

/* ---- V2 enlarged editorial rows — task name is the big element, client/type as meta ---- */
.pf .prow{ align-items:start; padding:clamp(20px,2.5vw,30px) 4px; }
.pf .prow .pgut{ align-self:stretch; align-items:flex-start; padding-top:6px; }
.pf .pmid{ gap:12px; }
.pf .pmeta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-width:0; }
.pf .pmeta .pprofile{ flex:none; overflow:visible; text-overflow:clip; white-space:nowrap; }
.pf .pclient{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase;
  white-space:nowrap; flex:none; }
.pf .pclient--open{ color:var(--ink-2); }
.pf .prow:hover .pclient--open{ color:var(--amber); }
.pf .pclient--nda{ color:var(--faint); }
.pf .pname2{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:2.5rem; line-height:1.04; letter-spacing:-0.025em;
  color:var(--bm-ink); margin:0; text-wrap:balance; transition:transform .26s cubic-bezier(.2,.8,.2,1); }
.pf .prow:hover .pname2{ transform:translateX(9px); }
.pf .pyear{ align-self:start; padding-top:5px; }
@media (max-width:760px){
  .pf .pmeta{ gap:9px; }
}

/* ============================================================
   ABOUT (about.md) — editorial language.
   Stock-photo hero removed (markup). Page opens on a typographic
   hero, the version history becomes a bold changelog, the meta and
   focus card pick up the borderless / display vocabulary. Scoped
   to .about so .home and other pages are untouched.
   ============================================================ */

/* ---- TYPOGRAPHIC HERO — display headline + supporting lead + meta ledger ---- */
.about .about__lede{ display:block; margin-bottom:clamp(54px,6.5vw,98px); }
.about .about__h{ font-family:var(--bm-display); font-weight:400;
  font-size:2.0625rem; line-height:1.26; letter-spacing:-0.022em;
  color:var(--bm-ink); margin:clamp(6px,1vw,14px) 0 clamp(18px,2vw,26px); max-width:32ch; text-wrap:balance; }
.about .about__h .wm{ font-weight:400; --bs:0.77; --ds:0.76; white-space:nowrap; }
.about .about__h .wm .wm-d{ margin-left:0.14em; }
.about .about__lead{ font-family:var(--bm-display); font-weight:400;
  font-size:2.0625rem; line-height:1.16; letter-spacing:-0.022em; color:var(--bm-ink);
  max-width:34ch; margin:0 0 clamp(34px,4vw,52px); text-wrap:balance; }
.about .about__lead b{ color:var(--ink); font-weight:600; }

.about .about__meta{ display:flex; flex-direction:row; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line-2); padding-top:0; }
.about .amark{ flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-start; gap:11px; padding:clamp(18px,2vw,24px) clamp(28px,3.4vw,54px) 0 0;
  margin-right:clamp(28px,3.4vw,54px); border-bottom:0; border-right:1px solid var(--line); }
.about .amark:last-child{ border-right:0; margin-right:0; padding-right:0; }
.about .amark .k{ font-size:0.625rem; letter-spacing:0.18em; }
.about .amark .v{ font-family:var(--bm-display); font-weight:600;
  font-size:1.375rem; letter-spacing:-0.01em; color:var(--ink); }
.about .amark .v.amber{ color:var(--amber); }
@media(max-width:560px){
  .about .amark{ flex:1 1 100%; border-right:0; margin-right:0; padding:14px 0;
    border-bottom:1px solid var(--line); flex-direction:row; align-items:baseline;
    justify-content:space-between; gap:14px; }
  .about .amark:last-child{ border-bottom:0; }
}

/* ---- VERSION HISTORY — bold changelog rhythm (big years, display names) ---- */
.about .vlog{ margin:0 0 clamp(52px,6.5vw,84px); }
.about .vrel{ grid-template-columns:48px 1fr; }
.about .vrel__rail::before{ width:2px; background:var(--line); }
.about .vrel__node{ width:13px; height:13px; margin-top:10px; border-color:var(--line-2); }
.about .vrel--head .vrel__node{ width:15px; height:15px; margin-top:14px;
  border-color:var(--amber); background:var(--amber); box-shadow:0 0 0 5px var(--amber-dim); }
.about .vrel__body{ padding-bottom:clamp(42px,4.8vw,64px); padding-left:clamp(22px,2.6vw,38px); }
.about .vrel__head{ align-items:baseline; gap:13px 16px; margin-bottom:14px; }
.about .vrel__tag{ font-size:0.6875rem; font-weight:600; letter-spacing:0.05em;
  color:var(--ink-2); border-color:var(--line-2); border-radius:999px; padding:4px 11px; }
.about .vrel--head .vrel__tag--head{ color:#13110b; background:var(--amber); border-color:var(--amber); }
.about .vrel__year{ font-family:var(--bm-display); font-weight:600;
  font-size:2.625rem; letter-spacing:-0.015em; color:var(--ink-2); line-height:0.92; }
.about .vrel--head .vrel__year{ color:var(--amber); }
.about .vrel__branch{ align-self:center; }
.about .vrel__name{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:2.5rem; line-height:1.04; letter-spacing:-0.025em;
  color:var(--bm-ink); margin-top:5px; }
.about .vrel__text{ font-size:1.03125rem; line-height:1.6; max-width:66ch; }
.about .vchip{ font-size:0.6875rem; letter-spacing:0.04em; border-radius:999px; padding:5px 11px;
  background:transparent; color:var(--faint); }

/* ---- FOCUS — display cards (Fintech + Agriculture) ---- */
.about .about__sub{ font-family:var(--ui); font-size:1.125rem; color:var(--ink-2);
  max-width:60ch; margin:0 0 clamp(22px,2.6vw,32px); }
.about .sectors--focus{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,1.7vw,22px);
  background:transparent; border:0; border-radius:0; overflow:visible; }
.about .sectors--focus .sector{ background:var(--bg); border:1px solid var(--line-2);
  border-radius:14px; padding:clamp(26px,3vw,42px); gap:14px; transition:background .15s, border-color .15s; }
.about a.sector:hover, .about a.sector:focus-visible{ background:var(--panel); border-color:var(--amber); box-shadow:none; }
.about .sector__no{ font-size:0.6875rem; letter-spacing:0.12em; }
.about .sector__name{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:2.5rem; line-height:1.02; letter-spacing:-0.028em; color:var(--bm-ink); }
.about a.sector:hover .sector__name, .about a.sector:focus-visible .sector__name{ color:var(--amber); }
.about .sector__cl{ font-size:0.75rem; letter-spacing:0.1em; color:var(--amber); }
.about .sector__txt{ font-size:1rem; line-height:1.6; color:var(--ink-2);
  max-width:60ch; margin-top:8px; }
.about .sector__go{ margin-top:20px; font-size:0.75rem; letter-spacing:0.08em; white-space:nowrap; }
@media(max-width:680px){ .about .sectors--focus{ grid-template-columns:1fr; } }

/* ---- CTA — Unbounded labels to match the type system ---- */
.about .about__cta{ margin-top:clamp(8px,1.4vw,18px); }

/* ============================================================
   SERVICES (services.ts) — editorial language.
   Typographic overview, the 7 directions as a bold editorial
   register (display names + mono signatures + amber ticks), the AI
   direction lifted as the amber flagship, and a big-number work
   cycle. Scoped to .srv so other pages stay untouched.
   ============================================================ */

/* ---- 01 · OVERVIEW — display lead + horizontal meta ledger ---- */
.srv .about__lede{ display:block; margin-bottom:clamp(50px,6vw,86px); }
.srv .about__lead{ font-family:var(--bm-display); font-weight:400;
  font-size:2.0625rem; line-height:1.16; letter-spacing:-0.022em;
  color:var(--bm-ink); max-width:27ch; text-wrap:balance;
  margin:clamp(4px,1vw,12px) 0 clamp(30px,3.6vw,46px); }
.srv .about__lead b{ font-weight:600; color:var(--bm-ink); }
.srv .about__meta{ display:flex; flex-direction:row; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line-2); padding-top:0; }
.srv .amark{ flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding:clamp(18px,2vw,24px) clamp(28px,3.4vw,54px) 0 0; margin-right:clamp(28px,3.4vw,54px);
  border-bottom:0; border-right:1px solid var(--line); }
.srv .amark:last-child{ border-right:0; margin-right:0; padding-right:0; }
.srv .amark .k{ font-size:0.625rem; letter-spacing:0.18em; }
.srv .amark .v{ font-family:var(--bm-display); font-weight:600; font-size:1.375rem;
  letter-spacing:-0.01em; color:var(--ink); }
.srv .amark .v.amber{ color:var(--amber); }
@media(max-width:560px){
  .srv .amark{ flex:1 1 100%; border-right:0; margin-right:0; padding:14px 0;
    border-bottom:1px solid var(--line); flex-direction:row; align-items:baseline;
    justify-content:space-between; gap:14px; }
  .srv .amark:last-child{ border-bottom:0; }
}

/* ---- 02 · DIRECTIONS — expandable editorial register ---- */
.srv-reg{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.srv-item{ padding:0; border-bottom:1px solid var(--line); }
.srv-item:last-child{ border-bottom:0; }
.srv-slug{ color:var(--ink-2); }

/* collapsed header — mono signature + oversized display name + toggle */
.srv-head{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; column-gap:clamp(18px,3vw,40px);
  padding:clamp(24px,3.2vw,42px) 0; background:none; border:0; color:inherit;
  font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.srv-head .srv-sig{ grid-column:1 / -1; margin:0 0 clamp(13px,1.5vw,20px); }
.srv-name{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:2.5rem; line-height:1.04; letter-spacing:-0.025em;
  color:var(--bm-ink); margin:0; grid-column:1; align-self:center;
  transition:color .25s, transform .4s cubic-bezier(.2,.8,.2,1); }
.srv-toggle{ grid-column:2; align-self:center; justify-self:end; position:relative;
  width:clamp(30px,3.2vw,38px); height:clamp(30px,3.2vw,38px); flex:none;
  border:1px solid var(--line-2); border-radius:999px;
  transition:border-color .25s, transform .4s cubic-bezier(.2,.8,.2,1); }
.srv-toggle::before, .srv-toggle::after{ content:""; position:absolute; left:50%; top:50%;
  background:var(--ink-2); transition:background .25s; }
.srv-toggle::before{ width:12px; height:1.5px; transform:translate(-50%,-50%); }
.srv-toggle::after{ width:1.5px; height:12px; transform:translate(-50%,-50%); }

.srv-head:hover .srv-name{ transform:translateX(10px); }
.srv-head:hover .srv-toggle{ border-color:var(--amber); }
.srv-head:hover .srv-toggle::before, .srv-head:hover .srv-toggle::after{ background:var(--amber); }

/* expand mechanic — JS-driven height (reliable across runtime toggles) */
.srv-body{ height:0; overflow:hidden;
  transition:height .44s cubic-bezier(.2,.8,.2,1); }
.srv-body .srv-row{ padding-bottom:clamp(30px,3.6vw,50px); }
.srv-item.open .srv-toggle{ transform:rotate(135deg); border-color:var(--amber); }
.srv-item.open .srv-toggle::before, .srv-item.open .srv-toggle::after{ background:var(--amber); }
.srv-aside__h{ letter-spacing:0.18em; }

/* AI flagship — amber edge + soft amber wash + pill bridge */
.srv-item--ai{ margin-left:0; padding-left:0; border-left:0;
  box-shadow:inset 2px 0 0 var(--amber); background:linear-gradient(90deg,
  color-mix(in srgb, var(--amber) 11%, transparent), transparent 72%); }
.srv-item--ai .srv-name{ color:var(--bm-ink); }
.srv-item--ai .srv-name .amber{ color:var(--amber); }
.srv-item--ai .srv-toggle{ border-color:color-mix(in srgb, var(--amber) 55%, transparent); }
.srv-item--ai .srv-toggle::before, .srv-item--ai .srv-toggle::after{ background:var(--amber); }
.srv-bridge{ background:var(--amber); color:#13110b; border:0; border-radius:999px;
  padding:11px 18px; font-family:var(--mono); font-weight:600; font-size:0.71875rem;
  letter-spacing:0.06em; margin-top:26px; white-space:nowrap; }
.srv-bridge:hover{ filter:brightness(1.06); transform:none; border:0; }

/* ---- 03 · WORK CYCLE — big display step numbers ---- */
.srv-step{ padding:26px 22px 30px; gap:7px; }
.srv-step__no{ font-family:var(--bm-display); font-weight:600; line-height:1;
  font-size:2.875rem; letter-spacing:-0.01em; color:var(--amber); }
.srv-step__nm{ font-family:var(--bm-display); font-weight:600; text-transform:uppercase;
  font-size:1.125rem; line-height:1.12; letter-spacing:-0.01em; margin-top:8px; }

/* ---- CTA ---- */
.srv .about__cta{ margin-top:clamp(8px,1.4vw,18px); }

/* ============================================================
   TYPOGRAPHY SPEC (turn) — Geist 600 type scale, breakpoint 1024px.
   ⚠️ НА ПРОБУ. ОТКАТ = удалить ВЕСЬ этот блок (от маркера до конца файла)
   + бамп cache. Три роли по спеке клиента; вес РОВНО 600, трекинг
   отрицательный, интерлиньяж ≤ кегля — намеренно (постерный вид).
   Продуктовые панели #b-ai/#b-bank ИСКЛЮЧЕНЫ (горизонтальная сцена +
   встроенный вордмарк — ломать нельзя).
   ============================================================ */

/* ── РОЛЬ 1 · ЗАГОЛОВОК СЕКЦИИ — крупный дисплейный ──
   desktop 76/68/-0.04em · mobile 35/36/-0.03em · 600 · без caps, без "//" */
.home .block > .rule-head,
.about .rule-head.sec,
.srv   .rule-head.sec,
.pf    .rule-head.sec{
  font-family:"Geist", sans-serif; font-weight:600; text-transform:uppercase;
  font-size:1.25rem; line-height:1.375rem; letter-spacing:0;
  gap:0; align-items:baseline; margin-bottom:clamp(20px,2.2vw,30px); }
.home .block > .rule-head .n,
.about .rule-head.sec .n,
.srv   .rule-head.sec .n,
.pf    .rule-head.sec .n{
  font-family:inherit; font-weight:600; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; color:var(--amber); }   /* section number = orange kicker (client) */
.home .block > .rule-head .t,
.about .rule-head.sec .t,
.srv   .rule-head.sec .t,
.pf    .rule-head.sec .t{
  font-family:inherit; font-weight:600; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; color:#C4C4C4; text-transform:uppercase; order:2; margin-left:0; }   /* section title #C4C4C4 (client) */
.home .block > .rule-head::before,
.about .rule-head.sec::before,
.srv   .rule-head.sec::before,
.pf    .rule-head.sec::before{
  content:"//"; order:1; font-family:"Geist",sans-serif; font-weight:600;
  font-size:1.25rem; line-height:1.375rem; letter-spacing:0; color:#C4C4C4;
  align-self:baseline; margin-left:0.32em; margin-right:0.14em; }

/* секц.шапка «04 Продукты бюро» живёт ВНУТРИ .gwx__panel (не direct-child .block),
   роль-1 её не ловила — дублируем явно. Номер #757575, заголовок #E6E6E6,
   «//» и «· флагман» (.rh-flag, был акцентным) скрыты — как 02/03. */
.home #b-ai > .rule-head{
  font-family:"Geist", sans-serif; font-weight:600; text-transform:uppercase;
  font-size:1.25rem; line-height:1.375rem; letter-spacing:0;
  gap:0; align-items:baseline; margin-bottom:clamp(20px,2.2vw,30px); }
.home #b-ai > .rule-head .n{
  font-family:inherit; font-weight:600; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; color:var(--amber); }
.home #b-ai > .rule-head .t{
  font-family:inherit; font-weight:600; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; color:#C4C4C4; text-transform:uppercase; order:2; margin-left:0; }
.home #b-ai > .rule-head::before{
  content:"//"; order:1; font-family:"Geist",sans-serif; font-weight:600;
  font-size:1.25rem; line-height:1.375rem; letter-spacing:0; color:#C4C4C4;
  align-self:baseline; margin-left:0.32em; margin-right:0.14em; }
.home #b-ai > .rule-head .ln,
.home #b-ai > .rule-head .rh-flag{ display:none; }
.home .block > .rule-head .ln,
.about .rule-head.sec .ln,
.srv   .rule-head.sec .ln,
.pf    .rule-head.sec .ln,
.home .block > .rule-head .n2,
.about .rule-head.sec .n2,
.srv   .rule-head.sec .n2,
.pf    .rule-head.sec .n2{ display:none; }

/* ── РОЛЬ 2 · ЗАГОЛОВОК БЛОКА — карточные тайтлы (мелкий приглушённый лейбл) ──
   desktop 24/24/-0.03em · mobile 20/20/-0.03em · 600 · без caps · medium grey */
.home .spec-card .nm,
.home .spec-card--tall .nm{
  font-family:"Geist", sans-serif; font-weight:600; text-transform:none;
  font-size:1.5rem; line-height:1.5rem; letter-spacing:-0.03em; color:#757575; margin:16px 0 12px; }
.home .spec-card:hover .nm,
.home .spec-card--tall:hover .nm{ color:#757575; }
/* числа карточек (03.x) и теги — тоже medium grey по иерархии */
.home .spec-card .no,
.home .spec-card--tall .no,
.home .spec-card .tag{ color:#757575; }

/* ── ТЕГИ → залитые чипы (референс клиента) ──
   графитовая плашка, светлый текст, скругление ~8px. JS бьёт "·"-строку
   на .tg-чипы (см. <script> в HTML). NB: класс .chip уже занят шагами 03.5 → используем .tg. */
/* ── ТЕГИ → квадратные плашки (TAG/PILL SPEC клиента) ──
   flex-wrap, gap 4px; плашка #2E2E2E, БЕЗ скругления/бордера/тени, padding 0 4px,
   width fit-content, одна строка (ellipsis). Текст Geist 600 #E6E6E6,
   desktop 13/16 ls0 · mobile 12/16 ls0 (трекинг РОВНО 0). JS бьёт "·" на .tg. */
.home .spec-card .tag{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.home .spec-card .tag .tg{
  font-family:"Geist", sans-serif; font-weight:600; font-size:0.8125rem; line-height:1rem;
  letter-spacing:0; text-transform:none; color:#E6E6E6;
  background:#2E2E2E; border:none; border-radius:0; padding:0 4px;
  width:fit-content; max-width:100%; flex:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── ЕДИНЫЙ ВИД ТЕГОВ-ПИЛЮЛЬ (референс клиента) на ВСЕХ страницах ──
   залитая графитовая плашка #2E2E2E, светлый текст, скругление 6px.
   Услуги (.srv-tag → чипы через JS) + чейнджлог О-бюро (.vchip). */
.srv .srv-sig .srv-tag{ display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; }
.srv .srv-sig .srv-tag .tg,
.about .vrel__chips .vchip{
  font-family:"Geist", sans-serif; font-weight:600; font-size:0.8125rem; line-height:1rem;
  letter-spacing:0; text-transform:none; color:#E6E6E6;
  background:#2E2E2E; border:none; border-radius:0; padding:0 4px;
  width:fit-content; max-width:100%; flex:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.about .vrel__chips{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }

/* ── ШАГИ 03.5 (01 Бизнес-логика / 02 Данные / 03 Сценарий) → Geist ──
   под-пункты внутри карточки: мельче её заголовка(24)/тела(38). 600, плотно. */
.home .spec-card--tall .ai-step__nm{
  font-family:"Geist", sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#757575; margin:3px 0 5px; }
.home .spec-card--tall .ai-step__tx{
  font-family:"Geist", sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#C4C4C4; }

/* ── 03.5 «Внедрение ИИ» → компоновка C: full-bleed на всю ширину окна, влево, 76px ── */
.home #b-services .spec-card--c{
  display:flex; flex-direction:column; align-items:stretch; text-align:left;
  gap:20px; padding:44px clamp(16px,2vw,28px);
  margin-inline:calc(-1 * clamp(40px,5vw,92px));
  border:0; border-left:0; }
.home .spec-card--c .tallc-head{
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  padding-bottom:18px; border-bottom:1px solid var(--line); }
.home .spec-card--c .tallc-head .no{ margin:0; }
.home .spec-card--c .tallc-head .nm{ margin:0; }
.home .spec-card--c .tallc-head .tag{ margin-left:0; }
.home #b-services .spec-card--c .txt{
  margin:0; max-width:none; text-align:left;
  font-family:"Geist",sans-serif; font-weight:600; font-size:4.75rem; line-height:4.25rem;
  letter-spacing:-0.04em; color:#C4C4C4; }
@media (max-width:1023px){
  .home #b-services .spec-card--c .txt{ font-size:2.1875rem; line-height:2.25rem; letter-spacing:-0.03em; }
}
@media (max-width:680px){
  .home .spec-card--c .tallc-head{ flex-wrap:wrap; justify-content:flex-start; }
  .home .spec-card--c .tallc-head .tag{ margin-left:0; width:auto; }
}

/* ── РОЛЬ 3 · ГЛАВНЫЙ АБЗАЦ — крупное описание под заголовком ──
   desktop 38/36/-0.04em · mobile 24/24/-0.03em · 600 */
.home .spec-card .txt,
.home .wproj__desc,
.about .about__lead,
.srv   .about__lead,
.pf    .about__lead{
  font-family:"Geist", sans-serif; font-weight:600;
  font-size:2.375rem; line-height:2.25rem; letter-spacing:-0.04em; color:#C4C4C4; }   /* light grey body */
.home .spec-card .txt{ color:#C4C4C4; margin-top:18px; max-width:none; }

@media (max-width:1023px){
  .home .block > .rule-head,
  .about .rule-head.sec,
  .srv   .rule-head.sec,
  .pf    .rule-head.sec{ font-size:1.25rem; line-height:1.375rem; letter-spacing:0; }
  .home .spec-card .nm,
  .home .spec-card--tall .nm{ font-size:1.25rem; line-height:1.25rem; letter-spacing:-0.03em; }
  .home .spec-card .tag .tg,
  .srv .srv-sig .srv-tag .tg,
  .about .vrel__chips .vchip{ font-size:0.75rem; line-height:1rem; letter-spacing:0; }
  .home .spec-card .txt,
  .home .wproj__desc,
  .about .about__lead,
  .srv   .about__lead,
  .pf    .about__lead{ font-size:1.5rem; line-height:1.5rem; letter-spacing:-0.03em; }
}

/* ── РОЛИ для продуктовых панелей 04 (#b-ai / #b-bank) — ТОЛЬКО ЦВЕТ ──
   Шрифт уже Geist (глобальный своп). Размеры/метрики заголовков НЕ трогаем —
   действует TITLE-ALIGNMENT CONTRACT (см. выше): .gwa__title и .gwhero__nm
   должны остаться идентичными по метрикам, иначе разъедется сцена.
   Приводим к грей-иерархии: заголовки #E6E6E6, лиды/тело #C4C4C4. */
.home #b-ai .gwa__title,
.home #b-ai .gwa__num,
.home .gwhero__nm,
.home #b-bank .bw3-title{ color:#E6E6E6; }
.home #b-ai .gwa__lead,
.home #b-bank .bw3-head .gwhero__lead{ color:#C4C4C4; }
.home #b-ai .gwa__benes .bt{ color:#C4C4C4; }

/* ============================================================
   CONTENT TYPE NORMALIZATION (turn) — ВЕСЬ контент-текст сведён к
   4 размерам {87 · 38 · 24 · 20} (моб <1024: {35 · 24 · 20 · 20}),
   вес РОВНО 600, серые #E6E6E6 / #C4C4C4 / #757575. Единый источник
   правды для контента, перекрывает старые clamp/веса.
   ИСКЛЮЧЕНИЯ (НЕ трогаем): крупные цифры (.gwa__num «300+», .proc__step .num,
   .srv-step__no, оранжевые номера списков .bn), чипы-теги .tg, вордмарки
   (.cover__name, .contact-c__wm, .orch-wm, .about__h .wm), оболочка IDE.
   ОТКАТ = удалить весь этот блок.
   ============================================================ */

/* — продуктовые ЗАГОЛОВКИ = ПЛАКАТ 76/68/-0.04 (моб 35/36/-0.03), #E6E6E6,
   БЕЗ акцента (гасим .amber внутри). Оба одинаковы → TITLE-ALIGNMENT CONTRACT цел.
   Лиды остаются 38/36 (#C4C4C4) — главный абзац. */
.home #b-ai .gwa__title,
.home #b-bank .bw3-title .gwhero__nm{
  font-family:"Geist",sans-serif; font-weight:600; font-size:4.75rem; line-height:4.25rem;
  letter-spacing:-0.04em; color:#757575; text-transform:none; }
.home #b-ai .gwa__title .amber,
.home #b-bank .bw3-title .gwhero__nm .amber{ color:#E6E6E6; }
.home #b-ai .gwa__lead,
.home #b-bank .bw3-head .gwhero__lead{
  font-family:"Geist",sans-serif; font-weight:600; font-size:2.375rem; line-height:2.25rem;
  letter-spacing:-0.04em; color:#C4C4C4; }

/* — 24 · ЗАГОЛОВКИ блоков (#757575) — */
.srv-step__nm,
.home #b-bank .bw3-title .gwhero__sub{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.5rem; line-height:1.5rem;
  letter-spacing:-0.03em; color:#757575; }

/* ПРОЦЕСС (по правке клиента): ЗАГОЛОВОК шага = 20 #757575, ТЕКСТ = 24 #C4C4C4 */
.home .proc__step h3{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#757575; }
.home .proc__step p{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1.5rem;
  letter-spacing:-0.02em; color:#C4C4C4; }

/* номера карточек 03.1/03.2 → 20 #757575 (мелкий лейбл, из набора) */
.home .spec-card .no,
.home .spec-card--tall .no{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#757575; }

/* — 20 · списки / подписи / ноды / шаги / чипы (#C4C4C4 текст, #757575 лейбл) — */
.home #b-ai .gwa__benes .bt,
.home #b-bank .bw3-bens .bt,
.srv-step__tx,
.home #b-bank .bw3-node,
.home #b-bank .bw3-banks .bk{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#C4C4C4; }
/* CTA-ссылки/кнопки → размер 20, цвет НЕ трогаем (своя заливка/акцент) */
.home #b-ai .gwa__cta,
.home #b-bank .gwhero__more,
.home .sec-more,
.pf .sec-more{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1;
  letter-spacing:-0.02em; }
/* Контакты: email — 24 #C4C4C4; телефон/адрес — 20 #757575 */
.home .contact-c__mail{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.5rem; line-height:1.5rem;
  letter-spacing:-0.03em; color:#C4C4C4; }
.home .contact-c__tel,
.home .contact-c__meta{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#757575; }
.home #b-ai .gwa__models,
.home #b-ai .gwa__num small,
.home #b-bank .bw3-node small,
.home .wproj__cat,
.about .vrel__text,
.about .about__sub,
.srv .about__sub{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#757575; }
.home #b-ai .gwa__benes .bt,
.home #b-bank .bw3-bens .bt,
.home .proc__step p,
.srv-step__tx,
.about .vrel__text{ color:#C4C4C4; }

/* мобайл <1024: 38→24, 24→20, 20 без изменений */
@media (max-width:1023px){
  .home #b-ai > .rule-head{ font-size:1.25rem; line-height:1.375rem; letter-spacing:0; }
  .home #b-ai .gwa__title,
  .home #b-bank .bw3-title .gwhero__nm{ font-size:2.1875rem; line-height:2.25rem; letter-spacing:-0.03em; }
  .home #b-ai .gwa__lead,
  .home #b-bank .bw3-head .gwhero__lead{ font-size:1.5rem; line-height:1.5rem; letter-spacing:-0.03em; }
  .home .proc__step h3,
  .srv-step__nm,
  .home #b-bank .bw3-title .gwhero__sub{ font-size:1.25rem; line-height:1.25rem; letter-spacing:-0.03em; }
}

/* ============================================================
   МИКРО-ТИР + ФИНАЛЬНАЯ НОРМАЛИЗАЦИЯ (turn) — Geist 600 на ВЕСЬ
   контент, размеры строго {87 · 76 · 38 · 24 · 20 · микро 12}.
   Согласованные исключения НЕ трогаем (крупные цифры 700/800,
   .tg-чипы, вордмарки, оболочка IDE). Каждое правило задаёт
   только family/weight/size/lh/ls — цвета/капс/трекинг-кикеры
   сохраняются как были. ОТКАТ = удалить блок до конца файла.
   ============================================================ */

/* — МИКРО · 12 / 600 (тех-подписи · таблица-реестр · обложка · CTA · мета) — */
.home .cover--split .cover__meta,
.home .cover--split .cover__claim,
.home .cover--split .cover__dim .lbl,
.home .cover--split .cover__loc,
.home .cover--split .cover__lang button,
.pf .pgut,
.pf .pclient,
.pf .ptag,
.pf .pprofile,
.pf .pyear,
.ppeek .pk-title,
.ppeek__bar,
.ppeek__r h5,
.ppeek .pk-client,
.ppeek .pk-role,
.ppeek .pk-stack,
.srv .srv-no,
.srv .srv-slug,
.srv .srv-tag,
.srv .srv-stack,
.srv .srv-stack .k,
.srv .srv-bridge,
.about .about__meta .k,
.about .about__meta .v,
.srv .about__meta .k,
.srv .about__meta .v,
.about .vrel__tag,
.about .vrel__branch,
.about .vchip,
.about .sector__no,
.about .sector__cl,
.about .about__btn,
.about .about__btn .ru,
.about .about__btn .en,
.about .rule-head--sub .n2,
.pf .rule-head--sub .n2,
.srv .rule-head--sub .n2{
  font-family:"Geist",sans-serif; font-weight:600; font-size:0.75rem; }
.home .cover--split .cover__dim .lbl b{ font-weight:600; }

/* — 20 · ТЕЛО / описания (читаемое многострочное — lh 26) — */
.srv .srv-desc,
.about .sector__txt,
.about .about__lead,
.about .vrel__text,
.ppeek .pk-scope{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem;
  line-height:1.625rem; letter-spacing:-0.02em; }

/* — 38 · ЛИДЫ / крупные заголовки-утверждения / годы версий / имена услуг — */
.about .about__h,
.srv .about__lead,
.pf .about__lead,
.srv .srv-name,
.about .vrel__year{
  font-family:"Geist",sans-serif; font-weight:600; font-size:2.375rem;
  line-height:2.25rem; letter-spacing:-0.04em; }

/* — 24 · ЗАГОЛОВКИ блоков / имена версий / имена проектов / секторы / сабхеды — */
.about .vrel__name,
.pf .pname2,
.about .sector__name,
.about .rule-head--sub .t,
.pf .rule-head--sub .t,
.srv .rule-head--sub .t{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.5rem;
  line-height:1.5rem; letter-spacing:-0.03em; }

/* мобайл <1024 : 38→24 · 24→20 (микро 12 и тело 20 без изменений) */
@media (max-width:1023px){
  .about .about__h,
  .srv .about__lead,
  .pf .about__lead,
  .srv .srv-name,
  .about .vrel__year{ font-size:1.5rem; line-height:1.5rem; letter-spacing:-0.03em; }
  .about .vrel__name,
  .pf .pname2,
  .about .sector__name,
  .about .rule-head--sub .t,
  .pf .rule-head--sub .t,
  .srv .rule-head--sub .t{ font-size:1.25rem; line-height:1.25rem; letter-spacing:-0.03em; }
}

/* ── ХВОСТЫ нормализации (turn) ────────────────────────────── */
/* #b-bank шапка «04 Продукты бюро» = как #b-ai (87/35) */
.home #b-bank > .rule-head{
  font-family:"Geist",sans-serif; font-weight:600; text-transform:uppercase;
  font-size:1.25rem; line-height:1.375rem; letter-spacing:0;
  gap:0; align-items:baseline; margin-bottom:clamp(20px,2.2vw,30px); }
.home #b-bank > .rule-head .n{
  font-family:inherit; font-weight:600; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; color:var(--amber); }
.home #b-bank > .rule-head .t{
  font-family:inherit; font-weight:600; font-size:inherit; line-height:inherit;
  letter-spacing:inherit; color:#C4C4C4; text-transform:uppercase; order:2; margin-left:0; }
.home #b-bank > .rule-head::before{
  content:"//"; order:1; font-family:"Geist",sans-serif; font-weight:600;
  font-size:1.25rem; line-height:1.375rem; letter-spacing:0; color:#C4C4C4;
  align-self:baseline; margin-left:0.32em; margin-right:0.14em; }
.home #b-bank > .rule-head .ln{ display:none; }

/* МИКРО · 12/600 — хвосты (работы-плейсхолдеры · услуги-аside · CTA услуг ·
   мета портфолио · тулбар · file-теги заглушек · подпись «в разработке») */
.home .wproj__img .c,
.home .wproj__img .pl,
.home .wproj__img .pl .ru,
.home .wproj__img .pl .en,
.srv .srv-aside__h,
.srv .about__btn,
.srv .about__btn .ru,
.srv .about__btn .en,
.pf .about__meta .k,
.pf .about__meta .v,
.pf .preg-tools__lbl,
.pf .pf-note,
.pf .pf-note .ru,
.pf .pf-note .en,
.pf .preg-sort,
.pf .preg-sort .ru,
.pf .preg-sort .en,
.home .bw3-orch .ru,
.home .bw3-orch .en,
.doc .tagn,
.doc .soon p,
.doc .soon p .ru,
.doc .soon p .en{
  font-family:"Geist",sans-serif; font-weight:600; font-size:0.75rem; }

/* 20/600 — списки «что входит» */
.srv .srv-list li,
.srv .srv-list li .ru,
.srv .srv-list li .en{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem;
  line-height:1.625rem; letter-spacing:-0.02em; }

/* 38/600 — имена работ (featured-карточки) */
.home .wproj__name,
.home .wproj__name .ru,
.home .wproj__name .en{
  font-family:"Geist",sans-serif; font-weight:600; font-size:2.375rem;
  line-height:2.25rem; letter-spacing:-0.04em; }
/* 24/600 — заголовки страниц-заглушек */
.doc .soon h2,
.doc .soon h2 .ru,
.doc .soon h2 .en{
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.5rem;
  line-height:1.5rem; letter-spacing:-0.03em; }

@media (max-width:1023px){
  .home #b-bank > .rule-head{ font-size:1.25rem; line-height:1.375rem; letter-spacing:0; }
  .home .wproj__name,
  .home .wproj__name .ru,
  .home .wproj__name .en{ font-size:1.5rem; line-height:1.5rem; letter-spacing:-0.03em; }
  .doc .soon h2,
  .doc .soon h2 .ru,
  .doc .soon h2 .en{ font-size:1.25rem; line-height:1.25rem; letter-spacing:-0.03em; }
}

/* ── Услуги · главный верхний лид → 76px, на всю ширину (как «Внедрение ИИ») ── */
.srv .about__lede .about__lead{
  font-family:"Geist",sans-serif; font-weight:600;
  font-size:3.5rem; line-height:3.25rem; letter-spacing:-0.04em; color:#C4C4C4;
  max-width:none; text-wrap:balance; }
@media (max-width:1023px){
  .srv .about__lede .about__lead{ font-size:2.1875rem; line-height:2.25rem; letter-spacing:-0.03em; }
}

/* ============================================================
   LINK HOVER · «.actionable» — flicker + underline fade-in + glow (turn)
   Применяется к ТЕКСТОВЫМ ссылкам контента (CTA, email/тел).
   НЕ применяется к: кнопкам с фоном (.about__btn/.gwa__cta/.srv-bridge),
   оболочке IDE, логотипу, тегам. Имя проекта — свой arrow-hover.
   ============================================================ */
@keyframes link-blink{
  0%,20%,60%,100%{ opacity:1; }
  40%,80%{ opacity:0.5; }
}
.actionable{
  position:relative; font-weight:600; text-decoration:none;
  transition:text-shadow 150ms ease-in-out; }
.actionable::before{
  content:""; position:absolute; left:0; bottom:-2px;
  width:100%; height:max(0.06em,1px);
  background-color:currentColor; opacity:0;
  transition:opacity 150ms cubic-bezier(0.4,0,0.2,1); }
.actionable:hover,
.actionable:focus,
.actionable:focus-visible{
  animation:link-blink 300ms 60ms linear forwards;
  text-shadow:0 0 30px color-mix(in srgb, currentColor 50%, transparent); }
.actionable:hover::before,
.actionable:focus::before,
.actionable:focus-visible::before{ opacity:1; }
.actionable:active{ animation:none; }
/* цвет ссылок — off-white #E6E6E6 на ВСЕХ состояниях (default/visited/hover/focus/active);
   glow + underline идут от currentColor, цвет на ховере НЕ меняется */
.home .sec-more.actionable,
.home .sec-more.actionable:visited,
.home #b-bank .gwhero__more.actionable,
.home #b-bank .gwhero__more.actionable:visited,
.home .contact-c__mail.actionable,
.home .contact-c__mail.actionable:visited,
.home .contact-c__tel.actionable,
.home .contact-c__tel.actionable:visited,
.actionable, .actionable:visited{ color:#E6E6E6; }
/* на ховере/фокусе/active — акцентный #FF4D00 (glow + underline идут от currentColor) */
.actionable:hover, .actionable:focus, .actionable:focus-visible, .actionable:active{ color:#FF4D00; }
/* конкретные ссылки имеют выше специфичность в покое — повторяем ховер на их уровне */
.home .sec-more.actionable:hover, .home .sec-more.actionable:focus, .home .sec-more.actionable:active,
.home #b-bank .gwhero__more.actionable:hover, .home #b-bank .gwhero__more.actionable:focus, .home #b-bank .gwhero__more.actionable:active,
.home .contact-c__mail.actionable:hover, .home .contact-c__mail.actionable:focus, .home .contact-c__mail.actionable:active,
.home .contact-c__tel.actionable:hover, .home .contact-c__tel.actionable:focus, .home .contact-c__tel.actionable:active{ color:#FF4D00; }
/* размер ссылок — 13px на всех .actionable (перебивает 20/24px прежних правил) */
.home .sec-more.actionable,
.home #b-bank .gwhero__more.actionable,
.home .contact-c__mail.actionable,
.home .contact-c__tel.actionable{ font-size:0.8125rem; line-height:1rem; letter-spacing:0; }
/* modifiers */
.actionable-no-underline::before{ display:none; }
.actionable-inanimate:hover,
.actionable-inanimate:focus{ animation:none; text-shadow:none; }
/* кончить «родные» подчёркивания у этих ссылок — у .actionable своё ::before */
.home .sec-more.actionable,
.home #b-bank .gwhero__more.actionable,
.home .contact-c__mail.actionable{ border-bottom:0; padding-bottom:0; }
@media (prefers-reduced-motion:reduce){
  .actionable:hover,
  .actionable:focus,
  .actionable:focus-visible{ animation:none; text-shadow:none; }
}

/* ============================================================
   WORKS · «Последние работы» — Featured Projects layout spec (turn)
   12-кол. ощущение: изображение 7 / описание 3 / имя 2. Теги —
   ПЛОСКИЙ ТЕКСТ (без пилюль). Картинка 16:9 + inset-рамка +
   opacity-pulse на ховере. Имя+стрелка справа. Заголовок секции
   ОСТАЁТСЯ залоченным 20px-кикером (НЕ 76px из брифа). Sticky-стек
   сохранён. id-специфичность перебивает прежние .home .wproj.
   ============================================================ */
.home #b-works .wproj{
  position:sticky; top:0; z-index:1; background:var(--bg);
  display:grid;
  grid-template-columns:7fr 3fr 2fr;
  grid-template-areas:"img mid name";
  grid-template-rows:auto;
  column-gap:12px; row-gap:0;
  align-items:start; min-height:0;
  padding:1rem 0;
  border-top:1px solid rgba(230,230,230,0.3) !important;
  box-shadow:none !important; }
/* closing hairline under the last row */
.home #b-works .wstack .wproj:last-child{ border-bottom:1px solid rgba(230,230,230,0.3); }

/* SECTION HEADLINE · big «Featured Projects» (Basement). Reuses .rule-head
   element (keeps Outline/spy intact); number + hairline hidden, .t enlarged. */
.home #b-works > .rule-head{
  position:static; display:block; background:none;
  margin-inline:calc(-1 * clamp(40px,5vw,92px));
  padding-left:clamp(16px,2vw,28px); padding-right:clamp(16px,2vw,28px);
  padding-top:0; padding-bottom:0;
  margin-top:3.5rem; margin-bottom:1.5rem; }
.home #b-works > .rule-head .n,
.home #b-works > .rule-head .ln{ display:none; }
.home #b-works > .rule-head::before{ display:none !important; content:none !important; }
.home #b-works > .rule-head .t{
  display:block; font-family:"Geist",sans-serif; font-weight:600; color:#C4C4C4;
  font-size:4.75rem; line-height:4.25rem; letter-spacing:-0.04em; text-transform:none; }
@media (max-width:1023px){
  .home #b-works > .rule-head .t{ font-size:2.1875rem; line-height:2.25rem; letter-spacing:-0.03em; }
}

/* MID column = description (top) + tags (bottom), spans full image height */
.home #b-works .wproj__mid{
  grid-area:mid; align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding-top:0; }

/* IMAGE · 16:9, object-fit cover. Frame + 4 corner pixels via ::after (matches
   the clients grid). Hover over the image → infinite opacity pulse 1→40.75/1s. */
.home #b-works .wproj__img{
  grid-area:img; align-self:start; display:block;
  position:relative; min-height:0; height:auto;
  aspect-ratio:16/9; width:100%;
  border:0; border-radius:0; overflow:hidden; }
.home #b-works .wproj__img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* faint full frame + bright corner pixels (top + bottom 1px lines, only ends opaque) */
.home #b-works .wproj__img::after{
  content:""; position:absolute; inset:0; height:auto; width:auto; z-index:2; pointer-events:none;
  border:1px solid rgba(230,230,230,0.2);
  background-image:
    linear-gradient(to right,#E6E6E6 0,#E6E6E6 1px,transparent 1px,transparent calc(100% - 1px),#E6E6E6 calc(100% - 1px),#E6E6E6 100%),
    linear-gradient(to right,#E6E6E6 0,#E6E6E6 1px,transparent 1px,transparent calc(100% - 1px),#E6E6E6 calc(100% - 1px),#E6E6E6 100%);
  background-size:100% 1px,100% 1px; background-position:left top,left bottom; background-repeat:no-repeat; }
@keyframes wpulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.75; } }
@media (prefers-reduced-motion:no-preference){
  .home #b-works .wproj__img:hover img{ animation:wpulse 1s ease-in-out infinite; }
}

/* DESCRIPTION · Geist 600 · #C4C4C4 · 20/20/-0.02em (mobile 15/16) */
.home #b-works .wproj__desc{
  align-self:start; max-width:none; padding-top:0;
  font-family:"Geist",sans-serif; font-weight:600; font-size:1.25rem; line-height:1.25rem;
  letter-spacing:-0.02em; color:#C4C4C4; }

/* SERVICE TAGS · plain text, #E6E6E6, one per line, 4px gap (repurposed .wproj__cat).
   Pinned to the bottom of the column (margin-top:auto) so the last tag line sits flush
   with the bottom edge of the project image. */
.home #b-works .wproj__cat{
  margin-top:auto; align-self:start;
  display:flex; flex-direction:column; gap:4px;
  font-family:"Geist",sans-serif; font-weight:600; font-size:0.8125rem; line-height:1rem;
  letter-spacing:0; text-transform:none; color:#E6E6E6;
  background:none; border:0; }
.home #b-works .wproj__cat span{
  font:inherit; color:inherit; letter-spacing:inherit; background:none; padding:0; }

/* PROJECT NAME · right column, Geist 600 #E6E6E6 38/36/-0.04em. Idle: nudged
   +1.5rem right; on card hover slides back (200ms) and an ↗ fades in at the left. */
/* PROJECT NAME · link, Geist 600 #E6E6E6 38/36/-0.04em, right-aligned, no underline idle.
   Hover = 4 simultaneous animations: arrow ↗ fades in (left), text slides back into
   place, 2px underline fades in, letters get a soft glow. */
.home #b-works .wproj__name{
  grid-area:name; align-self:start; justify-self:end; text-align:right;
  display:inline-flex; align-items:center; gap:0.5rem; position:relative;
  margin-right:2px;
  font-family:"Geist",sans-serif; font-weight:600; font-size:2.375rem; line-height:2.25rem;
  letter-spacing:-0.04em; color:#E6E6E6; text-decoration:none; cursor:pointer; }
.home #b-works .wproj__name .wn-arrow{
  flex:none; width:1.5rem; height:1.5rem; color:inherit; display:block;
  opacity:0; transition:opacity .1s ease .2s; }
/* blink — REUSE the site-wide link flicker (.actionable / @keyframes link-blink):
   plain opacity, hard 50% dips at 40% & 80%. Runs on .wn-text so the text, its
   underline (::after child) and glow (text-shadow) all flicker together. */
.home #b-works .wproj__name .wn-text{
  position:relative; display:inline-block;
  transform:translateX(1.5rem);
  transition:transform .2s ease-in-out, text-shadow .2s ease-in-out; }
.home #b-works .wproj__name .wn-text::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.14em; height:2px; background:#E6E6E6;
  opacity:0; transition:opacity .06s ease .15s; }
/* effects fire ONLY on the link itself (its own :hover / :focus-visible) — NOT on
   card hover, and NOT when the cursor is over the image (image is a separate link). */
.home #b-works .wproj__name:hover .wn-arrow,
.home #b-works .wproj__name:focus-visible .wn-arrow{ opacity:1; }
.home #b-works .wproj__name:hover .wn-text,
.home #b-works .wproj__name:focus-visible .wn-text{
  transform:translateX(0);
  text-shadow:0 0 30px color-mix(in srgb, #E6E6E6 50%, transparent);
  animation:link-blink 300ms 60ms linear forwards; }
.home #b-works .wproj__name:hover .wn-text::after,
.home #b-works .wproj__name:focus-visible .wn-text::after{ opacity:1; }
.home #b-works .wproj__name:active .wn-text{ animation:none; }

/* WORKS · вся лента работ — full-bleed на всю ширину окна (как «Внедрение ИИ») */
.home #b-works .wstack{
  margin-inline:calc(-1 * clamp(40px,5vw,92px));
  padding-inline:clamp(16px,2vw,28px); }

/* MOBILE <768 · single stacked column: image · name · description · tags */
@media (max-width:767px){
  .home #b-works .wproj{
    grid-template-columns:1fr;
    grid-template-areas:"img" "name" "mid";
    grid-template-rows:auto auto auto; row-gap:12px; }
  .home #b-works .wproj__mid{ align-self:start; }
  .home #b-works .wproj__name{ justify-self:end; text-align:right; font-size:2.1875rem; line-height:2.25rem; letter-spacing:-0.03em; }
  .home #b-works .wproj__name::before{ display:none; }
  .home #b-works .wproj__name img{ margin-left:0; }
  .home #b-works .wproj__desc{ font-size:0.9375rem; line-height:1rem; }
  .home #b-works .wproj__cat{ font-size:0.9375rem; line-height:1rem; align-self:start; }
}

/* ============================================================
   CONTACT · «07 Контакты» — CTA (tagline → chat link → meta) сверху,
   гигантский вордмарк «Büro 901» снизу, анимированная диагональная
   штриховка фоном. Заголовок секции (07 // Контакты) ОСТАЁТСЯ.
   ============================================================ */
@keyframes diagonalPatternAnimation{ 0%{ background-position:0 0; } 100%{ background-position:64px 0; } }

.home .contactx{ position:relative; overflow:hidden; }
.home .contactx > .rule-head{ position:relative; z-index:2; }

/* Контакт-блок, добавленный ПОД секцией услуг: отступ + линия-разделитель сверху. */
.contact-after{ margin-top:clamp(40px,7vh,96px); }
.contact-after .contactx{ border-top:1px solid var(--line, rgba(255,255,255,0.08)); }

.home .contactx::after{
  content:""; position:absolute; inset:-48px; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23c)' stroke='%23fff' stroke-opacity='.10'%3E%3Cpath d='M-27 27 91-91M-27 35 91-83M-27 43 91-75M-27 51 91-67M-27 59 91-59M-27 67 91-51M-27 75 91-43M-27 83 91-35M-27 91 91-27M-27 99 91-19M-27 107 91-11M-27 115 91-3M-27 123 91 5M-27 131 91 13M-27 139 91 21M-27 147 91 29M-27 155 91 37'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath fill='%23fff' d='M0 0h64v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat:repeat; animation:diagonalPatternAnimation 6s linear infinite; }

/* layout: CTA top, wordmark bottom */
.home .contactx .contact-c{
  position:relative; z-index:1; flex:1; min-height:0;
  display:flex; flex-direction:column; align-items:stretch; text-align:left;
  justify-content:space-between; padding:clamp(12px,2vh,28px) 0 0; }
.home .contact-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.home .contact-cta__tag{
  margin:0; max-width:18ch;
  font-family:"Geist",sans-serif; font-weight:600; font-size:4.75rem; line-height:4.25rem;
  letter-spacing:-0.04em; color:#C4C4C4; }
.home .contact-cta__row{ margin-top:4px; }
.home .contact-cta__chat.actionable{
  font-family:"Geist",sans-serif; font-weight:600; font-size:4.75rem; line-height:4.25rem;
  letter-spacing:-0.04em; color:#E6E6E6; }
.home .contact-cta__chat.actionable:hover,
.home .contact-cta__chat.actionable:focus,
.home .contact-cta__chat.actionable:active{ color:#FF4D00; }
.home .contact-cta__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px;
  font-family:"Geist",sans-serif; font-weight:600; font-size:0.8125rem; line-height:1rem;
  letter-spacing:0; color:#757575; }
.home .contact-cta__meta .dot{ color:#757575; }
.home .contact-cta__meta a.actionable{ color:#E6E6E6; }
.home .contact-cta__meta a.actionable:hover,
.home .contact-cta__meta a.actionable:focus{ color:#FF4D00; }
/* wordmark already has accent fill 0.10 + clamp(52,20cqw,360) in v2; just place it bottom */
.home .contactx .contact-c__wm{ margin:clamp(12px,2.5vh,32px) 0 0; align-self:stretch; }
/* копирайт прижат в самый правый нижний угол блока (как на референсе, малый отступ) */
.home .contactx .contact-c__copy{
  position:absolute; right:clamp(18px,2.4vw,28px); bottom:clamp(14px,1.8vh,22px); z-index:2;
  margin:0; align-self:auto; text-align:right;
  font-family:"Geist",sans-serif; font-weight:600; font-size:0.8125rem; line-height:1rem;
  letter-spacing:0; color:#757575; }

/* ============================================================
   PORTFOLIO · Showcase (rows-аккордеон) — перенос холста v2.
   Сетка 12-кол текучая (под ширину .editor), миниатюры 228×128 → aspect-ratio.
   Акцент = site --accent #FF4D00 (на холсте был #ff5b22 — меняется var'ом).
   Мобильный брейк через @container .editor <1024.
   ============================================================ */
.pfshow{
  --pfs-muted:#c4c4c4; --pfs-faint:#6b6b6b; --pfs-accent:#FF4D00;
  --pfs-line:rgba(230,230,230,0.20);
  padding:clamp(24px,4cqi,56px) clamp(20px,3cqi,40px) 96px;
  font-family:"Geist", system-ui, sans-serif; color:var(--pfs-muted);
}
.pfshow .sec{ margin:0; }
.pfshow-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:8px; }

.pfshow-head{ align-items:start; row-gap:14px; }
.pfshow-title{ grid-column:1 / 7; margin:0; color:#fff; font-weight:600;
  font-size:5rem; line-height:0.9; letter-spacing:-0.03em; }
.pfshow-count{ grid-column:7 / 13; margin:0; color:var(--pfs-faint); font-weight:600;
  font-size:5rem; line-height:0.9; letter-spacing:-0.03em; }

.pfshow-sub{ align-items:start; margin-top:clamp(24px,3cqi,44px); row-gap:18px; }
.pfshow-views{ grid-column:1 / 7; display:flex; align-items:center; gap:8px;
  font-size:0.8125rem; line-height:1.2; color:var(--pfs-muted); }
.pfshow-views .sep{ color:var(--pfs-faint); }
.pfshow-view{ appearance:none; background:none; border:0; padding:0 0 3px; cursor:pointer;
  font:inherit; font-weight:600; color:var(--pfs-muted); position:relative; }
.pfshow-view[aria-pressed="true"]{ color:#fff; }
.pfshow-view[aria-pressed="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--pfs-accent); }
.pfshow-view:disabled{ color:#3a3a3a; cursor:not-allowed; }
.pfshow-view:focus-visible{ outline:2px solid var(--pfs-accent); outline-offset:3px; }

.pfshow-cats{ grid-column:7 / 13; }
.pfshow-cats__label{ margin:0 0 8px; font-size:0.8125rem; line-height:1.2; color:var(--pfs-faint); }
.pfshow-cats__list{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.pfshow-cat{ appearance:none; background:none; border:0; padding:0 0 2px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:2.5rem; line-height:1.05;
  letter-spacing:-0.02em; color:var(--pfs-muted); }
.pfshow-cat[aria-pressed="true"]{ border-bottom:2px solid var(--pfs-accent); }
.pfshow-cat:focus-visible{ outline:2px solid var(--pfs-accent); outline-offset:3px; }

.pfshow-rows{ margin-top:clamp(36px,5cqi,72px); }
.pfshow-row{ border-top:1px solid var(--pfs-line); position:relative; overflow:visible; }
.pfshow-trigger{ position:relative; width:100%; appearance:none; background:none; border:0; cursor:ns-resize;
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:8px; align-items:center;
  padding:6px 0; min-height:37px; font-family:inherit; color:inherit; text-align:left; }
.pfshow-trigger:focus-visible{ outline:2px solid var(--pfs-accent); outline-offset:-2px; }
/* Бегущие диагональные полосы при наведении (точно как showcase reference).
   Слой — прямой ребёнок .pfshow-row, top:-1px/bottom:-1px → перекрывает верхний И нижний
   1px-разделители → «разделители тоже бегут». Паттерн на ::after, inset:-48px для бесшовности.
   Анимация идёт ВСЕГДА (на ::after), opacity на обёртке управляет видимостью. */
.pfshow-diag{ pointer-events:none; position:absolute; top:-1px; bottom:-1px; left:0; right:0;
  z-index:0; opacity:0; overflow:hidden; transition:opacity .3s ease-out; }
/* ВИДИМОСТЬ ПОЛОС — СТРОГО ТОЛЬКО на hover ЗАКРЫТОЙ строки.
   Открытая строка (.is-open) — НИКОГДА (даже под курсором): !important бьёт :hover.
   focus тоже не показывает (порядок: hover после focus → hover+закрытая всё равно покажет). */
.pfshow-row:focus-within .pfshow-diag{ opacity:0; }
.pfshow-row:hover .pfshow-diag{ opacity:1; }
.pfshow-row.is-open .pfshow-diag{ opacity:0 !important; }
.pfshow-diag::after{ content:''; position:absolute; inset:-48px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23c)' stroke='%23fff' stroke-opacity='.10'%3E%3Cpath d='M-27 27 91-91M-27 35 91-83M-27 43 91-75M-27 51 91-67M-27 59 91-59M-27 67 91-51M-27 75 91-43M-27 83 91-35M-27 91 91-27M-27 99 91-19M-27 107 91-11M-27 115 91-3M-27 123 91 5M-27 131 91 13M-27 139 91 21M-27 147 91 29M-27 155 91 37'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath fill='%23fff' d='M0 0h64v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat:repeat; background-size:64px 64px; }
/* бег — только под курсором (сдвиг СТРОГО по X, линии 45° читаются как диагональ) */
.pfshow-row:hover .pfshow-diag::after{ animation:diagonalPatternAnimation 6s linear infinite; will-change:background-position; }
.pfshow-id{ grid-column:1 / 5; display:flex; align-items:center; gap:8px; min-width:0; z-index:1; }
.pfshow-logo{ width:18px; height:18px; flex:none; background:#1a1a1a; border:1px solid var(--pfs-line);
  display:flex; align-items:center; justify-content:center; font-size:0.5625rem; font-weight:600; color:var(--pfs-faint); }
.pfshow-name{ margin:0; font-size:1.5rem; font-weight:600; line-height:1.05; letter-spacing:-0.02em;
  color:var(--pfs-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfshow-cats2{ grid-column:5 / 11; font-size:0.8125rem; line-height:1.3; color:var(--pfs-muted); z-index:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfshow-year{ grid-column:11 / 12; font-size:0.8125rem; line-height:1.3; color:var(--pfs-muted); z-index:1; }
.pfshow-link{ grid-column:12 / 13; font-size:0.8125rem; line-height:1.3; text-align:right;
  white-space:nowrap; z-index:1; }
.pfshow-link:focus-visible{ outline:2px solid var(--pfs-accent); outline-offset:2px; }
.pfshow-content{ overflow:hidden; height:0; transition:height .25s ease-out; }
.pfshow-thumbs{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:8px; padding:8px 0 14px; }
.pfshow-thumb{ grid-column:span 2; aspect-ratio:228 / 128; display:block; position:relative;
  background-color:#0d0d0d; overflow:hidden; }
.pfshow-thumb:hover{ outline:2px solid var(--pfs-accent); outline-offset:-2px; }
.pfshow-thumb:focus-visible{ outline:2px solid var(--pfs-accent); outline-offset:-2px; }
.pfshow-thumb span{ position:absolute; left:8px; bottom:6px; font-size:0.6875rem; color:var(--pfs-faint); }
.pfshow-empty{ padding:46px 0; color:var(--pfs-faint); font-size:1.5rem; }
.pfshow-lead{
  grid-column:7 / 13; margin:0; max-width:48ch;
  font-family:"Geist",sans-serif; font-weight:600; font-size:2.375rem; line-height:1.1;
  letter-spacing:-0.02em; color:#C4C4C4; text-wrap:pretty; }
.pfshow-note{
  margin:clamp(20px,2.4cqi,30px) 0 0;
  font-family:"Geist",sans-serif; font-weight:600; font-size:0.8125rem; line-height:1rem;
  letter-spacing:0; color:#757575; }
/* сдвиг ровно на один диагональный период (8·√2 ≈ 11.3137px по Y) → цикл замыкается без скачка */
@keyframes pfshowDiag{ from{ background-position:0 0; } to{ background-position:0 11.3137px; } }

@container (max-width:1023px){
  .pfshow-grid{ display:block; }
  .pfshow-title{ font-size:3.5rem; }
  .pfshow-count{ font-size:3.5rem; margin-top:4px; }
  .pfshow-cats{ margin-top:22px; }
  .pfshow-cat{ font-size:2rem; }
  .pfshow-trigger{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 0; min-height:0; }
  .pfshow-id{ flex:1 1 auto; min-width:0; }
  .pfshow-cats2{ order:3; flex:1 1 100%; white-space:normal; margin-top:6px; }
  .pfshow-year{ display:none; }
  .pfshow-link{ order:2; flex:0 0 auto; }
  .pfshow-thumbs{ display:flex; gap:8px; overflow-x:auto; padding:8px 0 14px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .pfshow-thumb{ flex:0 0 60%; aspect-ratio:200 / 112; scroll-snap-align:start; }
}

/* Платёжный оркестратор · соединительные линии схемы — нейтральные (без акцента) */
.home #b-bank .bw3-core::before{ background:var(--line-2); }
.home #b-bank .bw3-core::after{ background:var(--line-2); }

@media (max-width:1023px){
  .home .contact-cta__tag,
  .home .contact-cta__chat.actionable{ font-size:2.1875rem; line-height:2.25rem; letter-spacing:-0.03em; }
}

/* ============================================================
   PORTFOLIO · СЕРВЕРНАЯ (NDA server rack) — ported to site tokens
   Юниты = проекты под NDA; клик → showcase/case.html (то же окно).
   ============================================================ */
.pf-servers{
  --led-g:#34d27b; --led-a:#ffb020;
  --pfs-muted:#c4c4c4; --pfs-faint:#6b6b6b; --pfs-accent:var(--accent);
  --pfs-line:rgba(230,230,230,0.20);
  padding:clamp(24px,4cqi,56px) clamp(20px,3cqi,40px) clamp(40px,5cqi,72px);
  font-family:"Geist", system-ui, sans-serif; color:var(--pfs-muted);
}
.pf-servers .pfshow-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:8px; }
.pf-servers .pfshow-head{ align-items:start; row-gap:14px; }
.pf-servers .pfshow-title{ grid-column:1 / 7; margin:0; color:#fff; font-weight:600;
  font-size:5rem; line-height:0.9; letter-spacing:-0.03em; }
.pf-servers .pfshow-count{ grid-column:7 / 13; margin:0; color:var(--pfs-faint); font-weight:600;
  font-size:5rem; line-height:0.9; letter-spacing:-0.03em; }
.pf-servers .pfshow-sub{ margin-top:clamp(20px,2.4cqi,32px); }
.pf-servers .pfshow-lead{ grid-column:7 / 13; margin:0; max-width:48ch;
  font-weight:600; font-size:2.375rem; line-height:1.1; letter-spacing:-0.03em; color:var(--pfs-muted); }

/* data hall — один каркас на всю ширину (как таблица архива) */
.pf-hall{ margin-top:clamp(34px,5cqi,64px); display:block; }

.pf-rack{ width:100%;
  background:none;
  border:0; border-radius:0;
  box-shadow:none;
  padding:0; }
.pf-rack__top{ display:flex; align-items:center; gap:8px; padding:4px 4px 12px; }
.pf-rack__id{ font-family:var(--mono); font-size:0.8125rem; color:var(--pfs-faint); letter-spacing:0.04em; }
.pf-rack__id b{ color:var(--pfs-muted); font-weight:600; }
.pf-rack__pwr{ margin-left:auto; display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:0.8125rem; color:var(--pfs-faint); }
.pf-rack__pwr i{ width:7px; height:7px; border-radius:50%; background:var(--led-g); box-shadow:0 0 7px var(--led-g);
  display:inline-block; animation:pfblinkdot 3s steps(1) infinite; }
@keyframes pfblinkdot{ 0%,70%{ opacity:1;} 71%,100%{ opacity:.25; } }

.pf-rack__frame{ position:relative; background:linear-gradient(180deg,#0a0b0d,#070708);
  border:1px solid #000; border-radius:3px; padding:8px; box-shadow:inset 0 0 40px rgba(0,0,0,0.8); }

/* две колонки юнитов внутри одного каркаса (широкая стойка) */
/* два стоечных бэя, каждый в раме из двух реек (19″); юниты впритык */
.pf-units{ display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:1; align-items:start; }
.pf-bay{ display:grid; grid-template-columns:12px 1fr 12px; column-gap:4px; align-content:start; }
/* вертикальная рейка с отверстиями крепления каждые 16px */
.pf-rail{ width:12px; align-self:stretch; background-color:#1a1a1a;
  background-image:radial-gradient(circle at 50% 8px, #050506 1.4px, transparent 1.9px);
  background-size:100% 16px; background-repeat:repeat-y;
  box-shadow:inset 1px 0 0 rgba(255,255,255,0.05), inset -1px 0 0 rgba(0,0,0,0.7); }
/* стопка юнитов впритык; 1px стык между соседними модулями */
.pf-stack{ display:flex; flex-direction:column; min-width:0; }
.pf-units .pf-unit, .pf-units .pf-blank{ box-sizing:border-box; }
.pf-units .pf-stack > * + *{ border-top:1px solid rgba(255,255,255,0.06); }
/* высота жёстко = U: 1U=48 · 2U=96 · 3U=144 · 4U=192 */
.pf-unit.u1, .pf-blank.u1{ height:48px; }
.pf-unit.u2, .pf-blank.u2{ height:96px; }
.pf-unit.u3, .pf-blank.u3{ height:144px; }
.pf-unit.u4, .pf-blank.u4{ height:192px; }

.pf-unit{ position:relative; width:100%; cursor:pointer; text-align:left;
  background:linear-gradient(180deg,#101115,#0b0c0f);
  border:0; border-radius:0;
  font-family:inherit; color:inherit; display:flex; align-items:center; gap:14px; padding:0 20px;
  transition:box-shadow .2s ease, background .2s ease; }
.pf-unit:hover, .pf-unit:focus-visible{
  background:linear-gradient(180deg,#16171b,#0e0f12);
  box-shadow:inset 3px 0 0 var(--accent), inset 0 1px 0 rgba(255,255,255,0.07); outline:none; z-index:2; }
.pf-unit:hover .pf-led-a, .pf-unit:focus-visible .pf-led-a{ background:var(--accent); box-shadow:0 0 8px var(--accent); }
.pf-unit.blink-acc .pf-led-a{ animation:pfaccblink .25s steps(1) 3; }
@keyframes pfaccblink{ 0%,50%{ background:var(--accent); box-shadow:0 0 10px var(--accent);} 51%,100%{ background:var(--led-a); box-shadow:0 0 6px var(--led-a);} }

.pf-unit__ear{ flex:0 0 6px; align-self:stretch; position:relative; }
.pf-unit__ear::before{ content:""; position:absolute; top:50%; left:1px; width:4px; height:4px; border-radius:50%;
  transform:translateY(-50%); background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); }
.pf-unit__leds{ flex:0 0 auto; display:flex; align-items:center; gap:5px; }
.pf-led{ width:6px; height:6px; border-radius:50%; background:#222; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6); }
.pf-led-g{ background:var(--led-g); box-shadow:0 0 6px var(--led-g); animation:pfflick 1.8s steps(1) infinite; }
.pf-led-g.d2{ animation-delay:.6s; }
.pf-led-a{ background:var(--led-a); box-shadow:0 0 6px var(--led-a); }
@keyframes pfflick{ 0%,80%{ opacity:1;} 81%,100%{ opacity:.3; } }
.pf-unit__vent{ flex:0 0 auto; width:44px; align-self:stretch; margin:8px 0;
  background-color:#0d0e11; border-radius:1px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5); }
/* тип 1 — плотные горизонтальные полосы (FINTECH/TELECOM) */
.pf-unit__vent.pf-vent--1{
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 3px); }
/* тип 2 — сетка мелких отверстий (INDUSTRY/ENTERPRISE) */
.pf-unit__vent.pf-vent--2{
  background-image:radial-gradient(circle, rgba(255,255,255,0.12) 1.1px, transparent 1.6px);
  background-size:9px 9px; background-position:center; }
/* тип 3 — две щели сверху + одна крупная снизу (LOGISTICS/MEDIA) */
.pf-unit__vent.pf-vent--3{
  background-image:
    linear-gradient(rgba(255,255,255,0.12),rgba(255,255,255,0.12)),
    linear-gradient(rgba(255,255,255,0.12),rgba(255,255,255,0.12)),
    linear-gradient(rgba(255,255,255,0.14),rgba(255,255,255,0.14));
  background-repeat:no-repeat;
  background-size:70% 2px, 70% 2px, 80% 5px;
  background-position:50% 20%, 50% 32%, 50% 82%; }
.pf-unit__lbl{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.pf-unit__nm{ font-size:1.5rem; line-height:1.5rem; letter-spacing:-0.02em; font-weight:600; color:#C4C4C4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-unit__sub{ font-family:var(--mono); font-size:0.8125rem; color:var(--pfs-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-unit__no{ flex:0 0 auto; font-family:var(--mono); font-size:0.8125rem; color:var(--pfs-faint); font-variant-numeric:tabular-nums; }
.pf-unit__tip{ display:none; }

.pf-blank{ position:relative; height:48px; border-radius:0; border:0;
  background:#0c0d10; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
  display:flex; align-items:center; justify-content:center; padding:0 14px; overflow:hidden; }
.pf-blank::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23c)' stroke='%23fff' stroke-opacity='.10'%3E%3Cpath d='M-27 27 91-91M-27 35 91-83M-27 43 91-75M-27 51 91-67M-27 59 91-59M-27 67 91-51M-27 75 91-43M-27 83 91-35M-27 91 91-27M-27 99 91-19M-27 107 91-11M-27 115 91-3M-27 123 91 5M-27 131 91 13M-27 139 91 21M-27 147 91 29M-27 155 91 37'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath fill='%23fff' d='M0 0h64v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat:repeat; }
.pf-blank span{ position:relative; z-index:1; }
.pf-blank span{ font-family:var(--mono); font-size:0.8125rem; color:#6b6b6b; letter-spacing:0.04em; position:relative; z-index:1; text-align:center; }

@container (max-width:760px){
  .pf-servers .pfshow-title, .pf-servers .pfshow-count{ font-size:3.5rem; }
  .pf-servers .pfshow-count{ margin-top:4px; }
  .pf-servers .pfshow-lead{ grid-column:1 / 13; font-size:1.5rem; }
  .pf-units{ grid-template-columns:1fr; }
}

/* ============================================================
   CASE WINDOW · inline overlay — накрывает вкладки+редактор внутри .main,
   НЕ трогая сайдбар и тайтлбар. Эффект «вылета из сервера» + затемнение.
   Окно = iframe на showcase/case.html (вёрстка без изменений).
   ============================================================ */
/* открывается ПОД вкладками (как чат .cpage) — родительские тайтлбар + вкладки-меню
   + статус-бар остаются видимыми, окно досье не накрывает навигацию сайта. */
.caseov{ position:absolute; left:0; right:0; bottom:0; top:var(--tabs); z-index:35; }
.caseov[hidden]{ display:none; }
.caseov__scrim{ position:absolute; inset:0; background:#000; opacity:0;
  transition:opacity .25s ease-out; }
.caseov.show .caseov__scrim{ opacity:0.92; }
.caseov__frame{ position:absolute; inset:0; background:#000; overflow:hidden;
  opacity:0; transform:scale(.04); transform-origin:var(--ox,50%) var(--oy,50%);
  will-change:transform, opacity; }
.caseov.show .caseov__frame{ opacity:1; transform:scale(1);
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.caseov.closing .caseov__frame{
  transition:transform .3s cubic-bezier(.7,0,.84,0), opacity .25s ease;
  transform:scale(.04); opacity:0; }
.caseov.closing .caseov__scrim{ opacity:0; }
.caseov iframe{ width:100%; height:100%; border:0; display:block; background:#000; }
.caseov__x{ position:absolute; top:8px; right:12px; z-index:3; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; background:rgba(10,10,10,0.6);
  border:1px solid rgba(255,255,255,0.10); border-radius:6px; color:#9a9a9f; cursor:pointer;
  opacity:0; transition:opacity .2s ease .25s, color .15s ease, border-color .15s ease; }
.caseov.show .caseov__x{ opacity:1; }
.caseov__x svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }
.caseov__x:hover{ color:#fff; border-color:var(--accent); }
.caseov__x:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .caseov__frame, .caseov.show .caseov__frame, .caseov.closing .caseov__frame{
    transition-duration:.08s !important; transition-timing-function:ease !important; }
}

/* ============================================================
   TITLEBAR LOGO — чуть крупнее + прижат в левый угол (turn)
   Высоту строки (38px) не трогаем — 20px-логотип в неё помещается.
   ============================================================ */
/* ============================================================
   IDE CHROME RESTRUCTURE (turn) — убрана верхняя строка-титлбар;
   логотип опущен на стык сайдбара и меню-вкладок (шапка сайдбара,
   на высоте строки вкладок). Хлебные крошки живут внизу на статус-баре.
   Только для этого скина (только он грузит этот скин).
   ============================================================ */
.ide{
  --titleh:0px;
  --tabs:40px;
  grid-template-rows:1fr var(--status);
  grid-template-areas:
    "act side main"
    "status status status";
}
.titlebar{ display:none; }

/* brand cell — first cell of the tabs/menu bar, before «Главная».
   padding matches tab padding (16) so logo→first-tab gap == tab→tab gap. */
.tab-brand{ display:flex; align-items:center; padding:0 16px; flex:none;
  border-right:1px solid var(--line); }
.tab-brand .logo{ display:inline-flex; align-items:center; cursor:default; }
.tab-brand .logo.clickable{ cursor:pointer; }
.tab-brand .logo svg{ height:24px; width:auto; display:block; color:#f4f4f5; transition:color .12s ease; }
.tab-brand .logo img{ height:24px; width:auto; display:block; }

/* mobile: restore a slim top bar with logo + burger */
@media(max-width:760px){
  .ide{
    --titleh:38px;
    grid-template-columns:0 0 1fr;
    grid-template-rows:var(--titleh) 1fr var(--status);
    grid-template-areas:
      "title title title"
      "act side main"
      "status status status";
  }
  .titlebar{ display:flex; }
  .titlebar .logo--mobile{ display:inline-flex; align-items:center; }
  .titlebar .logo--mobile svg{ height:18px; width:auto; display:block; color:#f4f4f5; }
  .titlebar .logo--mobile img{ height:18px; width:auto; display:block; }
}

/* ============================================================
   MORPHING LOGO — Hero→header, scroll-linked (index only). turn
   #morphLogo is a single fixed element FLIP-tweened between the
   big cover logo (p=0) and the small header slot (p=1).
   ============================================================ */
#morphLogo{ position:fixed; left:0; top:0; z-index:55; display:none;
  pointer-events:none; transform-origin:0 0; will-change:transform; color:#f4f4f5; }
#morphLogo .morph-sz{ display:block; visibility:hidden; }
/* Base render size = ~hero height (240px), NOT the 24px header slot. The morph now scales
   the logo DOWN to dock (downscale is always crisp); strips rasterise at 240px so clip
   thirds are sharp. apply() derives scale from the actual layout size (LAYW/LAYH). */
#morphLogo svg{ height:240px; width:auto; display:block; color:inherit; fill:currentColor; }
#morphLogo img{ height:240px; width:auto; display:block; }
.ide.morph-active #morphLogo{ display:block; }
/* sliced layers — drift applied to these inner strips only (outer keeps scroll-morph transform).
   NB: NO will-change/own layer here — under the parent's scale(~9.8) a promoted layer would
   rasterise at base 24px then upscale → blurry logo. Painted into the scaled parent = crisp vector. */
#morphLogo .morph-strip{ position:absolute; left:0; top:0; }
/* clip thirds WITH a real overlap. NB: clip % is evaluated at the BASE 24px size then
   scaled ~9.8× — so the overlap must be a few % (≈1px at base) or it rounds to sub-pixel
   and the grey hairline returns. ~6% overlap = ~1.4px base → solid seam after scale. */
#morphLogo .morph-strip--top{ -webkit-clip-path:inset(0 0 63% 0); clip-path:inset(0 0 63% 0); }
#morphLogo .morph-strip--mid{ -webkit-clip-path:inset(31% 0 31% 0); clip-path:inset(31% 0 31% 0); }
#morphLogo .morph-strip--bot{ -webkit-clip-path:inset(63% 0 0 0); clip-path:inset(63% 0 0 0); }
#morphLogo .morph-seam{ position:absolute; left:0; right:0; height:1px; transform:translateY(-50%);
  background:transparent; pointer-events:none; }   /* seams removed — logo reads as one solid mass at rest */
#morphLogo .morph-seam--1{ top:33.33%; }
#morphLogo .morph-seam--2{ top:66.67%; }
@keyframes morphFlash{ 0%{ color:#FF5B22; } 20%{ color:#FF5B22; } 100%{ color:#f4f4f5; } }
#morphLogo.morph-flash{ animation:morphFlash .5s ease forwards; }
/* hide the originals the morph stands in for */
.ide.morph-active #b-overview .cover__logo{ visibility:hidden; }
.ide.morph-active .tab-brand .logo--tab{ opacity:0; }
.ide.morph-active .titlebar .logo--mobile{ opacity:0; }
/* brand cell collapses/expands by JS (width animated with scroll) */
.ide.morph-active .tab-brand{ box-sizing:border-box; overflow:hidden; }

/* ---- PAGE SWITCH · instant feedback: progress line + skeleton over content only ---- */
.pload{ position:absolute; left:0; right:0; top:var(--tabs); bottom:0; z-index:5; background:var(--bg); pointer-events:none; opacity:1; transition:opacity .3s ease; overflow:hidden; }
.pload[hidden]{ display:none; }
.pload.out{ opacity:0; }
.pload__bar{ position:absolute; left:0; top:0; height:2px; width:0; background:var(--accent); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent); }
.pload.run .pload__bar{ animation:pl-bar .46s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes pl-bar{ 0%{ width:0; } 60%{ width:72%; } 100%{ width:100%; } }
.pload__sk{ display:flex; flex-direction:column; gap:14px; padding:clamp(28px,4vw,56px) clamp(20px,4vw,64px); max-width:1100px; }
.sk{ border-radius:3px; background:linear-gradient(100deg,rgba(230,230,230,.05) 30%,rgba(230,230,230,.11) 50%,rgba(230,230,230,.05) 70%); background-size:220% 100%; animation:pl-shim 1.1s ease-in-out infinite; }
.sk--rule{ height:10px; width:220px; margin-bottom:22px; }
.sk--h1{ height:clamp(30px,4vw,48px); width:68%; }
.sk--p{ height:14px; width:52%; margin-top:10px; }
.sk--short{ width:40%; }
.sk--p.sk--short{ width:34%; margin-top:0; }
.pload__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:30px; }
.sk--card{ height:clamp(120px,18vh,190px); }
@keyframes pl-shim{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
.editor{ transition:opacity .3s ease; }
.ide.pl-busy .editor{ opacity:0; transition:none; }
.ide.pl-busy #morphLogo{ opacity:0 !important; transition:none !important; }
@media (max-width:760px){ .pload{ top:0; } .pload__grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none; } .pload.run .pload__bar{ animation-duration:.01s; } }

/* ---- ACTIVITY RAIL · search top · quiet vertical coords · RU/EN + mail bottom ---- */
.activity{ padding:12px 0 14px; }
.activity .act-note{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); opacity:.7; white-space:nowrap; user-select:none; }
.activity .act-lang{ display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }
.activity .act-lang button{ width:34px; height:26px; padding:0; border:0; border-radius:5px; background:transparent; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; color:var(--faint); cursor:pointer; }
.activity .act-lang button:hover{ color:var(--ink); }
.activity .act-lang button.on{ color:var(--ink); background:rgba(230,230,230,0.07); }
.activity .act-mail{ text-decoration:none; }
.activity .act-mail:hover{ color:var(--amber); }
@media (max-height:520px){ .activity .act-note{ display:none; } }

/* ---- mobile burger sheet · RU/EN + mail footer ---- */
.navsheet__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:14px 16px 6px; border-top:1px solid var(--line); }
.navsheet__lang{ display:flex; gap:4px; }
.navsheet .navsheet__lang button{ width:auto; min-width:44px; height:36px; padding:0 10px; justify-content:center; border:1px solid var(--line); border-radius:6px; background:transparent; font-family:var(--mono); font-size:12px; color:var(--faint); }
.navsheet .navsheet__lang button.on{ color:var(--ink); border-color:rgba(230,230,230,0.35); }
.navsheet__mail{ font-family:var(--mono); font-size:12px; color:var(--ink-2,#b8b8bd); text-decoration:none; }
.navsheet__mail:hover{ color:var(--amber); }

/* ---- MOBILE FIX · block 04 products (skin overrides beat ide.css media) ---- */
@media (max-width:760px){
  .home #b-bank .bw3-head{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .home #b-bank .bw3-head .gwhero__lead{ font-size:1.125rem; line-height:1.35; max-width:none; }
  .home #b-ai .gwa__foot{ gap:16px; }
  .home #b-ai .gwa__models{ display:flex; flex-wrap:wrap; row-gap:4px; white-space:normal; min-width:0; max-width:100%; font-size:0.75rem; }
  .home #b-ai .gwa__models .d{ margin:0 6px; }
  .home #b-bank .bw3, .home #b-bank .bw3-diagram, .home #b-bank .bw3-foot, .home #b-ai .gwhero{ min-width:0; max-width:100%; }
  .home #b-bank .bw3-banks{ min-width:0; }
}

/* ---- CTA «Обсудить проект →» — always one line with its arrow ---- */
.home .contact-cta__chat.actionable{ white-space:nowrap; }
.home .contact-cta__chat.actionable .ru, .home .contact-cta__chat.actionable .en{ white-space:nowrap; }
.tb-lang{ display:none; }
@media (max-width:760px){
  /* burger removed — pages already live in the tab row; titlebar right = RU/EN */
  .titlebar .burger{ display:none !important; }
  .navsheet, .navscrim{ display:none !important; }
  .titlebar .tb-lang{ display:flex; gap:4px; margin-left:auto; }
  .titlebar .tb-lang button{ min-width:40px; height:28px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:transparent; font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; color:var(--faint); cursor:pointer; }
  .titlebar .tb-lang button.on{ color:var(--ink); border-color:rgba(230,230,230,0.35); }
  .home .contact-cta__chat.actionable{ font-size:min(2.1875rem, 8vw); line-height:1.1; }
  /* contacts: no full-screen stretch → wordmark sits right under the details */
  .home .contactx{ min-height:0 !important; }
  .home .contactx .contact-c{ flex:0 0 auto !important; justify-content:flex-start !important; min-height:0 !important; }
  .home .contactx .contact-c__wm{ margin-top:44px !important; }
  /* AI gateway: single column, sized for a phone */
  .home #b-ai .gwa__row{ grid-template-columns:minmax(0,1fr) !important; gap:22px; }
  .home #b-ai .gwa__num, .home #b-ai .gwa__body{ grid-column:auto !important; }
  .home #b-ai .gwa__num{ font-size:6.25rem; position:static; transform:none !important; }
  .home #b-ai .gwa__num small{ font-size:0.75rem; margin-top:10px; }
  .home #b-ai .gwa__title{ font-size:2rem; }
  .home #b-ai .gwa__lead{ font-size:1.125rem; line-height:1.4; max-width:none; }
  .home #b-ai .gwa__b .gh{ font-size:2.25rem; }
  .home #b-ai .gwa__b h4{ font-size:1.125rem; line-height:1.5rem; padding-right:44px; }
  .home #b-ai .gwa__lower{ margin-top:28px; }
  .home #b-bank .gwhero__nm{ font-size:2rem; }
  .home #b-bank .bw3-banks .bk{ font-size:1rem; }
}

/* ---- MOBILE · one top bar only: logo | pages | RU/EN ---- */
.tabs-lang{ display:none; }
@media (max-width:760px){
  :root, .ide{ --titleh:0px; }
  .titlebar{ display:none !important; }
  .tabs{ display:flex !important; align-items:stretch; }
  .tabs .tab{ padding:0 12px; }
  .tabs .tabs-lang{ display:flex; order:99; margin-left:auto; align-items:center; gap:2px; padding:0 10px 0 6px; }
  .tabs .tabs-lang button{ height:28px; min-width:30px; padding:0 6px; border:0; border-radius:5px; background:transparent; font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; color:var(--faint); cursor:pointer; }
  .tabs .tabs-lang button.on{ color:var(--ink); background:rgba(230,230,230,0.08); }
}

/* ---- MOBILE footer = breadcrumbs (file › current block), phone hidden ---- */
@media (max-width:760px){
  .statusbar .seg.split.opt, .statusbar #stBlock{ display:flex !important; }
  .statusbar #callSeg{ display:none !important; }
  .statusbar #stBlock{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .statusbar .seg.split{ margin-left:0 !important; }
}

/* ---- morph «ghost» trail canvas (under the flying logo, above content) ---- */
#morphGhosts{ position:fixed; left:0; top:0; z-index:54; pointer-events:none; display:none; }
.ide.morph-active #morphGhosts{ display:block; }
.ide.pl-busy #morphGhosts{ opacity:0; }

/* ---- MOBILE · bank block: hide routing diagram (customers → orchestrator → banks) ---- */
@media (max-width:760px){ .home #b-bank .bw3-diagram{ display:none !important; } }

/* ---- MOBILE statusbar: one line always ---- */
@media (max-width:760px){
  .statusbar{ flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
  .statusbar .seg{ white-space:nowrap; min-width:0; }
  .statusbar .seg.split{ flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
  .statusbar #stBlock{ flex:0 1 auto; }
}

/* ---- CASE OVERLAY · SITE MODE (live project site, clicks blocked) ---- */
.caseov__bar{ display:none; }
.caseov__body{ position:absolute; inset:0; }
.caseov--site .caseov__bar{ display:flex; align-items:center; gap:14px; position:absolute; left:0; right:0; top:0; height:50px; padding:0 60px 0 18px; border-bottom:1px solid var(--line); background:var(--bg); font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint); z-index:2; }
.caseov--site .caseov__name{ color:var(--ink); font-weight:600; white-space:nowrap; }
.caseov--site .caseov__url{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:6px 12px; border:1px solid var(--line); border-radius:6px; max-width:420px; }
.caseov--site .caseov__open{ margin-left:auto; color:var(--ink-2,#b8b8bd); text-decoration:none; white-space:nowrap; }
.caseov--site .caseov__open:hover{ color:var(--amber); }
.caseov--site .caseov__body{ top:50px; background:#fff; }
.caseov--site .caseov__x{ top:8px; }
.caseov__shield{ display:none; pointer-events:none; }
@media (max-width:760px){ .caseov--site .caseov__url{ display:none; } .caseov--site .caseov__bar{ padding-right:56px; } }

.statusbar .seg{ white-space:nowrap; }
/* works card: placeholder label under the photo (shows if the image fails) */
.home #b-works .wproj__img .pl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); z-index:0; background:repeating-linear-gradient(135deg,rgba(230,230,230,.03) 0 6px,transparent 6px 12px); }
.home #b-works .wproj__img img{ z-index:1; }

/* ---- WORKS · logo preview «brand spotlight» (variant C) ---- */
.home #b-works .wproj__img--logo{ background:var(--panel,#121317); cursor:pointer; }
.home #b-works .wproj__img--logo .wspot{ position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .35s ease; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--brandHi), transparent 70%); }
.home #b-works .wproj__img--logo:hover .wspot{ opacity:1; }
.home #b-works .wproj__img--logo img.wlogo{ position:absolute; inset:0 !important; margin:auto !important; transform:none; width:auto; height:auto; max-width:44%; max-height:36%; object-fit:contain; z-index:2;
  filter:brightness(0) invert(.78); transition:filter .3s ease, transform .45s cubic-bezier(.16,1,.3,1); animation:none !important; opacity:1; }
.home #b-works .wproj__img--logo img.wlogo--wide{ max-width:56%; }
.home #b-works .wproj__img--logo:hover img.wlogo{ filter:brightness(0) invert(1); transform:scale(1.04); }
@media (hover:none){ .home #b-works .wproj__img--logo .wspot{ opacity:.6; } .home #b-works .wproj__img--logo img.wlogo{ filter:brightness(0) invert(1); } }

/* ---- SITE MODE · loader until the project site is fully loaded ---- */
.caseov__load{ display:none; }
.caseov--site .caseov__load{ display:flex; position:absolute; inset:0; z-index:3; align-items:center; justify-content:center; background:var(--bg); opacity:0; pointer-events:none; transition:opacity .45s ease; }
.caseov--site.site-loading .caseov__load{ opacity:1; pointer-events:auto; }
.caseov--site.site-loading iframe{ opacity:0; }
.caseov--site iframe{ transition:opacity .5s ease; }
.caseov__loadin{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.caseov__loadnm{ font-family:"Geist",sans-serif; font-weight:600; font-size:clamp(28px,4vw,52px); letter-spacing:-0.035em; color:var(--ink); }
.caseov__loadbar{ position:relative; width:min(260px,60vw); height:2px; background:rgba(230,230,230,0.10); overflow:hidden; }
.caseov__loadbar i{ position:absolute; top:0; bottom:0; width:38%; background:var(--accent); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent); animation:cl-run 1.1s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes cl-run{ 0%{ left:-38%; } 100%{ left:100%; } }
.caseov__loadtx{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.caseov--site .caseov__body{ background:var(--bg); }
@media (prefers-reduced-motion:reduce){ .caseov__loadbar i{ animation:none; left:0; width:100%; opacity:.5; } }

/* ---- CASE/SITE window · softer, slower close: shrinks back into its card ---- */
.caseov.closing .caseov__frame{ transition:transform .62s cubic-bezier(.65,0,.35,1), opacity .32s ease .3s, border-radius .62s ease; transform:scale(.05); opacity:0; border-radius:18px; }
.caseov.closing .caseov__scrim{ transition:opacity .55s ease .08s; opacity:0; }
.caseov.closing .caseov__x{ opacity:0; transition:opacity .15s ease; }

/* ---- MOBILE · works card in view lights up by itself (brand spotlight, centred) ---- */
@media (max-width:760px){
  .home #b-works .wproj__img--logo .wspot{ opacity:0 !important; --mx:50%; --my:50%; transition:opacity .5s ease; }
  .home #b-works .wproj__img--logo img.wlogo{ filter:brightness(0) invert(.78) !important; transition:filter .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
  .home #b-works .wproj__img--logo.is-active .wspot{ opacity:1 !important; }
  .home #b-works .wproj__img--logo.is-active img.wlogo{ filter:brightness(0) invert(1) !important; transform:scale(1.04); }
}


/* ---- SITE MODE · frame is transparent to gestures: wheel + touch scroll work, clicks are
   blocked server-side inside the preview copies (previews/…). Shield no longer intercepts. ---- */
.caseov__shield, .caseov--site .caseov__shield{ pointer-events:none !important; }
#caseIframe{ pointer-events:auto !important; }

/* ---- MOBILE · no status bar (breadcrumbs strip) — content gets the full height ---- */
@media (max-width:760px){
  :root, .ide{ --status:0px; }
  .statusbar{ display:none !important; }
}

/* ---- SITE PREVIEW as a TAB · no extra bar over the site; highlighted close in the tab ---- */
.caseov--site .caseov__bar{ display:none !important; }
.caseov--site .caseov__body{ top:0 !important; }
.caseov--site .caseov__x{ display:none !important; }
.ptab{ position:relative; flex:none; display:flex; align-items:center; gap:9px; padding:0 8px 0 16px; white-space:nowrap;
  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); background:var(--bg-tab-on); border-right:1px solid var(--line); animation:ptab-in .38s cubic-bezier(.16,1,.3,1); }
.ptab::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); }
.ptab .dot{ width:8px; height:8px; border-radius:2px; flex:none; }
.ptab .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ptab__x{ flex:none; width:26px; height:26px; margin-left:4px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:var(--accent); color:#13110b;
  animation:ptab-ping 1.4s ease-out .35s 3; transition:transform .15s ease, filter .15s ease; }
.ptab__x svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; }
.ptab__x:hover{ transform:scale(1.08); filter:brightness(1.08); }
.ptab__x:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.ptab.out{ animation:ptab-out .26s ease forwards; }
@keyframes ptab-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes ptab-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes ptab-ping{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 65%,transparent); } 100%{ box-shadow:0 0 0 11px color-mix(in srgb,var(--accent) 0%,transparent); } }
/* while a preview is open, our page tab is no longer the active one */
.ide.preview-open .tabs .tab.on{ background:transparent; color:var(--faint); }
.ide.preview-open .tabs .tab.on::before{ display:none; }
@media (max-width:760px){
  .ide.preview-open .tabs .tabs-lang{ display:none !important; }
  .ptab{ padding:0 6px 0 12px; margin-left:auto; }
  .ptab .nm{ max-width:34vw; }
}
@media (prefers-reduced-motion:reduce){ .ptab, .ptab__x{ animation:none; } }

/* ---- preview control = right corner of the top bar, NOT a tab ---- */
.ptab{ margin-left:auto; order:100; background:transparent !important; border-right:0 !important; border-left:0; padding:0 12px 0 14px; gap:10px; color:var(--ink-2,#b8b8bd); font-weight:500; }
.ptab::before{ display:none !important; }
.ptab .dot{ display:none; }
.ptab .nm{ font-size:var(--fs-meta); letter-spacing:.04em; }
.ide.preview-open .tabs .tab.on{ background:var(--bg-tab-on) !important; color:var(--ink) !important; }
.ide.preview-open .tabs .tab.on::before{ display:block !important; }
@media (max-width:760px){ .ptab{ padding:0 10px 0 8px; margin-left:auto; } .ptab .nm{ max-width:30vw; } }

/* ---- preview close: square ---- */
.ptab__x{ border-radius:5px !important; }
@keyframes ptab-ping{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 65%,transparent); } 100%{ box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent); } }

/* ---- preview close: outline only, no fill ---- */
.ptab__x{ background:transparent !important; color:var(--accent) !important; box-shadow:inset 0 0 0 1.5px var(--accent); }
.ptab__x:hover{ background:color-mix(in srgb,var(--accent) 14%,transparent) !important; filter:none; }
@keyframes ptab-ping{ 0%{ box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent); } 100%{ box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent); } }

.ptab__x{ color:var(--ink) !important; }

.ptab__x{ box-shadow:none !important; border:1px solid var(--accent) !important; }

.ptab__x{ position:relative; animation:none !important; }
.ptab__x::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; }
.ptab__x{ opacity:0; transform:scale(.6); pointer-events:none; transition:opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.3) !important; }
.ide.preview-ready .ptab__x{ opacity:1; transform:none; pointer-events:auto; }
.ide.preview-ready .ptab__x::after{ animation:ptab-ping3 1.2s ease-out .3s 2 both; }
@keyframes ptab-ping3{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent); } 100%{ box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent); } }
@media (prefers-reduced-motion:reduce){ .ptab__x::after{ animation:none; } }

/* ---- site window OPEN: unfolds from its card (mirror of close); name + ✕ appear together after ---- */
.caseov--site .caseov__frame{ border-radius:18px; }
.caseov.caseov--site.show .caseov__frame{ border-radius:0; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .18s ease, border-radius .3s ease; }
.caseov.caseov--site.show .caseov__scrim{ transition:opacity .25s ease; }
.ptab{ animation:none !important; opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1); }
.ide.preview-ready .ptab{ opacity:1; transform:none; }
.ptab.out{ opacity:0 !important; transform:translateY(-4px) !important; transition:opacity .22s ease, transform .22s ease; }
.ptab__x{ opacity:1 !important; transform:none !important; pointer-events:auto !important; transition:background .15s ease !important; }
.ide.preview-ready .ptab__x::after{ animation:ptab-ping3 1.2s ease-out .25s 2 both; }

@media (min-width:761px){
.caseov.caseov--site.show .caseov__frame{ transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .24s ease, border-radius .45s ease; }
.caseov.caseov--site.show .caseov__scrim{ transition:opacity .35s ease; }
}

/* mobile: project tab COVERS the language switch in place — no reflow, nothing shifts */
@media (max-width:760px){
  .tabs{ position:relative; }
  .ide.preview-open .tabs .tabs-lang{ display:flex !important; }
  .tabs .tabs-lang{ transition:opacity .2s ease; }
  .ide.preview-ready .tabs .tabs-lang{ opacity:0; pointer-events:none; }
  .ptab{ position:absolute !important; top:0; right:0; bottom:0; margin-left:0 !important; z-index:3; background:var(--bg-tab-on, var(--bg)); }
}

/* softer entrance of project tab + ✕: slow fade + short glide, crossfades with the language switch */
.ptab{ transform:translateX(10px); transition:opacity .5s cubic-bezier(.25,.8,.3,1), transform .6s cubic-bezier(.22,1,.36,1); }
.ide.preview-ready .ptab{ opacity:1; transform:none; }
.ide.preview-ready .ptab__x::after{ animation-delay:.55s; }
@media (max-width:760px){ .tabs .tabs-lang{ transition:opacity .35s ease; } }

/* ptab: pure soft fade, no movement (nothing in the bar shifts) */
.ptab{ transform:none !important; transition:opacity .6s cubic-bezier(.4,0,.2,1) !important; will-change:opacity; }
.ptab.out{ transition:opacity .25s ease !important; }
.ide.preview-ready .ptab__x::after{ animation-delay:.6s; }
@media (max-width:760px){
  .tabs .tabs-lang{ transition:opacity .45s ease; }
  .ptab{ box-shadow:-14px 0 14px -4px var(--bg-tab-on, var(--bg)); }
}

/* mobile: only the ✕ — no project name in the bar; fade .45s (desktop .6s) */
@media (max-width:760px){
  .ptab .nm{ display:none !important; }
  .ptab{ padding:0 10px 0 10px !important; gap:0 !important; box-shadow:-10px 0 10px -4px var(--bg-tab-on, var(--bg)); transition:opacity .45s cubic-bezier(.4,0,.2,1) !important; }
  .ptab__x{ margin-left:0 !important; }
  .ide.preview-ready .ptab__x::after{ animation-delay:.45s; }
}