:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-black-gray: #484848;
  --font-family-base: "Inter", sans-serif;

  --page-padding-top: 12px;
  --page-padding-x: 40px;
  --page-padding-bottom: 16px;

  --header-gap: 24px;
  --header-actions-gap: 8px;
  --logo-height: 80px;
  --button-height: 48px;
  --button-padding-x: 24px;

  --hero-top-offset: 20px;
  --hero-line-start: 272px;
  --hero-badge-height: 48px;
  --hero-badge-gap: 10px;
  --hero-badge-padding-x: 16px;
  --hero-content-gap: 24px;
  --hero-title-width: 1272px;
  --hero-media-top-gap: 60px;
  --hero-media-inset: 20px;
  --section-content-width: 1400px;

  --text-xxl-size: 56px;
  --text-xxl-line: 1;
  --text-xxl-space: -0.06em;
  --text-xxl-weight: 500;

  --text-xl-bold-size: 24px;
  --text-xl-bold-line: 1.4;
  --text-xl-bold-space: -0.02em;
  --text-xl-bold-weight: 400;

  --h3-size: 20px;
  --h3-line: 1.2;
  --h3-space: -0.02em;
  --h3-weight: 400;

  --h4-size: 18px;
  --h4-line: 1.3;
  --h4-space: -0.02em;
  --h4-weight: 400;

  --h5-size: 16px;
  --h5-line: 1.3;
  --h5-space: 0;
  --h5-weight: 400;

  --h6-size: 14px;
  --h6-line: 1.3;
  --h6-space: 0;
  --h6-weight: 400;

  --h2-size: 40px;
  --h2-line: 1.05;
  --h2-space: -0.06em;
  --h2-weight: 500;

  --menu-button-size: 17px;
  --menu-button-line: 1.3;
  --menu-button-space: 0;
  --menu-button-weight: 500;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-family-base);
}

body.is-smooth-scroll {
  overflow: auto;
}

.page-shell {
  position: relative;
  min-height: 100vh;
}

.site-header {
  position: fixed;
  top: var(--page-padding-top);
  left: var(--page-padding-x);
  right: var(--page-padding-x);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.site-logo img {
  display: block;
  width: auto;
  height: var(--logo-height);
  filter: brightness(0);
  transition: filter 0.25s ease;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--header-actions-gap);
}

.menu-button {
  font-size: var(--menu-button-size);
  line-height: var(--menu-button-line);
  letter-spacing: var(--menu-button-space);
  font-weight: var(--menu-button-weight);
}

.header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 0;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.header-button-muted {
  color: var(--color-black);
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(36px);
}

.site-header.is-on-dark .site-logo img {
  filter: brightness(0) invert(1);
}

.site-header.is-on-dark .header-button-muted {
  color: var(--color-white);
}

.header-button-muted:hover,
.header-button-muted:focus-visible {
  background: rgba(0, 0, 0, 0.16);
}

.header-button-solid {
  color: var(--color-white);
  background: var(--color-black);
}

.header-button-solid:hover,
.header-button-solid:focus-visible {
  background: #494949;
}

.page-content {
  min-height: 100vh;
}

body.is-smooth-scroll .page-content {
  position: fixed;
  inset: 0;
  width: 100%;
  will-change: transform;
}

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero-top {
  padding-top: var(--hero-top-offset);
  padding-left: var(--hero-line-start);
  padding-right: var(--hero-media-inset);
}

.hero-badge {
  width: fit-content;
  min-height: var(--hero-badge-height);
  display: inline-flex;
  align-items: center;
  gap: var(--hero-badge-gap);
  color: var(--color-black);
}

.hero-badge img {
  display: block;
  width: 20px;
  height: 20px;
}

.text-xxl {
  margin: 0;
  font-size: var(--text-xxl-size);
  line-height: var(--text-xxl-line);
  letter-spacing: var(--text-xxl-space);
  font-weight: var(--text-xxl-weight);
}

.h3 {
  margin: 0;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-space);
  font-weight: var(--h3-weight);
}

.h4 {
  margin: 0;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  letter-spacing: var(--h4-space);
  font-weight: var(--h4-weight);
}

.h5 {
  margin: 0;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
  letter-spacing: var(--h5-space);
  font-weight: var(--h5-weight);
}

.h6 {
  margin: 0;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  letter-spacing: var(--h6-space);
  font-weight: var(--h6-weight);
}

.text-xl-bold {
  margin: 0;
  font-size: var(--text-xl-bold-size);
  line-height: var(--text-xl-bold-line);
  letter-spacing: var(--text-xl-bold-space);
  font-weight: var(--text-xl-bold-weight);
}

.hero-title {
  width: min(100%, var(--hero-title-width));
  margin-top: var(--hero-content-gap);
  color: var(--color-black);
}

.hero-media {
  flex: 1;
  min-height: 0;
  margin: var(--hero-media-top-gap) var(--hero-media-inset) var(--hero-media-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f3f3;
}

.hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.hero-video-mobile {
  display: none;
}

.ai-visual-section {
  padding: 160px 0 0;
}

.ai-visual-content {
  width: min(100%, var(--section-content-width));
  margin: 0 auto;
}

.section-title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-space);
  font-weight: var(--h2-weight);
}

.ai-slider {
  position: relative;
  margin-top: 40px;
}

.ai-slider-viewport {
  overflow: hidden;
}

.ai-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ai-slide {
  flex: 0 0 calc((100% - 24px) / 2);
  height: 440px;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f2f2;
  cursor: pointer;
}

.ai-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ai-slider-arrow-bg {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 80px;
  background: #292929;
}

.ai-slider-arrow img {
  width: 20px;
  height: 20px;
  display: block;
}

.ai-slider-arrow-prev {
  left: -28px;
  opacity: 0;
  pointer-events: none;
}

.ai-slider-arrow-prev img {
  transform: rotate(180deg);
}

.ai-slider-arrow-next {
  right: -28px;
}

.ai-slider-arrow.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ai-slider-arrow:hover,
.ai-slider-arrow:focus-visible {
  transform: translateY(-50%) scale(1.04);
}

.ai-slider-progress {
  width: 100%;
  height: 4px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 4px;
  background: #efefef;
}

.ai-slider-progress-bar {
  width: 50%;
  height: 100%;
  border-radius: 4px;
  background: var(--color-black);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-gallery {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  padding: 0 20px 0 40px;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s ease;
}

.ai-gallery.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ai-gallery-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.ai-gallery-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #000;
}

.ai-gallery-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ai-gallery-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ai-gallery-thumbs {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 100vh;
  padding: 20px 0;
  opacity: 0;
  transform: translate3d(-16px, 0, 0);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}

.ai-gallery-thumb {
  position: relative;
  width: 84px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.ai-gallery-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.25s ease;
}

.ai-gallery-thumb:hover::after,
.ai-gallery-thumb:focus-visible::after {
  background: rgba(255, 255, 255, 0.3);
}

.ai-gallery-thumb.is-active::after {
  background: rgba(255, 255, 255, 0);
}

.ai-gallery-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.ai-gallery-scroll {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 0;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.ai-gallery-scroll::-webkit-scrollbar {
  display: none;
}

.ai-gallery-list {
  width: min(100%, 1222px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-gallery-item {
  width: 100%;
  margin: 0;
}

.ai-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

body.ai-gallery-open {
  overflow: hidden;
}

.ai-gallery.is-open .ai-gallery-close,
.ai-gallery.is-open .ai-gallery-thumbs,
.ai-gallery.is-open .ai-gallery-scroll {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.fit-section {
  padding: 160px 0 0;
}

.fit-content {
  width: min(100%, var(--section-content-width));
  margin: 0 auto;
}

.fit-accordion {
  margin-top: 40px;
}

.fit-item {
  border-bottom: 1px solid #e8e8e8;
}

.fit-trigger {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  text-align: left;
}

.fit-trigger-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.fit-index {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: #e8e8e8;
  color: var(--color-black);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.fit-trigger:hover .fit-index,
.fit-trigger:focus-visible .fit-index {
  background: var(--color-black);
  color: var(--color-white);
}

.fit-label {
  margin: 0;
}

.fit-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.fit-icon::before,
.fit-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-black);
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fit-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.fit-item.is-open .fit-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.fit-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fit-item.is-open .fit-panel {
  grid-template-rows: 1fr;
}

.fit-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.fit-description {
  width: 50%;
  margin: 10px 0 24px 50%;
  color: var(--color-black-gray);
  font-size: 18px;
  line-height: 1.4;
}

.learn-section {
  padding: 160px 0 0;
}

.learn-content {
  width: min(100%, var(--section-content-width));
  margin: 0 auto;
}

.learn-layout {
  display: grid;
  grid-template-columns: 293px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.learn-slider-wrap {
  position: relative;
  min-width: 0;
}

.learn-slider-viewport {
  overflow: hidden;
  height: 450px;
}

.learn-slider-track {
  display: flex;
  gap: 6px;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.learn-card {
  flex: 0 0 calc((100% - 12px) / 3);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 60px 30px 40px;
  border-radius: 4px;
  background: #f1f1f1;
}

.learn-card img {
  width: 200px;
  height: 200px;
  display: block;
  object-fit: cover;
}

.learn-card-text {
  margin: 0;
  color: var(--color-black);
  text-align: center;
}

.learn-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.learn-slider-arrow-bg {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 80px;
  background: #292929;
}

.learn-slider-arrow img {
  width: 20px;
  height: 20px;
  display: block;
}

.learn-slider-arrow-prev {
  left: -28px;
  opacity: 0;
  pointer-events: none;
}

.learn-slider-arrow-prev img {
  transform: rotate(180deg);
}

.learn-slider-arrow-next {
  right: -28px;
}

.learn-slider-arrow.is-active {
  opacity: 1;
  pointer-events: auto;
}

.learn-slider-arrow:hover,
.learn-slider-arrow:focus-visible {
  transform: translateY(-50%) scale(1.04);
}

.learn-slider-progress {
  width: 100%;
  height: 4px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 4px;
  background: #efefef;
}

.learn-slider-progress-bar {
  width: 50%;
  height: 100%;
  border-radius: 4px;
  background: var(--color-black);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.learn-side {
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.learn-cta {
  width: fit-content;
}

.program-section {
  padding: 160px 0 0;
}

.program-content {
  width: min(100%, var(--section-content-width));
  margin: 0 auto;
}

.program-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(((100% - 293px - 16px) / 3) * 2 + 6px);
  gap: 16px;
  align-items: start;
  margin-top: 40px;
}

.program-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.program-head {
  min-height: 30px;
}

.program-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}

.program-title {
  color: var(--color-black);
}

.program-time {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 40px;
  color: var(--color-white);
  background: var(--color-black);
}

.program-time img {
  width: 18px;
  height: 18px;
  display: block;
}

.program-time .h6 {
  margin: 0;
  color: var(--color-white);
}

.program-bullets {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.program-bullet-item {
  display: flex;
  align-items: center;
}

.program-bullet-mark {
  width: 24px;
  height: 21px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.program-bullet-mark span {
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 50%;
  background: #595959;
}

.program-bullet-text {
  margin: 0 0 0 24px;
  color: #595959;
}

.program-video-wrap {
  height: 440px;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f2f2;
}

.program-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.result-section {
  padding: 160px 0 0;
}

.result-content {
  width: min(100%, var(--section-content-width));
  margin: 0 auto;
}

.result-list {
  margin-top: 40px;
}

.result-item {
  border-bottom: 1px solid #e8e8e8;
}

.result-row {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.result-label {
  margin: 0;
  color: var(--color-black);
}

.pricing-section {
  padding: 160px 0;
}

.pricing-content {
  width: min(100%, var(--section-content-width));
  margin: 0 auto;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.pricing-card {
  height: 400px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 8px;
  background: #f5f5f5;
}

.pricing-card-top {
  display: flex;
  flex-direction: column;
}

.pricing-card-title {
  margin: 0;
  color: var(--color-black);
}

.pricing-bullets {
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-bullet-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing-bullet-item .program-bullet-mark {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
}

.pricing-bullet-text {
  margin: 0;
  color: #595959;
}

.pricing-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.pricing-price {
  margin: 0;
  color: var(--color-black);
}

body.has-reveal [data-reveal] {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(0.985);
  filter: blur(10px);
  clip-path: inset(0 0 18% 0 round 12px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay),
    clip-path 1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay);
  will-change: opacity, transform, filter, clip-path;
}

body.has-reveal [data-reveal="left"] {
  transform: translate3d(-56px, 0, 0) scale(0.985);
}

body.has-reveal [data-reveal="right"] {
  transform: translate3d(56px, 0, 0) scale(0.985);
}

body.has-reveal [data-reveal="scale"] {
  transform: translate3d(0, 32px, 0) scale(0.94);
}

body.has-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0 0 round 12px);
}

body.has-reveal .ai-slider[data-reveal],
body.has-reveal .learn-slider-wrap[data-reveal] {
  clip-path: none;
}

@media (max-width: 2056px) {
  :root {
    --page-padding-x: clamp(32px, 1.95vw, 40px);
    --header-gap: clamp(20px, 1.17vw, 24px);
    --logo-height: clamp(72px, 3.89vw, 80px);
    --button-height: clamp(46px, 2.33vw, 48px);
    --button-padding-x: clamp(22px, 1.17vw, 24px);
    --hero-line-start: clamp(224px, 13.23vw, 272px);
    --hero-title-width: clamp(1100px, 61.86vw, 1272px);
    --section-content-width: clamp(1240px, 68.09vw, 1400px);
    --text-xxl-size: clamp(50px, 2.72vw, 56px);
    --text-xl-bold-size: clamp(22px, 1.17vw, 24px);
  }
}

@media (max-width: 1600px) {
  :root {
    --page-padding-x: clamp(28px, 2vw, 32px);
    --header-gap: clamp(16px, 1.25vw, 20px);
    --logo-height: clamp(64px, 4.25vw, 72px);
    --button-height: clamp(44px, 2.8vw, 46px);
    --button-padding-x: clamp(20px, 1.4vw, 22px);
    --hero-line-start: clamp(176px, 13vw, 224px);
    --hero-title-width: clamp(920px, 57vw, 1100px);
    --section-content-width: clamp(1080px, 77.5vw, 1240px);
    --text-xxl-size: clamp(44px, 3.12vw, 50px);
    --text-xl-bold-size: clamp(20px, 1.37vw, 22px);
  }
}

@media (max-width: 1440px) {
  :root {
    --page-padding-x: clamp(24px, 1.95vw, 28px);
    --logo-height: clamp(58px, 4.45vw, 64px);
    --button-height: clamp(42px, 3vw, 44px);
    --button-padding-x: clamp(18px, 1.4vw, 20px);
    --hero-line-start: clamp(136px, 12.22vw, 176px);
    --hero-title-width: clamp(760px, 52.78vw, 920px);
    --section-content-width: clamp(920px, 75vw, 1080px);
    --text-xxl-size: clamp(38px, 3.06vw, 44px);
    --text-xl-bold-size: 20px;
    --hero-media-top-gap: 48px;
  }
}

@media (max-width: 1280px) {
  :root {
    --page-padding-x: clamp(20px, 1.88vw, 24px);
    --header-gap: 16px;
    --logo-height: clamp(52px, 4.4vw, 58px);
    --button-height: 42px;
    --button-padding-x: 18px;
    --hero-line-start: 96px;
    --hero-title-width: min(100%, 760px);
    --section-content-width: min(100%, 920px);
    --text-xxl-size: clamp(34px, 3.28vw, 38px);
    --text-xl-bold-size: 20px;
    --hero-media-top-gap: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-padding-x: 16px;
    --page-padding-top: 12px;
    --logo-height: 56px;
    --hero-top-offset: 96px;
    --hero-line-start: 16px;
    --hero-badge-height: 40px;
    --hero-title-width: 100%;
    --hero-content-gap: 16px;
    --hero-media-top-gap: 32px;
    --hero-media-inset: 16px;
    --section-content-width: 100%;
    --text-xxl-size: 32px;
    --text-xl-bold-size: 16px;
    --text-xl-bold-line: 1.4;
    --text-xl-bold-space: -0.02em;
    --h3-size: 16px;
    --h3-line: 1.2;
    --h3-space: -0.02em;
    --h4-size: 16px;
    --h4-line: 1.3;
    --h4-space: -0.02em;
    --h5-size: 14px;
    --h5-line: 1.3;
    --h5-space: 0;
    --h6-size: 11px;
    --h6-line: 1.3;
    --h6-space: 0;
    --menu-button-size: 16px;
    --h2-size: 20px;
    --h2-line: 1.05;
    --h2-space: -0.02em;
  }

  .site-header {
    gap: 12px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-button {
    min-height: 40px;
  }

  .hero-top {
    padding-right: 16px;
  }

  .hero-badge {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .hero-media {
    border-radius: 6px;
  }

  .hero-video-desktop {
    display: none;
  }

  .hero-video-mobile {
    display: block;
  }

  .ai-visual-section {
    padding-top: 96px;
  }

  .ai-slider-track {
    gap: 16px;
  }

  .ai-slide {
    flex-basis: 100%;
    height: 320px;
  }

  .ai-slider-arrow-prev {
    left: 12px;
  }

  .ai-slider-arrow-next {
    right: 12px;
  }

  .ai-gallery {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px 16px;
  }

  .ai-gallery-thumbs {
    order: 2;
    height: auto;
    padding: 0;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
  }

  .ai-gallery-thumb {
    width: 72px;
    flex: 0 0 72px;
  }

  .ai-gallery-scroll {
    order: 1;
    height: calc(100vh - 96px);
    padding-top: 20px;
    padding-bottom: 0;
  }

  .ai-gallery-list {
    width: 100%;
  }

  .fit-section {
    padding-top: 120px;
  }

  .fit-trigger {
    align-items: flex-start;
    padding: 20px 0;
  }

  .fit-trigger-main {
    gap: 16px;
  }

  .fit-description {
    width: 100%;
    margin: 10px 0 20px;
    font-size: 16px;
  }

  .learn-section {
    padding-top: 120px;
  }

  .learn-layout {
    grid-template-columns: 1fr;
  }

  .learn-side {
    order: -1;
    height: auto;
    gap: 24px;
  }

  .learn-slider-viewport {
    height: 380px;
  }

  .learn-card {
    flex-basis: 100%;
    padding: 40px 24px 32px;
  }

  .learn-card img {
    width: 160px;
    height: 160px;
  }

  .learn-slider-arrow-prev {
    left: 12px;
  }

  .learn-slider-arrow-next {
    right: 12px;
  }

  .program-section {
    padding-top: 120px;
  }

  .program-layout {
    grid-template-columns: 1fr;
  }

  .program-list {
    gap: 32px;
  }

  .program-meta {
    flex-wrap: wrap;
    gap: 16px;
  }

  .program-bullet-item {
    align-items: flex-start;
  }

  .program-bullet-text {
    margin-left: 16px;
  }

  .program-video-wrap {
    height: 320px;
  }

  .result-section {
    padding-top: 120px;
  }

  .result-row {
    min-height: 56px;
  }

  .pricing-section {
    padding: 120px 0;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  body.has-reveal [data-reveal] {
    transform: translate3d(0, 32px, 0) scale(0.985);
    filter: blur(6px);
  }

  body.has-reveal [data-reveal="left"],
  body.has-reveal [data-reveal="right"],
  body.has-reveal [data-reveal="scale"] {
    transform: translate3d(0, 28px, 0) scale(0.97);
  }
}