/* ==========================================================================
   未央舞蹈工作室 V3 — 米色多彩风格 · 全功能版
   ========================================================================== */

:root {
  --color-void: #ece3d4;
  --color-obsidian: #e3d9c7;
  --color-slate-dark: #f5f0e6;
  --color-moon: #2a2418;
  --color-mist: #6b6354;
  --color-haze: #9a9080;
  --color-glass: rgba(42, 36, 24, 0.04);
  --color-glass-border: rgba(42, 36, 24, 0.1);
  --color-divider: rgba(42, 36, 24, 0.08);
  --color-spectrum-blue: #2563eb;
  --color-spectrum-cyan: #06b6d4;
  --color-spectrum-green: #22c55e;
  --color-spectrum-red: #ef4444;
  --color-spectrum-magenta: #ec4899;
  --gradient-spectrum: linear-gradient(135deg, #2563eb 0%, #ec4899 50%, #ef4444 100%);
  --gradient-spectrum-soft: linear-gradient(135deg, rgba(37,99,235,0.12) 0%, rgba(236,72,153,0.12) 50%, rgba(239,68,68,0.12) 100%);
  --color-link: #2563eb;
  --color-cta-text: #ffffff;
  --font-sf-pro-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
  --font-sf-pro-text: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
  --text-caption: 12px; --leading-caption: 1.33; --tracking-caption: -0.22px;
  --text-body-sm: 17px; --leading-body-sm: 1.47; --tracking-body-sm: -0.32px;
  --text-body: 20px; --leading-body: 1.47; --tracking-body: -0.2px;
  --text-subheading: 28px; --leading-subheading: 1.14; --tracking-subheading: -0.25px;
  --text-heading-sm: 32px; --leading-heading-sm: 1.19; --tracking-heading-sm: -0.16px;
  --text-heading: 56px; --leading-heading: 1.07; --tracking-heading: 0.22px;
  --text-heading-lg: 72px; --leading-heading-lg: 1.07; --tracking-heading-lg: 0.5px;
  --text-display: 96px; --leading-display: 1.07; --tracking-display: 1.15px;
  --font-weight-regular: 400; --font-weight-semibold: 600;
  --spacing-4: 4px; --spacing-8: 8px; --spacing-10: 10px; --spacing-12: 12px;
  --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px;
  --spacing-32: 32px; --spacing-40: 40px; --spacing-44: 44px; --spacing-48: 48px;
  --spacing-52: 52px; --spacing-76: 76px; --spacing-80: 80px; --spacing-100: 100px; --spacing-160: 160px;
  --page-max-width: 1440px; --content-max-width: 1024px; --section-gap: 120px;
  --card-padding: 28px; --element-gap: 10px;
  --radius-cards: 28px; --radius-images: 28px; --radius-buttons: 980px; --radius-tags: 999px;
  --placeholder-gradient: linear-gradient(135deg, #e3d9c7 0%, #ddd2bd 50%, #e3d9c7 100%);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sf-pro-text); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--color-moon); background-color: var(--color-void); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color 0.2s ease; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
video { background: var(--placeholder-gradient); }

body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(37,99,235,0.06), transparent 60%), radial-gradient(ellipse 60% 40% at 80% 30%, rgba(236,72,153,0.05), transparent 60%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(239,68,68,0.04), transparent 60%); z-index: -1; pointer-events: none; }

.container { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--spacing-40); }
.container-narrow { max-width: var(--content-max-width); }
.section { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
.section--tight { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }

.eyebrow { font-family: var(--font-sf-pro-display); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); background: var(--gradient-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.01em; margin-bottom: var(--spacing-12); display: inline-block; }
.display-heading { font-family: var(--font-sf-pro-display); font-weight: var(--font-weight-semibold); font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); color: var(--color-moon); }
.section-heading { font-family: var(--font-sf-pro-display); font-weight: var(--font-weight-semibold); font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--color-moon); }
.section-heading-sm { font-family: var(--font-sf-pro-display); font-weight: var(--font-weight-semibold); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); color: var(--color-moon); }
.lead { font-family: var(--font-sf-pro-text); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-mist); font-weight: var(--font-weight-regular); }
.body-text { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-mist); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); color: var(--color-haze); }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; height: 48px; background: rgba(236, 227, 212, 0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); z-index: 1000; border-bottom: 1px solid var(--color-glass-border); }
.nav__inner { max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 var(--spacing-12); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); }
.nav__brand { display: flex; align-items: center; gap: var(--spacing-10); text-decoration: none; white-space: nowrap; }
.nav__logo { width: 32px; height: 32px; object-fit: cover; border-radius: 8px; }
.nav__brand-text { font-family: var(--font-sf-pro-display); font-size: 17px; font-weight: var(--font-weight-semibold); color: var(--color-moon); letter-spacing: -0.01em; }
.nav__brand:hover { text-decoration: none; opacity: 0.85; }
.nav__links { display: flex; align-items: center; gap: var(--spacing-20); }
.nav__link { font-size: 12px; font-weight: var(--font-weight-regular); color: var(--color-mist); letter-spacing: -0.01em; text-decoration: none; opacity: 0.8; transition: opacity 0.2s ease; }
.nav__link:hover { opacity: 1; text-decoration: none; }
.nav__cta { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-cta-text); background: var(--gradient-spectrum); padding: 6px 16px; border-radius: var(--radius-buttons); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); }
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(236, 72, 153, 0.5); text-decoration: none; }
.nav__toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav__toggle span { width: 18px; height: 1.5px; background: var(--color-moon); transition: transform 0.3s ease, opacity 0.3s ease; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* 导航右侧操作区(语言切换 + 汉堡) */
.nav__actions { display: flex; align-items: center; gap: var(--spacing-8); flex-shrink: 0; }

/* 语言切换按钮 —— 简洁、克制的 pill,与导航 CTA 区分开 */
.lang-switch {
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  color: var(--color-moon);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-glass-border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  line-height: 1;
  min-width: 38px;
}
.lang-switch:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-spectrum-pink); transform: translateY(-1px); }
.lang-switch:active { transform: translateY(0); }
.lang-switch:focus-visible { outline: 2px solid var(--color-spectrum-pink); outline-offset: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8); font-family: var(--font-sf-pro-text); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-body-sm); padding: 12px 28px; border-radius: var(--radius-buttons); border: none; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; white-space: nowrap; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--gradient-spectrum); color: var(--color-cta-text); box-shadow: 0 0 24px rgba(236, 72, 153, 0.35); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(236, 72, 153, 0.55); text-decoration: none; }
.btn--ghost { background: var(--color-glass); color: var(--color-moon); border: 1px solid var(--color-glass-border); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgba(42, 36, 24, 0.08); border-color: rgba(42,36,24,0.2); text-decoration: none; }
.text-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-body-sm); color: var(--color-link); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link__arrow { transition: transform 0.2s ease; }
.text-link:hover .text-link__arrow { transform: translateX(3px); }
.badge { display: inline-block; background: var(--color-glass); border: 1px solid var(--color-glass-border); border-radius: var(--radius-tags); padding: 4px 12px; font-size: var(--text-caption); font-weight: var(--font-weight-regular); color: var(--color-mist); letter-spacing: var(--tracking-caption); }

/* Hero */
.hero { position: relative; height: 180vh; background: var(--color-void); }
.hero__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: flex-end; padding: 0 var(--spacing-40) var(--spacing-100); overflow: hidden; }
.hero__visual { position: absolute; inset: 0; z-index: 0; background: var(--placeholder-gradient); }
.hero__visual video, .hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(236, 227, 212, 0.95) 0%, rgba(236, 227, 212, 0.5) 35%, rgba(236, 227, 212, 0) 60%); pointer-events: none; }
.hero__content { position: relative; z-index: 1; max-width: 720px; padding-top: 48px; will-change: opacity, transform; }
.hero__eyebrow { font-family: var(--font-sf-pro-display); font-size: 21px; font-weight: var(--font-weight-semibold); color: var(--color-mist); letter-spacing: -0.012em; margin-bottom: var(--spacing-12); }
.hero__title { font-family: var(--font-sf-pro-display); font-weight: var(--font-weight-semibold); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--color-moon); margin-bottom: var(--spacing-20); }
.hero__sub { font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-mist); max-width: 560px; margin-bottom: var(--spacing-32); }
.hero__actions { display: flex; align-items: center; gap: var(--spacing-16); flex-wrap: wrap; }

/* Section header */
.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-24); margin-bottom: var(--spacing-52); flex-wrap: wrap; }
.section-header__lead { max-width: 640px; margin-top: var(--spacing-16); }

/* About */
.about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-20); margin-bottom: var(--spacing-80); }
.about-value { text-align: center; padding: var(--spacing-32) var(--spacing-20); }
.about-value__icon { font-size: 28px; margin-bottom: var(--spacing-12); background: var(--gradient-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.about-value__title { font-family: var(--font-sf-pro-display); font-size: 19px; font-weight: var(--font-weight-semibold); color: var(--color-moon); margin-bottom: var(--spacing-8); }
.about-value__desc { font-size: 14px; line-height: 1.5; color: var(--color-mist); }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-20); padding: var(--spacing-52) var(--spacing-40); background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); }
.stat { text-align: center; }
.stat__num { display: block; font-family: var(--font-sf-pro-display); font-size: 56px; font-weight: var(--font-weight-semibold); background: var(--gradient-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; letter-spacing: -0.005em; }
.stat__label { display: block; font-size: 14px; color: var(--color-mist); margin-top: var(--spacing-8); }

/* Courses */
.courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-20); }
.course-card { background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); padding: var(--card-padding); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.course-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(42, 36, 24, 0.08); }
.course-card__media { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; margin-bottom: var(--spacing-20); background: var(--placeholder-gradient); }
.course-card__media video { width: 100%; height: 100%; object-fit: cover; }
.course-card__title { font-family: var(--font-sf-pro-display); font-size: 24px; font-weight: var(--font-weight-semibold); color: var(--color-moon); letter-spacing: -0.009em; margin-bottom: var(--spacing-8); }
.course-card__desc { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-mist); margin-bottom: var(--spacing-16); }
.course-card__meta { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-top: auto; }
.course-card__detail { margin-top: var(--spacing-16); width: 100%; padding: 8px 20px; font-size: 14px; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--spacing-40); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgba(10, 10, 12, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal__panel { position: relative; z-index: 1; max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); padding: var(--spacing-40); transform: scale(0.95); transition: transform 0.3s ease; }
.modal.is-open .modal__panel { transform: scale(1); }
.modal__close { position: absolute; top: var(--spacing-16); right: var(--spacing-16); width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--color-glass); color: var(--color-moon); font-size: 16px; cursor: pointer; transition: background 0.2s ease; }
.modal__close:hover { background: rgba(42, 36, 24, 0.1); }
.modal__body h3 { font-family: var(--font-sf-pro-display); font-size: 28px; font-weight: var(--font-weight-semibold); color: var(--color-moon); margin-bottom: var(--spacing-16); }
.modal__body h4 { font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-moon); margin: var(--spacing-24) 0 var(--spacing-8); }
.modal__body p, .modal__body li { font-size: 15px; line-height: 1.6; color: var(--color-mist); }
.modal__body ul { padding-left: var(--spacing-20); }
.modal__body li { margin-bottom: 4px; }
.modal__body .modal__price { font-family: var(--font-sf-pro-display); font-size: 32px; font-weight: var(--font-weight-semibold); color: var(--color-moon); margin: var(--spacing-16) 0; }

/* Schedule */
.filter-tags { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-bottom: var(--spacing-24); }
.filter-tag { font-family: var(--font-sf-pro-text); font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: var(--radius-tags); border: 1px solid var(--color-glass-border); background: var(--color-glass); color: var(--color-mist); cursor: pointer; transition: all 0.2s ease; }
.filter-tag:hover { color: var(--color-moon); border-color: rgba(42, 36, 24, 0.2); }
.filter-tag.is-active { background: var(--gradient-spectrum); color: var(--color-cta-text); border-color: transparent; font-weight: 600; }
.schedule { background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); padding: var(--spacing-40); overflow: hidden; }
.schedule__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schedule__table { width: 100%; border-collapse: separate; border-spacing: var(--spacing-4); min-width: 640px; }
.schedule__table th, .schedule__table td { padding: var(--spacing-12) var(--spacing-8); text-align: center; font-size: 14px; vertical-align: middle; }
.schedule__table thead th { font-family: var(--font-sf-pro-display); font-weight: var(--font-weight-semibold); color: var(--color-moon); font-size: 15px; }
.schedule__table tbody th { font-weight: var(--font-weight-regular); color: var(--color-haze); text-align: left; white-space: nowrap; width: 84px; }
.schedule__table td { color: var(--color-mist); background: var(--color-obsidian); border-radius: 14px; transition: opacity 0.3s ease; }
.schedule__table td.is-dimmed { opacity: 0.2; }
.schedule__table td.is-highlighted { box-shadow: inset 0 0 0 2px var(--color-spectrum-blue); }
.schedule__slot { display: block; font-weight: var(--font-weight-semibold); color: var(--color-moon); }
.schedule__slot-sub { display: block; font-size: 12px; color: var(--color-haze); margin-top: 2px; }
.schedule__legend { display: flex; gap: var(--spacing-24); margin-top: var(--spacing-24); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: var(--spacing-8); font-size: var(--text-caption); color: var(--color-haze); }
.legend-dot { width: 10px; height: 10px; border-radius: var(--radius-tags); background: var(--color-obsidian); }

/* Teachers */
.teachers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
.teacher-card { display: flex; flex-direction: column; }
.teacher-card__media { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-images); overflow: hidden; margin-bottom: var(--spacing-20); background: var(--placeholder-gradient); }
.teacher-card__media img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card__name { font-family: var(--font-sf-pro-display); font-size: 21px; font-weight: var(--font-weight-semibold); color: var(--color-moon); letter-spacing: -0.012em; margin-bottom: var(--spacing-4); }
.teacher-card__title { font-size: 15px; color: var(--color-haze); margin-bottom: var(--spacing-12); }
.teacher-card__rating { display: flex; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-12); }
.teacher-card__rating .stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
.teacher-card__score { font-size: 14px; font-weight: 600; color: var(--color-moon); }
.teacher-card__tags { display: flex; gap: var(--spacing-8); flex-wrap: wrap; margin-bottom: var(--spacing-12); }
.teacher-card__bio { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-mist); }

/* Gallery / Masonry */
.masonry { columns: 3; column-gap: var(--spacing-16); }
.masonry__item { break-inside: avoid; margin-bottom: var(--spacing-16); border-radius: var(--radius-images); overflow: hidden; cursor: pointer; background: var(--placeholder-gradient); border: 1px solid var(--color-glass-border); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.masonry__item:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(42, 36, 24, 0.1); }
.masonry__item img { width: 100%; display: block; transition: transform 0.5s ease; }
.masonry__item:hover img { transform: scale(1.04); }
.masonry__item--placeholder { height: 200px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__overlay { position: absolute; inset: 0; background: rgba(8, 8, 10, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox__img { position: relative; z-index: 1; max-width: 85vw; max-height: 80vh; border-radius: 16px; object-fit: contain; transform: scale(0.95); transition: transform 0.3s ease; }
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-20); }
.price-card { background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); padding: var(--spacing-40) var(--spacing-32); display: flex; flex-direction: column; }
.price-card--featured { background: var(--color-obsidian); border: 1px solid transparent; background-image: linear-gradient(var(--color-obsidian), var(--color-obsidian)), var(--gradient-spectrum); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 32px rgba(236, 72, 153, 0.15); }
.price-card__tag { align-self: flex-start; margin-bottom: var(--spacing-16); }
.price-card__name { font-family: var(--font-sf-pro-display); font-size: 24px; font-weight: var(--font-weight-semibold); color: var(--color-moon); letter-spacing: -0.009em; margin-bottom: var(--spacing-8); }
.price-card__price { font-family: var(--font-sf-pro-display); font-size: 40px; font-weight: var(--font-weight-semibold); color: var(--color-moon); letter-spacing: -0.005em; line-height: 1.1; margin-bottom: var(--spacing-4); }
.price-card__price-unit { font-size: 15px; font-weight: var(--font-weight-regular); color: var(--color-haze); }
.price-card__desc { font-size: 15px; color: var(--color-mist); margin-bottom: var(--spacing-24); }
.price-card__features { display: flex; flex-direction: column; gap: var(--spacing-12); margin-bottom: var(--spacing-32); flex-grow: 1; }
.price-card__feature { font-size: var(--text-body-sm); color: var(--color-mist); display: flex; align-items: flex-start; gap: var(--spacing-8); line-height: 1.4; }
.price-card__feature::before { content: "✓"; flex-shrink: 0; font-weight: var(--font-weight-semibold); color: var(--color-spectrum-blue); }
.price-card .btn { width: 100%; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--spacing-40); align-items: start; }
.contact-form-wrap { background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); padding: var(--spacing-40); }
.contact-form { display: flex; flex-direction: column; gap: var(--spacing-20); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--color-mist); }
.form-field input, .form-field select, .form-field textarea { font-family: var(--font-sf-pro-text); font-size: 15px; padding: 12px 16px; border: 1px solid var(--color-glass-border); border-radius: 14px; background: var(--color-void); color: var(--color-moon); transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-spectrum-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.form-field textarea { resize: vertical; font-family: inherit; }
.contact-form__success { display: none; font-size: 15px; color: var(--color-spectrum-green); text-align: center; padding: var(--spacing-12); background: rgba(34, 197, 94, 0.08); border-radius: 14px; }
.contact-form__success.is-show { display: block; }
.contact-form__success.is-error { color: #fca5a5; background: rgba(239, 68, 68, 0.10); }
.contact-info-side { display: flex; flex-direction: column; gap: var(--spacing-20); }
.contact-info-card { background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); padding: var(--spacing-32); }
.contact-info-card__title { font-family: var(--font-sf-pro-display); font-size: 20px; font-weight: var(--font-weight-semibold); color: var(--color-moon); margin-bottom: var(--spacing-20); }
.contact-info-card__row { display: flex; gap: var(--spacing-16); padding: var(--spacing-8) 0; border-bottom: 1px solid var(--color-glass-border); font-size: 15px; }
.contact-info-card__row:last-child { border-bottom: none; }
.contact-info-card__label { flex-shrink: 0; width: 48px; font-size: 13px; color: var(--color-haze); }
.contact-info-card__row span:last-child { color: var(--color-moon); }
.contact-info-card__row a { color: var(--color-moon); }
.contact-info-card__row a:hover { color: var(--color-link); }
.contact__map { position: relative; border-radius: var(--radius-images); overflow: hidden; background: var(--placeholder-gradient); border: 1px solid var(--color-glass-border); min-height: 200px; }
.contact__map img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 2; }
.contact__map-placeholder { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; color: var(--color-haze); text-align: center; }
.contact__qr { display: flex; flex-direction: row; align-items: center; gap: var(--spacing-20); background: var(--color-slate-dark); border: 1px solid var(--color-glass-border); border-radius: var(--radius-cards); padding: var(--spacing-24); }
.contact__qr-img { width: 120px; height: 120px; border-radius: 16px; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact__qr-img img { width: 100%; height: 100%; object-fit: cover; }
.contact__qr-hint { font-size: 14px; color: var(--color-mist); line-height: 1.5; }

/* Footer */
.footer { background: var(--color-void); padding: var(--spacing-40) 0 var(--spacing-32); border-top: 1px solid var(--color-glass-border); }
.footer__inner { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--spacing-40); }
.footer__top { display: flex; justify-content: space-between; gap: var(--spacing-40); flex-wrap: wrap; padding-bottom: var(--spacing-32); border-bottom: 1px solid var(--color-glass-border); }
.footer__brand { display: flex; align-items: center; gap: var(--spacing-10); font-family: var(--font-sf-pro-display); font-size: 17px; font-weight: var(--font-weight-semibold); color: var(--color-moon); margin-bottom: var(--spacing-8); }
.footer__logo { width: 36px; height: 36px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.footer__tagline { font-size: 13px; color: var(--color-haze); max-width: 320px; }
.footer__links { display: flex; gap: var(--spacing-40); flex-wrap: wrap; }
.footer__col h4 { font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-moon); margin-bottom: var(--spacing-12); }
.footer__col a { display: block; font-size: 12px; color: var(--color-haze); text-decoration: none; margin-bottom: var(--spacing-8); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-moon); text-decoration: none; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-20); gap: var(--spacing-16); flex-wrap: wrap; }
.footer__copy { font-size: 12px; color: var(--color-haze); }
.footer__legal { display: flex; gap: var(--spacing-20); }
.footer__legal a { font-size: 12px; color: var(--color-haze); text-decoration: none; }
.footer__legal a:hover { color: var(--color-moon); }

/* Feature */
.feature { position: relative; height: 250vh; background: #2a2418; }
.feature__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.feature__visual { position: absolute; inset: 0; z-index: 0; background: #2a2418; }
.feature__visual video, .feature__visual img { width: 100%; height: 100%; object-fit: cover; }
.feature__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(42, 36, 24, 0.55) 0%, rgba(42, 36, 24, 0.35) 40%, rgba(42, 36, 24, 0.7) 100%); }
.feature__overlay { position: relative; z-index: 1; text-align: center; color: var(--color-moon); max-width: 800px; padding: 0 var(--spacing-40); will-change: opacity, transform; }
.feature__eyebrow { background: var(--gradient-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: var(--spacing-16); }
.feature__title { color: #f0f0f5; margin-bottom: var(--spacing-24); }
.feature__lead { color: rgba(240, 240, 245, 0.82); max-width: 560px; margin: 0 auto var(--spacing-32); }
.feature__hint { font-size: var(--text-body-sm); color: rgba(240, 240, 245, 0.6); letter-spacing: 0.08em; animation: featureHint 2.2s ease-in-out infinite; }
@keyframes featureHint { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.scroll-video { pointer-events: none; }

/* Responsive */
@media (max-width: 980px) {
  :root { --text-display: 64px; --text-heading-lg: 52px; --text-heading: 44px; --text-heading-sm: 28px; }
  .section { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
  .container { padding: 0 var(--spacing-28); }
  .about-values { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .courses-grid { grid-template-columns: 1fr; }
  .teachers-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .feature { height: 200vh; }
}
@media (max-width: 734px) {
  :root { --text-display: 44px; --text-heading-lg: 40px; --text-heading: 32px; --text-heading-sm: 26px; }
  .nav__links { position: fixed; top: 48px; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: rgba(236, 227, 212, 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: var(--spacing-20) var(--spacing-24); gap: var(--spacing-20); transform: translateY(-120%); transition: transform 0.35s ease; height: auto; }
  .nav__links.is-open { transform: translateY(0); }
  .nav__link { font-size: 17px; width: 100%; }
  .nav__cta { width: 100%; text-align: center; padding: 10px 20px; }
  .nav__toggle { display: flex; }
  .section { padding-top: var(--spacing-52); padding-bottom: var(--spacing-52); }
  .container { padding: 0 var(--spacing-20); }
  .hero { height: 150vh; }
  .hero__sticky { padding: 0 var(--spacing-20) var(--spacing-52); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .about-values { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, 1fr); padding: var(--spacing-32) var(--spacing-20); }
  .stat__num { font-size: 40px; }
  .teachers-grid { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: var(--spacing-24) var(--spacing-20); }
  .contact__qr { flex-direction: column; text-align: center; }
  .modal { padding: var(--spacing-16); }
  .modal__panel { padding: var(--spacing-24); max-height: 85vh; }
  .lightbox__close { top: 12px; right: 12px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__img { max-width: 92vw; max-height: 75vh; border-radius: 8px; }
  .feature { height: 180vh; }
  .feature__overlay { padding: 0 var(--spacing-20); }
  .feature__title { font-size: 40px; }
  .footer__top { flex-direction: column; gap: var(--spacing-28); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .feature__hint { animation: none; }
}