/* Дизайн-система «Анастасия Человечкова», тема «Ночь». Одна нить, много воздуха, одна главная кнопка на экран. */
:root {
  --surface: #0F1A33; --surface-raised: #16244A; --tint: #1B2A4D;
  --line: #2E4170; --line-strong: #6476A3;
  --ink: #F3F5FA; --ink-muted: #AEB8CF;
  --thread: #A9BDF0; --thread-hover: #C6D4F6; --on-thread: #0F1A33; --thread-soft: #24365F;
  --care: #E3CDA4;
  --font-display: "Cormorant Garamond", "PT Serif", Georgia, serif;
  --font-sans: Manrope, "Segoe UI", system-ui, sans-serif;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 10px; --radius-pill: 999px;
  --thread-weight: 1.2px;
  --wrap: 1120px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/26px var(--font-sans); }
img, svg { max-width: 100%; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* типографика из системы */
.display-xl { font: 500 56px/60px var(--font-display); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.display-l { font: 500 40px/46px var(--font-display); margin: 0; text-wrap: balance; }
.display-m { font: 500 28px/34px var(--font-display); margin: 0; }
.quote { font: 400 26px/34px var(--font-display); margin: 0; }
.lead { font-size: 18px; line-height: 30px; margin: 0; }
.small { font-size: 14px; line-height: 22px; }
.eyebrow { font: 500 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--thread); margin: 0; }
.muted { color: var(--ink-muted); }

/* нить */
.th { fill: none; stroke: var(--thread); stroke-width: var(--thread-weight); stroke-linecap: round; stroke-linejoin: round; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); font: 500 15px/20px var(--font-sans); border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; cursor: pointer; }
.btn-primary { background: var(--thread); color: var(--on-thread); }
.btn-primary:hover { background: var(--thread-hover); }
.btn-quiet { color: var(--thread); border-color: var(--thread); background: transparent; }
.btn-quiet:hover { background: var(--thread-soft); }
:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; border-radius: 4px; }

/* шапка */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--surface); z-index: 20; }
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 22px/1 var(--font-display); }
.nav { display: flex; gap: var(--space-6); font-size: 14px; color: var(--ink-muted); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--ink); }
.header .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* первый экран */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding-top: 72px; padding-bottom: 56px; }
.hero .eyebrow { margin-bottom: var(--space-4); }
.hero .lead { margin: var(--space-6) 0 var(--space-8); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-art svg { width: 100%; height: auto; display: block; }
.draw path { stroke-dasharray: 1600; stroke-dashoffset: 0; animation: draw 3.2s ease-out both; }
@keyframes draw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw path { animation: none; } html { scroll-behavior: auto; } .btn { transition: none; } }

/* помощь */
.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: 16px 20px; background: var(--tint); border-radius: var(--radius-md); font-size: 15px; line-height: 24px; }
.notice svg { flex: none; color: var(--care); margin-top: 1px; }
.notice b { font-weight: 500; }

/* разделы */
section { scroll-margin-top: 80px; }
.section { padding: var(--space-16) 0; }
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-12); max-width: 40em; }
.divider { display: block; width: 220px; height: 24px; margin-top: var(--space-2); }

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.about p { margin: 0 0 var(--space-4); max-width: 34em; }
.about-card { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.facts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); }
.facts svg { color: var(--thread); margin-top: 3px; }

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.topic { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.topic h3 { font: 500 24px/30px var(--font-display); margin: 0; }
.topic p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); counter-reset: step; }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: var(--thread-weight) solid var(--thread); }
.steps li::before { content: counter(step); font: 500 40px/1 var(--font-display); color: var(--thread); }
.steps h3 { font: 500 24px/30px var(--font-display); margin: 0; }
.steps p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }

.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.format { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.format h3 { font: 500 24px/30px var(--font-display); margin: 0; }
.format p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }

.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 20px 0; font: 500 22px/28px var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--thread); border-bottom: 1.5px solid var(--thread); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq p { margin: 0 0 22px; color: var(--ink-muted); max-width: 40em; }

.contact { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-12); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.contact .lead { margin: var(--space-4) 0 0; }
.contact-list { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-list .btn { width: 100%; }
.contact-note { margin: var(--space-2) 0 0; text-align: center; }

.footer { border-top: 1px solid var(--line); padding: var(--space-12) 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); }
.footer .logo { color: var(--ink); margin-bottom: var(--space-3); }

@media (max-width: 960px) {
  .nav { display: none; }
  .hero .wrap, .about, .contact { grid-template-columns: 1fr; }
  .hero .wrap { padding-top: 48px; }
  .topics, .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .display-xl { font-size: 38px; line-height: 44px; }
  .display-l { font-size: 32px; line-height: 38px; }
  .topics, .formats, .steps { grid-template-columns: 1fr; }
  .section { padding: var(--space-12) 0; }
  .contact { padding: var(--space-8) var(--space-6); }
  .header .btn { display: none; }
  .actions .btn { width: 100%; }
}

/* отзывы: раздел появляется, только когда в списке есть настоящие отзывы */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.review { margin: 0; background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.review blockquote { margin: 0; font: 400 22px/30px var(--font-display); }
.review figcaption { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.reviews-note { margin: var(--space-6) 0 0; max-width: 40em; }

/* блог: карточки статей */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.post-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.post-card:hover { border-color: var(--thread); background: var(--surface-raised); }
.post-card h3 { font: 500 24px/30px var(--font-display); margin: 0; }
.post-card p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.post-card .more { margin-top: auto; padding-top: var(--space-2); color: var(--thread); font-size: 14px; font-weight: 500; }
.section-foot { margin-top: var(--space-8); }

/* статья */
.article { padding: 56px 0 var(--space-16); }
.article .wrap { max-width: 760px; }
.crumbs { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--space-6); }
.crumbs a { color: var(--thread); text-decoration: none; }
.article h1 { margin: var(--space-3) 0 var(--space-4); }
.article .meta { color: var(--ink-muted); font-size: 14px; margin: 0 0 var(--space-8); }
.prose { font-size: 17px; line-height: 29px; }
.prose p, .prose ul, .prose ol { margin: 0 0 20px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose h2 { font: 500 30px/36px var(--font-display); margin: 40px 0 16px; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { color: var(--thread); text-underline-offset: 3px; }
.article .notice { margin: var(--space-8) 0; }
.article-cta { margin-top: var(--space-12); padding: var(--space-8); background: var(--surface-raised); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.article-cta p { margin: 0; font: 500 24px/30px var(--font-display); max-width: 22em; }

@media (max-width: 960px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } .article-cta .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .post-card { transition: none; } }