/* Тема сайту: структура, шкала шрифтів і відступи — за DESIGN-2.md і theme.css (Refero Styles, «Dala»);
   кольори — з логотипа «Точка росту» (29.09): ніч — темно-синє тло лого #0b1a2f, день — білий (референс OneLine Health).
   Обидві теми однакові за стилем: сині кнопки, блакитні панелі, «скляні» картки, фіолетовий — лише акценти.
   Шрифт: PPNeueMontreal (платний) → Inter, як указано у файлі в полі Substitute. */

[data-theme="noir"] {
  /* Colors — ніч: темно-синє тло логотипа, світлий текст, сині кнопки, фіолетовий лише в акцентах */
  --color-void: #0b1a2f;            /* тло — як у темного логотипа */
  --color-bone-white: #f1f5ff;      /* текст */
  --color-silver-mist: #b8c7e2;     /* текст абзаців */
  --color-ash-gray: #94a4c5;        /* навігація, дрібні підписи */
  --color-electric-iris: #2a66e3;   /* кнопки — синій (білий напис 5.1:1) */
  --color-saffron-spark: #b3a4ff;   /* фіолетові акценти */
  --color-deep-verdant: #6f9ff0;
  --color-on-iris: #ffffff;         /* текст на кнопці — білий в обох темах */
  --color-role: #8fb4ff;            /* блакитні підписи ролі (під фото, біля контактів) */
  --color-violet-deep: #c2b6ff;     /* акцент на найяскравішій блакиті (панель програми) */
  --color-wash-soft: #0f213b;       /* блакитні (тут — глибокі сині) тони */
  --color-wash: #142a4b;
  --color-wash-strong: #1b375f;
  --glass-from: #152a4b; --glass-to: #0f203a; --glass-soft: rgba(255, 255, 255, .05);
  --glass-border: rgba(255, 255, 255, .09); --glass-shadow: rgba(0, 0, 0, .5);
  --glow: rgba(42, 102, 227, .32);  /* відсвіт за портретом */
  --photo-shade: 11, 26, 47;        /* затемнення фото в картках практик (rgb) */
  --logo-ink: #bcd4f7; --logo-mark: url("/assets/logo-mark-night.png");

  /* Typography — Font Families (Substitute: Inter) */
  --font-ppneuemontreal: 'PPNeueMontreal', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;        --leading-caption: 1.5;
  --text-nav-label: 14px;      --leading-nav-label: 1.2;   --tracking-nav-label: 0.35px;
  --text-body: 18px;           --leading-body: 1.5;
  --text-heading-2xs: 24px;    --leading-heading-2xs: 1.25; --tracking-heading-2xs: -0.48px;
  --text-heading-xs: 27px;     --leading-heading-xs: 1;
  --text-subheading: 36px;     --leading-subheading: 1.2;
  --text-heading-sm: 42px;     --leading-heading-sm: 1.2;  --tracking-heading-sm: -1.68px;
  --text-heading: 48px;        --leading-heading: 1.1;     --tracking-heading: -1.68px;
  --text-heading-lg: 78px;     --leading-heading-lg: 1.1;  --tracking-heading-lg: -3.12px;
  --text-display: 113px;       --leading-display: 1.1;     --tracking-display: -4.52px;

  /* Typography — Weights */
  --font-weight-extralight: 200;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-6: 6px; --spacing-12: 12px; --spacing-18: 18px; --spacing-24: 24px; --spacing-30: 30px;
  --spacing-36: 36px; --spacing-60: 60px; --spacing-96: 96px; --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1280px;

  /* Border Radius */
  --radius-3xl: 24px; --radius-full: 9999px;
  --radius-nav: 24px; --radius-tags: 9999px; --radius-cards: 24px; --radius-buttons: 24px;

  /* Surfaces */
  --surface-void-canvas: #0b1a2f;
  --surface-electric-iris: #2a66e3;

  /* відповідники для спільних стилів сайту */
  --paper: var(--color-void); --porcelain: var(--color-void); --ink: var(--color-bone-white);
  --ink-soft: var(--color-ash-gray); --teal: var(--color-saffron-spark); --teal-bright: var(--color-deep-verdant);
  --dot: var(--color-electric-iris); --dot-deep: var(--color-electric-iris); --line: transparent;
  --display: var(--font-ppneuemontreal); --text: var(--font-ppneuemontreal); --radius: var(--radius-cards);
  --wrap: var(--page-max-width); --gutter: var(--spacing-24);
  color-scheme: dark;
}

/* ---------- день: світла тема (07:00–19:00 за годинником відвідувача або кнопкою в шапці) ----------
   Палітра — за референсом Alex (OneLine Health, 29.09): білий 60% · блакитні тони 30% · фіолетовий 10%.
   Білий — головний: тло всіх розділів. Блакитні — другорядні: м'який відсвіт за портретом, панель програми, запис,
   підвал, «скляні» картки, сині кнопки. Фіолетовий — ТІЛЬКИ акценти (підписи, номери, маркери, іконки), ніколи не тло
   (уточнення Alex 29.09).
   Текст — глибокий синій замість чорного. Контраст перевіряє tests/test_site.py (текст ≥ 4.5:1 і на білому,
   і на найтемнішій блакиті). Компоненти обох тем — блок «блакить і скло» нижче. */
[data-theme="noir"][data-mode="day"] {
  --color-void: #ffffff;            /* 60% — біле полотно */
  --color-bone-white: #13234a;      /* чорнило — глибокий синій */
  --color-silver-mist: #33456e;     /* текст абзаців */
  --color-ash-gray: #56668a;        /* навігація, дрібні підписи */
  --color-electric-iris: #1f5fe6;   /* кнопки — насичений синій, як «Request Demo» */
  --color-saffron-spark: #5b43d6;   /* 10% — фіолетові акценти */
  --color-deep-verdant: #4d8df0;    /* кінець градієнта логотипа */
  --color-violet-deep: #4a34c0;     /* акцент на найтемнішій блакиті (блок програми) */
  --color-wash-soft: #eef5ff;       /* 30% — блакитні тони */
  --color-wash: #d9e9fd;
  --color-wash-strong: #b3d3f8;
  --color-role: #1f5fe6;
  --glass-from: #ffffff; --glass-to: #eef5ff; --glass-soft: rgba(255, 255, 255, .6);
  --glass-border: #ffffff; --glass-shadow: rgba(31, 95, 230, .45);
  --glow: rgba(147, 193, 245, .55);
  --photo-shade: 19, 35, 74;
  --logo-ink: #3d6cb3; --logo-mark: url("/assets/logo-mark-day.png");
  --surface-void-canvas: #ffffff;
  color-scheme: light;
}
/* зміна дня і ночі кнопкою — м'яке перетікання (у браузерах із View Transitions; інші перемикають миттєво) */
:root.mode-switching::view-transition-old(root), :root.mode-switching::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease; }

/* ---------- основа ---------- */
[data-theme="noir"] body {
  background: var(--surface-void-canvas); color: var(--color-bone-white);
  font-family: var(--font-ppneuemontreal); font-size: var(--text-body); line-height: var(--leading-body);
  font-weight: var(--font-weight-extralight); font-feature-settings: "ss01" on;
}
[data-theme="noir"] h1, [data-theme="noir"] h2, [data-theme="noir"] h3, [data-theme="noir"] h4 { font-family: var(--font-ppneuemontreal); font-weight: var(--font-weight-regular); color: var(--color-bone-white); }
[data-theme="noir"] b, [data-theme="noir"] strong { font-weight: var(--font-weight-regular); }
[data-theme="noir"] a { color: var(--color-bone-white); }
[data-theme="noir"] :focus-visible { outline: 2px solid var(--color-saffron-spark); outline-offset: 3px; }
[data-theme="noir"] .wrap { max-width: var(--page-max-width); padding: 0 var(--spacing-24); }
[data-theme="noir"] .sec { padding: var(--spacing-120) 0; }
[data-theme="noir"] section { scroll-margin-top: var(--spacing-24); }
[data-theme="noir"] .pt { background: var(--color-electric-iris); }

/* ---------- Navigation Bar: прозорий, без рамки й розмиття ---------- */
[data-theme="noir"] .top { position: relative; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-theme="noir"] .top .wrap { height: auto; padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); gap: var(--spacing-36); }
/* Логотип: знак «Точка росту» (вдень — зі світлого лого, вночі — з темного) + напис у стилі лого */
[data-theme="noir"] .logo { font-family: var(--font-ppneuemontreal); font-size: 13px; font-weight: var(--font-weight-regular); text-transform: uppercase; letter-spacing: .16em; color: var(--logo-ink); gap: var(--spacing-12); white-space: nowrap; }
[data-theme="noir"] .logo .pt { width: 44px; height: 44px; flex: none; border-radius: 0; clip-path: none; background: var(--logo-mark) center / contain no-repeat; }
[data-theme="noir"] .nav { gap: var(--spacing-30); }
[data-theme="noir"] .nav a { font-size: var(--text-nav-label); line-height: var(--leading-nav-label); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-nav-label); color: var(--color-ash-gray); border: 0; padding: 0; }
[data-theme="noir"] .nav a:hover { color: var(--color-bone-white); }
/* мова і музика — як Ghost Text Button */
[data-theme="noir"] .lang { border: 0; padding: 0; gap: var(--spacing-12); }
[data-theme="noir"] .lang a { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; font-size: var(--text-nav-label); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-nav-label); color: var(--color-ash-gray); }
[data-theme="noir"] .lang a[aria-current="page"] { background: none; color: var(--color-bone-white); }
[data-theme="noir"] .tools { gap: var(--spacing-18); }
[data-theme="noir"] .music, [data-theme="noir"] .mode { position: relative; width: auto; height: auto; padding: 0; border: 0; background: none; color: var(--color-ash-gray); }
[data-theme="noir"] .music:hover, [data-theme="noir"] .music[aria-pressed="true"], [data-theme="noir"] .mode:hover { background: none; color: var(--color-bone-white); border: 0; }
/* іконка 20px, а зона дотику — 38×44px (по 9px убоки = половина проміжку 18px, тож сусідні зони не перекриваються) */
[data-theme="noir"] .music::after, [data-theme="noir"] .mode::after { content: ""; position: absolute; inset: -12px -9px; }
/* день/ніч: показуємо, КУДИ перемкне кнопка — сонце вночі, місяць удень; без JavaScript кнопки не видно */
[data-mode="day"] .mode .ic-sun, :root:not([data-mode="day"]) .mode .ic-moon, :root:not([data-mode]) .mode { display: none; }

/* ---------- Primary Action Button: синя пігулка ---------- */
[data-theme="noir"] .btn { min-height: 0; border-radius: 22.5px; font-family: var(--font-ppneuemontreal); transition: background-color .2s, color .2s; }
[data-theme="noir"] .btn:hover { transform: none; }
[data-theme="noir"] .btn-dot { background: var(--color-electric-iris); color: var(--color-on-iris); padding: 14.4px 15.96px; font-size: var(--text-nav-label); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-nav-label); box-shadow: none; }
[data-theme="noir"] .btn-dot:hover { background: var(--color-electric-iris); color: var(--color-on-iris); filter: brightness(1.12); }
[data-theme="noir"] .btn-dot svg { display: none; }
/* Ghost Text Button: без тла й рамки */
[data-theme="noir"] .btn-line, [data-theme="noir"] .btn-light { background: none; border: 0; padding: 14.4px 0; color: var(--color-bone-white); font-size: var(--text-nav-label); font-weight: var(--font-weight-regular); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--color-ash-gray); }
[data-theme="noir"] .btn-line:hover, [data-theme="noir"] .btn-light:hover { background: none; color: var(--color-saffron-spark); text-decoration-color: var(--color-saffron-spark); }

/* ---------- Перший екран: головна фраза → ім'я → роль → кнопка → де; праворуч портрет ---------- */
[data-theme="noir"] .hero { padding: var(--spacing-60) 0 var(--spacing-120); }
[data-theme="noir"] .hero .wrap { grid-template-columns: 1fr 1fr; gap: var(--spacing-36); }
[data-theme="noir"] .hero-text { display: flex; flex-direction: column; align-items: flex-start; }
/* головна фраза першого екрана (Alex, 29.09): велика; під нею — ім'я великими літерами, меншим, але помітним шрифтом */
[data-theme="noir"] .hero-quote { order: 0; max-width: 640px; margin: 0 0 var(--spacing-36); font-size: clamp(34px, 4.3vw, 58px); line-height: 1.12; letter-spacing: -0.035em; font-weight: var(--font-weight-regular); color: var(--color-bone-white); }
[data-theme="noir"] .name { order: 1; margin: 0 0 var(--spacing-12); font-size: var(--text-heading-2xs); line-height: var(--leading-heading-2xs); letter-spacing: .08em; text-transform: uppercase; font-weight: var(--font-weight-semibold); color: var(--color-bone-white); }
[data-theme="noir"] .eyebrow { order: 2; margin: 0 0 var(--spacing-18); font-size: var(--text-nav-label); line-height: var(--leading-nav-label); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-nav-label); color: var(--color-saffron-spark); }
[data-theme="noir"] .eyebrow .pt { display: none; }
[data-theme="noir"] .lead { max-width: 480px; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-extralight); color: var(--color-bone-white); }
[data-theme="noir"] .lead b { font-weight: var(--font-weight-regular); }
[data-theme="noir"] .cta { order: 4; margin: var(--spacing-30) 0 var(--spacing-24); gap: var(--spacing-24); align-items: center; }
[data-theme="noir"] .where { order: 5; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash-gray); gap: var(--spacing-12) var(--spacing-24); text-transform: uppercase; letter-spacing: var(--tracking-nav-label); }
[data-theme="noir"] .where svg { color: var(--color-ash-gray); width: 14px; height: 14px; }
[data-theme="noir"] .hero-photo { width: min(100%, 520px); justify-self: end; }
[data-theme="noir"] .hero-photo .ripple, [data-theme="noir"] .hero-photo .photo-note { display: none; }
[data-theme="noir"] .arch { border-radius: var(--radius-cards); aspect-ratio: 4 / 5; box-shadow: none; background: var(--color-void); }
[data-theme="noir"] .arch img { object-position: 50% 25%; }

[data-theme="noir"] main, [data-theme="noir"] .foot, [data-theme="noir"] .top { position: relative; z-index: 1; }

/* ---------- Section Headline Block: великий заголовок ліворуч, підпис + текст праворуч ---------- */
[data-theme="noir"] .sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-36); max-width: none; align-items: end; margin-bottom: var(--spacing-96); }
[data-theme="noir"] .sec-head .eyebrow { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
[data-theme="noir"] .sec-head h2 { grid-column: 1; grid-row: 1 / span 2; font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
[data-theme="noir"] .sec-head p:not(.eyebrow) { grid-column: 2; grid-row: 2; margin: 0; max-width: 520px; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-silver-mist); font-weight: var(--font-weight-extralight); }

/* ---------- цитата: великий текстовий блок ---------- */
/* ---------- під першим екраном: про що практика (текст, що раніше стояв на першому екрані) ---------- */
[data-theme="noir"] .intro { padding: var(--spacing-96) 0; }
[data-theme="noir"] .intro-text { max-width: 900px; margin: 0 auto; text-align: center; font-size: clamp(22px, 2.6vw, var(--text-subheading)); line-height: 1.35; letter-spacing: -0.02em; font-weight: var(--font-weight-regular); color: var(--color-bone-white); }
[data-theme="noir"] .intro-text::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto var(--spacing-36); background: var(--color-saffron-spark); }

/* ---------- Про мене: Team Member Card ліворуч, текст праворуч ---------- */
[data-theme="noir"] .about { grid-template-columns: 1fr 1fr; gap: var(--spacing-96); }
[data-theme="noir"] .about-photo { top: var(--spacing-36); }
[data-theme="noir"] .about-photo img { border-radius: var(--radius-cards); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
[data-theme="noir"] .about-photo .role { display: block; margin: var(--spacing-24) 0 var(--spacing-6); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--font-weight-regular); text-transform: uppercase; letter-spacing: var(--tracking-nav-label); color: var(--color-role); }
[data-theme="noir"] .about-photo .who { display: block; font-size: var(--text-heading-xs); line-height: var(--leading-heading-xs); font-weight: var(--font-weight-regular); color: var(--color-bone-white); }
[data-theme="noir"] .about-text .eyebrow { margin-bottom: var(--spacing-24); }
[data-theme="noir"] .about-text .big { font-family: var(--font-ppneuemontreal); font-size: var(--text-subheading); line-height: var(--leading-subheading); font-weight: var(--font-weight-regular); letter-spacing: 0; margin-bottom: var(--spacing-36); }
[data-theme="noir"] .about-text p { color: var(--color-silver-mist); max-width: 520px; }
[data-theme="noir"] .edu { border: 0; margin-top: var(--spacing-60); padding-top: 0; }
[data-theme="noir"] .edu h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); margin-bottom: var(--spacing-30); }
[data-theme="noir"] .edu ul { gap: var(--spacing-18); }
[data-theme="noir"] .edu li { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-bone-white); grid-template-columns: 6px 1fr; gap: var(--spacing-18); }
[data-theme="noir"] .edu li .pt { width: 6px; height: 6px; background: var(--color-saffron-spark); }
[data-theme="noir"] .edu li small { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash-gray); letter-spacing: var(--tracking-nav-label); text-transform: uppercase; }

/* ---------- Душа / Тіло: заголовок групи над рядом карток, обидва ліворуч (Alex, 29.09) ---------- */
[data-theme="noir"] .group { display: block; margin-top: var(--spacing-120); }
[data-theme="noir"] .group-head { display: block; border: 0; margin: 0 0 var(--spacing-36); padding: 0; }
[data-theme="noir"] .group-head h3 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); margin-bottom: var(--spacing-18); }
[data-theme="noir"] .group-head h3 em { font-style: normal; }
[data-theme="noir"] .tag { background: none; padding: 0; border-radius: var(--radius-tags); font-size: var(--text-nav-label); line-height: var(--leading-nav-label); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-nav-label); text-transform: uppercase; color: var(--color-saffron-spark); }
[data-theme="noir"] .group.body .tag { background: none; color: var(--color-saffron-spark); }
[data-theme="noir"] .note { background: none; border: 0; padding: 0; margin-top: var(--spacing-36); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-nav-label); text-transform: uppercase; color: var(--color-ash-gray); max-width: 720px; }

/* ---------- Картки практик — «фліпери» за мотивами Feature Flipper (Framer) ----------
   Ряд карток-фото. Натиснута розкривається (утричі ширша), сусідні стискаються; повторне натискання згортає.
   Розкрита показує три пункти користі й кнопку на сторінку практики, звідки фото «перелітає» у фото сторінки.
   Уся картка натискається через псевдоелемент кнопки-заголовка (доступно з клавіатури, aria-expanded). */
[data-theme="noir"] .flip { display: flex; gap: var(--spacing-12); height: clamp(440px, 40vw, 540px); }
[data-theme="noir"] .flip .svc { position: relative; flex: 1 1 0; min-width: 0; display: block; margin: 0; border: 0; border-radius: var(--radius-cards); overflow: hidden; background: #111; color: #fff; isolation: isolate;
  transition: flex-grow .8s cubic-bezier(.44,0,.56,1), height .7s cubic-bezier(.44,0,.56,1), clip-path 1.1s cubic-bezier(.2,.75,.15,1) calc(var(--i, 0) * 90ms); }
[data-theme="noir"] .flip .svc.is-open { flex-grow: 3; }
[data-theme="noir"] .flip .svc figure { position: absolute; inset: 0; z-index: -1; width: auto; min-height: 0; margin: 0; border-radius: 0; aspect-ratio: auto; background: none; }
[data-theme="noir"] .flip .svc figure img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-cards); transition: transform 1.2s cubic-bezier(.2,.75,.15,1); }
[data-theme="noir"] .flip .svc:hover figure img { transform: scale(1.05); }
[data-theme="noir"] .flip .svc::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.88) 100%); }
[data-theme="noir"] .flip .svc .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--spacing-30); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-12); }
[data-theme="noir"] .flip .svc h4 { margin: 0; font-size: var(--text-heading-2xs); line-height: var(--leading-heading-2xs); letter-spacing: var(--tracking-heading-2xs); font-weight: var(--font-weight-regular); color: #fff; overflow-wrap: anywhere; transition: font-size .6s cubic-bezier(.44,0,.56,1); }
[data-theme="noir"] .flip .svc.is-open h4 { font-size: var(--text-subheading); line-height: var(--leading-subheading); }
[data-theme="noir"] .flip.has-open .svc:not(.is-open) h4 { font-size: var(--text-body); line-height: 1.3; }
[data-theme="noir"] .svc-toggle { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
[data-theme="noir"] .svc-toggle::before { content: ""; position: absolute; inset: 0; }
[data-theme="noir"] .flip .svc p { margin: 0; max-width: 460px; max-height: 9em; overflow: hidden; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-extralight); color: rgba(255,255,255,.86); transition: opacity .35s, max-height .6s cubic-bezier(.44,0,.56,1); }
[data-theme="noir"] .flip.has-open .svc:not(.is-open) p { opacity: 0; max-height: 0; }
[data-theme="noir"] .flip.has-open .svc:not(.is-open) .txt { padding: var(--spacing-18); }
[data-theme="noir"] .svc-more { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .5s cubic-bezier(.44,0,.56,1), opacity .25s, visibility 0s .5s; }
[data-theme="noir"] .svc-more > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-18); padding: 0 4px 4px; margin: 0 -4px -4px; }
[data-theme="noir"] .svc.is-open .svc-more { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .7s cubic-bezier(.44,0,.56,1) .2s, opacity .5s .4s, visibility 0s; }
[data-theme="noir"] .svc-points { list-style: none; margin: var(--spacing-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
[data-theme="noir"] .svc-points li { padding: 7px 14px; border-radius: var(--radius-tags); border: 1px solid rgba(255,255,255,.4); font-size: var(--text-nav-label); line-height: 1.2; color: #fff; }
[data-theme="noir"] .svc-more .btn-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
[data-theme="noir"] .svc-more .btn-dot svg { display: block; width: 16px; height: 16px; }
/* «+» у куті: підказка «натисни»; у розкритої картки повертається на «×» */
[data-theme="noir"] .svc-plus { position: absolute; top: var(--spacing-24); right: var(--spacing-24); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.25); pointer-events: none; transition: transform .6s cubic-bezier(.44,0,.56,1), background-color .3s, border-color .3s; }
[data-theme="noir"] .svc-plus::before, [data-theme="noir"] .svc-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
[data-theme="noir"] .svc-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
[data-theme="noir"] .flip .svc:hover .svc-plus { background: var(--color-electric-iris); border-color: var(--color-electric-iris); }
[data-theme="noir"] .svc.is-open .svc-plus { transform: rotate(45deg); }
/* поява ряду при прокрутці: картки виїжджають «шторкою» одна за одною */
[data-theme="noir"] .flip .svc.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--radius-cards)); }
[data-theme="noir"] .flip .svc.reveal.in { clip-path: inset(0 0 0 0 round var(--radius-cards)); }

/* ---------- Програма: текст ліворуч, частинки-фігура праворуч ---------- */
[data-theme="noir"] .program { background: none; border: 0; border-radius: 0; margin: 0; color: var(--color-bone-white); }
[data-theme="noir"] .program .big-dot { display: none; }
[data-theme="noir"] .program .wrap { grid-template-columns: 1fr 1fr; gap: var(--spacing-96); }
[data-theme="noir"] .program h2 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
[data-theme="noir"] .program h2 em { font-style: normal; color: var(--color-bone-white); }
[data-theme="noir"] .program .eyebrow { color: var(--color-saffron-spark); }
[data-theme="noir"] .program .for { font-family: var(--font-ppneuemontreal); font-size: var(--text-heading-2xs); line-height: var(--leading-heading-2xs); letter-spacing: var(--tracking-heading-2xs); font-weight: var(--font-weight-regular); margin: var(--spacing-30) 0 var(--spacing-18); }
[data-theme="noir"] .program p { color: var(--color-silver-mist); max-width: 520px; }
[data-theme="noir"] .incl { gap: var(--spacing-12); margin-bottom: var(--spacing-36); }
[data-theme="noir"] .incl li { grid-template-columns: 6px 1fr; gap: var(--spacing-18); }
[data-theme="noir"] .incl .pt { width: 6px; height: 6px; background: var(--color-saffron-spark); }
[data-theme="noir"] .incl b { color: var(--color-bone-white); font-weight: var(--font-weight-regular); }
[data-theme="noir"] .gives { background: none; border: 0; padding: 0; margin-bottom: var(--spacing-36); }
[data-theme="noir"] .gives h3 { font-size: var(--text-nav-label); line-height: var(--leading-nav-label); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-nav-label); color: var(--color-saffron-spark); margin-bottom: var(--spacing-12); }
[data-theme="noir"] .gives ul { color: var(--color-silver-mist); gap: var(--spacing-6); }
[data-theme="noir"] .time { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-weight: var(--font-weight-regular); }
[data-theme="noir"] .time small { font-size: var(--text-caption); letter-spacing: var(--tracking-nav-label); color: var(--color-saffron-spark); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-6); }

/* ---------- Три кроки: заголовок ліворуч, кроки праворуч ---------- */
[data-theme="noir"] #yak .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-96); align-items: start; }
[data-theme="noir"] #yak .sec-head { display: block; margin: 0; }
[data-theme="noir"] #yak .sec-head .eyebrow { margin-bottom: var(--spacing-18); }
[data-theme="noir"] .steps { display: flex; flex-direction: column; gap: var(--spacing-60); }
[data-theme="noir"] .steps li { border: 0; padding: 0; display: grid; grid-template-columns: 60px 1fr; column-gap: var(--spacing-18); }
[data-theme="noir"] .steps li::before { grid-row: 1 / span 2; font-family: var(--font-ppneuemontreal); font-style: normal; font-weight: var(--font-weight-regular); font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--color-saffron-spark); margin: 0; }
[data-theme="noir"] .steps h3 { font-size: var(--text-heading-2xs); line-height: var(--leading-heading-2xs); letter-spacing: var(--tracking-heading-2xs); font-weight: var(--font-weight-regular); margin-bottom: var(--spacing-6); }
[data-theme="noir"] .steps p { color: var(--color-silver-mist); }

/* ---------- Запис ---------- */
[data-theme="noir"] .book { grid-template-columns: 1fr 1fr; gap: var(--spacing-96); align-items: start; }
[data-theme="noir"] .book-text h2 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); margin: var(--spacing-18) 0 var(--spacing-24); }
[data-theme="noir"] .book-text .eyebrow { margin-bottom: 0; }
[data-theme="noir"] .book-text p { color: var(--color-silver-mist); max-width: 480px; font-size: var(--text-body); }
[data-theme="noir"] .book-card { background: none; border: 0; padding: 0; }
[data-theme="noir"] .me { gap: var(--spacing-18); margin-bottom: var(--spacing-36); }
[data-theme="noir"] .me img { width: 72px; height: 72px; border-radius: var(--radius-cards); }
[data-theme="noir"] .me b { font-size: var(--text-heading-xs); line-height: var(--leading-heading-xs); font-weight: var(--font-weight-regular); }
[data-theme="noir"] .me span { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-nav-label); color: var(--color-role); display: block; margin-top: var(--spacing-6); }
[data-theme="noir"] .contacts { gap: 0; justify-items: start; }
[data-theme="noir"] .contacts .btn { width: auto; justify-content: flex-start; }
[data-theme="noir"] .contacts .btn-line svg { width: 16px; height: 16px; }
[data-theme="noir"] .contacts .tel { white-space: nowrap; }

/* ---------- підвал ---------- */
[data-theme="noir"] .foot { border: 0; padding: var(--spacing-60) 0 var(--spacing-96); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash-gray); letter-spacing: var(--tracking-nav-label); }
[data-theme="noir"] .foot b { color: var(--color-bone-white) !important; font-weight: var(--font-weight-regular); }
[data-theme="noir"] .foot a { color: var(--color-bone-white); }
[data-theme="noir"] .fab { box-shadow: none; }
[data-theme="noir"] .themes { background: #111; color: #fff; }
[data-theme="noir"] .themes button { color: #fff; }

/* ---------- поява (текст — motion.js, фото — шторкою) ---------- */
[data-theme="noir"] .hero .eyebrow, [data-theme="noir"] .hero .cta, [data-theme="noir"] .hero .where { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.75,.15,1); }
[data-theme="noir"] .hero.in .eyebrow { opacity: 1; transform: none; transition-delay: 1.1s; }
[data-theme="noir"] .hero.in .cta { opacity: 1; transform: none; transition-delay: 1.25s; }
[data-theme="noir"] .hero.in .where { opacity: 1; transform: none; transition-delay: 1.4s; }
[data-theme="noir"] .hero .arch img { transform: scale(1.12); clip-path: inset(100% 0 0 0 round 24px); transition: transform 1.6s cubic-bezier(.2,.75,.15,1) .25s, clip-path 1.2s cubic-bezier(.2,.75,.15,1) .25s; }
[data-theme="noir"] .hero.in .arch img { transform: scale(1); clip-path: inset(0 0 0 0 round 24px); }
[data-theme="noir"] .about-photo img { transform: scale(1.14); clip-path: inset(100% 0 0 0 round 24px); transition: transform 1.5s cubic-bezier(.2,.75,.15,1), clip-path 1.15s cubic-bezier(.2,.75,.15,1); }
[data-theme="noir"] .about-photo.in img { transform: scale(1); clip-path: inset(0 0 0 0 round 24px); }


/* ---------- узгодженість (дизайн-перевірка 29.09): підписи, заголовки, контакти ---------- */
/* підпис над заголовком — однаковий у всіх розділах (правила для абзаців його не перебивають) */
[data-theme="noir"] main p.eyebrow { font-size: var(--text-nav-label); line-height: var(--leading-nav-label); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-nav-label); text-transform: uppercase; color: var(--color-saffron-spark); max-width: none; }
/* заголовки розділів — одна шкала, плавно від 48 до 78px */
[data-theme="noir"] .sec-head h2, [data-theme="noir"] .group-head h3, [data-theme="noir"] .program h2, [data-theme="noir"] .book-text h2 {
  font-size: clamp(var(--text-heading), 5.6vw, var(--text-heading-lg)); line-height: var(--leading-heading-lg); letter-spacing: -0.04em; }
/* контакти: один ритм 18px, посилання розміром основного тексту, іконки по центру рядка */
[data-theme="noir"] .book-card { padding-top: calc(var(--text-nav-label) * var(--leading-nav-label) + var(--spacing-18)); }
[data-theme="noir"] .me { margin-bottom: var(--spacing-36); gap: var(--spacing-18); align-items: center; }
[data-theme="noir"] .contacts { display: grid; gap: var(--spacing-18); justify-items: start; }
[data-theme="noir"] .contacts .btn-line { padding: 0; min-height: 0; gap: var(--spacing-12); align-items: center; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-regular); text-underline-offset: 6px; }
[data-theme="noir"] .contacts .btn-line svg { width: 18px; height: 18px; flex: none; }

/* ---------- блакить і скло — обидві теми (за референсом OneLine Health; кольори — з токенів теми) ---------- */
/* перший екран: легка блакить угорі й м'який відсвіт за портретом */
[data-theme="noir"] body {
  background:
    radial-gradient(34% 48% at 80% 42%, var(--glow) 0%, transparent 72%),
    linear-gradient(180deg, var(--color-wash-soft) 0%, var(--surface-void-canvas) 100%),
    var(--surface-void-canvas);
  background-repeat: no-repeat; background-size: 100% 1000px, 100% 520px, auto; }
[data-theme="noir"] ::selection { background: var(--color-wash-strong); color: var(--color-bone-white); }
/* програма — блакитна панель; фіолетові акценти всередині — іншого тону, щоб читались на блакиті */
[data-theme="noir"] .program { --color-saffron-spark: var(--color-violet-deep); margin: 0 clamp(12px, 2.4vw, 32px); border-radius: 40px;
  background: linear-gradient(135deg, var(--color-wash-soft) 0%, var(--color-wash) 50%, var(--color-wash-strong) 100%); }
[data-theme="noir"] .gives { padding: var(--spacing-24); border-radius: var(--radius-cards); background: var(--glass-soft); border: 1px solid var(--glass-border); }
/* запис — м'яка блакить, контакти на «скляній» картці */
[data-theme="noir"] #zapys { background: linear-gradient(180deg, var(--color-void) 0%, var(--color-wash-soft) 100%); }
[data-theme="noir"] .book-card { padding: var(--spacing-36); border-radius: var(--radius-cards); border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-from) 0%, var(--glass-to) 100%); box-shadow: 0 28px 70px -36px var(--glass-shadow); }
[data-theme="noir"] .foot { background: var(--color-wash-soft); }
/* картки практик: затемнення фото — глибоким синім; поки фото вантажиться — блакить */
[data-theme="noir"] .flip .svc { background: var(--color-wash); }
[data-theme="noir"] .flip .svc::after { background: linear-gradient(180deg, rgba(var(--photo-shade), 0) 25%, rgba(var(--photo-shade), .45) 55%, rgba(var(--photo-shade), .9) 100%); }
/* сторінки практик: користь — «скляні» картки; дослідження — на блакиті; іконки — фіолетові на блакитному */
[data-theme="noir"] .d-benefits { gap: var(--spacing-24); }
[data-theme="noir"] .d-benefits li { padding: var(--spacing-30); border-radius: var(--radius-cards); border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-from) 0%, var(--glass-to) 100%); box-shadow: 0 24px 60px -36px var(--glass-shadow); }
[data-theme="noir"] .d-ic { background: var(--color-wash-soft); }
[data-theme="noir"] .d-evidence { padding: var(--spacing-30); border-radius: var(--radius-cards); background: var(--color-wash-soft); }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  [data-theme="noir"] .flip .svc.is-open { flex-grow: 2.2; }
}
@media (max-width: 860px) {
  [data-theme="noir"] { --gutter: var(--spacing-18); }
  [data-theme="noir"] .wrap { padding: 0 var(--spacing-18); }
  [data-theme="noir"] .sec, [data-theme="noir"] .intro { padding: var(--spacing-60) 0; }
  [data-theme="noir"] .hero .wrap, [data-theme="noir"] .sec-head, [data-theme="noir"] .about, [data-theme="noir"] .group,
  [data-theme="noir"] .program .wrap, [data-theme="noir"] #yak .wrap, [data-theme="noir"] .book { grid-template-columns: 1fr; gap: var(--spacing-36); }
  [data-theme="noir"] .sec-head .eyebrow, [data-theme="noir"] .sec-head h2, [data-theme="noir"] .sec-head p:not(.eyebrow) { grid-column: 1; grid-row: auto; }
  [data-theme="noir"] .sec-head { margin-bottom: var(--spacing-60); }
  [data-theme="noir"] .sec-head h2, [data-theme="noir"] .group-head h3, [data-theme="noir"] .program h2, [data-theme="noir"] .book-text h2 {
    font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
  [data-theme="noir"] .name { font-size: var(--text-body); }
  [data-theme="noir"] .flip { flex-direction: column; height: auto; }
  [data-theme="noir"] .flip .svc { flex: none; height: 250px; }
  [data-theme="noir"] .flip .svc.is-open { height: 540px; }
  [data-theme="noir"] .flip.has-open .svc:not(.is-open) { height: 96px; }
  [data-theme="noir"] .flip .svc .txt { padding: var(--spacing-24); }
  [data-theme="noir"] .flip .svc.is-open h4 { font-size: var(--text-heading-xs); line-height: 1.15; }
  [data-theme="noir"] .flip.has-open .svc:not(.is-open) .txt { padding: var(--spacing-18) var(--spacing-24); }
  [data-theme="noir"] .flip.has-open .svc:not(.is-open) h4 { font-size: var(--text-heading-2xs); }
  [data-theme="noir"] .svc-plus { top: var(--spacing-18); right: var(--spacing-18); width: 36px; height: 36px; }
  [data-theme="noir"] .program { margin: 0 var(--spacing-12); border-radius: 28px; }
  [data-theme="noir"] .book-card { padding: var(--spacing-24); }
  [data-theme="noir"] .about-text .big { font-size: var(--text-heading-2xs); line-height: var(--leading-heading-2xs); }
  [data-theme="noir"] .hero-photo { width: 100%; justify-self: stretch; }
}
@media (max-width: 520px) {
  [data-theme="noir"] .top .wrap { gap: var(--spacing-18); }
  [data-theme="noir"] .logo { font-size: 12px; letter-spacing: .12em; gap: var(--spacing-6); }
  [data-theme="noir"] .logo .pt { width: 36px; height: 36px; }
  [data-theme="noir"] .top .btn { display: none; }
}
@media (max-width: 400px) {
  [data-theme="noir"] .sec-head h2, [data-theme="noir"] .group-head h3, [data-theme="noir"] .program h2, [data-theme="noir"] .book-text h2 {
    font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: -1.2px; }
}
@media (max-width: 340px) {
  [data-theme="noir"] .logo { font-size: 0; gap: 0; }   /* на найвужчих екранах — лише знак (назва — в aria-label) */
}
@media (max-width: 360px) {
  [data-theme="noir"] .program h2 { font-size: 30px; letter-spacing: -1px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="noir"] .hero .eyebrow, [data-theme="noir"] .hero .cta, [data-theme="noir"] .hero .where { transform: none !important; opacity: 1 !important; }
  [data-theme="noir"] .about-photo img, [data-theme="noir"] .hero .arch img, [data-theme="noir"] .flip .svc { transform: none !important; clip-path: none !important; }
  [data-theme="noir"] .flip .svc, [data-theme="noir"] .flip .svc * { transition: none !important; }
}