/* ═══════════════════════════════════════════════════════════════════════
   «Рабочий стол» — визуальная система главной страницы bachinina.ru.

   Направление выбрано Катей 27.07.2026 из шести собранных вариантов.
   Reference lock и все правила — в DESIGN.md рядом. Оттуда же значения:
   этот файл их только реализует, придумывать здесь нечего.

   Имена переменных — по общему контракту SiBi/shared/design/tokens.css.
   Сам контракт не импортируется: он лежит вне вебрута и на прод не едет,
   поэтому имена берём из него, а значения (они принадлежат проекту) — тут.

   Старый styles.css НЕ трогаем: на нём живут десять кейсовых страниц.
   Он уйдёт, когда переедут и они.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Шрифты ───────────────────────────────────────────────────────────
   Полные подмножества, а не обрезки из макета: в тех не было ни цифр,
   ни латиницы, и «10», «AI», «от 150 000 ₽» рисовались системным
   шрифтом — прямое нарушение запрета из DESIGN.md.                     */

@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/onest-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/onest-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/onest-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/onest-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/onest-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/onest-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── Токены ───────────────────────────────────────────────────────────
   Роль цвета — часть цвета. Янтарь не становится фоном,
   синий не становится заголовком.                                      */

:root{
  --font-display:'Onest', system-ui, sans-serif;
  --font-body:   'Onest', system-ui, sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, monospace;

  --fs-display: clamp(32px, 4.2vw, 52px);
  --fs-h1:      clamp(26px, 3.4vw, 42px);
  --fs-h2:      clamp(23px, 2.6vw, 30px);
  --fs-h3:      19px;
  --fs-lead:    17px;
  --fs-base:    16px;
  --fs-sm:      15px;
  --fs-xs:      13.5px;
  --fs-label:   10px;   /* моношрифт капсом, служебные подписи */

  --fw-regular: 400;
  --fw-medium:  500;

  --lh-display: 1.06;
  --lh-tight:   1.2;
  --lh-normal:  1.55;

  --tracking-tight:  -.03em;
  --tracking-normal: 0;
  --tracking-wide:   .12em;

  --bg:           #E1D7C2;  /* стол */
  --surface:      #FFFFFF;  /* окно, плитка */
  --surface-soft: #F6F0E2;  /* заголовочная строка окна, врезка */
  --surface-tint: #EFE7D6;  /* подсветка под курсором */

  --text:        #1D1B16;
  --text-muted:  #4A463C;
  --text-faint:  #7B7566;
  --text-invert: #FFFFFF;

  --accent:      #F0A202;   /* ТОЛЬКО главное действие и метка «чаще всего берут» */
  --info:        #1D6FD6;   /* ТОЛЬКО активная вкладка и ссылка на кейс */
  --good:        #2F7A46;   /* ТОЛЬКО точка «в проде» */
  --neutral:     #C3B99F;   /* точка неактивного статуса */

  --border:        #1D1B16;
  --border-soft:   #CFC5AF;
  --border-width:  1.5px;

  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 8px;

  /* Тени плоские и смещённые: так рисуют предмет на столе,
     а не подсветку в интерфейсе. Размытых теней в системе нет. */
  --shadow-sm: 3px 3px 0 rgba(29,27,22,.12);
  --shadow-md: 5px 6px 0 rgba(29,27,22,.16);
  --shadow-btn: 2px 2px 0 var(--border);

  --measure:   66ch;
  --max-width: 1200px;

  --dur-fast: 120ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ── База ─────────────────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-6, 32px)}

/* Служебная подпись моношрифтом. Несёт всё техническое: имена продуктов,
   статусы, цены, названия окон — так техническое отделено от человеческого
   без второго цветового акцента. */
.mlbl{font-family:var(--font-mono);font-size:var(--fs-label);
      letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}

.arw{width:.72em;height:.72em;flex:none;vertical-align:-.02em}

:focus-visible{outline:2px solid var(--info);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--surface);
      border:var(--border-width) solid var(--border);border-radius:var(--r-md);
      padding:10px 16px;z-index:60}
.skip:focus{left:16px;top:16px}

/* ── Панель как в операционной системе ───────────────────────────── */

.menubar{display:flex;align-items:center;gap:18px;background:var(--surface);
         border:var(--border-width) solid var(--border);border-radius:var(--r-md);
         padding:8px 14px;margin-top:18px;position:sticky;top:12px;z-index:20;
         box-shadow:var(--shadow-sm)}
.menubar__name{font-weight:var(--fw-medium);font-size:14.5px;white-space:nowrap}
.menubar nav{display:flex;gap:18px;margin-left:10px;flex-wrap:wrap}
.menubar nav a{font-size:var(--fs-xs);color:var(--text-muted);
               border-bottom:var(--border-width) solid transparent}
.menubar nav a:hover,.menubar nav a:focus-visible{color:var(--text);border-bottom-color:var(--accent)}
.menubar__st{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;
             letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);
             display:flex;align-items:center;gap:7px;white-space:nowrap}
.menubar__st i{width:7px;height:7px;border-radius:50%;background:var(--good);display:block}

/* ── Обложка ─────────────────────────────────────────────────────── */

.hero{padding:48px 0 34px;display:grid;
      grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:40px;align-items:center}
h1{font-size:var(--fs-display);font-weight:var(--fw-medium);line-height:var(--lh-display);
   letter-spacing:var(--tracking-tight);margin-bottom:18px;text-wrap:balance}
.lead{color:var(--text-muted);font-size:var(--fs-lead);max-width:46ch;margin-bottom:24px;
      text-wrap:pretty}
.acts{display:flex;gap:12px;flex-wrap:wrap}

.btn{border:var(--border-width) solid var(--border);border-radius:var(--r-md);
     padding:12px 22px;font-size:14.5px;font-weight:var(--fw-medium);
     background:var(--accent);box-shadow:var(--shadow-btn);
     transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease)}
.btn:hover,.btn:focus-visible{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--border)}
.btn--ghost{background:var(--surface)}

/* Каскад окон: доказательство «продукты существуют», а не украшение. */
.stack{position:relative;height:410px}
.win{position:absolute;background:var(--surface);border:var(--border-width) solid var(--border);
     border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md)}
.win__bar{display:flex;align-items:center;gap:7px;padding:6px 9px;
          border-bottom:var(--border-width) solid var(--border);background:var(--surface-soft)}
.win__bar i{width:8px;height:8px;border-radius:50%;border:1.2px solid var(--border);display:block}
.win__bar span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
               text-transform:uppercase;color:var(--text-faint);margin-left:4px;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win img{display:block;width:100%;height:var(--h,260px);object-fit:cover;object-position:top center}
.w1{left:0;top:34px;width:176px;z-index:1;--h:248px}
.w2{left:148px;top:152px;width:168px;z-index:2;--h:228px}
.w3{right:0;top:0;width:184px;z-index:3;--h:286px}

/* ── Секция: «в окне» или «на столе» ─────────────────────────────────
   Ритм страницы даёт разница «в окне / на столе», а не разные фоны. */

.pane{background:var(--surface);border:var(--border-width) solid var(--border);
      border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:26px}
.pane__bar{display:flex;align-items:center;gap:8px;padding:9px 14px;
           border-bottom:var(--border-width) solid var(--border);background:var(--surface-soft)}
.pane__bar i{width:8px;height:8px;border-radius:50%;border:1.2px solid var(--border);display:block}
.pane__bar span{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
                text-transform:uppercase;color:var(--text-faint);margin-left:6px}
.pane__body{padding:26px 26px 30px}
.pane--flat{background:transparent;border:none;box-shadow:none}
.pane--flat .pane__body{padding:26px 0 30px}

h2{font-size:var(--fs-h2);font-weight:var(--fw-medium);letter-spacing:-.025em;
   line-height:1.15;text-wrap:balance}
.head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;flex-wrap:wrap}
/* Подводка к вкладкам: не служебная подпись моношрифтом, а обычная фраза,
   поэтому не .mlbl. Стоит между заголовком и вкладками. */
.head:has(+.pane__lead){margin-bottom:8px}
.pane__lead{font-size:18px;color:var(--text-muted);line-height:1.45;margin-bottom:18px}

/* ── Портфель: вкладки на радиокнопках, без JS ───────────────────── */

.tabs input{position:absolute;opacity:0;pointer-events:none}
.tabbar{display:flex;margin-bottom:20px;flex-wrap:wrap}
.tabbar label{border:var(--border-width) solid var(--border);border-right-width:0;
              padding:9px 16px;font-size:var(--fs-xs);background:var(--surface-soft);
              color:var(--text-muted);cursor:pointer}
.tabbar label:first-of-type{border-radius:var(--r-md) 0 0 var(--r-md)}
.tabbar label:last-of-type{border-right-width:var(--border-width);
                           border-radius:0 var(--r-md) var(--r-md) 0}
.tabbar label:hover{background:var(--surface-tint);color:var(--text)}
#t0:checked~.tabbar label[for=t0],#t1:checked~.tabbar label[for=t1],
#t2:checked~.tabbar label[for=t2]{
  background:var(--info);color:var(--text-invert)}
#t0:focus-visible~.tabbar label[for=t0],#t1:focus-visible~.tabbar label[for=t1],
#t2:focus-visible~.tabbar label[for=t2]{
  outline:2px solid var(--accent);outline-offset:2px}
.pane0,.pane1,.pane2{display:none}
#t0:checked~.panes .pane0,#t1:checked~.panes .pane1,
#t2:checked~.panes .pane2{display:block}

.pane__hint{color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* Плитка-папка: то же окно в миниатюре.
   Первой строкой — решённая задача, имя продукта уходит в пилюлю. */
.folder{border:var(--border-width) solid var(--border);border-radius:var(--r-md);
        background:var(--surface);padding:16px 16px 14px;display:flex;flex-direction:column;
        gap:9px;min-height:132px;box-shadow:var(--shadow-sm);
        transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease)}
.folder:hover,.folder:focus-visible{transform:translate(-1px,-1px);box-shadow:var(--shadow-md)}
.folder__top{display:flex;align-items:center;gap:9px}
.folder__id{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.09em;
            text-transform:uppercase;background:var(--surface-soft);
            border:1.2px solid var(--border);border-radius:var(--r-sm);padding:2px 7px}
/* Справа в плитке — площадка, где продукт живёт. Заказчику это полезнее
   статуса «в проде / заморожено»: он сразу видит, его ли это среда. */
.folder__st{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
            text-transform:uppercase;color:var(--text-faint);text-align:right;
            white-space:nowrap}
.folder__task{font-size:var(--fs-h3);font-weight:var(--fw-medium);line-height:1.24;
              letter-spacing:-.015em;text-wrap:balance}
.folder__go{margin-top:auto;font-size:var(--fs-xs);color:var(--info);
            display:flex;align-items:center;gap:6px}

/* ── Доверие: опись на бумаге ────────────────────────────────────────
   Намеренно НЕ карточки и НЕ окна: на странице уже есть и то и другое
   (плитки портфеля, окна форматов, окна-шаги метода). Третий блок той же
   конструкции — то, от чего низ страницы разваливается. Здесь другой тип
   объекта: лист с графами, разделённый пунктиром. */

.pledge{display:grid;max-width:96ch}
.pledge__row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;
             padding:20px 0;border-top:var(--border-width) dashed var(--border-soft)}
.pledge__row:first-child{border-top:none;padding-top:4px}
.pledge__k{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
           text-transform:uppercase;color:var(--text-faint);padding-top:5px}
.pledge__v{font-size:18.5px;line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}

/* ── Форматы: цена стоит в заголовочной строке окна ──────────────── */

.fmts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fmt{background:var(--surface);border:var(--border-width) solid var(--border);
     border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);
     display:flex;flex-direction:column}
.fmt--pick{box-shadow:var(--shadow-md)}
.fmt__bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
          border-bottom:var(--border-width) solid var(--border);background:var(--surface-soft)}
.fmt__bar i{width:8px;height:8px;border-radius:50%;border:1.2px solid var(--border);display:block}
.fmt__name{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
           text-transform:uppercase;color:var(--text-faint)}
.fmt__flag{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
           text-transform:uppercase;background:var(--accent);border:1.2px solid var(--border);
           border-radius:var(--r-sm);padding:1px 6px}
.fmt__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:14px;flex:1}
.fmt__title{font-size:23px;font-weight:var(--fw-medium);letter-spacing:-.025em;line-height:1.15}
.fmt__price{font-size:var(--fs-h3);font-weight:var(--fw-medium);letter-spacing:-.02em}
.fmt__price small{font-family:var(--font-mono);font-size:var(--fs-label);
                  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);
                  font-weight:var(--fw-regular);white-space:nowrap}
.fmt__desc{color:var(--text-muted);font-size:16.5px;line-height:1.5}
.fmt__fit{margin-top:auto;padding-top:14px;border-top:var(--border-width) dashed var(--border-soft);
          font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
/* Итог формата — подвал во всю ширину карточки, как подпись под скриншотом
   в окне. Поэтому лежит рядом с .fmt__body, а не внутри него. */
.fmt__out{margin-top:auto;padding:12px 20px;background:var(--surface-soft);
          border-top:var(--border-width) solid var(--border);
          font-size:var(--fs-sm);line-height:1.45}

/* ── Доказательство: текст слева, окно со скриншотом справа ──────── */

.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:start}
.proof__win{background:var(--surface);border:var(--border-width) solid var(--border);
            border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md)}
.proof__win img{display:block;width:100%;height:340px;object-fit:cover;object-position:top center}
.proof__cap{padding:10px 14px;border-top:var(--border-width) solid var(--border);
            background:var(--surface-soft);font-size:var(--fs-xs);color:var(--text-muted)}

/* ── Метод: три окна-шага ────────────────────────────────────────── */

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{background:var(--surface);border:var(--border-width) solid var(--border);
      border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden;
      display:flex;flex-direction:column}
.step__bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
           border-bottom:var(--border-width) solid var(--border);background:var(--surface-soft);
           font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
           text-transform:uppercase;color:var(--text-faint)}
.step__bar b{color:var(--info);font-weight:var(--fw-regular)}
.step__body{padding:18px 18px 20px}
.step__p{font-size:17px;color:var(--text);line-height:1.5}

/* ── Контакты ────────────────────────────────────────────────────── */

.cta__title{font-size:var(--fs-h1);font-weight:var(--fw-medium);
            letter-spacing:var(--tracking-tight);line-height:var(--lh-display);
            margin-bottom:16px;max-width:18ch;text-wrap:balance}
.cta__lead{color:var(--text-muted);font-size:var(--fs-lead);max-width:62ch;margin-bottom:24px;
           text-wrap:pretty}
.links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.link{background:var(--surface);border:var(--border-width) solid var(--border);
      border-radius:var(--r-md);padding:16px 18px;display:flex;align-items:center;
      justify-content:space-between;gap:12px;font-size:var(--fs-base);box-shadow:var(--shadow-sm);
      transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease)}
.link:hover,.link:focus-visible{transform:translate(-1px,-1px);box-shadow:var(--shadow-md)}
.link .arw{color:var(--info)}
.phone{margin-top:16px;font-family:var(--font-mono);font-size:13px;color:var(--text-faint)}
.phone a{color:var(--text);border-bottom:var(--border-width) solid var(--border-soft)}
.foot{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;padding:22px 0 50px;
      font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.foot a{border-bottom:1px solid var(--border-soft)}

/* ── Адаптив ─────────────────────────────────────────────────────── */

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:28px}
  .stack{height:330px;max-width:420px}
  .fmts,.steps,.proof{grid-template-columns:1fr}
  .links{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wrap{padding:0 16px}
  .menubar{gap:10px;padding:8px 12px}
  .menubar nav{display:none}
  .menubar__st{font-size:9.5px;letter-spacing:.06em;white-space:normal;text-align:right}
  .grid{grid-template-columns:1fr}
  .pledge__row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .pledge__k{padding-top:0}
  .pledge__v{font-size:17.5px}
  .pane__body{padding:20px 16px 24px}
  .tabbar label{border-right-width:var(--border-width);border-radius:var(--r-md);margin:0 6px 6px 0}
  .tabbar label:first-of-type,.tabbar label:last-of-type{border-radius:var(--r-md)}
  .stack{height:300px;margin-top:6px}
  .w1{width:138px;--h:190px}
  .w2{width:132px;left:110px;top:120px;--h:176px}
  .w3{width:146px;--h:224px}
  /* Зона нажатия не меньше 44px */
  .tabbar label{padding:12px 16px}
  .link{padding:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}