/* ===============================
   SITE HEADER — Figma 894:600
   Height 117 | pad 17/18 | row 82
   Menu gap 52 | section gap 249
================================ */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1000;
  width: 100%;
  height: 11.7rem; /* 117px → 11.7rem */
  box-sizing: border-box;
  background-color: var(--color-navy);
  padding-block: 1.7rem 1.8rem; /* 17px / 18px → rem */
  transition:
    height 0.35s ease,
    padding-block 0.35s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.28);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem; /* soft min; Figma ~249px via space-between on 1680 */
  height: 8.2rem; /* 82px → 8.2rem */
  box-sizing: border-box;
  transition: height 0.35s ease;
}

.site-header__branding {
  flex: 0 0 auto;
  width: 28.4rem; /* 284px → 28.4rem */
}

.site-header__logo .custom-logo-link,
.site-header__logo-link {
  display: inline-flex;
  align-items: center;
  width: 28.4rem; /* 284px → 28.4rem */
  height: 8.2rem; /* 82px → 8.2rem */
}

.site-header__logo .custom-logo,
.site-header__logo img {
  width: 28.4rem; /* 284px → 28.4rem */
  max-width: 100%;
  height: 8.2rem; /* 82px → 8.2rem */
  object-fit: contain;
}

.site-header__logo-link {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-semibold);
}

.site-header__nav {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.site-header__drawer {
  display: contents;
}

.site-header__drawer-head,
.site-header__close,
.site-header__overlay {
  display: none;
}

.site-header__drawer-footer,
.site-header__btn--drawer {
  display: none;
}

.site-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5.2rem; /* 52px → 5.2rem */
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__menu > .menu-item {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__menu > .menu-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* 10px → 1rem */
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 2rem; /* 30px → 3rem */
  white-space: nowrap;
  transition: color 0.28s ease;
}

/* Figma active/hover pill — outline only, no layout shift */
.site-header__menu > .menu-item > a::before {
  content: "";
  position: absolute;
  inset-block: -1.1rem; /* 11px → 1.1rem */
  inset-inline: -1.9rem; /* 19px → 1.9rem */
  border: 0.1rem solid transparent; /* 1px → 0.1rem */
  border-radius: 1rem; /* 10px → 1rem */
  background-color: transparent;
  transition:
    border-color 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease;
  pointer-events: none;
}

.site-header__menu > .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 1.6rem; /* 16px → 1.6rem */
  height: 0.9rem; /* 9px → 0.9rem */
  flex-shrink: 0;
  background-color: currentColor;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition: transform 0.28s ease;
}

.site-header__menu > .menu-item > a:hover,
.site-header__menu > .menu-item > a:focus-visible,
.site-header__menu > .current-menu-item > a,
.site-header__menu > .current-menu-ancestor > a,
.site-header__menu > .current_page_item > a {
  color: var(--color-accent);
}

.site-header__menu > .menu-item > a:hover::before,
.site-header__menu > .menu-item > a:focus-visible::before,
.site-header__menu > .current-menu-item > a::before,
.site-header__menu > .current-menu-ancestor > a::before,
.site-header__menu > .current_page_item > a::before {
  border-color: var(--color-accent);
  background-color: rgba(75, 171, 243, 0.08);
  box-shadow: 0 0 0 0.1rem rgba(75, 171, 243, 0.12);
}

.site-header__menu > .menu-item:hover > a::after,
.site-header__menu > .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}

.site-header__menu .sub-menu {
  position: absolute;
  inset-block-start: calc(100% + 1.6rem);
  inset-inline-start: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 22rem; /* 220px → 22rem */
  margin: 0;
  padding: 1.2rem;
  list-style: none;
  border: 0.1rem solid rgba(75, 171, 243, 0.35);
  border-radius: 1rem; /* 10px → 1rem */
  background-color: var(--color-navy);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.8rem);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease;
}

.site-header__menu > .menu-item:hover > .sub-menu,
.site-header__menu > .menu-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-header__menu .sub-menu .menu-item > a {
  display: block;
  padding: 1rem 1.4rem;
  border-radius: 0.8rem;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.8rem; /* 18px → 1.8rem */
  font-weight: var(--weight-medium);
  line-height: 1.4;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.site-header__menu .sub-menu .menu-item > a:hover,
.site-header__menu .sub-menu .menu-item > a:focus-visible {
  color: var(--color-accent);
  background-color: rgba(75, 171, 243, 0.12);
}

.site-header__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 27.1rem; /* 271px → 27.1rem */
  height: 5.5rem; /* 55px → 5.5rem */
  padding-inline: 2.9rem; /* 29px → 2.9rem */
  padding-block: 0;
  border: 0.1rem solid var(--color-white); /* 1px → 0.1rem */
  border-radius: 1rem; /* 10px → 1rem */
  background-color: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-semibold);
  line-height: 3rem; /* 30px → 3rem */
  white-space: nowrap;
  transition:
    color 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

.site-header__btn:hover,
.site-header__btn:focus-visible {
  color: var(--color-navy);
  background-color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: 0 0.8rem 2.4rem rgba(255, 255, 255, 0.18);
  transform: translateY(-0.1rem);
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  width: 4.4rem;
  height: 4.4rem;
  margin: 0;
  padding: 0.8rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.35);
  border-radius: 0.8rem;
  background: transparent;
  cursor: pointer;
}

.site-header__toggle-bar {
  display: block;
  width: 100%;
  height: 0.2rem;
  border-radius: 0.2rem;
  background-color: var(--color-white);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(1) {
  transform: translateY(0.8rem) rotate(45deg);
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-nav-open .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-0.8rem) rotate(-45deg);
}

body.is-header-nav-open {
  overflow: hidden;
}

/* ===============================
   HOME BANNER
================================ */

.home-banner {
  position: relative;
  width: 100%;
  background-color: var(--color-white);
}

.home-banner__slider {
  width: 100%;
  --swiper-pagination-color: #4babf3;
  --swiper-pagination-bullet-inactive-color: #ffffff;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 0.4rem; /* 4px → 0.4rem */
}

.home-banner__slide {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.home-banner__media {
  position: relative;
  width: 100%;
  line-height: 0;
}

.home-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-white) 0%,
    rgba(255, 255, 255, 0) 56.611%
  );
  pointer-events: none;
  z-index: 1;
}

.home-banner__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

.home-banner__image--mobile {
  display: none;
}

.home-banner__content {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  z-index: 2;
  width: 100%;
  transform: translateY(-50%);
}

.home-banner__content .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6rem; /* 70px → 7rem */
}

.home-banner__content .home-banner__heading {
  max-width: 61.1rem; /* 611px → 61.1rem */
}

.home-banner__heading {
  width: 100%;
  font-family: var(--font-body);
  font-size: 12rem; /* 120px → 12rem */
  font-weight: var(--weight-medium);
  line-height: 12rem; /* 120px → 12rem */
  color: var(--color-brand);
  opacity: 0;
  transform: translate3d(-4rem, 0, 0);
}

.home-banner__heading.is-animating {
  animation: home-banner-fade-right 0.8s ease-out forwards;
}

.home-banner__heading span {
  display: block;
 
  font-size: 8rem; /* 80px → 8rem */
  font-weight: var(--weight-medium);
  line-height: normal;
  color: var(--color-navy);
  text-transform: capitalize;
}

.home-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27rem; /* 270px → 27rem */
  min-height: 6rem; /* 60px → 6rem */
  padding-inline: 3rem; /* 30px → 3rem */
  padding-block: 2rem; /* 20px → 2rem */
  border-radius: 1rem; /* 10px → 1rem */
  background-color: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 3rem; /* 30px → 3rem */
  font-weight: var(--weight-semibold);
  line-height: 3rem; /* 30px → 3rem */
  transition: background-color 0.25s ease, color 0.25s ease;
  opacity: 0;
  transform: translate3d(-4rem, 0, 0);
}

.home-banner__btn.is-animating {
  animation: home-banner-fade-right 0.8s ease-out 0.4s forwards;
}

.home-banner__btn:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

@keyframes home-banner-fade-right {
  from {
    opacity: 0;
    transform: translate3d(-4rem, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner__heading,
  .home-banner__btn {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.home-banner .swiper-pagination {
  inset-block-end: 4.3rem; /* ~43px → 4.3rem */
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-banner .swiper-pagination-bullet {
  width: 1.3rem; /* 23px → 2.3rem */
  height: 1.3rem; /* 4px → 0.4rem */
  border-radius: 50%; /* 4px → 0.4rem */
  background-color: #A6A6A6;
  opacity: 1;
  transition: background-color 0.25s ease;
}

.home-banner .swiper-pagination-bullet-active {
 
  background-color: #4babf3;
  opacity: 1;
}

/* ===============================
   PAYMENT LOGOS — Figma 894:589
================================ */

.payment-logos {
  width: 100%;
  background-color: var(--color-white);
  border-block-end: 0.1rem solid #e5e7eb;
  padding-block-end: 3.6rem; /* 36px → 3.6rem */
}

.payment-logos__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5.4rem; /* 54px → 5.4rem */
  background-color: var(--color-navy);
}

.payment-logos__heading {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1.4rem; /* 14px → 1.4rem */
  font-weight: var(--weight-regular);
  line-height: 3.2rem; /* 32px → 3.2rem */
  letter-spacing: 0.238rem; /* 2.38px → 0.238rem */
  text-align: center;
  text-transform: uppercase;
}

.payment-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8.6rem; /* 86px → 8.6rem */
  margin-block-start: 4.3rem; /* 43px → 4.3rem */
  padding-inline: 2rem;
}

.payment-logos__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.8rem; /* 138px → 13.8rem */
  height: 5.5rem; /* 55px → 5.5rem */
}

.payment-logos__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease;
}

.payment-logos__link:hover,
.payment-logos__link:focus-visible {
  opacity: 0.75;
}

.payment-logos__image {
  width: 100%;
  max-width: 13.8rem; /* 138px → 13.8rem */
  max-height: 5.5rem; /* 55px → 5.5rem */
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* ===============================
   OPERATOR SECTION — Figma 894:319
================================ */

.operator-section {
  width: 100%;
  background-color: var(--color-white);
  padding-block: 10rem; /* 100px → 10rem */
}

.operator-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9rem; /* 90px → 9rem */
  max-width: 139.8rem; /* Figma 894:320 content width 1398px */
}

.operator-section__heading {
  margin: 0;
  width: 100%;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 5rem; /* 50px → 5rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  text-transform: capitalize;
}

.operator-section__heading span {
  color: var(--color-accent-soft); /* #44b8f3 */
}

.operator-section__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 7rem; /* 90px → 9rem — Figma item gaps */
  row-gap: 9rem;
  width: 100%;
}

.operator-section__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 28.1rem; /* 281px → 28.1rem */
  max-width: 100%;
}

.operator-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 8rem; /* 80px → 8rem */
  height: 8rem; /* 80px → 8rem */
  margin-block-end: 2.5rem; /* 25px → 2.5rem icon → text */
  padding: 1.1rem; /* 11px → 1.1rem */
  border: 0.1rem solid var(--color-accent-soft); /* #44b8f3 — Figma icon frame */
  border-radius: 1rem; /* 10px → 1rem */
  background-color: var(--color-white);
  box-sizing: border-box;
}

.operator-section__image {
  width: 5.6rem; /* ~56px → 5.6rem */
  height: 5.6rem;
  object-fit: contain;
}

.operator-section__title {
  margin: 0;
  margin-block-end: 1rem; /* 20px → 2rem title → body */
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.operator-section__text {
  margin: 0;
  color: var(--color-text-muted); /* #4d525f */
  font-family: var(--font-body);
  font-size: 2rem; /* 20px → 2rem */
  font-weight: var(--weight-regular);
  line-height: 2.6rem; /* 26px → 2.6rem */
}

.operator-section__text > *:first-child {
  margin-block-start: 0;
}

.operator-section__text > *:last-child {
  margin-block-end: 0;
}

.operator-section__text p {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

/* ===============================
   VIDEO SECTION — Figma 982:27
================================ */

.video-section {
  width: 100%;
  background-color: var(--color-white);
  padding-block-end: 10rem; /* 100px → 10rem */
}

/* Figma content width 1416px (px 252 each side on 1920) */
.video-section .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9rem; /* 90px → 9rem — Figma gap heading → video */
  max-width: 141.6rem; /* 1416px → 141.6rem */
  margin-inline: auto;
}

.video-section__heading {
  margin: 0;
  width: 100%;
  color: var(--color-navy); /* #00071d */
  font-family: var(--font-heading);
  font-size: 5rem; /* 50px → 5rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  text-transform: capitalize;
}

.video-section__heading span {
  color: var(--color-accent-soft); /* #44b8f3 */
}

.video-section__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 848 / 480; /* Figma video frame */
  overflow: hidden;
  background-color: var(--color-accent-soft); /* Figma placeholder blue */
}

.video-section__player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-section__player--html5 {
  object-fit: cover;
}

.video-section__player--wistia {
  position: absolute;
  inset: 0;
}

/* ===============================
   SOLUTIONS SECTION — Figma 894:269
================================ */

.solutions-section {
  position: relative;
  width: 100%;
  padding-block: 10rem; /* 100px → 10rem */
  border-block: 0.1rem solid var(--color-brand); /* #00b0eb */
  background-color: var(--color-navy);
  overflow: hidden;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.solutions-section > * {
  position: relative;
  z-index: 1;
}

.solutions-section__intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.3rem; /* 63px → 6.3rem */
  text-align: center;
  margin-block-end: 6.3rem;
}

.solutions-section__heading {
  margin: 0;
  width: 100%;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 5rem; /* 50px → 5rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.solutions-section__heading span {
  color: var(--color-brand); /* #00b0eb */
}

.solutions-section__intro {
  margin: 0;
  max-width: 93.2rem; /* 932px → 93.2rem */
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2.2rem; /* 22px → 2.2rem */
  font-weight: var(--weight-regular);
  line-height: 3.4rem; /* 34px → 3.4rem */
}

.solutions-section__slider {
  width: 100%;
  margin-block-end: 6.3rem; /* 63px → 6.3rem */
  overflow: hidden;
}

.solutions-section__slider .swiper-wrapper {
  align-items: stretch;

}
.solutions-section__slider.is-few-slides .swiper-wrapper{
  justify-content: center;
}

.solutions-section__slider .swiper-slide {
  width: 40.2rem; /* 402px → 40.2rem — Figma card */
  height: auto;
  display: flex;
}

.solutions-section__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 44rem; /* 440px → 44rem */
  border: 0.2rem solid #dddbdb;
  border-radius: 2rem; /* 20px → 2rem */
  background-color: var(--color-white);
  overflow: hidden;
  box-sizing: border-box;
}

.solutions-section__media {
  flex-shrink: 0;
  width: 100%;
  height: 23.8rem; /* 238px → 23.8rem */
  overflow: hidden;
  border-block-end: 0;
}

.solutions-section__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.45s ease;
  position: relative;
    margin-top: -0.2rem;
}

.solutions-section__item:hover .solutions-section__image,
.solutions-section__item:focus-within .solutions-section__image {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .solutions-section__image {
    transition: none;
  }

  .solutions-section__item:hover .solutions-section__image,
  .solutions-section__item:focus-within .solutions-section__image {
    transform: none;
  }
}

.solutions-section__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  gap: 2.5rem; /* 25px → 2.5rem */
  width: 100%;
  max-width: 37.5rem; /* 325px → 32.5rem */
  padding-block: 3.8rem 3rem; /* ~38px top */
  padding-inline: 2.4rem;
  text-align: center;
  box-sizing: border-box;
}

.solutions-section__title {
  margin: 0;
  width: 100%;
  color: var(--color-brand); /* #00b0eb */
  font-family: var(--font-heading);
  font-size: 3.5rem; /* 35px → 3.5rem */
  font-weight: var(--weight-medium);
  line-height: 4rem; /* 40px → 4rem */
  text-transform: capitalize;
  box-sizing: border-box;
}

.solutions-section__text {
  margin: 0;
  width: 100%;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 2rem; /* 20px → 2rem */
  font-weight: var(--weight-regular);
  line-height: 3rem; /* 30px → 3rem */
}

.solutions-section__cta-wrap {
  display: flex;
  justify-content: center;
}

.solutions-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27rem; /* 270px → 27rem */
  min-height: 6rem; /* 60px → 6rem */
  padding-inline: 3rem; /* 30px → 3rem */
  padding-block: 2rem; /* 20px → 2rem */
  border: 0.1rem solid var(--color-white);
  border-radius: 1rem; /* 10px → 1rem */
  background-color: var(--color-brand); /* #00b0eb */
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 3rem; /* 30px → 3rem */
  font-weight: var(--weight-semibold, 600);
  line-height: 3rem;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.solutions-section__btn:hover,
.solutions-section__btn:focus-visible {
  opacity: 0.92;
  color: var(--color-white);
}

/* ===============================
   STEP SECTION — Figma 894:518
================================ */

.step-section {
  width: 100%;
  padding-block: 10rem; /* 100px → 10rem */
  background-color: var(--color-white);
}

.step-section__inner {
  display: flex;
  align-items: flex-start;
  gap: 14.7rem; /* 147px → 14.7rem */
}

.step-section__product {
  position: relative;
  flex-shrink: 0;
  width: 54.4rem; /* 544px → 54.4rem */
  height: 54.4rem;
  border: 0.2rem solid #0ea2e6;
  border-radius: 50%;
  box-sizing: border-box;
}

.step-section__circle {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

/* Figma 952:139 — terminal body 475.6×457 at left 34 / top 55 within 544 */
.step-section__screen-frame {
  position: absolute;
  inset-inline-start: 6.25%; /* 34 / 544 */
  inset-block-start: 10.11%; /* 55 / 544 */
  z-index: 1;
  display: block;
  width: 87.43%; /* 475.6 / 544 */
  height: 84%; /* 457 / 544 */
  object-fit: contain;
  pointer-events: none;
}

/* Figma 952:140 — screen glass 302.5×302.5 at 118.7 / 91.3 within 544 */
.step-section__device {
  position: absolute;
  inset-inline-start: 21.82%; /* 118.7 / 544 */
  inset-block-start: 16.78%; /* 91.3 / 544 */
  z-index: 3;
  width: 55.61%; /* 302.5 / 544 */
  height: 55.61%;
}

.step-section__screen-slider {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem; /* 10px → 1rem */
  background-color: var(--color-brand);
}

.step-section__screen-slider .swiper-wrapper,
.step-section__screen-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.step-section__screen-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.step-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem; /* 30px → 3rem */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 97rem; /* 970px → 97rem */
}

.step-section__heading {
  margin: 0;
  width: 100%;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 5rem; /* 50px → 5rem */
  font-weight: var(--weight-medium);
  line-height: 6rem; /* 60px → 6rem */
}

.step-section__heading span {
  color: var(--color-accent-soft); /* #44b8f3 */
}

.step-section__intro {
  margin: 0;
  width: 100%;
  color: var(--color-text-muted); /* #4d525f */
  font-family: var(--font-body);
  font-size: 2rem; /* 20px → 2rem */
  font-weight: var(--weight-regular);
  line-height: 3rem; /* 30px → 3rem */
}

/* Steps row — equal-width columns */
.step-section__steps {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8.5rem; /* 85px → 8.5rem */
  width: 100%;
  margin-block-start: 2.8rem; /* 28px → 2.8rem */
}

.step-section__steps::before {
  content: "";
  position: absolute;
  /* center of first / last equal column: (100% - 2×gap) / 6 */
  inset-inline-start: calc((100% - 17rem) / 6);
  inset-inline-end: calc((100% - 17rem) / 6);
  inset-block-start: 3.35rem; /* half of 6.7rem number */
  z-index: 0;
  height: 0;
  border-block-start: 0.4rem dashed var(--color-accent-soft); /* #44b8f3 */
  pointer-events: none;
}

.step-section__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem; /* 30px → 3rem */
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  text-align: center;
}

.step-section__step:nth-child(1),
.step-section__step:nth-child(2),
.step-section__step:nth-child(3) {
  width: auto;
}

.step-section__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 6.7rem; /* 67px → 6.7rem */
  height: 6.7rem;
  border-radius: 50%;
  background-color: var(--color-accent-soft); /* #44b8f3 */
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 3.5rem; /* 35px → 3.5rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.step-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 8rem; /* 80px → 8rem */
}

.step-section__icon-image {
  display: block;
  max-width: 100%;
  max-height: 8rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.step-section__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; /* 20px → 2rem — Figma title → text */
  width: 100%;
}

.step-section__title {
  margin: 0;
  width: 100%;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.step-section__text {
  margin: 0;
  width: 100%;
  color: var(--color-text-muted); /* #4d525f */
  font-family: var(--font-body);
  font-size: 2rem; /* 20px → 2rem */
  font-weight: var(--weight-regular);
  line-height: 2.6rem; /* 26px → 2.6rem */
}

/* =========================================
   What KwikPay Does — Figma 894:460
========================================= */
.does-section {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 86.7rem; /* 867px → 86.7rem */
  padding-block: 8rem;
  background-color: var(--color-accent-soft); /* #44b8f3 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.does-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8.1rem; /* 81px → 8.1rem — Figma 894:462 */
  width: 100%;
}

.does-section__about {
  display: flex;
  flex-direction: column;
  flex: 0 0 46rem; /* 460px → 46rem */
  gap: 3rem; /* 30px → 3rem */
  width: 46rem;
  max-width: 46rem;
}

.does-section__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem; /* 30px → 3rem */
  width: 100%;
}

.does-section__subheading {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 0.24rem; /* 2.4px → 0.24rem */
  text-transform: uppercase;
}

.does-section__heading {
  margin: 0;
  color: var(--color-navy); /* #00071d */
  font-family: var(--font-heading);
  font-size: 5.5rem; /* 55px → 5.5rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.does-section__heading span {
  color: var(--color-white);
}

.does-section__content {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2.2rem; /* 22px → 2.2rem */
  font-weight: var(--weight-regular);
  line-height: 2.8rem; /* 28px → 2.8rem */
}

.does-section__content p {
  margin: 0;
}

.does-section__content p + p {
  margin-block-start: 1.6rem;
}

.does-section__content a {
  color: inherit;
  text-decoration: underline;
}

.does-section__features {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 20px → 2rem */
  width: 100%;
}

.does-section__feature {
  display: flex;
  align-items: flex-start;
  gap: 2.2rem; /* ~22px between 60 icon and 388 text */
  width: 100%;
  padding-block-end: 2rem; /* 20px → 2rem — space above divider */
  border-block-end: 0.1rem solid var(--color-white);
}

.does-section__feature:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.does-section__feature-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 6rem; /* 60px → 6rem */
  height: 6rem;
  padding: 1.4rem; /* 14px → 1.4rem */
  background-color: var(--color-white);
  border-radius: 3rem; /* 30px → 3rem */
}

.does-section__feature-icon-image {
  display: block;
  width: 3.2rem; /* 32px → 3.2rem */
  height: 3.2rem;
  object-fit: contain;
}

.does-section__feature-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem; /* 20px → 2rem */
  min-width: 0;
}

.does-section__feature-title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.does-section__feature-text {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 2.2rem; /* 22px → 2.2rem */
  font-weight: var(--weight-regular);
  line-height: 2.8rem; /* 28px → 2.8rem */
}

.does-section__middle {
  position: relative;
  flex: 1 1 auto;
  width: 65.3rem; /* 653px → 65.3rem */
  max-width: 65.3rem;
  min-width: 0;
}

.does-section__middle-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Figma 894:495 — Platform in three parts card */
.does-section__platform {
  display: flex;
  flex-direction: column;
  flex: 0 0 40.5rem; /* 405px → 40.5rem */
  width: 40.5rem;
  max-width: 40.5rem;
}

.does-section__platform-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 9.8rem; /* 98px → 9.8rem */
  padding: 3.9rem 3.1rem 4rem;
  border: 0.1rem solid var(--color-white);
  border-radius: 3.3rem 3.3rem 0 0; /* 33px → 3.3rem */
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.5) 0%,
    var(--color-accent-soft) 100%
  );
}

.does-section__platform-heading {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.does-section__platform-body {
  width: 100%;
  padding: 3.4rem; /* 34px → 3.4rem */
  border: 0.1rem solid var(--color-white);
  border-top: 0; /* header bottom border is the separator */
  border-radius: 0 0 3.3rem 3.3rem;
}

.does-section__platform-list {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 20px → 2rem — Figma 894:499 */
  width: 100%;
}

.does-section__platform-item {
  display: flex;
  align-items: flex-start;
  gap: 3rem; /* 30px — 335 − 64 − 241 */
  width: 100%;
  padding-block-end: 1.8rem; /* 18px → 1.8rem */
  border-block-end: 0.1rem solid rgba(255, 255, 255, 0.2);
}

.does-section__platform-item:last-child {
  border-block-end: 0;
}

.does-section__platform-number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 6.4rem; /* 64px → 6.4rem */
  height: 6.4rem;
  padding: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 3rem; /* 30px → 3rem */
  font-weight: var(--weight-medium);
  line-height: 1;
  text-align: center;
  border: 0.1rem solid var(--color-white);
  border-radius: 0.6rem; /* 6px → 0.6rem */
}

.does-section__platform-item-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem; /* 20px → 2rem */
  min-width: 0;
  padding-block-start: 0.2rem;
}

.does-section__platform-title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 2.6rem; /* 26px → 2.6rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.does-section__platform-text {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 2.2rem; /* 22px → 2.2rem */
  font-weight: var(--weight-medium);
  line-height: 3rem; /* 30px → 3rem */
}

/* =========================================
   Customer Journey — Figma 894:432
========================================= */
.journey-section {
  width: 100%;
  padding-block: 10rem; /* 100px → 10rem */
  background-color: var(--color-white);
}

.journey-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.3rem; /* 53px → 5.3rem */
}

.journey-section__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 35px → 3.5rem */
  max-width: 40rem; /* allow heading to sit on one line */
  text-align: center;
}

.journey-section__eyebrow {
  margin: 0;
  width: 100%;
  color: var(--color-accent-soft); /* #44b8f3 */
  font-family: var(--font-body);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 0.24rem; /* 2.4px → 0.24rem */
  text-transform: uppercase;
}

.journey-section__heading {
  margin: 0;
  width: 100%;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 5.5rem; /* 55px → 5.5rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.journey-section__heading span {
  color: var(--color-accent-soft);
}

.journey-section__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3rem; /* 30px → 3rem */
  width: 169rem; /* 780 + 30 + 64 + 30 + 780 = 1684px */
  max-width: 100%;
}

.journey-section__card {
  position: relative;
  flex: 0 0 78rem; /* fixed 780px — do not stretch */
  width: 78rem;
  max-width: calc((100% - 12.4rem) / 2); /* leave room for arrow + gaps */
  height: 46rem; /* 460px → 46rem */
  overflow: hidden;
  border-radius: 2rem; /* 20px → 2rem */
}

.journey-section__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2rem;
}

.journey-section__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.journey-section__card:hover .journey-section__image {
  transform: scale(1.06);
}

.journey-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 2rem;
  background-image: linear-gradient(
    to top,
    #000000 0%,
    rgba(0, 0, 0, 0) 65%
  );
}

.journey-section__content {
  position: absolute;
  inset-inline: 4.5rem 6.9rem; /* 45px / 69px */
  inset-block-end: 2.3rem; /* 23px */
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 3rem; /* ~30px between number and text */
  width: auto;
  max-width: 66.6rem; /* 666px → 66.6rem */
  column-gap: 2rem;
}

.journey-section__number-wrap {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 2.1rem; /* 21px → 2.1rem */
  width: 5.9rem; /* 59px → 5.9rem */
}

.journey-section__number {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 6.4rem; /* 64px → 6.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.journey-section__number-bar {
  display: block;
  width: 2.4rem; /* 24px → 2.4rem */
  height: 0.3rem; /* 3px → 0.3rem */
  background-color: var(--color-accent-soft);
}

.journey-section__text {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 2rem; /* 20px → 2rem */
  width: auto;
  max-width: 100%; /* 577px → 57.7rem */
  color: var(--color-white);
}

.journey-section__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 5rem; /* 50px → 5rem */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.journey-section__desc {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2.6rem; /* 26px → 2.6rem */
  font-weight: var(--weight-regular);
  line-height: 2.6rem; /* 26px → 2.6rem */
}

.journey-section__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 6.4rem; /* 64px → 6.4rem */
  height: 6.4rem;
}

.journey-section__arrow-image {
  display: block;
  width: 6.4rem;
  height: 6.4rem;
}

/* =========================================
   What Each Side Gets — Figma 894:378
========================================= */
.sides-section {
  position: relative;
  width: 100%;
  min-height: 96rem; /* 960px → 96rem */
  padding-block: 10rem; /* 100px → 10rem */
  background-color: #f6fdff;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.sides-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.3rem; /* 73px → 7.3rem */
}

.sides-section__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 35px → 3.5rem */
  max-width: 50rem;
  text-align: center;
}

.sides-section__eyebrow {
  margin: 0;
  width: 100%;
  color: var(--color-accent-soft);
  font-family: var(--font-body);
  font-size: 2.4rem;
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 0.24rem;
  text-transform: uppercase;
}

.sides-section__heading {
  margin: 0;
  width: 100%;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 5.5rem;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.sides-section__heading span {
  color: var(--color-accent-soft);
}

.sides-section__cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2.3rem; /* 23px → 2.3rem */
  width: 100%;
  max-width: 124.1rem; /* 1241px */
}

.sides-section__card {
  display: flex;
  flex-direction: column;
  flex: 0 1 60.9rem; /* 609px */
  gap: 4.2rem; /* 42px */
  width: 100%;
  max-width: 60.9rem;
  min-height: 61.1rem; /* 611px */
  padding: 6.2rem 4.6rem 6.1rem 5.9rem;
  border: 0.1rem solid #00a4ed;
  border-radius: 3.3rem; /* 33px */
  background-color: #f0f9fe;
}

.sides-section__card:nth-child(2) {
  padding: 6.9rem 5.8rem;
  background-color: var(--color-navy);
}

.sides-section__card-heading {
  margin: 0;
  padding-block-end: 3.2rem;
  border-block-end: 0.1rem solid #00a4ed;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 4.2rem; /* 42px */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.sides-section__card-heading span {
  color: var(--color-accent-soft);
}

.sides-section__card:nth-child(2) .sides-section__card-heading {
  color: var(--color-white);
}

.sides-section__card-content {
  width: 100%;
}

.sides-section__card-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sides-section__card-content li {
  position: relative;
  margin: 0;
  padding-inline-start: 6.2rem; /* 43 + 19 */
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 2.6rem; /* 26px */
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: capitalize;
}

.sides-section__card-content li + li {
  margin-block-start: 4rem; /* 40px */
}

.sides-section__card-content li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.2rem;
  width: 4.3rem;
  height: 3.5rem;
  background-image: url("../images/li-check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.sides-section__card:nth-child(2) .sides-section__card-content li {
  color: var(--color-white);
}

.sides-section__card-content p {
  margin: 0;
}

/* ===============================
   SITE FOOTER
================================ */

.site-footer {
  color: var(--color-white);
  overflow: hidden;
}

.site-footer__main {
  position: relative;
  background-color: var(--color-brand); /* #00b0eb */
  padding-block: 6.5rem; /* 65px → 6.5rem */
  overflow: hidden;
}

.site-footer__deco {
  position: absolute;
    inset-block-start: 0;
    inset-inline-end: -0.5rem;
    z-index: 0;
    width: 8rem;
    height: 11rem;
    pointer-events: none;
    opacity: 0.45;
}
.site-footer__deco svg{
  width:100%;
  height:100%;
}

.site-footer__deco-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top right;
}

.site-footer__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 50px → 5rem */
}

.site-footer__brand-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  min-height: 16rem; /* 160px → 16rem */
  padding-block-end: 6rem; /* space under logo before border */
  border-block-end: 0.1rem solid #bbd9e8;
}

.site-footer__logo {
  flex: 0 1 auto;
  max-width: 35.1rem; /* 351px → 35.1rem */
}

.site-footer__logo-image,
.site-footer__logo img,
.site-footer__logo svg {
  display: block;
  width: 35.1rem; /* 351px → 35.1rem */
  height: 10rem; /* 100px → 10rem */
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.site-footer__back-top {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-block-end: 1rem;
  color: var(--color-white);
  text-decoration: none;
  flex-shrink: 0;
}

.site-footer__back-top-text {
  font-family: var(--font-body);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-regular);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-footer__back-top-icon {
  display: inline-flex;
  width: 3rem; /* 30px → 3rem */
  height: 3rem;
  flex-shrink: 0;
}

.site-footer__back-top-icon img {
  display: block;
  width: 3rem;
  height: 3rem;
}
.site-footer__back-top:hover{
  opacity:0.8;
  color:#fff;
}

.site-footer__connect {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4.2rem; /* 42px → 4.2rem */
}

.site-footer__short {
  margin: 0;
  font-family: var(--font-body);
  font-size: 2.4rem; /* 24px → 2.4rem */
  font-weight: var(--weight-medium);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-white);
}

.site-footer__heading-wrap {
  position: relative;
  display: block;
  width: max-content;
}

.site-footer__heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 27.2rem; /* 272px → 27.2rem */
  font-weight: var(--weight-regular);
  line-height: 0.85;
  letter-spacing: 1.36rem; /* 13.6px → 1.36rem */
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

.site-footer__heading-icon {
  position: absolute;
    inset-inline-end: 1rem;
    inset-block-end: -2.4rem;
    display: inline-flex;
    width: 7rem;
    height: 7rem;
    z-index: 1;
    text-decoration: none;
    color: inherit;
    background: #0C1D43;
    border-radius:50%;
    display:flex;
    justify-content: center;
    align-items:center;
}

.site-footer__heading-icon img {
  display: block;
  width: 7rem;
  height: 7rem;
}

a.site-footer__heading-icon:hover,
a.site-footer__heading-icon:focus-visible {
  opacity: 0.85;
}

.site-footer__bottom {
  background-color: var(--color-navy); /* #00071d — Figma 974:13 */
  padding-block: 3.9rem 3.8rem; /* 39px / 38px → rem */
}

.site-footer__bottom-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  width: 100%;
}

/* Left: social icons strip (Figma ~257×28) */
.site-footer__social {
  flex: 0 0 auto;
}

.site-footer__social-list,
.site-footer__social-list ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3.2rem; /* spaced icons across ~25.7rem strip */
  margin: 0;
  padding: 0;
  list-style: none;
  height: 2.8rem; /* 28px → 2.8rem */
}

.site-footer__social-list .menu-item,
.site-footer__social-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--color-white);
  font-size: 2.4rem;
  line-height: 1;
  text-decoration: none;
  transition:0.5s;
}

.site-footer__social-list a i {
  font-size: 2.4rem;
  line-height: 1;
  color: inherit;
}

.site-footer__social-list a:hover,
.site-footer__social-list a:focus-visible {
  color:#44B8F3;
}

/*
 * Right: ONE line like Figma —
 * Privacy Policy | Terms & Conditions | Cookie Policy Copyright: © …
 * Footer menu links first, copyright immediately after (space only, no pipe).
 */
.site-footer__legal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  margin-inline-start: auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1.8rem; /* 18px → 1.8rem */
  font-weight: var(--weight-medium);
  line-height: normal;
  color: #fff4f4;
  white-space: nowrap;
}

.site-footer__menu {
  display: inline-flex;
  flex: 0 0 auto;
}

.site-footer__menu-list,
.site-footer__menu-list ul {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu-list .menu-item,
.site-footer__menu-list li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu-list .menu-item:not(:last-child)::after,
.site-footer__menu-list li:not(:last-child)::after {
  content: "|";
  margin-inline: 0.6rem;
  color: #fff4f4;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.site-footer__menu-list a {
  color: #fff4f4;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.5s;
}

.site-footer__menu-list a:hover,
.site-footer__menu-list a:focus-visible {
 color:#44B8F3;
}

.site-footer__copyright {
  display: inline;
  margin: 0;
  margin-inline-start: 0.6rem; /* space before "Copyright:" — Figma has no "|" here */
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-align: start;
  white-space: nowrap;
}

.site-footer .screen-reader-text {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===============================
   404 — NO CONTENT PAGE
================================ */

.no-contentpage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-block: 10rem 12rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 176, 235, 0.18) 0%, transparent 70%),
    var(--color-navy);
  overflow: hidden;
}

.no-contentpage__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  max-width: 72rem;
  text-align: center;
}

.no-contentpage__code {
  margin: 0;
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: 16rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.04em;
}

.no-contentpage__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 4.8rem;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-transform: uppercase;
}

.no-contentpage__text {
  margin: 0;
  max-width: 52rem;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: var(--weight-regular);
  line-height: 3rem;
}

.no-contentpage__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22rem;
  min-height: 5.6rem;
  margin-block-start: 1.6rem;
  padding-inline: 3.2rem;
  padding-block: 1.6rem;
  border-radius: 1rem;
  background-color: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.no-contentpage__btn:hover,
.no-contentpage__btn:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-white);
}