/* ══════════════════════════════════════════
     POPUP ENGINE
  ══════════════════════════════════════════ */
  .popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: oklch(from var(--color-ink) l c h / 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .popup-overlay.is-open {
    opacity: 1;
    pointer-events: all;
  }
  .popup {
    background: var(--color-paper);
    border-radius: 6px;
    width: 100%;
    max-width: 620px;
    max-height: 90svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-12) var(--space-10);
    position: relative;
    transform: translateY(16px);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .popup-overlay.is-open .popup {
    transform: translateY(0);
  }
  .popup--wide { max-width: 720px; }
  .popup__close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-ink-40);
    font-size: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .popup__close:hover { background: var(--color-ink-08); color: var(--color-ink); }
  .popup__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .popup__label {
    font-size: var(--text-small);
    color: var(--color-clay);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
  }
  .popup__title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: var(--space-6);
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .popup__body {
    font-size: var(--text-lead);
    color: var(--color-ink);
    line-height: 1.7;
  }
  .popup__body p + p { margin-top: var(--space-4); }
  .popup__cta-block {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: var(--rule-thin);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .popup__cta-question {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 400;
    font-style: italic;
    color: var(--color-clay);
    line-height: 0.95;
  }
  .popup__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-white);
    background: var(--color-ink);
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--dur-base) var(--ease-out);
  }
  .popup__cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-clay);
    transform: translateX(-101%);
    transition: transform var(--dur-base) var(--ease-out);
    border-radius: inherit;
  }
  .popup__cta-btn:hover::before { transform: translateX(0); }
  .popup__cta-btn span { position: relative; z-index: 1; }
  .popup__cta-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  @media (max-width: 480px) {
    .popup__cta-block { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 600px) {
    .popup-overlay { align-items: flex-end; padding: 0; }
    .popup {
      padding: var(--space-8) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
      border-radius: 16px 16px 0 0;
      max-height: 96dvh;
      width: 100%;
    }
  }

  /* ══════════════════════════════════════════
     PROGRESS BAR
  ══════════════════════════════════════════ */
  .progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--color-clay);
    z-index: 300;
    transition: width 0.1s linear;
  }

  /* ══════════════════════════════════════════
     BUTTON UPGRADES
  ══════════════════════════════════════════ */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-ink);
    padding: var(--space-5) var(--space-10);
    border-radius: var(--radius-pill);
    position: relative;
    overflow: hidden;
    transition: color var(--dur-base) var(--ease-out);
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-clay);
    transform: translateX(-101%);
    transition: transform var(--dur-base) var(--ease-out);
    border-radius: inherit;
  }
  .btn-primary:hover::before { transform: translateX(0); }
  .btn-primary span { position: relative; z-index: 1; }
  .btn-primary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink);
    border: 1px solid var(--color-ink-20);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    cursor: pointer;
    background: none;
    font-family: var(--font-body);
  }
  .btn-outline:hover { border-color: var(--color-clay); color: var(--color-clay); }
  .btn-outline:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* ── Chat ── */
/* Placeholder: серый + спиннер пока chat.js не загрузился */
.chat-fab--loading{
  background:oklch(30% 0.01 240) !important;
  pointer-events:none;cursor:default;
}
.chat-fab--loading .chat-fab-pulse{display:none}
.chat-fab-loader-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2.5px solid transparent;
  border-top-color:oklch(60% 0 0);
  border-right-color:oklch(60% 0 0 / 0.25);
  pointer-events:none;
  animation:chatFabSpin 0.9s linear infinite;
}
@keyframes chatFabSpin{to{transform:rotate(360deg)}}
.chat-fab{
  position:fixed;bottom:32px;right:32px;z-index:300;
  width:60px;height:60px;border-radius:50%;
  background:var(--color-clay);color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 24px oklch(48% .14 35 / .4);
  transition:transform .3s cubic-bezier(0.16,1,0.3,1),box-shadow .3s,background .3s;
  cursor:pointer;border:none;
}
.chat-fab:hover{transform:scale(1.08);box-shadow:0 8px 32px oklch(48% .14 35 / .5)}
.chat-fab.is-open{background:var(--color-ink);box-shadow:0 4px 24px oklch(14% .025 240 / .3)}
.chat-fab.is-open:hover{box-shadow:0 8px 32px oklch(14% .025 240 / .4)}
.chat-fab svg{width:26px;height:26px;transition:opacity .2s,transform .2s}
.chat-fab .icon-chat{opacity:1;transform:scale(1)}
.chat-fab .icon-close{
  position:absolute;opacity:0;transform:scale(.5) rotate(-45deg);
}
.chat-fab.is-open .icon-chat{opacity:0;transform:scale(.5) rotate(45deg)}
.chat-fab.is-open .icon-close{opacity:1;transform:scale(1) rotate(0)}
.chat-fab-pulse{
  position:absolute;width:100%;height:100%;border-radius:50%;
  border:5px solid var(--color-clay);
  animation:ripple 4s cubic-bezier(0,0,.2,1) infinite;
  pointer-events:none;
}
.chat-fab-pulse:nth-child(2){animation-delay:2s}
@keyframes ripple{
  0%{transform:scale(1);opacity:.4}
  100%{transform:scale(2);opacity:0}
}
.chat-fab.is-open .chat-fab-pulse{display:none}

.chat-window{
  position:fixed;bottom:104px;right:32px;z-index:299;
  width:360px;max-width:calc(100vw - 48px);
  height:min(560px,80vh);
  background:var(--color-paper);
  border:1px solid var(--color-ink-08);
  border-radius:var(--radius-modal);
  box-shadow:0 16px 56px oklch(14% .025 240 / .18);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(16px) scale(.96);
  transform-origin:bottom right;
  opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(0.16,1,0.3,1),opacity .3s;
  max-height:520px;
}
.chat-window.is-open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
.chat-close-btn{
  display:none;margin-left:auto;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--color-ink-08);cursor:pointer;
  align-items:center;justify-content:center;
  color:var(--color-ink);transition:background .15s;
}
.chat-close-btn:hover{background:oklch(14% .025 240 / .12)}
.chat-close-btn svg{width:18px;height:18px;display:block}
/* Мобиль: чат во весь экран, кнопка закрыть в шапке */
@media(max-width:600px){
  .chat-window{
    inset:0;width:100%;max-width:100%;
    height:100%;max-height:100%;
    border-radius:0;border:none;
    transform:translateY(100%);transform-origin:bottom center;
    z-index:500;
  }
  .chat-window.is-open{transform:translateY(0) scale(1)}
  .chat-fab{z-index:400}
  .chat-fab.is-open{display:none}
  .chat-close-btn{display:flex}
}

.chat-head{
  padding:18px 20px 16px;
  border-bottom:1px solid var(--color-ink-08);
  display:flex;align-items:center;gap:12px;flex-shrink:0;
}
.chat-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--color-ink);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.chat-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.chat-avatar-wrap{
  position:relative;flex-shrink:0;width:48px;height:48px;
}
.chat-avatar-online{
  position:absolute;bottom:1px;right:1px;
  width:12px;height:12px;border-radius:50%;
  background:oklch(68% .16 145);
  border:2px solid var(--color-paper);
  z-index:2;
}
.chat-head-info{}
.chat-head-name{font-size:14px;font-weight:500;color:var(--color-ink);line-height:1.2}
.chat-head-status{font-size:var(--text-label);color:var(--color-ink-40)}
.chat-head-note{
  margin-left:auto;font-size:var(--text-label);color:var(--color-ink-40);
  text-align:right;line-height:1.4;max-width:100px;
}

.chat-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--color-ink-20);border-radius:2px}
.msg{max-width:82%;display:flex;flex-direction:column;gap:3px}
.msg.bot{align-self:flex-start}
.msg.user{align-self:flex-end}
.msg-bubble{
  padding:10px 14px;border-radius:14px;
  font-size:14px;line-height:1.55;
}
.msg.bot .msg-bubble{
  background:var(--color-ink-08);color:var(--color-ink);
  border-bottom-left-radius:4px;
}
.msg.user .msg-bubble{
  background:var(--color-ink);color:var(--color-white);
  border-bottom-right-radius:4px;
}
.msg-time{font-size:10px;color:var(--color-ink-40)}
.msg.user .msg-time{text-align:right}

.chat-typing{display:none;align-self:flex-start}
.chat-typing.is-visible{display:flex}
.chat-typing .msg-bubble{display:flex;align-items:center;gap:4px;padding:12px 16px}
.typing-dot{
  width:6px;height:6px;border-radius:50%;background:var(--color-clay);
  animation:typingDot 1.2s infinite;
}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

.chat-quick{
  padding:8px 12px;display:flex;gap:6px;flex-wrap:wrap;
  border-top:1px solid var(--color-ink-08);flex-shrink:0;
}
.chat-chip{
  padding:6px 12px;border-radius:var(--radius-modal);
  border:1px solid var(--color-ink-20);font-size:12px;color:var(--color-ink);
  background:var(--color-paper);cursor:pointer;white-space:nowrap;
  transition:border-color .2s,background .2s;
}
.chat-chip:hover{border-color:var(--color-clay);background:oklch(from var(--color-clay) l c h / .06)}

.chat-input-row{
  padding:12px 16px;display:flex;gap:8px;align-items:flex-end;
  border-top:1px solid var(--color-ink-08);flex-shrink:0;
}
.chat-input{
  flex:1;resize:none;border:1px solid var(--color-ink-20);border-radius:12px;
  padding:10px 14px;font:inherit;font-size:14px;
  color:var(--color-ink);background:var(--color-paper);
  outline:none;line-height:1.5;
  min-height:42px;max-height:90px;overflow-y:auto;
  transition:border-color .2s;
  font-family:var(--font-body);
}
.chat-input:focus{border-color:var(--color-clay)}
.chat-input::placeholder{color:var(--color-ink-40)}
.chat-action-wrap{margin-top:8px}
.chat-action-btn{
  display:flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:999px;
  background:var(--color-ink);color:var(--color-paper);
  font-size:13px;font-weight:500;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .2s;text-align:center;
}
.chat-action-btn:hover{background:oklch(20% 0.025 240)}
.chat-action-btn--tg{
  background:#2AABEE;color:#fff;
}
.chat-action-btn--tg:hover{background:#1d96d4}
.chat-action-btn--site{
  background:var(--color-clay);color:#fff;
}
.chat-action-btn--site:hover{background:oklch(42% 0.14 35)}
.chat-action-btn--ghost{
  background:none;
  border:1.5px solid var(--color-ink-20);
  color:var(--color-ink);
}
.chat-action-btn--ghost:hover{border-color:var(--color-clay);background:oklch(from var(--color-clay) l c h / .06);color:var(--color-ink)}
.chat-contact-form{
  display:flex;flex-direction:column;gap:8px;
  margin-top:12px;
}
.chat-contact-input{
  padding:10px 14px;border-radius:10px;
  border:1.5px solid var(--color-ink-08);
  background:var(--color-paper);
  font-size:13px;color:var(--color-ink);
  font-family:var(--font-body);
  outline:none;transition:border-color .2s;
}
.chat-contact-input:focus{border-color:var(--color-clay)}
.chat-contact-input::placeholder{color:var(--color-ink-40)}
.chat-send{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--color-clay);color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s;cursor:pointer;border:none;
}
.chat-send:hover{transform:scale(1.08);background:var(--color-ink)}
.chat-send svg{width:16px;height:16px}
.chat-disclaimer{
  padding:5px 16px 20px;
  font-size:12px;color:var(--color-ink-40);text-align:center;line-height:1.5;
  flex-shrink:0;
}
/* ════════════════════════════════
   QUIZ (тесты)
════════════════════════════════ */
.tests-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-5);
  align-items:start;
}
.test-card{
  padding:32px 28px 26px;
  border:1px solid var(--color-ink-08);border-radius:var(--radius-card);
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:border-color .25s,box-shadow .25s,transform .25s;
  text-align:left;background:var(--color-paper);
}
.test-card:hover{
  border-color:oklch(from var(--color-clay) l c h / .4);
  box-shadow:0 8px 28px oklch(14% .025 240 / .07);
  transform:translateY(-3px);
}
.mg-grid .test-card:hover{transform:none}
.test-card__tag{
  display:block;
  font-size:var(--text-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-clay);margin-bottom:8px;
}
.test-card__title{
  display:block;
  font-family:var(--font-display);font-size:24px;font-weight:700;
  color:var(--color-ink);line-height: 0.95;margin-bottom:14px;
}
.test-card__desc{font-size:15px;color:var(--color-ink-60);line-height:1.65;flex:1}
.test-card__footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--color-ink-08);
}
.test-card__meta{font-size:13px;color:var(--color-ink-40)}
.test-card__arrow{
  color:var(--color-clay);font-size:16px;
  transition:transform .2s;
}
.test-card:hover .test-card__arrow{transform:translateX(4px)}



/* ── Masonry grid (CSS columns) ── */
.mg-grid{columns:2;column-gap:20px;}
.mg-grid > *{break-inside:avoid;margin-bottom:20px;display:block;width:100%;}
@media(max-width:640px){.mg-grid{columns:1}}

/* ── Тёмные карточки для тестов ── */
.test-card--dark{
  background:var(--color-ink);
  border-color:transparent;
}
.test-card--dark .test-card__tag{color:var(--color-clay)}
.test-card--dark .test-card__title{color:oklch(97% 0.006 85)}
.test-card--dark .test-card__desc{color:oklch(100% 0 0 / .65)}
.test-card--dark .test-card__meta{color:oklch(100% 0 0 / .52)}
.test-card--dark .test-card__footer{border-color:oklch(100% 0 0 / .15)}
.test-card--dark .test-card__arrow{color:var(--color-clay)}
.test-card--dark:hover{
  border-color:transparent;
  box-shadow:0 8px 28px oklch(14% .025 240 / .2);
  background:oklch(20% 0.025 240);
}

/* ── Illus cell ── */
.mg-illus{
  border-radius:var(--radius-card);overflow:hidden;
  display:block;width:100%;
}
.mg-illus img{width:100%;height:100%;object-fit:cover;display:block;}
.mg-illus--tall{aspect-ratio:3/4}
.mg-illus--square{aspect-ratio:1/1}
.mg-illus--wide{aspect-ratio:4/3}

/* ── Quote cell (вариант A+C) ── */
.mg-quote{
  border-radius:var(--radius-card);
  background:oklch(from var(--color-clay) l c h / .07);
  padding:20px 24px;
  display:flex;align-items:center;
}
.mg-quote__text{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(16px,1.8vw,20px);font-weight:400;
  color:var(--color-ink);line-height: 0.95;
}

/* ── Section divider between тесты / упражнения ── */
.mg-divider{
  column-span:all;
  padding:32px 0 8px;
  border-top:1px solid var(--color-ink-08);
  margin-bottom:0;
}
.mg-divider__label{font-size:var(--text-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-clay);margin-bottom:6px}
.mg-divider__title{font-family:var(--font-display);font-size:clamp(22px,3vw,36px);font-weight:700;color:var(--color-ink);line-height: 0.95}

/* Quiz popup content */
.quiz-progress{
  height:4px;background:var(--color-ink-08);border-radius:2px;
  margin-bottom:32px;overflow:hidden;
}
.quiz-progress__bar{
  height:100%;background:var(--color-clay);border-radius:2px;
  transition:width .4s cubic-bezier(0.16,1,0.3,1);
}
.quiz-step{animation:stepIn .3s cubic-bezier(0.16,1,0.3,1) both}
@keyframes stepIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.quiz-q-num{
  font-size:var(--text-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-clay);margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;
}
.quiz-q-counter{color:var(--color-ink-40);font-weight:400}
.quiz-question{
  font-family:var(--font-display);font-size:clamp(19px,2.8vw,24px);
  font-weight:700;line-height: 0.95;color:var(--color-ink);
  margin-bottom:28px;
}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{
  width:100%;padding:16px 20px;
  border:1.5px solid var(--color-ink-08);border-radius:10px;
  text-align:left;font-size:16px;font-weight:400;color:var(--color-ink);
  background:var(--color-paper);
  transition:border-color .15s,background .15s,transform .1s;
  cursor:pointer;
}
.quiz-option:hover{
  border-color:oklch(from var(--color-clay) l c h / .5);
  background:oklch(from var(--color-clay) l c h / .04);
  transform:translateX(4px);
}
.quiz-option.is-selected{
  border-color:var(--color-clay);
  background:oklch(from var(--color-clay) l c h / .08);
  font-weight:500;
  transform:translateX(4px);
}
.quiz-nav{
  display:flex;align-items:center;justify-content:flex-start;
  margin-top:24px;
}
.quiz-back-btn{
  font-size:13px;color:var(--color-ink-40);background:none;border:none;
  cursor:pointer;padding:8px 0;
  transition:color .15s;
}
.quiz-back-btn:hover{color:var(--color-ink)}
/* ════════════════════════════════
   EXERCISE ENGINE
════════════════════════════════ */
.ex-header{margin-bottom:var(--space-6)}
.ex-label{
  font-size:var(--text-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-clay);margin-bottom:var(--space-2);
}
.ex-title{
  font-family:var(--font-display);font-size:clamp(20px,3vw,26px);font-weight:700;
  color:var(--color-ink);line-height: 0.95;
}
.ex-step{display:none;animation:stepIn .35s var(--ease-out) both}
.ex-step.is-active{display:block}
.ex-step-num{
  font-size:var(--text-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-ink-40);margin-bottom:var(--space-4);
}
.ex-step-text{
  font-size:clamp(15px,2vw,17px);color:var(--color-ink);line-height:1.75;
  margin-bottom:var(--space-6);
}
.ex-step-hint{
  font-size:13px;color:var(--color-ink-40);font-style:italic;
  margin-bottom:var(--space-6);
}
.ex-nav{
  display:flex;gap:var(--space-3);align-items:center;
  margin-top:auto;padding-top:24px;
  border-top:1px solid var(--color-ink-08);
}

/* Breathing circle animation */
.breath-ring-wrap{
  display:flex;flex-direction:column;align-items:center;
  margin:8px 0 16px;gap:16px;
  padding:0;
}
.breath-scene{
  position:relative;width:160px;height:160px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  /* резерв под holdGlow box-shadow */
  margin:20px;
}
.breath-ring-outer,
.breath-ring-mid,
.breath-ring-inner{
  position:absolute;border-radius:50%;
  transform-origin:center;
}
.breath-ring-outer{
  width:160px;height:160px;
  background:oklch(from var(--color-clay) l c h / .06);
  border:1px solid oklch(from var(--color-clay) l c h / .12);
}
.breath-ring-mid{
  width:116px;height:116px;
  background:oklch(from var(--color-clay) l c h / .1);
  border:1.5px solid oklch(from var(--color-clay) l c h / .2);
}
.breath-ring-inner{
  width:76px;height:76px;
  background:oklch(from var(--color-clay) l c h / .18);
  border:2px solid oklch(from var(--color-clay) l c h / .45);
  display:flex;align-items:center;justify-content:center;
}
.breath-scene[data-phase="inhale"] .breath-ring-outer{animation:breatheOuter 4s ease-in forwards}
.breath-scene[data-phase="inhale"] .breath-ring-mid{animation:breatheMid 4s ease-in forwards}
.breath-scene[data-phase="inhale"] .breath-ring-inner{
  animation:breatheInner 4s ease-in forwards;
  background:oklch(from var(--color-clay) l c h / .28);border-color:var(--color-clay);
}
.breath-scene[data-phase="hold"] .breath-ring-outer{
  transform:scale(1.28);animation:holdGlow 2s ease-in-out infinite;
}
.breath-scene[data-phase="hold"] .breath-ring-mid{transform:scale(1.22)}
.breath-scene[data-phase="hold"] .breath-ring-inner{
  transform:scale(1.18);
  background:oklch(from var(--color-clay) l c h / .32);border-color:var(--color-clay);
}
.breath-scene[data-phase="exhale"] .breath-ring-outer{animation:exhaleOuter 8s cubic-bezier(0.33,1,0.68,1) forwards}
.breath-scene[data-phase="exhale"] .breath-ring-mid{animation:exhaleMid 8s cubic-bezier(0.33,1,0.68,1) forwards}
.breath-scene[data-phase="exhale"] .breath-ring-inner{animation:exhaleInner 8s cubic-bezier(0.33,1,0.68,1) forwards}
@keyframes breatheOuter{from{transform:scale(1)}to{transform:scale(1.28)}}
@keyframes breatheMid  {from{transform:scale(1)}to{transform:scale(1.22)}}
@keyframes breatheInner{from{transform:scale(1)}to{transform:scale(1.18)}}
@keyframes exhaleOuter {from{transform:scale(1.28)}to{transform:scale(1)}}
@keyframes exhaleMid   {from{transform:scale(1.22)}to{transform:scale(1)}}
@keyframes exhaleInner {from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes holdGlow{
  0%,100%{box-shadow:0 0 0 0 oklch(from var(--color-clay) l c h / .15)}
  50%{box-shadow:0 0 0 20px oklch(from var(--color-clay) l c h / 0)}
}
.breath-phase-label{
  font-family:var(--font-display);font-style:italic;
  font-size:20px;font-weight:400;
  color:var(--color-clay);text-align:center;min-height:28px;
}
.breath-counter{
  font-size:32px;font-family:var(--font-display);font-weight:700;
  color:var(--color-ink);line-height: 0.95;text-align:center;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.breath-controls{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:auto;padding-top:16px;
}
.breath-hint{
  font-size:14px;color:var(--color-ink-40);line-height:1.5;flex:1;
}

/* 5-4-3-2-1 grounding */
.grounding-sense{
  display:flex;align-items:flex-start;gap:var(--space-4);
  padding:20px 20px;
  border:1px solid var(--color-ink-08);border-radius:12px;
  margin-bottom:0;
}
.grounding-num{
  font-family:var(--font-display);font-size:36px;font-weight:900;
  color:var(--color-clay);line-height: 0.95;flex-shrink:0;width:40px;
}
.grounding-body h4{
  font-size:15px;font-weight:500;color:var(--color-ink);margin-bottom:var(--space-2);
}
.grounding-body p{font-size:14px;color:var(--color-ink-60);line-height:1.6}

/* Exercise finish */
.ex-finish{
  display:flex;flex-direction:column;flex:1;
  text-align:center;
}
.ex-finish-center{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-4);
}
.ex-finish-emoji{font-size:56px;display:block;line-height:1}
.ex-finish-q{
  font-family:var(--font-display);font-size:clamp(20px,2.5vw,28px);
  font-weight:700;color:var(--color-ink);
  line-height: 0.95;
}
.ex-finish-btns{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:auto;padding-top:var(--space-6)}

  /* ── Form styles — exact copy from base.css ── */
  .booking__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .form__field { display: flex; flex-direction: column; gap: var(--space-1); }
  .form__label { display: none; } /* лейблы скрыты — placeholder внутри поля */
  .form__optional { display: none; }
  .form__input {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--color-paper);
    border: 1px solid var(--color-ink-20);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-ink);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    outline: none;
    -webkit-appearance: none;
  }
  .form__input::placeholder { color: var(--color-ink-40); }
  .form__input:hover { border-color: var(--color-ink-40); }
  .form__input:focus { border-color: var(--color-clay); box-shadow: 0 0 0 3px var(--color-clay-light); }
  .form__input.is-error { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-light); }
  .form__textarea { resize: vertical; min-height: 80px; }
  .form__error {
    font-size: var(--text-small);
    color: var(--color-error);
    min-height: 14px;
  }
  .form__field--check { flex-direction: column; gap: var(--space-1); }
  .form__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
  }
  .form__check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .form__check-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-ink-20);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    margin-top: 1px;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    position: relative;
  }
  .form__check input:checked + .form__check-box {
    background: var(--color-clay);
    border-color: var(--color-clay);
  }
  .form__check input:checked + .form__check-box::after {
    content: '';
    position: absolute;
    left: 4px; top: 2px;
    width: 6px; height: 9px;
    border: 1.5px solid var(--color-white);
    border-top: none; border-left: none;
    transform: rotate(40deg);
  }
  .form__check input:focus-visible + .form__check-box {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
  .form__check-label {
    font-size: var(--text-small);
    color: var(--color-ink);
    line-height: 1.5;
  }
  .form__link { color: var(--color-clay); text-decoration: underline; text-underline-offset: 2px; }
  .form__submit { width: 100%; margin-top: 12px; }
  .form__submit:hover:not(:disabled) { background: var(--color-clay); }
  .form__submit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .form__submit-loading { display: none; }
  .form__submit.is-loading .form__submit-text { display: none; }
  .form__submit.is-loading .form__submit-loading { display: block; }
  .form__success {
    display: none;
    padding: var(--space-6);
    background: var(--color-green-light);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-green);
  }
  .form__success.is-visible { display: block; }
  .form__success-title {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-green);
    margin-bottom: var(--space-2);
  }
  .form__success-text {
    font-size: var(--text-small);
    color: var(--color-ink-60);
    line-height: 1.6;
    margin-bottom: var(--space-4);
  }
  .form__success-links {
    display: flex;
    gap: var(--space-5);
  }
  .form__success-link {
    font-size: var(--text-small);
    color: var(--color-clay);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
  }
  .form__success-link:hover { opacity: 0.7; }
  @media (max-width: 900px) {
    .booking__inner { grid-template-columns: 1fr; gap: var(--space-12); }
  }
  @media (max-width: 480px) {
    .booking { padding-inline: var(--space-5); }
    .form__submit { width: 100%; margin-top: 12px; }
  }

  /* ── Booking CTA ── */
  .booking-cta {
    padding: var(--space-32) var(--space-8);
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .booking-cta__inner {
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-16);
    align-items: center;
  }
  .booking-cta__label {
    font-size: var(--text-small);
    color: var(--color-clay);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
  }
  .booking-cta__heading {
    font-family: var(--font-display);
    font-size: var(--text-display-s);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin-bottom: var(--space-5);
    overflow-wrap: anywhere;
    min-width: 0;
    color: var(--color-paper);
  }
  .booking-cta__sub {
    font-size: var(--text-lead);
    color: var(--color-ink-60);
    color: oklch(from var(--color-paper) l c h / 0.65);
    line-height: 1.6;
    max-width: 44ch;
  }
  .booking-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }
  .booking-cta__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  @media (max-width: 900px) {
    .booking-cta__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  }
  @media (max-width: 480px) {
    .booking-cta { padding-inline: var(--space-5); }
    .booking-cta__actions .btn-primary { width: 100%; }
  }

  /* ── Inline CTA ── */
  .inline-cta {
    padding: var(--space-20) var(--space-8);
    background: var(--color-ink);
    color: var(--color-paper);
    text-align: center;
  }
  .inline-cta__inner { max-width: 640px; margin-inline: auto; }
  .inline-cta__label {
    font-size: var(--text-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-clay);
    margin-bottom: var(--space-3);
  }
  .inline-cta__heading {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    font-style: italic;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
    color: var(--color-paper);
  }
  .inline-cta__sub {
    font-size: var(--text-body);
    color: oklch(from var(--color-paper) l c h / 0.6);
    margin-bottom: var(--space-8);
    line-height: 1.6;
  }
  .inline-cta .btn-primary,
  .inline-cta__btn {
    background: var(--color-clay);
    color: var(--color-paper);
    border-color: var(--color-clay);
  }
  .inline-cta .btn-primary:hover,
  .inline-cta__btn:hover {
    background: oklch(from var(--color-clay) calc(l + 0.06) c h);
  }
  .inline-cta__btn::before { display: none; }

  /* ── Howto ── */
  .howto {
    padding: var(--space-32) var(--space-8);
    background: var(--color-ink);
    color: var(--color-paper);
    position: relative;
    overflow: hidden;
  }
  .howto::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 55%;
    background: url('../photo_web/illus-howto-dark.webp') center right/cover no-repeat;
    opacity: 0.22;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 55%);
    mask-image: linear-gradient(to right, transparent 0%, black 55%);
  }
  .howto__inner { max-width: 1200px; margin-inline: auto; }
  .howto__label {
    font-size: var(--text-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-clay);
    margin-bottom: var(--space-4);
  }
  .howto__heading {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.02em;
    color: var(--color-paper);
    margin-bottom: var(--space-16);
  }
  .howto__steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
    border-top: 1px solid oklch(from var(--color-paper) l c h / 0.12);
    padding-top: var(--space-10);
  }
  .howto__step { display: flex; flex-direction: column; gap: var(--space-4); }
  .howto__num {
    font-family: var(--font-display);
    font-size: clamp(60px, 8vw, 96px);
    font-weight: 700;
    font-style: italic;
    line-height: 0.95;
    color: var(--color-clay);
    letter-spacing: -0.04em;
  }
  .howto__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--color-paper);
    margin-bottom: var(--space-2);
  }
  .howto__text {
    font-size: var(--text-body);
    color: oklch(from var(--color-paper) l c h / 0.65);
    line-height: 1.65;
  }
  @media (max-width: 860px) {
    .howto__steps { grid-template-columns: 1fr; gap: var(--space-8); }
    .howto__num { font-size: 56px; }
  }
  @media (max-width: 480px) {
    .howto { padding-inline: var(--space-5); }
    .inline-cta { padding-inline: var(--space-5); }
  }

  .docs {
    padding: var(--space-24) var(--space-8);
    background: var(--color-paper);
    border-top: var(--rule-thin);
  }
  .docs__inner {
    max-width: 1200px;
    margin-inline: auto;
  }
  .docs__label {
    font-size: var(--text-small);
    color: var(--color-clay);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
  }
  .docs__heading {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .docs__sub {
    font-size: var(--text-body);
    color: var(--color-ink-40);
    max-width: 52ch;
    margin-bottom: var(--space-12);
  }
  .docs__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 680px;
  }
  .docs__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6) 0;
    border-top: var(--rule-thin);
  }
  .docs__item:last-child { border-bottom: var(--rule-thin); }
  .docs__icon {
    font-size: 16px;
    color: var(--color-ink-40);
    flex-shrink: 0;
    padding-top: 2px;
  }
  .docs__title {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--color-ink);
    margin-bottom: var(--space-1);
  }
  .docs__note {
    font-size: var(--text-small);
    color: var(--color-ink-40);
  }
  @media (max-width: 480px) {
    .docs { padding-inline: var(--space-5); }
  }


  .footer {
    background: transparent;
    padding: 0;
  }

  /* Footer — фон совпадает с body, отступ вокруг CTA */
  .footer {
    background: var(--color-paper);
    padding: var(--space-16) var(--space-8) var(--space-16);
  }

  /* CTA блок */
  .footer__cta {
    position: relative;
    background: var(--color-ink);
    padding: var(--space-32) var(--space-8);
    overflow: hidden;
    /* shrink-эффект — управляется JS */
    border-radius: var(--cta-radius, 0px);
    width: var(--cta-width, 100%);
    margin-inline: auto;
    /* тень — усиливается JS */
    box-shadow: var(--cta-shadow, none);
    transition: border-radius 0.15s ease-out, box-shadow 0.15s ease-out;
  }
  /* Видео фон */
  .footer__cta-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .footer__cta-overlay {
    position: absolute;
    inset: 0;
    /* тёмный оверлей + лёгкий терракотовый тинт */
    background: linear-gradient(
      135deg,
      oklch(14% 0.025 240 / 0.82),
      oklch(20% 0.04 35 / 0.75)
    );
    pointer-events: none;
  }
  .footer__cta-inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
  }
  .footer__cta-label {
    font-size: var(--text-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(from var(--color-paper) l c h / 0.4);
    margin-bottom: var(--space-5);
  }
  .footer__cta-heading {
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 96px);
    font-weight: 700;
    font-style: italic;
    color: var(--color-paper);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-5);
  }
  .footer__cta-heading em {
    font-style: italic;
    color: var(--color-clay);
  }
  .footer__cta-sub {
    font-size: var(--text-body);
    color: oklch(from var(--color-paper) l c h / 0.5);
    margin-bottom: var(--space-10);
  }
  .footer__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 18px 48px;
    background: var(--color-clay);
    color: var(--color-paper);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .footer__cta-btn:hover {
    background: oklch(from var(--color-clay) calc(l + 0.06) c h);
    transform: translateY(-2px);
  }
  .footer__cta-btn span { position: relative; z-index: 1; }

  /* Нижняя часть футера */
  .footer__body {
    background: transparent;
    padding: 80px var(--space-8) var(--space-8);
    border-top: none;
  }
  .footer__body-inner {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: var(--rule-thin);
    margin-bottom: var(--space-6);
  }
  .footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .footer__logo {
    display: block;
    width: 32px;
    color: var(--color-clay);
    transition: opacity var(--dur-fast) var(--ease-out);
    flex-shrink: 0;
  }
  .footer__logo:hover { opacity: 0.7; }
  .footer__logo svg { width: 100%; height: auto; }
  .footer__tagline {
    font-size: var(--text-small);
    color: var(--color-ink);
    line-height: 1.4;
  }
  .footer__tagline span {
    display: block;
    color: var(--color-ink-40);
  }
  .footer__social {
    display: flex;
    gap: var(--space-6);
  }
  .footer__social-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    color: var(--color-ink-60);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .footer__social-link:hover { color: var(--color-clay); }
  .footer__bottom {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .footer__copy {
    font-size: var(--text-small);
    color: var(--color-ink-40);
  }
  .footer__legal-links {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .footer__legal-links a {
    font-size: var(--text-small);
    color: var(--color-ink-40);
    transition: color 0.2s;
  }
  .footer__legal-links a:hover { color: var(--color-clay); }
  @media (max-width: 768px) {
    .footer__body-inner { flex-direction: column; align-items: center; text-align: center; }
    .footer__brand { flex-direction: column; align-items: center; }
    .footer__social { justify-content: center; }
    .footer__bottom { flex-direction: column; align-items: center; gap: var(--space-4); }
    .footer__copy { text-align: center; }
    .footer__legal-links { justify-content: center; gap: var(--space-3); }
    .footer__age { display: block; margin: 0 auto; }
  }
  @media (max-width: 480px) {
    .footer__cta { padding-inline: var(--space-5); }
    .footer__body { padding-inline: var(--space-5); }
  }


  /* ── Scroll reveal ── */
  .will-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
  }
  .is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .will-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* ── Nav active link ── */
  .nav__links a.is-active {
    color: var(--color-ink);
    font-weight: 500;
  }
  /* Popup form: override booking__form gap for precise spacing */
  .popup .booking__form { gap: 0; }
  .popup .form__field { margin-bottom: 8px; }
  .popup .form__textarea { margin-bottom: 16px; }
  .popup .form__field--check { margin-bottom: -8px; }
  .popup .form__submit { margin-top: 18px; }

  .footer__age {
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    user-select: none;
    vertical-align: middle;
  }