:root {
  --bg: #05070c;
  --bg-soft: #0a0f18;
  --gold-1: #FFE9B0;
  --gold-2: #E8B54B;
  --gold-3: #A8701C;
  --cream: #FFE9BC;
  /* Picks up the cyan of the 1xBet branding inside the guide videos. */
  --blue-1: #CFEEFF;
  --blue-2: #35BDF2;
  --blue-3: #0A6FA8;
  --ice: #DCF3FF;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .62);
  --radius: 16px;
  --shell: 520px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  min-height: 100svh;
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, #0e1522 0%, transparent 60%),
    linear-gradient(180deg, #05070c 0%, #070b13 45%, #05070c 100%);
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }

/* Ambient light */
.glow {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(140vw, 900px);
  height: 420px;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  opacity: .55;
}
.glow--top { top: -220px; background: radial-gradient(closest-side, rgba(232, 181, 75, .28), transparent 70%); }
.glow--bottom { bottom: -260px; background: radial-gradient(closest-side, rgba(58, 120, 214, .22), transparent 70%); }

/* Drifting gold dust; the script only switches it on for wide screens. */
.sparks {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}

/* One screen, no scrolling: everything below is sized so the CTA stays above the fold.
   The hero is the only flexible row, so it gives up height instead of the button. */
.page {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 2svh, 20px) 18px calc(clamp(14px, 2.6svh, 28px) + env(safe-area-inset-bottom));
}

/* ---------- Title ---------- */
.title {
  flex: none;
  margin: 0 0 clamp(10px, 2svh, 18px);
  text-align: center;
  text-transform: uppercase;
  font-family: Montserrat, Inter, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6svh, 14px);
}

.title__main {
  font-weight: 900;
  font-size: clamp(30px, 9vw, 46px);
  line-height: .96;
  letter-spacing: -.04em;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}

.title__accent {
  display: block;
  font-style: normal;
  color: var(--blue-2);
  text-shadow: 0 4px 18px rgba(0, 0, 0, .55), 0 0 26px rgba(53, 189, 242, .28);
}

.title__sub {
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 3.2vw, 13px);
  letter-spacing: .28em;
  text-indent: .28em;
}

/* ---------- Hero image ---------- */
.stage {
  position: relative;
  flex: 1 1 auto;
  /* Absorbs whatever height is left over, down to a floor on very short screens. */
  min-height: clamp(110px, 15svh, 150px);
  max-height: 36svh;
  margin: 0 -6px clamp(-54px, -6svh, -24px);
}

/* The photo is not allowed to stretch to the column at any height. While there is height to
   spare it fills the width and `cover` trims the sides, which is the framing we want. When
   height runs out it narrows and centres instead, so the dealer gets smaller rather than
   decapitated. The 2.2 cap lets it stay reasonably wide by giving up the empty ceiling
   above her head — the crop below is biased upwards to spend that slack first. */
.stage picture {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 100%;
  aspect-ratio: 2.2;
}

.stage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Above the dealer's head is ceiling, below her hands is only table edge, so a crop
     anchored above centre loses scenery instead of her. */
  object-position: 50% 42%;
  border-radius: 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .55) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .55) 88%, transparent 100%);
}

/* ---------- Panel ---------- */
.panel {
  position: relative;
  z-index: 2;
  flex: none;
}

.hint {
  margin: 0 0 clamp(8px, 1.6svh, 14px);
  text-align: center;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--muted);
}

.methods {
  list-style: none;
  margin: 0 0 clamp(14px, 3svh, 26px);
  padding: 0;
  display: grid;
  gap: clamp(8px, 1.4svh, 12px);
}

.method {
  --tint: rgba(255, 255, 255, .22);
  width: 100%;
  display: grid;
  grid-template-columns: 96px 1fr 22px;
  align-items: center;
  gap: 10px;
  min-height: clamp(56px, 8.4svh, 68px);
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--tint);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)),
    linear-gradient(100deg, #141a26 0%, #0d121b 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.method:hover,
.method:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tint) 70%, #fff 30%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  outline: none;
}
.method:active { transform: translateY(0) scale(.99); }

.method__logo {
  display: grid;
  place-items: center;
  height: 36px;
}
.method__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.method__label {
  text-align: left;
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(15px, 4.3vw, 18px);
  letter-spacing: .01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.method__arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  transition: transform .18s ease;
}
.method:hover .method__arrow { transform: translateX(3px); }

/* Brand tints */
.method--bni {
  --tint: rgba(240, 150, 60, .6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0)),
    linear-gradient(100deg, #12557f 0%, #1d3a52 48%, #7a3f11 100%);
}
.method--bni .method__logo img { height: 28px; }
.method--qris {
  --tint: rgba(255, 255, 255, .3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)),
    linear-gradient(100deg, #1a2130 0%, #0e131c 100%);
}
.method--qris .method__logo img { height: 28px; }

.method--ovo {
  --tint: rgba(140, 100, 235, .6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)),
    linear-gradient(100deg, #4023a0 0%, #23153f 100%);
}
.method--ovo .method__logo img { height: 22px; }

.method--dana {
  --tint: rgba(60, 150, 235, .6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)),
    linear-gradient(100deg, #0b5c9c 0%, #0d1c2c 100%);
}
.method--dana .method__logo img { height: 26px; }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 320px);
  margin-inline: auto;
  min-height: clamp(52px, 7.6svh, 60px);
  padding: 4px 26px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(19px, 5.4vw, 23px);
  letter-spacing: .12em;
  text-indent: .12em;
  text-transform: uppercase;
  color: #2a1a03;
  background: linear-gradient(180deg, #FFF0C4 0%, #F3C963 24%, #D89B2C 62%, #A96F17 100%);
  border: 1px solid rgba(255, 240, 196, .85);
  box-shadow:
    0 12px 28px rgba(216, 155, 44, .35),
    0 0 0 1px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: cta-pulse 2.6s ease-in-out infinite;
}
.cta span { position: relative; z-index: 1; }
.cta::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: rotate(18deg);
  animation: cta-shine 3.4s ease-in-out infinite;
}
.cta:hover { transform: translateY(-2px); filter: saturate(1.05); }
.cta:active { transform: translateY(0) scale(.99); }
.cta:focus-visible { outline: 3px solid rgba(255, 240, 196, .9); outline-offset: 3px; }

@keyframes cta-shine {
  0%, 62% { left: -70%; }
  100% { left: 130%; }
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(216, 155, 44, .35), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .7); }
  50% { box-shadow: 0 12px 40px rgba(240, 190, 90, .6), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .7); }
}

/* ---------- Video modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade .2s ease both;
}

.modal__box {
  position: relative;
  /* The guides are 9:16 phone videos: cap the width so the player never outgrows the screen. */
  width: min(100%, 430px, calc((100svh - 170px) * 0.5625));
  border-radius: 18px;
  overflow: hidden;
  background: #0b0f17;
  border: 1px solid rgba(53, 189, 242, .42);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 46px rgba(53, 189, 242, .16);
  animation: pop .22s cubic-bezier(.2, .9, .3, 1.2) both;
}

.modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent);
}

.modal__title {
  margin: 0;
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ice);
}

.modal__close {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.modal__close:hover { background: rgba(255, 255, 255, .14); transform: rotate(90deg); }

.modal__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: calc(100svh - 150px);
  background: #000;
  overflow: hidden;
}

.player__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Cover-all tap target: play on first tap, toggle afterwards. */
.player__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: radial-gradient(60% 40% at 50% 50%, rgba(0, 0, 0, .3), transparent 70%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.player__poster-ring {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--blue-1), var(--blue-2) 55%, var(--blue-3));
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55), 0 0 26px rgba(53, 189, 242, .45),
              0 0 0 1px rgba(255, 255, 255, .25) inset;
  transition: transform .18s ease;
}
.player__poster:hover .player__poster-ring { transform: scale(1.07); }
.player__poster svg { width: 34px; height: 34px; margin-left: 3px; fill: #05202e; }
.modal.is-started .player__poster { display: none; }

.player__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: var(--blue-2);
  animation: spin .8s linear infinite;
  display: none;
  pointer-events: none;
}
.modal.is-busy .player__spinner { display: block; }

.player__error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgba(4, 8, 14, .88);
  z-index: 3;
}
.modal.is-error .player__error { display: flex; }
.player__error p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
}
.player__retry {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(53, 189, 242, .5);
  background: rgba(53, 189, 242, .12);
  color: var(--ice);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.player__retry:hover { background: rgba(53, 189, 242, .24); }

.player__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 10px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .82));
  transition: opacity .25s ease, transform .25s ease;
}
.modal.is-idle .player__ui {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.player__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}

.player__btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ice);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
.player__btn:hover { background: rgba(255, 255, 255, .12); }
.player__btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player__btn .i-play, .player__btn .i-pause { fill: currentColor; stroke: none; }

/* Each button holds both state icons; the active class picks one. */
.player__btn .i-pause, .player__btn .i-muted, .player__btn .i-shrink { display: none; }
.modal.is-playing .player__btn .i-play { display: none; }
.modal.is-playing .player__btn .i-pause { display: block; }
.modal.is-muted .player__btn .i-vol { display: none; }
.modal.is-muted .player__btn .i-muted { display: block; }
.modal.is-full .player__btn .i-expand { display: none; }
.modal.is-full .player__btn .i-shrink { display: block; }

.player__time {
  margin-left: auto;
  margin-right: 4px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.player__time b { color: #fff; font-weight: 600; }

.player__seek {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-2) var(--p), rgba(255, 255, 255, .3) var(--p));
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(53, 189, 242, .5), 0 2px 6px rgba(0, 0, 0, .6);
}
.player__seek::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
}
.player__seek::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--blue-2);
}
.player__seek::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(53, 189, 242, .5);
}
.player__seek:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }

/* Native fullscreen hands us the whole screen, so drop the letterbox sizing. */
.modal__frame:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-height: none;
}
.modal__frame:fullscreen .player__video { object-fit: contain; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Breakpoints ---------- */
@media (min-width: 600px) {
  :root { --shell: 560px; }
  .page { padding: 34px 24px 56px; }
  .stage { max-height: 40svh; }
  .method { grid-template-columns: 108px 1fr 24px; min-height: clamp(64px, 9svh, 76px); }
  .methods { gap: clamp(10px, 1.6svh, 14px); }
}

/* A short window at tablet width is the worst case for the hero: the column is wide, so
   four stacked buttons eat ~290px of height and `cover` crops her down to a meaningless
   band across the middle. Two columns of buttons hand that height back to the image. */
@media (min-width: 760px) and (max-height: 900px) {
  :root { --shell: 780px; }
  .methods { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .method { grid-template-columns: 96px 1fr 20px; }
  .method__label { font-size: 16px; }
}

/* Between 600 and 760 there is no room for two columns without breaking the labels, so the
   hero stays short and simply scales down. Tighten everything else to give it what we can. */
@media (min-width: 600px) and (max-width: 759px) and (max-height: 900px) {
  .page { padding: 24px 24px 34px; }
  .method { min-height: 60px; }
  .methods { gap: 10px; margin-bottom: 16px; }
  .stage { margin-bottom: -30px; }
}
@media (min-width: 600px) and (max-width: 759px) and (max-height: 700px) {
  .hint { display: none; }
}
/* Below this the hero would be a 60px sliver, which reads as a rendering bug. Drop it and
   let the buttons and the CTA own the screen. */
@media (min-width: 600px) and (max-width: 759px) and (max-height: 640px) {
  .stage { display: none; }
}

/* On the narrowest phones the longest label ("DANA Deposit Guide") wraps to a second
   line and that one button stops matching the others. Give the text a little more room. */
@media (max-width: 400px) {
  .method { grid-template-columns: 84px 1fr 18px; padding-right: 12px; }
  .method__label { font-size: clamp(14px, 4.1vw, 18px); }
}
@media (max-width: 340px) {
  .method { grid-template-columns: 72px 1fr 16px; gap: 8px; }
  .method__label { font-size: 13px; letter-spacing: 0; }
}

/* Browsers with a permanent bottom toolbar leave roughly 590px of usable height on a
   normal phone. Drop the optional line and tighten the rhythm so the CTA still lands
   above the fold instead of one scroll below it. */
@media (max-width: 1079px) and (max-height: 640px) {
  .hint { display: none; }
  .title { margin-bottom: 8px; gap: 6px; }
  .method { min-height: 52px; }
  .methods { gap: 8px; margin-bottom: 12px; }
  .cta { min-height: 50px; }
}

/* Wide screens keep the vertical story — dealer on top pointing down at the buttons —
   but the hero breaks out of the column and spans the whole window. It uses the
   widened artwork so nothing is stretched and she is never cropped. */
@media (min-width: 1080px) {
  :root { --shell: 800px; }
  .page {
    padding: 30px 24px 34px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .title { margin-bottom: 14px; }
  .title__main { font-size: clamp(42px, 3.4vw, 52px); }
  .title__sub { font-size: 14px; }

  /* The desktop hero is sized explicitly, so it stops being the flexible row here. */
  .stage {
    flex: none;
    min-height: 0;
    max-height: none;
    margin-inline: calc(50% - 50vw);
    margin-bottom: -88px;
  }
  /* Full-bleed hero: the widened artwork already has the right shape, so drop the
     centring and let it span the window. */
  .stage picture {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
  }
  .stage__img {
    width: 100%;
    height: clamp(240px, calc(100svh - 398px), 520px);
    /* Trims the ceiling before her hands if the window is extremely wide. */
    object-position: 50% 62%;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 62%, rgba(0, 0, 0, .5) 85%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 62%, rgba(0, 0, 0, .5) 85%, transparent 100%);
  }

  .hint { font-size: 14px; margin-bottom: 14px; }
  .method { grid-template-columns: 96px 1fr 22px; }
  .method__label { font-size: 16px; }
  /* Two by two keeps the buttons right under her hands instead of pushing the
     hero off the screen. */
  .methods {
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 22px;
  }
  .cta { width: min(100%, 360px); }
}

@media (min-width: 900px) {
  /* Fills the empty space on wide screens with a soft echo of the hero. */
  body::before {
    content: "";
    position: fixed;
    inset: -8%;
    z-index: 0;
    background: url("assets/bg.png") center / cover no-repeat;
    filter: blur(34px) saturate(1.1);
    opacity: .22;
    pointer-events: none;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(75% 60% at 50% 45%, rgba(5, 7, 12, .85) 0%, rgba(5, 7, 12, .55) 55%, rgba(5, 7, 12, .9) 100%);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}