:root {
  --gold: #d6ad36;
  --gold-bright: #f3cf63;
  --gold-deep: #9c7215;
  --sapphire: #075fae;
  --sapphire-bright: #2a9df4;
  --platinum: #e8edf2;
  --graphite: #111820;
  --graphite-deep: #060a0f;
  --panel: #111820;
  --ink: #05080c;
  --soft: #aeb9c4;
  --line: rgba(74, 117, 154, .28);
  color-scheme: dark;
}

html {
  background: var(--graphite-deep);
}

body {
  background:
    radial-gradient(circle at 82% 7%, rgba(7, 95, 174, .16), transparent 27rem),
    linear-gradient(180deg, #060a0f 0, #080d13 48rem, #05080c 100%);
  color: var(--platinum);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection {
  color: #fff;
  background: var(--sapphire);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline-color: var(--sapphire-bright);
}

.site-header,
.sub-header {
  background: rgba(6, 10, 15, .94);
  border-bottom: 1px solid rgba(42, 157, 244, .42);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .32), inset 0 -1px rgba(214, 173, 54, .12);
}

.brand-link img,
.sub-header img {
  filter: drop-shadow(0 9px 18px rgba(0, 0, 0, .48));
}

.brand-link img {
  width: 226px;
  height: 76px;
}

.sub-header img {
  width: 178px;
}

.desktop-nav > a,
.services-menu summary,
.sub-header a {
  color: #c7d0d9;
}

.desktop-nav > a:hover,
.services-menu summary:hover,
.sub-header a:hover,
.sub-header a:focus-visible,
.site-header [aria-current="page"] {
  color: var(--platinum);
  text-shadow: 0 0 18px rgba(42, 157, 244, .42);
}

.services-menu summary::after,
.services-menu summary:after {
  color: var(--sapphire-bright);
}

.services-menu > div {
  background: rgba(9, 15, 22, .98);
  border-color: rgba(42, 157, 244, .36);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .7), inset 0 1px rgba(232, 237, 242, .05);
}

.services-menu > div a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--sapphire), #064578);
}

.header-cta,
.primary-button,
.button,
.package-book,
.spin-button,
.floating-book,
.sub-header .nav-cta {
  color: #071019;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 13px 34px rgba(214, 173, 54, .18), inset 0 1px rgba(255, 255, 255, .35);
}

.secondary-button,
.button.secondary {
  color: var(--platinum);
  background: rgba(7, 95, 174, .08);
  border-color: rgba(42, 157, 244, .58);
}

.secondary-button:hover,
.button.secondary:hover {
  color: #fff;
  border-color: var(--sapphire-bright);
  background: rgba(7, 95, 174, .2);
}

.home-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 26%, rgba(7, 95, 174, .24), transparent 33rem),
    radial-gradient(circle at 16% 5%, rgba(214, 173, 54, .1), transparent 24rem),
    linear-gradient(145deg, #070b10 0%, #0d151e 54%, #06090d 100%);
  border-bottom-color: rgba(42, 157, 244, .3);
}

.home-hero::before {
  z-index: -1;
  inset: 7% -12% 12% -18%;
  border: 2px solid rgba(42, 157, 244, .58);
  border-radius: 50%;
  background: none;
  opacity: .62;
  transform: rotate(-7deg);
  box-shadow: inset 0 0 0 1px rgba(232, 237, 242, .08), 0 0 38px rgba(7, 95, 174, .12);
  -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 18%, #000 82%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent 1%, #000 18%, #000 82%, transparent 99%);
}

.home-hero::after {
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: 9%;
  width: 72%;
  height: 46%;
  border: 1px solid rgba(214, 173, 54, .46);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: rotate(-5deg);
}

.hero-brand > img {
  width: min(650px, 98%);
  filter: drop-shadow(0 22px 35px rgba(0, 0, 0, .7));
}

.hero-brand > span,
.eyebrow,
.offer-kicker,
.page-hero .kicker,
.section-kicker {
  color: var(--sapphire-bright);
}

.hero-brand h1,
.section-heading h2,
.page-hero h1,
.simple-hero h1,
.booking-hero h1,
.about-hero h1,
.business-hero h1 {
  color: var(--platinum);
  text-wrap: balance;
}

em,
.section-heading h2 em,
.quick-book h2 em {
  color: var(--gold-bright);
}

.audience-chips span,
.badge-row span,
.wheel-key li {
  color: #d9e1e8;
  background: rgba(7, 95, 174, .1);
  border-color: rgba(42, 157, 244, .42);
}

.hero-scene {
  background:
    radial-gradient(circle at 50% 26%, rgba(42, 157, 244, .27), transparent 34%),
    linear-gradient(150deg, #15212d, #080d12 72%);
  border-color: rgba(42, 157, 244, .5);
  box-shadow: inset 0 1px rgba(232, 237, 242, .12), 0 28px 90px #000;
}

.hero-scene::before {
  opacity: .42;
  background-image: radial-gradient(circle, rgba(232, 237, 242, .55) 1px, transparent 1.5px);
}

.hero-scene::after {
  background: rgba(7, 95, 174, .22);
}

.scene-lines {
  inset: 8% -18%;
  border-color: rgba(42, 157, 244, .66);
  transform: rotate(-7deg);
  box-shadow: 0 0 0 1px rgba(214, 173, 54, .17), 0 0 44px rgba(7, 95, 174, .18);
}

.scene-label {
  background: rgba(7, 12, 18, .88);
  border-color: rgba(42, 157, 244, .62);
  box-shadow: 0 15px 45px #000, inset 0 1px rgba(214, 173, 54, .18);
}

.scene-label b {
  color: var(--gold-bright);
}

.trust-bar,
.process-section,
.faq-section,
.business-services {
  background: #080d12;
  border-color: rgba(42, 157, 244, .18);
}

.trust-bar div,
.process-grid article {
  border-color: rgba(92, 124, 151, .22);
}

.eyebrow > span {
  background: linear-gradient(90deg, var(--sapphire-bright), var(--gold));
}

.service-card,
.info-card,
.price-card,
.contact-box,
.booking-builder,
.booking-step,
.package-grid article,
.business-benefits article,
.values-section article,
.faq-list details,
.faq-grid details,
.homepage-price-grid a,
.game-panel,
.control-form,
.legal-page {
  background:
    radial-gradient(circle at 100% 0, rgba(7, 95, 174, .2), transparent 40%),
    linear-gradient(145deg, #131c25, #090e13 70%);
  border-color: rgba(42, 157, 244, .28);
  box-shadow: inset 0 1px rgba(232, 237, 242, .045);
}

.service-card::after,
.info-card::after,
.price-card::after {
  position: absolute;
  right: -34%;
  bottom: -28%;
  width: 88%;
  height: 54%;
  border: 1px solid rgba(42, 157, 244, .2);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.service-card,
.info-card,
.price-card {
  position: relative;
  overflow: hidden;
}

.service-number {
  color: rgba(42, 157, 244, .2);
}

.service-card a,
.info-card h3,
.price-card h3,
.contact-box a,
.inline-link,
.breadcrumb span[aria-current="page"],
.breadcrumb a:hover,
.faq-grid summary::after,
.faq-list summary span,
.rate-list strong,
.rate-row strong,
.price,
.highlight-number,
.starting-price,
.package-head strong,
.price-list strong,
.game-links a {
  color: var(--gold-bright);
}

.quick-book,
.proof-section,
.package-section,
.page-hero,
.simple-hero,
.booking-hero,
.about-hero,
.business-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 20%, rgba(7, 95, 174, .22), transparent 34rem),
    linear-gradient(145deg, #0b1118, #060a0f 70%);
  border-color: rgba(42, 157, 244, .28);
  overflow: hidden;
}

.quick-book::after,
.proof-section::after,
.page-hero::after,
.simple-hero::after,
.booking-hero::after,
.about-hero::after,
.business-hero::after {
  position: absolute;
  z-index: -1;
  right: -15%;
  bottom: -42%;
  width: 78%;
  height: 74%;
  border: 1px solid rgba(42, 157, 244, .38);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: rotate(-7deg);
}

.game-promo {
  color: var(--platinum);
  background:
    radial-gradient(circle at 100% 0, rgba(42, 157, 244, .24), transparent 48%),
    linear-gradient(135deg, #101923, #080d12);
  border: 1px solid rgba(42, 157, 244, .42);
  box-shadow: inset 0 -3px var(--gold);
}

.game-promo .eyebrow,
.game-promo p,
.game-promo h2 {
  color: var(--platinum);
}

.game-promo .eyebrow span {
  background: var(--sapphire-bright);
}

.secondary-button.light {
  color: #fff;
  border-color: var(--sapphire-bright);
}

.page-hero,
.simple-hero,
.booking-hero {
  border-bottom: 1px solid rgba(42, 157, 244, .32);
}

.activity-hero-image,
.poster-section figure {
  background: var(--graphite);
  border-color: rgba(42, 157, 244, .46);
  box-shadow: 0 30px 75px rgba(0, 0, 0, .64), inset 0 0 0 1px rgba(214, 173, 54, .18);
}

.booking-builder input,
.booking-builder select,
.booking-builder textarea,
.game-form input[type="text"],
.game-form input[type="email"],
.game-form input[type="tel"],
.control-form input {
  color: var(--platinum);
  background: #070c11;
  border-color: rgba(87, 116, 143, .58);
}

.booking-builder input:focus,
.booking-builder select:focus,
.booking-builder textarea:focus,
.game-form input:focus,
.control-form input:focus {
  border-color: var(--sapphire-bright);
  box-shadow: 0 0 0 3px rgba(42, 157, 244, .16);
}

.booking-summary,
.booking-confirmation,
.notice,
.result-box,
.control-output {
  background: rgba(7, 95, 174, .09);
  border-color: var(--sapphire);
}

.wheel {
  border-color: var(--graphite);
  background: conic-gradient(#111820 0 57%, #075fae 57% 82%, #e8edf2 82% 94%, #d6ad36 94% 99%, #fff3be 99% 100%);
  box-shadow: 0 0 0 4px var(--sapphire-bright), 0 28px 80px #000;
}

.wheel::after {
  border-color: var(--sapphire-bright);
  background-color: #070c11;
}

footer,
.simple-footer {
  position: relative;
  background:
    radial-gradient(circle at 12% 0, rgba(7, 95, 174, .18), transparent 28rem),
    linear-gradient(180deg, #080d12, #04070a);
  border-top: 2px solid var(--sapphire);
}

footer::before,
.simple-footer::before {
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  content: "";
}

.footer-bottom {
  color: #8996a2;
  border-color: rgba(42, 157, 244, .2);
}

.mobile-navigation {
  background: rgba(6, 10, 15, .98);
  border-color: rgba(42, 157, 244, .42);
}

.mobile-navigation a {
  border-color: rgba(83, 111, 136, .25);
}

.menu-toggle {
  background: #0c141c;
  border-color: rgba(42, 157, 244, .48);
}

.menu-toggle span {
  background: linear-gradient(90deg, var(--sapphire-bright), var(--platinum));
}

@media (max-width: 760px) {
  .brand-link img {
    width: 190px;
    height: 66px;
  }

  .home-hero::before {
    inset: 4% -52% 23% -48%;
  }

  .home-hero::after {
    right: -48%;
    width: 130%;
  }

  .scene-lines {
    inset: 9% -34%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero::before,
  .home-hero::after,
  .scene-lines {
    transform: none;
  }
}