/* ═══════════════════════════════════════════════════════════════════════
   ГЛАВНАЯ «Балл за баллом»: ОДИН экран.
   Источник — согласованный макет bzb-06-glavnaya-odnim-faylom.html,
   значения перенесены дословно. Прежние три панели, полоса «путь к сотке»,
   каталог курсов и индикатор страниц убраны вместе со своими стилями.

   Слева — заголовок, три шага практики и кнопка; справа — пример задачи
   с открытым разбором.

   Размеры завязаны и на ширину, и на ВЫСОТУ окна (min(...vh) внутри clamp):
   на ноутбуках 1280x720 страница укладывается в первый экран без прокрутки.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#EAEFF6; --surface-3:#F7F9FC;
  --ink:#101A2B; --ink-2:#3C4A60; --muted:#69778C;
  --accent:#1F4FA3; --accent-2:#2C6FD8; --accent-soft:#E6EDF9;
  --gold:#B07C22; --gold-soft:#FBF2E2; --gold-line:#F0E2C6;
  --bad:#C0392B; --bad-soft:#FCEFEC; --bad-line:#F2D6D0;
  --line:#DDE5EF; --line-2:#EBF0F7;
  --shadow:0 1px 2px rgba(16,26,43,.04), 0 14px 32px -20px rgba(16,26,43,.28);
  --shadow-lg:0 2px 4px rgba(16,26,43,.05), 0 22px 44px -24px rgba(31,79,163,.3);

  --h1:      clamp(29px, min(calc(1.95vw + 22px), 6.4vh), 54px);
  --h2:      clamp(18px, min(calc(0.39vw + 12.5px), 2.8vh), 23px);
  --lead:    clamp(15.5px, min(calc(0.39vw + 11.5px), 2.2vh), 19px);
  --btn-h:   clamp(44px, min(calc(1.09vw + 32px), 6vh), 54px);
  --btn-f:   clamp(15px, calc(0.23vw + 12.5px), 17px);
  --eyebrow: clamp(11.5px, calc(0.23vw + 9.5px), 13.5px);
  --gap-col: clamp(26px, calc(1.25vw + 28px), 56px);
  --rad:     clamp(12px, calc(0.31vw + 10px), 16px);
  --top-h:   clamp(62px, calc(0.78vw + 62px), 78px);
  --edge:    max(clamp(20px,2.2vw,40px), calc((100% - 1440px)/2));
  --mom-f:   clamp(14.5px, min(calc(0.31vw + 11.5px), 2.1vh), 17.5px);
  --mom-n:   clamp(32px, min(calc(0.47vw + 26px), 4.6vh), 40px);
  --mom-gap: clamp(13px, 1vw, 18px);
  --tq-text: clamp(15.5px, min(calc(0.47vw + 9.5px), 2.3vh), 20px);
  --tq-opt:  clamp(14px, min(calc(0.31vw + 10.5px), 2vh), 17px);
  --tq-pad:  clamp(12px, min(calc(0.47vw + 9.5px), 2.1vh), 19px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* position:relative обязателен: от него абсолютный фон .bg берёт высоту ВСЕЙ
   страницы. Без него inset:0 дал бы высоту одного экрана. */
body{margin:0;background:var(--bg);color:var(--ink);position:relative;
  font:400 16px/1.6 "Golos Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2{font-family:Rubik,sans-serif;font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.1}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:#173F86}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh{position:absolute;width:0;height:0;opacity:0;pointer-events:none}

/* ── фон-дыхание ── */
.bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg i{position:absolute;display:block;border-radius:50%;filter:blur(100px)}
.bg .b1{width:44vw;height:44vw;min-width:520px;min-height:520px;background:#2C6FD8;opacity:.20;
  left:-12vw;top:-14%;animation:d1 22s ease-in-out infinite alternate}
.bg .b2{width:30vw;height:30vw;min-width:380px;min-height:380px;background:#2C6FD8;opacity:.10;
  right:12%;top:-8%;animation:d3 30s ease-in-out infinite alternate}
.bg .b3{width:36vw;height:36vw;min-width:440px;min-height:440px;background:#B07C22;opacity:.15;
  right:-10vw;top:34%;animation:d2 26s ease-in-out infinite alternate}
.bg .b4{width:40vw;height:40vw;min-width:480px;min-height:480px;background:#2C6FD8;opacity:.15;
  left:-14vw;top:62%;animation:d1 25s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(120px,90px) scale(1.12)}}
@keyframes d2{to{transform:translate(-110px,-70px) scale(1.1)}}
@keyframes d3{to{transform:translate(-90px,120px) scale(1.08)}}

/* ── шапка ──
   Липкая, поэтому обязана лежать ВНЕ секции: position:sticky не работает,
   если у предка есть overflow:clip/hidden, а у .p он есть. */
.site{position:sticky;top:0;z-index:20;background:rgba(243,246,250,.78);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px)}
.top{position:relative;z-index:5;display:flex;align-items:center;height:var(--top-h);
  gap:clamp(18px,1.6vw,30px);padding:0 clamp(20px,2.2vw,40px)}
.logo{font-family:Rubik,sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(17px,calc(0.31vw + 15px),21px);white-space:nowrap}
.logo i{color:var(--gold);font-style:normal}
.tabs{display:flex;gap:2px;font-size:clamp(14px,calc(0.16vw + 13px),16px)}
/* Активной вкладки на главной нет и быть не может: ни одна из трёх страниц здесь
   не открыта. Правила `.tabs a.on` / `.mmenu a.on` из макета убраны — недостижимы. */
.tabs a{padding:8px 14px;border-radius:9px;white-space:nowrap;color:var(--ink-2)}
.tabs a:hover{background:var(--surface-2);color:var(--accent)}
.act{margin-left:auto;display:flex;gap:10px;align-items:center}
.burger{display:none;width:44px;height:44px;border-radius:11px;flex:none;background:var(--surface);
  border:1px solid var(--line);cursor:pointer;place-items:center;transition:border-color .18s}
.burger:hover{border-color:#C4D2E4}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  position:relative;transition:transform .22s ease,opacity .18s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;
  border-radius:2px;background:var(--ink);transition:transform .22s ease}
.burger span::before{top:-6px}.burger span::after{top:6px}
#nav:checked ~ .top .burger span{transform:rotate(45deg)}
#nav:checked ~ .top .burger span::before{transform:translateY(6px) rotate(-90deg)}
#nav:checked ~ .top .burger span::after{opacity:0}
.mmenu{display:none;border-top:1px solid var(--line-2);background:var(--surface);padding:4px 0}
.mmenu a{display:block;padding:14px clamp(20px,2.2vw,40px);font-size:16px;color:var(--ink-2);
  border-top:1px solid var(--line-2)}
.mmenu a:first-child{border-top:0}
#nav:checked ~ .mmenu{display:block}

/* Панель администратора: она фиксированная и сдвигает документ на свою высоту,
   поэтому липкую шапку опускаем под неё, а экран делаем на столько же ниже —
   иначе у персонала главная начинает прокручиваться на пустые 32 px.
   Ниже 600 px WordPress делает панель непозиционированной, и сдвиг не нужен. */
body.admin-bar .site{top:32px}
body.admin-bar .p{min-height:calc(100vh - var(--top-h) - 32px)}
@media screen and (max-width:782px){
  body.admin-bar .site{top:46px}
  body.admin-bar .p{min-height:calc(100vh - var(--top-h) - 46px)}
}
@media screen and (max-width:600px){body.admin-bar .site{top:0}}

/* ── кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--btn-h);
  padding:0 clamp(20px,1.4vw,30px);border-radius:calc(var(--rad) - 4px);
  font-family:"Golos Text",sans-serif;font-weight:600;font-size:var(--btn-f);line-height:1;
  border:1px solid transparent;cursor:pointer;transition:transform .18s ease,background-color .18s}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 10px 22px -12px rgba(31,79,163,.75)}
.btn-p:hover{background:#173F86;transform:translateY(-2px);color:#fff}
.btn-s{height:clamp(38px,calc(0.31vw + 36px),44px);padding:0 clamp(14px,1vw,20px);
  font-size:clamp(13.5px,calc(0.16vw + 12.5px),15.5px)}
.btn-q{background:transparent;color:var(--ink-2)}
.btn-q:hover{background:var(--surface-2);color:var(--accent)}

/* ── единственный экран ── */
.p{position:relative;z-index:1;min-height:calc(100vh - var(--top-h));display:flex;
  flex-direction:column;justify-content:center;overflow:clip;
  padding:clamp(16px,2.4vh,34px) var(--edge)}
.grid2{position:relative;z-index:4;display:grid;gap:var(--gap-col);align-items:center;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--eyebrow);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);font-weight:600;background:var(--accent-soft);
  padding:6px 14px;border-radius:99px;margin-bottom:clamp(12px,1.6vh,20px)}
h1{font-size:var(--h1)}
.lead{margin-top:clamp(12px,1.6vh,20px);font-size:var(--lead);line-height:1.55;color:var(--ink-2);max-width:44ch}

/* три шага: номера в кружках, без рамок и без соединяющей линии */
.moms{margin-top:clamp(18px,2.6vh,32px)}
.moms h2{font-size:var(--h2);letter-spacing:-.02em;line-height:1.15;
  margin-bottom:clamp(12px,1.8vh,20px)}
.moms ol{list-style:none;margin:0;padding:0 0 0 calc(var(--mom-n) + var(--mom-gap));
  display:grid;gap:clamp(12px,1.9vh,24px)}
.moms li{position:relative}
.moms .sn{position:absolute;left:calc((var(--mom-n) + var(--mom-gap)) * -1);top:0;
  width:var(--mom-n);height:var(--mom-n);border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:2px solid #C6D7EF;color:var(--accent);
  font-family:Rubik,sans-serif;font-weight:700;font-size:calc(var(--mom-n) * .44);line-height:1}
.moms p{font-size:var(--mom-f);line-height:1.5;color:var(--ink-2);text-wrap:pretty;
  padding-top:calc((var(--mom-n) - var(--mom-f) * 1.5) / 2)}
.cta{margin-top:clamp(18px,2.6vh,32px);display:flex;align-items:center;gap:clamp(10px,0.9vw,14px);flex-wrap:wrap}

/* ── карточка задачи ──
   Это картинка, а не рабочий виджет: варианты и кнопки нарисованы span/div.
   Поэтому наведение и «палец» у них сняты (см. блок «демонстрация» ниже) —
   элемент не должен выглядеть нажимаемым, если по нему ничего не происходит. */
.q{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--rad) + 4px);
  box-shadow:var(--shadow-lg);overflow:hidden}
.q-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:clamp(9px,0.6vw,12px) var(--tq-pad);
  border-bottom:1px solid var(--bad-line);background:var(--bad-soft)}
.q-n{font-family:Rubik,sans-serif;font-weight:700;font-size:13px;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px}
.q-n b{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:var(--bad);color:#fff;font-size:12px}
.tries{margin-left:auto;font-size:12px;color:var(--muted)}
.q-b{padding:var(--tq-pad)}
.qtext{font-size:var(--tq-text);line-height:1.5;margin-bottom:clamp(11px,0.8vw,15px)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(7px,0.5vw,9px)}
.opt{display:flex;align-items:center;gap:11px;min-height:clamp(40px,min(calc(0.62vw + 32px),5.6vh),50px);
  padding:0 clamp(11px,0.8vw,15px);border:1.5px solid var(--line);border-radius:calc(var(--rad) - 3px);
  background:var(--surface);font-size:var(--tq-opt)}
.dot{width:clamp(18px,calc(0.23vw + 15px),21px);height:clamp(18px,calc(0.23vw + 15px),21px);
  border-radius:50%;border:1.8px solid #B9C7DA;flex:none;display:grid;place-items:center;
  color:#fff;background:var(--surface)}
.dot svg{width:60%;height:60%;display:block}
.opt--bad{border-color:var(--bad);background:var(--bad-soft)}
.opt--bad .dot{background:var(--bad);border-color:var(--bad)}

/* разбор свёрнут в одну строку-ссылку на файл */
.solve{display:flex;align-items:center;gap:10px;margin-top:clamp(10px,0.8vw,14px);
  padding:9px clamp(12px,0.9vw,16px);border-radius:calc(var(--rad) - 3px);
  background:var(--gold-soft);border:1px solid var(--gold-line)}
.solve .ic{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--gold);color:#fff}
.solve .ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.solve .n{flex:1;min-width:0}
.solve .n b{display:block;font-family:Rubik,sans-serif;font-weight:600;font-size:14px;color:#5A4520}
.solve .n span{display:block;font-size:11.5px;color:#8A6A2A;margin-top:1px}
.solve .dl{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--gold-line);color:#8A6A2A}
.solve .dl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* похожие задачи */
.similar{margin-top:clamp(8px,0.6vw,11px);padding:clamp(10px,0.8vw,14px);
  border-radius:calc(var(--rad) - 3px);background:var(--accent-soft);border:1px solid #CFE0F7}
.similar-h{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.similar-h .ic{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--accent);color:#fff}
.similar-h .ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.similar-h b{font-family:Rubik,sans-serif;font-weight:600;font-size:13.5px;color:var(--accent)}
.similar-h span{font-size:11.5px;color:#33507E}
.simgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.sim{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 12px;background:#fff;
  border:1px solid #CFE0F7;border-radius:calc(var(--rad) - 5px)}
.sim .n{flex:1;min-width:0;display:flex;align-items:center;font-size:14.5px;color:var(--ink)}
.sim .go{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)}
.sim .go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.q-f{display:flex;align-items:center;gap:clamp(9px,0.7vw,13px);flex-wrap:wrap;margin-top:clamp(11px,0.8vw,15px)}
.q-f .btn{height:clamp(40px,calc(0.78vw + 29px),46px);padding:0 clamp(16px,1.1vw,22px);
  font-size:clamp(13.5px,calc(0.23vw + 10.5px),15.5px)}

/* демонстрация: кнопки карточки нарисованы, а не работают — снимаем «палец»
   и отклик на наведение, чтобы они не обещали нажатие */
.q-f .btn{cursor:default}
.q-f .btn-p:hover{background:var(--accent);transform:none}
.q-f .btn-q:hover{background:transparent;color:var(--ink-2)}

/* ── появление блоков ── */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.r{animation:rise .75s cubic-bezier(.2,.7,.2,1) backwards}
.r1{animation-delay:.05s}.r2{animation-delay:.14s}.r3{animation-delay:.23s}

/* ── адаптив ── */
@media(max-width:1180px){.grid2{grid-template-columns:1fr}}
@media(max-width:760px){
  .p{min-height:0}
  body.admin-bar .p{min-height:0}
  .tabs{display:none}
  .burger{display:grid}
  .opts,.simgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}