@font-face {
  font-family: "Nohemi";
  src: url("../assets/fonts/Nohemi-Regular.woff") format("woff"),
       url("../assets/fonts/Nohemi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
}

html {
  background: #000;
}

body.xr-page {
  --xr-bg: #000;
  --xr-card: #0c0c0c;
  --xr-faq: #0a0a0c;
  --xr-panel: #111113;
  --xr-line: rgba(255, 255, 255, 0.10);
  --xr-line-dim: rgba(255, 255, 255, 0.06);
  --xr-white-35: rgba(255, 255, 255, 0.35);
  --xr-white-45: rgba(255, 255, 255, 0.45);
  --xr-white-55: rgba(255, 255, 255, 0.55);
  --xr-white-60: rgba(255, 255, 255, 0.60);
  --xr-white-65: rgba(255, 255, 255, 0.65);
  --xr-white-70: rgba(255, 255, 255, 0.70);
  --xr-white-75: rgba(255, 255, 255, 0.75);
  --xr-white-85: rgba(255, 255, 255, 0.85);
  --xr-white-90: rgba(255, 255, 255, 0.90);
  --xr-dome-strong: radial-gradient(120% 80% at 50% 100%, rgba(255,255,255,.9) 0%, rgba(80,130,255,.95) 8%, rgb(30,90,255) 16%, rgb(0,70,255) 24%, rgba(0,60,240,.7) 33%, rgba(60,120,255,.4) 44%, rgba(120,170,255,.18) 56%, rgba(180,210,255,.06) 70%, rgba(0,0,0,0) 85%);
  --xr-dome-soft: radial-gradient(120% 80% at 50% 110%, rgba(255,255,255,.55) 0%, rgba(80,130,255,.85) 8%, rgb(30,90,255) 16%, rgb(0,70,255) 24%, rgba(0,60,240,.55) 33%, rgba(60,120,255,.25) 44%, rgba(120,170,255,.08) 56%, rgba(0,0,0,0) 80%);
  margin: 0;
  background: #000;
  color: #fff;
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.xr-page > *:not(.xr-dotgrid) {
  position: relative;
  z-index: 1;
}

body.xr-page img,
body.xr-page video {
  display: block;
  max-width: 100%;
}

body.xr-page button,
body.xr-page input {
  font: inherit;
}

body.xr-page a {
  color: inherit;
}

body.xr-page h1,
body.xr-page h2,
body.xr-page h3,
body.xr-page .xr-nohemi {
  margin: 0;
  font-family: "Nohemi", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}

body.xr-page p {
  margin: 0;
}

.xr-dotgrid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #000;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Preserved header geometry */
body.xr-page .header {
  position: fixed;
  top: 16px;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 32px);
  height: 64px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 8px 0 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.40), 0 4px 6px -4px rgba(0,0,0,.40);
  backdrop-filter: blur(18px);
  pointer-events: none;
}

body.xr-page .header__nav,
body.xr-page .header__cta-wrap {
  pointer-events: auto;
}

body.xr-page .header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

body.xr-page .header__nav .t {
  padding: 6px 12px;
  border-radius: 10px;
  color: #fff;
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

body.xr-page .header__nav .t:hover {
  opacity: .72;
}

body.xr-page .nav2__logo {
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  overflow: hidden;
}

body.xr-page .nav2__logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

body.xr-page .header__cta-wrap {
  display: flex;
  align-items: center;
}

body.xr-page .lv-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8.8px 17.6px;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  font-size: 12.8px;
  line-height: 19.2px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity .2s ease, transform .2s ease;
}

body.xr-page .lv-cta:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.xr-main {
  overflow: clip;
}

.xr-wrap {
  width: min(1100px, calc(100vw - 96px));
  margin-inline: auto;
}

.xr-wide-wrap {
  width: min(1200px, calc(100vw - 96px));
  margin-inline: auto;
}

.xr-section {
  padding: 96px 48px;
}

.xr-section-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.xr-eyebrow {
  color: var(--xr-white-55);
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
}

.xr-section-head h2,
.xr-cta h2 {
  margin-top: 12px;
  color: #fff;
  font-size: 34px;
  line-height: 1.1;
}

.xr-section-head p:last-child {
  max-width: 576px;
  margin: 8px auto 0;
  color: var(--xr-white-60);
  font-size: 16px;
  line-height: 26px;
}

.xr-service .xr-section-head p:last-child {
  margin-top: 16px;
}

.xr-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.xr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

body.xr-page .xr-btn--primary {
  background: #fff;
  color: #000 !important;
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
}

body.xr-page .xr-btn--primary:hover {
  background: #e8e8e8;
}

.xr-btn--ghost {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--xr-white-85);
}

.xr-btn--ghost:hover {
  background: rgba(255,255,255,.09);
}

.xr-service .xr-btn {
  padding-inline: 24px;
}

.xr-btn svg {
  width: 16px;
  height: 16px;
  margin-left: 8px;
}

.xr-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--xr-line);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--xr-white-85);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
}

.xr-accent-orange {
  --accent: rgba(255,89,18,.90);
  --accent-45: rgba(255,89,18,.45);
}

.xr-accent-purple {
  --accent: rgba(137,85,255,.95);
  --accent-45: rgba(137,85,255,.50);
}

.xr-accent-blue {
  --accent: rgba(80,130,255,.95);
  --accent-45: rgba(80,130,255,.50);
}

.xr-mark-fanbasis { --mark-bg: #1d1d1f; }
.xr-mark-evo { --mark-bg: #c76112; }
.xr-mark-paydai { --mark-bg: #7c5cf0; }
.xr-mark-minted { --mark-bg: #2BAB7C; }
.xr-mark-reclosed { --mark-bg: #8b5cf6; }

.reel__tile--fanbasis { --accent: #1d1d1f; }
.reel__tile--evo { --accent: #c76112; }
.reel__tile--paydai { --accent: #7c5cf0; }
.reel__tile--minted { --accent: #2BAB7C; }
.reel__tile--reclosed { --accent: #8b5cf6; }

.xr-play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  cursor: default;
}

.xr-play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.xr-video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

.xr-video-placeholder__play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}

.xr-video-placeholder__play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  fill: currentColor;
}

.xr-video-placeholder__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 43px;
  display: grid;
  grid-template-columns: 18px auto 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.56));
  color: rgba(255,255,255,.8);
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1;
}

.xr-video-placeholder__glyph,
.xr-video-placeholder__fullscreen {
  display: grid;
  place-items: center;
  color: #fff;
}

.xr-video-placeholder__glyph svg,
.xr-video-placeholder__fullscreen svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: currentColor;
}

.xr-video-placeholder__time {
  color: rgba(255,255,255,.8);
  white-space: nowrap;
}

.xr-video-placeholder__progress {
  height: 1px;
  background: rgba(255,255,255,.28);
}

.xr-dome {
  animation: xr-dome 8s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes xr-dome {
  0%, 100% { opacity: .92; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.06); }
}

@keyframes xr-marquee {
  to { transform: translateX(-25%); }
}

@keyframes xr-marquee-half {
  to { transform: translateX(-50%); }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Home */
.xr-hero {
  height: calc(100svh - 108px);
  min-height: 640px;
  margin: 12px 10px 0;
  padding: 160px 48px 80px;
  border-radius: 0 0 40px 40px;
  background: #000;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.xr-hero__glow {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  z-index: 0;
  height: 80%;
  background: radial-gradient(120% 80% at 50% 100%, rgba(255,255,255,.76) 0%, rgba(80,130,255,.82) 8%, rgba(30,90,255,.86) 16%, rgba(0,70,255,.82) 24%, rgba(0,60,240,.60) 33%, rgba(60,120,255,.34) 44%, rgba(120,170,255,.16) 56%, rgba(180,210,255,.05) 70%, rgba(0,0,0,0) 85%);
  filter: blur(6px);
}

.xr-hero__content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  text-align: center;
}

body.xr-page .xr-hero h1 {
  max-width: 960px;
  margin-inline: auto;
  color: #fff;
  font-size: 68px;
  line-height: 1.05;
}

body.xr-page .xr-hero p {
  max-width: 672px;
  margin: 32px auto 0;
  color: var(--xr-white-60);
  font-size: 17px;
  line-height: 27.6px;
}

.xr-hero .xr-btn-row {
  margin-top: 40px;
}

.xr-trust {
  position: relative;
  overflow: hidden;
}

.xr-trust__caption {
  padding: 32px 32px 24px;
  color: var(--xr-white-55);
  font-size: 18px;
  line-height: 27px;
  font-weight: 500;
  text-align: center;
}

.xr-trust__band {
  position: relative;
  height: 96px;
  padding: 24px 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.xr-trust__track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: xr-marquee 35s linear infinite;
}

.xr-logo-cell img:hover {
  opacity: .9;
}

.xr-trust__band:hover .xr-trust__track {
  animation-play-state: paused;
}

.xr-logo-cell {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.xr-logo-cell img {
  width: auto;
  max-width: 200px;
  height: 24px;
  max-height: 40px;
  object-fit: contain;
  opacity: .55;
  filter: brightness(0) invert(1);
  transition: opacity .2s ease;
}

.xr-logo-cell--square img {
  height: 36px;
}

.xr-logo-cell--md img {
  height: 24px;
}

.xr-edge-fade::before,
.xr-edge-fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 160px;
  pointer-events: none;
}

.xr-edge-fade::before {
  left: 0;
  background: linear-gradient(to right, #000, transparent);
}

.xr-edge-fade::after {
  right: 0;
  background: linear-gradient(to left, #000, transparent);
}

.xr-service-rows {
  display: flex;
  flex-direction: column;
  margin-top: 56px;
  width: 100%;
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
}

.xr-arrow-chip {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--xr-line);
  border-radius: 8px;
  color: var(--xr-white-85);
  transition: background .2s ease, transform .2s ease;
}

.xr-service-row:hover .xr-arrow-chip {
  background: rgba(255,255,255,.10);
  transform: translateY(-2px);
}

.xr-arrow-chip svg {
  width: 14px;
  height: 14px;
}

.xr-service-row {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  margin-bottom: 96px;
  color: #fff;
  text-decoration: none;
}

.xr-service-row:last-child {
  margin-bottom: 0;
}

.xr-service-row__text,
.xr-service-row__media {
  flex: 1 1 0;
  min-width: 0;
}

.xr-service-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.xr-service-row .xr-tag {
  margin-bottom: 20px;
}

body.xr-page .xr-service-row h3 {
  margin-bottom: 20px;
  color: #fff;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

body.xr-page .xr-service-row p {
  max-width: 448px;
  margin-bottom: 20px;
  color: rgba(255,255,255,.5);
  font-size: 18px;
  line-height: 1.625;
}

.xr-service-row ul {
  display: grid;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.xr-service-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--xr-white-70);
  font-size: 13px;
  line-height: 18px;
}

.xr-service-row li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: .85;
}

.xr-service-row__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 18px;
  box-shadow: rgba(0,0,0,.5) 0 25px 60px -15px;
}

.xr-service-row__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #191919;
  border-radius: 18px;
  background: #000;
}

.xr-service-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.xr-service-row:hover .xr-service-row__media img {
  transform: scale(1.04);
}

.xr-media-frame {
  position: absolute;
  inset: -10px;
  pointer-events: none;
}

.xr-media-frame::before,
.xr-media-frame::after,
.xr-service-row__media::before,
.xr-service-row__media::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255,255,255,.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 2;
}

.xr-media-frame::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 16px;
}

.xr-media-frame::after {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 16px;
}

.xr-service-row__media::before {
  bottom: -10px;
  left: -10px;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 16px;
}

.xr-service-row__media::after {
  bottom: -10px;
  right: -10px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 16px;
}

.xr-service-row:hover .xr-media-frame::before,
.xr-service-row:hover .xr-media-frame::after,
.xr-service-row:hover .xr-service-row__media::before,
.xr-service-row:hover .xr-service-row__media::after {
  opacity: 1;
}

.xr-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 56px;
}

.xr-benefit-card {
  min-height: 268px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: var(--xr-card);
  text-align: center;
}

.xr-benefit-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--xr-line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--xr-white-85);
}

.xr-benefit-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xr-benefit-card h3 {
  font-size: 22px;
  line-height: 1.25;
}

.xr-benefit-card p {
  max-width: 462px;
  color: var(--xr-white-60);
  font-size: 14.5px;
  line-height: 23.6px;
}

.xr-client-slider {
  max-width: 760px;
  margin: 56px auto 0;
  position: relative;
}

.xr-client-slider__viewport {
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: var(--xr-card);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}

.xr-client-slider__track {
  display: flex;
  transition: transform .45s ease;
}

.xr-client-slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 760 / 428;
  display: grid;
  place-items: center;
  background: #000;
}

.xr-client-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(80,130,255,.16), transparent 70%);
}

.xr-client-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--xr-line);
  border-radius: 999px;
  background: rgba(0,0,0,.60);
  color: #fff;
  transform: translateY(-50%);
  transition: background .2s ease, transform .2s ease;
}

.xr-client-arrow:hover {
  background: rgba(255,255,255,.10);
}

.xr-client-arrow--prev {
  left: -21px;
}

.xr-client-arrow--next {
  right: -21px;
}

.xr-client-arrow svg {
  width: 20px;
  height: 20px;
}

.xr-client-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  min-height: 36px;
  margin: 20px auto 0;
  text-align: left;
}

.xr-client-meta img,
.xr-client-meta__mark {
  width: 36px;
  height: 36px;
  border: 1px solid var(--xr-line);
  border-radius: 999px;
  object-fit: cover;
}

.xr-client-meta__mark {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--mark-bg, #111);
}

.xr-client-meta__mark img {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

.xr-client-meta strong {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 500;
}

.xr-client-meta span {
  display: block;
  margin-top: 2px;
  color: var(--xr-white-55);
  font-size: 12px;
  line-height: 15px;
}

.xr-quote-marquee {
  position: relative;
  max-width: 860px;
  margin: 32px auto 0;
  padding: 8px;
  overflow: hidden;
}

.xr-quote-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: xr-marquee 60s linear infinite;
}

.xr-quote-marquee:hover .xr-quote-track {
  animation-play-state: paused;
}

.xr-quote-card {
  width: 260px;
  height: 129px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--xr-line);
  border-radius: 10px;
  background: var(--xr-card);
}

.xr-quote-card blockquote {
  margin: 0;
  color: var(--xr-white-90);
  font-family: "Nohemi", Georgia, serif;
  font-size: 13.5px;
  line-height: 19.6px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.xr-quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xr-quote-card img,
.xr-quote-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--xr-line);
  border-radius: 999px;
  object-fit: cover;
}

.xr-quote-mark {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--mark-bg, #151515);
}

.xr-quote-mark img {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

.xr-quote-card strong {
  display: block;
  color: #fff;
  font-size: 12.5px;
  line-height: 15.6px;
  font-weight: 500;
}

.xr-quote-card span {
  display: block;
  margin-top: 1px;
  color: var(--xr-white-55);
  font-size: 10.5px;
  line-height: 13.1px;
}

.xr-quote-marquee.xr-edge-fade::before,
.xr-quote-marquee.xr-edge-fade::after {
  width: 64px;
}

.xr-cta {
  padding: 96px 48px;
}

.xr-cta__panel {
  max-width: 1060px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  padding: 80px 48px;
  border: 1px solid var(--xr-line);
  border-radius: 22px;
  background: var(--xr-card);
}

.xr-cta__glow {
  position: absolute;
  inset: 0;
  background: var(--xr-dome-soft);
}

.xr-cta__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.xr-cta .xr-eyebrow {
  color: var(--xr-white-65);
}

.xr-cta p:not(.xr-eyebrow) {
  max-width: 576px;
  margin: 16px auto 0;
  color: var(--xr-white-75);
  font-size: 16px;
  line-height: 26px;
}

.xr-cta .xr-btn-row {
  margin-top: 36px;
}

.xr-cta .xr-btn {
  padding-inline: 24px;
}

.xr-cta .xr-btn--ghost {
  border-color: rgba(255,255,255,.15);
  background: rgba(0,0,0,.40);
}

.xr-footer {
  height: 400px;
  margin: 0 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -12px 40px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}

.xr-footer__watermark {
  position: absolute;
  left: 235px;
  bottom: -72px;
  z-index: 0;
  color: rgba(255,255,255,.035);
  font-family: "Nohemi", Georgia, serif;
  font-size: 162px;
  line-height: .9;
  letter-spacing: -0.025em;
  white-space: nowrap;
  pointer-events: none;
}

.xr-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 420px 1fr;
  height: 400px;
}

.xr-footer__left {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: #000;
  overflow: hidden;
}

.xr-footer__left-glow {
  position: absolute;
  inset: 0;
  background: var(--xr-dome-strong);
}

.xr-footer__wordmark {
  position: relative;
  z-index: 1;
  width: auto;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

.xr-footer__tagline {
  position: relative;
  z-index: 1;
  max-width: 260px;
  margin-top: auto;
  color: rgba(255,255,255,.92);
  font-size: 17px;
  line-height: 21px;
  font-weight: 500;
}

.xr-footer__social-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.xr-footer__social-row p {
  color: var(--xr-white-90);
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
}

.xr-footer__socials {
  display: flex;
  gap: 8px;
}

.xr-footer__socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #111113;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(0,0,0,.32);
}

.xr-footer__socials svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xr-footer__right {
  position: relative;
  padding: 40px;
  background: #111113;
  overflow: hidden;
}

.xr-footer__right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 77% 6%, rgba(73,150,255,.2), transparent 22%), linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.02));
}

.xr-footer__tile {
  position: absolute;
  top: -56px;
  right: 44px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 143px;
  height: 143px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  background: var(--xr-dome-strong);
  box-shadow: 0 22px 36px rgba(0,0,0,.42);
  overflow: hidden;
}

.xr-footer__tile img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.xr-footer__cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 262px 262px;
  gap: 56px;
  max-width: 580px;
}

.xr-footer__col p {
  color: var(--xr-white-45);
  font-size: 13px;
  line-height: 13px;
  font-weight: 600;
}

.xr-footer__col nav {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.xr-footer__col a {
  color: var(--xr-white-90);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  text-decoration: none;
}

.xr-footer__bottom {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 428px 430px;
  align-items: end;
  gap: 32px;
  margin-top: 31px;
  padding-top: 48px;
}

.xr-footer__copyright {
  color: var(--xr-white-35);
  font-size: 12px;
  line-height: 12px;
}

/* Service pages */
.xr-service-hero {
  padding: 144px 48px 64px;
  overflow: hidden;
}

.xr-service-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.xr-page .xr-service-hero h1 {
  max-width: 820px;
  margin-top: 20px;
  color: #fff;
  font-size: 44px;
  line-height: 47.5px;
}

body.xr-page .xr-service-hero__sub {
  max-width: 640px;
  margin-top: 16px;
  color: var(--xr-white-65);
  font-size: 16px;
  line-height: 26px;
}

.xr-service-hero .xr-btn-row {
  margin-top: 32px;
}

.xr-hero-media {
  width: min(920px, 100%);
  aspect-ratio: 920 / 518;
  margin: 48px auto 0;
  position: relative;
  overflow: hidden;
  border: 1px solid #191919;
  border-radius: 18px;
  background: #080808;
}

.xr-hero-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
}

.xr-hero-media__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 88% 28%, var(--accent) 0%, var(--accent-45) 18%, transparent 44%),
              radial-gradient(circle at 18% 12%, rgba(20,20,20,.90) 0%, transparent 60%);
  mix-blend-mode: screen;
}

.xr-hero-media--portrait img {
  object-position: center 35%;
}

.xr-hero-media--grid img {
  transform: none;
}

.xr-hero-media--grid .xr-hero-media__glow {
  display: none;
}

.xr-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(920px, 100%);
  margin: 40px auto 0;
}

.xr-chip {
  min-height: 99px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 1px solid var(--xr-line);
  border-radius: 14px;
  background: var(--xr-card);
  text-align: center;
}

.xr-chip h2 {
  font-size: 26px;
  line-height: 32.5px;
}

body.xr-page .xr-chip p {
  margin-top: 8px;
  color: var(--xr-white-55);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.xr-brands {
  margin-top: 56px;
  text-align: center;
}

.xr-brands > p {
  color: rgba(255,255,255,.40);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
}

.xr-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 64px;
  margin-top: 24px;
}

.xr-brand-row img {
  width: auto;
  max-width: 198px;
  max-height: 48px;
  opacity: .55;
  filter: brightness(0) invert(1);
  transition: opacity .2s ease;
}

.xr-brand-row img:hover {
  opacity: .9;
}

.xr-showcase-media {
  width: min(1100px, 100%);
  aspect-ratio: 1100 / 619;
  margin: 32px auto 0;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
}

.xr-showcase-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
}

.xr-showcase-media::after,
.xr-reel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.35) 68%, rgba(0,0,0,.68) 100%);
  pointer-events: none;
}

.xr-showcase-media .xr-play {
  position: relative;
  z-index: 2;
}

.xr-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(1200px, calc(100vw - 96px));
  margin: 48px auto 0;
}

.xr-info-card {
  min-height: 128px;
  padding: 24px;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: var(--xr-card);
}

.xr-info-card h3 {
  font-size: 20px;
  line-height: 25px;
}

.xr-info-card p {
  margin-top: 8px;
  color: var(--xr-white-60);
  font-size: 14px;
  line-height: 22.75px;
}

.xr-deliver-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 48px;
}

.xr-deliver-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--xr-line);
  border-radius: 14px;
  background: var(--xr-card);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.xr-deliver-card__body {
  flex: 1;
  min-width: 0;
}


.xr-deliver-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 0%), rgba(96,140,255,.11), transparent 80%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.xr-deliver-card:hover::before {
  opacity: 1;
}

.xr-deliver-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
}

.xr-deliver-card__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--xr-line);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

body.xr-page .xr-deliver-card h3 {
  margin-top: 4px;
  font-size: 19px;
  line-height: 1.25;
}

body.xr-page .xr-deliver-card p {
  margin-top: 8px;
  color: var(--xr-white-60);
  font-size: 14px;
  line-height: 22.75px;
}

.xr-process {
  height: 250vh;
  position: relative;
}

.xr-process__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.xr-process__box {
  max-width: 1100px;
  margin-inline: auto;
  padding: 48px;
}

.xr-process__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px);
  gap: 56px;
  margin-top: 40px;
}

.xr-step-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xr-step {
  color: var(--xr-white-55);
}

.xr-step:not(.xr-step--check) {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.xr-step button {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.xr-step__num {
  padding-top: 4px;
  color: var(--xr-white-35);
  font-family: "Nohemi", Georgia, serif;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.025em;
  transition: color .25s ease;
}

.xr-step h3 {
  color: var(--xr-white-55);
  font-size: 20px;
  line-height: 25px;
  transition: color .25s ease;
}

.xr-step__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .35s ease, margin .35s ease;
}

.xr-step__body p {
  min-height: 0;
  overflow: hidden;
  color: var(--xr-white-60);
  font-size: 14px;
  line-height: 22.75px;
}

.xr-step.is-active .xr-step__num {
  color: var(--xr-white-90);
}

.xr-step.is-active h3 {
  color: rgba(255,255,255,.94);
}

.xr-step.is-active .xr-step__body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

.xr-process.is-process-mobile .xr-step__body {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

.xr-step--check {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}

.xr-step--check > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.xr-check {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid rgba(60,200,120,.25);
  border-radius: 999px;
  background: rgba(60,200,120,.10);
  color: rgba(96,220,150,.80);
}

.xr-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xr-step--check h3 {
  color: var(--xr-white-85);
  font-size: 20px;
  line-height: 20px;
}

.xr-process-card {
  width: 100%;
  max-width: 440px;
  height: 423px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: var(--xr-card);
}

.xr-process-face {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
}

.xr-process-face.is-active {
  opacity: 1;
}

.xr-process-face img {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 76%;
  height: auto;
  max-height: 55%;
  object-fit: contain;
  opacity: .9;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.55));
}

.xr-process-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 42%, rgba(255,255,255,.06), transparent 70%);
}

.xr-process-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.45) 0%, transparent 28%, transparent 58%, rgba(0,0,0,.78) 100%);
}

.xr-process-face__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 28px 52px;
}

.xr-process-dots {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xr-process-dots span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  transition: width .3s ease, background-color .3s ease;
}

.xr-process-dots span.is-active {
  width: 28px;
  background: rgba(255,255,255,.6);
}

.xr-process-face__num {
  color: var(--xr-white-85);
  font-family: "Nohemi", Georgia, serif;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.025em;
}

.xr-process-face h3 {
  color: #fff;
  font-size: 26px;
  line-height: 32.5px;
}

.xr-faq {
  padding: 96px 48px;
}

.xr-faq .xr-wrap {
  max-width: 57.5rem;
}

.xr-faq-list {
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid var(--xr-line);
  border-radius: 14px;
  background: var(--xr-faq);
}

.xr-faq-item + .xr-faq-item {
  border-top: 1px solid var(--xr-line-dim);
}

body.xr-page .xr-faq-question {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.xr-faq-question svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--xr-white-70);
  transition: transform .2s ease;
}

.xr-faq-item.is-open .xr-faq-question svg {
  transform: rotate(180deg);
}

.xr-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
}

.xr-faq-item.is-open .xr-faq-answer {
  grid-template-rows: 1fr;
}

.xr-faq-answer > div {
  min-height: 0;
  overflow: hidden;
}

.xr-faq-answer p {
  padding: 8px 24px 24px;
  color: var(--xr-white-65);
  font-size: 14px;
  line-height: 22px;
}

.xr-short-grid,
.xr-ig-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.xr-reel-card {
  aspect-ratio: 9 / 16;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
}

.xr-reel-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .65;
}

.xr-reel-card .xr-play {
  position: relative;
  z-index: 2;
}

.xr-reel-card--live {
  cursor: pointer;
}

.xr-reel-card--live .video-js {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  background: #000;
}

.xr-reel-card--live .video-js .vjs-tech {
  object-fit: cover;
}

.xr-reel-card--live .video-js .vjs-poster {
  background-size: cover;
}

.xr-reel-card--live .video-js img {
  opacity: 1;
  object-fit: cover;
}

.xr-ig-panel {
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 32px;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  background: #0d0d0f;
}

.xr-ig-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.xr-ig-user {
  display: flex;
  align-items: center;
  gap: 16px;
}

.xr-ig-avatar {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  padding: 2px;
  border: 2px solid #e4405f;
  border-radius: 999px;
}

.xr-ig-avatar span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #191919;
  overflow: hidden;
}

.xr-ig-avatar img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.xr-ig-handle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.xr-ig-handle h3 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}

.xr-ig-handle svg {
  width: 15px;
  height: 15px;
  color: #3897f0;
}

.xr-ig-stat {
  margin-top: 12px;
  color: var(--xr-white-70);
  font-size: 13px;
  line-height: 19.5px;
}

.xr-ig-stat strong {
  font-weight: 700;
}

body.xr-page .xr-ig-follow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
  text-decoration: none;
}

@media (max-width: 1120px) {
  .xr-info-grid,
  .xr-deliver-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xr-process__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xr-process {
    height: auto;
  }

  .xr-process__sticky {
    position: relative;
    height: auto;
    padding: 96px 0;
  }

  .xr-process-card {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }

  .xr-short-grid,
  .xr-ig-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xr-footer {
    height: auto;
  }

  .xr-footer__grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .xr-footer__left,
  .xr-footer__right {
    min-height: 360px;
  }

  .xr-footer__bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.xr-page .header {
    width: calc(100vw - 24px);
    gap: 12px;
    padding-left: 10px;
  }

  body.xr-page .nav2__logo {
    margin-right: 4px;
  }

  body.xr-page .header__nav .t {
    padding: 6px 8px;
    font-size: 13px;
  }

  body.xr-page .lv-cta {
    padding: 8.8px 12px;
  }

  .xr-wrap,
  .xr-wide-wrap,
  .xr-info-grid {
    width: min(100% - 32px, 1100px);
  }

  .xr-section,
  .xr-cta,
  .xr-faq,
  .xr-service-hero {
    padding-inline: 16px;
  }

  .xr-hero {
    min-height: 620px;
    margin-inline: 0;
    padding-inline: 20px;
  }

  body.xr-page .xr-hero h1 {
    font-size: 44px;
  }

  body.xr-page .xr-service-hero h1 {
    font-size: 38px;
    line-height: 1.1;
  }

  .xr-benefit-grid,
  .xr-info-grid,
  .xr-deliver-grid,
  .xr-chips {
    grid-template-columns: 1fr;
  }

  .xr-client-arrow--prev {
    left: 10px;
  }

  .xr-client-arrow--next {
    right: 10px;
  }

  .xr-process__box {
    padding: 0 20px;
  }

  .xr-process__grid {
    gap: 32px;
  }

  .xr-step button {
    grid-template-columns: 34px 1fr;
  }

  .xr-short-grid,
  .xr-ig-grid {
    grid-template-columns: 1fr;
  }

  .xr-ig-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .xr-footer {
    margin-inline: 12px;
  }

  .xr-footer__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .xr-footer__tile {
    right: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Reference hover states (xlides parity: footer links, social tiles, logo tile, nav pause) */
.xr-footer__col a { transition: color .2s ease; }
.xr-footer__col a:hover { color: #fff; }

.xr-footer__socials a,
.xr-footer__social-row a {
  transition: transform .2s ease, background-color .2s ease;
}
.xr-footer__socials a:hover,
.xr-footer__social-row a:hover {
  transform: translateY(-4px);
  background-color: rgba(255,255,255,.10);
}

.xr-footer__tile {
  transition: transform .3s ease;
}
.xr-footer__tile:hover {
  transform: rotate(6deg) scale(1.05);
}

/* Responsive parity pass: measured Tailwind breakpoints */
.xr-wrap {
  width: min(1100px, calc(100% - 40px));
}

.xr-wide-wrap {
  width: min(1200px, calc(100% - 40px));
}

.xr-section,
.xr-cta,
.xr-faq {
  padding: 64px 20px;
}

.xr-service-hero {
  padding: 112px 20px 64px;
}

.xr-section-head h2,
.xr-cta h2 {
  font-size: 26px;
  line-height: 1.1;
}

.xr-hero {
  height: calc(100svh - 108px);
}

.xr-hero__content {
  width: 100%;
  max-width: 1100px;
}

body.xr-page .xr-hero h1 {
  max-width: 32ch;
  font-size: 44px;
  line-height: 1.05;
}

body.xr-page .xr-hero p {
  max-width: 448px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 22.75px;
}

.xr-hero .xr-btn-row {
  gap: 12px;
  margin-top: 32px;
}

.xr-trust__caption {
  padding-inline: 16px;
  font-size: 16px;
  line-height: 24px;
}

.xr-trust__band {
  height: 88px;
}

.xr-logo-cell {
  height: 40px;
}

.xr-logo-cell img {
  height: 20px;
}

.xr-logo-cell--square img {
  height: 30px;
}

.xr-benefit-grid,
.xr-chips,
.xr-deliver-grid,
.xr-info-grid,
.xr-process__grid,
.xr-short-grid,
.xr-ig-grid {
  grid-template-columns: minmax(0, 1fr);
}

.xr-benefit-grid {
  gap: 12px;
}

.xr-benefit-card {
  padding: 32px;
}

.xr-benefit-icon {
  width: 48px;
  height: 48px;
}

.xr-benefit-card h3 {
  font-size: 20px;
}

body.xr-page .xr-service-hero h1 {
  font-size: 28px;
  line-height: 1.08;
}

.xr-hero-media {
  width: 100%;
  max-width: 57.5rem;
}

.xr-chips {
  width: 100%;
  max-width: 57.5rem;
  gap: 12px;
}

.xr-info-grid {
  width: min(1200px, calc(100% - 40px));
  gap: 32px;
}

.xr-deliver-grid {
  gap: 12px;
  margin-top: 48px;
}

.xr-process {
  height: 250vh;
}

.xr-process__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
}

.xr-process__box {
  width: min(1100px, calc(100% - 40px));
  max-width: none;
  padding: 40px 16px;
}

.xr-process__grid {
  gap: 40px;
}

.xr-process-card {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.xr-short-grid,
.xr-ig-grid {
  gap: 24px;
}

.xr-ig-panel {
  width: min(1200px, 100%);
}

.xr-cta__panel {
  max-width: 1060px;
}

.xr-footer {
  height: auto;
}

.xr-footer__grid {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
}

.xr-footer__left,
.xr-footer__right {
  min-height: 360px;
}

.xr-footer__cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 560px;
}

.xr-footer__bottom {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 640px) {
  .xr-section-head h2,
  .xr-cta h2 {
    font-size: 30px;
  }

  .xr-logo-cell {
    height: 48px;
  }

  .xr-logo-cell img {
    height: 24px;
  }

  .xr-logo-cell--square img {
    height: 36px;
  }

  .xr-logo-cell--md img {
    height: 28px;
  }

  body.xr-page .xr-hero h1 {
    max-width: none;
    font-size: 44px;
  }

  body.xr-page .xr-service-hero h1 {
    font-size: 36px;
  }

  .xr-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xr-benefit-grid,
  .xr-deliver-grid,
  .xr-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xr-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .xr-process__box {
    padding: 40px 32px;
  }

  .xr-short-grid,
  .xr-ig-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .xr-wrap {
    width: min(1100px, calc(100vw - 96px));
  }

  .xr-wide-wrap {
    width: min(1200px, calc(100vw - 96px));
  }

  .xr-section,
  .xr-cta,
  .xr-faq {
    padding: 96px 48px;
  }

  .xr-service-hero {
    padding: 144px 48px 64px;
  }

  .xr-section-head h2,
  .xr-cta h2 {
    font-size: 34px;
  }

  body.xr-page .xr-hero h1 {
    font-size: 60px;
  }

  .xr-hero p {
    max-width: 672px;
    margin-top: 32px;
    font-size: 17px;
    line-height: 27.6px;
  }

  .xr-hero .xr-btn-row {
    gap: 16px;
    margin-top: 40px;
  }

  .xr-trust__caption {
    padding-inline: 32px;
    font-size: 18px;
    line-height: 27px;
  }

  .xr-trust__band {
    height: 96px;
  }

  body.xr-page .xr-service-hero h1 {
    font-size: 44px;
  }

  .xr-info-grid {
    width: min(1200px, calc(100vw - 96px));
  }

  .xr-footer__grid {
    grid-template-columns: minmax(320px, .9fr) 1.1fr;
  }
}

@media (min-width: 1024px) {
  body.xr-page .xr-hero h1 {
    font-size: 68px;
  }

  .xr-deliver-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xr-process__box {
    width: min(1100px, calc(100vw - 96px));
    padding: 48px;
  }

  .xr-process__grid {
    grid-template-columns: 1fr minmax(0, 440px);
    gap: 56px;
  }

  .xr-short-grid,
  .xr-ig-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }

  .xr-footer {
    height: 400px;
  }

  .xr-footer__grid {
    grid-template-columns: 420px 1fr;
    height: 400px;
  }

  .xr-footer__left,
  .xr-footer__right {
    min-height: 0;
  }

  .xr-footer__cols {
    gap: 56px;
    max-width: 580px;
  }

  .xr-footer__bottom {
    grid-template-columns: 1fr 430px;
    align-items: end;
  }
}

@media (min-width: 1536px) {
  .xr-wrap,
  .xr-hero__content,
  .xr-process__box {
    max-width: 1320px;
  }

  .xr-wrap,
  .xr-process__box {
    width: 1320px;
  }

  body.xr-page .xr-hero h1 {
    font-size: 80px;
  }

  .xr-cta__panel {
    max-width: 1280px;
  }
}

/* Mobile parity: reference uses 16px side padding on phones (cards 358px at 390vw) */
@media (max-width: 639px) {
  .xr-wrap,
  .xr-wide-wrap,
  .xr-info-grid {
    width: 100%;
  }
  .xr-section,
  .xr-cta,
  .xr-faq,
  .xr-service-hero,
  .xr-hero {
    padding-inline: 16px;
  }
}

@media (max-width: 1024px) {
  .xr-service-row {
    flex-direction: column-reverse;
    gap: 24px;
    margin-bottom: 64px;
  }

  .xr-service-row__text {
    max-width: none;
  }

  .xr-service-row__text,
  .xr-service-row__media {
    width: 100%;
  }

  body.xr-page .xr-service-row h3 {
    font-size: 32px;
  }
}

@media (max-width: 639px) {
  .xr-service-row {
    margin-bottom: 48px;
  }

  body.xr-page .xr-service-row h3 {
    font-size: 28px;
  }
}

@media (max-width: 1120px) {
  .xr-process {
    height: auto;
  }

  .xr-process__sticky {
    position: relative;
    height: auto;
    padding: 96px 0;
  }
}

/* Service structure parity: podcasting and faceless page-specific sections */
.xr-landscape-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(1100px, 100%);
  margin: 16px auto 0;
}

.xr-landscape-card {
  aspect-ratio: 544 / 306;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #191919;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
}

.xr-landscape-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.35) 68%, rgba(0,0,0,.68) 100%);
  pointer-events: none;
}

.xr-section--short-pull {
  margin-top: -96px;
  padding-top: 0;
  padding-bottom: 96px;
}

.xr-section--short-pull .xr-section-head {
  margin-top: 160px;
}

.xr-section--short-pull .xr-section-head h2 {
  margin-top: 0;
}

.xr-section--short-pull .xr-short-grid {
  gap: 16px;
  margin-top: 32px;
}

.xr-info-grid--compact {
  width: min(1100px, 100%);
  gap: 12px;
  margin-top: 24px;
}

.xr-ig-panel {
  background: rgba(52,52,54,.30);
}

.xr-info-grid--panel-follow {
  margin-top: 24px;
}

.xr-section-head--work-stack {
  margin-top: 80px;
  margin-bottom: 40px;
}

.xr-work-reel-panel {
  margin: 0 auto;
}

.xr-work-reel-panel + .xr-work-reel-panel {
  margin-top: 48px;
}

.xr-work-reel-panel .xr-ig-grid {
  margin-top: 0;
}

@media (max-width: 1120px) {
  .xr-short-grid,
  .xr-ig-grid,
  .xr-info-grid--compact,
  .xr-info-grid--panel-follow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .xr-landscape-grid,
  .xr-short-grid,
  .xr-ig-grid,
  .xr-info-grid--compact,
  .xr-info-grid--panel-follow {
    grid-template-columns: minmax(0, 1fr);
  }

  .xr-section--short-pull {
    margin-top: -48px;
  }

  .xr-section--short-pull .xr-section-head {
    margin-top: 112px;
  }
}

/* Reference: short-form header carries 160px top offset inside the pulled-up section */
.xr-section--short-pull .xr-section-head {
  padding-top: 160px;
}

/* Grey hover glow on X-Factor benefit cards (same treatment as service cards) */
.xr-benefit-card {
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease;
}

.xr-benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(255,255,255,.09), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.xr-benefit-card:hover::before {
  opacity: 1;
}

.xr-benefit-card:hover {
  border-color: rgba(255,255,255,.22);
}

/* ===== X-Factor FeatureGrid redesign (vanilla port of shadcn FeatureGrid, dark theme) ===== */
.xr-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.xr-feature-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: #0c0c0c;
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.xr-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 0%), rgba(96,140,255,.11), transparent 80%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.xr-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
}

.xr-feature-card:hover::before { opacity: 1; }

.xr-feature-card__img {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}

.xr-feature-card__img img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.5));
}

.xr-feature-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 96px;
  text-align: left;
}

.xr-feature-card__body h3 {
  font-family: 'Nohemi', Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 6px;
}

.xr-feature-card__body p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  margin: 0;
}

.xr-feature-card__arrow {
  align-self: flex-end;
  margin-top: 16px;
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,.45);
  transition: transform .3s ease, color .3s ease;
}

.xr-feature-card__arrow svg { width: 100%; height: 100%; }

.xr-feature-card:hover .xr-feature-card__arrow {
  transform: translateX(4px);
  color: #fff;
}

@media (max-width: 900px) {
  .xr-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .xr-feature-card { flex-direction: column; }
  .xr-feature-card__body { min-height: 0; }
}

/* ===== Nav Services dropdown (reference pattern) ===== */
.nav-services {
  position: relative;
  pointer-events: auto;
}

.nav-services__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.nav-services__btn svg {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,.7);
  transition: transform .2s ease;
}

.nav-services.is-open .nav-services__btn svg,
.nav-services:hover .nav-services__btn svg {
  transform: rotate(180deg);
}

.nav-services__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  margin-top: 12px;
  width: max-content;
  min-width: 200px;
  padding: 6px;
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 200;
}

.nav-services.is-open .nav-services__menu,
.nav-services:hover .nav-services__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-services__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: 'Outfit', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.nav-services__menu a:hover {
  background: rgba(255,255,255,.06);
}

/* ===== Info overlay: page slides up from bottom and fills the screen ===== */
.xr-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #000;
  transform: translateY(100%);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), border-radius .65s cubic-bezier(.22, 1, .36, 1);
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  visibility: hidden;
}

.xr-info-overlay.is-open {
  transform: translateY(0);
  border-radius: 0;
  visibility: visible;
}

.xr-info-overlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.xr-info-overlay__close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.xr-info-overlay__close:hover {
  background: rgba(255,255,255,.12);
  transform: rotate(90deg);
}

.xr-info-overlay__close svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .xr-info-overlay { transition: none; }
}

/* Launches tweet band — dark theme (xr) skin over the live-site section */
body.xr-page .lc {
  background: transparent;
  color: #fff;
  padding: 96px 48px;
}

body.xr-page .lc__inner {
  max-width: 1200px;
}

body.xr-page .lc-card {
  background: var(--xr-card);
  border: 1px solid var(--xr-line);
  border-radius: 18px;
  color: #fff;
  transition: background .2s ease, border-color .3s ease, transform .2s ease;
}

body.xr-page a.lc-card:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
}

body.xr-page .lc-card__avatar {
  background: #1a1a1a;
}

body.xr-page .lc-card__name {
  color: #fff;
}

body.xr-page .lc-card__handle {
  color: var(--xr-white-55);
}

body.xr-page .lc-card__x {
  color: #fff;
}

body.xr-page .lc-card__text {
  color: rgba(255,255,255,.85);
}

body.xr-page .lc-stat,
body.xr-page .lc-pending {
  color: var(--xr-white-55);
}

body.xr-page .lc-card--cta {
  background: var(--xr-card);
  border: 1px dashed rgba(255,255,255,.22);
}

body.xr-page .lc-cta__plus {
  background: rgba(255,255,255,.06);
  color: #fff;
}

body.xr-page .lc-cta__title {
  font-family: "Nohemi", Georgia, serif;
  color: #fff;
}

body.xr-page .lc-cta__sub {
  color: var(--xr-white-60);
}

body.xr-page .lc-cta__btn {
  color: #fff;
}

/* Spotlight glow (home service-card treatment) on launches tweet cards + info cards */
body.xr-page .lc-card,
.xr-info-card {
  position: relative;
  overflow: hidden;
}

body.xr-page .lc-card::before,
.xr-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 0%), rgba(96,140,255,.13), transparent 80%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

body.xr-page .lc-card:hover::before,
.xr-info-card:hover::before {
  opacity: 1;
}

.xr-info-card {
  transition: border-color .3s ease;
}

.xr-info-card:hover {
  border-color: rgba(255,255,255,.22);
}

/* ===== HERO BG TEST 3 (procedural ground shader) — delete this block + the two marked blocks in index.html to revert to the ORIGINAL blue horizon ===== */
body.xr-page:not(.xr-service) .xr-hero {
  background: #09081e;
}
body.xr-page:not(.xr-service) .xr-hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  filter: contrast(1.1) brightness(0.9);
}
body.xr-page:not(.xr-service) .xr-hero__glow {
  display: none;
}
/* ===== END HERO BG TEST 3 ===== */

/* ===== Floating "Book a call" pill (appears after the hero) ===== */
body.xr-page .xr-call-pill {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: rgb(10,10,10);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

body.xr-page .xr-call-pill.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

body.xr-page .xr-call-pill:hover {
  transform: translate(-50%, -2px);
}

.xr-call-pill__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #191919;
  border: 2px solid rgb(10,10,10);
  box-sizing: border-box;
  overflow: hidden;
}

.xr-call-pill__avatar img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.xr-call-pill__text {
  display: flex;
  flex-direction: column;
  padding-right: 2px;
}

.xr-call-pill__text strong {
  color: #fff;
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
}

.xr-call-pill__text span {
  color: rgba(255,255,255,.6);
  font-family: "Outfit", Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  line-height: 1.05;
  margin-top: 1px;
}

.xr-call-pill__arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  transition: background .2s ease;
}

.xr-call-pill:hover .xr-call-pill__arrow {
  background: rgba(255,255,255,.2);
}

.xr-call-pill__arrow svg {
  width: 12px;
  height: 12px;
}

/* ===== Shader on dome surfaces (CTA panel, footer glow, footer tile) ===== */
.xr-shader-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: contrast(1.1) brightness(0.9);
}

.xr-cta__glow.xr-dome,
.xr-footer__left-glow.xr-dome,
.xr-footer__tile {
  background: #09081e;
  animation: none;
}


/* ===== HERO BG TEST 4 (falling pattern) — delete this block + the two divs in index.html to go back to the shader hero ===== */
body.xr-page:not(.xr-service) .xr-hero-shader {
  display: none;
}
body.xr-page:not(.xr-service) .xr-hero-fall {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000;
  background-image: radial-gradient(4px 100px at 0px 235px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 235px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 117.5px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 252px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 252px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 126px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 150px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 150px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 75px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 253px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 253px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 126.5px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 204px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 204px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 102px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 134px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 134px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 67px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 179px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 179px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 89.5px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 299px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 299px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 149.5px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 215px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 215px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 107.5px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 281px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 281px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 140.5px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 158px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 158px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 79px, rgba(150,182,255,1) 100%, transparent 150%), radial-gradient(4px 100px at 0px 210px, rgba(150,182,255,1), transparent), radial-gradient(4px 100px at 300px 210px, rgba(150,182,255,1), transparent), radial-gradient(1.5px 1.5px at 150px 105px, rgba(150,182,255,1) 100%, transparent 150%);
  background-size: 300px 235px, 300px 235px, 300px 235px, 300px 252px, 300px 252px, 300px 252px, 300px 150px, 300px 150px, 300px 150px, 300px 253px, 300px 253px, 300px 253px, 300px 204px, 300px 204px, 300px 204px, 300px 134px, 300px 134px, 300px 134px, 300px 179px, 300px 179px, 300px 179px, 300px 299px, 300px 299px, 300px 299px, 300px 215px, 300px 215px, 300px 215px, 300px 281px, 300px 281px, 300px 281px, 300px 158px, 300px 158px, 300px 158px, 300px 210px, 300px 210px, 300px 210px;
  background-position: 0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px, 50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px, 100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px, 150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px, 200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px, 250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
  animation: xr-fall 150s linear infinite;
}
body.xr-page:not(.xr-service) .xr-hero-fall__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(0.75em);
  -webkit-backdrop-filter: blur(0.75em);
  background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 2.5px, rgba(0,0,0,.55) 2.5px);
  background-size: 8px 8px;
}

@keyframes xr-fall {
  from { background-position: 0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px, 50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px, 100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px, 150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px, 200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px, 250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px; }
  to { background-position: 0px 6800px, 3px 6800px, 151.5px 6917.5px, 25px 13632px, 28px 13632px, 176.5px 13758px, 50px 5416px, 53px 5416px, 201.5px 5491px, 75px 17175px, 78px 17175px, 226.5px 17301.5px, 100px 5119px, 103px 5119px, 251.5px 5221px, 125px 8428px, 128px 8428px, 276.5px 8495px, 150px 9876px, 153px 9876px, 301.5px 9965.5px, 175px 13391px, 178px 13391px, 326.5px 13540.5px, 200px 14741px, 203px 14741px, 351.5px 14848.5px, 225px 18770px, 228px 18770px, 376.5px 18910.5px, 250px 5082px, 253px 5082px, 401.5px 5161px, 275px 6375px, 278px 6375px, 426.5px 6480px; }
}
/* ===== END HERO BG TEST 4 ===== */