@font-face {
  font-family: "Commissioner Youniqa";
  src: url("/site/fonts/Commissioner-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Commissioner Youniqa";
  src: url("/site/fonts/Commissioner-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Commissioner Youniqa";
  src: url("/site/fonts/Commissioner-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.home-showcase {
  --home-glow-base: #fff;
  --home-glow-haze: #dff5f8;
  --home-glow-core: #5ed7d1;
  --home-glow-blue: #a9dfef;
  --home-glow-lilac: #cec8ed;
  --home-hero-title-color: #28b9ba;
  --home-hero-art-width: min(90vw, 1450px, max(830px, 116svh));
  position: relative;
  width: 100%;
  height: 90vh;
  height: 90svh;
  min-height: 600px;
  overflow: clip;
  isolation: isolate;
  background: var(--home-glow-base);
  font-family: "Commissioner Youniqa", "Inter Youniqa", Arial, sans-serif;
}

.home-showcase::before,
.home-showcase::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  will-change: transform, opacity;
}

.home-showcase::before {
  --home-glow-opacity: .84;
  top: 17%;
  left: 50%;
  width: min(82vw, 1120px);
  height: min(72svh, 690px);
  border-radius: 56% 44% 63% 37% / 46% 59% 41% 54%;
  background:
    radial-gradient(ellipse 45% 48% at 23% 54%, var(--home-glow-core) 0 23%, transparent 78%),
    radial-gradient(ellipse 48% 52% at 77% 48%, var(--home-glow-blue) 0 25%, transparent 78%);
  filter: blur(clamp(25px, 4.5vw, 65px));
  opacity: var(--home-glow-opacity);
  animation:
    home-showcase-glow-in 1.25s ease-out 2.85s both,
    home-showcase-glow-drift-a 16s ease-in-out 4.1s infinite alternate;
}

.home-showcase::after {
  --home-glow-opacity: .62;
  top: 22%;
  left: 53%;
  width: min(88vw, 1190px);
  height: min(76svh, 710px);
  border-radius: 43% 57% 45% 55% / 62% 42% 58% 38%;
  background:
    radial-gradient(ellipse 42% 48% at 81% 59%, var(--home-glow-lilac) 0 21%, transparent 79%),
    radial-gradient(ellipse 51% 54% at 49% 58%, var(--home-glow-haze) 0 27%, transparent 78%);
  filter: blur(clamp(32px, 5vw, 76px));
  opacity: var(--home-glow-opacity);
  animation:
    home-showcase-glow-in 1.45s ease-out 2.85s both,
    home-showcase-glow-drift-b 19s ease-in-out 4.3s infinite alternate;
}

.home-showcase__scene {
  position: static;
}

.home-showcase__title {
  position: absolute;
  z-index: 1;
  top: clamp(22px, 3.4svh, 54px);
  right: var(--pad-end);
  left: var(--pad-start);
  margin: 0 auto;
  color: var(--home-hero-title-color);
  font-size: clamp(48px, 6.45vw, 120px);
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.065em;
  text-align: center;
  white-space: pre-line;
  animation: home-showcase-element-in .7s cubic-bezier(.2, .7, .2, 1) .05s both;
}

.cms-site .home-showcase__title,
.cms-site .home-showcase__offer h2 {
  font-family: "Commissioner Youniqa", Arial, sans-serif;
}

.home-showcase__people {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  display: block;
  width: var(--home-hero-art-width);
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  animation: home-showcase-element-in .9s cubic-bezier(.2, .7, .2, 1) 1.75s both;
}

.home-showcase__offers {
  position: absolute;
  z-index: 3;
  bottom: clamp(4px, 1svh, 10px);
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: var(--home-hero-art-width);
  margin: 0;
  padding: clamp(19px, 2.3vh, 30px) 0;
  color: #0b1c24;
  background: #fff;
  transform: translateX(-50%);
  animation: home-showcase-element-in .75s cubic-bezier(.2, .7, .2, 1) 2.85s both;
}

@keyframes home-showcase-element-in {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes home-showcase-glow-in {
  from { opacity: 0; }
  to { opacity: var(--home-glow-opacity); }
}

@keyframes home-showcase-glow-drift-a {
  from { transform: translate3d(-50%, 0, 0) rotate(-9deg) scale(.93); border-radius: 56% 44% 63% 37% / 46% 59% 41% 54%; }
  to { transform: translate3d(-43%, -7%, 0) rotate(13deg) scale(1.09); border-radius: 38% 62% 42% 58% / 61% 39% 58% 42%; }
}

@keyframes home-showcase-glow-drift-b {
  from { transform: translate3d(-50%, 0, 0) rotate(8deg) scale(1.04); border-radius: 43% 57% 45% 55% / 62% 42% 58% 38%; }
  to { transform: translate3d(-55%, 5%, 0) rotate(-12deg) scale(.91); border-radius: 61% 39% 60% 40% / 39% 57% 43% 61%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase::before,
  .home-showcase::after,
  .home-showcase__title,
  .home-showcase__people,
  .home-showcase__offers {
    animation: none;
  }

  .home-showcase::before,
  .home-showcase::after {
    transform: translateX(-50%);
  }
}

.home-showcase__offer {
  min-width: 0;
  padding: 0 clamp(18px, 2.4vw, 42px);
  text-align: center;
}

.home-showcase__offer + .home-showcase__offer {
  border-left: 1px solid rgb(11 28 36 / 16%);
}

.home-showcase__offer h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 1.58vw, 28px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.home-showcase__offer p {
  max-width: 29ch;
  margin: 0 auto;
  color: #0b1c24;
  font-size: clamp(14px, .97vw, 17px);
  line-height: 1.28;
}


.home-showcase__offer p a {
  color: inherit;
  border-bottom: 1px solid rgb(7 213 209 / 40%);
  text-decoration: none;
  transition: border-color 180ms ease;
}

.home-showcase__offer p a:hover,
.home-showcase__offer p a:focus-visible {
  border-bottom-color: transparent;
}

@media (max-width: 1100px) {
  .home-showcase {
    min-height: 600px;
  }

  .home-showcase__title {
    font-size: clamp(46px, 6.65vw, 73px);
  }

}

@media (max-width: 760px) {
  .home-showcase {
    display: grid;
    height: auto;
    min-height: 90vh;
    min-height: 90svh;
    grid-template-rows: minmax(420px, 64svh) auto;
  }

  .home-showcase__scene {
    position: relative;
    min-height: 0;
    overflow: clip;
    isolation: isolate;
  }

  .home-showcase__title {
    top: clamp(20px, 4svh, 36px);
    right: clamp(16px, 5vw, 30px);
    left: clamp(16px, 5vw, 30px);
    max-width: 14ch;
    font-size: clamp(35px, 9vw, 61px);
    line-height: .96;
    letter-spacing: -.055em;
  }

  .home-showcase__people {
    bottom: 0;
    width: min(120vw, 740px);
    height: 78%;
  }

  .home-showcase__offers {
    position: relative;
    bottom: auto;
    left: auto;
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 2 * clamp(14px, 4vw, 24px));
    margin: 0 auto clamp(16px, 3vw, 26px);
    padding: 0 clamp(17px, 4vw, 28px);
    transform: none;
  }

  .home-showcase__offer {
    display: grid;
    grid-template-columns: minmax(110px, 40%) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 72px;
    padding: 14px 0;
    text-align: left;
  }

  .home-showcase__offer + .home-showcase__offer {
    border-top: 1px solid rgb(11 28 36 / 16%);
    border-left: 0;
  }

  .home-showcase__offer h2 {
    margin: 0;
    font-size: clamp(17px, 4.5vw, 22px);
  }

  .home-showcase__offer p {
    max-width: none;
    margin: 0;
    font-size: clamp(13px, 3.55vw, 16px);
  }
}

@media (max-width: 380px) {
  .home-showcase {
    grid-template-rows: minmax(420px, 64svh) auto;
  }

  .home-showcase__offer {
    grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
    gap: 10px;
  }
}