/* ============================================================
   Гамма по гайду «Просвещения» (поверх style.css)
   Цвета гайда: Синий #06428F, Голубой #0883D7, Белый #FFFFFF,
   Светлый янтарный #FFC875, Оранжевый #FF8642 (кнопки), Светло-серый #F0F4F8 (фоны).
   Шрифт: Inter (основной), Arial (запасной).
   ============================================================ */
:root {
  --font: "Inter", Arial, sans-serif;
  --mono: "Inter", Arial, sans-serif;
  --dna: #0883D7;
  --dna-dark: #06428F;
  --mint: #FFC875;
  --mint-tint: #F0F4F8;
  --mint-soft: #FFC875;
  --dark-teal: #06428F;
  --orange: #FF8642;

  --bg: #ffffff;
  --text: #06428F;
  --muted: rgba(6, 66, 143, .75);
  --dim: rgba(6, 66, 143, .5);
  --line: rgba(8, 131, 215, .18);
  --line-strong: rgba(8, 131, 215, .42);
  --cyan: var(--dna);
  --yellow: var(--orange);
  --panel: #ffffff;
  --panel-2: var(--mint-tint);
}
body { background: #fff; color: var(--text); }
.lead { color: var(--muted); }
.label { color: var(--dna); }

/* кнопки: CTA — точечный оранжевый акцент */
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 10px 30px -10px rgba(255, 134, 66, .6); }
.btn-primary:hover { box-shadow: 0 12px 36px -8px rgba(255, 134, 66, .75); }
.btn-ghost { background: #fff; color: var(--dark-teal); border-color: var(--line-strong); backdrop-filter: none; }
.btn-ghost:hover { border-color: var(--dna); background: var(--mint-tint); }

/* карточки: белые с бирюзовыми уголками */
.hud { background: #fff; border-color: var(--line); box-shadow: 0 1px 0 rgba(6, 66, 143, .04), 0 18px 40px -28px rgba(6, 66, 143, .35); }
.hud::before, .hud::after { border-color: var(--dna); filter: none; }
.chip { background: #fff; border-color: var(--line); color: var(--muted); }
.chip .dot { background: var(--dna); box-shadow: none; }

/* ---------- шапка ---------- */
.site-header.is-solid, .site-header.static { background: #fff; color: var(--dark-teal); box-shadow: 0 1px 0 var(--line); }
.site-header.is-solid .login, .site-header.static .login { background: var(--mint-tint); color: var(--dark-teal); }

/* ---------- первый экран: видео под тёмно-бирюзовой вуалью ---------- */
.hero { color: #fff; }
.hero-media::after {
  background:
    linear-gradient(90deg, rgba(6, 66, 143, .94) 0%, rgba(6, 66, 143, .72) 36%, rgba(6, 66, 143, .12) 66%, rgba(6, 66, 143, .2) 100%),
    linear-gradient(0deg, rgba(6, 66, 143, .9) 0%, rgba(6, 66, 143, 0) 34%),
    linear-gradient(180deg, rgba(6, 66, 143, .5) 0%, rgba(6, 66, 143, 0) 20%);
}
.hero .h1, .hero-tagline { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .82); }
.grad-text { background: linear-gradient(92deg, var(--mint) 0%, var(--mint) 100%); -webkit-background-clip: text; background-clip: text; }
.hero-authors { border-top-color: rgba(255, 200, 117, .35); }
.ha b { color: #fff; }
.ha span:not(.ha-av) { color: rgba(255, 255, 255, .7); }
.ha-av { background: var(--dna); border-color: rgba(255, 200, 117, .5); color: #fff; }
.ha-logo { background: #fff; }
@media (max-width: 1023px) {
  .hero-media::after { background: linear-gradient(0deg, rgba(6, 66, 143, .96) 12%, rgba(6, 66, 143, .8) 50%, rgba(6, 66, 143, .25) 100%); }
}

/* ---------- «Когда пригодится» ---------- */
.qr-strip { margin-top: -40px; }
.step { background: #fff; }
.step .num { color: var(--dna); }
.step .ic { background: var(--mint-tint); color: var(--dna); }
.step h3 { color: var(--dark-teal); }
.step p { color: var(--muted); }

/* ---------- обозреватель курса ---------- */
.cx-tab { background: #fff; border-color: var(--line); }
.cx-tab:hover { border-color: var(--dna); }
.cx-tab-n { -webkit-text-stroke: 1px rgba(8, 131, 215, .6); }
.cx-tab-t { color: var(--muted); }
.cx-tab-d, .cx-tab-d i { color: var(--dim); }
.cx-tab-d i { background: var(--dim); }
.cx-tab.is-out .cx-tab-d { color: var(--dna); }
.cx-tab.is-out .cx-tab-d i { background: var(--dna); box-shadow: none; }
.cx-tab.is-active { background: var(--dna); border-color: var(--dna); box-shadow: 0 16px 36px -18px rgba(8, 131, 215, .8); }
.cx-tab.is-active .cx-tab-d, .cx-tab.is-active .cx-tab-d i { color: var(--mint); }
.cx-tab.is-active .cx-tab-d i { background: var(--mint); }

.cx-title { color: var(--dark-teal); }
.cx-title sub { color: var(--dna); }

.cx-player { border-color: transparent; box-shadow: 0 24px 50px -30px rgba(6, 66, 143, .6); }
.cx-player.player-card::after { background: linear-gradient(0deg, rgba(6, 66, 143, .9) 0%, rgba(6, 66, 143, 0) 55%); }
.cx-player .player-cap h3 { color: #fff; }
.cx-player .player-cap .label { color: var(--mint); }
.cx-player .big-play { background: rgba(8, 131, 215, .55); border-color: var(--mint); box-shadow: 0 0 0 12px rgba(255, 200, 117, .18); }
.cx-player .time { background: rgba(6, 66, 143, .75); color: #fff; }
.cx-player.is-black .player-cap h3 { color: rgba(255, 255, 255, .6); }

.cx-toc { background: var(--mint-tint); border-color: transparent; }
.cx-toc .cx-chapters button { color: var(--dark-teal); border-top-color: rgba(8, 131, 215, .2); }
.cx-toc .cx-chapters button:hover { background: #fff; color: var(--dna); }
.cx-toc .cx-chapters .t { color: var(--dna); }
.cx-toc .cx-chapters button.is-now { background: #fff; }
.cx-toc .cx-chapters button.is-now .t { color: var(--orange); }
.cx-toc-hint { color: var(--dim); }

.cx-list-title { color: var(--dark-teal); }
.cx-row:hover { background: var(--mint-tint); }
.cx-row.is-current { background: var(--mint-tint); box-shadow: inset 3px 0 0 var(--dna); }
.cx-rt small { color: var(--dna); }
.cx-rt b { color: var(--dark-teal); }
.cx-row.is-pending .cx-rt b { color: var(--muted); }
.cx-row.is-pending .cx-rt small { color: var(--dim); }
.cx-th.is-black { background: #000; }

/* ---------- тренажёр: мятная секция ---------- */
#trainer { background: var(--mint); padding-top: 96px !important; padding-bottom: 110px; }
#trainer .label { color: var(--dark-teal); }
#trainer .section-head .h2 { color: var(--dark-teal); }
.trainer-intro { background: var(--dark-teal); border-color: var(--dark-teal); color: #fff; }
.trainer-intro::before, .trainer-intro::after { border-color: var(--mint); }
.trainer-intro .label { color: var(--mint) !important; }
.trainer-intro .h2 { color: #fff; }
.trainer-intro .lead { color: rgba(255, 255, 255, .78); }
.levels i { background: rgba(255, 255, 255, .18); }
.levels i.cur { background: var(--mint); }
.levels i.done { background: var(--mint); box-shadow: none; }
.levels span { color: rgba(255, 255, 255, .7); }

.game { background: #fff; border-color: #fff; }
.game-q { color: var(--muted); }
.game-q b { color: var(--dark-teal); }
.game .label { color: var(--dna) !important; }
.el-card { background: #fff; border-color: var(--line-strong); box-shadow: inset 0 0 0 4px var(--mint-tint); }
.el-card .sym { color: var(--dark-teal); }
.el-card .val { color: var(--orange); text-shadow: none; }
.el-card .name { color: var(--muted); }
.stepper { background: var(--mint-tint); border-color: transparent; }
.stepper button { background: #fff; color: var(--dna); }
.stepper button:hover { background: var(--mint-soft); }
.stepper output { color: var(--dark-teal); }
.plus-sign { color: var(--dim); }
.formula-out { color: var(--dark-teal); border-color: var(--line-strong); background: var(--mint-tint); }
.formula-out.ok { color: var(--dna); border-color: var(--dna); background: #fff; box-shadow: 0 0 0 4px var(--mint-soft); }
.hint { color: var(--muted); }
.hint.ok { color: var(--dna); }
.hint.bad { color: var(--orange); }
.tq { color: var(--dark-teal); }
.quiz-count { color: var(--muted); }
.tanswer { background: #fff; border-color: var(--line-strong); color: var(--dark-teal); }
.tanswer i { background: var(--mint-tint); color: var(--dna); }
.tanswer:hover { border-color: var(--dna); }
.tanswer.ok { border-color: var(--dna); background: var(--mint-tint); }
.tanswer.ok i { background: var(--dna); color: #fff; }
.tanswer.bad { border-color: var(--orange); background: #fff; }
.tanswer.bad i { background: var(--orange); color: #fff; }
.game.is-empty { background: var(--dark-teal); border-color: var(--dark-teal); }

.empty-in p { color: rgba(255, 255, 255, .75); }
.game.is-empty .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 200, 117, .5); }

/* ---------- FAQ и подвал ---------- */
.light { background: #fff; color: var(--dark-teal); border-radius: 0; }
.light .label { color: var(--dna); }
.faq details { background: var(--mint-tint); box-shadow: none; }
.faq summary::after { background: #fff; color: var(--dna); }
.faq details p { color: var(--muted); }
.site-footer { background: var(--dark-teal); color: #fff; }
.foot-cards > div { background: rgba(255, 255, 255, .06); }
.foot-cards span { color: rgba(255, 255, 255, .7); }
.socials a { border-color: rgba(255, 255, 255, .25); color: #fff; }
.foot-bottom { color: rgba(255, 255, 255, .6); }
.foot-bottom .prosv-mark { color: #fff; }
.age { border-color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .7); }
@media (max-width: 1023px) { .qr-strip { margin-top: 0; padding-top: 24px; } .hero { padding-bottom: 32px; } }

/* ============================================================
   v04.3 — фон белый, плашки контрастные (цветные, не белые)
   ============================================================ */
body, main, #topics, #faq, .light { background: #fff; }
#topics { padding-top: 72px; }

/* «Когда пригодится»: три цветные карточки */
.steps-3 .step { border: 0; box-shadow: 0 22px 40px -26px rgba(6, 66, 143, .55); }
.steps-3 .step:nth-child(1) { background: var(--dark-teal); }
.steps-3 .step:nth-child(2) { background: var(--dna); }
.steps-3 .step:nth-child(3) { background: var(--mint); }
.steps-3 .step:nth-child(-n+2) h3 { color: #fff; }
.steps-3 .step:nth-child(-n+2) p { color: rgba(255, 255, 255, .8); }
.steps-3 .step:nth-child(-n+2) .num { color: var(--mint); }
.steps-3 .step:nth-child(-n+2) .ic { background: rgba(255, 255, 255, .12); color: var(--mint); }
.steps-3 .step:nth-child(2) .num, .steps-3 .step:nth-child(2) .ic { color: #fff; }
.steps-3 .step:nth-child(3) .num { color: var(--dark-teal); }
.steps-3 .step:nth-child(3) .ic { background: rgba(255, 255, 255, .5); color: var(--dark-teal); }
.steps-3 .step:nth-child(3) p { color: rgba(6, 66, 143, .8); }
.steps-3 .step::before, .steps-3 .step::after { border-color: rgba(255, 255, 255, .7); }

/* вкладки тем: мятные, активная — тёмная */
.cx-tab { background: var(--mint); border-color: var(--mint); }
.cx-tab:not(.is-out) { background: var(--mint-tint); border-color: var(--mint-soft); }
.cx-tab:hover { border-color: var(--dark-teal); }
.cx-tab-n { -webkit-text-stroke-color: var(--dark-teal); }
.cx-tab-t { color: var(--dark-teal); }
.cx-tab.is-out .cx-tab-d { color: var(--dark-teal); }
.cx-tab.is-out .cx-tab-d i { background: var(--dark-teal); }
.cx-tab.is-active { background: var(--dark-teal); border-color: var(--dark-teal); box-shadow: 0 16px 36px -18px rgba(6, 66, 143, .8); }
.cx-tab.is-active .cx-tab-t, .cx-tab.is-active .cx-tab-n { color: #fff; }

/* тайм-коды — на мяте */
.cx-toc { background: var(--mint); }
.cx-toc .label { color: var(--dark-teal); }
.cx-toc-hint { color: rgba(6, 66, 143, .6); }
.cx-toc .cx-chapters button { border-top-color: rgba(6, 66, 143, .15); }
.cx-toc .cx-chapters .t { color: var(--dark-teal); font-weight: 600; }
.cx-toc .cx-chapters button:hover, .cx-toc .cx-chapters button.is-now { background: rgba(255, 255, 255, .55); }

/* список видео темы — тёмная панель */
.cx-list { background: var(--dark-teal); border-color: var(--dark-teal); }
.cx-list::before, .cx-list::after { border-color: var(--mint); }
.cx-list .label { color: var(--mint); }
.cx-list-title { color: #fff; }
.cx-list .chip { background: transparent; border-color: rgba(255, 200, 117, .35); color: rgba(255, 255, 255, .8); }
.cx-list .chip .dot { background: var(--mint); }
.cx-row:hover { background: rgba(255, 255, 255, .06); }
.cx-row.is-current { background: var(--dna); box-shadow: none; }
.cx-rt small { color: var(--mint); }
.cx-rt b { color: #fff; }
.cx-row.is-current .cx-rt small { color: #fff; opacity: .85; }
.cx-row.is-pending .cx-rt b { color: rgba(255, 255, 255, .7); }
.cx-row.is-pending .cx-rt small { color: rgba(255, 200, 117, .6); }
.cx-th.is-black { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* тренажёр: белый фон, описание на бирюзе, задание на тёмной карточке */
#trainer { background: #fff; padding-top: 40px !important; }
#trainer .section-head .label { color: var(--dna); }
#trainer .section-head .h2 { color: var(--dark-teal); }
.trainer-intro { background: var(--dna); border-color: var(--dna); }
.trainer-intro::before, .trainer-intro::after { border-color: var(--mint); }
.trainer-intro .label { color: #fff !important; opacity: .85; }
.trainer-intro .lead { color: rgba(255, 255, 255, .88); }
.levels i { background: rgba(255, 255, 255, .25); }
.levels i.cur, .levels i.done { background: #fff; }
.levels span { color: rgba(255, 255, 255, .85); }

.game { background: var(--dark-teal); border-color: var(--dark-teal); }
.game::before, .game::after { border-color: var(--mint); }
.game-q { color: rgba(255, 255, 255, .7); }
.game-q b { color: #fff; }
.game .label { color: var(--mint) !important; }
.el-card { background: #fff; border-color: #fff; box-shadow: none; }
.stepper { background: rgba(255, 255, 255, .08); }
.stepper button { background: rgba(255, 255, 255, .12); color: var(--mint); }
.stepper button:hover { background: rgba(255, 255, 255, .22); }
.stepper output { color: #fff; }
.plus-sign { color: rgba(255, 255, 255, .5); }
.formula-out { background: rgba(255, 255, 255, .06); border-color: rgba(255, 200, 117, .4); color: #fff; }
.formula-out.ok { background: var(--mint); border-color: var(--mint); color: var(--dark-teal); box-shadow: none; }
.hint { color: rgba(255, 255, 255, .7); }
.hint.ok { color: var(--mint); }
.hint.bad { color: var(--orange); }
.tq { color: #fff; }
.quiz-count { color: rgba(255, 255, 255, .6); }
.tanswer { background: rgba(255, 255, 255, .06); border-color: rgba(255, 200, 117, .35); color: #fff; }
.tanswer i { background: rgba(255, 200, 117, .15); color: var(--mint); }
.tanswer:hover { border-color: var(--mint); }
.tanswer.ok { background: var(--mint); border-color: var(--mint); color: var(--dark-teal); }
.tanswer.ok i { background: var(--dark-teal); color: var(--mint); }
.tanswer.bad { background: rgba(255, 134, 66, .15); border-color: var(--orange); color: #fff; }
.game.is-empty { background: var(--dark-teal); border-color: var(--dark-teal); }

/* FAQ: мятные плашки на белом */
#faq .label { color: var(--dna); }
.faq details { background: var(--mint-soft); }
.faq details[open] { background: var(--mint); }
.faq summary::after { background: #fff; color: var(--dark-teal); }
.faq details p { color: rgba(6, 66, 143, .82); }

/* ============================================================
   v05 — правки клиента
   ============================================================ */
/* 1. мягкий переход первого экрана в белый блок */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(6, 66, 143, 0) 0%, rgba(6, 66, 143, .35) 35%, rgba(255, 255, 255, .75) 82%, #fff 100%); }
.hero .container { z-index: 2; }
.qr-strip { margin-top: -64px; }

/* 2. карточки «когда пригодится»: крупные заголовки */
.steps-3 .step { padding: 32px; }
.steps-3 .step h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.steps-3 .step p { font-size: 16px; }
.steps-3 .step .ic { width: 58px; height: 58px; }

/* 3. приветствие спикера: кружок + чат */
.greet { padding: 96px 0 40px; }
.greet-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; }
.greet-circle { position: relative; width: 320px; height: 320px; flex: none; }
.greet-circle video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--dark-teal); }
.greet-ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); pointer-events: none; }
.greet-ring circle { fill: none; stroke: rgba(8, 131, 215, .15); stroke-width: 2; }
.greet-ring .greet-progress { stroke: var(--dna); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; transition: stroke-dashoffset .25s linear; }
.greet-sound { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dark-teal); color: #fff; box-shadow: 0 8px 20px -8px rgba(6, 66, 143, .8); }
.greet-sound svg { width: 20px; height: 20px; }
.greet-sound .ic-on { display: none; }
.greet-circle.is-loud .greet-sound .ic-on { display: block; }
.greet-circle.is-loud .greet-sound .ic-off { display: none; }
.greet-chat { display: grid; gap: 14px; align-content: center; max-width: 620px; }
.greet-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.greet-who b { font-size: 18px; color: var(--dark-teal); }
.greet-who span { font-size: 14px; color: var(--dna); }
.greet-who i { font-style: normal; animation: dots 1.4s infinite; }
.greet-who i:nth-child(2) { animation-delay: .2s; } .greet-who i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.greet-bubbles { display: grid; gap: 10px; justify-items: start; min-height: 120px; }
.greet-bubble { background: var(--mint-tint); color: var(--dark-teal); border-radius: 18px 18px 18px 6px; padding: 12px 16px; font-size: 17px; line-height: 1.45; max-width: 100%;
  animation: bubbleIn .35s ease both; }
.greet-bubble:last-child { background: var(--mint); }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .greet { padding: 56px 0 24px; }
  .greet-row { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .greet-circle { width: 220px; height: 220px; }
  .greet-chat { justify-items: center; text-align: center; }
  .greet-bubble { border-radius: 18px; }
}

/* 4. «Выбирай тему» + стрелка, крупные вкладки, заголовок темы меньше */
.cx-pick { margin-bottom: 22px; }
.cx-pick-title { font-size: clamp(26px, 3vw, 40px); color: var(--dark-teal); margin: 0; }
.cx-pick-arrow { width: 132px; height: 106px; fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.6s ease-in-out infinite; margin-bottom: -14px; }
.cx-arrow-line { stroke-dasharray: 170; stroke-dashoffset: 170; animation: draw 1.4s .2s ease forwards; }
.cx-arrow-head { opacity: 0; animation: fadeIn .4s 1.4s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.cx-tab { padding: 18px 16px 16px; }
.cx-tab-n { font-size: 34px; }
.cx-tab-t { font-size: 15px; min-height: 3em; }
.cx-tab-d { font-size: 12px; }
.cx-title { font-size: clamp(26px, 2.8vw, 40px); }
.cx-head { gap: 12px; }


/* 5. тренажёры */
.sims { padding-top: 0; }
.sim-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sim-card { position: relative; border-radius: 24px; overflow: hidden; background: var(--dark-teal); cursor: pointer; display: grid; grid-template-rows: auto 1fr;
  transition: transform .25s, box-shadow .25s; }
.sim-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(6, 66, 143, .8); }
.sim-pic { aspect-ratio: 16 / 9; overflow: hidden; }
.sim-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sim-card:hover .sim-pic img { transform: scale(1.04); }
.sim-body { padding: 26px 28px 30px; display: grid; gap: 10px; align-content: start; }
.sim-body h3 { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; color: #fff; font-weight: 600; }
.sim-body p { margin: 0; font-size: 15px; color: var(--mint); }
.sim-body .btn { justify-self: start; margin-top: 8px; }
.sim-frame { grid-column: 1 / -1; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: #06428F; }
.sim-frame-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--dark-teal); color: #fff; }
.sim-frame-head b { font-size: 16px; font-weight: 600; }
.sim-frame-head button { color: var(--mint); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.sim-frame iframe { width: 100%; height: 720px; border: 0; display: block; background: #fff; }
@media (max-width: 1023px) { .sim-cards { grid-template-columns: 1fr; } .sim-frame iframe { height: 560px; } }
/* невышедшая тема: только заставка во всю ширину */
.black-cap.big { font-family: var(--font); font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; color: rgba(255, 255, 255, .85); text-align: center; line-height: 1.3; letter-spacing: -.01em; padding: 0 24px; }
.cx.is-soon-theme .cx-body { grid-template-columns: 1fr; }
.cx.is-soon-theme .cx-list, .cx.is-soon-theme .cx-toc { display: none; }
/* длинные названия тем во вкладках не должны выезжать */
.cx-tab-t { hyphens: auto; overflow-wrap: anywhere; font-size: 14.5px; }
.cx-tabs { gap: 10px; }
/* заголовки карточек «когда пригодится» — акцентным цветом */
.steps-3 .step:nth-child(1) h3 { color: var(--mint); }
.steps-3 .step:nth-child(2) h3 { color: #fff; }
.steps-3 .step:nth-child(3) h3 { color: var(--dark-teal); }
/* приветствие сразу после авторов: подтянуто к первому экрану */
.greet { padding: 44px 0 8px; }
.qr-strip { margin-top: 48px; }
@media (max-width: 767px) { .greet { padding: 28px 0 4px; } .qr-strip { margin-top: 28px; } }

/* ============================================================
   v06 — чат как в телеграме
   ============================================================ */
.greet-row { grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.tg { width: 100%; max-width: 560px; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 rgba(6, 66, 143, .06), 0 24px 50px -32px rgba(6, 66, 143, .5); border: 1px solid rgba(6, 66, 143, .08); }
.tg-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid rgba(6, 66, 143, .08); }
.tg-ava { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; background: var(--mint-tint); }
.tg-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tg-who { display: grid; gap: 1px; min-width: 0; }
.tg-who b { font-size: 16px; color: var(--dark-teal); line-height: 1.2; }
.tg-who span { font-size: 13px; color: var(--dim); }
.tg-who span.is-typing { color: var(--dna); }
.tg-who span i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-left: 2px; vertical-align: middle; animation: tgdot 1.3s infinite; }
.tg-who span i:nth-child(2) { animation-delay: .18s; } .tg-who span i:nth-child(3) { animation-delay: .36s; }
@keyframes tgdot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.tg-lock { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--dna); border: 1px solid rgba(8, 131, 215, .3); border-radius: 6px; padding: 3px 7px; }

.tg-body { padding: 16px 16px 20px; display: grid; gap: 8px; justify-items: start; height: 320px; overflow-y: auto; scroll-behavior: smooth;
  background:
    radial-gradient(circle at 20% 15%, rgba(8, 131, 215, .07) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 45%, rgba(8, 131, 215, .05) 0 9px, transparent 10px),
    radial-gradient(circle at 40% 80%, rgba(8, 131, 215, .06) 0 5px, transparent 6px),
    var(--mint-tint);
  background-size: 180px 180px, 240px 240px, 200px 200px, auto;
  scrollbar-width: thin; scrollbar-color: rgba(6, 66, 143, .2) transparent; }
.tg-msg { position: relative; max-width: 86%; background: #fff; color: var(--dark-teal); border-radius: 14px 14px 14px 4px;
  padding: 9px 62px 9px 14px; font-size: 16px; line-height: 1.4; box-shadow: 0 1px 2px rgba(6, 66, 143, .12); animation: tgIn .28s ease both; }
.tg-msg::after { content: ""; position: absolute; left: -6px; bottom: 0; width: 10px; height: 14px; background: #fff;
  clip-path: path("M10 0v14H0c6-2 10-7 10-14z"); }
.tg-msg time { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: var(--dim); }
.tg-msg:last-child { background: #F0F4F8; }
.tg-msg:last-child::after { background: #F0F4F8; }
@keyframes tgIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.tg-msg.tg-typing { padding: 12px 16px; display: flex; gap: 5px; background: #fff; }
.tg-msg.tg-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(6, 66, 143, .3); animation: tgdot 1.2s infinite; }
.tg-msg.tg-typing i:nth-child(2) { animation-delay: .18s; } .tg-msg.tg-typing i:nth-child(3) { animation-delay: .36s; }
@media (max-width: 767px) {
  .greet-row { grid-template-columns: 1fr; justify-items: stretch; }
  .greet-circle { justify-self: center; }
  .tg { max-width: 100%; }
  .tg-body { height: 260px; }
}
.tg-msg p { margin: 0; }
.tg-msg { padding: 8px 60px 8px 13px; }
.tg-msg time { bottom: 7px; }
/* тренажёры: кнопки в один уровень */
.sim-body { display: flex; flex-direction: column; gap: 10px; }
.sim-body .btn { margin-top: auto; align-self: start; }
.sim-body p { margin-bottom: 4px; }
/* авторы в первом экране — крупнее */
.hero-authors { gap: 28px; padding-top: 26px; margin-top: 44px; }
.ha { gap: 16px; align-items: center; }
.ha-av { width: 62px; height: 62px; font-size: 18px; }
.ha-logo img { width: 46px; }
.ha b { font-size: 20px; line-height: 1.2; }
.ha span:not(.ha-av) { font-size: 15.5px; line-height: 1.4; margin-top: 4px; color: rgba(255, 255, 255, .82); }
@media (max-width: 1279px) { .ha b { font-size: 18px; } .ha span:not(.ha-av) { font-size: 14.5px; } }
@media (max-width: 1023px) { .hero-authors { gap: 16px; margin-top: 28px; } .ha-av { width: 54px; height: 54px; } }
/* кружок и чат — по центру блока */
.greet-row { grid-template-columns: auto auto; justify-content: center; align-items: center; }
@media (max-width: 767px) { .greet-row { grid-template-columns: 1fr; justify-items: center; } }
/* блок «Проверь себя» — без лишнего отступа сверху */
#trainer { padding-top: 0 !important; padding-bottom: 96px; }
#trainer .section-head { margin-bottom: 32px; }
#topics { padding-bottom: 56px; }
#trainer { padding-bottom: 72px; }
.hero-authors { grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.ha b { font-size: 18px; }
.ha span:not(.ha-av) { font-size: 14px; line-height: 1.35; }
.hero-authors { background: rgba(6, 66, 143, .55); border-color: rgba(255, 200, 117, .22); }
.ha span:not(.ha-av) { color: rgba(255, 255, 255, .82); }
.sim-pic { background: #06428F; }
@media (max-width: 767px) {
  .hero-authors { grid-template-columns: 1fr !important; gap: 14px; }
  .ha b { font-size: 16px; }
  .ha span:not(.ha-av) { font-size: 13px; }
  .qr-strip { margin-top: 20px !important; }
  .steps-3 .step { padding: 20px 20px 22px; }
  .steps-3 .step h3 { font-size: 20px; }
  #topics { padding-top: 48px; }
}
/* превью аппарата целиком, без обрезки */
.sim-pic img { object-fit: contain; }
@media (max-width: 767px) { #sims { padding-bottom: 40px; } #faq { padding-top: 40px; } }

/* исправления по QA */
.cx-tab.is-active .cx-tab-d { color: var(--mint); }
.cx-tab.is-active .cx-tab-d i { background: var(--mint); }
@media (max-width: 767px) { .cx-tab-t { hyphens: manual; overflow-wrap: break-word; } }
.sim-card:first-child .sim-pic { background: #F0F4F8; }
.cx-player.player-card::after { display: none; }

/* ---------- кружок спикера: кадр сдвинут, логотип на форме не попадает в кадр ---------- */
.greet-circle video {
  border-radius: 0;
  transform: scale(1.4);
  transform-origin: 50% 5%;
  clip-path: circle(35.71% at 50% 37.14%);
}

/* ---------- темы: активная — Синий, опубликованные — Голубой, в разработке — Светло-серый ---------- */
.cx-tab.is-out:not(.is-active) { background: var(--dna); border-color: var(--dna); }
.cx-tab.is-out:not(.is-active) .cx-tab-t,
.cx-tab.is-out:not(.is-active) .cx-tab-d { color: #fff; }
.cx-tab.is-out:not(.is-active) .cx-tab-d i { background: #fff; }
.cx-tab.is-out:not(.is-active) .cx-tab-n { -webkit-text-stroke-color: #fff; }
.cx-tab:not(.is-out) { background: var(--mint-tint); border-color: rgba(8, 131, 215, .18); }
.cx-tab:not(.is-out):hover { border-color: var(--dna); }

/* ---------- содержание видео: светлая плашка ---------- */
.cx-toc { background: var(--mint-tint); }
.cx-toc .label { color: var(--dark-teal); }
.cx-toc .cx-chapters .t { color: var(--dna); }
.cx-toc .cx-chapters button:hover, .cx-toc .cx-chapters button.is-now { background: #fff; }

/* ---------- вопросы и ответы ---------- */
.faq details { background: var(--mint-tint); }
.faq details summary { color: var(--dark-teal); }
.faq details[open] { background: var(--dark-teal); }
.faq details[open] summary { color: #fff; }
.faq details[open] p { color: rgba(255, 255, 255, .85); }
.faq summary::after { background: #fff; color: var(--dna); }
.faq details[open] summary::after { background: var(--mint); color: var(--dark-teal); }

/* ---------- правки 01.10 ---------- */
/* «с ИИ» — бирюзовый из исходного лендинга */
.grad-text { background: linear-gradient(92deg, #77E2C3 0%, #B9F3E1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* карточки «Зачем смотреть»: заголовок первой — белый, третья — бирюзовая */
.steps-3 .step:nth-child(1) h3 { color: #fff; }
.steps-3 .step:nth-child(3) { background: #77E2C3; }
.steps-3 .step:nth-child(3) .ic { background: rgba(255, 255, 255, .55); color: var(--dark-teal); }
.steps-3 .step:nth-child(3) h3 { color: var(--dark-teal); }
.steps-3 .step:nth-child(3) p { color: rgba(6, 66, 143, .82); }
/* статус «Опубликовано» — белый везде */
.cx-tab.is-out .cx-tab-d, .cx-tab.is-active.is-out .cx-tab-d { color: #fff; }
.cx-tab.is-out .cx-tab-d i, .cx-tab.is-active.is-out .cx-tab-d i { background: #fff; }
/* вопросы: белый кружок, крестик/плюс нарисован линиями — строго по центру */
.faq summary::after,
.faq details[open] summary::after {
  content: ""; font-size: 0; background-color: #fff;
  background-image: linear-gradient(var(--dna), var(--dna)), linear-gradient(var(--dna), var(--dna));
  background-size: 14px 2px, 2px 14px; background-position: center; background-repeat: no-repeat;
}
.faq details[open] summary::after { background-color: #fff; }

.steps-3 .step:nth-child(1) .ic { color: #fff; }

/* ---------- соцсети в подвале — как на prosv.ru (Max, RuTube) ---------- */
.socials { gap: 12px; margin-top: 4px; }
.socials a { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; transition: background .2s, border-color .2s; }
.socials a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.socials svg { width: 20px; height: 20px; display: block; }

/* шапка без кнопки «Войти»: меню прижато вправо */
.site-header nav { margin: 0 0 0 auto; }

/* активная вкладка темы «В разработке» — тёмный фон, светлый текст (читаемость) */
.cx-tab.is-active:not(.is-out) { background: var(--dark-teal); border-color: var(--dark-teal); }
.cx-tab.is-active:not(.is-out) .cx-tab-t { color: #fff; }
.cx-tab.is-active:not(.is-out) .cx-tab-n { color: #fff !important; -webkit-text-stroke-color: #fff !important; }
.cx-tab.is-active:not(.is-out) .cx-tab-d { color: var(--mint); }
.cx-tab.is-active:not(.is-out) .cx-tab-d i { background: var(--mint); }
.faq details p + p { margin-top: -10px; }