.wl {
  --wl-ink: #151119;
  --wl-paper: #f5f1e8;
  --wl-violet: #8b5cf6;
  --wl-coral: #ff8174;
  --wl-line: rgba(21, 17, 25, .12);
  background: #fff;
  color: var(--wl-ink);
  overflow: clip;
}

.wl *, .wl *::before, .wl *::after { box-sizing: border-box; }
.wl a { text-decoration: none; }
.wl-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.wl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wl-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.wl-section-title {
  margin: 18px 0 0;
  max-width: 760px;
  font-size: clamp(34px, 4.3vw, 58px);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1.08;
}
.wl-section-copy {
  margin: 22px 0 0;
  max-width: 600px;
  color: #6e6871;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -.01em;
}

/* Hero */
.wl-hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #08060d;
  color: white;
}
.wl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,6,13,.99) 0%, rgba(8,6,13,.94) 36%, rgba(8,6,13,.28) 68%, rgba(8,6,13,.08) 100%),
    linear-gradient(0deg, rgba(8,6,13,.48), transparent 42%);
}
.wl-hero__art {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 30%;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .94;
  animation: wl-hero-in 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.wl-hero__content { position: relative; z-index: 2; padding-block: 102px 94px; }
.wl-hero .wl-kicker { color: #d8c9ff; }
.wl-hero h1 {
  max-width: 690px;
  margin: 24px 0 0;
  font-size: clamp(46px, 5.4vw, 70px);
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.wl-hero__line { display: block; }
.wl-hero h1 em { color: #b69aff; font-style: normal; }
.wl-hero__lead {
  max-width: 575px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: -.015em;
}
.wl-hero__lead strong { color: #fff; font-weight: 600; }
.wl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.wl-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 23px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.wl-btn:hover { transform: translateY(-2px); }
.wl-btn svg { width: 17px; height: 17px; }
.wl-btn--light { background: white; color: var(--wl-ink); }
.wl-btn--light:hover { background: #f1eaff; }
.wl-btn--ghost { border: 1px solid rgba(255,255,255,.24); color: white; background: rgba(255,255,255,.05); }
.wl-btn--ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.09); }
.wl-hero__note { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 27px; color: rgba(255,255,255,.55); font-size: 12px; }
.wl-hero__note span { display: inline-flex; align-items: center; gap: 7px; }
.wl-hero__note span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wl-coral); }
.wl-hero__scroll {
  position: absolute;
  z-index: 3;
  right: 30px;
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.45);
  font: 600 10px/1 Inter, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(90deg) translateX(100%);
  transform-origin: right bottom;
}
.wl-hero__scroll::after { content: ""; width: 46px; height: 1px; background: rgba(255,255,255,.35); }

/* Trust band */
.wl-trust { border-bottom: 1px solid var(--wl-line); background: #fff; }
.wl-trust__top { display: flex; align-items: center; gap: 28px; padding-block: 27px; border-bottom: 1px solid var(--wl-line); }
.wl-trust__label { flex: 0 0 155px; margin: 0; color: #817b84; font-size: 11px; line-height: 1.45; letter-spacing: .03em; }
.wl-trust__logos { min-width: 0; flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 34px; overflow: hidden; }
.wl-trust__logos img { width: auto; max-width: 102px; height: 22px; object-fit: contain; filter: grayscale(1); opacity: .48; }
.wl-metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.wl-metric { padding: 33px 22px 36px; border-right: 1px solid var(--wl-line); }
.wl-metric:first-child { padding-left: 0; }
.wl-metric:last-child { border-right: 0; }
.wl-metric strong { display: block; font: 700 clamp(27px, 3.2vw, 42px)/1 Inter, sans-serif; letter-spacing: -.05em; }
.wl-metric span { display: block; margin-top: 9px; color: #77717a; font-size: 12px; }

/* Audience selector */
.wl-selector { padding: 112px 0 122px; background: var(--wl-paper); }
.wl-selector__head { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.wl-selector .wl-kicker { color: #7250bf; }
.wl-selector__aside { max-width: 330px; margin: 0 0 5px; color: #716b72; font-size: 14px; line-height: 1.7; }
.wl-paths { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 58px; border-top: 1px solid rgba(21,17,25,.22); }
.wl-path {
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: 30px 32px 30px 0;
  border-right: 1px solid rgba(21,17,25,.16);
  color: var(--wl-ink);
  transition: padding .3s ease, background .3s ease;
}
.wl-path + .wl-path { padding-left: 32px; }
.wl-path:last-child { border-right: 0; padding-right: 0; }
.wl-path:hover { background: rgba(255,255,255,.35); padding-top: 22px; }
.wl-path__num { font: 650 12px/1 Inter, sans-serif; color: #8b848d; letter-spacing: .08em; }
.wl-path__tag { display: block; margin-top: 50px; color: #7250bf; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.wl-path h3 { margin: 13px 0 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.28; letter-spacing: -.04em; }
.wl-path p { margin: 18px 0 30px; color: #716b72; font-size: 14px; line-height: 1.72; }
.wl-path__more { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 13px; font-weight: 700; }
.wl-path__more i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(21,17,25,.22); border-radius: 50%; font-style: normal; transition: color .2s, background .2s; }
.wl-path:hover .wl-path__more i { background: var(--wl-ink); color: #fff; }

/* Journey */
.wl-journey { padding: 118px 0 126px; }
.wl-journey__intro { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: end; }
.wl-journey .wl-kicker { color: var(--wl-violet); }
.wl-journey__intro .wl-section-copy { margin: 0 0 4px; }
.wl-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }
.wl-level {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--wl-line);
  border-radius: 4px;
  background: #fff;
  color: var(--wl-ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wl-level:hover { transform: translateY(-7px); border-color: rgba(139,92,246,.45); box-shadow: 0 26px 64px -38px rgba(35,20,52,.42); }
.wl-level__top { display: flex; justify-content: space-between; align-items: start; }
.wl-level__badge { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: #f0eaff; color: #6d42c8; font: 700 11px/1 Inter, sans-serif; }
.wl-level__format { color: #918a94; font-size: 11px; }
.wl-level h3 { margin: 35px 0 0; font-size: 25px; font-weight: 720; line-height: 1.3; letter-spacing: -.04em; }
.wl-level__desc { min-height: 46px; margin: 13px 0 0; color: #756f78; font-size: 13px; line-height: 1.7; }
.wl-level ul { margin: 31px 0 0; padding: 23px 0 0; border-top: 1px solid var(--wl-line); list-style: none; }
.wl-level li { display: flex; align-items: center; gap: 9px; margin-top: 11px; color: #514b54; font-size: 13px; }
.wl-level li:first-child { margin-top: 0; }
.wl-level li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wl-coral); }
.wl-level__foot { display: flex; align-items: end; justify-content: space-between; margin-top: auto; padding-top: 28px; }
.wl-level__price small { display: block; margin-bottom: 4px; color: #918a94; font-size: 10px; }
.wl-level__price strong { font: 700 18px/1 Inter, sans-serif; }
.wl-level__arrow { font-size: 23px; line-height: 1; }
.wl-bundle {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  margin-top: 18px;
  padding: 35px 38px;
  border-radius: 4px;
  color: white;
  background: var(--wl-ink);
}
.wl-bundle__label { color: #bd9dff; font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.wl-bundle h3 { margin: 11px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.wl-bundle p { margin: 7px 0 0; color: rgba(255,255,255,.58); font-size: 13px; }
.wl-bundle__price { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.wl-bundle__price span { color: rgba(255,255,255,.55); font-size: 12px; }
.wl-bundle__price strong { font: 700 26px/1 Inter, sans-serif; }
.wl-bundle__price i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--wl-violet); font-style: normal; }

/* Result proof */
.wl-proof { padding: 118px 0; background: var(--wl-ink); color: white; }
.wl-proof__grid { display: grid; grid-template-columns: 4fr 6fr; gap: 78px; align-items: center; }
.wl-proof .wl-kicker { color: #bd9dff; }
.wl-proof .wl-section-copy { color: rgba(255,255,255,.58); }
.wl-proof__list { margin: 38px 0 0; padding: 0; list-style: none; }
.wl-proof__list li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55; }
.wl-proof__list b { color: #bd9dff; font: 650 11px/1.6 Inter, sans-serif; }
.wl-report {
  position: relative;
  min-height: 530px;
  border-radius: 4px;
  background: linear-gradient(135deg, #e8e0f8, #f6f0e7 65%, #d5cced);
  overflow: hidden;
}
.wl-report::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(21,17,25,.1); border-radius: 50%; }
.wl-report__page { position: absolute; width: 39%; box-shadow: 0 22px 48px rgba(36,23,45,.2); border-radius: 3px; transform: rotate(-6deg); }
.wl-report__page--1 { left: 11%; top: 13%; z-index: 2; }
.wl-report__page--2 { right: 11%; bottom: 10%; z-index: 3; transform: rotate(7deg); }
.wl-report__chart { position: absolute; right: 6%; top: 5%; width: 44%; opacity: .92; mix-blend-mode: multiply; }
.wl-report__caption { position: absolute; z-index: 4; left: 26px; bottom: 22px; margin: 0; color: rgba(21,17,25,.64); font-size: 11px; }

/* Field evidence */
.wl-field { padding: 118px 0 126px; background: var(--wl-paper); }
.wl-field__head { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.wl-field .wl-kicker { color: #7250bf; }
.wl-field__quote { max-width: 420px; margin: 0 0 5px; color: #615b63; font-size: 18px; line-height: 1.6; letter-spacing: -.025em; }
.wl-field__mosaic { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-top: 58px; }
.wl-field__photo { position: relative; min-height: 540px; margin: 0; overflow: hidden; background: #ddd; }
.wl-field__photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.wl-field__photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(8,6,13,.75)); }
.wl-field__photo figcaption { position: absolute; z-index: 2; left: 28px; bottom: 25px; color: white; font-size: 13px; }
.wl-mentor { display: flex; flex-direction: column; background: #fff; }
.wl-mentor__photo { min-height: 325px; flex: 1; overflow: hidden; }
.wl-mentor__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.wl-mentor__body { padding: 27px 28px 29px; border-top: 1px solid var(--wl-line); }
.wl-mentor__body small { color: #7952c7; font: 700 10px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.wl-mentor__body h3 { margin: 9px 0 0; font-size: 22px; font-weight: 720; letter-spacing: -.035em; }
.wl-mentor__body p { margin: 9px 0 0; color: #716b72; font-size: 13px; line-height: 1.65; }

/* Open courses */
.wl-courses { padding: 118px 0 126px; background: #fff; }
.wl-courses__head { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.wl-courses .wl-kicker { color: var(--wl-violet); }
.wl-courses__head > p { max-width: 370px; margin: 0 0 6px; color: #706a73; font-size: 14px; line-height: 1.7; }
.wl-courses h3 { margin: 48px 0 18px; font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.wl-course-list { border-top: 1px solid var(--wl-ink); }
.wl-course {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr) 180px 150px 46px;
  align-items: center;
  gap: 22px;
  padding: 24px 3px;
  border-bottom: 1px solid var(--wl-line);
  color: var(--wl-ink);
  transition: background .2s ease, padding .2s ease;
}
.wl-course:hover { padding-inline: 13px; background: #faf8fd; }
.wl-course__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-course__tag { display: inline-flex; padding: 6px 8px; border-radius: 999px; background: #f0eaff; color: #6d42c8; font-size: 10px; font-weight: 700; }
.wl-course__tag--open { background: #eaf8ef; color: #267744; }
.wl-course__tag--urgent { background: #fff0ee; color: #b9473d; }
.wl-course__name { font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.wl-course__date { color: #746e76; font: 500 12px/1.55 Inter, sans-serif; }
.wl-course__date span { display: block; margin-top: 3px; color: #99929b; font-family: Pretendard, sans-serif; }
.wl-course__price { text-align: right; }
.wl-course__price del { display: block; color: #a19ba4; font-size: 10px; }
.wl-course__price strong { font: 700 16px/1.4 Inter, sans-serif; }
.wl-course__arrow { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--wl-line); border-radius: 50%; font-size: 17px; transition: color .2s, background .2s; }
.wl-course:hover .wl-course__arrow { color: white; background: var(--wl-ink); }
.wl-empty { padding: 65px 20px; border: 1px solid var(--wl-line); background: #faf9fb; text-align: center; }
.wl-empty p { margin: 0; font-weight: 650; }
.wl-empty span { display: block; margin-top: 8px; color: #8b858d; font-size: 13px; }

/* B2B + final CTA */
.wl-b2b { background: #dcd0f8; }
.wl-b2b__inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 430px; }
.wl-b2b__copy { display: flex; flex-direction: column; justify-content: center; padding: 65px 75px 65px 0; }
.wl-b2b__copy .wl-kicker { color: #6940be; }
.wl-b2b__copy h2 { margin: 21px 0 0; font-size: clamp(34px, 4vw, 52px); font-weight: 740; line-height: 1.1; letter-spacing: -.055em; }
.wl-b2b__copy p { max-width: 500px; margin: 20px 0 0; color: #5f5668; font-size: 15px; line-height: 1.72; }
.wl-b2b__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.wl-btn--ink { background: var(--wl-ink); color: white; }
.wl-btn--outline { border: 1px solid rgba(21,17,25,.25); color: var(--wl-ink); }
.wl-b2b__visual { position: relative; overflow: hidden; }
.wl-b2b__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-b2b__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(220,208,248,.35), transparent 35%); }
.wl-final { padding: 105px 0 110px; background: #08060d; color: white; text-align: center; }
.wl-final .wl-kicker { color: #bd9dff; }
.wl-final h2 { max-width: 780px; margin: 25px auto 0; font-size: clamp(38px, 5.5vw, 68px); font-weight: 750; line-height: 1.08; letter-spacing: -.06em; text-wrap: balance; }
.wl-final p { margin: 21px 0 0; color: rgba(255,255,255,.56); font-size: 15px; }
.wl-final .wl-hero__actions { justify-content: center; }

@keyframes wl-hero-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: .94; transform: scale(1); }
}

@media (max-width: 900px) {
  .wl-selector__head, .wl-field__head, .wl-courses__head { display: block; }
  .wl-selector__aside, .wl-field__quote, .wl-courses__head > p { margin-top: 24px; }
  .wl-paths, .wl-levels { grid-template-columns: 1fr; }
  .wl-path { min-height: 0; padding: 27px 0 30px; border-right: 0; border-bottom: 1px solid rgba(21,17,25,.16); }
  .wl-path + .wl-path { padding-left: 0; }
  .wl-path:last-child { border-bottom: 0; }
  .wl-path:hover { padding-top: 27px; }
  .wl-path__tag { margin-top: 28px; }
  .wl-path__more { margin-top: 25px; }
  .wl-journey__intro, .wl-proof__grid { grid-template-columns: 1fr; gap: 28px; }
  .wl-level { min-height: 360px; }
  .wl-field__mosaic { grid-template-columns: 1fr; }
  .wl-field__photo { min-height: 480px; }
  .wl-mentor { display: grid; grid-template-columns: 1fr 1fr; }
  .wl-course { grid-template-columns: 125px minmax(190px, 1fr) 150px 42px; }
  .wl-course__price { display: none; }
  .wl-b2b__inner { grid-template-columns: 1fr; }
  .wl-b2b__copy { padding: 72px 0; }
  .wl-b2b__visual { min-height: 330px; margin-inline: -20px; }
}

@media (max-width: 640px) {
  .wl-shell { width: min(100% - 32px, 1180px); }
  .wl-hero { min-height: 720px; align-items: flex-end; }
  .wl-hero::after {
    background:
      linear-gradient(0deg, rgba(8,6,13,1) 14%, rgba(8,6,13,.96) 47%, rgba(8,6,13,.28) 78%, rgba(8,6,13,.12) 100%),
      linear-gradient(90deg, rgba(8,6,13,.4), transparent);
  }
  .wl-hero__art { inset: 0 0 auto 0; width: 100%; height: 65%; object-position: 64% center; opacity: .82; }
  .wl-hero__content { padding-block: 275px 58px; }
  .wl-hero h1 { margin-top: 18px; font-size: 45px; line-height: 1.06; }
  .wl-hero__lead { margin-top: 21px; font-size: 15px; }
  .wl-hero__actions { align-items: stretch; }
  .wl-hero .wl-btn { width: 100%; }
  .wl-hero__scroll { display: none; }
  .wl-trust__top { display: block; }
  .wl-trust__label { margin-bottom: 20px; }
  .wl-trust__logos { justify-content: flex-start; overflow-x: auto; padding-bottom: 5px; }
  .wl-trust__logos img { flex: 0 0 auto; }
  .wl-metrics { grid-template-columns: 1fr 1fr; }
  .wl-metric { padding: 25px 16px; border-bottom: 1px solid var(--wl-line); }
  .wl-metric:nth-child(2) { border-right: 0; }
  .wl-metric:nth-child(3) { padding-left: 0; border-bottom: 0; }
  .wl-metric:nth-child(4) { border-bottom: 0; }
  .wl-selector, .wl-journey, .wl-proof, .wl-field, .wl-courses { padding-block: 82px; }
  .wl-section-title { font-size: 38px; }
  .wl-section-copy { font-size: 15px; }
  .wl-paths, .wl-levels, .wl-field__mosaic { margin-top: 42px; }
  .wl-level { min-height: 345px; padding: 25px; }
  .wl-bundle { grid-template-columns: 1fr; gap: 28px; padding: 30px 26px; }
  .wl-bundle__price { justify-content: space-between; }
  .wl-report { min-height: 430px; }
  .wl-report__page { width: 48%; }
  .wl-report__page--1 { left: 7%; top: 16%; }
  .wl-report__page--2 { right: 7%; bottom: 12%; }
  .wl-field__photo { min-height: 390px; }
  .wl-mentor { display: block; }
  .wl-mentor__photo { height: 330px; }
  .wl-course {
    grid-template-columns: 1fr 42px;
    grid-template-areas: "tags arrow" "name arrow" "date arrow";
    gap: 8px 12px;
    padding: 22px 2px;
  }
  .wl-course__tags { grid-area: tags; }
  .wl-course__name { grid-area: name; font-size: 17px; }
  .wl-course__date { grid-area: date; }
  .wl-course__arrow { grid-area: arrow; }
  .wl-courses h3 { margin-top: 38px; }
  .wl-b2b__copy { padding-block: 72px; }
  .wl-b2b__visual { min-height: 270px; }
  .wl-final { padding-block: 82px; }
  .wl-final h2 { font-size: 43px; }
  .wl-final .wl-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-hero__art { animation: none; }
  .wl-btn, .wl-path, .wl-level, .wl-course { transition: none; }
}