/* ===== VetaSoul · дизайн-система по скиллам landing-page-design + redesign-existing-projects (elayadesign) =====
   Подключается последним и перекрывает старые слои. Правила: один шрифт Manrope, вес не выше 700, без курсива,
   плоские фоны (градиент только на тексте главного заголовка), один приглушённый акцент, шкала Tailwind,
   отступы 0/2/4/8/12/16/24/32/40/48/64/80/96, плавная кривая cubic-bezier(.22,1,.36,1). */
:root {
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--font); --body: var(--font);

  /* одна тёплая серая семья (stone) */
  --bg: #ffffff;
  --canvas: #ffffff;
  --surface: #f5f5f4;
  --surface-2: #e7e5e4;
  --hairline: #e7e5e4;
  --ink: #0c0a09;
  --stone: #44403c;
  --ash: #78716c;
  --mute: #a8a29e;
  --on-dark: #ffffff;

  /* один акцент: приглушённая роза (насыщенность ~35%) */
  --accent: #9e4f5c;
  --accent-soft: #f4e9ea;

  /* кнопки — чёрные, акцент только для меток и мелких выделений */
  --action: #0c0a09;
  --action-hover: #292524;
  --on-action: #ffffff;

  /* все старые пастели и «стикеры» сводим к нейтральным поверхностям и одному акценту */
  --peach: var(--surface); --peach-soft: var(--bg);
  --tint-rose: var(--surface); --tint-mint: var(--surface); --tint-lavender: var(--surface); --tint-sky: var(--surface); --tint-yellow: var(--surface);
  --st-sky: var(--accent); --st-purple: var(--accent); --st-pink: var(--accent); --st-orange: var(--accent); --st-teal: var(--accent); --st-green: var(--accent);
  --st-purple-deep: var(--ink); --night: var(--bg); --espresso: var(--ink);
  --clay: var(--accent); --gold: var(--accent); --ochre: var(--accent); --gold-pale: var(--surface-2); --gold-deep: var(--accent);
  --sage: var(--accent); --sage-pale: var(--surface); --olive: var(--stone);

  /* радиусы — шкала Tailwind */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;
  /* отступы — только из шкалы */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 80px; --s-9: 96px;
  --wrap: 1200px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  /* тени с оттенком фона, один источник света сверху */
  --shadow: 0 1px 2px rgba(68, 64, 60, .06), 0 8px 24px rgba(68, 64, 60, .06);
  --shadow-2: 0 2px 4px rgba(68, 64, 60, .06), 0 24px 48px rgba(68, 64, 60, .10);
}

/* ---------- основа ---------- */
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--stone); font: 400 16px/24px var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
*, *::before, *::after { background-image: none !important; font-style: normal !important; }
em, i, cite, blockquote { font-style: normal !important; }
b, strong { font-weight: 600; }
::selection { background: var(--accent-soft); color: var(--ink); }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: var(--r-md); transition: transform .3s var(--ease); }
.skip:focus { transform: translateY(64px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- типографика: именованные стили ---------- */
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { font-size: 60px; line-height: 60px; letter-spacing: -.04em; }                 /* Heading 1 */
h2 { font-size: 48px; line-height: 48px; letter-spacing: -.035em; }                /* Heading 2 */
h3 { font-size: 24px; line-height: 32px; letter-spacing: -.02em; }                 /* Heading 5 */
p, li { text-wrap: pretty; }
.lead { font: 400 18px/28px var(--font); color: var(--ash); letter-spacing: 0; max-width: 65ch; }
.muted { color: var(--ash); }
.eyebrow, .lv-num { display: inline-block; font: 600 12px/16px var(--font); letter-spacing: .02em; text-transform: none; color: var(--accent);
  background: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 16px; }
@media (max-width: 760px) {
  h1 { font-size: 36px; line-height: 40px; }
  h2 { font-size: 30px; line-height: 36px; }
  h3 { font-size: 20px; line-height: 28px; }
  .lead { font-size: 16px; line-height: 24px; }
}
.blk__head h2, .lv-head h2, .lv-final h2, .af-week h2, .formsplit__in h2 { font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -.035em; }
.lv-hero h1, .af-hero h1 { font-size: 72px; line-height: 72px; font-weight: 600; letter-spacing: -.045em; }
@media (max-width: 760px) {
  .blk__head h2, .lv-head h2, .lv-final h2, .af-week h2, .formsplit__in h2 { font-size: 30px; line-height: 36px; }
  .lv-hero h1, .af-hero h1 { font-size: 48px; line-height: 48px; }
}
.blk__head p, .blk__head em { font-size: 18px; line-height: 28px; color: var(--ash); }

/* главный заголовок первого экрана: градиент только на тексте */
main > section:first-of-type h1 { background-image: linear-gradient(90deg, #000000, #666666) !important; -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent; max-width: 680px; }
main > section:first-of-type h1 * { -webkit-text-fill-color: transparent; color: transparent !important; }
main > section:first-of-type .lead { max-width: 680px; }

/* ---------- раскладка ---------- */
.wrap { max-width: var(--wrap); padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
.sec, .lv-sec { padding: 96px 0 112px; }
@media (max-width: 760px) { .sec, .lv-sec { padding: 64px 0 80px; } }
.sec--peach, .lv-sec--alt, .sec--dark { background: var(--surface); color: var(--stone); }
.sec--dark h2, .sec--dark h3 { color: var(--ink); }
.sec--dark .muted, .sec--dark .eyebrow { color: var(--ash); }
.grid { gap: 16px; }

/* ---------- кнопки ---------- */
.btn, .lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/24px var(--font); padding: 8px 12px; min-height: 40px;
  border-radius: var(--r-md); background: var(--action); color: var(--on-action); border: 1px solid var(--action); box-shadow: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .5s var(--ease), border-color .3s var(--ease); }
.btn:hover, .lv-btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; transform: translateY(-1px); }
.btn:active, .lv-btn:active { transform: scale(.98); }
.lv-btn { padding: 12px 16px; min-height: 48px; }                                  /* крупная главная кнопка */
.lv-btn span { transition: transform .5s var(--ease); }
.btn--ghost, .btn--light { background: transparent; color: var(--ink); border-color: var(--surface-2); box-shadow: none; }
.btn--ghost:hover, .btn--light:hover { background: var(--surface); color: var(--ink); border-color: var(--surface-2); }
.btn--sm { font: 600 14px/20px var(--font); padding: 8px 12px; min-height: 36px; border-radius: var(--r-md); }
.btns { gap: 12px; }

/* ---------- карточки: только фон, без рамки и тени ---------- */
.card, .lv-tile, .lv-month, .lv-week, .lv-price, .lv-path, .af-get, .af-month, .af-diff div, .af-mood, .af-pain, .af-steps li, .af-weeklist li, .lv-results div, .lv-not, .lv-bonus {
  background: var(--surface) !important; border: 0 !important; box-shadow: none !important; border-radius: var(--r-xl); }
.sec--peach .card, .lv-sec--alt .card, .lv-sec--alt .lv-tile, .lv-sec--alt .lv-month, .lv-sec--alt .lv-week, .lv-sec--alt .lv-price, .lv-sec--alt .lv-path,
.lv-sec--alt .af-get, .lv-sec--alt .af-month, .lv-sec--alt .af-diff div, .lv-sec--alt .af-mood, .lv-sec--alt .af-pain, .lv-sec--alt .af-steps li, .lv-sec--alt .af-weeklist li, .lv-sec--alt .lv-results div {
  background: var(--bg) !important; }
.card--link, .lv-tile, .af-mood, .lv-month { transition: transform .5s var(--ease), background-color .3s var(--ease); }
.card--link:hover, .lv-tile:hover, .af-mood:hover { transform: translateY(-2px); box-shadow: none; }
.card--link:active, .af-mood:active { transform: scale(.98); }
.card__img { border-radius: var(--r-lg); margin: -16px -16px 16px; background: var(--surface-2); }
.card { padding: 24px; }
.tag, .tag--sage, .tag--line { background: var(--bg); color: var(--stone); border: 0; border-radius: var(--r-sm); font: 500 12px/16px var(--font); padding: 4px 8px; }
.month__n, .ic__n, .lv-month span, .lv-tile span, .af-month summary span { color: var(--accent) !important; font-weight: 600 !important; }
.grid .month .month__n { color: var(--accent) !important; font-size: 30px; line-height: 36px; }
.month__t { font: 600 20px/28px var(--font); color: var(--ink); }
.ic__n { background: var(--ink) !important; color: #fff !important; }
.ic__line { background: var(--accent); height: 2px; }
.ic__img, .hero__img, .split__img img, .listimg__img img, .around__img img, .blk__wide-img, .lv-hero__img img, .lv-author__img img { border-radius: var(--r-3xl) !important; box-shadow: none !important; }

/* ---------- формы ---------- */
.form label { font: 500 14px/20px var(--font); color: var(--ink); }
.form input, .form select, .form textarea, .input { font: 400 16px/24px var(--font); padding: 8px 12px; border: 1px solid var(--surface-2); border-radius: var(--r-md); background: var(--bg);
  transition: border-color .3s var(--ease); }
.form input:focus, .form select:focus, .form textarea:focus, .input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.form input:user-invalid, .form textarea:user-invalid { border-color: #b4232c; }
.form.card { background: var(--bg) !important; padding: 32px; border-radius: var(--r-3xl); }
#zayavka { background: var(--surface); }
.notice { border-radius: var(--r-md); }

/* ---------- плавающее меню ---------- */
.top { position: sticky; top: 12px; z-index: 50; width: fit-content; max-width: calc(100% - 24px); margin: 12px auto 0; border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(231, 229, 228, .9); box-shadow: 0 8px 24px rgba(68, 64, 60, .06); }
.top__in { height: 56px; gap: 24px; padding: 0 8px 0 16px; max-width: none; }
.logo { font: 700 20px/28px var(--font); letter-spacing: -.03em; color: var(--ink); }
.logo b { color: var(--accent); font-weight: 700; }
.mnav__btn { font: 500 14px/20px var(--font); color: var(--stone); border-radius: var(--r-md); padding: 8px 12px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.mnav__btn:hover, .mnav__item.open .mnav__btn { background: var(--surface); color: var(--ink); }
.mnav__btn svg { transition: transform .5s var(--ease); }
.mnav__item.open .mnav__btn svg { transform: rotate(180deg); }
.mega { top: calc(100% + 8px); border-radius: var(--r-3xl); border: 1px solid var(--hairline); box-shadow: var(--shadow-2); background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: opacity .3s var(--ease), transform .5s var(--ease), visibility .3s; overflow: hidden; }
.mega .wrap { padding: 0 24px; }
.mega__i, .drawer__i { color: var(--ink) !important; background: var(--surface) !important; border-radius: var(--r-md) !important; }
.mega__a:hover { background: var(--surface); }
.mega__a b, .mega__topi b, .mega__feat b { font-weight: 600; color: var(--ink); }
.mega__gh { font: 600 12px/16px var(--font); color: var(--ash); text-transform: none; letter-spacing: .02em; }
.mega__feat, .mega__top { background: var(--surface) !important; border-radius: var(--r-xl); }
.mega__ey { color: var(--accent); background: none !important; padding: 0 !important; }
.top__free { font: 600 14px/20px var(--font); color: var(--ink); background: var(--surface); border-radius: var(--r-md); padding: 8px 12px; transition: background-color .3s var(--ease); }
.top__free:hover { background: var(--surface-2); color: var(--ink); }
.top__cab { color: var(--ink); }
.readbar { background: var(--ink) !important; height: 2px; }

/* бургер: две линии, превращаются в крестик */
.top .burger { width: 40px; height: 40px; border-radius: var(--r-md); position: relative; font-size: 0; color: transparent; }
.top .burger::before, .top .burger::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .5s var(--ease); }
.top .burger::before { transform: translateY(-4px); } .top .burger::after { transform: translateY(4px); }
body.menu-open .top { z-index: 90; }
body.menu-open .top .burger::before { transform: rotate(45deg); }
body.menu-open .top .burger::after { transform: rotate(-45deg); }

/* мобильное меню: панель на всю высоту, пункты появляются по очереди */
.drawer { width: 100%; max-width: none; padding: 96px 24px 48px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: none; transform: none; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.drawer__head { display: none; }
body.menu-open .drawer { opacity: 1; visibility: visible; }
.drawer > * { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
body.menu-open .drawer > * { opacity: 1; transform: none; }
body.menu-open .drawer > :nth-child(2) { transition-delay: 60ms; } body.menu-open .drawer > :nth-child(3) { transition-delay: 120ms; }
body.menu-open .drawer > :nth-child(4) { transition-delay: 180ms; } body.menu-open .drawer > :nth-child(5) { transition-delay: 240ms; }
body.menu-open .drawer > :nth-child(6) { transition-delay: 300ms; } body.menu-open .drawer > :nth-child(n+7) { transition-delay: 360ms; }
.drawer__sec summary { font: 600 20px/28px var(--font); color: var(--ink); padding: 16px 0; }
.drawer__a { font: 500 16px/24px var(--font); }
.scrim { display: none; }

/* ---------- появление при прокрутке ---------- */
.rv { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.rv-img { transition: transform .7s var(--ease), opacity .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .rv { transform: none; transition: opacity .3s linear; }
  *, *::before, *::after { animation: none !important; }
}

/* ---------- большой блок со словами, которые проявляются ---------- */
.tl { padding: 128px 0; }
.tl__text { font: 600 60px/60px var(--font); letter-spacing: -.04em; color: var(--ink); max-width: 880px; margin: 0; text-wrap: balance; }
.tl__text .w { color: rgba(12, 10, 9, .28); transition: color .5s var(--ease); }
.tl__text .w.on { color: var(--ink); }
.tl__by { margin-top: 32px; font: 500 14px/20px var(--font); color: var(--ash); display: flex; align-items: center; gap: 12px; }
.tl__by img { width: 40px; height: 40px; border-radius: var(--r-lg); object-fit: cover; }
@media (max-width: 760px) { .tl { padding: 80px 0; } .tl__text { font-size: 36px; line-height: 40px; } }

/* ---------- первый экран главной: больше не тёмный ---------- */
.night, .hero.night { background: var(--bg) !important; color: var(--stone); }
.night h1, .night h2, .night h3 { color: var(--ink); }
.night .lead, .night p { color: var(--ash); }
.night__stars { display: none; }
.float { background: rgba(255, 255, 255, .86) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--hairline); box-shadow: var(--shadow) !important; color: var(--ink); border-radius: var(--r-xl) !important; }
.float i { display: none; }
.trust { background: var(--surface) !important; border: 0 !important; border-radius: var(--r-full); }
.trust img { border-radius: var(--r-full); }

/* ---------- подвал: светлый, без «фермы ссылок» ---------- */
.foot { background: var(--surface); color: var(--ash); padding: 64px 0 32px; font: 400 14px/20px var(--font); }
.foot a { color: var(--stone); transition: color .3s var(--ease); }
.foot a:hover { color: var(--ink); }
.foot .logo { color: var(--ink); }
.foot .eyebrow { color: var(--ink); }
.foot__bottom { border-top: 1px solid var(--surface-2); color: var(--ash); }

/* ---------- лендинги v3 и «Забота о себе»: плоско и спокойно ---------- */
.lv-hero, .af-hero, .lv-final { background: var(--bg) !important; }
.lv-hero::before, .lv-hero::after { display: none !important; }
.lv-final { background: var(--surface) !important; padding: 128px 0; }
.lv-words text { fill: var(--accent) !important; }
.lv-ring { background: var(--bg) !important; border: 1px solid var(--surface-2); animation: none !important; }
.lv-ring b { animation: none !important; color: var(--ink); }
.lv-path--now, .lv-price--hl { background: var(--ink) !important; color: #d6d3d1 !important; transform: none !important; }
.lv-path--now h3, .lv-price--hl h3, .lv-price--hl .lv-price__sum, .lv-path--now b { color: #fff !important; }
.lv-price--hl li, .lv-price--hl .lv-price__n, .lv-price--hl s { color: #d6d3d1 !important; }
.lv-price--hl li::before { color: #fff !important; }
.lv-price--hl .btn { background: #fff; color: var(--ink); border-color: #fff; }
.lv-price__sum { font-weight: 600 !important; font-size: 36px !important; line-height: 40px !important; letter-spacing: -.03em; }
.lv-stat b { font-weight: 600 !important; letter-spacing: -.05em; }
.lv-stat--hl b { background: var(--ink) !important; }
.lv-week__n { background: var(--bg) !important; color: var(--ink) !important; }
.lv-q summary { font: 500 18px/28px var(--font); }
.lv-tile b, .lv-month b { font-weight: 600; color: var(--ink); }
.stickycta { background: rgba(255, 255, 255, .86) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--hairline) !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-2) !important; }

/* ---------- база знаний: тетрадь в Telegram ---------- */
.kb__magnet { background: var(--surface) !important; border: 0 !important; box-shadow: none !important; border-radius: var(--r-3xl); padding: 24px; }
.kb__magnet h3 { font: 600 20px/28px var(--font); }
.kb__steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: k; display: grid; gap: 8px; }
.kb__steps li { counter-increment: k; display: flex; gap: 12px; align-items: center; font: 500 14px/20px var(--font); color: var(--stone); }
.kb__steps li::before { content: counter(k); flex: 0 0 24px; height: 24px; border-radius: var(--r-md); background: var(--bg); color: var(--ink); display: grid; place-items: center; font: 600 12px/16px var(--font); }

/* ---------- лендинги: лента фотографий ---------- */
.lv-gal { padding-bottom: 96px; }
.lv-gal__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 22vw); gap: 16px; overflow-x: auto; padding: 0 max(24px, calc((100vw - 1200px) / 2 + 24px)) 16px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lv-gal__f { margin: 0; scroll-snap-align: start; display: grid; gap: 8px; align-content: start; }
.lv-gal__f img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-3xl); transition: transform .5s var(--ease); }
.lv-gal__f--1 img { aspect-ratio: 3 / 4; } .lv-gal__f--2 { padding-top: 48px; }
.lv-gal__f:hover img { transform: scale(1.02); }
.lv-gal__f figcaption { font: 500 14px/20px var(--font); color: var(--ash); }
@media (max-width: 640px) { .lv-gal__strip { grid-auto-columns: 72vw; padding: 0 16px 16px; } .lv-gal__f--2 { padding-top: 0; } }

/* ---------- плашка cookies ---------- */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 70; max-width: 420px; display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--hairline); box-shadow: var(--shadow-2); }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font: 400 14px/20px var(--font); color: var(--stone); }
.cookie a { color: var(--ink); }
@media (max-width: 640px) { .cookie { left: 8px; right: 8px; bottom: 8px; max-width: none; } }