/* Развлекательный центр «Иллюзия»: ночное фиолетовое небо, облака-разделители,
   розово-фиолетовые кнопки, жёлтые акценты. Карточки и шрифты — как у сайта кукол. */

body.club {
  --bg: #F5F0FF;
  --surface: #FFFFFF;
  --text: #26134F;
  --muted: #6B5B8E;
  --brand: #D62FD0;
  --accent: #FFD23F;
  --night: #1B0B45;
  --night-2: #3A137A;
  --pink: #FF3FA4;
  --violet: #7B3CFF;
  --cyan: #3FD8FF;
  --cloud: #F5F0FF;
  --cloud-alt: #ECE3FF;
  --line: rgba(38, 19, 79, .1);
  --shadow: 0 12px 34px rgba(58, 19, 122, .14);
  --font-display: 'Unbounded', 'Rubik', 'Segoe UI', Arial, sans-serif;
  --font-script: 'Caveat', 'Segoe Print', cursive;
}
body.club a { text-decoration: none; }

/* ---------- Шапка и подвал в тёмном цвете ---------- */
body.club .site-header {
  background: linear-gradient(90deg, #1B0B45 0%, #351273 55%, #1B0B45 100%);
  border-bottom-color: rgba(255, 63, 164, .32);
  backdrop-filter: none;
  color: #fff;
}
body.club .logo-text { font-family: var(--font-display); font-size: 21px; letter-spacing: .02em; }
body.club .logo-text small { color: #CBB8FF; font-family: var(--font-body); }
body.club .logo-mark { color: var(--accent); }
body.club .nav a { color: #DCD0FF; font-size: 15px; }
body.club .nav a:hover { color: #fff; }
body.club .switch { background: linear-gradient(90deg, var(--pink), var(--violet)); color: #fff; }
body.club .header-phone { color: #fff; }
body.club .site-footer { margin-top: 0; background: var(--night); color: #E9E1FF; border-top: 0; }
body.club .site-footer .muted { color: #B9A8E6; }
/* На странице центра вопросы прокручиваются вместе со страницей целиком. */
body.club #faq { position: relative; top: auto; z-index: auto; background: var(--cloud-alt); }

/* ---------- Кнопки ---------- */
.c-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px;
  font: 800 16px var(--font-body); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease; border: 0; cursor: pointer;
}
.c-btn i { font-style: normal; font-size: 20px; transition: translate .2s ease; }
.c-btn:hover { transform: translateY(-3px); }
.c-btn:hover i { translate: 4px 0; }
.c-btn--grad { background: linear-gradient(90deg, var(--pink), var(--violet)); color: #fff; box-shadow: 0 10px 30px rgba(214, 47, 208, .45), inset 0 0 0 2px rgba(255, 255, 255, .25); }
.c-btn--yellow { background: linear-gradient(180deg, #FFE36B, #FFC21A); color: #3A137A; box-shadow: 0 10px 26px rgba(255, 194, 26, .4); }
.c-btn--glass { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.c-btn--sm { padding: 11px 20px; font-size: 14px; }

/* ---------- Заголовки ---------- */
.c-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .98; margin: 0 0 20px; color: #fff; }
.c-title span { display: block; text-shadow: 0 4px 0 var(--violet), 0 10px 30px rgba(0, 0, 0, .35); }
.c-title span:nth-child(1) { rotate: -4deg; transform-origin: left; font-size: .9em; }
.c-title span:nth-child(2) { rotate: -3deg; transform-origin: left; font-size: .82em; }
.c-title-accent { rotate: -3deg; background: linear-gradient(180deg, #FFF27A, #FFB800); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none !important; filter: drop-shadow(0 4px 0 #C2410C) drop-shadow(0 10px 20px rgba(0, 0, 0, .35)); }
.c-hero .c-title { font-size: clamp(38px, 5.4vw, 76px); }
.c-title--md { font-size: clamp(32px, 4vw, 54px); }
.c-h2 { font: 900 clamp(24px, 3.2vw, 38px) var(--font-display); text-transform: uppercase; text-align: center; margin: 0 0 8px; color: var(--text); }
.c-h2--left { text-align: left; }
.c-sub { text-align: center; color: var(--muted); font-weight: 700; margin: 0 auto 30px; max-width: 760px; }
.c-heart { color: var(--pink); font-family: var(--font-body); }

/* ---------- Звёздное небо ---------- */
.c-hero, .c-dark {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 63, 164, .35), transparent 32%),
    radial-gradient(circle at 88% 30%, rgba(63, 216, 255, .22), transparent 30%),
    radial-gradient(circle at 60% 90%, rgba(123, 60, 255, .45), transparent 45%),
    linear-gradient(180deg, var(--night), var(--night-2));
}
.c-stars, .c-dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #fff, transparent),
    radial-gradient(2px 2px at 160px 60px, #FFE9A8, transparent),
    radial-gradient(1px 1px at 230px 170px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 300px 90px, #D9C8FF, transparent);
  background-size: 320px 220px;
  animation: c-twinkle 6s ease-in-out infinite alternate;
}
@keyframes c-twinkle { to { opacity: .45; } }

/* ---------- Первый экран ---------- */
.c-hero {
  padding: 40px 0 150px;
  background: linear-gradient(180deg, #1B0B45 0%, #242467 34%, #311B73 67%, #3A137A 100%);
}
.c-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center; }
.c-crown svg { width: 58px; height: 36px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; rotate: -12deg; }
.c-lead { font-size: 21px; font-weight: 700; margin: 0 0 26px; max-width: 460px; color: #EDE6FF; rotate: -2deg; transform-origin: left; }
.c-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.c-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 0; margin: 0; }
.c-perks li { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; font-size: 14px; max-width: 90px; line-height: 1.2; }
.c-perks span { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }

.c-hero-art { position: relative; height: 580px; }
.c-layer { position: absolute; transition: translate .35s ease-out; }
.c-portal { left: 50%; top: 50%; width: 430px; height: 430px; margin: -215px 0 0 -215px; }
.c-portal-ring {
  position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--pink), var(--violet), var(--cyan), var(--pink));
  box-shadow: 0 0 40px rgba(214, 47, 208, .6), 0 0 90px rgba(123, 60, 255, .45);
  animation: c-spin 12s linear infinite;
}
@keyframes c-spin { to { rotate: 360deg; } }
.c-portal-photo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--night); }
.c-portal-photo .c-photo { width: 100%; height: 100%; object-fit: cover; }
.c-portal-photo .stock-tag { left: 50%; right: auto; bottom: 18px; translate: -50% 0; }
.c-portal-sign {
  position: absolute; left: 50%; top: -34px; translate: -50% 0; margin: 0; padding: 8px 22px 10px; border-radius: 20px;
  background: rgba(27, 11, 69, .85); text-align: center; box-shadow: 0 0 24px rgba(214, 47, 208, .55), inset 0 0 0 2px rgba(255, 255, 255, .25);
}
.c-portal-sign b { display: block; font: 900 26px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.c-portal-sign small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #CBB8FF; }
.c-hero-doll img { height: 100%; width: auto; display: block; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); transition: scale .3s ease; }
.c-hero-doll:hover img { scale: 1.06; }
.c-hero-doll--0 { left: -6%; top: 2%; height: 300px; rotate: -8deg; }
.c-hero-doll--1 { right: -2%; top: -4%; height: 300px; rotate: 6deg; }
.c-hero-doll--2 { right: 2%; bottom: -30px; height: 320px; rotate: 4deg; }
.c-balloon { width: 70px; height: 86px; border-radius: 50% 50% 48% 48%; }
.c-balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 90px; background: rgba(255, 255, 255, .45); }
.c-balloon--1 { left: 22%; top: -2%; background: radial-gradient(circle at 35% 30%, #FFE7A1, #F5A623 60%, #B86B00); animation: c-float 6s ease-in-out infinite; }
.c-balloon--2 { left: 4%; bottom: 14%; width: 56px; height: 70px; background: radial-gradient(circle at 35% 30%, #FFC6E6, var(--pink) 60%, #9C1466); animation: c-float 7s ease-in-out infinite reverse; }
.c-balloon--3 { right: 30%; top: -6%; width: 50px; height: 62px; background: radial-gradient(circle at 35% 30%, #CFFBFF, var(--cyan) 60%, #1B7FA8); animation: c-float 5s ease-in-out infinite; }
@keyframes c-float { 50% { transform: translateY(-14px); } }
.c-planet { width: 80px; height: 80px; border-radius: 50%; left: 14%; bottom: -2%; background: radial-gradient(circle at 35% 30%, #D8C4FF, var(--violet) 60%, #2B0F66); }
.c-planet::after { content: ''; position: absolute; left: -30%; right: -30%; top: 42%; height: 16%; border: 3px solid rgba(255, 255, 255, .5); border-radius: 50%; rotate: -18deg; }
.c-sticker {
  right: -4%; bottom: 20%; width: 150px; height: 150px; display: grid; place-content: center; gap: 2px; text-align: center; padding: 18px;
  font: 900 13px/1.15 var(--font-display); text-transform: uppercase; color: #3A137A; rotate: -12deg;
  background: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  clip-path: polygon(50% 0, 61% 12%, 77% 6%, 81% 22%, 97% 26%, 91% 42%, 100% 55%, 88% 66%, 92% 83%, 75% 84%, 66% 99%, 51% 90%, 36% 100%, 27% 85%, 9% 86%, 11% 69%, 0 57%, 10% 43%, 3% 27%, 20% 22%, 23% 6%, 39% 12%);
}
.c-sticker span { font-size: 22px; }

/* ---------- Светлые секции ---------- */
.c-light { position: relative; background: var(--cloud); padding: 70px 0 110px; overflow: hidden; }
.c-light > .container { position: relative; z-index: 2; }
.c-light--alt { background: var(--cloud-alt); }
.c-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.c-head-row .c-h2 { text-align: left; }
.c-more { font-weight: 800; color: var(--brand); }

.c-features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.c-feature {
  display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 22px 12px; border-radius: 24px;
  background: linear-gradient(180deg, #fff, #F8F3FF); color: var(--text); box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(123, 60, 255, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.c-feature:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(123, 60, 255, .22), inset 0 0 0 2px rgba(214, 47, 208, .35); }
.c-feature-icon { font-size: 58px; line-height: 1.1; filter: drop-shadow(0 8px 10px rgba(58, 19, 122, .25)); transition: scale .3s ease; }
.c-feature:hover .c-feature-icon { scale: 1.12; }
.c-feature b { font: 900 14px var(--font-display); text-transform: uppercase; }
.c-feature span:last-child { color: var(--muted); font-size: 14px; line-height: 1.3; }

/* ---------- Праздник под ключ ---------- */
.c-dark { padding: 150px 0 150px; }
.c-turnkey-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .8fr 2fr; gap: 34px; align-items: center; }
.c-turnkey-text p { font-size: 18px; color: #E4DAFF; margin: 0 0 24px; }
.c-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.c-step { position: relative; }
.c-step:nth-child(odd) { rotate: -2deg; } .c-step:nth-child(even) { rotate: 2deg; margin-top: 18px; }
.c-step-photo { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 36px rgba(0, 0, 0, .4), 0 0 0 4px rgba(255, 255, 255, .9); }
.c-step-photo .c-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-step-photo .stock-tag { top: 8px; bottom: auto; }
.c-step-num {
  position: absolute; z-index: 3; left: -10px; top: -14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font: 900 20px var(--font-display); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.c-step--0 .c-step-num { background: var(--pink); } .c-step--1 .c-step-num { background: var(--cyan); }
.c-step--2 .c-step-num { background: var(--violet); } .c-step--3 .c-step-num { background: #FFB800; }
.c-step-label {
  position: relative; z-index: 2; margin: -34px 10px 0; padding: 10px 12px; text-align: center; rotate: -3deg;
  background: #fff; color: #26134F; font: 900 12px/1.2 var(--font-display); text-transform: uppercase;
  clip-path: polygon(2% 8%, 98% 0, 100% 90%, 0 100%); box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

/* ---------- Пакеты ---------- */
.c-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.c-package { display: flex; flex-direction: column; gap: 6px; padding: 24px 20px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.c-package::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, var(--pink), var(--violet)); }
.c-package--1::before { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.c-package--2::before { background: linear-gradient(90deg, #FFB800, var(--pink)); }
.c-package-hours { font: 900 28px var(--font-display); margin: 0; background: linear-gradient(90deg, var(--pink), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-package-title { font-weight: 800; font-size: 18px; margin: 0; }
.c-package-note { color: var(--muted); font-size: 14px; margin: 0; }
.c-package ul { margin: 6px 0; padding-left: 18px; }
.c-package-empty { margin: 8px 0; padding: 10px; border-radius: 12px; background: var(--cloud); color: var(--muted); font-weight: 700; font-size: 14px; text-align: center; }
.c-package-price { font-weight: 800; margin: auto 0 10px; padding-top: 8px; }

/* ---------- Куклы, галерея ---------- */

.stock-tag {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; white-space: nowrap;
}
.c-photo--ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--violet), var(--pink)); color: #fff; font-weight: 800; }

/* ---------- Кафе: праздничный стол ---------- */
#cafe-section { padding-top: 40px; }
.c-cafe-card {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: center; max-width: 1060px; margin: 0 auto;
  padding: 28px; border-radius: 32px; background: linear-gradient(120deg, #FFF4DE, #FFE3F0); box-shadow: var(--shadow); overflow: hidden;
}
.c-cafe-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #FF7A1A; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .03em; }
.c-cafe-title { font: 900 clamp(24px, 3vw, 34px) var(--font-display); text-transform: uppercase; margin: 10px 0 14px; color: var(--text); }
.c-cafe-perks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-cafe-perks li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .8);
  transition: transform .25s ease, box-shadow .25s ease; }
.c-cafe-perks li:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 122, 26, .18); }
.c-cafe-perks span { grid-row: span 2; font-size: 28px; }
.c-cafe-perks b { font-size: 15px; line-height: 1.2; }
.c-cafe-perks small { color: var(--muted); font-size: 13px; line-height: 1.25; }
.c-cafe-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.c-chip { padding: 6px 12px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 4px 10px rgba(255, 122, 26, .15); }
.c-cafe-card.is-live .c-chip { animation: c-chip 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes c-chip { 0%, 14%, 100% { background: #fff; transform: none; } 5% { background: #FFE07A; transform: translateY(-4px) scale(1.06); } }
.c-cafe-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.c-cafe-foot small { color: var(--muted); font-weight: 700; font-size: 13px; }

/* Сцена: гирлянда, дети за столом, блюда прилетают по очереди */
.c-feast { position: relative; height: 330px; }
.c-feast-bunting { position: absolute; left: 4%; right: 4%; top: 6px; height: 40px; display: flex; justify-content: space-between;
  border-top: 2px solid rgba(123, 60, 255, .35); border-radius: 50% 50% 0 0 / 30px 30px 0 0; }
.c-feast-bunting i { width: 26px; height: 30px; margin-top: calc(sin(var(--i) * 20deg) * 6px + 6px); transform-origin: top;
  background: hsl(calc(var(--i) * 45) 90% 62%); clip-path: polygon(0 0, 100% 0, 50% 100%); animation: c-flag 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes c-flag { 50% { rotate: 8deg; } }
.c-feast-kids { position: absolute; left: 6%; right: 6%; bottom: 118px; display: flex; justify-content: space-around; }
.c-kid { font-size: 58px; line-height: 1; transform-origin: 50% 100%; }
.c-cafe-card.is-live .c-kid { animation: c-kid 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1s + .5s); }
@keyframes c-kid { 0%, 20%, 100% { transform: none; } 6% { transform: translateY(-14px) rotate(-6deg); } 12% { transform: translateY(-4px) rotate(4deg); } }
.c-feast-table { position: absolute; left: 0; right: 0; bottom: 30px; height: 96px; border-radius: 22px 22px 40px 40px;
  background: linear-gradient(180deg, #fff 0 34%, #FF6FB0 34% 40%, #fff 40% 100%);
  box-shadow: 0 18px 30px rgba(180, 60, 110, .2), inset 0 -10px 0 rgba(255, 111, 176, .15); }
.c-feast-table::before, .c-feast-table::after { content: ''; position: absolute; bottom: -26px; width: 12px; height: 30px; border-radius: 6px; background: #E9B98C; }
.c-feast-table::before { left: 14%; } .c-feast-table::after { right: 14%; }
.c-dish { position: absolute; top: -26px; left: calc(8% + var(--i) * (74% / (var(--n) - 1))); font-size: 42px; line-height: 1; opacity: 0;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .15)); }
.c-cafe-card.is-live .c-dish { animation: c-dish 6s cubic-bezier(.3, 1.5, .5, 1) infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes c-dish {
  0% { opacity: 0; transform: translateY(-160px) rotate(-40deg) scale(.6); }
  8% { opacity: 1; transform: translateY(0) rotate(0) scale(1.15); }
  12%, 80% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(6px) scale(.7); }
}
.c-cake { position: absolute; left: 50%; top: -58px; translate: -50% 0; font-size: 60px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18)); animation: c-bob2 3s ease-in-out infinite; }
.c-feast-hearts i { position: absolute; bottom: 150px; font-style: normal; font-size: 22px; opacity: 0; }
.c-feast-hearts i:nth-child(1) { left: 16%; } .c-feast-hearts i:nth-child(2) { left: 40%; } .c-feast-hearts i:nth-child(3) { left: 62%; } .c-feast-hearts i:nth-child(4) { left: 84%; }
.c-cafe-card.is-live .c-feast-hearts i { animation: c-heart 3s ease-out infinite; }
.c-feast-hearts i:nth-child(2) { animation-delay: .8s !important; } .c-feast-hearts i:nth-child(3) { animation-delay: 1.6s !important; } .c-feast-hearts i:nth-child(4) { animation-delay: 2.3s !important; }
@keyframes c-heart { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-110px) scale(1.2); } }

@media (max-width: 860px) {
  .c-cafe-card { grid-template-columns: 1fr; padding: 20px; gap: 6px; }
  .c-feast { height: 260px; order: -1; }
  .c-kid { font-size: 42px; }
  .c-feast-kids { bottom: 126px; }
  .c-dish { font-size: 32px; top: -18px; }
  .c-cake { font-size: 46px; top: -44px; }
  .c-cafe-perks { grid-template-columns: 1fr 1fr; gap: 8px; }
  .c-cafe-perks li { padding: 8px; }
  .c-cafe-perks small { display: block; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-dish { opacity: 1; animation: none !important; }
  .c-kid, .c-chip, .c-feast-bunting i, .c-cake, .c-feast-hearts i { animation: none !important; }
}

/* ---------- Финальный баннер и контакты ---------- */
.c-final { padding-bottom: 60px; }
.c-final .container { position: relative; z-index: 2; }
.c-final-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.c-logo-big b { display: block; font: 900 clamp(40px, 5.5vw, 70px)/1 var(--font-display); text-transform: uppercase; background: linear-gradient(180deg, #fff, #D6C4FF); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 var(--violet)); }
.c-logo-big small { font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #CBB8FF; }
.c-script { font: 700 34px/1.05 var(--font-script); color: #F3ECFF; rotate: -6deg; margin: 0; }
.c-contacts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 22px; }
.c-contacts-info { padding: 26px; border-radius: 24px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.c-contacts-info p { display: flex; gap: 10px; font-size: 17px; margin: 0 0 12px; }
.c-contacts-info a { color: #fff; font-weight: 800; }
.c-contacts-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.c-map { border-radius: 24px; overflow: hidden; min-height: 320px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); background: #2A1360; }
.c-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------- Планшет и телефон ---------- */
@media (max-width: 1100px) {
  .c-features { grid-template-columns: repeat(3, 1fr); }
  .c-turnkey-grid { grid-template-columns: 1fr; }
  .c-turnkey-text { text-align: center; }
}
@media (max-width: 860px) {
  body.club .logo-text { font-size: 18px; }
  .c-hero { padding: 24px 0 90px; }
  .c-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .c-hero .c-title { font-size: clamp(34px, 11vw, 54px); }
  .c-lead { font-size: 18px; }
  .c-perks { gap: 12px; justify-content: space-between; }
  .c-perks li { font-size: 12px; max-width: 76px; }
  .c-perks span { width: 46px; height: 46px; font-size: 24px; }
  .c-hero-art { height: 420px; margin-top: 20px; }
  .c-portal { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  .c-portal-sign b { font-size: 18px; } .c-portal-sign { top: -26px; padding: 6px 14px 8px; white-space: nowrap; }
  .c-portal-sign small { font-size: 8px; letter-spacing: .08em; }
  .c-hero-doll--0 { left: -2%; top: 4%; height: 190px; }
  .c-hero-doll--1 { right: -2%; top: 0; height: 190px; }
  .c-hero-doll--2 { right: 0; bottom: -10px; height: 200px; }
  .c-sticker { width: 110px; height: 110px; font-size: 10px; left: -2%; right: auto; bottom: 2%; padding: 12px; }
  .c-sticker span { font-size: 16px; }
  .c-balloon--1 { left: 36%; top: -4%; }
  .c-features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .c-feature-icon { font-size: 46px; }
  .c-dark { padding: 100px 0; }
  .c-steps { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .c-final-row { justify-content: center; text-align: center; }
  .c-contacts { grid-template-columns: 1fr; }
}

/* ---------- Переходы между блоками ---------- */
main > section.has-divider { overflow: visible; }
main > section.has-divider.c-light, main > section.has-divider.c-dark { overflow-x: clip; }
.c-divider {
  --h: 160px; --shift: 0px;
  position: absolute; left: -40px; right: -40px; top: calc(var(--h) * -1 + 2px); height: var(--h); z-index: 4; pointer-events: none; overflow: hidden;
}
.c-divider--flip { top: -2px; transform: scaleY(-1); }
/* Полоса всегда шире экрана с запасом слева — на любом мониторе краёв не видно */
.c-strip { position: absolute; left: -400px; bottom: 0; width: max(2880px, calc(200vw + 800px)); height: var(--h); }
@keyframes c-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.c-cloud--back { opacity: .45; animation: c-drift 70s linear infinite; translate: calc(var(--shift) * -1.4) 0; }
.c-cloud--mid { opacity: .75; animation: c-drift 48s linear infinite reverse; translate: var(--shift) 0; filter: drop-shadow(0 -4px 10px rgba(60, 20, 140, .12)); }
.c-cloud--front { animation: c-drift 90s linear infinite; translate: calc(var(--shift) * -.6) 0; filter: drop-shadow(0 -8px 16px rgba(60, 20, 140, .22)); }

.c-divider--wave, .c-divider--balloons, .c-divider--confetti { --h: 130px; overflow: visible; }
.c-wave--back { opacity: .5; animation: c-drift 26s linear infinite reverse; translate: var(--shift) 0; }
.c-wave--front { animation: c-drift 18s linear infinite; translate: calc(var(--shift) * -1) 0; filter: drop-shadow(0 -6px 12px rgba(60, 20, 140, .15)); }
.c-divider--wave, .c-divider--balloons, .c-divider--confetti { clip-path: inset(-200px 0 0 0); }
.c-divider--wave .c-strip, .c-divider--balloons .c-strip, .c-divider--confetti .c-strip { overflow: visible; }

.c-spark { position: absolute; bottom: 40%; width: 18px; height: 18px; background: #FFD23F;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: c-spark 3s ease-in-out infinite; animation-delay: var(--t); }
@keyframes c-spark { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 90deg; } }

.c-rise-balloon { position: absolute; bottom: 20px; width: 34px; height: 42px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 35% 30%, #fff8, var(--c) 55%); animation: c-rise-b 7s ease-in infinite; animation-delay: var(--t); opacity: 0; }
.c-rise-balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 40px; background: rgba(38, 19, 79, .3); }
@keyframes c-rise-b { 0% { opacity: 0; transform: translateY(40px); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-190px) translateX(20px) rotate(8deg); } }
.c-divider--flip .c-rise-balloon { display: none; }

.c-confetti { position: absolute; top: -40px; width: 10px; height: 16px; border-radius: 2px; background: var(--c);
  animation: c-fall 4.5s linear infinite; animation-delay: var(--t); rotate: var(--r); }
@keyframes c-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(150px) rotate(540deg); opacity: 0; } }

/* Две перекрещенные бегущие ленты */
.c-divider--ticker { --h: 0px; top: 0; height: 0; overflow: visible; z-index: 6; }
.c-divider--ticker.c-divider--flip { transform: none; }
.c-ticker { position: absolute; left: -5%; right: -5%; top: -26px; height: 52px; display: flex; align-items: center; overflow: hidden; box-shadow: 0 10px 24px rgba(38, 19, 79, .25); }
.c-ticker--pink { background: linear-gradient(90deg, var(--pink), var(--violet)); color: #fff; rotate: -2deg; }
.c-ticker--yellow { background: var(--accent); color: #3A137A; rotate: 1.6deg; }
.c-ticker-track { display: flex; gap: 34px; width: max-content; white-space: nowrap; font: 900 16px var(--font-display); text-transform: uppercase; padding-left: 34px; }
.c-ticker--pink .c-ticker-track { animation: c-drift 40s linear infinite; }
.c-ticker--yellow .c-ticker-track { animation: c-drift 46s linear infinite reverse; }
.c-ticker-track span { display: inline-flex; gap: 10px; align-items: center; }
.c-ticker-track span::after { content: '✦'; margin-left: 24px; opacity: .7; }
main > section.after-ticker { padding-top: 110px; }

/* ---------- Украшения в светлых блоках ---------- */
.c-decos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c-deco { position: absolute; display: block; width: 30px; height: 30px; opacity: .7; animation: c-bob 7s ease-in-out infinite; animation-delay: var(--delay); }
.c-deco svg { width: 100%; height: 100%; display: block; overflow: visible; }
.c-deco--planet { width: 52px; height: 52px; opacity: .45; }
.c-deco--sparkle { width: 22px; height: 22px; }
@keyframes c-bob { 50% { transform: translateY(-16px) rotate(14deg); } }

/* ---------- Праздники плиткой ---------- */
.c-holidays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px; }
.c-holiday {
  display: grid; gap: 6px; align-content: start; padding: 0; border: 0;
  background: transparent; color: var(--text); text-align: center; font: inherit; cursor: pointer;
}
.c-holiday:focus-visible { outline: 3px solid var(--pink); outline-offset: 6px; border-radius: 26px; }
.c-holiday-photo { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 4px #fff; transition: transform .35s ease, box-shadow .35s ease; }
.c-holiday:nth-child(odd) .c-holiday-photo { rotate: -2deg; } .c-holiday:nth-child(even) .c-holiday-photo { rotate: 2deg; }
.c-holiday-photo .c-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .5s ease; }
.c-holiday:hover .c-holiday-photo { transform: translateY(-8px) rotate(0deg); box-shadow: 0 22px 44px rgba(123, 60, 255, .3), 0 0 0 4px var(--pink); }
.c-holiday:hover .c-photo { scale: 1.1; }
.c-holiday-icon { position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); transition: rotate .4s ease; }
.c-holiday:hover .c-holiday-icon { rotate: -15deg; }
.c-holiday b { font: 900 14px var(--font-display); text-transform: uppercase; margin-top: 10px; }
.c-holiday span:last-child { color: var(--muted); font-size: 14px; line-height: 1.3; }

/* ---------- Куклы: бегущая лента ---------- */
.c-marquee { overflow: hidden; padding: 10px 0 24px; margin: 0 calc((100vw - 100%) / -2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.c-marquee-track { display: flex; gap: 18px; width: max-content; animation: c-marquee var(--dur, 60s) linear infinite; }
.c-marquee-track .card { flex: 0 0 210px; }
.c-marquee .card-price { display: none; }
.c-marquee-track .card:nth-child(odd) { rotate: -1.5deg; } .c-marquee-track .card:nth-child(even) { rotate: 1.5deg; translate: 0 10px; }
@keyframes c-marquee { to { transform: translateX(calc(-50% - 9px)); } }
@media (hover: hover) and (pointer: fine) {
  .c-marquee:hover .c-marquee-track { animation-play-state: paused; }
}

/* ---------- Галерея мозаикой ---------- */
.c-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 230px; gap: 18px; }
.c-gallery .pcard { aspect-ratio: auto; height: 100%; border-radius: 26px; }
.c-gallery .pcard:first-child { grid-row: span 2; }
.c-gallery .pcard:nth-child(2) { grid-column: span 2; }
.c-gallery .pcard:nth-child(3) { grid-column: span 2; }

/* ---------- Анимации первого экрана ---------- */
.c-letter { display: inline-block; font-style: normal; animation: c-letter .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes c-letter { from { opacity: 0; transform: translateY(40px) scale(.4) rotate(-20deg); } }
.c-pop { animation: c-pop .9s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes c-pop { from { opacity: 0; transform: scale(.2) rotate(-12deg); } }
.c-lead, .c-hero-actions, .c-perks { animation: c-rise .8s ease both; }
.c-lead { animation-delay: .9s; } .c-hero-actions { animation-delay: 1.05s; } .c-perks { animation-delay: 1.2s; }
@keyframes c-rise { from { opacity: 0; transform: translateY(24px); } }
.c-perks span { animation: c-bob2 3.2s ease-in-out infinite; }
.c-perks li:nth-child(2) span { animation-delay: -.8s; } .c-perks li:nth-child(3) span { animation-delay: -1.6s; } .c-perks li:nth-child(4) span { animation-delay: -2.4s; }
@keyframes c-bob2 { 50% { transform: translateY(-6px); } }
.c-hero-art > * { animation: c-enter 1s cubic-bezier(.3, 1.4, .5, 1) both; }
.c-hero-art > :nth-child(1) { animation-delay: .5s; } .c-hero-art > :nth-child(2) { animation-delay: .6s; } .c-hero-art > :nth-child(3) { animation-delay: .7s; }
.c-hero-art > .c-portal { animation-delay: .2s; } .c-hero-art > .c-hero-doll--0 { animation-delay: .8s; }
.c-hero-art > .c-hero-doll--1 { animation-delay: 1s; } .c-hero-art > .c-hero-doll--2 { animation-delay: 1.2s; } .c-hero-art > .c-sticker { animation-delay: 1.5s; }
@keyframes c-enter { from { opacity: 0; scale: .5; } }
.c-hero-doll img { animation: c-sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
.c-hero-doll--1 img { animation-delay: -1.7s; } .c-hero-doll--2 img { animation-delay: -3.1s; }
@keyframes c-sway { 50% { transform: rotate(3deg) translateY(-6px); } }
.c-sticker { animation: c-enter 1s cubic-bezier(.3, 1.4, .5, 1) 1.5s both, c-wiggle 4s ease-in-out 2.5s infinite; }
@keyframes c-wiggle { 0%, 100% { rotate: -12deg; } 50% { rotate: -4deg; scale: 1.05; } }

/* Блики на градиентных кнопках */
.c-btn--grad, .c-btn--yellow { position: relative; overflow: hidden; isolation: isolate; }
.c-btn--grad::after, .c-btn--yellow::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); translate: -120% 0;
  animation: c-shine 3.5s ease-in-out infinite;
}
@keyframes c-shine { 60%, 100% { translate: 120% 0; } }

/* Иконки «Что вас ждёт» слегка покачиваются по очереди */
.c-feature-icon { animation: c-bob2 3.6s ease-in-out infinite; }
.c-feature:nth-child(2) .c-feature-icon { animation-delay: -.6s; } .c-feature:nth-child(3) .c-feature-icon { animation-delay: -1.2s; }
.c-feature:nth-child(4) .c-feature-icon { animation-delay: -1.8s; } .c-feature:nth-child(5) .c-feature-icon { animation-delay: -2.4s; }
.c-feature:nth-child(6) .c-feature-icon { animation-delay: -3s; }

@media (max-width: 1100px) {
  .c-holidays { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .c-divider--clouds { --h: 110px; }
  .c-ticker { height: 42px; }
  .c-ticker-track { font-size: 13px; }
  .c-hero { padding-bottom: 110px; }
  .c-dark { padding: 110px 0; }
  .c-light { padding: 50px 0 80px; }
  .c-holidays { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .c-marquee-track .card { flex-basis: 160px; }
  .c-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .c-gallery .pcard:first-child { grid-column: span 2; grid-row: span 2; }
  .c-gallery .pcard:nth-child(2), .c-gallery .pcard:nth-child(3) { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .c-strip, .c-spark, .c-rise-balloon, .c-confetti, .c-ticker-track, .c-steam i, .c-deco, .c-marquee-track, .c-letter, .c-pop, .c-hero-art > *, .c-hero-doll img, .c-perks span, .c-feature-icon, .c-btn::after, .c-sticker { animation: none !important; }
}

/* Подпись поверх карты */
.c-map { position: relative; }
.c-map-label {
  position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px);
  padding: 10px 16px 10px 12px; border-radius: 16px; background: #fff; color: #26134F; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); pointer-events: none;
}
.c-map-label span { font-size: 26px; }
.c-map-label b { display: block; font-size: 15px; line-height: 1.2; }
.c-map-label small { color: #6B5B8E; font-size: 13px; }

/* ---------- Первый экран: общая картинка из круга ---------- */
.c-hero-art { height: 600px; }
/* Круг привязан к самой картинке: всегда по центру группы, на любом экране */
.c-crew { left: 50%; top: 52%; width: 112%; translate: -50% -50%; }
.c-crew:hover { z-index: 1; }
.c-ring-wrap { position: absolute; left: 50%; top: 46%; width: 84%; aspect-ratio: 1; translate: -50% -50%; }
.c-ring { inset: 0; }
.c-ring-inner { position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #3B1E8F, #1B0B45 70%); box-shadow: inset 0 0 60px rgba(123, 60, 255, .6); }
/* Низ картинки обрезан ровно — растворяем его в фоне */
/* Срезаем кусок платья, торчащий за круг слева снизу */
.c-crew img { clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 12% 82%, 0 74%); position: relative; width: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); animation: c-crew 6s ease-in-out infinite; }
@keyframes c-crew { 50% { transform: translateY(-8px); } }
.c-orb { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8A5CFF 45%, #4B1FB0); box-shadow: 0 0 20px rgba(138, 92, 255, .6); animation: c-float 6s ease-in-out infinite; }
.c-orb--1 { left: -2%; top: 20%; }
.c-orb--2 { right: -4%; bottom: 26%; width: 34px; height: 34px; background: radial-gradient(circle at 35% 30%, #fff, #3FD8FF 45%, #1B6FB0); animation-delay: -2s; }
.c-hero-art .c-balloon--1 { left: 8%; top: 2%; }
.c-hero-art .c-balloon--3 { right: 4%; left: auto; top: 0; }
.c-hero-art .c-balloon--2 { left: -6%; bottom: 30%; }
.c-hero-art .c-planet--1 { left: -4%; bottom: 4%; }
/* Наклейка — в пустом углу над кругом, лица не закрывает */
.c-hero-art .c-sticker { left: -10%; right: auto; top: -2%; bottom: auto; width: 128px; height: 128px; font-size: 11px; }
@media (max-width: 860px) {
  .c-hero-art { height: 330px; margin-top: 80px; }
  .c-crew { width: 104%; top: 54%; }
  .c-hero-art .c-sticker { left: -2%; top: -8%; width: 92px; height: 92px; font-size: 8px; padding: 10px; }
  .c-hero-art .c-sticker span { font-size: 12px; }
  .c-hero-art .c-planet--1 { width: 44px; height: 44px; left: -2%; bottom: auto; top: 44%; }
  .c-hero-art .c-balloon--2 { display: none; }
  .c-hero-art .c-balloon--1 { left: auto; right: 22%; top: -6%; width: 44px; height: 54px; }
  .c-hero-art .c-balloon--3 { right: 2%; top: 0; width: 38px; height: 46px; }
  .c-orb--1 { left: 4%; top: 64%; width: 30px; height: 30px; }
}

/* Текстовый блок «VR-клуб в Харцызске» */
.c-seo .container { max-width: 860px; }
.c-seo p { margin: 0 0 14px; color: var(--muted, #5b4a78); font-size: 17px; line-height: 1.65; }

/* На телефонах ленты движутся, но тяжёлый декоративный фон и параллакс отключены. */
@media (max-width: 860px) {
  .c-light, .c-dark:not(.c-hero) { content-visibility: auto; contain-intrinsic-size: auto 850px; }
  /* Лента-разделитель выступает над разделом — content-visibility её обрезал, у таких разделов отключаем */
  .c-light.after-ticker, .c-dark.after-ticker { content-visibility: visible; }
  .c-deco, .c-spark, .c-rise-balloon, .c-confetti { display: none !important; }
  .c-stars, .c-dark::before, .c-portal-ring, .c-balloon, .c-orb, .c-sticker,
  .c-perks span, .c-feature-icon, .c-cloud, .c-wave, .c-cake,
  .c-feast-bunting i, .c-feast-hearts i, .c-kid, .c-dish, .c-chip,
  .c-btn::after { animation: none !important; }
  .c-crew, .c-hero-doll img, .c-cloud, .c-wave { filter: none !important; }
}