html:has(.site-preloader) { overflow: hidden; }

.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(60, 255, 157, .11), transparent 25rem),
    #040706;
  color: #f5fff9;
  opacity: 1;
  visibility: visible;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), visibility .55s;
}

.site-preloader::before,
.site-preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-preloader::before {
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}

.site-preloader::after {
  background: linear-gradient(105deg, transparent 42%, rgba(105,255,180,.08) 49%, transparent 56%);
  transform: translateX(-110%);
  animation: preloader-scan 1.35s ease-in-out infinite;
}

.site-preloader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-core {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(300px, calc(100vw - 64px));
}

.preloader-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 104px;
  color: #58f5a6;
  filter: drop-shadow(0 0 24px rgba(65, 244, 157, .32));
  animation: preloader-float 1.8s ease-in-out infinite;
}

.preloader-mark::before,
.preloader-mark::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(91, 255, 174, .2);
  border-radius: 50%;
  animation: preloader-ring 1.8s ease-out infinite;
}

.preloader-mark::before { width: 126px; height: 126px; }
.preloader-mark::after { width: 160px; height: 160px; animation-delay: .45s; }
.preloader-mark img { position: relative; z-index: 1; width: 82px; height: 82px; border-radius: 25px; object-fit: cover; filter: drop-shadow(0 0 24px rgba(65,244,157,.28)); }

.preloader-word {
  display: flex;
  gap: .13em;
  margin-top: 32px;
  font: 600 clamp(18px, 4vw, 24px)/1 "Unbounded", sans-serif;
  letter-spacing: .22em;
}

.preloader-word span {
  display: inline-block;
  opacity: .22;
  animation: preloader-letter 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 70ms);
}

.preloader-line {
  width: 100%;
  height: 1px;
  margin-top: 25px;
  overflow: hidden;
  background: rgba(255,255,255,.09);
}

.preloader-line i {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #51f3a2, transparent);
  animation: preloader-line 1s cubic-bezier(.76, 0, .24, 1) infinite;
}

.preloader-core small {
  margin-top: 13px;
  color: rgba(221, 238, 229, .45);
  font: 600 9px/1 "Manrope", sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.cookie-banner {
  position: fixed;
  z-index: 190;
  left: 50%;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: min(660px, calc(100vw - 32px));
  padding: 12px 13px 12px 16px;
  color: #eefaf3;
  border: 1px solid rgba(126, 255, 187, .18);
  border-radius: 18px;
  background: rgba(8, 15, 12, .93);
  box-shadow: 0 18px 60px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(22px);
  transform: translate(-50%, 22px);
  opacity: 0;
  animation: cookie-enter .55s .2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.cookie-banner.is-leaving { animation: cookie-leave .28s ease forwards; pointer-events: none; }
.cookie-banner__icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #55f3a5; background: rgba(75, 239, 155, .09); }
.cookie-banner__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cookie-banner p { flex: 1; margin: 0; color: rgba(236, 248, 241, .7); font: 500 12px/1.5 "Manrope", sans-serif; }
.cookie-banner p strong { color: #f4fff8; font-weight: 700; }
.cookie-banner a { color: #64f6ac; text-decoration: none; white-space: nowrap; }
.cookie-banner a:hover { text-decoration: underline; }
.cookie-banner button { flex: 0 0 auto; min-width: 112px; padding: 11px 16px; color: #041009; border: 0; border-radius: 12px; background: #55f3a5; font: 800 12px/1 "Manrope", sans-serif; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.cookie-banner button:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(72, 238, 156, .2); }

@keyframes preloader-scan { 55%, 100% { transform: translateX(110%); } }
@keyframes preloader-float { 50% { transform: translateY(-7px); } }
@keyframes preloader-ring { 0% { transform: scale(.72); opacity: 0; } 34% { opacity: .8; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes preloader-letter { 0%, 100% { opacity: .2; transform: translateY(0); } 42% { opacity: 1; transform: translateY(-3px); color: #67f8b0; } }
@keyframes preloader-line { from { transform: translateX(-110%); } to { transform: translateX(350%); } }
@keyframes cookie-enter { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cookie-leave { to { opacity: 0; transform: translate(-50%, 14px); } }

@media (max-width: 620px) {
  .cookie-banner { bottom: 12px; align-items: flex-start; gap: 11px; padding: 13px; border-radius: 16px; }
  .cookie-banner__icon { flex-basis: 34px; width: 34px; height: 34px; }
  .cookie-banner p { padding-right: 2px; font-size: 11px; }
  .cookie-banner button { align-self: center; min-width: 72px; padding-inline: 12px; }
}

@media (max-width: 430px) {
  .cookie-banner { display: grid; grid-template-columns: 34px 1fr; }
  .cookie-banner button { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .site-preloader::after, .preloader-mark, .preloader-mark::before, .preloader-mark::after,
  .preloader-word span, .preloader-line i { animation: none !important; }
  .cookie-banner { animation-duration: .01ms; }
}