/* ============================================================
   КОМПОНЕНТЫ — ритм секций, кнопки, карточки, шапка, меню,
   аккордеон, закреплённое действие.
   ============================================================ */

/* ---------- Ритм секций A / B / C ----------
   A — полноширинный визуал, B — карточная сетка, C — акцентная заливка.
   Соседние типы не совпадают: A B A C B A B A C.               */
.section{padding-block:var(--gap-section)}
.section--dark{background:var(--plum-900);color:var(--on-dark)}
.section--brand{background:var(--plum-800);color:var(--on-dark);padding-bottom:96px}
.section--dark p,.section--brand p{color:rgba(245,239,243,.72);max-width:56ch}
.section--dark h2,.section--dark h3,
.section--brand h2,.section--brand h3{color:#fff}

/* ---------- Заголовок секции: номер / линия / имя раздела ---------- */
.rail{
  display:flex;align-items:baseline;gap:20px;
  margin-bottom:clamp(28px,4vw,44px);
}
.rail__num{
  font:14px/1 var(--font-display);color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  font-size:var(--fs-label);letter-spacing:.02em;
}
.rail__line{flex:1;height:1px;background:var(--hairline-2)}
.rail__name{
  font:500 var(--fs-label)/1 var(--font-body);
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);
  white-space:nowrap;
}
.section--dark .rail__num,.section--brand .rail__num,
.section--dark .rail__name,.section--brand .rail__name{color:rgba(245,239,243,.5)}
.section--dark .rail__line,.section--brand .rail__line{background:var(--hairline-dark-2)}

/* ---------- Кнопки ----------
   Все парные CTA — одной ширины и не растягиваются на всю ширину
   секции: min-width держит форму на десктопе, flex-wrap ломает
   их в столбик на мобиле без переопределений на брейкпоинт.      */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:220px;white-space:nowrap;flex:none;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--radius-btn);
  font:500 15px/1 var(--font-body);text-decoration:none;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background 200ms ease,border-color 200ms ease,color 200ms ease,transform 80ms ease;
}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--accent);color:#fff;padding:14px 26px}
.btn--primary:hover{background:var(--accent-deep)}
.btn--secondary{background:transparent;color:var(--ink);border-color:rgba(36,31,43,.22);padding:13px 24px}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn--onbrand{background:#fff;color:var(--plum-900);padding:14px 26px}
.btn--onbrand:hover{background:var(--lilac-300)}
.btn--ondark{background:#fff;color:var(--plum-900);padding:14px 26px}
.btn--ondark:hover{background:var(--lilac-300)}
/* вторичная кнопка на тёмном/брендовом блоке — обводка по белому.
   .hero сюда же: он не оборачивается в .section--dark, а стоит на
   собственном тёмном фоне-фото. Без этого текст кнопки уходил
   тёмным по тёмному и пропадал на фото. */
.section--dark .btn--secondary,.section--brand .btn--secondary,.hero .btn--secondary{
  color:var(--on-dark);border-color:rgba(245,239,243,.4);
}
.section--dark .btn--secondary:hover,.section--brand .btn--secondary:hover,.hero .btn--secondary:hover{
  border-color:var(--lilac-300);color:var(--lilac-300);
}

.link{color:var(--accent-deep);text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{color:var(--ink)}
.section--dark .link,.section--brand .link{color:var(--lilac-300)}
.section--dark .link:hover,.section--brand .link:hover{color:#fff}

.actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(26px,3.5vw,36px);
}

/* ---------- Сетки и карточки ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid--wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.card{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius-card);padding:36px 32px 40px;
  transition:border-color 250ms ease,transform 250ms ease;
}
.card:hover{border-color:rgba(138,106,164,.45);transform:translateY(-3px)}
.card .eyebrow{
  display:block;margin-bottom:18px;
  font:600 11px/1 var(--font-body);text-transform:uppercase;
  letter-spacing:.2em;color:var(--label);
}
.card h3{margin-bottom:10px;font-size:23px;line-height:1.25}
.card p{color:var(--ink-2);max-width:46ch;font-size:var(--fs-small);line-height:1.65}

/* карточки-плитки требований: тёплая подложка, цветной верх */
.tile{
  background:var(--surface-warm);border-radius:var(--radius-card);
  padding:32px 28px 36px;border-top:2px solid var(--accent);
}
.tile .eyebrow{font:500 15px/1 var(--font-display);color:var(--accent)}
.tile h3{margin:12px 0 10px;font-size:21px;line-height:1.25}
.tile p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}
.tile--dashed{
  background:none;border-top:0;border:1px dashed rgba(138,106,164,.4);
  display:flex;align-items:center;
}
.tile--dashed p{color:var(--accent-ink);font-size:16px;line-height:1.6;max-width:none}
.tile--dashed .link{border-bottom:1px solid rgba(138,106,164,.4);text-decoration:none}

.lead{
  font-size:var(--fs-lead);line-height:1.7;color:var(--ink-2);max-width:60ch;
}

/* ---------- Кадры ---------- */
.frame{border-radius:var(--radius-card);overflow:hidden;background:var(--surface-warm)}
.frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04)}
figcaption{margin-top:14px;max-width:62ch;font-size:var(--fs-caption);color:var(--ink-3)}

/* ---------- Шапка ---------- */
.header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:rgba(250,248,245,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hairline);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header{background:var(--bg)}
}
.header__in{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.brand__sign{width:44px;height:44px;object-fit:contain}
.brand__name{font:17px/1.1 var(--font-display);letter-spacing:.01em;color:var(--ink)}
.brand__name b{font-weight:400;color:var(--accent);margin-left:.05em}

.burger{
  display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;
  border:0;background:transparent;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.burger i{
  display:block;width:22px;height:1.5px;background:var(--ink);
  position:relative;transition:background 160ms ease;
}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:22px;height:1.5px;
  background:var(--ink);transition:transform 180ms ease;
}
.burger i::before{top:-7px}
.burger i::after{top:7px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}

.nav{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;
  padding:16px clamp(20px,4vw,32px) 40px;
  display:flex;flex-direction:column;overflow-y:auto;
  background:var(--bg);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity 160ms ease-out,transform 160ms ease-out;
}
.nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.nav a:not(.btn){
  display:block;padding:16px 0;border-bottom:1px solid var(--hairline);
  font:400 22px/1.2 var(--font-display);text-decoration:none;color:var(--ink);
}
.nav .btn{margin-top:24px}
body[data-menu-open]{overflow:hidden}

@media (min-width:1024px){
  .burger{display:none}
  .nav{
    position:static;inset:auto;flex-direction:row;align-items:center;gap:28px;
    padding:0;background:none;overflow:visible;
    opacity:1;transform:none;pointer-events:auto;
  }
  .nav a:not(.btn){
    padding:0;border:0;text-decoration:none;
    font:400 14px/1 var(--font-body);color:var(--ink-2);
    transition:color 140ms ease;
  }
  .nav a:not(.btn):hover{color:var(--accent)}
  .nav .btn{margin-top:0;min-width:0;padding:11px 20px;font-size:14px}
}

/* ---------- FAQ-аккордеон ---------- */
.faq{max-width:960px;border-top:1px solid var(--hairline-2)}
.faq__item{border-bottom:1px solid var(--hairline-2)}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;min-width:0;padding:26px 0;border:0;background:none;cursor:pointer;
  font:500 clamp(18px,2vw,22px)/1.35 var(--font-display);color:var(--ink);
  text-align:left;transition:color 200ms ease;
}
.faq__item[data-open="true"] .faq__q{color:var(--accent)}
.faq__q:hover{color:var(--accent)}
.faq__icon{flex:none;font:400 22px/1 var(--font-body);color:var(--num);transition:transform 250ms ease}
.faq__item[data-open="true"] .faq__icon{transform:rotate(45deg)}
.faq__a{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height 350ms ease,opacity 250ms ease;
}
.faq__item[data-open="true"] .faq__a{max-height:320px;opacity:1}
.faq__a p{padding-bottom:28px;font-size:16px;line-height:1.7;color:var(--ink-2);max-width:70ch}
@media (prefers-reduced-motion:reduce){
  .faq__a{transition:none}
  .faq__icon{transition:none}
}

/* ---------- Закреплённое действие на мобиле ---------- */
.sticky{
  position:fixed;inset:auto 0 0 0;z-index:90;
  display:flex;gap:12px;align-items:center;
  padding:10px clamp(20px,4vw,32px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,248,245,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sticky{background:var(--bg)}
}
.sticky .btn{min-width:0;flex:1}
.sticky .btn--secondary{flex:none;padding-inline:16px}
@media (min-width:1024px){ .sticky{display:none} }

/* ---------- Движение ---------- */
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(14px);
    transition:opacity 220ms ease-out,transform 220ms ease-out}
  html.js .reveal.is-in{opacity:1;transform:none}
}