/* ================= MIDDLE SECTION ================= */

.section:nth-of-type(2) .section-glass {
  --glass-blur: 1px;
  --glass-inset-top: clamp(10px, 2.2vh, 20px);
  --glass-inset-right: 24px;
  --glass-inset-bottom: clamp(4px, 2.2vh, 20px);
  --glass-inset-left: 24px;
  --glass-padding-top: clamp(20px, 4.2vh, 38px);
  --glass-padding-right: 48px;
  --glass-padding-bottom: clamp(14px, 4.2vh, 38px);
  --glass-padding-left: 48px;
  --glass-gap: clamp(20px, 4.2vh, 38px);
  --glass-radius: 24px;

  position: absolute;
  top: var(--glass-inset-top);
  left: var(--glass-inset-left);
  right: var(--glass-inset-right);
  bottom: var(--glass-inset-bottom);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--glass-gap);
  padding: var(--glass-padding-top) var(--glass-padding-right) var(--glass-padding-bottom) var(--glass-padding-left);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--glass-radius);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  font-family: "Plus Jakarta Sans", sans-serif;
  transition: box-shadow 0.6s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.section:nth-of-type(2) .section-glass:hover {
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
}

/* FYNX About */
.section:nth-of-type(2) .fynx-about {
  --about-gap: 14px;
  --about-margin-top: 0;
  --about-margin-bottom: 0;

  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
  margin-top: var(--about-margin-top);
  margin-bottom: var(--about-margin-bottom);
}

.section:nth-of-type(2) .fynx-title {
  --title-size: 44px;
  --title-margin-top: 0;
  --title-margin-bottom: 0;

  text-align: center;
  font-size: var(--title-size);
  font-weight: 700;
  color: #2b1b3f;
  margin: var(--title-margin-top) 0 var(--title-margin-bottom) 0;
}

.section:nth-of-type(2) .fynx-cards {
  --cards-gap: 14px;
  --cards-margin-top: 0;
  --cards-margin-bottom: 0;

  display: flex;
  flex-direction: row;
  gap: var(--cards-gap);
  margin-top: var(--cards-margin-top);
  margin-bottom: var(--cards-margin-bottom);
}

.section:nth-of-type(2) .fynx-card {
  --card-padding: 16px;
  --card-radius: 16px;
  --card-min-width: 0;
  --card-text-align: center;
  --card-items-align: center;

  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: var(--card-items-align);
  text-align: var(--card-text-align);
  padding: var(--card-padding);
  min-width: var(--card-min-width);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.55s cubic-bezier(0.33, 1, 0.68, 1), background 0.55s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.section:nth-of-type(2) .fynx-card:hover,
.section:nth-of-type(2) .fynx-card:first-child:hover {
  z-index: 2;
  transform: translateY(-12px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.55);
}

.section:nth-of-type(2) .fynx-card img {
  --card-icon-width: 120px;
  --card-icon-height: 80px;
  --card-icon-align: center;
  --card-icon-margin-bottom: 8px;

  width: var(--card-icon-width);
  height: var(--card-icon-height);
  align-self: var(--card-icon-align);
  margin-bottom: var(--card-icon-margin-bottom);
}

.section:nth-of-type(2) .fynx-card h3 {
  --card-title-size: 22px;
  --card-title-margin-bottom: 6px;

  font-size: var(--card-title-size);
  font-weight: 700;
  color: #2b1b3f;
  margin: 0 0 var(--card-title-margin-bottom) 0;
}

.section:nth-of-type(2) .fynx-card p {
  --card-copy-size: 17px;
  --card-copy-line-height: 1.5;

  font-size: var(--card-copy-size);
  line-height: var(--card-copy-line-height);
  color: #5c4a72;
  margin: 0;
}

/* FYNX Payments */
.section:nth-of-type(2) .fynx-payments {
  --payments-gap: 32px;
  --payments-margin-top: 0;
  --payments-margin-bottom: 0;

  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--payments-gap);
  align-items: flex-start;
  margin-top: var(--payments-margin-top);
  margin-bottom: var(--payments-margin-bottom);
}

.section:nth-of-type(2) .payments-glass-layer {
  --pay-glass-top: -10px;
  --pay-glass-left: 0;
  --pay-glass-width: 100%;
  --pay-glass-height: 75%;

  position: absolute;
  top: var(--pay-glass-top);
  left: var(--pay-glass-left);
  width: var(--pay-glass-width);
  height: var(--pay-glass-height);
  z-index: 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.section:nth-of-type(2) .payments-left,
.section:nth-of-type(2) .payments-right {
  position: relative;
  z-index: 1;
}

.section:nth-of-type(2) .payments-left {
  --pay-left-width: 900px;
  --pay-left-max-height: 1000px;
  --pay-left-flex-shrink: 0;
  --pay-left-margin-top: -158px;
  --pay-left-margin-right: 0;
  --pay-left-margin-bottom: 0;
  --pay-left-margin-left: -190px;
  --pay-left-align-self: flex-start;

  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  align-self: var(--pay-left-align-self);
  margin: var(--pay-left-margin-top) var(--pay-left-margin-right) var(--pay-left-margin-bottom) var(--pay-left-margin-left);
}

.section:nth-of-type(2) .payments-left img {
  --pay-left-img-height: auto;
  --pay-left-img-object-position: left center;

  width: var(--pay-left-width);
  max-width: 100%;
  height: var(--pay-left-img-height);
  max-height: var(--pay-left-max-height);
  object-fit: contain;
  object-position: var(--pay-left-img-object-position);
}

.section:nth-of-type(2) .payments-right {
  --pay-right-flex: 1;
  --pay-right-gap: 10px;
  --pay-right-padding-top: 0;
  --pay-right-padding-right: 0;
  --pay-right-padding-bottom: 0;
  --pay-right-padding-left: 0;
  --pay-right-margin-top: 0;
  --pay-right-margin-right: 0;
  --pay-right-margin-bottom: 0;
  --pay-right-margin-left: -200px;
  --pay-right-align-self: flex-start;

  flex: var(--pay-right-flex);
  min-width: 0;
  max-width: 100%;
  align-self: var(--pay-right-align-self);
  display: flex;
  flex-direction: column;
  gap: var(--pay-right-gap);
  padding: var(--pay-right-padding-top) var(--pay-right-padding-right) var(--pay-right-padding-bottom) var(--pay-right-padding-left);
  margin: var(--pay-right-margin-top) var(--pay-right-margin-right) var(--pay-right-margin-bottom) var(--pay-right-margin-left);
}

.section:nth-of-type(2) .payments-right h2 {
  --pay-heading-size: 32px;
  --pay-heading-margin-top: 0;
  --pay-heading-margin-bottom: 10px;

  font-size: var(--pay-heading-size);
  font-weight: 700;
  color: #2b1b3f;
  width: 100%;
  margin: var(--pay-heading-margin-top) 0 var(--pay-heading-margin-bottom) 0;
  text-align: center;
}

.section:nth-of-type(2) .payments-intro {
  --pay-intro-size: 19px;
  --pay-intro-line-height: 1.55;
  --pay-intro-margin-bottom: 0;

  font-size: var(--pay-intro-size);
  line-height: var(--pay-intro-line-height);
  color: #5c4a72;
  margin: 0 0 var(--pay-intro-margin-bottom) 0;
}

/* Payment steps row */
.section:nth-of-type(2) .payment-steps {
  --steps-width: 100%;
  --steps-min-height: 0;
  --steps-gap: 24px;
  --steps-margin-left: -16px;
  --steps-margin-top: -6px;

  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--steps-gap);
  width: var(--steps-width);
  min-height: var(--steps-min-height);
  margin-left: var(--steps-margin-left);
  margin-top: var(--steps-margin-top);
}

.section:nth-of-type(2) .payment-step {
  --step-width: auto;
  --step-min-width: 0;
  --step-max-width: none;
  --step-min-height: 0;
  --step-flex: 1;
  --step-margin-left: 0;
  --step-margin-top: 0;
  --step-content-align: center;
  --step-text-align: center;
  --step-glass-bg: rgba(255, 255, 255, 0.2);
  --step-glass-blur: 10px;
  --step-glass-radius: 16px;
  --step-glass-border: 1px solid rgba(255, 255, 255, 0.35);
  --step-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  --step-glass-padding: 14px;

  flex: var(--step-flex);
  width: var(--step-width);
  min-width: var(--step-min-width);
  max-width: var(--step-max-width);
  min-height: var(--step-min-height);
  margin-left: var(--step-margin-left);
  margin-top: var(--step-margin-top);
  padding: var(--step-glass-padding);
  background: var(--step-glass-bg);
  backdrop-filter: blur(var(--step-glass-blur));
  -webkit-backdrop-filter: blur(var(--step-glass-blur));
  border-radius: var(--step-glass-radius);
  border: var(--step-glass-border);
  box-shadow: var(--step-glass-shadow);
  display: flex;
  flex-direction: column;
  align-items: var(--step-content-align);
  text-align: var(--step-text-align);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.55s cubic-bezier(0.33, 1, 0.68, 1), background 0.55s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.section:nth-of-type(2) .payment-step:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.5);
}

.section:nth-of-type(2) .payment-step:nth-child(1),
.section:nth-of-type(2) .payment-step:nth-child(2),
.section:nth-of-type(2) .payment-step:nth-child(3) {
  --step-width: auto;
  --step-min-width: 0;
  --step-max-width: none;
  --step-min-height: 0;
  --step-flex: 1;
  --step-margin-left: 50px;
  --step-margin-top: 0;
}

.section:nth-of-type(2) .payment-step img {
  --step-icon-width: 44px;
  --step-icon-height: 44px;
  --step-icon-margin-top: 0;
  --step-icon-margin-right: 0;
  --step-icon-margin-bottom: 20px;
  --step-icon-margin-left: 0;
  --step-icon-align-self: center;

  width: var(--step-icon-width);
  height: var(--step-icon-height);
  margin: var(--step-icon-margin-top) var(--step-icon-margin-right) var(--step-icon-margin-bottom) var(--step-icon-margin-left);
  align-self: var(--step-icon-align-self);
}

.section:nth-of-type(2) .payment-step:nth-child(1) img,
.section:nth-of-type(2) .payment-step:nth-child(2) img,
.section:nth-of-type(2) .payment-step:nth-child(3) img {
  --step-icon-width: 80px;
  --step-icon-height: 130px;
  --step-icon-margin-top: -30px;
  --step-icon-margin-right: 0;
  --step-icon-margin-bottom: -30px;
  --step-icon-margin-left: 0;
  --step-icon-align-self: center;
}

.section:nth-of-type(2) .payment-step h4 {
  --step-title-size: 14px;
  --step-title-margin-bottom: 10px;

  font-size: var(--step-title-size);
  font-weight: 700;
  color: #2b1b3f;
  margin: 0 0 var(--step-title-margin-bottom) 0;
}

.section:nth-of-type(2) .payment-step p {
  --step-copy-size: 12px;
  --step-copy-line-height: 1.5;

  font-size: var(--step-copy-size);
  line-height: var(--step-copy-line-height);
  color: #5c4a72;
  margin: 0;
  text-align: justify;
}

.section:nth-of-type(2) .payment-step:nth-child(1) h4,
.section:nth-of-type(2) .payment-step:nth-child(2) h4,
.section:nth-of-type(2) .payment-step:nth-child(3) h4 {
  --step-title-size: 19px;
}

.section:nth-of-type(2) .payment-step:nth-child(1) p,
.section:nth-of-type(2) .payment-step:nth-child(2) p,
.section:nth-of-type(2) .payment-step:nth-child(3) p {
  --step-copy-size: 14px;
  --step-copy-line-height: 1.5;
}