/* Глубина — стили лендинга (index.html) и контактов (contacts.html).
   Токены — в tokens.css (общие с кабинетом). Mobile-first. */

/* ============================== База ============================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-weight:600; text-wrap:balance; }
h1,h2{ font-family:var(--font-display); font-weight:500; letter-spacing:-.015em; line-height:1.04; }
p{ margin:0; text-wrap:pretty; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-bright); text-underline-offset:.2em; text-decoration-thickness:1px; }
a:hover{ color:var(--gold); }
ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }

::selection{ background:var(--gold); color:var(--on-gold); }
html{ scrollbar-color:var(--line-strong) var(--bg-sunken); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--radius-sm); }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--gold); color:var(--on-gold); padding:10px 16px; border-radius:var(--radius-sm);
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:12px; }
.skip-link:hover{ color:var(--on-gold); }

.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* ============================== Кнопки ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:.85em 1.6em;
  background:var(--gold); color:var(--on-gold);
  font:600 1rem/1.2 var(--font-body); letter-spacing:.01em;
  border:1px solid var(--gold); border-radius:var(--radius);
  text-decoration:none; text-align:center; cursor:pointer;
  transition:background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn:hover{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--on-gold); box-shadow:0 8px 20px -8px rgba(0,0,0,.8); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--bg-raised-2); color:var(--text); border-color:var(--gold-dim); box-shadow:none; }
.btn-sm{ min-height:40px; padding:.5em 1.1em; font-size:.9375rem; }
.btn-block{ display:flex; width:100%; }

/* ============================== Навигация ============================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,9,7,.86);
  -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-bar{ display:flex; align-items:center; gap:var(--space-5); min-height:64px; }
.brand{
  display:inline-flex; min-height:44px; align-items:center; gap:.6rem; margin-right:auto;
  color:var(--text); text-decoration:none;
  font:500 1.5rem/1 var(--font-display); letter-spacing:.02em;
}
.brand:hover{ color:var(--gold-bright); }
.brand img{ width:28px; height:28px; }
.nav-right{ display:flex; align-items:center; gap:var(--space-3); }

.nav-menu{ display:none; }
.nav-menu a{ color:var(--text-muted); text-decoration:none; font-size:var(--fs-sm); transition:color .2s; }
.nav-menu a:hover,.nav-menu a[aria-current="page"]{ color:var(--text); }

.nav-toggle{
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer;
}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  display:block; width:18px; height:1.5px; background:var(--text); border-radius:2px; content:"";
  transition:transform .3s var(--ease-out), background .2s;
}
.nav-toggle-bars{ position:relative; }
.nav-toggle-bars::before{ position:absolute; top:-6px; }
.nav-toggle-bars::after{ position:absolute; top:6px; }
.nav.is-open .nav-toggle-bars{ background:transparent; }
.nav.is-open .nav-toggle-bars::before{ transform:translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle-bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* Мобильное меню — выпадающий лист под панелью */
.nav.is-open .nav-menu{
  display:flex; flex-direction:column;
  position:absolute; left:0; right:0; top:100%;
  padding:var(--space-3) var(--gutter) var(--space-6);
  background:var(--bg); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lift);
}
.nav.is-open .nav-menu a{ display:block; padding:.85rem 0; font-size:1.0625rem; color:var(--text); border-bottom:1px solid var(--line); }
.nav.is-open .nav-menu li:last-child a{ border-bottom:0; color:var(--gold-bright); }

@media (max-width:420px){ .nav-cta{ display:none; } }

@media (min-width:960px){
  .nav-toggle{ display:none; }
  .nav-menu{ display:flex; align-items:center; gap:var(--space-5); }
  .nav-login{ color:var(--gold-bright) !important; }
  .brand{ margin-right:var(--space-5); }
  .nav-menu{ margin-right:auto; }
}

/* ============================== Секции ============================== */
.section{ padding-block:var(--space-section); }
.section-sunken{ background:var(--bg-sunken); border-block:1px solid var(--line); }
.section-head{ max-width:44rem; margin-bottom:clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head h2{ font-size:var(--fs-h2); }
.section-sub{ margin-top:var(--space-5); font-size:var(--fs-lg); color:var(--text-muted); max-width:var(--measure); }
.section-sub a{ color:var(--gold-bright); }

/* ============================== Hero ============================== */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(3rem, 1.5rem + 6vw, 7.5rem) clamp(4rem, 2rem + 7vw, 9rem);
  background:
    radial-gradient(60rem 40rem at 78% 42%, rgba(212,178,92,.10), transparent 62%),
    var(--bg);
}
.hero-grid{ display:grid; gap:clamp(2.5rem, 1rem + 4vw, 4rem); align-items:center; }
.hero h1{ font-size:var(--fs-h1); max-width:13ch; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.lede{ margin-top:var(--space-6); font-size:var(--fs-lg); color:var(--text-muted); max-width:36rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.hero-facts{ display:grid; gap:.45rem; margin-top:var(--space-6); font-size:var(--fs-sm); color:var(--text-muted); }
.hero-facts li{ display:flex; align-items:center; gap:.55rem; }
.hero-facts li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }

.hero-visual{ position:relative; width:min(78vw, 440px); aspect-ratio:1; margin-inline:auto; }
.hero-visual .sigil{ position:absolute; inset:12%; width:76%; height:76%; filter:drop-shadow(0 18px 50px rgba(212,178,92,.18)); }
.rings{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.rings circle{ fill:none; stroke:var(--gold-dim); stroke-width:.75; opacity:.55; }
.rings .dash{ stroke-dasharray:2 7; opacity:.8; }

/* Единственный авторский момент движения: «дыхание» сигила — 4 с вдох, 6 с выдох,
   медленное вращение пунктирного кольца. Без движения при reduce. */
@media (prefers-reduced-motion:no-preference){
  .hero-visual .sigil{ animation:breathe 10s var(--ease-out) infinite; }
  .rings .dash{ transform-origin:200px 200px; animation:spin 140s linear infinite; }
  .rings circle:first-child{ transform-origin:200px 200px; animation:halo 10s ease-in-out infinite; }
}
@keyframes breathe{
  0%,100%{ transform:scale(.965); filter:drop-shadow(0 18px 40px rgba(212,178,92,.10)); }
  40%{ transform:scale(1); filter:drop-shadow(0 18px 60px rgba(212,178,92,.28)); }
}
@keyframes halo{ 0%,100%{ opacity:.25; transform:scale(.97); } 40%{ opacity:.6; transform:scale(1); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.25fr 1fr; }
  .hero-visual{ order:0; width:100%; max-width:460px; }
}
@media (max-width:899px){
  .hero-visual{ width:min(60vw, 240px); }
}

/* ============================== Состояния ============================== */
.states{ display:grid; border-top:1px solid var(--line); counter-reset:none; }
.state{
  display:grid; gap:var(--space-3);
  padding-block:var(--space-6);
  border-bottom:1px solid var(--line);
}
.state h3{ font:500 var(--fs-h3)/1.15 var(--font-display); }
.state > p{ color:var(--text-muted); max-width:var(--measure); }
.state-fix{ color:var(--text) !important; font-size:var(--fs-sm); }
.state-fix .state-mod{ display:table; margin:0 0 .5rem; }
.state-mod{
  display:inline-block; margin-right:.6rem; padding:.15rem .55rem;
  border:1px solid var(--gold-dim); border-radius:999px;
  color:var(--gold-bright); font-size:var(--fs-xs); font-weight:500; letter-spacing:.02em; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
@media (min-width:860px){
  .state{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap:var(--space-6); align-items:baseline; }
}

/* ============================== Мифы ============================== */
.myths-grid{ display:grid; gap:var(--space-6); }
.myths{ display:grid; gap:var(--space-6); }
.myth{ padding-top:var(--space-5); border-top:1px solid var(--line-strong); }
.myth dt{ font:italic 500 var(--fs-h3)/1.2 var(--font-display); color:var(--gold-bright); }
.myth dd{ margin-top:var(--space-3); color:var(--text-muted); max-width:var(--measure); }
@media (min-width:960px){
  .myths-grid{ grid-template-columns:5fr 7fr; gap:var(--space-8); }
  .myths-grid .section-head{ margin-bottom:0; position:sticky; top:110px; align-self:start; }
}

/* ============================== Программа: спуск ============================== */
.descent{ position:relative; display:grid; gap:clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.stage-title{
  display:flex; align-items:baseline; gap:var(--space-4); flex-wrap:wrap;
  margin-bottom:var(--space-5);
  font:500 var(--fs-h3)/1.1 var(--font-display); color:var(--text);
}
.stage-title span{ font:400 var(--fs-sm)/1 var(--font-body); color:var(--text-faint); font-variant-numeric:tabular-nums; }

/* Линия глубины: номера модулей сидят на вертикальной золотой нити */
.modules{ position:relative; display:grid; }
.modules::before{
  content:""; position:absolute; left:1.35rem; top:.5rem; bottom:.5rem; width:1px;
  background:linear-gradient(to bottom, var(--gold-dim), rgba(143,117,54,.25));
}
.module{ position:relative; display:grid; grid-template-columns:2.7rem minmax(0,1fr); gap:var(--space-4); padding-block:var(--space-4); }
.module-num{
  position:relative; z-index:1;
  display:grid; place-items:center; width:2.7rem; height:2.7rem;
  background:var(--bg); border:1px solid var(--gold-dim); border-radius:50%;
  color:var(--gold); font:500 .9375rem/1 var(--font-body); font-variant-numeric:tabular-nums;
}
.module h4{ font-size:1.3125rem; font-weight:600; line-height:1.35; margin-top:.55rem; }
.module p{ margin-top:var(--space-2); color:var(--text-muted); font-size:var(--fs-sm); max-width:var(--measure); }
.module:hover .module-num{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); transition:background .3s var(--ease-out), color .3s; }

@media (min-width:1000px){
  .descent{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-7); }
  .descent-stage:nth-child(2){ margin-top:4rem; }
  .descent-stage:nth-child(3){ margin-top:8rem; }
}

/* ============================== Основа ============================== */
.basis-grid{ display:grid; gap:var(--space-6); }
.basis{ display:grid; border-top:1px solid var(--line-strong); }
.basis li{ padding-block:var(--space-4); border-bottom:1px solid var(--line); color:var(--text-muted); }
.basis strong{ color:var(--text); font-weight:600; }
.basis-author{ color:var(--text-muted); font-size:var(--fs-sm); }
@media (min-width:960px){
  .basis-grid{ grid-template-columns:5fr 7fr; column-gap:var(--space-8); }
  .basis-grid .section-head{ grid-row:span 2; margin-bottom:0; }
}

/* ============================== Бесплатно ============================== */
.free-grid{ display:grid; gap:var(--space-7); }
.free-note{ margin-block:var(--space-5) var(--space-6); font-size:var(--fs-sm); color:var(--text-muted); padding-left:var(--space-4); border-left:1px solid var(--gold-dim); }
.units{ display:grid; border-top:1px solid var(--line); counter-reset:none; }
.units li{
  display:flex; align-items:baseline; gap:var(--space-4);
  padding-block:.8rem; border-bottom:1px solid var(--line);
  font:500 1.25rem/1.3 var(--font-display);
}
.units span{ min-width:1.8rem; color:var(--gold); font:500 var(--fs-sm)/1 var(--font-body); font-variant-numeric:tabular-nums; }
@media (min-width:960px){
  .free-grid{ grid-template-columns:5fr 7fr; column-gap:var(--space-8); }
  .free-grid .section-head{ margin-bottom:0; }
  .units{ grid-template-columns:1fr 1fr; column-gap:var(--space-6); }
}

/* ============================== Формат ============================== */
.format{ display:grid; gap:var(--space-6); }
.format-col{ padding-top:var(--space-5); border-top:1px solid var(--line-strong); }
.format-col h3{ font:500 var(--fs-h3)/1.15 var(--font-display); margin-bottom:var(--space-4); }
.format-col p{ color:var(--text-muted); }
@media (min-width:860px){ .format{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-7); max-width:52rem; } }

.ticks li,.crosses li{ position:relative; padding:.4rem 0 .4rem 1.9rem; color:var(--text-muted); }
.ticks li::before{
  content:""; position:absolute; left:.1rem; top:.95rem; width:.8rem; height:.42rem;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:translateY(-50%) rotate(-45deg);
}
.crosses li::before,.crosses li::after{
  content:""; position:absolute; left:.15rem; top:1.02rem; width:.85rem; height:1.5px; background:var(--text-faint);
}
.crosses li::before{ transform:rotate(45deg); }
.crosses li::after{ transform:rotate(-45deg); }

/* ============================== Для кого ============================== */
.fit{ display:grid; gap:var(--space-6); }
.fit-col{ padding:var(--space-6); border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--bg-raised); }
.fit-col h3{ font:500 var(--fs-h3)/1.15 var(--font-display); margin-bottom:var(--space-4); }
.fit-col--no{ background:transparent; border-color:var(--line); }
@media (min-width:860px){ .fit{ grid-template-columns:1fr 1fr; gap:var(--space-6); } }

/* ============================== Цена ============================== */
.price-grid{ display:grid; gap:var(--space-6); align-items:center; }
.price-card{
  position:relative;
  padding:clamp(1.75rem, 1rem + 3vw, 3rem);
  background:linear-gradient(180deg, var(--bg-raised-2), var(--bg-raised));
  border:1px solid var(--gold-dim); border-radius:var(--radius-lg);
}
.price{ display:flex; align-items:flex-start; gap:.3rem; line-height:1; }
.price-num{ font:500 var(--fs-num)/.9 var(--font-display); color:var(--gold-bright); letter-spacing:-.02em; font-variant-numeric:lining-nums; }
.price-cur{ font:500 2rem/1 var(--font-display); color:var(--gold); margin-top:.4rem; }
.price-terms{ margin-top:var(--space-2); color:var(--text-muted); font-size:var(--fs-sm); }
.price-card .ticks{ margin-block:var(--space-6); padding-block:var(--space-5); border-block:1px solid var(--line-strong); }
.price-card .ticks li{ color:var(--text); }
.price-pay{ margin-top:var(--space-4); font-size:var(--fs-xs); color:var(--text-muted); text-align:center; }
@media (min-width:960px){
  .price-grid{ grid-template-columns:6fr 5fr; column-gap:var(--space-8); }
  .price-grid .section-head{ margin-bottom:0; }
}

/* ============================== FAQ ============================== */
.faq-grid{ display:grid; gap:var(--space-5); }
.faq-nav{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-6); }
.faq-nav a{
  padding:.45rem .9rem; border:1px solid var(--line-strong); border-radius:999px;
  color:var(--text-muted); text-decoration:none; font-size:var(--fs-sm);
  transition:color .2s, border-color .2s;
}
.faq-nav a:hover{ color:var(--text); border-color:var(--gold-dim); }
.faq-group + .faq-group{ margin-top:var(--space-7); }
.faq-group h3{ font:500 var(--fs-h3)/1.15 var(--font-display); color:var(--gold-bright); margin-bottom:var(--space-3); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4);
  padding:1.1rem 0; cursor:pointer; list-style:none;
  font-weight:500; font-size:1.0625rem; line-height:1.45; color:var(--text);
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex:none; width:.65rem; height:.65rem; margin-top:.4rem;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); transition:transform .3s var(--ease-out);
}
.faq-item[open] summary::after{ transform:translateY(.25rem) rotate(-135deg); }
.faq-item summary:hover{ color:var(--gold-bright); }
.faq-a{ padding:0 0 1.25rem; color:var(--text-muted); max-width:var(--measure); }
.faq-a p + p{ margin-top:var(--space-3); }
@media (min-width:960px){
  .faq-grid{ grid-template-columns:4fr 8fr; column-gap:var(--space-8); }
  .faq-head{ position:sticky; top:110px; align-self:start; margin-bottom:0; }
  .faq-nav{ flex-direction:column; align-items:flex-start; }
}

/* ============================== Финал ============================== */
.final{
  padding-block:var(--space-section);
  background:radial-gradient(40rem 26rem at 50% 30%, rgba(212,178,92,.09), transparent 70%), var(--bg-sunken);
  border-top:1px solid var(--line);
  text-align:center;
}
.final-inner{ display:grid; justify-items:center; gap:var(--space-5); }
.final img{ width:72px; height:72px; opacity:.9; }
.final h2{ font-size:var(--fs-h2); max-width:22ch; }
.final p{ color:var(--text-muted); }

/* ============================== Подвал ============================== */
.site-footer{ padding-block:var(--space-7); border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--text-muted); }
.footer-inner{ display:grid; gap:var(--space-5); }
.brand-word{ font:500 1.5rem/1 var(--font-display); color:var(--text); }
.footer-brand p{ margin-top:var(--space-2); max-width:34rem; }
.legal{ display:flex; flex-wrap:wrap; gap:0 1.25rem; }
.legal a{ display:inline-block; padding-block:.55rem; }
.legal a{ color:var(--text-muted); text-decoration:none; }
.legal a:hover{ color:var(--text); text-decoration:underline; }
@media (min-width:960px){
  .footer-inner{ grid-template-columns:1fr auto; align-items:center; }
  .footer-social{ grid-column:2; grid-row:1; }
}

/* ============================== Липкий призыв (мобильный) ============================== */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(11,9,7,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .4s var(--ease-out);
}
.sticky-cta.is-visible{ transform:none; }
@media (min-width:760px){ .sticky-cta{ display:none; } }
@media (max-width:759px){ body.has-sticky-cta .site-footer{ padding-bottom:6.5rem; } }

/* ============================== Контакты ============================== */
.contacts{ padding-block:clamp(3.5rem, 2rem + 6vw, 8rem); min-height:60vh; }
.contacts h1{ font-size:var(--fs-h1); max-width:14ch; margin-bottom:var(--space-7); }
.contacts .lede{ margin-bottom:var(--space-7); }

/* Кнопки в фирменных цветах соцсетей. Текст 18px bold — «крупный» по WCAG,
   белый на каждом из фонов даёт не меньше 3:1. */
.social-buttons{ display:grid; gap:12px; max-width:560px; }
@media (min-width:560px){ .social-buttons{ grid-template-columns:1fr 1fr; } }
.social-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:60px; padding:14px 22px; border-radius:var(--radius-lg);
  color:#fff; font-weight:600; font-size:18px; text-decoration:none;
  transition:transform .2s var(--ease-out), filter .2s, box-shadow .2s;
}
.social-btn:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 24px rgba(0,0,0,.45); }
.social-btn svg{ width:24px; height:24px; flex:none; }
.social-btn--telegram{ background:#229ED9; }
.social-btn--instagram{ background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.social-btn--vk{ background:#0077FF; }
.social-btn--youtube{ background:#FF0000; }

.contacts-mail{ margin-top:var(--space-7); color:var(--text-muted); }

/* Значки соцсетей в подвале: приглушённые, фирменный цвет при наведении */
.footer-social{ display:flex; gap:8px; }
.social-ico{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:var(--text-muted); border:1px solid var(--line-strong);
  transition:color .2s, background .2s, border-color .2s;
}
.social-ico svg{ width:18px; height:18px; }
.social-ico:hover{ color:#fff; border-color:transparent; }
.social-ico--telegram:hover{ background:#229ED9; }
.social-ico--instagram:hover{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.social-ico--vk:hover{ background:#0077FF; }
.social-ico--youtube:hover{ background:#FF0000; }