.vx-cs {
  --vx-ease: cubic-bezier(.22, 1, .36, 1);
  --vx-gap: 148px;
  --vx-rule: rgba(245, 245, 245, .13);
  --vx-mute: rgba(245, 245, 245, .55);
  --vx-dim: rgba(245, 245, 245, .40);
  width: 100%;
  color: var(--white);
}

.vx-cs-shell { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 72px }
.vx-cs-wrap  { width: 100%; max-width: 1240px; margin: 0 auto }
.vx-cs-sec   { margin-top: var(--vx-gap) }
.vx-cs-sec.is-tight { margin-top: 92px }

.vx-cs-hero { padding-top: 148px }
.vx-cs-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 26px; padding: 8px 14px;
  border: 1px solid rgba(221, 251, 81, .5); border-radius: 11px;
  color: var(--primary);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.vx-cs-title {
  margin: 0; max-width: 15ch;
  font-size: clamp(44px, 6.6vw, 104px); line-height: .96; font-weight: 700;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--white);
}
.vx-cs-intro {
  margin: 30px 0 0; max-width: 620px;
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: rgba(245, 245, 245, .72);
}

.vx-cs-hero-foot {
  display: flex; align-items: flex-end; gap: 48px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--vx-rule);
}
.vx-cs-meta {
  flex: 1 1 620px; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px;
}
.vx-cs-meta-k {
  margin: 0 0 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vx-dim);
}
.vx-cs-meta-v { margin: 0; font-size: 16px; line-height: 25px; color: var(--white) }
.vx-cs-meta-v.is-year { font-size: 20px; font-weight: 700; letter-spacing: .01em }

.vx-cs-live {
  flex: none; display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 15px 26px; border-radius: 12px;
  background-color: var(--primary); color: #050505; text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .42s var(--vx-ease), color .42s var(--vx-ease);
}
.vx-cs-live svg { width: 15px; height: 15px; display: block; flex: none; color: #050505 }
.vx-cs-live .vx-cs-ar { display: inline-flex; transition: transform .42s var(--vx-ease) }
.vx-cs-live:hover { background-color: #F5F5F5; color: #050505 }
.vx-cs-live:hover .vx-cs-ar { transform: translate3d(4px, -4px, 0) }
.vx-cs-live:focus-visible { outline: 2px solid var(--white); outline-offset: 3px }
.vx-cs-live.is-lg { min-height: 60px; padding: 19px 32px; font-size: 13px }

.vx-cs-orb {
  position: absolute; right: 30px; bottom: 30px; z-index: 2;
  width: 136px; height: 136px; border-radius: 50%;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; text-decoration: none;
  background-color: var(--primary); color: #050505;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; line-height: 1.35;
  text-transform: uppercase;
  transition: background-color .42s var(--vx-ease);
}
.vx-cs-orb span { display: block }
.vx-cs-orb svg { width: 14px; height: 14px; display: block; color: #050505 }
.vx-cs-orb .vx-cs-ar { display: inline-flex; transition: transform .42s var(--vx-ease) }
.vx-cs-orb:hover { background-color: #F5F5F5 }
.vx-cs-orb:hover .vx-cs-ar { transform: translate3d(4px, -4px, 0) }
.vx-cs-orb:focus-visible { outline: 2px solid var(--white); outline-offset: 4px }

.vx-cs-block { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 30px; border-top: 1px solid var(--vx-rule) }
.vx-cs-eyebrow {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary);
}
.vx-cs-h {
  margin: 0; font-size: clamp(28px, 3.1vw, 46px); line-height: 1.06; font-weight: 700;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--white);
}
.vx-cs-h .vx-cs-h2l { display: block }
.vx-cs-p { margin: 22px 0 0; max-width: 580px; font-size: 17px; line-height: 30px; color: var(--vx-mute) }
.vx-cs-p.is-wide { max-width: 620px }

.vx-cs-band { display: grid; grid-template-columns: 1fr; gap: 24px }
.vx-cs-band-in { padding-left: 26px; border-left: 2px solid var(--primary) }

.vx-cs-split { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center }

.vx-cs-split .vx-cs-h { font-size: clamp(26px, 2.4vw, 36px) }

.vx-cs-fig { margin: 0; width: 100% }
.vx-cs-frame {
  position: relative; display: block; overflow: hidden;
  border-radius: 20px; background-color: var(--secondary);
}
.vx-cs-frame img { display: block; width: 100%; height: auto }

.vx-cs-frame.is-plate img {
  aspect-ratio: var(--vx-ar, 16 / 10);
  object-fit: cover;
  object-position: var(--vx-pos, 50% 50%);
}

.vx-cs-cap {
  display: block; margin: 16px 2px 0; text-align: left;
  font-size: 13px; line-height: 20px; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(245, 245, 245, .62);
}
.vx-cs-cap::before { content: ""; display: inline-block; width: 16px; height: 1px; margin: 0 10px 4px 0; background-color: var(--primary) }

.vx-cs-board { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start }
.vx-cs-board .vx-cs-fig { max-width: 560px }

.vx-cs-deliver { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 30px; border-top: 1px solid var(--vx-rule) }
.vx-cs-list { margin: 0; padding: 0; list-style: none }
.vx-cs-list li {
  padding: 19px 0; border-bottom: 1px solid var(--vx-rule);
  font-size: 17px; line-height: 26px; color: var(--white);
}
.vx-cs-list li:first-child { padding-top: 0 }

.vx-cs-cta { padding-top: 40px; border-top: 1px solid var(--vx-rule) }
.vx-cs-cta-h {
  margin: 18px 0 0; font-size: clamp(34px, 5vw, 72px); line-height: 1; font-weight: 700;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--white);
}
.vx-cs-cta-h .vx-cs-h2l { display: block }
.vx-cs-cta .vx-cs-live { margin-top: 40px }

.vx-cs-next {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-top: 96px; padding-top: 34px; border-top: 1px solid var(--vx-rule);
}
.vx-cs-next-k { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-dim) }
.vx-cs-next-link { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--white); padding: 6px 0 }
.vx-cs-next-name {
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.015em; transition: color .42s var(--vx-ease);
}
.vx-cs-arrow { flex: none; display: inline-flex; width: 26px; height: 26px; color: var(--primary); transition: transform .42s var(--vx-ease) }
.vx-cs-arrow svg { width: 100%; height: 100%; display: block }
.vx-cs-next-link:hover .vx-cs-next-name { color: var(--primary) }
.vx-cs-next-link:hover .vx-cs-arrow { transform: translate3d(4px, -4px, 0) }
.vx-cs-back {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary); text-decoration: none; border-bottom: 1px solid currentColor;
}
.vx-cs-next-link:focus-visible, .vx-cs-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px }

@media (min-width: 992px) {
  .vx-cs-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px }

  .vx-cs-block { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 72px; align-items: start }
  .vx-cs-block .vx-cs-p { margin-top: 0 }
  .vx-cs-band { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px }
  .vx-cs-deliver { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px }
  .vx-cs-split { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 72px }
  .vx-cs-split.is-flip { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr) }
  .vx-cs-split.is-flip .vx-cs-fig { order: -1 }
  .vx-cs-board { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px }
  .vx-cs-cta { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px; align-items: start }
  .vx-cs-cta .vx-cs-live { margin-top: 44px }
}

@media (min-width: 1280px) {
  .vx-cs { --vx-gap: 158px }
}

@media (min-width: 992px) and (max-height: 820px) {
  .vx-cs-hero { padding-top: 124px }
  .vx-cs-hero-foot { margin-top: 48px }
  .vx-cs-intro { margin-top: 24px }
}

@media (max-width: 1199px) { .vx-cs-shell { padding: 0 48px } }

@media (max-width: 991px) {
  .vx-cs { --vx-gap: 96px }
  .vx-cs-hero { padding-top: 136px }
  .vx-cs-split { gap: 32px }

  .vx-cs-split.is-flip .vx-cs-fig { order: 2 }
  .vx-cs-live { width: auto }
}

@media (max-width: 767px) {
  .vx-cs { --vx-gap: 80px }
  .vx-cs-shell { padding: 0 24px }
  .vx-cs-hero { padding-top: 128px }
  .vx-cs-badge { margin-bottom: 20px }
  .vx-cs-intro { margin-top: 22px; font-size: 16px; line-height: 27px }
  .vx-cs-hero-foot { margin-top: 46px; gap: 34px }
  .vx-cs-meta { flex: 1 1 100%; gap: 26px 24px }
  .vx-cs-live { width: 100%; justify-content: center }
  .vx-cs-frame { border-radius: 14px }
  .vx-cs-frame.is-plate img { aspect-ratio: var(--vx-ar-m, 4 / 3) }
  .vx-cs-orb { right: 16px; bottom: 16px; width: 104px; height: 104px; font-size: 10px; gap: 5px }
  .vx-cs-cap { margin-top: 13px; font-size: 12px; line-height: 18px }
  .vx-cs-p { font-size: 16px; line-height: 27px }
  .vx-cs-list li { font-size: 16px; line-height: 25px; padding: 16px 0 }
  .vx-cs-board .vx-cs-fig { max-width: 100% }
  .vx-cs-next { margin-top: 64px }
  .vx-cs-cta .vx-cs-live, .vx-cs-cta-h { margin-top: 26px }
}

@media (prefers-reduced-motion: reduce) {
  .vx-cs-live, .vx-cs-orb, .vx-cs-next-name, .vx-cs-arrow, .vx-cs-ar { transition: none }
  .vx-cs-live:hover .vx-cs-ar, .vx-cs-orb:hover .vx-cs-ar,
  .vx-cs-next-link:hover .vx-cs-arrow { transform: none }
}

.vx-cs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vx-footer-logo { width: 215px; max-width: 100% }
@media (max-width: 767px) { .vx-footer-logo { width: 180px } }