.site-page {
  overflow-x: clip;
}

.fx-dust {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .55;
}

.site-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 48% 30%, rgba(178, 191, 216, .1), transparent 52%),
    radial-gradient(ellipse at 88% 88%, rgba(184, 198, 225, .05), transparent 46%);
}

.fx-light {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 880px;
  height: 880px;
  margin: -440px 0 0 -440px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(210, 220, 241, .07), transparent);
  transform: translate3d(50vw, 30vh, 0);
  will-change: transform;
}

.site-page > main, .site-page > .footer { position: relative; z-index: 1; }
.fx-shutter { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #050506; clip-path: inset(100% 0 0); pointer-events: none; transition: clip-path .38s cubic-bezier(.76,0,.24,1); }
.fx-shutter.is-opening { clip-path: inset(0); }
.fx-shutter__mark { color: #f4f5f7; font: 800 clamp(36px, 9vw, 100px)/1 var(--display, sans-serif); letter-spacing: -.12em; text-shadow: 0 0 48px rgba(220,228,241,.5); transform: perspective(600px) rotateX(-14deg); }

@keyframes fx-atmosphere {
  from { transform: translate3d(-2%, -1%, 0) rotate(-5deg) scale(.98); }
  to { transform: translate3d(2%, 1%, 0) rotate(8deg) scale(1.04); }
}

.fx-title { perspective: 900px; }
.fx-title { transform-origin: 50% 100%; animation: fx-title-in .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes fx-title-in { from { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(34px); } to { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); } }
.fx-title em, .urban-page__title em, .sec-title em {
  background: linear-gradient(110deg, #747983 5%, #fff 22%, #aeb4c0 36%, #fff 52%, #777e89 66%, #f5f7fb 82%);
  background-size: 220% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: fx-chrome 6s ease-in-out infinite;
}

@keyframes fx-chrome { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

.fx-card {
  transform: perspective(1100px) translate3d(0, 28px, -80px) rotateX(7deg);
  opacity: .01;
  transition: transform .85s cubic-bezier(.16,1,.3,1), opacity .65s ease;
  transform-style: preserve-3d;
}
.fx-card.fx-visible { transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0); opacity: 1; }
.fx-card:hover { transform: perspective(1100px) translate3d(0, -7px, 24px) rotateX(1deg) rotateY(-1deg); }
.fx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.15) 48%, transparent 66%);
  transform: translateX(-55%);
  transition: transform .8s ease, opacity .3s ease;
}
.fx-card:hover::after { opacity: 1; transform: translateX(55%); }
.fx-plan { position: relative; }
.fx-plan.is-selected::before, .fx-plan.is-popular::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, var(--acc, #c9ced8) 48%, transparent 74%);
  background-size: 240% 100%;
  animation: fx-race 3.6s linear infinite;
}
@keyframes fx-race { to { background-position: -240% 0; } }

.urban-page__hero.fx-urban {
  display: block;
  padding: 0;
  min-height: 145vh;
  overflow: clip;
  isolation: isolate;
  background-image: linear-gradient(90deg, rgba(5,5,6,.88), rgba(5,5,6,.22) 55%, rgba(5,5,6,.8)), url('../img/urban-script.webp');
  background-size: cover;
  background-position: center;
}
.urban-page__hero.fx-urban::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: inherit;
  background-size: cover;
  clip-path: inset(calc((1 - var(--urban-progress, 0)) * 42%) 0 round 18px);
  transform: scale(calc(1 + var(--urban-progress, 0) * .12));
}
.urban-page__hero.fx-urban .urban-page__content {
  position: sticky;
  top: var(--nav-h, 68px);
  width: min(100%, var(--maxw, 1320px));
  max-width: none;
  min-height: calc(100vh - var(--nav-h, 68px));
  margin: 0 auto;
  padding: calc(var(--nav-h, 68px) + 2vh) var(--gutter, 5vw) 5vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.urban-page__hero.fx-urban .urban-page__title { font-size: clamp(5rem, 14vw, 15rem); line-height: .78; letter-spacing: -.09em; text-shadow: 0 12px 50px #000; }
.urban-page__hero.fx-urban .urban-page__content > .urban-page__title { max-width: none; width: max-content; }
.urban-page__hero.fx-urban .urban-page__title span { display: block; transform: translateX(calc(var(--urban-progress, 0) * -5vw)); }
.urban-page__hero.fx-urban .urban-page__title em { display: block; padding-left: 12vw; transform: translateX(calc((1 - var(--urban-progress, 0)) * 6vw)); }
.urban-rain { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.urban-page__content { z-index: 2; }
.urban-page__status i { box-shadow: 0 0 0 0 rgba(203,208,218,.65); animation: fx-pulse 1.8s ease-out infinite; }
@keyframes fx-pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.submit { border-radius: 10px !important; }
.product-page .plan, .product-page .cmp-plan { transform-style: preserve-3d; }
.product-page [data-sum="cta"] { position: relative; overflow: hidden; }
.product-page [data-sum="cta"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.24) 48%, transparent 70%); transform: translateX(-120%); animation: fx-shine 4s ease-in-out infinite; }
@keyframes fx-shine { 0%, 55% { transform: translateX(-120%); } 78%, 100% { transform: translateX(120%); } }
.auth-story { transform-style: preserve-3d; }
.auth-logo-wrap { position: relative; width: min(320px, 70%); aspect-ratio: 1; margin: 0 0 12px -5px; }
.auth-logo-wrap img, .auth-logo-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.auth-logo-wrap img { opacity: .88; filter: drop-shadow(0 22px 42px rgba(210,220,241,.18)); }
.auth-logo-wrap.is-3d img { opacity: 0; }
.auth-logo-wrap canvas { transform: translate3d(calc(var(--logo-x, 0) * 8px), calc(var(--logo-y, 0) * 8px), 0); }
.auth-card { transform-style: preserve-3d; transition: transform .5s ease; }
.auth-card:focus-within { transform: none !important; }
.notfound-code { text-shadow: 0 15px 80px rgba(255,255,255,.16); }
.notfound-code { transform-style: preserve-3d; animation: fx-404-float 5s ease-in-out infinite alternate; }
@keyframes fx-404-float { to { transform: perspective(700px) rotateY(7deg) rotateX(-3deg) translateY(-9px); } }

@media (max-width: 759px) {
  .fx-card:hover { transform: none; }
  .urban-page__hero.fx-urban { min-height: 118vh; background-position: 57% center; }
  .urban-page__hero.fx-urban .urban-page__content { top: 8vh; min-height: 82vh; }
  .urban-page__hero.fx-urban .urban-page__content { top: var(--nav-h, 60px); min-height: calc(100vh - var(--nav-h, 60px)); padding: 4vh 18px; }
  .urban-page__hero.fx-urban .urban-page__title { font-size: clamp(4.6rem, 22vw, 7.5rem); }
  .urban-page__hero.fx-urban .urban-page__content > .urban-page__title { max-width: 100%; width: auto; font-size: clamp(4.2rem, 21vw, 6.4rem); }
  .urban-page__hero.fx-urban .urban-page__title em { padding-left: 7vw; }
}

@media (prefers-reduced-motion: reduce) {
  .site-page::before, .fx-title em, .urban-page__status i, .fx-plan::before, .product-page [data-sum="cta"]::after { animation: none !important; }
  .fx-card { transform: none; opacity: 1; transition: none; }
  .fx-title, .notfound-code { animation: none; }
  .fx-shutter { transition: none; }
  .urban-page__hero.fx-urban { min-height: 100vh; }
  .urban-page__hero.fx-urban .urban-page__content { position: relative; top: auto; }
}