/* ============ Новое оформление: яркое, нежное, в стиле акционного баннера ============
   Подключается после style.css. Цвета и шрифты меняются переменными, остальное — переопределения. */
:root {
  --bg: #F6F0E6; --bg-2: #EEE5D6; --card: #ffffff; --sand: #E8DFD0; --line: #E2D9C8;
  --ink: #3B2418; --muted: #8A7563; --gold: #D9B48A;
  --rose: #4A86C5; --rose-2: #7FB0E3; --peach: #A9CBEE; --wine: #3B2418; --wine-2: #7A5238;
  --g1: linear-gradient(120deg, #4A86C5 0%, #6FA3D8 50%, #A9CBEE 100%);
  --shadow: 0 22px 46px -28px rgba(63, 120, 181, .55);
  --serif: 'Playfair Display', Georgia, serif;
  --script: 'Marck Script', 'Playfair Display', cursive;
  --sans: 'Montserrat', system-ui, sans-serif;
}
body { background: radial-gradient(900px 620px at 92% -6%, #DCEAF7 0%, transparent 62%), radial-gradient(800px 560px at -6% 28%, #EFE3D0 0%, transparent 62%), var(--bg); font-weight: 450; }
::selection { background: #8DB7E3; color: #fff; }

/* ---------- шрифты ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; font-size-adjust: .47; letter-spacing: -.01em; color: var(--ink); }
h1 em, h2 em, h3 em, .promo h2 em { font-family: var(--script); font-style: normal; font-weight: 400; font-size: 1.06em; letter-spacing: 0; padding: 0 .06em;
  background: var(--g1); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo h2 em, .final h2 em { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.dark h2 em, .dark h3 em { background: linear-gradient(120deg, #8DB7E3, #D9B48A); -webkit-background-clip: text; background-clip: text; }
.eyebrow { display: inline-block; padding: 6px 16px; border-radius: 999px; background: #fff; color: var(--rose); font-weight: 700; font-size: 11px; letter-spacing: .18em; box-shadow: 0 10px 22px -14px rgba(63, 120, 181, .6); }
.dark .eyebrow { background: rgba(255, 255, 255, .14); color: #E9D9C4; box-shadow: none; }
.crumbs { color: var(--muted); }
.caption .name { font-family: var(--script); font-style: normal; font-size: 26px; color: var(--rose); }

/* ---------- кнопки ---------- */
.btn { background: var(--g1); background-size: 160% 100%; border: 0; color: #fff; font: 700 14px var(--sans); letter-spacing: .02em; padding: 15px 32px; box-shadow: 0 16px 30px -16px rgba(63, 120, 181, .85); transition: transform .2s, box-shadow .25s, background-position .4s; }
.btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 20px 36px -16px rgba(63, 120, 181, .95); }
.btn.ghost { background: #fff; color: var(--rose); border: 1.5px solid var(--rose); box-shadow: none; }
.btn.ghost:hover { background: var(--rose); color: #fff; }
.btn.light, .product.on-light .btn.light { background: #fff; color: var(--rose); border: 0; box-shadow: 0 12px 24px -14px rgba(40, 28, 20, .6); }
.btn.sm { padding: 11px 22px; font-size: 13px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--rose); }

/* ---------- шапка ---------- */
.site-head { background: rgba(246, 240, 230, .78); backdrop-filter: blur(14px) saturate(1.3); }
.site-head.mv-scrolled { background: rgba(246, 240, 230, .94); box-shadow: 0 12px 30px -20px rgba(63, 120, 181, .5); }
.logo { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 22px; letter-spacing: .01em; text-transform: none;
  background: linear-gradient(100deg, #3B2418 20%, #4A86C5 50%, #3B2418 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-foot .logo { background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; }
.site-head nav { font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.site-head nav a { color: var(--wine); opacity: .78; transition: color .2s, opacity .2s; }
.site-head nav a:hover { color: var(--rose); opacity: 1; }
.site-head nav a.nav-btn { background: var(--g1); color: #fff; opacity: 1; box-shadow: 0 12px 24px -14px rgba(63, 120, 181, .9); }
.site-head nav a.nav-btn:hover { color: #fff; }
.burger span { background: var(--wine); }

/* ---------- главная ---------- */
.hero h1 { font-weight: 600; font-size: clamp(40px, 5.2vw, 70px); line-height: 1.08; color: var(--ink); }
.hero h1 em { font-size: 1.08em; line-height: 1; }
.hero p.lead, .hero .lead { color: #5A4636; font-size: 17px; }
.arch { background: linear-gradient(160deg, #B9D3EE, #E3EDF8); border: 0; box-shadow: 0 34px 60px -32px rgba(63, 120, 181, .65); }
.arch-inner { border: 5px solid #fff; }
.hero .actions .btn:first-child { animation: mv-glow 3.2s ease-in-out infinite; }

.sec-title { font-size: clamp(34px, 4.6vw, 54px); }
.sec-sub { color: #5A4636; }

.door { background: #fff; border: 0; box-shadow: var(--shadow); }
.door:hover { box-shadow: 0 30px 56px -26px rgba(63, 120, 181, .75); }
.door .pic { background: var(--sand); }
.door h3 { font-size: 20px; }
.door p { color: var(--muted); }
.door .go { color: var(--rose); font-weight: 700; }
.salon-tile .pic { box-shadow: inset 0 0 0 2px #fff; }

.dark { background: linear-gradient(135deg, #3B2418 0%, #5A3626 60%, #8A6040 100%); color: #F2F7FD; }
.dark .head p { color: #D9B48A; }
.product { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 22px; }
.product .pic { background: rgba(255, 255, 255, .92); border-radius: 16px; }
.product p { color: #D9B48A; }
.product.on-light { background: #fff; border: 0; box-shadow: var(--shadow); color: var(--ink); }
.product.on-light .pic { background: var(--sand); }
.product.on-light p { color: var(--muted); }
.product h3 { font-size: 22px; }
.product .brand { color: var(--rose); font-weight: 700; }
.product .price { font-weight: 700; }
.product.on-light .price { color: var(--rose); }

.course-band, .kaspi-band { background: transparent; }
.course-band .mini-arch, .quiz-band .mini-arch { background: linear-gradient(160deg, #B9D3EE, #E3EDF8); border: 0; box-shadow: var(--shadow); }
.course-band .mini-arch div { border: 4px solid #fff; color: var(--rose); font-family: var(--script); font-style: normal; font-size: 64px; }
.kaspi-band .wrap { padding: 40px 48px; border-radius: 28px; background: linear-gradient(120deg, #EEE5D6, #E3EDF8); box-shadow: var(--shadow); }
.course-band p, .kaspi-band p, .final p { color: #5A4636; }

.final { background: var(--g1); color: #fff; position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; width: 520px; aspect-ratio: 1; right: -140px; top: -200px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.final .wrap { position: relative; }
.final h2 { color: #fff; font-size: clamp(38px, 5.4vw, 64px); }
.final p { color: #F2F7FD; }
.final .btn { background: #fff; color: var(--rose); box-shadow: 0 16px 30px -14px rgba(40, 28, 20, .6); }

.site-foot { background: linear-gradient(120deg, #3B2418, #5A3626); color: #E9D9C4; padding: 40px 0; }
.site-foot a { color: #fff; }

/* ---------- внутренние страницы ---------- */
.page-head h1 { font-size: clamp(38px, 5.4vw, 64px); }
.page-head p { color: #5A4636; }
.post-card { background: #fff; border: 0; border-radius: 22px; box-shadow: var(--shadow); }
.post-card:hover { box-shadow: 0 30px 56px -26px rgba(63, 120, 181, .75); }
.post-card .badge { background: #fff; color: var(--rose); font-weight: 700; box-shadow: 0 8px 18px -10px rgba(63, 120, 181, .6); }
.post-card .play-mini, .play, .wplay { background: rgba(255, 255, 255, .95); border-color: var(--rose); }
.post-card .play-mini::before, .play::before { border-left-color: var(--rose); }
.wplay::before { border-left-color: var(--rose); }
.post-card h3 { font-size: 21px; }
.order { background: linear-gradient(180deg, transparent, var(--bg-2)); }
.panel { border: 0; border-radius: 24px; box-shadow: var(--shadow); background: #fff; }
.panel h3 { font-size: 26px; }
label.f input, label.f select, label.f textarea { border: 1.5px solid var(--line); border-radius: 12px; }
label.f input:focus, label.f select:focus, label.f textarea:focus { border-color: var(--rose); }
.welcome-video { border: 0; box-shadow: 0 34px 60px -30px rgba(63, 120, 181, .6); }
.player { border-radius: 20px; }
.prose p { color: #4A372B; }

/* магазин */
.filters { color: var(--ink); }
.cat-list button.on { background: var(--g1); color: #fff; }
.cat-list button:hover { background: var(--bg-2); }
.shop-tabs button { border-color: var(--rose); color: var(--rose); font-weight: 700; }
.shop-tabs button.on { background: var(--g1); border-color: transparent; color: #fff; }
.shop-top select, .filters input[type=search], .filters input[type=number], .filters select { border-radius: 12px; border: 1.5px solid var(--line); }

/* тест */
.quiz .progress { height: 6px; background: var(--bg-2); }
.quiz .progress span { background: var(--g1); }
.quiz .opt { border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 10px 22px -18px rgba(63, 120, 181, .5); }
.quiz .opt::before { border-color: var(--rose-2); }
.quiz .opt:hover { border-color: var(--rose); }
.quiz .opt[aria-pressed="true"] { border-color: var(--rose); background: var(--bg-2); }
.quiz .opt[aria-pressed="true"]::before { background: var(--rose); border-color: var(--rose); box-shadow: inset 0 0 0 3px var(--bg-2); }
.quiz .step, .quiz .tcard, .quiz .rec { border: 0; box-shadow: var(--shadow); border-radius: 20px; background: #fff; }
.quiz .chip { background: #fff; border-color: var(--line); color: var(--rose); font-weight: 600; }
.quiz .alert { border-left-color: var(--rose); background: #fff; box-shadow: var(--shadow); }
.quiz .r-h { font-size: 32px; }

/* плашки кабинета */
.cab-guide { border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.scalp-hero { border: 0; border-radius: 28px; box-shadow: var(--shadow); }
.promo .wrap { box-shadow: 0 34px 64px -30px rgba(63, 120, 181, .75); }

@media (max-width: 720px) {
  .site-head nav, .site-head nav[id] { background: #F6F0E6; border-bottom: 1px solid var(--line); }
  .site-head nav a { padding: 14px 4px; }
  .kaspi-band .wrap { padding: 28px 22px; }
  .hero h1 em { font-size: 1.12em; }
}

/* тёмные блоки: светлый текст */
.dark h1, .dark h2, .dark h3, .product:not(.on-light) h3, .product:not(.on-light) .price, .product:not(.on-light) h3 a { color: #fff; }
.product:not(.on-light) .brand { color: #8DB7E3; }
.dark .lesson, .product:not(.on-light) .lesson { color: #D9B48A; }

/* уточнения */
.pdp h1, .pdp > div > h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; }
.pdp .price, .pdp .pprice { color: var(--rose); font-weight: 700; }
.product.on-light .btn.light { background: var(--g1); color: #fff; box-shadow: 0 14px 26px -14px rgba(63, 120, 181, .85); }
.final h2 { line-height: 1.18; margin-bottom: 30px; }
.final h2 em { display: inline-block; line-height: 1.1; }
.final p { margin-top: 8px; }
.pdp-main { border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.thumbs button { border-radius: 12px; }
.thumbs button.on { border-color: var(--rose); }

/* курсивные акценты: не обрезать края и «хвосты» букв */
h1 em, h2 em, h3 em { display: inline-block; padding: .24em .2em .16em .06em; margin: -.24em -.06em -.16em 0; }


/* ---------- адаптивность: ничего не вылезает за экран ---------- */
html, body { overflow-x: clip; max-width: 100%; }
.hero, .promo, .final, .kaspi-band, .course-band { overflow-x: clip; }
.hero::before { right: -40px; width: min(620px, 90vw); }
.promo .wrap { min-width: 0; }
.promo-txt, .promo-pics { min-width: 0; }
.promo-pics { max-width: 100%; overflow: hidden; }
@media (max-width: 860px) {
  .promo { padding: 20px 0; }
  .promo .wrap { padding: 28px 20px; gap: 8px; }
  .promo-big { font-size: clamp(48px, 17vw, 96px); }
  .promo-pics { min-height: 170px; justify-content: center; }
  .pp { width: min(110px, 22vw); height: min(110px, 22vw); margin-left: -4vw; border-width: 4px; }
  .pp b { font-size: 11px; padding: 2px 8px; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .final h2 { font-size: clamp(32px, 9.5vw, 44px); }
  .page-head h1 { font-size: clamp(32px, 9.5vw, 44px); }
  .sec-title { font-size: clamp(30px, 8.5vw, 40px); }
  .cab-test, .cab-guide { max-width: 100%; }
}

/* узкие экраны: главный заголовок целиком помещается */
.hero .wrap > * { min-width: 0; }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(30px, 9vw, 40px); }
  .hero h1 em { font-size: 1.02em; padding-right: .1em; }
  h1 em, h2 em, h3 em { padding-right: .1em; }
}


/* ---------- палитра: небесно-голубой + шоколад + карамель на кремовом ---------- */
:root {
  --bg: #f6f0e6; --bg-2: #eee5d6; --card: #fbf8f2; --sand: #e8dfd0; --line: #e2d9c8;
  --ink: #3b2418; --muted: #8a7563; --gold: #d9b48a;
  --rose: #4a86c5; --rose-2: #7fb0e3; --peach: #a9cbee; --blush: #dceaf7; --wine: #3b2418; --wine-2: #5a3626;
  --sky: #6fa3d8; --caramel: #b98a5e;
  --g1: linear-gradient(120deg, #3f78b5 0%, #6fa3d8 55%, #a9cbee 100%);
  --gs: linear-gradient(100deg, #7a4a2c 0%, #b98a5e 55%, #d9b48a 100%);
  --shadow: 0 22px 46px -28px rgba(59, 36, 24, .35);
}
body { background: radial-gradient(900px 620px at 92% -6%, #dceaf7 0%, transparent 62%), radial-gradient(800px 560px at -6% 28%, #efe3d0 0%, transparent 62%), var(--bg); }
::selection { background: #8db7e3; color: #fff; }
/* рукописные акценты: карамель, как на примере */
h1 em, h2 em, h3 em { background: var(--gs); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo h2 em, .final h2 em { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.dark h2 em, .dark h3 em { background: linear-gradient(120deg, #b9d3ee, #e9d3b4); -webkit-background-clip: text; background-clip: text; }
.caption .name { color: var(--caramel); }
.eyebrow { color: #4a86c5; box-shadow: 0 10px 22px -14px rgba(59, 36, 24, .35); }
.dark { background: linear-gradient(135deg, #3b2418 0%, #5a3626 60%, #7a5238 100%); }
.site-foot { background: linear-gradient(120deg, #3b2418, #5a3626); }
.site-head { background: rgba(246, 240, 230, .8); }
.logo { background: linear-gradient(100deg, #3b2418 20%, #4a86c5 50%, #3b2418 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arch, .course-band .mini-arch, .quiz-band .mini-arch { background: linear-gradient(160deg, #b9d3ee, #e3edf8); }
.kaspi-band .wrap { background: linear-gradient(120deg, #e3edf8, #efe3d0); }
.promo .wrap, .sale-strip { background: linear-gradient(120deg, #3f78b5 0%, #6fa3d8 55%, #a9cbee 100%); }
.cab-test { background: linear-gradient(115deg, #dceaf7 0%, #efe3d0 100%); box-shadow: 0 24px 50px -30px rgba(59, 36, 24, .4); }
.cab-test h3, .cab-test p, .ct-txt p { color: #3b2418; }
.sale-badge, .pp b { background: #8a4b2a; box-shadow: 0 6px 14px -4px rgba(59, 36, 24, .4); }
.promo-pill { color: #3f78b5; }
.promo .promo-btn, .promo-btn { color: #3f78b5; }
.final .btn { color: #3f78b5; }
.product .price s { color: #a8967f; }
.product.on-light .price { color: #3f78b5; }
.product .brand, .product.on-light .brand { color: #8a5a3b; }
.door .go, .rt-go { color: #3f78b5; }
.cat-list button.on, .shop-tabs button.on, .shop-tabs button.sale.on { color: #fff; }
.shop-tabs button.sale { color: #3f78b5; border-color: #4a86c5; }
.mv-orbs i:nth-child(1) { background: radial-gradient(circle, #cfe2f5, transparent 68%); }
.mv-orbs i:nth-child(2) { background: radial-gradient(circle, #f0e0c8, transparent 68%); }
.mv-orbs i:nth-child(3) { background: radial-gradient(circle, #d9e6f7, transparent 68%); }
.mv-sparks span { color: #8db7e3; }

/* единый карамельный рукописный акцент во всех заголовках (специфичность выше motion.css) */
.hero h1 em, .sec-title em, .page-head h1 em, .course-band h2 em, .welcome-text h2 em, .quiz .page-head h1 em, .kaspi-band h2 em, .quiz-band h2 em {
  background: var(--gs); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: none; }
.hero h1 em { filter: none; }
.final h2 em, .promo h2 em { background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; }

/* уточнения под новую палитру */
.rt-0 { background: linear-gradient(135deg, #3b2418 0%, #5a3626 55%, #8a6040 100%); box-shadow: 0 26px 50px -30px rgba(59, 36, 24, .7); }
.rt-1 { background: linear-gradient(135deg, #3f78b5 0%, #6fa3d8 55%, #b9d3ee 100%); box-shadow: 0 26px 50px -30px rgba(63, 120, 181, .7); }
.promo-big { line-height: 1.12; padding-bottom: .1em; margin-bottom: 4px; }
.promo-pics { overflow: visible; }
@media (max-width: 860px) { .promo-pics { overflow: hidden; } }

/* двери: фон за створками (тема перекрашивала его в песочный) */
.door.salon-tile .pic { background: url(uploads/video/welcome-poster.jpg) center / cover; }
.door.retreat-tile .pic { background: radial-gradient(circle at 50% 55%, #7fb0e3 0%, #3f78b5 38%, #2a2038 100%); }