/*
 * ЛИНЗА — САЙТ. Один файл стилей на все страницы.
 *
 * Дизайн-система одна с приложением: значения перенесены из
 * src/renderer/src/glass/tokens.css (цвет, радиусы, кегли, кривые),
 * стекло — из glass/Glass.tsx и glass/LiquidGlass.tsx (девять теней).
 *
 * Порядок разделов:
 *   1. шрифты          — локальные файлы, никакого интернета
 *   2. токены          — светлая тема, ниже тёмная по prefers-color-scheme
 *   3. основа          — сброс, типографика, контейнер
 *   4. стекло          — .glass: четыре слоя лица + тело из девяти теней
 *   5. фон             — плывущие пятна, иначе стеклу нечего размывать
 *   6. кирпичи         — кнопки, чипы, шапка, подвал
 *   7. разделы         — hero и макет острова, шаги, режимы, цены, вопросы
 *   8. .page           — страницы-тексты (оферта, конфиденциальность, помощь)
 *   9. движение        — каскад появления, prefers-reduced-motion
 */

/* ── 1. шрифты ─────────────────────────────────────────────────── */
/* Google Sans разбит по unicode-range теми же диапазонами, что в приложении:
   браузер качает только нужные подмножества. */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/GoogleSans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/GoogleSans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/GoogleSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/GoogleSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Onest-Variable.ttf') format('truetype');
}

/* ── 2. токены ─────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* акценты приложения */
  --accent: #0088ff;
  --accent-hover: #0a90ff;
  --accent-2: #00c3d0;
  --green: #34c759;
  --red: #ff3b30;
  --indigo: #5856d6;

  /* текст и заливки */
  --ink: #1d1d1f;
  --ink-2: rgba(67, 66, 66, 0.74);
  --ink-3: rgba(67, 66, 66, 0.42);
  --on-fill: #ffffff;
  --fill: rgba(67, 66, 66, 0.08);
  --fill-2: rgba(67, 66, 66, 0.14);
  --hairline: rgba(67, 66, 66, 0.14);
  --code-bg: rgba(29, 29, 31, 0.06);

  /* страница под стеклом */
  --page-bg: #eef1f6;
  --blob-1: rgba(0, 136, 255, 0.42);
  --blob-2: rgba(0, 195, 208, 0.34);
  --blob-3: rgba(88, 86, 214, 0.26);
  --blob-4: rgba(0, 136, 255, 0.18);

  /* стекло: лицо */
  --glass-tone: 255, 255, 255;
  --glass-density: 0.2;
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  --glass-edge-top: rgba(255, 255, 255, 0.55);
  --glass-edge-left: rgba(255, 255, 255, 0.25);
  --glass-edge-bottom: rgba(255, 255, 255, 0.12);
  --glass-shine: rgba(255, 255, 255, 0.38);
  --kbd-fill: rgba(255, 255, 255, 0.22);
  --liquid-line: 0, 0, 0;
  --liquid-halo: 255, 255, 255;

  /* радиусы */
  --r-hair: 3px;
  --r-nano: 6px;
  --r-micro: 8px;
  --r-tile: 12px;
  --r-card: 20px;
  --r-panel: 24px;
  --r-hero: 36px;
  --r-capsule: 400px;

  /* отступы: сетка 4 */
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 12px;
  --s-l: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;

  /* тени */
  --shadow-chip: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 48px rgba(0, 0, 0, 0.12);
  --shadow-accent: 0 2px 8px rgba(0, 136, 255, 0.24), 0 10px 30px rgba(0, 136, 255, 0.2);

  /* шрифт и роли */
  --font-ui: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Onest', var(--font-ui);
  --track: -0.02em;

  --t-display-l: 600 clamp(34px, 5.6vw, 56px) / 1.06 var(--font-ui);
  --t-display-m: 600 clamp(26px, 3.4vw, 38px) / 1.12 var(--font-ui);
  --t-headline-l: 600 24px/28px var(--font-ui);
  --t-headline-m: 600 22px/26px var(--font-ui);
  --t-headline-s: 600 20px/24px var(--font-ui);
  --t-title-l: 500 18px/22px var(--font-ui);
  --t-title-m: 500 17px/20px var(--font-ui);
  --t-title-s: 500 16px/20px var(--font-ui);
  --t-body-l: 500 17px/26px var(--font-ui);
  --t-body-m: 500 16px/24px var(--font-ui);
  --t-body-s: 500 15px/22px var(--font-ui);
  --t-label-l: 500 14px/18px var(--font-ui);
  --t-label-s: 500 12px/16px var(--font-ui);
  --t-price: 600 40px/1 var(--font-num);

  /* движение: одна пружина без отскока */
  --appear: 630ms;
  --quick: 230ms;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ink: #f5f5f7;
    --ink-2: rgba(235, 235, 245, 0.72);
    --ink-3: rgba(235, 235, 245, 0.4);
    --fill: rgba(255, 255, 255, 0.1);
    --fill-2: rgba(255, 255, 255, 0.16);
    --hairline: rgba(255, 255, 255, 0.16);
    --code-bg: rgba(255, 255, 255, 0.08);

    --page-bg: #0a0c11;
    --blob-1: rgba(0, 136, 255, 0.5);
    --blob-2: rgba(0, 195, 208, 0.34);
    --blob-3: rgba(88, 86, 214, 0.36);
    --blob-4: rgba(0, 136, 255, 0.2);

    --glass-tone: 28, 28, 32;
    --glass-density: 0.34;
    --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    --glass-edge-top: rgba(255, 255, 255, 0.28);
    --glass-edge-left: rgba(255, 255, 255, 0.14);
    --glass-edge-bottom: rgba(255, 255, 255, 0.06);
    --glass-shine: rgba(255, 255, 255, 0.16);
    --kbd-fill: rgba(255, 255, 255, 0.12);
    --liquid-line: 255, 255, 255;
    --liquid-halo: 255, 255, 255;

    --shadow-chip: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 48px rgba(0, 0, 0, 0.45);
    --shadow-accent: 0 2px 8px rgba(0, 136, 255, 0.3), 0 10px 30px rgba(0, 136, 255, 0.24);
    --accent-hover: #2b9dff;
  }
}

/* ── 3. основа ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
  color: var(--ink);
  font: var(--t-body-m);
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-micro);
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--s-xl);
}

.section {
  padding: clamp(56px, 8vw, 104px) 0;
}

.section-head {
  max-width: 640px;
  margin: 0 0 var(--s-xxl);
}

.section-title {
  font: var(--t-display-m);
  letter-spacing: var(--track);
  margin: 0 0 var(--s-m);
}

.section-sub {
  font: var(--t-body-l);
  color: var(--ink-2);
  margin: 0;
}

.eyebrow {
  display: inline-block;
  font: var(--t-label-l);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-m);
}

.muted {
  color: var(--ink-2);
}

.small {
  font: var(--t-label-l);
  color: var(--ink-3);
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 4. стекло ─────────────────────────────────────────────────── */
/*
 * Четыре слоя лица собраны на одном элементе:
 *   преломление — backdrop-filter: blur(14px) saturate(1.35) brightness(1.08);
 *   подложка    — градиент тоном стекла, ярче к левому верхнему углу;
 *   кромка      — светлая обводка изнутри, ярче сверху и слева;
 *   блик        — ::before, мягкое пятно слева вверху.
 * Тело — девять теней из LiquidGlass.liquidShadows(), дословно.
 *
 * Грабля: opacity/filter/mask на РОДИТЕЛЕ стекла заводит новый backdrop root
 * и размывать становится нечего. Поэтому появление анимируется на самом .glass
 * (класс .reveal вешается на карточку, не на обёртку).
 */
.glass {
  --glass-radius: var(--r-card);
  position: relative;
  overflow: hidden;
  border-radius: var(--glass-radius);
  background: linear-gradient(
    160deg,
    rgba(var(--glass-tone), calc(var(--glass-density) + 0.06)) 0%,
    rgba(var(--glass-tone), var(--glass-density)) 42%,
    rgba(var(--glass-tone), calc(var(--glass-density) * 0.55)) 100%
  );
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.08);
  backdrop-filter: blur(14px) saturate(1.35) brightness(1.08);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-edge-top),
    inset 1px 0 0 var(--glass-edge-left),
    inset 0 -1px 0 var(--glass-edge-bottom),
    /* девять теней «тела» */
    0 0 6px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3px rgba(var(--liquid-line), 0.9),
    inset -3px -3px 0.5px -3px rgba(var(--liquid-line), 0.85),
    inset 1px 1px 1px -0.5px rgba(var(--liquid-line), 0.6),
    inset -1px -1px 1px -0.5px rgba(var(--liquid-line), 0.6),
    inset 0 0 6px 6px rgba(var(--liquid-line), 0.12),
    inset 0 0 2px 2px rgba(var(--liquid-line), 0.06),
    0 0 12px rgba(var(--liquid-halo), 0.15);
}

/* блик слева вверху */
.glass::before {
  content: '';
  position: absolute;
  left: -10%;
  top: -60%;
  width: 70%;
  height: 160%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--glass-shine) 0%, rgba(255, 255, 255, 0) 100%);
}

.glass > * {
  position: relative;
}

/* браузер без backdrop-filter: стекло не должно стать прозрачной дырой */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass {
    --glass-density: 0.72;
  }
}

.glass-card {
  --glass-radius: var(--r-panel);
  padding: var(--s-xl);
}

.glass-card.is-hero {
  --glass-radius: var(--r-hero);
}

/* ── 5. фон: плывущие пятна ───────────────────────────────────── */
/* Под стеклом обязан быть живой слой, иначе размывать нечего. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

.bg .b1 {
  width: 46vw;
  height: 46vw;
  min-width: 320px;
  min-height: 320px;
  left: -8vw;
  top: -6vw;
  background: radial-gradient(closest-side, var(--blob-1), rgba(0, 136, 255, 0) 100%);
  animation: drift-a 46s linear infinite;
}

.bg .b2 {
  width: 40vw;
  height: 40vw;
  min-width: 280px;
  min-height: 280px;
  right: -6vw;
  top: 4vw;
  background: radial-gradient(closest-side, var(--blob-2), rgba(0, 195, 208, 0) 100%);
  animation: drift-b 58s linear infinite;
}

.bg .b3 {
  width: 52vw;
  height: 52vw;
  min-width: 320px;
  min-height: 320px;
  left: 22vw;
  bottom: -18vw;
  background: radial-gradient(closest-side, var(--blob-3), rgba(88, 86, 214, 0) 100%);
  animation: drift-c 64s linear infinite;
}

.bg .b4 {
  width: 34vw;
  height: 34vw;
  min-width: 240px;
  min-height: 240px;
  right: 16vw;
  bottom: 6vw;
  background: radial-gradient(closest-side, var(--blob-4), rgba(0, 136, 255, 0) 100%);
  animation: drift-b 52s linear infinite reverse;
}

@keyframes drift-a {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(6vw, 4vw, 0); }
  50% { transform: translate3d(2vw, 9vw, 0); }
  75% { transform: translate3d(-4vw, 3vw, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes drift-b {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-5vw, 5vw, 0); }
  50% { transform: translate3d(-8vw, -2vw, 0); }
  75% { transform: translate3d(-2vw, -6vw, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes drift-c {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-7vw, -4vw, 0); }
  50% { transform: translate3d(3vw, -8vw, 0); }
  75% { transform: translate3d(7vw, -3vw, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── 6. кирпичи ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-s);
  height: 48px;
  padding: 0 var(--s-xl);
  border-radius: var(--r-capsule);
  font: var(--t-title-m);
  letter-spacing: var(--track);
  white-space: nowrap;
  transition: transform var(--quick) var(--ease-spring), background var(--quick) var(--ease-spring),
    box-shadow var(--quick) var(--ease-spring);
}

.btn:active {
  transform: scale(0.94);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-fill);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: var(--fill);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.btn-ghost:hover {
  background: var(--fill-2);
}

.btn-lg {
  height: 60px;
  padding: 0 var(--s-xxl);
  font: var(--t-headline-s);
  letter-spacing: var(--track);
}

.btn-sm {
  height: 40px;
  padding: 0 var(--s-l);
  font: var(--t-title-s);
}

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--s-s);
  border-radius: var(--r-capsule);
  background: var(--kbd-fill);
  font: var(--t-label-s);
  letter-spacing: 0;
}

/* ШАПКА */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--s-m) 0;
  transition: padding var(--appear) var(--ease-spring);
}

.site-header .header-inner {
  --glass-radius: var(--r-capsule);
  display: flex;
  align-items: center;
  gap: var(--s-l);
  height: 64px;
  padding: 0 var(--s-s) 0 var(--s-l);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-s);
  font: var(--t-title-m);
  letter-spacing: var(--track);
  flex: none;
}

.brand img {
  width: 26px;
  height: 26px;
  border-radius: var(--r-micro);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin-left: auto;
}

.site-nav a {
  padding: var(--s-s) var(--s-m);
  border-radius: var(--r-capsule);
  font: var(--t-title-s);
  color: var(--ink-2);
  transition: color var(--quick) var(--ease-spring), background var(--quick) var(--ease-spring);
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--fill);
}

.nav-cta {
  flex: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: var(--r-capsule);
  align-items: center;
  justify-content: center;
  background: var(--fill);
}

/* ПОДВАЛ */
.site-footer {
  padding: var(--s-xxl) 0 var(--s-xl);
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--hairline);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-m) var(--s-xl);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-m) var(--s-l);
  margin-left: auto;
}

.footer-links a,
.site-footer .copy {
  font: var(--t-body-s);
  color: var(--ink-2);
}

.footer-links a:hover {
  color: var(--ink);
}

/* ── 7. разделы ────────────────────────────────────────────────── */

/* HERO */
.hero {
  padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 96px);
}

/* макету острова нужно больше места, чем тексту: колонки не поровну */
.hero .container {
  max-width: 1240px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}

.hero h1 {
  font: var(--t-display-l);
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-l);
}

.hero h1 .accent {
  color: var(--accent);
}

.hero-sub {
  font: var(--t-body-l);
  color: var(--ink-2);
  margin: 0 0 var(--s-xl);
  max-width: 30em;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-m) var(--s-l);
}

.hero-note {
  margin: var(--s-m) 0 0;
  font: var(--t-label-l);
  color: var(--ink-3);
}

.hero-note a {
  color: var(--accent);
}

.hero-note a:hover {
  text-decoration: underline;
}

/* МАКЕТ ОСТРОВА: чистый HTML/CSS, не картинка */
.mock {
  display: flex;
  flex-direction: column;
  gap: var(--s-m);
  max-width: 640px;
  width: 100%;
  justify-self: end;
}

.mock-island {
  --glass-radius: var(--r-capsule);
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 var(--s-s) 0 var(--s-m);
}

.mock-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--t-title-s);
  letter-spacing: var(--track);
  flex: none;
}

.mock-logo img {
  width: 22px;
  height: 22px;
  border-radius: var(--r-nano);
}

.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-capsule);
  font: var(--t-body-s);
  color: var(--ink);
  flex: none;
  box-shadow:
    inset 3px 3px 0.5px -3px rgba(var(--liquid-line), 0.9),
    inset -3px -3px 0.5px -3px rgba(var(--liquid-line), 0.85),
    inset 1px 1px 1px -0.5px rgba(var(--liquid-line), 0.6),
    inset -1px -1px 1px -0.5px rgba(var(--liquid-line), 0.6),
    inset 0 0 6px 6px rgba(var(--liquid-line), 0.12),
    0 0 12px rgba(var(--liquid-halo), 0.15);
}

.mock-field {
  flex: 1 1 auto;
  min-width: 116px;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 var(--s-m);
  border-radius: var(--r-capsule);
  background: var(--fill);
  color: var(--ink-3);
  font: var(--t-body-s);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-icon {
  flex: none;
  width: 32px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-capsule);
  color: var(--ink-2);
}

.mock-icon:hover {
  background: var(--fill);
  color: var(--ink);
}

.mock-ask {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 var(--s-m);
  border-radius: var(--r-capsule);
  background: var(--accent);
  color: var(--on-fill);
  font: var(--t-body-s);
  letter-spacing: var(--track);
  box-shadow: var(--shadow-accent);
  transition: transform var(--quick) var(--ease-spring), background var(--quick) var(--ease-spring);
}

.mock-ask:active {
  transform: scale(0.94);
}

.mock-ask.is-busy {
  background: var(--ink-2);
  box-shadow: none;
}

.mock-more {
  /* ⚠️ Центрируем ФЛЕКСОМ, а не line-height. У «⋯» рисунок глифа прижат к низу
     строки, поэтому при line-height: 1 и text-align точки вставали выше центра
     кнопки — владелец это увидел сразу. Флекс равняет по настоящей рамке. */
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 36px;
  border-radius: var(--r-capsule);
  color: var(--ink-2);
  font: var(--t-headline-m);
  line-height: 1;
}

/* карточка ответа */
.mock-card {
  --glass-radius: var(--r-hero);
  padding: var(--s-l);
  display: flex;
  flex-direction: column;
  gap: var(--s-m);
}

.mock-top {
  display: flex;
  align-items: center;
  gap: var(--s-m);
}

/* мини-снимок экрана — тоже чистый CSS */
.mock-shot {
  flex: none;
  width: 148px;
  height: 94px;
  border-radius: var(--r-tile);
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--glass-tone), 0.5), rgba(var(--glass-tone), 0.18));
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mock-shot i {
  display: block;
  height: 6px;
  border-radius: var(--r-hair);
  background: var(--fill-2);
}

.mock-shot i:nth-child(1) { width: 54%; background: var(--ink-3); }
.mock-shot i:nth-child(2) { width: 92%; }
.mock-shot i:nth-child(3) { width: 78%; }
.mock-shot .formula {
  height: 20px;
  width: 66%;
  border-radius: var(--r-micro);
  background: var(--fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--t-label-s);
  font-family: var(--font-num);
  color: var(--ink-2);
}

.mock-meta h3 {
  margin: 0 0 4px;
  font: var(--t-title-l);
  letter-spacing: var(--track);
}

.mock-meta p {
  margin: 0;
  font: var(--t-label-l);
  color: var(--ink-3);
}

.mock-answer {
  margin: 0;
  min-height: 72px;
  font: var(--t-body-s);
  color: var(--ink);
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1.1s steps(1, end) infinite;
}

.caret.is-off {
  display: none;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.mock-ask-row {
  display: flex;
  align-items: center;
  gap: var(--s-s);
}

.mock-refine {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 var(--s-m);
  border-radius: var(--r-capsule);
  background: var(--fill);
  color: var(--ink-3);
  font: var(--t-body-s);
}

.mock-send {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-capsule);
  background: var(--accent);
  color: var(--on-fill);
}

.mock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-s) var(--s-l);
  font: var(--t-label-l);
  color: var(--ink-2);
}

/* КАК РАБОТАЕТ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-l);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-m);
}

.step .n {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-capsule);
  background: var(--accent);
  color: var(--on-fill);
  font: var(--t-title-s);
  font-family: var(--font-num);
  font-weight: 600;
}

.step h3 {
  margin: 0;
  font: var(--t-headline-s);
  letter-spacing: var(--track);
}

.step p {
  margin: 0;
  font: var(--t-body-s);
  color: var(--ink-2);
}

.step .keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-s);
}

kbd {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-s);
  border-radius: var(--r-micro);
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font: var(--t-label-l);
  font-family: var(--font-num);
  letter-spacing: 0;
  color: var(--ink);
}

/* РЕЖИМЫ */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-l);
}

.mode h3 {
  margin: 0 0 var(--s-s);
  font: var(--t-headline-s);
  letter-spacing: var(--track);
  display: flex;
  align-items: center;
  gap: var(--s-s);
}

.mode p {
  margin: 0;
  font: var(--t-body-s);
  color: var(--ink-2);
}

.mode .ico {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-tile);
  background: var(--fill);
  color: var(--accent);
}

.mode.is-free {
  box-shadow:
    var(--glass-shadow),
    inset 0 0 0 1.5px var(--accent),
    inset 0 1px 0 var(--glass-edge-top);
}

/* КАК УСТРОЕНО */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-l);
}

.fact {
  display: flex;
  gap: var(--s-m);
  align-items: flex-start;
}

.fact .ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-tile);
  background: var(--fill);
  color: var(--accent);
}

.fact h3 {
  margin: 0 0 var(--s-xs);
  font: var(--t-title-l);
  letter-spacing: var(--track);
}

.fact p {
  margin: 0;
  font: var(--t-body-s);
  color: var(--ink-2);
}

.route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-s) var(--s-m);
  margin-top: var(--s-xl);
  padding: var(--s-m) var(--s-l);
  border-radius: var(--r-capsule);
  background: var(--fill);
  font: var(--t-body-s);
  color: var(--ink-2);
}

.route b {
  color: var(--ink);
  font-weight: 600;
}

.route span[aria-hidden] {
  color: var(--accent);
}

/* ЦЕНЫ */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-l);
  align-items: stretch;
}
/* Планов может быть и один. Растянутая во всю ширину карточка выглядит
   как баннер, а не как выбор, поэтому одинокую ограничиваем и ставим по центру. */
.plans:has(.plan:only-child) {
  grid-template-columns: minmax(260px, 420px);
  justify-content: center;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-m);
}

.plan.is-best {
  box-shadow:
    var(--glass-shadow),
    inset 0 0 0 1.5px var(--accent),
    inset 0 1px 0 var(--glass-edge-top);
}

.plan .badge {
  align-self: flex-start;
  padding: 4px var(--s-m);
  border-radius: var(--r-capsule);
  background: var(--accent);
  color: var(--on-fill);
  font: var(--t-label-s);
}

.plan h3 {
  margin: 0;
  font: var(--t-headline-m);
  letter-spacing: var(--track);
}

.plan .price {
  font: var(--t-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.plan .price small {
  font: var(--t-title-s);
  color: var(--ink-3);
  margin-left: 4px;
}

.plan .price-note {
  margin: -4px 0 0;
  font: var(--t-label-l);
  color: var(--ink-3);
}

.plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
  font: var(--t-body-s);
  color: var(--ink-2);
}

.plan li {
  display: flex;
  gap: var(--s-s);
  align-items: flex-start;
}

.plan li svg {
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

.plan .btn {
  margin-top: auto;
  width: 100%;
}

.plan-hint {
  margin: var(--s-xl) 0 0;
  font: var(--t-label-l);
  color: var(--ink-3);
}

/* ВОПРОСЫ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-m);
  max-width: 820px;
}

.faq details {
  --glass-radius: var(--r-panel);
  padding: 0;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-l) var(--s-xl);
  display: flex;
  align-items: center;
  gap: var(--s-m);
  font: var(--t-title-l);
  letter-spacing: var(--track);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--quick) var(--ease-spring);
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq details p {
  margin: 0;
  padding: 0 var(--s-xl) var(--s-l);
  font: var(--t-body-s);
  color: var(--ink-2);
  max-width: 62ch;
}

/* СКАЧАТЬ */
.download-card {
  --glass-radius: var(--r-hero);
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-l);
}

.download-card h2 {
  margin: 0;
  font: var(--t-display-m);
  letter-spacing: var(--track);
}

.download-card p {
  margin: 0;
  max-width: 46ch;
  font: var(--t-body-l);
  color: var(--ink-2);
}

.download-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-s) var(--s-l);
  font: var(--t-label-l);
  color: var(--ink-3);
}

/* ── 8. страницы-тексты (оферта, конфиденциальность, помощь) ───── */
.page {
  padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 80px);
}

.page-card {
  --glass-radius: var(--r-hero);
  padding: clamp(24px, 4vw, 48px);
  max-width: 820px;
}

.page h1 {
  font: var(--t-display-m);
  letter-spacing: var(--track);
  margin: 0 0 var(--s-l);
}

.page h2 {
  font: var(--t-headline-m);
  letter-spacing: var(--track);
  margin: var(--s-xxl) 0 var(--s-m);
}

.page h3 {
  font: var(--t-title-l);
  letter-spacing: var(--track);
  margin: var(--s-xl) 0 var(--s-s);
}

.page p,
.page li {
  font: var(--t-body-m);
  color: var(--ink-2);
}

.page p {
  margin: 0 0 var(--s-m);
  max-width: 68ch;
}

.page ul,
.page ol {
  margin: 0 0 var(--s-l);
  padding-left: 1.25em;
  max-width: 68ch;
}

.page li {
  margin-bottom: var(--s-s);
}

.page a {
  color: var(--accent);
}

.page a:hover {
  text-decoration: underline;
}

.page hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--s-xxl) 0;
}

.page code {
  font-family: var(--font-num);
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: var(--r-micro);
  font-size: 0.92em;
}

.page .updated {
  font: var(--t-label-l);
  color: var(--ink-3);
}

/* Пометки черновика в оферте и политике: «Черновик, до публикации показать юристу»
   и «ЗАГЛУШКА. TODO владельцу…». Без своего вида они читались бы как текст договора. */
.page .draft,
.page .todo {
  border-left: 3px solid var(--red);
  border-radius: var(--r-tile);
  background: var(--code-bg);
  padding: var(--s-m) var(--s-l);
  margin: 0 0 var(--s-xl);
  color: var(--ink-2);
}

.page .draft p {
  margin: 0;
}

.page .draft p,
.page .todo {
  font: var(--t-label-l);
}

/* ── 9. движение ───────────────────────────────────────────────── */
/* Каскад появления: класс висит на самом стекле, не на обёртке.
   Прячем ТОЛЬКО когда скрипт жив: .js вешает на <html> первая строка js/site.js.
   Не доехал файл (обрыв, кэш, ошибка) — текст просто виден, страница не пустая. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--appear) var(--ease-spring), transform var(--appear) var(--ease-spring);
  transition-delay: var(--delay, 0ms);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── адаптив ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mock {
    justify-self: stretch;
    max-width: 640px;
  }

  .steps {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header.is-open .site-nav {
    display: flex;
    position: absolute;
    left: var(--s-xl);
    right: var(--s-xl);
    top: 84px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-xs);
    padding: var(--s-m);
    border-radius: var(--r-panel);
    background: rgba(var(--glass-tone), 0.9);
    box-shadow: var(--shadow-card);
  }

  .site-header.is-open .site-nav a {
    padding: var(--s-m);
  }

  .nav-cta {
    display: none;
  }
}

@media (max-width: 620px) {
  .container {
    padding: 0 var(--s-l);
  }

  .glass-card {
    padding: var(--s-l);
  }

  .mock-island {
    height: 56px;
    gap: var(--s-xs);
    padding: 0 var(--s-xs) 0 var(--s-s);
  }

  .mock-logo span {
    display: none;
  }

  .mock-icon,
  .mock-more {
    display: none;
  }

  .mock-ask {
    height: 40px;
    padding: 0 var(--s-m);
  }

  .mock-ask .kbd {
    display: none;
  }

  .mock-shot {
    width: 108px;
    height: 70px;
  }

  /* в 108 px формула не влезает и переносится — сжимаем и запрещаем перенос */
  .mock-shot .formula {
    width: 82%;
    font-size: 10px;
    white-space: nowrap;
  }

  .site-header.is-open .site-nav {
    left: var(--s-l);
    right: var(--s-l);
  }

  .faq summary,
  .faq details p {
    padding-left: var(--s-l);
    padding-right: var(--s-l);
  }

  .footer-links {
    margin-left: 0;
  }
}

@media (max-width: 400px) {
  .mock-chip span {
    display: none;
  }

  .mock-field {
    font: var(--t-label-l);
  }
}

/* Уважаем «поменьше движения»: ни дрейфа фона, ни каскада, ни печати. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .bg span {
    animation: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .caret {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Ссылки «другая система» под кнопкой «Скачать»: неяркие, чтобы не спорить
   с основной кнопкой. Пусто (JS не заполнил) — строка не занимает места. */
.download-alt,
[data-dl-alt] {
  color: var(--ink-3);
}
.download-alt:empty,
[data-dl-alt]:empty {
  display: none;
}
.download-alt a,
[data-dl-alt] a {
  color: var(--accent);
  text-decoration: none;
}
.download-alt a:hover,
[data-dl-alt] a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   ВЁРСТКА ЛЕНДИНГА: первый экран по центру, кадр продукта полосой, ряды
   «текст и показ» через один зеркально, сетка сценариев.

   Порядок блоков взят у Ghost GPT (сначала показать продукт, потом объяснять
   его рядами), оформление — наше: те же токены, то же стекло, то же движение.
   ───────────────────────────────────────────────────────────────────────── */

/* Первый экран: текст по центру, под ним широкий кадр продукта. */
.hero-stack {
  display: block;
  text-align: center;
}
.hero-text {
  max-width: 720px;
  margin: 0 auto;
}
.hero-stack .hero-cta {
  justify-content: center;
}

/* Кадр продукта — то, ради чего человек и пришёл: видно сразу, до текста. */
.product-frame {
  margin-top: 44px;
  padding: 28px 24px;
  border-radius: var(--r-hero, 28px);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  box-shadow: var(--shadow-card);
}
.product-frame .mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}
.product-frame .mock-island,
.product-frame .mock-card {
  width: 100%;
}

/* Ряд «текст и показ». Через один — зеркально, как у них. */
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0;
}
.frow + .frow {
  border-top: 1px solid var(--hairline);
}
.frow.is-flip .frow-text {
  order: 2;
}
.frow-text h2 {
  margin: 8px 0 12px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.frow-text > p {
  margin: 0 0 16px;
  color: var(--ink-2);
}

/* Надзаголовок ряда: мелкий, вразрядку, акцентом. */
.flabel {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Два пункта под текстом — с галочкой, без маркера списка. */
.fbullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fbullets li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.fbullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.fbullets li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

/* Показ рядом с текстом: маленькие честные макеты, не картинки. */
.frow-media {
  display: flex;
  justify-content: center;
}
.frow-media > * {
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border-radius: var(--r-card, 20px);
}

.fm-shot {
  position: relative;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
/* Строки «текста на экране»: намеренно без слов — это форма, а не пример. */
.fm-line {
  height: 8px;
  border-radius: 4px;
  background: var(--fill, rgba(255, 255, 255, 0.08));
}
.fm-line:nth-child(1) { width: 62%; }
.fm-line:nth-child(2) { width: 92%; }
.fm-line:nth-child(3) { width: 78%; }
.fm-line:nth-child(4) { width: 45%; }
.fm-sel {
  position: absolute;
  inset: 28% 18%;
  border: 1.5px dashed var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.fm-call {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 190px;
  align-content: center;
}
.fm-tile {
  height: 56px;
  border-radius: 12px;
  background: var(--fill, rgba(255, 255, 255, 0.06));
}
.fm-tile.is-me {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.fm-note {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

.fm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: center;
  min-height: 190px;
}
.fm-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--fill, rgba(255, 255, 255, 0.06));
  font-size: 14px;
  color: var(--ink-2);
}
.fm-chip.is-on {
  background: var(--accent);
  color: #fff;
}

.fm-route {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  justify-content: center;
  text-align: center;
}
.fm-node {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--fill, rgba(255, 255, 255, 0.06));
  font-size: 14px;
}
.fm-node.is-back {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.fm-arrow {
  width: 1.5px;
  height: 14px;
  margin: 0 auto;
  background: var(--ink-3);
}

/* Сценарии: три карточки в ряд. */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}
.case p {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .frow {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 0;
  }
  /* На узком экране показ всегда ПОД текстом: зеркальность там только мешает. */
  .frow.is-flip .frow-text {
    order: 0;
  }
  .cases {
    grid-template-columns: 1fr;
  }
  .product-frame {
    padding: 18px 14px;
  }
}

/* Настоящий снимок окна в кадре продукта: не картинка-иллюстрация, а то, что
   человек увидит у себя. Тень рисует само окно, поэтому рамки тут нет. */
.product-shot {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   ПОДЪЁМ ДИЗАЙНА: композиция, глубина, детали.

   Система не менялась — те же токены, то же стекло, та же одна пружина.
   Менялось то, как это собрано: чем встречает первый экран, сколько воздуха
   между блоками, есть ли у карточек тело и отклик на руку.
   ───────────────────────────────────────────────────────────────────────── */

/* ── первый экран ─────────────────────────────────────────────────────── */

/* Заголовок крупнее и плотнее: он один такой на странице, и он должен звучать. */
.hero h1 {
  font: 600 clamp(40px, 6.4vw, 76px) / 1.02 var(--font-ui);
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-xl);
}
.hero-stack .hero-sub {
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
  font: var(--t-body-l);
  font-size: clamp(17px, 1.5vw, 20px);
}

/*
 * Три обещания под кнопкой.
 *
 * Первый экран отвечает на «что это» заголовком, а на «а мне-то что» —
 * вот этим рядом: без VPN, не видно на демонстрации, три дня бесплатно.
 * Раньше то же самое лежало мелкой серой строкой и не читалось вовсе.
 */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-s);
  margin: var(--s-xl) 0 0;
  padding: 0;
  list-style: none;
}
.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-s);
  height: 36px;
  padding: 0 var(--s-l);
  border-radius: var(--r-capsule);
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font: var(--t-label-l);
  color: var(--ink-2);
}
.hero-badges li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/*
 * Кадр продукта: свет под окном, а не просто рамка.
 *
 * Снимок лежит на подсвеченной подушке — так же, как настоящее окно лежит на
 * экране: под ним пятно акцента, по краю волосяная линия, тень уходит вниз.
 * Пустого места вокруг стало меньше: показывать надо продукт, а не поля.
 */
.product-frame {
  position: relative;
  margin-top: clamp(32px, 5vw, 56px);
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: var(--r-hero);
  background: linear-gradient(180deg, rgba(var(--glass-tone), 0.14), rgba(var(--glass-tone), 0.04));
  box-shadow:
    inset 0 0 0 1px var(--hairline),
    var(--shadow-card);
}
/* Свет под окном. Статичное пятно: бегущих бликов у нас не бывает. */
.product-frame::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 72%;
  height: 46%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blob-1), transparent 100%);
  filter: blur(48px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}
.product-shot {
  border-radius: var(--r-card);
}

/* ── ряды возможностей ────────────────────────────────────────────────── */

/* Воздуха больше, линеек меньше: ряды разделяет пауза, а не черта. */
.frow {
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(40px, 6vw, 88px) 0;
}
.frow + .frow {
  border-top: 0;
}
.frow-text h2 {
  font: 600 clamp(26px, 3.2vw, 40px) / 1.1 var(--font-ui);
  letter-spacing: -0.03em;
  margin: var(--s-m) 0 var(--s-l);
}
.frow-text > p {
  font: var(--t-body-l);
  max-width: 34em;
  margin-bottom: var(--s-xl);
}
.flabel {
  font: var(--t-label-l);
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* Показ рядом с текстом: тело, а не бледный прямоугольник. */
.frow-media > * {
  max-width: 460px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-panel);
}

/* ── карточки: отклик на руку ─────────────────────────────────────────── */
/*
 * Наведение поднимает карточку на 2 px той же пружиной, что и всё в
 * приложении. Второй кривой не заводим, отскока нет.
 */
.case,
.plan,
.faq details {
  transition:
    transform var(--quick) var(--ease-spring),
    box-shadow var(--quick) var(--ease-spring);
}
.case:hover,
.plan:hover {
  transform: translateY(-2px);
}
.case {
  padding: clamp(20px, 2.4vw, 28px);
}
.case h3 {
  font: var(--t-headline-s);
  letter-spacing: var(--track);
}
.case p {
  font: var(--t-body-s);
}

/* ── заголовки разделов по центру ─────────────────────────────────────── */
/* Первый экран по центру, значит и разделы по центру: одна ось на страницу. */
.section-head {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-title {
  font: 600 clamp(26px, 3.4vw, 42px) / 1.1 var(--font-ui);
  letter-spacing: -0.03em;
}

/* ── вопросы: стрелка поворачивается ──────────────────────────────────── */
.faq summary {
  position: relative;
  padding-right: 44px;
}
.faq summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--quick) var(--ease-spring);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

@media (max-width: 900px) {
  .hero h1 {
    letter-spacing: -0.02em;
  }
  .product-frame::before {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   ЯРКО И ПЛОТНО.

   Владелец: «сделано ИИ — это видно». Выдавали нас три вещи, и все три
   убраны здесь: размытые пятна на фоне, три одинаковые карточки в ряд с
   текстами одинаковой длины, и равные отступы всюду.

   Вместо пятен — плотный направленный градиент. Вместо ровной сетки —
   плитки разного размера. Вместо серых прямоугольников — снимки живого окна.
   ───────────────────────────────────────────────────────────────────────── */

/*
 * ФОН. Пятна с анимацией «drift» отключены: мягкие цветные шары под блюром —
 * первое, по чему узнают страницу, собранную по шаблону. Ставим один
 * направленный градиент с внятными переходами: он ярче, плотнее и не плывёт.
 * Стеклу есть что размывать — градиент никуда не делся, просто перестал
 * притворяться живым.
 */
.bg span {
  display: none;
}
body {
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(0, 195, 208, 0.5), transparent 60%),
    radial-gradient(100% 70% at 8% 0%, rgba(0, 136, 255, 0.62), transparent 58%),
    radial-gradient(90% 60% at 50% 108%, rgba(88, 86, 214, 0.5), transparent 62%),
    var(--page-bg);
  background-attachment: fixed;
}

/* Плотнее: секции ближе друг к другу, воздух работает внутри плиток. */
.section.is-tight {
  padding: clamp(24px, 3vw, 44px) 0;
}

/* ── сетка плиток ─────────────────────────────────────────────────────── */
/*
 * Шесть плиток разного размера в четыре колонки. Одинаковых рядов нет
 * намеренно: ровная сетка из трёх карточек — как раз то, что читается
 * шаблоном.
 */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-m);
}
.tile {
  --glass-radius: var(--r-panel);
  grid-column: span 1;
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
}
.tile h2 {
  margin: 0;
  font: 600 clamp(19px, 1.7vw, 24px) / 1.15 var(--font-ui);
  letter-spacing: -0.02em;
}
.tile p {
  margin: 0;
  font: var(--t-body-s);
  color: var(--ink-2);
}
.tile-note {
  margin-top: auto;
  font: var(--t-label-s);
  color: var(--ink-3);
}

/* Широкая плитка: текст слева, показ справа. */
.tile-wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: var(--s-xl);
}
.tile-wide .tile-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
}
.tile-wide .tile-visual {
  flex: 0 0 40%;
}

/* Плитка со снимком: снимок во всю ширину, прижат к низу. */
.tile-shot {
  grid-column: span 2;
}
.tile-shot img {
  width: 100%;
  height: auto;
  margin-top: auto;
  border-radius: var(--r-tile);
}

/* Одна плитка залита акцентом — чтобы сетка не была ровной по цвету тоже. */
.tile-accent {
  --glass-radius: var(--r-panel);
  border-radius: var(--r-panel);
  background: linear-gradient(150deg, var(--accent), #0067c8);
  color: var(--on-fill);
  box-shadow: var(--shadow-accent);
}
.tile-accent h2,
.tile-accent p {
  color: var(--on-fill);
}
.tile-accent p {
  opacity: 0.92;
}

/* Показ в широких плитках: маленькие честные макеты. */
.call {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.call-tile {
  height: 44px;
  border-radius: var(--r-micro);
  background: var(--fill-2);
}
.call-tile.is-me {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.call-note {
  margin: var(--s-s) 0 0;
  font: var(--t-label-s);
  color: var(--ink-3);
  text-align: center;
}
.stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stream span {
  height: 9px;
  border-radius: 5px;
  background: var(--fill-2);
}
.stream span:nth-child(1) { width: 88%; }
.stream span:nth-child(2) { width: 100%; }
.stream span:nth-child(3) { width: 72%; }
.stream span:nth-child(4) { width: 34%; background: var(--accent); }

@media (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .tile-wide,
  .tile-shot {
    grid-column: span 2;
  }
}
@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .tile-wide,
  .tile-shot {
    grid-column: span 1;
  }
  .tile-wide {
    flex-direction: column;
    align-items: stretch;
  }
  .tile-wide .tile-visual {
    flex: 1 1 auto;
  }
}

/* «Скоро на Mac»: честная строка вместо ссылки на файл, которого нет. */
.mac-soon {
  margin: var(--s-m) 0 0;
  font: var(--t-label-l);
  color: var(--ink-3);
}