/* ============================================================
   Портфолио — оформление.
   Пять тем переключаются кнопкой «Стиль»: атрибут data-theme
   на <html> (t1…t5). Ниже сначала общая раскладка на
   переменных, потом — сами темы. Правило: разметка слайдов
   про темы НЕ знает, иначе новая тема потребует правки текста.
   ============================================================ */

:root {
  --bg: #070b0a; --fg: #e8fff6; --muted: #a7cfc2;
  --acc: #3fbf9a; --acc2: #8fe3c4; --on-acc: #06120e;
  --card: rgba(63,191,154,.07); --brd: rgba(63,191,154,.32);
  --fh: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fb: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --rad: 6px; --up: none; --ls: -.01em; --hw: 700;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
/* Смена оформления — мгновенная и без анимации. Плавный переход фона
   был ошибкой: цвет текста меняется сразу, а фон полсекунды догоняет,
   и на светлой теме успевает мелькнуть тёмный текст на тёмном поле. */
body { background: var(--bg); color: var(--fg); font-family: var(--fb); }

.deck { position: relative; height: 100dvh; width: 100vw; }
.slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  /* нижний отступ держит под собой панель листания: при низком окне
     последняя строка слайда иначе уезжает под кнопки */
  padding: clamp(22px, 4.4vw, 70px) clamp(20px, 5vw, 78px) clamp(96px, 9vw, 118px);
  overflow-y: auto; overflow-x: hidden;
  opacity: 0; visibility: hidden; transition: opacity .5s ease;
}
/* центрируем распорками, а не justify-content: center — иначе высокий
   слайд обрезается сверху и домотать туда нельзя */
.slide::before, .slide::after { content: ""; flex: 0 0 0; }
.slide::before { margin-top: auto; } .slide::after { margin-bottom: auto; }
.slide.on { opacity: 1; visibility: visible; }
.slide > *:not(.bg):not(.glare) { position: relative; z-index: 3; max-width: 1080px; flex-shrink: 0; }

.bg, .glare { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.glare { z-index: 2; opacity: .5; }

/* ─── типографика ─── */
h1 { font-family: var(--fh); font-size: clamp(27px, 5.2vw, 62px); line-height: 1.06;
     margin: 0 0 20px; font-weight: var(--hw); letter-spacing: var(--ls); text-transform: var(--up); }
/* Вторая строка титула — пояснение к первой, поэтому кегль меньше.
   Тем же размером она не влезает в одну строку ни на одном экране
   (замер: нужно 1453 px при колонке 1080) и рвалась на три. */
h1 em { font-style: normal; color: var(--acc); font-size: .62em; line-height: 1.12;
        display: inline-block; margin-top: .12em; }
h2 { font-family: var(--fh); font-size: clamp(23px, 3.7vw, 44px); line-height: 1.1;
     margin: 0 0 18px; font-weight: var(--hw); letter-spacing: var(--ls); text-transform: var(--up); }
p { font-size: clamp(14px, 1.65vw, 19px); line-height: 1.6; margin: 0 0 18px; max-width: 44em; }
.lead { color: var(--muted); } .lead b { color: var(--fg); font-weight: 700; }
.sm { font-size: clamp(11.5px, 1.3vw, 14px); opacity: .62; }
.big { font-size: clamp(17px, 2.2vw, 27px); font-weight: 700; line-height: 1.35;
       margin: 10px 0 14px; color: var(--acc); max-width: 30em; }
.note { font-size: clamp(12.5px, 1.45vw, 16px); line-height: 1.55; opacity: .72;
        border-left: 2px solid var(--acc); padding-left: 14px; max-width: 48em; }

.pill { display: inline-block; width: fit-content; background: var(--acc); color: var(--on-acc);
        padding: 6px 15px; border-radius: 999px; font-size: clamp(11px, 1.25vw, 13.5px);
        font-weight: 700; margin-bottom: 16px; letter-spacing: .02em; }

/* ─── список в столбик (титул) ─── */
.list { margin: 0 0 18px; padding-left: 22px; max-width: 44em; }
.list li { font-size: clamp(14px, 1.6vw, 18.5px); line-height: 1.55; margin-bottom: 9px; color: var(--muted); }
.list li::marker { color: var(--acc); }

/* ─── иконки (спрайт + вставки) ─── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Значки нарисованы в квадрате 24×24 без viewBox: рамка меньше 24 px их обрезает
   (на телефоне у заголовков карточек было 18 px) — поэтому не меньше 24 px */
.ic { width: max(1.35em, 24px); height: max(1.35em, 24px); flex: none; vertical-align: -.3em; margin-right: .5em;
      fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.big { width: clamp(26px, 3vw, 34px); height: clamp(26px, 3vw, 34px); margin: 0 0 9px; display: block; }

/* ─── шаги «1 → 2 → 3 → 4» ─── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
         margin: 4px 0 16px; width: 100%; }
.step { position: relative; border: 1px solid var(--brd); background: var(--card);
        border-radius: var(--rad); padding: 15px 16px 14px; }
.step .n { position: absolute; top: 12px; right: 14px; font-family: var(--fh); font-weight: var(--hw);
           font-size: clamp(20px, 2.4vw, 28px); color: var(--acc); opacity: .35; line-height: 1; }
.step b { display: block; font-family: var(--fh); font-size: clamp(13.5px, 1.55vw, 16.5px);
          margin-bottom: 6px; font-weight: var(--hw); }
.step span { display: block; font-size: clamp(12px, 1.3vw, 14px); line-height: 1.45; opacity: .78; }

/* ─── технологии ─── */
.techs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 13px;
         margin: 4px 0 14px; width: 100%; }
.tech { border: 1px solid var(--brd); background: var(--card); border-radius: var(--rad); padding: 14px 16px; }
.tech b { display: flex; align-items: center; font-family: var(--fh); font-size: clamp(13.5px, 1.5vw, 16px);
          margin-bottom: 10px; color: var(--acc); font-weight: var(--hw); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: clamp(11px, 1.25vw, 13.5px); border: 1px solid var(--brd);
              border-radius: 999px; padding: 4px 11px; opacity: .85; }
[data-theme="t5"] .chips span { border-radius: 0; }

/* ─── индикатор «работает» ─── */
.live { display: flex; align-items: center; gap: 10px; color: var(--acc);
        font-size: clamp(10.5px, 1.3vw, 13.5px); letter-spacing: .07em; margin-bottom: 20px; font-weight: 700; }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); flex: none;
       box-shadow: 0 0 0 0 currentColor; animation: pulse 2.3s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(127,127,127,.5) }
                   70% { box-shadow: 0 0 0 12px rgba(127,127,127,0) }
                   100% { box-shadow: 0 0 0 0 rgba(127,127,127,0) } }

/* ─── числа ─── */
.nums { display: flex; gap: clamp(18px, 3.6vw, 54px); flex-wrap: wrap; margin: 6px 0 16px; }
.nums b { display: block; font-family: var(--fh); font-size: clamp(26px, 4.2vw, 48px);
          line-height: 1; color: var(--acc); font-weight: var(--hw); letter-spacing: -.03em; }
.nums i { font-style: normal; display: block; margin-top: 8px; max-width: 12em;
          font-size: clamp(11px, 1.28vw, 13.5px); opacity: .68; line-height: 1.45; }

/* ─── карточки ─── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
         gap: 13px; margin: 4px 0 16px; width: 100%; }
.card { background: var(--card); border: 1px solid var(--brd); border-radius: var(--rad); padding: 15px 17px; }
.card b { display: flex; align-items: center; font-family: var(--fh); font-size: clamp(13.5px, 1.6vw, 17px);
          margin-bottom: 7px; color: var(--acc); font-weight: var(--hw); }
.card span { display: block; font-size: clamp(12px, 1.35vw, 14.5px); line-height: 1.5; opacity: .82; }

/* ─── кто это делает: блок в конце последней страницы ─── */
.who { background: var(--card); border: 1px solid var(--brd); border-radius: var(--rad);
       padding: 14px 17px; margin: 4px 0 10px; width: 100%; }
.who b { display: flex; align-items: center; font-family: var(--fh); font-size: clamp(14px, 1.7vw, 18px);
         color: var(--acc); font-weight: var(--hw); margin-bottom: 6px; }
.who span { display: block; font-size: clamp(12px, 1.35vw, 14.5px); line-height: 1.5; opacity: .82;
            margin-bottom: 8px; }
.who a { display: inline-flex; align-items: center; font-size: clamp(12px, 1.35vw, 14.5px);
         font-weight: 700; color: var(--acc); text-decoration: none;
         border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.who a:hover { opacity: .75; }

/* ─── цепочка ─── */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 20px; }
.flow span { border: 1px solid var(--brd); background: var(--card); border-radius: var(--rad);
             padding: 8px 13px; font-size: clamp(11.5px, 1.4vw, 15px); }
.flow span.hi { background: var(--acc); color: var(--on-acc); border-color: var(--acc); font-weight: 700; }
.flow em { font-style: normal; opacity: .45; }

/* ─── блок списком ─── */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin: 4px 0 14px; width: 100%; }
.pane { border: 1px solid var(--brd); border-radius: var(--rad); padding: 15px 18px; background: var(--card);
        margin: 4px 0 14px; }
.pane h3 { color: var(--acc); }
.pane h3 { font-family: var(--fh); margin: 0 0 10px; font-size: clamp(14px, 1.7vw, 18px); }
.pane ul { margin: 0; padding-left: 18px; } .pane li { font-size: clamp(12px, 1.35vw, 14.5px);
           line-height: 1.5; margin-bottom: 8px; opacity: .85; } .pane li:last-child { margin-bottom: 0; }
.pane.yes h3 { color: var(--acc); } .pane.no h3 { color: var(--acc2); }

/* ─── таблица ─── */
.tbl { border-collapse: collapse; width: 100%; margin: 4px 0 16px; font-size: clamp(11.5px, 1.35vw, 15px); }
.tbl th, .tbl td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--brd); vertical-align: top; line-height: 1.45; }
.tbl th { font-family: var(--fh); color: var(--acc); font-size: clamp(11px, 1.25vw, 13.5px); letter-spacing: .03em; }
.tbl td b { color: var(--fg); }
.tbl tr:last-child td { border-bottom: 0; }

/* ─── появление ─── */
.rise { opacity: 0; transform: translateY(18px); }
.on .rise { animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
.on .rise:nth-of-type(2) { animation-delay: .07s } .on .rise:nth-of-type(3) { animation-delay: .14s }
.on .rise:nth-of-type(4) { animation-delay: .21s } .on .rise:nth-of-type(5) { animation-delay: .28s }
.on .rise:nth-of-type(6) { animation-delay: .35s }
@keyframes rise { to { opacity: 1; transform: none } }

/* ─── навигация ─── */
.nav { position: fixed; right: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 10;
       display: flex; align-items: center; gap: 8px; }
.nav button { min-width: clamp(52px, 6.4vw, 66px); height: clamp(42px, 5vw, 50px); border-radius: var(--rad);
              padding: 0 clamp(9px, 1.3vw, 15px); border: 1px solid var(--brd); background: var(--card);
              color: var(--fg); font-family: var(--fb); font-size: clamp(14px, 1.6vw, 17px); font-weight: 700;
              cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
              -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
              transition: transform .2s ease, background .2s ease, opacity .2s ease; }
.nav button:hover:not(:disabled) { transform: translateY(-2px); background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.nav button:disabled { opacity: .3; cursor: default; transform: none; }
.nav .ar { font-size: 1.3em; line-height: 1; opacity: .85; }
/* кнопка смены оформления живёт вверху справа, отдельно от листания */
.styleBtn { position: fixed; top: clamp(12px, 2.2vw, 26px); right: clamp(12px, 2.4vw, 28px); z-index: 12;
            height: clamp(38px, 4.4vw, 44px); padding: 0 clamp(12px, 1.4vw, 16px);
            border: 1px solid var(--brd); background: var(--card); color: var(--fg);
            border-radius: var(--rad); font-family: var(--fb); font-size: clamp(12px, 1.4vw, 14.5px);
            font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px;
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            transition: transform .2s ease, background .2s ease; }
.styleBtn:hover { transform: translateY(-2px); background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.styleBtn .sw { width: 13px; height: 13px; border-radius: 50%; background: var(--acc); flex: none;
                border: 1px solid var(--brd); }
.styleBtn:hover .sw { background: var(--on-acc); }
/* «в начало страницы» — рядом с листанием, появляется, когда слайд промотан */
.topBtn { min-width: clamp(42px, 5vw, 50px) !important; font-size: clamp(17px, 2vw, 21px) !important;
          opacity: 0; visibility: hidden; transform: translateY(8px); padding: 0 !important;
          transition: opacity .25s ease, transform .25s ease, background .2s ease; }
.topBtn.show { opacity: 1; visibility: visible; transform: none; }

/* кнопки висят на пружинах (app.js): точка подвеса — над кнопкой, отсюда покачивание */
[data-spring] { transform-origin: 50% -80%; }

.counter { font-size: clamp(13px, 1.5vw, 16px); font-weight: 700; min-width: 58px; text-align: center; opacity: .8; }
.counter span { opacity: .55; font-weight: 400; }
.dots { position: fixed; left: 50%; transform: translateX(-50%); bottom: clamp(14px, 2.4vw, 30px); z-index: 9;
        display: flex; gap: 5px; max-width: 46vw; flex-wrap: wrap; justify-content: center; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg); opacity: .32;
          transition: opacity .3s, width .3s; cursor: pointer; }
.dots i.act { opacity: 1; width: 22px; border-radius: 3px; background: var(--acc); }

/* ─── контакт: та же нижняя полоса, но слева, чтобы не мешать листанию ─── */
.tg { position: fixed; left: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 10;
      height: clamp(42px, 5vw, 50px); padding: 0 clamp(11px, 1.4vw, 16px);
      border: 1px solid var(--brd); background: var(--card); color: var(--fg);
      border-radius: var(--rad); font-family: var(--fb); font-size: clamp(13px, 1.5vw, 16px);
      font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px;
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      transition: transform .2s ease, background .2s ease; }
.tg:hover { transform: translateY(-2px); background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
/* Знак телеграма рисуется заливкой, а не штрихом: контур в 16 px не читался */
.tg .ic { width: 1.15em; height: 1.15em; flex: none; fill: var(--acc); stroke: none; }
.tg:hover .ic { fill: var(--on-acc); }

/* ─── «сырьё → готовый Мозг»: два блока со стрелкой между ними ─── */
.fuse { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
        gap: clamp(8px, 1.4vw, 16px); margin: 4px 0 16px; width: 100%; }
/* min-width: 0 — иначе grid-колонка не сжимается и длинные чипы («Научные
   публикации») вылезают за край экрана на телефоне */
.fuse .pane { margin: 0; height: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.fuse .pane.hi { border-color: var(--acc); }
.fuse .pane b { display: block; font-family: var(--fh); color: var(--acc); font-weight: var(--hw);
                font-size: clamp(14px, 1.7vw, 18px); margin-bottom: 9px; }
.fuse-ar { font-style: normal; font-size: clamp(20px, 2.6vw, 30px); color: var(--acc); opacity: .8; }

/* ════════════════ ТЕМА 1 · ТЁМНЫЙ ТЕРМИНАЛ ════════════════ */
[data-theme="t1"] .bg {
  background-image: linear-gradient(rgba(63,191,154,.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(63,191,154,.10) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(130% 95% at 28% 16%, #000 18%, transparent 76%);
          mask-image: radial-gradient(130% 95% at 28% 16%, #000 18%, transparent 76%);
}
[data-theme="t1"] .glare { background: radial-gradient(700px 420px at 82% 88%, rgba(63,191,154,.12), transparent 70%); }

/* ════════════════ ТЕМА 2 · ИЗУМРУД И ЗОЛОТО ════════════════ */
[data-theme="t2"] {
  --bg: #0c1f1a; --fg: #ecf4ef; --muted: #cfe6dc; --acc: #d6b262; --acc2: #7fe0b8; --on-acc: #14261f;
  --card: rgba(255,255,255,.05); --brd: rgba(214,178,98,.28);
  --fh: Georgia, "Times New Roman", serif; --fb: -apple-system, "Segoe UI", Roboto, sans-serif;
  --rad: 13px; --ls: -.02em; --hw: 700;
}
[data-theme="t2"] .bg { background:
  radial-gradient(900px 540px at 78% 4%, rgba(23,120,90,.55), transparent 62%),
  radial-gradient(760px 560px at 8% 98%, rgba(9,52,44,.92), transparent 68%); }
[data-theme="t2"] .glare { background: radial-gradient(620px 420px at 62% 24%, rgba(255,255,255,.10), transparent 70%); }
[data-theme="t2"] h1, [data-theme="t2"] h2 { color: #f2e4bd; }

/* ════════════════ ТЕМА 3 · ШВЕЙЦАРСКИЙ МИНИМАЛИЗМ ════════════════ */
[data-theme="t3"] {
  --bg: #fbfaf8; --fg: #111214; --muted: #55565a; --acc: #e3352b; --acc2: #111214; --on-acc: #fff;
  --card: #fff; --brd: rgba(0,0,0,.12);
  --fh: "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;
  --fb: "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;
  --rad: 3px; --ls: -.035em; --hw: 700;
}
[data-theme="t3"] .bg { background: linear-gradient(90deg, transparent 0, transparent calc(clamp(20px,5vw,78px) - 22px),
  #e3352b calc(clamp(20px,5vw,78px) - 22px), #e3352b calc(clamp(20px,5vw,78px) - 20px), transparent calc(clamp(20px,5vw,78px) - 20px)); }
[data-theme="t3"] .card { box-shadow: 0 5px 20px rgba(0,0,0,.05); }
[data-theme="t3"] .card b { color: #111214; }
[data-theme="t3"] .nums b { color: #111214; }
[data-theme="t3"] .dots i { background: #111214; }
[data-theme="t3"] .dots i.act { background: #e3352b; }
[data-theme="t3"] .nav button { background: #fff; }

/* ════════════════ ТЕМА 4 · ИНЖЕНЕРНЫЙ ЧЕРТЁЖ ════════════════ */
[data-theme="t4"] {
  --bg: #0e2b4d; --fg: #eaf3ff; --muted: #b6d3ee; --acc: #ffd166; --acc2: #7fb2e0; --on-acc: #10233d;
  --card: rgba(255,255,255,.06); --brd: rgba(255,255,255,.34);
  --fh: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fb: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --rad: 4px; --ls: 0; --hw: 700;
}
[data-theme="t4"] .bg { background-image:
  linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
  linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px; }
[data-theme="t4"] .glare { background: radial-gradient(760px 460px at 76% 12%, rgba(125,178,224,.16), transparent 70%); }

/* ════════════════ ТЕМА 5 · ЖУРНАЛЬНЫЙ БРУТАЛИСТ ════════════════ */
[data-theme="t5"] {
  --bg: #101010; --fg: #f5f5f0; --muted: #c9c9c2; --acc: #f5d90a; --acc2: #ff5c39; --on-acc: #101010;
  --card: rgba(245,217,10,.07); --brd: rgba(245,217,10,.35);
  --fh: "Arial Black", Impact, "Segoe UI", sans-serif;
  --fb: -apple-system, "Segoe UI", Roboto, sans-serif;
  --rad: 0px; --up: uppercase; --ls: -.035em; --hw: 900;
}
[data-theme="t5"] .bg { background: repeating-linear-gradient(135deg, rgba(245,217,10,.05) 0 2px, transparent 2px 24px); }
[data-theme="t5"] .glare { background: radial-gradient(640px 420px at 18% 86%, rgba(255,92,57,.14), transparent 72%); }
[data-theme="t5"] .card b, [data-theme="t5"] .pane h3 { text-transform: uppercase; letter-spacing: -.01em; }
[data-theme="t5"] .nums b { font-size: clamp(34px, 5.4vw, 66px); }
[data-theme="t5"] .nums i { text-transform: uppercase; font-weight: 700; letter-spacing: .03em; }
[data-theme="t5"] .pill { border-radius: 0; letter-spacing: .18em; }

/* ─── низкий экран: жмём вертикальные промежутки, шрифты не трогаем ─── */
@media (max-height: 820px) {
  .slide { padding-top: clamp(16px, 3vw, 42px); }
  h1 { margin-bottom: 13px } h2 { margin-bottom: 12px } p { margin-bottom: 12px }
  .pill { margin-bottom: 11px } .live { margin-bottom: 13px }
  .cards { gap: 10px } .card { padding: 12px 14px } .flow { margin-bottom: 14px }
  .nums { gap: clamp(16px, 3vw, 38px) } .nums i { margin-top: 6px }
}
/* ─── телефон: колонкой, крупнее, без горизонтальной тесноты ─── */
@media (max-width: 680px) {
  .dots { display: none }
  /* Контакт остаётся внизу, в одной полосе с листанием: наверху он загораживал
     заголовок слайда. Ник с листанием на 375 px не расходится, поэтому на телефоне
     виден только значок телеграма — сама кнопка кликабельна целиком. */
  .tg { height: 42px; width: 42px; padding: 0; justify-content: center; }
  .tg span { display: none }
  .tg .ic { width: 20px; height: 20px; margin: 0 }
  .styleBtn .styleLbl { display: none }
  .styleBtn { padding: 0 12px; height: 38px }
  .slide { padding-left: 16px; padding-right: 16px; padding-bottom: 92px; padding-top: 58px }
  p, .list li { font-size: 15px; line-height: 1.55; }
  h1 { font-size: 28px } h2 { font-size: 23px }
  .cards { grid-template-columns: 1fr; gap: 10px }
  /* значок заголовка карточки чуть заходит на поле влево и вверх — тексту остаётся место */
  .card b > .ic, .card b > .ics { margin-left: -5px; margin-right: 7px; position: relative; top: -2px }
  /* «сырьё → Мозг» на телефоне складывается в колонку, стрелка смотрит вниз */
  .fuse { grid-template-columns: 1fr; justify-items: center; gap: 8px }
  .fuse .pane { width: 100% }
  .fuse-ar { transform: rotate(90deg) }
  .nums { gap: 16px 26px } .nums i { max-width: 9.5em }
  .steps { grid-template-columns: 1fr } .techs { grid-template-columns: 1fr }
  /* таблица превращается в карточки: три колонки в 360 точек не живут */
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100% }
  .tbl tr:first-child { display: none }
  .tbl tr { border: 1px solid var(--brd); border-radius: var(--rad);
            background: var(--card); padding: 12px 13px; margin-bottom: 10px }
  .tbl td { border: 0; padding: 0 0 7px }
  .tbl td:last-child { padding-bottom: 0 }
  .tbl td:first-child { font-family: var(--fh); color: var(--acc); font-size: 15px; margin-bottom: 3px }
  .tbl td:first-child b { color: inherit }
  .tbl td:nth-child(2)::before { content: "Было: "; opacity: .6 }
  .tbl td:nth-child(3)::before { content: "Стало: "; color: var(--acc) }
  .tbl td:nth-child(n+2) { font-size: 13.5px; line-height: 1.45 }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none } .on .rise { animation: none }
  .led { animation: none }
}