/* ================================================================
   Mockingbird landing — газетно-коллажный стиль
   Вырезки из газет: состаренная бумага, рваные края, жёсткие
   офсет-тени, лёгкие повороты, наложение, полутоновая печать.
   Полностью статично — ни анимаций, ни переходов.
   ================================================================ */

@import url("../fonts/fonts.css");

@font-face {
  font-family: "Kholodos";
  src: url("../fonts/Kholodos.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* — рабочая поверхность (тёмный стол), как в исходной палитре — */
  --desk: #2c3138;
  --desk-deep: #16191d;

  /* — бумага и краска — */
  --paper: #e8e1cf;
  --paper-2: #dcd3bd;
  --ink: #1b1814;
  --ink-soft: #4b453a;
  --ink-faint: #6b6252;   /* 4.6:1 на бумаге — WCAG AA */

  /* — печатный красный акцент (из ui/theme.py accent) — */
  --accent: #c62112;
  --accent-hi: #e0341f;
  --accent-lo: #8f150a;
  --ok: #2f7d4f;
  --ok-hi: #3f9c64;
  --warn: #b7791a;

  /* — тёмный «снимок» приложения — */
  --shot-bg: #16181c;
  --shot-panel: #1c1f24;
  --shot-panel-2: #141619;
  --shot-line: #343a42;
  --shot-text: #d7dee6;
  --shot-muted: #8b98a6;

  --grid: 8px;
  --font-serif: "Kholodos", Georgia, "Times New Roman", "PT Serif", serif;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;

  /* зерно для стола */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* зерно для бумаги (полупрозрачное, встроено) */
  --grain-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.28'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");

  /* рваный край вырезки (пилообразный по всем сторонам) */
  /* базовый рваный край вырезки (мелкие карточки) */
  --torn: polygon(
    0% 1.6%, 3% 0.5%, 6.5% 1.9%, 10% 0.6%, 13.5% 2.1%, 17% 0.4%, 20.5% 1.8%,
    24% 0.7%, 27.5% 2.0%, 31% 0.5%, 34.5% 1.7%, 38% 0.6%, 41.5% 2.1%, 45% 0.4%,
    48.5% 1.8%, 52% 0.7%, 55.5% 2.0%, 59% 0.5%, 62.5% 1.7%, 66% 0.6%, 69.5% 2.1%,
    73% 0.4%, 76.5% 1.8%, 80% 0.7%, 83.5% 2.0%, 87% 0.5%, 90.5% 1.7%, 94% 0.6%,
    97% 2.0%, 100% 0.9%,
    99.1% 6%, 100% 12%, 99.0% 18%, 100% 24%, 99.2% 30%, 100% 36%, 98.9% 42%,
    100% 48%, 99.1% 54%, 100% 60%, 99.0% 66%, 100% 72%, 99.2% 78%, 100% 84%,
    98.9% 90%, 100% 95%,
    97% 99.1%, 93.5% 98.0%, 90% 99.4%, 86.5% 98.1%, 83% 99.5%, 79.5% 98.0%,
    76% 99.3%, 72.5% 98.2%, 69% 99.6%, 65.5% 98.1%, 62% 99.4%, 58.5% 98.0%,
    55% 99.5%, 51.5% 98.2%, 48% 99.6%, 44.5% 98.1%, 41% 99.3%, 37.5% 98.0%,
    34% 99.4%, 30.5% 98.2%, 27% 99.6%, 23.5% 98.1%, 20% 99.5%, 16.5% 98.0%,
    13% 99.4%, 9.5% 98.2%, 6% 99.6%, 3% 98.1%, 0% 99.2%,
    1.0% 94%, 0% 88%, 0.9% 82%, 0% 76%, 1.1% 70%, 0% 64%, 1.0% 58%, 0% 52%,
    0.9% 46%, 0% 40%, 1.1% 34%, 0% 28%, 1.0% 22%, 0% 16%, 0.9% 10%, 0% 5%
  );

  /* hero: крупнее клочок — рвань крупнее и хаотичнее, без периодичности */
  --torn-hero: polygon(
    0% 1.1%, 4% 2.6%, 9% 0.4%, 14% 1.8%, 19% 0.3%, 24% 2.2%, 29% 0.6%,
    34% 2.8%, 39% 0.2%, 44% 1.5%, 49% 2.9%, 54% 0.5%, 59% 1.2%, 64% 2.4%,
    69% 0.3%, 74% 1.9%, 79% 0.7%, 84% 2.7%, 89% 0.4%, 94% 2.1%, 97.5% 0.8%, 100% 1.6%,
    99.3% 7%, 100% 14%, 98.6% 21%, 99.6% 29%, 98.8% 37%, 100% 45%, 99.0% 53%,
    99.8% 61%, 98.7% 69%, 100% 77%, 99.2% 85%, 98.9% 92%, 100% 96.5%,
    96% 98.4%, 91% 99.7%, 86% 98.1%, 81% 99.5%, 76% 98.0%, 71% 99.2%,
    66% 98.3%, 61% 99.8%, 56% 98.2%, 51% 99.6%, 46% 98.0%, 41% 99.3%,
    36% 98.4%, 31% 99.7%, 26% 98.1%, 21% 99.4%, 16% 98.3%, 11% 99.6%,
    6% 98.2%, 2% 99.5%, 0% 98.6%,
    0.7% 93%, 1.4% 85%, 0.3% 77%, 1.2% 68%, 0.5% 59%, 1.5% 50%, 0.4% 41%,
    1.1% 32%, 0.2% 23%, 1.3% 15%, 0.6% 8%
  );

  /* мачта шапки: рваная нижняя кромка — другой ритм, крупнее и небрежнее */
  --torn-bottom: polygon(
    0 0, 100% 0, 100% 78%,
    97.5% 93%, 94% 81%, 90.5% 97%, 87% 84%, 83% 99%, 79.5% 86%, 76% 95%,
    72.5% 83%, 69% 98%, 65.5% 85%, 62% 96%, 58.5% 82%, 55% 99%, 51.5% 87%,
    48% 94%, 44.5% 83%, 41% 98%, 37.5% 85%, 34% 96%, 30.5% 82%, 27% 99%,
    23.5% 86%, 20% 95%, 16.5% 83%, 13% 97%, 9.5% 85%, 6% 98%, 2.5% 84%, 0 95%
  );

  /* почти ровный «снимок», обрезанный ножницами */
  --cut: polygon(
    0.4% 1%, 2% 0.2%, 25% 0.8%, 50% 0.1%, 75% 0.9%, 98% 0.2%, 99.6% 1%,
    100% 30%, 99.4% 60%, 100% 99%, 98% 99.8%, 60% 99.1%, 25% 99.9%, 1.5% 99.2%,
    0% 70%, 0.5% 35%
  );

  /* рваная нижняя кромка (для мачты-заголовка) */
  --torn-bottom: polygon(
    0 0, 100% 0, 100% 82%, 97% 96%, 94% 84%, 91% 98%, 88% 85%, 85% 99%, 82% 86%,
    79% 97%, 76% 84%, 73% 98%, 70% 85%, 67% 99%, 64% 86%, 61% 97%, 58% 84%,
    55% 98%, 52% 85%, 49% 99%, 46% 86%, 43% 97%, 40% 84%, 37% 98%, 34% 85%,
    31% 99%, 28% 86%, 25% 97%, 22% 84%, 19% 98%, 16% 85%, 13% 99%, 10% 86%,
    7% 97%, 4% 84%, 0 96%
  );
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* видимый фокус с клавиатуры: печатная рамка-обводка */
:focus { outline: none; }
:focus-visible {
  outline: 3px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(180, 168, 142, .35) 0%, transparent 55%),
    radial-gradient(90% 70% at 88% 110%, rgba(20, 18, 14, .45) 0%, transparent 60%),
    linear-gradient(180deg, var(--desk) 0%, var(--desk-deep) 100%);
  background-attachment: fixed;
}

/* зерно на столе */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--noise);
  background-size: 180px 180px;
  opacity: .07;
  mix-blend-mode: overlay;
}

/* виньетка — свет сверху, тень по краям */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(125% 105% at 50% 0%, transparent 45%, rgba(20, 16, 10, .5) 100%);
}

.stage {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: calc(var(--grid)*1.5);
  padding: calc(var(--grid)*2) calc(var(--grid)*3);
  position: relative;
  z-index: 1;
}

/* ================================================================
   БУМАГА
   Важно: clip-path и filter:drop-shadow на одном элементе взаимно
   гасят тень. Поэтому фон+рваный край живёт на ::before, а тень —
   на самом элементе (filter создаёт stacking context, поэтому
   ::before с z-index:-1 остаётся внутри и не «убегает» назад).
   ================================================================ */

/* клейкая лента */
.tape {
  position: absolute;
  width: 96px;
  height: 26px;
  background: linear-gradient(180deg, rgba(244, 236, 200, .55), rgba(214, 200, 150, .42));
  border-left: 1px solid rgba(255, 255, 255, .35);
  border-right: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 5px rgba(0, 0, 0, .35);
  opacity: .9;
  z-index: 20;
  pointer-events: none;
}
.tape--tl { top: -12px; left: 26px; transform: rotate(-38deg); }
.tape--tr { top: -12px; right: 26px; transform: rotate(38deg); }
.tape--bl { bottom: -12px; left: 40px; transform: rotate(24deg); }

/* ================================================================
   ШАПКА — газетная «мачта»
   ================================================================ */
.header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--grid)*2);
  color: var(--ink);
  filter: drop-shadow(5px 7px 0 rgba(0, 0, 0, .55)) drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
  padding: 10px 20px 30px;
  transform: rotate(-.35deg);
  z-index: 5;
}
/* своя «мачта»: бумага с рваной нижней кромкой */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(0, 0, 0, .05) .8px, transparent 1.1px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px),
    radial-gradient(120% 130% at 50% -30%, rgba(255, 255, 255, .55), transparent 65%),
    var(--grain-paper);
  background-size: 3px 3px, auto, auto, 150px 150px;
  background-blend-mode: multiply, multiply, normal, normal;
  clip-path: var(--torn-bottom);
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.brand__logo { height: clamp(32px, 4.6vh, 46px); width: auto; }

/* два лого в марке: отзеркаленный лежит поверх нормального и исчезает,
   когда марка доехала в крайнюю левую точку */
.brand__logo--mirror {
  position: absolute;
  left: 0; top: 50%;
  transform: translate(0, -50%) scaleX(-1);
  opacity: 1;
}
.brand__mark.is-arrived .brand__logo--mirror { opacity: 0; }

/* марка (лого + Mockingbird) — едет влево, открывая тэглайн.
   Фон прозрачный: текст под ней скрыт синхронной обрезкой clip-path. */
.brand__mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  position: relative;
  z-index: 2;
  will-change: transform;
}
.brand__name {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4.2vh, 38px);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--ink);
}
.brand__name b { color: var(--accent); font-weight: inherit; }

.brand__tagline {
  font-family: var(--font-serif);
  font-size: clamp(17px, 3vh, 25px);
  font-style: italic;
  color: var(--ink-soft);
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* исходно замазано губкой; JS (Web Animations) открывает текст влево */
  clip-path: inset(0 0 0 max(0px, var(--wipe, 0px)));
}
.brand__tagline b { color: var(--accent); font-weight: 700; font-style: normal; }

/* «собесов» — зачёркивание рисуется слева направо, как маркером */
.strike {
  position: relative;
  color: var(--ink-faint);
  white-space: nowrap;
}
.strike::after {
  content: "";
  position: absolute;
  left: -2%;
  top: 54%;
  width: 104%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transform: scaleX(0) rotate(-2.5deg);
  transform-origin: left center;
  /* зачёркивание рисуется в конце последовательности (класс .is-struck) */
}
.strike.is-struck::after { animation: strike-draw .55s cubic-bezier(.7, .05, .3, 1) forwards; }
@keyframes strike-draw {
  from { transform: scaleX(0) rotate(-2.5deg); }
  to   { transform: scaleX(1) rotate(-2.5deg); }
}

.header__nav { display: flex; gap: 8px; align-items: center; }

/* печатные «штампики» */
.pill {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.4vh, 12px);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
}
.pill--gh { color: var(--ink); }
.pill--gh:hover { background: var(--ink); color: var(--paper); }
.pill--version { color: var(--accent); border-color: var(--accent); transform: rotate(-3deg); }
.pill--gpu { color: var(--ok); border-color: var(--ok); transform: rotate(2deg); }
/* открытый код — «залитый» красный штамп */
.pill--oss {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent-lo);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
/* «бесплатно» — контурный штамп рядом с open source */
.pill--free {
  color: var(--accent);
  border-color: var(--accent);
  border-style: dashed;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: rotate(1.5deg);
}

/* ================================================================
   MAIN GRID
   ================================================================ */
.grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.7fr) minmax(220px, 1fr);
  gap: calc(var(--grid)*2);
  align-items: stretch;
}

.col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* вырезки накладываются друг на друга — тень ложится на соседнюю бумагу */
@media (min-width: 1021px) {
  .col--left .feature + .feature { margin-top: -12px; }
  .col--right .metric + .metric { margin-top: -6px; }
}

/* секционные заголовки — бумажные ярлыки на тёмном столе */
.col__title {
  align-self: flex-start;
  font-family: var(--font-serif);
  font-size: clamp(14px, 2.1vh, 18px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(0, 0, 0, .05) .8px, transparent 1.1px),
    var(--grain-paper);
  background-size: 3px 3px, 150px 150px;
  background-blend-mode: multiply, normal;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .6), 0 10px 16px rgba(0, 0, 0, .4);
  transform: rotate(-1.2deg);
  margin-bottom: 4px;
}
.col__title::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--accent);
  flex: none;
  transform: rotate(45deg);
}

/* ---------- LEFT: features — вырезки ---------- */
.col--left { transform: rotate(-.7deg); }

.feature {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  border: none;
  background: transparent;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .58)) drop-shadow(0 12px 16px rgba(0, 0, 0, .4));
  padding: calc(var(--grid)*1.75) calc(var(--grid)*2);
  margin-right: 4px;
  flex: 1;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(0, 0, 0, .05) .8px, transparent 1.1px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px),
    var(--grain-paper);
  background-size: 3px 3px, auto, 150px 150px;
  background-blend-mode: multiply, multiply, normal;
  clip-path: var(--torn);
}
.feature:nth-of-type(odd) { transform: rotate(-.9deg); }
.feature:nth-of-type(even) { transform: rotate(.8deg); margin-left: 6px; margin-right: 0; }
.feature.is-active { filter: drop-shadow(6px 7px 0 rgba(198, 33, 18, .75)) drop-shadow(0 12px 16px rgba(0, 0, 0, .42)); }
.feature.is-active::before { background-color: #f2ead6; }
.feature__ico {
  font-size: clamp(15px, 2.2vh, 20px);
  width: 2.2em; height: 2.2em;
  display: grid; place-items: center;
  flex: none;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, .04);
  transform: rotate(-2deg);
}
.feature__ico svg { width: 1.3em; height: 1.3em; display: block; }
.feature.is-active .feature__ico { color: var(--accent); border-color: var(--accent); }
.feature__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feature__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(16px, 2.5vh, 20px);
  color: var(--ink);
}
.feature.is-active .feature__name { color: var(--accent); }
.feature__desc {
  font-size: clamp(12px, 1.8vh, 14.5px);
  line-height: 1.5;
  color: var(--ink-soft);
  min-height: 3em;
}

/* ---------- CENTER: тёмный «снимок» приложения на бумаге ---------- */
.hero-wrap {
  position: relative;
  min-width: 0; min-height: 0;
  display: grid;
}

.hero {
  min-width: 0; min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  transform: rotate(.4deg);
  z-index: 4;
  padding: 16px 16px 20px;
  color: var(--ink);
  filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, .62)) drop-shadow(0 20px 30px rgba(0, 0, 0, .55));
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper-2);
  background-image:
    radial-gradient(rgba(0, 0, 0, .05) .8px, transparent 1.1px),
    var(--grain-paper);
  background-size: 3px 3px, 150px 150px;
  background-blend-mode: multiply, normal;
  clip-path: var(--torn-hero);   /* своя, более хаотичная кромка */
}

.shot {
  width: min(100%, calc((100vh - 240px) * 1.55));
  aspect-ratio: 16 / 10;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .6));
}

.hero__frame {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  padding: 6px;
  position: relative;
  overflow: hidden;
  color: var(--shot-text);
  background: var(--shot-bg);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  clip-path: var(--cut);   /* ровный срез ножницами — «фотография», наклеенная на бумагу */
}

.flex-spacer { flex: 1; }

/* --- toolbar --- */
.app__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--shot-panel-2);
  border: 1px solid var(--shot-line);
  border-radius: 6px;
  padding: 6px 8px;
}

.qbtn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 26px;
  background: var(--shot-panel);
  border: 1px solid var(--shot-line);
  border-radius: 5px;
  padding: 5px 10px;
  cursor: default;
}
.qbtn:hover { border-color: var(--accent); }
.qbtn--primary { background: var(--accent); border-color: var(--accent-lo); }
.qbtn:disabled { opacity: .5; }

.ico { width: 16px; height: 16px; }
.qbtn .ico { filter: brightness(0) invert(1); }
.qbtn--primary .ico { filter: brightness(0) invert(1); }
.ico--err { filter: brightness(0) invert(1); }

.app__activity {
  width: 72px; height: 12px;
  background: #0e1013;
  border: 1px solid var(--shot-line);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.app__activity i {
  position: absolute; inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, var(--ok) 0%, var(--warn) 100%);
}

.app__timer { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--shot-muted); margin-left: 4px; }

.qbadge {
  font-size: 11px; font-weight: 700;
  background: var(--shot-panel);
  border: 1px solid var(--shot-line);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}
.qbadge--cpu { color: var(--ok-hi); }
.qbadge--status { color: var(--ok-hi); }

.app__logo {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--shot-panel);
  border: 1px solid var(--shot-line);
  border-radius: 999px;
  padding: 4px 14px 4px 10px;
}
.app__logo img { height: 22px; width: auto; }
.app__logo-text { font-family: "Kholodos", var(--font-sans); font-size: 15px; color: var(--shot-text); }
.app__logo-text b { color: var(--accent-hi); font-weight: 400; }

/* --- вкладки --- */
.app__tabs { min-height: 0; display: grid; grid-template-rows: auto 1fr; }
.app__tabbar { display: flex; gap: 4px; padding-left: 2px; }
.app__tab {
  font-weight: 700;
  font-size: clamp(11px, 1.6vh, 13px);
  color: var(--shot-muted);
  background: var(--shot-panel-2);
  border: 1px solid var(--shot-line);
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 8px 18px;
}
.app__tab.is-selected {
  color: var(--shot-text);
  background: var(--shot-panel);
  border-bottom-color: var(--accent);
}

.app__pane {
  min-height: 0;
  background: var(--shot-panel-2);
  border: 1px solid var(--shot-line);
  border-radius: 6px;
  padding: 8px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
}

.app__header { display: flex; flex-direction: column; gap: 4px; }
.app__qrow { display: flex; align-items: center; gap: 8px; }
.app__question {
  font-size: clamp(13px, 2vh, 16px);
  color: var(--shot-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app__ctx { color: var(--shot-muted); font-size: 13px; cursor: help; }
.app__live { font-size: clamp(10px, 1.5vh, 12px); color: var(--shot-text); }
.app__live::before { content: "● "; color: var(--accent); }

.app__split { min-height: 0; display: grid; grid-template-columns: 4fr 1px 1.1fr; gap: 6px; }
.app__split::before { content: ""; background: var(--shot-line); }

.app__answer { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.app__answer-head { display: flex; align-items: center; gap: 8px; }
.app__answer-head .app__answer-title { flex: 1; }
.app__answer-title { font-weight: 700; font-size: clamp(11px, 1.6vh, 13px); color: var(--shot-text); }
.app__regen {
  width: 28px; height: 26px;
  border: 1px solid var(--shot-line);
  border-radius: 5px;
  background: var(--shot-panel);
  color: var(--shot-muted);
  font-size: 14px;
  cursor: pointer;
}
.app__regen:hover { border-color: var(--accent); color: var(--accent-hi); }

.app__browser {
  flex: 1; min-height: 0;
  background: var(--shot-panel);
  border: 1px solid var(--shot-line);
  border-radius: 6px;
  padding: 8px;
  font-size: clamp(11px, 1.7vh, 13.5px);
  line-height: 1.55;
  color: var(--shot-text);
  overflow: hidden;
}
.app__browser .dim { color: var(--shot-muted); }
.app__browser b { color: #fff; }
.app__browser .caret { display: inline-block; width: .55em; height: 1em; background: var(--accent); vertical-align: text-bottom; }

.app__history { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.app__hist-items { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.app__hist-q {
  font-size: clamp(10px, 1.5vh, 12px);
  color: var(--shot-text);
  background: var(--shot-panel);
  border: 1px solid var(--shot-line);
  border-radius: 6px;
  padding: 6px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.app__hist-q:hover { border-color: var(--accent); }

/* маркеры-обводки (печатный красный) */
.spot {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px dashed var(--accent);
  opacity: .35;
  pointer-events: none;
  z-index: 3;
}
.spot.is-on { opacity: 1; border-style: solid; box-shadow: 0 0 0 4px rgba(198, 33, 18, .18); }
.spot::after {
  content: attr(title);
  position: absolute; top: 38px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px; color: var(--accent);
  background: var(--paper);
  border-bottom: 1px solid var(--accent);
  padding: 1px 6px; white-space: nowrap;
  z-index: 4;
}
.spot--stt  { top: 26%; left: 14%; }
.spot--kb   { top: 47%; right: 4%; }
.spot--llm  { top: 62%; left: 38%; }
.spot--priv { bottom: 8%; left: 50%; }

/* ---------- RIGHT: пайплайн + метрики ---------- */
.col--right { transform: rotate(.6deg); }

.terminal {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.5vh, 12px);
  line-height: 1.75;
  color: var(--ink);
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .58)) drop-shadow(0 12px 16px rgba(0, 0, 0, .4));
  padding: calc(var(--grid)*1.75);
  transform: rotate(-.6deg);
}
.terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px),
    var(--grain-paper);
  background-size: auto, 150px 150px;
  background-blend-mode: multiply, normal;
  clip-path: var(--torn);
}
.terminal__prompt { color: var(--accent); font-weight: 700; }
.terminal__cmd { color: var(--ink); font-weight: 700; }
.terminal__arrow { color: var(--ink-faint); }
.terminal__stage { position: relative; z-index: 1; }
.terminal__stage.is-hot { color: #fff; background: var(--accent); padding: 0 3px; }
.terminal__status { color: var(--ok); font-weight: 700; }
.terminal__cursor { display: inline-block; width: .6em; height: 1.05em; background: var(--accent); vertical-align: text-bottom; }

.metrics { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.metric {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .55)) drop-shadow(0 10px 14px rgba(0, 0, 0, .38));
  padding: calc(var(--grid)*1.25) calc(var(--grid)*1.75);
}
/* строка «цифра + подпись» на одной линии */
.metric__row {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 16px;   /* место под сноску */
}
.metric__row b { white-space: nowrap; }
.metric sup { font-size: .55em; color: var(--accent); font-weight: 700; }
/* сноска — прижата к нижнему краю карточки */
.metric-footnote {
  position: absolute;
  left: calc(var(--grid)*1.75);
  bottom: calc(var(--grid)*.9);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(10px, 1.4vh, 12px);
  line-height: 1;
  color: var(--ink-faint);
}
.metric::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(0, 0, 0, .05) .8px, transparent 1.1px),
    var(--grain-paper);
  background-size: 3px 3px, 150px 150px;
  background-blend-mode: multiply, normal;
  clip-path: var(--torn);
}
.metric:nth-child(odd) { transform: rotate(.7deg); }
.metric:nth-child(even) { transform: rotate(-.6deg); margin-left: 6px; }
.metric b {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.9vh, 24px);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.metric span { font-size: clamp(13px, 1.9vh, 15.5px); color: var(--ink-soft); }

/* CTA — красный печатный штамп */
.cta {
  position: relative;
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(18px, 3vh, 25px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--paper);
  border: 2px solid var(--ink);
  text-decoration: none;
  padding: calc(var(--grid)*1.5);
  transform: rotate(-1.4deg);
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .6));
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--accent);
  clip-path: var(--torn);
}
.cta:hover { color: var(--paper); }
.cta:hover::before { background: var(--ink); }

/* вторая CTA — телеграм: светлая бумага, чуть другой наклон */
.cta--tg { color: var(--ink); transform: rotate(1.1deg); }
.cta--tg::before { background: var(--paper); }
.cta--tg:hover { color: var(--paper); }
.cta--tg:hover::before { background: var(--ink); }

.cta-row {
  display: flex;
  gap: calc(var(--grid)*1.5);
}
.cta-row .cta { flex: 1; }

/* ================================================================
   FOOTER — подпись на столе
   ================================================================ */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono);
  font-size: clamp(9.5px, 1.35vh, 11.5px);
  color: #9a917f;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.footer__stack { display: flex; flex-wrap: wrap; gap: 8px; }
/* плитки-вырезки: явные бумажные чипы */
.footer__chip {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(10px, 1.5vh, 12.5px);
  color: var(--ink);
  padding: 4px 12px;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(0, 0, 0, .05) .8px, transparent 1.1px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 3px),
    var(--grain-paper);
  background-size: 3px 3px, auto, 150px 150px;
  background-blend-mode: multiply, multiply, normal;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .6), 0 8px 12px rgba(0, 0, 0, .4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.footer__chip:nth-child(odd) { transform: rotate(-1.4deg); }
.footer__chip:nth-child(even) { transform: rotate(1.1deg); }
.footer__copy { text-align: right; }

/* ================================================================
   MOBILE / TABLET — вертикальная версия со скроллом (≤1020px)
   ================================================================ */
@media (max-width: 1020px) {
  /* экран узкий: разрешаем вертикальную прокрутку, этапы идут колонкой */
  html, body { height: auto; overflow: auto; }
  .metric-footnote { display: none; }
  .stage {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid)*2.5);
    padding: calc(var(--grid)*1.5);
  }

  /* --- шапка: марка, под ней тэглайн, под ним штампики --- */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--grid)*1.5);
    padding: calc(var(--grid)*1.5) calc(var(--grid)*2) calc(var(--grid)*3);
    clip-path: var(--torn);
    transform: none;
  }
  .header::before { clip-path: var(--torn); }
  .brand { flex-wrap: wrap; row-gap: 2px; width: 100%; }
  .brand__logo { height: clamp(30px, 7vw, 40px); }
  .brand__name { font-size: clamp(24px, 7.5vw, 34px); }
  .brand__tagline {
    display: block;
    flex-basis: 100%;
    font-size: clamp(14px, 4.2vw, 18px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* на мобильном губка не играет: текст просто открыт */
  .brand__tagline { clip-path: none !important; }
  .brand__mark { transform: none !important; }
  .header__nav { flex-wrap: wrap; row-gap: 8px; }

  /* --- сетка: одна колонка, всё вертикально --- */
  .grid {
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid)*2.5);
  }
  .col { gap: calc(var(--grid)*1.5); }

  /* фичи: полные карточки с описанием */
  .col--left { flex-direction: column; overflow: visible; }
  .col--left .feature + .feature { margin-top: 0; }
  .feature {
    flex-direction: row;
    transform: none !important;
    margin: 0 !important;
  }
  .feature:nth-child(even) { transform: rotate(.5deg) !important; }
  .feature:nth-child(odd) { transform: rotate(-.4deg) !important; }
  .feature__desc { display: block; min-height: 0; font-size: clamp(11.5px, 3.4vw, 14px); }
  .feature__name { font-size: clamp(15px, 4.5vw, 18px); }

  /* центр: снимок приложения на всю ширину; интерфейс снимка уплотняем */
  .hero { padding: calc(var(--grid)*1.5); transform: none; min-width: 0; }
  .hero > .shot { width: 100% !important; min-width: 0; max-width: 100%; }
  .hero__frame { font-size: 12px; }
  .app__toolbar { flex-wrap: wrap; row-gap: 4px; }
  .app__logo-text { display: none; }
  /* история сворачивается — ответ важнее */
  .app__split { grid-template-columns: 1fr; }
  .app__split::before { display: none; }
  .app__history { display: none; }
  .app__qrow { flex-wrap: wrap; }
  .app__question { white-space: normal; font-size: 13px; }
  .app__answer-title, .app__tab { font-size: 11px; padding: 6px 12px; }
  .spot, .tape { display: none; }

  /* правая колонка: терминал и метрики столбиком */
  .col--right { flex-direction: column; }
  .col--right .metric + .metric { margin-top: 0; }
  .metrics { flex-direction: column; }
  .metric { transform: none !important; margin: 0 !important; }

  /* CTA столбиком */
  .cta-row { flex-direction: column; }
  .cta { font-size: clamp(17px, 5vw, 21px); }

  /* футер: чипы переносятся, копирайт ниже */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--grid));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .footer__copy { display: block; text-align: left; }
  .footer__stack { gap: 6px; }
}

/* очень узкие экраны */
@media (max-width: 380px) {
  .brand__name { font-size: 22px; }
  .feature__ico { width: 2em; height: 2em; }
  .cta { padding: calc(var(--grid)); }
}

/* без анимации: текст сразу открыт, «собесов» зачёркнуто, лого нормальное */
@media (prefers-reduced-motion: reduce) {
  .brand__mark, .brand__tagline { transition: none; --wipe: 0px !important; }
  .brand__logo--mirror { opacity: 0; }
  .strike::after { animation: none; transform: scaleX(1) rotate(-2.5deg); }
}