/* ============================================================
   Главная агрегатора (#2.1) — стили секций главной.
   Токены/компонент-слой ДС — глобально (/ds/*.css). Здесь только
   классы главной, на тех же переменных. Портировано 1:1 из
   design-reference Childhood360Home++ (HOME_CSS), без preview-обёртки.
   ============================================================ */

.home-body > .section:first-child { padding-top: var(--sp-5); }

/* hero */
.home-hero { position: relative; overflow: hidden; isolation: isolate;
  transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  padding: var(--sp-6) var(--gutter) calc(var(--sp-6) + 4px);
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--brand-coral) 62%, transparent), transparent 56%),
    radial-gradient(110% 90% at 6% 4%, color-mix(in srgb, var(--brand-violet) 52%, transparent), transparent 54%),
    linear-gradient(155deg, color-mix(in srgb, var(--accent-navy) 92%, var(--brand-rose) 18%), color-mix(in srgb, var(--brand-rose) 76%, var(--accent-navy) 32%)); }
.home-hero__inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.home-hero__eyebrow { color: color-mix(in srgb, var(--brand-coral) 100%, #fff 28%); }
.home-hero__title { color: #fff; max-width: 18ch; }
.home-hero__sub { color: rgba(255,255,255,0.85); margin: 10px auto 0; max-width: 38ch; }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; z-index: 1; pointer-events: none; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.blob--1 { width: 120px; height: 120px; right: -28px; top: 18px; background: color-mix(in srgb, var(--brand-coral) 80%, #fff); }
.blob--2 { width: 80px; height: 80px; left: -22px; bottom: 30px; background: color-mix(in srgb, var(--teal) 75%, #fff); }
.blob--3 { width: 54px; height: 54px; right: 40px; bottom: 8px; background: color-mix(in srgb, var(--brand-violet) 70%, #fff); opacity: .4; }
.confetti { position: absolute; z-index: 1; border-radius: 6px; opacity: .8; pointer-events: none; }
.confetti--1 { width: 16px; height: 16px; left: 18%; top: 26px; background: var(--brand-coral); transform: rotate(18deg); }
.confetti--2 { width: 12px; height: 12px; right: 16%; top: 60px; background: var(--teal); transform: rotate(-12deg); }

/* меняющаяся иллюстрация — стопка с кросс-фейдом */
.hero-scene-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 12px; }
.hero-scene-stack { position: relative; width: 84px; height: 84px; flex: none; }
.hero-scene { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; display: grid; place-items: center; color: #fff;
  opacity: 0; transition: opacity .55s ease; will-change: opacity; transform: translateZ(0); box-shadow: var(--shadow-lg);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
  background:
    radial-gradient(130% 120% at 75% -20%, color-mix(in srgb, var(--c) 60%, #fff 10%), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--c) 92%, #000 4%), color-mix(in srgb, var(--c) 58%, var(--brand-navy) 58%)); }
.hero-scene.is-on { opacity: 1; }
.hero-cap-stack { position: relative; width: 100%; height: 24px; }
.hero-scene__cap { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 24px; display: inline-flex; align-items: center;
  white-space: nowrap; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; padding: 0 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.24); opacity: 0; transition: opacity .55s ease; }
.hero-scene__cap.is-on { opacity: 1; }

.hero-widget { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 20px auto 0; width: 100%; max-width: 440px;
  background: var(--surface); border: none; border-radius: var(--r-pill); padding: 8px 8px 8px 10px; box-shadow: var(--shadow-lg); cursor: pointer; font-family: inherit; }
.hero-widget__spark { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--primary), var(--teal)); box-shadow: var(--shadow-brand); }
.hero-widget__field { flex: 1; min-width: 0; text-align: left; }
.hero-widget__ph { font-size: var(--fs-sm); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hero-widget__btn { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; justify-content: center; }
.hero-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); font-family: inherit; cursor: pointer; }
.hero-chip svg:last-child { opacity: .7; }

/* направления — 2 ряда */
.dir-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); gap: var(--sp-3); overflow-x: auto; padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.dir-grid::-webkit-scrollbar { display: none; }
.dir-grid .cat-tile { width: 92px; flex: none; scroll-snap-align: start; position: relative; }
.cat-tile__count { font-size: var(--fs-xs); color: var(--fg-3); font-weight: var(--fw-bold); }

/* популярные — 2 ряда, кликабельные */
.pop-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 8px; overflow-x: auto; padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.pop-grid::-webkit-scrollbar { display: none; }
.pop-chip { flex: none; scroll-snap-align: start; cursor: pointer; font-family: inherit; }

/* подборки — массивные карточки */
.col-card { position: relative; width: 220px; min-height: 156px; flex: none; border-radius: var(--r-lg); padding: 18px; overflow: hidden; color: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background:
    radial-gradient(120% 100% at 80% -12%, color-mix(in srgb, var(--c) 60%, #fff 10%), transparent 56%),
    linear-gradient(150deg, color-mix(in srgb, var(--c) 92%, #000 4%), color-mix(in srgb, var(--c) 58%, var(--brand-navy) 56%)); }
.col-card__ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,0.22); display: grid; place-items: center; }
.col-card__title { font-size: var(--fs-h3); font-weight: var(--fw-extra); line-height: 1.2; }
.col-card__desc { font-size: var(--fs-xs); color: rgba(255,255,255,0.9); line-height: 1.35; }
.col-card__foot { display: inline-flex; align-items: center; gap: 3px; margin-top: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: rgba(255,255,255,0.95); }

/* листинги */
.big-card { width: 270px; }
.art-card { width: 284px; }
.art-card__body { gap: 8px; }
.art-card__title { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-card__desc { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-card__read { font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px; }
.spec-card { width: 230px; flex: none; display: flex; flex-direction: column; gap: 9px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.spec-card__top { display: flex; align-items: center; gap: 10px; }
.spec-card__ava { width: 46px; height: 46px; flex: none; border-radius: 50%; font-size: var(--fs-body); }
.spec-card__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spec-card__name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--fg); line-height: 1.15; }
.spec-card__role { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--fg-2); }
.spec-card__role svg { color: var(--c); }
.spec-card__bio { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.45; min-height: 40px; }
.spec-card__foot { display: flex; align-items: center; justify-content: space-between; }
.spec-card__price { font-size: var(--fs-sm); font-weight: var(--fw-extra); color: var(--fg); }

/* баннер-слайдер */
.banner { position: relative; height: 156px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.banner__track { display: flex; height: 100%; transition: transform var(--dur-slow) var(--ease-out); }
.banner__slide { position: relative; flex: 0 0 100%; height: 100%; padding: 18px 20px; color: #fff; display: flex; flex-direction: column; gap: 5px; justify-content: center;
  background:
    radial-gradient(120% 110% at 86% -16%, color-mix(in srgb, var(--c) 58%, #fff 8%), transparent 56%),
    linear-gradient(150deg, color-mix(in srgb, var(--c) 92%, #000 4%), color-mix(in srgb, var(--c) 56%, var(--brand-navy) 58%)); }
.banner__ic { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.2); display: grid; place-items: center; }
.banner__badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
.banner__title { font-size: var(--fs-h2); font-weight: var(--fw-extra); line-height: 1.15; max-width: 80%; }
.banner__sub { font-size: var(--fs-sm); color: rgba(255,255,255,0.9); }
.banner__cta { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; background: #fff; color: var(--accent-navy);
  border: none; border-radius: var(--r-pill); padding: 7px 14px; font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
.banner__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.85); color: var(--accent-navy); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.banner__arrow--l { left: 8px; } .banner__arrow--r { right: 8px; }
.banner__dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.banner__dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; }
.banner__dot.is-on { background: #fff; width: 18px; border-radius: 4px; }

/* видео-шортсы */
.vs-nav { display: flex; align-items: center; gap: 6px; }
.vs-count { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--fg-3); margin-right: 2px; }
.vs-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface); color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.vs-row { padding-top: 4px; }
.short { width: 130px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.short__media { position: relative; height: 200px; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 80% -10%, color-mix(in srgb, var(--c) 55%, #fff 8%), transparent 56%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 90%, #000 6%), color-mix(in srgb, var(--c) 54%, var(--brand-navy) 60%)); }
.short__ic { position: absolute; top: 12px; left: 12px; color: rgba(255,255,255,0.7); }
.short__play { width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.34); border: 1.5px solid rgba(255,255,255,0.7); display: grid; place-items: center; backdrop-filter: blur(2px); }
.short__dur { position: absolute; bottom: 8px; right: 8px; font-size: 10px; font-weight: var(--fw-bold); color: #fff; background: rgba(0,0,0,0.45); padding: 2px 6px; border-radius: var(--r-sm); }
.short__title { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--fg); line-height: 1.25; }
.short__views { font-size: 11px; color: var(--fg-2); }

/* seo */
.seo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.seo__media { position: relative; height: 116px; border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(120% 110% at 82% -16%, color-mix(in srgb, var(--brand-coral) 55%, transparent), transparent 56%),
    radial-gradient(110% 110% at 10% 10%, color-mix(in srgb, var(--brand-violet) 48%, transparent), transparent 54%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent-navy) 92%, var(--brand-rose) 16%), color-mix(in srgb, var(--brand-rose) 74%, var(--accent-navy) 34%)); }
.seo__media-tag { position: absolute; bottom: 10px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; background: rgba(0,0,0,0.22); padding: 4px 11px; border-radius: var(--r-pill); }
.seo__media-ic { position: absolute; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.2); }
.seo__media-ic--1 { top: 14px; left: 18px; transform: rotate(-8deg); }
.seo__media-ic--2 { top: 22px; right: 24px; transform: rotate(10deg); }
.seo__media-ic--3 { bottom: 14px; right: 40px; transform: rotate(-6deg); }
.seo__p { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.6; }
.seo__p:last-child { margin-bottom: 0; }
.seo__rest { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.seo__rest.is-open { max-height: 1400px; }
.seo__toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--primary); }

/* финальный оффер */
.home-offer { position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); padding: 30px 22px 28px; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow-lg);
  background:
    radial-gradient(120% 90% at 85% -12%, color-mix(in srgb, var(--brand-coral) 62%, transparent), transparent 56%),
    radial-gradient(110% 90% at 8% 6%, color-mix(in srgb, var(--brand-violet) 52%, transparent), transparent 54%),
    linear-gradient(155deg, color-mix(in srgb, var(--accent-navy) 92%, var(--brand-rose) 18%), color-mix(in srgb, var(--brand-rose) 76%, var(--accent-navy) 32%)); }
.home-offer__spark { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; margin-bottom: 4px;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.24); box-shadow: var(--shadow-sm); }
.home-offer__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-extra); line-height: 1.2; letter-spacing: -0.01em; max-width: 22ch; }
.home-offer__sub { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255,255,255,0.88); max-width: 36ch; }
.home-offer__cta { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap-min); padding: 0 24px; border: none; border-radius: var(--r-pill); cursor: pointer; font-family: inherit;
  font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: -0.01em;
  background: #fff; color: var(--accent-navy); box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out); }
.home-offer__cta svg { width: 18px; height: 18px; }
.home-offer__cta:active { transform: scale(0.97); }

@media (min-width: 760px) {
  .dir-grid .cat-tile { width: 110px; }
  .home-hero { padding: 56px var(--gutter) 52px; }
  .home-hero__title { font-size: 40px; }
  .banner { height: 200px; }
  .col-card { width: 250px; }
  .home-offer { padding: 44px 32px 40px; }
  .home-offer__title { font-size: var(--fs-h1); }
}