.class-detail {
  --class-accent: #ff4faf;
  --class-accent-soft: #ffe9f6;
  --class-second: #55c9ed;
  --class-night: #17182d;
}

.class-detail--advanced { --class-accent: #ff4f7d; --class-accent-soft: #fff0f3; --class-second: #8472ff; }
.class-detail--vocal { --class-accent: #8a5cff; --class-accent-soft: #f2efff; --class-second: #ffca3a; }
.class-detail--adult { --class-accent: #39a9c9; --class-accent-soft: #eaf9fd; --class-second: #ff7db8; }
.class-detail--old { --class-accent: #dc4f6c; --class-accent-soft: #fff0f4; --class-second: #4ec4ce; }

.class-detail .sub-hero { min-height: 680px; }
.class-detail .sub-hero__media img { object-position: center 48%; }
.class-detail--beginner .sub-hero__media img { object-position: center 28%; }
.class-detail--advanced .sub-hero__media img { object-position: center 54%; }
.class-detail--vocal .sub-hero__media img { object-position: center 33%; }
.class-detail--adult .sub-hero__media img { object-position: center 47%; }
.class-detail .sub-hero h1 { max-width: 9.2em; }
.class-detail .sub-hero h1 span { display: block; margin-bottom: 10px; color: #ff8acb; font-size: .38em; line-height: 1.35; }

.class-facts { position: relative; z-index: 4; background: #fff; }
.class-facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -30px; border: 1px solid var(--sub-line); border-top: 5px solid var(--class-accent); background: #fff; box-shadow: 0 34px 80px -56px rgba(17,19,38,.46); }
.class-facts__item { min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px 26px; border-right: 1px solid var(--sub-line); }
.class-facts__item:last-child { border-right: 0; }
.class-facts__item small { color: var(--class-accent); font-family: "Inter", system-ui, sans-serif; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.class-facts__item strong { font-size: 20px; line-height: 1.35; }
.class-facts__item span { color: var(--sub-muted); font-size: 11px; font-weight: 700; }

.class-about { background: #fff; }
.class-about__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(46px, 7vw, 92px); align-items: center; }
.class-about__media { position: relative; min-height: 620px; margin: 0; overflow: hidden; }
.class-about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.class-about__media figcaption { position: absolute; right: 0; bottom: 0; padding: 15px 20px; color: #fff; background: var(--class-night); font-size: 10px; font-weight: 900; }
.class-about__copy .sub-heading { max-width: 9em; }
.class-about__points { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 34px 0 0; padding: 1px; background: var(--sub-line); list-style: none; }
.class-about__points li { min-height: 118px; padding: 22px; background: #fff; }
.class-about__points b { display: block; margin-bottom: 10px; color: var(--class-accent); font-family: "Inter", system-ui, sans-serif; font-size: 10px; }
.class-about__points span { display: block; font-size: 13px; font-weight: 800; line-height: 1.65; }

.class-flow { background: linear-gradient(180deg, var(--class-accent-soft), #fff 76%); }
.class-flow__head { display: grid; grid-template-columns: .86fr 1.14fr; gap: 64px; align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--sub-line); }
.class-flow__body { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); gap: clamp(34px, 6vw, 76px); align-items: start; margin-top: 48px; }
.class-flow__gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 360px 180px; gap: 12px; }
.class-flow__gallery figure { position: relative; margin: 0; overflow: hidden; background: #ddd; }
.class-flow__gallery figure:first-child { grid-column: 1 / 3; }
.class-flow__gallery img { width: 100%; height: 100%; object-fit: cover; }
.class-flow__gallery figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 11px; color: #fff; background: rgba(17,19,38,.84); font-family: "Inter", system-ui, sans-serif; font-size: 9px; font-weight: 900; }
.class-flow__steps { margin: 0; padding: 0; border-top: 1px solid var(--sub-line); list-style: none; counter-reset: class-step; }
.class-flow__steps li { position: relative; min-height: 135px; padding: 25px 20px 22px 84px; border-bottom: 1px solid var(--sub-line); counter-increment: class-step; }
.class-flow__steps li::before { content: counter(class-step, decimal-leading-zero); position: absolute; top: 25px; left: 20px; color: var(--class-accent); font-family: "Inter", system-ui, sans-serif; font-size: 24px; font-weight: 900; }
.class-flow__steps strong { display: block; font-size: 18px; line-height: 1.5; }
.class-flow__steps p { margin: 8px 0 0; color: var(--sub-muted); font-size: 12px; line-height: 1.8; }

.class-scene { padding: 0; color: #fff; background: var(--class-night); }
.class-scene__copy { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: end; padding: 96px 0 48px; }
.class-scene .sub-heading { color: #fff; }
.class-scene .sub-lead { color: rgba(255,255,255,.68); }
.class-scene__marquee { position: relative; width: 100%; overflow: hidden; isolation: isolate; }
.class-scene__marquee.sub-reveal { opacity: 1; transform: none; }
.class-scene__marquee::before,
.class-scene__marquee::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(18px, 4vw, 64px); pointer-events: none; }
.class-scene__marquee::before { left: 0; background: linear-gradient(90deg, var(--class-night), rgba(23,24,45,0)); }
.class-scene__marquee::after { right: 0; background: linear-gradient(270deg, var(--class-night), rgba(23,24,45,0)); }
.class-scene__track { position: relative; z-index: 1; display: flex; gap: 14px; width: max-content; padding: 0 7px; animation: class-scene-marquee 44s linear infinite; animation-iteration-count: infinite; animation-fill-mode: none; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.class-scene__track figure { position: relative; flex: 0 0 clamp(330px, 34vw, 500px); height: 330px; margin: 0; overflow: hidden; background: #25263c; }
.class-scene__track img { width: 100%; height: 100%; object-fit: cover; }
.class-scene__track figcaption { position: absolute; right: 14px; bottom: 14px; padding: 8px 11px; color: var(--class-night); background: #fff; font-size: 9px; font-weight: 900; }
.class-scene__track figure.is-portrait img { object-position: center 24%; }
.class-scene__track figure.is-portrait img[src$="vocal-solo-2.jpg"] { object-position: center 40%; }
@keyframes class-scene-marquee { to { transform: translate3d(-50%, 0, 0); } }
.class-scene__note { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 34px 0 84px; }
.class-scene__note p { margin: 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.9; }

.class-info { background: #fff; }
.class-info__head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: end; }
.class-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 44px; border: 1px solid var(--sub-line); background: var(--sub-line); }
.class-info__panel { padding: clamp(30px,4vw,50px); background: #fff; }
.class-info__panel > small { color: var(--class-accent); font-family: "Inter", system-ui, sans-serif; font-size: 9px; font-weight: 900; }
.class-info__panel h3 { margin: 12px 0 26px; font-size: 23px; }
.class-info__rows { margin: 0 0 28px; }
.class-info__row { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--sub-line); }
.class-info__row:last-child { border-bottom: 1px solid var(--sub-line); }
.class-info__row dt { color: var(--sub-muted); font-size: 11px; font-weight: 800; }
.class-info__row dd { margin: 0; font-size: 13px; font-weight: 800; }
.class-info__price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 24px; }
.class-info__price span { font-size: 12px; font-weight: 800; }
.class-info__price strong { color: var(--class-accent); font-family: "Inter", system-ui, sans-serif; font-size: clamp(48px,6vw,72px); line-height: 1; }
.class-info__tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sub-line); }
.class-info__ticket { padding: 15px 17px; background: var(--class-accent-soft); }
.class-info__ticket span { display: block; color: var(--sub-muted); font-size: 10px; }
.class-info__ticket strong { font-size: 17px; }
.class-info__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; color: var(--sub-muted); font-size: 10px; font-weight: 800; }

.class-faq { background: #f7f8fc; }
.class-faq__layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; }
.class-faq__list { border-top: 1px solid var(--sub-line); }
.class-faq__item { padding: 23px 0; border-bottom: 1px solid var(--sub-line); }
.class-faq__item h3 { margin: 0 0 9px; font-size: 16px; }
.class-faq__item p { margin: 0; color: var(--sub-muted); font-size: 13px; line-height: 1.85; }
@media (max-width: 780px) {
  .class-detail .sub-hero { min-height: 610px; }
  .class-detail .sub-hero__media img { object-position: center; }
  .class-detail--beginner .sub-hero__media img { object-position: center 28%; }
  .class-detail--vocal .sub-hero__media img { object-position: center 25%; }
  .class-facts__grid { grid-template-columns: 1fr 1fr; margin-top: -18px; }
  .class-facts__item { min-height: 116px; padding: 18px; }
  .class-facts__item:nth-child(2) { border-right: 0; }
  .class-facts__item:nth-child(-n+2) { border-bottom: 1px solid var(--sub-line); }
  .class-facts__item strong { font-size: 16px; }
  .class-about__grid, .class-flow__head, .class-scene__copy, .class-info__head, .class-faq__layout { grid-template-columns: 1fr; gap: 28px; }
  .class-about__media { min-height: 440px; }
  .class-about__points { grid-template-columns: 1fr; }
  .class-about__points li { min-height: 0; }
  .class-flow__body { grid-template-columns: 1fr; gap: 30px; }
  .class-flow__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 150px; }
  .class-flow__gallery figure:first-child { grid-column: 1 / 3; }
  .class-flow__steps li { min-height: 0; padding: 58px 0 22px 62px; }
  .class-flow__steps li::before { top: 22px; left: 0; }
  .class-scene__track { gap: 10px; }
  .class-scene__track { animation-play-state: running; }
  .class-scene__track figure { flex-basis: 280px; height: 210px; }
  .class-scene__note, .class-info__grid { grid-template-columns: 1fr; gap: 1px; }
  .class-info__row { grid-template-columns: 76px 1fr; }
  .class-info__tickets { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .class-detail .sub-hero__media img { animation: none; }
  .class-scene__marquee { overflow-x: auto; }
  .class-scene__marquee::before, .class-scene__marquee::after { display: none; }
  .class-scene__track { animation: none; }
}