/* ==========================================================================
   Taranova Permanent — стили
   ========================================================================== */

:root{
  --bg:#EFECE8;
  --card:#FBF9F7;
  --card-2:#F3F0EC;
  --ink:#14110F;
  --ink-soft:#3D3730;
  --muted:#7B7169;
  --line:rgba(20,17,15,.09);
  --line-2:rgba(20,17,15,.16);
  --accent:#8C6A56;

  --r-lg:32px;
  --r-md:22px;
  --r-sm:14px;

  --hdr-h:64px;
  --wrap:1180px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

@media (min-width:900px){ :root{ --hdr-h:76px; } }

*,*::before,*::after{ box-sizing:border-box; }

/* важно: атрибут hidden должен побеждать любые display в классах,
   иначе скрытый оверлей остаётся поверх страницы и перехватывает клики */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:var(--hdr-h);
}
.js body.is-loading{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.08; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--ink); color:var(--bg); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:16px; }
@media (min-width:760px){ .wrap{ padding-inline:28px; } }

/* ============================ Заставка ============================ */
.splash{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:#100E0D;
  transition:opacity .9s var(--ease-soft), visibility .9s;
  /* страховка: даже если скрипт не отработал, заставка уйдёт сама */
  animation:splashAuto 3.1s linear forwards;
}
html:not(.js) .splash, .splash-seen .splash{ display:none; }
@keyframes splashAuto{
  0%,62%{ opacity:1; visibility:visible; }
  100%{ opacity:0; visibility:hidden; }
}
.splash__logo{
  display:grid; justify-items:center; gap:18px;
  opacity:0; transform:scale(1.08);
  animation:splashIn 1.15s var(--ease) .15s forwards,
            splashOut 1.15s var(--ease) 1.95s forwards;
}
@keyframes splashOut{ to{ opacity:0; transform:scale(.82); } }
.splash__svg{ width:min(62vw,430px); height:auto; aspect-ratio:787/166; color:#fff; }
.splash__line{
  display:block; height:1px; width:0; background:rgba(255,255,255,.35);
  animation:splashLine 1.4s var(--ease) .5s forwards;
}
@keyframes splashIn{ to{ opacity:1; transform:scale(1); } }
@keyframes splashLine{ to{ width:min(52vw,360px); } }

.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none; }

/* ============================ Шапка ============================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(239,236,232,.72);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease-soft), background .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.hdr.is-stuck{
  border-bottom-color:var(--line);
  background:rgba(239,236,232,.86);
  box-shadow:0 10px 30px -24px rgba(20,17,15,.55);
}
.hdr__in{
  height:var(--hdr-h);
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-left:16px; padding-right:8px;               /* бургер прижат правее */
}
@media (min-width:900px){ .hdr__in{ padding-inline:28px; } }

.brand{ display:flex; align-items:center; padding-block:6px; }
.brand__svg{ width:132px; height:auto; aspect-ratio:787/166; color:var(--ink); transition:opacity .3s; }
@media (min-width:900px){ .brand__svg{ width:158px; } }
.brand:hover .brand__svg{ opacity:.65; }

.nav{ display:none; margin-inline:auto; gap:30px; }
@media (min-width:900px){ .nav{ display:flex; } }
.nav a{
  position:relative; font-size:.94rem; color:var(--ink-soft); padding-block:6px;
  transition:color .3s var(--ease-soft);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.hdr__end{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.hdr__end .hdr__cta{ display:none; }
@media (min-width:900px){ .hdr__end .hdr__cta{ display:inline-flex; } }
/* кнопка рядом с бургером («Обучение» / «Назад») — только там, где есть бургер */
.hdr .hdr__link{ padding:.46rem .9rem; font-size:.84rem; }
@media (min-width:900px){ .hdr__end .hdr__link{ display:none; } }

/* бургер — смещён к правому краю */
.burger{
  width:44px; height:44px; margin-right:-6px;
  display:grid; place-content:center; gap:6px;
  background:transparent; border:0; cursor:pointer; border-radius:50%;
  transition:background .3s var(--ease-soft);
}
.burger:hover{ background:rgba(20,17,15,.05); }
.burger span{
  display:block; width:20px; height:1.6px; background:var(--ink); border-radius:2px;
  transition:transform .45s var(--ease), opacity .3s var(--ease-soft), width .45s var(--ease);
}
.burger span:last-child{ width:14px; margin-left:auto; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ width:20px; transform:translateY(-3.8px) rotate(-45deg); }
@media (min-width:900px){ .burger{ display:none; } }

/* компактное мобильное меню */
.mmenu{
  position:absolute; top:calc(100% + 6px); right:10px;
  width:min(68vw,252px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:10px;
  box-shadow:0 26px 50px -26px rgba(20,17,15,.5);
  transform-origin:top right;
  opacity:0; transform:translateY(-8px) scale(.96);
  transition:opacity .35s var(--ease-soft), transform .45s var(--ease);
  pointer-events:none;
}
.mmenu.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mmenu nav{ display:grid; }
.mmenu nav a{
  padding:11px 14px; border-radius:12px; font-size:.95rem; color:var(--ink-soft);
  transition:background .25s var(--ease-soft), color .25s;
}
.mmenu nav a:active,.mmenu nav a:hover{ background:var(--card-2); color:var(--ink); }
.mmenu__cta{
  display:block; margin-top:6px; padding:12px 14px;
  background:var(--ink); color:var(--bg); border-radius:14px;
  font-size:.9rem; font-weight:500; text-align:center;
}

/* ============================ Общее ============================ */
.sec{ padding-block:clamp(48px,7vw,96px); }
.sec--hero{ padding-top:clamp(18px,3vw,34px); }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}

.eyebrow{
  margin:0 0 12px; font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.h1{ font-size:clamp(2.1rem,7.4vw,4.2rem); font-weight:500; letter-spacing:-.04em; }
.h2{ font-size:clamp(1.6rem,3.6vw,2.6rem); font-weight:500; }
.lead{ font-size:clamp(1rem,1.25vw,1.1rem); color:var(--ink-soft); max-width:52ch; }

.sec__head{ margin-bottom:clamp(22px,3vw,38px); }
.sec__sub{ margin-top:14px; color:var(--muted); max-width:60ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.72rem 1.15rem; border-radius:999px; border:1px solid transparent;
  font-size:.9rem; font-weight:500; letter-spacing:-.01em; cursor:pointer;
  transition:transform .4s var(--ease), background .35s var(--ease-soft), color .35s, border-color .35s, opacity .3s;
  will-change:transform;
}
@media (min-width:760px){ .btn{ padding:.85rem 1.5rem; font-size:.95rem; } }
.btn--dark{ background:var(--ink); color:#FBF9F7; }
.btn--dark:hover{ background:#2A2521; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:rgba(20,17,15,.05); }
.btn--sm{ padding:.55rem 1rem; font-size:.85rem; }
@media (max-width:759px){ .btn{ padding:.62rem 1.02rem; font-size:.86rem; } }
.btn:active{ transform:scale(.97); }

/* появление при скролле */
.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================ Hero ============================ */
.hero{ display:grid; gap:14px; }
@media (min-width:960px){ .hero{ grid-template-columns:1.15fr .85fr; gap:18px; align-items:stretch; min-height:min(74vh,700px); } }

.hero__text{ padding:clamp(24px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.hero__text .h1{ margin-bottom:20px; }
.h1 .w{ display:inline-block; }
.js .h1 .w{ opacity:0; transform:translateY(30px); }
body.is-ready .h1 .w{ animation:wordIn 1s var(--ease) forwards; }
body.is-ready .h1 .w:nth-child(1){ animation-delay:.05s; }
body.is-ready .h1 .w:nth-child(2){ animation-delay:.13s; }
body.is-ready .h1 .w:nth-child(3){ animation-delay:.21s; }
body.is-ready .h1 .w:nth-child(4){ animation-delay:.29s; }
@keyframes wordIn{ to{ opacity:1; transform:none; } }

.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero__facts{
  list-style:none; margin:32px 0 0; padding:24px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
@media (min-width:760px){ .hero__facts{ display:flex; flex-wrap:wrap; gap:26px 40px; } }
.hero__facts b{ display:block; font-size:clamp(1.15rem,4vw,1.45rem); font-weight:600; letter-spacing:-.03em; }
.hero__facts span{ font-size:.76rem; line-height:1.35; color:var(--muted); display:block; }
@media (min-width:760px){ .hero__facts span{ font-size:.82rem; } }

.hero__media{ position:relative; min-height:340px; }
.hero__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.js .hero__media img{ transform:scale(1.06); }
body.is-ready .hero__media img{ transform:scale(1); }
.hero__badge{
  position:absolute; left:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(251,249,247,.86); backdrop-filter:blur(8px);
  font-size:.8rem; font-weight:500; border:1px solid var(--line);
}
.dot{ width:7px; height:7px; border-radius:50%; background:#4C9A62; box-shadow:0 0 0 0 rgba(76,154,98,.55); animation:pulse 2.6s ease-out 6; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(76,154,98,0); } 100%{ box-shadow:0 0 0 0 rgba(76,154,98,0); } }

/* ============================ О мастере ============================ */
.about{ display:grid; gap:0; }
@media (min-width:900px){ .about{ grid-template-columns:.8fr 1.2fr; } }
.about__media{ margin:0; }
.about__media img{ width:100%; height:100%; min-height:280px; object-fit:cover; }
.about__text{ padding:clamp(24px,4vw,52px); align-self:center; }
.about__text .h2{ margin-bottom:18px; }
.about__text p{ color:var(--ink-soft); max-width:56ch; }

.ticks{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:26px; font-size:.95rem; color:var(--ink-soft); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:12px; height:6px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}

/* ============================ Услуги ============================ */
.grid{ display:grid; gap:14px; }
.grid--srv{ grid-template-columns:1fr; }
@media (min-width:640px){ .grid--srv{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .grid--srv{ grid-template-columns:repeat(4,1fr); } }

.srv{ display:flex; flex-direction:column; transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.srv:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -40px rgba(20,17,15,.6); }
.srv__media{ margin:0; overflow:hidden; aspect-ratio:5/4; }
.srv__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.srv:hover .srv__media img{ transform:scale(1.06); }
.srv__body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.srv__body h3{ font-size:1.15rem; font-weight:600; }
.srv__body p{ font-size:.92rem; color:var(--muted); }
.srv__price{ margin-top:auto; font-size:.88rem; font-weight:600; color:var(--accent); letter-spacing:.01em; }

/* ============================ Процесс ============================ */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:s; }
@media (min-width:700px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ padding:26px 22px 28px; display:grid; gap:10px; align-content:start; }
.step__n{ font-size:.78rem; font-weight:600; letter-spacing:.14em; color:var(--accent); }
.step h3{ font-size:1.1rem; font-weight:600; }
.step p{ font-size:.92rem; color:var(--muted); }

/* ============================ Прайс ============================ */
.price{ padding:clamp(22px,3.4vw,44px); }
.price__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.price__list li{
  display:flex; align-items:baseline; gap:10px; padding:14px 0;
  border-bottom:1px solid var(--line);
}
.price__list li:last-child{ border-bottom:0; }
.price__list span{ font-size:.98rem; }
.price__list i{ flex:1; border-bottom:1px dotted var(--line-2); transform:translateY(-4px); }
.price__list b{ font-weight:600; white-space:nowrap; font-size:.98rem; }
.price__note{ margin-top:22px; font-size:.85rem; color:var(--muted); }

/* ============================ Анкета ============================ */
.quiz{ padding:clamp(20px,3vw,38px); }
.quiz__bar{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:clamp(22px,3vw,34px); }
.quiz__bar span{ display:block; height:100%; width:16.6%; background:var(--ink); transition:width .7s var(--ease); }

.quiz__stage{ position:relative; transition:height .6s var(--ease); }
.qstep{
  position:absolute; inset:0 0 auto; margin:0; padding:0; border:0; min-inline-size:0;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .5s var(--ease-soft), transform .6s var(--ease);
}
.qstep.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
html:not(.js) .qstep{ position:relative; opacity:1; transform:none; pointer-events:auto; margin-bottom:34px; }
html:not(.js) .quiz__nav{ display:none; }
.qstep.is-back{ transform:translateY(-14px); }
.qstep__t{ padding:0; font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:500; letter-spacing:-.03em; margin-bottom:20px; }
.qstep__sub{ margin:26px 0 12px; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:.62rem 1.05rem; border-radius:999px; cursor:pointer;
  background:var(--card-2); border:1px solid transparent; color:var(--ink-soft);
  font-size:.9rem; text-align:left;
  transition:background .3s var(--ease-soft), color .3s, border-color .3s, transform .4s var(--ease);
}
.chip:hover{ background:#EAE5DF; }
.chip:active{ transform:scale(.97); }
.chip.is-on{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.chips--sm .chip{ padding:.48rem .9rem; font-size:.84rem; }

.fields{ display:grid; gap:14px; }
@media (min-width:660px){ .fields{ grid-template-columns:repeat(2,1fr); } .field--full{ grid-column:1/-1; } }
.field{ display:grid; gap:7px; }
.field span{ font-size:.82rem; color:var(--muted); }
.field span i{ font-style:normal; opacity:.7; }
.field input,.field textarea,.qout{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--card-2); color:var(--ink);
  font:inherit; font-size:.95rem; resize:vertical;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field input:focus,.field textarea:focus,.qout:focus{
  outline:0; border-color:var(--ink); background:var(--card);
  box-shadow:0 0 0 3px rgba(20,17,15,.06);
}
.qout{ line-height:1.55; font-size:.92rem; }
.qsend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.qsend__note{ margin-top:12px; font-size:.8rem; color:var(--muted); }

.quiz__nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:clamp(24px,3vw,34px); padding-top:20px; border-top:1px solid var(--line);
}
.quiz__count{ font-size:.82rem; color:var(--muted); }
.quiz__nav .btn[disabled]{ opacity:.35; pointer-events:none; }

/* ============================ Отзывы ============================ */
.grid--rev{ grid-template-columns:1fr; }
@media (min-width:760px){ .grid--rev{ grid-template-columns:repeat(3,1fr); } }
.rev{ margin:0; padding:28px 24px; display:flex; flex-direction:column; gap:14px; }
.rev__stars{ color:var(--accent); letter-spacing:.16em; font-size:.8rem; }
.rev p{ font-size:.96rem; color:var(--ink-soft); flex:1; }
.rev footer{ display:flex; align-items:center; gap:10px; font-size:.86rem; }
.rev footer b{ font-weight:600; }
.rev footer i{ font-style:normal; color:var(--muted); }
.ava{ width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#E3DBD3,#CFC4B8); flex:none; }

/* ============================ FAQ ============================ */
.faq{ padding:clamp(24px,3.4vw,48px); display:grid; gap:22px; }
@media (min-width:900px){ .faq{ grid-template-columns:.8fr 1.2fr; gap:40px; } .faq__head{ position:sticky; top:calc(var(--hdr-h) + 28px); align-self:start; } }
.faq__list{ display:grid; }
.acc{ border-top:1px solid var(--line); }
.acc:last-child{ border-bottom:1px solid var(--line); }
.acc summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-size:1rem; font-weight:500; transition:color .3s;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after,.acc summary::before{
  content:""; position:absolute; right:6px; top:50%; width:12px; height:1.5px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s;
}
.acc summary::before{ transform:translateY(-50%) rotate(90deg); }
.acc summary::after{ transform:translateY(-50%); }
.acc[open] summary::before{ transform:translateY(-50%) rotate(0deg); opacity:0; }
.acc summary:hover{ color:var(--accent); }
.acc__body{ overflow:hidden; }
.acc__body p{ padding:0 20px 20px 0; font-size:.93rem; color:var(--muted); max-width:62ch; }
.acc[open] .acc__body{ animation:accIn .55s var(--ease); }
@keyframes accIn{ from{ opacity:0; transform:translateY(-8px); } }

/* ============================ Контакты ============================ */
.contacts{ display:grid; gap:0; }
@media (min-width:940px){ .contacts{ grid-template-columns:1fr 1fr; } }
.contacts__text{ padding:clamp(24px,4vw,52px); }
.contacts__list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:0; }
.contacts__list li{ display:grid; gap:4px; padding:14px 0; border-bottom:1px solid var(--line); }
@media (min-width:560px){ .contacts__list li{ grid-template-columns:130px 1fr; align-items:baseline; gap:12px; } }
.contacts__list span{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.contacts__list b{ font-weight:500; font-size:.98rem; }
.contacts__list a{ transition:color .3s; }
.contacts__list a:hover{ color:var(--accent); }
.contacts__soc{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.contacts__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.contacts__media{ margin:0; min-height:260px; }
.contacts__media img{ width:100%; height:100%; object-fit:cover; }
/* мини-карта Яндекса вместо фото: растягивается на всю высоту карточки, на телефоне — 380px */
.contacts__map{ position:relative; min-height:380px; background:var(--card-2); }
.contacts__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ============================ Подвал ============================ */
.foot{ padding:clamp(36px,5vw,64px) 0 40px; border-top:1px solid var(--line); }
.foot__in{ display:grid; gap:22px; justify-items:start; }
@media (min-width:820px){ .foot__in{ grid-template-columns:auto 1fr; align-items:center; row-gap:28px; } }
.foot__logo{ width:150px; height:auto; aspect-ratio:787/166; color:var(--ink); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.9rem; color:var(--ink-soft); }
@media (min-width:820px){ .foot__nav{ justify-self:end; } }
.foot__nav a{ transition:color .3s; }
.foot__nav a:hover{ color:var(--accent); }
.foot__note{ font-size:.78rem; color:var(--muted); max-width:70ch; }
@media (min-width:820px){ .foot__note{ grid-column:1/-1; } }

/* ============================ Лайтбокс и тост ============================ */
.lb{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px;
  background:rgba(16,14,13,.9); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .45s var(--ease-soft);
}
.lb.is-open{ opacity:1; }
.lb__img{
  max-width:min(94vw,760px); max-height:86vh; border-radius:var(--r-md); object-fit:contain;
  transform:scale(.94); opacity:0; transition:transform .6s var(--ease), opacity .5s var(--ease-soft);
}
.lb.is-open .lb__img{ transform:none; opacity:1; }
.lb__close{
  position:absolute; top:14px; right:16px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:26px; line-height:1; cursor:pointer;
  transition:background .3s;
}
.lb__close:hover{ background:rgba(255,255,255,.22); }

.toast{
  position:fixed; left:50%; bottom:24px; z-index:180;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--card); padding:.7rem 1.2rem; border-radius:999px;
  font-size:.86rem; box-shadow:0 20px 40px -24px rgba(0,0,0,.7);
  transition:opacity .4s var(--ease-soft), transform .5s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ============================ Доступность ============================ */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .h1 .w{ opacity:1; transform:none; }
}

/* отступ для якорей под фиксированной шапкой */
section[id]{ scroll-margin-top:calc(var(--hdr-h) + 18px); }
/* ============================ Карусели работ (как в Instagram/TikTok) ============================ */
.reels{ display:grid; grid-template-columns:1fr; gap:14px; max-width:440px; margin-inline:auto; }
@media (min-width:900px){ .reels{ grid-template-columns:repeat(3,1fr); gap:16px; max-width:none; } }
/* четыре карточки (Работы на главной): 2 в ряд, с 1100px — 4 в ряд */
@media (min-width:640px){ .reels--four{ grid-template-columns:repeat(2,1fr); gap:16px; max-width:none; } }
@media (min-width:1100px){ .reels--four{ grid-template-columns:repeat(4,1fr); } }
.reel{ position:relative; padding:0; }
.reel__track{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  aspect-ratio:4/5; background:var(--card-2); outline:none;
}
.reel__track::-webkit-scrollbar{ display:none; }
.reel__track:focus-visible{ box-shadow:inset 0 0 0 2px var(--ink); }
.reel__slide{ position:relative; flex:0 0 100%; margin:0; scroll-snap-align:center; scroll-snap-stop:always; overflow:hidden; }
.reel__slide img,.reel__slide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.reel__slide img{ cursor:zoom-in; }
/* коллажи «до/после»: показываем целиком, без обрезки краёв */
.reel__slide--fit img{ object-fit:contain; background:var(--card-2); }
.reel__slide--video video{ cursor:pointer; }
.reel__play{
  position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%; background:rgba(20,17,15,.45); backdrop-filter:blur(6px);
  opacity:0; transform:scale(.85); transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft); pointer-events:none;
}
.reel__play::after{ content:""; position:absolute; left:23px; top:18px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; }
.reel__slide.is-paused .reel__play{ opacity:1; transform:none; }
.reel__stage{ position:relative; }
.reel__dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:999px;
  background:rgba(20,17,15,.32); backdrop-filter:blur(8px);
}
.reel__dot{
  position:relative; width:6px; height:6px; padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.55); cursor:pointer;
  transition:width .35s var(--ease), background .3s var(--ease-soft);
}
/* невидимая зона нажатия вокруг точки: ~16×34 px, соседние зоны не перекрываются */
.reel__dot::after{ content:""; position:absolute; inset:-14px -5px; }
.reel__dot.is-active{ width:18px; background:#fff; }
.reel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; padding:0 0 3px; border:0; border-radius:50%;
  background:rgba(251,249,247,.9); color:var(--ink); font-size:24px; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px rgba(20,17,15,.18); opacity:0; transition:opacity .3s var(--ease-soft), background .3s;
}
.reel__arrow--prev{ left:10px; } .reel__arrow--next{ right:10px; }
.reel__arrow:disabled{ display:none; }
@media (hover:hover) and (pointer:fine){ .reel:hover .reel__arrow,.reel:focus-within .reel__arrow{ opacity:1; } }
@media (hover:none){ .reel__arrow{ display:none; } }
.reel__cap{ display:flex; flex-direction:column; gap:2px; padding:14px 18px 16px; min-height:70px; }
.reel__cap b{ font-size:1.02rem; font-weight:600; letter-spacing:-.02em; }
.reel__cap span{ font-size:.85rem; color:var(--muted); }

/* ============================ Страница обучения ============================ */
.plans{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:900px){ .plans{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.plan{ padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:12px; }
.plan__tag{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.plan h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.02em; }
.plan p{ color:var(--muted); font-size:.93rem; }
.plan__price{ margin-top:auto; padding-top:10px; font-size:clamp(1.7rem,4vw,2.2rem); font-weight:600; letter-spacing:-.04em; }
/* список + листалка фото рядом (документы, что входит) */
.split{ display:grid; gap:14px; }
@media (min-width:900px){ .split{ grid-template-columns:1.25fr .75fr; gap:16px; } }
.split > .price{ display:flex; flex-direction:column; justify-content:center; }
.split > .price .h2{ margin-bottom:24px; }
.split .ticks{ gap:14px; }
.split .ticks li{ font-size:1rem; }
.split .reel{ width:100%; max-width:440px; margin-inline:auto; }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* анонс обучения на главной */
.trainbox{ display:grid; gap:24px; padding:clamp(24px,4vw,52px); align-items:center; }
@media (min-width:900px){ .trainbox{ grid-template-columns:1.5fr 1fr; gap:48px; } }
.trainbox .h2{ margin-bottom:14px; }
.trainbox__text p{ color:var(--ink-soft); max-width:56ch; }
.trainbox__side{ display:grid; gap:12px; justify-items:start; }
.trainbox__price{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
.trainbox__price span{ font-size:.92rem; color:var(--muted); }
.trainbox__price b{ font-size:1.1rem; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.trainbox__side .btn{ margin-top:8px; }

.price .ticks{ margin:0; }
.hero__facts li{ min-width:0; }
.contacts--solo{ grid-template-columns:1fr; max-width:760px; margin-inline:auto; }

/* ============================ Чат-бот ============================ */
.chat{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:120; }
.chat__fab{
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 20px 0 17px;
  border:0; border-radius:999px; background:var(--ink); color:#FBF9F7; cursor:pointer;
  font-size:.92rem; font-weight:500; box-shadow:0 18px 40px -16px rgba(20,17,15,.55);
  transition:transform .4s var(--ease), background .3s var(--ease-soft);
}
.chat__fab:hover{ background:#2A2521; }
.chat__fab:active{ transform:scale(.96); }
.chat__fab svg{ width:22px; height:22px; flex:none; }
@media (max-width:640px){
  .chat__fab{ width:54px; padding:0; justify-content:center; }
  .chat__fab span{ display:none; }
}

.chat__panel{
  position:absolute; right:0; bottom:68px;
  width:min(380px, calc(100vw - 32px)); height:min(580px, calc(100vh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  box-shadow:0 30px 70px -28px rgba(20,17,15,.5);
  opacity:0; transform:translateY(12px) scale(.98); transform-origin:bottom right;
  transition:opacity .3s var(--ease-soft), transform .45s var(--ease);
}
.chat.is-open .chat__panel{ opacity:1; transform:none; }
@media (max-width:640px){
  .chat__panel{
    position:fixed; left:0; right:0; bottom:0; width:100%;
    height:86vh; height:86dvh; border-radius:24px 24px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .chat.is-open .chat__fab{ display:none; }
}

.chat__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 14px 18px; border-bottom:1px solid var(--line); }
.chat__head b{ display:block; font-size:1rem; font-weight:600; letter-spacing:-.01em; }
.chat__head span{ display:block; font-size:.78rem; color:var(--muted); }
.chat__close{ width:38px; height:38px; flex:none; border:0; border-radius:50%; background:transparent; font-size:24px; line-height:1; cursor:pointer; color:var(--ink-soft); }
.chat__close:hover{ background:var(--card-2); }

.chat__log{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px; display:flex; flex-direction:column; gap:10px; }
.chat__msg{ max-width:86%; padding:10px 14px; border-radius:18px; font-size:.92rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat__msg--bot{ align-self:flex-start; background:var(--card-2); color:var(--ink); border-bottom-left-radius:6px; }
.chat__msg--user{ align-self:flex-end; background:var(--ink); color:var(--card); border-bottom-right-radius:6px; }
.chat__msg--error{ background:#F6E9E4; }
.chat__msg a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.chat__msg--typing{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 16px; }
.chat__dots{ display:flex; gap:4px; }
.chat__wait{ font-size:.85rem; line-height:1.45; color:var(--muted); }
.chat__msg--typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:chatDot 1.2s infinite ease-in-out; }
.chat__msg--typing i:nth-child(2){ animation-delay:.15s; }
.chat__msg--typing i:nth-child(3){ animation-delay:.3s; }
@keyframes chatDot{ 0%,80%,100%{ opacity:.25; transform:none; } 40%{ opacity:1; transform:translateY(-3px); } }

.chat__quick{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; }
.chat__chip{
  padding:.45rem .85rem; border:1px solid var(--line-2); border-radius:999px; background:transparent;
  font-size:.82rem; color:var(--ink-soft); cursor:pointer; text-align:left;
  transition:background .25s var(--ease-soft), color .25s;
}
.chat__chip:hover{ background:var(--card-2); color:var(--ink); }

.chat__form{ display:flex; align-items:flex-end; gap:8px; margin:0 12px; padding:6px 6px 6px 14px; border:1px solid var(--line-2); border-radius:22px; background:var(--card-2); }
.chat__form:focus-within{ border-color:var(--ink); background:var(--card); }
.chat__form textarea{
  flex:1; min-width:0; max-height:120px; padding:8px 0; border:0; outline:0; resize:none;
  background:transparent; color:var(--ink); font:inherit; font-size:16px; line-height:1.4;
}
.chat__send{ width:38px; height:38px; flex:none; display:grid; place-items:center; border:0; border-radius:50%; background:var(--ink); color:var(--card); cursor:pointer; transition:opacity .2s; }
.chat__send svg{ width:18px; height:18px; }
.chat__send:disabled{ opacity:.35; cursor:default; }

.chat__links{ display:flex; flex-wrap:wrap; gap:4px 16px; padding:10px 18px 0; font-size:.8rem; }
.chat__links a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.chat__links a:hover{ color:var(--accent); }
.chat__note{ margin:0; padding:6px 18px 14px; font-size:.72rem; line-height:1.4; color:var(--muted); }
.chat__note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ============================ Политика конфиденциальности ============================ */
.legal{ max-width:820px; margin-inline:auto; padding:clamp(24px,4vw,52px); }
.legal .h2{ margin-bottom:10px; }
.legal__date{ font-size:.85rem; color:var(--muted); margin-bottom:24px; }
.legal h2:not(.h2){ margin:32px 0 12px; font-size:1.15rem; letter-spacing:-.02em; line-height:1.3; }
.legal p, .legal li{ font-size:.97rem; color:var(--ink-soft); }
.legal ul{ margin:0 0 1em; padding-left:20px; display:grid; gap:6px; }
.legal a{ text-decoration:underline; text-underline-offset:2px; }
.legal mark{ padding:0 4px; border-radius:4px; background:#F6E3B0; color:var(--ink); }
.foot__note a{ text-decoration:underline; text-underline-offset:2px; transition:color .3s; }
.foot__note a:hover{ color:var(--accent); }
.legal h3{ margin:22px 0 8px; font-size:1rem; font-weight:600; letter-spacing:-.01em; line-height:1.35; }
.legal__sum{ margin:0 0 28px; padding:18px 20px; border-radius:var(--r-md); background:var(--card-2); }
.legal__sum ul{ margin:8px 0 0; }
.legal code{ padding:1px 5px; border-radius:4px; background:var(--card-2); font-size:.88em; }
