/* ============================================================
   БОТ БАЮН — образец сайта по референсу (Obsidian × ironhill)
   Дизайн-система. Всё на CSS-переменных — легко перекрашивать.
   Два «мира»: .world-night (ночной лес)  →  .world-dawn (рассвет/пергамент).
   Автор эффектов: код-каркас (Клод). Финальная полировка — дизайнер.
   ============================================================ */

/* ---------- 0. Переменные (единая точка правки цвета/типа) ---------- */
:root{
  /* Ночной мир — глубокий сине-чёрный лес (из картины кота-Баюна) */
  --night-0:#080b16;
  --night-1:#11182b; /* окно 11 (07.10): тёмный фон как на Тильде #11182B — было #0d1324 */
  --night-2:#151d38;
  --night-3:#1e2949;

  /* Тёплое дерево / кора — арка деревьев */
  --bark:#3a2a1c;
  --bark-glow:#7a5230;

  /* Огоньки-акценты: золото (тепло) + прохладная синь */
  --gold:#f4c96b;
  --gold-deep:#cf9a41;
  --ember:#e8a94b;
  --firefly-blue:#a6cdec;

  /* Рассветный / светлый мир — пергамент в духе Obsidian */
  --cream-0:#f5efe3;
  --cream-1:#efe7d6;
  --cream-2:#e7dbc5;
  --cream-line:#ddceb2;

  /* Чернила текста на светлом */
  --ink:#241f17;
  --ink-soft:#5c5344;
  --ink-faint:#8b8272;

  /* Тропинка (единая линия через секции) */
  --path:#d9a44b;
  --path-glow:rgba(244,201,107,.55);

  /* Типографика */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Ритм */
  --wrap:1200px;
  --gutter:clamp(20px, 5vw, 80px);
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. База ---------- */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased}
body{
  font-family:var(--sans);
  background:var(--night-0);
  color:#eef1f8;
  line-height:1.6;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}

/* Убрать эффекты для тех, кто просил меньше движения */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- 2. Слои эффектов (фиксированные canvas) ---------- */
/* Огоньки — за контентом; курсорная линия — поверх всего, но «сквозная» */
#fx-fireflies{position:fixed; inset:0; z-index:1; pointer-events:none}
#fx-trail{position:fixed; inset:0; z-index:60; pointer-events:none}

/* Тропинка-SVG через все секции */
#path-wrap{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible}
#path-wrap svg{width:100%; height:100%}
#the-path{
  fill:none;
  stroke:var(--path);
  stroke-width:2.4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--path-glow));
}
#the-path-bed{ /* бледное «ложе» тропинки — куда линия ещё не дошла */
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round;
  opacity:.10;
}

/* контент всегда над фоновыми слоями */
.page{position:relative; z-index:3}

/* ---------- 3. Прелоадер (счётчик + прорисовка, в духе ironhill) ---------- */
#preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--night-0);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:26px;
  transition:opacity .8s var(--ease), visibility .8s;
}
#preloader.done{opacity:0; visibility:hidden}
/* Счётчик в кольце: две точки медленно ходят по орбите вокруг цифр (решение 25.09.2026) */
.pl-core{position:relative; display:grid; place-items:center; margin:.4em 0;
  font-size:clamp(64px,14vw,150px)}
.pl-count{
  font-family:var(--serif); font-size:1em;
  font-weight:500; color:var(--gold); letter-spacing:.02em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.pl-orbit{position:absolute; left:50%; top:50%; width:2.3em; height:2.3em; margin:-1.15em 0 0 -1.15em;
  border-radius:50%; pointer-events:none; animation:pl-spin 6s linear infinite}
.pl-orbit i{position:absolute; left:calc(50% - 3px); width:6px; height:6px; border-radius:50%;
  background:#fbf2dc; box-shadow:0 0 10px 3px rgba(242,203,109,.42);
  animation:pl-glow 2.8s ease-in-out infinite alternate}
.pl-orbit i:nth-child(1){top:-3px}
.pl-orbit i:nth-child(2){bottom:-3px; animation-delay:-1.4s}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-glow{from{opacity:.35; transform:scale(.75)} to{opacity:.9; transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.pl-orbit, .pl-orbit i{animation:none}}
.pl-word{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.42em;
  font-size:12px; color:var(--ink-faint); padding-left:.42em;
}

/* ---------- 4. Шапка ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s, backdrop-filter .4s;
}
.site-header.scrolled{
  background:rgba(8,11,22,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(244,201,107,.10);
}
.brand{font-family:var(--serif); font-size:20px; letter-spacing:.02em}
.brand b{font-weight:600}
.brand .spa{color:var(--gold)}
.nav{display:flex; gap:30px; font-size:14px; letter-spacing:.02em; color:#d8dcea}
.nav a{opacity:.82; transition:opacity .25s}
.nav a:hover{opacity:1}
.nav-toggle{display:none; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25); padding:9px 16px; border-radius:40px}
@media (max-width:760px){ .nav{display:none} .nav-toggle{display:block} }

/* Кнопка меню — три полоски РАЗНОЙ длины в мягкой скруглённой плашке (референс 14) */
.burger{display:flex; flex-direction:column; gap:5px; align-items:flex-end;
  padding:13px 16px; border-radius:16px; cursor:pointer;
  background:rgba(16,12,6,.30); border:1px solid rgba(245,239,227,.30);
  backdrop-filter:blur(6px); transition:background .3s, border-color .3s, transform .3s}
.burger:hover{background:rgba(16,12,6,.42); transform:translateY(-1px)}
.burger span{height:2px; background:#f6efe1; border-radius:2px; display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.35); transition:width .3s var(--ease)}
.burger span:nth-child(1){width:24px}
.burger span:nth-child(2){width:14px}
.burger span:nth-child(3){width:19px}
.burger:hover span:nth-child(2){width:24px}
.burger:hover span:nth-child(3){width:14px}

/* пока меню открыто, страница под ним не прокручивается (25.09.2026) */
body.menu-open{overflow:hidden}

/* ---------- 5. Общие блоки/типографика ---------- */
section{position:relative; padding:clamp(80px,12vh,150px) var(--gutter)}
.wrap{max-width:var(--wrap); margin:0 auto}
.eyebrow{
  text-transform:uppercase; letter-spacing:.34em; font-size:12px;
  color:var(--gold-deep); margin-bottom:22px; font-weight:600;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.06; letter-spacing:-.01em}
h1{font-size:clamp(38px,6.4vw,78px)}
h2{font-size:clamp(30px,4.6vw,56px)}
h3{font-size:clamp(22px,2.6vw,32px)}
.lead{font-size:clamp(17px,1.5vw,21px); max-width:60ch}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.mx-auto{margin-left:auto; margin-right:auto}

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:15px; letter-spacing:.02em; font-weight:600;
  padding:16px 30px; border-radius:44px;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s;
}
.btn-gold{
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:#231a08; box-shadow:0 10px 30px -8px var(--path-glow);
}
.btn-gold:hover{transform:translateY(-3px); box-shadow:0 16px 40px -8px var(--path-glow)}
.btn-ghost{border:1px solid rgba(255,255,255,.28); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.06); transform:translateY(-3px)}
.btn-ghost.on-light{border-color:var(--cream-line); color:var(--ink)}
.btn-ghost.on-light:hover{background:rgba(0,0,0,.04)}
.btn .sub{font-weight:400; opacity:.7; font-size:13px}

/* ---------- 6. Миры (тёмный / светлый) + мягкие швы ---------- */
.world-night{background:var(--night-1); color:#eef1f8}
.world-dawn{background:var(--cream-1); color:var(--ink)}
.world-dawn .eyebrow{color:var(--gold-deep)}
.world-dawn .muted{color:var(--ink-soft)}
/* Мягкий переход между мирами: тонкий градиентный шов */
.seam{height:180px; margin:0; padding:0; border:0; position:relative; z-index:3}
.seam-to-dawn{background:linear-gradient(180deg,var(--night-1),var(--cream-1))}
.seam-to-night{background:linear-gradient(180deg,var(--cream-1),var(--night-1))}

/* ---------- 7. Герой (ночной лес + кот + дымка) ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:120px; overflow:hidden;
}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media::after{ /* виньетка, чтобы текст читался */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 50% 24%, transparent 34%, rgba(8,11,22,.4) 70%, var(--night-0) 100%),
    linear-gradient(180deg, rgba(8,11,22,.72) 0%, rgba(8,11,22,.28) 24%, rgba(8,11,22,.42) 58%, var(--night-0) 100%);
}
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:.8;
}
/* Дымка/туман — два медленно плывущих слоя (эффект ironhill, чистый код) */
.fog{position:absolute; inset:-10% -20%; z-index:1; pointer-events:none; opacity:.5}
.fog::before,.fog::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(210,225,245,.16), transparent 60%),
    radial-gradient(50% 35% at 70% 55%, rgba(180,205,235,.13), transparent 60%),
    radial-gradient(45% 30% at 45% 80%, rgba(230,215,190,.10), transparent 60%);
  animation:fogDrift 46s linear infinite;
}
.fog::after{animation-duration:72s; animation-direction:reverse; opacity:.7}
@keyframes fogDrift{
  0%{transform:translate3d(-4%,0,0) scale(1.05)}
  50%{transform:translate3d(4%,-2%,0) scale(1.12)}
  100%{transform:translate3d(-4%,0,0) scale(1.05)}
}
.hero-inner{position:relative; z-index:3; max-width:920px; margin:0 auto; text-align:center}
.hero-inner::before{ /* мягкий тёмный ореол только под текстом — кот вокруг остаётся виден */
  content:''; position:absolute; inset:-14% -16%; z-index:-1;
  background:radial-gradient(58% 54% at 50% 46%, rgba(6,9,18,.82), rgba(6,9,18,.42) 52%, transparent 76%);
  filter:blur(14px);
}
.hero h1{margin:14px 0 22px; text-shadow:0 4px 46px rgba(0,0,0,.7); color:#fff}
.hero h1 .reveal-letters:last-child{color:var(--gold)}
.hero .lead{margin:0 auto 34px; color:#e4e8f4; text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero .eyebrow{color:var(--gold); text-shadow:0 2px 16px rgba(0,0,0,.7)}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.scroll-hint{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:3; text-transform:uppercase; letter-spacing:.3em; font-size:11px;
  color:var(--gold); display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-hint .stem{width:1px; height:44px; background:linear-gradient(var(--gold),transparent);
  animation:stemPulse 2.4s var(--ease) infinite}
@keyframes stemPulse{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}
/* на невысоких экранах подсказка убирается, чтобы не наезжать на кнопку */
@media (max-height:820px){ .scroll-hint{display:none} }

/* ---------- 8. Побуквенное появление текста ---------- */
.reveal-letters{display:inline}
.reveal-letters .word{display:inline-block; white-space:nowrap}
.reveal-letters .ch{
  display:inline-block; opacity:0; transform:translateY(.5em) rotateZ(4deg);
  transform:translateY(.55em);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.reveal-letters.in .ch{opacity:1; transform:translateY(0)}
/* пробелы */
.reveal-letters .sp{display:inline-block; width:.28em}

/* Плавное «всплывание» блоков */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- 9. Пузырьки (медленно вверх, в тон фона) ---------- */
.bubbles{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.bubble{
  position:absolute; bottom:-60px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,255,255,.05) 60%, transparent 70%);
  opacity:0; animation:rise linear infinite;
}
.world-dawn .bubble{background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(214,168,90,.10) 55%, transparent 70%)}
@keyframes rise{
  0%{transform:translateY(0) scale(.8); opacity:0}
  12%{opacity:.6}
  88%{opacity:.5}
  100%{transform:translateY(-108vh) scale(1.15); opacity:0}
}

/* ---------- 10. Экран 2 — вопрос-зачин ---------- */
.ask{background:var(--cream-1); color:var(--ink); text-align:center}
.ask .wrap{max-width:900px}
.ask h2{margin-bottom:26px}
.ask .lead{margin:0 auto 34px; color:var(--ink-soft)}

/* ---------- 11. Нейропрофили — карточки ---------- */
.profiles{background:var(--cream-0); color:var(--ink)}
.profiles .head{max-width:760px; margin-bottom:56px}
.profiles-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;
}
.pcard{
  background:linear-gradient(180deg,#fffaf0,#f3ead9);
  border:1px solid var(--cream-line); border-radius:var(--radius);
  padding:30px 28px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.pcard:hover{transform:translateY(-6px); box-shadow:0 24px 50px -22px rgba(90,60,20,.4); border-color:var(--gold-deep)}
.pcard .emoji{font-size:30px; line-height:1}
.pcard h3{margin:14px 0 4px; font-size:24px}
.pcard .role{font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:17px; margin-bottom:14px}
.pcard p{font-size:15px; color:var(--ink-soft); margin-bottom:18px}
.pcard .more{font-size:13px; letter-spacing:.06em; color:var(--ink); font-weight:600; opacity:.8}
.pcard .more:hover{opacity:1; color:var(--gold-deep)}
.pcard::after{ /* лёгкое свечение сверху под цвет профиля */
  content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%;
  background:var(--gcolor,rgba(244,201,107,.35)); filter:blur(30px); opacity:.5;
}
.profiles .closing{margin-top:48px; text-align:center; max-width:720px; margin-inline:auto}
.profiles .closing p{font-size:19px}

/* ---------- 12. Уникальность (тёмная полоса) ---------- */
.unique{background:var(--night-2); text-align:center}
.unique .wrap{max-width:820px}
.unique p{font-size:clamp(18px,2vw,23px); color:#e7ebf6}
.unique .link{color:var(--gold); border-bottom:1px solid var(--path-glow); padding-bottom:2px}

/* ---------- 13. Как это работает — карусель 3 окон ---------- */
.how{background:var(--night-1)}
.how .head{max-width:720px; margin-bottom:44px}
.carousel{
  display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:20px; scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent;
}
.carousel::-webkit-scrollbar{height:6px}
.carousel::-webkit-scrollbar-thumb{background:var(--gold-deep); border-radius:10px}
.slide{
  scroll-snap-align:center; flex:0 0 min(86vw,560px);
  background:linear-gradient(180deg,var(--night-3),var(--night-2));
  border:1px solid rgba(244,201,107,.16); border-radius:var(--radius);
  padding:38px 34px;
}
.slide .tag{display:inline-flex; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px}
.slide h3{margin-bottom:16px}
.slide p{color:#cfd5e6; margin-bottom:14px; font-size:15.5px}
.slide .row{padding:12px 0; border-top:1px solid rgba(255,255,255,.08)}
.slide .row b{color:#fff}
.carousel-hint{margin-top:14px; font-size:13px; color:var(--ink-faint); text-align:center}
.how .after{max-width:760px; margin:40px auto 0; text-align:center; color:#c3cadd; font-size:15px}
.slide .fmt{display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(244,201,107,.3); border-radius:20px; padding:2px 9px; margin-left:4px}

/* «Узнаёшь себя?» — карточки нейропрофилей как ГОРИЗОНТАЛЬНАЯ карусель */
.pcarousel{padding-top:6px}
.pcarousel .pcard{flex:0 0 min(84vw,340px); scroll-snap-align:center; margin-bottom:6px}

/* ---------- 14. Внутрянка — мокапы телефона (НейроМеню, Магия дня, ...) ---------- */
.inside{background:var(--cream-1); color:var(--ink)}
.mockcar{padding-top:12px}
.phone{flex:0 0 min(76vw,290px); scroll-snap-align:center; margin:0}
.phone .pscreen{
  border-radius:34px; padding:12px; background:linear-gradient(180deg,#12172a,#0b0f1e);
  border:1px solid rgba(244,201,107,.22); box-shadow:0 30px 60px -30px rgba(60,40,15,.55);
  position:relative; overflow:hidden; aspect-ratio:9/19;
}
.phone .pscreen::before{ /* «чёлка» телефона */
  content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:74px; height:5px; border-radius:5px; background:rgba(255,255,255,.16); z-index:2;
}
.phone .pbar{display:flex; align-items:center; gap:8px; padding:20px 8px 12px;
  font-size:12.5px; color:#cfd5e6; border-bottom:1px solid rgba(255,255,255,.08); font-weight:600}
.phone .pdot{width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 40% 35%, #2a3552, #11182b)}
.phone .pbody{padding:14px 10px; display:flex; flex-direction:column; gap:12px}
.phone .pbubble{align-self:flex-start; background:linear-gradient(180deg,#1c2647,#161f3b);
  border:1px solid rgba(244,201,107,.14); color:#e8ebf5; font-size:12.5px; line-height:1.45;
  padding:10px 13px; border-radius:14px 14px 14px 4px; max-width:92%}
.phone .pmap{display:flex; flex-wrap:wrap; gap:6px}
.phone .chip{font-size:10.5px; padding:4px 9px; border-radius:20px; color:#0e1324; font-weight:600}
.phone .chip.hi{background:linear-gradient(180deg,#e79a86,#d67a63)}       /* перегрет */
.phone .chip.ok{background:linear-gradient(180deg,#f4c96b,#cf9a41)}       /* в норме */
.phone .chip.lo{background:linear-gradient(180deg,#9cc3e6,#6f9fd0)}       /* снижен */
.phone .pkeys{display:flex; flex-wrap:wrap; gap:7px}
.phone .pkey{flex:1 1 44%; text-align:center; font-family:var(--sans); font-size:11.5px; font-weight:600;
  color:#f3ecdd; background:rgba(244,201,107,.10); border:1px solid rgba(244,201,107,.28);
  border-radius:12px; padding:10px 8px; cursor:default}
.phone .pkey.wide{flex-basis:100%}
.phone .phint{font-size:10.5px; color:#9aa2b8; text-align:center; letter-spacing:.04em}
.phone .pplayer{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05);
  border:1px solid rgba(244,201,107,.2); border-radius:30px; padding:8px 12px}
.phone .pplay{width:28px; height:28px; border-radius:50%; flex:0 0 auto; position:relative;
  background:linear-gradient(180deg,#f4c96b,#cf9a41)}
.phone .pplay::before{content:''; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%);
  border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #231a08}
.phone .pwave{flex:1; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--gold) 34%, rgba(255,255,255,.14) 34%)}
.phone .ptime{font-size:11px; color:#cfd5e6; font-variant-numeric:tabular-nums}
.phone .prows{display:flex; flex-direction:column; gap:8px}
.phone .prow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11.5px; color:#dfe4f2}
.phone .prow .lvl{width:76px; height:6px; border-radius:6px; flex:0 0 auto}
.phone .lvl.hi{background:linear-gradient(90deg,#e79a86,#d67a63)}
.phone .lvl.ok{background:linear-gradient(90deg,#f4c96b,#cf9a41)}
.phone .lvl.lo{background:linear-gradient(90deg,#9cc3e6,#6f9fd0)}
.phone figcaption{text-align:center; margin-top:16px; font-size:13.5px; color:var(--ink-soft);
  font-family:var(--serif); font-style:italic}
.inside .note{margin-top:20px; font-size:13.5px; color:var(--ink-faint); text-align:center}

/* ---------- 15. Аудио-герой «польза» ---------- */
.audio{background:var(--night-2); text-align:center}
.audio .wrap{max-width:720px}
.player{
  margin:30px auto 22px; max-width:520px;
  background:linear-gradient(180deg,var(--night-3),var(--night-1));
  border:1px solid rgba(244,201,107,.2); border-radius:60px;
  padding:16px 22px; display:flex; align-items:center; gap:18px;
}
.player .play{width:52px; height:52px; border-radius:50%; background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:#231a08; display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto}
.player .bar{flex:1; height:4px; background:rgba(255,255,255,.14); border-radius:4px; position:relative; overflow:hidden}
.player .bar i{position:absolute; left:0; top:0; bottom:0; width:22%; background:var(--gold); border-radius:4px}
.player .time{font-size:13px; color:#cfd5e6; font-variant-numeric:tabular-nums}
.audio .hint{color:#cfd5e6; margin-bottom:26px}
.audio .anti{margin-top:22px; font-size:14px; color:var(--ink-faint); font-style:italic}

/* ---------- 16. Что получу — список ---------- */
.gains{background:var(--cream-0); color:var(--ink)}
.gains ul{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:6px 40px; margin-top:36px}
.gains li{padding:18px 0 18px 34px; border-bottom:1px solid var(--cream-line); position:relative; font-size:16.5px}
.gains li::before{content:''; position:absolute; left:2px; top:27px; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); box-shadow:0 0 8px var(--path-glow)}

/* ---------- 17. Цена ---------- */
.price{background:var(--cream-1); color:var(--ink); text-align:center}
.price .card{
  max-width:560px; margin:36px auto 0; background:linear-gradient(180deg,#fffaf0,#f0e7d5);
  border:1px solid var(--cream-line); border-radius:24px; padding:44px 38px;
  box-shadow:0 30px 60px -34px rgba(90,60,20,.4);
}
.price .big{font-family:var(--serif); font-size:56px; color:var(--ink)}
.price .big small{font-size:20px; color:var(--ink-soft)}
.price .free{color:var(--gold-deep); font-weight:600; letter-spacing:.02em; margin-bottom:6px}
.price .opts{margin:22px 0 30px; color:var(--ink-soft); font-size:15px}

/* ---------- 18. Авторы (арочная рамка-портал, референс 18) ---------- */
.authors{background:var(--night-1)}
.authors .head{max-width:640px; margin-bottom:60px}
.author{display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:center; margin-bottom:72px}
.author:last-child{margin-bottom:0}
.portrait{position:relative; padding:16px 16px 0; display:flex; justify-content:center}
.portrait::before{ /* тонкая контурная арка позади фото */
  content:''; position:absolute; left:0; right:0; top:0; bottom:-22px;
  border:1px solid rgba(244,201,107,.30); border-bottom:none;
  border-radius:150px 150px 10px 10px / 190px 190px 10px 10px;
  pointer-events:none;
}
.portrait .arch{
  position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:140px 140px 8px 8px / 180px 180px 8px 8px;
  border:1px solid rgba(244,201,107,.28);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7), inset 0 0 60px rgba(8,11,22,.35);
  background:var(--night-3);
}
.portrait .arch img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.author h3{margin-bottom:6px}
.author .co{font-size:14px; color:var(--ink-faint); font-family:var(--sans); font-style:normal; font-weight:400; white-space:nowrap}
.author .role{color:var(--gold); font-size:14px; letter-spacing:.04em; margin-bottom:16px}
.author p{color:#cfd5e6; font-size:15.5px; margin-bottom:12px}
.author blockquote{font-family:var(--serif); font-style:italic; font-size:20px; color:#fff; border-left:2px solid var(--gold-deep); padding-left:20px; margin:8px 0 18px}
@media (max-width:680px){ .author{grid-template-columns:1fr; gap:30px; justify-items:center; text-align:center}
  .portrait{width:220px; max-width:75%} .author blockquote{text-align:left} }

/* ---------- 19. FAQ ---------- */
.faq{background:var(--cream-0); color:var(--ink)}
.faq .wrap{max-width:820px}
.qa{border-bottom:1px solid var(--cream-line)}
.qa button{width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:24px 0; font-size:19px; font-family:var(--serif); color:var(--ink)}
.qa .plus{flex:0 0 auto; font-size:24px; color:var(--gold-deep); transition:transform .3s}
.qa.open .plus{transform:rotate(45deg)}
.qa .ans{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.qa .ans p{padding:0 0 24px; color:var(--ink-soft); font-size:15.5px}

/* ---------- 20. Финал ---------- */
.final{background:var(--night-0); text-align:center; overflow:hidden}
.final .wrap{max-width:720px; position:relative; z-index:3}
.final h2{margin-bottom:20px}
.final p{color:#d7dcec; font-size:19px; margin-bottom:34px}

/* ---------- 21. Подвал ---------- */
.site-footer{background:var(--night-0); color:#9aa2b8; padding:40px var(--gutter); border-top:1px solid rgba(255,255,255,.07)}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:space-between; align-items:center; font-size:13.5px}
.site-footer a{opacity:.8}.site-footer a:hover{opacity:1; color:var(--gold)}
.legal{display:flex; flex-wrap:wrap; gap:10px 22px}

/* ---------- 23. Блог (страница статьи, тот же язык дизайна) ---------- */
.article-hero{
  min-height:64vh; display:flex; align-items:flex-end;
  padding:130px var(--gutter) 60px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--night-1),var(--night-2));
}
.article-hero .fog{opacity:.4}
.article-hero .wrap{max-width:820px; position:relative; z-index:3}
.article-hero .kicker{color:var(--gold); text-transform:uppercase; letter-spacing:.28em; font-size:12px; margin-bottom:18px}
.article-hero h1{font-size:clamp(34px,5vw,64px); color:#fff; margin-bottom:20px}
.article-hero .meta{color:#b9c0d4; font-size:14px; display:flex; gap:18px; flex-wrap:wrap}
.article{background:var(--cream-0); color:var(--ink); padding:clamp(56px,8vh,96px) var(--gutter)}
.article .col{max-width:720px; margin:0 auto}
.article p{font-size:18px; line-height:1.75; margin-bottom:24px; color:#332c20}
.article h2{font-size:clamp(26px,3vw,36px); margin:44px 0 18px}
.article .drop::first-letter{
  font-family:var(--serif); font-size:4.1em; float:left; line-height:.82;
  padding:6px 12px 0 0; color:var(--gold-deep);
}
.article blockquote{
  font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.4;
  color:var(--ink); border-left:3px solid var(--gold-deep); padding:6px 0 6px 26px; margin:34px 0;
}
.article .fig{
  margin:34px 0; border-radius:18px; overflow:hidden; border:1px solid var(--cream-line);
  aspect-ratio:16/9; background:linear-gradient(180deg,#fff8ec,#efe6d3);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:14px;
}
.article .back{display:inline-block; margin-bottom:30px; color:var(--gold-deep); font-size:14px; letter-spacing:.04em}
.article-cta{background:var(--night-1); text-align:center; padding:clamp(60px,10vh,110px) var(--gutter)}
.article-cta h2{margin-bottom:20px}
.article-cta p{color:#cfd5e6; margin-bottom:28px}
.article .lede{font-size:20px; color:var(--ink-soft); font-style:italic; margin-bottom:30px}
.article .callout{border-radius:16px; padding:24px 26px; margin:30px 0}
.article .callout .lbl{display:block; text-transform:uppercase; letter-spacing:.2em; font-size:11px;
  font-weight:700; margin-bottom:10px; opacity:.7}
.article .callout p{margin-bottom:0; font-size:16.5px}
.article .callout.recognise{background:#e9f1e4; border:1px solid #d3e3c9}
.article .callout.recognise .lbl{color:#5c7a4a}
.article .callout.fact{background:#ece7f3; border:1px solid #ddd4ea}
.article .callout.fact .lbl{color:#6a5aa0}
.article .kicker-final{font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink);
  text-align:center; margin:40px 0 10px}
.article .note{font-size:13.5px; color:var(--ink-faint); margin-top:10px}
.article ul{margin:0 0 24px; padding-left:22px}
.article li{font-size:17.5px; line-height:1.7; margin-bottom:10px; color:#332c20}

/* ---------- 28. Блог — индекс статей ---------- */
.blog-list{background:var(--cream-0); color:var(--ink); padding:clamp(56px,8vh,96px) var(--gutter)}
.blog-grid{max-width:var(--wrap); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px}
.bcard{display:flex; flex-direction:column; background:linear-gradient(180deg,#fffaf0,#f2e9d7);
  border:1px solid var(--cream-line); border-radius:var(--radius); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s, border-color .4s}
.bcard:hover{transform:translateY(-6px); box-shadow:0 26px 54px -24px rgba(90,60,20,.4); border-color:var(--gold-deep)}
.bcard .bcover{aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--night-2),var(--night-1))}
.bcard .bcover img{width:100%; height:100%; object-fit:cover; opacity:.92}
.bcard .bcover .kick{position:absolute; left:16px; bottom:14px; z-index:2; color:var(--gold);
  text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.bcard .bcover::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,11,22,.65))}
.bcard .bbody{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.bcard h3{font-size:23px; margin-bottom:10px; line-height:1.15}
.bcard p{font-size:15px; color:var(--ink-soft); margin-bottom:18px; flex:1}
.bcard .read{font-size:13px; letter-spacing:.05em; font-weight:600; color:var(--gold-deep)}
.bcard .bmeta{font-size:12.5px; color:var(--ink-faint); margin-bottom:12px; display:flex; gap:12px; flex-wrap:wrap}

/* ---------- 22. Мелочи ---------- */
::selection{background:var(--gold); color:#231a08}

/* пустые эмодзи-заглушки в карточках профилей — убраны */
.pcard .emoji{display:none}

/* ---------- 24. Меню-оверлей (Obsidian: аватар-кот + serif-пункты + дерево) ---------- */
.menu-overlay{position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
  background:var(--night-0); opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s}
.menu-overlay.open{opacity:1; visibility:visible}
.mo-bg{position:absolute; inset:0; z-index:0;
  background:url(../assets/hero-scene-chain.webp) center/cover; opacity:.22}
.mo-bg::after{content:''; position:absolute; inset:0;
  background:radial-gradient(62% 62% at 50% 42%, transparent, var(--night-0))}
/* Тот же мотив полосок разной длины ВНУТРИ меню — закрывает оверлей */
.mo-close{position:absolute; top:22px; right:26px; z-index:3; display:flex; flex-direction:column;
  gap:5px; align-items:flex-end; padding:13px 16px; border-radius:16px; cursor:pointer;
  background:rgba(245,239,227,.08); border:1px solid rgba(245,239,227,.20); transition:background .3s}
.mo-close:hover{background:rgba(245,239,227,.16)}
.mo-close span{height:2px; background:#f3ecdd; border-radius:2px; display:block}
.mo-close span:nth-child(1){width:24px}
.mo-close span:nth-child(2){width:14px}
.mo-close span:nth-child(3){width:19px}
.mo-avatar{position:relative; z-index:2; width:112px; height:112px; border-radius:50%; overflow:hidden;
  border:1px solid rgba(244,201,107,.45); box-shadow:0 0 44px -10px var(--path-glow); background:var(--night-2)}
.mo-avatar img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; transform:scale(1.55); transform-origin:50% 22%}
/* пункты меню: пропорции Тильды ×1,44, кремовый как у Тильды (25.09.2026) */
.mo-nav{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2.8vh,34px)}
.mo-nav a{font-family:var(--serif); font-size:clamp(31px,3.1vw,48px); color:#f3ecda; line-height:1.18;
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s}
.mo-nav a:hover{color:var(--gold)}
.menu-overlay.open .mo-nav a{opacity:1; transform:none}
.menu-overlay.open .mo-nav a:nth-child(1){transition-delay:.12s}
.menu-overlay.open .mo-nav a:nth-child(2){transition-delay:.20s}
.menu-overlay.open .mo-nav a:nth-child(3){transition-delay:.28s}
.menu-overlay.open .mo-nav a:nth-child(4){transition-delay:.36s}
.menu-overlay.open .mo-nav a:nth-child(5){transition-delay:.44s}

/* ---------- 25. Три ИИ-ассистента — круги (пример 16) ---------- */
.assistants{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:36px}
.acircle{width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:18px; border:1px solid rgba(244,201,107,.35);
  background:radial-gradient(60% 60% at 50% 40%, rgba(244,201,107,.08), transparent);
  font-family:var(--serif); font-size:18px; color:#eef1f8; transition:transform .4s var(--ease), border-color .4s}
.acircle:hover{transform:translateY(-6px); border-color:var(--gold)}

/* ---------- 26. Форма обратной связи (пример 17) ---------- */
.feedback{background:var(--night-2); position:relative; overflow:hidden}
.feedback::before{content:''; position:absolute; inset:0;
  background:radial-gradient(50% 50% at 50% 30%, rgba(244,201,107,.10), transparent 70%)}
.feedback .wrap{max-width:640px; position:relative; z-index:2}
.feedback h2{margin-bottom:10px}
.feedback .lead{color:#cfd5e6; margin-bottom:32px}
.ffield{margin-bottom:26px; position:relative}
.ffield label{display:block; font-size:13px; letter-spacing:.04em; color:var(--gold); margin-bottom:8px}
.ffield input,.ffield textarea{width:100%; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.22);
  color:#fff; font-family:var(--sans); font-size:17px; padding:8px 0; outline:none; transition:border-color .3s}
.ffield input:focus,.ffield textarea:focus{border-color:var(--gold)}
.ffield textarea{resize:vertical; min-height:70px}
.feedback .note{font-size:12.5px; color:var(--ink-faint); margin-top:20px}

/* ---------- 27. Кот-артефакт на светлой секции (пример 7) ---------- */
.artifact-cat{position:absolute; z-index:1; width:110px; opacity:.9; pointer-events:none;
  filter:drop-shadow(0 10px 20px rgba(90,60,20,.25))}
.artifact-cat img{width:100%; display:block}
@media (max-width:760px){ .artifact-cat{width:74px} }

/* Мобильный: «Три пути» — столбиком (каждая карточка своей высоты, без тёмной пустоты
   под короткими). Карусель профилей остаётся горизонтальной, но карточки не тянутся
   под самую высокую. */
@media (max-width:700px){
  .how .carousel{flex-direction:column; overflow-x:visible; scroll-snap-type:none; gap:18px}
  .how .slide{flex:0 0 auto; width:100%; max-width:none; scroll-snap-align:none}
  .how .carousel-hint{display:none}
  .pcarousel{align-items:flex-start}
}

/* ---------- 29. Якорь профиля под фикс-шапкой + плавающая кнопка «на сайт» ---------- */
.article h2{scroll-margin-top:96px}
.to-site{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:90; display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:40px; text-decoration:none;
  font-size:14px; font-weight:600; letter-spacing:.02em; color:#231a08;
  background:linear-gradient(180deg,#f4c96b,#cf9a41);
  box-shadow:0 12px 30px -10px rgba(244,201,107,.55), 0 2px 8px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), transform .35s var(--ease);
}
.to-site.show{opacity:1; visibility:visible; pointer-events:auto}
.to-site:hover{transform:translateX(-50%) translateY(-3px)}
.to-site .arr{font-size:16px; line-height:1}
@media (max-width:520px){ .to-site{bottom:16px; padding:11px 18px; font-size:13px} }
@media (prefers-reduced-motion:reduce){ .to-site{transition:opacity .3s} .to-site:hover{transform:translateX(-50%)} }

/* ---------- 30. Блог одной страницей: секции статей по профилям ---------- */
.article .np{scroll-margin-top:96px; padding-top:14px}
.article .np + .np{border-top:1px solid var(--cream-line); margin-top:54px; padding-top:46px}
.np-head{margin-bottom:20px}
.np-head .np-emoji{font-size:30px; display:block; margin-bottom:8px; line-height:1}
.np-head .np-kicker{color:var(--gold-deep); text-transform:uppercase; letter-spacing:.2em; font-size:12px; margin-bottom:8px}
.article h3.np-sub{font-family:var(--serif); font-size:22px; margin:30px 0 12px; color:var(--ink)}
.np-btn{text-align:center; margin:28px 0 0}
.article .np-series-sep{scroll-margin-top:96px; border-top:2px solid var(--gold-deep); margin-top:64px; padding-top:52px}

/* ---------- 31. Правовая информация (одна страница, 4 документа) ---------- */
.legal{background:var(--cream-0); color:var(--ink); padding:clamp(40px,6vh,72px) var(--gutter)}
.legal .col{max-width:820px; margin:0 auto}
.legal .back{display:inline-block; margin-bottom:26px; color:#8a6a2c; font-size:14px; letter-spacing:.04em}
.legal .toc{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px; padding-bottom:28px; border-bottom:1px solid var(--cream-line)}
.legal .toc a{font-size:14px; color:#8a6a2c; /* контраст 4,5:1 на кремовом (было 2,4:1), окно 21 */ border:1px solid rgba(176,110,30,.28); border-radius:20px;
  padding:7px 14px; transition:background .3s, color .3s}
.legal .toc a:hover{background:rgba(244,201,107,.20)}
.legal .doc{scroll-margin-top:92px; padding-top:20px}
.legal .doc h3[id]{scroll-margin-top:104px}
.legal .doc + .doc{border-top:2px solid var(--gold-deep); margin-top:52px; padding-top:44px}
.legal h2{font-family:var(--serif); font-size:clamp(24px,3.2vw,34px); margin:14px 0 4px; color:var(--ink)}
.legal .sub{color:var(--ink-soft); font-style:italic; margin:0 0 20px; font-size:16px}
.legal h3{font-size:19px; margin:26px 0 10px; color:var(--ink)}
.legal p{font-size:16px; line-height:1.7; margin:0 0 12px; color:#3a3326}
.legal ul{margin:0 0 14px; padding-left:22px}
.legal li{font-size:15.5px; line-height:1.6; margin-bottom:6px; color:#3a3326}
.legal .lead{font-size:16.5px}
.legal .note{font-size:13.5px; color:var(--ink-faint); margin-top:14px}

/* ---------- Выбор мессенджера (js/main.js, раздел 10) — 10.10.2026 ---------- */
.msgr{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(8,11,22,.72)}
.msgr[hidden]{display:none}
.msgr-card{position:relative; width:100%; max-width:360px; padding:32px 24px 24px; border-radius:24px;
  background:var(--night-2); color:#fff; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.msgr-t{margin:0 0 8px; font-size:18px; line-height:1.35; text-align:center}
.msgr-b{justify-content:center; width:100%}
.msgr-b.msgr-last::after{content:"в прошлый раз"; font-weight:400; font-size:12px; opacity:.7}
.msgr-x{position:absolute; top:8px; right:8px; width:44px; height:44px; border:0; background:none;
  color:#fff; font-size:26px; line-height:1; cursor:pointer; opacity:.7}
.msgr-x:hover{opacity:1}