/* Одна спокойная колонка, широкие секции, тёплая «бумажная» карточка только для курса и цен. Палитра в тон обложке курса: пудра, слива, роза. */
:root {
  --bg: #F7F1EF;        /* пудровый светлый */
  --surface: #FDF9F8;
  --ink: #2A1F22;
  --muted: #6E5E62;
  --line: #E8DCD9;
  --accent: #6B2E45;    /* слива */
  --accent-ink: #FFF7F8;
  --clay: #B8405F;      /* роза, только для цен и выделений */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1517; --surface: #261C1F; --ink: #F1E7E9; --muted: #B9A7AC;
    --line: #3B2D31; --accent: #E59BB3; --accent-ink: #2A1119; --clay: #F08AA5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1C1517; --surface: #261C1F; --ink: #F1E7E9; --muted: #B9A7AC;
    --line: #3B2D31; --accent: #E59BB3; --accent-ink: #2A1119; --clay: #F08AA5;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
}
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.prose { max-width: 64ch; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
.ph { background: color-mix(in srgb, var(--clay) 16%, transparent); color: var(--ink); padding: 0 .25em; border-radius: 3px; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--step--1); }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav { display: none; } }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: var(--step--1); border: 1px solid var(--accent); }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* sections */
section { padding-block: 64px; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.stack { display: grid; gap: 18px; }
.lead { font-size: var(--step-1); color: var(--muted); font-family: var(--font-display); }

.hero { display: grid; grid-template-columns: 1.3fr .9fr; gap: 40px; align-items: center; padding-block: 56px; }
.hero > * { min-width: 0; }
.portrait { aspect-ratio: 4/5; max-width: 100%; border-radius: 200px 200px 16px 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--surface)), var(--surface)); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: var(--step--1); text-align: center; padding: 20px; }
.hero .quiet { color: var(--muted); font-style: italic; font-family: var(--font-display); font-size: var(--step-1); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .portrait { max-width: 320px; } }

.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.topic { padding: 22px 18px 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; min-width: 0; }
.topic p { color: var(--muted); font-size: var(--step--1); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; counter-reset: s; }
.step { display: grid; gap: 8px; min-width: 0; }
.step::before { counter-increment: s; content: "Шаг " counter(s); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }
.step p { color: var(--muted); }

.offer { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.offer > * { min-width: 0; }
@media (max-width: 760px) { .offer { grid-template-columns: 1fr; padding: 22px; } }
.price { font-family: var(--font-display); font-size: var(--step-2); color: var(--clay); font-variant-numeric: tabular-nums; }
.strike { text-decoration: line-through; color: var(--muted); font-size: var(--step-1); margin-right: 8px; }

.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list li { padding-left: 22px; position: relative; }
.list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 1px; background: var(--clay); }
.list.no li::before { background: var(--muted); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cols > * { min-width: 0; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

.faq details { border-top: 1px solid var(--line); padding-block: 16px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--clay); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin-top: 10px; max-width: 64ch; }

.prices { display: grid; gap: 0; border-top: 1px solid var(--line); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.row .price { font-size: var(--step-1); }
.note { font-size: var(--step--1); color: var(--muted); }

.calc { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.calc div { display: flex; justify-content: space-between; gap: 12px; }
.calc .total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }

.final { text-align: left; }
footer { padding-block: 40px; font-size: var(--step--1); color: var(--muted); display: grid; gap: 10px; }
footer a { color: var(--muted); }

/* фото и обложка */
.portrait.photo { padding: 0; overflow: hidden; background: var(--surface); }
.portrait.photo img, .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover { aspect-ratio: 27/20; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.gift { border: 1px dashed var(--clay); border-radius: 20px; padding: 28px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.gift > * { min-width: 0; }
@media (max-width: 760px) { .gift { grid-template-columns: 1fr; padding: 20px; } }
.gift-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: g; }
.gift-steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; }
.gift-steps li::before { counter-increment: g; content: counter(g); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--clay) 16%, transparent); color: var(--clay); font-weight: 700; font-size: var(--step--1); }
.gift-steps span { color: var(--muted); font-size: var(--step--1); }
.gift-btn { background: var(--clay); border-color: var(--clay); font-size: var(--step-0); padding: 14px 24px; transition: transform .2s ease; }
.gift-btn:hover { transform: translateY(-2px); }
.gift-ico { display: inline-block; transform-origin: 50% 80%; animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .gift-ico { animation: none; } .gift-btn { transition: none; } .gift-btn:hover { transform: none; } }
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.part { display: grid; gap: 10px; align-content: start; min-width: 0; }
.part .tag { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }
.part p { color: var(--muted); }
.help { font-size: var(--step--1); }

/* ===== Моушен ===== */
/* Каракули в духе обложки: розовый «мел» вокруг фото, рисуются линией и потом медленно плавают. */
.hero .stack > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero .stack > *:nth-child(2) { animation-delay: .08s; }
.hero .stack > *:nth-child(3) { animation-delay: .16s; }
.hero .stack > *:nth-child(4) { animation-delay: .24s; }
.hero .stack > *:nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.mark { font-style: normal; background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--clay) 30%, transparent) 62%); background-repeat: no-repeat; background-size: 0% 100%; animation: marker 1s .7s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes marker { to { background-size: 100% 100%; } }

.art { position: relative; min-width: 0; }
.art .portrait, .art .cover { animation: unveil 1.1s .15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes unveil { from { clip-path: inset(100% 0 0 0 round 200px 200px 16px 16px); } to { clip-path: inset(0 0 0 0 round 0); } }
.art .cover { animation-name: unveil-c; }
@keyframes unveil-c { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.doodle { position: absolute; width: 64px; height: 64px; fill: none; stroke: var(--clay); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.doodle path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 1.4s 1s ease forwards; }
.doodle.d1 { top: -14px; left: -22px; animation: float 6s 2s ease-in-out infinite; }
.doodle.d2 { top: 12%; right: -26px; width: 54px; animation: float 7s 2.4s ease-in-out infinite reverse; }
.doodle.d2 path { animation-delay: 1.3s; }
.doodle.d3 { bottom: 8%; left: -30px; width: 46px; animation: float 5s 2.8s ease-in-out infinite; }
.doodle.d3 path { animation-delay: 1.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(4deg); } }
@media (max-width: 760px) { .doodle.d1 { left: 0; } .doodle.d2 { right: 0; } .doodle.d3 { left: 0; } .cover ~ .doodle { display: none; } }

/* Бегущая строка с фразами-разрешениями */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding-block: 14px; }
.ticker-track { display: flex; width: max-content; animation: tick 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); white-space: nowrap; padding-inline: 18px; color: var(--ink); }
.ticker span::after { content: "♡"; font-style: normal; color: var(--clay); margin-left: 36px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Появление при прокрутке: прячется только то, что ниже первого экрана, и только когда работает скрипт */
.reveal-pre { opacity: 0; transform: translateY(28px); }
.reveal-in { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }

/* Карточки и кнопки */
.topic { position: relative; transition: transform .3s ease; }
.topic::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--clay); transition: width .4s ease; }
.topic:hover { transform: translateY(-3px); }
.topic:hover::after { width: 100%; }
.btn { position: relative; overflow: hidden; transition: transform .2s ease, filter .2s ease; }
.btn:not(.ghost)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); }
.btn:not(.ghost):hover::before { transform: translateX(120%); transition: transform .7s ease; }
.btn:active { transform: scale(.97); }
.faq details p { animation: none; }
.faq details[open] p { animation: rise .35s ease both; }
.step::before { transition: letter-spacing .3s ease; }
.step:hover::before { letter-spacing: .2em; }

@media (prefers-reduced-motion: reduce) {
  .hero .stack > *, .art .portrait, .art .cover, .doodle, .doodle path, .mark, .ticker-track, .faq details[open] p { animation: none !important; }
  .doodle path { stroke-dashoffset: 0; }
  .mark { background-size: 100% 100%; }
  .reveal-pre { opacity: 1; transform: none; }
  .topic, .topic::after, .btn { transition: none; }
}

/* ===== Факты в шапке, «Как я работаю», тест ===== */
.facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.facts li { display: grid; gap: 2px; }
.facts b { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); color: var(--clay); line-height: 1; font-variant-numeric: tabular-nums; }
.facts span { font-size: var(--step--1); color: var(--muted); max-width: 18ch; }

.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.m { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; transition: transform .3s ease, border-color .3s ease; }
.m:hover { transform: translateY(-4px); border-color: var(--clay); }
.m-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--clay) 16%, transparent); color: var(--clay); font-weight: 700; }
.m p { color: var(--muted); font-size: var(--step--1); }

.quiz { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 32px; align-items: start; }
.quiz > * { min-width: 0; }
@media (max-width: 760px) { .quiz { grid-template-columns: 1fr; padding: 22px; gap: 22px; } }
.quiz-box { min-height: 320px; }
.quiz-step { display: grid; gap: 16px; animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
.quiz-count { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.quiz-progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.quiz-progress i { display: block; height: 100%; width: 0; background: var(--clay); transition: width .5s ease; }
.quiz-q { font-size: var(--step-1); }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opt { text-align: left; font: inherit; font-size: var(--step-0); line-height: 1.4; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.quiz-opt:hover:not(:disabled) { border-color: var(--clay); transform: translateX(4px); }
.quiz-opt.picked { background: color-mix(in srgb, var(--clay) 14%, var(--bg)); border-color: var(--clay); }
.quiz-opt:disabled { cursor: default; }
.quiz-back { justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-size: var(--step--1); color: var(--muted); text-decoration: underline; cursor: pointer; }
.quiz-res .btns button { font: inherit; font-size: var(--step--1); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .quiz-step { animation: none; }
  .quiz-progress i, .quiz-opt, .m { transition: none; }
  .quiz-opt:hover:not(:disabled), .m:hover { transform: none; }
}