/* Эдвин: общий стиль лендингов edvinedu.ru (/ и /quiz.html).
   Направление: продуктовый B2B-лендинг, Onest, реальные экраны продукта.
   Скругления (единое правило): кнопки и пилюли = 999px, карточки и кадры = 16px, поля ввода = 12px.
   Акцент один на страницу: тил на «Учебной платформе», янтарь на «Живых квизах». */

@font-face {
  font-family: "Onest";
  src: url("/fonts/onest-cyrillic.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("/fonts/onest-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --ink: #11161f;
  --muted: #576072;
  --line: #e1e5eb;
  --shadow: 0 1px 2px rgb(17 22 31 / .05), 0 12px 32px -12px rgb(17 22 31 / .14);

  /* «Учебная платформа» */
  --accent: #0f9488;
  --accent-btn: #0b7d72;
  --accent-btn-ink: #ffffff;
  --accent-text: #0a6f66;
  --accent-soft: #e2f3f0;

  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1200px;
  --r-card: 16px;
  --r-input: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
[data-product="quiz"] {
  --accent: #ffb42b;
  --accent-btn: #ffb42b;
  --accent-btn-ink: #241300;
  --accent-text: #9a5800;
  --accent-soft: #fff2d9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1118; --surface: #131a24; --surface-2: #18212d; --ink: #e8edf4; --muted: #9aa4b6; --line: #253041;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .6);
    --accent: #2bb3a5; --accent-btn: #2bb3a5; --accent-btn-ink: #04211e; --accent-text: #4fd1c2; --accent-soft: #11302d;
    color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-product="quiz"] {
    --accent: #ffb42b; --accent-btn: #ffb42b; --accent-btn-ink: #241300; --accent-text: #ffc65c; --accent-soft: #2e2410;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1118; --surface: #131a24; --surface-2: #18212d; --ink: #e8edf4; --muted: #9aa4b6; --line: #253041;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .6);
  --accent: #2bb3a5; --accent-btn: #2bb3a5; --accent-btn-ink: #04211e; --accent-text: #4fd1c2; --accent-soft: #11302d;
  color-scheme: dark;
}
:root[data-theme="dark"][data-product="quiz"] {
  --accent: #ffb42b; --accent-btn: #ffb42b; --accent-btn-ink: #241300; --accent-text: #ffc65c; --accent-soft: #2e2410;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Lenis (плавная инерционная прокрутка, только мышь/тачпад) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
section { scroll-margin-top: 80px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 3.4vw, 2.75rem); line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.sec { padding: 104px 0; }
.sec-head { max-width: 720px; margin-bottom: 48px; }
.sec-head p { margin-top: 14px; color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
@media (max-width: 768px) { .sec { padding: 72px 0; } .sec-head { margin-bottom: 32px; } }

.ic { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.22em; fill: currentColor; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s, border-color .2s, box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent-btn); color: var(--accent-btn-ink); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent-btn) 70%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent-btn) 80%, transparent); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); transform: translateY(-1px); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }

/* Шапка */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar .row { height: 68px; display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo-owl { width: 34px; height: 34px; flex: none; display: block; }
.logo-owl svg { width: 100%; height: 100%; display: block; }
.wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark .nm { font-weight: 750; font-size: 1.08rem; letter-spacing: -0.01em; }
.wordmark .tag { font-size: .74rem; color: var(--muted); font-weight: 500; }
.navlink { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 550; font-size: .95rem; transition: color .2s, background-color .2s; }
.navlink:hover { color: var(--ink); background: var(--surface-2); }
.theme-toggle { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; margin: 0 4px; }
.theme-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}
@media (max-width: 960px) { .navlink { display: none; } }
@media (max-width: 520px) { .topbar .btn-ghost { display: none; } .wordmark .tag { display: none; } .topbar .btn-primary { padding: 0 16px; } }

/* Переключатель продукта */
.products { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 28px; }
.products a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--muted); transition: color .2s, background-color .2s; }
.products a:hover { color: var(--ink); }
@media (max-width: 520px) { .products a { height: 34px; padding: 0 12px; font-size: .85rem; white-space: nowrap; gap: 6px; } }
.products a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.products a[aria-current="page"] .ic { color: var(--accent-text); }

/* Хиро */
.hero { padding: 56px 0 88px; }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero .lead { margin-top: 20px; font-size: 1.16rem; color: var(--muted); max-width: 40ch; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 960px) { .hero .grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 32px 0 64px; } }

/* Кадр со скриншотом (реальные экраны продукта, две темы) */
.frame { position: relative; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.frame img { width: 100%; cursor: zoom-in; }
.frame .shot-dark { display: none; }
:root[data-theme="dark"] .frame .shot-light { display: none; }
:root[data-theme="dark"] .frame .shot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .frame .shot-light { display: none; }
  :root:not([data-theme="light"]) .frame .shot-dark { display: block; }
}
.hero .frame { transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); transform-origin: left center; }
@media (max-width: 960px) { .hero .frame { transform: none; } }

/* Полоса фактов под хиро */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { display: flex; gap: 12px; align-items: flex-start; padding: 22px 20px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact .ic { color: var(--accent-text); width: 22px; height: 22px; margin-top: 2px; }
.fact b { display: block; font-weight: 650; font-size: .98rem; }
.fact span { color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) { .facts .wrap { grid-template-columns: 1fr 1fr; } .fact:nth-child(3) { border-left: 0; padding-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .facts .wrap { grid-template-columns: 1fr; } .fact { border-left: 0; padding-left: 0; } .fact + .fact { border-top: 1px solid var(--line); } }

/* Боли: одна панель, 2×2 */
.pains { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.pain { padding: 32px; }
.pain:nth-child(odd) { border-right: 1px solid var(--line); }
.pain:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.pain h3 { font-size: 1.2rem; }
.pain p { margin-top: 10px; color: var(--muted); }
.pains-answer { margin-top: 24px; font-size: 1.12rem; font-weight: 600; }
.pains-answer span { color: var(--accent-text); }
@media (max-width: 760px) { .pains { grid-template-columns: 1fr; } .pain:nth-child(odd) { border-right: 0; } .pain:not(:last-child) { border-bottom: 1px solid var(--line); } }

/* Роли: вкладки */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 15px/1 var(--font); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
.role[hidden] { display: none; }
.role h3 { font-size: 1.6rem; letter-spacing: -0.02em; }
.role > div > p { margin-top: 12px; color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .ic { color: var(--accent-text); margin-top: 3px; width: 20px; height: 20px; }
@media (max-width: 900px) { .role { grid-template-columns: 1fr; gap: 28px; } }

/* Бенто возможностей */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cell { border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; position: relative; }
.cell p { color: var(--muted); font-size: .98rem; }
.cell .ic-lg { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: 6px; }
.cell .ic-lg .ic { width: 22px; height: 22px; }
.cell-img { padding-bottom: 0; }
.cell-img .pic { margin: 12px -28px 0; border-top: 1px solid var(--line); overflow: hidden; flex: 1; min-height: 160px; background: var(--bg); }
.cell-img .pic:not(.natural) { flex: 1 1 0; position: relative; }
.cell-img .pic:not(.natural) img { position: absolute; inset: 0; }
.cell-img .pic.natural { flex: none; min-height: 0; }
.cell-img .pic.natural img { height: auto; }
.cell-img .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; cursor: zoom-in; }
.cell-img .pic .shot-dark { display: none; }
:root[data-theme="dark"] .cell-img .pic .shot-light { display: none; }
:root[data-theme="dark"] .cell-img .pic .shot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cell-img .pic .shot-light { display: none; }
  :root:not([data-theme="light"]) .cell-img .pic .shot-dark { display: block; }
}
.cell-tint { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.cell-tint .ic-lg { background: var(--surface); }
/* Тёмная ячейка-акцент: тёмная в обеих темах (не инвертируется вместе с --ink) */
.cell-ink { background: color-mix(in srgb, var(--accent) 16%, #0d131b); color: #e8edf4; border-color: color-mix(in srgb, var(--accent) 30%, #0d131b); }
.cell-ink p { color: #b4bdcc; }
.cell-ink .ic-lg { background: rgb(255 255 255 / .08); color: var(--accent); }
.span-4 { grid-column: 1 / -1; }
.span-2 { grid-column: span 2; }
.row-2 { grid-row: span 2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips span { font-size: .82rem; font-weight: 550; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.big-num { font-size: 3.2rem; font-weight: 750; letter-spacing: -0.04em; line-height: 1; color: var(--accent-text); }
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .row-2 { grid-row: auto; } .cell-img .pic:not(.natural) { flex: none; min-height: 0; padding: 20px; display: flex; justify-content: center; } .cell-img .pic:not(.natural) img { position: static; width: auto; max-width: 100%; height: auto; max-height: 340px; object-fit: contain; border-radius: 10px; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }

/* Видеообзор заданий: видео + главы */
.tasks-video { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--surface-2); }
.promo-video { max-width: 1040px; margin: 0 auto; }
.promo-frame video { aspect-ratio: 16 / 9; background: #062b22; }
.promo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px 14px 18px; border: 0; border-radius: 999px; background: #fff; color: #062b22; font: inherit; font-weight: 700; font-size: 1.02rem; white-space: nowrap; cursor: pointer; box-shadow: 0 12px 30px rgb(0 0 0 / .35); transition: transform .2s ease; }
.promo-play:hover { transform: translate(-50%, -50%) scale(1.04); }
.promo-play .ic { width: 22px; height: 22px; }
.promo-frame.playing .promo-play { display: none; }
@media (max-width: 640px) { .promo-play { padding: 10px 16px 10px 12px; font-size: .9rem; } .promo-play .ic { width: 18px; height: 18px; } }
.video-toggle { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgb(17 22 31 / .72); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.video-toggle .ic { width: 18px; height: 18px; }
.video-toggle .ic:last-child { display: none; }
.video-toggle.paused .ic:first-child { display: none; }
.video-toggle.paused .ic:last-child { display: block; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapters button { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font: 550 14px/1.3 var(--font); text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.chapters button:hover { background: var(--surface-2); color: var(--ink); }
.chapters .n { width: 24px; height: 24px; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: 13px; background: var(--surface-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.chapters button[aria-current="true"] { background: var(--accent-soft); color: var(--ink); }
.chapters button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .3s; }
.chapters button[aria-current="true"]::after { opacity: 1; }
.chapters button[aria-current="true"] .n { background: var(--accent-btn); color: var(--accent-btn-ink); }
.inline-link { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
  .tasks-video { grid-template-columns: 1fr; gap: 12px; }
  .chapters { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters li { flex: none; scroll-snap-align: start; }
  .chapters button { white-space: nowrap; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
}

/* Сравнение */
.cmp { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; font-size: .97rem; vertical-align: top; }
.cmp thead th { font-size: .85rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.cmp thead th.us { color: var(--accent-text); }
.cmp tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.cmp tbody th { font-weight: 500; width: 52%; }
.cmp td.us { font-weight: 650; }
.cmp .yes { color: var(--accent-text); display: inline-flex; gap: 6px; align-items: center; }
.cmp .no { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 640px) {
  .cmp { overflow: visible; background: transparent; border: 0; }
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; min-width: 0; width: auto; }
  .cmp thead { display: none; }
  .cmp tbody { display: grid; gap: 10px; }
  .cmp tbody tr, .cmp tbody tr:nth-child(even) { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; }
  .cmp tbody th { padding: 0 0 8px; font-weight: 650; }
  .cmp td { padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .cmp td::before { content: attr(data-l); color: var(--muted); font-weight: 500; text-align: left; }
  .cmp td.us::before { color: var(--accent-text); font-weight: 650; }
}
.more-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .95rem; }
.more-links a { color: var(--accent-text); font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.more-links a:hover { text-decoration: underline; }

/* Тарифы */
.billing { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 32px; }
.billing button { height: 38px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: 600 14px/1 var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.billing .save { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 28px; display: flex; flex-direction: column; }
.plan.hot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan .name { font-weight: 700; font-size: 1.15rem; }
.plan .badge { font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--accent-btn); color: var(--accent-btn-ink); }
.plan .who { color: var(--muted); font-size: .95rem; margin-top: 6px; min-height: 3em; }
.plan .price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.plan .price b { font-size: 2.4rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1; }
.plan .price small { color: var(--muted); font-size: .95rem; }
.plan .yhint { color: var(--muted); font-size: .85rem; margin-top: 6px; min-height: 1.3em; }
.plan .limits { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: .92rem; font-weight: 550; display: grid; gap: 4px; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; font-size: .95rem; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .ic { color: var(--accent-text); width: 18px; height: 18px; margin-top: 3px; }
.py, .ym { display: none; }
:root[data-billing="year"] .pm, :root[data-billing="year"] .mm { display: none; }
:root[data-billing="year"] .py, :root[data-billing="year"] .ym { display: inline; }
.enterprise { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.enterprise p { color: var(--muted); margin-top: 6px; }
.enterprise.addon h3 { display: flex; align-items: center; gap: 10px; }
.enterprise.addon h3 .ic { color: var(--accent-text); }
.addon-price { text-align: right; white-space: nowrap; }
.addon-price b { display: block; font-size: 1.8rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.addon-price small { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) { .addon-price { text-align: left; } }
.trial { margin-top: 16px; border-radius: var(--r-card); background: var(--accent-soft); padding: 20px 24px; display: flex; gap: 14px; align-items: center; font-weight: 550; }
.trial .ic { color: var(--accent-text); width: 24px; height: 24px; }
.price-note { margin-top: 18px; color: var(--muted); font-size: .9rem; max-width: 80ch; }
@media (max-width: 1080px) { .plans.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .enterprise { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .plans.four { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-weight: 600; font-size: 1.08rem; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .3s var(--ease); color: var(--muted); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 68ch; }

/* Заявка */
.lead-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.lead-wrap .sub { margin-top: 16px; color: var(--muted); font-size: 1.08rem; }
form.lead { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 28px; display: grid; gap: 16px; box-shadow: var(--shadow); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .9rem; font-weight: 600; }
.field label .opt { color: var(--muted); font-weight: 450; }
.field input, .field select { height: 48px; border-radius: var(--r-input); border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line)); background: var(--bg); color: var(--ink); padding: 0 14px; font: 400 16px var(--font); transition: border-color .2s, box-shadow .2s; width: 100%; }
.field input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.field .err { display: none; color: #c2283a; font-size: .85rem; }
:root[data-theme="dark"] .field .err { color: #ff8f9c; }
.field.invalid input { border-color: #c2283a; }
.field.invalid .err { display: block; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--muted); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-btn); flex: none; }
.consent a { color: var(--accent-text); }
.consent.invalid { color: #c2283a; }
.ferr { color: #c2283a; font-size: .9rem; margin: 0; display: none; }
form.lead.sent { display: none; }
.thanks { display: none; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 40px 28px; text-align: center; }
form.lead.sent + .thanks { display: block; }
.thanks .ic { width: 44px; height: 44px; color: var(--accent-text); margin: 0 auto 12px; }
.thanks p { color: var(--muted); margin-top: 8px; }
@media (max-width: 900px) { .lead-wrap { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; } form.lead { padding: 20px; } }

/* Подвал */
footer { border-top: 1px solid var(--line); padding: 56px 0 32px; background: var(--surface); }
.fgrid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.fgrid .ftag { color: var(--muted); font-size: .93rem; margin-top: 12px; max-width: 32ch; }
.fhead { font-weight: 650; font-size: .92rem; margin-bottom: 12px; }
.flink { display: block; color: var(--muted); text-decoration: none; font-size: .93rem; padding: 4px 0; }
.flink:hover { color: var(--ink); }
.fbottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fbottom a { color: var(--muted); }
@media (max-width: 760px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid > :first-child { grid-column: 1 / -1; } }

/* Лайтбокс, кнопка наверх, куки */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgb(8 11 16 / .86); display: none; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox img { max-width: min(1400px, 96vw); max-height: 90vh; border-radius: 12px; box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
.lightbox .lb-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 44px; height: 44px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s; text-decoration: none; }
.totop.show { opacity: 1; pointer-events: auto; }
.cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin-left: auto; margin-right: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 16px; display: none; gap: 14px; align-items: center; font-size: .88rem; color: var(--muted); }
.cookiebar.show { display: flex; }
.cookiebar a { color: var(--accent-text); }
.cookiebar button { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--accent-btn); color: var(--accent-btn-ink); font: 600 14px var(--font); cursor: pointer; }

/* Квизы: живая демка (разметку рисует встроенный скрипт страницы) */
.demo-box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.demo-phone { border-radius: 28px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); padding: 14px; max-width: 420px; width: 100%; justify-self: center; }
.demo-phone .bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 12px; font-size: .82rem; color: var(--muted); font-weight: 600; }
#demoScreen { min-height: 380px; border-radius: 18px; background: var(--surface-2); padding: 18px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.demo-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.demo-badge-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: #e5484d; color: #fff; }
.demo-badge-live i { width: 6px; height: 6px; border-radius: 99px; background: #fff; }
.demo-timerbar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.demo-timerbar i { display: block; height: 100%; width: 100%; background: var(--accent); }
.demo-q { font-weight: 700; font-size: 1.1rem; text-align: center; }
.demo-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-opt { min-height: 72px; border-radius: 14px; border: 0; color: #fff; font: 700 15px var(--font); cursor: pointer; transition: transform .2s var(--ease), opacity .2s; padding: 10px; }
.demo-opt:active { transform: scale(.97); }
.demo-opt.a { background: #e5484d; } .demo-opt.b { background: #2f7cf6; } .demo-opt.c { background: #e0a100; color: #241300; } .demo-opt.d { background: #12a150; }
.demo-opt:disabled { opacity: .35; cursor: default; }
.demo-opt.correct { opacity: 1; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px #12a150; }
.demo-opt.wrong { opacity: .8; }
.demo-pts { font-weight: 750; font-size: 1.3rem; }
.demo-lb { width: 100%; display: grid; gap: 6px; }
.demo-lb-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: .95rem; font-variant-numeric: tabular-nums; }
.demo-lb-row.me { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.demo-lb-row .rk { color: var(--muted); }
.demo-cta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
@media (max-width: 900px) { .demo-box { grid-template-columns: 1fr; gap: 32px; } }

/* Квизы: шаги «как это работает» */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { border-top: 2px solid var(--ink); padding-top: 20px; }
.step .ic { width: 28px; height: 28px; color: var(--accent-text); margin-bottom: 14px; }
.step p { color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

/* Квизы: витрина экранов (одна крупная + две) */
.showcase { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.showcase .side { display: grid; gap: 16px; }
.showcase figure { margin: 0; }
.showcase figcaption { margin-top: 12px; font-size: .95rem; color: var(--muted); }
.showcase figcaption b { color: var(--ink); font-weight: 650; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }

/* Движение. Принцип: анимируем только transform/opacity, контент виден без JS,
   всё выключается при prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Хиро: вход и мягкое свечение фирменного цвета за кадром */
  .hero .in-1, .hero .in-2, .hero .in-3, .hero .in-4 { animation: rise .9s var(--ease) both; }
  .hero .in-2 { animation-delay: .07s; } .hero .in-3 { animation-delay: .14s; } .hero .in-4 { animation-delay: .22s; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .hero-visual { position: relative; }
  .hero-visual::before { content: ""; position: absolute; inset: -12% -8% -14% -6%; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 45% at 30% 35%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
                radial-gradient(35% 40% at 75% 70%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
    filter: blur(28px); animation: glow 14s ease-in-out infinite alternate; }
  @keyframes glow { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
  .hero .frame { transition: transform .5s var(--ease); will-change: transform; }

  /* Появление по скроллу: JS помечает элементы ниже первого экрана (.pending) и снимает метку при показе */
  .pending { opacity: 0; transform: translateY(34px) scale(.985); }
  .reveal, .stagger > * { transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0s); }

  /* Вкладки ролей: панель въезжает */
  .role.enter { animation: panel .45s var(--ease) both; }
  @keyframes panel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* Тарифы: цифры перелистываются при смене периода */
  .price b.flip { animation: flip .45s var(--ease); }
  @keyframes flip { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }

  /* FAQ: плавное раскрытие (Chrome 131+, остальные — мгновенно) */
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: hidden; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }

  /* Иконки в бенто слегка «подпрыгивают» при наведении на карточку */
  .cell .ic-lg { transition: transform .4s var(--ease); }
  .cell:hover .ic-lg { transform: translateY(-3px) rotate(-4deg); }
  .cell { transition: border-color .3s, box-shadow .3s var(--ease), transform .4s var(--ease); }
  .cell:hover { box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover, .btn:active { transform: none; }
}