/* АРВЕКСИС Лаб — общий дизайн-система сайта (подстраницы + при желании главная) */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Consolas", "Liberation Mono", monospace;
  --display: "Arvexis Display", "Segoe UI", system-ui, sans-serif;
  --ink:#171b21; --ink-soft:#48525d; --muted:#79838e;
  --paper:#eceff3; --surface:#ffffff; --surface-2:#f6f8fa;
  --line:#d7dde3; --line-strong:#bcc5cd;
  --accent:#0d6b80; --accent-ink:#0a5262; --accent-soft:#e0eef1;
  --stamp:#ac4527; --ok:#2f7d5b;
  --grid:rgba(13,107,128,.06);
  --shadow:0 1px 2px rgba(20,30,40,.06),0 12px 30px -18px rgba(20,40,55,.25);
  --shadow-lg:0 30px 70px -34px rgba(15,40,55,.45);
  --radius:5px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#e7edf2; --ink-soft:#aab5bf; --muted:#7d8894; --paper:#0c1015; --surface:#141a21; --surface-2:#1a222b;
    --line:#26303a; --line-strong:#35424e; --accent:#37a9c1; --accent-ink:#82cddf; --accent-soft:#12303a;
    --stamp:#d0764f; --ok:#4fb387; --grid:rgba(55,169,193,.07);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -20px rgba(0,0,0,.7); --shadow-lg:0 40px 90px -40px rgba(0,0,0,.85); }
}
:root[data-theme="light"] { --ink:#171b21; --ink-soft:#48525d; --muted:#79838e; --paper:#eceff3; --surface:#fff; --surface-2:#f6f8fa;
  --line:#d7dde3; --line-strong:#bcc5cd; --accent:#0d6b80; --accent-ink:#0a5262; --accent-soft:#e0eef1; --stamp:#ac4527; --ok:#2f7d5b; --grid:rgba(13,107,128,.06);
  --shadow:0 1px 2px rgba(20,30,40,.06),0 12px 30px -18px rgba(20,40,55,.25); --shadow-lg:0 30px 70px -34px rgba(15,40,55,.45); }
:root[data-theme="dark"] { --ink:#e7edf2; --ink-soft:#aab5bf; --muted:#7d8894; --paper:#0c1015; --surface:#141a21; --surface-2:#1a222b;
  --line:#26303a; --line-strong:#35424e; --accent:#37a9c1; --accent-ink:#82cddf; --accent-soft:#12303a; --stamp:#d0764f; --ok:#4fb387; --grid:rgba(55,169,193,.07);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px -20px rgba(0,0,0,.7); --shadow-lg:0 40px 90px -40px rgba(0,0,0,.85); }

html { scroll-behavior:smooth; }
body { margin:0; background-color:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(1100px 560px at 86% -12%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 58%),
    radial-gradient(color-mix(in srgb,var(--accent) 14%, transparent) 1px, transparent 1.5px);
  background-size: 100% 100%, 26px 26px; background-attachment: fixed; }
h1,h2,h3 { font-family:var(--display); text-wrap:balance; line-height:1.05; letter-spacing:0; margin:0; font-weight:700; }
p { margin:0; } a { color:inherit; text-decoration:none; }
:where(a, button, input, summary, [tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.wrap { width:min(1160px,92vw); margin-inline:auto; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before { content:""; width:22px; height:1px; background:var(--accent); opacity:.7; }

#progress { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-ink)); z-index:100; transition:width .1s linear; }

.btn { display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:15px; padding:11px 20px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform .12s,background .15s,border-color .15s,box-shadow .15s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-ink); box-shadow:0 8px 20px -10px var(--accent); }
.btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent-ink); }
.btn-sm { padding:8px 15px; font-size:14px; }

header { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; gap:24px; height:62px; }
.brand { font-family:var(--display); display:flex; align-items:baseline; gap:8px; font-weight:700; letter-spacing:.01em; font-size:20px; }
.brand::before { content:""; width:28px; height:28px; border-radius:7px; background:url("arvexis_logo.png") center/cover no-repeat; box-shadow:0 0 0 1px var(--line-strong); align-self:center; flex:none; }
.brand b { color:var(--accent-ink); }
.nav .links { display:flex; gap:20px; margin-left:auto; font-size:14.5px; color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:100px; padding:8px 18px; background:color-mix(in srgb,var(--surface) 55%, transparent); }
.nav .links a { padding:4px 0; border-bottom:1.5px solid transparent; transition:color .15s,border-color .15s; }
.nav .links a:hover, .nav .links a.active { color:var(--ink); border-color:var(--accent); }
.icon-btn { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); cursor:pointer; font-size:15px; }
.icon-btn:hover { color:var(--ink); border-color:var(--accent); }
header.scrolled { box-shadow:0 10px 26px -18px rgba(20,40,55,.45); }
.burger { display:none; font-size:17px; }
@media (max-width:1100px){
  .burger { display:inline-grid; order:3; }
  .nav .links { position:absolute; top:61px; left:0; right:0; flex-direction:column; gap:0; margin:0; padding:6px 6vw 12px;
    background:color-mix(in srgb,var(--paper) 96%, transparent); backdrop-filter:blur(10px); border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:var(--shadow); display:none; }
  body.nav-open .nav .links { display:flex; }
  .nav .links a { padding:13px 2px; border-bottom:1px solid var(--line); font-size:16px; border-left:0; }
  .nav .links a:last-child { border-bottom:0; }
}
@media (max-width:560px){
  .nav { gap:10px; }
  .brand { font-size:17px; gap:6px; min-width:0; }
  .brand::before { width:24px; height:24px; }
  .nav > .btn { display:none; }
  .burger { margin-left:auto; }
}

/* subpage header band */
.page-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:64px 0 56px; }
.page-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:30px 30px; mask-image:radial-gradient(120% 90% at 78% 0%,#000 30%,transparent 78%); }
.page-hero .wrap { position:relative; }
.crumbs { font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:16px; }
.crumbs a:hover { color:var(--accent-ink); }
.page-hero h1 { font-size:clamp(30px,4.4vw,48px); font-weight:800; margin-top:6px; }
.page-hero .lede { color:var(--ink-soft); font-size:clamp(17px,1.5vw,20px); margin-top:18px; max-width:62ch; }
.page-hero .cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

section { padding:72px 0; }
.alt { background:var(--surface); border-block:1px solid var(--line); }
.sec-head { max-width:64ch; margin-bottom:40px; }
.sec-head h2 { font-size:clamp(24px,3.2vw,34px); font-weight:780; margin-top:14px; }
.sec-head p { color:var(--ink-soft); margin-top:14px; font-size:17px; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:900px){ .grid-3 { grid-template-columns:repeat(2,1fr); } .grid-2 { grid-template-columns:1fr; } }
@media (max-width:560px){ .grid-3 { grid-template-columns:1fr; } }

.card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px; transition:border-color .15s,transform .15s,box-shadow .15s; }
.card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.card .ic { font-size:24px; color:var(--accent-ink); }
.card h3 { font-size:18px; font-weight:720; margin:10px 0 8px; }
.card p { color:var(--ink-soft); font-size:15px; }
.card .g { font-family:var(--mono); font-size:11.5px; color:var(--accent-ink); margin-top:10px; }

.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:22px 0; }
.feature-row.rev > .feature-vis { order:-1; }
@media (max-width:820px){ .feature-row { grid-template-columns:1fr; gap:24px; } .feature-row.rev > .feature-vis { order:0; } }
.feature-row h3 { font-size:23px; font-weight:760; }
.feature-row > div > p { color:var(--ink-soft); margin-top:12px; font-size:16px; }
.feature-row ul { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; }
.feature-row li { display:flex; gap:10px; font-size:15px; color:var(--ink-soft); }
.feature-row li::before { content:"—"; color:var(--accent); }
.feature-vis { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; min-height:230px; padding:22px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }

/* Испытание на прессе. Панель тёмная в обеих темах: пресс серебристый,
   на светлом фоне его рёбра сливаются с подложкой. */
.press-vis { background:#0d1218; border-color:#22303c; flex-direction:column; gap:14px; padding:20px 20px 16px; }
.press-vid { display:block; width:100%; max-width:290px; height:auto; cursor:pointer; }
.press-cap { margin:0; text-align:center; font-family:var(--mono); line-height:1.45; }
.press-cap b { display:block; font-size:27px; font-weight:700; letter-spacing:-.02em; color:#e9f2f7; }
.press-cap span { display:block; margin-top:5px; font-size:11.5px; color:#7f8f9c; }
@media (prefers-reduced-motion: reduce) { .press-vid { cursor:default; } }

/* Калькулятор прочности. Раньше жил только на главной внутри её стилей,
   вынесен сюда, чтобы работать на отдельной странице расчёта. */
.calc { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
@media (max-width:760px){ .calc { grid-template-columns:1fr; } }
.calc-in { padding:30px; background:var(--surface); }
.calc-out { padding:30px; background:var(--surface-2); display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line); }
@media (max-width:760px){ .calc-out { border-left:0; border-top:1px solid var(--line); } }
.calc label { display:block; font-size:13px; color:var(--ink-soft); font-weight:600; margin:14px 0 7px; }
.calc label:first-child { margin-top:0; }
.sizes { display:flex; flex-wrap:wrap; gap:7px; }
.size { font-family:var(--mono); font-size:13px; padding:7px 11px; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); cursor:pointer; }
.size.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.loads { display:flex; gap:8px; }
.loads input { font:inherit; font-family:var(--mono); font-size:15px; width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface-2); color:var(--ink); text-align:center; }
.loads input:focus { outline:2px solid var(--accent); border-color:var(--accent); }
.calc .r-lab { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; margin-bottom:8px; }
.calc .r-big { font-family:var(--mono); font-size:54px; font-weight:750; color:var(--accent-ink); letter-spacing:-.03em; line-height:1; }
.calc .r-big small { font-size:22px; color:var(--ink-soft); }
.calc .r-cls { font-family:var(--mono); font-size:15px; margin-top:8px; }
.calc .r-cls b { color:var(--ok); }
.calc .r-form { font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:16px; border-top:1px dashed var(--line-strong); padding-top:12px; line-height:1.7; }

/* Блок скачивания программы */
.dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:32px; align-items:start; }
@media (max-width:900px){ .dl { grid-template-columns:1fr; gap:26px; } }
.dl-get { background:var(--surface-2); border:1px solid var(--line-strong); border-radius:10px; padding:26px; box-shadow:var(--shadow); }
.dl-ver { font-family:var(--mono); font-size:17px; font-weight:650; color:var(--ink); }
.dl-ver span { color:var(--muted); font-weight:400; font-size:14px; }
.dl-btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.dl-req { margin-top:16px; font-size:14.5px; color:var(--ink-soft); }
.dl-facts h3 { font-size:16px; font-weight:700; margin:0 0 7px; }
.dl-facts h3 + p { margin-top:0; }
.dl-facts h3 ~ h3 { margin-top:22px; }
.dl-facts p { font-size:15px; color:var(--ink-soft); margin:0 0 10px; }
.dl-facts pre { font-family:var(--mono); font-size:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:11px 13px; overflow-x:auto; margin:0 0 10px; }
.dl-sum { font-family:var(--mono); font-size:12.5px; word-break:break-all; color:var(--accent-ink) !important; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:10px 12px; }

.spec { width:100%; border-collapse:collapse; font-size:14.5px; }
.spec th, .spec td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
.spec th { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.spec td.g { font-family:var(--mono); color:var(--accent-ink); }
.spec-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); }

/* examples reused */
.examples { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:820px){ .examples { grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px){ .examples { grid-template-columns:1fr; } }
.ex { width:100%; cursor:pointer; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:22px 20px; display:flex; flex-direction:column; gap:7px; text-align:left; font:inherit; transition:border-color .15s,transform .15s,box-shadow .15s; }
.ex:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.ex-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ex-top svg { width:30px; height:34px; color:var(--accent); }
.ex-badge { font-family:var(--mono); font-size:9px; letter-spacing:.12em; font-weight:700; color:var(--stamp); border:1px solid color-mix(in srgb,var(--stamp) 45%, transparent); padding:2px 7px; border-radius:3px; }
.ex .en { font-weight:680; font-size:16px; }
.ex .eg { font-family:var(--mono); font-size:12px; color:var(--muted); }
.ex .meta { font-size:13.5px; color:var(--ink-soft); }
.ex .open { margin-top:8px; font-size:13.5px; color:var(--accent-ink); font-weight:650; display:inline-flex; align-items:center; gap:6px; }
.ex .open::after { content:"↗"; transition:transform .15s; }
.ex:hover .open::after { transform:translate(2px,-2px); }

/* modal */
.modal { position:fixed; inset:0; z-index:90; background:rgba(10,16,20,.7); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:24px; }
.modal.on { display:flex; }
.modal-box { background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; width:min(1040px,96vw); height:94vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); }
.modal-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.modal-head .mt { font-weight:700; } .modal-head .mg { font-family:var(--mono); font-size:12px; color:var(--muted); }
.modal-head .sp { margin-left:auto; }
.modal iframe { flex:1; border:0; width:100%; background:var(--surface-2); }

/* protocol mock (shared visual) */
.doc-mini { background:var(--surface); border:1px solid var(--line-strong); border-radius:6px; box-shadow:var(--shadow); padding:18px; font-size:11px; position:relative; overflow:hidden; width:100%; }
.doc-mini::after { content:"ОБРАЗЕЦ"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-weight:800; font-size:40px; color:var(--stamp); opacity:.1; transform:rotate(-22deg); }
.doc-mini .h { font-weight:800; border-bottom:1.5px solid var(--ink); padding-bottom:6px; }
.doc-mini .t { text-align:center; font-weight:800; letter-spacing:.1em; margin:10px 0; font-size:11px; }
.doc-mini .bar { height:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:2px; margin:4px 0; }

footer { border-top:1px solid var(--line); padding:44px 0 30px; color:var(--muted); font-size:14px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; margin-bottom:26px; }
@media (max-width:720px){ .foot-grid { grid-template-columns:1fr; gap:18px; } }
.foot-grid h4 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 10px; }
.foot-grid a { display:block; padding:3px 0; color:var(--muted); } .foot-grid a:hover { color:var(--accent-ink); }
.foot-bot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:18px; }

.note { font-family:var(--mono); font-size:11.5px; color:var(--muted); background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:7px 11px; display:inline-block; }
.disclaimer { margin-top:20px; padding:18px 20px; border-left:4px solid var(--stamp); background:var(--surface-2); color:var(--ink-soft); font-size:14.5px; }
.disclaimer strong { color:var(--ink); }

/* информационные и правовые страницы */
.legal { max-width:820px; }
.legal h2 { font-size:clamp(22px,3vw,30px); margin:40px 0 14px; }
.legal h2:first-child { margin-top:0; }
.legal p, .legal li { color:var(--ink-soft); }
.legal p + p { margin-top:14px; }
.legal ul { margin:14px 0 0; padding-left:22px; display:grid; gap:8px; }
.legal a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.status-box { background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:10px; padding:22px; }
.status-box strong { color:var(--ink); }
.status-box + .status-box { margin-top:16px; }
.responsive-split { min-width:0; }
@media (max-width:820px){
  .responsive-split { grid-template-columns:1fr !important; gap:28px !important; }
}

.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease,transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* три столпа */
.verbs { font-family:var(--mono); font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:700; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .pillars { grid-template-columns:1fr; } }
.pillar { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px; border-top:3px solid var(--accent); }
.pillar .pk { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); display:inline-block; padding:4px 10px; border-radius:3px; }
.pillar h3 { font-size:19px; font-weight:750; margin:14px 0 8px; }
.pillar > p { color:var(--ink-soft); font-size:15px; }
.pillar ul { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.pillar li { display:flex; gap:9px; font-size:14.5px; color:var(--ink-soft); }
.pillar li::before { content:"✓"; color:var(--accent); font-weight:800; }

/* тарифы */
.price { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
@media (max-width:820px){ .price { grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px; display:flex; flex-direction:column; }
.plan .pn { font-weight:750; font-size:19px; } .plan .pd { color:var(--muted); font-size:13.5px; margin-top:4px; min-height:38px; }
.plan .pp { font-family:var(--mono); font-size:30px; font-weight:700; margin:14px 0 2px; letter-spacing:-.02em; } .plan .pp small { font-size:14px; color:var(--muted); font-weight:500; }
.plan ul { list-style:none; padding:0; margin:16px 0 22px; display:grid; gap:9px; font-size:14.5px; color:var(--ink-soft); }
.plan li { display:flex; gap:9px; } .plan li::before { content:"✓"; color:var(--accent); font-weight:800; }
.plan .btn { margin-top:auto; justify-content:center; }

/* faq */
.faq { display:grid; gap:10px; max-width:820px; }
.qa { background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.qa summary { cursor:pointer; padding:18px 20px; font-weight:650; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:"+"; color:var(--accent); font-weight:700; font-size:20px; transition:transform .2s; }
.qa[open] summary::after { transform:rotate(45deg); }
.qa .a { padding:0 20px 18px; color:var(--ink-soft); font-size:15.5px; }

/* таймлайн-роадмап */
.road { position:relative; padding-left:24px; }
.road::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line-strong); }
.ritem { position:relative; padding:0 0 26px 20px; }
.ritem::before { content:""; position:absolute; left:-24px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); }
.ritem.done::before { background:var(--accent); }
.ritem .rs { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.ritem.done .rs { color:var(--ok); } .ritem.now .rs { color:var(--accent-ink); } .ritem.next .rs { color:var(--muted); }
.ritem h3 { font-size:17px; margin:5px 0 4px; } .ritem p { font-size:14.5px; color:var(--ink-soft); }

/* поток (командный режим) */
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; }
.flow .node { border:1px solid var(--line-strong); border-radius:6px; padding:10px 14px; background:var(--surface-2); }
.flow .arw { color:var(--accent); font-weight:700; }

/* шаги */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s; }
@media (max-width:860px){ .steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps { grid-template-columns:1fr; } }
.step { padding-top:20px; border-top:2px solid var(--accent); }
.step .k { counter-increment:s; font-family:var(--mono); font-size:12px; color:var(--accent-ink); font-weight:700; }
.step .k::before { content:"0" counter(s) " / "; color:var(--muted); }
.step h3 { font-size:18px; margin:10px 0 8px; font-weight:700; }
.step p { color:var(--ink-soft); font-size:15px; }

@media (prefers-reduced-motion:reduce){
  * { animation:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
}