@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Inter:wght@400;500;700;800;900&family=Space+Mono:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

:root {
  --blue: #1c4b9d;
  --blue-text: #1d56a3;
  --deep-navy: #102b35;
  --body-bg: #eef4f7;
  --shadow: rgba(16, 43, 53, 0.1);
}

body {
  margin: 0;
  color: var(--deep-navy);
  background: var(--body-bg);
  font-family: "Inter", "Avenir Next", Arial, Helvetica, sans-serif;
}

.back-to-top {
  position: fixed;
  z-index: 20;
  right: 1.5rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  border: 1px solid rgba(27, 127, 128, 0.35);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 45, 61, 0.12);
  color: var(--deep-navy);
  font-family: "Rajdhani", "Inter", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transform: translateY(0.75rem);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-3px);
}

.back-to-top-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.back-to-top:hover .back-to-top-icon,
.back-to-top:focus-visible .back-to-top-icon {
  background: #fff;
  color: var(--blue);
  transform: translateY(-2px);
}

.back-to-top-icon i {
  font-size: 1rem;
}

.back-to-top-label {
  text-transform: uppercase;
}

.topbar {
  background: #eef4f6;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-navbar {
  min-height: 74px;
  background: #fbfdff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px var(--shadow);
}

.nav-wrap {
  max-width: 1600px;
}

.navbar-brand.brand-group {
  min-width: 270px;
  margin-right: 2rem;
  padding: 0;
  line-height: 1;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.brand-partner-logo {
  display: block;
  width: auto;
  max-height: 34px;
  object-fit: contain;
}
.brand-logo {
  max-height: 20px;
  width: auto;
  object-fit: contain;
  display: block;
}

.brand-separator {
  width: 1px;
  height: 34px;
  background: rgba(16, 43, 53, 0.25);
}

.brand-partner-logo {
  display: block;
  width: 74px;
  max-height: 34px;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.main-nav .nav-link {
  color: var(--deep-navy);
  font-family: "Rajdhani", "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  padding: 0.9rem 0.45rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .nav-link.active {
  color: var(--blue);
}

.site-navbar .navbar-toggler {
  border-color: var(--deep-navy);
}

.site-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23102b35' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991px) {
  .site-navbar {
    min-height: auto;
  }

  .navbar-brand.brand-group {
    min-width: 150px;
  }

  .brand-group {
    gap: 0.65rem;
  }

  .brand-partner-logo {
    width: 58px;
    max-height: 28px;
  }

  .brand-separator {
    height: 28px;
  }

  .main-nav {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .site-navbar {
    padding: 0.5rem 0;
  }
}

.meridian-landing > section:not(.meridian-hero) {
  width: min(1350px, calc(100vw - 48px));
  margin: 0 auto;
}

.meridian-hero {
  position: relative;

  width: 100%;
  min-height: 90vh;

  height: 761px;

  overflow: hidden;

  /* background-image:
    linear-gradient(
      90deg,
      rgb(2 12 27 / 31%) 0%,
      rgb(2 13 29 / 44%) 25%,
      rgba(2, 14, 29, 0.35) 55%,
      rgba(2, 12, 24, 0.15) 100%
    ),
    url(./image/hero.png); */

  background-image: url(./image/hero.png);

  background-size: cover;
  background-position: center center;
}

.meridian-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  /* background: radial-gradient(
    circle at 70% 45%,
    rgb(0 152 255 / 33%),
    #00000061 35%
  ); */
  pointer-events: none;
}

.meridian-hero::after {
  content: "";

  position: absolute;

  inset: 0;

  /* background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12),
    transparent 35%,
    rgba(0, 0, 0, 0.35)
  ); */

  pointer-events: none;
}

.hero-container {
  position: relative;

  z-index: 5;

  width: min(1600px, 92%);

  height: 100%;

  margin: auto;
}

.hero-linkedin {
  position: absolute;
  z-index: 6;
  top: 40px;
  right: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(10, 102, 194, 0.82);
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 44, 104, 0.35);
  backdrop-filter: blur(8px);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.hero-linkedin:hover,
.hero-linkedin:focus-visible {
  transform: translateY(-3px);
  border-color: #fff;
  background: #0a66c2;
  color: #fff;
}

.hero-top {
  position: absolute;

  top: 68px;
  left: 0;

  display: flex;

  align-items: center;

  gap: 12px;

  font-family: "Space Mono", monospace;

  font-size: 13px;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.9);
}

.hero-top-line {
  width: 30px;

  height: 1px;

  background: #d5a83e;
}

.hero-keywords {
  position: absolute;

  top: 48px;
  right: 50px;

  display: flex;

  flex-direction: column;

  gap: 13px;

  font-family: "Space Mono", monospace;

  font-size: 12px;

  letter-spacing: 4px;

  line-height: 1.1;

  color: rgba(255, 255, 255, 0.72);

  text-transform: uppercase;
}

.hero-keywords::after {
  content: "";

  margin-top: 12px;

  width: 60px;

  height: 2px;

  background: #d4aa42;
}

.hero-content {
  position: absolute;

  left: 50%;

  top: 125px;

  width: 800px;

  text-align: center;

  transform: translateX(-50%);
}

.hero-label {
  font-family: "Space Mono", monospace;

  font-size: 20px;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: #092e59;

  margin-bottom: 20px;
}

.hero-title {
  font-family: "Rajdhani", "Inter", Arial, Helvetica, sans-serif;
  font-size: clamp(56px, 4vw, 86px);

  line-height: 0.88;

  font-weight: 600;

  letter-spacing: -3px;

  text-transform: uppercase;

  margin-bottom: 20px;
}

.hero-title span {
  display: block;

  /* -webkit-text-stroke: 1px #499be8;
  text-shadow:
    0 2px 0 rgba(9, 69, 126, 0.38),
    0 5px 16px rgba(0, 91, 171, 0.2); */

  color: #092e59;
}

.hero-subtitle {
  font-family: "Rajdhani", "Inter", Arial, Helvetica, sans-serif;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 2px;

  line-height: 1.4;

  text-transform: uppercase;

  color: #fff;

  max-width: 700px;
}

.hero-subtitle::after {
  content: "";

  display: block;

  width: 140px;

  height: 2px;

  margin: 20px auto 0;

  background: linear-gradient(90deg, #d7a93c, #08a9ff);
}

.hero-description {
  margin: auto;

  width: 650px;

  max-width: 100%;

  font-size: 15px;

  line-height: 1.55;

  color: #092e59;
}

.hero-buttons {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin-top: 26px;
}

.hero-btn {
  height: 58px;

  padding: 0 31px;

  border-radius: 3px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border 0.3s ease;
}

.hero-btn-primary {
  color: #092e59;

  background: linear-gradient(135deg, #04aaff, #0876d9);

  box-shadow: 0 10px 30px rgba(0, 130, 255, 0.25);
}

.hero-btn-secondary {
  color: #092e59;

  border: 1px solid rgba(255, 255, 255, 0.3);

  background: rgba(3, 18, 35, 0.25);

  backdrop-filter: blur(8px);
}

.hero-btn:hover {
  transform: translateY(-3px);
}

.hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.65);
}

.event-info {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

  margin-top: 25px;

  font-size: 15px;

  color: #092e59;
}

.event-item {
  display: flex;

  align-items: center;

  gap: 10px;

  white-space: nowrap;
}

.event-icon {
  width: 30px;

  height: 30px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 148, 255, 0.18);

  border: 1px solid rgba(0, 172, 255, 0.35);

  font-size: 14px;
}

.hero-bottom {
  /* position: absolute; */
  margin-top: 50px;
  left: 389px;
  bottom: 95px;
  width: 820px;
  min-height: 105px;
  border: 1px solid rgb(110 174 225 / 87%);
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(6 28 51 / 0%), rgb(5 23 42 / 0%));
  backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  padding: 18px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 50px rgba(0, 0, 0, 0.15);
}

.countdown {
  display: flex;

  align-items: center;

  flex: 1;
}

.time-box {
  width: 115px;

  text-align: center;

  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.time-box:last-child {
  border-right: none;
}

.time-number {
  display: block;

  font-size: 38px;

  line-height: 1;

  font-weight: 600;

  letter-spacing: -2px;
  color: #092e59;
}

.time-label {
  display: block;

  margin-top: 7px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  letter-spacing: 2px;

  color: #092e59;

  text-transform: uppercase;
}

.supported {
  display: flex;

  align-items: center;

  gap: 18px;

  padding-left: 28px;
}

.supported-text {
  font-family: "Space Mono", monospace;

  font-size: 9px;

  letter-spacing: 2px;

  color: #092e59;

  text-transform: uppercase;
}

.supported-logo {
  height: 54px;

  width: 150px;
  padding: 10px;

  border-radius: 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.94);

  color: #057b4e;

  font-size: 9px;

  font-weight: 800;

  text-align: center;

  line-height: 1.2;
}
.supported-logo img {
  width: 100%;
}
.hero-quote {
  position: absolute;

  bottom: 25px;

  left: 470px;

  width: 680px;

  text-align: center;

  font-size: 14px;

  font-style: italic;

  line-height: 1.65;

  color: #092e59;
}

.hero-quote::before {
  content: "“";

  color: #00a8ff;

  font-size: 45px;

  position: absolute;

  left: -30px;

  top: -13px;

  font-style: normal;
}

.hero-quote::after {
  content: "”";

  color: #00a8ff;

  font-size: 45px;

  position: absolute;

  right: -25px;

  bottom: -25px;

  font-style: normal;
}

.video-button {
  position: absolute;

  right: 80px;

  top: 415px;

  width: 145px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

  cursor: pointer;
}

.play-circle {
  width: 55px;

  height: 55px;

  border: 1px solid rgba(255, 255, 255, 0.8);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s ease;
}

.play-circle::after {
  content: "";

  width: 0;

  height: 0;

  border-top: 8px solid transparent;

  border-bottom: 8px solid transparent;

  border-left: 12px solid white;

  margin-left: 4px;
}

.video-button:hover .play-circle {
  transform: scale(1.1);

  background: rgba(0, 150, 255, 0.15);
}

.video-label {
  font-family: "Space Mono", monospace;

  font-size: 10px;

  letter-spacing: 3px;

  line-height: 1.7;

  text-align: center;
}

.scroll-indicator {
  position: absolute;

  left: 0;

  bottom: 48px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  letter-spacing: 2px;

  color: rgba(255, 255, 255, 0.7);
}

.scroll-line {
  width: 1px;

  height: 70px;

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent);

  position: relative;
}

.scroll-line::after {
  content: "";

  position: absolute;

  bottom: 0;

  left: -4px;

  width: 7px;

  height: 7px;

  border-right: 1px solid #fff;

  border-bottom: 1px solid #fff;

  transform: rotate(45deg);
}

.hero-content > * {
  opacity: 0;

  transform: translateY(25px);

  animation: heroReveal 0.8s ease forwards;
}

.hero-label {
  animation-delay: 0.2s !important;
}

.hero-title {
  animation-delay: 0.35s !important;
}

.hero-subtitle {
  animation-delay: 0.5s !important;
}

.hero-description {
  animation-delay: 0.65s !important;
}

.hero-buttons {
  animation-delay: 0.8s !important;
}

.event-info {
  animation-delay: 0.95s !important;
}

@keyframes heroReveal {
  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@media (max-width: 1200px) {
  .hero-content {
    width: 600px;
  }

  .hero-title {
    font-size: 75px;
  }

  .hero-bottom {
    left: 250px;

    width: 700px;
  }

  .hero-quote {
    left: 350px;

    width: 600px;
  }

  .video-button {
    right: 20px;
  }
}

@media (max-width: 900px) {
  .meridian-hero {
    height: auto;

    min-height: 1000px;

    background-position: 65% center;
  }

  .hero-container {
    width: 90%;
  }

  .hero-top {
    top: 30px;
  }

  .hero-keywords {
    display: none;
  }

  .hero-linkedin {
    top: 20px;
    right: 0;
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
  }

  .hero-content {
    position: relative;

    top: 0;

    padding-top: 115px;

    width: 100%;
  }

  .hero-title {
    font-size: clamp(55px, 12vw, 90px);
  }

  .hero-description {
    width: 100%;
  }

  .hero-buttons {
    flex-wrap: wrap;
  }

  .event-info {
    flex-wrap: wrap;

    gap: 14px;
  }

  .hero-bottom {
    position: relative;

    left: auto;

    bottom: auto;

    width: 100%;

    margin-top: 45px;

    flex-direction: column;

    gap: 20px;
  }

  .countdown {
    width: 100%;
  }

  .time-box {
    width: 25%;
  }

  .supported {
    padding-left: 0;
  }

  .hero-quote {
    position: relative;

    left: auto;

    bottom: auto;

    width: 90%;

    margin: 45px auto;
  }

  .video-button {
    display: none;
  }

  .scroll-indicator {
    display: none;
  }
}

@media (max-width: 600px) {
  .meridian-hero {
    min-height: 1050px;

    background-position: 62% center;
  }

  .hero-title {
    font-size: 52px;

    letter-spacing: -3px;
  }

  .hero-subtitle {
    font-size: 12px;

    letter-spacing: 2px;
  }

  .hero-description {
    font-size: 14px;
  }

  .hero-btn {
    width: 100%;
  }

  .hero-buttons {
    flex-direction: column;

    align-items: stretch;
  }

  .event-info {
    flex-direction: column;

    align-items: flex-start;
  }

  .hero-bottom {
    padding: 15px;
  }

  .time-number {
    font-size: 27px;
  }

  .time-label {
    font-size: 8px;

    letter-spacing: 1px;
  }

  .supported {
    flex-direction: column;
  }
}

.mx-community {
  width: 100%;
  position: relative;
  overflow: hidden;

  padding: 90px 0 75px;

  font-family: "Inter", sans-serif;
  color: #0b315d;
}

.mx-community-inner {
  width: min(1680px, 88%);
  margin: 0 auto;
}

.mx-community-heading {
  text-align: center;
  margin-bottom: 58px;
}

.mx-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;

  margin-bottom: 22px;

  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 6px;

  color: #506987;
}

.mx-eyebrow span {
  width: 62px;
  height: 2px;
  position: relative;
}

.mx-eyebrow span:first-child {
  background: linear-gradient(90deg, transparent, #ddb02e);
}

.mx-eyebrow span:last-child {
  background: linear-gradient(90deg, #ddb02e, transparent);
}

/* Heading */

.mx-community-heading h2 {
  margin: 0;

  font-size: clamp(30px, 3vw, 52px);

  line-height: 1.05;

  font-weight: 800;

  letter-spacing: -2.5px;

  text-transform: uppercase;

  color: #092e59;
}

.mx-community-heading h2 em {
  font-style: normal;
  color: #0b4ea2;
}

.mx-community-heading p {
  margin: 20px auto 0;

  font-size: 19px;
  line-height: 1.5;

  color: #607593;
}

.mx-heading-line {
  width: 145px;
  height: 3px;

  margin: 27px auto 0;

  background: linear-gradient(90deg, #ddb02e, #1388ef);
}

.mx-community-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 28px;
}

.mx-card {
  position: relative;

  height: 415px;

  padding: 28px 40px;

  overflow: hidden;

  border: 1px solid #dce8f5;

  border-radius: 18px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 251, 255, 0.95)
  );

  box-shadow: 0 16px 40px rgba(30, 91, 145, 0.065);

  opacity: 0;

  transform: translateX(90px);

  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.mx-card.is-visible {
  opacity: 1;

  transform: translateX(0);
}

.mx-card:hover {
  border-color: #bcd8f1;

  box-shadow: 0 25px 60px rgba(21, 103, 175, 0.12);

  transform: translateY(-7px);
}

.mx-card-accent {
  position: absolute;

  left: 0;
  top: 25px;

  width: 5px;
  height: 100px;

  border-radius: 0 5px 5px 0;

  background: linear-gradient(180deg, #008ef5, #0a6ddc);

  box-shadow: 0 0 14px rgba(0, 143, 255, 0.25);
}

.mx-card-number {
  position: absolute;

  top: 28px;
  right: 28px;

  font-size: 17px;

  font-weight: 800;

  color: #d9e6f4;
}

.mx-card-visual {
  height: 155px;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-platform {
  position: absolute;

  width: 175px;
  height: 54px;

  bottom: 5px;

  border-radius: 50%;

  background: linear-gradient(180deg, #ffffff, #e4f3ff);

  box-shadow:
    0 8px 18px rgba(26, 109, 174, 0.08),
    0 0 0 1px rgba(74, 169, 235, 0.17),
    0 0 25px rgba(70, 170, 245, 0.14);
}

.mx-table-icon {
  position: relative;

  width: 130px;
  height: 90px;
}

.mx-table-top {
  position: absolute;

  left: 27px;
  top: 30px;

  width: 78px;
  height: 42px;

  border-radius: 50%;

  background: linear-gradient(180deg, #ffffff, #d9edfb);

  border: 2px solid #b6d8ef;

  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
}

.mx-table-top::after {
  content: "";

  position: absolute;

  width: 8px;
  height: 8px;

  left: 33px;
  top: 15px;

  border-radius: 50%;

  background: #1786dc;
}

.mx-table-icon .chair {
  position: absolute;

  display: block;

  width: 21px;
  height: 16px;

  border-radius: 5px;

  background: linear-gradient(145deg, #eef8ff, #c8e2f5);

  border: 1px solid #acd0e9;
}

.chair-1 {
  left: 5px;
  top: 40px;
}

.chair-2 {
  left: 22px;
  top: 10px;
}

.chair-3 {
  left: 53px;
  top: 1px;
}

.chair-4 {
  right: 20px;
  top: 12px;
}

.chair-5 {
  right: 2px;
  top: 42px;
}

.chair-6 {
  left: 54px;
  bottom: -2px;
}

.mx-people-icon {
  position: relative;

  width: 135px;
  height: 100px;
}

.mx-person {
  position: absolute;

  bottom: 8px;

  width: 42px;
  height: 80px;
}

.mx-person b {
  display: block;

  width: 29px;
  height: 29px;

  margin: auto;

  border-radius: 50%;

  background: linear-gradient(145deg, #c3e5fb, #5ca6d9);
}

.mx-person i {
  display: block;

  width: 42px;
  height: 45px;

  margin-top: 5px;

  border-radius: 20px 20px 7px 7px;

  background: linear-gradient(145deg, #dff2ff, #78b7e5);
}

.mx-person-left {
  left: 2px;
  transform: scale(0.82);
}

.mx-person-center {
  left: 47px;

  z-index: 2;
}

.mx-person-right {
  right: 2px;

  transform: scale(0.82);
}

.mx-government {
  position: relative;

  width: 135px;
  height: 110px;
}

.mx-gov-roof {
  width: 0;
  height: 0;

  margin: auto;

  border-left: 67px solid transparent;

  border-right: 67px solid transparent;

  border-bottom: 28px solid #b8daf2;
}

.mx-gov-columns {
  display: flex;

  justify-content: space-around;

  padding: 7px 17px 0;
}

.mx-gov-columns i {
  display: block;

  width: 9px;
  height: 51px;

  border-radius: 3px;

  background: linear-gradient(90deg, #9bc6e7, #edf8ff, #9bc6e7);
}

.mx-gov-base {
  position: absolute;

  left: 5px;
  bottom: 8px;

  width: 125px;
  height: 8px;

  border-radius: 5px;

  background: #a8cee9;
}

.mx-industry {
  position: relative;

  width: 130px;
  height: 115px;
}

.mx-industry .cube {
  position: absolute;

  display: block;

  width: 39px;
  height: 39px;

  border-radius: 4px;

  background: linear-gradient(145deg, #9ed6ff, #176abd);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 7px 13px rgba(15, 99, 174, 0.12);
}

.mx-industry .cube::before {
  content: "";

  position: absolute;

  left: 0;
  top: -9px;

  width: 39px;
  height: 12px;

  border-radius: 4px;

  background: #d2ecff;

  transform: skewX(-35deg);
}

.mx-industry .cube::after {
  content: "";

  position: absolute;

  right: -8px;
  top: -2px;

  width: 9px;
  height: 40px;

  border-radius: 3px;

  background: #125c9e;

  transform: skewY(-35deg);
}

.cube-1 {
  left: 8px;
  top: 52px;
}

.cube-2 {
  left: 47px;
  top: 30px;
}

.cube-3 {
  right: 6px;
  top: 52px;
}

.cube-4 {
  left: 47px;
  top: 70px;
}

.mx-card-info {
  position: relative;

  z-index: 2;
}

.mx-number {
  color: #0b4ea2;

  font-size: 46px;

  line-height: 0.95;

  font-weight: 800;

  letter-spacing: -3px;
}

.mx-range {
  font-size: 34px;

  letter-spacing: -2px;
}

.mx-range small {
  font-size: 25px;
  font-weight: 500;
}

.mx-card-info h3 {
  margin: 9px 0 0;

  font-family: "Space Mono", monospace;

  font-size: 14px;

  line-height: 1.45;

  font-weight: 700;

  letter-spacing: 2px;

  color: #0b315d;
}

.mx-card-info h4 {
  margin: 3px 0 0;

  font-family: "Space Mono", monospace;

  font-size: 12px;

  letter-spacing: 2px;

  line-height: 1.5;

  color: #506b89;
}

.mx-large-title {
  font-family: "Inter", sans-serif !important;

  font-size: 24px !important;

  line-height: 1.1 !important;

  letter-spacing: -1px !important;

  font-weight: 800 !important;

  text-transform: uppercase;
}

.mx-card-line {
  width: 44px;
  height: 3px;

  margin: 19px 0 17px;

  background: linear-gradient(90deg, #087ce5, #4bb1ff);
}

.mx-card-info p {
  margin: 0;

  font-size: 13px;

  line-height: 1.55;

  color: #637894;
}

.mx-learn {
  position: absolute;

  left: 40px;
  bottom: 27px;

  display: flex;
  align-items: center;

  gap: 22px;

  color: #315b83;

  text-decoration: none;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 3px;

  transition: color 0.3s ease;
}

.mx-learn span {
  font-family: "Inter", sans-serif;

  font-size: 24px;

  font-weight: 300;

  transition: transform 0.3s ease;
}

.mx-learn:hover {
  color: #0878dd;
}

.mx-learn:hover span {
  transform: translateX(7px);
}

.mx-community-footer {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 28px;

  margin-top: 58px;

  font-family: "Space Mono", monospace;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 5px;

  color: #55708f;

  text-transform: uppercase;
}

.mx-community-footer span {
  width: 55px;
  height: 2px;
}

.mx-community-footer span:first-child {
  background: linear-gradient(90deg, transparent, #1689ee);
}

.mx-community-footer span:last-child {
  background: linear-gradient(90deg, #1689ee, transparent);
}

@media (max-width: 1200px) {
  .mx-community-inner {
    width: 92%;
  }

  .mx-community-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .mx-community {
    padding: 65px 0 55px;
  }

  .mx-community-inner {
    width: 90%;
  }

  .mx-community-heading {
    margin-bottom: 40px;
  }

  .mx-eyebrow {
    font-size: 9px;
    letter-spacing: 3px;
    gap: 12px;
  }

  .mx-eyebrow span {
    width: 25px;
  }

  .mx-community-heading h2 {
    font-size: 34px;
    letter-spacing: -1.5px;
  }

  .mx-community-heading p {
    font-size: 15px;
  }

  .mx-community-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .mx-card {
    height: 415px;
  }

  .mx-community-footer {
    font-size: 9px;
    letter-spacing: 3px;
  }
}

.mx-about {
  position: relative;
  width: 100%;
  min-height: 620px;

  margin-top: 35px;
  margin-bottom: 35px;

  padding: 58px 48px;

  overflow: hidden;

  border: 1px solid rgba(188, 211, 233, 0.75);
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(40, 139, 230, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 95%,
      rgba(20, 105, 190, 0.045),
      transparent 32%
    ),
    linear-gradient(135deg, #ffffff 0%, #fbfdff 55%, #f2f8fd 100%);

  box-shadow: 0 20px 60px rgba(31, 76, 116, 0.09);
}

.mx-about-inner {
  position: relative;

  z-index: 5;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 1fr);

  gap: 55px;

  align-items: stretch;
}

.mx-about-content {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
}

.mx-about-eyebrow {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 14px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 4px;

  color: #55708f;

  text-transform: uppercase;
}

.mx-about-eyebrow span {
  width: 42px;
  height: 2px;

  display: block;

  background: linear-gradient(90deg, #d4aa3e, #087ee5);
}

.mx-about-title {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: clamp(48px, 5vw, 72px);

  line-height: 0.88;

  font-weight: 700;

  letter-spacing: -2px;

  text-transform: uppercase;

  color: #102f56;
}

.mx-about-title span {
  display: block;
}

.mx-about-title span:last-child {
  color: #0b4ea2;
}

.mx-about-tagline {
  margin-top: 19px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2.5px;

  line-height: 1.5;

  color: #607997;

  text-transform: uppercase;
}

.mx-about-title-line {
  width: 115px;
  height: 3px;

  margin-top: 18px;

  background: linear-gradient(90deg, #d4aa3e 0%, #146ed0 65%, #0a9af0 100%);
}

.mx-about-copy {
  margin-top: 22px;

  max-width: 535px;
}

.mx-about-copy p {
  margin: 0 0 14px;

  font-size: 13px;

  line-height: 1.72;

  color: #607592;
}

.mx-about-copy p:last-child {
  margin-bottom: 0;
}

.mx-about-copy strong {
  color: #164a82;

  font-weight: 800;
}

.mx-about-pillars {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 22px;

  max-width: 535px;
}

.mx-about-pillar {
  position: relative;

  min-height: 43px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 0 13px;

  overflow: hidden;

  border: 1px solid #d4e3f1;

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.72);

  text-decoration: none;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.mx-about-pillar::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: linear-gradient(180deg, #d4aa3e, #087fe7);

  transform: scaleY(0);

  transform-origin: bottom;

  transition: transform 0.3s ease;
}

.mx-about-pillar:hover {
  transform: translateY(-3px);

  border-color: #a9cbe8;

  background: #ffffff;

  box-shadow: 0 8px 22px rgba(35, 105, 165, 0.09);
}

.mx-about-pillar:hover::before {
  transform: scaleY(1);
}

.mx-pillar-icon {
  width: 22px;
  height: 22px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 5px;

  color: #0878dc;

  background: rgba(17, 123, 218, 0.08);

  font-size: 11px;
}

.mx-pillar-text {
  flex: 1;

  font-family: "Space Mono", monospace;

  font-size: 8.5px;

  font-weight: 700;

  letter-spacing: 1.4px;

  color: #294d73;

  white-space: nowrap;
}

.mx-pillar-arrow {
  font-family: "Inter", sans-serif;

  font-size: 18px;

  font-weight: 300;

  color: #2674b8;

  transition: transform 0.3s ease;
}

.mx-about-pillar:hover .mx-pillar-arrow {
  transform: translateX(5px);
}

.mx-about-features {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;
}

.mx-about-card {
  position: relative;

  min-height: 250px;

  display: flex;

  flex-direction: column;

  padding: 25px 22px 21px;

  overflow: hidden;

  border: 1px solid #d4e3f1;

  border-radius: 18px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(244, 249, 254, 0.94)
  );

  box-shadow: 0 10px 28px rgba(30, 83, 128, 0.055);

  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}

.mx-about-card::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  right: -55px;
  bottom: -65px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(28, 135, 224, 0.1), transparent 70%);

  pointer-events: none;
}

.mx-about-card::before {
  content: "";

  position: absolute;

  left: 22px;
  top: 20px;

  width: 43px;
  height: 3px;

  border-radius: 5px;

  background: linear-gradient(90deg, #086dc9 0%, #086dc9 65%, #d3aa3d 100%);
}

.mx-about-card:hover {
  transform: translateY(-6px);

  border-color: #a9cce9;

  box-shadow: 0 20px 42px rgba(27, 94, 149, 0.12);
}

.mx-about-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 8px;
}

.mx-about-card-icon {
  width: 43px;
  height: 43px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  color: #096fcf;

  background: linear-gradient(145deg, #f1f8ff, #dceefa);

  border: 1px solid #d0e5f5;

  font-size: 18px;

  box-shadow: 0 6px 16px rgba(22, 112, 180, 0.08);

  transition:
    transform 0.35s ease,
    background 0.35s ease;
}

.mx-about-card:hover .mx-about-card-icon {
  transform: rotate(-4deg) scale(1.06);

  background: linear-gradient(145deg, #e8f5ff, #cfe9fb);
}

.mx-about-card-number {
  font-family: "Space Mono", monospace;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 2px;

  color: #c3d5e8;
}

.mx-about-card-content {
  position: relative;

  z-index: 2;

  margin-top: 21px;
}

.mx-about-card-content h3 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 20px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 1px;

  color: #12365e;

  text-transform: uppercase;
}

.mx-about-card-content p {
  margin: 13px 0 0;

  font-size: 12px;

  line-height: 1.65;

  color: #637b97;
}

.mx-about-learn {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: auto;

  padding-top: 15px;

  color: #376287;

  text-decoration: none;

  font-family: "Space Mono", monospace;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  transition: color 0.3s ease;
}

.mx-about-learn span {
  font-family: "Inter", sans-serif;

  font-size: 19px;

  font-weight: 300;

  line-height: 1;

  transition: transform 0.3s ease;
}

.mx-about-learn:hover {
  color: #0879df;
}

.mx-about-learn:hover span {
  transform: translateX(6px);
}

.mx-about-orbit {
  position: absolute;

  border: 1px solid rgba(43, 135, 214, 0.09);

  border-radius: 50%;

  pointer-events: none;
}

.mx-about-orbit-one {
  width: 500px;
  height: 180px;

  right: -160px;
  top: -75px;

  transform: rotate(-16deg);
}

.mx-about-orbit-two {
  width: 430px;
  height: 150px;

  right: -100px;
  bottom: -70px;

  transform: rotate(18deg);
}

.mx-about-dot {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #1486df;

  box-shadow:
    0 0 0 6px rgba(20, 134, 223, 0.08),
    0 0 18px rgba(20, 134, 223, 0.25);

  pointer-events: none;
}

.mx-about-dot-one {
  right: 95px;
  top: 72px;
}

.mx-about-dot-two {
  right: 245px;
  bottom: 50px;

  width: 5px;
  height: 5px;
}

.mx-about-content,
.mx-about-card {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.8s ease,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-about-content.mx-about-visible {
  opacity: 1;

  transform: translateY(0);
}

.mx-about-card.mx-about-visible {
  opacity: 1;

  transform: translateY(0);
}

.mx-about-card:nth-child(1) {
  transition-delay: 0.1s;
}

.mx-about-card:nth-child(2) {
  transition-delay: 0.2s;
}

.mx-about-card:nth-child(3) {
  transition-delay: 0.3s;
}

.mx-about-card:nth-child(4) {
  transition-delay: 0.4s;
}

@media (max-width: 1000px) {
  .mx-about {
    padding: 48px 35px;
  }

  .mx-about-inner {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .mx-about-copy,
  .mx-about-pillars {
    max-width: 100%;
  }

  .mx-about-title {
    font-size: 64px;
  }
}

@media (max-width: 650px) {
  .mx-about {
    width: 100%;

    min-height: auto;

    margin-top: 20px;
    margin-bottom: 20px;

    padding: 40px 22px;

    border-radius: 18px;
  }

  .mx-about-inner {
    gap: 35px;
  }

  .mx-about-title {
    font-size: 48px;

    letter-spacing: -1.5px;
  }

  .mx-about-tagline {
    font-size: 8px;

    letter-spacing: 1.5px;
  }

  .mx-about-copy {
    margin-top: 18px;
  }

  .mx-about-copy p {
    font-size: 12px;

    line-height: 1.65;
  }

  .mx-about-pillars {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .mx-about-pillar {
    min-height: 46px;
  }

  .mx-about-features {
    grid-template-columns: 1fr;

    gap: 13px;
  }

  .mx-about-card {
    min-height: 225px;
  }

  .mx-about-orbit-one {
    width: 300px;
    height: 120px;

    right: -130px;
  }

  .mx-about-orbit-two {
    display: none;
  }

  .mx-about-dot-one {
    right: 45px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-about-content,
  .mx-about-card,
  .mx-about-pillar,
  .mx-about-card-icon,
  .mx-about-learn span,
  .mx-pillar-arrow {
    transition: none !important;

    transform: none !important;
  }
}

.mx-themes {
  position: relative;

  width: 100%;

  min-height: 700px;

  margin: 35px auto !important;

  padding: 48px 46px 25px;

  overflow: hidden;
}

.mx-themes-inner {
  position: relative;

  width: 100%;

  z-index: 2;
}

.mx-themes-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    180px;

  gap: 35px;

  margin-bottom: 32px;
}

.mx-themes-eyebrow {
  display: flex;

  align-items: center;

  gap: 22px;

  margin-bottom: 18px;

  font-family: "Space Mono", monospace;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 4px;

  color: #496581;

  text-transform: uppercase;
}

.mx-themes-eyebrow span {
  width: 58px;

  height: 2px;

  background: linear-gradient(90deg, #d7ab3d, #0b82e7);
}

.mx-themes-heading h2 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: clamp(48px, 5vw, 67px);

  line-height: 0.91;

  font-weight: 700;

  letter-spacing: -1.8px;

  color: #102f55;

  text-transform: uppercase;
}

.mx-themes-heading h2 span {
  color: #0b4ea2;
}

.mx-themes-title-line {
  width: 77px;

  height: 3px;

  margin-top: 20px;

  background: linear-gradient(90deg, #087de1, #d1a93d);
}

.mx-themes-heading p {
  max-width: 750px;

  margin: 21px 0 0;

  font-size: 13px;

  line-height: 1.65;

  color: #617893;
}

.mx-themes-side {
  position: relative;

  min-height: 210px;

  padding-left: 28px;

  border-left: 1px solid #d4e1ee;
}

.mx-themes-side-line {
  position: absolute;

  left: -1px;

  top: 0;

  width: 1px;

  height: 70px;

  background: linear-gradient(180deg, #1688e9, transparent);
}

.mx-themes-side-top {
  font-family: "Space Mono", monospace;

  font-size: 10px;

  line-height: 1.9;

  letter-spacing: 3px;

  color: #66809d;
}

.mx-themes-side-divider {
  width: 43px;

  height: 2px;

  margin: 15px 0 18px;

  background: #d6aa3d;
}

.mx-themes-side-brand {
  display: flex;

  flex-direction: column;

  gap: 5px;

  font-family: "Space Mono", monospace;

  color: #55718f;
}

.mx-themes-side-brand strong {
  font-size: 10px;

  letter-spacing: 2px;

  color: #32567b;
}

.mx-themes-side-brand span {
  font-size: 8px;

  line-height: 1.65;

  letter-spacing: 2px;
}

.mx-themes-main {
  display: grid;

  grid-template-columns:
    72px
    minmax(0, 1fr)
    150px;

  gap: 18px;

  min-height: 465px;
}

.mx-theme-rail {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 32px 0 25px;
}

.mx-rail-line {
  position: absolute;

  left: 40px;

  top: 37px;

  bottom: 38px;

  width: 1px;

  background: #d4e1ee;
}

.mx-rail-item {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 55px;

  color: #94abc4;
}

.mx-rail-item span {
  font-family: "Space Mono", monospace;

  font-size: 16px;

  font-weight: 700;

  color: #91a9c3;
}

.mx-rail-item i {
  display: block;

  width: 12px;
  height: 12px;

  margin-right: 25px;

  border: 2px solid #9db5cf;

  border-radius: 50%;

  background: #ffffff;
}

.mx-rail-item.active span {
  color: #0877dd;
}

.mx-rail-item.active i {
  width: 14px;
  height: 14px;

  margin-right: 24px;

  border: 3px solid #1688eb;

  background: #1688eb;

  box-shadow: 0 0 0 4px rgba(22, 136, 235, 0.08);
}

.mx-theme-list {
  position: relative;

  display: flex;

  flex-direction: column;
}

.mx-theme-row {
  position: relative;

  min-height: 91px;

  display: grid;

  grid-template-columns:
    125px
    250px
    minmax(0, 1fr)
    55px;

  align-items: center;

  gap: 30px;

  padding: 12px 24px;

  border-bottom: 1px solid #e1eaf3;

  cursor: pointer;

  transition:
    background 0.45s ease,
    border 0.35s ease,
    transform 0.35s ease;
}

.mx-theme-row:first-child {
  border-top: 1px solid #dce8f4;

  border-radius: 14px 14px 0 0;
}

.mx-theme-row:last-child {
  border-bottom: 0;
}

.mx-theme-row.active {
  border: 1px solid #d4e8fa;

  border-radius: 13px;

  background: linear-gradient(
    90deg,
    rgba(246, 251, 255, 0.95),
    rgba(228, 242, 255, 0.92)
  );

  box-shadow: inset 0 0 30px rgba(40, 146, 233, 0.035);
}

.mx-theme-row:not(.active):hover {
  background: rgba(238, 247, 255, 0.6);

  padding-left: 29px;
}

.mx-theme-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 70px;
  height: 70px;
}

.mx-theme-icon svg {
  width: 52px;
  height: 52px;

  overflow: visible;

  fill: none;

  stroke: #1686e8;

  stroke-width: 2.2;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: transform 0.4s ease;
}

.mx-theme-row:hover .mx-theme-icon svg {
  transform: scale(1.08);
}

.mx-theme-row:nth-child(2) .mx-theme-icon svg circle:last-child,
.mx-theme-row:nth-child(3) .mx-theme-icon svg path:nth-child(4),
.mx-theme-row:nth-child(4) .mx-theme-icon svg circle,
.mx-theme-row:nth-child(5) .mx-theme-icon svg circle:last-child {
  stroke: #d5aa3d;
}

.mx-theme-name {
  padding-left: 25px;

  border-left: 1px solid #cfdeed;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 18px;

  line-height: 1.08;

  font-weight: 700;

  letter-spacing: 0.3px;

  color: #102f55;

  text-transform: uppercase;
}

.mx-theme-description {
  min-width: 0;

  padding-left: 25px;

  border-left: 1px solid #cfdeed;

  font-size: 13px;

  line-height: 1.48;

  color: #607a97;
}

.mx-theme-arrow {
  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid #d4e5f4;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.45);

  color: #2775ae;

  font-family: "Inter", sans-serif;

  font-size: 25px;

  font-weight: 300;

  cursor: pointer;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.35s ease,
    border 0.35s ease;
}

.mx-theme-row.active .mx-theme-arrow {
  border: 0;

  background: #0b4ea2;

  color: #ffffff;

  box-shadow: 0 7px 18px rgba(22, 137, 235, 0.2);
}

.mx-theme-arrow:hover {
  transform: translateX(3px);

  border-color: #0b4ea2;

  color: #0b4ea2;

  background: #ffffff;
}

.mx-theme-row.active .mx-theme-arrow:hover {
  background: #0877d9;

  color: #ffffff;
}

.mx-themes-right-copy {
  position: relative;

  padding-left: 20px;

  padding-top: 260px;

  border-left: 1px solid #d4e1ee;
}

.mx-right-copy-line {
  position: absolute;

  left: -1px;

  top: 95px;

  width: 1px;

  height: 195px;

  background: linear-gradient(180deg, transparent, #b8cee3, transparent);
}

.mx-right-copy-title {
  font-family: "Space Mono", monospace;

  font-size: 10px;

  line-height: 1.9;

  letter-spacing: 3px;

  color: #6b84a0;

  text-transform: uppercase;
}

.mx-right-copy-title span {
  color: #6b84a0;
}

.mx-theme-controls {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-top: 23px;
}

.mx-theme-controls > span {
  margin-right: auto;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  color: #66819f;

  letter-spacing: 1px;
}

.mx-theme-control {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid #cbddec;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.6);

  color: #6e91b2;

  font-size: 25px;

  font-weight: 300;

  cursor: pointer;

  transition: all 0.3s ease;
}

.mx-theme-control:hover {
  border-color: #0b4ea2;

  color: #0b4ea2;

  background: #ffffff;

  transform: translateY(-2px);
}

.mx-themes-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 18px;

  padding-top: 18px;

  border-top: 1px solid #dce7f1;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  letter-spacing: 3px;

  color: #7690ac;

  text-transform: uppercase;
}

.mx-footer-brand {
  display: flex;

  align-items: center;

  gap: 18px;
}

.mx-footer-brand span {
  width: 68px;
  height: 1px;

  background: #b6cde2;
}

.mx-footer-location {
  display: flex;

  align-items: center;

  gap: 18px;
}

.mx-footer-location strong {
  font-weight: 700;

  color: #67829e;
}

.mx-footer-location span {
  width: 40px;
  height: 2px;

  background: #d5aa3d;
}

.mx-themes::after {
  content: "";

  position: absolute;

  width: 600px;
  height: 600px;

  right: -360px;
  top: 180px;

  border: 1px solid rgba(28, 130, 218, 0.055);

  border-radius: 50%;

  pointer-events: none;
}

.mx-themes-heading,
.mx-themes-side,
.mx-theme-rail,
.mx-theme-row,
.mx-themes-right-copy,
.mx-themes-footer {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.75s ease,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-themes.mx-themes-visible .mx-themes-heading,
.mx-themes.mx-themes-visible .mx-themes-side,
.mx-themes.mx-themes-visible .mx-theme-rail,
.mx-themes.mx-themes-visible .mx-themes-right-copy,
.mx-themes.mx-themes-visible .mx-themes-footer {
  opacity: 1;

  transform: translateY(0);
}

.mx-themes.mx-themes-visible .mx-theme-row {
  opacity: 1;

  transform: translateX(0);
}

.mx-theme-row {
  transform: translateX(60px);
}

.mx-theme-row:nth-child(1) {
  transition-delay: 0.1s;
}

.mx-theme-row:nth-child(2) {
  transition-delay: 0.2s;
}

.mx-theme-row:nth-child(3) {
  transition-delay: 0.3s;
}

.mx-theme-row:nth-child(4) {
  transition-delay: 0.4s;
}

.mx-theme-row:nth-child(5) {
  transition-delay: 0.5s;
}

@media (max-width: 1050px) {
  .mx-themes {
    padding: 45px 32px 25px;
  }

  .mx-themes-header {
    grid-template-columns: 1fr;
  }

  .mx-themes-side {
    display: none;
  }

  .mx-themes-main {
    grid-template-columns:
      55px
      minmax(0, 1fr);
  }

  .mx-themes-right-copy {
    display: none;
  }

  .mx-theme-row {
    grid-template-columns:
      95px
      200px
      minmax(0, 1fr)
      50px;

    gap: 20px;
  }
}

@media (max-width: 700px) {
  .mx-themes {
    min-height: auto;

    margin: 20px auto;

    padding: 35px 20px 22px;

    border-radius: 17px;
  }

  .mx-themes-header {
    margin-bottom: 28px;
  }

  .mx-themes-eyebrow {
    gap: 12px;

    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .mx-themes-eyebrow span {
    width: 30px;
  }

  .mx-themes-heading h2 {
    font-size: 39px;

    line-height: 0.94;

    letter-spacing: -1px;
  }

  .mx-themes-heading p {
    font-size: 12px;

    line-height: 1.6;
  }

  .mx-themes-main {
    display: block;
  }

  .mx-theme-rail {
    display: none;
  }

  .mx-theme-list {
    width: 100%;
  }

  .mx-theme-row {
    min-height: 145px;

    grid-template-columns:
      58px
      1fr
      42px;

    grid-template-rows:
      auto
      auto;

    gap: 8px 14px;

    padding: 18px 13px;
  }

  .mx-theme-row:first-child {
    border-radius: 12px 12px 0 0;
  }

  .mx-theme-icon {
    width: 55px;

    height: 55px;

    grid-row: 1 / 3;
  }

  .mx-theme-icon svg {
    width: 42px;

    height: 42px;
  }

  .mx-theme-name {
    padding-left: 12px;

    font-size: 15px;

    border-left: 1px solid #d3e1ee;
  }

  .mx-theme-description {
    grid-column: 2 / 3;

    padding-left: 12px;

    font-size: 10px;

    line-height: 1.5;

    border-left: 1px solid #d3e1ee;
  }

  .mx-theme-arrow {
    grid-column: 3;

    grid-row: 1 / 3;

    width: 38px;

    height: 38px;

    font-size: 20px;
  }

  .mx-themes-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 13px;

    margin-top: 20px;

    font-size: 7px;

    letter-spacing: 2px;
  }

  .mx-footer-location {
    flex-wrap: wrap;

    gap: 10px;
  }

  .mx-footer-location span {
    width: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-themes-heading,
  .mx-themes-side,
  .mx-theme-rail,
  .mx-theme-row,
  .mx-themes-right-copy,
  .mx-themes-footer {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }
}

.mx-speakers {
  position: relative;

  width: 100%;

  margin: 35px auto;

  padding: 48px 48px 24px;

  overflow: hidden;
}

.mx-speakers-inner {
  position: relative;

  width: 100%;

  z-index: 2;
}

.mx-speakers-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    180px;

  gap: 40px;

  margin-bottom: 32px;
}

.mx-speakers-eyebrow {
  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 17px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 4px;

  color: #55718e;

  text-transform: uppercase;
}

.mx-speakers-eyebrow span {
  width: 68px;

  height: 2px;

  background: linear-gradient(90deg, #d6a93b, #087fe6);
}

.mx-speakers-heading h2 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: clamp(52px, 5.4vw, 76px);

  line-height: 0.88;

  font-weight: 700;

  letter-spacing: -2px;

  color: #102f55;

  text-transform: uppercase;
}

.mx-speakers-heading h2 span {
  color: #0b4ea2;
}

.mx-speakers-title-line {
  width: 78px;

  height: 3px;

  margin-top: 19px;

  background: linear-gradient(90deg, #087ee2, #d5a93c);
}

.mx-speakers-heading p {
  max-width: 820px;

  margin: 20px 0 0;

  font-size: 13px;

  line-height: 1.65;

  color: #647c98;
}

.mx-speakers-side {
  position: relative;

  min-height: 180px;

  padding-left: 30px;

  border-left: 1px solid #d0dfed;
}

.mx-speakers-side-line {
  position: absolute;

  left: -1px;

  top: 0;

  width: 2px;

  height: 72px;

  background: linear-gradient(180deg, #1688e9, transparent);
}

.mx-speakers-side-title {
  font-family: "Space Mono", monospace;

  font-size: 10px;

  line-height: 1.9;

  letter-spacing: 3px;

  color: #68829e;
}

.mx-speakers-side-gold {
  width: 42px;

  height: 2px;

  margin: 14px 0 17px;

  background: #d4a93b;
}

.mx-speakers-side-brand {
  display: flex;

  flex-direction: column;

  gap: 5px;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  color: #466786;
}

.mx-speakers-side-brand span {
  font-size: 8px;

  line-height: 1.65;

  font-weight: 400;

  letter-spacing: 2px;

  color: #7188a2;
}

.mx-speakers-stage {
  position: relative;

  display: flex;

  align-items: center;

  width: 100%;
}

.mx-speakers-window {
  width: 100%;

  overflow: hidden;
}

.mx-speakers-track {
  display: flex;

  gap: 20px;

  will-change: transform;

  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-speaker-card {
  position: relative;

  flex: 0 0 calc((100% - 60px) / 4);

  min-width: 0;

  overflow: hidden;

  border: 1px solid #d6e3ef;

  border-radius: 15px;

  background: linear-gradient(180deg, #ffffff, #f7fbff);

  box-shadow: 0 10px 28px rgba(35, 90, 137, 0.065);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}

.mx-speaker-card:hover {
  transform: translateY(-7px);

  border-color: #b5d3eb;

  box-shadow: 0 22px 45px rgba(26, 101, 163, 0.13);
}

.mx-speaker-image {
  position: relative;

  width: 100%;

  height: 245px;

  overflow: hidden;

  background: linear-gradient(145deg, #dcecf8, #8fb8d6);
}

.mx-speaker-image img {
  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-speaker-card:hover .mx-speaker-image img {
  transform: scale(1.045);
}

.mx-speaker-image-overlay {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(5, 36, 67, 0.08) 100%
  );
}

.mx-speaker-info {
  position: relative;

  min-height: 205px;

  padding: 17px 19px 20px;
}

.mx-speaker-top h3 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 20px;

  line-height: 1.1;

  font-weight: 700;

  color: #14375e;

  text-transform: none;
}

.mx-speaker-gold-line {
  width: 42px;

  height: 2px;

  margin: 12px 0 17px;

  background: linear-gradient(90deg, #d5a93c, #f0cf75);
}

.mx-speaker-role {
  font-family: "Space Mono", monospace;

  font-size: 8px;

  line-height: 1.5;

  font-weight: 700;

  letter-spacing: 2px;

  color: #bd9130;

  text-transform: uppercase;
}

.mx-speaker-role.blue {
  color: #1478d1;
}

.mx-speaker-info p {
  max-width: 220px;

  margin: 8px 0 0;

  font-size: 12px;

  line-height: 1.55;

  color: #70849d;
}

.mx-speaker-more {
  position: absolute;

  left: 19px;

  bottom: 19px;

  width: 43px;

  height: 43px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #d6e6f4;

  border-radius: 50%;

  background: #f8fcff;

  color: #147ad4;

  text-decoration: none;

  font-size: 22px;

  font-weight: 300;

  transition: all 0.3s ease;
}

.mx-speaker-more:hover {
  color: #ffffff;

  border-color: #1688e9;

  background: #1688e9;

  transform: translateX(3px);
}

.mx-speaker-nav {
  position: absolute;

  z-index: 10;

  width: 46px;

  height: 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #d2e2f0;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);

  color: #39729f;

  font-family: "Inter", sans-serif;

  font-size: 22px;

  font-weight: 300;

  cursor: pointer;

  box-shadow: 0 7px 20px rgba(25, 83, 130, 0.07);

  transition: all 0.3s ease;
}

.mx-speaker-prev {
  left: -23px;
}

.mx-speaker-next {
  right: -23px;
}

.mx-speaker-nav:hover {
  color: #ffffff;

  background: #1487e9;

  border-color: #1487e9;

  box-shadow: 0 10px 25px rgba(20, 135, 233, 0.22);
}

.mx-speakers-cta {
  display: flex;

  justify-content: center;

  margin-top: 25px;
}

.mx-speakers-button {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  min-height: 54px;

  padding: 0 8px 0 25px;

  border-radius: 30px;

  background: linear-gradient(100deg, #075db7, #168ff0);

  color: #ffffff;

  text-decoration: none;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;

  box-shadow: 0 13px 30px rgba(11, 102, 190, 0.22);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.mx-speakers-button i {
  width: 39px;

  height: 39px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  font-family: "Inter", sans-serif;

  font-style: normal;

  font-size: 19px;

  font-weight: 300;
}

.mx-speakers-button:hover {
  transform: translateY(-3px);

  box-shadow: 0 18px 35px rgba(11, 102, 190, 0.28);
}

.mx-speakers-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 21px;

  padding-top: 17px;

  border-top: 1px solid #dce7f1;

  font-family: "Space Mono", monospace;

  font-size: 8px;

  letter-spacing: 3px;

  color: #7890aa;

  text-transform: uppercase;
}

.mx-speakers-footer-left,
.mx-speakers-footer-right {
  display: flex;

  align-items: center;

  gap: 17px;
}

.mx-speakers-footer-left span {
  width: 55px;

  height: 1px;

  background: #b7cde1;
}

.mx-speakers-footer-right strong {
  font-weight: 700;

  color: #637f9c;
}

.mx-speakers-footer-right span {
  width: 38px;

  height: 2px;

  background: #d3a73a;
}

.mx-speakers-heading,
.mx-speakers-side,
.mx-speakers-stage,
.mx-speakers-pagination,
.mx-speakers-cta,
.mx-speakers-footer {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-speakers.mx-speakers-visible .mx-speakers-heading,
.mx-speakers.mx-speakers-visible .mx-speakers-side,
.mx-speakers.mx-speakers-visible .mx-speakers-stage,
.mx-speakers.mx-speakers-visible .mx-speakers-pagination,
.mx-speakers.mx-speakers-visible .mx-speakers-cta,
.mx-speakers.mx-speakers-visible .mx-speakers-footer {
  opacity: 1;

  transform: translateY(0);
}

.mx-speakers.mx-speakers-visible .mx-speakers-side {
  transition-delay: 0.12s;
}

.mx-speakers.mx-speakers-visible .mx-speakers-stage {
  transition-delay: 0.22s;
}

.mx-speakers.mx-speakers-visible .mx-speakers-pagination {
  transition-delay: 0.35s;
}

.mx-speakers.mx-speakers-visible .mx-speakers-cta {
  transition-delay: 0.42s;
}

.mx-speakers.mx-speakers-visible .mx-speakers-footer {
  transition-delay: 0.5s;
}

@media (max-width: 1050px) {
  .mx-speakers {
    padding: 45px 32px 24px;
  }

  .mx-speakers-header {
    grid-template-columns: 1fr;
  }

  .mx-speakers-side {
    display: none;
  }

  .mx-speaker-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 650px) {
  .mx-speakers {
    margin: 20px auto;

    padding: 35px 20px 22px;

    border-radius: 18px;
  }

  .mx-speakers-eyebrow {
    gap: 11px;

    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .mx-speakers-eyebrow span {
    width: 30px;
  }

  .mx-speakers-heading h2 {
    font-size: 46px;

    letter-spacing: -1px;
  }

  .mx-speakers-heading p {
    font-size: 11px;

    line-height: 1.6;
  }

  .mx-speakers-stage {
    padding: 0 6px;
  }

  .mx-speaker-card {
    flex-basis: 100%;
  }

  .mx-speaker-image {
    height: 260px;
  }

  .mx-speaker-nav {
    width: 39px;

    height: 39px;

    font-size: 19px;
  }

  .mx-speaker-prev {
    left: -10px;
  }

  .mx-speaker-next {
    right: -10px;
  }

  .mx-speakers-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    font-size: 7px;

    letter-spacing: 2px;
  }

  .mx-speakers-footer-right {
    flex-wrap: wrap;

    gap: 9px;
  }

  .mx-speakers-button {
    font-size: 8px;

    padding-left: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-speakers-heading,
  .mx-speakers-side,
  .mx-speakers-stage,
  .mx-speakers-pagination,
  .mx-speakers-cta,
  .mx-speakers-footer,
  .mx-speakers-track,
  .mx-speaker-card,
  .mx-speaker-image img {
    transition: none !important;

    transform: none !important;

    animation: none !important;
  }
}

.mx-roundtables {
  position: relative;
  width: 100%;
  margin: 35px auto;
  padding: 42px 48px 20px;
  overflow: hidden;
}

.mx-roundtables::before {
  content: "";
  position: absolute;

  width: 900px;
  height: 900px;

  left: 42%;
  bottom: -650px;

  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(26, 137, 225, 0.15),
    rgba(26, 137, 225, 0)
  );

  pointer-events: none;
}

.mx-roundtables-inner {
  position: relative;
  z-index: 2;
}

.mx-rt-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    180px;

  gap: 40px;

  margin-bottom: 28px;
}

.mx-rt-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-bottom: 15px;

  font-family: "Space Mono", monospace;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 4px;

  color: #536e8b;
}

.mx-rt-eyebrow span {
  width: 52px;
  height: 2px;

  background: linear-gradient(90deg, #d2a437, #1487e9);
}

.mx-rt-heading h2 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: clamp(46px, 5.1vw, 70px);

  line-height: 0.9;

  font-weight: 700;

  letter-spacing: -2px;

  color: #102f55;

  text-transform: uppercase;
}

.mx-rt-heading h2 span {
  color: #1384e6;
}

.mx-rt-title-line {
  width: 76px;
  height: 3px;

  margin-top: 18px;

  background: linear-gradient(90deg, #1183e5, #d5a93b);
}

.mx-rt-heading p {
  max-width: 760px;

  margin: 18px 0 0;

  font-size: 13px;

  line-height: 1.55;

  color: #637b96;
}

.mx-rt-side-copy {
  position: relative;

  padding-left: 26px;

  border-left: 1px solid #d2e0ed;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  line-height: 1.9;

  letter-spacing: 3px;

  color: #66819d;
}

.mx-rt-side-line {
  position: absolute;

  left: -1px;
  top: 0;

  width: 2px;
  height: 68px;

  background: linear-gradient(#1889ea, transparent);
}

.mx-rt-side-copy > span {
  display: block;

  width: 40px;
  height: 2px;

  margin: 12px 0 17px;

  background: #d4a73a;
}

.mx-rt-side-copy strong {
  display: block;

  font-size: 9px;

  letter-spacing: 2px;

  color: #36597d;
}

.mx-rt-side-copy small {
  display: block;

  margin-top: 4px;

  font-size: 8px;

  line-height: 1.7;

  letter-spacing: 2px;

  color: #748ba3;
}

.mx-rt-main {
  display: grid;

  grid-template-columns:
    72px
    minmax(0, 1fr)
    80px;

  gap: 14px;

  min-height: 505px;
}

.mx-rt-timeline {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  padding: 30px 0;
}

.mx-rt-timeline-line {
  position: absolute;

  left: 40px;
  top: 48px;
  bottom: 48px;

  width: 1px;

  background: #bfd3e6;
}

.mx-rt-timeline-item {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.mx-rt-timeline-item span {
  font-family: "Space Mono", monospace;

  font-size: 15px;
  font-weight: 700;

  color: #8ba5bf;
}

.mx-rt-timeline-item i {
  width: 11px;
  height: 11px;

  margin-right: 25px;

  border: 2px solid #9bb4ce;

  border-radius: 50%;

  background: #ffffff;

  transition: 0.35s ease;
}

.mx-rt-timeline-item.active span {
  color: #087ee4;
}

.mx-rt-timeline-item.active i {
  width: 14px;
  height: 14px;

  margin-right: 23px;

  border: 3px solid #1588e8;

  background: #1588e8;

  box-shadow: 0 0 0 4px rgba(21, 136, 232, 0.1);
}

.mx-rt-cards {
  position: relative;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;

  align-items: stretch;

  perspective: 1400px;
}

.mx-rt-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(181, 210, 233, 0.9);

  border-radius: 15px;

  background: linear-gradient(
    180deg,
    rgba(247, 252, 255, 0.82),
    rgba(255, 255, 255, 0.96)
  );

  box-shadow: 0 15px 35px rgba(26, 77, 117, 0.07);

  transform: translateY(15px) rotateY(0deg);

  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.mx-rt-card:nth-child(2) {
  transform: translateY(5px) rotateY(0deg);
}

.mx-rt-card:nth-child(3) {
  transform: translateY(-5px) rotateY(0deg);
}

.mx-rt-card:nth-child(4) {
  transform: translateY(-15px) rotateY(0deg);
}

.mx-rt-card:hover {
  transform: translateY(-18px) rotateY(-2deg) scale(1.015);

  border-color: #8ec6ee;

  box-shadow: 0 28px 55px rgba(25, 99, 158, 0.16);
}

.mx-rt-card-visual {
  position: relative;

  height: 190px;

  overflow: hidden;

  background: linear-gradient(135deg, #0879d1, #dff1ff);
}

.mx-rt-number {
  position: absolute;

  top: 15px;
  right: 15px;

  z-index: 5;

  font-family: "Rajdhani", sans-serif;

  font-size: 55px;

  line-height: 1;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.75);
}

.mx-rt-glass {
  position: absolute;

  left: -10%;
  right: -10%;
  bottom: -25px;

  height: 57px;

  z-index: 3;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.68)
  );

  border-top: 1px solid rgba(255, 255, 255, 0.9);

  transform: rotate(-6deg);

  backdrop-filter: blur(7px);
}

.mx-rt-visual {
  position: absolute;

  inset: 0;
}

.mx-scale {
  position: absolute;

  left: 50%;
  top: 48%;

  width: 100px;
  height: 90px;

  transform: translate(-50%, -50%);
}

.mx-scale::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 8px;

  width: 3px;
  height: 72px;

  transform: translateX(-50%);

  background: #ffffff;
}

.mx-scale::after {
  content: "";

  position: absolute;

  left: 20px;
  top: 10px;

  width: 60px;
  height: 3px;

  background: #ffffff;
}

.mx-scale span {
  position: absolute;

  top: 23px;

  width: 35px;
  height: 25px;

  border-bottom: 2px solid #d9b24b;

  border-radius: 0 0 50% 50%;
}

.mx-scale span:first-child {
  left: 0;
}

.mx-scale span:nth-child(2) {
  right: 0;
}

.mx-scale b {
  position: absolute;

  left: 43px;
  bottom: 0;

  width: 18px;
  height: 3px;

  background: #ffffff;
}

.embassy {
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 255, 255, 0.7),
    transparent 28%
  );
}

.mx-data-cube {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 92px;
  height: 92px;

  transform: translate(-50%, -50%) rotate(0deg);

  border: 2px solid rgba(255, 255, 255, 0.85);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.32),
    rgba(12, 99, 173, 0.45)
  );

  box-shadow: 0 0 35px rgba(255, 255, 255, 0.35);
}

.mx-data-cube::before,
.mx-data-cube::after {
  content: "";

  position: absolute;

  inset: 13px;

  border: 1px solid rgba(255, 255, 255, 0.7);
}

.mx-data-cube::after {
  transform: translate(12px, -12px);
}

.mx-data-cube i {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #e0bd53;

  box-shadow: 0 0 12px #e0bd53;
}

.mx-data-cube i:nth-child(1) {
  left: 18px;
  top: 18px;
}

.mx-data-cube i:nth-child(2) {
  right: 18px;
  top: 18px;
}

.mx-data-cube i:nth-child(3) {
  left: 18px;
  bottom: 18px;
}

.mx-data-cube i:nth-child(4) {
  right: 18px;
  bottom: 18px;
}

.infrastructure {
  background: linear-gradient(160deg, #1686df, #9bc8e9);
}

.mx-bridge {
  position: absolute;

  left: 50%;
  bottom: 28px;

  width: 150px;
  height: 110px;

  transform: translateX(-50%);
}

.mx-bridge::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 0;

  width: 6px;
  height: 95px;

  transform: translateX(-50%);

  background: #ffffff;

  box-shadow:
    -50px 25px 0 -1px rgba(255, 255, 255, 0.85),
    50px 25px 0 -1px rgba(255, 255, 255, 0.85);
}

.mx-bridge span {
  position: absolute;

  bottom: 0;

  width: 3px;

  height: 100px;

  background: rgba(255, 255, 255, 0.8);

  transform-origin: bottom;
}

.mx-bridge span:nth-child(1) {
  left: 48px;

  transform: rotate(35deg);
}

.mx-bridge span:nth-child(2) {
  left: 73px;

  transform: rotate(-35deg);
}

.mx-bridge span:nth-child(3) {
  right: 48px;

  transform: rotate(-35deg);
}

.mx-bridge b {
  position: absolute;

  left: 5px;
  right: 5px;
  bottom: 0;

  height: 4px;

  background: linear-gradient(90deg, #d7b24d, #ffffff, #d7b24d);
}

.quantum {
  background: radial-gradient(circle at center, #86bce3, #07589d 65%);
}

.mx-quantum {
  position: absolute;

  left: 50%;
  top: 48%;

  width: 110px;
  height: 110px;

  transform: translate(-50%, -50%);
}

.mx-quantum::before,
.mx-quantum::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 105px;
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.85);

  border-radius: 50%;

  transform: translate(-50%, -50%) rotate(30deg);
}

.mx-quantum::after {
  transform: translate(-50%, -50%) rotate(-30deg);
}

.mx-quantum span {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 42px;
  height: 42px;

  transform: translate(-50%, -50%);

  border: 1px solid #ffffff;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
}

.mx-quantum i {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 9px;
  height: 9px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #e0b949;

  box-shadow: 0 0 15px #e0b949;
}

.mx-rt-card-content {
  position: relative;

  min-height: 355px;

  padding: 22px 20px 20px;
}

.mx-rt-card-content h3 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 17px;

  line-height: 1.05;

  font-weight: 700;

  color: #102f55;
}

.mx-rt-card-content em {
  display: block;

  margin-top: 11px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  line-height: 1.6;

  font-style: italic;

  color: #1383e5;
}

.mx-rt-mini-line {
  width: 40px;
  height: 2px;

  margin: 13px 0 15px;

  background: #d5aa3c;
}

.mx-rt-focus strong {
  display: block;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  letter-spacing: 2px;

  color: #153a60;
}

.mx-rt-focus p {
  margin: 5px 0 0;

  font-size: 11px;

  line-height: 1.55;

  color: #566f8b;
}

.mx-rt-output {
  position: absolute;

  left: 20px;
  right: 20px;
  bottom: 20px;

  display: flex;

  align-items: center;

  gap: 12px;
}

.mx-rt-output button {
  flex: 0 0 auto;

  width: 43px;
  height: 43px;

  border: 1px solid #c7def2;

  border-radius: 50%;

  background: rgba(245, 251, 255, 0.8);

  color: #075da9;

  font-size: 21px;

  cursor: pointer;

  transition: 0.3s ease;
}

.mx-rt-output button:hover {
  color: #ffffff;

  background: #1487e8;

  border-color: #1487e8;

  transform: translateX(3px);
}

.mx-rt-output div {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.mx-rt-output strong {
  font-family: "Space Mono", monospace;

  font-size: 8px;

  letter-spacing: 2px;

  color: #23496d;
}

.mx-rt-output span {
  font-size: 10px;

  line-height: 1.25;

  color: #086fd0;
}

.mx-rt-right {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

.mx-rt-next {
  width: 58px;
  height: 58px;

  border: 1px solid #c7ddec;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.75);

  color: #14395f;

  font-size: 27px;

  cursor: pointer;

  box-shadow: 0 10px 25px rgba(24, 80, 124, 0.07);

  transition: 0.35s ease;
}

.mx-rt-next:hover {
  color: #ffffff;

  background: #1388ea;

  border-color: #1388ea;

  transform: translateX(4px);
}

.mx-rt-scroll-line {
  width: 1px;
  height: 35px;

  margin-top: 17px;

  background: linear-gradient(#aec6dc, transparent);
}

.mx-rt-right > span {
  margin-top: 8px;

  text-align: center;

  font-family: "Space Mono", monospace;

  font-size: 7px;

  line-height: 1.7;

  letter-spacing: 2px;

  color: #7890a9;
}

.mx-rt-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 20px;

  padding-top: 16px;

  border-top: 1px solid #d8e5ef;

  font-family: "Space Mono", monospace;

  font-size: 8px;

  letter-spacing: 3px;

  color: #718aa5;
}

.mx-rt-footer > div {
  display: flex;

  align-items: center;

  gap: 17px;
}

.mx-rt-footer > div:first-child span {
  width: 42px;
  height: 1px;

  background: #a9c2d9;
}

.mx-rt-footer b {
  width: 38px;
  height: 2px;

  background: #d4a83a;
}

.mx-rt-heading,
.mx-rt-side-copy,
.mx-rt-timeline,
.mx-rt-card,
.mx-rt-right,
.mx-rt-footer {
  opacity: 0;

  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-rt-heading {
  transform: translateY(30px);
}

.mx-rt-side-copy {
  transform: translateX(25px);
}

.mx-rt-timeline {
  transform: translateX(-25px);
}

.mx-rt-card {
  transform: translateY(55px) rotateX(4deg);
}

.mx-rt-right {
  transform: translateX(25px);
}

.mx-rt-footer {
  transform: translateY(20px);
}

.mx-roundtables.is-visible .mx-rt-heading,
.mx-roundtables.is-visible .mx-rt-side-copy,
.mx-roundtables.is-visible .mx-rt-timeline,
.mx-roundtables.is-visible .mx-rt-right,
.mx-roundtables.is-visible .mx-rt-footer {
  opacity: 1;
  transform: none;
}

.mx-roundtables.is-visible .mx-rt-card {
  opacity: 1;
}

.mx-roundtables.is-visible .mx-rt-card:nth-child(1) {
  transform: translateY(15px);
  transition-delay: 0.12s;
}

.mx-roundtables.is-visible .mx-rt-card:nth-child(2) {
  transform: translateY(5px);
  transition-delay: 0.22s;
}

.mx-roundtables.is-visible .mx-rt-card:nth-child(3) {
  transform: translateY(-5px);
  transition-delay: 0.32s;
}

.mx-roundtables.is-visible .mx-rt-card:nth-child(4) {
  transform: translateY(-15px);
  transition-delay: 0.42s;
}

@media (max-width: 1050px) {
  .mx-roundtables {
    padding: 40px 30px 22px;
  }

  .mx-rt-header {
    grid-template-columns: 1fr;
  }

  .mx-rt-side-copy {
    display: none;
  }

  .mx-rt-main {
    grid-template-columns:
      50px
      1fr;
  }

  .mx-rt-right {
    display: none;
  }

  .mx-rt-cards {
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
  }

  .mx-rt-card:nth-child(n) {
    transform: translateY(0);
  }
}

@media (max-width: 680px) {
  .mx-roundtables {
    margin: 20px auto;

    padding: 32px 18px 20px;

    border-radius: 17px;
  }

  .mx-rt-eyebrow {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .mx-rt-eyebrow span {
    width: 30px;
  }

  .mx-rt-heading h2 {
    font-size: 42px;

    letter-spacing: -1px;
  }

  .mx-rt-heading p {
    font-size: 11px;
  }

  .mx-rt-main {
    display: block;
  }

  .mx-rt-timeline {
    display: none;
  }

  .mx-rt-cards {
    display: flex;

    gap: 15px;
    overflow-x: auto;
    /* overflow: hidden; */
  }

  .mx-rt-output {
    bottom: -23px;
  }

  .mx-rt-card {
    flex: 0 0 88%;

    min-height: 570px;
  }

  .mx-rt-card-visual {
    height: 185px;
  }

  .mx-rt-card-content {
    min-height: 320px;
  }

  .mx-rt-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    font-size: 7px;

    letter-spacing: 2px;
  }
}

/* =========================================================
   MERIDIAN EXCHANGE
   GLOBAL DATA CENTRE FOOTPRINT
========================================================= */

.mx-global-data {
  position: relative;
  width: 100%;
  margin: 35px auto !important;
  padding: 48px 48px 22px;

  overflow: hidden;
}

/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.mx-global-data::before {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  right: -250px;
  bottom: -330px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(20, 137, 234, 0.1), transparent 68%);

  pointer-events: none;
}

.mx-global-data::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(19, 133, 226, 0.35),
    #d5a83a,
    rgba(19, 133, 226, 0.35),
    transparent
  );
}

/* =========================================================
   INNER
========================================================= */

.mx-global-data-inner {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HEADER
========================================================= */

.mx-global-data-header {
  position: relative;

  max-width: 900px;

  margin-bottom: 30px;
}

.mx-global-data-eyebrow {
  display: flex;
  align-items: center;
  gap: 17px;

  margin-bottom: 15px;

  font-family: "Space Mono", monospace;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 4px;

  color: #627d99;
}

.mx-global-data-eyebrow span {
  width: 55px;
  height: 2px;

  background: linear-gradient(90deg, #d5a83c, #1188e8);
}

.mx-global-data-header h2 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: clamp(46px, 5vw, 70px);

  line-height: 0.9;

  font-weight: 700;

  letter-spacing: -2px;

  color: #102f55;

  text-transform: uppercase;
}

.mx-global-data-header h2 span {
  color: #1385e8;
}

.mx-global-data-line {
  width: 78px;
  height: 3px;

  margin-top: 18px;

  background: linear-gradient(90deg, #1185e8, #d5a83b);
}

.mx-global-data-header p {
  max-width: 820px;

  margin: 18px 0 0;

  font-size: 13px;

  line-height: 1.65;

  color: #667e98;
}

/* =========================================================
   MAIN
========================================================= */

.mx-global-data-content {
  display: grid;

  grid-template-columns:
    285px
    minmax(0, 1fr);

  gap: 35px;

  min-height: 480px;
}

/* =========================================================
   LEFT INFORMATION
========================================================= */

.mx-global-data-info {
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 15px 25px 10px 0;

  border-right: 1px solid #d7e5f1;
}

/* =========================================================
   BIG STAT
========================================================= */

.mx-global-stat {
  display: flex;

  flex-direction: column;

  padding-bottom: 22px;
}

.mx-global-stat-number {
  font-family: "Rajdhani", sans-serif;

  font-size: 62px;

  line-height: 0.9;

  font-weight: 700;

  color: #0e78d3;

  letter-spacing: -2px;
}

.mx-global-stat-label {
  margin-top: 9px;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  line-height: 1.7;

  font-weight: 700;

  letter-spacing: 2px;

  color: #516d89;
}

.mx-global-info-divider {
  width: 100%;
  height: 1px;

  margin-bottom: 20px;

  background: #dce7f1;
}

/* =========================================================
   INSIGHTS
========================================================= */

.mx-global-insight {
  display: grid;

  grid-template-columns:
    30px
    1fr;

  gap: 12px;

  margin-bottom: 18px;
}

.mx-global-insight-number {
  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding-top: 1px;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  color: #1686e5;
}

.mx-global-insight strong {
  display: block;

  font-family: "Rajdhani", sans-serif;

  font-size: 14px;

  line-height: 1.1;

  letter-spacing: 0.5px;

  color: #15385d;
}

.mx-global-insight p {
  margin: 6px 0 0;

  font-size: 10px;

  line-height: 1.55;

  color: #71869e;
}

/* =========================================================
   BOTTOM NOTE
========================================================= */

.mx-global-data-note {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-top: auto;

  padding-top: 15px;

  border-top: 1px solid #dce7f1;

  font-family: "Space Mono", monospace;

  font-size: 7px;

  letter-spacing: 1.7px;

  color: #8298ae;
}

.mx-global-data-note span {
  width: 25px;
  height: 2px;

  background: #d3a53b;
}

.mx-global-data-note strong {
  color: #2876b5;
}

/* =========================================================
   MAP
========================================================= */

.mx-global-map {
  position: relative;

  min-height: 470px;

  overflow: hidden;

  border-radius: 16px;

  background: radial-gradient(
    ellipse at center,
    rgba(217, 238, 252, 0.72),
    rgba(247, 251, 254, 0.25) 62%,
    transparent 80%
  );
}

/* =========================================================
   MAP GRID
========================================================= */

.mx-map-grid {
  position: absolute;

  inset: 0;

  opacity: 0.28;

  background-image:
    linear-gradient(rgba(61, 131, 183, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 131, 183, 0.12) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: radial-gradient(ellipse, black 10%, transparent 76%);

  -webkit-mask-image: radial-gradient(ellipse, black 10%, transparent 76%);
}

/* =========================================================
   MAP GLOW
========================================================= */

.mx-map-glow {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 430px;
  height: 430px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(30, 142, 232, 0.14),
    transparent 67%
  );

  filter: blur(4px);

  animation: mxMapPulse 5s ease-in-out infinite;
}

@keyframes mxMapPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.9);

    opacity: 0.6;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);

    opacity: 1;
  }
}

/* =========================================================
   SVG MAP
========================================================= */

.mx-data-map {
  position: absolute;

  width: 100%;
  height: 100%;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  object-fit: cover;

  z-index: 2;

  opacity: 0.92;

  filter: drop-shadow(0 10px 25px rgba(22, 102, 157, 0.08));

  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-global-map:hover .mx-data-map {
  transform: translate(calc(-50% + 5px), calc(-50% - 3px)) scale(1.025);
}

.mx-map-data {
  position: absolute;

  z-index: 5;

  display: flex;

  flex-direction: column;

  min-width: 105px;

  padding: 9px 12px;

  background: rgba(255, 255, 255, 0.88);

  border: 1px solid rgba(157, 194, 220, 0.75);

  border-radius: 8px;

  backdrop-filter: blur(8px);

  box-shadow: 0 9px 25px rgba(29, 83, 121, 0.08);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.mx-map-data:hover {
  transform: translateY(-5px) scale(1.03);

  box-shadow: 0 15px 30px rgba(29, 83, 121, 0.15);
}

.mx-map-data span {
  font-family: "Space Mono", monospace;

  font-size: 7px;

  letter-spacing: 1.5px;

  color: #9aafc3;
}

.mx-map-data strong {
  margin-top: 2px;

  font-family: "Rajdhani", sans-serif;

  font-size: 10px;

  line-height: 1.1;

  color: #193c61;
}

.mx-map-data b {
  margin-top: 2px;

  font-family: "Rajdhani", sans-serif;

  font-size: 18px;

  line-height: 1;

  color: #1284e7;
}

.mx-map-data-us {
  left: 9%;
  bottom: 24%;
}

.mx-map-data-canada {
  left: 16%;
  top: 19%;
}

.mx-map-data-uk {
  left: 43%;
  top: 17%;
}

.mx-map-data-france {
  left: 43%;
  top: 39%;
}

.mx-map-data-germany {
  left: 53%;
  top: 25%;
}

.mx-map-data-china {
  right: 10%;
  top: 36%;
}

.mx-map-data-india {
  right: 24%;
  bottom: 27%;
}

.mx-map-data-australia {
  right: 5%;
  bottom: 13%;
}

.mx-map-corner {
  position: absolute;

  right: 15px;
  bottom: 15px;

  z-index: 7;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 4px;

  font-family: "Space Mono", monospace;

  font-size: 7px;

  letter-spacing: 2px;

  color: #7d93aa;
}

.mx-map-corner span {
  width: 30px;
  height: 2px;

  margin-bottom: 3px;

  background: #d3a63b;
}

.mx-map-corner strong {
  color: #27608e;

  font-size: 8px;
}

.mx-global-data-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 18px;

  padding-top: 15px;

  border-top: 1px solid #d9e6f0;

  font-family: "Space Mono", monospace;

  font-size: 8px;

  letter-spacing: 2.5px;

  color: #7b91a8;
}

.mx-global-footer-left,
.mx-global-footer-right {
  display: flex;

  align-items: center;

  gap: 14px;
}

.mx-global-footer-left span {
  width: 45px;

  height: 1px;

  background: #aec5d9;
}

.mx-global-footer-right b {
  width: 34px;

  height: 2px;

  background: #d4a83b;
}

.mx-global-data-header,
.mx-global-data-info,
.mx-global-map,
.mx-global-data-footer {
  opacity: 0;

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-global-data-header {
  transform: translateY(30px);
}

.mx-global-data-info {
  transform: translateX(-35px);
}

.mx-global-map {
  transform: translateX(45px) scale(0.97);
}

.mx-global-data-footer {
  transform: translateY(20px);
}

.mx-global-data.is-visible .mx-global-data-header,
.mx-global-data.is-visible .mx-global-data-info,
.mx-global-data.is-visible .mx-global-map,
.mx-global-data.is-visible .mx-global-data-footer {
  opacity: 1;

  transform: none;
}

.mx-global-data.is-visible .mx-global-data-info {
  transition-delay: 0.15s;
}

.mx-global-data.is-visible .mx-global-map {
  transition-delay: 0.25s;
}

.mx-global-data.is-visible .mx-global-data-footer {
  transition-delay: 0.4s;
}

@media (max-width: 1000px) {
  .mx-global-data {
    padding: 42px 30px 22px;
  }

  .mx-global-data-content {
    grid-template-columns:
      240px
      1fr;

    gap: 20px;
  }

  .mx-map-data {
    transform: scale(0.9);
  }
}

@media (max-width: 760px) {
  .mx-global-data {
    padding: 35px 22px 20px;
  }

  .mx-global-data-content {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .mx-global-data-info {
    border-right: 0;

    border-bottom: 1px solid #d7e5f1;

    padding: 0 0 22px;
  }

  .mx-global-insight {
    max-width: 600px;
  }

  .mx-global-data-note {
    margin-top: 8px;
  }

  .mx-global-map {
    min-height: 400px;
  }

  .mx-map-data {
    min-width: 85px;

    padding: 7px 9px;
  }

  .mx-map-data strong {
    font-size: 8px;
  }

  .mx-map-data b {
    font-size: 15px;
  }

  .mx-data-map {
    width: 105%;
  }
}

@media (max-width: 520px) {
  .mx-global-data {
    margin: 20px auto;

    border-radius: 17px;

    padding: 30px 17px 18px;
  }

  .mx-global-data-eyebrow {
    font-size: 8px;

    letter-spacing: 2px;
  }

  .mx-global-data-eyebrow span {
    width: 30px;
  }

  .mx-global-data-header h2 {
    font-size: 40px;

    letter-spacing: -1px;
  }

  .mx-global-data-header p {
    font-size: 11px;
  }

  .mx-global-map {
    min-height: 320px;
  }

  .mx-data-map {
    width: 125%;
  }

  .mx-map-data {
    transform: scale(0.72);

    transform-origin: center;
  }

  .mx-map-data-us {
    left: 2%;
  }

  .mx-map-data-canada {
    left: 9%;
  }

  .mx-map-data-uk {
    left: 35%;
  }

  .mx-map-data-france {
    left: 36%;
  }

  .mx-map-data-germany {
    left: 49%;
  }

  .mx-map-data-china {
    right: 0;
  }

  .mx-map-data-india {
    right: 17%;
  }

  .mx-map-data-australia {
    right: 0;
  }

  .mx-global-data-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    font-size: 7px;

    letter-spacing: 1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-map-glow {
    animation: none;
  }

  .mx-global-data-header,
  .mx-global-data-info,
  .mx-global-map,
  .mx-global-data-footer {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.mx-embassy-section {
  position: relative;

  width: 100%;

  margin: 35px auto !important;

  padding: 42px 48px 22px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(26, 137, 232, 0.07),
      transparent 32%
    ),
    linear-gradient(135deg, #ffffff 0%, #f8fbfe 60%, #edf6fc 100%);

  border: 1px solid #d9e7f2;

  border-radius: 22px;

  box-shadow: 0 25px 60px rgba(26, 74, 112, 0.08);
}

/* subtle top line */

.mx-embassy-section::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #1686e8,
    #d6aa3c,
    #1686e8,
    transparent
  );
}

.mx-embassy-inner {
  position: relative;
  z-index: 2;
}

.mx-embassy-header {
  margin-bottom: 28px;
}

.mx-embassy-eyebrow {
  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 14px;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 3px;

  color: #69819a;
}

.mx-embassy-eyebrow span {
  width: 50px;
  height: 2px;

  background: linear-gradient(90deg, #d2a63a, #1687e8);
}

.mx-embassy-header h2 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: clamp(46px, 5vw, 70px);

  line-height: 0.9;

  letter-spacing: -2px;

  font-weight: 700;

  color: #102f55;

  text-transform: uppercase;
}

.mx-embassy-header h2 span {
  display: block;

  color: #1385e8;
}

.mx-embassy-title-line {
  width: 68px;
  height: 3px;

  margin-top: 17px;

  background: linear-gradient(90deg, #1286e8, #d2a63b);
}

.mx-embassy-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(420px, 1.05fr);

  min-height: 310px;

  margin-bottom: 18px;

  overflow: hidden;

  border: 1px solid #d4e4f0;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.58);

  box-shadow: 0 10px 30px rgba(36, 88, 127, 0.05);
}

.mx-embassy-copy {
  padding: 26px 28px;
}

.mx-embassy-label {
  display: inline-flex;

  padding: 7px 11px;

  border: 1px solid #d2e5f4;

  border-radius: 20px;

  background: #ffffff;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  letter-spacing: 1.5px;

  color: #126cc1;
}

.mx-embassy-copy h3 {
  margin: 15px 0 10px;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 22px;

  line-height: 1.2;

  color: #12365c;
}

.mx-embassy-copy p {
  max-width: 570px;

  margin: 0;

  font-size: 13px;

  line-height: 1.65;

  color: #667e98;
}

.mx-embassy-tags {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 8px;

  margin-top: 19px;
}

.mx-embassy-tags span {
  display: flex;

  align-items: center;

  min-height: 38px;

  padding: 8px 11px;

  border: 1px solid #d4e4f0;

  border-radius: 8px;

  background: rgba(248, 252, 255, 0.8);

  font-family: "Space Mono", monospace;

  font-size: 10px;

  line-height: 1.35;

  letter-spacing: 0.4px;

  color: #28547c;

  transition: 0.3s ease;
}

.mx-embassy-tags span:hover {
  transform: translateY(-2px);

  border-color: #86bfe9;

  background: #ffffff;

  box-shadow: 0 8px 18px rgba(22, 113, 177, 0.08);
}

.mx-embassy-visual {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 310px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(20, 136, 232, 0.12),
      transparent 55%
    ),
    linear-gradient(135deg, #f8fcff, #eaf5fd);

  border-left: 1px solid #d6e5f0;
}

.mx-embassy-visual-glow {
  position: absolute;

  width: 330px;

  height: 330px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(20, 137, 233, 0.18),
    transparent 68%
  );

  animation: mxEmbassyGlow 5s ease-in-out infinite;
}

@keyframes mxEmbassyGlow {
  0%,
  100% {
    transform: scale(0.9);

    opacity: 0.55;
  }

  50% {
    transform: scale(1.12);

    opacity: 0.95;
  }
}

.mx-embassy-orbit {
  position: absolute;

  left: 50%;

  top: 50%;

  border: 1px solid rgba(30, 139, 232, 0.22);

  border-radius: 50%;

  transform: translate(-50%, -50%);
}

.orbit-one {
  width: 280px;

  height: 145px;

  transform: translate(-50%, -50%) rotate(25deg);
}

.orbit-two {
  width: 300px;

  height: 170px;

  transform: translate(-50%, -50%) rotate(-25deg);
}

.orbit-three {
  width: 230px;

  height: 230px;
}

.mx-primary-node-img {
  position: relative;

  z-index: 5;

  width: 94%;

  max-width: 520px;

  height: auto;

  object-fit: contain;

  transform: translateY(5px);

  filter: drop-shadow(0 18px 25px rgba(10, 78, 126, 0.12));

  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-embassy-visual:hover .mx-primary-node-img {
  transform: translateY(-7px) scale(1.025);
}

.mx-embassy-table-wrap {
  overflow: hidden;

  margin-top: 16px;

  border: 1px solid #d3e3ef;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.72);

  box-shadow: 0 10px 28px rgba(31, 82, 120, 0.05);
}

.mx-embassy-table-head {
  display: grid !important;

  grid-template-columns:
    1.1fr
    0.8fr
    2.5fr;

  min-height: 36px !important;

  align-items: center !important;

  padding: 0 12px !important;

  background: #edf6fd !important;

  border-bottom: 1px solid #d2e2ee !important;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1px;

  color: #28567e;
}

.mx-embassy-table-row {
  display: grid;

  grid-template-columns:
    1.1fr
    0.8fr
    2.5fr;

  min-height: 56px;

  align-items: center;

  padding: 9px 12px;

  border-bottom: 1px solid #dce7ef;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.mx-embassy-table-row:last-child {
  border-bottom: 0;
}

.mx-embassy-table-row:hover {
  background: #f7fbfe;

  transform: translateX(3px);
}

.mx-sector-name {
  font-family: "Rajdhani", sans-serif;

  font-size: 12px;

  line-height: 1.3;

  font-weight: 700;

  color: #173b61;
}

.mx-legacy {
  font-size: 11px;

  line-height: 1.4;

  color: #7c90a5;
}

.mx-blueprint {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 11px;

  line-height: 1.45;

  color: #607994;
}

.mx-blueprint i {
  flex: 0 0 auto;

  width: 6px;

  height: 6px;

  margin-top: 4px;

  border-radius: 50%;

  background: #1188e9;

  box-shadow: 0 0 7px rgba(17, 136, 233, 0.4);
}

.mx-embassy-process {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  margin-top: 16px;
}

.mx-process-card {
  position: relative;

  display: flex;

  gap: 10px;

  min-height: 105px;

  padding: 13px;

  overflow: hidden;

  border: 1px solid #d3e3ef;

  border-radius: 11px;

  background: linear-gradient(145deg, #ffffff, #f6fbff);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.mx-process-card::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 3px;

  height: 0;

  background: linear-gradient(#1488e8, #d3a63b);

  transition: height 0.35s ease;
}

.mx-process-card:hover {
  transform: translateY(-5px);

  border-color: #a7cce7;

  box-shadow: 0 14px 30px rgba(30, 89, 130, 0.1);
}

.mx-process-card:hover::before {
  height: 100%;
}

.mx-process-number {
  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  width: 25px;

  height: 25px;

  border: 1px solid #cce2f4;

  border-radius: 50%;

  background: #f2f9ff;

  font-family: "Space Mono", monospace;

  font-size: 20px;

  color: #0d76cf;
}

.mx-process-content h4 {
  margin: 2px 0 5px;

  font-family: "Rajdhani", sans-serif;

  font-size: 20px;

  color: #153b60;
}

.mx-process-content p {
  margin: 0;

  font-size: 11px;

  line-height: 1.55;

  color: #71859b;
}

.mx-embassy-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 18px;

  padding-top: 14px;

  border-top: 1px solid #dce7ef;

  font-family: "Space Mono", monospace;

  font-size: 7px;

  letter-spacing: 2px;

  color: #7890a7;
}

.mx-embassy-footer span {
  width: 40px;

  height: 1px;

  margin-right: 10px;

  background: #a9c1d5;
}

.mx-embassy-footer b {
  width: 32px;

  height: 2px;

  margin: 0 12px;

  background: #d4a63b;
}

.mx-embassy-header,
.mx-embassy-intro,
.mx-embassy-table-wrap,
.mx-process-card,
.mx-embassy-footer {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-embassy-section.is-visible .mx-embassy-header,
.mx-embassy-section.is-visible .mx-embassy-intro,
.mx-embassy-section.is-visible .mx-embassy-table-wrap,
.mx-embassy-section.is-visible .mx-embassy-footer {
  opacity: 1;

  transform: none;
}

.mx-embassy-section.is-visible .mx-embassy-intro {
  transition-delay: 0.12s;
}

.mx-embassy-section.is-visible .mx-embassy-table-wrap {
  transition-delay: 0.24s;
}

.mx-embassy-section.is-visible .mx-process-card:nth-child(1) {
  opacity: 1;

  transform: none;

  transition-delay: 0.32s;
}

.mx-embassy-section.is-visible .mx-process-card:nth-child(2) {
  opacity: 1;

  transform: none;

  transition-delay: 0.4s;
}

.mx-embassy-section.is-visible .mx-process-card:nth-child(3) {
  opacity: 1;

  transform: none;

  transition-delay: 0.48s;
}

.mx-embassy-section.is-visible .mx-process-card:nth-child(4) {
  opacity: 1;

  transform: none;

  transition-delay: 0.56s;
}

@media (max-width: 900px) {
  .mx-embassy-section {
    padding: 38px 30px 20px;
  }

  .mx-embassy-intro {
    grid-template-columns: 1fr;
  }

  .mx-embassy-visual {
    min-height: 360px;

    border-left: 0;

    border-top: 1px solid #d6e5f0;
  }

  .mx-embassy-process {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mx-embassy-section {
    margin: 20px auto;

    padding: 30px 18px 18px;

    border-radius: 17px;
  }

  .mx-embassy-header h2 {
    font-size: 40px;
  }

  .mx-embassy-copy {
    padding: 20px;
  }

  .mx-embassy-tags {
    grid-template-columns: 1fr;
  }

  .mx-embassy-visual {
    min-height: 300px;
  }

  .mx-primary-node-img {
    width: 112%;
  }

  .mx-embassy-table-wrap {
    overflow-x: auto;
  }

  .mx-embassy-table-head,
  .mx-embassy-table-row {
    min-width: 680px;
  }

  .mx-embassy-process {
    grid-template-columns: 1fr;
  }

  .mx-embassy-footer {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-embassy-visual-glow {
    animation: none;
  }

  .mx-embassy-header,
  .mx-embassy-intro,
  .mx-embassy-table-wrap,
  .mx-process-card,
  .mx-embassy-footer {
    opacity: 1;

    transform: none;

    transition: none;
  }
}

.mx-how-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 38px 48px 0;

  color: #102f55;
}

.mx-how-inner {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 1450px;

  margin: 0 auto;
}

.mx-how-rings {
  position: absolute;

  width: 620px;
  height: 620px;

  border: 1px solid rgba(24, 132, 226, 0.15);

  border-radius: 50%;

  pointer-events: none;
}

.mx-how-rings::before,
.mx-how-rings::after {
  content: "";

  position: absolute;

  inset: 35px;

  border: 1px solid rgba(24, 132, 226, 0.1);

  border-radius: 50%;
}

.mx-how-rings::after {
  inset: 80px;
}

.mx-rings-left {
  left: -470px;
  top: 100px;
}

.mx-rings-right {
  right: -520px;
  bottom: 120px;
}

.mx-how-header {
  text-align: center;
  margin-bottom: 33px;
}

.mx-brand-line {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  margin-bottom: 18px;

  font-family: "Courier New", monospace;

  font-size: 12px;

  letter-spacing: 6px;

  color: #527096;
}

.mx-brand-line span {
  width: 82px;
  height: 2px;

  background: linear-gradient(90deg, #d7a936, #d7a936);
}

.mx-brand-line strong {
  font-weight: 500;
}

.mx-how-header h2 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: clamp(46px, 5vw, 70px);
  line-height: 0.9;
  letter-spacing: -2px;
  font-weight: 700;
  color: #102f55;
}

.mx-how-header h2 em {
  color: #117ee5;
  font-style: normal;
}

.mx-header-tagline {
  margin: 12px 0 0;

  font-family: "Courier New", monospace;

  font-size: 12px;

  letter-spacing: 5px;

  color: #0879df;
}

.mx-process-wrapper {
  position: relative;

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 12px;

  margin-top: 32px;
}

.mx-process-line {
  position: absolute;

  top: 70px;

  left: 8%;

  right: 8%;

  height: 1px;

  background: #a9cce9;

  z-index: 0;
}

.mx-process-line-fill {
  width: 0;

  height: 2px;

  background: linear-gradient(90deg, #1187ed, #1187ed 72%, #d3a63c);

  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-how-section.is-visible .mx-process-line-fill {
  width: 100%;
}

.mx-process-step {
  position: relative;

  z-index: 2;

  text-align: center;

  padding: 0 8px;

  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-how-section.is-visible .mx-process-step {
  opacity: 1;
  transform: translateY(0);
}

.mx-process-step:nth-child(2) {
  transition-delay: 0.05s;
}

.mx-process-step:nth-child(3) {
  transition-delay: 0.16s;
}

.mx-process-step:nth-child(4) {
  transition-delay: 0.27s;
}

.mx-process-step:nth-child(5) {
  transition-delay: 0.38s;
}

.mx-process-step:nth-child(6) {
  transition-delay: 0.49s;
}

.mx-process-step:nth-child(7) {
  transition-delay: 0.6s;
}

.mx-process-number {
  height: 25px;

  margin-bottom: 4px;

  font-family: "Arial Narrow", Arial, sans-serif;

  font-size: 12px;

  font-weight: 800;

  color: #0874d6;
}

.mx-icon-circle {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 70px;
  height: 70px;

  margin: 0 auto 13px;

  border-radius: 50%;

  background: radial-gradient(circle, #ffffff 42%, #edf7ff 65%, #d9edff 100%);

  border: 1px solid #d2e8fa;

  box-shadow:
    0 0 0 7px rgba(218, 238, 252, 0.55),
    0 7px 18px rgba(43, 123, 190, 0.1);
}

.mx-icon-circle::before {
  content: "";

  position: absolute;

  inset: -8px;

  border-radius: 50%;

  border: 1px solid rgba(26, 139, 231, 0.1);
}

.mx-icon-circle svg {
  width: 39px;
  height: 39px;

  fill: none;

  stroke: #0879e5;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.mx-process-content h3 {
  position: relative;

  margin: 0 0 14px;

  padding-bottom: 9px;

  font-family: "Arial Narrow", Impact, sans-serif;

  font-size: 15px;

  line-height: 1;

  font-weight: 900;

  color: #102f55;

  text-transform: uppercase;
}

.mx-process-content h3::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 50%;

  transform: translateX(-50%);

  width: 38px;
  height: 2px;

  background: linear-gradient(90deg, #087de1, #d3a63c);
}

.mx-process-content strong {
  display: block;

  min-height: 40px;

  font-size: 14px;

  line-height: 1.25;

  color: #132f55;
}

.mx-process-content p {
  max-width: 170px;

  min-height: 52px;

  margin: 5px auto 0;

  font-size: 11px;

  line-height: 1.45;

  color: #7086a0;
}

.mx-agenda-title {
  display: flex;

  align-items: center;

  gap: 23px;

  margin: 28px 4% 28px;
}

.mx-agenda-title span {
  flex: 1;

  height: 1px;

  background: #8db8dc;
}

.mx-agenda-title strong {
  white-space: nowrap;

  font-family: "Courier New", monospace;

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 6px;

  color: #3b6693;
}

.mx-agenda-grid {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    145px;

  gap: 60px;

  padding: 0 6% 10px;
}

.mx-agenda-heading {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 15px;
}

.mx-calendar-icon {
  width: 42px;
  height: 42px;
}

.mx-calendar-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: #087de4;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.mx-agenda-heading h3 {
  margin: 0 0 5px;

  font-family: "Arial Narrow", Impact, sans-serif;

  font-size: 23px;

  letter-spacing: 3px;

  color: #12365e;
}

.mx-agenda-heading span {
  font-family: "Courier New", monospace;

  font-size: 12px;

  letter-spacing: 4px;

  color: #087fe6;
}

.mx-agenda-timeline {
  position: relative;

  margin-left: 12px;

  padding-left: 49px;

  border-left: 1px solid #88b7dc;
}

.mx-agenda-item {
  position: relative;

  display: grid;

  grid-template-columns: 75px 1fr;

  align-items: center;

  min-height: 25px;

  font-size: 12px;

  color: #657d99;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.mx-agenda-item::before {
  content: "";

  position: absolute;

  left: -55px;

  top: 50%;

  width: 7px;
  height: 7px;

  transform: translateY(-50%);

  border: 2px solid #087de4;

  border-radius: 50%;

  background: #ffffff;
}

.mx-agenda-item.active::before {
  width: 10px;
  height: 10px;

  border-width: 3px;

  box-shadow: 0 0 0 4px rgba(8, 125, 228, 0.1);
}

.mx-agenda-item:hover {
  transform: translateX(4px);

  color: #1a426b;
}

.mx-agenda-item time {
  font-family: "Courier New", monospace;

  font-size: 11px;

  font-weight: 700;

  color: #0874d9;
}

.mx-agenda-item p {
  margin: 0;

  line-height: 1.35;
}

.mx-agenda-item b {
  color: #163c65;
}

.mx-agenda-item.featured p {
  color: #1a426b;
}

.mx-agenda-aside {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  padding-left: 25px;

  border-left: 1px solid #d2e1ed;
}

.mx-agenda-aside span {
  font-family: "Courier New", monospace;

  font-size: 10px;

  letter-spacing: 4px;

  line-height: 1.9;

  color: #657f9e;
}

.mx-agenda-aside i {
  display: block;

  width: 43px;
  height: 2px;

  margin-top: 15px;

  background: #d4a42f;
}

.mx-city-area {
  position: relative;

  height: 452px;

  margin: 0 -48px;

  overflow: hidden;
}

/* skyline */

.mx-city-image {
  position: absolute;

  z-index: 1;

  left: 50%;

  bottom: -4px;

  width: 100%;

  height: auto;

  transform: translateX(-50%);

  object-fit: contain;

  object-position: bottom center;

  opacity: 0.92;

  pointer-events: none;

  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* bottom fade */

.mx-city-area::after {
  content: "";

  position: absolute;

  z-index: 2;

  left: 0;
  right: 0;
  bottom: 0;

  height: 125px;

  pointer-events: none;

  background: linear-gradient(to bottom, transparent, rgba(238, 247, 252, 0.8));
}

.mx-city-location {
  position: absolute;

  z-index: 6;

  left: 4%;

  bottom: 50px;

  display: flex;

  align-items: center;

  gap: 10px;
}

.mx-location-pin {
  width: 25px;
  height: 31px;
}

.mx-location-pin svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: #173d67;

  stroke-width: 2;
}

.mx-city-location span {
  display: block;

  font-family: "Courier New", monospace;

  font-size: 11px;

  letter-spacing: 3px;

  color: #173d67;
}

.mx-city-location i {
  display: block;

  width: 72px;

  height: 2px;

  margin-top: 8px;

  background: linear-gradient(90deg, #d3a53a, transparent);
}

.mx-city-keywords {
  position: absolute;

  z-index: 6;

  left: 4%;

  bottom: 13px;

  font-family: "Courier New", monospace;

  font-size: 9px;

  letter-spacing: 4px;

  color: #617a98;
}

.mx-city-bottom-text {
  position: absolute;

  z-index: 6;

  right: 5%;

  bottom: 13px;

  font-family: "Courier New", monospace;

  font-size: 9px;

  letter-spacing: 3px;

  color: #617a98;
}

.mx-full-agenda {
  position: absolute;

  z-index: 7;

  right: 5%;

  bottom: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 45px;

  min-width: 255px;

  padding: 15px 16px 15px 28px;

  border: 1px solid #e3bb4a;

  border-radius: 35px;

  background: linear-gradient(135deg, #f0c43e, #e4b431);

  color: #14365c;

  font-family: "Courier New", monospace;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  cursor: pointer;

  box-shadow: 0 9px 20px rgba(184, 137, 26, 0.16);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.mx-full-agenda b {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border: 1px solid rgba(20, 54, 92, 0.35);

  border-radius: 50%;

  font-size: 22px;

  font-weight: 400;

  line-height: 1;
}

.mx-full-agenda:hover {
  transform: translateY(-3px);

  box-shadow: 0 15px 28px rgba(184, 137, 26, 0.25);
}

@media (max-width: 1100px) {
  .mx-how-section {
    padding-left: 30px;
    padding-right: 30px;
  }

  .mx-process-wrapper {
    grid-template-columns: repeat(3, 1fr);

    row-gap: 35px;
  }

  .mx-process-line {
    display: none;
  }

  .mx-agenda-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 0 2% 10px;
  }

  .mx-agenda-aside {
    display: none;
  }

  .mx-city-area {
    margin-left: -30px;
    margin-right: -30px;
  }

  .mx-city-image {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .mx-how-section {
    padding: 30px 18px 0;
  }

  .mx-brand-line {
    font-size: 9px;
    letter-spacing: 3px;
    gap: 10px;
  }

  .mx-brand-line span {
    width: 35px;
  }

  .mx-how-header h2 {
    font-size: 42px;
    letter-spacing: -1px;
  }

  .mx-header-tagline {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .mx-process-wrapper {
    grid-template-columns: repeat(2, 1fr);

    row-gap: 40px;
  }

  .mx-process-content h3 {
    font-size: 13px;
  }

  .mx-process-content strong {
    font-size: 12px;
  }

  .mx-process-content p {
    font-size: 10px;
  }

  .mx-agenda-title {
    margin-left: 0;
    margin-right: 0;
    gap: 10px;
  }

  .mx-agenda-title strong {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .mx-agenda-grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .mx-agenda-heading h3 {
    font-size: 20px;
  }

  .mx-agenda-item {
    grid-template-columns: 65px 1fr;

    font-size: 10px;
  }

  .mx-city-area {
    height: 220px;
    margin-left: -18px;
    margin-right: -18px;
  }

  .mx-city-image {
    width: 130%;
    max-width: none;
  }

  .mx-city-location {
    left: 20px;
    bottom: 38px;
  }

  .mx-city-keywords {
    left: 20px;
    bottom: 12px;
    font-size: 6px;
    letter-spacing: 2px;
  }

  .mx-city-bottom-text {
    display: none;
  }

  .mx-full-agenda {
    right: 20px;
    bottom: 82px;

    min-width: 210px;

    gap: 20px;

    padding: 12px 12px 12px 18px;

    font-size: 8px;
  }
}

@media (max-width: 480px) {
  .mx-process-wrapper {
    grid-template-columns: 1fr;
  }

  .mx-process-step {
    display: grid;

    grid-template-columns: 55px 80px 1fr;

    align-items: center;

    text-align: left;

    gap: 10px;
  }

  .mx-process-number {
    /* height: auto; */
    margin: 0;
  }

  .mx-icon-circle {
    width: 62px;
    height: 62px;

    margin: 0;
  }

  .mx-icon-circle svg {
    width: 30px;
    height: 30px;
  }

  .mx-process-content h3 {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .mx-process-content h3::after {
    left: 0;
    transform: none;
  }

  .mx-process-content strong {
    min-height: auto;
  }

  .mx-process-content p {
    min-height: auto;
    margin-top: 4px;
  }

  .mx-city-area {
    height: 190px;
  }

  .mx-full-agenda {
    min-width: 185px;
  }
}

.mx-attends-section {
  --mx-blue: #075fce;
  --mx-blue-dark: #062b5b;
  --mx-blue-light: #eaf4ff;
  --mx-gold: #c89b42;
  --mx-text: #092b52;
  --mx-muted: #64758a;
  --mx-line: rgba(7, 95, 206, 0.18);

  position: relative;
  width: 100%;
  overflow: hidden;

  color: var(--mx-text);
  isolation: isolate;
}

.mx-attends-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 100px 55px 75px;
}

.mx-attends-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(7, 95, 206, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 95, 206, 0.035) 1px, transparent 1px);

  background-size: 70px 70px;

  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 15%,
    black 80%,
    transparent
  );
}

.mx-attends-orbit {
  position: absolute;
  border: 1px solid rgba(7, 95, 206, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.mx-attends-orbit-1 {
  width: 900px;
  height: 900px;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
}

.mx-attends-orbit-2 {
  width: 1250px;
  height: 1250px;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  border-color: rgba(200, 155, 66, 0.045);
}

.mx-attends-header {
  position: relative;
  text-align: center;
  margin-bottom: 65px;
}

.mx-attends-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  color: var(--mx-blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.mx-attends-kicker span {
  width: 32px;
  height: 1px;
  background: var(--mx-gold);
}

.mx-attends-header h2 {
  margin: 0;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: clamp(46px, 5vw, 70px);
  line-height: 0.9;
  letter-spacing: -2px;
  font-weight: 700;
  color: #102f55;
}

.mx-attends-header h2 span {
  display: inline-block;

  background: linear-gradient(100deg, #075fce, #2587ed);

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mx-attends-subtitle {
  margin: 25px 0 0;

  color: #5e7188;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.mx-attends-top-tags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 27px;

  color: #8090a4;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.mx-attends-top-tags i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mx-gold);
}

.mx-attends-network {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(330px, 1fr)
    400px
    minmax(330px, 1fr);

  align-items: center;
  gap: 55px;

  min-height: 730px;
}

.mx-attends-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 650px;
}

.mx-attends-item {
  position: relative;

  display: flex;
  align-items: center;
  gap: 17px;

  min-height: 100px;

  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-attends-left .mx-attends-item {
  transform: translateX(-45px);
}

.mx-attends-right .mx-attends-item {
  transform: translateX(45px);
}

.mx-attends-section.mx-attends-visible .mx-attends-item {
  opacity: 1;
  transform: translateX(0);
}

.mx-attends-section.mx-attends-visible .mx-attends-item:nth-child(1) {
  transition-delay: 0.1s;
}

.mx-attends-section.mx-attends-visible .mx-attends-item:nth-child(2) {
  transition-delay: 0.18s;
}

.mx-attends-section.mx-attends-visible .mx-attends-item:nth-child(3) {
  transition-delay: 0.26s;
}

.mx-attends-section.mx-attends-visible .mx-attends-item:nth-child(4) {
  transition-delay: 0.34s;
}

.mx-attends-section.mx-attends-visible .mx-attends-item:nth-child(5) {
  transition-delay: 0.42s;
}

.mx-attends-icon {
  position: relative;
  flex: 0 0 55px;

  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(7, 95, 206, 0.22);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.8);

  box-shadow:
    0 8px 30px rgba(7, 74, 140, 0.08),
    inset 0 0 0 4px rgba(7, 95, 206, 0.025);

  transition:
    transform 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.mx-attends-icon::before {
  content: "";

  position: absolute;
  inset: -5px;

  border: 1px solid rgba(200, 155, 66, 0.25);
  border-radius: 50%;

  opacity: 0;
  transform: scale(0.7);

  transition: 0.35s ease;
}

.mx-attends-icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: var(--mx-blue);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mx-attends-item:hover .mx-attends-icon {
  transform: scale(1.08);
  background: #fff;

  border-color: var(--mx-blue);

  box-shadow:
    0 12px 40px rgba(7, 95, 206, 0.15),
    0 0 25px rgba(7, 95, 206, 0.08);
}

.mx-attends-item:hover .mx-attends-icon::before {
  opacity: 1;
  transform: scale(1);
}

.mx-attends-info {
  position: relative;
  flex: 1;
}

.mx-attends-number {
  display: block;

  margin-bottom: 4px;

  color: var(--mx-gold);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.mx-attends-info h3 {
  margin: 0;

  color: #092f59;

  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mx-attends-info p {
  max-width: 245px;

  margin: 7px 0 0;

  color: #74859a;

  font-size: 10px;
  line-height: 1.55;
}

.mx-attends-connector {
  position: relative;

  width: 80px;
  height: 1px;

  flex-shrink: 0;
}

.mx-attends-connector span {
  position: absolute;
  top: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(7, 95, 206, 0.04),
    rgba(7, 95, 206, 0.3),
    rgba(200, 155, 66, 0.6)
  );
}

.mx-attends-left .mx-attends-connector span {
  right: 0;
}

.mx-attends-right .mx-attends-connector span {
  left: 0;

  background: linear-gradient(
    90deg,
    rgba(200, 155, 66, 0.6),
    rgba(7, 95, 206, 0.3),
    rgba(7, 95, 206, 0.04)
  );
}

.mx-attends-connector span::after {
  content: "";

  position: absolute;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;
  background: var(--mx-gold);

  transform: translateY(-50%);

  box-shadow: 0 0 12px rgba(200, 155, 66, 0.45);
}

.mx-attends-left .mx-attends-connector span::after {
  right: 0;
}

.mx-attends-right .mx-attends-connector span::after {
  left: 0;
}

.mx-attends-core {
  position: relative;

  width: 380px;
  height: 380px;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mx-attends-core-inner {
  position: relative;
  z-index: 5;

  width: 285px;
  height: 285px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: radial-gradient(
    circle at 40% 35%,
    #ffffff,
    #f2f8ff 55%,
    #e3f0ff 100%
  );

  border: 1px solid rgba(7, 95, 206, 0.24);

  box-shadow:
    0 25px 80px rgba(7, 95, 206, 0.13),
    inset 0 0 60px rgba(255, 255, 255, 0.8);
}

/* glowing center */

.mx-attends-core-glow {
  position: absolute;

  width: 230px;
  height: 230px;

  border-radius: 50%;

  background: rgba(37, 135, 237, 0.13);

  filter: blur(45px);
}

/* rings */

.mx-attends-core-ring {
  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(7, 95, 206, 0.12);
}

.ring-one {
  width: 325px;
  height: 325px;
}

.ring-two {
  width: 370px;
  height: 370px;

  border-color: rgba(7, 95, 206, 0.08);
}

.ring-three {
  width: 420px;
  height: 420px;

  border-color: rgba(200, 155, 66, 0.06);
}

/* core text */

.mx-attends-core-label {
  color: #66809d;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.23em;
  text-transform: uppercase;

  margin-bottom: 10px;
}

.mx-attends-core-count {
  color: var(--mx-blue);

  font-size: 43px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.mx-attends-core-delegates {
  margin-top: 7px;

  color: #183e68;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.mx-attends-core-divider {
  width: 35px;
  height: 1px;

  margin: 17px 0 13px;

  background: var(--mx-gold);
}

.mx-attends-core-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  max-width: 190px;

  gap: 6px 10px;
}

.mx-attends-core-values span {
  color: #71849b;

  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.mx-attends-pulse {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--mx-gold);

  box-shadow:
    0 0 0 4px rgba(200, 155, 66, 0.1),
    0 0 20px rgba(200, 155, 66, 0.4);

  z-index: 8;
}

.pulse-one {
  top: 25px;
  right: 65px;

  animation: mxAttendsFloat 3s ease-in-out infinite;
}

.pulse-two {
  bottom: 45px;
  left: 43px;

  animation: mxAttendsFloat 3s ease-in-out infinite reverse;
}

@keyframes mxAttendsFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.mx-attends-bottom {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto 1.15fr;

  align-items: end;

  gap: 50px;

  margin-top: 55px;
  padding-top: 32px;

  border-top: 1px solid rgba(7, 95, 206, 0.12);
}

/* statement */

.mx-attends-statement {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.mx-attends-quote-mark {
  color: var(--mx-gold);

  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 0.7;
}

.mx-attends-statement p {
  max-width: 300px;

  margin: 0;

  color: #193f67;

  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.mx-attends-statement span {
  display: block;

  margin-top: 13px;

  color: var(--mx-blue);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* bottom tags */

.mx-attends-bottom-tags {
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding-bottom: 4px;
}

.mx-attends-bottom-tags span {
  position: relative;

  color: #7a8da2;

  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.2em;

  padding-left: 12px;
}

.mx-attends-bottom-tags span::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 4px;
  height: 4px;

  background: var(--mx-gold);
  border-radius: 50%;

  transform: translateY(-50%);
}

.mx-attends-access {
  position: relative;

  padding: 22px 25px;

  border-left: 2px solid var(--mx-blue);

  background: linear-gradient(
    90deg,
    rgba(7, 95, 206, 0.055),
    rgba(7, 95, 206, 0.015)
  );
}

.mx-attends-access-label {
  margin-bottom: 10px;

  color: var(--mx-gold);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.25em;
}

.mx-attends-access-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.mx-attends-access strong {
  display: block;

  color: #092f59;

  font-size: 15px;
  font-weight: 700;
}

.mx-attends-access p {
  margin: 5px 0 0;

  color: #73869c;

  font-size: 9px;
  line-height: 1.45;
}

/* button */

.mx-attends-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  flex-shrink: 0;

  min-height: 43px;

  padding: 0 20px;

  text-decoration: none;

  color: #fff;

  background: var(--mx-blue);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.mx-attends-btn::before {
  content: "";

  position: absolute;

  left: -100%;
  top: 0;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );

  transition: left 0.5s ease;
}

.mx-attends-btn:hover {
  transform: translateY(-2px);

  background: #064fae;

  box-shadow: 0 12px 30px rgba(7, 95, 206, 0.2);
}

.mx-attends-btn:hover::before {
  left: 100%;
}

.mx-attends-btn svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.3s ease;
}

.mx-attends-btn:hover svg {
  transform: translateX(4px);
}

.mx-attends-header,
.mx-attends-core,
.mx-attends-bottom {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-attends-section.mx-attends-visible .mx-attends-header,
.mx-attends-section.mx-attends-visible .mx-attends-core,
.mx-attends-section.mx-attends-visible .mx-attends-bottom {
  opacity: 1;
  transform: translateY(0);
}

.mx-attends-section.mx-attends-visible .mx-attends-core {
  transition-delay: 0.15s;
}

.mx-attends-section.mx-attends-visible .mx-attends-bottom {
  transition-delay: 0.3s;
}

@media (max-width: 1100px) {
  .mx-attends-inner {
    padding: 80px 30px 60px;
  }

  .mx-attends-network {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .mx-attends-core {
    order: -1;
  }

  .mx-attends-column {
    height: auto;
    gap: 22px;
  }

  .mx-attends-item {
    min-height: 80px;
  }

  .mx-attends-connector {
    display: none;
  }

  .mx-attends-bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mx-attends-bottom-tags {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 650px) {
  .mx-attends-inner {
    padding: 65px 20px 45px;
  }

  .mx-attends-header {
    margin-bottom: 45px;
  }

  .mx-attends-header h2 {
    font-size: 58px;
  }

  .mx-attends-subtitle {
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.14em;
  }

  .mx-attends-top-tags {
    flex-wrap: wrap;
    gap: 9px;
    font-size: 7px;
  }

  .mx-attends-network {
    min-height: auto;
  }

  .mx-attends-core {
    width: 310px;
    height: 310px;
  }

  .mx-attends-core-inner {
    width: 235px;
    height: 235px;
  }

  .ring-one {
    width: 270px;
    height: 270px;
  }

  .ring-two {
    width: 305px;
    height: 305px;
  }

  .ring-three {
    width: 340px;
    height: 340px;
  }

  .mx-attends-core-count {
    font-size: 34px;
  }

  .mx-attends-item {
    gap: 12px;
  }

  .mx-attends-icon {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
  }

  .mx-attends-info h3 {
    font-size: 13px;
  }

  .mx-attends-info p {
    font-size: 9px;
  }

  .mx-attends-bottom {
    margin-top: 45px;
  }

  .mx-attends-access {
    padding: 20px;
  }

  .mx-attends-access-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .mx-attends-btn {
    width: 100%;
  }
}

.mx-deliverables {
  position: relative;
  width: 100%;
  overflow: hidden;

  padding: 82px 0 55px;

  color: var(--deep-navy);

  isolation: isolate;
}

.mx-deliverables-inner {
  position: relative;
  z-index: 2;

  width: min(1400px, 92%);

  margin: 0 auto;
}

.mx-deliverables-grid {
  position: absolute;
  inset: 0;

  opacity: 0.35;

  pointer-events: none;

  background-image: radial-gradient(
    rgba(28, 75, 157, 0.2) 1px,
    transparent 1px
  );

  background-size: 14px 14px;

  mask-image: linear-gradient(
    to right,
    transparent,
    black 18%,
    black 82%,
    transparent
  );

  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 18%,
    black 82%,
    transparent
  );
}

.mx-deliverables-orbit {
  position: absolute;

  width: 430px;
  height: 430px;

  border: 1px solid rgba(25, 126, 218, 0.11);

  border-radius: 50%;

  pointer-events: none;
}

.mx-deliverables-orbit-left {
  left: -340px;
  bottom: -230px;
}

.mx-deliverables-orbit-right {
  right: -340px;
  top: 210px;
}

.mx-deliverables-header {
  position: relative;

  text-align: center;

  margin-bottom: 70px;
}

/* eyebrow */

.mx-deliverables-eyebrow {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 20px;

  margin-bottom: 15px;

  font-family: "Space Mono", monospace;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 6px;

  color: #496581;

  text-transform: uppercase;
}

.mx-deliverables-eyebrow span {
  width: 65px;
  height: 1px;

  background: linear-gradient(90deg, transparent, #d4aa3e);
}

.mx-deliverables-eyebrow span:last-child {
  background: linear-gradient(90deg, #d4aa3e, transparent);
}

/* main heading */

.mx-deliverables-title {
  margin: 0;

  font-family: "Rajdhani", "Inter", Arial, sans-serif;

  font-size: clamp(55px, 6.2vw, 88px);

  line-height: 0.86;

  font-weight: 700;

  letter-spacing: -3px;

  text-transform: uppercase;

  color: #102f56;
}

.mx-deliverables-title strong {
  display: inline-block;

  font-weight: 700;

  background: linear-gradient(100deg, #0b4ea2 0%, #168cf0 60%, #1382df 100%);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

/* subtitle */

.mx-deliverables-subtitle {
  margin: 19px 0 0;

  font-family: "Space Mono", monospace;

  font-size: 13px;

  font-weight: 400;

  letter-spacing: 5px;

  color: #617895;

  text-transform: uppercase;
}

/* gold blue line */

.mx-deliverables-header-line {
  width: 105px;
  height: 2px;

  margin: 22px auto 0;

  background: linear-gradient(90deg, #d4aa3e, #1688e9);
}

.mx-deliverables-keywords {
  position: absolute;

  top: 43px;

  display: flex;

  flex-direction: column;

  gap: 9px;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  line-height: 1.25;

  letter-spacing: 2px;

  color: #8aa0b8;

  text-transform: uppercase;
}

.mx-deliverables-keywords-left {
  left: 0;
}

.mx-deliverables-keywords-right {
  right: 0;

  text-align: right;
}

.mx-deliverables-keywords i {
  width: 38px;
  height: 2px;

  margin-top: 7px;

  background: #d4aa3e;
}

.mx-deliverables-keywords-right i {
  align-self: flex-end;
}

.mx-deliverables-timeline {
  position: relative;

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 23px;

  padding-top: 65px;
}

/* wave */

.mx-deliverables-wave {
  position: absolute;

  z-index: 5;

  top: 0;
  left: 0;

  width: 100%;
  height: 120px;

  overflow: visible;

  pointer-events: none;
}

.mx-deliverables-wave-path {
  stroke-dasharray: 1800;

  stroke-dashoffset: 1800;

  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-deliverables.mx-deliverables-visible .mx-deliverables-wave-path {
  stroke-dashoffset: 0;
}

.mx-deliverable-card {
  position: relative;

  min-width: 0;

  opacity: 0;

  transform: translateY(70px) scale(0.97);

  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-deliverables-visible .mx-deliverable-card {
  opacity: 1;

  transform: translateY(0) scale(1);
}

/* stagger */

.mx-deliverables-visible .mx-deliverable-card:nth-child(1) {
  transition-delay: 0.12s;
}

.mx-deliverables-visible .mx-deliverable-card:nth-child(2) {
  transition-delay: 0.22s;
}

.mx-deliverables-visible .mx-deliverable-card:nth-child(3) {
  transition-delay: 0.32s;
}

.mx-deliverables-visible .mx-deliverable-card:nth-child(4) {
  transition-delay: 0.42s;
}

.mx-deliverables-visible .mx-deliverable-card:nth-child(5) {
  transition-delay: 0.52s;
}

.mx-deliverable-node {
  position: absolute;

  z-index: 10;

  top: -45px;

  left: 50%;

  width: 78px;
  height: 78px;

  transform: translateX(-50%);

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: radial-gradient(circle at 35% 30%, #ffffff, #eef7ff 70%, #dceeff);

  border: 1px solid rgba(26, 132, 224, 0.3);

  box-shadow:
    0 10px 30px rgba(20, 104, 175, 0.1),
    inset 0 0 0 7px rgba(255, 255, 255, 0.65);
}

.mx-deliverable-node::before {
  content: "";

  position: absolute;

  inset: -8px;

  border-radius: 50%;

  border: 1px dashed rgba(36, 139, 231, 0.2);
}

.mx-deliverable-node::after {
  content: "";

  position: absolute;

  inset: -15px;

  border-radius: 50%;

  border: 1px dotted rgba(36, 139, 231, 0.12);
}

.mx-deliverable-node span {
  position: relative;
  z-index: 2;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 31px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: -1px;

  color: #147ddd;
}

/* gold dot */

.mx-deliverable-node i {
  position: absolute;

  z-index: 5;

  top: -7px;
  right: 14px;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #d4aa3e;

  box-shadow:
    0 0 0 4px rgba(212, 170, 62, 0.09),
    0 0 15px rgba(212, 170, 62, 0.35);
}

.mx-deliverable-card-inner {
  position: relative;

  min-height: 520px;

  padding: 48px 20px 20px;

  text-align: center;

  border: 1px solid rgba(164, 201, 231, 0.52);

  border-radius: 25px 25px 18px 18px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 252, 255, 0.92)
  );

  box-shadow: 0 15px 40px rgba(29, 95, 146, 0.06);

  overflow: hidden;

  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}

/* subtle top glow */

.mx-deliverable-card-inner::before {
  content: "";

  position: absolute;

  top: -80px;
  left: 50%;

  width: 180px;
  height: 150px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(39, 144, 231, 0.11),
    transparent 70%
  );

  pointer-events: none;
}

/* hover */

.mx-deliverable-card:hover .mx-deliverable-card-inner {
  transform: translateY(-8px);

  border-color: rgba(67, 153, 220, 0.55);

  box-shadow: 0 25px 55px rgba(26, 101, 163, 0.12);
}

.mx-deliverable-icon {
  position: relative;

  width: 76px;
  height: 76px;

  margin: 0 auto 27px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(145deg, #f9fcff, #e6f3fd);

  border: 1px solid rgba(46, 142, 224, 0.28);

  box-shadow: inset 0 0 20px rgba(48, 147, 224, 0.04);
}

.mx-deliverable-icon::after {
  content: "";

  position: absolute;

  inset: -7px;

  border: 1px solid rgba(38, 136, 219, 0.09);

  border-radius: 50%;
}

.mx-deliverable-icon svg {
  width: 39px;
  height: 39px;

  fill: none;

  stroke: #0878d8;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.35s ease;
}

.mx-deliverable-card:hover .mx-deliverable-icon svg {
  transform: scale(1.08);
}

.mx-deliverable-card h3 {
  position: relative;

  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 21px;

  line-height: 1.05;

  font-weight: 700;

  letter-spacing: 0.3px;

  color: #102f56;

  text-transform: uppercase;
}

.mx-deliverable-card h4 {
  margin: 14px 0 0;

  font-family: "Space Mono", monospace;

  font-size: 11px;

  line-height: 1.6;

  font-weight: 400;

  font-style: italic;

  letter-spacing: 0.8px;

  color: #d4a43b;
}

/* divider */

.mx-deliverable-line {
  width: 43px;
  height: 2px;

  margin: 17px auto 22px;

  background: linear-gradient(90deg, #d4aa3e, #1687e7);
}

.mx-deliverable-card p {
  margin: 0 auto;

  max-width: 220px;

  font-family: "Inter", Arial, sans-serif;

  font-size: 12px;

  line-height: 1.65;

  font-weight: 400;

  color: #627995;
}

.mx-deliverable-footer {
  position: absolute;

  left: 20px;
  right: 20px;

  bottom: 20px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  border: 1px solid rgba(65, 153, 226, 0.25);

  border-radius: 30px;

  background: rgba(255, 255, 255, 0.62);

  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.mx-deliverable-footer span {
  font-family: "Space Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  color: #123e69;
}

.mx-deliverable-footer b {
  font-family: "Inter", sans-serif;

  font-size: 20px;

  font-weight: 300;

  line-height: 1;

  color: #d4a43b;

  transition: transform 0.3s ease;
}

.mx-deliverable-card:hover .mx-deliverable-footer {
  border-color: #8dc4ec;

  background: #ffffff;
}

.mx-deliverable-card:hover .mx-deliverable-footer b {
  transform: translateX(5px);
}

.mx-deliverables-bottom {
  display: grid;

  grid-template-columns:
    190px
    1fr;

  align-items: center;

  gap: 35px;

  margin-top: 45px;
}

/* location */

.mx-deliverables-location {
  display: flex;

  align-items: center;

  gap: 11px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  color: #59728f;
}

.mx-location-icon {
  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #d4a43b;
}

.mx-location-icon svg {
  width: 23px;
  height: 23px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.5;
}

/* footer line */

.mx-deliverables-footer-line {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 25px;
}

.mx-deliverables-footer-line span {
  width: 105px;
  height: 1px;

  background: linear-gradient(90deg, transparent, #7daed6);
}

.mx-deliverables-footer-line span:last-child {
  background: linear-gradient(90deg, #7daed6, transparent);
}

.mx-deliverables-footer-line p {
  margin: 0;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 400;

  letter-spacing: 3.5px;

  color: #66819f;

  white-space: nowrap;

  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .mx-deliverables-keywords {
    display: none;
  }

  .mx-deliverables-timeline {
    gap: 14px;
  }

  .mx-deliverable-card-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mx-deliverable-card h3 {
    font-size: 19px;
  }

  .mx-deliverable-card p {
    font-size: 11px;
  }

  .mx-deliverable-footer span {
    font-size: 8px;
  }
}

@media (max-width: 900px) {
  .mx-deliverables {
    padding: 70px 0 50px;
  }

  .mx-deliverables-title {
    font-size: 62px;
  }

  .mx-deliverables-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 45px 18px;

    padding-top: 70px;
  }

  .mx-deliverables-wave {
    display: none;
  }

  .mx-deliverable-card-inner {
    min-height: 500px;
  }

  .mx-deliverables-bottom {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .mx-deliverables-location {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .mx-deliverables {
    padding: 55px 0 40px;
  }

  .mx-deliverables-inner {
    width: 90%;
  }

  .mx-deliverables-header {
    margin-bottom: 55px;
  }

  .mx-deliverables-eyebrow {
    font-size: 8px;

    letter-spacing: 3px;

    gap: 10px;
  }

  .mx-deliverables-eyebrow span {
    width: 25px;
  }

  .mx-deliverables-title {
    font-size: 49px;

    letter-spacing: -2px;
  }

  .mx-deliverables-subtitle {
    font-size: 8px;

    letter-spacing: 2px;

    line-height: 1.5;
  }

  .mx-deliverables-timeline {
    grid-template-columns: 1fr;

    gap: 48px;

    padding-top: 60px;
  }

  .mx-deliverable-card-inner {
    min-height: 465px;

    padding: 48px 25px 25px;
  }

  .mx-deliverable-card h3 {
    font-size: 22px;
  }

  .mx-deliverable-card p {
    max-width: 270px;

    font-size: 12px;
  }

  .mx-deliverables-footer-line {
    gap: 12px;
  }

  .mx-deliverables-footer-line span {
    width: 35px;
  }

  .mx-deliverables-footer-line p {
    font-size: 7px;

    letter-spacing: 1.5px;

    text-align: center;

    white-space: normal;
  }
}

.mx-insights-section {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 38px 0 28px;

  color: var(--deep-navy);

  isolation: isolate;
}

.mx-insights-container {
  position: relative;

  width: min(1360px, calc(100% - 80px));

  margin: 0 auto;
}

.mx-insights-dots {
  position: absolute;

  width: 160px;
  height: 230px;

  opacity: 0.38;

  pointer-events: none;

  background-image: radial-gradient(circle, #9dc8ec 1.2px, transparent 1.2px);

  background-size: 14px 14px;
}

.mx-insights-dots-left {
  top: 0;
  left: 0;
}

.mx-insights-dots-right {
  right: 0;
  bottom: 80px;
}

.mx-insights-orbit {
  position: absolute;

  width: 620px;
  height: 620px;

  border-radius: 50%;

  pointer-events: none;

  opacity: 0.48;
}

.mx-insights-orbit span {
  position: absolute;

  inset: 0;

  border: 1px solid rgba(45, 139, 222, 0.16);

  border-radius: 50%;
}

.mx-insights-orbit span:nth-child(2) {
  inset: 35px;
}

.mx-insights-orbit span:nth-child(3) {
  inset: 75px;

  border-color: rgba(207, 166, 49, 0.2);
}

.mx-insights-orbit-left {
  left: -565px;
  bottom: -410px;
}

.mx-insights-orbit-right {
  right: -565px;
  top: -330px;
}

.mx-insights-header {
  position: relative;

  z-index: 3;

  padding-top: 2px;

  margin-bottom: 30px;
}

.mx-insights-eyebrow {
  display: inline-flex;

  align-items: center;

  height: 42px;

  padding: 0 17px 0 5px;

  gap: 12px;

  border: 1px solid rgba(91, 164, 226, 0.32);

  border-radius: 25px;

  background: rgba(255, 255, 255, 0.82);

  box-shadow: 0 8px 25px rgba(47, 119, 175, 0.055);
}

.mx-insights-eyebrow-icon {
  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid #80b9e8;

  border-radius: 50%;
}

.mx-insights-eyebrow-icon svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: #087fe5;

  stroke-width: 2;

  stroke-linecap: round;
}

.mx-insights-eyebrow > span {
  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2.2px;

  color: #075fb8;

  white-space: nowrap;
}

.mx-insights-heading-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    180px;

  align-items: start;

  gap: 50px;

  margin-top: 18px;
}

.mx-insights-heading {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: clamp(52px, 5.2vw, 78px);

  line-height: 0.89;

  font-weight: 700;

  letter-spacing: -2px;

  text-transform: uppercase;

  color: #102f56;
}

.mx-insights-heading span,
.mx-insights-heading strong {
  display: block;
}

.mx-insights-heading strong {
  font-weight: 700;

  color: #087be1;

  background: linear-gradient(90deg, #0a5eb9, #168bf0);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}

.mx-insights-title-line {
  width: 91px;
  height: 3px;

  margin-top: 18px;

  background: linear-gradient(90deg, #087be1 0 72%, #d3a72f 72% 100%);
}

.mx-insights-intro {
  max-width: 770px;

  margin: 22px 0 0;

  font-family: "Inter", Arial, sans-serif;

  font-size: 13px;

  line-height: 1.7;

  color: #607895;
}

.mx-insights-keywords {
  display: flex;

  flex-direction: column;

  gap: 8px;

  padding-top: 3px;
}

.mx-insights-keywords span {
  font-family: "Space Mono", monospace;

  font-size: 10px;

  letter-spacing: 2.5px;

  color: #7288a3;

  text-transform: uppercase;
}

.mx-insights-keywords i {
  width: 46px;
  height: 2px;

  margin-top: 7px;

  background: linear-gradient(90deg, #d3a72f, #d3a72f);
}

.mx-insights-grid {
  position: relative;

  z-index: 4;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin-top: 24px;
}

.mx-insight-card {
  position: relative;

  min-height: 416px;

  padding: 27px 38px 28px;

  border: 1px solid rgba(95, 164, 220, 0.35);

  border-radius: 17px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(249, 252, 255, 0.88)
  );

  box-shadow: 0 15px 35px rgba(35, 104, 155, 0.045);

  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.mx-insights-section.is-visible .mx-insight-card {
  opacity: 1;

  transform: translateY(0);
}

.mx-insights-section.is-visible .mx-insight-card:nth-child(1) {
  transition-delay: 0.08s;
}

.mx-insights-section.is-visible .mx-insight-card:nth-child(2) {
  transition-delay: 0.18s;
}

.mx-insights-section.is-visible .mx-insight-card:nth-child(3) {
  transition-delay: 0.28s;
}

.mx-insight-card:hover {
  border-color: rgba(58, 145, 220, 0.58);

  box-shadow: 0 20px 45px rgba(38, 108, 160, 0.09);

  transform: translateY(-5px);
}

.mx-insight-card-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  min-height: 82px;
}

/* number */

.mx-insight-number {
  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 55px;

  line-height: 0.9;

  font-weight: 700;

  letter-spacing: -2px;

  color: #c8e1f7;
}

.mx-insight-icon {
  width: 82px;
  height: 82px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(66, 157, 228, 0.45);

  border-radius: 50%;

  background: radial-gradient(circle, #ffffff, #f1f8fe);

  box-shadow: 0 0 0 7px rgba(232, 244, 253, 0.58);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.mx-insight-icon svg {
  width: 39px;
  height: 39px;

  fill: none;

  stroke: #087fe5;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.mx-insight-card:hover .mx-insight-icon {
  transform: scale(1.06);

  box-shadow:
    0 0 0 8px rgba(222, 240, 253, 0.7),
    0 10px 25px rgba(31, 126, 211, 0.08);
}

.mx-insight-mini-line {
  width: 40px;
  height: 2px;

  margin: 8px 0 20px;

  background: #d3a72f;
}

.mx-insight-card h3 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;

  font-size: 20px;

  line-height: 1.08;

  font-weight: 700;

  letter-spacing: -0.15px;

  color: #102f56;
}

.mx-insight-body {
  margin-top: 18px;
}

.mx-insight-body p {
  margin: 0;

  font-family: "Inter", Arial, sans-serif;

  font-size: 11.5px;

  line-height: 1.7;

  color: #637995;
}

.mx-insight-body p + p {
  margin-top: 15px;
}

.mx-insight-arrow {
  position: absolute;

  right: 19px;
  bottom: 18px;

  width: 49px;
  height: 49px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(72, 159, 227, 0.4);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.72);

  cursor: pointer;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.mx-insight-arrow svg {
  width: 21px;
  height: 21px;

  fill: none;

  stroke: #d39f1f;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.mx-insight-card:hover .mx-insight-arrow {
  transform: translateX(4px);

  background: #ffffff;

  border-color: #1686e7;
}

.mx-insights-cta {
  position: relative;

  z-index: 4;

  margin-top: 24px;

  min-height: 150px;

  border: 1px solid rgba(88, 161, 217, 0.3);

  border-radius: 16px;

  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.96),
    rgba(247, 251, 255, 0.92)
  );

  box-shadow: 0 15px 35px rgba(42, 109, 155, 0.045);

  overflow: hidden;
}

/* left blue border */

.mx-insights-cta-border {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background: linear-gradient(180deg, #087fe5, #075bb7);
}

.mx-insights-cta-content {
  min-height: 150px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    auto
    165px;

  align-items: center;

  gap: 35px;

  padding: 22px 25px 22px 40px;
}

/* label */

.mx-insights-cta-label {
  display: block;

  margin-bottom: 11px;

  font-family: "Space Mono", monospace;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 3px;

  color: #0878d8;
}

/* CTA heading */

.mx-insights-cta-copy h3 {
  max-width: 650px;

  margin: 0;

  font-family: "Inter", Arial, sans-serif;

  font-size: 19px;

  line-height: 1.35;

  font-weight: 700;

  color: #102f56;
}

/* CTA text */

.mx-insights-cta-copy p {
  max-width: 650px;

  margin: 3px 0 0;

  font-family: "Inter", Arial, sans-serif;

  font-size: 12px;

  line-height: 1.55;

  color: #647a95;
}

.mx-insights-cta-actions {
  display: flex;

  align-items: center;

  gap: 14px;
}

.mx-insights-btn {
  height: 49px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 15px;

  padding: 0 20px;

  border-radius: 28px;

  text-decoration: none;

  font-family: "Space Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.6px;

  white-space: nowrap;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.mx-insights-btn svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: transform 0.3s ease;
}

/* outline */

.mx-insights-btn-outline {
  color: #075fb7;

  border: 1px solid #2c92e9;

  background: #ffffff;
}

.mx-insights-btn-outline:hover {
  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(35, 128, 211, 0.1);
}

/* primary */

.mx-insights-btn-primary {
  color: #ffffff;

  border: 1px solid #087be0;

  background: linear-gradient(100deg, #075dbb, #0b8cf0);

  box-shadow: 0 10px 25px rgba(10, 117, 209, 0.18);
}

.mx-insights-btn-primary:hover {
  transform: translateY(-2px);

  box-shadow: 0 14px 30px rgba(10, 117, 209, 0.25);
}

.mx-insights-btn:hover svg {
  transform: translateX(4px);
}

.mx-insights-cta-side {
  align-self: stretch;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 7px;

  padding-left: 45px;

  border-left: 1px solid rgba(84, 143, 190, 0.4);
}

.mx-insights-cta-side span {
  font-family: "Space Mono", monospace;

  font-size: 9px;

  letter-spacing: 2.2px;

  color: #7187a3;
}

.mx-insights-cta-side i {
  width: 45px;
  height: 2px;

  margin-top: 7px;

  background: #d3a72f;
}

.mx-insights-footer {
  position: relative;

  z-index: 4;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 24px 0 0;
}

/* location */

.mx-insights-location {
  display: flex;

  align-items: center;

  gap: 9px;
}

.mx-insights-location svg {
  width: 20px;
  height: 20px;

  fill: none;

  stroke: #0b315b;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.mx-insights-location span {
  font-family: "Space Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2.5px;

  color: #66809e;
}

/* footer message */

.mx-insights-footer-message {
  display: flex;

  align-items: center;

  gap: 15px;
}

.mx-insights-footer-message i {
  display: block;

  width: 84px;
  height: 1px;

  background: #668db4;
}

.mx-insights-footer-message span {
  font-family: "Space Mono", monospace;

  font-size: 9px;

  letter-spacing: 2.7px;

  color: #7188a4;
}

@media (max-width: 1100px) {
  .mx-insights-container {
    width: calc(100% - 50px);
  }

  .mx-insights-heading-row {
    grid-template-columns: 1fr;
  }

  .mx-insights-keywords {
    display: none;
  }

  .mx-insights-grid {
    gap: 15px;
  }

  .mx-insight-card {
    padding-left: 25px;
    padding-right: 25px;
  }

  .mx-insights-cta-content {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .mx-insights-cta-side {
    display: none;
  }
}

@media (max-width: 800px) {
  .mx-insights-section {
    padding-top: 35px;
  }

  .mx-insights-grid {
    grid-template-columns: 1fr;
  }

  .mx-insight-card {
    min-height: 390px;
  }

  .mx-insights-cta-actions {
    flex-wrap: wrap;
  }

  .mx-insights-footer-message {
    display: none;
  }
}

@media (max-width: 550px) {
  .mx-insights-container {
    width: calc(100% - 30px);
  }

  .mx-insights-heading {
    font-size: 48px;

    letter-spacing: -1.5px;
  }

  .mx-insights-intro {
    font-size: 11px;
  }

  .mx-insights-eyebrow {
    height: 38px;

    padding-right: 12px;
  }

  .mx-insights-eyebrow > span {
    font-size: 8px;

    letter-spacing: 1.5px;
  }

  .mx-insights-card {
    padding: 24px 24px 28px;
  }

  .mx-insight-icon {
    width: 70px;
    height: 70px;
  }

  .mx-insight-number {
    font-size: 48px;
  }

  .mx-insight-card h3 {
    font-size: 19px;
  }

  .mx-insights-cta-content {
    padding: 25px;
  }

  .mx-insights-cta-copy h3 {
    font-size: 17px;
  }

  .mx-insights-cta-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .mx-insights-btn {
    width: 100%;
  }
}
/* ==========================================================
   MERIDIAN LEADERS CTA
   ========================================================== */

.mx-leaders {
  --mx-navy: #082f67;
  --mx-blue: #087be8;
  --mx-blue-dark: #0755aa;
  --mx-gold: #d6a72d;
  --mx-text: #5d789c;

  position: relative;
  width: 100%;
  height: min(1024px, 66.6667vw);
  min-height: 720px;

  overflow: hidden;
  isolation: isolate;

  background: radial-gradient(
    ellipse at 50% 48%,
    rgba(36, 143, 236, 0.08) 0%,
    rgba(255, 255, 255, 0.7) 38%,
    rgba(238, 248, 255, 0.8) 70%,
    #edf7fd 100%
  );
}

/* ==========================================================
   GRID
   ========================================================== */

.mx-leaders-grid {
  position: absolute;
  inset: 0;
  z-index: 0;

  opacity: 0.38;

  background-image:
    linear-gradient(rgba(46, 123, 188, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 123, 188, 0.08) 1px, transparent 1px);

  background-size: 48px 48px;

  pointer-events: none;

  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.25)
  );

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.25)
  );
}

/* ==========================================================
   CONTENT
   ========================================================== */

.mx-leaders-content {
  position: relative;
  z-index: 10;

  width: min(800px, 70%);
  height: 100%;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 32px;
}

/* ==========================================================
   BADGE
   ========================================================== */

.mx-leaders-badge {
  min-width: 235px;
  height: 39px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 18px;

  border: 1px solid rgba(40, 139, 224, 0.35);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.82);

  box-shadow: 0 7px 18px rgba(37, 112, 172, 0.07);

  font-family: "Space Mono", monospace;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2.4px;

  color: #0864c1;

  white-space: nowrap;
}

/* ==========================================================
   HEADING
   ========================================================== */

.mx-leaders-title {
  width: 100%;

  margin: 24px 0 0;

  text-align: center;

  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: clamp(48px, 4.4vw, 68px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -1.8px;

  text-transform: uppercase;

  color: var(--mx-navy);
}

.mx-leaders-title span {
  display: block;
}

.mx-leaders-title .mx-blue-line {
  color: var(--mx-blue);

  background: linear-gradient(90deg, #0a5ab5 0%, #0878df 48%, #087be8 100%);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================
   DIVIDER
   ========================================================== */

.mx-leaders-divider {
  width: 90px;

  margin-top: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 17px;
}

.mx-leaders-divider span {
  display: block;

  width: 86px;
  height: 3px;

  background: linear-gradient(90deg, #087be8 0 66%, #d6a72d 66% 100%);
}

.mx-leaders-divider i {
  display: block;

  width: 58px;
  height: 2px;

  background: linear-gradient(90deg, transparent, #d6a72d, transparent);
}

/* ==========================================================
   CONTACT CARD
   ========================================================== */

.mx-contact-card {
  width: 450px;

  margin-top: 23px;

  padding: 22px 28px 25px;

  border: 1px solid rgba(51, 137, 210, 0.34);

  border-radius: 17px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(251, 253, 255, 0.91)
  );

  box-shadow: 0 15px 40px rgba(32, 99, 151, 0.09);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ==========================================================
   CONTACT HEAD
   ========================================================== */

.mx-contact-head {
  display: flex;
  align-items: center;

  gap: 21px;
}

.mx-contact-avatar {
  flex: 0 0 auto;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(145deg, #edf7ff, #dceeff);

  font-family: "Rajdhani", sans-serif;
  font-size: 23px;
  font-weight: 700;

  color: #087be8;
}

.mx-contact-person h3 {
  margin: 0;

  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;

  color: #092e62;
}

.mx-contact-person p {
  margin: 7px 0 0;

  font-family: "Space Mono", monospace;
  font-size: 11px;
  line-height: 1.3;

  color: #087be8;
}

/* ==========================================================
   CONTACT SEPARATOR
   ========================================================== */

.mx-contact-separator {
  width: 100%;
  height: 1px;

  margin: 18px 0 17px;

  background: rgba(63, 138, 202, 0.26);
}

/* ==========================================================
   CONTACT ROWS
   ========================================================== */

.mx-contact-details {
  display: flex;
  flex-direction: column;

  gap: 15px;
}

.mx-contact-row {
  display: grid;

  grid-template-columns:
    32px
    63px
    1fr;

  align-items: center;

  font-family: "Inter", sans-serif;
  font-size: 12px;

  color: #617a9b;
}

.mx-contact-row strong {
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;

  color: #092f65;
}

.mx-contact-icon {
  display: flex;
  align-items: center;
}

.mx-contact-icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: #073c7c;

  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================
   ACTIONS
   ========================================================== */

.mx-leaders-actions {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  margin-top: 29px;
}

.mx-leaders-btn {
  min-width: 208px;
  height: 50px;

  padding: 0 25px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 22px;

  border-radius: 999px;

  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;

  text-decoration: none;
  text-transform: uppercase;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.mx-leaders-btn svg {
  width: 20px;
  height: 20px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.3s ease;
}

.mx-leaders-btn-primary {
  color: #fff;

  border: 1px solid #087be8;

  background: linear-gradient(100deg, #0758b8, #0a8cf2);

  box-shadow: 0 12px 28px rgba(9, 111, 204, 0.2);
}

.mx-leaders-btn-outline {
  color: #0768ca;

  border: 1.5px solid #087be8;

  background: rgba(255, 255, 255, 0.88);
}

.mx-leaders-btn:hover {
  transform: translateY(-3px);
}

.mx-leaders-btn:hover svg {
  transform: translateX(5px);
}

.mx-leaders-btn-primary:hover {
  box-shadow: 0 16px 32px rgba(9, 111, 204, 0.28);
}

/* ==========================================================
   BOTTOM DOTS
   ========================================================== */

.mx-leaders-bottom-dots {
  display: flex;

  gap: 11px;

  margin-top: 53px;
}

.mx-leaders-bottom-dots span {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #087be8;
}

.mx-leaders-confidential {
  margin-top: 26px;

  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 3px;

  color: #597397;

  text-align: center;
}

/* ==========================================================
   SIDE CONTENT
   ========================================================== */

.mx-leaders-side {
  position: absolute;
  z-index: 8;

  top: 77px;
  bottom: 320px;

  width: 190px;

  padding-top: 41px;

  border-left: 1px solid rgba(44, 135, 216, 0.33);

  font-family: "Space Mono", monospace;

  color: #5b73a0;
}

.mx-leaders-side-left {
  left: 63px;

  padding-left: 27px;
}

.mx-leaders-side-right {
  right: 55px;

  padding-left: 27px;
}

.mx-leaders-side span {
  display: block;

  margin-bottom: 11px;

  font-size: 12px;
  line-height: 1;

  letter-spacing: 2.7px;
}

.mx-side-top i,
.mx-side-bottom i {
  display: block;

  width: 45px;
  height: 2px;

  margin-top: 18px;

  background: var(--mx-gold);
}

.mx-side-bottom {
  position: absolute;

  bottom: 10px;
}

.mx-leaders-side-right .mx-side-bottom {
  right: 0;

  text-align: center;
}

.mx-leaders-side-right .mx-side-bottom i {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================
   GLOBE
   ========================================================== */

.mx-leaders-globe {
  position: absolute;

  z-index: 1;

  top: 290px;
  left: 50%;

  width: 850px;
  height: 850px;

  transform: translateX(-50%);

  border-radius: 50%;

  overflow: hidden;

  opacity: 0.78;

  pointer-events: none;

  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 89%);

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 60%,
    transparent 89%
  );
}

.mx-globe-core {
  position: absolute;

  inset: 7%;

  border-radius: 50%;

  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(30, 145, 239, 0.05) 45%,
    rgba(21, 133, 229, 0.09) 70%,
    transparent 71%
  );

  border: 1px solid rgba(65, 159, 231, 0.11);
}

.mx-globe-dots {
  position: absolute;

  inset: 9%;

  border-radius: 50%;

  opacity: 0.5;

  background-image: radial-gradient(
    circle,
    rgba(52, 157, 237, 0.42) 1px,
    transparent 1.7px
  );

  background-size: 7px 7px;

  transform: perspective(600px) rotateX(4deg);

  mask-image: radial-gradient(circle, black 0 68%, transparent 70%);

  -webkit-mask-image: radial-gradient(circle, black 0 68%, transparent 70%);
}

/* ==========================================================
   ORBITS
   ========================================================== */

.mx-orbit {
  position: absolute;

  z-index: 2;

  left: 50%;

  border: 1px solid rgba(27, 132, 224, 0.32);

  border-radius: 50%;

  pointer-events: none;
}

.mx-orbit-one {
  top: 205px;

  width: 1030px;
  height: 720px;

  transform: translateX(-50%) rotate(-8deg);
}

.mx-orbit-two {
  top: 225px;

  width: 990px;
  height: 680px;

  transform: translateX(-50%) rotate(8deg);

  border-color: rgba(23, 132, 224, 0.22);
}

.mx-orbit-dot {
  position: absolute;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background: var(--mx-gold);

  box-shadow: 0 0 0 3px rgba(214, 167, 45, 0.07);
}

.mx-dot-a {
  left: -3px;
  top: 46%;
}

.mx-dot-b {
  right: -2px;
  top: 42%;
}

.mx-dot-c {
  left: 13%;
  bottom: 7%;
}

.mx-dot-d {
  right: 12%;
  bottom: 10%;
}

/* ==========================================================
   SKYLINE
   ========================================================== */

.mx-skyline {
  position: absolute;

  z-index: 4;

  left: 0;
  right: 0;
  bottom: 0;

  height: 340px;

  pointer-events: none;
}

.mx-city {
  position: absolute;

  bottom: 164px;

  width: 36%;
  height: 240px;
}

.mx-city-left {
  left: 0;
}

.mx-city-right {
  right: 0;
}

.mx-city > i {
  position: absolute;

  left: var(--x);
  bottom: 0;

  width: var(--w);
  height: var(--h);

  display: block;

  border: 1px solid rgba(18, 91, 161, 0.35);

  background: linear-gradient(
    90deg,
    rgba(12, 94, 173, 0.42),
    rgba(94, 176, 230, 0.18),
    rgba(9, 76, 147, 0.48)
  );

  box-shadow: inset 3px 0 rgba(255, 255, 255, 0.18);
}

/* building windows */

.mx-city > i:not(.mx-burj):not(.mx-tower-curved)::after {
  content: "";

  position: absolute;

  inset: 7px 3px;

  opacity: 0.32;

  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0 1px,
    transparent 1px 7px
  );
}

/* curved tower */

.mx-tower-curved {
  clip-path: polygon(38% 0, 68% 12%, 76% 100%, 0 100%, 12% 30%);
}

/* Burj Khalifa */

.mx-burj {
  border: 0 !important;

  clip-path: polygon(
    49% 0,
    53% 14%,
    60% 14%,
    60% 29%,
    70% 29%,
    68% 45%,
    78% 45%,
    74% 64%,
    84% 64%,
    79% 100%,
    18% 100%,
    22% 64%,
    31% 64%,
    28% 45%,
    38% 45%,
    36% 29%,
    44% 29%
  );

  background: linear-gradient(90deg, #09559f, #67b0e0, #064684) !important;
}

/* ==========================================================
   GROUND
   ========================================================== */

.mx-skyline-ground {
  position: absolute;

  left: 0;
  right: 0;

  bottom: 157px;

  height: 10px;

  background: linear-gradient(
    90deg,
    rgba(14, 91, 157, 0.45),
    rgba(76, 151, 207, 0.28),
    rgba(214, 167, 45, 0.25),
    rgba(18, 89, 153, 0.45)
  );

  filter: blur(0.2px);
}

/* ==========================================================
   WATER
   ========================================================== */

.mx-water-reflection {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 160px;

  opacity: 0.6;

  background:
    linear-gradient(
      180deg,
      rgba(111, 192, 239, 0.24),
      rgba(237, 249, 255, 0.55)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 8px,
      rgba(30, 129, 199, 0.13) 9px,
      transparent 10px 16px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 80px,
      rgba(24, 122, 192, 0.08) 82px,
      transparent 85px
    );

  mask-image: linear-gradient(to bottom, black, transparent);

  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

/* ==========================================================
   ANIMATION INITIAL STATE
   ========================================================== */

.mx-leaders-badge,
.mx-leaders-title,
.mx-leaders-divider,
.mx-contact-card,
.mx-leaders-actions,
.mx-leaders-bottom-dots,
.mx-leaders-confidential {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mx-leaders.is-visible .mx-leaders-badge {
  opacity: 1;
  transform: none;
}

.mx-leaders.is-visible .mx-leaders-title {
  opacity: 1;
  transform: none;

  transition-delay: 0.08s;
}

.mx-leaders.is-visible .mx-leaders-divider {
  opacity: 1;
  transform: none;

  transition-delay: 0.16s;
}

.mx-leaders.is-visible .mx-contact-card {
  opacity: 1;
  transform: none;

  transition-delay: 0.24s;
}

.mx-leaders.is-visible .mx-leaders-actions {
  opacity: 1;
  transform: none;

  transition-delay: 0.32s;
}

.mx-leaders.is-visible .mx-leaders-bottom-dots {
  opacity: 1;
  transform: none;

  transition-delay: 0.4s;
}

.mx-leaders.is-visible .mx-leaders-confidential {
  opacity: 1;
  transform: none;

  transition-delay: 0.45s;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {
  .mx-leaders {
    height: 900px;
  }

  .mx-leaders-title {
    font-size: 58px;
  }

  .mx-leaders-side {
    width: 150px;
  }

  .mx-leaders-side-left {
    left: 35px;
  }

  .mx-leaders-side-right {
    right: 25px;
  }

  .mx-orbit-one {
    width: 850px;
  }

  .mx-orbit-two {
    width: 810px;
  }
}

@media (max-width: 900px) {
  .mx-leaders {
    height: auto;
    min-height: 900px;

    padding-bottom: 190px;
  }

  .mx-leaders-content {
    width: calc(100% - 40px);
  }

  .mx-leaders-side {
    display: none;
  }

  .mx-leaders-title {
    font-size: clamp(42px, 7vw, 56px);
  }

  .mx-leaders-globe {
    width: 700px;
    height: 700px;
  }

  .mx-orbit {
    display: none;
  }

  .mx-city {
    width: 48%;
  }
}

@media (max-width: 600px) {
  .mx-leaders {
    min-height: 850px;

    padding-bottom: 150px;
  }

  .mx-leaders-content {
    width: calc(100% - 26px);

    padding-top: 25px;
  }

  .mx-leaders-badge {
    min-width: auto;

    height: 32px;

    font-size: 8px;
  }

  .mx-leaders-title {
    margin-top: 20px;

    font-size: clamp(35px, 10vw, 46px);

    line-height: 0.91;

    letter-spacing: -1px;
  }

  .mx-contact-card {
    width: min(450px, 100%);

    padding: 20px;
  }

  .mx-contact-row {
    grid-template-columns:
      27px
      54px
      1fr;

    font-size: 10px;
  }

  .mx-contact-row strong {
    font-size: 12px;
  }

  .mx-leaders-actions {
    width: 100%;

    flex-direction: column;
  }

  .mx-leaders-btn {
    width: min(320px, 100%);
  }

  .mx-leaders-bottom-dots {
    margin-top: 35px;
  }

  .mx-leaders-confidential {
    font-size: 8px;

    letter-spacing: 1.6px;
  }

  .mx-leaders-globe {
    top: 260px;

    width: 600px;
    height: 600px;
  }

  .mx-skyline {
    height: 220px;
  }

  .mx-city {
    bottom: 100px;

    height: 130px;
  }

  .mx-city > i {
    transform: scaleY(0.65);

    transform-origin: bottom;
  }

  .mx-skyline-ground {
    bottom: 96px;
  }

  .mx-water-reflection {
    height: 100px;
  }
}
/* =========================================
   FIXED INVITATION BUTTON
========================================= */

.mx-invite-floating-btn {
  position: fixed;
  right: 24px;
  bottom: 77px;
  z-index: 9998;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-width: 190px;
  padding: 11px 12px 11px 18px;

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;

  background: linear-gradient(110deg, #102b4d, #147ddd);
  color: #ffffff;

  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;

  box-shadow: 0 12px 30px rgba(16, 43, 77, 0.25);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.mx-invite-floating-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(110deg, #147ddd, #102b4d);
  box-shadow: 0 16px 35px rgba(16, 43, 77, 0.35);
}

.mx-invite-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;

  font-size: 16px;
  line-height: 1;

  transition: transform 0.3s ease;
}

.mx-invite-floating-btn:hover .mx-invite-btn-icon {
  transform: rotate(45deg);
}

/* =========================================
   MODAL OVERLAY
========================================= */

.mx-invite-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mx-invite-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.mx-invite-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(12, 30, 52, 0.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  cursor: pointer;
}

/* =========================================
   COMPACT MODAL BOX
========================================= */

.mx-invite-dialog {
  position: relative;
  z-index: 1;

  width: min(100%, 620px);
  max-height: calc(100vh - 32px);

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 22px 24px 20px;

  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;

  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);

  transform: translateY(25px) scale(0.97);
  opacity: 0;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

.mx-invite-modal.is-open .mx-invite-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* =========================================
   CLOSE BUTTON
========================================= */

.mx-invite-close {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #d6e3f1;
  border-radius: 50%;

  background: #f8fbff;
  color: #102b4d;

  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.mx-invite-close:hover {
  background: #102b4d;
  color: #ffffff;
  transform: rotate(90deg);
}

/* =========================================
   MODAL HEADER
========================================= */

.mx-invite-header {
  padding-right: 30px;
  margin-bottom: 16px;
}

.mx-invite-label {
  display: inline-flex;

  padding: 6px 10px;

  border: 1px solid #d6e5f5;
  border-radius: 999px;

  color: #147ddd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mx-invite-header h2 {
  margin: 12px 0 8px;

  color: #102b4d;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.mx-invite-heading-line {
  width: 100%;
  height: 3px;
  margin-bottom: 9px;

  background: linear-gradient(
    to right,
    #147ddd 0 48px,
    #e9b92f 48px 58px,
    transparent 58px
  );
}

.mx-invite-header p {
  max-width: 540px;
  margin: 0;

  color: #6d8098;
  font-size: 10px;
  line-height: 1.55;
}

/* =========================================
   FORM
========================================= */

.mx-invite-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.mx-invite-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.mx-invite-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.mx-invite-field label {
  color: #102b4d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.mx-invite-field input,
.mx-invite-field select,
.mx-invite-field textarea {
  width: 100%;
  min-width: 0;

  border: 1px solid #cbdced;
  border-radius: 8px;

  background: #fbfdff;
  color: #102b4d;

  padding: 8px 10px;

  font: inherit;
  font-size: 11px;
  line-height: 1.3;

  outline: none;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.mx-invite-field input,
.mx-invite-field select {
  height: 35px;
}

.mx-invite-field textarea {
  min-height: 65px;
  resize: vertical;
}

.mx-invite-field input:focus,
.mx-invite-field select:focus,
.mx-invite-field textarea:focus {
  border-color: #147ddd;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(20, 125, 221, 0.08);
}

.mx-invite-message-field {
  margin-top: 1px;
}

.mx-invite-message-field.full-width {
  grid-column: 1 / -1;
}

/* =========================================
   CONSENT
========================================= */

.mx-invite-consent {
  display: flex;
  align-items: flex-start;
  gap: 7px;

  color: #6d8098;
  font-size: 10px;
  line-height: 1.45;

  cursor: pointer;
}

.mx-invite-consent input {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin: 1px 0 0;

  accent-color: #147ddd;
}

/* =========================================
   SUBMIT BUTTON
========================================= */

.mx-invite-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  min-height: 38px;

  border: 0;
  border-radius: 999px;

  background: linear-gradient(100deg, #1054a4, #137ddd);
  color: #ffffff;

  cursor: pointer;

  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;

  box-shadow: 0 8px 20px rgba(18, 111, 211, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.mx-invite-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(18, 111, 211, 0.28);
}

.mx-invite-submit span:last-child {
  font-size: 15px;
}

.mx-invite-note {
  margin: -1px 0 0;

  color: #6d8098;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 650px) {
  .mx-invite-floating-btn {
    right: 14px;
    bottom: 14px;

    min-width: auto;
    padding: 10px 11px 10px 14px;

    font-size: 8px;
    gap: 10px;
  }

  .mx-invite-btn-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: 15px;
  }

  .mx-invite-modal {
    padding: 10px;
  }

  .mx-invite-dialog {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 20px 15px 16px;
    border-radius: 15px;
  }

  .mx-invite-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mx-invite-message-field.full-width {
    grid-column: auto;
  }

  .mx-invite-header {
    padding-right: 25px;
    margin-bottom: 14px;
  }

  .mx-invite-header h2 {
    font-size: 27px;
  }

  .mx-invite-field input,
  .mx-invite-field select {
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-invite-modal,
  .mx-invite-dialog,
  .mx-invite-floating-btn,
  .mx-invite-btn-icon,
  .mx-invite-close,
  .mx-invite-submit {
    transition: none;
  }
}

/* ======================================================
   SPEAKERS PAGE
   ====================================================== */

.mx-speakers-page-body {
  background: linear-gradient(180deg, #f4f9fd 0%, #eef4f7 100%);
}

.mx-speakers-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 48px 64px;
}

.mx-speakers-page-hero {
  margin-bottom: 36px;
}

.mx-speakers-page-hero-inner {
  max-width: 920px;
}

.mx-speakers-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: #55718e;
  font-family: "Space Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.mx-speakers-back-link:hover {
  color: #0b4ea2;
}

.mx-speakers-page-hero h1 {
  margin: 0;
  font-family: "Rajdhani", "Inter", sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -2px;
  color: #102f55;
  text-transform: uppercase;
}

.mx-speakers-page-hero h1 span {
  color: #0b4ea2;
}

.mx-speakers-page-hero p {
  max-width: 820px;
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #647c98;
}

.mx-speakers-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-family: "Space Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #68829e;
  text-transform: uppercase;
}

.mx-speakers-page-divider {
  width: 42px;
  height: 2px;
  background: #d4a93b;
}

.mx-speakers-page-grid-section {
  width: 100%;
}

.mx-speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.mx-speakers-grid .mx-speaker-card {
  flex: none;
  width: 100%;
  min-width: 0;
}

.mx-speakers-page-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 1200px) {
  .mx-speakers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mx-speakers-page {
    padding: 20px 24px 48px;
  }

  .mx-speakers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .mx-speakers-grid .mx-speaker-image {
    height: 220px;
  }
}

@media (max-width: 560px) {
  .mx-speakers-page {
    padding: 16px 16px 40px;
  }

  .mx-speakers-grid {
    grid-template-columns: 1fr;
  }

  .mx-speakers-page-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .mx-speakers-page-divider {
    display: none;
  }

  .mx-speakers-grid .mx-speaker-image {
    height: 260px;
  }
}