:root{
  /* Палитра в духе vitavirtus (тёмная сцена + бордово-красные акценты) */
  --bg: #070607;
  --bg-2: #0E0A0C;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --accent: #B10F2E;     /* основной акцент */
  --accent-2:#FF2D6D;    /* яркий акцент/свечения */
  --gold: #E0B35A;       /* легкий “премиум” штрих */
  --danger:#ff3b3b;

  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --glow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 80px rgba(177,15,46,.18);

  --h-font: "Playfair Display", serif;
  --b-font: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html,body{
  background: radial-gradient(1200px 700px at 70% -10%, rgba(255,45,109,.16), transparent 60%),
              radial-gradient(900px 600px at 10% 20%, rgba(177,15,46,.20), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
  font-family: var(--b-font);
}

/* Глобальные утилиты */
.container-narrow{ max-width: 1330px; }
.eyebrow{
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: .95rem;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  opacity: .95;
}
.eyebrow .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  box-shadow: 0 0 25px rgba(255,45,109,.35);
}

.h-title{
  font-family: var(--h-font);
  letter-spacing: .01em;
}

.btn-accent{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #8f0c24;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: #7b0a1f;
  border-radius: 999px;
  padding: .95rem 1.2rem;
  box-shadow: 0 18px 55px rgba(177,15,46,.30);
}
.btn-ghost{
  color: var(--text);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: .95rem 1.2rem;
}

.divider-soft{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* HERO (раскладка как на 2026: слева большой год, справа визуал) */
.hero{
    position: relative;
    overflow: hidden;
    padding: 56px 0 28px;
    background-size: cover;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0 100%), url(https://yuttaro.ru/course/magic/sl_121019_25870_67.jpg);
    background-attachment: fixed;
    height: auto;
}
.hero-card{
}
.hero-top{
  padding: 36px 28px;
}
.hero-year{
  font-size: clamp(64px, 9vw, 140px);
  line-height: .9;
  font-weight: 700;
  font-family: var(--h-font);
  margin: 10px 0 0;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.70), rgba(255,45,109,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(255,45,109,.10);
}
.hero-subtitle{
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 600;
  margin: 10px 0 12px;
  color: rgba(255,255,255,.92);
}
.hero-lead{
  color: var(--muted);
  max-width: 40ch;
  font-size: 1.02rem;
}

.hero-visual{
  position: relative;
  min-height: 320px;
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(280px 280px at 55% 35%, rgba(255,45,109,.35), transparent 60%),
    radial-gradient(420px 420px at 55% 45%, rgba(177,15,46,.35), transparent 62%),
    radial-gradient(420px 420px at 60% 40%, rgba(224,179,90,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  box-shadow: var(--glow);
  overflow: hidden;
}
/* “Солнце/планета” как в первом экране: можно заменить на картинку */
.hero-visual::before{
  content:"";
  position:absolute;
  right: -80px;
  top: -40px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,45,109,.75) 35%, rgba(177,15,46,.85) 60%, rgba(0,0,0,.0) 70%),
    radial-gradient(circle at 45% 55%, rgba(255,45,109,.35), transparent 60%);
  filter: blur(.2px);
  opacity: .9;
}
/* “силуэт/персона” placeholder */
.hero-visual::after{
  content:"";
  position:absolute;
  right: 26px;
  bottom: -10px;
  width: 220px;
  height: 340px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    radial-gradient(120px 160px at 60% 20%, rgba(255,45,109,.35), transparent 55%);
  border: 1px solid rgba(255,255,255,.10);
  transform: rotate(-2deg);
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
}

/* Второй ряд hero: текст слева/справа как в 2026 */
.hero-bottom{
  padding: 18px 28px 30px;
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
}
.hero-bottom p{
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
}
.hero-bottom .big-quote{
  font-family: var(--h-font);
  font-weight: 600;
  color: rgba(255,255,255,.92);
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Секции как на первом: заголовок по центру, затем карточки */
.section{
  padding: 56px 0;
}
.section-title{
  text-align: center;
  margin-bottom: 26px;
}
.section-title h2{
  font-family: 'Great Vibes', var(--h-font);
  font-size: clamp(41px, 3.4vw, 70px);
  margin: 0 0 10px;
}
.section-title p{
  margin: 0 auto;
  max-width: 70ch;
  color: var(--muted);
}

.card-soft{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Блок "Что ждёт тебя внутри?" — вертикальный список карточек (как на 2026) */
.inside-list .item{
  padding: 16px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.inside-list .item + .item{ margin-top: 14px; }
.inside-list .item:hover {
    background: rgba(172, 21, 31, .4);
    box-shadow: 0px 0px 45px 6px rgba(177, 15, 46, 0.5);
}

.badge-icon{
  width: 34px; height: 34px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,45,109,.55), rgba(177,15,46,.45));
  box-shadow: 0 16px 40px rgba(177,15,46,.25);
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}
.item h5{
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: .01em;
}
.item p{
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
}
.big {
    color: var(--text);
    margin: 0 0 4px;
    font-weight: 700;
    letter-spacing: .01em;
    font-size: 1.25rem;
}

/* "Ты научишься" — 3 пункта в линию (как на 2026) */
.learn-grid .learn{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  height: 100%;
}
.learn .star{
  font-size: 18px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(224,179,90,.18);
}

/* ===== Модалка оплаты (кастом) ===== */
body.is-modal-open{ overflow: hidden; }

.ym-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ym-modal.is-open{ display: flex; }

.ym-modal__dialog{
  width: min(560px, 100%);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(177, 15, 46, .30), rgba(177, 15, 46, .30));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
}

.ym-modal__close{
  position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 0;
    background: rgba(255, 255, 255, .0);
    color: var(--text);
    font-size: 46px;
    line-height: 0;
}
.ym-modal__close:hover{ background: rgba(255,255,255,.08); }

.ym-modal__head{ padding: 6px 6px 14px; }
.ym-modal__kicker{
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .88rem;
  text-transform: uppercase;
}
.ym-modal__title{
  margin: 6px 0 6px;
  font-size: 1.55rem;
}
.ym-modal__price{
  color: var(--muted);
  font-weight: 600;
}

.ym-form{ padding: 0 6px 6px; }
.ym-field{ margin-bottom: 12px; }
.ym-label{
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.85);
  font-weight: 700;
}
.ym-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding: 12px 14px;
  outline: none;
}
.ym-input:focus{
  border-color: rgba(255,45,109,.55);
  box-shadow: 0 0 0 3px rgba(255,45,109,.12);
}

.ym-checks{ margin: 10px 0 14px; display: grid; gap: 10px; }
.ym-check{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: .95rem;
}
.ym-check input{ margin-top: 3px; }

.ym-check a{
  color: #FF2D6D;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #FF2D6D;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.ym-check a:hover{
  color: #FF2D6D;
}

.ym-error{
  border: 1px solid rgba(255,59,59,.45);
  background: rgba(255,59,59,.08);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ym-success{
  border: 1px solid rgba(224,179,90,.40);
  background: rgba(224,179,90,.10);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* ===== Подвал ===== */
.magic-footer{
  margin-top: 28px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.magic-footer__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.magic-footer__left{
  color: rgba(255,255,255,.78);
  font-weight: 600;
}
.magic-footer__right{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.magic-footer__link{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  padding-bottom: 2px;
}
.magic-footer__link:hover{
  color: #fff;
  border-bottom-color: rgba(255,45,109,.75);
}
.magic-footer__note{
  margin-top: 10px;
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
    padding-top: 20px;
}
.magic-footer__note small{ font-size: inherit; }
.learn p{
  margin: 10px 0 0;
  color: var(--muted);
}

/* "Формат" — тёмная полоса с CTA */
.format-band{
  padding: 46px 0;
  background:
    radial-gradient(900px 420px at 50% 10%, rgba(255,45,109,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* "На марафоне ты сможешь" — 4 иконки (как на 2026) */
.can-grid .can{
  text-align: center;
  padding: 18px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  height: 100%;
}
.can .eye{
  width: 58px; height: 58px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 30%, rgba(255,45,109,.45), rgba(177,15,46,.40));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(177,15,46,.18);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.can h6{ margin: 0 0 6px; font-weight: 800; }
.can p{ margin: 0; color: var(--muted); font-size: .95rem; }

/* "Тарифы" — 2 карточки (как на 2026), но в гамме vitavirtus */
.pricing .plan{
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.plan.featured{
  background:
    radial-gradient(520px 240px at 30% 0%, rgba(255,45,109,.22), transparent 60%),
    radial-gradient(520px 240px at 70% 20%, rgba(177,15,46,.22), transparent 62%),
    rgba(255,255,255,.06);
  border-color: rgba(255,45,109,.35);
  box-shadow: 0 30px 95px rgba(177,15,46,.22);
}
.plan .name{
  font-family: var(--h-font);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
}
.plan .price{
  font-size: 2.1rem;
  font-weight: 800;
  margin: 8px 0 2px;
  letter-spacing: .01em;
}
.plan .old{
  color: rgba(255,255,255,.55);
  text-decoration: line-through;
  font-weight: 700;
}
.plan ul{
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.plan li{ margin: 8px 0; }
.plan .pay{
  margin-top: auto;
  width: 100%;
}

/* footer */
.footer{
  padding: 26px 0 40px;
  color: rgba(255,255,255,.55);
  font-size: .95rem;
}

/* Final CTA */
.cta-final{
  padding: 42px 0 50px;
  background:
    radial-gradient(900px 420px at 75% 0%, rgba(255,45,109,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.08);
}
.cta-card{
  display: inline-block;
  text-align: center;
  padding: 24px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
  backdrop-filter: saturate(120%) blur(6px);
}
.cta-card::before{
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(520px 220px at 15% 0%, rgba(255,45,109,.25), transparent 60%),
    radial-gradient(520px 220px at 85% 0%, rgba(177,15,46,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,45,109,.20), rgba(177,15,46,.15), rgba(224,179,90,.10));
  filter: blur(30px);
  z-index: -1;
  animation: glowShift 14s linear infinite;
}
.cta-title{ margin: 0 0 12px; font-weight: 100; font-size: clamp(41px, 3.6vw, 70px); letter-spacing: .01em; font-family: 'Great Vibes', var(--h-font); }
.cta-title .spark{ color: var(--accent-2); text-shadow: 0 0 22px rgba(255,45,109,.45); margin-right: 8px; line-height: 100px; }
.cta-line { color: var(--muted); margin: 8px 0; font-size: clamp(16px, 2.2vw, 20px); }
.cta-line.strong{ color: rgba(255,255,255,.92); font-weight: 700; }
.cta-line{ perspective: 600px; }
.cta-line .heart{ display:inline-block; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); transform-style: preserve-3d; animation: heart3d 8s ease-in-out infinite; }
.btn-cta-final{
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 22px 60px rgba(177,15,46,.30);
}
.btn-cta-final:hover{ transform: translateY(-1px) scale(1.02); }

/* Micro animations */
.cta-title .spark{ display:inline-block; transform-origin: center; animation: sparkPulse 2.8s ease-in-out infinite; }

@keyframes sparkPulse{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,45,109,0)); }
  50%{ transform: scale(1.25); filter: drop-shadow(0 0 18px rgba(255,45,109,.55)); }
}

@keyframes heart3d{
  0%{ transform: rotateY(0deg) translateZ(0); }
  50%{ transform: rotateY(180deg) translateZ(0); }
  100%{ transform: rotateY(360deg) translateZ(0); }
}

@keyframes glowShift{
  0%{ transform: translateX(-5%) translateY(0); opacity: .9; }
  50%{ transform: translateX(5%) translateY(-2%); opacity: 1; }
  100%{ transform: translateX(-5%) translateY(0); opacity: .9; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cta-title .spark, .cta-line .heart, .cta-card::before{ animation: none !important; }
}

/* FAQ */
.faq-list{ display: grid; gap: 12px; }
.faq-item{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.faq-question{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: transparent;
  border: 0; color: var(--text);
  text-align: left;
}
.faq-question .q{ color: #ff3350; font-weight: 800; }
.faq-question .text{ flex: 1; font-weight: 600; }
.faq-question .arrow{ width: 22px; height: 22px; display: inline-grid; place-items: center; }
.faq-question .arrow::before{ content: '▾'; color: #cc1b28; font-size: 18px; line-height: 1; }
.faq-item.is-open .faq-question .arrow::before{ content: '▴'; }
.faq-answer{
  padding: 0 18px 16px 42px;
  color: var(--muted);
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .35s ease;
}
.faq-item.is-open .faq-answer{ max-height: 500px; opacity: 1; }

/* Мелкие адаптивные правки */
@media (max-width: 991.98px){
  .hero-top{ padding: 26px 18px; }
  .hero-bottom{ padding: 16px 18px 22px; }
  .hero-visual{ min-height: 280px; }
}
@media (max-width: 575.98px){
  .hero-visual::after{ width: 180px; height: 300px; right: 16px; }
  .cta-title .spark { display: none;}
}

/* Banner-specific styles for new header */
.hero-content{ align-items: center; }
.hero-banner{ color:#fff; }
.magic-title{
  font-family: 'Great Vibes', var(--h-font);
  font-size: clamp(64px, 14vw, 180px);
  line-height: .8;
  font-weight: 400;
  color:#fff;
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.magic-sub{
  font-family: 'Manrope', var(--b-font);
  font-weight: 800;
  font-size: clamp(34px, 7vw, 75px);
  letter-spacing: .02em;
  color:#cc1b28;
  margin-top: 8px;
  position: relative;
  top: -50px;
left: 100px;
}
.magic-desc{
  margin: 18px 0 26px;
  max-width: 58ch;
  font-size: clamp(16px, 2.2vw, 22px);
  color: rgba(255,255,255,.92);
}
.btn-cta{
  display:inline-block;
  padding: clamp(14px, 2.2vw, 22px) clamp(24px, 4vw, 48px);
  border-radius: 16px;
  background: linear-gradient(180deg, #cc1b28, #a0141f);
  color:#fff; text-decoration:none; font-weight:800; font-size: clamp(18px, 3vw, 34px);
  box-shadow: 0 20px 50px rgba(172,21,31,.45);
}
.btn-cta:hover{ filter: brightness(1.05); }
.magic-instagram{ margin-top: 16px; color:#b31c24; font-weight:800; }
.magic-instagram small{ color: rgba(255,255,255,.85); font-weight:600; }
.magic-instagram .ig{ opacity:.75; font-weight:700; margin-right:8px; }

.hero-photo-wrap{ position:relative; display:flex; justify-content:flex-end; }
.hero-photo{ width: 100%; max-width: 520px; border-radius: 8px; box-shadow: 0 0 202px rgba(255, 45, 109, .45); }

@media (max-width: 991.98px){
  .magic-title{ font-size: clamp(56px, 18vw, 140px); }
  .magic-sub{ font-size: clamp(28px, 8vw, 72px); top: -20px; }
  .cta-title { line-height: 34px; }
}

/* Tagline (rotating phrases with shining effect) */
.tagline-section{ padding: 36px 0; text-align: center; height: 200px; margin-top: 70px;}
.tagline-wrap{ display:flex; justify-content:center; align-items:center; }
.shine-text{
  position: relative;
  display: inline-block;
  font-family: var(--b-font);
  font-weight: 700;
  font-size: clamp(18px, 2.8vw, 24px);
  max-width: 1000px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #ffffff, rgba(255,255,255,0));
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shine 5s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: opacity .8s ease, transform .8s ease;
}
/* Fade state for smooth text change */
.shine-text.is-fading{ opacity: 0; transform: translateY(6px); }
@keyframes shine {
  0% { background-position: -500%; }
  100% { background-position: 500%; }
}