@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  --beltrami-blue-dark: #47758d;
  --beltrami-ink: #294655;
  --beltrami-muted: #6e8490;
}

.beltrami-popup,
.beltrami-popup * { box-sizing: border-box; }

.beltrami-popup[hidden] { display: none; }

.beltrami-popup {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 76px 20px 34px;
  font-family: "Lato", Arial, sans-serif;
  background:
    radial-gradient(ellipse 90% 50% at -12% 7%, rgba(255,255,255,.22) 0 35%, transparent 35.5%),
    radial-gradient(ellipse 75% 43% at 95% 91%, rgba(185,223,234,.36) 0 35%, transparent 35.5%),
    linear-gradient(135deg, rgba(184,220,232,.6) 0%, rgba(157,200,216,.6) 47%, rgba(113,154,174,.6) 100%);
  animation: beltrami-fade-in .28s ease-out;
}

.beltrami-popup::before,
.beltrami-popup::after {
  position: absolute;
  pointer-events: none;
  content: "";
  opacity: .45;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 50%;
}

.beltrami-popup::before {
  top: -27vw;
  left: -19vw;
  width: 58vw;
  height: 58vw;
  min-width: 430px;
  min-height: 430px;
}

.beltrami-popup::after {
  right: -25vw;
  bottom: -29vw;
  width: 67vw;
  height: 67vw;
  min-width: 500px;
  min-height: 500px;
}

.beltrami-popup__card {
  position: relative;
  z-index: 1;
  width: min(530px, 100%);
  min-height: 362px;
  padding: 54px clamp(28px, 8vw, 68px) 62px;
  border-radius: 26px;
  color: var(--beltrami-ink);
  text-align: center;
  background: #fff;
  box-shadow: 30px 31px 0 rgba(54, 82, 100, .46), 0 24px 45px rgba(31, 65, 80, .25);
  animation: beltrami-slide-in .32s cubic-bezier(.2, .8, .2, 1);
}

.beltrami-popup__brand {
  width: min(230px, 66%);
  margin: 0 auto 29px;
}

.beltrami-popup__brand img { display: block; width: 100%; height: auto; }

.beltrami-popup__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--beltrami-ink);
  font: inherit;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.beltrami-popup__close:hover,
.beltrami-popup__close:focus-visible {
  color: #fff;
  background: var(--beltrami-blue-dark);
  transform: rotate(90deg);
}

.beltrami-popup__close:focus-visible {
  outline: 3px solid #d89e46;
  outline-offset: 2px;
}

.beltrami-popup__title {
  margin: 0 0 26px;
  color: var(--beltrami-ink);
  font-size: clamp(27px, 4.5vw, 36px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.beltrami-popup__text {
  max-width: 390px;
  margin: 0 auto;
  color: var(--beltrami-muted);
  font-size: clamp(17px, 2.5vw, 20px);
  line-height: 1.5;
}

@keyframes beltrami-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes beltrami-slide-in {
  from { opacity: 0; transform: translateY(15px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .beltrami-popup {
    place-items: center;
    padding: 84px 17px 24px;
  }

  .beltrami-popup__card {
    min-height: 345px;
    padding: 42px 28px 47px;
    border-radius: 22px;
    box-shadow: 17px 19px 0 rgba(54, 82, 100, .43), 0 20px 38px rgba(31, 65, 80, .22);
  }

  .beltrami-popup__brand {
    width: min(205px, 66%);
    margin-bottom: 24px;
  }

  .beltrami-popup__close { top: 12px; right: 12px; }
  .beltrami-popup__title { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .beltrami-popup, .beltrami-popup__card { animation: none; }
  .beltrami-popup__close { transition: none; }
}