/* ═══════════════════════════════════════════════════════════════
         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;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #020204;
        color: var(--ink);
        font-family:
          "Montserrat",
          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;
      }
      @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;
      }
      @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", "Alice", 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;
      }
      @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", "Alice", 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", "Alice", 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;
      }
      .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;
      }
      /* ═══════════════════════════════════════════════════════════════
         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__text {
        align-items: center;
        display: flex;
        flex-direction: column;
        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) {
        .page,
        .page * {
          cursor: none !important;
        }
      }
      @media (max-width: 900px) {
        :root {
          --mobile-bottom-nav-offset: 18px;
        }
        html,
        body {
          height: auto;
          min-height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
        }
        .page {
          height: auto;
          min-height: 100svh;
        }
        @supports (height: 100dvh) {
          .page {
            min-height: 100dvh;
          }
        }
        header {
          top: 22px;
          left: 20px;
          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(72px, 10svh, 92px);
          min-height: 100svh;
        }
        .portal-wrap {
          order: 1;
          width: 100%;
          height: clamp(300px, 44svh, 420px);
          margin-inline: auto;
          opacity: 0.72;
          position: relative;
          transform: none;
          will-change: auto;
        }
        .content {
          order: 2;
          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;
          min-width: 0;
        }
        .content h1 {
          width: min(100%, 360px);
          max-width: 100%;
          min-width: 0;
          margin-inline: auto;
          text-align: center;
        }
        .spread-badge {
          width: min(100%, 260px);
          min-height: 3.6em;
          margin-bottom: 6px;
          font-size: 12px;
          letter-spacing: 0.02em;
          line-height: 1.22;
        }
        .content h1 .slide-text {
          max-width: 100%;
          white-space: normal;
          overflow-wrap: normal;
          text-wrap: balance;
        }
        .mobile-slider-controls {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px;
          margin: 24px auto 12px;
          width: 100%;
        }
        .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);
        }
        .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 {
          margin: clamp(18px, 3svh, 28px) auto 0;
          --morph-btn-size: 136px;
        }
        .page-content {
          touch-action: pan-y;
        }
        .lead {
          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;
        }
        .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: 64px;
        }
        .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 {
          margin: 18px auto 8px;
        }
        .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;
          margin-top: 14px;
        }
        .bottom {
          left: 18px;
          right: 18px;
        }
      }
      @media (max-width: 900px) and (max-height: 700px) {
        .hero {
          padding-top: 62px;
          padding-bottom: 56px;
        }
        .portal-wrap {
          height: clamp(178px, 29svh, 205px);
        }
        .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 {
          margin-top: 14px;
        }
        .lead {
          margin-top: 12px;
          font-size: 14px;
        }
        .lead.slide-clip {
          width: min(100%, 300px);
          min-height: 4.9em;
        }
        .cta-orbit {
          --morph-btn-size: 104px;
          margin-top: 10px;
        }
      }
      .tarot-card.front {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
      }
      .tarot-card.front img {
        width: 100%;
        height: 100%;
        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__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: var(--card-w, 112px);
        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) + var(--float-x, 0px)),
            calc(-50% + var(--card-y, 0px) + var(--float-y, 0px)),
            0
          )
          rotateZ(calc(var(--card-rot, 0deg) + var(--float-rot, 0deg)))
          scale(var(--card-scale, 1));
        transform-origin: 50% 86%;
        z-index: var(--card-order, 1);
        backface-visibility: hidden;
        will-change: transform;
        animation: spreadCardDrift var(--float-dur, 6.2s) ease-in-out infinite;
        animation-delay: var(--float-delay, 0s);
      }
      .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);
        }
      }
      @property --float-x {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
      }
      @property --float-y {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
      }
      @property --float-rot {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
      }
      @keyframes spreadCardDrift {
        0%,
        100% {
          --float-x: 0px;
          --float-y: 0px;
          --float-rot: 0deg;
        }
        50% {
          --float-x: var(--float-amp-x, 4px);
          --float-y: var(--float-amp-y, -7px);
          --float-rot: var(--float-amp-rot, 0.7deg);
        }
      }
      @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", 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", 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 1fr;
    gap: 8px;
  }

  .cookie-consent__button {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

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