/* ---- css/fonts.css ---- */
/* Сгенерировано tools/fetch-fonts.py — не править руками. Редкие символы: ₽ */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../fonts/JetBrainsMono-cyrillic-676ac43d.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../fonts/JetBrainsMono-latin-340e696a.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: 400 700; font-display: swap; src: url(../fonts/Onest-cyrillic-9b144952.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 700; font-display: swap; src: url(../fonts/Onest-latin-324d4be3.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: 'Unbounded'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/Unbounded-cyrillic-3e88c0f8.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/Unbounded-latin-aef5c246.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: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../fonts/JetBrainsMono-extra-608b22a9.woff2) format('woff2'); unicode-range: U+20bd; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/Onest-extra-387df2f3.woff2) format('woff2'); unicode-range: U+20bd; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/Unbounded-extra-64a6424a.woff2) format('woff2'); unicode-range: U+20bd; }

/* ---- css/main.css ---- */
/* ==========================================================================
   Quardobot — main.css (v2)
   Layout concept: a product showroom. A light studio sweep with grainy colour
   auras where devices stand on a turntable, and dark rounded "control room"
   panels where the engineering (speed, uptime, backend) is shown.
   ========================================================================== */

/* Запасные шрифты, подогнанные по ширине под Unbounded (замерено на кириллице и латинице).
   Пока Unbounded грузится, заголовки набраны ими и переносятся так же, поэтому кнопки на первом экране не прыгают.
   unicode-range — только буквы и знаки, которые есть в самом Unbounded: редкие символы (₽, стрелки) по-прежнему берутся из Arial Black. */
@font-face { font-family: "QB Display AB"; src: local("Arial Black"), local("Arial-Black"); font-weight: 500; size-adjust: 112.1%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2116, U+2122, U+2212; }
@font-face { font-family: "QB Display AB"; src: local("Arial Black"), local("Arial-Black"); font-weight: 600; size-adjust: 113.5%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2116, U+2122, U+2212; }
@font-face { font-family: "QB Display AB"; src: local("Arial Black"), local("Arial-Black"); font-weight: 700; size-adjust: 115%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2116, U+2122, U+2212; }
@font-face { font-family: "QB Display HN"; src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"); font-weight: 500; size-adjust: 130%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2116, U+2122, U+2212; }
@font-face { font-family: "QB Display HN"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); font-weight: 600; size-adjust: 129%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2116, U+2122, U+2212; }
@font-face { font-family: "QB Display HN"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); font-weight: 700; size-adjust: 130.6%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2116, U+2122, U+2212; }

:root {
  /* Color */
  --bg: #EDEFF3;
  --bg-2: #E3E6EC;
  --surface: #FFFFFF;
  --surface-2: #F6F7F9;
  --ink: #0B0D12;
  --ink-2: #464D5E;
  --ink-3: #5F6677;
  --line: rgba(11, 13, 18, .1);
  --line-2: rgba(11, 13, 18, .18);
  --hover: rgba(11, 13, 18, .05);
  --glass: rgba(255, 255, 255, .74);
  --header-bg: rgba(237, 239, 243, .8);
  --panel: #0A0B10;
  --panel-2: #12141B;
  --panel-3: #1A1D26;
  --panel-line: rgba(240, 242, 246, .1);
  --on-panel: #F0F2F6;
  --on-panel-2: #A1A8B9;
  --accent: #2F44FF;
  --accent-press: #2236E6;
  --accent-text: #2F44FF;
  --accent-hi: #8E9BFF;
  --accent-wash: rgba(47, 68, 255, .09);
  --warm: #FF7A45;
  --warm-wash: rgba(255, 122, 69, .13);
  --mint: #12B07A;
  --mint-wash: rgba(18, 176, 122, .12);
  --ok: #12A066;
  --warn: #E89A1B;
  --danger: #D9363E;
  --aura-1: rgba(47, 68, 255, .26);
  --aura-2: rgba(255, 122, 69, .24);
  --aura-3: rgba(110, 196, 255, .22);
  --shadow-1: 0 1px 2px rgba(11, 13, 18, .05), 0 10px 26px -14px rgba(11, 13, 18, .2);
  --shadow-2: 0 34px 70px -34px rgba(11, 13, 18, .45);
  --grain: 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='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  .42 0 0 0 -.16'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-light: 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='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .5 0 0 0 -.18'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-size: 180px;

  /* Type */
  --font-display: "Unbounded", "QB Display AB", "QB Display HN", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Onest", "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.15rem, 1.05rem + 3.9vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.05rem + 2.5vw, 3.15rem);
  --fs-h3: clamp(1.14rem, 1rem + .45vw, 1.36rem);
  --fs-lead: clamp(1.08rem, 1rem + .35vw, 1.26rem);
  --fs-body: 1.125rem;

  /* Space & shape */
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --section-pad: clamp(72px, 9vw, 136px);
  --r-card: 24px;
  --r-ctl: 16px;
  --r-panel: clamp(26px, 3.2vw, 44px);
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0C10; --bg-2: #101218; --surface: #15171E; --surface-2: #1B1E26;
    --ink: #F1F3F7; --ink-2: #A9B0C0; --ink-3: #878E9F;
    --line: rgba(241, 243, 247, .09); --line-2: rgba(241, 243, 247, .17); --hover: rgba(241, 243, 247, .06);
    --glass: rgba(26, 29, 38, .74); --header-bg: rgba(11, 12, 16, .78);
    --panel: #050608; --panel-2: #0E1015; --panel-3: #171A23;
    --accent: #4B5CFF; --accent-press: #3B4BF0; --accent-text: #9AA6FF; --accent-wash: rgba(110, 125, 255, .15);
    --warm-wash: rgba(255, 122, 69, .16); --mint-wash: rgba(18, 176, 122, .16);
    --aura-1: rgba(75, 92, 255, .34); --aura-2: rgba(255, 122, 69, .18); --aura-3: rgba(110, 196, 255, .12);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .6);
    --shadow-2: 0 34px 70px -30px rgba(0, 0, 0, .8);
    --grain: 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='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .42 0 0 0 -.16'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0C10; --bg-2: #101218; --surface: #15171E; --surface-2: #1B1E26;
  --ink: #F1F3F7; --ink-2: #A9B0C0; --ink-3: #878E9F;
  --line: rgba(241, 243, 247, .09); --line-2: rgba(241, 243, 247, .17); --hover: rgba(241, 243, 247, .06);
  --glass: rgba(26, 29, 38, .74); --header-bg: rgba(11, 12, 16, .78);
  --panel: #050608; --panel-2: #0E1015; --panel-3: #171A23;
  --accent: #4B5CFF; --accent-press: #3B4BF0; --accent-text: #9AA6FF; --accent-wash: rgba(110, 125, 255, .15);
  --warm-wash: rgba(255, 122, 69, .16); --mint-wash: rgba(18, 176, 122, .16);
  --aura-1: rgba(75, 92, 255, .34); --aura-2: rgba(255, 122, 69, .18); --aura-3: rgba(110, 196, 255, .12);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .6);
  --shadow-2: 0 34px 70px -30px rgba(0, 0, 0, .8);
  --grain: 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='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .42 0 0 0 -.16'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--grain) 0 0 / var(--grain-size) repeat, var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .3s;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.on-panel :focus-visible { outline-color: var(--accent-hi); }
::selection { background: var(--accent); color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }
a:not([class]) { color: var(--accent-text); text-underline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); position: relative; }
.section--alt { background: var(--surface-2); }

/* Dark rounded panels (same in both themes) */
.panel {
  position: relative; isolation: isolate;
  margin-inline: clamp(8px, 1.4vw, 20px);
  border-radius: var(--r-panel);
  background: var(--grain-light) 0 0 / var(--grain-size) repeat, var(--panel);
  color: var(--on-panel);
  overflow: clip;
}
.panel + .panel { margin-top: clamp(8px, 1.4vw, 20px); }
.on-panel { color: var(--on-panel); }

/* Section label: the quad mark + sentence-case text */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .95rem/1.2 var(--font-body);
  color: var(--accent-text);
}
.kicker::before {
  content: ""; width: 12px; height: 12px; flex: none; border-radius: 2px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat,
    linear-gradient(var(--warm) 0 0) 7px 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 7px / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 7px 7px / 5px 5px no-repeat;
}
.panel .kicker { color: var(--accent-hi); }

.h2 { font: 600 var(--fs-h2)/1.08 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.h3 { font: 600 var(--fs-h3)/1.3 var(--font-body); letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.panel .lead, .panel .muted { color: var(--on-panel-2); }
.muted { color: var(--ink-2); }
.tnum { font-variant-numeric: tabular-nums; }
.hl { color: var(--accent-text); }
.panel .hl { color: var(--accent-hi); }

.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 52rem; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 24px 48px; }
.section-head--split > div { display: grid; gap: 18px; }
@media (max-width: 860px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } }

/* Tags (replace mono pills) */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 10px;
  font: 600 .84rem/1.2 var(--font-body);
  background: var(--accent-wash); color: var(--accent-text);
  white-space: nowrap;
}
.tag--warm { background: var(--warm-wash); color: #A33C14; }
.tag--mint { background: var(--mint-wash); color: #0B7F57; }
.tag--plain { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .tag--warm { color: #FFA37D; }
:root[data-theme="dark"] .tag--mint { color: #4FD8A6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag--warm { color: #FFA37D; } :root:not([data-theme="light"]) .tag--mint { color: #4FD8A6; } }

/* Stickers: floating cards with a coloured icon tile (callouts on devices) */
.sticker {
  --tilt: 0deg;
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 11px; align-items: center;
  padding: 10px 16px 10px 10px; border-radius: 18px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  rotate: var(--tilt);
  max-width: 230px;
  transition: opacity .35s var(--ease), translate .35s var(--ease);
}
.sticker__icon { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.sticker__icon svg { width: 20px; height: 20px; }
.sticker--warm .sticker__icon { background: var(--warm); }
.sticker--mint .sticker__icon { background: var(--mint); }
.sticker b { font: 650 .92rem/1.2 var(--font-body); }
.sticker small { font-size: .8rem; line-height: 1.3; color: var(--ink-2); }
.panel .sticker { background: #fff; color: #0B0D12; }
.panel .sticker small { color: #545B6B; }
@media (prefers-reduced-motion: no-preference) {
  .sticker--float { animation: float 7s ease-in-out infinite; }
  .sticker--float:nth-of-type(2n) { animation-delay: -2.5s; }
  @keyframes float { 50% { translate: 0 -6px; } }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--bg);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  border: 0; border-radius: var(--r-ctl);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 1.02rem/1.1 var(--font-body);
  text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s var(--ease), color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 28px -12px rgba(47, 68, 255, .8); }
.btn--accent:hover { --btn-bg: var(--accent-press); }
.btn--accent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%);
  translate: -120% 0; transition: translate .7s var(--ease);
}
.btn--accent:hover::after { translate: 120% 0; }
.btn--ghost { --btn-bg: var(--surface); --btn-fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.panel .btn--ghost { --btn-bg: transparent; --btn-fg: var(--on-panel); box-shadow: inset 0 0 0 1.5px rgba(240, 242, 246, .28); }
.panel .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--on-panel); }
.btn--light { --btn-bg: #F0F2F6; --btn-fg: #0A0B10; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .94rem; border-radius: 12px; }
.btn--lg { min-height: 60px; padding: 0 26px; font-size: 1.06rem; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--accent-text); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.icon-btn {
  width: 42px; height: 42px; border: 0; border-radius: 12px; display: grid; place-items: center;
  background: var(--hover); color: var(--ink); transition: background-color .2s;
}
.icon-btn:hover { background: var(--line); }
.icon-btn svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: transform .4s var(--ease), background-color .3s, box-shadow .3s; }
.site-header.is-scrolled { background: var(--header-bg); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__row { height: var(--header-h); display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; --logo-eye: var(--bg); }
.logo__mark { width: 34px; height: 34px; }
.logo__word { font: 700 1.06rem/1 var(--font-display); letter-spacing: -.02em; }
.logo__eyes { animation: blink 6s infinite; transform-origin: 50% 45%; transform-box: fill-box; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.nav { display: flex; gap: 2px; margin-inline: auto; }
.nav a { padding: 9px 13px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--ink-2); transition: color .2s, background-color .2s; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--hover); }
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.header-actions .btn { white-space: nowrap; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 12px; text-decoration: none; font: 600 .9rem/1 var(--font-body); color: var(--ink-2); background: var(--hover); }
.lang-switch:hover { color: var(--ink); }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}
.burger { display: none; }

.menu-panel {
  inset: auto; position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); top: auto;
  margin: 0; padding: 18px; border: 0; border-radius: 26px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
  max-height: calc(100dvh - 24px); overflow: auto;
  transition: translate .35s var(--ease), opacity .3s, display .35s allow-discrete, overlay .35s allow-discrete;
  translate: 0 0; opacity: 1;
}
.menu-panel:not(:popover-open) { translate: 0 30px; opacity: 0; }
@starting-style { .menu-panel:popover-open { translate: 0 30px; opacity: 0; } }
.menu-panel::backdrop { background: rgba(5, 6, 8, .45); }
@supports not selector(:popover-open) { .menu-panel { display: none; } }
.menu-panel nav { display: grid; gap: 2px; margin: 10px 0 16px; }
.menu-panel nav a { padding: 13px 12px; border-radius: 14px; text-decoration: none; font: 600 1.2rem/1.2 var(--font-display); letter-spacing: -.02em; }
.menu-panel nav a:hover { background: var(--hover); }
.menu-panel__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.menu-panel__tools { display: flex; gap: 8px; }
.menu-panel__ctas { display: grid; gap: 10px; }
.menu-panel .btn { width: 100%; }

/* «Telegram» в шапке помещается рядом с навигацией (с нормальным отступом справа) только от 1380px: русские пункты меню длинные */
@media (max-width: 1380px) { .header-actions .btn--ghost { display: none; } }
@media (max-width: 1180px) { .nav a { padding-inline: 9px; font-size: .94rem; } }
@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 560px) { .header-actions .btn--accent, .header-actions .lang-switch { display: none; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: clip;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(20px, 4.5vw, 60px));
  padding-bottom: clamp(48px, 6vw, 96px);
}
.hero::before {
  content: ""; position: absolute; inset: -10% -10% 0 30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 62% 40%, var(--aura-1), transparent 70%),
    radial-gradient(30% 34% at 80% 62%, var(--aura-2), transparent 70%),
    radial-gradient(34% 30% at 46% 72%, var(--aura-3), transparent 70%);
  filter: saturate(1.1);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; }
.hero__copy { display: grid; gap: 28px; align-content: center; position: relative; z-index: 2; }
.hero__title { display: grid; gap: 18px; }
.hero__pre { font: 500 clamp(1rem, .95rem + .3vw, 1.12rem)/1.45 var(--font-body); color: var(--ink-2); max-width: 30em; }
.hero__display { font: 700 var(--fs-display)/1.02 var(--font-display); letter-spacing: -.045em; text-wrap: balance; }
.hero__display .clock { display: inline-block; width: .74em; height: .74em; vertical-align: -.02em; margin-left: .06em; color: var(--accent); }
.clock__hand { transform-origin: 50% 50%; transform-box: view-box; animation: tick 60s steps(60) infinite; }
@keyframes tick { to { transform: rotate(360deg); } }
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 31em; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 1rem; color: var(--ink-2); }
.hero__proof li { display: inline-flex; align-items: center; gap: 9px; }
.hero__proof svg { width: 20px; height: 20px; color: var(--mint); flex: none; }
.hero__proof b { color: var(--ink); font-weight: 650; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero::before { inset: 30% -30% 0 -30%; } }

/* --------------------------------------------------------------------------
   Showroom (phone on a turntable). CSS version renders first; WebGL upgrades it.
   -------------------------------------------------------------------------- */
.showroom { position: relative; display: grid; justify-items: center; gap: 16px; --s: 1; }
.scene {
  position: relative; width: 100%; height: calc(760px * var(--s));
  perspective: 1700px; perspective-origin: 50% 38%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none;
}
.scene.is-dragging { cursor: grabbing; }
.scene:focus-visible { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: 28px; }
.stage { position: absolute; left: 50%; top: calc(46% - 6px * var(--s)); width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--s)) rotateX(10deg); transition: opacity .5s; }
.phone {
  --w: 300px; --h: 620px; --d: 14px; --r: 50px; --frame: #2B2F37; --frame-hi: #5A606C;
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h);
  transform-style: preserve-3d; transform: rotateY(-20deg);
}
.phone__layer { position: absolute; inset: 0; border-radius: var(--r); background: linear-gradient(90deg, var(--frame-hi), var(--frame) 12%, var(--frame) 88%, var(--frame-hi)); transform: translateZ(var(--z)); }
.phone__front, .phone__back { position: absolute; inset: 0; border-radius: var(--r); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.phone__front { transform: translateZ(calc(var(--d) / 2 + .5px)); background: #050506; padding: 11px; box-shadow: inset 0 0 0 1.5px #474C57, inset 0 0 0 3px #0a0a0b; }
.phone__screen {
  position: relative; width: 100%; height: 100%; border-radius: calc(var(--r) - 11px);
  overflow: hidden; isolation: isolate; background: #fff; font-family: var(--font-ui); color: #111;
  font-size: 13px; line-height: 1.35; contain: layout paint;
  /* Safari не обрезает скруглённые углы через overflow+border-radius, если экран или что-то внутри него
     в 3D (CSS3D-слой, анимации): квадратные углы торчали за корпус. clip-path он обрезает всегда. */
  -webkit-clip-path: inset(0 round calc(var(--r) - 11px)); clip-path: inset(0 round calc(var(--r) - 11px));
}
.phone__screen.is-3d { width: 278px; height: 598px; border-radius: 39px; -webkit-clip-path: inset(0 round 39px); clip-path: inset(0 round 39px); }
.phone__island { position: absolute; z-index: 30; top: 11px; left: 50%; translate: -50% 0; width: 96px; height: 28px; border-radius: 20px; background: #000; }
.phone__punch { position: absolute; z-index: 30; top: 13px; left: 50%; translate: -50% 0; width: 14px; height: 14px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 3px #15171b; display: none; }
.phone__screen[data-os="android"] .phone__island { display: none; }
.phone__screen[data-os="android"] .phone__punch { display: block; }
.phone__glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .14) 47%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%; background-position: 30% 0; mix-blend-mode: screen;
}
.phone__back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2 + .5px)); background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #3A3F49, #23262D 60%, #1B1D22); box-shadow: inset 0 0 0 1.5px #4D5360; }
.phone__cam { position: absolute; top: 18px; left: 18px; width: 118px; height: 118px; border-radius: 34px; background: linear-gradient(150deg, #454B57, #2C3038); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .35); }
.phone__cam i { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #3d4a6b 0 12%, #0b0c10 22% 52%, #2a2e36 54% 62%, #121418 64%); box-shadow: 0 0 0 3px #1b1e24, 0 2px 4px rgba(0, 0, 0, .5); }
.phone__cam i:nth-child(1) { left: 10px; top: 10px; } .phone__cam i:nth-child(2) { left: 10px; top: 64px; } .phone__cam i:nth-child(3) { left: 64px; top: 37px; }
.phone__brand { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; opacity: .55; color: #C9CED8; }
.phone__btn { position: absolute; width: var(--d); border-radius: 2px; background: linear-gradient(90deg, #3B404A, #6A707C, #3B404A); }
.phone__btn--l { left: 0; transform: translateX(calc(var(--d) / -2 - 1.2px)) rotateY(-90deg); }
.phone__btn--r { right: 0; transform: translateX(calc(var(--d) / 2 + 1.2px)) rotateY(90deg); }
/* Soft floor shadow under the CSS phone (turns with it) */
.floor-shadow { position: absolute; left: -200px; top: -60px; width: 400px; height: 120px; transform: translateY(326px) rotateX(90deg) rotateZ(20deg); pointer-events: none; }
.floor-shadow i { position: absolute; left: 50%; top: 50%; width: 330px; height: 34px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }

/* WebGL layers */
.gl-canvas, .gl-css { position: absolute !important; inset: 0; }
.gl-canvas { z-index: 1; opacity: 0; transition: opacity .6s var(--ease); }
.gl-css { z-index: 2; }
.is-3d-ready .gl-canvas { opacity: 1; }
.is-3d-ready .stage, .is-3d-ready .laptop { opacity: 0; pointer-events: none; }
.gl-css .phone__screen, .gl-css .laptop__screen { pointer-events: auto; }

.showroom__hud { position: absolute; left: 0; right: 0; top: calc(686px * var(--s)); display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; z-index: 3; }
.drag-hint { display: inline-flex; align-items: center; gap: 8px; font: 500 .86rem/1.25 var(--font-body); color: var(--ink-3); transition: opacity .4s; }
.drag-hint svg { width: 28px; height: 28px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(6px); } }
.showroom.was-dragged .drag-hint { opacity: 0; }
.tilt-btn { display: none; pointer-events: auto; }

.callout { position: absolute; z-index: 4; pointer-events: none; }
.callout .sticker { width: max-content; max-width: 250px; }
.laptop-scene .sticker { width: max-content; max-width: 260px; }
.callout--l { right: calc(50% + 150px * var(--s) - 52px); }
.callout--r { left: calc(50% + 150px * var(--s) - 52px); }
.callout--1 { top: 12%; --tilt: -3deg; }
.callout--2 { top: 39%; --tilt: 2.5deg; }
.callout--3 { top: 63%; --tilt: -1.5deg; }
.showroom.is-switching .callout { opacity: 0; translate: 0 8px; }

.demo-switch {
  display: flex; gap: 4px; padding: 5px; border-radius: 18px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 4;
}
.demo-switch::-webkit-scrollbar { display: none; }
.demo-switch button { flex: none; border: 0; background: transparent; border-radius: 13px; padding: 10px 14px; font-weight: 600; font-size: .95rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; transition: background-color .25s, color .25s; }
.demo-switch button svg { width: 17px; height: 17px; }
.demo-switch button:hover { color: var(--ink); }
.demo-switch button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.demo-caption { text-align: center; font-size: .98rem; color: var(--ink-2); max-width: 31rem; min-height: 3em; text-wrap: balance; }
.demo-caption b { color: var(--ink); font-weight: 650; }
.demo-badge { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 7px; font: 600 .75rem/1.5 var(--font-body); background: var(--warm-wash); color: #A33C14; vertical-align: 1px; }
:root[data-theme="dark"] .demo-badge { color: #FFA37D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-badge { color: #FFA37D; } }

@media (max-width: 1240px) { .showroom { --s: .9; } .callout { display: none; } }
@media (max-width: 960px) { .showroom { --s: .86; } }
@media (max-width: 560px) {
  .showroom { --s: .74; }
  .demo-switch button { padding: 10px 12px; font-size: .92rem; }
  .demo-switch button svg { display: none; }
}
@media (max-width: 380px) { .showroom { --s: .66; } }
@media (hover: none) and (pointer: coarse) { .tilt-btn { display: inline-flex; } .drag-hint { display: none; } }

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.svc {
  --mx: 50%; --my: 50%;
  grid-column: span 2; position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px;
  padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-card);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  text-decoration: none; color: inherit; min-width: 0;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx) var(--my), var(--accent-wash), transparent 60%); }
.svc:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); }
.svc:hover::before { opacity: 1; }
.svc--wide { grid-column: span 4; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; column-gap: 28px; }
.svc--wide .svc__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.svc__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-text); }
.svc__icon svg { width: 24px; height: 24px; }
.svc__title { font: 600 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.2 var(--font-display); letter-spacing: -.03em; }
.svc__text { color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }
.svc__list { display: grid; gap: 6px; font-size: .97rem; color: var(--ink-2); padding: 0; list-style: none; }
.svc__list li { display: flex; gap: 9px; align-items: baseline; }
.svc__list li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; flex: none; background: var(--accent); translate: 0 -2px; }
.svc__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font-size: .97rem; color: var(--ink-2); }
.svc__meta b { color: var(--ink); font-weight: 600; }
.svc__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-text); }
.svc__more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.svc:hover .svc__more svg { transform: translateX(4px); }
.svc__visual { position: relative; border-radius: 18px; overflow: hidden; min-height: 230px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); align-self: stretch; }
.mini-browser { position: absolute; inset: 18px 18px auto 18px; border-radius: 12px; background: #fff; box-shadow: 0 16px 30px -18px rgba(11, 13, 18, .5), 0 0 0 1px rgba(11, 13, 18, .08); overflow: hidden; }
.mini-browser__bar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #F1F2F5; }
.mini-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D0D4DB; }
.mini-browser__bar span { margin-left: 10px; height: 14px; flex: 1; border-radius: 7px; background: #fff; font: 500 8.5px/14px var(--font-body); color: #8A90A0; padding-left: 8px; }
.mini-browser__body { padding: 14px; display: grid; gap: 7px; }
.mini-browser__body i { display: block; height: 7px; border-radius: 4px; background: #E7EAEF; }
.mini-browser__body i:first-child { width: 70%; height: 12px; background: #0B0D12; }
.mini-browser__body i:nth-child(2) { width: 50%; height: 12px; background: #0B0D12; }
.mini-browser__body i.btn-i { width: 34%; height: 18px; border-radius: 6px; background: #2F44FF; margin-top: 6px; }
.gauges { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gauge { display: grid; justify-items: center; gap: 4px; font: 600 .7rem/1.2 var(--font-body); color: var(--ink-2); text-align: center; }
.gauge svg { width: min(46px, 100%); height: auto; aspect-ratio: 1; }
.gauge circle { fill: none; stroke-width: 4; }
.gauge .g-track { stroke: var(--line); }
.gauge .g-val { stroke: var(--ok); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 113.1; stroke-dashoffset: calc(113.1 - 113.1 * var(--v) / 100); }
.gauge text { font: 700 12px var(--font-body); fill: var(--ink); }
.terminal { position: absolute; inset: 16px; border-radius: 12px; background: #0D1017; color: #C9D1E0; font: 400 11px/1.65 var(--font-mono); padding: 12px 14px; overflow: hidden; box-shadow: 0 16px 30px -18px rgba(11, 13, 18, .7); }
.terminal__lines { display: grid; animation: term 14s steps(14) infinite; }
.terminal__lines div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes term { to { transform: translateY(-50%); } }
.t-ok { color: #4ADE80; } .t-dim { color: #5B6578; } .t-acc { color: #8E9BFF; } .t-warn { color: #FBBF24; }

/* Mobile carousels */
.swipe-hint { display: none; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-3); margin-top: 14px; }
.swipe-hint svg { width: 18px; height: 18px; }
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc, .svc--wide { grid-column: span 1; }
  .svc--wide { grid-column: span 2; }
}
@media (max-width: 760px) {
  .carousel {
    display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; grid-column: auto !important; }
  .carousel > .svc--wide, .carousel > .case--wide { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .carousel .svc__visual { min-height: 190px; order: -1; }
  .swipe-hint { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Cases
   -------------------------------------------------------------------------- */
.proof {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 clamp(28px, 4vw, 48px);
  border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden;
}
.proof div { padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 10px; align-content: start; }
.proof div + div { box-shadow: inset 1px 0 0 var(--line); }
.proof dt { font: 700 clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem)/1 var(--font-display); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof dt::after { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px; margin-top: 16px; background: var(--accent); }
.proof dd { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.45; max-width: 19em; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.case { display: grid; gap: 14px; align-content: start; min-width: 0; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.case--wide { grid-column: span 2; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 28px; align-content: stretch; }
.case__body { display: grid; gap: 14px; align-content: start; }
.case__top { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.case__tag { font: 600 .9rem/1.3 var(--font-body); color: var(--ink-3); }
.case__plats { display: flex; gap: 6px; flex-wrap: wrap; }
.case h3 { font: 600 clamp(1.1rem, 1rem + .5vw, 1.36rem)/1.25 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.case p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }
.case__feats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin-top: 2px; }
.case__feats li { font-size: .9rem; padding: 6px 11px; border-radius: 30px; box-shadow: inset 0 0 0 1px var(--line-2); }
.case--cta { background: var(--grain-light) 0 0 / var(--grain-size) repeat, radial-gradient(80% 80% at 100% 0%, rgba(47, 68, 255, .5), transparent 60%), var(--panel); color: var(--on-panel); box-shadow: none; align-content: space-between; }
.case--cta .kicker { color: var(--accent-hi); }
.case--cta p { color: var(--on-panel-2); }
.case__visual { border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding: 18px; display: grid; place-items: center; min-height: 240px; }
.cv-panel { width: 100%; max-width: 300px; border-radius: 18px; background: #fff; color: #0B0D12; padding: 12px; display: grid; gap: 8px; box-shadow: 0 20px 40px -24px rgba(11, 13, 18, .45), 0 0 0 1px rgba(11, 13, 18, .08); font-size: .84rem; }
.cv-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 11px; background: #EEF0F4; font-size: .74rem; font-weight: 600; text-align: center; }
.cv-roles span { padding: 6px 2px; border-radius: 8px; color: #555C6C; }
.cv-roles span.on { background: #fff; color: #0B0D12; box-shadow: 0 1px 3px rgba(11, 13, 18, .12); }
.cv-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: 11px; background: #F6F7F9; }
.cv-row b { font-weight: 650; font-size: .76rem; font-variant-numeric: tabular-nums; }
.cv-row span { font-weight: 600; line-height: 1.25; }
.cv-row small { display: block; font-weight: 400; color: #7A8192; font-size: .74rem; }
.cv-live { font: 600 .68rem/1 var(--font-body); font-style: normal; color: #fff; background: #12A066; padding: 4px 7px; border-radius: 6px; }
.cv-rate { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px; border-radius: 11px; background: #2F44FF; color: #fff; }
.cv-rate span { font-size: .76rem; opacity: .85; }
.cv-rate b { font-weight: 650; }
.cv-rate i { grid-column: span 2; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; }
.cv-rate i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: #fff; border-radius: 3px; }
.cv-panel--dark { background: #17140F; color: #F3E9D8; }
.cv-loyal { padding: 12px; border-radius: 12px; background: linear-gradient(135deg, #C9A45C, #8A6A2F); color: #1A140A; display: grid; gap: 2px; }
.cv-loyal span { font-size: .72rem; font-weight: 600; opacity: .75; }
.cv-loyal b { font: 700 1.2rem/1.1 var(--font-body); }
.cv-loyal small { font-size: .74rem; opacity: .8; }
.cv-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 0; }
.cv-tables i { height: 34px; border-radius: 8px; background: rgba(243, 233, 216, .1); box-shadow: inset 0 0 0 1.5px rgba(243, 233, 216, .25); }
.cv-tables i.busy { background: rgba(243, 233, 216, .04); box-shadow: inset 0 0 0 1.5px rgba(243, 233, 216, .08); }
.cv-tables i.pick { background: #C9A45C; box-shadow: none; }
.cv-book { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .78rem; color: rgba(243, 233, 216, .75); }
.cv-book span { padding: 8px 10px; border-radius: 9px; background: #F3E9D8; color: #17140F; font-weight: 600; }
@media (max-width: 1000px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case--wide { grid-column: span 2; } }
@media (max-width: 760px) {
  .proof { grid-template-columns: minmax(0, 1fr); }
  .proof div { grid-template-columns: 6.2rem minmax(0, 1fr); align-items: center; column-gap: 16px; }
  .proof div + div { box-shadow: inset 0 1px 0 var(--line); }
  .proof dt { font-size: 2rem; }
  .proof dt::after { display: none; }
}

/* --------------------------------------------------------------------------
   Websites: laptop scroll scene (inside the first dark panel)
   -------------------------------------------------------------------------- */
.webscene { height: 280vh; position: relative; }
.webscene__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 24px; overflow: clip; }
.webscene__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 50% at 68% 52%, rgba(47, 68, 255, .32), transparent 70%), radial-gradient(30% 30% at 80% 70%, rgba(255, 122, 69, .14), transparent 70%); opacity: .6; }
.webscene__copy { display: grid; gap: 22px; position: relative; z-index: 2; padding-top: var(--header-h); }
.webscene__copy .h2 { font-size: clamp(1.6rem, 1rem + 1.9vw, 2.6rem); }
.wsteps { display: grid; gap: 4px; margin-top: 8px; list-style: none; padding: 0; }
.wstep { display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--panel-line); opacity: .45; transition: opacity .5s var(--ease); }
.wstep.is-active { opacity: 1; }
.wstep__icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--panel-3); color: var(--accent-hi); }
.wstep__icon svg { width: 22px; height: 22px; }
.wstep b { font: 600 1.12rem/1.3 var(--font-body); }
.wstep p { color: var(--on-panel-2); font-size: 1rem; line-height: 1.5; }
.wprogress { height: 3px; background: var(--panel-line); border-radius: 3px; overflow: hidden; }
.wprogress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-hi), var(--warm)); transform-origin: left; transform: scaleX(0); }
.laptop-scene { --ls: 1; position: relative; height: 100%; min-height: 0; perspective: 2000px; perspective-origin: 50% 30%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.laptop-scene.is-dragging { cursor: grabbing; }
.laptop-scene .sticker { position: absolute; z-index: 4; opacity: var(--o, 1); translate: 0 calc((1 - var(--o, 1)) * 14px); }
.web-st--1 { left: 0; top: 10%; --tilt: -4deg; }
.web-st--2 { right: 0; top: 66%; --tilt: 3deg; }
.web-st--3 { left: 4%; bottom: 8%; --tilt: -2deg; }
.laptop { --W: 640px; --D: 430px; --T: 14px; --LH: 412px; position: absolute; left: 50%; top: 62%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--ls)) rotateX(16deg) rotateY(-12deg); transition: opacity .5s; }
.laptop > * { position: absolute; }
.laptop__deck { left: calc(var(--W) / -2); top: calc(var(--D) / -2); width: var(--W); height: var(--D); transform: rotateX(90deg); border-radius: 18px 18px 22px 22px; background: linear-gradient(180deg, #C9CDD5, #B4B9C3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); padding: 34px 54px 0; }
.keys { height: 54%; border-radius: 8px; background: #23262D; padding: 5px; display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3.5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.keys i { border-radius: 3px; background: #0F1115; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
.keys i.k6 { grid-column: span 6; }
.trackpad { width: 42%; height: 30%; margin: 16px auto 0; border-radius: 10px; background: linear-gradient(180deg, #BEC3CC, #B0B5BF); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.laptop__front { left: calc(var(--W) / -2); top: 0; width: var(--W); height: var(--T); transform: translateZ(calc(var(--D) / 2)); border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #A4AAB4, #7F8590); }
.laptop__side { top: 0; width: var(--D); height: var(--T); left: calc(var(--D) / -2); background: linear-gradient(180deg, #A4AAB4, #858B96); }
.laptop__side--l { transform: translateX(calc(var(--W) / -2)) rotateY(-90deg); border-radius: 0 0 10px 10px; }
.laptop__side--r { transform: translateX(calc(var(--W) / 2)) rotateY(90deg); border-radius: 0 0 10px 10px; }
.laptop__shadow { left: calc(var(--W) / -2 - 40px); top: calc(var(--D) / -2 - 40px); width: calc(var(--W) + 80px); height: calc(var(--D) + 80px); transform: translateY(calc(var(--T) + 1px)) rotateX(90deg); background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); filter: blur(8px); }
.laptop__lid { left: calc(var(--W) / -2); top: calc(var(--LH) * -1); width: var(--W); height: var(--LH); transform-origin: 50% 100%; transform-style: preserve-3d; transform: translateY(-6px) translateZ(calc(var(--D) / -2 + 6px)) rotateX(8deg); }
.laptop__lid > * { position: absolute; inset: 0; border-radius: 20px 20px 6px 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid__front { transform: translateZ(4px); background: #0B0C0F; padding: 16px 16px 22px; box-shadow: inset 0 0 0 1.5px #3B3F48; }
.lid__back { transform: rotateY(180deg) translateZ(4px); background: radial-gradient(90% 70% at 40% 30%, #D8DCE3, #B9BEC8 70%); display: grid; place-items: center; }
.lid__back svg { width: 74px; height: 74px; color: #9AA0AB; }
.lid__edge { transform: translateZ(0); background: #9097A2; border-radius: 20px 20px 6px 6px; }
.laptop__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; background: #fff; contain: layout paint; }
.laptop__screen.is-3d { border-radius: 10px; }
.laptop__notch { position: absolute; z-index: 3; top: 0; left: 50%; translate: -50% 0; width: 120px; height: 26px; border-radius: 0 0 12px 12px; background: #050506; display: none; }
.laptop__screen.is-3d .laptop__notch { display: block; }
.laptop__off { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #000; opacity: 0; }
.site-demo { transform-origin: 0 0; }
@media (min-width: 901px) and (max-height: 900px) {
  .webscene__copy { gap: 14px; }
  .webscene__copy .h2 { font-size: clamp(1.45rem, .9rem + 1.6vw, 2.15rem); }
  .webscene__copy .lead { font-size: 1rem; }
  .wstep { padding: 10px 0; }
  .wstep p { font-size: .92rem; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .wstep p, .webscene__copy .lead { display: none; }
}
@media (max-width: 1240px) { .laptop-scene { --ls: .86; } }
@media (max-width: 1080px) { .laptop-scene { --ls: .74; } }

/* Mobile: no scroll-jacking, the laptop opens when it comes into view */
@media (max-width: 900px) {
  .webscene { height: auto; padding-block: 64px 24px; }
  .webscene__sticky { position: relative; height: auto; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: visible; }
  .webscene__copy { padding-top: 0; gap: 16px; }
  .wprogress { display: none; }
  .wstep { opacity: 1; }
  .laptop-scene { height: min(92vw, 520px); --ls: .62; order: -1; }
  .laptop { top: 64%; }
  .laptop-scene .sticker { display: none; }
}
@media (max-width: 640px) { .laptop-scene { --ls: .52; } }
@media (max-width: 420px) { .laptop-scene { --ls: .47; } }

/* --------------------------------------------------------------------------
   Quality / control room (second dark panel)
   -------------------------------------------------------------------------- */
.quality__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pillars { display: grid; list-style: none; padding: 0; }
.pillar { display: grid; grid-template-columns: 46px 1fr; gap: 6px 16px; padding: 22px 0; border-top: 1px solid var(--panel-line); }
.pillar:last-child { border-bottom: 1px solid var(--panel-line); }
.pillar__icon { grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--panel-3); color: var(--accent-hi); }
.pillar__icon svg { width: 22px; height: 22px; }
.pillar b { font: 600 1.14rem/1.3 var(--font-body); }
.pillar p { color: var(--on-panel-2); font-size: 1.02rem; line-height: 1.55; }
.pillar p strong { color: var(--on-panel); font-weight: 600; }
.dash { border-radius: 26px; background: var(--panel-2); padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 0 0 1px var(--panel-line), 0 40px 80px -40px rgba(0, 0, 0, .8); display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; }
.dash__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash__title { font: 650 1rem/1.2 var(--font-body); }
.dash__title small { display: block; font-weight: 400; font-size: .86rem; color: var(--on-panel-2); margin-top: 3px; }
.dash__status { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: #5EE3A1; }
.dash__status svg { width: 18px; height: 18px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 14px; border-radius: 16px; background: var(--panel-3); display: grid; gap: 6px; min-width: 0; }
.kpi small { font-size: .84rem; color: var(--on-panel-2); }
.kpi b { font: 600 clamp(1.2rem, 1rem + .9vw, 1.65rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi b em { font-style: normal; font-size: .6em; color: var(--on-panel-2); margin-left: 3px; letter-spacing: 0; }
.uptime__head, .chart__head { display: flex; justify-content: space-between; font-size: .9rem; color: var(--on-panel-2); margin-bottom: 10px; gap: 12px; }
.uptime__head b, .chart__head b { color: var(--on-panel); font-weight: 500; }
.uptime__bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 34px; }
.uptime__bars i { border-radius: 2px; background: var(--ok); opacity: .9; }
.uptime__bars i.warn { background: var(--warn); }
.uptime__axis { display: flex; justify-content: space-between; font-size: .8rem; color: var(--on-panel-2); margin-top: 8px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--panel-line); }
.chart .grid text { font: 500 11px var(--font-body); fill: var(--on-panel-2); }
.chart .area { fill: url(#rt-fill); }
.chart .line { fill: none; stroke: var(--accent-hi); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--accent-hi); stroke: var(--panel-2); stroke-width: 3; }
.dash__note { font-size: .9rem; color: var(--on-panel-2); line-height: 1.5; padding-top: 14px; border-top: 1px dashed var(--panel-line); }
.pagestats { margin-top: 28px; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, rgba(47, 68, 255, .22), rgba(255, 122, 69, .08)); box-shadow: inset 0 0 0 1px rgba(142, 155, 255, .22); display: grid; gap: 14px; }
.pagestats__title { font: 650 1rem/1.3 var(--font-body); }
.pagestats__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pagestats__row div { display: grid; gap: 4px; }
.pagestats__row b { font: 600 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pagestats__row small { font-size: .86rem; color: var(--on-panel-2); line-height: 1.35; }
.pagestats p { font-size: .9rem; color: var(--on-panel-2); }

.pipeline { margin-top: clamp(56px, 8vw, 104px); }
.pipeline__head { display: flex; justify-content: space-between; align-items: end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 30px; }
.pipeline__head .h3 { font: 600 clamp(1.3rem, 1rem + 1.2vw, 1.9rem)/1.15 var(--font-display); letter-spacing: -.03em; max-width: 22em; text-wrap: balance; }
.pipeline__timer { font: 600 clamp(2rem, 1.4rem + 2vw, 3.2rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--accent-hi); }
.pipeline__timer small { font: 500 1rem/1 var(--font-body); color: var(--on-panel-2); margin-left: 6px; letter-spacing: 0; }
.pipe { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; }
.pipe::before { content: ""; position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: var(--panel-line); }
.pipe__pulse { position: absolute; inset: 0; pointer-events: none; }
.pipe__pulse i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-hi); opacity: 0; z-index: 2; box-shadow: 0 0 0 6px rgba(142, 155, 255, .18), 0 0 24px 4px rgba(142, 155, 255, .6); }
.pipe.is-running .pipe__pulse i { opacity: 1; }
.pipe-node { position: relative; display: grid; gap: 10px; justify-items: center; text-align: center; align-content: start; }
.pipe-node__dot { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--panel-3); color: var(--on-panel-2); box-shadow: 0 0 0 1px var(--panel-line); transition: background-color .3s, color .3s, box-shadow .3s; position: relative; z-index: 1; }
.pipe-node__dot svg { width: 24px; height: 24px; }
.pipe-node.is-on .pipe-node__dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(75, 92, 255, .22); }
.pipe-node b { font-size: 1.02rem; font-weight: 600; text-wrap: balance; }
.pipe-node p { font-size: .94rem; color: var(--on-panel-2); line-height: 1.45; text-wrap: balance; }
.pipe-node .ms { font: 650 .86rem/1 var(--font-body); color: var(--accent-hi); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .quality__grid { grid-template-columns: minmax(0, 1fr); } .dash { position: static; } }
@media (max-width: 760px) {
  .pipe { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pipe::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .pipe-node { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; justify-items: start; text-align: left; }
  .pipe-node__dot { grid-row: span 3; }
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpis .kpi:last-child { grid-column: span 2; }
  .pagestats__row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Stack
   -------------------------------------------------------------------------- */
.stack__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.stack-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.stack-row:last-child { border-bottom: 1px solid var(--line); }
.stack-row h3 { font: 600 1.04rem/1.3 var(--font-body); }
.stack-row h3 small { display: block; font-weight: 400; font-size: .92rem; color: var(--ink-2); margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; align-content: start; }
.chip { padding: 8px 13px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 600 .92rem/1.2 var(--font-body); color: var(--ink); }
.cto { margin-top: 28px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.cto summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }
.cto summary::-webkit-details-marker { display: none; }
.cto summary small { display: block; font-weight: 400; color: var(--ink-2); font-size: .94rem; }
.cto summary svg { width: 20px; height: 20px; flex: none; transition: transform .3s var(--ease); }
.cto[open] summary svg { transform: rotate(45deg); }
.cto__body { padding: 0 20px 20px; display: grid; gap: 10px; font-size: 1rem; color: var(--ink-2); }
.cto__body ul { display: grid; gap: 8px; padding-left: 18px; }
.cto__body code { font: 500 .86em var(--font-mono); color: var(--ink); background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
@media (max-width: 960px) { .stack__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .stack-row { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.process__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.process__aside { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 22px; }
.guarantees { display: grid; list-style: none; padding: 0; margin-top: 8px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.guarantees li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 15px 18px; font-size: 1rem; line-height: 1.45; }
.guarantees li + li { border-top: 1px solid var(--line); }
.guarantees svg { width: 24px; height: 24px; color: var(--accent-text); }
.guarantees b { font-weight: 650; }
.steps { position: relative; display: grid; list-style: none; padding: 0; }
.steps::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.steps__fill { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--accent), var(--warm)); transform-origin: top; transform: scaleY(0); }
.step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 22px; padding-bottom: clamp(28px, 4vw, 44px); }
.step:last-child { padding-bottom: 0; }
.step__num { grid-row: span 4; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); font: 700 1rem/1 var(--font-display); position: relative; z-index: 1; transition: background-color .4s, color .4s, box-shadow .4s; }
.step.is-reached .step__num { background: var(--accent); color: #fff; box-shadow: none; }
.step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 10px; }
.step__head h3 { font: 600 clamp(1.12rem, 1rem + .5vw, 1.36rem)/1.25 var(--font-display); letter-spacing: -.03em; }
.step p { color: var(--ink-2); line-height: 1.6; margin-top: 8px; max-width: 34em; }
.step__out { margin-top: 12px; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.step__out svg { width: 18px; height: 18px; color: var(--mint); flex: none; }
@media (max-width: 960px) { .process__grid { grid-template-columns: minmax(0, 1fr); } .process__aside { position: static; } }

/* --------------------------------------------------------------------------
   Estimator (+ AI)
   -------------------------------------------------------------------------- */
.est { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); border-radius: 30px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); overflow: hidden; }
.est__main { padding: clamp(20px, 3.4vw, 44px); display: grid; gap: 24px; align-content: start; min-width: 0; }
.est__progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.est__progress i { height: 5px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; position: relative; }
.est__progress i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--warm)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.est__progress i.done::after { transform: scaleX(1); }
.est__step { display: grid; gap: 18px; border: 0; padding: 0; margin: 0; min-width: 0; }
.est__step[hidden] { display: none; }
.est__step legend { padding: 0; display: grid; gap: 6px; margin-bottom: 18px; }
.est__step legend b { font: 600 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.2 var(--font-display); letter-spacing: -.03em; }
.est__step legend small { font-weight: 600; font-size: .92rem; color: var(--ink-3); }
.est__step legend span { color: var(--ink-2); font-size: 1.02rem; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt label { display: grid; gap: 4px; height: 100%; padding: 16px; border-radius: 18px; cursor: pointer; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, background-color .2s; }
.opt label:hover { box-shadow: 0 0 0 1px var(--line-2); }
.opt label b { font-weight: 650; font-size: 1.04rem; display: flex; align-items: center; gap: 10px; }
.opt label b svg { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.opt label small { color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.opt input:checked + label { background: var(--accent-wash); box-shadow: 0 0 0 2px var(--accent); }
.opt input:checked + label b svg { color: var(--accent-text); }
.opt input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt--wide { grid-column: 1 / -1; }
.opt--wide label { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
.opt--chip label { padding: 13px 15px; border-radius: 14px; grid-template-columns: 1fr auto; align-items: center; }
.opt--chip label small { font-weight: 600; color: var(--ink-3); }
.opts--chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.est__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.est__back { border: 0; background: none; color: var(--ink-2); font-weight: 600; padding: 10px 4px; display: inline-flex; gap: 8px; align-items: center; }
.est__back svg { width: 10px; height: 18px; }
.est__back[disabled] { visibility: hidden; }
.est__side { padding: clamp(20px, 3vw, 36px); background: var(--grain-light) 0 0 / var(--grain-size) repeat, radial-gradient(90% 60% at 100% 0%, rgba(47, 68, 255, .35), transparent 70%), var(--panel); color: var(--on-panel); display: grid; gap: 18px; align-content: start; min-width: 0; }
.est__side .kicker { color: var(--accent-hi); }
.est__price { font: 600 clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.est__price small { display: block; font: 400 .98rem/1.4 var(--font-body); letter-spacing: 0; color: var(--on-panel-2); margin-top: 8px; }
.est__facts { display: grid; list-style: none; padding: 0; }
.est__facts li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--panel-line); font-size: 1rem; }
.est__facts li span { color: var(--on-panel-2); }
.est__facts li b { font-weight: 500; text-align: right; }
.est__picked { display: flex; flex-wrap: wrap; gap: 6px; }
.est__picked span { font: 600 .84rem/1 var(--font-body); padding: 7px 10px; border-radius: 9px; background: var(--panel-3); color: var(--on-panel); }
.est__disclaimer { font-size: .88rem; color: var(--on-panel-2); line-height: 1.5; }
.est__mini { display: none; }

/* AI brief */
.ai-box { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-wash), var(--warm-wash)); box-shadow: inset 0 0 0 1px var(--line); }
.ai-box__head { display: flex; align-items: center; gap: 12px; }
.ai-box__icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--warm)); color: #fff; flex: none; }
.ai-box__icon svg { width: 22px; height: 22px; }
.ai-box__head b { font-weight: 650; font-size: 1.05rem; display: block; }
.ai-box__head small { color: var(--ink-2); font-size: .94rem; }
.ai-box textarea { width: 100%; min-height: 104px; resize: vertical; padding: 14px 16px; border-radius: 14px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 1.02rem; line-height: 1.45; }
.ai-box textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.ai-box__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ai-box__examples { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-box__examples button { border: 0; padding: 7px 11px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: .88rem; color: var(--ink-2); }
.ai-box__examples button:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.ai-result { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); animation: ai-in .5s var(--ease) both; }
@keyframes ai-in { from { opacity: 0; translate: 0 10px; } }
.ai-result h4 { font: 650 1.05rem/1.3 var(--font-body); }
.ai-result p { color: var(--ink-2); }
.ai-result ul { display: grid; gap: 6px; padding-left: 20px; color: var(--ink-2); }
.ai-result__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ai-result__src { font-size: .84rem; color: var(--ink-3); }
.ai-thinking { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; }
.ai-thinking i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 1rem; }
.field input, .field textarea { width: 100%; padding: 15px 16px; border-radius: 14px; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 1.04rem; line-height: 1.4; transition: box-shadow .2s; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
.field small { color: var(--ink-3); font-size: .9rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .94rem; color: var(--ink-2); line-height: 1.45; align-items: start; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: var(--danger); font-size: .98rem; font-weight: 500; }
.est__done { display: grid; gap: 16px; justify-items: start; }
.est__done h3 { font: 600 clamp(1.4rem, 1rem + 1.2vw, 1.9rem)/1.15 var(--font-display); letter-spacing: -.03em; }
.est__done p { color: var(--ink-2); max-width: 34em; }
.done-icon { width: 58px; height: 58px; border-radius: 18px; background: var(--mint-wash); color: var(--mint); display: grid; place-items: center; }
.done-icon svg { width: 28px; height: 28px; }
.brief-copy { width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font: 400 .92rem/1.55 var(--font-body); white-space: pre-wrap; color: var(--ink-2); max-height: 240px; overflow: auto; margin: 0; }
@media (max-width: 960px) {
  .est { grid-template-columns: minmax(0, 1fr); }
  .est__side { gap: 12px; }
  .est__mini {
    display: flex; position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 6px); z-index: 5;
    justify-content: space-between; align-items: center; gap: 12px;
    margin: -6px -8px 0; padding: 12px 16px; border-radius: 16px;
    background: var(--panel); color: var(--on-panel); box-shadow: var(--shadow-1);
    font-variant-numeric: tabular-nums;
  }
  .est__mini b { font: 600 1.06rem/1.2 var(--font-display); letter-spacing: -.02em; }
  .est__mini span { font-size: .9rem; color: var(--on-panel-2); white-space: nowrap; }
  .ai-result__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } .est__nav .btn { flex: 1; } }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 20px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 22px 0; display: grid; grid-template-columns: 1fr 34px; gap: 16px; align-items: center; font: 600 clamp(1.06rem, 1rem + .3vw, 1.22rem)/1.35 var(--font-body); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { width: 34px; height: 34px; border-radius: 11px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; transition: transform .35s var(--ease), background-color .3s; }
.faq__item summary i svg { width: 16px; height: 16px; }
.faq__item[open] summary i { transform: rotate(45deg); background: var(--accent); color: #fff; box-shadow: none; }
.faq__item div { padding: 0 50px 24px 0; color: var(--ink-2); line-height: 1.65; display: grid; gap: 10px; max-width: 42em; }
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}
@media (max-width: 960px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__aside { position: static; } .faq__item div { padding-right: 0; } }

/* --------------------------------------------------------------------------
   Final CTA & footer
   -------------------------------------------------------------------------- */
.final { padding: clamp(64px, 10vw, 140px) 0 clamp(48px, 6vw, 88px); }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 70% at 85% 10%, rgba(47, 68, 255, .5), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(255, 122, 69, .28), transparent 70%); }
.final__title { font: 700 clamp(2.2rem, 1rem + 5vw, 5.2rem)/1 var(--font-display); letter-spacing: -.05em; text-wrap: balance; max-width: 13em; margin-top: 22px; }
.final__title span { color: var(--accent-hi); }
.final__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; margin-top: clamp(32px, 5vw, 56px); align-items: end; }
.final__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; list-style: none; padding: 0; }
.contacts li { padding: 16px 0; border-top: 1px solid var(--panel-line); display: grid; gap: 4px; min-width: 0; }
.contacts small { font-size: .88rem; color: var(--on-panel-2); }
.contacts a, .contacts span { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.panel a:not([class]) { color: var(--accent-hi); }
.contacts a:hover { color: var(--accent-hi); text-decoration: underline; }
@media (max-width: 860px) { .final__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .contacts { grid-template-columns: minmax(0, 1fr); } }

.site-footer { color: var(--ink-2); padding-block: clamp(40px, 5vw, 64px) calc(40px + env(safe-area-inset-bottom, 0px)); font-size: .98rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.site-footer h2 { font: 650 1rem/1.2 var(--font-body); color: var(--ink); margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer__legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: .9rem; }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site-footer__grid > :first-child { grid-column: span 2; } }

.mobile-bar {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display: none; grid-template-columns: 1fr 54px; gap: 8px;
  background: var(--header-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 -1px 0 var(--line);
  transform: translateY(110%); transition: transform .4s var(--ease);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar .btn { min-height: 52px; padding: 0 12px; }
@media (max-width: 760px) { .mobile-bar { display: grid; } }

/* Scroll-driven reveals (progressive enhancement, content visible without) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal both linear; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    /* внутри горизонтальной карусели view()-таймлайн привязан к самой карусели: Safari оставляет карточки полупрозрачными */
    .carousel > .reveal, .carousel .reveal { animation: none; }
    @keyframes reveal { from { opacity: .3; transform: translateY(36px); } }
  }
}

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */
.page-hero { position: relative; overflow: clip; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(32px, 6vw, 80px)); padding-bottom: clamp(40px, 6vw, 80px); }
.page-hero::before { content: ""; position: absolute; inset: -20% -20% 0 40%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 60% 40%, var(--aura-1), transparent 70%), radial-gradient(30% 40% at 80% 70%, var(--aura-2), transparent 70%); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; font-size: .94rem; color: var(--ink-3); margin-bottom: 24px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--accent-text); }
.page-hero h1 { font: 700 clamp(2rem, 1.1rem + 3.4vw, 3.9rem)/1.04 var(--font-display); letter-spacing: -.045em; text-wrap: balance; max-width: 16em; }
.page-hero .lead { margin-top: 22px; }
.page-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; list-style: none; padding: 0; }
.page-hero__facts li { padding: 11px 15px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 1rem; }
.page-hero__facts b { font-weight: 650; }
.page-hero .hero__ctas { margin-top: 30px; }
.prose { display: grid; gap: 18px; max-width: 46rem; font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); }
.prose h2 { font: 600 clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem)/1.15 var(--font-display); letter-spacing: -.035em; color: var(--ink); margin-top: 26px; text-wrap: balance; }
.prose h3 { font: 600 1.18rem/1.35 var(--font-body); color: var(--ink); margin-top: 10px; }
.prose ul, .prose ol { display: grid; gap: 8px; padding-left: 22px; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose mark { background: var(--warm-wash); color: inherit; padding: 0 4px; border-radius: 4px; }
/* Service-page content stacks blocks in inline `display:grid` wrappers; let their items shrink
   so a wide .price-table scrolls inside .table-wrap instead of widening the whole page on phones. */
.wrap > [style*="display:grid"] > * { min-width: 0; }
.table-wrap { overflow-x: auto; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 560px; }
.price-table th, .price-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { font: 650 .9rem/1.2 var(--font-body); color: var(--ink-2); background: var(--surface-2); }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:nth-child(2), .price-table td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; list-style: none; padding: 0; }
.feature-grid li { padding: 22px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); display: grid; gap: 8px; align-content: start; }
.feature-grid b { font-weight: 650; font-size: 1.08rem; color: var(--ink); }
.feature-grid p { font-size: 1rem; color: var(--ink-2); line-height: 1.55; }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; list-style: none; padding: 0; }
.related a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 17px 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); text-decoration: none; font-weight: 600; transition: box-shadow .2s; }
.related a:hover { box-shadow: 0 0 0 1.5px var(--accent); }
.related svg { width: 16px; height: 16px; color: var(--accent-text); }
/* legacy class names produced by service-page content */
.section--white { background: var(--surface-2); }
.section--night { background: var(--grain-light) 0 0 / var(--grain-size) repeat, var(--panel); color: var(--on-panel); margin-inline: clamp(8px, 1.4vw, 20px); border-radius: var(--r-panel); }
.section--night .lead, .section--night .muted { color: var(--on-panel-2); }
.section--night .kicker { color: var(--accent-hi); }
.section--night .feature-grid li { background: var(--panel-3); box-shadow: 0 0 0 1px var(--panel-line); }
.section--night .feature-grid b { color: var(--on-panel); }
.section--night .feature-grid p { color: var(--on-panel-2); }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- css/apps/_shared.css ---- */
/* --------------------------------------------------------------------------
   Phone apps — shared
   -------------------------------------------------------------------------- */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.app[hidden] { display: none !important; }
.statusbar {
  flex: none; height: 50px; padding: 16px 28px 0 32px;
  display: flex; justify-content: space-between; align-items: flex-start;
  font: 600 14px/1 var(--font-ui); letter-spacing: -.01em; position: relative; z-index: 5;
}
.statusbar__icons { display: flex; gap: 5px; align-items: center; }
.statusbar__icons svg { height: 11px; width: auto; }
.statusbar--android { height: 40px; padding: 14px 20px 0 22px; font: 500 13px/1 Roboto, var(--font-ui); }


/* ---- css/apps/android.css ---- */
/* Android app — delivery tracking, Material 3 (prefix .an-) */
.app--android { background: #F5F9F3; color: #171D19; font-family: Roboto, "Google Sans", var(--font-ui); }
.app--android .statusbar--android { color: #171D19; position: relative; z-index: 6; }
.an-map { position: absolute; left: 0; right: 0; top: 0; height: 420px; overflow: hidden; }
.an-map svg { width: 100%; height: 100%; display: block; }
.an-pulse { animation: an-pulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes an-pulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.6); opacity: 0; } }

.an-top {
  position: absolute; z-index: 5; top: 42px; left: 10px; right: 10px; height: 52px;
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 2px;
  padding: 0 4px; border-radius: 26px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);
}
.an-icbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #404943; }
.an-icbtn svg { width: 22px; height: 22px; }
.an-top__t { min-width: 0; line-height: 1.2; }
.an-top__t b { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: .1px; }
.an-top__t small { display: block; font-size: 11.5px; color: #6F7971; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.an-eta-chip {
  position: absolute; z-index: 5; top: 104px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px;
  background: #1C6B48; color: #fff; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 2px 6px rgba(28, 107, 72, .35);
}
.an-eta-chip i { width: 7px; height: 7px; border-radius: 50%; background: #B9F6CF; animation: an-blink 1.6s ease-in-out infinite; }
@keyframes an-blink { 50% { opacity: .35; } }

.an-sheet {
  position: absolute; z-index: 5; left: 0; right: 0; top: 268px; bottom: 0;
  padding: 8px 14px 82px; border-radius: 28px 28px 0 0; background: #F5F9F3;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .1);
  display: grid; align-content: start; gap: 9px;
}
.an-sheet__handle { width: 32px; height: 4px; border-radius: 2px; background: #BFC9C0; margin: 0 auto 2px; }
.an-status { display: grid; grid-template-columns: 1fr 46px; align-items: center; gap: 10px; }
.an-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #1C6B48; }
.an-live i { width: 7px; height: 7px; border-radius: 50%; background: #1C6B48; box-shadow: 0 0 0 3px rgba(28, 107, 72, .18); animation: an-blink 1.6s ease-in-out infinite; }
.an-eta { display: block; font-size: 25px; line-height: 1.1; font-weight: 500; letter-spacing: -.2px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.an-status small { display: block; font-size: 11.5px; color: #5A645D; margin-top: 1px; }
.an-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.an-ring__v { stroke-dasharray: 125.7; stroke-dashoffset: 50; transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .1, 1); }

.an-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; list-style: none; margin: 0; padding: 0; }
.an-steps li { display: grid; gap: 5px; font-size: 10.5px; font-weight: 500; color: #8A948C; }
.an-steps i { height: 4px; border-radius: 2px; background: #DCE5DC; position: relative; overflow: hidden; }
.an-steps .is-done { color: #1C6B48; }
.an-steps .is-done i { background: #1C6B48; }
.an-steps .is-now { color: #171D19; }
.an-steps .is-now i::after { content: ""; position: absolute; inset: 0; background: #1C6B48; transform-origin: left; animation: an-fill 3.2s ease-in-out infinite; }
@keyframes an-fill { from { transform: scaleX(.1); } to { transform: scaleX(1); } }

.an-courier-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px 38px; gap: 8px; align-items: center; padding: 8px; border-radius: 18px; background: #E7EFE6; }
.an-ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #8FD4A8, #2F7D57); color: #fff; font-weight: 500; font-size: 15px; }
.an-courier-card__t { min-width: 0; line-height: 1.2; }
.an-courier-card__t b { display: block; font-size: 14px; font-weight: 500; }
.an-courier-card__t small { display: block; font-size: 11.5px; color: #5A645D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-tonal { position: relative; overflow: hidden; width: 38px; height: 38px; border: 0; border-radius: 13px; display: grid; place-items: center; background: #BDEFCD; color: #00210F; padding: 0; }
.an-tonal svg { width: 19px; height: 19px; }
.an-ripple { position: absolute; border-radius: 50%; background: rgba(0, 33, 15, .22); transform: scale(0); animation: an-ripple .55s ease-out forwards; pointer-events: none; }
@keyframes an-ripple { to { transform: scale(2.6); opacity: 0; } }

.an-order { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 2px 2px 0; }
.an-order__img { width: 36px; height: 36px; border-radius: 50%; background:
  radial-gradient(circle at 34% 38%, #7A1F12 0 2.6px, transparent 3px),
  radial-gradient(circle at 64% 58%, #7A1F12 0 2.6px, transparent 3px),
  radial-gradient(circle at 58% 30%, #3E7D3A 0 2px, transparent 2.4px),
  radial-gradient(circle at 40% 64%, #FFF3D1 0 4px, transparent 4.5px),
  radial-gradient(circle, #F6C66A 0 52%, #D9472B 53% 62%, #E7A65A 63% 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.an-order b { font-size: 13px; font-weight: 500; display: block; }
.an-order small { font-size: 11px; color: #5A645D; }
.an-order__sum { font-size: 13.5px; font-variant-numeric: tabular-nums; }

.an-nav {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 74px;
  display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 9px; background: #EBF1E9;
}
.an-nav span { display: grid; justify-items: center; align-content: start; gap: 4px; font-size: 11px; font-weight: 500; color: #404943; }
.an-nav i { width: 54px; height: 28px; border-radius: 14px; display: grid; place-items: center; }
.an-nav svg { width: 21px; height: 21px; }
.an-nav .on { color: #00210F; }
.an-nav .on i { background: #BDEFCD; }
.an-gesture { position: absolute; z-index: 7; bottom: 7px; left: 50%; translate: -50% 0; width: 96px; height: 4px; border-radius: 2px; background: #171D19; opacity: .75; }

/* ---- css/apps/bot.css ---- */
/* ==========================================================================
   Demo 2: Telegram-бот (вид Telegram для iOS, светлая тема)
   Корень .app--bot, все классы с префиксом .tgc-
   Экран 278 x 598. Размеры около 0.85 от настоящих.
   ========================================================================== */

.app.app--bot {
  --tgc-top: 92px;          /* высота шапки вместе со статус-баром */
  --tgc-bar: 66px;          /* нижняя панель: поле ввода + отступ под home indicator */
  --tgc-blue: #007AFF;
  --tgc-glass: rgba(34, 60, 40, .44);
  --tgc-glass-hi: rgba(22, 42, 28, .66);
  --tgc-in: #FFFFFF;
  --tgc-out: #E3FEC7;
  --tgc-r: 16px;
  --tgc-rs: 5px;
  color: #000;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
  background-color: #C6DCA3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cg fill='none' stroke='%232E5A38' stroke-opacity='.21' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(25 26) rotate(-12)' d='M0 8C-9 2-10-3-6-6C-3-8 0-6 0-3C0-6 3-8 6-6C10-3 9 2 0 8Z'/%3E%3Cpath transform='translate(88 20) rotate(8)' d='M0-9L2.6-3L9-2.6L4.1 1.5L5.6 8L0 4.5L-5.6 8L-4.1 1.5L-9-2.6L-2.6-3Z'/%3E%3Cpath transform='translate(141 30) rotate(24)' d='M-8 6C-8-4 0-9 8-8C8 0 4 8-8 6ZM-8 6L3-3'/%3E%3Cpath transform='translate(54 70) rotate(-8)' d='M-10-1L10-9L4 9L0 2ZM0 2L10-9'/%3E%3Cpath transform='translate(120 80)' d='M-8 6H7A5 5 0 0 0 7.5-4A7 7 0 0 0-5.5-5A5.2 5.2 0 0 0-8 6Z'/%3E%3Cg transform='translate(25 114) rotate(10)'%3E%3Ccircle r='2.4'/%3E%3Ccircle cx='6.2' cy='0' r='3.6'/%3E%3Ccircle cx='1.9' cy='5.9' r='3.6'/%3E%3Ccircle cx='-5' cy='3.6' r='3.6'/%3E%3Ccircle cx='-5' cy='-3.6' r='3.6'/%3E%3Ccircle cx='1.9' cy='-5.9' r='3.6'/%3E%3C/g%3E%3Cpath transform='translate(86 116) rotate(12)' d='M2-10L-6 2H-1L-3 10L7-3H1Z'/%3E%3Cpath transform='translate(143 132) rotate(-16)' d='M3-9A9 9 0 1 0 9 4A7.5 7.5 0 0 1 3-9Z'/%3E%3Cg transform='translate(52 150) rotate(-6)'%3E%3Ccircle cx='-5' cy='6' r='3'/%3E%3Ccircle cx='5' cy='4' r='3'/%3E%3Cpath d='M-2 6V-6L8-8V4'/%3E%3C/g%3E%3Cg transform='translate(112 152)'%3E%3Ccircle r='9'/%3E%3Cpath d='M-3.5-2.5V-1M3.5-2.5V-1M-4.5 2.5Q0 7 4.5 2.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 52% at 4% 2%, rgba(247, 241, 160, .95), rgba(247, 241, 160, 0) 68%),
    radial-gradient(90% 46% at 104% 34%, rgba(112, 184, 136, .85), rgba(112, 184, 136, 0) 70%),
    radial-gradient(100% 50% at -6% 82%, rgba(118, 186, 140, .8), rgba(118, 186, 140, 0) 72%),
    radial-gradient(90% 40% at 100% 104%, rgba(222, 230, 142, .95), rgba(222, 230, 142, 0) 70%);
  background-size: 168px 168px, auto, auto, auto, auto;
  background-position: 6px 0, 0 0, 0 0, 0 0, 0 0;
}
.app.app--bot.tgc-is-rk { --tgc-bar: 106px; }
.app--bot *, .app--bot *::before, .app--bot *::after { box-sizing: border-box; }
:where(.app--bot) button {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app--bot .home-ind { background: rgba(0, 0, 0, .86); }

/* ---------- Шапка ---------- */
.tgc-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  background: rgba(249, 249, 249, .84);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: 0 .5px 0 rgba(0, 0, 0, .22);
}
.tgc-nav {
  height: 42px; padding: 0 10px 0 6px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.tgc-nav__back {
  justify-self: start; display: flex; align-items: center; gap: 3px;
  color: var(--tgc-blue); font-size: 14.5px; line-height: 1; letter-spacing: -.01em; white-space: nowrap;
}
.tgc-nav__chev { flex: none; width: 10px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tgc-badge {
  min-width: 17px; height: 17px; margin-left: 3px; padding: 0 5px; border-radius: 9px;
  background: var(--tgc-blue); color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center;
}
.tgc-nav__title { min-width: 0; text-align: center; line-height: 1.15; }
.tgc-nav__title b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.tgc-nav__title small { display: block; height: 14px; font-size: 11.5px; line-height: 14px; font-weight: 400; color: #8A8A8E; white-space: nowrap; }
.tgc-nav__title small.tgc-is-typing { color: var(--tgc-blue); }
.tgc-dots i {
  display: inline-block; width: 2.6px; height: 2.6px; margin-left: 1.6px; border-radius: 50%;
  background: currentColor; vertical-align: .12em; animation: tgc-dot 1.1s infinite;
}
.tgc-dots i:nth-child(2) { animation-delay: .16s; }
.tgc-dots i:nth-child(3) { animation-delay: .32s; }
.tgc-ava {
  justify-self: end; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(160deg, #A6DE86, #49B06A);
  color: #fff; font-size: 14px; font-weight: 600; line-height: 32px; text-align: center; letter-spacing: 0;
}

/* ---------- Лента сообщений ---------- */
.tgc-chat { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.tgc-list {
  position: absolute; left: 0; right: 0; bottom: var(--tgc-bar);
  padding: 0 11px 8px; display: flex; flex-direction: column; gap: 6px;
  transition: bottom .32s var(--ease), transform .42s var(--ease);
}
.tgc-date, .tgc-float, .tgc-svc {
  align-self: center; text-align: center; color: #fff; font-weight: 500;
  background: rgba(36, 62, 42, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.tgc-date, .tgc-float { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; line-height: 1.2; }
.tgc-date { margin: 2px 0; }
.tgc-svc { max-width: 84%; margin: 2px 0; padding: 5px 11px; border-radius: 13px; font-size: 11.5px; line-height: 1.3; }
.tgc-float {
  position: absolute; z-index: 5; top: calc(var(--tgc-top) + 6px); left: 50%; translate: -50% 0;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.tgc-float.tgc-is-on { opacity: 1; }

.tgc-row { position: relative; display: flex; flex-direction: column; width: fit-content; max-width: 90%; }
.tgc-row--in { align-self: flex-start; }
.tgc-row--out { align-self: flex-end; }
.tgc-row.tgc-is-cont { margin-top: -4px; }
.tgc-row.tgc-has-kb { min-width: 204px; }

.tgc-bub {
  position: relative; display: flow-root; padding: 6px 9px 5px 10px;
  border-radius: var(--tgc-r); font-size: 14px; line-height: 1.3; letter-spacing: -.012em;
  box-shadow: 0 1px 1px rgba(30, 50, 30, .09);
}
.tgc-bub b { font-weight: 600; }
.tgc-row--in .tgc-bub { background: var(--tgc-in); }
.tgc-row--out .tgc-bub { background: var(--tgc-out); }

/* углы: внутри группы сообщений одного автора поджимаем скругление, хвостик только у последнего */
.tgc-row--in:not(.tgc-is-tail) .tgc-bub { border-bottom-left-radius: var(--tgc-rs); }
.tgc-row--in.tgc-is-cont .tgc-bub { border-top-left-radius: var(--tgc-rs); }
.tgc-row--out:not(.tgc-is-tail) .tgc-bub { border-bottom-right-radius: var(--tgc-rs); }
.tgc-row--out.tgc-is-cont .tgc-bub { border-top-right-radius: var(--tgc-rs); }
.tgc-row--in.tgc-is-tail .tgc-bub { border-bottom-left-radius: 0; }
.tgc-row--out.tgc-is-tail .tgc-bub { border-bottom-right-radius: 0; }
.tgc-row--in.tgc-is-tail .tgc-bub::after,
.tgc-row--out.tgc-is-tail .tgc-bub::after {
  content: ""; position: absolute; bottom: 0; width: 11px; height: 13px; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.tgc-row--in.tgc-is-tail .tgc-bub::after { left: -10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath fill='%23fff' d='M11 0H10C10 6 6.8 11.4 1 12.5C.3 12.7 .4 13 1.1 13H11Z'/%3E%3C/svg%3E"); }
.tgc-row--out.tgc-is-tail .tgc-bub::after { right: -10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath fill='%23E3FEC7' d='M0 0H1C1 6 4.2 11.4 10 12.5C10.7 12.7 10.6 13 9.9 13H0Z'/%3E%3C/svg%3E"); }

/* время и галочки внутри пузыря */
.tgc-meta {
  float: right; display: inline-flex; align-items: center; gap: 3px; height: 13px;
  margin: 5px -1px -3px 9px; position: relative; top: 1px;
  font-size: 10.5px; line-height: 1; letter-spacing: 0; font-weight: 400;
}
.tgc-row--in .tgc-meta { color: #A1ADB6; }
.tgc-row--out .tgc-meta { color: #5DC452; }
.tgc-ticks { width: 14px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cg fill='none' stroke='%235DC452' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.6L3.9 8.4L9.6 1.4'/%3E%3Cpath d='M5.6 7.9L6.1 8.4L12.8 1.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Инлайн-клавиатура ---------- */
.tgc-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 0; min-width: 100%; margin-top: 3px; }
.tgc-kb button {
  position: relative; min-height: 31px; padding: 6px 5px; border-radius: 9px;
  background: var(--tgc-glass); color: #fff;
  font-size: 13px; line-height: 1.15; font-weight: 500; letter-spacing: -.005em;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  transition: background-color .16s, transform .16s var(--ease);
}
.tgc-kb button.tgc-wide { grid-column: 1 / -1; }
.tgc-kb button:active, .tgc-kb button.tgc-is-press { background: var(--tgc-glass-hi); }
.tgc-kb button.tgc-is-press { transform: scale(.985); }
@media (hover: hover) {
  .tgc-kb:not(.tgc-is-used) button:hover { background: var(--tgc-glass-hi); }
  .tgc-start:hover { background: rgba(0, 0, 0, .04); }
  .tgc-rk button:hover { background: #D8DBE1; }
}
.tgc-kb.tgc-is-used button { pointer-events: none; }
.tgc-kb button.tgc-is-url { padding-inline: 13px; }
.tgc-kb button.tgc-is-url::before {
  content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 7.8L7.6 2.4'/%3E%3Cpath d='M3.6 2.2H7.8V6.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: .85;
}
.tgc-kb button.tgc-is-press::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%;
  border: 1.4px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: tgc-spin .7s linear infinite;
}
.tgc-kb button.tgc-is-url.tgc-is-press::before { opacity: 0; }

/* ---------- Счёт (Telegram Payments) ---------- */
.tgc-row--inv { width: 224px; }
.tgc-bub--inv { padding: 0; }
.tgc-inv__cover {
  height: 84px; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  background: #D9E3C4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 96' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F7E8CD'/%3E%3Cstop offset='.55' stop-color='%23E4E7C6'/%3E%3Cstop offset='1' stop-color='%23BAD3AE'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='224' height='96' fill='url(%23g)'/%3E%3Ccircle cx='52' cy='36' r='20' fill='%23FFF4DD' opacity='.8'/%3E%3Cpath d='M0 80C38 66 80 76 120 71S192 60 224 67V96H0Z' fill='%239FBF9B' opacity='.5'/%3E%3Cpath d='M0 88C46 78 92 86 138 82S200 76 224 80V96H0Z' fill='%2386AC86' opacity='.55'/%3E%3Cg fill='none' stroke='%23456A4D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M130 98C130 80 137 70 142 54'/%3E%3Cpath d='M152 98C148 72 157 52 150 20'/%3E%3Cpath d='M174 98C171 70 180 50 189 26'/%3E%3Cpath d='M197 98C198 76 207 60 216 40'/%3E%3C/g%3E%3Cg fill='%2356805A'%3E%3Cellipse cx='139' cy='72' rx='7' ry='2.3' transform='rotate(-38 139 72)'/%3E%3Cellipse cx='147' cy='64' rx='7' ry='2.3' transform='rotate(-142 147 64)'/%3E%3Cellipse cx='154' cy='48' rx='7.5' ry='2.4' transform='rotate(-36 154 48)'/%3E%3Cellipse cx='152' cy='36' rx='7' ry='2.3' transform='rotate(-146 152 36)'/%3E%3Cellipse cx='178' cy='58' rx='7.5' ry='2.4' transform='rotate(-34 178 58)'/%3E%3Cellipse cx='181' cy='44' rx='7' ry='2.3' transform='rotate(-148 181 44)'/%3E%3Cellipse cx='203' cy='64' rx='7' ry='2.3' transform='rotate(-36 203 64)'/%3E%3Cellipse cx='207' cy='54' rx='6.5' ry='2.2' transform='rotate(-146 207 54)'/%3E%3C/g%3E%3Cg fill='%23FFF7EA' stroke='%23D8A64B' stroke-width='.9'%3E%3Ccircle cx='142' cy='52' r='4.2'/%3E%3Ccircle cx='150' cy='19' r='4.4'/%3E%3Ccircle cx='189' cy='25' r='4.4'/%3E%3Ccircle cx='216' cy='39' r='4.2'/%3E%3Ccircle cx='146' cy='28' r='3.3'/%3E%3Ccircle cx='181' cy='36' r='3.3'/%3E%3C/g%3E%3Cg fill='%23D8A64B'%3E%3Ccircle cx='142' cy='52' r='1.2'/%3E%3Ccircle cx='150' cy='19' r='1.3'/%3E%3Ccircle cx='189' cy='25' r='1.3'/%3E%3Ccircle cx='216' cy='39' r='1.2'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.tgc-inv__body { padding: 7px 10px 5px; }
.tgc-inv__title { display: block; font-size: 14.5px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
.tgc-inv__desc { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: #26262A; }
.tgc-inv__sum { margin-top: 5px; font-size: 15px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; display: flow-root; }
.tgc-inv__sum b { font-weight: 600; }

/* ---------- Экран «Что умеет этот бот?» ---------- */
.tgc-empty {
  position: absolute; left: 0; right: 0; top: var(--tgc-top); bottom: var(--tgc-bar); z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 0 20px;
  opacity: 0; transform: scale(.96); pointer-events: none;
  transition: opacity .3s, transform .35s var(--ease);
}
.tgc-is-start .tgc-empty { opacity: 1; transform: none; }
.tgc-about {
  width: 100%; padding: 12px 14px 13px; border-radius: 14px; color: #fff;
  background: rgba(36, 62, 42, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.tgc-about h4 { margin: 0 0 7px; font-size: 14.5px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; text-align: center; }
.tgc-about p { margin: 0; font-size: 12.5px; line-height: 1.36; font-weight: 400; }
.tgc-about p + p { margin-top: 5px; }

/* ---------- Нижняя панель ---------- */
.tgc-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: rgba(247, 247, 247, .88);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: 0 -.5px 0 rgba(0, 0, 0, .2);
}
.tgc-bars { position: relative; height: 44px; }
.tgc-bar { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity .25s; }
.tgc-bar--input { gap: 7px; padding: 0 8px; }
.tgc-bar--start { opacity: 0; pointer-events: none; }
.tgc-is-start .tgc-bar--start { opacity: 1; pointer-events: auto; }
.tgc-is-start .tgc-bar--input { opacity: 0; pointer-events: none; }
.tgc-start {
  width: 100%; height: 100%; color: var(--tgc-blue);
  font-size: 15px; font-weight: 600; letter-spacing: .03em; transition: background-color .15s;
}
.tgc-start.tgc-is-press { background: rgba(0, 0, 0, .07); }
.tgc-menu {
  flex: none; height: 30px; padding: 0 11px 0 9px; border-radius: 15px; background: var(--tgc-blue); color: #fff;
  display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: -.005em;
}
.tgc-menu svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tgc-field {
  flex: 1; min-width: 0; height: 32px; padding: 0 8px 0 12px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 .5px rgba(60, 60, 67, .3);
  display: flex; align-items: center; justify-content: space-between;
  color: #B1B1B6; font-size: 14px; letter-spacing: -.01em;
}
.tgc-field svg, .tgc-mic { fill: none; stroke: #8E8E93; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tgc-field svg { flex: none; width: 19px; height: 19px; }
.tgc-mic { flex: none; width: 24px; height: 24px; }
.tgc-rk {
  height: 0; overflow: hidden; padding: 0 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start;
  transition: height .32s var(--ease), padding .32s var(--ease);
}
.tgc-is-rk .tgc-rk { height: 62px; padding-top: 7px; }
.tgc-rk button {
  height: 34px; border-radius: 8px; background: #E1E4E9; color: #111;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; box-shadow: 0 1px 0 rgba(0, 0, 0, .13);
  transition: background-color .15s;
}
.tgc-rk button:active { background: #D2D6DC; }
.tgc-pad { height: 22px; transition: height .32s var(--ease); }
.tgc-is-rk .tgc-pad { height: 0; }

/* ---------- Анимации ---------- */
@keyframes tgc-pop { from { opacity: 0; transform: scale(.9); } }
@keyframes tgc-spin { to { transform: rotate(360deg); } }
@keyframes tgc-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-1.5px); } }
.tgc-row.tgc-is-new { animation: tgc-pop .3s var(--ease) backwards; }
.tgc-row--in.tgc-is-new { transform-origin: 0 100%; }
.tgc-row--out.tgc-is-new { transform-origin: 100% 100%; }
.tgc-date.tgc-is-new, .tgc-svc.tgc-is-new { animation: tgc-pop .3s var(--ease) backwards; transform-origin: 50% 100%; }

.app--bot.tgc-is-reduce *, .app--bot.tgc-is-reduce *::before, .app--bot.tgc-is-reduce *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .app--bot *, .app--bot *::before, .app--bot *::after { animation: none !important; transition: none !important; }
}

/* ---- css/apps/game.css ---- */
/* Game */
.app--game { background: #120E2A; color: #fff; }
.app--game canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; }
.game-hud { position: absolute; z-index: 3; top: 58px; left: 0; right: 0; text-align: center; pointer-events: none; }
.game-hud b { display: block; font: 700 46px/1 var(--font-display); letter-spacing: -.04em; text-shadow: 0 4px 20px rgba(0, 0, 0, .3); }
.game-hud small { font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.game-msg {
  position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 70px; text-align: center; pointer-events: none;
  font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .85);
}
.game-msg b { display: block; font-size: 17px; margin-bottom: 2px; color: #fff; }


/* ---- css/apps/ios.css ---- */
/* iOS-демо «Ровно» (Steady): личные финансы, светлая тёплая тема, зерно, iOS 26 «Liquid Glass».
   Все классы с префиксом .ia-. Корень .app.app--ios перекрывает старые стили фитнес-демо из main.css. */

.app.app--ios {
  --ia-bg: #F2F2F7;
  --ia-card: #FFFFFF;
  --ia-ink: #1C1C1E;
  --ia-sec: #6E6E73;
  --ia-hair: rgba(34, 32, 28, .09);
  --ia-red: #D62F23;
  --ia-serif: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Onest", system-ui, sans-serif;
  --ia-ease: cubic-bezier(.2, .7, .1, 1);
  --ia-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ia-sheet-ease: cubic-bezier(.32, .72, 0, 1);
  /* Зерно: два слоя шума (тёмные и светлые крупинки), в сумме нейтральные по яркости, без blend-режимов */
  --ia-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .07 2.6 0 0 0 -1.3'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .94 -2.6 0 0 0 1.3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)'/%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E");
  background: var(--ia-bg);
  color: var(--ia-ink);
  font-family: var(--font-ui);
  font-size: 13px; line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
}
.app.app--ios .home-ind { background: rgba(34, 32, 28, .78); z-index: 20; }
.app--ios .statusbar { z-index: 5; }
:where(.app--ios) button {
  appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: inherit;
  -webkit-tap-highlight-color: transparent;
}
:where(.app--ios) button[disabled] { cursor: default; }
:where(.app--ios) :is(p, h2, h3) { margin: 0; }
.ia-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.app--ios svg.ia-s { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- прокрутка и края ---------- */
.ia-scroll {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  transform-origin: 50% 0; transition: transform .6s var(--ia-sheet-ease), border-radius .6s;
}
.is-sheet .ia-scroll { transform: scale(.955) translateY(6px); border-radius: 30px; }
.ia-inner { position: relative; padding: 54px 16px 118px; will-change: transform; }
.ia-top {
  position: absolute; left: 0; right: 0; top: 0; height: 78px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, var(--ia-bg) 0, var(--ia-bg) 44%, rgba(242, 242, 247, 0) 100%);
  opacity: 0; transition: opacity .3s;
}
.is-scrolled .ia-top { opacity: 1; }
.ia-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 6; pointer-events: none;
  background: linear-gradient(0deg, var(--ia-bg) 0, var(--ia-bg) 46%, rgba(242, 242, 247, 0) 100%);
}
.ia-grain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  display: none;
}

/* ---------- появление ---------- */
@keyframes ia-rise { from { opacity: 0; transform: translateY(16px); } }
.app--ios.is-in .ia-in { animation: ia-rise .8s var(--ia-ease) both; animation-delay: var(--d, 0ms); }
.app--ios.is-in .ia-fab.ia-in { animation-name: ia-pop; animation-timing-function: var(--ia-spring); }
@keyframes ia-pop { from { opacity: 0; transform: scale(.4); } }

/* ---------- шапка ---------- */
.ia-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ia-eyebrow { font: 600 12.5px/1.2 var(--font-ui); color: var(--ia-sec); }
.ia-left {
  margin-top: 3px; font: 700 36px/1.05 var(--ia-serif); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.ia-left.is-over { color: var(--ia-red); }
.ia-perday { margin-top: 5px; font: 500 11.5px/1.3 var(--font-ui); color: var(--ia-sec); }
.ia-ava {
  flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #5E5CE6, #0A84FF); color: #fff; font: 600 15px/1 var(--font-ui);
  box-shadow: inset 0 0 0 .5px rgba(34, 32, 28, .1), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* ---------- сегментированный контрол ---------- */
.ia-seg {
  position: relative; margin-top: 12px; height: 34px; padding: 2px; border-radius: 12px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(34, 32, 28, .065); box-shadow: inset 0 0 0 .5px rgba(34, 32, 28, .05);
}
.ia-seg__thumb {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3);
  border-radius: 10px; background: #fff;
  box-shadow: 0 1px 1px rgba(34, 32, 28, .08), 0 3px 9px rgba(34, 32, 28, .13);
  transform: translateX(calc(var(--i, 1) * 100%)); transition: transform .45s var(--ia-spring);
}
.ia-seg button { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; font: 600 12.5px/1 var(--font-ui); color: var(--ia-sec); transition: color .2s; }
.ia-seg button:hover { color: var(--ia-ink); }
.ia-seg button.is-on { color: var(--ia-ink); }

/* ---------- кольцо ---------- */
.ia-ring { position: relative; width: 148px; height: 148px; margin: 12px auto 0; }
.ia-ring::before {
  content: ""; position: absolute; inset: 24px; border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 58%, rgba(255, 255, 255, .15));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 10px 24px -10px rgba(70, 48, 24, .28);
}
.ia-ring svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.ia-ring__track { fill: none; stroke: rgba(34, 32, 28, .075); stroke-width: 14; }
.ia-arc { fill: none; stroke: var(--c); stroke-width: 14; stroke-linecap: round; }
.ia-ring__c {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.ia-ring__c small { font: 600 9.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ia-sec); }
.ia-ring__c b {
  margin: 6px 0 5px; font: 700 22px/1 var(--ia-serif); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.ia-ring__c b.is-long { font-size: 20px; }
.ia-ring__c span { font: 500 10.5px/1.1 var(--font-ui); color: var(--ia-sec); white-space: nowrap; }
.ia-ring__c.is-bump { animation: ia-bump .6s var(--ia-spring); }
@keyframes ia-bump { 40% { transform: scale(1.06); } }

/* ---------- карточка подсказки ---------- */
.ia-tip {
  position: relative; margin-top: 14px; display: grid; border-radius: 22px; overflow: hidden;
  background: #27231F; color: #F4EFE6;
  box-shadow: 0 1px 1px rgba(34, 32, 28, .25), 0 16px 30px -14px rgba(40, 28, 16, .55);
}
.ia-tip::before, .ia-tip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .6s;
}
.ia-tip::before { background: radial-gradient(130% 100% at 100% 0, rgba(255, 149, 0, .38), rgba(255, 149, 0, 0) 58%); }
.ia-tip::after { background: radial-gradient(130% 100% at 100% 0, rgba(52, 199, 89, .34), rgba(52, 199, 89, 0) 58%); opacity: 0; }
.ia-tip.is-done::before { opacity: 0; }
.ia-tip.is-done::after { opacity: 1; }
.ia-tip__l { grid-area: 1 / 1; position: relative; z-index: 1; padding: 13px 14px 14px; transition: opacity .35s, transform .5s var(--ia-ease), visibility .35s; }
.ia-tip__l--b { opacity: 0; visibility: hidden; transform: translateY(12px); }
.ia-tip.is-done .ia-tip__l--a { opacity: 0; visibility: hidden; transform: translateY(-12px); }
.ia-tip.is-done .ia-tip__l--b { opacity: 1; visibility: visible; transform: none; }
.ia-tip__k { display: flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font-ui); color: rgba(244, 239, 230, .66); }
.ia-tip__k svg { width: 14px; height: 14px; color: #FF9F0A; }
.ia-tip__l--b .ia-tip__k svg { color: #30D158; stroke-width: 2.4; }
.ia-tip h3 { margin-top: 8px; font: 700 17px/1.2 var(--ia-serif); letter-spacing: -.02em; max-width: 14em; text-wrap: balance; }
.ia-tip__t { margin-top: 6px; font: 400 11.5px/1.4 var(--font-ui); color: rgba(244, 239, 230, .7); max-width: 22em; }
.ia-btn { display: inline-flex; align-items: center; height: 32px; margin-top: 11px; padding: 0 16px; border-radius: 16px; font: 600 12.5px/1 var(--font-ui); transition: transform .15s, background .2s, box-shadow .2s; }
.ia-btn--light { background: #F4EFE6; color: #22201C; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; }
.ia-btn--light:hover { background: #fff; }
.ia-btn--ghost { background: rgba(244, 239, 230, .14); color: #F4EFE6; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.ia-btn--ghost:hover { background: rgba(244, 239, 230, .24); }
.ia-btn:active { transform: scale(.95); }

/* ---------- заголовки и карточки ---------- */
.ia-h { margin: 24px 4px 8px; }
.ia-h h2 { font: 700 20px/1.1 var(--font-ui); letter-spacing: -.028em; }
.ia-card {
  padding: 3px 12px; border-radius: 20px; background: var(--ia-card);
  box-shadow: 0 0 0 .5px rgba(34, 32, 28, .06), 0 1px 2px rgba(60, 40, 20, .05), 0 12px 26px -16px rgba(60, 40, 20, .28);
}
.ia-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--c); color: #fff; font-style: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.ia-ico svg { width: 17px; height: 17px; }

.ia-cat {
  position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center;
  margin: 0 -6px; padding: 10px 6px; border-radius: 13px;
}
.ia-cat + .ia-cat::before, .ia-tx + .ia-tx::before {
  content: ""; position: absolute; left: 46px; right: 6px; top: 0; height: 1px; background: var(--ia-hair);
}
.ia-cat__top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ia-cat__name { font: 600 13px/1.1 var(--font-ui); letter-spacing: -.01em; }
.ia-cat__sum { font: 500 10.5px/1 var(--font-ui); color: var(--ia-sec); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ia-cat__sum b { font: 600 12.5px/1 var(--font-ui); color: var(--ia-ink); }
.ia-prog { position: relative; height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(34, 32, 28, .08); overflow: hidden; }
.ia-prog i { position: absolute; inset: 0; border-radius: inherit; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.ia-cat.is-over .ia-prog i { background: #FF3B30; }
.ia-cat.is-over .ia-cat__sum b { color: var(--ia-red); }
.ia-cat.is-flash { animation: ia-flash 1.5s ease; }
@keyframes ia-flash { 0% { background: rgba(34, 32, 28, 0); } 14% { background: rgba(34, 32, 28, .075); } 100% { background: rgba(34, 32, 28, 0); } }

.ia-tx { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; }
.ia-tx + .ia-tx::before { left: 38px; right: 0; }
.ia-tx .ia-ico { width: 28px; height: 28px; border-radius: 8px; }
.ia-tx .ia-ico svg { width: 16px; height: 16px; }
.ia-tx__m b { display: block; font: 600 13px/1.15 var(--font-ui); letter-spacing: -.01em; }
.ia-tx__m small { display: block; margin-top: 2px; font: 500 11px/1.2 var(--font-ui); color: var(--ia-sec); }
.ia-tx__a { font: 600 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.ia-tx.is-paused .ia-tx__a { font-weight: 500; color: var(--ia-sec); text-decoration: line-through; text-decoration-thickness: 1px; }
.ia-tx.is-paused .ia-ico { opacity: .45; }
.ia-tx.is-new { animation: ia-rise .7s var(--ia-ease) both; }

/* ---------- «жидкое стекло» ---------- */
.ia-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(142deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .14) 36%, rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, .72));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ia-bar {
  position: absolute; left: 14px; bottom: 18px; z-index: 8; width: 186px; height: 56px; padding: 4px; border-radius: 28px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(250, 250, 252, .7));
  -webkit-backdrop-filter: blur(16px) saturate(1.9); backdrop-filter: blur(16px) saturate(1.9);
  box-shadow: inset 0 1.5px 1px -1px rgba(255, 255, 255, 1), inset 0 -1px 1px rgba(70, 48, 24, .07),
    0 12px 28px -8px rgba(50, 34, 18, .32), 0 2px 6px rgba(50, 34, 18, .1);
}
.ia-bar__pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 24px;
  background: rgba(34, 32, 28, .085);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .8), inset 0 1px 2px rgba(34, 32, 28, .06);
  transform: translateX(calc(var(--t, 0) * 100%)); transition: transform .5s var(--ia-spring);
}
.ia-bar button {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 24px; color: rgba(28, 28, 30, .55); font: 600 9.5px/1 var(--font-ui); transition: color .25s;
}
.ia-bar button svg { width: 20px; height: 20px; }
.ia-bar button:hover { color: rgba(34, 32, 28, .85); }
.ia-bar button.is-on { color: var(--ia-ink); }
.ia-fab {
  position: absolute; right: 14px; bottom: 18px; z-index: 8; width: 56px; height: 56px; border-radius: 28px;
  display: grid; place-items: center; color: #F8F3EA;
  background: linear-gradient(180deg, rgba(58, 53, 47, .9), rgba(28, 25, 22, .94));
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22), 0 12px 26px -8px rgba(30, 20, 10, .55), 0 2px 5px rgba(30, 20, 10, .2);
  transition: transform .2s var(--ia-spring), box-shadow .2s;
}
.ia-fab::before { opacity: .5; }
.ia-fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: ia-nudge 2.8s 2.6s ease-out infinite; }
.ia-fab svg { width: 24px; height: 24px; stroke-width: 2.2; transition: transform .35s var(--ia-spring); }
.ia-fab:hover svg { transform: rotate(90deg); }
.ia-fab:active { transform: scale(.92); }
.is-touched .ia-fab::after { animation: none; }
@keyframes ia-nudge { 0% { box-shadow: 0 0 0 0 rgba(34, 32, 28, .34); } 65%, 100% { box-shadow: 0 0 0 15px rgba(34, 32, 28, 0); } }

/* ---------- нижний лист ---------- */
.ia-scrim { position: absolute; inset: 0; z-index: 12; background: rgba(28, 20, 12, .36); opacity: 0; pointer-events: none; transition: opacity .45s; }
.is-sheet .ia-scrim { opacity: 1; pointer-events: auto; }
.ia-sheet {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 13; padding: 9px 14px 14px; border-radius: 33px;
  background: rgba(248, 248, 250, .9);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 24px 56px rgba(30, 20, 10, .42), 0 2px 8px rgba(30, 20, 10, .12);
  transform: translateY(calc(100% + 18px)); pointer-events: none; visibility: hidden;
  transition: transform .6s var(--ia-sheet-ease), visibility 0s .6s;
}
.is-sheet .ia-sheet { transform: none; pointer-events: auto; visibility: visible; transition: transform .6s var(--ia-sheet-ease), visibility 0s; }
.ia-sheet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  display: none;
}
.ia-sheet > * { position: relative; z-index: 1; }
.ia-grab { width: 36px; height: 4px; margin: 0 auto; border-radius: 2px; background: rgba(34, 32, 28, .2); }
.ia-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ia-sheet__head b { font: 700 15px/1 var(--font-ui); letter-spacing: -.02em; }
.ia-sheet__head button { height: 30px; padding: 0 2px 0 10px; font: 500 13px/1 var(--font-ui); color: var(--ia-sec); transition: color .2s; }
.ia-sheet__head button:hover { color: var(--ia-ink); }
.ia-amt {
  display: flex; align-items: baseline; margin-top: 6px; min-height: 52px;
  font: 700 44px/1.1 var(--ia-serif); letter-spacing: -.035em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.ia-amt.is-empty [data-amt] { color: rgba(34, 32, 28, .24); }
.ia-amt__c { margin-left: 7px; font-size: 24px; color: var(--ia-sec); letter-spacing: 0; }
.ia-amt__c--pre { margin: 0 4px 0 0; }
.ia-caret { align-self: center; width: 2px; height: 36px; margin-left: 3px; border-radius: 1px; background: #FF9500; animation: ia-blink 1.1s steps(1) infinite; }
@keyframes ia-blink { 50% { opacity: 0; } }
.ia-label { margin-top: 4px; font: 600 11px/1 var(--font-ui); color: var(--ia-sec); }
.ia-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.ia-pick button {
  height: 52px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(34, 32, 28, .055); color: var(--ia-sec); font: 600 10px/1 var(--font-ui); letter-spacing: -.01em;
  transition: background .25s, color .25s, transform .15s;
}
.ia-pick button:hover { background: rgba(34, 32, 28, .09); }
.ia-pick button:active { transform: scale(.96); }
.ia-pick button.is-on { background: var(--ia-ink); color: #F4EFE6; }
.ia-pick .ia-ico { width: 22px; height: 22px; border-radius: 7px; }
.ia-pick .ia-ico svg { width: 13px; height: 13px; }
.ia-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.ia-keys button {
  height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .74); box-shadow: 0 .5px 0 rgba(34, 32, 28, .2), inset 0 0 0 .5px rgba(255, 255, 255, .95);
  font: 500 20px/1 var(--font-ui); color: var(--ia-ink); font-variant-numeric: tabular-nums;
  transition: transform .12s, background .15s;
}
.ia-keys button:hover { background: #fff; }
.ia-keys button:active { transform: scale(.94); background: rgba(34, 32, 28, .1); }
.ia-keys svg { width: 22px; height: 22px; }
.ia-go {
  display: block; width: 100%; height: 42px; margin-top: 10px; border-radius: 21px;
  background: var(--ia-ink); color: #F4EFE6; text-align: center; font: 600 14px/1 var(--font-ui); letter-spacing: -.005em;
  transition: transform .15s, opacity .25s, background .2s;
}
.ia-go:hover { background: #38332D; }
.ia-go:active { transform: scale(.98); }
.ia-go:disabled { opacity: .3; transform: none; background: var(--ia-ink); }

/* ---------- меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  .app--ios.is-in .ia-in, .ia-tx.is-new, .ia-cat.is-flash, .ia-ring__c.is-bump { animation: none; }
  .ia-fab::after, .ia-caret { animation: none; }
  .app--ios *, .app--ios *::before, .app--ios *::after { transition-duration: .01s !important; transition-delay: 0s !important; }
}
.app--ios.is-calm.is-in .ia-in, .app--ios.is-calm .ia-tx.is-new, .app--ios.is-calm .ia-cat.is-flash, .app--ios.is-calm .ia-ring__c.is-bump { animation: none; }
.app--ios.is-calm .ia-fab::after, .app--ios.is-calm .ia-caret { animation: none; }
.app--ios.is-calm *, .app--ios.is-calm *::before, .app--ios.is-calm *::after { transition-duration: .01s !important; transition-delay: 0s !important; }

/* ---- css/apps/miniapp.css ---- */
/* Mini App (Telegram) — coffee shop */
.app--miniapp { background: #F4F1EC; color: #241A12; }
.tg-bar {
  flex: none; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center;
  padding: 2px 12px 10px; font-size: 14px; background: #F4F1EC; position: relative; z-index: 4;
}
.tg-bar__close { color: #2AABEE; font-weight: 500; }
.tg-bar__title { text-align: center; font-weight: 600; line-height: 1.15; }
.tg-bar__title small { display: block; font-size: 11px; font-weight: 400; color: #8b8178; }
.tg-bar__more { justify-self: end; width: 26px; height: 26px; border-radius: 50%; background: rgba(36, 26, 18, .07); display: grid; place-items: center; }
.tg-bar__more svg { width: 14px; }
.scroller { flex: 1; overflow: hidden; position: relative; }
.scroller__inner { padding: 4px 14px 90px; will-change: transform; }
.ma-hello { font: 700 21px/1.15 var(--font-ui); letter-spacing: -.02em; margin: 6px 2px 4px; }
.ma-sub { font-size: 12.5px; color: #85786C; margin: 0 2px 14px; }
.ma-card {
  border-radius: 18px; padding: 14px; color: #FBEFE0; margin-bottom: 16px;
  background: radial-gradient(120% 90% at 100% 0%, #8A5A36 0%, rgba(138, 90, 54, 0) 60%), linear-gradient(135deg, #3A261A, #22160E);
  box-shadow: 0 10px 24px -12px rgba(34, 22, 14, .7);
}
.ma-card__row { display: flex; justify-content: space-between; align-items: baseline; }
.ma-card__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ma-card__val { font: 700 22px/1 var(--font-ui); }
.ma-cups { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 12px 0 8px; }
.ma-cups i { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(251, 239, 224, .5); }
.ma-cups i.on { background: #E8B07A; border-color: #E8B07A; }
.ma-card__hint { font-size: 11.5px; opacity: .8; }
.ma-chips { display: flex; gap: 6px; margin-bottom: 14px; }
.ma-chips span { padding: 7px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 500; background: #fff; box-shadow: 0 0 0 1px rgba(36, 26, 18, .08); }
.ma-chips span.on { background: #241A12; color: #F4F1EC; box-shadow: none; }
.ma-item {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center;
  padding: 10px; border-radius: 16px; background: #fff; margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(36, 26, 18, .06);
}
.ma-cup {
  width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bg, #EBDDCB);
}
.ma-cup::before {
  content: ""; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--top, #F3E1C8) 0 30%, var(--mid, #C08A58) 52%, var(--rim, #7B4E2E) 70%, #fff 72% 84%, rgba(0, 0, 0, .1) 86%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}
.ma-item__name { font-weight: 600; font-size: 14px; }
.ma-item__desc { font-size: 11.5px; color: #8B7E72; }
.ma-item__price { font-weight: 600; font-size: 13px; margin-top: 3px; }
.ma-add {
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: #241A12; color: #fff; display: grid; place-items: center;
  transition: transform .2s var(--ease-spring);
}
.ma-add:active { transform: scale(.85); }
.ma-add svg { width: 14px; height: 14px; }
.ma-promo {
  margin: 14px 0 10px; padding: 14px; border-radius: 16px;
  background: linear-gradient(120deg, #F5D6A9, #EFB97F); color: #3A2414;
}
.ma-promo b { display: block; font-size: 15px; }
.ma-promo span { font-size: 12px; }
.tg-main {
  position: absolute; left: 12px; right: 12px; bottom: 22px; z-index: 6;
  height: 48px; border-radius: 14px; border: 0;
  background: #2AABEE; color: #fff; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 20px -8px rgba(42, 171, 238, .9);
}
.tg-main .count { min-width: 22px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .25); font-size: 12px; display: grid; place-items: center; padding: 0 6px; }
.tg-main.bump { animation: bump .4s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.04); } }
.home-ind { position: absolute; bottom: 7px; left: 50%; translate: -50% 0; width: 110px; height: 4px; border-radius: 3px; background: rgba(0, 0, 0, .8); z-index: 7; }
.app--ios .home-ind, .app--game .home-ind { background: rgba(255, 255, 255, .85); }

/* Loyalty card: wallet-style, flips to a QR code */
.ma-loyal { perspective: 900px; margin: 2px 0 6px; }
.ma-loyal__card {
  position: relative; height: 156px; transform-style: preserve-3d; cursor: pointer;
  transition: transform .75s cubic-bezier(.3, 1.25, .5, 1);
}
.ma-loyal.is-flipped .ma-loyal__card { transform: rotateY(180deg); }
.ma-loyal__face {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; padding: 13px 14px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ma-loyal__front {
  display: grid; grid-template-rows: auto 1fr auto; color: #F7E9D4;
  background:
    radial-gradient(120% 90% at 105% -10%, rgba(232, 176, 122, .5), transparent 55%),
    radial-gradient(90% 80% at -10% 110%, rgba(140, 70, 34, .55), transparent 60%),
    repeating-radial-gradient(circle at 115% 125%, rgba(255, 236, 205, .07) 0 1px, transparent 1.2px 8px),
    linear-gradient(140deg, #43291A 0%, #24150D 60%, #1A0F09 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, .1), 0 16px 30px -14px rgba(30, 18, 11, .85);
}
.ma-loyal__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ma-loyal__brand { display: inline-flex; align-items: center; gap: 7px; font: italic 700 19px/1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.ma-loyal__brand small { font: 500 9px/1.2 var(--font-ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .65; display: block; margin-top: 3px; }
.ma-loyal__logo { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #F6DC9A, #B98A3A); position: relative; flex: none; }
.ma-loyal__logo svg { width: 22px; height: 22px; display: block; }
.ma-loyal__tier {
  padding: 4px 8px; border-radius: 7px; font: 800 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #3B2416;
  background: linear-gradient(110deg, #C9963F, #F7DE9E 40%, #B98A3A 65%, #F1D08A);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
}
.ma-loyal__stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 4px; align-content: center; justify-items: center; }
.ma-loyal__stamps i {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(247, 233, 212, .28);
}
.ma-loyal__stamps i svg { position: absolute; inset: 3px; width: 18px; height: 18px; }
.ma-loyal__stamps i .b { fill: none; stroke: rgba(247, 233, 212, .3); stroke-width: 1.4; }
.ma-loyal__stamps i .c { fill: none; stroke: rgba(247, 233, 212, .3); stroke-width: 1.3; stroke-linecap: round; }
.ma-loyal__stamps i.on { background: radial-gradient(circle at 35% 30%, #FBE7B5, #D9A653 60%, #A9762F); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.ma-loyal__stamps i.on .b { fill: #3E2414; stroke: none; }
.ma-loyal__stamps i.on .c { stroke: #E2B472; }
.ma-loyal__stamps i.pop { animation: ma-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ma-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ma-loyal__stamps i.gift { box-shadow: inset 0 0 0 1.5px rgba(247, 222, 158, .7); background: rgba(247, 222, 158, .1); }
.ma-loyal__stamps i.gift .g { fill: none; stroke: #F7DE9E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ma-loyal__stamps i.gift.on .g { stroke: #3E2414; }
.ma-loyal__stamps i.gift.on { background: radial-gradient(circle at 35% 30%, #FBE7B5, #D9A653 60%, #A9762F); }
.ma-loyal__foot { font-size: 11px; color: rgba(247, 233, 212, .7); }
.ma-loyal__foot b { color: #F7E9D4; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ma-loyal__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 215, .2) 48%, rgba(255, 255, 255, .05) 52%, transparent 62%);
  transform: translateX(-120%); animation: ma-shine 5.5s ease-in-out infinite;
}
@keyframes ma-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.ma-loyal__back {
  transform: rotateY(180deg); background: #F7F0E5; color: #2A1A10;
  display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center;
  box-shadow: inset 0 0 0 1px rgba(42, 26, 16, .08), 0 16px 30px -14px rgba(30, 18, 11, .5);
}
.ma-qr { width: 96px; height: 96px; padding: 7px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); display: block; }
.ma-loyal__backtext b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.ma-loyal__backtext small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: #7A6656; }
.ma-loyal__backtext span { display: block; margin-top: 8px; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; color: #4A3628; }
.ma-loyal__hint { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 2px 14px; font-size: 11px; color: #8B7E72; white-space: nowrap; }
.ma-loyal__hint span:last-child { display: inline-flex; align-items: center; gap: 4px; color: #2AABEE; font-weight: 500; }
.ma-toast {
  position: absolute; z-index: 8; left: 50%; bottom: 82px; translate: -50% 12px; opacity: 0;
  padding: 9px 14px; border-radius: 14px; background: rgba(30, 20, 13, .92); color: #F7E9D4; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: opacity .3s, translate .3s;
}
.ma-toast.is-on { opacity: 1; translate: -50% 0; }

/* ---- css/site-demo.css ---- */
/* ==========================================================================
   Демо-сайт в ноутбуке: школа «Лекало», курс «Продуктовый дизайнер с нуля».
   Макет 1280 px, масштаб и transform ставит оболочка. Все цвета литералами.
   Шрифты: Unbounded (заголовки), Onest (текст), Georgia (курсив-акцент).
   ========================================================================== */

.site-demo {
  --cs-paper: #F2EDE1;
  --cs-paper-2: #E9E2D0;
  --cs-card: #FBF8EF;
  --cs-ink: #16140F;
  --cs-ink-2: #4F4A3E;
  --cs-ink-3: #6A6457;
  --cs-line: #D5CDB9;
  --cs-hot: #F2522E;
  --cs-hot-t: #C4350F;
  --cs-sun: #F3D34A;
  --cs-sage: #BCD3B4;
  --cs-sky: #BBD6E6;
  --cs-display: "Unbounded", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --cs-body: "Onest", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --cs-serif: Georgia, "Times New Roman", serif;
  /* Зерно: SVG feTurbulence в data: URI, тёмное для светлых фонов и светлое для тёмных */
  --cs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --cs-grain-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .86 0 0 0 1.8 -.98'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");

  position: relative;
  width: 1280px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--cs-paper);
  color: var(--cs-ink);
  font: 400 17px/1.5 var(--cs-body);
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.site-demo *, .site-demo *::before, .site-demo *::after { box-sizing: border-box; }
.site-demo svg { display: block; max-width: none; }

/* Зерно поверх всей страницы: серый шум в режиме overlay (не мутит цвета) + светлые крапинки на тёмном */
.cs-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  background: var(--cs-grain-l) 0 0 / 240px 240px; opacity: .38;
}
.cs-dark { position: relative; }
@supports (mix-blend-mode: overlay) {
  .site-demo::after {
    content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none;
    background: var(--cs-grain) 0 0 / 240px 240px; opacity: .42; mix-blend-mode: overlay;
  }
  .cs-grainy::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
    background: var(--cs-grain) 0 0 / 240px 240px; opacity: .4; mix-blend-mode: overlay;
  }
}

/* --------------------------------------------------------------------------
   Общее: кнопки, подписи, заголовки
   -------------------------------------------------------------------------- */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 22px; margin: 0;
  border: 2px solid var(--cs-ink); border-radius: 14px; background: transparent;
  font: 600 17px/1 var(--cs-body); color: var(--cs-ink); white-space: nowrap; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
}
.cs-btn--sm { height: 44px; padding: 0 20px; font-size: 16px; }
.cs-btn--lg { height: 60px; padding: 0 26px 0 28px; font-size: 18px; }
.cs-btn--ink { background: var(--cs-ink); color: var(--cs-paper); }
.cs-btn--ink:hover { background: var(--cs-hot); color: var(--cs-ink); }
.cs-btn--hot { background: var(--cs-hot); color: var(--cs-ink); box-shadow: 4px 4px 0 var(--cs-ink); }
.cs-btn--hot:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cs-ink); }
.cs-btn--hot:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--cs-ink); }
.cs-btn--line:hover { background: var(--cs-sun); }
.cs-btn:focus-visible { outline: 3px solid var(--cs-sun); outline-offset: 3px; }
.cs-btn__ar {
  display: grid; place-items: center; width: 32px; height: 32px; margin-right: -8px; border-radius: 50%;
  background: var(--cs-ink); color: var(--cs-paper);
}
.cs-btn__ar--hot { background: var(--cs-hot); color: var(--cs-ink); }
.cs-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-btn__pl { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -10px; border-radius: 50%; background: var(--cs-ink); }
.cs-btn__pl::before { content: ""; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--cs-paper); }

.cs-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 600 14px/1 var(--cs-body); letter-spacing: .1em; text-transform: uppercase; color: var(--cs-ink-2);
}
.cs-eyebrow::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--cs-hot); flex: none; }
.cs-dark .cs-eyebrow { color: #C9C2AE; }

.cs-h2 { font: 600 42px/1.1 var(--cs-display); letter-spacing: -.045em; margin-top: 18px; text-wrap: balance; }
.cs-sec { position: relative; padding: 64px 64px; }
.cs-sec__lead { font: 400 19px/1.5 var(--cs-body); color: var(--cs-ink-2); margin: 0; max-width: 430px; }

/* --------------------------------------------------------------------------
   Первый экран: ровно 1280 × 787
   -------------------------------------------------------------------------- */
.cs-first { position: relative; height: 787px; display: flex; flex-direction: column; background: var(--cs-paper); }

.cs-nav { flex: none; height: 80px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; }
.cs-logo { display: flex; align-items: center; gap: 12px; }
.cs-logo__mark { position: relative; display: block; width: 30px; height: 30px; flex: none; }
.cs-logo__mark::before { content: ""; position: absolute; inset: 0; border-radius: 15px 15px 0 0; background: var(--cs-ink); }
.cs-logo__mark::after { content: ""; position: absolute; left: 8px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--cs-hot); }
.cs-logo__mark--on-dark::before { background: var(--cs-paper); }
.cs-logo__word { font: 700 24px/1 var(--cs-display); letter-spacing: -.05em; }
.cs-nav__links { display: flex; gap: 38px; font: 500 17px/1 var(--cs-body); color: var(--cs-ink); }
.cs-nav__links > span { position: relative; }
.cs-nav__links > span.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 3px; border-radius: 2px; background: var(--cs-hot); }
.cs-nav__cta { display: flex; align-items: center; gap: 26px; }
.cs-nav__login { font: 600 17px/1 var(--cs-body); }

.cs-hero { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: 1fr 520px; column-gap: 20px; padding: 0 64px; align-items: center; }
.cs-hero__copy { position: relative; z-index: 3; padding-bottom: 6px; }

.cs-h1 { margin-top: 20px; font: 600 58px/1.04 var(--cs-display); letter-spacing: -.05em; }
.cs-h1__l { display: block; white-space: nowrap; }
.cs-h1__l--serif {
  position: relative; width: max-content; padding-bottom: 10px; margin: 2px 0 0;
  font: italic 700 86px/.96 var(--cs-serif); letter-spacing: -.035em; color: var(--cs-hot-t);
}
.cs-scribble { position: absolute; left: 0; bottom: 0; width: 100%; height: 18px; fill: none; stroke: var(--cs-ink); stroke-width: 5; stroke-linecap: round; }
.cs-hl { position: relative; isolation: isolate; white-space: nowrap; }
.cs-hl::before { content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; top: 12%; bottom: -2%; border-radius: 6px; background: var(--cs-sun); transform: rotate(-1.6deg); }

.cs-lead { margin: 18px 0 0; max-width: 560px; font: 400 18px/1.5 var(--cs-body); color: var(--cs-ink-2); }
.cs-cta { display: flex; gap: 18px; margin-top: 24px; }
.cs-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 500 15px/1.3 var(--cs-body); color: var(--cs-ink-2); }
.cs-tick { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cs-sage); }
.cs-tick::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid var(--cs-ink); border-width: 0 2px 2px 0; transform: rotate(40deg); }

/* Сцена справа */
.cs-stage { position: relative; align-self: stretch; z-index: 2; }
.cs-disc { position: absolute; left: 10px; top: 8px; width: 100px; height: 100px; border-radius: 50%; background: var(--cs-sage); }
.cs-arch {
  position: absolute; right: 0; bottom: 0; width: 372px; height: 506px; overflow: hidden; border-radius: 186px 186px 0 0;
  background:
    repeating-radial-gradient(circle at 50% 44%, transparent 0 30px, rgba(22, 20, 15, .15) 30px 32px),
    radial-gradient(120% 80% at 50% 100%, #FF7B4E 0, #F2522E 52%, #E3441F 100%);
}

.cs-player {
  position: absolute; left: 0; top: 62px; width: 458px; overflow: hidden; z-index: 3;
  background: var(--cs-card); border: 2px solid var(--cs-ink); border-radius: 20px;
  box-shadow: 8px 8px 0 var(--cs-ink); transform: rotate(-2.4deg);
}
.cs-player__screen {
  position: relative; height: 252px; background-color: #25231C;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1.2px, transparent 1.5px); background-size: 20px 20px;
}
.cs-cv { position: absolute; inset: 0; }
.cs-player__cap { position: absolute; left: 18px; top: 14px; right: 18px; color: var(--cs-paper); }
.cs-player__k { display: block; font: 600 12px/1 var(--cs-body); letter-spacing: .1em; text-transform: uppercase; color: var(--cs-sun); }
.cs-player__t { display: block; margin-top: 8px; font: 500 16px/1.25 var(--cs-display); letter-spacing: -.03em; max-width: 330px; }

.cs-ph { position: absolute; left: 26px; top: 84px; width: 96px; height: 190px; padding: 10px; border-radius: 16px; background: var(--cs-paper); border: 2px solid #3A372E; }
.cs-ph i { display: block; }
.cs-ph__bar { height: 26px; margin-bottom: 8px; border-radius: 6px; background: var(--cs-hot); }
.cs-ph__row { display: flex; align-items: center; gap: 6px; height: 22px; margin-bottom: 6px; }
.cs-ph__row i:first-child { width: 18px; height: 18px; border-radius: 50%; background: var(--cs-sun); flex: none; }
.cs-ph__row i:last-child { flex: 1; height: 8px; border-radius: 4px; background: var(--cs-line); }
.cs-ph__btn { height: 22px; margin-top: 10px; border-radius: 6px; background: var(--cs-ink); }

.cs-map { position: absolute; left: 152px; top: 106px; width: 170px; height: 92px; border: 1.5px dashed rgba(242, 237, 225, .7); }
.cs-map svg { width: 170px; height: 92px; fill: none; stroke: var(--cs-sun); stroke-width: 3; stroke-linecap: round; position: absolute; left: -1.5px; top: -1.5px; }
.cs-map svg circle { fill: var(--cs-paper); stroke: var(--cs-hot); stroke-width: 3; }
.cs-map__h { position: absolute; width: 8px; height: 8px; background: var(--cs-paper); border: 1.5px solid var(--cs-hot); }
.cs-map__h--a { left: -5px; top: -5px; } .cs-map__h--b { right: -5px; top: -5px; }
.cs-map__h--c { left: -5px; bottom: -5px; } .cs-map__h--d { right: -5px; bottom: -5px; }

.cs-sticky {
  position: absolute; left: 340px; top: 74px; width: 100px; height: 96px; padding: 13px 12px; transform: rotate(5deg);
  background: var(--cs-sun); color: var(--cs-ink); font: italic 400 16px/1.15 var(--cs-serif);
  box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .5);
}
.cs-cur { position: absolute; display: flex; align-items: flex-start; }
.cs-cur svg { width: 18px; height: 22px; fill: var(--cs-paper); stroke: var(--cs-ink); stroke-width: 1.6; stroke-linejoin: round; flex: none; }
.cs-cur__tag { margin: 14px 0 0 -2px; padding: 4px 9px; border-radius: 4px 10px 10px 10px; font: 600 12px/1.2 var(--cs-body); color: var(--cs-ink); }
.cs-cur--a { left: 296px; top: 156px; } .cs-cur--a .cs-cur__tag { background: var(--cs-sky); }
.cs-cur--b { left: 92px; top: 204px; } .cs-cur--b .cs-cur__tag { background: var(--cs-hot); }

.cs-player__bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; background: var(--cs-card); }
.cs-pause { display: flex; gap: 4px; flex: none; }
.cs-pause i { width: 4px; height: 16px; border-radius: 1px; background: var(--cs-ink); }
.cs-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--cs-line); }
.cs-track i { display: block; width: 38%; height: 100%; border-radius: 3px; background: var(--cs-hot); }
.cs-track::after { content: ""; position: absolute; left: 38%; top: -5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--cs-ink); border: 3px solid var(--cs-card); box-shadow: 0 0 0 1.5px var(--cs-ink); }
.cs-time { font: 600 14px/1 var(--cs-body); font-variant-numeric: tabular-nums; }
.cs-speed { padding: 4px 7px; border: 1.5px solid var(--cs-ink); border-radius: 6px; font: 700 12px/1 var(--cs-body); }

.cs-task {
  position: absolute; left: 8px; top: 366px; width: 266px; padding: 14px 16px 12px; z-index: 4;
  background: var(--cs-card); border: 2px solid var(--cs-ink); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--cs-ink); transform: rotate(1.8deg);
}
.cs-task__k { font: 600 12px/1 var(--cs-body); letter-spacing: .08em; text-transform: uppercase; color: var(--cs-ink-3); }
.cs-task__t { margin: 9px 0 8px; font: 600 15px/1.25 var(--cs-display); letter-spacing: -.035em; }
.cs-chk { display: flex; align-items: center; gap: 10px; padding: 5px 0; font: 500 15px/1.2 var(--cs-body); }
.cs-chk i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cs-ink); }
.cs-chk.is-done i { background: var(--cs-ink); }
.cs-chk.is-done i::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 9px; border: solid var(--cs-paper); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.cs-chk.is-done span { color: var(--cs-ink-3); }
.cs-chk.is-now i { border-color: var(--cs-hot); background: conic-gradient(var(--cs-hot) 0 62%, transparent 0); }
.cs-chk.is-now span { font-weight: 600; }
.cs-chk b { margin-left: auto; font: 600 13px/1 var(--cs-body); color: var(--cs-hot-t); }

.cs-bubble {
  position: absolute; right: 2px; top: 400px; width: 232px; z-index: 4; display: flex; gap: 10px; padding: 12px 14px 12px 12px;
  background: var(--cs-sky); border: 2px solid var(--cs-ink); border-radius: 18px 18px 18px 4px; box-shadow: 5px 5px 0 var(--cs-ink);
}
.cs-bubble__n { display: block; font: 700 13px/1.2 var(--cs-body); }
.cs-bubble__t { display: block; margin-top: 3px; font: 400 15px/1.3 var(--cs-body); }

.cs-av {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  font: 700 13px/1 var(--cs-display); letter-spacing: -.02em; color: var(--cs-ink);
}
.cs-av--sun { background: linear-gradient(140deg, #F6E37A, #F2A65A); }

.cs-sticker {
  position: absolute; right: -6px; top: 0; z-index: 5; width: 128px; height: 128px; border-radius: 50%;
  background: var(--cs-sun); border: 2px solid var(--cs-ink); transform: rotate(10deg);
}
.cs-sticker svg { width: 124px; height: 124px; }
.cs-sticker text { font: 700 12.5px var(--cs-body); letter-spacing: .1em; text-transform: uppercase; fill: var(--cs-ink); }
.cs-sticker circle { fill: var(--cs-ink); }
.cs-sticker__ar { fill: none; stroke: var(--cs-sun); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cs-stats { flex: none; height: 134px; padding: 0 64px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: var(--cs-ink); color: var(--cs-paper); z-index: 1; }
.cs-stat { display: flex; flex-direction: column; gap: 8px; padding-left: 28px; border-left: 1px solid rgba(242, 237, 225, .2); }
.cs-stat:first-child { padding-left: 0; border-left: 0; }
.cs-stat__n { font: 600 46px/1 var(--cs-display); letter-spacing: -.05em; }
.cs-u { color: var(--cs-hot); }
.cs-stat__t { font: 400 16px/1.3 var(--cs-body); color: #C9C2AE; }

/* --------------------------------------------------------------------------
   Доверие: логотипы (вымышленные)
   -------------------------------------------------------------------------- */
.cs-logos { display: flex; align-items: center; gap: 56px; height: 72px; padding: 0 64px; border-bottom: 1.5px solid var(--cs-line); }
.cs-logos__t { flex: none; width: 170px; font: 500 15px/1.35 var(--cs-body); color: var(--cs-ink-3); }
.cs-logos__row { flex: 1; display: flex; align-items: center; justify-content: space-between; color: #6A6455; }
.cs-lg { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cs-lg--a { font: 700 22px/1 var(--cs-display); letter-spacing: -.05em; }
.cs-lg--a i { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; background: var(--cs-sun); box-shadow: inset 0 0 0 2px #6A6455; }
.cs-lg--b { font: italic 700 26px/1 var(--cs-serif); letter-spacing: -.02em; }
.cs-lg--c { font: 800 21px/1 var(--cs-body); letter-spacing: .24em; }
.cs-lg--d { font: 500 21px/1 var(--cs-display); letter-spacing: -.06em; }
.cs-lg--e { font: 700 24px/1 var(--cs-serif); }
.cs-lg--e i { border-style: solid; border-width: 0 0 18px 13px; border-color: transparent transparent #6A6455 transparent; }
.cs-lg--f { font: 600 26px/1 var(--cs-body); letter-spacing: -.05em; }

/* --------------------------------------------------------------------------
   Программа
   -------------------------------------------------------------------------- */
.cs-program { display: grid; grid-template-columns: 324px 1fr; column-gap: 48px; align-items: start; padding-top: 52px; padding-bottom: 52px; }
.cs-program .cs-h2 { font-size: 36px; }
.cs-program .cs-sec__lead { margin-top: 16px; font-size: 18px; }
.cs-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.cs-facts__c { padding: 14px 16px 15px; border: 2px solid var(--cs-ink); border-radius: 18px 18px 18px 4px; background: var(--cs-card); }
.cs-facts__n { display: block; font: 600 22px/1 var(--cs-display); letter-spacing: -.05em; color: var(--cs-hot-t); }
.cs-facts__v { display: block; margin-top: 8px; font: 400 14px/1.3 var(--cs-body); color: var(--cs-ink-2); }

.cs-mods { border-top: 2px solid var(--cs-ink); border-bottom: 2px solid var(--cs-ink); }
.cs-mod { display: grid; grid-template-columns: 44px 268px 1fr 76px 30px; align-items: center; column-gap: 10px; padding: 13px 0; }
.cs-mod + .cs-mod { border-top: 1px solid var(--cs-line); }
.cs-mod__n { font: 500 17px/1 var(--cs-display); color: var(--cs-ink-3); letter-spacing: -.04em; }
.cs-mod__t { font: 600 19px/1.2 var(--cs-display); letter-spacing: -.045em; white-space: nowrap; }
.cs-mod__d { font: 400 16px/1.35 var(--cs-body); color: var(--cs-ink-2); }
.cs-mod__w { font: 600 15px/1 var(--cs-body); text-align: right; white-space: nowrap; }
.cs-mod__i { position: relative; justify-self: end; width: 30px; height: 30px; border: 1.5px solid var(--cs-ink); border-radius: 50%; }
.cs-mod__i::before, .cs-mod__i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--cs-ink); transform: translate(-50%, -50%); }
.cs-mod__i::before { width: 12px; height: 2px; }
.cs-mod__i::after { width: 2px; height: 12px; }
.cs-mod--open { margin: 6px -20px; padding: 14px 20px 16px; border-radius: 22px; background: var(--cs-sun); border-top: 0; }
.cs-mod--open + .cs-mod { border-top: 0; }
.cs-mod--open .cs-mod__n, .cs-mod--open .cs-mod__d { color: var(--cs-ink); }
.cs-mod--open .cs-mod__i { background: var(--cs-ink); }
.cs-mod--open .cs-mod__i::before { background: var(--cs-sun); }
.cs-mod--open .cs-mod__i::after { display: none; }
.cs-mod__more { grid-column: 2 / 5; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 24px; margin-top: 10px; padding-top: 12px; border-top: 1.5px solid rgba(22, 20, 15, .3); }
.cs-mod__more span { position: relative; padding-left: 20px; font: 500 15px/1.3 var(--cs-body); }
.cs-mod__more span::before { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 9px 9px 0 9px; background: var(--cs-hot); }

/* --------------------------------------------------------------------------
   Работы студентов
   -------------------------------------------------------------------------- */
.cs-works { background: var(--cs-ink); color: var(--cs-paper); padding-top: 46px; padding-bottom: 42px; }
.cs-works .cs-sec__lead { color: #C9C2AE; max-width: 390px; font-size: 18px; }
.cs-works__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 28px; }
.cs-works__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 24px; }
.cs-work__art { position: relative; height: 256px; overflow: hidden; border-radius: 28px; }
.cs-work__t { margin-top: 14px; font: 600 18px/1.2 var(--cs-display); letter-spacing: -.04em; }
.cs-work__m { margin-top: 5px; font: 400 15px/1.3 var(--cs-body); color: #B7B09C; }

/* A: мобильное приложение */
.cs-work__art--a { background: var(--cs-sage); }
.cs-app {
  position: absolute; left: 196px; top: 22px; width: 188px; height: 300px; padding: 11px 11px;
  background: var(--cs-card); border: 6px solid var(--cs-ink); border-radius: 34px 34px 0 0; color: var(--cs-ink);
}
.cs-app__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cs-app__h { font: 600 12px/1 var(--cs-display); letter-spacing: -.03em; }
.cs-app__me { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(140deg, var(--cs-hot), var(--cs-sun)); }
.cs-app__days { display: flex; gap: 5px; margin-bottom: 8px; }
.cs-app__days span { flex: 1; padding: 5px 0; border-radius: 8px; background: var(--cs-paper-2); text-align: center; font: 600 12px/1 var(--cs-body); }
.cs-app__days span.on { background: var(--cs-hot); }
.cs-app__doc { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 8px; border: 1.5px solid var(--cs-ink); border-radius: 12px; }
.cs-app__ph { width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(140deg, var(--cs-sky), var(--cs-sage)); }
.cs-app__n { display: block; font: 600 12px/1.2 var(--cs-body); }
.cs-app__s { display: block; font: 400 11px/1.2 var(--cs-body); color: var(--cs-ink-3); margin-top: 2px; }
.cs-app__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; }
.cs-app__slots span { padding: 6px 0; border: 1.5px solid var(--cs-line); border-radius: 8px; text-align: center; font: 600 11px/1 var(--cs-body); }
.cs-app__slots span.on { background: var(--cs-ink); border-color: var(--cs-ink); color: var(--cs-paper); }
.cs-app__slots span.off { color: #B5AE9B; text-decoration: line-through; }
.cs-app__btn { padding: 9px 0; border-radius: 10px; background: var(--cs-hot); text-align: center; font: 700 12px/1 var(--cs-body); }
.cs-toast {
  position: absolute; left: 22px; top: 96px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px;
  background: var(--cs-card); border: 2px solid var(--cs-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--cs-ink); transform: rotate(-4deg); color: var(--cs-ink);
}
.cs-toast__ok { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--cs-hot); }
.cs-toast__ok::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 12px; border: solid var(--cs-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.cs-toast__t { display: block; font: 700 14px/1.2 var(--cs-body); }
.cs-toast__d { display: block; font: 400 13px/1.2 var(--cs-body); color: var(--cs-ink-2); }

/* B: панель управления, арка сверху */
.cs-work__art--b { background: var(--cs-sun); border-radius: 160px 160px 28px 28px; }
.cs-dash { position: absolute; left: 30px; right: 30px; top: 66px; height: 260px; padding: 14px 18px; background: var(--cs-card); border: 2px solid var(--cs-ink); border-radius: 18px; color: var(--cs-ink); box-shadow: 6px 6px 0 var(--cs-ink); }
.cs-dash__top { display: flex; justify-content: space-between; font: 600 13px/1 var(--cs-body); color: var(--cs-ink-2); }
.cs-dash__up { color: #1F7A3F; }
.cs-dash__kpi { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; }
.cs-dash__n { font: 700 36px/1 var(--cs-display); letter-spacing: -.05em; }
.cs-dash__l { font: 400 14px/1.2 var(--cs-body); color: var(--cs-ink-2); }
.cs-dash__bars { display: flex; align-items: flex-end; gap: 8px; height: 68px; margin-top: 12px; padding-bottom: 0; border-bottom: 2px solid var(--cs-ink); }
.cs-dash__bars i { flex: 1; border-radius: 5px 5px 0 0; background: var(--cs-ink); }
.cs-dash__bars i.hot { background: var(--cs-hot); }
.cs-dash__don { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 600 14px/1 var(--cs-body); }
.cs-dash__don i { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--cs-hot) 0 62%, var(--cs-line) 0); -webkit-mask: radial-gradient(circle, transparent 0 6px, #000 6.5px); mask: radial-gradient(circle, transparent 0 6px, #000 6.5px); }

/* C: дизайн-система */
.cs-work__art--c { background: var(--cs-hot); color: var(--cs-ink); }
.cs-ds__aa { position: absolute; left: 24px; top: 4px; font: italic 700 96px/1 var(--cs-serif); letter-spacing: -.04em; }
.cs-ds__sw { position: absolute; right: 22px; top: 24px; display: grid; grid-template-columns: repeat(3, 28px); gap: 8px; }
.cs-ds__sw i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cs-ink); }
.cs-ds__sw i:nth-child(2) { border-radius: 8px; }
.cs-ds__panel { position: absolute; left: 22px; right: 22px; top: 118px; height: 200px; padding: 14px 16px; background: var(--cs-card); border: 2px solid var(--cs-ink); border-radius: 20px; }
.cs-ds__btns { display: flex; gap: 8px; }
.cs-ds__b { padding: 11px 13px; border: 2px solid var(--cs-ink); border-radius: 10px; font: 600 14px/1 var(--cs-body); }
.cs-ds__b--ink { background: var(--cs-ink); color: var(--cs-paper); }
.cs-ds__b--off { border-color: var(--cs-line); color: #A8A190; }
.cs-ds__row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cs-ds__tg { position: relative; width: 44px; height: 24px; flex: none; border-radius: 12px; border: 2px solid var(--cs-ink); }
.cs-ds__tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--cs-ink); }
.cs-ds__tg.on { background: var(--cs-sun); }
.cs-ds__tg.on::after { left: 23px; }
.cs-ds__in { flex: 1; padding: 9px 12px; border: 2px solid var(--cs-ink); border-radius: 10px; font: 400 14px/1 var(--cs-body); color: var(--cs-ink-3); }

/* --------------------------------------------------------------------------
   Преподаватели
   -------------------------------------------------------------------------- */
.cs-team { display: grid; grid-template-columns: 420px 1fr; column-gap: 56px; align-items: center; background: var(--cs-paper-2); padding-top: 40px; padding-bottom: 40px; }
.cs-team .cs-sec__lead { margin-top: 16px; font-size: 18px; max-width: 380px; }
.cs-team .cs-h2 { font-size: 34px; }
.cs-team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-tc { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--cs-card); border-radius: 22px; box-shadow: 0 1px 0 rgba(22, 20, 15, .06); }
.cs-tc .cs-av { width: 72px; height: 72px; font-size: 23px; }
.cs-tc__n { display: block; font: 600 16px/1.2 var(--cs-display); letter-spacing: -.04em; }
.cs-tc__r { display: block; margin-top: 5px; font: 400 14px/1.3 var(--cs-body); color: var(--cs-ink-2); }
.cs-tc__f { display: block; margin-top: 6px; font: 600 13px/1.2 var(--cs-body); color: var(--cs-hot-t); }
.cs-av--1 { border-radius: 50%; background: linear-gradient(140deg, #F2522E, #F6B04A); }
.cs-av--2 { border-radius: 42px 42px 8px 8px; background: linear-gradient(140deg, #9CC5A1, #DDEBB4); }
.cs-av--3 { border-radius: 26px; background: linear-gradient(140deg, #F3D34A, #F2A65A); }
.cs-av--4 { border-radius: 42px 8px 42px 8px; background: linear-gradient(140deg, #8FB8D8, #D3E6EC); }
.cs-av--5 { width: 56px; height: 56px; font-size: 18px; border-radius: 50%; background: linear-gradient(140deg, #F2522E, #F6B04A); }

/* --------------------------------------------------------------------------
   Отзыв
   -------------------------------------------------------------------------- */
.cs-quote { position: relative; display: grid; grid-template-columns: 1fr 330px; column-gap: 56px; align-items: center; padding: 34px 64px 38px; background: var(--cs-sun); overflow: hidden; }
.cs-quote__main { position: relative; padding-left: 84px; }
.cs-quote__mark { position: absolute; left: 0; top: -4px; font: 700 140px/1 var(--cs-serif); color: var(--cs-hot-t); }
.cs-quote__t { position: relative; margin: 0; font: italic 400 27px/1.3 var(--cs-serif); letter-spacing: -.01em; text-wrap: pretty; }
.cs-quote__by { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.cs-quote__n { display: block; font: 600 16px/1.2 var(--cs-display); letter-spacing: -.04em; }
.cs-quote__r { display: block; margin-top: 4px; font: 400 15px/1.3 var(--cs-body); color: var(--cs-ink-2); }
.cs-result { position: relative; z-index: 6; border: 2px solid var(--cs-ink); border-radius: 22px; background: var(--cs-card); box-shadow: 8px 8px 0 var(--cs-ink); transform: rotate(2deg); }
.cs-result__r { padding: 10px 22px 11px; }
.cs-result__r + .cs-result__r { border-top: 1.5px dashed var(--cs-ink-3); }
.cs-result__k { display: block; font: 600 12px/1 var(--cs-body); letter-spacing: .1em; text-transform: uppercase; color: var(--cs-ink-3); }
.cs-result__r:nth-child(2) .cs-result__k { color: var(--cs-hot-t); }
.cs-result__v { display: block; margin-top: 6px; font: 600 17px/1.2 var(--cs-display); letter-spacing: -.04em; }
.cs-result__d { display: block; margin-top: 6px; font: 500 15px/1.2 var(--cs-body); color: var(--cs-ink-2); }

/* --------------------------------------------------------------------------
   Тарифы
   -------------------------------------------------------------------------- */
.cs-price { padding-top: 40px; padding-bottom: 42px; }
.cs-price__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 26px; }
.cs-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.cs-plan { position: relative; display: flex; flex-direction: column; padding: 22px 26px 24px; background: var(--cs-card); border: 2px solid var(--cs-ink); border-radius: 26px; }
.cs-plan--top { margin: -12px 0; padding-top: 34px; padding-bottom: 36px; background: var(--cs-ink); color: var(--cs-paper); box-shadow: 8px 8px 0 var(--cs-hot); }
.cs-plan__flag { position: absolute; left: 24px; top: -15px; padding: 8px 14px; border: 2px solid var(--cs-ink); border-radius: 8px; background: var(--cs-sun); color: var(--cs-ink); font: 700 13px/1 var(--cs-body); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2deg); z-index: 6; }
.cs-plan__n { font: 600 20px/1.2 var(--cs-display); letter-spacing: -.045em; }
.cs-plan__s { margin-top: 5px; font: 400 16px/1.4 var(--cs-body); color: var(--cs-ink-2); }
.cs-plan--top .cs-plan__s { color: #C9C2AE; }
.cs-plan__p { margin-top: 14px; font: 600 20px/1 var(--cs-display); letter-spacing: -.04em; }
.cs-plan__p span { font-size: 42px; letter-spacing: -.055em; }
.cs-plan__i { margin: 6px 0 12px; padding-bottom: 13px; border-bottom: 1.5px solid var(--cs-line); font: 500 15px/1 var(--cs-body); color: var(--cs-ink-3); }
.cs-plan--top .cs-plan__i { border-color: rgba(242, 237, 225, .22); color: #B7B09C; }
.cs-li { position: relative; padding: 3px 0 3px 30px; font: 400 16px/1.35 var(--cs-body); }
.cs-li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 13px; border: solid var(--cs-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.cs-plan--top .cs-li::before { border-color: var(--cs-sun); }
.cs-plan__b { width: 100%; margin-top: auto; }
.cs-plan__b.cs-btn--line { margin-top: auto; }
.cs-plan .cs-li:last-of-type { margin-bottom: 16px; }


/* --------------------------------------------------------------------------
   Финальный призыв и подвал
   -------------------------------------------------------------------------- */
.cs-final { position: relative; padding: 40px 64px 42px; background: var(--cs-hot); overflow: hidden; }
.cs-final__copy { position: relative; z-index: 6; }
.cs-final__h { font: 600 46px/1.08 var(--cs-display); letter-spacing: -.05em; }
.cs-final__p { margin: 12px 0 0; max-width: 860px; font: 400 19px/1.5 var(--cs-body); }
.cs-final .cs-cta { margin-top: 22px; }
.cs-final .cs-btn--line:hover { background: var(--cs-paper); }
.cs-rings {
  position: absolute; right: 72px; bottom: 0; width: 380px; height: 190px; border-radius: 190px 190px 0 0;
  background: radial-gradient(circle 190px at 50% 100%, #16140F 0 20%, #F3D34A 20% 36%, #16140F 36% 40%, #F2EDE1 40% 60%, #16140F 60% 64%, #BCD3B4 64% 82%, #16140F 82% 86%, #F2EDE1 86% 100%);
}

.cs-foot { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 64px; background: var(--cs-ink); color: var(--cs-paper); font: 400 15px/1 var(--cs-body); }
.cs-foot__brand { display: flex; align-items: center; gap: 12px; }
.cs-foot__name { font: 700 20px/1 var(--cs-display); letter-spacing: -.05em; }
.cs-foot__tag { color: #B7B09C; margin-left: 6px; }
.cs-foot__links { display: flex; gap: 28px; color: #D9D2BE; }
.cs-foot__demo { padding: 9px 14px; border: 1.5px solid rgba(242, 237, 225, .35); border-radius: 8px; font-weight: 600; }

/* ---- css/mobile/00-global.css ---- */
/* --------------------------------------------------------------------------
   Mobile: общий ритм страницы (≤760px).
   Правки отдельных секций лежат в соседних файлах и начинаются с id своей секции.
   Здесь же живут общие «мерки», которыми пользуются все секции: минимальный размер текста,
   размер лида, точки и подсказка под каруселями, зазор до подсказки.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --section-pad: 56px;
    --fs-body: 1.0625rem;
    --fs-lead: 1.0625rem;
    /* Нижняя граница для текста, который несёт смысл (цены, сроки, подписи под цифрами, счётчик шагов).
       Меньше (13px) остаются только чисто декоративные бейджи вроде «Демо». */
    --fs-small: .875rem;
    /* Подсказка «Листайте» и точки под лентами карточек: во всех шести каруселях одно и то же */
    --dot: 6px;          /* высота и ширина обычной точки */
    --dot-on: 20px;      /* ширина активной точки-«таблетки» */
    --dot-gap: 6px;      /* промежуток между точками */
    --hint-gap: 14px;    /* от нижнего края карточек до верха строки с подсказкой */
    --hint-h: 24px;      /* высота строки с подсказкой и точками */
  }
  .section-head { gap: 12px; margin-bottom: 26px; }
  .section-head--split > div { gap: 12px; }
  .lead { line-height: 1.5; }

  /* Липкая шапка при прокрутке: размытие фона дорого для видеокарты телефона (особенно в Safari), а при почти
     непрозрачной подложке его всё равно не видно. Подложка плотная, размытия нет. */
  .site-header.is-scrolled {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 98%, transparent);
  }

  /* Стык светлой полосы (section--alt) и тёмной панели под ней: углы панели скруглены, и в этих углах
     видна не полоса, а зернистый фон страницы. Подкладываем под верхние углы панели цвет полосы.
     Лежит это «под» панелью (у панели свой stacking context и она идёт следом в разметке), так что на сами панели не влияет.
     Те же отступы по бокам и тот же радиус, что у .panel в main.css.
     Срабатывает только там, где за светлой полосой сразу идёт панель (на главной это #keysy и #voprosy);
     в браузерах без :has() просто остаётся как было. */
  .section--alt:has(+ .panel)::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    top: 100%; height: var(--r-panel);
    left: clamp(8px, 1.4vw, 20px); right: clamp(8px, 1.4vw, 20px);
    background: var(--surface-2);
  }
}
@media (max-width: 380px) {
  :root { --section-pad: 48px; }
}

/* ---- css/mobile/10-hero-services.css ---- */
/* --------------------------------------------------------------------------
   Mobile: первый экран (#top) и услуги (#uslugi), только ≤760px.
   Десктоп не затрагивается: всё внутри media-запроса, селекторы начинаются с id секции.
   3D-сцена (#scene) не меняется: её размер задаёт --s в main.css, от него зависит камера WebGL.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ============================ #top: первый экран ============================ */
  #top {
    padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 12px);
    padding-bottom: 0;
    --hero-gap: 20px; /* расстояние между текстом, кнопками и телефоном */
  }
  /* Текст, кнопки и телефон идут в одну колонку. Блок с фактами переезжает под телефон,
     чтобы сам телефон был виден уже на первом экране: порядок задаём через order, на десктопе всё как было. */
  #top .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #top .hero__copy { display: contents; }
  /* Раньше слой над сценой держал сам .hero__copy; теперь у него нет своего блока, поэтому держат его дети */
  #top .hero__title,
  #top .hero__lead,
  #top .hero__ctas,
  #top .hero__proof { position: relative; z-index: 2; }
  #top .hero__title { order: 1; gap: 12px; }
  #top .hero__pre { font-size: 1rem; line-height: 1.4; max-width: none; }
  /* Заголовок короче на строку-две: Unbounded очень широкий, при 2.15rem он занимал 5 строк */
  #top .hero__display { font-size: clamp(1.7rem, 7.7vw, 2.3rem); line-height: 1.05; }
  /* Первое предложение повторяет строку над заголовком, на телефоне оно лишнее */
  #top .hero__lead-a { display: none; }
  #top .hero__lead { order: 2; margin-top: var(--hero-gap); font-size: 1.0625rem; line-height: 1.5; max-width: none; }

  /* Кнопки во всю ширину: ровные края вместо двух разных по ширине кнопок */
  #top .hero__ctas { order: 3; margin-top: var(--hero-gap); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #top .hero__ctas .btn { width: 100%; min-height: 56px; padding-inline: 16px; font-size: 1.02rem; }
  #top .hero__ctas .btn--ghost { min-height: 52px; }

  /* Факты под телефоном: спокойная карточка из трёх строк */
  #top .hero__proof {
    order: 5; margin-top: 8px; padding: 12px 16px; display: grid; gap: 8px;
    border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
    font-size: .97rem; line-height: 1.35;
  }
  #top .hero__proof li { gap: 10px; }
  #top .hero__proof span { text-wrap: balance; }
  #top .hero__proof svg { width: 19px; height: 19px; }

  /* Телефон-шоурум. Размер самой сцены не трогаем, правим только отступы вокруг неё */
  #top .showroom { order: 4; margin-top: 4px; gap: 2px; }
  #top .showroom__hud { justify-content: center; }
  #top .tilt-btn { min-height: 44px; }
  #top .demo-switch { width: 100%; }
  #top .demo-switch button { flex: 1 0 auto; justify-content: center; min-height: 44px; min-width: 44px; white-space: nowrap; }
  /* Подпись держит высоту трёх строк: при переключении демо страница под ней не прыгает */
  #top .demo-caption { font-size: .95rem; line-height: 1.45; min-height: 4.5em; margin-top: 8px; }
  #top .demo-badge { font-size: .8125rem; }

  /* ============================ #uslugi: услуги ============================ */
  /* Сверху уже есть воздух от первого экрана, поэтому отступ секции чуть меньше общего */
  #uslugi { padding-top: 44px; }
  #uslugi .section-head { margin-bottom: 18px; }
  #uslugi .svc-lead-a { display: none; }

  #uslugi .svc-grid.carousel { gap: 10px; padding-top: 2px; padding-bottom: 4px; }
  #uslugi .svc-grid.carousel > .svc { flex-basis: min(86%, 340px); }

  /* Все семь карточек устроены одинаково: значок и цена, название, описание, срок. Картинки и терминал убраны. */
  #uslugi .svc,
  #uslugi .svc--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
    padding: 18px 18px 14px;
    border-radius: 22px;
    -webkit-tap-highlight-color: transparent;
  }
  #uslugi .svc__body { display: contents; }
  #uslugi .svc__visual,
  #uslugi .svc__list { display: none; }

  /* цена «от 60 000 ₽» несёт смысл: размер не меньше общей нижней границы */
  #uslugi .svc .tag { font-size: var(--fs-small); }
  #uslugi .svc__icon { width: 44px; height: 44px; border-radius: 13px; }
  #uslugi .svc__icon svg { width: 22px; height: 22px; }
  #uslugi .svc__title { font-size: 1.08rem; line-height: 1.22; margin-top: 2px; overflow-wrap: break-word; display: grid; align-content: end; }
  #uslugi .svc__text { font-size: 1rem; line-height: 1.5; align-self: start; }
  /* Последняя фраза длинного описания на телефоне опускается, чтобы текст не обрывался на середине.
     Пояснения в скобках (в английской версии они объясняют российские названия) остаются.
     Полный текст есть в разметке и на странице услуги. */
  #uslugi .svc-tail { display: none; }
  /* В последней карточке (бэкенд) скобок две и обе длинные: она стала бы заметно выше остальных и раздвинула бы всех */
  #uslugi .svc:last-child .svc-aside { display: none; }
  /* Нижняя строка: слева «Срок» над значением, справа «Подробнее». Всегда в одну строку, у всех карточек одинаково */
  #uslugi .svc__meta { padding-top: 12px; gap: 4px 12px; flex-wrap: nowrap; align-items: center; }
  #uslugi .svc__meta > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .875rem; line-height: 1.25; }
  #uslugi .svc__meta > span:first-child b { font-size: 1rem; line-height: 1.25; }
  #uslugi .svc__more { flex: none; white-space: nowrap; font-size: .97rem; }

  #uslugi .svc:active { transform: scale(.985); }

  /* Подсказка и точки: показывают, сколько карточек всего и на какой вы сейчас.
     Размеры точек, зазор до карточек и высота строки общие для всех каруселей (см. 00-global.css). */
  #uslugi .swipe-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: calc(var(--hint-gap) - 4px); min-height: var(--hint-h); }
  #uslugi .svc-hint { display: inline-flex; align-items: center; gap: 8px; }
  #uslugi .svc-dots { display: inline-flex; align-items: center; gap: var(--dot-gap); flex: none; }
  #uslugi .svc-dots i {
    width: var(--dot); height: var(--dot); border-radius: calc(var(--dot) / 2); background: var(--ink-3); opacity: .75;
    transition: width .25s var(--ease), background-color .25s, opacity .25s;
  }
  #uslugi .svc-dots i.is-on { width: var(--dot-on); background: var(--accent); opacity: 1; }
}

/* На телефонах без мыши карточка не «подпрыгивает» после касания */
@media (max-width: 760px) and (hover: none) {
  #uslugi .svc:hover { transform: none; box-shadow: 0 0 0 1px var(--line); }
  #uslugi .svc:hover::before { opacity: 0; }
  #uslugi .svc:hover .svc__more svg { transform: none; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #uslugi .svc-dots i { transition: none; }
  #uslugi .svc:active { transform: none; }
}

/* На узких экранах название может занять две строки: резервируем место двух строк и прижимаем название к описанию,
   чтобы тексты соседних карточек начинались на одной высоте. Начиная с ~430px все названия умещаются в одну строку. */
@media (max-width: 426px) {
  #uslugi .svc__title { min-height: 2.44em; }
}
@media (min-width: 414px) and (max-width: 426px) {
  #uslugi .svc__title:lang(en) { min-height: 0; }
}
/* От 427px самое длинное русское название («Сайты и интернет-магазины») почти впритык помещается в одну строку.
   Чуть уменьшаем шрифт, чтобы запас был не в пиксель, а в полтора десятка: тогда в Safari оно не перенесётся и не раздвинет карточку. */
@media (min-width: 427px) and (max-width: 760px) {
  #uslugi .svc__title:lang(ru) { font-size: 1.03rem; }
}
/* Там, где подписи точно умещаются в две строки, запас в три строки не нужен */
@media (min-width: 430px) and (max-width: 760px) {
  #top .demo-caption:lang(en) { min-height: 3.2em; }
}
@media (min-width: 500px) and (max-width: 760px) {
  #top .demo-caption { min-height: 3.2em; }
}
@media (max-width: 400px) {
  #top .demo-switch button { padding-inline: 9px; }
}
@media (max-width: 360px) {
  #top { --hero-gap: 18px; }
  #top .hero__lead { text-wrap: wrap; }
  #top .demo-switch { gap: 2px; padding: 4px; }
  #top .demo-switch button { padding-inline: 6px; font-size: .88rem; }
  #uslugi .svc__meta { gap: 4px 8px; }
  #uslugi .svc-grid.carousel > .svc { flex-basis: 88%; }
  #uslugi .svc,
  #uslugi .svc--wide { padding: 16px 16px 12px; }
}
/* Самые узкие экраны (320): пять вкладок демо вместе с подушками по 44px не влезают с запасом, поэтому уже зазоры */
@media (max-width: 340px) {
  #top .demo-switch { gap: 0; padding: 3px; }
  #top .demo-switch button { padding-inline: 5px; }
  #top .demo-badge { padding-inline: 7px; margin-right: 4px; }
}
/* Самая длинная подпись (iOS, RU) на самых узких экранах иначе уходит в четыре строки */
@media (max-width: 359px) {
  #top .demo-caption { font-size: .9rem; }
}

/* ---- css/mobile/20-cases.css ---- */
/* --------------------------------------------------------------------------
   Mobile: кейсы (#keysy), ≤760px.
   Цифры в одну строку, а карточки лежат в двух рядах: узкие кейсы парами
   друг под другом, широкие (с макетом приложения) на всю высоту колонки.
   Все селекторы начинаются с #keysy.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ---- Цифры: три компактные колонки ---- */
  #keysy .proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 20px;
    border-radius: 20px;
  }
  #keysy .proof div {
    grid-template-columns: minmax(0, 1fr);
    align-items: start; align-content: start;
    gap: 6px; min-width: 0;
    padding: 16px 12px 14px;
  }
  #keysy .proof div + div { box-shadow: inset 1px 0 0 var(--line); }
  #keysy .proof dt {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
    letter-spacing: -.04em;
  }
  #keysy .proof dt::after {
    display: block; width: 22px; height: 3px; margin-top: 10px; border-radius: 2px;
  }
  #keysy .proof dd {
    font-size: var(--fs-small); line-height: 1.3; max-width: none;
    overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; /* «мессен-джера:», а не строка с двоеточия */
  }
  #keysy .proof__more { display: none; }

  /* ---- Лента кейсов: два ряда, листается вбок ---- */
  #keysy .case-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-columns: min(86%, 330px);
    gap: 12px;
    align-items: stretch;
    padding-bottom: 6px;
  }
  #keysy .case--wide,
  #keysy .case--cta { grid-row: span 2; }

  /* ---- Карточка ---- */
  #keysy .case {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 18px 20px;
    gap: 10px;
    border-radius: 22px;
    align-content: start;
  }
  #keysy .case__top { justify-content: flex-start; gap: 6px 10px; }
  #keysy .case__tag { font-size: var(--fs-small); line-height: 1.3; }
  #keysy .case__plats { gap: 6px; }
  #keysy .case .tag { padding: 4px 9px; font-size: var(--fs-small); line-height: 1.25; border-radius: 8px; }
  #keysy .case h3 {
    font-size: 1.2rem; line-height: 1.22; letter-spacing: -.025em;
    overflow-wrap: break-word; hyphens: manual; min-width: 0;
  }
  #keysy .case p { font-size: 1rem; line-height: 1.45; }
  #keysy .case__feats { gap: 6px; margin-top: 2px; }
  #keysy .case__feats li { font-size: var(--fs-small); line-height: 1.25; padding: 4px 10px; }

  /* длинный список возможностей: три чипса и кнопка «Ещё N» (её добавляет 62-m-cases.js) */
  #keysy .case__feats:not(.is-open) .is-extra { display: none; }
  #keysy .case__feats li.case__more { padding: 0; box-shadow: none; background: none; }
  #keysy .case__more button {
    position: relative; font: inherit; line-height: 1.25; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px 5px 12px; border: 0; border-radius: 30px;
    color: var(--accent-text); background: var(--accent-wash); font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  /* маленькая стрелка вниз: «Ещё» выглядит как кнопка, а не как ещё один чипс-ярлык */
  #keysy .case__more button::before {
    content: ""; width: 7px; height: 7px; margin-top: -3px; flex: none; order: 2;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.85);
  }
  #keysy .case__more button[aria-expanded="true"]::before { margin-top: 3px; transform: rotate(-135deg) scale(.85); }
  /* зона нажатия не меньше 44px, хотя сам чипс ниже */
  #keysy .case__more button::after { content: ""; position: absolute; inset: -10px -8px; }
  #keysy .case__more button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* узкие карточки в паре тянутся по высоте соседа: свободное место остаётся между текстом и чипсами,
     а чипсы прижаты к нижнему краю, так что внизу пустоты нет */
  #keysy .case:not(.case--wide):not(.case--cta) {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: stretch;
  }

  /* ---- Широкая карточка: текст сверху, компактный макет снизу ---- */
  #keysy .case--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    row-gap: 14px;
    align-content: stretch;
  }
  #keysy .case__body { gap: 10px; min-width: 0; }
  /* сцена с макетом занимает всё оставшееся место карточки (карточка тянется до высоты пары узких кейсов),
     так что пустого провала между чипсами и макетом не бывает: лишняя высота становится спокойными полями вокруг макета */
  #keysy .case__visual {
    min-height: 0; min-width: 0; padding: 8px;
    place-items: center stretch; align-self: stretch;
    border-radius: 16px;
    background: radial-gradient(90% 75% at 50% 50%, var(--accent-wash), transparent 78%), var(--surface-2);
  }
  #keysy .cv-panel {
    max-width: none; min-width: 0;
    align-content: start;
    padding: 8px; gap: 6px; border-radius: 14px;
    font-size: .8rem;
  }
  /* макет школы: вкладки, одно занятие и рейтинг */
  #keysy .cv-roles { display: flex; gap: 2px; padding: 3px; border-radius: 10px; }
  #keysy .cv-roles span {
    flex: 1 1 auto; min-width: 0; padding: 6px 4px;
    font-size: clamp(.64rem, 3.1vw, .72rem); white-space: nowrap;
  }
  #keysy .cv-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px; padding: 7px 8px; min-width: 0;
  }
  #keysy .cv-row span { overflow-wrap: break-word; }
  #keysy .cv-row small { color: #5D6476; }
  #keysy .cv-row ~ .cv-row { display: none; }
  #keysy .cv-rate { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px; }
  /* макет ресторана: карта гостя, столы в один ряд, бронь */
  #keysy .cv-panel--dark { align-self: stretch; }
  #keysy .cv-loyal { padding: 10px 12px; min-width: 0; }
  #keysy .cv-loyal b { font-size: 1.1rem; }
  #keysy .cv-loyal small { text-wrap: balance; }
  #keysy .cv-tables { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 2px 0; }
  #keysy .cv-tables i { height: 24px; border-radius: 7px; }
  #keysy .cv-book { flex-wrap: wrap; gap: 6px 8px; font-size: .76rem; }
  /* если кнопка не влезла рядом с текстом, она растягивается на всю ширину, как в настоящем приложении */
  #keysy .cv-book span { flex: 1 1 auto; padding: 8px 10px; text-align: center; }

  /* ---- Последняя карточка с призывом ---- */
  #keysy .case--cta {
    position: relative; overflow: hidden; isolation: isolate;
    align-content: end; gap: 14px; padding: 22px 18px;
  }
  /* бумажный самолётик Telegram как фон: заполняет верх высокой карточки */
  #keysy .case--cta::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: 28px; right: -30px; width: min(270px, 92%); aspect-ratio: 1;
    background: linear-gradient(150deg, rgba(142, 155, 255, .42), rgba(142, 155, 255, .05) 85%);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.7 4.1 2.9 11c-1.2.5-1.2 1.2-.2 1.5l4.6 1.4 1.7 5.4c.2.6.4.8.9.8.4 0 .6-.2.9-.4l2.2-2.1 4.6 3.4c.8.5 1.4.2 1.6-.8l3-14.2c.3-1.2-.5-1.8-1.5-1.4ZM9.4 14.6l8.3-5.3c.4-.2.7-.1.4.2l-6.9 6.2-.3 3.1-1.5-4.2Z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.7 4.1 2.9 11c-1.2.5-1.2 1.2-.2 1.5l4.6 1.4 1.7 5.4c.2.6.4.8.9.8.4 0 .6-.2.9-.4l2.2-2.1 4.6 3.4c.8.5 1.4.2 1.6-.8l3-14.2c.3-1.2-.5-1.8-1.5-1.4ZM9.4 14.6l8.3-5.3c.4-.2.7-.1.4.2l-6.9 6.2-.3 3.1-1.5-4.2Z'/></svg>") center / contain no-repeat;
    transform: rotate(-12deg);
  }
  #keysy .case.case--cta h3 { font-size: clamp(1.6rem, 8vw, 2.1rem); line-height: 1.1; }
  #keysy .case.case--cta p { font-size: 1rem; line-height: 1.45; }
  #keysy .case--cta .btn { width: 100%; min-width: 0; padding-inline: 14px; white-space: normal; text-align: center; }

  #keysy .case-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

  /* ---- Подсказка и индикатор ---- */
  #keysy .swipe-hint {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 8px; margin-top: calc(var(--hint-gap) - 6px); min-height: var(--hint-h);
  }
  #keysy .case-dots { display: flex; align-items: center; gap: var(--dot-gap); margin-left: auto; }
  #keysy .case-dots i {
    display: block; width: var(--dot); height: var(--dot); border-radius: calc(var(--dot) / 2);
    background: var(--ink-3); opacity: .7;
  }
  #keysy .case-dots i.is-on { width: var(--dot-on); background: var(--accent); opacity: 1; }
}

/* Макет ресторана подстраивается под высоту карточки: ряд столов занимает всё свободное место между картой гостя
   и бронью (но не выше 40px), а меньше 20px он не бывает, поэтому пустой щели между блоками нет ни в RU, ни в EN.
   Старые браузеры без container queries просто показывают ряд столов всегда, он описан выше. */
@media (max-width: 760px) {
  @supports (container-type: size) {
    #keysy .cv-panel--dark { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
    #keysy .cv-tables {
      container-type: size; min-height: 20px; padding: 0;
      grid-auto-rows: minmax(0, 40px); align-content: center;
    }
    #keysy .cv-tables i { display: none; height: auto; }
    @container (min-height: 20px) { #keysy .cv-tables i { display: block; } }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  #keysy .case-dots i { transition: width .25s var(--ease), background-color .25s var(--ease); }
}

@media (max-width: 380px) {
  /* третья колонка шире: слово «мессенджера:» не должно терять двоеточие на следующей строке */
  #keysy .proof { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.15fr); }
  #keysy .case-grid { grid-auto-columns: min(88%, 300px); }
  #keysy .case { padding: 16px 16px 18px; gap: 9px; }
  #keysy .case h3 { font-size: 1.14rem; }
  #keysy .case p { font-size: .97rem; line-height: 1.44; }
  #keysy .case__feats { gap: 5px; }
  #keysy .case__feats li { padding: 4px 9px; }
  #keysy .proof div { padding: 14px 10px 12px; }
  #keysy .case--cta { padding: 20px 16px; }
}

/* самые узкие телефоны (iPhone SE первого поколения, 320px): компактнее, чтобы карточки не вытягивались выше 700px */
@media (max-width: 340px) {
  #keysy .proof div { padding-inline: 6px; }
  #keysy .proof dd { line-height: 1.25; }
  #keysy .case { padding: 15px 15px 17px; gap: 8px; }
  #keysy .case h3 { font-size: 1.1rem; }
  #keysy .case p { font-size: .9rem; line-height: 1.4; }
  #keysy .case__top { gap: 4px 8px; }
  /* подписи по 14px: средняя колонка не уже первой, иначе «проектов за первый год» ломается на четыре строки */
  #keysy .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* ---- css/mobile/30-web-quality.css ---- */
/* --------------------------------------------------------------------------
   Mobile: #sayty (ноутбук с демо-сайтом) и #kachestvo (надёжность). ≤760px
   (поза ноутбука и текст-подсказка в #sayty: до 900px, как режим «без скролл-джекинга» в 30-laptop.js).
   Идея: в #sayty и в списке «за счёт чего» карточки едут свайпом (с точками),
   а панель мониторинга и путь платежа переключаются вкладками, а не идут подряд.
   Все правила внутри media, все селекторы начинаются с id секции. Десктоп (>900px) не меняется.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ---------- общий свайп-ряд карточек (steps в #sayty, pillars в #kachestvo) ---------- */
  #sayty .wsteps,
  #kachestvo .pillars {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 320px); gap: 10px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  #sayty .wsteps::-webkit-scrollbar,
  #kachestvo .pillars::-webkit-scrollbar { display: none; }
  #sayty .wsteps:focus-visible,
  #kachestvo .pillars:focus-visible { outline-color: var(--accent-hi); outline-offset: -2px; border-radius: 20px; }

  #sayty .wstep,
  #kachestvo .pillar {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; align-items: center;
    gap: 10px 12px; min-width: 0; padding: 15px 15px 16px; margin: 0;
    border: 0; border-radius: 20px; opacity: 1;
    background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--panel-line);
    scroll-snap-align: start;
  }
  #sayty .wstep__icon,
  #kachestvo .pillar__icon { grid-row: 1; grid-column: 1; width: 40px; height: 40px; border-radius: 12px; }
  #sayty .wstep__icon svg,
  #kachestvo .pillar__icon svg { width: 20px; height: 20px; }
  #sayty .wstep b,
  #kachestvo .pillar b { grid-row: 1; grid-column: 2; font-size: 1.08rem; line-height: 1.25; align-self: center; }
  #sayty .wstep p,
  #kachestvo .pillar p { grid-row: 2; grid-column: 1 / -1; font-size: 1rem; line-height: 1.45; }

  /* подсказка «Листайте» слева и точки справа, как в других каруселях сайта (их рисует src/js/63-m-web-quality.js).
     Высота строки задана заранее, чтобы после появления точек ничего не сдвигалось.
     Размеры точек, зазор до карточек и высота строки общие для всех каруселей (см. 00-global.css). */
  #sayty .m-dots,
  #kachestvo .m-dots { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--hint-h); margin-top: var(--hint-gap); }
  /* у #sayty перед строкой уже есть зазор 12px от сетки секции */
  #sayty .m-dots { margin-top: calc(var(--hint-gap) - 12px); }
  #sayty .m-hint,
  #kachestvo .m-hint { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .92rem; line-height: 1.2; color: var(--on-panel-2); }
  #sayty .m-hint svg,
  #kachestvo .m-hint svg { flex: none; width: 18px; height: 18px; }
  #sayty .m-dots__i,
  #kachestvo .m-dots__i { display: inline-flex; align-items: center; gap: var(--dot-gap); flex: none; }
  #sayty .m-dots i,
  #kachestvo .m-dots i { display: block; width: var(--dot); height: var(--dot); border-radius: calc(var(--dot) / 2); background: rgba(240, 242, 246, .26); transition: width .25s var(--ease), background-color .25s; }
  #sayty .m-dots i.is-on,
  #kachestvo .m-dots i.is-on { width: var(--dot-on); background: var(--accent-hi); }

  /* ---------- #sayty ---------- */
  /* один размер заголовка на оба блока: как у остальных секций (28px), и чуть меньше только на узких экранах,
     где «Работает как часы.» (ширина строки = экран минус 48px) иначе не влезло бы в одну строку */
  #sayty, #kachestvo { --wq-h2: min(var(--fs-h2), calc(8.4vw - 4.6px)); }
  #sayty.webscene { padding-block: 40px 10px; }
  #sayty .webscene__copy { gap: 12px; }
  #sayty .webscene__copy .h2 { font-size: var(--wq-h2); line-height: 1.1; }
  #sayty .lead { font-size: var(--fs-lead); text-wrap: pretty; }
  #sayty .wsteps { margin-top: 4px; }

  /* ---------- #kachestvo: шапка ---------- */
  #kachestvo .section-head { margin-bottom: 18px; }
  #kachestvo .h2 { font-size: var(--wq-h2); }
  #kachestvo .lead { font-size: var(--fs-lead); line-height: 1.5; }
  #kachestvo .lead .q-more { display: none; }
  #kachestvo .quality__grid { gap: 14px; }
  #kachestvo.section { padding-bottom: 36px; }

  /* ---------- #kachestvo: «Эта страница, измерено в вашем браузере» ---------- */
  #kachestvo .pagestats { margin-top: 16px; padding: 16px; border-radius: 20px; gap: 12px; }
  #kachestvo .pagestats__title { font-size: .98rem; text-wrap: balance; }
  /* три цифры в ряд; тонкие разделители в зазорах не отнимают ширину у текста */
  #kachestvo .pagestats__row { --g: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
  #kachestvo .pagestats__row div { position: relative; gap: 6px; min-width: 0; align-content: start; }
  #kachestvo .pagestats__row div + div::before { content: ""; position: absolute; left: calc(var(--g) / -2); top: 3px; bottom: 3px; width: 1px; background: var(--panel-line); }
  /* значение может оказаться длинным («из кэша», «1 234 КБ»): пусть переносится, а не налезает на соседа */
  #kachestvo .pagestats__row b { font-size: clamp(1.05rem, .62rem + 2.3vw, 1.4rem); line-height: 1.1; white-space: normal; overflow-wrap: break-word; }
  #kachestvo .pagestats__row small { font-size: var(--fs-small); line-height: 1.3; }
  /* короткая строка «Это не демо…»: главное доверие к этим цифрам, поэтому на телефоне она остаётся */
  #kachestvo .pagestats p { display: block; font-size: var(--fs-small); line-height: 1.4; text-wrap: balance; }
  /* короткая подпись к весу страницы, чтобы колонка не вытягивалась в 4 строки */
  #kachestvo .pagestats [data-desk] { display: none; }
  #kachestvo .pagestats [data-mob] { display: inline; }

  /* ---------- #kachestvo: вкладки «Мониторинг / Путь платежа» (их рисует JS) ---------- */
  #kachestvo .qtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: 4px; border-radius: 18px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--panel-line); }
  #kachestvo .qtabs button {
    min-width: 0; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 14px; background: transparent;
    color: var(--on-panel-2); font: 600 .95rem/1.2 var(--font-body); text-align: center; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, color .2s;
  }
  #kachestvo .qtabs button:focus-visible { outline-color: var(--accent-hi); outline-offset: 2px; }
  #kachestvo .qtabs button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(75, 92, 255, .9); }
  #kachestvo[data-qtab="mon"] .pipeline,
  #kachestvo[data-qtab="pay"] .dash { display: none; }

  /* ---------- #kachestvo: панель мониторинга ---------- */
  #kachestvo .dash { padding: 16px; gap: 12px; border-radius: 22px; box-shadow: 0 0 0 1px var(--panel-line); }
  #kachestvo .dash__head { gap: 6px 12px; }
  #kachestvo .dash__title { font-size: .98rem; }
  #kachestvo .dash__title small { font-size: var(--fs-small); }
  #kachestvo .dash__status { font-size: .88rem; gap: 6px; }
  #kachestvo .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #kachestvo .kpis .kpi:last-child { grid-column: auto; }
  /* значение прижато к низу карточки: подписи в 1 и 2 строки не сбивают цифры с одной линии */
  #kachestvo .kpi { display: flex; flex-direction: column; justify-content: space-between; padding: 11px 10px 12px; gap: 6px; border-radius: 14px; }
  #kachestvo .kpi small { font-size: var(--fs-small); line-height: 1.25; }
  #kachestvo .kpi b { font-size: clamp(1.05rem, .62rem + 2.3vw, 1.35rem); white-space: nowrap; }
  #kachestvo .kpi b em { font-size: max(.72em, 14px); }
  #kachestvo .uptime__head, #kachestvo .chart__head { font-size: var(--fs-small); margin-bottom: 8px; gap: 8px; }
  #kachestvo .chart__head span { text-wrap: balance; }
  #kachestvo .uptime__head b, #kachestvo .chart__head b { white-space: nowrap; flex: none; }
  #kachestvo .uptime__bars { height: 26px; gap: 1px; }
  #kachestvo .uptime__axis { font-size: var(--fs-small); margin-top: 6px; }
  #kachestvo .chart svg { height: 68px; }
  #kachestvo .chart .grid text { display: none; }
  /* график сжат по высоте (preserveAspectRatio=none): линия и точка держат одинаковую толщину при любом масштабе */
  #kachestvo .chart .line { vector-effect: non-scaling-stroke; }
  #kachestvo .chart .dot { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
  #kachestvo .dash__note { font-size: var(--fs-small); line-height: 1.45; padding-top: 10px; }

  /* ---------- #kachestvo: путь платежа ---------- */
  #kachestvo .pipeline { margin-top: 14px; padding: 16px; border-radius: 22px; background: var(--panel-2); box-shadow: 0 0 0 1px var(--panel-line); }
  /* заголовок на всю ширину, таймер отдельной строкой под ним: пока таймер считает от 0 до 385, заголовок не перестраивается и схема не прыгает */
  #kachestvo .pipeline__head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; margin-bottom: 14px; }
  #kachestvo .pipeline__head .h3 { font-size: 1.04rem; line-height: 1.25; max-width: none; }
  #kachestvo .pipeline__timer { justify-self: start; font-size: 1.6rem; line-height: 1.1; white-space: nowrap; }
  #kachestvo .pipeline__timer small { font-size: var(--fs-small); margin-left: 4px; }
  #kachestvo .pipe { gap: 0; }
  #kachestvo .pipe::before { display: none; }
  #kachestvo .pipe-node {
    grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 1px; align-content: start; justify-items: start; text-align: left;
    padding-bottom: 13px;
  }
  #kachestvo .pipe-node:nth-last-child(2) { padding-bottom: 0; }
  #kachestvo .pipe-node:not(:nth-last-child(2))::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--panel-line); }
  #kachestvo .pipe-node__dot { width: 44px; height: 44px; border-radius: 13px; grid-row: 1 / span 3; grid-column: 1; }
  #kachestvo .pipe-node__dot svg { width: 21px; height: 21px; }
  #kachestvo .pipe-node.is-on .pipe-node__dot { box-shadow: 0 0 0 4px rgba(75, 92, 255, .22); }
  #kachestvo .pipe-node .ms { grid-row: 1; grid-column: 2; font-size: var(--fs-small); }
  #kachestvo .pipe-node b { grid-row: 2; grid-column: 2; font-size: 1rem; line-height: 1.25; text-wrap: pretty; }
  #kachestvo .pipe-node p { grid-row: 3; grid-column: 2; font-size: .88rem; line-height: 1.4; text-wrap: pretty; }
}

/* Планшет в портретной ориентации и телефон в ландшафте (761-900px): ноутбук уже открывается сам, без прокрутки,
   поэтому подсказка «прокрутите страницу» тут тоже лишняя. На десктопе (>900px) ничего не меняется. */
@media (max-width: 900px) {
  #sayty .lead [data-desk] { display: none; }
  #sayty .lead [data-mob] { display: inline; }
}

/* Режим сцены определяется только шириной: 30-laptop.js (isMobile) и main.css переключают его на 900px, а не по типу указателя.
   Поэтому на iPad в альбомной ориентации (901–1024px) ноутбук, как и на десктопе, открывается прокруткой страницы, и фраза
   «Прокрутите страницу» там верна; условие выше (max-width: 900px) совпадает с кодом и остаётся без изменений.
   Неверной на сенсорном экране была только подсказка «покрутить мышью»: сцену там крутят пальцем (touch-action: pan-y
   оставляет горизонтальный жест сцене). Если основной указатель сенсорный, «мышью» заменяется на «пальцем»; иначе остаётся «мышью». */
@media (hover: none) and (pointer: coarse) {
  #sayty .lead [data-ptr="mouse"] { display: none; }
  #sayty .lead [data-ptr="touch"] { display: inline; }
}

@media (max-width: 380px) {
  #sayty.webscene { padding-block: 32px 8px; }
  #kachestvo .pagestats, #kachestvo .dash, #kachestvo .pipeline { padding: 14px; }
  #kachestvo .kpis { gap: 6px; }
  #kachestvo .kpi { padding: 10px 8px 11px; }
}

/* iPhone SE и узкие экраны: «99,98 %» должно помещаться в карточку */
@media (max-width: 345px) {
  #kachestvo .pagestats__row { --g: 8px; }
  #kachestvo .pagestats__row b { font-size: 1rem; }
  #kachestvo .kpi { padding: 10px 6px 11px; }
  #kachestvo .kpi b { font-size: .95rem; }
  #kachestvo .kpi b em { margin-left: 1px; }
}

/* ---------- #sayty: поза ноутбука на телефонах и планшетах (до 900px, как и режим «без скролл-джекинга» в 30-laptop.js) ----------
   Базовая CSS-поза наклонена «снизу» (rotateX +24°): клавиатура видна изнанкой, тачпад выше клавиш, дека налезает на экран.
   Поверх inline-transform из JS отдельными свойствами rotate / scale разворачиваем наклон «сверху»:
   итоговый угол = 24° − 44° = −20° (взгляд сверху), а крышку откидываем на те же 20°, чтобы экран смотрел на зрителя.
   scale по Z нужен, чтобы глубина уменьшалась вместе с шириной (JS масштабирует только по X и Y).
   Числа у крышки: поворот вокруг шарнира (0, -6px, -209px), сдвиг = шарнир - R * шарнир. Если свойства не поддерживаются, остаётся старая поза.
   Высота сцены и положение считаются из --ls: проекция ноутбука ≈ 730 * --ls по ширине и 631 * --ls по высоте. */
@media (max-width: 900px) {
  #sayty .laptop-scene { height: calc(var(--ls) * 640px + 10px); }
  #sayty .laptop { top: calc(var(--ls) * 498px + 5px); rotate: x -44deg; scale: 1 1 var(--ls); }
  #sayty .laptop__lid { rotate: x 20deg; translate: 0 -71.8px -10.5px; }
}
@media (max-width: 760px) {
  #sayty .laptop-scene { --ls: .52; }
}
@media (max-width: 419px) {
  #sayty .laptop-scene { --ls: .475; }
}
@media (max-width: 389px) {
  #sayty .laptop-scene { --ls: .455; }
}
@media (max-width: 360px) {
  #sayty .laptop-scene { --ls: .435; }
}
@media (max-width: 335px) {
  #sayty .laptop-scene { --ls: .38; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #sayty .m-dots i, #kachestvo .m-dots i, #kachestvo .qtabs button { transition: none; }
}

/* ---- css/mobile/40-stack-process.css ---- */
/* --------------------------------------------------------------------------
   Mobile: #tehnologii и #process (≤760px). На десктопе ничего не меняется.
   Идея: вместо длинных вертикальных списков — две горизонтальные ленты
   со снап-прокруткой (категории технологий и этапы работы), а гарантии
   остаются плотным списком. Все селекторы начинаются с id секции.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ---------- общие кусочки: лента + подсказка «листайте» с точками ---------- */
  #tehnologii .stack-list,
  #process .steps {
    display: flex; gap: 12px; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px 0 2px var(--gutter);
    scroll-padding-inline: var(--gutter);
    min-width: 0;
    /* ширина карточки в обеих лентах одна: 86% рабочей ширины (без полей), но не больше 320px;
       справа от ленты padding нет, поэтому от 100% отнимаем один --gutter, а не два */
    --m-card: min(calc((100% - var(--gutter)) * .86), 320px);
  }
  #tehnologii .stack-list::-webkit-scrollbar,
  #process .steps::-webkit-scrollbar { display: none; }
  /* поле справа после последней карточки — отдельным пустым элементом ленты (gap 12px + остаток до --gutter),
     так оно есть в любом WebKit, даже если он не считает padding-right частью прокручиваемой области */
  #tehnologii .stack-list::after,
  #process .steps::after { content: ""; flex: 0 0 max(0px, calc(var(--gutter) - 12px)); }
  /* карточки технологий разной высоты (у одних две строки плашек, у других три): каждая высотой по своему содержимому,
     без пустой полосы внизу короткой карточки. Этапы работы ниже наоборот тянутся до одной высоты, чтобы «результат» стоял на одной линии. */
  #tehnologii .stack-list { align-items: flex-start; }
  /* с клавиатуры ленту можно сфокусировать и листать стрелками (tabindex ставит 64-m-stack-process.js) */
  #tehnologii .stack-list:focus-visible,
  #process .steps:focus-visible { outline-offset: -3px; border-radius: 14px; }

  #tehnologii .swipe-hint,
  #process .swipe-hint {
    display: flex; align-items: center; gap: 8px;
    margin-top: calc(var(--hint-gap) - 2px); min-height: var(--hint-h);
    contain: layout; /* анимация точек не пересчитывает остальную страницу */
  }
  #tehnologii .m-dots,
  #process .m-dots { display: flex; align-items: center; gap: var(--dot-gap); flex: none; margin-left: auto; padding-left: 12px; }
  #tehnologii .m-dots i,
  #process .m-dots i {
    width: var(--dot); height: var(--dot); border-radius: calc(var(--dot) / 2); display: block;
    background: var(--line-2); /* запасной цвет, если нет color-mix */
    background: color-mix(in srgb, var(--ink-3) 60%, transparent);
  }
  #tehnologii .m-dots i.is-on,
  #process .m-dots i.is-on { width: var(--dot-on); background: var(--accent); }
  @media (prefers-reduced-motion: no-preference) {
    #tehnologii .m-dots i,
    #process .m-dots i { transition: width .25s var(--ease), background-color .25s; }
  }

  /* ======================================================================
     #tehnologii
     ====================================================================== */
  /* шапка «разворачивается» в сетку секции, чтобы блок для технарей ушёл вниз */
  #tehnologii .stack__grid { gap: 0; }
  #tehnologii .section-head { display: contents; }
  #tehnologii .section-head > .kicker { order: 1; justify-self: start; margin-bottom: 12px; }
  #tehnologii .section-head > .h2 { order: 2; margin-bottom: 12px; }
  #tehnologii .section-head > .lead { order: 3; margin-bottom: 24px; max-width: none; font-size: var(--fs-lead); line-height: 1.5; }
  #tehnologii .stack-list { order: 4; }
  #tehnologii .swipe-hint { order: 5; }
  #tehnologii .cto { order: 6; margin-top: 22px; border-radius: 18px; }

  /* категория = карточка */
  #tehnologii .stack-row {
    flex: 0 0 var(--m-card); min-width: 0; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 0;
    padding: 18px; border: 0; border-radius: 20px;
    background: var(--surface); box-shadow: 0 0 0 1px var(--line);
    animation: none; /* view()-таймлайн внутри горизонтальной ленты в Safari ломается */
  }
  #tehnologii .stack-row h3 { font: 600 1.0625rem/1.25 var(--font-body); letter-spacing: -.01em; }
  #tehnologii .stack-row h3 small { font-size: .9rem; line-height: 1.35; margin-top: 4px; }
  #tehnologii .chips { gap: 6px; margin-top: 14px; }
  #tehnologii .chip { padding: 7px 11px; border-radius: 10px; font-size: .9rem; background: var(--surface-2); }

  /* блок для технического специалиста: компактная строка-аккордеон */
  #tehnologii .cto summary { padding: 13px 16px; min-height: 56px; gap: 10px; }
  #tehnologii .cto summary > span { line-height: 1.3; }
  #tehnologii .cto summary small { font-size: .875rem; line-height: 1.35; margin-top: 2px; }
  #tehnologii .cto__body { padding: 0 16px 16px; font-size: .97rem; }
  #tehnologii .cto__body code { padding: 1px 3px; margin-inline: -1px; font-size: .92em; } /* знаки препинания не «отлетают» от плашек */

  /* ======================================================================
     #process
     ====================================================================== */
  #process .process__grid { gap: 0; }
  #process .process__aside { display: contents; }
  #process .process__aside > .kicker { order: 1; justify-self: start; margin-bottom: 12px; }
  #process .process__aside > .h2 { order: 2; margin-bottom: 12px; }
  #process .process__aside > .lead { order: 3; margin-bottom: 22px; }
  #process .steps { order: 4; }
  #process .swipe-hint { order: 5; }
  #process .guarantees { order: 6; margin-top: 28px; border-radius: 20px; }

  /* линия-прогресс нужна только вертикальному таймлайну */
  #process .steps::before,
  #process .steps__fill { display: none; }

  /* этап = карточка: номер + срок сверху, название, текст, результат внизу */
  #process .step {
    flex: 0 0 var(--m-card); min-width: 0; scroll-snap-align: start;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    column-gap: 12px; padding: 18px 18px 16px;
    border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  }
  #process .step .step__num {
    grid-area: 1 / 1 / 2 / 2; align-self: center; width: 36px; height: 36px; border-radius: 12px;
    background: var(--accent-wash); color: var(--accent-text); box-shadow: none; font-size: .95rem;
  }
  #process .step__head { display: contents; }
  /* срок: в main.css он nowrap — при крупном шрифте системы налезал на номер; теперь переносится на 2 строки */
  #process .step__head .tag {
    grid-area: 1 / 2 / 2 / 3; justify-self: end; align-self: center; min-width: 0; max-width: 100%;
    display: block; /* обычный текстовый поток вместо inline-flex: перенос строки ведёт себя предсказуемо */
    white-space: normal; text-align: right; text-wrap: balance; font-size: .9rem; line-height: 1.25;
  }
  #process .step__head h3 {
    grid-area: 2 / 1 / 3 / 3; margin-top: 14px;
    font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -.025em; text-wrap: balance;
  }
  #process .step p { grid-area: 3 / 1 / 4 / 3; margin-top: 8px; max-width: none; font-size: .97rem; line-height: 1.5; }
  #process .step__out {
    grid-area: 4 / 1 / 5 / 3; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
    flex-wrap: nowrap; align-items: flex-start; gap: 8px; font-size: .94rem; line-height: 1.35;
  }
  #process .step__out svg { margin-top: 1px; }

  /* гарантии: плотный список в одной карточке */
  #process .guarantees li { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 13px 16px; font-size: .97rem; line-height: 1.42; }
  #process .guarantees svg { width: 22px; height: 22px; margin-top: 1px; }
}

/* телефоны до 430px: одинаковая плотность карточек во всём диапазоне (раньше на 381–430 карточки сужались и становились выше) */
@media (max-width: 430px) {
  #tehnologii .stack-row { padding: 16px; }
  #tehnologii .chips { margin-top: 12px; }
  #tehnologii .chip { padding: 6px 10px; font-size: .875rem; }
  #process .step { padding: 16px 16px 14px; }
}
@media (max-width: 380px) {
  #tehnologii .section-head > .lead { margin-bottom: 20px; }
  #process .step__head h3 { font-size: 1rem; }
}

/* ---- css/mobile/50-estimator.css ---- */
/* ==========================================================================
   Mobile: калькулятор стоимости (#stoimost), ≤760px.
   Десктоп не меняется: всё, что видно на телефоне, лежит внутри media-запроса.
   Логика: src/js/50-estimator.js (ставит form[data-step] = 1…5 | done).

   Что решено:
   - Живая цена теперь в «плашке» внизу экрана вместе с кнопками «Назад / Далее»
     (раньше .est__mini была sticky внутри .est с overflow:hidden: такой sticky
     считается от карточки, а не от экрана, и вешал пустой отступ 74px над собой).
     Теперь у .est нет overflow вообще (углы скругляет сам тёмный блок итога), поэтому
     плашка липнет к экрану и в Safari старых версий, где overflow:clip не работает.
   - Ничто в секции не может распереть страницу шире экрана: везде minmax(0,1fr),
     min-width:0, а длинные слова переносятся (overflow-wrap:break-word).
   - Шаг 1 — плитки 2 в ряд, примеры ИИ — одна строка прокрутки, а не три ряда.
   - Поля «идея» и «пара слов о проекте» растут вместе с текстом (src/js/65-m-estimator.js), максимум 220px.
   - Правила для 761–960px в самом конце файла сделаны намеренно (липкая цена на планшете), см. комментарий там.
   ========================================================================== */

/* Новые элементы, которые существуют только в телефонной раскладке */
@media (min-width: 761px) {
  #stoimost .est__bar,
  #stoimost .est__recap,
  #stoimost .ai-result__more { display: none; }
}

@media (max-width: 760px) {
  /* ---------- защита от «распирания» шире экрана (Safari) ---------- */
  /* overflow на самой секции не ставим: липкая нижняя плашка не должна зависеть от лишнего «клипа» над ней
     (страницу от бокового скролла и так держит overflow-x: clip у body). */
  #stoimost .wrap,
  #stoimost .section-head,
  #stoimost .section-head > *,
  #stoimost .est,
  #stoimost .est__main,
  #stoimost .est__main > *,
  #stoimost .est__step > *,
  #stoimost .ai-box > *,
  #stoimost .ai-box__head > div { min-width: 0; }
  #stoimost .est__main,
  #stoimost .est__step,
  #stoimost .ai-box,
  #stoimost .est__done,
  #stoimost .est__side { grid-template-columns: minmax(0, 1fr); }
  /* break-word, а не anywhere: anywhere делает минимальную ширину текста равной одной букве, и в WebKit
     легенда шага (у неё ширина «по содержимому») схлопывалась в столбик по букве */
  #stoimost .est { overflow-wrap: break-word; }
  #stoimost .est__step, #stoimost .est__step > legend { width: 100%; min-inline-size: 0; }

  /* ---------- заголовок секции ---------- */
  #stoimost .section-head { margin-bottom: 20px; }
  #stoimost .lead { font-size: var(--fs-lead); line-height: 1.5; }
  #stoimost .m-skip { display: none; }   /* второстепенные фразы лида: на телефоне текст короче */

  /* ---------- карточка ---------- */
  /* overflow у карточки снят: любой overflow, кроме visible, делает её «прокручиваемым контейнером»,
     и sticky плашки считался бы от карточки, а не от экрана. Скругление низа держит сам .est__side. */
  #stoimost .est { position: relative; overflow: visible; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
  #stoimost .est__main { padding: 16px; gap: 14px; }
  #stoimost .est__mini { display: none; }
  #stoimost .est__progress { gap: 4px; }
  #stoimost .est__progress i { height: 4px; }
  #stoimost .est__step { gap: 12px; }
  #stoimost .est__step:focus { outline: none; }
  #stoimost .est__step legend { gap: 3px; margin-bottom: 14px; }
  #stoimost .est__step legend small { font-size: var(--fs-small); letter-spacing: .01em; }
  #stoimost .est__step legend b { font-size: 1.375rem; line-height: 1.18; }
  #stoimost .est__step legend span { font-size: .9375rem; line-height: 1.4; }

  /* ---------- ИИ-блок ---------- */
  #stoimost .ai-box { gap: 10px; padding: 14px; border-radius: 18px; }
  #stoimost .ai-box__head { gap: 10px; align-items: flex-start; }
  #stoimost .ai-box__icon { width: 36px; height: 36px; border-radius: 12px; }
  #stoimost .ai-box__icon svg { width: 20px; height: 20px; }
  #stoimost .ai-box__head b { font-size: 1rem; line-height: 1.25; }
  #stoimost .ai-box__head small { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.35; }
  #stoimost .ai-box textarea { min-height: 96px; max-height: 220px; padding: 12px 14px; border-radius: 12px; font-size: 1rem; line-height: 1.45; resize: none; }
  /* подсказки в полях: читаемый серый вместо стандартного браузерного (в тёмной теме он был 3,9:1) */
  #stoimost .ai-box textarea::placeholder,
  #stoimost .field input::placeholder,
  #stoimost .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
  #stoimost .ai-box__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #stoimost .ai-box [data-ai-run] { width: 100%; min-height: 48px; font-size: 1rem; }
  /* примеры идей: одна строка, которую можно листать пальцем */
  #stoimost .ai-box__examples {
    flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: -14px; padding: 2px 14px; scroll-padding-inline: 14px; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #stoimost .ai-box__examples::-webkit-scrollbar { display: none; }
  /* пока справа есть ещё примеры, край строки плавно гаснет: видно, что её можно листать (класс ставит 65-m-estimator.js) */
  #stoimost .ai-box__examples.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  #stoimost .ai-box__examples button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: .9375rem; white-space: nowrap; scroll-snap-align: start; }
  #stoimost [data-ai-out] { scroll-margin-top: -40px; }   /* + scroll-padding страницы: результат встаёт у верха экрана */
  #stoimost [data-ai-out]:empty { display: none; }

  #stoimost .ai-result { gap: 10px; margin-inline: -6px; padding: 14px; border-radius: 16px; }
  #stoimost .ai-result h4 { font-size: 1rem; line-height: 1.3; }
  #stoimost .ai-result p,
  #stoimost .ai-result ul { font-size: .9375rem; line-height: 1.45; }
  #stoimost .ai-result__cols { gap: 12px; }
  #stoimost .ai-result__cols.is-folded { display: none; }
  #stoimost .ai-result__more {
    min-height: 44px; border: 0; border-radius: 12px; padding: 0 14px;
    background: var(--surface-2); color: var(--accent-text); font-weight: 600; font-size: .9375rem;
    box-shadow: inset 0 0 0 1px var(--line); -webkit-tap-highlight-color: transparent;
  }
  #stoimost .ai-result .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #stoimost .ai-result .btn { min-height: 48px; padding: 10px 16px; white-space: normal; text-align: center; line-height: 1.25; }

  /* ---------- варианты ответа: строки (шаги 2 и 4) ---------- */
  #stoimost .opts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #stoimost .opt label {
    position: relative; gap: 2px; align-content: center; min-height: 56px;
    padding: 12px 52px 12px 14px; border-radius: 16px; -webkit-tap-highlight-color: transparent;
    transition: box-shadow .2s, background-color .2s, transform .15s;
  }
  #stoimost .opt label:active { transform: scale(.985); }
  /* контур невыбранной плитки чуть плотнее, чтобы границы были видны и при слабом зрении; выбранная — акцентная рамка */
  #stoimost .opt label { box-shadow: 0 0 0 1px var(--line-2); }
  #stoimost .opt input:checked + label { box-shadow: 0 0 0 2px var(--accent); }
  #stoimost .opt label b { font-size: 1rem; line-height: 1.25; }
  #stoimost .opt label small { font-size: .875rem; line-height: 1.35; }
  /* шаг 2: цена отдельной строкой, а не «хвостом» через точку */
  #stoimost .opt__sep { display: none; }
  #stoimost .opt__from { display: block; margin-top: 2px; color: var(--accent-text); font-weight: 650; }
  /* кружок выбора справа; у отмеченного варианта внутри галочка */
  #stoimost .opt label::after {
    content: ""; position: absolute; top: 50%; right: 14px; width: 22px; height: 22px; margin-top: -11px;
    border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2);
    transition: background-color .2s, box-shadow .2s;
  }
  #stoimost .opt input:checked + label::after {
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    box-shadow: none;
  }

  /* ---------- плитки: шаг 1 (тип), шаг 3 (функции), шаг 4 (темп) ---------- */
  #stoimost [data-est-step="1"] .opts,
  #stoimost .opts--chips,
  #stoimost [data-est-step="4"] .opts + .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #stoimost [data-est-step="4"] .opts + .opts { margin-top: 6px; }
  #stoimost [data-est-step="1"] .opt label,
  #stoimost .opt--chip label,
  #stoimost [data-est-step="4"] .opts + .opts .opt label { align-content: start; gap: 4px; padding: 12px; }
  #stoimost [data-est-step="1"] .opt label::after,
  #stoimost [data-est-step="4"] .opts + .opts .opt label::after { top: 12px; right: 12px; width: 20px; height: 20px; margin-top: 0; }

  #stoimost [data-est-step="1"] .opt label b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; font-size: .96875rem; }
  #stoimost [data-est-step="1"] .opt label b svg { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: var(--accent-wash); color: var(--accent-text); }
  #stoimost [data-est-step="1"] .opt label small { font-size: var(--fs-small); line-height: 1.35; }
  #stoimost [data-est-step="1"] .opt--wide { grid-column: 1 / -1; }
  #stoimost [data-est-step="1"] .opt--wide label { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: center; padding-right: 44px; }
  #stoimost [data-est-step="1"] .opt--wide label b { display: contents; }
  #stoimost [data-est-step="1"] .opt--wide label b svg { grid-row: 1 / span 2; }
  #stoimost [data-est-step="1"] .opt--wide label::after { top: 50%; margin-top: -10px; }

  #stoimost .opt--chip label { grid-template-columns: minmax(0, 1fr); align-content: space-between; min-height: 72px; gap: 6px; }
  #stoimost .opt--chip label b { font-size: .9375rem; }
  #stoimost .opt--chip label small { color: var(--accent-text); font-size: .875rem; font-weight: 650; }
  /* квадратик «отметить» внизу справа, чтобы название занимало всю ширину плитки */
  #stoimost .opt--chip label::after { top: auto; bottom: 12px; right: 12px; width: 20px; height: 20px; margin-top: 0; border-radius: 7px; }
  #stoimost .opt--chip input:checked + label::after { background-size: 13px 13px; }

  #stoimost [data-est-step="4"] .opts + .opts .opt label b { padding-right: 26px; font-size: .96875rem; }
  #stoimost [data-est-step="4"] .opts + .opts .opt label small { font-size: var(--fs-small); }

  /* ---------- нижняя плашка: цена + «Назад / Далее» ---------- */
  #stoimost .est__nav {
    position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 6;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px;
    margin: 2px -4px 0; padding: 6px; border-radius: 20px;
    background: var(--panel); color: var(--on-panel);
    box-shadow: 0 0 0 1px var(--panel-line), 0 16px 32px -12px rgba(0, 0, 0, .5);
  }
  #stoimost .est__nav[hidden] { display: none; }
  #stoimost .est__back {
    flex: none; width: 44px; height: 48px; padding: 0; justify-content: center; border-radius: 14px;
    background: rgba(240, 242, 246, .09); color: var(--on-panel); -webkit-tap-highlight-color: transparent;
  }
  /* на шаге 1 «Назад» не пропадает, а тускнеет: цена не прыгает вбок при переходе к шагу 2 */
  #stoimost .est__back[disabled] { visibility: visible; opacity: .32; pointer-events: none; }
  #stoimost .est__back-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #stoimost .est__bar { display: grid; flex: 1 1 0; min-width: 0; gap: 1px; padding-left: 8px; }
  #stoimost .est__bar b { font: 700 clamp(.875rem, 4vw, 1rem)/1.2 var(--font-body); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  #stoimost .est__bar span { font-size: var(--fs-small); line-height: 1.2; color: var(--on-panel-2); }
  #stoimost .est__nav .btn { flex: none; min-height: 48px; padding: 0 16px; border-radius: 14px; }
  /* шаг 5: цена уже в «Вашем расчёте» выше, плашке нужна только кнопка */
  #stoimost .est[data-step="5"] .est__bar { display: none; }
  #stoimost .est[data-step="5"] .est__nav .btn { flex: 1 1 auto; }

  /* ---------- шаг 5: расчёт и форма ---------- */
  #stoimost .est__recap { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--line); }
  #stoimost .est__recap small { font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); }
  #stoimost .est__recap b { font: 600 clamp(1rem, 5vw, 1.25rem)/1.2 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  #stoimost .est__recap span { font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
  /* вторая строка в расчёте — срок: без «висящей» точки-разделителя в конце первой строки */
  #stoimost .est__sep { display: none; }
  #stoimost .est__nb { display: block; white-space: nowrap; }
  #stoimost .est__recap-note { display: block; margin-top: 4px; font-style: normal; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-3); }
  #stoimost .field-row { gap: 12px; }
  #stoimost .field { gap: 6px; }
  #stoimost .field label { font-size: .9375rem; }
  #stoimost .field input,
  #stoimost .field textarea { min-height: 52px; padding: 13px 14px; border-radius: 12px; font-size: 1rem; }
  #stoimost .field textarea { min-height: 92px; resize: none; }
  #stoimost .field small { font-size: var(--fs-small); }
  #stoimost .consent { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; font-size: .875rem; }
  #stoimost .consent input { width: 22px; height: 22px; margin: 0; }
  #stoimost .form-error { font-size: .9375rem; line-height: 1.4; }
  /* при ошибке поле и сообщение не должны прятаться под нижней плашкой */
  #stoimost .field input,
  #stoimost .field textarea,
  #stoimost .consent,
  #stoimost .form-error { scroll-margin-bottom: 96px; }
  #stoimost .field input[aria-invalid="true"],
  #stoimost .field textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
  #stoimost .consent input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }

  /* ---------- готово ---------- */
  #stoimost .est__done { gap: 12px; justify-items: stretch; }
  #stoimost .est__done h3 { font-size: 1.375rem; }
  #stoimost .done-icon { width: 48px; height: 48px; border-radius: 15px; }
  #stoimost .done-icon svg { width: 24px; height: 24px; }
  #stoimost .brief-copy { padding: 12px 14px; font-size: .875rem; max-height: min(62vh, 520px); }
  #stoimost .est__done .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #stoimost .est__done .btn { min-height: 52px; padding: 10px 16px; white-space: normal; text-align: center; line-height: 1.25; }

  /* ---------- боковая сводка: на телефоне только после отправки ---------- */
  #stoimost .est__side { display: none; }
  #stoimost .est[data-step="done"] .est__side { display: grid; gap: 10px; padding: 18px 16px; border-radius: 0 0 22px 22px; }
  #stoimost .est__price { font-size: clamp(1.3rem, 6.2vw, 1.7rem); }
  #stoimost .est__facts li { gap: 10px; padding: 9px 0; font-size: .9375rem; }
  #stoimost .est__facts li span { flex: none; }
  #stoimost .est__facts li b { flex: 1 1 0; min-width: 0; }
  #stoimost .est__disclaimer { font-size: var(--fs-small); }
}

/* узкие экраны (iPhone SE, 320–359): плашке нужно больше места под цену */
@media (max-width: 359px) {
  #stoimost .est__main { padding: 14px; gap: 12px; }
  #stoimost .ai-box { padding: 12px; }
  #stoimost .ai-box__examples { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  #stoimost .est__nav .btn { padding: 0 14px; }
  #stoimost .est__nav .btn .arrow { display: none; }
  #stoimost [data-est-step="1"] .opt label,
  #stoimost .opt--chip label,
  #stoimost [data-est-step="4"] .opts + .opts .opt label { padding: 10px; }
  #stoimost [data-est-step="1"] .opt label::after,
  #stoimost [data-est-step="4"] .opts + .opts .opt label::after { top: 10px; right: 10px; }
  #stoimost .opt--chip label::after { bottom: 10px; right: 10px; }
  #stoimost .opt--chip label b { font-size: .875rem; }
  /* после отправки тёмный блок итога выровнен по тем же 14px, что и текст карточки над ним */
  #stoimost .est[data-step="done"] .est__side { padding-inline: 14px; }
  /* широкая плитка «Пока не знаю»: кружок по центру по высоте (общее правило выше сбрасывает top на 10px и padding-right на 10px) */
  #stoimost [data-est-step="1"] .opt--wide label { padding-right: 42px; }
  #stoimost [data-est-step="1"] .opt--wide label::after { top: 50%; right: 12px; margin-top: -10px; }
}

/* 320–339: самая длинная цена («3,2–4,7 млн ₽») должна влезать с запасом, даже если шрифт чуть шире */
@media (max-width: 339px) {
  #stoimost .est__bar b { letter-spacing: -.02em; }   /* кегль остаётся 14px (нижняя граница из clamp): проверено, длинная цена в плашку влезает */
  #stoimost .est__nav { gap: 4px; }
}

/* тач-экраны: «залипшего» ховера после нажатия быть не должно (в iOS последний нажатый элемент иначе остаётся тёмным) */
@media (max-width: 760px) and (hover: none) {
  #stoimost .ai-box__examples button:hover { color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
  #stoimost .opt input:not(:checked) + label:hover { box-shadow: 0 0 0 1px var(--line-2); }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #stoimost .opt label,
  #stoimost .opt label::after { transition: none; }
  #stoimost .opt label:active { transform: none; }
}

/* Планшет и телефон в альбомной ориентации (761–960): остаётся «планшетная» одна колонка из main.css.
   Липкая цена .est__mini там тоже сидела внутри карточки с overflow:hidden и налезала на «Шаг 1 из 5».
   Снимаем overflow (низ скругляет .est__side), и плашка липнет под шапкой, как задумано. */
@media (min-width: 761px) and (max-width: 960px) {
  #stoimost .est { overflow: visible; }
  #stoimost .est__side { border-radius: 0 0 30px 30px; }
}
/* iPhone в альбомной ориентации: экран всего ~390px высотой, липкая плашка съела бы треть — пусть идёт обычным блоком */
@media (min-width: 761px) and (max-width: 960px) and (max-height: 520px) {
  #stoimost .est__mini { position: static; margin: 0; }
}

/* ---- css/mobile/60-faq-final-footer.css ---- */
/* --------------------------------------------------------------------------
   Mobile (≤760px): вопросы, финальный блок с контактами, подвал, нижняя панель.
   Корни селекторов: #voprosy, #kontakty, .site-footer, .mobile-bar.
   Десктоп не затронут: всё внутри media-запросов.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ======================= FAQ ======================= */
  #voprosy { padding-block: var(--section-pad); }
  #voprosy .faq__grid { gap: 0; }

  /* Заголовок сверху, вопросы, и только потом «Не нашли ответ?» */
  #voprosy .faq__aside { display: contents; }
  #voprosy .faq__aside .kicker { order: 0; justify-self: start; }
  #voprosy .faq__aside .h2 { order: 1; margin: 12px 0 22px; }
  #voprosy .faq__aside + div { order: 2; }
  /* «Не нашли ответ?» и кнопка: без JS лежат в .faq__aside, с JS 66-m-faq.js переносит их под список (порядок для Tab и VoiceOver совпадает с видимым) */
  #voprosy .lead { order: 4; margin-top: 30px; font-size: var(--fs-lead); line-height: 1.5; }
  #voprosy .faq__aside > div, #voprosy .faq__aside + div ~ div { order: 5; margin-top: 14px; }
  #voprosy .faq__aside > div .btn, #voprosy .faq__aside + div ~ div .btn { width: 100%; min-height: 52px; }

  /* Вопросы одной карточкой */
  #voprosy .faq__aside + div {
    background: var(--surface); border-radius: var(--r-card);
    box-shadow: 0 0 0 1px var(--line); padding: 0 18px;
  }
  #voprosy .faq__item:first-child { border-top: 0; }
  #voprosy .faq__item:last-child { border-bottom: 0; }
  #voprosy .faq__item summary {
    padding: 15px 0; min-height: 58px;
    grid-template-columns: minmax(0, 1fr) 30px; gap: 14px;
    font: 600 1rem/1.35 var(--font-body);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: opacity .15s;
  }
  #voprosy .faq__item summary:active { opacity: .6; }
  #voprosy .faq__item summary i { width: 30px; height: 30px; border-radius: 10px; }
  #voprosy .faq__item summary i svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
  /* крутим только плюс, а не всю плитку: плитка остаётся ровным квадратом */
  #voprosy .faq__item[open] summary i { transform: none; }
  #voprosy .faq__item[open] summary i svg { transform: rotate(45deg); }
  #voprosy .faq__item div { padding: 0 0 18px; gap: 8px; font-size: .97rem; line-height: 1.55; max-width: none; }

  /* Свёрнутый список. Прячем сразу в CSS, до работы скрипта: иначе страница «укорачивается» уже после
     перехода по ссылке вида /#kontakty и якорь уезжает. JS добавляет кнопку «Показать ещё» и классы .is-ready / .is-expanded.
     Правило только для списков из 7+ вопросов (на страницах услуг их 6, там прятать нечего).
     Запасной вариант для браузеров без :has / (scripting): класс .is-folded, который ставит скрипт. */
  #voprosy.is-folded .faq__item:nth-child(n+6) { display: none; }
  @media (scripting: enabled) {
    #voprosy:not(.is-expanded) .faq__aside + div:has(.faq__item:nth-child(7)) .faq__item:nth-child(n+6) { display: none; }
    /* место под будущую кнопку «Показать ещё»: она появится с JS, и страница не сдвинется */
    #voprosy:not(.is-ready) .faq__aside + div:has(.faq__item:nth-child(7))::after { content: ""; display: block; height: 56px; }
  }
  @media (scripting: enabled) {
    /* первый вопрос в разметке открыт (так нужно десктопу), на телефоне скрипт его закрывает; до этого момента рисуем его закрытым */
    #voprosy:not(.is-ready) .faq__item[open] > div { display: none; }
    #voprosy:not(.is-ready) .faq__item[open] summary i { background: var(--surface); color: inherit; box-shadow: 0 0 0 1px var(--line); }
    #voprosy:not(.is-ready) .faq__item[open] summary i svg { transform: none; }
  }
  #voprosy .faq-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 56px; padding: 0; margin: 0;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: none; color: var(--accent-text);
    font: 600 1rem/1.2 var(--font-body);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  #voprosy .faq-more:active { opacity: .6; }
  #voprosy .faq-more svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
  #voprosy .faq-more[aria-expanded="true"] svg { transform: rotate(180deg); }
  @media (prefers-reduced-motion: no-preference) {
    #voprosy .faq__item.is-new { animation: faq-in .4s var(--ease) both; }
    @keyframes faq-in { from { opacity: 0; transform: translateY(8px); } }
  }

  /* на iPhone :hover «залипает» после касания: кнопки не должны оставаться приподнятыми */
  #voprosy .btn:hover, #kontakty .btn:hover { transform: none; }

  /* ======================= Финальный блок ======================= */
  #kontakty { padding: 38px 0 30px; box-shadow: inset 0 0 0 1px var(--panel-line); }
  /* свечение панели: плавный спад вместо резкого края у эллипса на узком экране */
  #kontakty::before {
    background:
      radial-gradient(110% 46% at 100% 0%, rgba(47, 68, 255, .46), rgba(47, 68, 255, .16) 45%, transparent 100%),
      radial-gradient(100% 40% at 0% 100%, rgba(255, 122, 69, .24), rgba(255, 122, 69, .09) 50%, transparent 100%);
  }
  /* Размер подобран так, чтобы первая строка «Расскажите об идее.» целиком влезала от 320 до 430px:
     тогда заголовок складывается в четыре ровные строки, а не в пять с одиноким «пришлём».
     Эта строка занимает около 13 em, поэтому кегль привязан к ширине экрана минус поля (48px) с небольшим запасом. */
  #kontakty .final__title {
    font-size: clamp(1.2rem, 7.4vw - 4px, 2.05rem); line-height: 1.1; letter-spacing: -.04em;
    margin-top: 14px; max-width: 15em;
  }
  #kontakty .final__row { gap: 22px; margin-top: 18px; }
  #kontakty .final__row > div:first-child { gap: 18px !important; }
  #kontakty .lead { font-size: var(--fs-lead); line-height: 1.5; }
  #kontakty .final__ctas { flex-direction: column; gap: 10px; }
  #kontakty .final__ctas .btn { width: 100%; min-height: 56px; padding: 0 20px; font-size: 1.02rem; }
  #kontakty .final__ctas .btn--ghost { min-height: 52px; }

  /* Контакты: два столбца вместо четырёх строк подряд */
  #kontakty .contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  #kontakty .contacts li { padding: 13px 0 14px; gap: 3px; align-content: start; }
  #kontakty .nowrap { white-space: nowrap; }
  #kontakty .contacts small { font-size: var(--fs-small); line-height: 1.3; }
  #kontakty .contacts a, #kontakty .contacts span { font-size: .97rem; line-height: 1.35; }
  /* ссылки-контакты: зона нажатия 44px, а высота строки прежняя (лишнее съедают отрицательные поля) */
  #kontakty .contacts a {
    display: flex; align-items: center; min-height: 44px; margin-block: -11.5px;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  #kontakty .contacts a:active { opacity: .65; }

  /* ======================= Подвал ======================= */
  .site-footer { padding-block: 20px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: .94rem; }
  .site-footer .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .site-footer .site-footer__grid > :first-child { grid-column: auto; }
  .site-footer .site-footer__brand { gap: 0 !important; }
  .site-footer .site-footer__brand p { font-size: .92rem; line-height: 1.5; max-width: none !important; }
  /* логотип-ссылка: зона нажатия 44px */
  .site-footer .logo { min-height: 44px; align-self: start; justify-self: start; }
  /* «Студия»: Кейсы, «Как работаем» и «Стоимость» есть в меню; оставляем то, чего там нет, одной строкой */
  .site-footer .site-footer__studio { margin-top: -6px; }
  .site-footer .site-footer__studio h2 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .site-footer .site-footer__studio ul { display: flex; flex-wrap: wrap; gap: 0 22px; border-top: 1px solid var(--line); }
  .site-footer .site-footer__studio li { display: none; min-width: 0; }
  .site-footer .site-footer__studio li:nth-child(3),
  .site-footer .site-footer__studio li:nth-child(5),
  .site-footer .site-footer__studio li:nth-child(6) { display: block; }
  .site-footer .site-footer__studio a {
    display: flex; align-items: center; min-height: 44px; padding-block: 4px;
    color: var(--ink); font-weight: 500; line-height: 1.25;
    -webkit-tap-highlight-color: transparent;
  }
  .site-footer .site-footer__at { display: none; }
  .site-footer .site-footer__services h2 { margin-bottom: 4px; font-size: .98rem; }
  .site-footer .site-footer__services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .site-footer .site-footer__services li { border-top: 1px solid var(--line); min-width: 0; }
  .site-footer .site-footer__services a {
    display: flex; align-items: center; min-height: 44px; padding-block: 6px;
    color: var(--ink); font-weight: 500; line-height: 1.25; overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
  }
  .site-footer .site-footer__legal { margin-top: 0; padding-top: 0; border-top: 1px solid var(--line); gap: 0 16px; font-size: var(--fs-small); align-items: baseline; flex-wrap: wrap; }
  /* если строка не влезла и ссылка ушла вниз, лишнего зазора под «©» нет */
  .site-footer .site-footer__legal span { padding: 12px 0 0; }
  .site-footer .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

  /* ======================= Нижняя панель ======================= */
  .mobile-bar {
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    grid-template-columns: minmax(0, 1fr) 52px; gap: 8px;
    /* почти непрозрачная подложка: текст страницы не просвечивает под кнопками.
       Размытие фона (backdrop-filter из main.css) на телефоне не нужно: при такой плотности его не видно,
       а на iPhone оно заметно нагружает видеокарту, пока страница прокручивается под панелью. */
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    will-change: transform;
    /* спрятанная панель не ловит фокус с клавиатуры */
    visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s;
  }
  .mobile-bar.is-visible { visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
  /* у подвала панель уезжает: там уже нечего «продавать» и она закрывала бы низ страницы */
  .mobile-bar.is-visible.is-at-end { transform: translateY(110%); visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; }
  .mobile-bar .btn {
    min-height: 52px; padding: 0 12px; border-radius: 14px;
    font-size: 1rem; white-space: normal; text-align: center; line-height: 1.15;
  }
  .mobile-bar .btn:hover { transform: none; }
  .mobile-bar .btn:active { transform: scale(.97); }
  /* кнопка Telegram: нейтральная плитка с синей иконкой, одинаково в светлой и тёмной теме */
  .mobile-bar .btn:not(.btn--accent) {
    --btn-bg: var(--surface); --btn-fg: var(--accent-text); padding: 0;
    box-shadow: inset 0 0 0 1.5px var(--line-2);
  }
  .mobile-bar .btn svg { width: 22px; height: 22px; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mobile-bar, .mobile-bar.is-visible, .mobile-bar.is-visible.is-at-end { transition: none; }
  #voprosy .faq-more svg, #voprosy .faq__item summary i svg { transition: none; }
}

/* ≤380: строка «© … / Политика» набрана тем же 14px, что и весь мелкий текст, и в одну строку уже не помещается:
   ссылка уходит под «©». Так и задумано, это дешевле, чем читать юридический текст мелким шрифтом. */
@media (max-width: 380px) {
  .site-footer .site-footer__legal { column-gap: 10px; }
}

@media (max-width: 360px) {
  #voprosy .faq__aside + div { padding: 0 14px; }
  #kontakty .contacts { gap: 0 14px; }
  .site-footer .site-footer__services ul { gap: 0 14px; }
  .mobile-bar .btn { font-size: .94rem; padding: 0 8px; }
}

/* Совсем узкие экраны (320): остаются два столбца, просто теснее */
@media (max-width: 350px) {
  #kontakty .contacts { gap: 0 12px; }
  #kontakty .contacts li { padding: 11px 0 12px; }
  #kontakty .contacts a, #kontakty .contacts span { font-size: .92rem; }
  .site-footer .site-footer__services ul { gap: 0 12px; }
  .site-footer .site-footer__services a, .site-footer .site-footer__studio a { font-size: .9rem; }
  .site-footer .site-footer__studio ul { gap: 0 12px; }
}

/* ---- css/mobile/70-inner.css ---- */
/* --------------------------------------------------------------------------
   Mobile (≤760px): внутренние страницы: услуги (/uslugi, /en/services), политика, 404.
   Корни селекторов: .page-hero и всё, что идёт после него в <main> (.page-hero ~ ...),
   плюс классы, которые есть только на внутренних страницах (.crumbs, .page-hero__facts, .feature-grid, .price-table, .related, .prose).
   Классы, общие с главной (.case, .chip, .faq__item), трогаем только через .page-hero ~ ...
   Десктоп не затронут: всё внутри media-запросов.
   Блок «Вопросы» (#voprosy), финал (#kontakty) и подвал стилизует 60-faq-final-footer.css, здесь только то, чего там нет.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* ============================ Первый экран ============================ */
  /* Отступы первого экрана задаёт #top из 10-hero-services.css (у него тот же id): сверху шапка + 12px, снизу 0.
     Поэтому нижний отступ (28px) держит последний блок, плашки с цифрами: иначе они упираются в границу следующей секции */
  /* Порядок на телефоне: путь, заголовок, описание, кнопки, и только потом цифры */
  .page-hero > .wrap { display: flex; flex-direction: column; align-items: stretch; }
  .page-hero .crumbs { order: 0; }
  .page-hero h1 { order: 1; }
  .page-hero .lead { order: 2; }
  .page-hero .hero__ctas { order: 3; }
  .page-hero .page-hero__facts { order: 4; }

  .page-hero .crumbs { gap: 0 8px; margin-bottom: 12px; font-size: .92rem; line-height: 1.4; }
  /* разделитель «/» принадлежит предыдущему пункту: при переносе строки он не остаётся один в начале строки */
  .page-hero .crumbs li + li::before { content: none; }
  .page-hero .crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--ink-3); }
  /* зона нажатия ≥44px без прибавки к высоте блока */
  .page-hero .crumbs a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }

  .page-hero h1 {
    font-size: clamp(1.4rem, 6.3vw, 1.95rem); line-height: 1.1; letter-spacing: -.04em;
    max-width: none; overflow-wrap: break-word;
  }
  .page-hero .lead { margin-top: 14px; font-size: 1rem; line-height: 1.5; max-width: none; }

  .page-hero .hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
  .page-hero .hero__ctas .btn { width: 100%; min-height: 56px; padding-inline: 16px; font-size: 1.02rem; }
  .page-hero .hero__ctas .btn--ghost { min-height: 52px; }
  .page-hero .hero__ctas .btn:hover { transform: none; }
  /* большие телефоны и планшеты: две кнопки в ряд вместо двух полос во всю ширину.
     У первого экрана внутренних страниц тоже id="top", поэтому правила главной (#top .hero__ctas) тоже действуют: перебиваем их через .page-hero#top */
  @media (min-width: 600px) {
    .page-hero#top .hero__ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-hero#top .hero__ctas .btn--ghost { min-height: 56px; }
  }

  /* Цифры: четыре плашки 2×2, все видны сразу (горизонтальную ленту старшие читатели не замечают, а цена и срок важны) */
  .page-hero .page-hero__facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 28px; padding: 0;
  }
  .page-hero .page-hero__facts li {
    min-width: 0; display: grid; gap: 3px; align-content: start; padding: 11px 13px 12px; border-radius: 16px;
    font-size: .86rem; line-height: 1.3; color: var(--ink-2); overflow-wrap: break-word;
  }
  .page-hero .page-hero__facts b { font-size: 1.02rem; line-height: 1.25; color: var(--ink); }

  /* 404: страница не должна быть выше экрана без причины */
  .page-hero[style*="min-height"] { min-height: 0 !important; }
  .page-hero > .wrap[style*="display:grid"] { gap: 16px !important; }
  .page-hero > .wrap[style*="display:grid"] > * { justify-self: stretch; }
  .page-hero > .wrap[style*="display:grid"] > .kicker { justify-self: start; }
  .page-hero > .wrap[style*="display:grid"] > .lead { margin-top: 0; }

  /* ============================ Ритм секций ============================ */
  .page-hero ~ .section { --section-pad: 40px; }
  .page-hero ~ .section .section-head { gap: 10px; margin-bottom: 20px; }
  .page-hero ~ .section .section-head .h2 {
    font-size: clamp(1.3rem, .92rem + 1.9vw, 1.62rem); line-height: 1.14; letter-spacing: -.035em; overflow-wrap: break-word;
  }
  .page-hero ~ .section .section-head .lead { font-size: .98rem; line-height: 1.5; max-width: none; }
  /* внутри секции блоки лежат в inline-сетке с gap 28px: на телефоне ближе друг к другу */
  .page-hero ~ .section .wrap > [style*="display:grid"] { gap: 18px !important; }
  .page-hero ~ .section .wrap[style*="display:grid"] { gap: 14px !important; }
  .page-hero ~ .section [style*="display:flex"] { gap: 0 !important; }

  /* Заголовок блока «Вопросы» в одном размере с остальными заголовками внутренних страниц */
  .page-hero ~ #voprosy .faq__aside .h2 {
    font-size: clamp(1.3rem, .92rem + 1.9vw, 1.62rem); line-height: 1.14; letter-spacing: -.035em; overflow-wrap: break-word;
  }
  /* Финальный заголовок: размер задан inline-стилем страницы, на телефоне он больше, чем на главной */
  .page-hero ~ #kontakty .final__title { font-size: clamp(1.62rem, 1rem + 2.7vw, 2.05rem) !important; line-height: 1.1; }

  /* ============================ Карточки-«карусели» ============================
     Шесть карточек подряд занимали по 1500–2000px. Теперь они листаются вбок:
     следующая карточка выглядывает из-за края, под рядом точки показывают, сколько их всего.
     Карточки в ряду одной высоты (stretch): тексты разной длины, и при flex-start под короткими карточками
     оставалась пустота до подсказки. Текст внутри карточки прижат к верху (align-content: start у самой карточки). */
  .page-hero ~ .section .feature-grid,
  .page-hero ~ .section .case-grid {
    display: flex; gap: 10px; align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
  }
  .page-hero ~ .section .feature-grid::-webkit-scrollbar,
  .page-hero ~ .section .case-grid::-webkit-scrollbar { display: none; }

  .page-hero ~ .section .feature-grid > li {
    flex: 0 0 min(88%, 320px); min-width: 0; scroll-snap-align: start;
    padding: 18px 18px 20px; gap: 7px; border-radius: 20px;
  }
  .page-hero ~ .section .feature-grid b { font-size: 1.02rem; line-height: 1.28; overflow-wrap: break-word; }
  .page-hero ~ .section .feature-grid p { font-size: .96rem; line-height: 1.5; }

  /* Этапы: номер в плашке (счётчик CSS, разметка не меняется) */
  .page-hero ~ .section ol.feature-grid { counter-reset: fg-step; }
  .page-hero ~ .section ol.feature-grid > li { counter-increment: fg-step; }
  .page-hero ~ .section ol.feature-grid > li::before {
    content: counter(fg-step); display: grid; place-items: center; justify-self: start;
    width: 30px; height: 30px; margin-bottom: 4px; border-radius: 10px;
    background: var(--accent-wash); color: var(--accent-text);
    font: 700 .92rem/1 var(--font-display);
  }
  .page-hero ~ .section--night ol.feature-grid > li::before { background: rgba(142, 155, 255, .16); color: var(--accent-hi); }

  /* Кейсы */
  .page-hero ~ .section .case-grid > .case {
    flex: 0 0 min(88%, 330px); min-width: 0; scroll-snap-align: start;
    padding: 18px; gap: 10px; border-radius: 20px;
  }
  .page-hero ~ .section .case-grid > .case:only-child { flex-basis: 100%; }
  /* плашки идут сразу за текстом (без растягивания рядов внутри карточки одной высоты) */
  .page-hero ~ .section .case-grid > .case { align-content: start; }
  .page-hero ~ .section .case-grid > .case .case__feats { margin-top: 0; padding-top: 4px; }
  .page-hero ~ .section .case h3 { font-size: 1.1rem; line-height: 1.25; overflow-wrap: break-word; }
  .page-hero ~ .section .case p { font-size: .96rem; line-height: 1.5; }
  .page-hero ~ .section .case__tag { font-size: .88rem; }
  /* платформы на карточке: у них на этих страницах нет оформления, без него «Сайт Mini App» читается как одна фраза */
  .page-hero ~ .section .case__plats span {
    padding: 3px 9px; border-radius: 8px; background: var(--accent-wash); color: var(--accent-text);
    font: 600 .85rem/1.3 var(--font-body); white-space: nowrap;
  }
  .page-hero ~ .section .case__feats li { font-size: .86rem; line-height: 1.3; padding: 5px 10px; border-radius: 14px; }
  .page-hero ~ .section .case__feats > li.is-hid { display: none; }
  .page-hero ~ .section .case__feats > li.case__feats-more { padding: 0; box-shadow: none; }
  .page-hero ~ .section .case__feats > li.case__feats-more[hidden] { display: none; }
  .page-hero ~ .section .case__feats > li.case__feats-more button {
    position: relative; display: block; padding: 5px 11px; border: 0; border-radius: 14px; cursor: pointer;
    font: 600 .86rem/1.3 var(--font-body); color: var(--accent-text); background: var(--accent-wash);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .page-hero ~ .section .case__feats > li.case__feats-more button::after { content: ""; position: absolute; inset: -9px -6px; } /* зона нажатия ≥44px */
  .page-hero ~ .section .case__feats > li.case__feats-more button:active { opacity: .65; }

  .page-hero ~ .section .feature-grid:focus-visible,
  .page-hero ~ .section .case-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

  /* Подсказка и точки под каруселью (их добавляет 67-m-inner.js) */
  .page-hero ~ .section .fg-nav {
    display: flex; align-items: center; gap: 12px; min-height: 26px; margin-top: 8px;
    font-size: .92rem; line-height: 1.2; color: var(--ink-3);
  }
  .page-hero ~ .section .fg-nav__hint { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
  .page-hero ~ .section .fg-nav__hint svg { width: 18px; height: 18px; flex: none; }
  .page-hero ~ .section .fg-nav__dots { display: inline-flex; align-items: center; gap: 6px; flex: none; }
  .page-hero ~ .section .fg-nav__dots i {
    width: 6px; height: 6px; border-radius: 3px; background: var(--ink-3); opacity: .6;
    transition: width .25s var(--ease), background-color .25s, opacity .25s;
  }
  .page-hero ~ .section .fg-nav__dots i.is-on { width: 20px; background: var(--accent); opacity: 1; }
  /* в блоках с inline-сеткой уже есть отступ 18px: точки прижимаем к своему ряду, а не к следующему блоку */
  .page-hero ~ .section .wrap > [style*="display:grid"] > .fg-nav { margin-top: -8px; }
  .page-hero ~ .section--night .fg-nav { color: var(--on-panel-2); }
  .page-hero ~ .section--night .fg-nav__dots i { background: var(--on-panel-2); }
  .page-hero ~ .section--night .fg-nav__dots i.is-on { background: var(--accent-hi); opacity: 1; }

  /* ============================ Цены ============================
     Таблица шириной 560px уезжала за экран. На телефоне каждая строка становится карточкой:
     название и цена, срок, что входит. Шапку таблицы прячем визуально (читалки экрана её видят). */
  .page-hero ~ .section .table-wrap { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .page-hero ~ .section .price-table { display: block; min-width: 0; width: 100%; font-size: .96rem; }
  .page-hero ~ .section .price-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .page-hero ~ .section .price-table tbody { display: grid; gap: 10px; }
  /* Строка: название слева, цена справа. Если самое длинное слово названия и цена вместе не помещаются
     в ширину (320px и длинные слова вроде «Высоконагруженный»), цена уходит на свою строку, а не наезжает на текст. */
  .page-hero ~ .section .price-table tr {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px;
    padding: 16px 18px 17px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  }
  .page-hero ~ .section .price-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .page-hero ~ .section .price-table td:nth-child(1) {
    order: 1; flex: 1 1 0; min-width: min-content; font-size: 1.05rem; line-height: 1.3; color: var(--ink); overflow-wrap: break-word;
  }
  .page-hero ~ .section .price-table td:nth-child(2) {
    order: 2; flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap;
    font: 700 1.05rem/1.3 var(--font-body); color: var(--accent-text);
  }
  .page-hero ~ .section .price-table td:nth-child(3) { order: 3; flex: 0 0 100%; white-space: normal; color: var(--ink-3); font-size: .93rem; }
  .page-hero ~ .section .price-table td:nth-child(3)::before { content: "Срок: "; }
  .page-hero ~ .section .price-table td:nth-child(3):lang(en)::before { content: "Timeline: "; }
  .page-hero ~ .section .price-table td:nth-child(4) { order: 4; flex: 0 0 100%; margin-top: 5px; color: var(--ink-2); line-height: 1.5; }
  .page-hero ~ .section .price-table tr:last-child td { border-bottom: 0; }

  /* ============================ Текст и списки ============================ */
  .page-hero ~ .section .prose { gap: 12px; font-size: 1rem; line-height: 1.6; max-width: none; overflow-wrap: break-word; }
  .page-hero ~ .section .prose h2 { font-size: 1.28rem; line-height: 1.2; margin-top: 12px; }
  .page-hero ~ .section .prose h3 { margin-top: 0; font-size: 1.08rem; line-height: 1.3; }
  .page-hero ~ .section .prose ul,
  .page-hero ~ .section .prose ol { gap: 7px; padding-left: 20px; }
  .page-hero ~ .section .muted { font-size: .96rem; line-height: 1.5; }
  /* ссылки внутри предложения («Telegram-боты», «Telegram Mini Apps»): зона нажатия ≥44px за счёт внутреннего отступа,
     строки текста не раздвигаются (у строчного элемента вертикальный padding высоту строки не меняет) */
  .page-hero ~ .section .muted a:not(.link-arrow),
  .page-hero ~ .section .prose a:not(.link-arrow) { padding-block: 12px; }
  /* ссылки со стрелкой: стрелка идёт сразу за текстом, а не прижата к правому краю; зона нажатия ≥44px */
  .page-hero ~ .section .link-arrow { display: block; padding-block: 11px; font-size: 1rem; line-height: 1.35; text-wrap: balance; }
  .page-hero ~ .section .link-arrow svg { display: inline-block; vertical-align: -3px; margin-left: 6px; }
  .page-hero ~ .section [style*="display:flex"] { flex-direction: column; align-items: flex-start; }
  /* блок «Что закрепляем в договоре» между двумя рядами карточек: подпись ряда, а не абзац */
  .page-hero ~ .section .wrap > [style*="display:grid"] > .prose:has(> h3:only-child) { margin-top: 6px; }

  /* Технологии: меньше и плотнее, чтобы 20–30 штук не занимали полэкрана */
  .page-hero ~ .section .chips { gap: 6px; }
  .page-hero ~ .section .chip { padding: 6px 11px; border-radius: 10px; font-size: .9rem; line-height: 1.2; }
  .page-hero ~ .section .chips .chip.is-off { display: none; }
  .page-hero ~ .section .chips__more { min-width: 0; }
  .page-hero ~ .section .chip-more {
    position: relative; border: 0; cursor: pointer; font-weight: 600; color: var(--accent-text);
    background: var(--accent-wash); box-shadow: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .page-hero ~ .section .chip-more::after { content: ""; position: absolute; inset: -9px -6px; } /* зона нажатия ≥44px */
  .page-hero ~ .section .chip-more:active { opacity: .65; }

  /* ============================ Другие услуги ============================ */
  .page-hero ~ .section .related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .page-hero ~ .section .related li { min-width: 0; }
  .page-hero ~ .section .related svg { flex: none; }
  .page-hero ~ .section .related li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-hero ~ .section .related a { min-height: 58px; padding: 10px 14px; border-radius: 16px; font-size: .96rem; line-height: 1.25; -webkit-tap-highlight-color: transparent; }
  .page-hero ~ .section .related a:hover { box-shadow: 0 0 0 1px var(--line); }
  .page-hero ~ .section .related a:active { box-shadow: 0 0 0 1.5px var(--accent); }
  .page-hero ~ .section #related-title { font-size: 1.2rem; }

  /* ============================ Политика: разделы-«гармошка» ============================
     Длинный юридический текст 10 000px: каждый раздел сворачивается, текст остаётся в разметке (его добавляет 67-m-inner.js). */
  .page-hero ~ .section .prose .prose-fold { border-top: 1px solid var(--line); }
  .page-hero ~ .section .prose .prose-fold:last-child { border-bottom: 1px solid var(--line); }
  .page-hero ~ .section .prose .prose-fold > summary {
    display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 14px;
    min-height: 58px; padding: 12px 0; list-style: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .page-hero ~ .section .prose .prose-fold > summary::-webkit-details-marker { display: none; }
  .page-hero ~ .section .prose .prose-fold > summary h2 { margin: 0; font: 600 1.04rem/1.3 var(--font-body); letter-spacing: 0; color: var(--ink); text-wrap: pretty; }
  .page-hero ~ .section .prose .prose-fold > summary i {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
    background: var(--hover); color: var(--ink);
  }
  .page-hero ~ .section .prose .prose-fold > summary i svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
  .page-hero ~ .section .prose .prose-fold[open] > summary i svg { transform: rotate(45deg); }
  .page-hero ~ .section .prose .prose-fold__body { display: grid; gap: 12px; padding: 0 0 20px; }
  /* строки гармошки стоят вплотную: разделитель один и тот же и у закрытой, и у открытой строки (промежуток .prose убираем) */
  .page-hero ~ .section .prose .prose-fold + .prose-fold { margin-top: -12px; }

  /* ============================ Списки «Что влияет на цену», «Гарантии» и похожие ============================
     Список из 4–6 пунктов с длинными пояснениями занимал по 350–850px. Теперь он свёрнут в строку-«гармошку»,
     весь текст на месте и открывается одним нажатием (разметку и открытие делает 67-m-inner.js). */
  .page-hero ~ .section .prose > .prose-acc {
    border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2);
  }
  .page-hero ~ .section .prose > .prose-acc > summary {
    display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 14px;
    min-height: 58px; padding: 12px 14px 12px 18px; list-style: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .page-hero ~ .section .prose > .prose-acc > summary::-webkit-details-marker { display: none; }
  .page-hero ~ .section .prose > .prose-acc > summary h3 { margin: 0; font-size: 1.06rem; line-height: 1.3; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
  .page-hero ~ .section .prose > .prose-acc > summary i {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
    background: var(--hover); color: var(--ink);
  }
  .page-hero ~ .section .prose > .prose-acc > summary i svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
  .page-hero ~ .section .prose > .prose-acc[open] > summary i svg { transform: rotate(45deg); }
  .page-hero ~ .section .prose > .prose-acc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 18px; }
  .page-hero ~ .section .prose > .prose-acc > .prose-acc__body { display: grid; gap: 12px; padding: 0 18px 18px; }
  .page-hero ~ .section .prose > .prose-acc > .prose-acc__body ul,
  .page-hero ~ .section .prose > .prose-acc > .prose-acc__body ol { padding-left: 18px; }
  .page-hero ~ .section--night .prose > .prose-acc { background: var(--panel-3); box-shadow: 0 0 0 1px var(--panel-line); color: var(--on-panel-2); }
  .page-hero ~ .section--night .prose > .prose-acc > summary h3 { color: var(--on-panel); }
  .page-hero ~ .section--night .prose > .prose-acc > summary i { background: rgba(240, 242, 246, .08); color: var(--on-panel); }

  /* Повтор той же мысли на двух соседних строках (в тексте на странице «Мини-приложения»): на телефоне показываем один раз */
  .page-hero ~ .section .m-dup { display: none; }

  /* Числовые диапазоны «2–3», которые не должны рваться по тире (оборачивает 67-m-inner.js) */
  .page-hero ~ .section .nb,
  .page-hero .nb { white-space: nowrap; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .page-hero ~ .section .fg-nav__dots i,
  .page-hero ~ .section .prose .prose-fold > summary i svg,
  .page-hero ~ .section .prose > .prose-acc > summary i svg { transition: none; }
}

/* ============================ Узкие экраны ============================ */
@media (max-width: 360px) {
  .page-hero ~ .section .feature-grid > li { padding: 16px 16px 18px; }
  .page-hero ~ .section .case-grid > .case { padding: 16px; }
  .page-hero ~ .section .price-table tr { padding: 14px 16px 15px; }
}
/* цифры в шапке: на 320–400px в плашке остаётся 115–145px, самые длинные значения («от 150 000 ₽», «меньше 1 секунды») должны влезать */
@media (max-width: 400px) {
  .page-hero .page-hero__facts li { padding: 11px 10px 12px 12px; }
  .page-hero .page-hero__facts b { font-size: .96rem; }
}
@media (max-width: 340px) {
  .page-hero .page-hero__facts li { padding-inline: 9px; font-size: .82rem; }
  .page-hero .page-hero__facts b { font-size: .92rem; }
}

/* ---- css/mobile/80-tablet.css ---- */
/* --------------------------------------------------------------------------
   Планшеты (761–1024px) и телефоны в альбомной ориентации.
   Телефонные правила (≤760) и десктопные (≥1025) здесь не меняются: всё лежит внутри media-запросов
   «планшетного» диапазона. Единственное исключение: русская шапка, см. первый блок (там сама ошибка тянется до 1059px).

   Что решено:
   - шапка (RU): кнопка «Рассчитать проект» уезжала за правый край на iPad в альбомной ориентации;
   - меню-«шторка» открывалась в левом нижнем углу, далеко от кнопки-бургера;
   - калькулятор: липкая цена налезала на полоску шагов;
   - карточки, которые оставались одни в ряду (пустая половина экрана): услуги, кейсы, внутренние страницы;
   - подписи платформ на карточках кейсов внутренних страниц;
   - ноутбук-сцена на телефонах в альбомной ориентации: текст обрезался снизу;
   - мелочи: заголовки секций, подсказка у телефона, кнопки первого экрана.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   Шапка и меню
   ========================================================================== */

/* Русское меню (шесть пунктов) вместе с кнопками шапки занимает около 1020px, поэтому на 1001–1059px
   кнопка справа уходила за край экрана. До 1100px показываем «бургер», как на остальных планшетах.
   Английская шапка уже короче и помещается, её не трогаем. */
@media (min-width: 1001px) and (max-width: 1100px) {
  :root[lang="ru"] .nav { display: none; }
  :root[lang="ru"] .burger { display: grid; }
  :root[lang="ru"] .header-actions { margin-left: auto; }
}

/* Меню-шторка: на планшете она открывается под кнопкой-бургером, в правом верхнем углу, а не в левом нижнем.
   Внутри 1001–1100 это нужно только русской версии (там бургер включён блоком выше). */
@media (min-width: 761px) and (max-width: 1000px) {
  .menu-panel {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 10px);
    right: max(16px, env(safe-area-inset-right, 0px));
    left: auto; bottom: auto;
    width: min(400px, calc(100% - 32px));
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 28px);
    border-radius: 24px;
  }
  .menu-panel:not(:popover-open) { translate: 0 -12px; }
  @starting-style { .menu-panel:popover-open { translate: 0 -12px; opacity: 0; } }
}
@media (min-width: 1001px) and (max-width: 1100px) {
  :root[lang="ru"] .menu-panel {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 10px);
    right: max(16px, env(safe-area-inset-right, 0px));
    left: auto; bottom: auto;
    width: min(400px, calc(100% - 32px));
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 28px);
    border-radius: 24px;
  }
  :root[lang="ru"] .menu-panel:not(:popover-open) { translate: 0 -12px; }
  @starting-style { :root[lang="ru"] .menu-panel:popover-open { translate: 0 -12px; opacity: 0; } }
}


/* ==========================================================================
   Первый экран
   ========================================================================== */

/* Подсказка «Потяните, чтобы покрутить» и кнопка наклона стояли у левого края, а телефон и переключатель по центру */
@media (min-width: 761px) and (max-width: 1024px) {
  .showroom__hud { justify-content: center; }
}

/* iPad в альбомной ориентации: заголовок в пять строк и вертикальное выравнивание по центру выталкивали вторую кнопку
   под сгиб экрана. Заголовок чуть меньше, текст прижат к верху (над ним была пустая полоса), обе кнопки в одну строку. */
@media (min-width: 961px) and (max-width: 1024px) {
  #top .hero__grid { align-items: start; }
  #top .hero__copy { padding-top: 16px; }
  #top .hero__display { font-size: clamp(2.15rem, 1.05rem + 3.2vw, 3.6rem); }
  #top .hero__ctas { flex-wrap: nowrap; gap: 10px; }
  #top .hero__ctas .btn { padding-inline: 16px; white-space: nowrap; }
}


/* ==========================================================================
   Услуги, кейсы: карточки без пары
   ========================================================================== */

/* Две колонки: «Сайты» на всю ширину, потом пары, а «Игры» оставались одни, и справа зияла пустота.
   Теперь «Игры» тоже на всю ширину, но внутри в две колонки: название слева, описание справа. */
@media (min-width: 761px) and (max-width: 1000px) {
  #uslugi .svc-grid > .svc:not(.svc--wide):nth-child(6) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto auto;
    column-gap: 32px; align-content: start;
  }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__top { grid-column: 1; grid-row: 1; justify-content: flex-start; align-items: center; gap: 14px; }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__title { grid-column: 1; grid-row: 2; }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__text { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__meta { grid-column: 1 / -1; grid-row: 3; }

  /* Тёмная карточка «Следующий проект может быть вашим» тоже оставалась одна в ряду: растягиваем её на всю ширину */
  #keysy .case--cta {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    column-gap: 32px; row-gap: 12px; align-content: center; align-items: start;
  }
  #keysy .case--cta > .kicker,
  #keysy .case--cta > h3,
  #keysy .case--cta > p { grid-column: 1; }
  #keysy .case--cta > div { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; }
}

/* 1001–1100px (планшет в альбомной ориентации, небольшой ноутбук): «Игры» стояли узкой карточкой (≈300px) рядом с широким «Бэкендом».
   Колонка текста у «Бэкенда» при такой ширине узкая, карточка вытягивается почти на 700px, а у «Игр» под коротким текстом
   остаётся пустое поле. Здесь обе карточки идут на всю ширину: «Игры» полосой (название слева, описание справа, как в 761–1000px),
   «Бэкенд» с текстом и терминалом в две равные половины. От 1101px ничего не меняется. */
@media (min-width: 1001px) and (max-width: 1100px) {
  #uslugi .svc-grid > .svc:not(.svc--wide):nth-child(6) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto auto;
    column-gap: 32px; align-content: start;
  }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__top { grid-column: 1; grid-row: 1; justify-content: flex-start; align-items: center; gap: 14px; }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__title { grid-column: 1; grid-row: 2; }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__text { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  #uslugi .svc-grid > .svc:nth-child(6) .svc__meta { grid-column: 1 / -1; grid-row: 3; }
  #uslugi .svc-grid > .svc--wide:nth-child(7) { grid-column: 1 / -1; }
}

/* Заголовок секции в две колонки: слева название, справа длинный лид. При выравнивании «по низу»
   название опускалось вниз, и над ним оставалась пустая полоса. */
@media (min-width: 861px) and (max-width: 1000px) {
  .section-head--split { align-items: start; }
}


/* ==========================================================================
   Калькулятор стоимости (#stoimost)
   ========================================================================== */

/* Липкая цена (.est__mini) стояла в карточке первой, а полоска шагов под ней. Если страница остановилась так,
   что верх карточки у самой шапки (скрипт докручивает только когда он выше экрана), цена «прилипала» на 74px от верха
   и закрывала полоску. Теперь полоска идёт первой, цена после неё: цена может наехать только на пустой промежуток,
   но не на полоску. На телефоне в альбомной ориентации (высота ≤520px) цена и так идёт обычным блоком, там ничего не меняем. */
@media (min-width: 761px) and (max-width: 960px) and (min-height: 521px) {
  #stoimost .est__progress { order: -1; }
  #stoimost .est__mini { margin: 0 -8px; transition: top .4s var(--ease); }
  /* когда шапка спряталась при прокрутке вниз, цена поднимается к верху экрана, а не висит с пустотой над собой */
  :root:has(.site-header.is-hidden) #stoimost .est__mini { top: 8px; }
}
@media (min-width: 761px) and (max-width: 960px) and (min-height: 521px) and (prefers-reduced-motion: reduce) {
  #stoimost .est__mini { transition: none; }
}

/* Варианты ответа: до 960px карточка калькулятора идёт в одну колонку, ширина контента 648–818px, и сетка
   repeat(auto-fill, minmax(200px, 1fr)) даёт три колонки. Шаг 2 «Какой масштаб?» у «Сайта» и «Мобильного приложения» состоит
   из четырёх вариантов: выходило 3 + 1 с одиноким четвёртым. Четыре варианта (их рисует JS в [data-scale-opts]) кладём
   в сетку 2 × 2; у остальных типов вариантов три, и три колонки их заполняют полностью, там ничего не меняем.
   Шаг 4 «Дизайн и сроки»: три варианта дизайна заполняют три колонки, а два варианта темпа занимали две трети строки
   с пустой третью справа, поэтому темп делим на две равные половины. */
@media (min-width: 761px) and (max-width: 960px) {
  #stoimost [data-scale-opts]:has(> .opt:nth-child(4):last-child),
  #stoimost [data-est-step="4"] .opts + .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   Внутренние страницы услуг
   ========================================================================== */

/* Платформы на карточке кейса («Telegram-бот», «Mini App»): без оформления они читались как одна фраза.
   Те же плашки, что на телефоне (70-inner.css). */
@media (min-width: 761px) and (max-width: 1024px) {
  .page-hero ~ .section .case__plats span {
    padding: 3px 9px; border-radius: 8px; background: var(--accent-wash); color: var(--accent-text);
    font: 600 .85rem/1.3 var(--font-body); white-space: nowrap;
  }
}

/* Кейсы идут в две колонки; если карточек нечётное число (1 или 3), последняя оставалась одна в левой половине.
   Растягиваем её на обе колонки. */
@media (min-width: 761px) and (max-width: 1024px) {
  .page-hero ~ .section .case-grid > .case:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Списки «что входит» в две колонки (761–910px): третья карточка из трёх стояла одна. Дальше колонок три. */
@media (min-width: 761px) and (max-width: 910px) {
  .page-hero ~ .section .feature-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-hero ~ .section .feature-grid > li:last-child:nth-child(odd) p { max-width: 46em; }
}

/* «Другие услуги»: пять ссылок. В три колонки они вставали как 3 + 2 с пустой третью справа; делаем 3 + 2 на всю ширину.
   Правило с :nth-child касается только списка ровно из пяти пунктов. */
@media (min-width: 772px) and (max-width: 1024px) {
  .related { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .related > li { grid-column: span 2; }
  .related > li:nth-child(4):nth-last-child(2),
  .related > li:nth-child(5):last-child { grid-column: span 3; }
}
/* 761–771px: две колонки, пятая ссылка одна в последнем ряду */
@media (min-width: 761px) and (max-width: 771px) {
  .related > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ==========================================================================
   Ноутбук-сцена (#sayty) на телефонах в альбомной ориентации и в невысоких окнах
   ========================================================================== */
/* От 901px ширины сцена «закреплена» на высоту экрана (100svh), а у телефона на боку экран ниже 450px:
   заголовок в четыре строки, полоска и три шага не помещались, нижний шаг обрезался и до него нельзя докрутить.
   Здесь заголовок и шаги компактнее; описания шагов и лид уже скрыты правилом main.css (высота ≤760px). */
@media (min-width: 901px) and (max-width: 1024px) and (max-height: 520px) {
  .webscene__copy { gap: 10px; padding-top: calc(var(--header-h) * .6); }
  .webscene__copy .h2 { font-size: clamp(1.2rem, 3.4vw, 1.65rem); line-height: 1.12; }
  .wsteps { margin-top: 2px; gap: 0; }
  .wstep { grid-template-columns: 36px 1fr; padding: 8px 0; }
  .wstep b { font-size: 1.02rem; }
  .wstep__icon { width: 36px; height: 36px; border-radius: 11px; }
  .wstep__icon svg { width: 20px; height: 20px; }
}
/* Ширина 901–960px и высота 521–800px (окно планшета с панелью браузера): текст шагов вылезал снизу на 20–30px.
   Чуть плотнее отступы, всё содержимое остаётся. */
@media (min-width: 901px) and (max-width: 960px) and (min-height: 521px) and (max-height: 800px) {
  .webscene__copy { gap: 10px; padding-top: calc(var(--header-h) * .6); }
  .wstep { padding: 8px 0; }
}