/* ============================================================
   Комбо (онлайн + офлайн) — стилі лише для page-combo.php
   Неймспейс .cmb-*: не перетинається з main.css.
   Дорожки: ON = циан (#0d8ef1→#49cdc8), OFF = корал (#f81d5f).
   ============================================================ */

.cmb { color: #113836; }
/* Токени дизайн-системи — скопійовані з :root прототипу kombo-restyle.html.
   Оголошені на .cmb, щоб не зачіпати решту сайту; потрібні секціям,
   перенесеним із прототипу (поки що — DARK «Як влаштований тиждень»). */
.cmb{
  --ink:#113836;
  --ink-soft:rgba(17,56,54,.68);
  --accent:#1da59f;            /* ON / основний акцент сайту */
  --accent-hi:#49cdc8;
  --accent-2:#f81d5f;          /* OFF / ціна — дозовано */
  --rose-hi:#ff6d99;
  --surface:#f0faf9;
  --line:rgba(17,56,54,.08);
  --white:#fff;

  --fs-h1:clamp(2.25rem, 1.4rem + 3.8vw, 4rem);
  --fs-h2:clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem);
  --fs-h3:clamp(1.125rem, 1rem + .6vw, 1.5rem);
  --fs-lead:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-num:clamp(2rem, 1.4rem + 2vw, 2.75rem);

  --r-xl:36px; --r-l:24px; --r-m:16px; --r-s:12px;
  --shadow-s:0 1px 2px rgba(17,56,54,.05), 0 4px 12px rgba(17,56,54,.06);
  --shadow-m:0 2px 4px rgba(17,56,54,.05), 0 12px 32px rgba(17,56,54,.10);
  --shadow-l:0 4px 8px rgba(17,56,54,.05), 0 24px 64px rgba(17,56,54,.14);

  --ease:cubic-bezier(.2,.7,.3,1);
  --t-fast:.25s; --t-reveal:.7s;
  --sec-pad:clamp(36px, 2vw + 20px, 64px);

  --grad-on:radial-gradient(140% 140% at 0 0,#33b9b3 0,#1da59f 57%,#49cdc8 100%);
  --grad-off:radial-gradient(140% 140% at 100% 0,#ff6d99 0,#f81d5f 60%,#d81753 100%);
}
/* Єдине полотно: фонові плями на всю сторінку, секції прозорі —
   безшовний потік замість смуг-блоків */
main.cmb {
    background:
        radial-gradient(1000px 640px at -12% 3%, rgba(73, 205, 200, .17), transparent 62%),
        radial-gradient(860px 560px at 112% 16%, rgba(248, 29, 95, .08), transparent 62%),
        radial-gradient(900px 620px at -10% 58%, rgba(73, 205, 200, .11), transparent 62%),
        radial-gradient(860px 600px at 112% 82%, rgba(248, 29, 95, .07), transparent 62%),
        #fdfffe;
}
.cmb-deco { position: absolute; pointer-events: none; user-select: none; will-change: transform; z-index: 0; }
.cmb-deco-letter {
    position: absolute; pointer-events: none; user-select: none; z-index: 0;
    font-size: clamp(100px, 13vw, 170px); font-weight: 600; line-height: 1;
    color: rgba(17, 56, 54, .04);
}
.cmb h1, .cmb h2, .cmb h3 { font-weight: 600; }
.cmb h1, .cmb h2 { text-wrap: balance; }
.cmb h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 128%; text-align: center; margin: 0 0 32px; }
.cmb section { padding: 64px 0; }
.cmb-kicker {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: #1da59f; margin-bottom: 14px;
}
.cmb-kicker::before, .cmb-kicker::after { content: ""; width: 28px; height: 2px; border-radius: 2px; }
.cmb-kicker::before { background: linear-gradient(90deg, transparent, #49cdc8); }
.cmb-kicker::after { background: linear-gradient(90deg, #ff7a5c, transparent); }
.cmb-kicker--light { color: #7fe0d6; }
/* Відступ якоря цін під фіксований хедер.
   Глобальний scroll-behavior:smooth тут НЕ ставити: при заході за якорем
   Chrome анімує прокрутку всієї сторінки і рендерер підвисає.
   Плавний скрол — точково в JS шаблону, лише на клік по кнопці. */
#cmb-price { scroll-margin-top: 96px; }

/* ---------- Кнопки ---------- */
/* Кнопки — 1:1 як .btn/.btn-green у main.css (радіус 12px, бірюзовий
   радіальний градієнт, ховер — темніший градієнт), щоб не відрізнялись
   від решти сайту. */
.cmb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 24px; border-radius: 12px; border: none;
    font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .3s ease, border-color .3s ease;
}
.cmb-btn--dark { background: radial-gradient(6400.78% 141.42% at 0 0, #33b9b3 0, #1da59f 57.69%, #49cdc8 100%); color: #fff; }
.cmb-btn--dark:hover { background: radial-gradient(6400.78% 141.42% at 0 0, #33aca6 0, #198f8a 57.69%, #38b1ac 100%); }
.cmb-btn--ghost { background: transparent; color: #1da59f; border: 1.5px solid rgba(29, 165, 159, .45); }
.cmb-btn--ghost:hover { border-color: #1da59f; background: rgba(29, 165, 159, .08); }
.cmb-btn--sm { padding: 13px 26px; font-size: 15px; width: 100%; }

/* ============================================================
   HERO
   ============================================================ */
.cmb section.cmb-hero { /* специфічність вища за .cmb section, інакше padding перебивається */
    position: relative; overflow: hidden;
    padding: 104px 0 72px; /* верхній відступ під фіксований хедер */
    background: radial-gradient(circle, rgba(17, 56, 54, .045) 1px, transparent 1.5px) 0 0 / 26px 26px;
}
/* Ширше полотно для цієї сторінки: контейнер теми 1120px лишає на широких
   екранах пів екрана порожнім (фідбек власника + референси full-bleed). */
.cmb section > .container { max-width: 1320px; }
@media (min-width: 1600px) {
    .cmb section.cmb-hero > .container { max-width: 1460px; }
}
.cmb-hero .container { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(52px, 5vw, 88px); align-items: center; }
.cmb-hero__badge {
    display: inline-flex; align-items: baseline; gap: 10px;
    font-size: clamp(15px, 1.6vw, 17px); font-weight: 600; letter-spacing: .34em;
    text-transform: uppercase; margin-bottom: 18px;
}
.cmb-hero__badge i { font-style: normal; opacity: .45; letter-spacing: 0; }
.cmb-on { color: #0d8ef1; }
.cmb-off { color: #f81d5f; }
.cmb-hero h1 { font-size: clamp(32px, 3.4vw, 60px); line-height: 112%; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.cmb-hero__sub { margin: 18px 0 0; font-size: 17px; line-height: 162%; color: rgba(17, 56, 54, .85); max-width: 520px; }
/* Фото справа: дуальна підкладка + плаваюча картка тижня */
.cmb-hero__media { position: relative; }
.cmb-hero__media::before {
    content: ""; position: absolute; left: 12%; right: -5%; top: 9%; bottom: -5%;
    border-radius: 40px; transform: rotate(-3deg);
    background: linear-gradient(135deg, rgba(13, 142, 241, .3), rgba(73, 205, 200, .34) 45%, rgba(255, 122, 92, .3) 72%, rgba(248, 29, 95, .26));
}
/* Диптих: дві половини однієї рамки — вдома онлайн / у школі офлайн */
.cmb-hero__split {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: #fff; border-radius: 32px; overflow: hidden;
    aspect-ratio: 15 / 11;
    box-shadow: 0 28px 64px -30px rgba(17, 56, 54, .5);
}
.cmb-hero__half { position: relative; margin: 0; overflow: hidden; }
.cmb-hero__half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmb-hero__half--on img { object-position: 78% center; }
.cmb-hero__half--off img { object-position: 62% center; }
.cmb-hero__half figcaption { position: absolute; top: 12px; left: 12px; }
.cmb-hero__half .cmb-tag { font-size: 10.5px; padding: 6px 12px; letter-spacing: .1em; box-shadow: 0 6px 16px -6px rgba(17, 56, 54, .5); }
.cmb-hero__splitplus {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #113836; color: #fff; font-size: 22px; font-weight: 600;
    box-shadow: 0 0 0 5px #fff;
}
/* Планер тижня: завжди ПІД диптихом, фото нічого не перекриває */
.cmb-hero__week {
    position: relative; z-index: 2; margin-top: 16px;
    background: #fff; border-radius: 20px; padding: 15px 20px 16px;
    box-shadow: 0 22px 52px -26px rgba(17, 56, 54, .4);
}
.cmb-hero__weekhead {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-bottom: 12px;
}

/* Полоса тижня */
.cmb-week-strip { display: flex; justify-content: center; gap: clamp(6px, 1.4vw, 14px); }
.cmb-day {
    width: clamp(44px, 6vw, 58px); height: clamp(44px, 6vw, 58px);
    display: flex; align-items: center; justify-content: center; position: relative;
    border-radius: 16px; border: 1.5px solid rgba(17, 56, 54, .12);
    background: #fff; font-size: clamp(13px, 1.5vw, 16px); font-weight: 500; color: rgba(17, 56, 54, .45);
}
.cmb-day em {
    position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.cmb-day--on, .cmb-day--off { color: #fff; font-weight: 600; border: none; }
.cmb-day--on {
    background: linear-gradient(135deg, #0d8ef1, #49cdc8);
    box-shadow: 0 8px 22px -8px rgba(13, 142, 241, .6);
    animation: cmbPulseOn 2.6s ease-in-out infinite;
}
.cmb-day--on em { color: #0d8ef1; }
.cmb-day--off {
    background: linear-gradient(135deg, #f81d5f, #ff7a5c);
    box-shadow: 0 8px 22px -8px rgba(248, 29, 95, .6);
    animation: cmbPulseOff 2.6s ease-in-out 1.3s infinite;
}
.cmb-day--off em { color: #f81d5f; }
@keyframes cmbPulseOn  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes cmbPulseOff { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
/* Міні-версія тижня: літери днів із крапками під активними — як у календарі */
.cmb-week-strip--mini { gap: 11px; }
.cmb-week-strip--mini .cmb-day {
    width: auto; height: auto; border: none; background: transparent; box-shadow: none;
    padding-bottom: 9px; border-radius: 0;
    font-size: 11.5px; font-weight: 600; color: rgba(17, 56, 54, .32);
    animation: none;
}
.cmb-week-strip--mini .cmb-day--on { color: #0d8ef1; }
.cmb-week-strip--mini .cmb-day--off { color: #f81d5f; }
.cmb-week-strip--mini .cmb-day--on::before, .cmb-week-strip--mini .cmb-day--off::before {
    content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
}
.cmb-week-strip--mini .cmb-day--on::before { background: linear-gradient(135deg, #0d8ef1, #49cdc8); box-shadow: 0 0 0 3px rgba(13, 142, 241, .15); }
.cmb-week-strip--mini .cmb-day--off::before { background: linear-gradient(135deg, #f81d5f, #ff7a5c); box-shadow: 0 0 0 3px rgba(248, 29, 95, .12); }
.cmb-week-strip--mini .cmb-day em { display: none; }
/* Події: дві колонки поруч */
.cmb-hero__evts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmb-evt {
    display: flex; align-items: center; gap: 9px;
    border-radius: 12px; padding: 8px 12px 8px 8px;
}
.cmb-evt--on { background: linear-gradient(90deg, rgba(13, 142, 241, .1), rgba(73, 205, 200, .12)); }
.cmb-evt--off { background: linear-gradient(90deg, rgba(248, 29, 95, .09), rgba(255, 122, 92, .1)); }
.cmb-evt__ico {
    flex: none; width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.cmb-evt--on .cmb-evt__ico { background: linear-gradient(135deg, #0d8ef1, #49cdc8); }
.cmb-evt--off .cmb-evt__ico { background: linear-gradient(135deg, #f81d5f, #ff7a5c); }
.cmb-evt__day {
    flex: none; min-width: 26px; text-align: center;
    font-size: 12px; font-weight: 600;
}
.cmb-evt--on .cmb-evt__day { color: #0d8ef1; }
.cmb-evt--off .cmb-evt__day { color: #f81d5f; }
.cmb-evt__txt { display: flex; flex-direction: column; line-height: 1.25; }
.cmb-evt__txt b { font-size: 12.5px; font-weight: 600; color: #113836; }
.cmb-evt__txt i { font-style: normal; font-size: 10.5px; color: rgba(17, 56, 54, .55); }
.cmb-hero__daysnote {
    margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(17, 56, 54, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmb-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.cmb-hero__note { margin-top: 14px; font-size: 14px; font-weight: 500; color: #1da59f; }

/* ============================================================
   DUO — онлайн / офлайн
   Перенесено 1-в-1 з прототипу kombo-restyle.html, блок [H] (v3.5).
   Додано лише: шапка секції зліва (на решті сторінки H2 центрований)
   і явні кольори h3/p — main.css теми перебиває наслідування.
   ============================================================ */
.cmb-duo { position: relative; overflow: hidden; /* букви-деко не створюють h-скрол */ }
.cmb-duo__head{margin-bottom:clamp(20px,2.5vw,32px)}
.cmb-duo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,40px)}
.cmb-duo__col{display:flex;flex-direction:column;gap:18px}
.cmb-duo__img{position:relative;overflow:hidden;box-shadow:var(--shadow-m);
  aspect-ratio:16/11;
  border-radius:58% 42% 55% 45% / 46% 52% 48% 54%;   /* органічний блоб замість прямокутника */
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cmb-duo__col--off .cmb-duo__img{border-radius:44% 56% 47% 53% / 55% 45% 57% 43%}
.cmb-duo__img img{width:100%;height:100%;object-fit:cover}
.cmb-duo__img .bubble{position:absolute;top:12%;left:50%;transform:translateX(-50%);
  background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;box-shadow:var(--shadow-s)}
.cmb-duo__col--on  .bubble{color:var(--accent)}
.cmb-duo__col--off .bubble{color:var(--accent-2)}
@media (hover:hover){
  .cmb-duo__img:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
}
.cmb-duo__tag{align-self:flex-start}
.cmb-duo__col p{color:var(--ink-soft);max-width:52ch;margin:0}
.cmb-duo__col h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3;color:var(--ink);margin:0}
/* пункти з тематичними SVG-іконками (єдиний stroke-стиль, колір колонки) */
.cmb-duo__list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.cmb-duo__list li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.cmb-duo__list li svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;color:var(--accent);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cmb-duo__col--off .cmb-duo__list li svg{color:var(--accent-2)}
/* Мітки-пілюлі hero-диптиха і фінального CTA. Жили в старому блоці DUO —
   при переносі прототипу (v2.9.0) були випадково видалені разом із ним,
   через що підписи «Вдома · онлайн» / «У школі · офлайн» лишились без фону.
   Повернуто в тому ж вигляді, що були. */
.cmb-tag {
    display: inline-block; padding: 7px 16px; border-radius: 100px;
    font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.cmb-tag--on { background: linear-gradient(135deg, #0d8ef1, #49cdc8); }
.cmb-tag--off { background: linear-gradient(135deg, #f81d5f, #ff7a5c); }

/* Чип-мітка Online/Offline — блок [D] прототипу */
.cmb-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:4px 12px;font-size:13px;font-weight:600;background:var(--surface);color:var(--accent)}
.cmb-chip--off{background:rgba(248,29,95,.07);color:var(--accent-2)}
/* градієнтні слова дуальності в заголовку — блок [D] прототипу */
.cmb-w-on,.cmb-w-off{background-clip:text;-webkit-background-clip:text;color:transparent}
.cmb-w-on{background-image:linear-gradient(92deg,#1da59f,#49cdc8)}
.cmb-w-off{background-image:linear-gradient(92deg,#f81d5f,#ff6d99)}
@media (max-width:1024px){ .cmb-duo__grid{gap:32px} }

/* ============================================================
   Шапка секцій, перенесених із прототипу (кікер + H2 зліва).
   На решті сторінки заголовки лишаються центрованими.
   ============================================================ */
.cmb-duo__head .cmb-kicker, .cmb-dark .cmb-kicker, .cmb-who .cmb-kicker{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cmb-duo__head .cmb-kicker::before, .cmb-dark .cmb-kicker::before, .cmb-who .cmb-kicker::before{
  content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-on)}
.cmb-duo__head .cmb-kicker::after, .cmb-dark .cmb-kicker::after, .cmb-who .cmb-kicker::after{display:none}
.cmb-duo__head h2, .cmb-dark h2, .cmb-who h2{
  font-size:var(--fs-h2);line-height:1.16;letter-spacing:-.015em;max-width:21ch;text-align:left;margin:0}

/* ============================================================
   WHO / REASONS — «Кому підходить» і «Шість причин»
   Перенесено 1-в-1 з прототипу, блок [K] (обидві секції в прототипі
   використовують ту саму сітку .cmb-who__grid).
   ============================================================ */
.cmb-who__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,36px);
  margin-top:clamp(20px,2.5vw,32px)}
.cmb-who__item{position:relative;padding-left:64px;min-height:64px}
.cmb-who__item i{position:absolute;left:0;top:-6px;font-style:normal;
  font-size:clamp(2.25rem,1.8rem + 1.6vw,3rem);font-weight:600;line-height:1;
  background-image:linear-gradient(92deg,#1da59f,#49cdc8);background-clip:text;-webkit-background-clip:text;color:transparent;opacity:.45}
.cmb-who__item:nth-child(even) i{background-image:linear-gradient(92deg,#f81d5f,#ff6d99)}
.cmb-who__item h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3;color:var(--ink);margin:0 0 6px}
.cmb-who__item p{color:var(--ink-soft);font-size:15px;max-width:46ch;margin:0}
.cmb-who__cta{margin-top:clamp(24px,3vw,36px);text-align:center}
.cmb-who__cta .cmb-micro{margin-top:10px}
.cmb-micro{font-size:14px;color:var(--ink-soft);margin-top:12px}
.cmb-micro b{color:var(--accent-2);font-weight:600}

/* ============================================================
   STATS — цифри школи
   Перенесено 1-в-1 з прототипу, блок [I].
   ============================================================ */
.cmb-stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);text-align:center}
.cmb-stats__n{font-size:var(--fs-num);font-weight:600;letter-spacing:-.02em;line-height:1.05;
  background-image:linear-gradient(92deg,#1da59f,#49cdc8);background-clip:text;-webkit-background-clip:text;color:transparent}
.cmb-stats__i:nth-child(2) .cmb-stats__n{background-image:linear-gradient(92deg,#f81d5f,#ff6d99)}
.cmb-stats__t{margin-top:6px;color:var(--ink-soft);font-size:15px}
@media (max-width:640px){ .cmb-stats__grid{grid-template-columns:1fr;gap:24px} }

/* ============================================================
   DARK — тиждень
   Перенесено 1-в-1 з прототипу content/design/kombo-restyle.html,
   блок [J] (v3.5). Код скопійовано дослівно; додано лише
   .cmb-dark .container (у прототипі контейнер зветься .cmb-container)
   і явні кольори p/h3 — у main.css теми є p{color:rgba(17,56,54,.5)},
   що перебиває наслідування.
   ============================================================ */
/* Світла тонована секція (фірмовий surface-відтінок): великих темних фонів на сайті немає —
   рішення підтверджене владельцем (v2.4 і фидбек по прототипу). Специфічність (0,1,1),
   щоб перебити .cmb section{background:transparent} */
section.cmb-dark{
  background:linear-gradient(180deg,rgba(240,250,249,0) 0,var(--surface) 110px,var(--surface) calc(100% - 110px),rgba(240,250,249,0) 100%);
  padding-top:calc(var(--sec-pad) + 36px);padding-bottom:calc(var(--sec-pad) + 36px)}
.cmb-dark h2{color:var(--ink)}
.cmb-dark__lead{color:var(--ink-soft);max-width:58ch;margin-top:10px}
.cmb-dark__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(20px,2.5vw,32px)}
/* безкоробково: вільні колонки з тонкою лінією зліва замість скляних карток */
.cmb-dark__card{position:relative;padding:6px 0 6px 22px;
  border-left:1px solid rgba(17,56,54,.14)}
.cmb-dark__tag{display:inline-block;border-radius:999px;padding:4px 12px;font-size:12px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.cmb-dark__card--on  .cmb-dark__tag{background:var(--grad-on)}
.cmb-dark__card--off .cmb-dark__tag{background:var(--grad-off)}
.cmb-dark__card--both .cmb-dark__tag{background:linear-gradient(92deg,#1da59f 0,#49cdc8 45%,#ff6d99 55%,#f81d5f 100%)}
.cmb-dark__card h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3;color:var(--ink);margin:0 0 8px}
.cmb-dark__card p{color:var(--ink-soft);font-size:15px;margin:0}
.cmb-dark__num{position:absolute;top:0;right:12px;font-size:var(--fs-num);
  font-weight:600;line-height:1;color:var(--ink);opacity:.07}
.cmb-dark__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,36px)}
.cmb-dark__pill{border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s)}
.cmb-dark .container{position:relative;z-index:1}
/* Шапка секції — як у прототипі: кікер і H2 зліва (на решті сторінки вони центровані) */
.cmb-dark .cmb-kicker{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cmb-dark .cmb-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-on)}
.cmb-dark .cmb-kicker::after{display:none}
.cmb-dark h2{font-size:var(--fs-h2);line-height:1.16;letter-spacing:-.015em;max-width:21ch;text-align:left;margin:0}
/* Reveal — CSS-частина механіки .anim/.animated з прототипу (клас вішає main.js теми).
   Скоуп .cmb, щоб не чіпати анімації решти сайту. */
@media (prefers-reduced-motion: no-preference){
  .cmb .anim{opacity:0;transform:translateY(18px);
    transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
  .cmb .anim.animated{opacity:1;transform:none}
  .cmb .anim[data-d="1"]{transition-delay:.1s}.cmb .anim[data-d="2"]{transition-delay:.2s}
  .cmb .anim[data-d="3"]{transition-delay:.3s}.cmb .anim[data-d="4"]{transition-delay:.4s}
  /* у прототипі описані делеї 1–4, «Шість причин» має 6 карток — продовжено за правилом дизайн-системи (до .5s) */
  .cmb .anim[data-d="5"]{transition-delay:.45s}.cmb .anim[data-d="6"]{transition-delay:.5s}
}
@media (prefers-reduced-motion: reduce){
  .cmb .anim{opacity:1;transform:none}
}
/* адаптив секції — блок [P] прототипу */
@media (max-width:1024px){ .cmb-dark__grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cmb-dark__grid{grid-template-columns:1fr} }

/* ============================================================
   WHO — кому підходить
   ============================================================ */
.cmb-who { position: relative; overflow: hidden; }
/* Сітка і картки — вище, у блоці WHO / REASONS (перенесено з прототипу) */

/* ============================================================
   PRICE — у мові ON+OFF: одна головна ціна комбо,
   градієнтна смуга циан→корал, альтернативи дрібним рядком
   ============================================================ */
.cmb-price { position: relative; }
.cmb-price h2 { margin-bottom: 12px; }
.cmb-price__sub { text-align: center; font-size: 16px; color: rgba(17, 56, 54, .65); margin: 0 0 42px; }
/* Плоскі колонки з тонкими розділювачами (макет власника 2026-08-11):
   без карток, тире-градієнт зверху, велика коралова ціна. */
.cmb-price__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.cmb-price__card { text-align: left; padding: 8px 44px; }
.cmb-price__card + .cmb-price__card { border-left: 1px solid rgba(17, 56, 54, .12); }
.cmb-price__dash {
    display: block; width: 56px; height: 4px; border-radius: 4px;
    margin-bottom: 26px;
    background: linear-gradient(90deg, #1da59f, #f81d5f);
}
.cmb-price__aud {
    font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: #113836; margin: 0 0 20px;
}
.cmb-price__big { font-size: 46px; font-weight: 600; line-height: 1; margin: 0 0 8px; letter-spacing: -.01em; color: #f81d5f; }
.cmb-price__big span { font-size: 19px; font-weight: 500; color: rgba(17, 56, 54, .55); margin-left: 4px; letter-spacing: 0; }
.cmb-price__meta { font-size: 14.5px; color: rgba(17, 56, 54, .6); margin: 0 0 20px; }
.cmb-price__meta i { font-style: normal; }
.cmb-price__alt {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 20px; border-top: 1px dashed rgba(17, 56, 54, .18);
}
.cmb-price__alt span { font-size: 15px; color: rgba(17, 56, 54, .75); }
.cmb-price__cta { text-align: center; margin-top: 34px; }
.cmb-price__note { text-align: center; margin-top: 16px; font-size: 14px; color: rgba(17, 56, 54, .75); }
.cmb-price__note a { color: #1da59f; font-weight: 600; text-decoration: none; }
.cmb-price__note a:hover { text-decoration: underline; }

/* ============================================================
   ABOUT — текст про формат
   ============================================================ */
/* За макетом власника: кікер і H2 зліва, текст у дві колонки, бірюзова буквиця */
.cmb-about { position: relative; overflow: hidden; }
.cmb-about .cmb-kicker { justify-content: flex-start; }
.cmb-about .cmb-kicker::after { display: none; }
.cmb-about h2 { text-align: left; margin-bottom: 36px; }
.cmb-about__text {
    columns: 2; column-gap: clamp(56px, 6vw, 110px);
    font-size: 16px; line-height: 178%; color: rgba(17, 56, 54, .85);
}
.cmb-about__text p { margin: 0 0 18px; break-inside: avoid; }
.cmb-about__text p:last-child { margin-bottom: 0; }
.cmb-about__text > p:first-child::first-letter {
    float: left; font-size: 62px; line-height: .82; font-weight: 600;
    color: #1da59f; padding: 8px 12px 2px 0;
}
@media (max-width: 900px) {
    .cmb-about__text { columns: 1; }
}

/* ============================================================
   FAQ
   ============================================================ */
/* Перенесено 1-в-1 з прототипу, блок FAQ [N]. Додано лише вирівнювання
   шапки секції зліва (спільне правило вище) і явний margin у p. */
.cmb-faq { position: relative; }
.cmb-faq .cmb-kicker{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cmb-faq .cmb-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-on)}
.cmb-faq .cmb-kicker::after{display:none}
.cmb-faq h2{font-size:var(--fs-h2);line-height:1.16;letter-spacing:-.015em;max-width:21ch;text-align:left;margin:0}
.cmb-faq__list{margin-top:clamp(18px,2vw,28px);display:grid;gap:12px 20px;align-items:start}
/* на широких екранах FAQ у 2 колонки на всю ширину контейнера — без порожнього правого боку */
@media (min-width:1025px){.cmb-faq__list{grid-template-columns:1fr 1fr}}
/* безкоробковий FAQ: редакційний список з лініями-роздільниками, без білих карток */
.cmb-faq__it{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.cmb-faq__it[open] summary{color:var(--accent)}
.cmb-faq__it summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:18px 4px;font-weight:600;font-size:var(--fs-h3);
  transition:color var(--t-fast) var(--ease)}
.cmb-faq__it summary::-webkit-details-marker{display:none}
.cmb-faq__it summary::after{content:"";flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--t-fast) var(--ease)}
.cmb-faq__it[open] summary::after{transform:rotate(225deg)}
.cmb-faq__it p{padding:0 4px 18px;color:var(--ink-soft);max-width:64ch;margin:0}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cmb-cta { text-align: center; padding-bottom: 84px; }
.cmb-cta__box {
    position: relative; overflow: hidden;
    border-radius: 36px; padding: 58px 32px 54px;
    background: linear-gradient(120deg, #1baaa4, #1da59f); /* фірмовий бірюзовий сайту (btn-green), а не чужий темний */
}
/* Глоу без filter:blur — дешевше для рендера */
.cmb-cta__box::before, .cmb-cta__box::after { content: ""; position: absolute; width: 640px; height: 640px; }
.cmb-cta__box::before { left: -220px; bottom: -320px; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); }
.cmb-cta__box::after { right: -220px; top: -320px; background: radial-gradient(circle, rgba(248, 29, 95, .16), transparent 65%); }
.cmb-cta__box > * { position: relative; z-index: 1; }
.cmb-cta__formats { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; }
.cmb-cta__formats i { font-style: normal; font-weight: 600; font-size: 18px; color: rgba(255, 255, 255, .6); }
.cmb-cta h2 { color: #fff; margin-bottom: 12px; }
.cmb-cta p { max-width: 520px; margin: 0 auto 28px; font-size: 17px; line-height: 160%; color: rgba(234, 255, 253, .85); }
.cmb-btn--light { background: #fff; color: #113836; }
.cmb-btn--light:hover { background: #bcfffd; transform: translateY(-2px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    .cmb section { padding: 52px 0; }
    .cmb-hero .container { grid-template-columns: 1fr; gap: 40px; }
    .cmb-hero__media { max-width: 480px; margin: 0 auto; }
    .cmb-duo__grid { grid-template-columns: 1fr; }   /* як у прототипі, блок [P] */
    /* .cmb-dark__grid і .cmb-stats__grid — адаптив тепер у своїх блоках, як у прототипі */
    .cmb-price__grid { grid-template-columns: 1fr; }
    .cmb-price__card { padding: 26px 4px; }
    .cmb-price__card + .cmb-price__card { border-left: none; border-top: 1px solid rgba(17, 56, 54, .12); }
    .cmb-who__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .cmb-hero { padding: 44px 0 52px; }
    .cmb-hero__sub { font-size: 16px; }
    .cmb-hero__week { padding: 13px 15px 14px; }
    .cmb-hero__weekhead { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
    .cmb-hero__evts { grid-template-columns: 1fr; gap: 7px; }
    .cmb-hero__daysnote { white-space: normal; }
    .cmb-hero__cta .cmb-btn { width: 100%; }
    .cmb-cta__box { border-radius: 24px; padding: 40px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .cmb-day--on, .cmb-day--off { animation: none; }
    .cmb-btn, .cmb-duo__col, .cmb-chips li, .cmb-dark__card, .cmb-who__card, .cmb-price__card { transition: none; }
}


/* Деко-элементи: чайки, хмара — тематичний шар (реф 3) */
.cmb-deco--bird1 { top: 120px; right: 8%; width: 64px; opacity: .5; }
.cmb-deco--bird2 { top: 190px; right: 15%; width: 40px; opacity: .35; }
.cmb-deco--cloud { top: 60px; left: 4%; width: 150px; opacity: .8; }
.cmb-deco--bird3 { top: 60px; left: 10%; width: 52px; opacity: .4; }
.cmb section > .container { position: relative; z-index: 1; }
@media (max-width: 900px) { .cmb-deco, .cmb-deco-letter { display: none; } }

/* ---- v2.2: CTA після «Кому підходить», Telegram-лінки, рядок відкритих цін ---- */
.cmb-hero__tg { margin-top: 8px; font-size: 13.5px; color: rgba(17, 56, 54, .55); }
.cmb-hero__tg a { color: #1da59f; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cmb-who__cta { margin-top: 44px; text-align: center; }
.cmb-who__cta .cmb-hero__note { margin-top: 12px; }
.cmb-price__open { text-align: center; margin: -30px 0 42px; font-size: 13.5px; font-weight: 600; color: #1da59f; }
.cmb-cta__alt { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.cmb-cta__alt a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- v2.7: сезонний рядок у hero, блок переваг, мобільна sticky-кнопка ---- */

/* Сезонний рядок — чип за дизайн-системою (999px, --surface, teal),
   з крапкою-маркером замість емодзі. */
.cmb-hero__season {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 18px 0 0; padding: 8px 16px;
    border-radius: 999px; background: #f0faf9; border: 1px solid rgba(29, 165, 159, .22);
    font-size: 14px; font-weight: 600; line-height: 1.35; color: #16807b;
}
.cmb-hero__seasondot {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #49cdc8, #1da59f);
    box-shadow: 0 0 0 4px rgba(29, 165, 159, .14);
}
.cmb-hero__cta { margin-top: 22px; }

/* Блок «Шість причин» використовує сітку .cmb-who__grid із прототипу (див. WHO / REASONS) */

/* Sticky-кнопка: тільки телефон (до 900px), над нею — градієнт-підкладка,
   щоб текст сторінки не «прилипав» до кнопки. */
.cmb-sticky { display: none; }
@media (max-width: 900px) {
    .cmb-sticky {
        display: flex; align-items: center; gap: 12px;
        /* z-index нижчий за мобільне меню теми (90) і хедер (100), вищий за контент */
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        box-shadow: 0 -1px 0 rgba(17, 56, 54, .08), 0 -10px 30px -18px rgba(17, 56, 54, .5);
        transform: translateY(110%);
        transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    }
    .cmb-sticky.is-on { transform: none; }
    .cmb-sticky__note { flex: 1 1 auto; font-size: 12.5px; line-height: 1.3; color: rgba(17, 56, 54, .68); }
    .cmb-sticky__btn { flex: 0 0 auto; padding: 13px 20px; font-size: 15px; }
}
@media (max-width: 560px) {
    .cmb-who__item { padding-left: 52px; }          /* як у прототипі, блок [P] */
    .cmb-sticky__note { display: none; }
    .cmb-sticky__btn { width: 100%; }
    .cmb-hero__season { font-size: 13.5px; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .cmb-sticky { transition: none; }
}