/* Страница «О DreamAtlas» в стиле страниц меню: арт «Зеркало сна» фоном (glass.css), стеклянные карточки,
   заголовки с градиентом, акценты голубой → фиолетовый. Подробности — docs/ABOUT_PAGE.md */
.about { --about-grad: linear-gradient(135deg, #0ea5e9, #8b5cf6); width: min(1120px, 100%); margin: 0 auto; padding: 0 24px 64px; color: #fff; font-family: Manrope, system-ui, sans-serif; }
.about h3 { text-wrap: balance; }

/* Первый экран: арт виден почти целиком, текст по центру — на спокойной части арта */
.about-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(calc(100svh - 84px), 880px); padding: 56px 0 40px; text-align: center; }
.about-hero .glass-eyebrow::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, #8b5cf6, #0ea5e9); }
.about-hero__title { max-width: 820px; font-size: clamp(40px, 6.4vw, 68px); }
.about-hero__lead { margin-inline: auto; font-size: 19px; line-height: 30px; }
.about-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.about-chips li { padding: 6px 14px; border: 1px solid #ffffff26; border-radius: 9999px; background: #0b1220a6; color: #ffffffd9; font-size: 13px; line-height: 20px; font-weight: 600; text-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.about-hero__note { margin: 40px 0 0; color: #ffffffb3; font-size: 14px; line-height: 20px; }

.about-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.about-cta__button { min-height: 52px; padding: 14px 32px; font-size: 16px; line-height: 24px; }
.about-cta__note { color: #ffffffb3; font-size: 14px; line-height: 20px; font-weight: 600; }

/* Разделы */
.about-section { padding-top: 104px; }
.about-section > .glass-eyebrow, .about-example__text > .glass-eyebrow, .about-method__text > .glass-eyebrow, .about-author__text > .glass-eyebrow { margin-bottom: 12px; }
.about-h2 { margin: 0; font-size: 38px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(90deg, #fff, #c2c6cf); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.about-h2--center { text-align: center; }
.about-text { max-width: 62ch; margin: 16px 0 0; color: #ffffffcc; font-size: 17px; line-height: 28px; text-wrap: pretty; }
.about-text--wide { max-width: 72ch; }
/* Текст прямо на арте (вне карточек) отделяется тенью, как в .glass-intro; у заголовков с градиентом тени нет */
.about-section > .glass-eyebrow, .about-section > .about-text, .about-method__text > .glass-eyebrow, .about-method__text > .about-text { text-shadow: 0 1px 12px #020617, 0 0 2px #020617; }

/* Три шага */
.about-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.about-step { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.about-step__num { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 50%; background: linear-gradient(#0b1220, #0b1220) padding-box, var(--about-grad) border-box; font-size: 18px; font-weight: 700; }
.about-step h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.about-step p { margin: 0; color: #ffffffb3; font-size: 15px; line-height: 24px; }

/* Пример расшифровки: картинка закреплена, пока читается текст */
.about-example { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: start; padding: 32px; }
/* Карусель «один сон в трёх стилях»: плавная смена раз в 4 секунды (about.js); плашка и точки — как у карусели сна (comic.css) */
.about-carousel { position: sticky; top: 24px; margin: 0; }
.about-carousel__frame { position: relative; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 16px; background: #0b1220; box-shadow: 0 24px 64px -32px #000; }
/* Лента с прилипанием к слайдам, как .comic-carousel-track: листается пальцем, стрелками, точками и сама */
.about-carousel__track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.about-carousel__track::-webkit-scrollbar { display: none; }
.about-carousel__track:focus-visible { outline: 2px solid #64c7ed; outline-offset: -2px; }
.about-carousel__slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 2 / 3; scroll-snap-align: start; scroll-snap-stop: always; }
.about-carousel__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-carousel__label { position: absolute; top: 12px; right: 12px; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 20px; background: #10151ab3; color: #fff; font: 12px/1.4 system-ui, sans-serif; pointer-events: none; }
.about-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 50%; background: #ffffff94; color: #26303b; box-shadow: 0 1px 7px #0002; cursor: pointer; transition: background .15s; }
.about-carousel__arrow[hidden] { display: none; }
.about-carousel__arrow:hover { background: #ffffffc7; }
.about-carousel__arrow:focus-visible { outline: 2px solid #64c7ed; outline-offset: 2px; }
.about-carousel__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.about-carousel__arrow--prev { left: 12px; }
.about-carousel__arrow--next { right: 12px; }
@media (hover: none) and (pointer: coarse) { .about-carousel__arrow { display: none; } }
.about-carousel__dots { display: flex; justify-content: center; align-items: center; padding: 6px 0 2px; }
.about-carousel__dot { display: grid; place-items: center; width: 20px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.about-carousel__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #596775; transition: background .15s, transform .15s; }
.about-carousel__dot[aria-current="true"]::after { background: #55bafa; transform: scale(1.15); }
.about-carousel__dot:focus-visible { outline: 2px solid #64c7ed; outline-offset: 2px; border-radius: 6px; }
.about-carousel__caption { margin: 2px 0 0; color: #ffffffb3; font-size: 14px; line-height: 20px; text-align: center; text-wrap: balance; }
.about-example__text .about-text { font-size: 16px; line-height: 26px; }
.about-dream, .about-question { margin: 20px 0 0; padding: 16px 20px; border-radius: 16px; font-size: 15px; line-height: 24px; }
.about-dream { border: 1px solid #ffffff14; background: #ffffff0a; color: #ffffffbf; }
/* Подписи «Сон, коротко», «Суть» (как над итогом в расшифровках сна) и «Вопрос для размышления» */
.about-dream span, .about-quote span, .about-question span { display: block; margin-bottom: 6px; color: #7dd3fc; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-symbols { margin: 24px 0 0; border-top: 1px solid #ffffff1a; }
.about-symbols div { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid #ffffff1a; }
.about-symbols dt { color: #7dd3fc; font-size: 15px; line-height: 24px; font-weight: 700; }
.about-symbols dd { margin: 0; color: #ffffffcc; font-size: 15px; line-height: 24px; }
.about-quote { margin: 28px 0 0; padding: 2px 0 2px 20px; border-left: 2px solid #8b5cf6; border-image: linear-gradient(#0ea5e9, #8b5cf6) 1; color: #fff; font-size: 20px; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.about-question { border: 1px solid #ffffff1f; background: linear-gradient(135deg, #0ea5e91f, #8b5cf62e); color: #fff; font-size: 16px; line-height: 26px; }
.about-question span { color: #c4b5fd; }

/* О методе */
.about-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px; align-items: center; }
.about-grows { padding: 32px; border: 1px solid transparent; background: linear-gradient(#0b1220d9, #0b1220d9) padding-box, linear-gradient(135deg, #0ea5e999, #8b5cf699) border-box; }
.about-grows__icon { display: block; width: 32px; height: 32px; color: #7dd3fc; }
.about-grows h3 { margin: 16px 0 0; font-size: 22px; line-height: 1.3; }
.about-grows p { margin: 12px 0 0; color: #ffffffcc; font-size: 16px; line-height: 26px; }

/* Автор: вместо фото — медитирующий сновидец из арта страницы */
.about-author { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: center; padding: 36px; }
.about-author__art { width: 200px; height: 200px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff2e, 0 0 0 8px #ffffff0a, 0 24px 64px -24px #8b5cf6; }
.about-author__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-author__text .about-text:last-child { margin-bottom: 0; }

/* Цены */
.about-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.about-price { display: flex; flex-direction: column; gap: 6px; padding: 28px; }
.about-price--main { border: 1px solid transparent; background: linear-gradient(#0b1220d9, #0b1220d9) padding-box, linear-gradient(135deg, #0ea5e999, #8b5cf699) border-box; }
.about-price__crystal { width: 28px; height: 28px; margin-bottom: 10px; object-fit: contain; filter: drop-shadow(0 0 6px #38bdf880); }
.about-price h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.about-price p { margin: 0; color: #ffffffb3; font-size: 15px; line-height: 22px; }
.about-price b { margin-top: auto; padding-top: 18px; font-size: 32px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.about-price small { color: #ffffff99; font-size: 13px; line-height: 18px; }
.about-prices__more { margin: 24px 0 0; }

/* Вопросы: четыре карточки сеткой 2×2, на 960 px и уже — в одну колонку */
.about-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.about-faq h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.about-faq p { margin: 0; color: #ffffffcc; font-size: 15px; line-height: 24px; }

/* Финальный призыв */
.about-final { display: flex; flex-direction: column; align-items: center; margin-top: 104px; padding: 56px 24px; text-align: center; }
.about-final .about-h2 { font-size: 44px; }
.about-final .about-cta { margin-top: 24px; }

@media (max-width: 960px) {
  .about-example { gap: 32px; }
  /* Подарок и три пакета: на планшете — по два в ряд */
  .about-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-method { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .about-example { grid-template-columns: minmax(0, 1fr); }
  .about-carousel { position: static; width: 100%; max-width: 440px; margin-inline: auto; }
  .about-steps, .about-prices, .about-faq { grid-template-columns: minmax(0, 1fr); }
  .about-author { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 28px; }
  .about-author__art { width: 140px; height: 140px; }
}
@media (max-width: 600px) {
  .about { padding: 0 16px 48px; }
  .about-hero { min-height: min(calc(100svh - 72px), 760px); padding: 40px 0 32px; }
  .about-hero .glass-eyebrow { gap: 8px; }
  .about-hero .glass-eyebrow::before, .about-hero .glass-eyebrow::after { width: 16px; }
  .about-hero__lead { font-size: 17px; line-height: 27px; }
  .about-section { padding-top: 72px; }
  .about-h2 { font-size: 30px; }
  .about-step, .about-price, .about-grows { padding: 22px; }
  .about-example, .about-author { padding: 20px; gap: 24px; }
  .about-symbols div { grid-template-columns: minmax(0, 1fr); }
  .about-quote { font-size: 18px; }
  .about-final { margin-top: 72px; padding: 40px 20px; }
  .about-final .about-h2 { font-size: 32px; }
}
/* Без анимации: лента перескакивает сразу (about.js), автопрокрутка остаётся */
@media (prefers-reduced-motion: reduce) {
  .about-carousel__dot::after, .about-carousel__arrow { transition: none; }
}