@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash/ClashDisplay-Extralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash/ClashDisplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash/ClashDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash/ClashDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash/ClashDisplay-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash/ClashDisplay-Bold.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Clash Display", sans-serif;
  --font-heading: "Clash Display", sans-serif;
  --brand-blue-deep: #041780;
  --brand-blue-primary: #0038a1;
  --brand-blue-bright: #059fd2;
  --brand-blue-soft: #52d2e3;
}

body,
html,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body div,
body a,
body label,
body li,
body th,
body td,
button,
input,
select,
textarea {
  font-family: "Clash Display", sans-serif !important;
}

.design-conference,
.feature-ai-event {
  --font-body: "Clash Display", sans-serif;
  --font-heading: "Clash Display", sans-serif;
}

/* Keep the navigation in its original typeface. */
.header-area,
.header-area * {
  font-family: Arial, Helvetica, "Segoe UI", Tahoma, sans-serif !important;
}

.main-loader {
  width: 124px !important;
  height: 124px !important;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}

.main-loader span {
  display: none !important;
  animation: none !important;
}

.main-loader::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 124px;
  height: 124px;
  content: "";
  background: url("../img/logo/main-logo.svg") center / contain no-repeat;
  transform: translate(-50%, -50%);
  animation: preloader-logo-spin 1.4s linear infinite;
  pointer-events: none;
}

@keyframes preloader-logo-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-loader::after {
    animation: none;
  }
}

/* Quiet brand watermarks on selected light sections. */
#about,
.feature--about-cards,
#video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#about > *,
.feature--about-cards > *,
#video > * {
  position: relative;
  z-index: 1;
}

#about::after,
.feature--about-cards::after,
#video::after {
  position: absolute;
  z-index: 0;
  width: clamp(280px, 34vw, 520px);
  aspect-ratio: 549 / 554;
  content: "";
  background: url("../img/logo/main-logo-overlay.svg") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

#about::after {
  right: clamp(-180px, -10vw, -100px);
  bottom: -180px;
  transform: rotate(10deg);
}

.feature--about-cards::after {
  top: 50%;
  left: clamp(-190px, -11vw, -110px);
  opacity: 0.045;
  transform: translateY(-50%) rotate(-12deg);
}

#video::after {
  top: 3rem;
  right: clamp(-160px, -8vw, -80px);
  opacity: 0.05;
  transform: rotate(8deg);
}

@media (max-width: 767px) {
  #about::after,
  .feature--about-cards::after,
  #video::after {
    width: 260px;
    opacity: 0.035;
  }
}