.h--full { height: 100%; }
.w-full { width: 100%; }

@media screen and (max-width: 959px) {
  .w-full--mobile { width: 100%; }
}

.flex { display: flex; }
.flex.flex--row { flex-direction: row; }
.flex.flex--column { flex-direction: column; }
.flex.items--center { justify-content: center; align-items: center; }
.flex.align--start { align-items: flex-start; }
.flex.align--center { align-items: center; }
.flex.align--end { align-items: flex-end; }
.flex.justify--start { justify-content: flex-start; }
.flex.justify--center { justify-content: center; }
.flex.justify--end { justify-content: flex-end; }
.flex.justify--between { justify-content: space-between; }
.flex.flex--wrap { flex-wrap: wrap; }
.flex.flex--grow { flex-grow: 1; }

@media screen and (max-width: 959px) {
  .flex.flex--row--mobile { flex-direction: row; }
  .flex.flex--row-reverse--mobile { flex-direction: row-reverse; }
  .flex.flex--column--mobile { flex-direction: column; }
  .flex.items--center--mobile { justify-content: center; align-items: center; }
  .flex.align--start--mobile { align-items: flex-start; }
  .flex.align--center--mobile { align-items: center; }
  .flex.align--end--mobile { align-items: flex-end; }
  .flex.justify--start--mobile { justify-content: flex-start; }
  .flex.justify--center--mobile { justify-content: center; }
  .flex.justify--end--mobile { justify-content: flex-end; }
  .flex.justify--between--mobile { justify-content: space-between; }
  .flex.wrap--mobile { flex-wrap: wrap; }
  .flex.nowrap--mobile { flex-wrap: nowrap; }
}

.gap--4 { gap: var(--space-4); }
.gap--6 { gap: var(--space-6); }
.gap--8 { gap: var(--space-8); }
.gap--12 { gap: var(--space-12); }
.gap--14 { gap: var(--space-14); }
.gap--16 { gap: var(--space-16); }
.gap--20 { gap: var(--space-20); }
.gap--24 { gap: var(--space-24); }
.gap--32 { gap: var(--space-32); }
.gap--40 { gap: var(--space-40); }
.gap--48 { gap: var(--space-48); }
.gap--64 { gap: var(--space-64); }

.mt--8 { margin-top: var(--space-8); }
.mt--12 { margin-top: var(--space-12); }
.mt--16 { margin-top: var(--space-16); }
.mt--20 { margin-top: var(--space-20); }
.mt--24 { margin-top: var(--space-24); }
.mt--32 { margin-top: var(--space-32); }
.mt--40 { margin-top: var(--space-40); }
.mt--48 { margin-top: var(--space-48); }
.mt--64 { margin-top: var(--space-64); }

.mb--6 { margin-bottom: var(--space-6); }
.mb--8 { margin-bottom: var(--space-8); }
.mb--12 { margin-bottom: var(--space-12); }
.mb--16 { margin-bottom: var(--space-16); }
.mb--20 { margin-bottom: var(--space-20); }
.mb--24 { margin-bottom: var(--space-24); }
.mb--32 { margin-bottom: var(--space-32); }
.mb--40 { margin-bottom: var(--space-40); }
.mb--48 { margin-bottom: var(--space-48); }
.mb--64 { margin-bottom: var(--space-64); }

.ml--8 { margin-left: var(--space-8); }
.ml--16 { margin-left: var(--space-16); }
.ml--24 { margin-left: var(--space-24); }
.ml--32 { margin-left: var(--space-32); }

.mr--8 { margin-right: var(--space-8); }
.mr--16 { margin-right: var(--space-16); }
.mr--24 { margin-right: var(--space-24); }
.mr--32 { margin-right: var(--space-32); }

.p--16 { padding: var(--space-16); }
.p--24 { padding: var(--space-24); }
.p--32 { padding: var(--space-32); }
.p--48 { padding: var(--space-48); }

.px--16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px--24 { padding-left: var(--space-24); padding-right: var(--space-24); }
.px--32 { padding-left: var(--space-32); padding-right: var(--space-32); }

.py--16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py--24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.py--32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.py--48 { padding-top: var(--space-48); padding-bottom: var(--space-48); }
.py--64 { padding-top: var(--space-64); padding-bottom: var(--space-64); }

@media screen and (max-width: 959px) {
  .gap--4--m { gap: var(--space-4); }
  .gap--6--m { gap: var(--space-6); }
  .gap--8--m { gap: var(--space-8); }
  .gap--12--m { gap: var(--space-12); }
  .gap--16--m { gap: var(--space-16); }
  .gap--20--m { gap: var(--space-20); }
  .gap--24--m { gap: var(--space-24); }
  .gap--32--m { gap: var(--space-32); }
  .gap--40--m { gap: var(--space-40); }
  .gap--48--m { gap: var(--space-48); }
  .gap--64--m { gap: var(--space-64); }

  .mt--0--m { margin-top: 0; }
  .mt--8--m { margin-top: var(--space-8); }
  .mt--16--m { margin-top: var(--space-16); }
  .mt--24--m { margin-top: var(--space-24); }
  .mt--32--m { margin-top: var(--space-32); }
  .mt--40--m { margin-top: var(--space-40); }
  .mt--48--m { margin-top: var(--space-48); }
  .mt--64--m { margin-top: var(--space-64); }

  .mb--8--m { margin-bottom: var(--space-8); }
  .mb--16--m { margin-bottom: var(--space-16); }
  .mb--24--m { margin-bottom: var(--space-24); }
  .mb--32--m { margin-bottom: var(--space-32); }
  .mb--40--m { margin-bottom: var(--space-40); }
  .mb--48--m { margin-bottom: var(--space-48); }
  .mb--64--m { margin-bottom: var(--space-64); }

  .p--16--m { padding: var(--space-16); }
  .p--24--m { padding: var(--space-24); }

  .px--16--m { padding-left: var(--space-16); padding-right: var(--space-16); }
  .px--24--m { padding-left: var(--space-24); padding-right: var(--space-24); }
  .px--32--m { padding-left: var(--space-32); padding-right: var(--space-32); }

  .py--16--m { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .py--24--m { padding-top: var(--space-24); padding-bottom: var(--space-24); }
  .py--32--m { padding-top: var(--space-32); padding-bottom: var(--space-32); }
  .py--48--m { padding-top: var(--space-48); padding-bottom: var(--space-48); }
  .py--64--m { padding-top: var(--space-64); padding-bottom: var(--space-64); }
}

.heading {
  font-family: var(--heading-font-family);
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.07em;
}

.heading-1 { font-size: var(--heading-1); }
.heading-2 { font-size: var(--heading-2); }
.heading-3 { font-size: var(--heading-3); }
.heading-4 { font-size: var(--heading-4); }
.heading-5 { font-size: var(--heading-5); }
.heading-6 { font-size: var(--heading-6); }

.heading-card {
  letter-spacing: -0.03em;
  font-family: var(--body-font-family);
  font-size: var(--heading-card);
}

.text {
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 500;
  line-height: 135%;
  letter-spacing: -0.02em;
}

.text.text--xl { font-size: var(--text-xl); }
.text.text--large { font-size: var(--text-large); }
.text.text--medium--plus { font-size: var(--text-medium-plus); }
.text.text--medium,
.text.text--medium a { font-size: var(--text-medium); }
.text.text--small { font-size: var(--text-small); }
.text--uppercase { text-transform: uppercase; }
.text--center { text-align: center; }

@media screen and (max-width: 959px) {
  .heading-1,
  .heading-1--mobile { font-size: var(--heading-1-m); }
  .heading-2,
  .heading-2--mobile { font-size: var(--heading-2-m); }
  .heading-3,
  .heading-3--mobile { font-size: var(--heading-3-m); }
  .heading-4,
  .heading-4--mobile { font-size: var(--heading-4-m); }
  .heading-5,
  .heading-5--mobile { font-size: var(--heading-5-m); }
  .heading-6,
  .heading-6--mobile { font-size: var(--heading-6-m); }
  .heading-card,
  .heading-card--mobile { font-size: var(--heading-card-m); }

  .text.text--xl { font-size: var(--text-xl-m); }
  .text.text--large { font-size: var(--text-large-m); }
  .text.text--medium,
  .text.text--medium a,
  .text.text--medium--plus { font-size: var(--text-medium-m); }
  .text.text--small { font-size: var(--text-small-m); }
}

.color--white { color: var(--white); }
.color--black { color: var(--black); }
.color--black-80 { color: var(--black-80); }
.color--black-40 { color: var(--black-40); }
.color--black-30 { color: var(--black-30); }
.color--red { color: var(--red); }
.color--yellow { color: var(--yellow); }
.color--green { color: var(--green); }
.color--light-green { color: var(--light-green); }
.color--grey { color: var(--grey-text-light); }
.color--grey-dark { color: var(--grey-text-dark); }
.color--muted { color: var(--grey-muted); }
.color--light-black { color: var(--light-black); }

.bg--black { background-color: var(--black); }
.bg--white { background-color: var(--white); }
.bg--page { background-color: var(--bg); }
.bg--red { background-color: var(--red); }
.bg--yellow { background-color: var(--yellow); }
.bg--green { background-color: var(--green); }
.bg--light-green { background-color: var(--light-green); }
.bg--light-grey { background-color: var(--light-grey); }
.bg--light-black { background-color: var(--light-black); }

.border-none { border: none; }

.br--20 { border-radius: 1.25rem; }
.br--24 { border-radius: 1.5rem; }
.br--32 { border-radius: 2rem; }

@media screen and (max-width: 959px) {
  .br--16--m { border-radius: 1rem; }
  .br--20--m { border-radius: 1.25rem; }
  .br--24--m { border-radius: 1.5rem; }
  .br--32--m { border-radius: 2rem; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--body-font-family);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, transform 0.1s ease, filter 0.2s ease;
  box-shadow: 0 0 0 transparent;
}

.btn:hover {
  box-shadow: 0 0 71px var(--btn-glow);
}

.btn:active {
  filter: brightness(0.85);
  box-shadow: 0 0 50px var(--btn-glow);
  transform: scale(0.98);
}

.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

.btn--primary:hover,
.btn--primary:focus {
  color: var(--btn-primary-color);
}

.btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
}

.btn--secondary:hover,
.btn--secondary:focus {
  color: var(--btn-secondary-color);
}

.btn--lg {
  justify-content: space-between;
  width: 29.125rem;
  height: 8.8125rem;
  padding: 0 1rem;
  gap: 1rem;
  font-size: 1.5rem;
}

.btn--md {
  justify-content: space-between;
  height: 6.75rem;
  padding: 0 1rem;
  gap: 1rem;
  font-size: 1.5rem;
}

.btn--sm {
  width: auto;
  min-width: 14rem;
  height: 4.75rem;
  padding: 0 2rem;
  font-size: 1.5rem;
}

.btn--full { width: 100%; }

.btn .text {
  flex: 1 1 auto;
  text-align: center;
}

.btn-icon {
  background-color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-icon img {
  height: auto;
  object-fit: contain;
}

.btn--lg .btn-icon { width: 7.625rem; height: 7.625rem; }
.btn--lg .btn-icon img { width: 2.975rem; }
.btn--md .btn-icon { width: 6rem; height: 6rem; }
.btn--md .btn-icon img { width: 2.35rem; }

@media screen and (max-width: 959px) {
  .btn--lg {
    width: 100%;
    max-width: 21.125rem;
    height: 3.75rem;
    font-size: 0.875rem;
    border-radius: 2rem;
  }

  .btn--md {
    height: 3.75rem;
    font-size: 0.875rem;
    border-radius: 2rem;
  }

  .btn--md .btn-icon,
  .btn--lg .btn-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .btn--md .btn-icon img,
  .btn--lg .btn-icon img {
    width: 1.25rem;
  }

  .btn--sm {
    min-width: 0;
    height: 5.25rem;
    font-size: 1rem;
  }
}

.slider-arrow {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--btn-primary-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.slider-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slider-arrow svg {
  stroke: var(--white);
  color: var(--white);
  width: 0.625rem;
  height: auto;
}

.slider-arrow--prev svg { transform: scaleX(-1); }

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg.icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  fill: currentColor;
  flex-shrink: 0;
}

svg.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
svg.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

svg path {
  fill: inherit;
  stroke: inherit;
}

.icon-badge {
  display: flex;
  width: 4.5rem;
  height: 4.5rem;
  justify-content: center;
  align-items: center;
  background-color: var(--light-green);
  border-radius: 100%;
  flex-shrink: 0;
}

.icon-badge img,
.icon-badge svg {
  width: 2.25rem;
  height: 2.25rem;
}

@media screen and (max-width: 959px) {
  .icon-badge {
    width: 2.75rem;
    height: 2.75rem;
  }

  .icon-badge img,
  .icon-badge svg {
    width: 1.203125rem;
    height: 1.203125rem;
  }

  .icon-badge.icon-badge--large {
    width: 4rem;
    height: 4rem;
  }

  .icon-badge.icon-badge--large img,
  .icon-badge.icon-badge--large svg {
    width: 2rem;
    height: 2rem;
  }
}

@media screen and (min-width: 960px) {
  .hide-desktop,
  .mobile-only { display: none !important; }
}

@media screen and (max-width: 959px) {
  .hide-mobile,
  .desktop-only { display: none !important; }
}
