/* ═══════════════════════════════════════════════════════════════
         CSS ПЕРЕМЕННЫЕ — меняй цвета и прозрачность здесь
         ═══════════════════════════════════════════════════════════════ */
      :root {
        --ink: rgba(244, 238, 226, 0.9);
        --muted: rgba(244, 238, 226, 0.56);
        --line: rgba(244, 238, 226, 0.15);
        --gold: #d8ae67;
        --copper: #b56b4e;
      }
/* Shared hidden SVG filter definitions for CSP-safe markup. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.locale-switcher {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: calc(clamp(24px, 3vw, 44px) + env(safe-area-inset-right));
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(246, 238, 220, 0.62);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.locale-switcher a {
  color: rgba(246, 238, 220, 0.66);
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}

.locale-switcher a:hover,
.locale-switcher a:focus-visible,
.locale-switcher a.is-active {
  color: #f6eedc;
}

.locale-switcher a.is-active {
  pointer-events: none;
}

@font-face {
  font-family: "Forum";
  src: url("../fonts/Forum-Regular-cyrillic.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0400-052F, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Forum";
  src: url("../fonts/Forum-Regular-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alice";
  src: url("../fonts/Alice-Regular-cyrillic.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0400-052F, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Alice";
  src: url("../fonts/Alice-Regular-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-cyrillic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0400-052F, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Forum Fallback";
  src: local("Georgia");
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Alice Fallback";
  src: local("Georgia");
  size-adjust: 99%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #020204;
        color: var(--ink);
        font-family:
          "Montserrat",
          "Montserrat Fallback",
          Inter,
          system-ui,
          -apple-system,
          Segoe UI,
          sans-serif;
      }
      .page {
        position: relative;
        width: 100vw;
        height: 100vh;
        min-height: 100svh;
        overflow: hidden;
        isolation: isolate;
        background: #020204;
      }
      .page-content {
        position: relative;
        z-index: 10;
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
      }
      html.site-footer-enabled:not(.select-page-root) {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      }
      html.site-footer-enabled:not(.select-page-root) body {
        height: auto;
        min-height: 100%;
        overflow-x: clip;
        overflow-y: visible;
      }
      .site-footer[hidden] {
        display: none !important;
      }
      .site-footer:empty {
        display: none;
      }
      .site-footer {
        position: relative;
        z-index: 18;
        width: 100%;
        margin: 0;
        padding: 48px 48px calc(42px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(216, 174, 103, 0.18);
        background:
          linear-gradient(180deg, rgba(2, 2, 4, 0.94) 0, #020204 92px),
          #020204;
        box-shadow: 0 -32px 90px rgba(2, 2, 4, 0.58);
        color: rgba(244, 238, 226, 0.68);
      }
      .site-footer::before {
        display: none;
      }
      .site-footer__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
        align-items: start;
        width: min(100%, 1180px);
        margin: 0 auto;
      }
      .site-footer__section {
        min-width: 0;
      }
      .site-footer__title {
        margin: 0 0 12px;
        color: rgba(216, 174, 103, 0.88);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        line-height: 1.35;
        text-transform: uppercase;
      }
      .site-footer__text,
      .site-footer__disclaimer,
      .site-footer__copyright {
        margin: 0;
        font-size: 12px;
        line-height: 1.7;
      }
      .site-footer__text {
        max-width: 34em;
      }
      .site-footer__links {
        display: grid;
        gap: 7px;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .site-footer__links a {
        display: inline;
        font-size: 12px;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }
      .site-footer a {
        color: rgba(244, 206, 138, 0.88);
        text-decoration: underline;
        text-decoration-color: rgba(216, 174, 103, 0.42);
        text-underline-offset: 4px;
        transition: color 0.2s ease, text-decoration-color 0.2s ease;
      }
      .site-footer a:hover {
        color: rgba(255, 235, 192, 0.98);
        text-decoration-color: rgba(255, 235, 192, 0.78);
      }
      .site-footer__disclaimer {
        max-width: 880px;
        margin: 30px auto 0;
        color: rgba(244, 238, 226, 0.5);
        text-align: center;
      }
      .site-footer__copyright {
        margin-top: 18px;
        color: rgba(244, 238, 226, 0.42);
        text-align: center;
      }
      body.checkout-page-body > .site-footer,
      body.select-page-body > .site-footer {
        width: 100%;
      }
      body.result-page-body > .site-footer {
        width: 100%;
      }
      body.result-page-body > .site-footer .site-footer__grid {
        width: min(100%, 920px);
      }
      body.select-cards-circle-mode > .site-footer {
        display: none !important;
      }
      @supports (height: 100dvh) {
        .page {
          height: 100dvh;
        }
        .page-content {
          min-height: 100dvh;
        }
      }
      @media (min-width: 901px) {
        .page--select > .page-content {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .page--form > .page-content,
        .page--checkout > .page-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }
      html.page-js .page-content {
        transition: opacity 0.28s ease;
        will-change: opacity;
      }
      html.page-js.page-entering .page-content,
      html.page-js.page-leaving .page-content {
        opacity: 0;
        pointer-events: none;
      }
      .page:before {
        content: "";
        position: absolute;
        inset: -10%;
        z-index: 2;
        pointer-events: none;
        opacity: 0.45;
        filter: blur(18px);
        mix-blend-mode: screen;
        background:
          radial-gradient(
            circle at 12% 18%,
            rgba(244, 238, 226, 0.1) 0 2px,
            transparent 40px
          ),
          radial-gradient(
            circle at 28% 34%,
            rgba(216, 174, 103, 0.08) 0 3px,
            transparent 52px
          ),
          radial-gradient(
            circle at 55% 12%,
            rgba(244, 238, 226, 0.09) 0 2px,
            transparent 44px
          ),
          radial-gradient(
            circle at 78% 28%,
            rgba(181, 107, 78, 0.08) 0 4px,
            transparent 60px
          ),
          radial-gradient(
            circle at 88% 62%,
            rgba(244, 238, 226, 0.07) 0 2px,
            transparent 46px
          ),
          radial-gradient(
            circle at 38% 72%,
            rgba(216, 174, 103, 0.07) 0 3px,
            transparent 54px
          ),
          radial-gradient(
            circle at 68% 82%,
            rgba(244, 238, 226, 0.06) 0 2px,
            transparent 48px
          ),
          radial-gradient(
            circle at 48% 48%,
            rgba(181, 107, 78, 0.06) 0 3px,
            transparent 56px
          );
        animation: bokehDrift 30s ease-in-out infinite alternate;
      }
      .page::after {
        content: "";
        position: absolute;
        inset: -2%;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        background:
          linear-gradient(
            180deg,
            rgba(2, 2, 7, 0) 0%,
            rgba(10, 12, 23, 0.12) 34%,
            rgba(170, 176, 205, 0.1) 42%,
            rgba(4, 5, 10, 0.3) 50%,
            rgba(0, 0, 0, 0.78) 100%
          ),
          repeating-linear-gradient(
            174deg,
            rgba(244, 238, 226, 0.055) 0 1px,
            transparent 1px 22px
          ),
          linear-gradient(180deg, #020207 0%, #070812 48%, #020204 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 100%);
      }
      @keyframes bokehDrift {
        0% {
          transform: translate3d(-1%, -0.7%, 0) scale(1);
        }
        100% {
          transform: translate3d(1%, 0.7%, 0) scale(1.025);
        }
      }
      /* ═══════════════════════════════════════════════════════════════
         WEBGL CANVAS — здесь рисуется море и ночное небо
         ═══════════════════════════════════════════════════════════════ */
      #webgl {
        position: absolute;
        inset: -5%;
        width: 110%;
        height: 110%;
        display: block;
        z-index: 1;
        transform-origin: center;
        will-change: transform;
      }
      /* ═══════════════════════════════════════════════════════════════
         GRAIN — зернистость плёнки. Меняй opacity: 0.055 (больше = зернистее)
         ═══════════════════════════════════════════════════════════════ */
      .grain {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        opacity: 0.055;
        background-image:
          radial-gradient(
            circle at 17% 29%,
            rgba(255, 255, 255, 0.8) 0 0.8px,
            transparent 1px
          ),
          radial-gradient(
            circle at 72% 67%,
            rgba(255, 255, 255, 0.7) 0 0.7px,
            transparent 1px
          );
        background-size:
          170px 170px,
          260px 260px;
        mix-blend-mode: screen;
      }
      /* ═══════════════════════════════════════════════════════════════
         VIGNETTE — затемнение по краям экрана. Меняй градиенты здесь
         ═══════════════════════════════════════════════════════════════ */
      .vignette {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background:
          linear-gradient(
            to right,
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 0.18) 18%,
            transparent 37%,
            transparent 63%,
            rgba(0, 0, 0, 0.2) 82%,
            rgba(0, 0, 0, 0.74)
          ),
          radial-gradient(
            ellipse at center,
            transparent 32%,
            rgba(0, 0, 0, 0.31) 72%,
            rgba(0, 0, 0, 0.68)
          ),
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.14),
            transparent 38%,
            rgba(0, 0, 0, 0.14)
          );
      }
      header {
        position: absolute;
        z-index: 20;
        top: 30px;
        left: 30px;
        right: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
      }
      .brand {
        font-family: "Forum", "Forum Fallback", "Alice", "Alice Fallback", serif;
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0.34em;
        color: rgba(244, 238, 226, 0.9);
        text-align: center;
        text-transform: uppercase;
      }
      .hero {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: grid;
        grid-template-columns: 0.95fr 1.30fr;
        align-items: center;
        padding: 120px 8vw 90px;
        pointer-events: none;
      }
      .portal-wrap {
        position: relative;
        height: 520px;
        perspective: 950px;
        transform: translateY(0);
        will-change: transform;
      }
      .card-glow {
        position: absolute;
        left: 6%;
        top: 22%;
        width: 380px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(216, 174, 103, 0.22),
          rgba(181, 107, 78, 0.12) 38%,
          rgba(125, 92, 255, 0.07) 58%,
          transparent 74%
        );
        filter: blur(18px);
      }
      .portal-wrap.orbit-ready .card-glow {
        display: none;
      }
      /* ═══════════════════════════════════════════════════════════════
         FALLBACK CARD STACK — запасная стопка карт, пока орбита не загрузилась
         ═══════════════════════════════════════════════════════════════ */
      .card-stack {
        position: absolute;
        left: 6%;
        top: 13%;
        width: 315px;
        height: 465px;
        transform-style: preserve-3d;
        transform: rotateY(-23deg) rotateZ(-5deg);
        animation: float 7.2s ease-in-out infinite;
        pointer-events: auto;
        will-change: transform;
      }
      html.page-js .portal-wrap:not(.orbit-ready) .card-stack {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      @keyframes float {
        50% {
          transform: rotateY(-20deg) rotateZ(-4deg) translateY(-10px);
        }
      }
      .card-fx-shell {
        position: absolute;
        inset: -34px -20px -42px -20px;
        transform: translateZ(-86px) translate(86px, -58px) rotateY(11deg);
        opacity: 0.92;
        border: 1px solid rgba(216, 174, 103, 0.4);
        background: #040409;
        box-shadow:
          0 0 0 6px rgba(216, 174, 103, 0.05),
          0 30px 90px rgba(125, 92, 255, 0.2);
        overflow: hidden;
        pointer-events: none;
        animation: fxDrift 9s ease-in-out infinite;
      }
      .card-fx-shell:before {
        content: "";
        position: absolute;
        inset: 18px;
        border: 1px solid rgba(244, 238, 226, 0.2);
      }
      #cardFx {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      @keyframes fxDrift {
        50% {
          transform: translateZ(-78px) translate(80px, -54px) rotateY(13deg);
        }
      }
      .tarot-card {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(216, 174, 103, 0.65);
        background:
          linear-gradient(135deg, rgba(181, 107, 78, 0.14), transparent 28%),
          radial-gradient(
            circle at 50% 34%,
            rgba(216, 174, 103, 0.15),
            transparent 26%
          ),
          #090609;
        box-shadow:
          0 0 0 8px rgba(216, 174, 103, 0.04),
          0 28px 90px rgba(181, 107, 78, 0.28);
        overflow: hidden;
      }
      .tarot-card.front {
        transform: translateZ(0);
        will-change: transform;
      }
      .tarot-card:before {
        content: "";
        position: absolute;
        inset: 22px;
        border: 1px solid rgba(244, 238, 226, 0.25);
      }
      .tarot-card:after {
        content: "☾  ✦  XVII  ✦  ☼";
        position: absolute;
        inset: 44px;
        display: grid;
        place-items: center;
        text-align: center;
        font-family: "Forum", "Forum Fallback", "Alice", "Alice Fallback", serif;
        font-size: 34px;
        line-height: 1.25;
        color: rgba(216, 174, 103, 0.84);
        text-shadow: 0 0 30px rgba(216, 174, 103, 0.4);
        writing-mode: vertical-rl;
        text-orientation: mixed;
      }
      /* ═══════════════════════════════════════════════════════════════
         TEXT CONTENT BLOCK — текстовый блок справа
         ═══════════════════════════════════════════════════════════════ */
      .content {
        position: relative;
        isolation: isolate;
        text-align: center;
        transform: translateX(-3vw);
        pointer-events: auto;
        will-change: transform;
      }
      .content:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 48%;
        z-index: -1;
        width: min(680px, 52vw);
        height: min(570px, 60vh);
        transform: translate(-50%, -48%);
        pointer-events: none;
        background: radial-gradient(
          ellipse at center,
          rgba(0, 0, 0, 0.68) 0,
          rgba(0, 0, 0, 0.52) 34%,
          rgba(0, 0, 0, 0.24) 64%,
          transparent 78%
        );
        filter: blur(24px);
      }
      .content:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 66%;
        z-index: -1;
        width: min(760px, 50vw);
        height: 380px;
        transform: translate(-50%, -12%);
        pointer-events: none;
        border-radius: 50%;
        background: radial-gradient(
          ellipse at center,
          rgba(0, 0, 0, 0.78) 0,
          rgba(0, 0, 0, 0.58) 32%,
          rgba(0, 0, 0, 0.28) 62%,
          transparent 82%
        );
        filter: blur(42px);
      }
      .eyebrow {
        color: var(--muted);
        letter-spacing: 0.48em;
        text-transform: uppercase;
        font-size: 12px;
        margin-bottom: 22px;
      }
      .spread-badge {
        width: min(100%, 560px);
        min-height: 2.6em;
        margin: 0 auto 10px;
        color: rgba(216, 174, 103, 0.86);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1.3;
        text-align: center;
        text-wrap: balance;
      }
      h1 {
        margin: 0;
        font-family: "Forum", "Forum Fallback", "Alice", "Alice Fallback", serif;
        font-weight: 300;
        font-size: clamp(48px, 5.6vw, 87px);
        line-height: 0.88;
        letter-spacing: 0.12em;
        color: rgba(244, 238, 226, 0.9);
      }
      .lead {
        max-width: 540px;
        margin: 34px auto 0;
        color: rgba(244, 238, 226, 0.72);
        font-size: 18px;
        line-height: 1.45;
      }
      @media (min-width: 901px) {
        #spreadBadge {
          margin-top: 19px;
        }
        #spreadTitle {
          padding-bottom: 9px;
        }
      }
      .slide-clip {
        display: block;
        overflow: hidden;
        position: relative;
      }
      .slide-text {
        display: block;
        will-change: transform, opacity;
      }
      .lead.slide-clip {
        min-height: 4.45em;
      }
      .bottom .slide-clip {
        min-width: 150px;
      }
      #cardName {
        text-align: right;
      }
      /* ═══════════════════════════════════════════════════════════════
         MORPH BUTTONS — круглые кнопки с анимированными кольцами
         ═══════════════════════════════════════════════════════════════ */
      .morph-btn {
        --morph-btn-size: 180px;
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 50%;
        color: #f4eee2;
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        font-size: 13px;
        font-weight: 700;
        height: var(--morph-btn-size);
        isolation: isolate;
        justify-content: center;
        letter-spacing: 0.14em;
        outline: none;
        padding: 0;
        position: relative;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        transition:
          color 0.25s cubic-bezier(0.25, 0.25, 0, 1),
          border-color 0.25s cubic-bezier(0.25, 0.25, 0, 1),
          background-color 0.25s cubic-bezier(0.25, 0.25, 0, 1),
          opacity 0.25s cubic-bezier(0.25, 0.25, 0, 1),
          transform 0.25s cubic-bezier(0.25, 0.25, 0, 1);
        user-select: none;
        width: var(--morph-btn-size);
      }
      .morph-btn__canvas {
        height: 130%;
        left: 50%;
        opacity: 0.5;
        pointer-events: none;
        position: absolute;
        top: 42%;
        transform: translate(-50%, -50%);
        width: 130%;
      }
      .morph-btn::after {
        content: "";
        position: absolute;
        inset: 9%;
        z-index: 1;
        border: 1px solid rgba(216, 174, 103, 0.42);
        border-radius: 50%;
        opacity: 0.88;
        pointer-events: none;
        box-shadow:
          inset 0 0 0 1px rgba(244, 238, 226, 0.055),
          0 0 22px rgba(216, 174, 103, 0.16);
        transition: opacity 0.2s ease, border-color 0.2s ease;
      }
      .morph-btn:hover::after,
      .morph-btn.is-active::after,
      .morph-btn.is-ready::after {
        border-color: rgba(216, 174, 103, 0.72);
        box-shadow:
          inset 0 0 0 1px rgba(244, 238, 226, 0.08),
          0 0 26px rgba(216, 174, 103, 0.24);
      }
      html.perf-high .morph-btn::after {
        border-color: rgba(244, 238, 226, 0.22);
        box-shadow:
          inset 0 0 0 1px rgba(244, 238, 226, 0.04),
          0 0 18px rgba(244, 238, 226, 0.08);
      }
      @media (hover: hover) and (pointer: fine) {
        html.perf-high .morph-btn:hover::after,
        html.perf-high .morph-btn.is-active::after,
        html.perf-high .morph-btn.is-ready::after {
          border-color: rgba(244, 238, 226, 0.38);
          box-shadow:
            inset 0 0 0 1px rgba(244, 238, 226, 0.07),
            0 0 22px rgba(244, 238, 226, 0.12);
        }
      }
      .morph-btn:focus-visible::after {
        border-color: rgba(255, 232, 169, 0.92);
        box-shadow:
          inset 0 0 0 1px rgba(255, 232, 169, 0.2),
          0 0 0 3px rgba(216, 174, 103, 0.22),
          0 0 28px rgba(216, 174, 103, 0.22);
      }
      html.perf-high .morph-btn::after {
        opacity: 0;
      }
      html.perf-high .morph-btn:focus-visible::after {
        opacity: 1;
      }
      .morph-btn__text {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.2;
        position: relative;
        z-index: 2;
      }
      .cta-orbit {
        --morph-btn-size: 166px;
        width: var(--morph-btn-size);
        height: var(--morph-btn-size);
        margin: 58px auto 0;
      }
      .cta-orbit:before {
        content: "";
        position: absolute;
        inset: -34%;
        z-index: 0;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(
          circle,
          rgba(0, 0, 0, 0.68) 0,
          rgba(0, 0, 0, 0.44) 43%,
          transparent 72%
        );
        filter: blur(18px);
      }
      .cta-orbit .morph-btn__text {
        font-size: 13px;
        letter-spacing: 0.16em;
        padding-inline: 10px;
        line-height: 1.15;
        transform: translateY(-7px);
      }
      .mobile-slider-controls {
        display: none;
      }
      .side-arrow,
      .top-arrow {
        position: absolute;
        z-index: 14;
        display: grid;
        place-items: center;
        color: rgba(244, 238, 226, 0.76);
        font-size: 22px;
        user-select: none;
      }
      .side-arrow {
        --morph-btn-size: 72px;
        width: var(--morph-btn-size);
        height: var(--morph-btn-size);
        border: 0;
        background: transparent;
        padding: 0;
      }
      .side-arrow .morph-btn__text {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0;
        transform: translateY(0) scaleX(0.8);
        transform-origin: center;
      }
      .side-arrow.left {
        left: 18px;
        top: 50%;
      }
      .side-arrow.right {
        right: 18px;
        top: 50%;
      }
      .top-arrow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        --morph-btn-size: 68px;
        width: var(--morph-btn-size) !important;
        height: var(--morph-btn-size) !important;
        min-width: var(--morph-btn-size);
        min-height: var(--morph-btn-size);
        pointer-events: none;
        opacity: 0;
        transform: translate3d(-999px, -999px, 0) translate3d(-50%, -50%, 0);
        transition: opacity 0.18s linear;
        will-change: transform, opacity;
        border: 0;
        background: transparent;
        padding: 0;
        overflow: visible;
      }
      .top-arrow:before {
        content: "";
        position: absolute;
        inset: 16%;
        border-radius: 50%;
        background: rgba(8, 10, 16, 0.14);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1;
      }
      .top-arrow .morph-btn__canvas {
        opacity: 0.56;
        z-index: 2;
        transform: translate(-50%, -50%) rotate(-15deg);
      }
      .top-arrow .morph-btn__text {
        display: none;
      }
      .top-arrow.idle {
        opacity: 0.62;
      }
      .top-arrow.visible {
        opacity: 1;
      }
      .top-arrow.hidden {
        opacity: 0 !important;
      }
      @media screen and (max-width: 1366px) {
        .top-arrow {
          --morph-btn-size: 57px;
        }
      }
      @media (min-width: 901px) and (max-width: 1350px) {
        .hero {
          grid-template-columns: 0.82fr 1.38fr;
          padding-inline: clamp(52px, 6vw, 82px);
        }
        .content {
          transform: translateX(6vw);
        }
        .lead {
          max-width: 450px;
        }
      }
      /* ═══════════════════════════════════════════════════════════════
         FOG LAYERS — слои тумана над водой
         ═══════════════════════════════════════════════════════════════ */
      .fog {
        position: absolute;
        z-index: 9;
        left: -8%;
        right: -8%;
        bottom: 20%;
        height: 150px;
        pointer-events: none;
        opacity: 0.43;
        filter: blur(18px);
        mix-blend-mode: screen;
      }
      .fog:before,
      .fog:after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse at 12% 58%,
            rgba(255, 255, 255, 0.08),
            transparent 22%
          ),
          radial-gradient(
            ellipse at 34% 42%,
            rgba(210, 220, 255, 0.065),
            transparent 18%
          ),
          radial-gradient(
            ellipse at 53% 60%,
            rgba(255, 255, 255, 0.07),
            transparent 24%
          ),
          radial-gradient(
            ellipse at 74% 44%,
            rgba(255, 255, 255, 0.052),
            transparent 20%
          );
        animation: fogDrift 36s ease-in-out infinite alternate;
      }
      .fog:after {
        opacity: 0.62;
        transform: translateY(16px) scale(1.1);
        animation-duration: 44s;
        animation-delay: -8s;
      }
      @keyframes fogDrift {
        0% {
          transform: translateX(-1.8%);
        }
        100% {
          transform: translateX(2.6%) translateY(2px);
        }
      }
      /* ═══════════════════════════════════════════════════════════════
         BOTTOM BAR — нижняя панель: прогресс и подписи
         ═══════════════════════════════════════════════════════════════ */
      .bottom {
        position: absolute;
        z-index: 18;
        left: 22%;
        right: 22%;
        bottom: 28px;
        display: flex;
        align-items: center;
        gap: 18px;
        color: var(--muted);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-size: 12px;
        font-family: inherit;
        user-select: none;
        will-change: transform;
      }
      .progress {
        --progress-x: 0%;
        flex: 1;
        height: 28px;
        background: transparent;
        position: relative;
      }
      .progress:before {
        content: "";
        position: absolute;
        left: var(--progress-x);
        top: 50%;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #f4eee2;
        box-shadow: 0 0 0 14px rgba(244, 238, 226, 0.06);
        transform: translate(-50%, -50%);
        z-index: 4;
        transition:
          left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.55s ease;
      }
      .progress:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background: rgba(244, 238, 226, 0.18);
        transform: translateY(-50%);
      }
      .progress__dot {
        appearance: none;
        position: absolute;
        left: var(--dot-x, 0%);
        top: 50%;
        z-index: 3;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        padding: 0;
        transform: translate(-50%, -50%);
      }
      .progress__dot:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(244, 238, 226, 0.5);
        box-shadow: 0 0 0 5px rgba(244, 238, 226, 0.04);
        transform: translate(-50%, -50%);
        transition:
          background-color 0.25s ease,
          box-shadow 0.25s ease,
          transform 0.25s ease;
      }
      .progress__dot:hover:before,
      .progress__dot:focus-visible:before {
        background: rgba(244, 238, 226, 0.92);
        box-shadow: 0 0 0 8px rgba(244, 238, 226, 0.09);
        transform: translate(-50%, -50%) scale(1.15);
      }
      .progress__dot.is-active:before {
        background: #f4eee2;
        box-shadow: 0 0 0 8px rgba(244, 238, 226, 0.1);
      }
      @media (pointer: fine) {
        html.perf-high.custom-cursor-ready .page,
        html.perf-high.custom-cursor-ready .page * {
          cursor: none !important;
        }
      }
      @media (min-width: 901px) {
        html.perf-standard .spread-object,
        html.perf-lite .spread-object {
          --spread-card-size-scale: 0.94;
          width: clamp(520px, 42vw, 900px);
          height: clamp(500px, 44vw, 790px);
        }

        html.perf-lite .spread-object {
          --spread-card-size-scale: 0.84;
          width: clamp(470px, 38vw, 810px);
          height: clamp(450px, 40vw, 710px);
        }
      }
      @media (min-width: 901px) and (max-height: 760px) {
        .hero {
          grid-template-columns: 0.86fr 1.24fr;
          padding: 78px clamp(46px, 6vw, 80px) 84px;
        }

        .spread-orbit {
          left: clamp(-560px, -41vw, -310px);
          top: 28%;
          width: 104vw;
          height: min(600px, 72vh);
        }

        .spread-object {
          --spread-card-size-scale: 0.78;
          width: clamp(420px, 39vw, 560px);
          height: clamp(400px, 41vw, 540px);
        }

        html.perf-lite .spread-object {
          --spread-card-size-scale: 0.7;
          width: clamp(380px, 35vw, 505px);
          height: clamp(365px, 37vw, 485px);
        }

        .content {
          transform: translateX(1vw);
        }

        .spread-badge {
          min-height: 2.4em;
          margin-bottom: 6px;
          font-size: 13px;
        }

        h1 {
          font-size: clamp(42px, 4.8vw, 58px);
          line-height: 0.92;
        }

        .lead {
          margin-top: 22px;
          font-size: 16px;
          line-height: 1.36;
        }

        .lead.slide-clip {
          min-height: 4.1em;
        }

        .cta-orbit {
          --morph-btn-size: 132px;
          margin-top: 26px;
        }

        .bottom {
          left: 24%;
          right: 24%;
          bottom: 18px;
        }
      }
      @media (min-width: 901px) and (max-width: 1180px) and (max-height: 700px) {
        .hero {
          grid-template-columns: 0.82fr 1.18fr;
          padding-top: 72px;
          padding-bottom: 76px;
        }

        .spread-orbit {
          top: 30%;
          height: min(540px, 68vh);
        }

        .spread-object {
          --spread-card-size-scale: 0.72;
          width: clamp(390px, 36vw, 480px);
          height: clamp(370px, 37vw, 460px);
        }

        html.perf-lite .spread-object {
          --spread-card-size-scale: 0.66;
          width: clamp(360px, 34vw, 440px);
          height: clamp(345px, 35vw, 425px);
        }

        .lead {
          margin-top: 18px;
          font-size: 15px;
        }

        .lead.slide-clip {
          min-height: 3.9em;
        }

        .cta-orbit {
          --morph-btn-size: 118px;
          margin-top: 18px;
        }
      }
      @media (max-width: 900px) {
        :root {
          --mobile-bottom-nav-offset: 18px;
        }
        html {
          height: auto;
          min-height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
        }
        body {
          height: auto;
          min-height: 100%;
          overflow-x: clip;
          overflow-y: visible;
        }
        .page {
          height: auto;
          min-height: 100svh;
          overflow-x: clip;
          overflow-y: visible;
        }
        .page-content {
          height: auto;
          min-height: 100svh;
          overflow: visible;
        }
        .site-footer {
          width: 100%;
          padding: 40px 24px calc(32px + env(safe-area-inset-bottom));
        }
        .site-footer::before {
          margin-bottom: 24px;
        }
        .site-footer__grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .site-footer__text,
        .site-footer__disclaimer,
        .site-footer__copyright {
          font-size: 11px;
        }
        .site-footer__disclaimer {
          margin-top: 26px;
          text-align: left;
        }
        @supports (height: 100dvh) {
          .page {
            min-height: 100dvh;
          }
          .page-content {
            min-height: 100dvh;
          }
        }
        header {
          top: max(20px, calc(env(safe-area-inset-top) + 18px));
          left: max(20px, calc(env(safe-area-inset-left) + 20px));
          right: auto;
          justify-content: flex-start;
        }
        .locale-switcher {
          top: max(24px, calc(env(safe-area-inset-top) + 22px));
          right: max(20px, calc(env(safe-area-inset-right) + 20px));
        }
        .brand {
          font-size: 22px;
        }
        .hero {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          width: 100%;
          gap: clamp(10px, 1.6svh, 18px);
          padding: clamp(72px, 9svh, 84px) 24px clamp(36px, 7svh, 66px);
          min-height: 100svh;
        }
        .portal-wrap {
          order: 2;
          width: 100%;
          height: clamp(300px, 44svh, 420px);
          margin-inline: auto;
          opacity: 0.72;
          position: relative;
          transform: none;
          will-change: auto;
        }
        .content {
          order: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          max-width: min(640px, calc(100vw - 48px));
          margin: clamp(12px, 2svh, 28px) auto 0;
          transform: none;
          will-change: auto;
          min-width: 0;
        }
        .content h1 {
          width: min(100%, 360px);
          max-width: 100%;
          height: auto;
          min-height: 0;
          min-width: 0;
          margin-inline: auto;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .spread-badge {
          order: 1;
          width: min(100%, 260px);
          min-height: 3.6em;
          margin-bottom: 6px;
          font-size: 12px;
          letter-spacing: 0.02em;
          line-height: 1.22;
        }
        html[lang="en"] #spreadBadge {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
        html[lang="en"] #spreadBadge .slide-text {
          display: flex;
          align-items: flex-end;
          justify-content: center;
          width: 100%;
          min-height: 3.6em;
        }
        .content h1 .slide-text {
          max-width: 100%;
          padding-block: 0.06em 0.08em;
          line-height: 1.06;
          white-space: normal;
          overflow-wrap: normal;
          text-wrap: balance;
        }
        .content h1 {
          order: 2;
        }
        .mobile-slider-controls {
          order: 4;
          position: absolute;
          top: calc(100% + clamp(12px, 2.6svh, 26px));
          left: 50%;
          z-index: 45;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
          margin: 0;
          width: 100vw;
          padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
          pointer-events: none;
          transform: translateX(-50%);
        }
        .mobile-slider-controls .side-arrow {
          position: relative;
          inset: auto;
          display: grid;
          --morph-btn-size: 58px;
          width: var(--morph-btn-size);
          height: var(--morph-btn-size);
          flex: 0 0 auto;
          z-index: 2;
          overflow: visible;
          border: 0;
          background: transparent;
          box-shadow: none;
          color: rgba(244, 238, 226, 0.88);
          pointer-events: auto;
        }
        .mobile-slider-controls .side-arrow .morph-btn__canvas {
          width: 130%;
          height: 130%;
          opacity: 0.5;
        }
        .mobile-slider-controls .side-arrow .morph-btn__text {
          font-size: 20px;
          transform: translateY(0) scaleX(0.8);
        }
        .cta-orbit {
          --main-cta-flow-gap: clamp(90px, 11svh, 108px);
          margin: var(--main-cta-flow-gap) auto 0;
          --morph-btn-size: 136px;
        }
        .page-content {
          touch-action: pan-y;
        }
        .lead {
          order: 3;
          max-width: 100%;
          font-size: 16px;
          margin: 24px auto 0;
          text-align: center;
        }
        .lead.slide-clip {
          width: min(100%, 340px);
          max-width: calc(100vw - 56px);
          min-height: 5.8em;
          min-width: 0;
        }
        .lead.slide-clip .slide-text {
          width: 100%;
          max-width: 100%;
          margin-inline: auto;
          white-space: normal;
          overflow-wrap: break-word;
        }
        .page-content > .side-arrow,
        .page-content > .top-arrow {
          display: none;
        }
        .mobile-slider-controls {
          display: flex;
        }
        .bottom {
          left: 24px;
          right: 24px;
          bottom: calc(
            var(--mobile-bottom-nav-offset) + env(safe-area-inset-bottom, 0px)
          );
          display: grid;
          grid-template-columns: minmax(70px, max-content) minmax(54px, 1fr) minmax(70px, max-content);
          gap: 10px;
          font-size: 10px;
          letter-spacing: 0.12em;
        }
        .page > .page-content > .bottom:not(.bottom--simple) {
          display: none;
        }
        .bottom .slide-clip {
          min-width: 0;
          max-width: 118px;
          text-overflow: ellipsis;
        }
        .progress {
          min-width: 54px;
        }
        .bottom > span:last-child {
          text-align: right;
          white-space: nowrap;
        }
        .webgl-note {
          display: none;
        }
      }
      @media (max-width: 900px) and (max-height: 850px) {
        .hero {
          gap: 8px;
          padding-top: 68px;
          padding-bottom: 56px;
        }
        .portal-wrap {
          height: clamp(250px, 36svh, 310px);
        }
        .content {
          margin-top: 14px;
        }
        .content h1 {
          width: min(100%, 300px);
          font-size: 40px;
          line-height: 0.98;
        }
        .spread-badge {
          width: min(100%, 250px);
          min-height: 3.4em;
          margin-bottom: 5px;
          font-size: 11px;
        }
        .mobile-slider-controls {
          top: calc(100% + 12px);
        }
        .lead {
          margin-top: 16px;
          font-size: 15px;
          line-height: 1.36;
        }
        .lead.slide-clip {
          width: min(100%, 300px);
          min-height: 5.2em;
        }
        .cta-orbit {
          --morph-btn-size: 112px;
          --main-cta-flow-gap: clamp(68px, 8svh, 82px);
          margin-top: var(--main-cta-flow-gap);
        }
        .bottom {
          left: 18px;
          right: 18px;
        }
      }
      @media (max-width: 900px) and (max-height: 700px) {
        html {
          overflow-y: auto;
        }
        .page:not(.page--form):not(.page--checkout):not(.page--select):not(.page--result) {
          min-height: 720px;
          overflow-y: hidden;
        }
        .page-content {
          min-height: auto;
        }
        .hero {
          justify-content: flex-start;
          min-height: 720px;
          padding-top: 62px;
          padding-bottom: 44px;
        }
        .portal-wrap {
          height: 230px;
        }
        .content h1 {
          width: min(100%, 280px);
          font-size: 36px;
          line-height: 1;
        }
        .spread-badge {
          width: min(100%, 230px);
          min-height: 3.2em;
          margin-bottom: 4px;
          font-size: 10px;
        }
        .mobile-slider-controls {
          top: calc(100% + 8px);
        }
        .lead {
          margin-top: 12px;
          font-size: 14px;
        }
        .lead.slide-clip {
          width: min(100%, 300px);
          min-height: 4.9em;
        }
        .cta-orbit {
          --main-cta-flow-gap: 52px;
          margin-top: var(--main-cta-flow-gap);
        }
      }
      .tarot-card.front {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
      }
      .tarot-card.front picture,
      .tarot-card.front img {
        width: 100%;
        height: 100%;
      }
      .tarot-card.front picture {
        display: block;
      }
      .tarot-card.front img {
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 0 20px rgba(216, 174, 103, 0.28))
          drop-shadow(0 20px 52px rgba(181, 107, 78, 0.24));
      }
      .tarot-card.front:before,
      .tarot-card.front:after {
        content: none;
      }
      /* ═══════════════════════════════════════════════════════════════
         3D ORBIT CONTAINER — карусель карт в 3D-пространстве
         TWEAK: perspective: 1600px → чем меньше, тем сильнее 3D-эффект
         ═══════════════════════════════════════════════════════════════ */
      .spread-orbit {
        position: absolute;
        left: clamp(-750px, -42vw, -350px);
        top: 24%;
        z-index: 6;
        width: 112vw;
        height: min(760px, 78vh);
        transform: translateY(-50%);
        transform-style: preserve-3d;
        perspective: 1600px;
        pointer-events: none;
      }
      .spread-orbit.is-ready ~ .card-stack {
        display: none;
      }
      .spread-orbit__world {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        will-change: transform;
      }
      .spread-object {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: clamp(565px, 45vw, 1010px);
        height: clamp(548px, 47vw, 875px);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        will-change: transform, opacity, filter;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
      .spread-object__aura {
        position: absolute;
        inset: 8%;
        border-radius: 50%;
        background:
          radial-gradient(
            circle at 48% 42%,
            rgba(255, 244, 220, 0.22),
            rgba(216, 174, 103, 0.12) 34%,
            rgba(125, 92, 255, 0.08) 58%,
            transparent 74%
          ),
          radial-gradient(
            circle at 58% 62%,
            rgba(181, 107, 78, 0.12),
            transparent 62%
          );
        filter: blur(28px);
        opacity: 0.22;
        pointer-events: none;
        transform: translateZ(-42px);
      }
      .spread-object__plate {
        position: absolute;
        inset: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        transform-style: flat;
      }
      .spread-object__plate:before {
        content: none;
      }
      .spread-object__cards {
        position: absolute;
        inset: 0;
        isolation: isolate;
        transform-style: flat;
        animation: spreadCardsFloat 7.2s ease-in-out infinite;
        will-change: transform;
      }
      .spread-object:not(.is-active) .spread-object__cards,
      .spread-object:not(.is-active) .spread-card,
      .spread-object:not(.is-active) .spread-card img,
      .spread-object:not(.is-active) .spread-card::after {
        animation: none !important;
        will-change: auto !important;
      }
      .spread-object__cards:before {
        content: "";
        position: absolute;
        inset: 12% 8% 14%;
        z-index: 0;
        border-radius: 50%;
        background:
          radial-gradient(
            circle at 50% 44%,
            rgba(216, 174, 103, 0.16),
            rgba(181, 107, 78, 0.08) 36%,
            transparent 68%
          );
        filter: blur(26px);
        opacity: 0.28;
        pointer-events: none;
      }
      .spread-card {
        position: absolute;
        left: 50%;
        top: 47%;
        width: calc(var(--card-w, 112px) * var(--spread-card-size-scale, 1));
        aspect-ratio: 907 / 1600;
        border-radius: 4px;
        overflow: hidden;
        background: transparent;
        box-shadow:
          0 14px 22px rgba(0, 0, 0, 0.36),
          -7px 16px 24px rgba(0, 0, 0, 0.24),
          0 0 0 1px rgba(216, 174, 103, 0.24),
          inset 0 0 0 1px rgba(255, 244, 220, 0.08);
        filter:
          drop-shadow(0 15px 18px rgba(0, 0, 0, 0.22))
          drop-shadow(0 0 12px rgba(216, 174, 103, 0.1));
        transform: translate3d(
            calc(-50% + var(--card-x, 0px)),
            calc(-50% + var(--card-y, 0px)),
            0
          )
          rotateZ(var(--card-rot, 0deg))
          scale(var(--card-scale, 1));
        transform-origin: 50% 86%;
        z-index: var(--card-order, 1);
        backface-visibility: hidden;
        will-change: auto;
      }
      .spread-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.04) contrast(1.03);
        transform: translateZ(0);
        image-rendering: auto;
      }
      .spread-card:before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
        background:
          radial-gradient(
            circle at 30% 16%,
            rgba(255, 244, 220, 0.22),
            transparent 28%
          ),
          linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.16),
            transparent 24%,
            transparent 58%,
            rgba(216, 174, 103, 0.14)
          );
        mix-blend-mode: screen;
        opacity: 0.32;
        pointer-events: none;
      }
      .spread-card:after {
        content: "";
        position: absolute;
        inset: -48% -76%;
        z-index: 3;
        background: linear-gradient(
          105deg,
          transparent 38%,
          rgba(255, 255, 255, 0.1) 45%,
          rgba(216, 174, 103, 0.22) 50%,
          transparent 58%
        );
        mix-blend-mode: screen;
        opacity: 0.18;
        pointer-events: none;
        transform: translateX(-24%) rotate(8deg);
        animation: spreadCardSheen 7.4s ease-in-out infinite;
        animation-delay: calc(var(--float-delay, 0s) * -0.45);
      }
      .spread-object__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.72;
        filter: drop-shadow(0 0 20px rgba(216, 174, 103, 0.24)) saturate(0.9);
      }
      .spread-object__veil {
        display: none;
      }
      .spread-object.is-active .spread-object__plate {
        box-shadow: none;
      }
      .spread-object.is-active .spread-card {
        box-shadow:
          0 18px 30px rgba(0, 0, 0, 0.4),
          -9px 22px 32px rgba(0, 0, 0, 0.28),
          0 0 0 1px rgba(216, 174, 103, 0.4),
          0 0 24px rgba(216, 174, 103, 0.14),
          inset 0 0 0 1px rgba(255, 244, 220, 0.12);
        filter:
          drop-shadow(0 20px 22px rgba(0, 0, 0, 0.28))
          drop-shadow(0 0 16px rgba(216, 174, 103, 0.16));
      }
      .spread-object.is-active .spread-card:before {
        opacity: 0.42;
      }
      .spread-object.is-active .spread-card:after {
        opacity: 0.34;
      }
      @keyframes spreadCardsFloat {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        }
        50% {
          transform: translate3d(0, -12px, 28px) rotateX(1.8deg)
            rotateY(-1.2deg);
        }
      }
      @keyframes spreadCardSheen {
        0%,
        35% {
          transform: translateX(-28%) rotate(8deg);
        }
        68% {
          transform: translateX(28%) rotate(8deg);
        }
        100% {
          transform: translateX(34%) rotate(8deg);
        }
      }
      .spread-object.is-next .spread-object__aura {
        opacity: 0.26;
      }
      .spread-object.is-next .spread-object__plate {
        border-color: rgba(216, 174, 103, 0.38);
      }
      .fog-back,
      .fog-mid,
      .fog-front {
        position: absolute;
        pointer-events: none;
        will-change: transform, opacity;
      }
      .fog-back {
        inset: -8%;
        z-index: 3;
        opacity: 0.35;
        filter: blur(44px);
      }
      .fog-back::before,
      .fog-back::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
          radial-gradient(
            ellipse at 20% 60%,
            rgba(210, 220, 255, 0.055),
            transparent 28%
          ),
          radial-gradient(
            ellipse at 70% 40%,
            rgba(244, 238, 226, 0.04),
            transparent 22%
          ),
          radial-gradient(
            ellipse at 45% 75%,
            rgba(210, 220, 255, 0.045),
            transparent 30%
          );
        animation: fogBackDrift 52s ease-in-out infinite alternate;
      }
      .fog-back::after {
        opacity: 0.55;
        transform: translateY(24px) scale(1.12);
        animation-duration: 64s;
        animation-direction: alternate-reverse;
      }
      .fog-mid {
        inset: -4%;
        z-index: 8;
        opacity: 0.42;
        filter: blur(18px) url(#turbulence);
        transform: translate3d(
          calc(var(--fog-mid-x, 0) * 1px),
          calc(var(--fog-mid-y, 0) * 1px),
          0
        );
      }
      .fog-mid::before,
      .fog-mid::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
          radial-gradient(
            ellipse at 15% 35%,
            rgba(255, 255, 255, 0.065),
            transparent 18%
          ),
          radial-gradient(
            ellipse at 55% 25%,
            rgba(244, 238, 226, 0.05),
            transparent 16%
          ),
          radial-gradient(
            ellipse at 80% 65%,
            rgba(255, 255, 255, 0.055),
            transparent 20%
          ),
          radial-gradient(
            ellipse at 35% 80%,
            rgba(210, 220, 255, 0.04),
            transparent 22%
          ),
          radial-gradient(
            ellipse at 65% 50%,
            rgba(255, 255, 255, 0.045),
            transparent 18%
          ),
          radial-gradient(
            ellipse at 25% 60%,
            rgba(244, 238, 226, 0.035),
            transparent 24%
          );
        animation: fogMidDrift 38s ease-in-out infinite alternate;
      }
      .fog-mid::after {
        opacity: 0.6;
        transform: translateX(18px) scale(1.08);
        animation-duration: 48s;
        animation-direction: alternate-reverse;
      }
      .fog-front {
        left: -10%;
        right: -10%;
        bottom: -10%;
        height: 62vh;
        z-index: 9;
        opacity: 0.82;
        overflow: hidden;
        mix-blend-mode: screen;
        transform: translate3d(
            calc(var(--fog-front-x, 0) * 0.42px),
            calc(var(--fog-front-y, 0) * 0.3px),
            0
          )
          skewX(calc(var(--fog-front-x, 0) * 0.006deg));
      }
      .fog-front::before,
      .fog-front::after {
        content: "";
        position: absolute;
        left: -20%;
        right: -20%;
        top: 0;
        bottom: 0;
        background:
          conic-gradient(
            from 24deg at 14% 42%,
            transparent 0 18deg,
            rgba(230, 238, 255, 0.11) 34deg,
            transparent 62deg 154deg,
            rgba(255, 255, 255, 0.075) 178deg,
            transparent 216deg 360deg
          ),
          conic-gradient(
            from 206deg at 34% 38%,
            transparent 0 24deg,
            rgba(255, 255, 255, 0.12) 48deg,
            transparent 86deg 196deg,
            rgba(210, 224, 245, 0.08) 232deg,
            transparent 280deg 360deg
          ),
          conic-gradient(
            from 112deg at 64% 36%,
            transparent 0 30deg,
            rgba(222, 232, 248, 0.095) 58deg,
            transparent 104deg 220deg,
            rgba(255, 255, 255, 0.068) 248deg,
            transparent 292deg 360deg
          ),
          conic-gradient(
            from 284deg at 84% 46%,
            transparent 0 20deg,
            rgba(238, 244, 255, 0.09) 46deg,
            transparent 88deg 184deg,
            rgba(210, 224, 245, 0.068) 216deg,
            transparent 270deg 360deg
          ),
          radial-gradient(
            ellipse at 12% 72%,
            rgba(245, 250, 255, 0.2),
            rgba(206, 222, 238, 0.078) 18%,
            transparent 38%
          ),
          radial-gradient(
            ellipse at 30% 76%,
            rgba(255, 255, 255, 0.26),
            rgba(210, 224, 240, 0.09) 20%,
            transparent 44%
          ),
          radial-gradient(
            ellipse at 52% 70%,
            rgba(230, 240, 250, 0.18),
            rgba(188, 210, 230, 0.074) 22%,
            transparent 46%
          ),
          radial-gradient(
            ellipse at 76% 72%,
            rgba(238, 246, 255, 0.18),
            rgba(204, 222, 240, 0.07) 21%,
            transparent 44%
          ),
          radial-gradient(
            ellipse at 94% 66%,
            rgba(215, 230, 248, 0.12),
            rgba(190, 210, 232, 0.052) 18%,
            transparent 36%
          ),
          linear-gradient(
            to top,
            rgba(190, 210, 230, 0.18),
            rgba(210, 226, 242, 0.08) 24%,
            rgba(255, 255, 255, 0.035) 48%,
            transparent 76%
          );
        background-size:
          42% 62%,
          48% 66%,
          52% 70%,
          42% 62%,
          48% 58%,
          52% 62%,
          56% 60%,
          52% 58%,
          46% 54%,
          100% 100%;
        background-position:
          -4% 6%,
          24% 2%,
          56% 6%,
          86% 12%,
          -4% 58%,
          22% 62%,
          48% 58%,
          74% 62%,
          98% 54%,
          0 0;
        -webkit-mask-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.96),
          rgba(0, 0, 0, 0.74) 46%,
          rgba(0, 0, 0, 0.24) 74%,
          transparent 94%
        );
        mask-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.96),
          rgba(0, 0, 0, 0.74) 46%,
          rgba(0, 0, 0, 0.24) 74%,
          transparent 94%
        );
        filter: blur(7px) url(#turbulence) contrast(1.18);
        animation: fogFrontWisp 24s ease-in-out infinite alternate;
      }
      .fog-front::after {
        opacity: 0.7;
        background-position:
          8% 16%,
          34% 12%,
          66% 18%,
          94% 20%,
          8% 64%,
          34% 68%,
          60% 62%,
          86% 66%,
          112% 60%,
          0 0;
        -webkit-mask-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.88),
          rgba(0, 0, 0, 0.58) 42%,
          rgba(0, 0, 0, 0.18) 72%,
          transparent 88%
        );
        mask-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.88),
          rgba(0, 0, 0, 0.58) 42%,
          rgba(0, 0, 0, 0.18) 72%,
          transparent 88%
        );
        filter: blur(10px) url(#turbulence) contrast(1.26);
        animation-duration: 31s;
        animation-direction: alternate-reverse;
      }
      @keyframes fogBackDrift {
        0% {
          transform: translate3d(-1.3%, -0.7%, 0) scale(1);
        }
        100% {
          transform: translate3d(1.4%, 1%, 0) scale(1.035);
        }
      }
      @keyframes fogMidDrift {
        0% {
          transform: translate3d(-1.6%, -0.4%, 0) rotate(-0.35deg) scale(1);
        }
        100% {
          transform: translate3d(1.8%, 0.7%, 0) rotate(0.45deg) scale(1.025);
        }
      }
      @keyframes fogFrontWisp {
        0% {
          transform: translate3d(-1.8%, 0, 0) skewX(-1.1deg) scaleX(1);
          opacity: 0.28;
        }
        50% {
          opacity: 0.44;
        }
        100% {
          transform: translate3d(1.9%, 0, 0) skewX(1.25deg) scaleX(1.04);
          opacity: 0.32;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fog-back::before,
        .fog-back::after,
        .fog-mid::before,
        .fog-mid::after,
        .fog-front::before,
        .fog-front::after {
          animation: none;
        }
        .page:before,
        .card-stack,
        .card-fx-shell,
        .spread-object__cards,
        .spread-card,
        .spread-card img,
        .spread-card:after {
          animation: none;
        }
        html.page-js .page-content {
          transition: none;
          will-change: auto;
        }
        html.page-js.page-entering .page-content,
        html.page-js.page-leaving .page-content {
          opacity: 1;
          pointer-events: auto;
        }
      }
      @media (max-width: 900px) {
        .spread-orbit {
          left: 50%;
          top: 60%;
          width: 100vw;
          height: 100%;
          transform: translate(-50%, -50%);
        }
        .spread-object {
          width: min(98vw, 500px);
          height: min(100vw, 520px);
          transition:
            opacity 0.99s ease,
            transform 3.05s cubic-bezier(0.22, 0.61, 0.36, 1),
            filter 0.99s ease;
        }
        .spread-card {
          width: min(var(--card-w, 112px), 32vw);
        }
        .mobile-slider-controls .side-arrow {
          display: grid;
          bottom: auto;
        }
        .top-arrow {
          display: none;
        }
        .fog-back {
          opacity: 0.22;
        }
        .fog-mid {
          opacity: 0.28;
        }
        .fog-front {
          opacity: 0.32;
          height: 30vh;
        }
      }
      @media (max-width: 900px) and (max-height: 850px) {
        .spread-object {
          width: min(84vw, 370px);
          height: min(86vw, 390px);
        }
        .spread-card {
          width: min(var(--card-w, 112px), 27.5vw);
        }
      }
      @media (max-width: 900px) and (max-height: 700px) {
        .spread-orbit {
          top: 56%;
        }
        .spread-object {
          width: min(68vw, 280px);
          height: min(62vw, 250px);
        }
        .spread-card {
          width: min(var(--card-w, 112px), 23vw);
        }
      }
.cookie-consent {
  position: fixed;
  left: clamp(14px, 3vw, 40px);
  right: clamp(14px, 3vw, 40px);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  color: var(--ink, #f4eee2);
  pointer-events: auto;
  animation: cookieConsentIn 0.36s ease both;
}

.cookie-consent.is-hiding {
  animation: cookieConsentOut 0.26s ease both;
  pointer-events: none;
}

.cookie-consent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(216, 174, 103, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(216, 174, 103, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(12, 10, 16, 0.94), rgba(2, 2, 5, 0.9));
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}

.cookie-consent__text {
  max-width: 780px;
  margin: 0;
  color: rgba(244, 238, 226, 0.78);
  font-family: "Montserrat", "Montserrat Fallback", Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.cookie-consent__link {
  color: var(--gold, #d8ae67);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.cookie-consent__link:hover {
  color: #f2d79b;
}

.cookie-consent__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.cookie-consent__button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: "Montserrat", "Montserrat Fallback", Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cookie-consent__button:hover {
  transform: translateY(-1px);
}

.cookie-consent__button--accept {
  color: #070507;
  border: 1px solid rgba(216, 174, 103, 0.9);
  background: var(--gold, #d8ae67);
  box-shadow: 0 0 22px rgba(216, 174, 103, 0.22);
}

.cookie-consent__button--accept:hover {
  background: #edc77c;
  box-shadow: 0 0 28px rgba(216, 174, 103, 0.32);
}

.cookie-consent__button--decline {
  color: rgba(244, 238, 226, 0.78);
  border: 1px solid rgba(244, 238, 226, 0.18);
  background: rgba(244, 238, 226, 0.04);
}

.cookie-consent__button--decline:hover {
  color: var(--ink, #f4eee2);
  border-color: rgba(244, 238, 226, 0.34);
  background: rgba(244, 238, 226, 0.08);
}

@keyframes cookieConsentIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cookieConsentOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (max-width: 720px) {
  .cookie-consent {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .cookie-consent__inner {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
  }

  .cookie-consent__text {
    font-size: 12px;
    line-height: 1.5;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cookie-consent__button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent,
  .cookie-consent.is-hiding {
    animation: none;
  }
}

/* Performance tiers are set before first paint by the page bootstrap
   and refined by main.js after the first frame budget probe. */
html.perf-standard .page,
html.perf-lite .page {
  background:
    linear-gradient(128deg, rgba(27, 42, 54, 0.48) 0%, rgba(7, 9, 16, 0) 34%),
    linear-gradient(22deg, rgba(68, 48, 28, 0.2) 0%, rgba(4, 5, 9, 0) 42%),
    linear-gradient(180deg, #020207 0%, #080914 38%, #050509 52%, #020204 100%);
}

html.perf-standard .page::after,
html.perf-lite .page::after {
  opacity: 1;
  background:
    linear-gradient(
      180deg,
      rgba(2, 2, 7, 0) 0%,
      rgba(15, 19, 30, 0.16) 30%,
      rgba(176, 185, 205, 0.1) 42%,
      rgba(4, 5, 10, 0.34) 54%,
      rgba(0, 0, 0, 0.78) 100%
    ),
    linear-gradient(
      116deg,
      rgba(74, 101, 120, 0.2) 0%,
      rgba(8, 11, 18, 0.02) 36%,
      transparent 64%
    ),
    linear-gradient(
      24deg,
      rgba(216, 174, 103, 0.09) 0%,
      rgba(7, 8, 13, 0.02) 30%,
      transparent 58%
    ),
    repeating-linear-gradient(
      174deg,
      rgba(244, 238, 226, 0.07) 0 1px,
      transparent 1px 22px
    ),
    linear-gradient(180deg, #020207 0%, #070812 48%, #020204 100%);
}

html.perf-standard #webgl,
html.perf-standard #cardFx,
html.perf-lite #webgl,
html.perf-lite #cardFx,
html.perf-standard .morph-btn__canvas,
html.perf-lite .morph-btn__canvas {
  display: none !important;
}

html.perf-standard .morph-btn::after,
html.perf-lite .morph-btn::after {
  opacity: 1;
}

html.perf-standard .morph-btn:hover::after,
html.perf-lite .morph-btn:hover::after,
html.perf-standard .morph-btn.is-active::after,
html.perf-lite .morph-btn.is-active::after,
html.perf-standard .morph-btn.is-ready::after,
html.perf-lite .morph-btn.is-ready::after {
  border-color: rgba(216, 174, 103, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(244, 238, 226, 0.08),
    0 0 26px rgba(216, 174, 103, 0.24);
}

html.perf-high .page--select #continueBtn,
html.perf-high .page--checkout .checkout-pay-btn,
html.perf-standard #mainCta,
html.perf-lite #mainCta,
html.perf-standard .page--select #continueBtn,
html.perf-lite .page--select #continueBtn,
html.perf-standard .page--checkout .checkout-pay-btn,
html.perf-lite .page--checkout .checkout-pay-btn {
  --morph-btn-size: auto;
  width: clamp(172px, 16vw, 232px);
  height: 58px;
  min-height: 58px;
  padding: 0 26px;
  border-radius: 14px;
  background: rgba(7, 9, 14, 0.72);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(216, 174, 103, 0.14);
}

html.perf-high .page--select #continueBtn::before,
html.perf-high .page--checkout .checkout-pay-btn::before,
html.perf-standard #mainCta::before,
html.perf-lite #mainCta::before,
html.perf-standard .page--select #continueBtn::before,
html.perf-lite .page--select #continueBtn::before,
html.perf-standard .page--checkout .checkout-pay-btn::before,
html.perf-lite .page--checkout .checkout-pay-btn::before {
  inset: -14px;
  border-radius: 18px;
  background: rgba(216, 174, 103, 0.1);
  filter: blur(18px);
}

html.perf-high .page--select #continueBtn::after,
html.perf-high .page--checkout .checkout-pay-btn::after,
html.perf-standard #mainCta::after,
html.perf-lite #mainCta::after,
html.perf-standard .page--select #continueBtn::after,
html.perf-lite .page--select #continueBtn::after,
html.perf-standard .page--checkout .checkout-pay-btn::after,
html.perf-lite .page--checkout .checkout-pay-btn::after {
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(244, 238, 226, 0.035), rgba(0, 0, 0, 0.18));
}

html.perf-high .page--select #continueBtn .morph-btn__text,
html.perf-high .page--checkout .checkout-pay-btn .morph-btn__text,
html.perf-standard #mainCta .morph-btn__text,
html.perf-lite #mainCta .morph-btn__text,
html.perf-standard .page--select #continueBtn .morph-btn__text,
html.perf-lite .page--select #continueBtn .morph-btn__text,
html.perf-standard .page--checkout .checkout-pay-btn .morph-btn__text,
html.perf-lite .page--checkout .checkout-pay-btn .morph-btn__text {
  width: auto;
  min-height: auto;
  padding: 0;
  flex-direction: row;
  font-size: 12px;
  line-height: 1.12;
  letter-spacing: 0.1em;
  text-wrap: balance;
  transform: none;
}

html.perf-high .page--select #continueBtn .morph-btn__text br,
html.perf-high .page--checkout .checkout-pay-btn .morph-btn__text br,
html.perf-standard #mainCta .morph-btn__text br,
html.perf-lite #mainCta .morph-btn__text br,
html.perf-standard .page--select #continueBtn .morph-btn__text br,
html.perf-lite .page--select #continueBtn .morph-btn__text br,
html.perf-standard .page--checkout .checkout-pay-btn .morph-btn__text br,
html.perf-lite .page--checkout .checkout-pay-btn .morph-btn__text br {
  display: none;
}

html.perf-standard .side-arrow,
html.perf-lite .side-arrow {
  background: rgba(7, 10, 16, 0.82);
  border: 1px solid rgba(216, 174, 103, 0.34);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(244, 238, 226, 0.04),
    0 0 22px rgba(216, 174, 103, 0.16),
    0 14px 34px rgba(0, 0, 0, 0.34);
}

html.perf-standard .side-arrow:hover,
html.perf-lite .side-arrow:hover,
html.perf-standard .side-arrow:focus-visible,
html.perf-lite .side-arrow:focus-visible {
  background: rgba(12, 17, 26, 0.94);
  border-color: rgba(216, 174, 103, 0.66);
}

html.perf-standard .page:before,
html.perf-lite .page:before {
  animation: none;
  filter: none;
  inset: 0;
  opacity: 0.72;
  background:
    linear-gradient(118deg, rgba(73, 109, 128, 0.22) 0%, rgba(7, 9, 14, 0) 42%),
    linear-gradient(24deg, rgba(216, 174, 103, 0.12) 0%, rgba(7, 9, 14, 0) 34%),
    linear-gradient(180deg, transparent 0%, rgba(145, 165, 183, 0.08) 58%, rgba(226, 214, 190, 0.11) 78%, transparent 100%);
}

html.perf-standard .fog-back {
  filter: blur(18px);
  opacity: 0.22;
}

html.perf-standard .fog-mid {
  filter: blur(10px);
  opacity: 0.2;
}

html.perf-standard .fog-front::before,
html.perf-standard .fog-front::after {
  filter: blur(4px) contrast(1.04);
  animation-duration: 56s;
}

html.perf-lite .fog-back {
  filter: blur(12px);
  opacity: 0.18;
}

html.perf-lite .fog-mid {
  display: none;
}

html.perf-lite .fog-front {
  opacity: 0.34;
  mix-blend-mode: screen;
}

html.perf-lite .fog-front::before,
html.perf-lite .fog-front::after {
  animation: none;
  filter: none;
  opacity: 0.22;
  background:
    radial-gradient(ellipse at 24% 78%, rgba(245, 250, 255, 0.16), transparent 42%),
    radial-gradient(ellipse at 72% 74%, rgba(216, 174, 103, 0.12), transparent 46%),
    linear-gradient(to top, rgba(190, 210, 230, 0.1), transparent 72%);
}

html.perf-standard .spread-object,
html.perf-lite .spread-object {
  will-change: transform, opacity;
}

html.perf-standard .spread-object__aura,
html.perf-standard .spread-object__cards:before,
html.perf-lite .spread-object__aura,
html.perf-lite .spread-object__cards:before {
  filter: none;
}

html.perf-lite .spread-object__cards,
html.perf-lite .spread-card,
html.perf-lite .spread-card img,
html.perf-lite .spread-card:after {
  animation: none !important;
}

html.perf-standard .top-arrow,
html.perf-lite .top-arrow {
  display: none;
}

@media (pointer: fine) {
  html.perf-standard .page,
  html.perf-standard .page *,
  html.perf-lite .page,
  html.perf-lite .page * {
    cursor: auto !important;
  }
}

@media (max-width: 900px) {
  html.perf-high .page .cta-orbit,
  html.perf-standard .page .cta-orbit,
  html.perf-lite .page .cta-orbit {
    align-items: center;
    justify-content: center;
  }

  html.perf-high .page .cta-orbit::after,
  html.perf-standard .page .cta-orbit::after,
  html.perf-lite .page .cta-orbit::after {
    inset: 7%;
  }

  html.perf-high .page .cta-orbit .morph-btn__text,
  html.perf-standard .page .cta-orbit .morph-btn__text,
  html.perf-lite .page .cta-orbit .morph-btn__text {
    align-items: center;
    justify-content: center;
    width: min(74%, calc(var(--morph-btn-size) - 36px));
    min-height: 3.35em;
    padding: 0;
    line-height: 1.24;
    letter-spacing: 0.09em;
    text-align: center;
    text-wrap: balance;
    transform: none;
  }

  html.perf-standard #mainCta,
  html.perf-lite #mainCta,
  #submitBtn,
  #continueBtn,
  .checkout-pay-btn {
    --morph-btn-size: calc(100vw - 30px);
    width: var(--morph-btn-size);
    max-width: calc(100vw - 30px);
    height: auto;
    min-height: 64px;
    padding: 20px 10px;
    border-radius: 16px;
    align-items: center;
    justify-content: center;
  }

  #mainCta {
    position: relative;
    inset: auto;
    order: 3;
    z-index: 35;
    align-self: center;
    margin: var(--main-cta-flow-gap, clamp(82px, 10svh, 100px)) auto 0;
    pointer-events: auto;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  }

  html.perf-standard #mainCta .morph-btn__canvas,
  html.perf-lite #mainCta .morph-btn__canvas,
  #submitBtn .morph-btn__canvas,
  #continueBtn .morph-btn__canvas,
  .checkout-pay-btn .morph-btn__canvas {
    width: 112%;
    height: 120%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
  }

  html.perf-standard #mainCta::after,
  html.perf-lite #mainCta::after,
  #submitBtn::after,
  #continueBtn::after,
  .checkout-pay-btn::after {
    inset: 4px;
    border-radius: 14px;
  }

  html.perf-standard #mainCta .morph-btn__text,
  html.perf-lite #mainCta .morph-btn__text,
  #submitBtn .morph-btn__text,
  #continueBtn .morph-btn__text,
  .checkout-pay-btn .morph-btn__text {
    width: auto;
    min-height: auto;
    padding: 0;
    line-height: 1.12;
    letter-spacing: 0.07em;
    text-align: center;
    text-wrap: balance;
    transform: none;
    flex-direction: row;
    white-space: nowrap;
  }

  html.perf-standard #mainCta .morph-btn__text br,
  html.perf-lite #mainCta .morph-btn__text br,
  #submitBtn .morph-btn__text br,
  #continueBtn .morph-btn__text br,
  .checkout-pay-btn .morph-btn__text br {
    display: none;
  }

  html.perf-high .page--checkout .checkout-pay-btn,
  html.perf-standard #mainCta,
  html.perf-lite #mainCta,
  html.perf-standard .page--checkout .checkout-pay-btn,
  html.perf-lite .page--checkout .checkout-pay-btn {
    width: min(200px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
  }

  html.perf-high .page--select #continueBtn,
  html.perf-standard .page--select #continueBtn,
  html.perf-lite .page--select #continueBtn {
    width: min(240px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
  }
}