:root {
  color-scheme: dark;
  --bg: oklch(9.8% .018 325);
  --paper: oklch(15.4% .026 325);
  --paper-2: oklch(20% .036 325);
  --text: oklch(94% .018 92);
  --muted: oklch(74% .026 92);
  --soft: oklch(58% .035 300);
  --line: rgba(244, 240, 223, 0.14);
  --accent: oklch(88% .21 126);
  --accent-2: oklch(67% .2 18);
  --blue: oklch(70% .16 222);
  --acid: oklch(90% .19 102);
  --violet: oklch(57% .2 312);
  --brick: oklch(26% .095 19);
  --radius: 10px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 11% 18%, rgba(120, 30, 55, .46), transparent 25rem),
    radial-gradient(circle at 88% 14%, rgba(157, 242, 47, .16), transparent 30rem),
    radial-gradient(circle at 72% 72%, rgba(156, 75, 255, .17), transparent 28rem),
    linear-gradient(180deg, rgba(244, 240, 223, .035), transparent 330px),
    var(--bg);
}
body.no-scroll { overflow: hidden; }
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  opacity: .86;
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(244,240,223,.075) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(157,242,47,.12) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(231,63,85,.15) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(244,240,223,.025) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(244,240,223,.018) 0 1px, transparent 1px 11px);
  background-size: 760px 430px, 680px 380px, 590px 360px, auto, auto;
}
body::after {
  opacity: .44;
  background:
    radial-gradient(circle, rgba(244,240,223,.5) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(157,242,47,.42) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(231,63,85,.13), rgba(231,63,85,.13)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(228,239,56,.11), rgba(228,239,56,.11)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(244,240,223,.09) 20% 20.5%, transparent 20.7% 100%);
}
a { color: inherit; text-decoration: none; }

main {
  background:
    linear-gradient(180deg, transparent 0 18rem, rgba(14,9,13,.72) 42rem, transparent 100%),
    repeating-linear-gradient(0deg, rgba(244,240,223,.018) 0 1px, transparent 1px 13px),
    var(--bg);
}

.app-banner {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 20px;
  background: #09090a;
  border-bottom: 1px solid var(--line);
}
.app-banner div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-banner strong { color: var(--accent); }
.app-banner span { color: var(--muted); font-size: 13px; }
.app-banner a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 0 14px;
  background: var(--accent);
  color: #121212;
  font-weight: 900;
  font-size: 13px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px clamp(18px, 4vw, 72px);
  background: rgba(11, 11, 13, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; }
.nav { display: flex; gap: 20px; color: var(--muted); font-size: 14px; font-weight: 800; }
.nav a:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta, .ghost-button, .chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.header-cta, .chip.active, .ghost-button:hover {
  border-color: transparent;
  color: #111;
  background: var(--accent);
}

section {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 7vw, 96px) clamp(18px, 5vw, 84px);
}

.site-header,
main,
.footer,
.lightbox,
.booking-modal {
  position: relative;
  z-index: 1;
}
section > * { position: relative; z-index: 3; }
section::before,
section::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
section::before {
  right: clamp(-70px, -3vw, -18px);
  top: clamp(40px, 8vw, 130px);
  width: clamp(220px, 28vw, 390px);
  height: clamp(130px, 16vw, 220px);
  opacity: .34;
  background:
    linear-gradient(105deg, transparent 0 12%, rgba(255,255,255,.14) 12% 34%, transparent 34% 100%),
    linear-gradient(105deg, transparent 0 50%, rgba(216,79,115,.22) 50% 57%, transparent 57% 100%),
    linear-gradient(105deg, transparent 0 72%, rgba(205,232,76,.16) 72% 75%, transparent 75% 100%);
  clip-path: polygon(0 14%, 90% 0, 100% 74%, 12% 100%);
  transform: rotate(-6deg);
}
section:nth-of-type(2n)::before {
  left: clamp(-110px, -5vw, -30px);
  right: auto;
  transform: rotate(6deg);
}
section:nth-of-type(3n)::before {
  opacity: .28;
  border-radius: 48% 52% 45% 55%;
  background:
    radial-gradient(circle at 40% 50%, transparent 0 42%, rgba(66,183,255,.18) 42% 44%, transparent 44% 100%),
    radial-gradient(circle at 52% 48%, transparent 0 56%, rgba(255,255,255,.12) 56% 57%, transparent 57% 100%);
}
section:nth-of-type(5n)::before { opacity: .24; }

section::after { content: none; }


.hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
  background:
    linear-gradient(102deg, rgba(205,232,76,.12) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.hero-copy {
  max-width: 780px;
  border-left: 5px solid var(--accent);
  padding-left: clamp(16px, 2vw, 28px);
}
.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 820px;
  margin-bottom: 22px;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: .98;
  letter-spacing: 0;
}
h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.05;
}
h3 { margin-bottom: 10px; font-size: 21px; }
.hero-text, .problem-list, .operator-copy p, .demo p, .footer p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}
.button:active,
.club-card-book:active,
.chip:active { transform: translateY(1px) scale(.99); }
.primary { background: var(--accent); color: #111; box-shadow: 4px 4px 0 var(--accent-2); }
.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; max-width: 560px; }

.hero-stats div, .search-box, .club-detail, .feature-grid article, .inside-column,
.pricing-grid article, .demo-form, .phone-shell, .content-grid article, .market-grid div,
.faq-list details, .login-panel, .product-visual, .feed-main, .feed-list article {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  background: rgba(21,22,26,.86);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.hero-stats div { padding: 14px; }
.hero-stats strong { display: block; color: var(--accent); font-size: 24px; }
.hero-stats span, .search-box span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }

.hero-copy,
.section-head,
.operator-copy {
  background: rgba(11, 11, 13, .82);
  border-radius: 8px;
  padding: 12px;
}

.product-visual { overflow: hidden; border-radius: 14px; }
.search-preview { padding: 18px; }
.search-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.search-preview-head strong { font-size: 20px; }
.search-preview-head span { color: var(--muted); font-weight: 800; }
.search-preview-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.search-preview-form div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.search-preview-form span, .preview-list p {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.search-preview-form strong { display: block; margin-top: 5px; }
.preview-list { display: grid; gap: 10px; }
.preview-list article {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.preview-list h3 { margin: 0 0 4px; font-size: 16px; }
.preview-list p { margin: 0; }
.preview-list strong { color: var(--accent); }
.preview-photo {
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2c3240, #595f6d);
}

.catalog, .problem, .operator-view, .app-module, .market, .faq, .login-strip {
  border-top: 1px solid var(--line);
}
.features,
.inside,
.operator-view,
.market,
.pricing,
.faq {
  display: none;
}
.problem, .operator-view, .demo, .app-module, .market, .login-strip {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.section-head { max-width: 900px; margin-bottom: 34px; }
.section-head.wide { max-width: 1080px; }
.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px minmax(250px, 1.15fr) minmax(250px, 1fr);
  grid-template-areas:
    "search count sort scope"
    ". . sort view";
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
}
.catalog-toolbar > .search-box:first-child { grid-area: search; }
.catalog-toolbar > .search-box:nth-child(2) { grid-area: count; }
.catalog-toolbar > .sort-controls:not(.catalog-scope-controls) { grid-area: sort; }
.catalog-toolbar > .catalog-scope-controls { grid-area: scope; }
.catalog-toolbar > .view-switch { grid-area: view; justify-self: start; }
.search-box { min-height: 60px; padding: 11px 16px; }
.search-box strong { display: block; margin-top: 5px; }
.sort-controls, .view-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-search-input {
  width: 100%;
  min-width: 0;
  margin-top: 5px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 800;
}
.catalog-search-input::placeholder { color: var(--muted); }
.catalog-scope-controls .chip { white-space: nowrap; }

.club-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }
.catalog.map-mode .club-layout { display: none; }
.club-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.club-card {
  width: 100%;
  min-height: 226px;
  min-width: 0;
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  padding: 8px 8px 42px;
  overflow: hidden;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(21,22,26,.88);
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.club-card-main {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(88px, 1fr) auto;
  gap: 6px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.club-card.active { border-color: rgba(215,255,40,.62); }
.club-card {
  border-radius: 8px;
  transition: transform 180ms ease, border-color 180ms ease;
}
.club-card:hover {
  transform: translateY(-2px) rotate(-.35deg);
  border-color: rgba(205,232,76,.44);
}
.club-thumb {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 6px;
  filter: saturate(1.08) contrast(1.03);
  background: #111;
}
.club-photo-empty {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  text-align: center;
}
.club-photo-empty span {
  padding: 8px;
  font-size: 12px;
  font-weight: 900;
}
.club-card h3 {
  margin: 0 0 4px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-card p {
  display: -webkit-box;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.28;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.club-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.club-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.club-source-row span {
  max-width: 100%;
  padding: 4px 6px;
  overflow: hidden;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.08);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-card-empty {
  min-height: 160px;
  aspect-ratio: auto;
  padding: 20px;
}
.club-list-more {
  min-height: 54px;
  border: 1px solid rgba(215,255,40,.38);
  border-radius: 8px;
  color: var(--text);
  background: rgba(215,255,40,.08);
  font-weight: 900;
  cursor: pointer;
}
.club-card-mark {
  display: inline-flex;
  margin-top: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #111;
  background: var(--accent);
  font-size: 11px;
  font-weight: 900;
}
.club-card-mark + .club-card-mark { margin-left: 6px; }
.muted-mark { color: var(--text); background: rgba(255,255,255,.08); }
.club-card-book {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: auto;
  min-height: 26px;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: #111;
  background: var(--accent);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(216,79,115,.8);
}
.club-detail { position: sticky; top: 96px; min-height: 430px; padding: 22px; }
.club-hero { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.club-badge {
  align-self: start;
  padding: 8px 12px;
  border-radius: 8px;
  color: #111;
  background: var(--accent);
  font-size: 12px;
  font-weight: 900;
}
.club-description, .feature-grid p, .inside-column li, .pricing-grid p, .pricing-grid li,
.content-grid p, .market-grid p, .faq-list p, .numbered p, .login-panel p {
  color: var(--muted);
  line-height: 1.65;
}
.club-gallery {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 8px;
  margin: 18px 0 22px;
}
.gallery-button {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}
.gallery-button:first-child { grid-row: span 2; }
.gallery-button img {
  display: block;
  width: 100%;
  height: 122px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #111;
  transition: transform 160ms ease, filter 160ms ease;
}
.gallery-button:hover img {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.12);
}
.gallery-button:first-child img { height: 252px; }
.club-gallery-empty {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  text-align: center;
}
.club-gallery-empty strong {
  color: var(--text);
  font-size: 16px;
}
.club-gallery-empty span {
  max-width: 320px;
  font-size: 13px;
}
.club-offer { margin-bottom: 22px; padding: 16px; border-radius: 10px; background: rgba(215,255,40,.08); }
.club-offer span {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.club-offer strong { display: block; margin-top: 7px; }
.club-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
}
.club-specs div {
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
}
.club-specs span {
  display: block;
  margin-bottom: 7px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.club-specs strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.club-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.club-stats div { padding: 14px; border-radius: 8px; background: var(--paper-2); }
.club-stats span { display: block; color: var(--soft); font-size: 12px; }
.club-stats strong { display: block; margin-top: 6px; }
.club-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.club-zones span {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  font-size: 13px;
}
.club-dashboard { display: grid; gap: 10px; }
.club-dashboard div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.club-dashboard span { color: var(--muted); }
.club-review {
  margin: 20px 0 0;
  padding: 16px;
  border-left: 3px solid var(--accent-2);
  color: var(--muted);
  background: rgba(255,255,255,.035);
  line-height: 1.65;
}
.club-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.booking-widget {
  padding: 16px;
  border: 1px solid rgba(215,255,40,.22);
  border-radius: 12px;
  background: rgba(215,255,40,.045);
}
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.76);
}
.booking-modal.open { display: flex; }
.booking-dialog {
  position: relative;
  width: min(920px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: #111216;
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
}
.booking-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  color: var(--text);
  background: rgba(0,0,0,.5);
  font-size: 28px;
  cursor: pointer;
}
.booking-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}
.booking-head span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.booking-head h4 {
  margin: 6px 0 0;
  font-size: 22px;
}
.booking-head > strong {
  padding: 8px 10px;
  border-radius: 8px;
  color: #111;
  background: var(--accent);
  white-space: nowrap;
}
.booking-fields,
.booking-contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.booking-contact { grid-template-columns: 1fr 1fr; }
.pc-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-height: 380px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.pc-seat {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255,255,255,.055);
  font: inherit;
  cursor: pointer;
}
.pc-seat span {
  font-size: 12px;
  font-weight: 900;
}
.pc-seat small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-seat:hover:not(:disabled) {
  border-color: rgba(215,255,40,.55);
  background: rgba(215,255,40,.1);
}
.pc-seat.selected {
  color: #111;
  border-color: transparent;
  background: var(--accent);
}
.pc-seat.selected small { color: rgba(17,17,17,.72); }
.pc-seat.busy {
  opacity: .42;
  cursor: not-allowed;
  background: rgba(255,59,141,.1);
}
.booking-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.booking-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.booking-legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255,255,255,.14);
}
.booking-legend i.selected { background: var(--accent); }
.booking-legend i.busy { background: rgba(255,59,141,.45); }
.booking-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
}
.booking-summary span,
.booking-note {
  color: var(--muted);
  line-height: 1.5;
}
.booking-summary strong {
  color: var(--accent);
  white-space: nowrap;
}

.pc-floorplan {
  --cell-size: minmax(48px, 1fr);
  display: grid;
  grid-template-columns: repeat(var(--plan-cols), var(--cell-size));
  grid-template-rows: repeat(var(--plan-rows), 52px);
  gap: 7px;
  max-height: 460px;
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / calc(100% / var(--plan-cols)) 100%,
    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 100% 52px,
    radial-gradient(circle at 18% 16%, rgba(215,255,40,.08), transparent 12rem),
    rgba(0,0,0,.28);
}

.floor-landmark {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 8px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.045);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.floor-landmark.entry {
  border-color: rgba(215,255,40,.36);
  color: rgba(215,255,40,.9);
}

.floor-landmark.desk,
.floor-landmark.bar {
  background: rgba(255,255,255,.075);
}

.floor-landmark.console {
  border-color: rgba(255,235,59,.32);
  color: rgba(255,235,59,.9);
}

.floor-landmark.aisle {
  border-color: rgba(255,255,255,.08);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.11) 0 7px, transparent 7px 14px);
  color: transparent;
}

.floor-landmark.vip {
  border-color: rgba(255,0,170,.34);
  color: rgba(255,0,170,.9);
}

.floor-seat {
  min-height: 52px;
  position: relative;
  isolation: isolate;
  padding: 6px 5px;
  border-radius: 8px;
}

.floor-seat::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  z-index: -1;
  width: 24px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  transform: translateX(-50%);
}

.floor-seat.back::before {
  top: auto;
  bottom: 5px;
}

.floor-seat.left::before {
  left: 5px;
  top: 50%;
  width: 5px;
  height: 24px;
  transform: translateY(-50%);
}

.floor-seat.right::before {
  left: auto;
  right: 5px;
  top: 50%;
  width: 5px;
  height: 24px;
  transform: translateY(-50%);
}

.floor-seat.team {
  border-color: rgba(255,235,59,.28);
}

.floor-seat.vip {
  border-color: rgba(255,0,170,.3);
  background: rgba(255,0,170,.08);
}

.floor-seat.filtered {
  opacity: .24;
  cursor: not-allowed;
  filter: grayscale(.75);
}

.floor-seat.filtered span,
.floor-seat.filtered small {
  text-decoration: line-through;
}

.book-button { margin-top: 0; width: 100%; }
.book-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.booking-note {
  margin: 12px 0 0;
  font-size: 13px;
}

.club-page-modal {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: none;
  overflow: auto;
  padding: 22px;
  background: rgba(5,6,8,.86);
}
.club-page-modal.open { display: block; }
.club-page {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #101116;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  overflow: hidden;
}
.club-page-close {
  position: sticky;
  top: 14px;
  left: calc(100% - 54px);
  z-index: 5;
  width: 42px;
  height: 42px;
  margin: 14px 14px -56px auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  color: var(--text);
  background: rgba(0,0,0,.62);
  font-size: 30px;
  cursor: pointer;
}
.club-page-top {
  padding: 30px clamp(18px, 4vw, 42px) 22px;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.breadcrumbs span + span::before {
  content: "/";
  margin-right: 8px;
  color: var(--soft);
}
.club-page-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}
.club-page-title h1 {
  margin: 0 0 10px;
  font-size: clamp(40px, 7vw, 78px);
}
.club-page-title p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}
.club-page-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.club-page-facts span,
.service-list span,
.payment-list span {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  font-size: 13px;
  font-weight: 800;
}
.club-page-gallery {
  display: grid;
  grid-template-columns: 1.25fr .85fr .85fr;
  gap: 8px;
  padding: 0 clamp(18px, 4vw, 42px) 24px;
}
.club-page-gallery button {
  min-height: 180px;
  border: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}
.club-page-gallery button:first-child {
  grid-row: span 2;
}
.club-page-gallery img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: block;
  object-fit: cover;
}
.club-page-gallery-empty {
  display: block;
}
.club-page-gallery-empty div {
  min-height: 230px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  text-align: center;
}
.club-page-gallery-empty strong {
  color: var(--text);
  font-size: 22px;
}
.club-page-gallery-empty span {
  max-width: 360px;
  font-size: 14px;
}
.club-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  gap: 14px;
  padding: 0 clamp(18px, 4vw, 42px) 42px;
}
.club-page-section {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(21,22,26,.86);
}
.club-page-section.wide {
  grid-column: 1 / -1;
}
.club-page-section h2 {
  margin: 0 0 16px;
  font-size: 24px;
}
.club-page-section p,
.club-page-section li,
.club-page-section blockquote {
  color: var(--muted);
  line-height: 1.65;
}
.service-list,
.payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.promo-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
}
.config-table {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.config-row {
  min-width: 760px;
  display: grid;
  grid-template-columns: 150px repeat(var(--config-columns, 4), minmax(130px, 1fr));
}
.config-row + .config-row {
  border-top: 1px solid var(--line);
}
.config-row span {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.config-row .config-label {
  color: var(--text);
  background: rgba(255,255,255,.04);
  font-weight: 900;
}

.club-map-panel {
  display: none;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
  gap: 18px;
  align-items: stretch;
}
.catalog.map-mode .club-map-panel { display: grid; }
.club-map,
.map-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #15161a;
}
.club-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #111216;
}
.club-map.leaflet-container {
  font-family: Inter, Arial, sans-serif;
  color: #111;
}
.club-map .leaflet-control-zoom {
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 35px rgba(0,0,0,.25);
}
.club-map .leaflet-control-zoom a {
  color: #111;
  background: var(--accent);
  border-color: rgba(0,0,0,.18);
  font-weight: 900;
}
.club-map .leaflet-popup-content-wrapper,
.club-map .leaflet-popup-tip {
  color: var(--text);
  background: #15161a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
}
.club-map .leaflet-popup-content {
  margin: 12px 14px;
  line-height: 1.45;
}
.club-map .leaflet-control-attribution {
  color: rgba(255,255,255,.68);
  background: rgba(0,0,0,.58);
}
.club-map .leaflet-control-attribution a { color: var(--accent); }
.clubcore-map-point {
  cursor: pointer;
}
.club-map canvas {
  cursor: grab;
}
.club-map canvas:active {
  cursor: grabbing;
}
.clubcore-map-tooltip {
  max-width: 260px;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(9,9,10,.92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.34);
  font-weight: 800;
}
.clubcore-map-tooltip::before {
  border-top-color: rgba(9,9,10,.92);
}
.map-fallback {
  height: 100%;
  min-height: 560px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.map-fallback strong {
  color: var(--text);
  font-size: 22px;
}
.map-grid {
  position: absolute;
  inset: 0;
  opacity: .38;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.map-shape {
  position: absolute;
  left: 8%;
  right: 5%;
  top: 17%;
  bottom: 12%;
  border: 1px solid rgba(215,255,40,.26);
  border-radius: 48% 62% 44% 56% / 42% 38% 62% 58%;
  background:
    linear-gradient(135deg, rgba(215,255,40,.09), rgba(66,183,255,.07)),
    rgba(255,255,255,.025);
  box-shadow: inset 0 0 70px rgba(0,0,0,.32);
  transform: skewX(-8deg) rotate(-2deg);
}
.map-shape::before,
.map-shape::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: inherit;
}
.map-shape::before {
  inset: 12% 18% 15% 10%;
  transform: rotate(8deg);
}
.map-shape::after {
  inset: 28% 8% 20% 46%;
  transform: rotate(-10deg);
}
.map-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 18px auto;
  gap: 8px;
  align-items: center;
  border: 0;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(9,9,10,.72);
  border-radius: 8px;
  transform: translate(-10px, -50%);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  cursor: pointer;
}
.map-pin span {
  width: 18px;
  height: 18px;
  border: 4px solid #111;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(255,59,141,.2);
}
.map-pin strong {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.map-pin.active {
  color: #111;
  background: var(--accent);
  transform: translate(-10px, -50%) scale(1.06);
}
.map-pin.active span {
  background: #111;
  box-shadow: 0 0 0 5px rgba(17,17,17,.16);
}
.map-card {
  padding: 16px;
  align-self: stretch;
}
.map-card img,
.map-card-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
}
.map-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.map-card h3 {
  margin: 8px 0 8px;
  font-size: 28px;
}
.map-card p {
  margin: 0;
  color: var(--muted);
}
.map-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.map-card-meta strong {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  font-size: 13px;
}
.map-card-actions {
  display: grid;
  gap: 8px;
}
.map-open-detail,
.map-yandex-link {
  width: 100%;
}

.feature-grid, .inside-grid, .pricing-grid, .content-grid, .market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.booking-steps,
.deals-grid,
.blog-grid {
  display: grid;
  gap: 16px;
}
.booking-steps {
  grid-template-columns: repeat(3, 1fr);
}
.deals-grid,
.blog-grid {
  grid-template-columns: repeat(4, 1fr);
}
.booking-focus,
.deals-strip,
.blog-wall {
  border-top: 1px solid var(--line);
}
.booking-focus article,
.deals-grid article,
.blog-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #15161a;
}
.booking-focus .section-head p,
.blog-wall .section-head p {
  color: var(--muted);
  line-height: 1.65;
}
.booking-steps span,
.deals-grid strong,
.blog-grid span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.booking-steps h3,
.deals-grid h3,
.blog-grid h3 {
  margin: 12px 0 10px;
}
.booking-steps p,
.deals-grid p,
.blog-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.deals-grid article {
  min-height: 230px;
  display: flex;
  flex-direction: column;
}
.deals-grid a {
  margin-top: auto;
  color: var(--accent);
  font-weight: 900;
}
.feature-grid article, .pricing-grid article, .inside-column, .content-grid article, .market-grid div {
  padding: 22px;
}
.feature-grid span, .content-grid span { color: var(--accent); font-weight: 900; font-size: 13px; }
.app-module { align-items: center; }
.phone-shell {
  width: min(100%, 360px);
  justify-self: center;
  padding: 18px;
  border-radius: 18px;
  color: var(--text);
}
.phone-header { margin-bottom: 18px; color: var(--accent); font-weight: 900; }
.phone-card, .phone-row, .phone-button {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
.phone-card { margin-bottom: 12px; }
.phone-card span, .phone-row span { display: block; color: var(--muted); font-size: 12px; }
.phone-card strong, .phone-row strong { display: block; margin-top: 6px; }
.phone-card p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.phone-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.phone-button { margin-top: 14px; color: #111; background: var(--accent); text-align: center; font-weight: 900; }
.numbered { display: grid; gap: 14px; margin-top: 24px; }
.numbered div { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.numbered span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 9px;
  color: #111;
  background: var(--accent);
  font-weight: 900;
}
.numbered p { margin: 0; }
.login-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.login-panel { display: grid; gap: 14px; padding: 22px; }
ul { margin: 0; padding-left: 18px; }
li + li { margin-top: 10px; }
.timeline { display: grid; gap: 12px; }
.timeline div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 18px;
  border-radius: 10px;
  background: #15161a;
  border: 1px solid var(--line);
}
.timeline span { color: var(--accent); font-weight: 900; }
.timeline p { margin: 0; color: var(--muted); }
.content-grid article { min-height: 230px; }
.content-grid a { color: var(--accent); font-weight: 900; }
.market-grid strong { display: block; margin-bottom: 10px; font-size: 20px; }
.pricing-grid article { min-height: 330px; }
.pricing-grid .featured { border-color: rgba(215,255,40,.45); background: rgba(215,255,40,.07); }
.pricing-grid strong { display: block; margin: 22px 0; color: var(--accent); }
.faq-list { display: grid; gap: 10px; max-width: 980px; }
.faq-list details { padding: 18px 20px; }
.faq-list summary { cursor: pointer; font-weight: 900; }
.faq-list p { margin: 14px 0 0; }
.demo, .news-feed { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.demo-form { display: grid; gap: 14px; padding: 22px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 800; }
input,
select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  font: inherit;
}
input:focus,
select:focus { outline: 3px solid rgba(215,255,40,.16); border-color: var(--accent); }
.form-note { margin: 0; font-size: 13px; color: var(--muted); }
.feed-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
}
.feed-main {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(16,17,20,.28), rgba(0,0,0,.78)),
    #15161a;
  border-color: rgba(255,255,255,.18);
}
.feed-main span,
.feed-list span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.feed-main h3 {
  max-width: 560px;
  margin: 12px 0;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1;
}
.feed-main p {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.65;
}
.feed-main a {
  align-self: flex-start;
  margin-top: 10px;
  color: #111;
  background: var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 900;
}
.feed-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.feed-list article {
  min-height: 174px;
  padding: 20px;
}
.feed-list strong {
  display: block;
  margin: 10px 0;
  font-size: 20px;
  line-height: 1.2;
}
.feed-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.join { text-align: center; background: #09090a; color: #fff; }
.join p { max-width: 620px; margin: 0 auto 24px; color: var(--muted); line-height: 1.65; }
.footer {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 24px;
  padding: 42px clamp(20px, 5vw, 84px);
  color: var(--muted);
  background: #09090a;
  border-top: 1px solid var(--line);
}
.footer strong { display: block; color: var(--text); margin-bottom: 8px; }
.footer h4 { margin: 0 0 12px; color: var(--text); }
.footer a { display: block; margin-top: 8px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .94);
}
.lightbox.open { display: flex; }
.lightbox img {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 2;
}
.lightbox-close {
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 32px;
  line-height: 1;
}
.lightbox-nav {
  top: 50%;
  width: 54px;
  height: 74px;
  border-radius: 12px;
  font-size: 48px;
  transform: translateY(-50%);
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-caption {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: calc(100vw - 40px);
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.54);
  backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  z-index: 2;
}

@media (max-width: 980px) {
  .nav { display: none; }
  .hero, .problem, .operator-view, .demo, .club-layout, .club-map-panel, .app-module, .market, .login-strip, .feed-layout { grid-template-columns: 1fr; }
  .feature-grid, .inside-grid, .pricing-grid, .content-grid, .market-grid,
  .booking-steps, .deals-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
  .catalog-toolbar {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "search count"
      "sort sort"
      "scope scope"
      "view view";
  }
  .footer { grid-template-columns: 1fr 1fr; }
  .club-detail { position: static; }
  .club-map { min-height: 460px; }
  .club-page-gallery,
  .club-page-grid {
    grid-template-columns: 1fr;
  }
  .club-page-gallery button:first-child {
    grid-row: auto;
  }
  .club-page-title {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .site-header { padding: 14px 16px; }
  .header-cta, .header-actions .ghost-button { display: none; }
  .hero { padding-top: 42px; min-height: auto; }
  .search-preview-form, .feature-grid, .inside-grid, .pricing-grid, .content-grid, .market-grid, .feed-list,
  .club-stats, .hero-stats, .catalog-toolbar, .footer, .login-panels, .club-gallery,
  .booking-steps, .deals-grid, .blog-grid { grid-template-columns: 1fr; }
  .catalog-toolbar {
    grid-template-areas:
      "search"
      "count"
      "sort"
      "scope"
      "view";
  }
  .gallery-button:first-child { grid-row: auto; }
  .gallery-button:first-child img { height: 180px; }
  .gallery-button img { height: 160px; }
  .club-card { grid-template-columns: 1fr; }
  .club-specs { grid-template-columns: 1fr; }
  .booking-fields,
  .booking-contact,
  .booking-summary {
    grid-template-columns: 1fr;
  }
  .booking-summary {
    display: grid;
  }
  .pc-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-list article { grid-template-columns: 58px 1fr auto; }
  .club-hero { flex-direction: column; }
  .club-map { min-height: 420px; }
  .club-page-modal { padding: 10px; }
  .club-page-top,
  .club-page-gallery,
  .club-page-grid {
    padding-left: 14px;
    padding-right: 14px;
  }
  .club-page-gallery button { min-height: 150px; }
  .club-page-title h1 { font-size: 34px; }
  .map-pin {
    grid-template-columns: 16px;
    padding: 8px;
  }
  .map-pin strong { display: none; }
  .map-card-meta { grid-template-columns: 1fr; }
  .lightbox-nav { width: 42px; height: 56px; font-size: 36px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { right: 12px; }
}

/* Street art visual pass: cascade lock for stage 1. */
body {
  background:
    radial-gradient(circle at 11% 18%, rgba(120, 30, 55, .46), transparent 25rem),
    radial-gradient(circle at 88% 14%, rgba(157, 242, 47, .16), transparent 30rem),
    radial-gradient(circle at 72% 72%, rgba(156, 75, 255, .17), transparent 28rem),
    linear-gradient(180deg, rgba(244, 240, 223, .035), transparent 330px),
    var(--bg);
}

body::before {
  opacity: .86;
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(244,240,223,.075) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(157,242,47,.12) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(231,63,85,.15) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(244,240,223,.025) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(244,240,223,.018) 0 1px, transparent 1px 11px);
  background-size: 760px 430px, 680px 380px, 590px 360px, auto, auto;
}

body::after {
  opacity: .44;
  background:
    radial-gradient(circle, rgba(244,240,223,.5) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(157,242,47,.42) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(231,63,85,.13), rgba(231,63,85,.13)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(228,239,56,.11), rgba(228,239,56,.11)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(244,240,223,.09) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(157,242,47,.18), transparent 31%),
    linear-gradient(180deg, rgba(58,13,24,.9), rgba(9,8,10,.96));
  border-bottom: 1px solid rgba(228,239,56,.25);
  box-shadow: inset 0 -1px 0 rgba(244,240,223,.06);
}

.app-banner a,
.header-cta,
.button.primary {
  border-radius: 3px;
  color: #10110c;
  clip-path: polygon(0 12%, 94% 0, 100% 82%, 7% 100%);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(58,13,24,.82), rgba(11,9,12,.92) 44%, rgba(24,12,31,.84)),
    rgba(11, 11, 13, .92);
  border-bottom: 1px solid rgba(244,240,223,.13);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 -1px 0 rgba(157,242,47,.09);
}

.brand {
  font-family: "Russo One", Inter, Arial, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.brand-mark {
  border-radius: 4px;
  color: #11140c;
  clip-path: polygon(8% 0, 100% 10%, 92% 100%, 0 88%);
  box-shadow: 4px 4px 0 var(--accent-2), 0 0 22px rgba(157,242,47,.2);
}

.nav {
  font-weight: 900;
}

.nav a {
  position: relative;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left;
  transition: transform 180ms var(--ease-out);
}

.nav a:hover {
  color: var(--accent);
  transform: translateY(-1px);
}

.nav a:hover::after {
  transform: scaleX(1) rotate(-1deg);
}

.header-cta,
.ghost-button,
.chip {
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(244,240,223,.06), rgba(244,240,223,.025)),
    rgba(255,255,255,.04);
}

.header-cta,
.chip.active,
.ghost-button:hover {
  color: #10110c;
  box-shadow: 3px 3px 0 rgba(231,63,85,.62);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(157,242,47,.12), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(231,63,85,.17), transparent 24rem),
    linear-gradient(102deg, rgba(228,239,56,.09) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(244,240,223,.035), transparent);
}

.hero::after {
  content: "CLUBCORE";
  position: absolute;
  left: clamp(18px, 5vw, 84px);
  bottom: 22px;
  z-index: 1;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: clamp(58px, 13vw, 190px);
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(244,240,223,.045);
  -webkit-text-stroke: 1px rgba(157,242,47,.16);
  transform: rotate(-4deg);
  pointer-events: none;
}

.hero-copy {
  border: 1px solid rgba(244,240,223,.12);
  border-left: 1px solid rgba(244,240,223,.12);
  background:
    linear-gradient(135deg, rgba(15,13,16,.94), rgba(58,13,24,.62)),
    rgba(11, 11, 13, .82);
  box-shadow: 10px 10px 0 rgba(228,239,56,.08), inset 0 1px 0 rgba(244,240,223,.07);
  clip-path: polygon(0 0, 99% 2%, 100% 96%, 1% 100%);
}

.eyebrow {
  color: var(--acid);
  font-family: "Russo One", Inter, Arial, sans-serif;
  letter-spacing: .1em;
  text-shadow: 2px 2px 0 rgba(231,63,85,.5);
}

h1,
h2 {
  font-family: "Russo One", Inter, Arial, sans-serif;
  text-transform: uppercase;
}

h1 {
  color: var(--text);
  text-shadow:
    3px 3px 0 rgba(111,22,36,.95),
    6px 6px 0 rgba(11,9,12,.9),
    8px 8px 0 rgba(157,242,47,.28);
}

.hero-text {
  color: rgba(244,240,223,.78);
}

.button {
  position: relative;
  border-radius: 4px;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}

.button.primary {
  box-shadow: 5px 5px 0 var(--accent-2), 0 0 28px rgba(157,242,47,.14);
}

.button.primary::after {
  content: "";
  position: absolute;
  left: 19%;
  bottom: -12px;
  width: 7px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 38px -6px 0 -1px var(--accent), 82px -1px 0 -2px var(--accent);
}

.button.secondary {
  border-color: rgba(244,240,223,.22);
  background: rgba(244,240,223,.035);
  box-shadow: inset 0 1px 0 rgba(244,240,223,.08);
}

.button:hover,
.header-cta:hover,
.ghost-button:hover,
.chip:hover {
  transform: translateY(-2px);
}

.hero-stats div,
.product-visual {
  border-radius: 6px;
  border-color: rgba(244,240,223,.16);
  background:
    linear-gradient(180deg, rgba(244,240,223,.06), rgba(244,240,223,.025)),
    rgba(18,15,19,.88);
  box-shadow: 0 22px 50px rgba(0,0,0,.3), inset 0 1px 0 rgba(244,240,223,.08);
}

.hero-stats strong {
  font-family: "Russo One", Inter, Arial, sans-serif;
  color: var(--accent);
  text-shadow: 2px 2px 0 rgba(231,63,85,.5);
}

.search-preview {
  position: relative;
  border: 2px solid rgba(244,240,223,.18);
  background:
    linear-gradient(135deg, rgba(19,16,20,.96), rgba(47,14,31,.84)),
    rgba(21,22,26,.86);
  clip-path: polygon(1% 0, 100% 3%, 98% 100%, 0 96%);
}

.search-preview::before {
  content: "BOOK NOW";
  position: absolute;
  right: -18px;
  top: 18px;
  z-index: 0;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: 54px;
  color: rgba(157,242,47,.07);
  -webkit-text-stroke: 1px rgba(157,242,47,.16);
  transform: rotate(7deg);
}

.search-preview > * {
  position: relative;
  z-index: 1;
}

.search-preview-head strong,
.preview-list h3 {
  font-family: "Russo One", Inter, Arial, sans-serif;
  text-transform: uppercase;
}

.search-preview-form div,
.preview-list article {
  border-color: rgba(244,240,223,.16);
  background:
    linear-gradient(180deg, rgba(244,240,223,.055), rgba(244,240,223,.025)),
    rgba(255,255,255,.035);
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(157,242,47,.55), transparent 26px),
    linear-gradient(135deg, #241019, #4a1529 46%, #15111a);
}

/* Stage 1 readability fixes after screenshot QA. */
.header-cta {
  background: var(--accent);
  color: #10110c;
}

.hero h1 {
  max-width: 700px;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.04;
}

.hero-copy {
  overflow: visible;
}

/* Catalog layout update: detailed info opens from the card, so the duplicate side panel is hidden. */
.catalog:not(.map-mode) .club-layout {
  grid-template-columns: 1fr;
}

.catalog:not(.map-mode) .club-detail {
  display: none;
}

.catalog:not(.map-mode) .club-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Palette experiment: dark blue urban cyber, no yellow-green accents. */
:root {
  --bg: oklch(10% .025 255);
  --paper: oklch(15.5% .034 258);
  --paper-2: oklch(20% .044 265);
  --text: oklch(94% .018 245);
  --muted: oklch(75% .03 250);
  --soft: oklch(58% .045 270);
  --line: rgba(219, 235, 255, 0.14);
  --accent: oklch(76% .17 235);
  --accent-2: oklch(63% .21 312);
  --acid: oklch(73% .2 264);
  --violet: oklch(58% .22 300);
  --brick: oklch(25% .08 333);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(28, 70, 130, .5), transparent 25rem),
    radial-gradient(circle at 88% 14%, rgba(76, 201, 255, .17), transparent 30rem),
    radial-gradient(circle at 72% 72%, rgba(154, 92, 255, .2), transparent 28rem),
    linear-gradient(180deg, rgba(219, 235, 255, .035), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(219,235,255,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(76,201,255,.13) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(154,92,255,.15) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(219,235,255,.022) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(219,235,255,.016) 0 1px, transparent 1px 11px);
}

body::after {
  background:
    radial-gradient(circle, rgba(219,235,255,.44) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(76,201,255,.4) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(154,92,255,.13), rgba(154,92,255,.13)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(76,201,255,.1), rgba(76,201,255,.1)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(219,235,255,.085) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(76,201,255,.17), transparent 31%),
    linear-gradient(180deg, rgba(31,18,54,.92), rgba(7,10,18,.96));
  border-bottom-color: rgba(76,201,255,.26);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(18,30,62,.86), rgba(7,10,18,.94) 44%, rgba(35,18,55,.86)),
    rgba(7, 10, 18, .92);
  box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 -1px 0 rgba(76,201,255,.1);
}

.brand-mark {
  box-shadow: 4px 4px 0 var(--accent-2), 0 0 22px rgba(76,201,255,.18);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(76,201,255,.12), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(154,92,255,.18), transparent 24rem),
    linear-gradient(102deg, rgba(76,201,255,.08) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(219,235,255,.03), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(76,201,255,.075);
  -webkit-text-stroke-color: rgba(76,201,255,.18);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(7,10,18,.95), rgba(31,18,54,.7)),
    rgba(7, 10, 18, .82);
  box-shadow: 10px 10px 0 rgba(76,201,255,.075), inset 0 1px 0 rgba(219,235,255,.07);
}

h1 {
  text-shadow:
    3px 3px 0 rgba(31,18,54,.95),
    6px 6px 0 rgba(7,10,18,.92),
    8px 8px 0 rgba(76,201,255,.25);
}

.eyebrow,
.hero-stats strong {
  text-shadow: 2px 2px 0 rgba(154,92,255,.5);
}

.button.primary {
  box-shadow: 5px 5px 0 var(--accent-2), 0 0 28px rgba(76,201,255,.14);
}

.button.primary::after {
  background: var(--accent);
  box-shadow: 38px -6px 0 -1px var(--accent), 82px -1px 0 -2px var(--accent);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(9,14,25,.96), rgba(33,19,51,.86)),
    rgba(18,23,35,.9);
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(76,201,255,.55), transparent 26px),
    linear-gradient(135deg, #0b1629, #251742 46%, #10131d);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(76,201,255,.62);
}

.club-card:hover {
  border-color: rgba(76,201,255,.46);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(76,201,255,.08);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(12, 17, 28, .88);
}

/* Palette experiment 2: graphite wall, red paint, warm white, no yellow-green and no blue base. */
:root {
  --bg: oklch(9.5% .012 35);
  --paper: oklch(15% .018 35);
  --paper-2: oklch(20% .026 35);
  --text: oklch(93% .026 74);
  --muted: oklch(74% .028 70);
  --soft: oklch(57% .025 48);
  --line: rgba(246, 236, 214, 0.15);
  --accent: oklch(68% .18 32);
  --accent-2: oklch(82% .105 58);
  --acid: oklch(84% .085 58);
  --violet: oklch(50% .16 335);
  --brick: oklch(29% .09 25);
}

body {
  background:
    radial-gradient(circle at 14% 16%, rgba(118, 28, 30, .42), transparent 25rem),
    radial-gradient(circle at 86% 18%, rgba(221, 105, 66, .15), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(156, 52, 72, .16), transparent 28rem),
    linear-gradient(180deg, rgba(246, 236, 214, .035), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(246,236,214,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(221,105,66,.12) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(166,43,60,.13) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(246,236,214,.022) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(246,236,214,.016) 0 1px, transparent 1px 11px);
}

body::after {
  background:
    radial-gradient(circle, rgba(246,236,214,.42) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(221,105,66,.32) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(166,43,60,.14), rgba(166,43,60,.14)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(246,236,214,.075), rgba(246,236,214,.075)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(246,236,214,.08) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(221,105,66,.17), transparent 31%),
    linear-gradient(180deg, rgba(48,21,19,.92), rgba(10,9,9,.97));
  border-bottom-color: rgba(221,105,66,.26);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(45,18,17,.88), rgba(10,9,9,.95) 45%, rgba(34,21,20,.88)),
    rgba(10, 9, 9, .94);
  box-shadow: 0 18px 40px rgba(0,0,0,.3), inset 0 -1px 0 rgba(221,105,66,.11);
}

.brand-mark {
  box-shadow: 4px 4px 0 rgba(246,236,214,.62), 0 0 22px rgba(221,105,66,.14);
}

.app-banner a,
.header-cta,
.button.primary,
.chip.active,
.ghost-button:hover,
.club-card-book,
.club-badge,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button {
  background: var(--accent);
  color: oklch(10% .012 35);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(221,105,66,.13), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(166,43,60,.18), transparent 24rem),
    linear-gradient(102deg, rgba(246,236,214,.06) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(246,236,214,.028), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(221,105,66,.07);
  -webkit-text-stroke-color: rgba(246,236,214,.14);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(12,10,10,.96), rgba(56,20,19,.72)),
    rgba(12, 10, 10, .86);
  box-shadow: 10px 10px 0 rgba(246,236,214,.06), inset 0 1px 0 rgba(246,236,214,.07);
}

h1 {
  color: var(--text);
  text-shadow:
    3px 3px 0 rgba(118,28,30,.95),
    6px 6px 0 rgba(9,8,8,.92),
    8px 8px 0 rgba(221,105,66,.22);
}

.eyebrow,
.hero-stats strong {
  color: var(--accent-2);
  text-shadow: 2px 2px 0 rgba(118,28,30,.7);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(246,236,214,.62), 0 0 24px rgba(221,105,66,.11);
}

.button.primary::after {
  background: var(--accent);
  box-shadow: 38px -6px 0 -1px var(--accent), 82px -1px 0 -2px var(--accent);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(13,11,11,.96), rgba(48,21,21,.86)),
    rgba(18,15,15,.9);
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(221,105,66,.52), transparent 26px),
    linear-gradient(135deg, #191110, #4b1a1b 46%, #12100f);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(221,105,66,.58);
}

.club-card:hover {
  border-color: rgba(221,105,66,.45);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(221,105,66,.075);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(15, 13, 12, .9);
}

/* Palette option 1: Black / Chrome / Ice. */
:root {
  --bg: oklch(8.5% .008 260);
  --paper: oklch(14% .012 260);
  --paper-2: oklch(20% .014 260);
  --text: oklch(94% .012 250);
  --muted: oklch(75% .015 250);
  --soft: oklch(58% .018 250);
  --line: rgba(232, 239, 246, 0.16);
  --accent: oklch(86% .035 245);
  --accent-2: oklch(74% .09 220);
  --acid: oklch(92% .012 250);
  --violet: oklch(55% .08 280);
  --brick: oklch(18% .012 260);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(120, 132, 150, .22), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(112, 203, 255, .1), transparent 27rem),
    radial-gradient(circle at 70% 72%, rgba(238, 244, 250, .055), transparent 30rem),
    linear-gradient(180deg, rgba(232, 239, 246, .035), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(232,239,246,.085) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(112,203,255,.085) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(232,239,246,.08) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(232,239,246,.026) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(232,239,246,.017) 0 1px, transparent 1px 11px);
}

body::after {
  opacity: .55;
  background:
    radial-gradient(circle, rgba(232,239,246,.42) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(112,203,255,.22) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(232,239,246,.08), rgba(232,239,246,.08)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(112,203,255,.07), rgba(112,203,255,.07)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(232,239,246,.09) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(232,239,246,.16), transparent 31%),
    linear-gradient(180deg, rgba(20,22,26,.94), rgba(7,8,10,.97));
  border-bottom-color: rgba(232,239,246,.22);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(20,22,26,.94), rgba(7,8,10,.96) 45%, rgba(25,28,34,.94)),
    rgba(7, 8, 10, .95);
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 -1px 0 rgba(232,239,246,.1);
}

.app-banner a,
.header-cta,
.button.primary,
.chip.active,
.ghost-button:hover,
.club-card-book,
.club-badge,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button {
  background:
    linear-gradient(135deg, #f6f8fb 0%, #b7c0ca 32%, #ffffff 48%, #8e98a6 72%, #eef3f8 100%);
  color: #090a0c;
  box-shadow: 4px 4px 0 rgba(112,203,255,.34), inset 0 1px 0 rgba(255,255,255,.65);
}

.brand-mark {
  background:
    linear-gradient(135deg, #f6f8fb 0%, #aeb8c4 38%, #ffffff 52%, #7e8794 76%, #eef3f8 100%);
  box-shadow: 4px 4px 0 rgba(112,203,255,.34), 0 0 24px rgba(232,239,246,.16);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(232,239,246,.09), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(112,203,255,.08), transparent 24rem),
    linear-gradient(102deg, rgba(232,239,246,.055) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(232,239,246,.026), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(232,239,246,.055);
  -webkit-text-stroke-color: rgba(112,203,255,.16);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(10,11,13,.96), rgba(29,32,38,.72)),
    rgba(10, 11, 13, .88);
  box-shadow: 10px 10px 0 rgba(232,239,246,.055), inset 0 1px 0 rgba(255,255,255,.09);
}

h1 {
  color: var(--text);
  text-shadow:
    2px 2px 0 rgba(88,96,108,.95),
    5px 5px 0 rgba(5,6,8,.94),
    7px 7px 0 rgba(112,203,255,.18);
}

.eyebrow,
.hero-stats strong {
  color: #f2f5f8;
  text-shadow: 2px 2px 0 rgba(112,203,255,.28);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(112,203,255,.34), 0 0 24px rgba(232,239,246,.1);
}

.button.primary::after {
  background: #e8eff6;
  box-shadow: 38px -6px 0 -1px #b7c0ca, 82px -1px 0 -2px #eef3f8;
}

.button.secondary,
.ghost-button,
.chip {
  background:
    linear-gradient(180deg, rgba(232,239,246,.065), rgba(232,239,246,.025)),
    rgba(255,255,255,.03);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(9,10,12,.97), rgba(27,30,36,.88)),
    rgba(14,16,20,.92);
}

.search-preview-head strong,
.preview-list h3 {
  color: #f4f7fa;
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(232,239,246,.48), transparent 26px),
    linear-gradient(135deg, #101216, #252a32 46%, #0d0f12);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(232,239,246,.58);
}

.club-card:hover {
  border-color: rgba(232,239,246,.42);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(232,239,246,.07);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(12, 13, 16, .92);
}

.hero-stats div,
.product-visual,
.search-preview-form div,
.preview-list article {
  box-shadow: 0 22px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Palette option 2: Concrete / White Paint / Blood Red. */
:root {
  --bg: oklch(9% .01 260);
  --paper: oklch(15% .012 260);
  --paper-2: oklch(21% .014 260);
  --text: oklch(94% .018 75);
  --muted: oklch(75% .018 75);
  --soft: oklch(58% .015 75);
  --line: rgba(247, 241, 226, 0.15);
  --accent: oklch(94% .018 75);
  --accent-2: oklch(55% .21 24);
  --acid: oklch(94% .018 75);
  --violet: oklch(42% .08 330);
  --brick: oklch(24% .08 24);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(85, 87, 92, .25), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(154, 22, 30, .16), transparent 28rem),
    radial-gradient(circle at 70% 72%, rgba(247, 241, 226, .055), transparent 30rem),
    linear-gradient(180deg, rgba(247, 241, 226, .03), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(247,241,226,.075) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(154,22,30,.11) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(247,241,226,.065) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(247,241,226,.025) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(247,241,226,.016) 0 1px, transparent 1px 11px);
}

body::after {
  opacity: .6;
  background:
    radial-gradient(circle, rgba(247,241,226,.38) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(154,22,30,.24) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(247,241,226,.08), rgba(247,241,226,.08)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(154,22,30,.09), rgba(154,22,30,.09)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(247,241,226,.085) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(247,241,226,.12), transparent 31%),
    linear-gradient(180deg, rgba(18,18,19,.94), rgba(8,8,9,.97));
  border-bottom-color: rgba(247,241,226,.2);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(17,17,18,.95), rgba(8,8,9,.96) 45%, rgba(30,18,19,.9)),
    rgba(8, 8, 9, .95);
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 -1px 0 rgba(247,241,226,.08);
}

.brand-mark {
  background: #f7f1e2;
  color: #090909;
  box-shadow: 4px 4px 0 rgba(154,22,30,.72), 0 0 18px rgba(247,241,226,.12);
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button {
  background: oklch(55% .21 24);
  color: #f7f1e2;
  box-shadow: 4px 4px 0 rgba(247,241,226,.6), inset 0 1px 0 rgba(255,255,255,.2);
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background: #f7f1e2;
  color: #090909;
  box-shadow: 3px 3px 0 rgba(154,22,30,.62);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(247,241,226,.075), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(154,22,30,.15), transparent 24rem),
    linear-gradient(102deg, rgba(247,241,226,.045) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(247,241,226,.026), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(247,241,226,.05);
  -webkit-text-stroke-color: rgba(154,22,30,.18);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(12,12,13,.97), rgba(34,21,22,.78)),
    rgba(12, 12, 13, .9);
  box-shadow: 10px 10px 0 rgba(247,241,226,.05), inset 0 1px 0 rgba(255,255,255,.08);
}

h1 {
  color: #f7f1e2;
  text-shadow:
    2px 2px 0 rgba(154,22,30,.85),
    5px 5px 0 rgba(5,5,6,.95),
    7px 7px 0 rgba(247,241,226,.12);
}

.eyebrow,
.hero-stats strong {
  color: #f7f1e2;
  text-shadow: 2px 2px 0 rgba(154,22,30,.72);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(247,241,226,.6), 0 0 22px rgba(154,22,30,.13);
}

.button.primary::after {
  background: oklch(55% .21 24);
  box-shadow: 38px -6px 0 -1px oklch(55% .21 24), 82px -1px 0 -2px oklch(55% .21 24);
}

.button.secondary,
.ghost-button,
.chip {
  background:
    linear-gradient(180deg, rgba(247,241,226,.06), rgba(247,241,226,.022)),
    rgba(255,255,255,.025);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(10,10,11,.97), rgba(33,24,24,.88)),
    rgba(14,14,15,.92);
}

.search-preview-head strong,
.preview-list h3 {
  color: #f7f1e2;
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(247,241,226,.44), transparent 26px),
    linear-gradient(135deg, #111111, #2d1718 46%, #0c0c0d);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(154,22,30,.62);
}

.club-card:hover {
  border-color: rgba(247,241,226,.42);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(154,22,30,.08);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(13, 13, 14, .92);
}

/* Palette option 3: Dark Mono / Sticker Colors. */
:root {
  --bg: oklch(8.5% .006 260);
  --paper: oklch(14.5% .008 260);
  --paper-2: oklch(20% .01 260);
  --text: oklch(94% .01 250);
  --muted: oklch(74% .012 250);
  --soft: oklch(56% .012 250);
  --line: rgba(236, 238, 241, 0.14);
  --accent: oklch(92% .012 250);
  --accent-2: oklch(60% .2 24);
  --acid: oklch(90% .05 78);
  --violet: oklch(57% .17 292);
  --brick: oklch(23% .055 25);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(90, 92, 98, .2), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(210, 42, 52, .09), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(74, 95, 155, .08), transparent 30rem),
    linear-gradient(180deg, rgba(236, 238, 241, .032), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(236,238,241,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(236,238,241,.045) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(210,42,52,.08) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(236,238,241,.023) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(236,238,241,.014) 0 1px, transparent 1px 11px);
}

body::after {
  opacity: .52;
  background:
    radial-gradient(circle, rgba(236,238,241,.34) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(210,42,52,.2) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(236,238,241,.065), rgba(236,238,241,.065)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(210,42,52,.055), rgba(210,42,52,.055)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(236,238,241,.075) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(236,238,241,.1), transparent 31%),
    linear-gradient(180deg, rgba(17,18,20,.95), rgba(7,8,9,.98));
  border-bottom-color: rgba(236,238,241,.18);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(16,17,19,.96), rgba(7,8,9,.97) 46%, rgba(18,18,21,.94)),
    rgba(7, 8, 9, .96);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 -1px 0 rgba(236,238,241,.075);
}

.brand-mark {
  background: #eceef1;
  color: #08090a;
  box-shadow: 4px 4px 0 rgba(210,42,52,.62), 0 0 18px rgba(236,238,241,.1);
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button {
  background: oklch(60% .2 24);
  color: #f3f0ec;
  box-shadow: 4px 4px 0 rgba(236,238,241,.55), inset 0 1px 0 rgba(255,255,255,.18);
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background: #eceef1;
  color: #08090a;
  box-shadow: 3px 3px 0 rgba(210,42,52,.56);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(236,238,241,.065), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(210,42,52,.09), transparent 24rem),
    linear-gradient(102deg, rgba(236,238,241,.04) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(236,238,241,.024), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(236,238,241,.048);
  -webkit-text-stroke-color: rgba(236,238,241,.13);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(11,12,13,.98), rgba(25,26,29,.8)),
    rgba(11, 12, 13, .9);
  box-shadow: 10px 10px 0 rgba(236,238,241,.045), inset 0 1px 0 rgba(255,255,255,.075);
}

h1 {
  color: #eceef1;
  text-shadow:
    2px 2px 0 rgba(85,88,96,.9),
    5px 5px 0 rgba(4,5,6,.96),
    7px 7px 0 rgba(210,42,52,.16);
}

.eyebrow,
.hero-stats strong {
  color: #eceef1;
  text-shadow: 2px 2px 0 rgba(210,42,52,.55);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(236,238,241,.55), 0 0 20px rgba(210,42,52,.09);
}

.button.primary::after {
  background: oklch(60% .2 24);
  box-shadow: 38px -6px 0 -1px oklch(60% .2 24), 82px -1px 0 -2px oklch(60% .2 24);
}

.button.secondary,
.ghost-button,
.chip {
  background:
    linear-gradient(180deg, rgba(236,238,241,.055), rgba(236,238,241,.02)),
    rgba(255,255,255,.025);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(10,11,12,.98), rgba(24,25,28,.9)),
    rgba(13,14,16,.94);
}

.search-preview-head strong,
.preview-list h3 {
  color: #eceef1;
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(236,238,241,.38), transparent 26px),
    linear-gradient(135deg, #101112, #25272b 46%, #0b0c0d);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(210,42,52,.58);
}

.club-card:hover {
  border-color: rgba(236,238,241,.38);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(210,42,52,.065);
}

.club-card:nth-child(3n + 1) .club-card-book,
.content-grid article:nth-child(3n + 1) span,
.feed-list article:nth-child(3n + 1) span {
  background: oklch(60% .2 24);
}

.club-card:nth-child(3n + 2) .club-card-book,
.content-grid article:nth-child(3n + 2) span,
.feed-list article:nth-child(3n + 2) span {
  background: oklch(62% .16 250);
}

.club-card:nth-child(3n) .club-card-book,
.content-grid article:nth-child(3n) span,
.feed-list article:nth-child(3n) span {
  background: oklch(70% .13 68);
  color: #08090a;
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(12, 13, 15, .93);
}

/* Palette option 4: Purple Night / Silver. */
:root {
  --bg: oklch(9.5% .022 318);
  --paper: oklch(15% .03 318);
  --paper-2: oklch(21% .04 318);
  --text: oklch(93% .016 285);
  --muted: oklch(74% .026 292);
  --soft: oklch(58% .035 300);
  --line: rgba(232, 226, 240, 0.15);
  --accent: oklch(68% .13 334);
  --accent-2: oklch(82% .025 285);
  --acid: oklch(88% .018 285);
  --violet: oklch(58% .16 306);
  --brick: oklch(24% .075 338);
}

body {
  background:
    radial-gradient(circle at 14% 16%, rgba(65, 28, 76, .48), transparent 25rem),
    radial-gradient(circle at 86% 18%, rgba(178, 78, 139, .14), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(110, 72, 160, .18), transparent 30rem),
    linear-gradient(180deg, rgba(232, 226, 240, .032), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(232,226,240,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(178,78,139,.11) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(110,72,160,.12) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(232,226,240,.023) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(232,226,240,.014) 0 1px, transparent 1px 11px);
}

body::after {
  opacity: .56;
  background:
    radial-gradient(circle, rgba(232,226,240,.36) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(178,78,139,.26) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(110,72,160,.12), rgba(110,72,160,.12)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(232,226,240,.065), rgba(232,226,240,.065)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(232,226,240,.075) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(178,78,139,.16), transparent 31%),
    linear-gradient(180deg, rgba(34,18,42,.95), rgba(10,7,13,.98));
  border-bottom-color: rgba(178,78,139,.24);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(32,17,41,.96), rgba(10,7,13,.97) 46%, rgba(46,20,52,.94)),
    rgba(10, 7, 13, .96);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 -1px 0 rgba(232,226,240,.08);
}

.brand-mark {
  background:
    linear-gradient(135deg, #f1edf5 0%, #b7adbf 38%, #ffffff 52%, #8b8296 76%, #ece6f1 100%);
  color: #100912;
  box-shadow: 4px 4px 0 rgba(178,78,139,.52), 0 0 22px rgba(232,226,240,.12);
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button {
  background: oklch(68% .13 334);
  color: #120912;
  box-shadow: 4px 4px 0 rgba(232,226,240,.52), inset 0 1px 0 rgba(255,255,255,.22);
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background:
    linear-gradient(135deg, #f1edf5 0%, #b7adbf 38%, #ffffff 52%, #8b8296 76%, #ece6f1 100%);
  color: #100912;
  box-shadow: 3px 3px 0 rgba(178,78,139,.5);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(178,78,139,.12), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(110,72,160,.16), transparent 24rem),
    linear-gradient(102deg, rgba(232,226,240,.045) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(232,226,240,.024), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(232,226,240,.05);
  -webkit-text-stroke-color: rgba(178,78,139,.18);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(13,8,16,.98), rgba(41,20,49,.82)),
    rgba(13, 8, 16, .92);
  box-shadow: 10px 10px 0 rgba(232,226,240,.045), inset 0 1px 0 rgba(255,255,255,.08);
}

h1 {
  color: #f0edf4;
  text-shadow:
    2px 2px 0 rgba(97,49,104,.92),
    5px 5px 0 rgba(5,4,7,.96),
    7px 7px 0 rgba(178,78,139,.2);
}

.eyebrow,
.hero-stats strong {
  color: #f1edf5;
  text-shadow: 2px 2px 0 rgba(178,78,139,.55);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(232,226,240,.52), 0 0 20px rgba(178,78,139,.12);
}

.button.primary::after {
  background: oklch(68% .13 334);
  box-shadow: 38px -6px 0 -1px oklch(68% .13 334), 82px -1px 0 -2px oklch(68% .13 334);
}

.button.secondary,
.ghost-button,
.chip {
  background:
    linear-gradient(180deg, rgba(232,226,240,.055), rgba(232,226,240,.02)),
    rgba(255,255,255,.025);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(13,8,16,.98), rgba(36,22,44,.9)),
    rgba(15,10,18,.94);
}

.search-preview-head strong,
.preview-list h3 {
  color: #f1edf5;
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(178,78,139,.42), transparent 26px),
    linear-gradient(135deg, #120c16, #2a1735 46%, #0b080d);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(178,78,139,.58);
}

.club-card:hover {
  border-color: rgba(232,226,240,.38);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(178,78,139,.075);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(15, 10, 18, .93);
}

/* Palette option 5: Industrial Orange. */
:root {
  --bg: oklch(9% .012 58);
  --paper: oklch(15% .018 58);
  --paper-2: oklch(21% .026 58);
  --text: oklch(92% .022 75);
  --muted: oklch(73% .024 72);
  --soft: oklch(56% .022 66);
  --line: rgba(243, 234, 214, 0.15);
  --accent: oklch(70% .17 52);
  --accent-2: oklch(87% .035 78);
  --acid: oklch(87% .035 78);
  --violet: oklch(45% .08 25);
  --brick: oklch(28% .075 38);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(91, 64, 42, .35), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(210, 112, 42, .18), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(100, 82, 58, .18), transparent 30rem),
    linear-gradient(180deg, rgba(243, 234, 214, .032), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(243,234,214,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(210,112,42,.13) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(130,74,42,.12) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(243,234,214,.024) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(243,234,214,.015) 0 1px, transparent 1px 11px);
}

body::after {
  opacity: .58;
  background:
    radial-gradient(circle, rgba(243,234,214,.34) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(210,112,42,.28) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(210,112,42,.095), rgba(210,112,42,.095)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(243,234,214,.06), rgba(243,234,214,.06)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(243,234,214,.075) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(210,112,42,.18), transparent 31%),
    linear-gradient(180deg, rgba(31,24,18,.95), rgba(9,8,7,.98));
  border-bottom-color: rgba(210,112,42,.26);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(30,23,17,.96), rgba(9,8,7,.97) 46%, rgba(39,26,17,.94)),
    rgba(9, 8, 7, .96);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 -1px 0 rgba(210,112,42,.1);
}

.brand-mark {
  background: oklch(70% .17 52);
  color: #100b07;
  box-shadow: 4px 4px 0 rgba(243,234,214,.55), 0 0 22px rgba(210,112,42,.14);
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button {
  background: oklch(70% .17 52);
  color: #100b07;
  box-shadow: 4px 4px 0 rgba(243,234,214,.52), inset 0 1px 0 rgba(255,255,255,.2);
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background: #f3ead6;
  color: #100b07;
  box-shadow: 3px 3px 0 rgba(210,112,42,.58);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(210,112,42,.14), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(130,74,42,.18), transparent 24rem),
    linear-gradient(102deg, rgba(243,234,214,.045) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(243,234,214,.024), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(210,112,42,.07);
  -webkit-text-stroke-color: rgba(243,234,214,.14);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(13,11,9,.98), rgba(43,28,17,.82)),
    rgba(13, 11, 9, .92);
  box-shadow: 10px 10px 0 rgba(243,234,214,.045), inset 0 1px 0 rgba(255,255,255,.08);
}

h1 {
  color: #f3ead6;
  text-shadow:
    2px 2px 0 rgba(98,55,28,.95),
    5px 5px 0 rgba(5,4,3,.96),
    7px 7px 0 rgba(210,112,42,.22);
}

.eyebrow,
.hero-stats strong {
  color: #f3ead6;
  text-shadow: 2px 2px 0 rgba(210,112,42,.62);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(243,234,214,.52), 0 0 20px rgba(210,112,42,.12);
}

.button.primary::after {
  background: oklch(70% .17 52);
  box-shadow: 38px -6px 0 -1px oklch(70% .17 52), 82px -1px 0 -2px oklch(70% .17 52);
}

.button.secondary,
.ghost-button,
.chip {
  background:
    linear-gradient(180deg, rgba(243,234,214,.055), rgba(243,234,214,.02)),
    rgba(255,255,255,.025);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(13,11,9,.98), rgba(36,26,18,.9)),
    rgba(15,13,10,.94);
}

.search-preview-head strong,
.preview-list h3 {
  color: #f3ead6;
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(210,112,42,.46), transparent 26px),
    linear-gradient(135deg, #14110e, #332114 46%, #0b0908);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(210,112,42,.58);
}

.club-card:hover {
  border-color: rgba(243,234,214,.38);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(210,112,42,.075);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(15, 13, 10, .93);
}

/* Palette option 6: Ink Teal / Dirty Paper. */
:root {
  --bg: oklch(9% .018 205);
  --paper: oklch(15% .024 205);
  --paper-2: oklch(21% .03 205);
  --text: oklch(93% .025 88);
  --muted: oklch(74% .026 88);
  --soft: oklch(57% .03 205);
  --line: rgba(240, 233, 210, 0.15);
  --accent: oklch(67% .11 195);
  --accent-2: oklch(82% .055 88);
  --acid: oklch(86% .04 88);
  --violet: oklch(44% .08 190);
  --brick: oklch(25% .06 20);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(26, 78, 82, .38), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(47, 156, 151, .13), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(144, 48, 45, .1), transparent 30rem),
    linear-gradient(180deg, rgba(240, 233, 210, .032), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(240,233,210,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(47,156,151,.12) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(144,48,45,.08) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(240,233,210,.024) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(240,233,210,.015) 0 1px, transparent 1px 11px);
}

body::after {
  opacity: .58;
  background:
    radial-gradient(circle, rgba(240,233,210,.34) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(47,156,151,.26) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(47,156,151,.08), rgba(47,156,151,.08)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(240,233,210,.06), rgba(240,233,210,.06)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(240,233,210,.075) 20% 20.5%, transparent 20.7% 100%);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(47,156,151,.17), transparent 31%),
    linear-gradient(180deg, rgba(12,35,38,.95), rgba(6,10,11,.98));
  border-bottom-color: rgba(47,156,151,.24);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(12,34,37,.96), rgba(6,10,11,.97) 46%, rgba(15,39,42,.94)),
    rgba(6, 10, 11, .96);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 -1px 0 rgba(47,156,151,.1);
}

.brand-mark {
  background: #f0e9d2;
  color: #061012;
  box-shadow: 4px 4px 0 rgba(47,156,151,.62), 0 0 22px rgba(240,233,210,.1);
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button {
  background: oklch(67% .11 195);
  color: #051012;
  box-shadow: 4px 4px 0 rgba(240,233,210,.54), inset 0 1px 0 rgba(255,255,255,.18);
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background: #f0e9d2;
  color: #061012;
  box-shadow: 3px 3px 0 rgba(47,156,151,.58);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(47,156,151,.12), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(144,48,45,.09), transparent 24rem),
    linear-gradient(102deg, rgba(240,233,210,.045) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(240,233,210,.024), transparent);
}

.hero::after,
.search-preview::before {
  color: rgba(47,156,151,.055);
  -webkit-text-stroke-color: rgba(240,233,210,.13);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(6,13,14,.98), rgba(18,43,45,.82)),
    rgba(6, 13, 14, .92);
  box-shadow: 10px 10px 0 rgba(240,233,210,.045), inset 0 1px 0 rgba(255,255,255,.08);
}

h1 {
  color: #f0e9d2;
  text-shadow:
    2px 2px 0 rgba(28,82,84,.95),
    5px 5px 0 rgba(3,7,8,.96),
    7px 7px 0 rgba(47,156,151,.2);
}

.eyebrow,
.hero-stats strong {
  color: #f0e9d2;
  text-shadow: 2px 2px 0 rgba(47,156,151,.55);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(240,233,210,.54), 0 0 20px rgba(47,156,151,.11);
}

.button.primary::after {
  background: oklch(67% .11 195);
  box-shadow: 38px -6px 0 -1px oklch(67% .11 195), 82px -1px 0 -2px oklch(67% .11 195);
}

.button.secondary,
.ghost-button,
.chip {
  background:
    linear-gradient(180deg, rgba(240,233,210,.055), rgba(240,233,210,.02)),
    rgba(255,255,255,.025);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(6,13,14,.98), rgba(17,39,41,.9)),
    rgba(8,15,16,.94);
}

.search-preview-head strong,
.preview-list h3 {
  color: #f0e9d2;
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(47,156,151,.44), transparent 26px),
    linear-gradient(135deg, #071213, #163134 46%, #050a0b);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(47,156,151,.58);
}

.club-card:hover {
  border-color: rgba(240,233,210,.38);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(47,156,151,.075);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(8, 15, 16, .93);
}

/* Design play pass: posters, stickers, torn-paper edges. */
.hero {
  isolation: isolate;
}

.hero::before {
  width: min(34vw, 430px);
  height: min(22vw, 260px);
  right: 8vw;
  top: 120px;
  opacity: .42;
  background:
    linear-gradient(135deg, rgba(240,233,210,.11), rgba(47,156,151,.08)),
    repeating-linear-gradient(-8deg, rgba(240,233,210,.12) 0 2px, transparent 2px 12px);
  clip-path: polygon(3% 9%, 92% 0, 100% 74%, 12% 100%, 0 42%);
  transform: rotate(7deg);
}

.hero-copy {
  position: relative;
  transform: rotate(-.55deg);
}

.hero-copy::before,
.hero-copy::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-copy::before {
  width: 96px;
  height: 34px;
  right: 42px;
  top: -15px;
  background:
    linear-gradient(135deg, rgba(240,233,210,.86), rgba(183,171,145,.78)),
    repeating-linear-gradient(90deg, rgba(6,13,14,.18) 0 1px, transparent 1px 7px);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transform: rotate(4deg);
  clip-path: polygon(0 18%, 100% 0, 94% 78%, 7% 100%);
}

.hero-copy::after {
  width: 160px;
  height: 56px;
  left: -28px;
  bottom: 72px;
  opacity: .38;
  border: 2px solid currentColor;
  color: var(--accent);
  transform: rotate(-10deg);
  clip-path: polygon(8% 0, 100% 18%, 88% 100%, 0 82%);
}

.hero h1 {
  position: relative;
  max-width: 720px;
}

.hero h1::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 14%;
  bottom: -10px;
  height: 10px;
  opacity: .9;
  background: var(--accent);
  transform: rotate(-1.3deg);
  clip-path: polygon(0 24%, 100% 0, 96% 86%, 4% 100%);
}

.hero-actions {
  align-items: center;
}

.button.primary {
  transform: rotate(-2.5deg);
}

.button.secondary {
  transform: rotate(.8deg);
}

.button.primary:hover,
.button.secondary:hover {
  transform: translateY(-2px) rotate(0deg);
}

.hero-stats div {
  transform: rotate(-.6deg);
}

.hero-stats div:nth-child(2) {
  transform: rotate(.7deg);
}

.hero-stats div:nth-child(3) {
  transform: rotate(-.2deg);
}

.search-preview {
  transform: rotate(.25deg);
  box-shadow: 18px 18px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}

.search-preview::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -18px;
  height: 34px;
  opacity: .52;
  background:
    radial-gradient(circle at 18% 50%, var(--accent) 0 5px, transparent 6px),
    radial-gradient(circle at 42% 58%, var(--accent) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 45%, var(--accent) 0 4px, transparent 5px);
  filter: blur(.2px);
}

.search-preview-form div,
.preview-list article {
  clip-path: polygon(0 0, 98% 2%, 100% 94%, 2% 100%);
}

.preview-list article:nth-child(2) {
  transform: rotate(-.25deg);
}

.preview-list article:nth-child(3) {
  transform: rotate(.25deg);
}

.club-card {
  clip-path: polygon(1% 0, 100% 2%, 98% 100%, 0 96%);
}

.club-card:nth-child(3n + 2) {
  transform: rotate(.35deg);
}

.club-card:nth-child(3n) {
  transform: rotate(-.35deg);
}

.club-card:hover {
  transform: translateY(-4px) rotate(0deg);
}

.section-head {
  transform: rotate(-.25deg);
}

/* Design play pass 2: stamped club wall and paper fragments. */
.app-banner {
  overflow: hidden;
}

.app-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(240,233,210,.16) 24px 25px, transparent 25px 48px);
  transform: skewX(-14deg);
}

.brand {
  position: relative;
}

.brand::after {
  content: "club wall";
  position: absolute;
  left: 48px;
  bottom: -14px;
  color: var(--accent);
  font: 800 9px/1 Inter, Arial, sans-serif;
  letter-spacing: .22em;
  opacity: .72;
}

.nav a {
  padding: 5px 0;
}

.hero {
  min-height: 680px;
}

.hero-copy {
  padding: clamp(18px, 2.4vw, 30px);
  border-radius: 2px;
}

.hero-copy > .eyebrow {
  display: inline-block;
  max-width: 100%;
  padding: 6px 9px 5px;
  background: rgba(240,233,210,.08);
  border: 1px dashed rgba(240,233,210,.2);
  clip-path: polygon(0 6%, 99% 0, 100% 88%, 2% 100%);
}

.hero h1 {
  margin-top: 10px;
}

.hero-text {
  position: relative;
  padding-left: 18px;
}

.hero-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  bottom: .35em;
  width: 5px;
  background: var(--accent);
  clip-path: polygon(20% 0, 100% 8%, 72% 100%, 0 94%);
}

.hero-actions::before {
  content: "OPEN SEATS";
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  order: 3;
  color: var(--text);
  border: 1px solid rgba(240,233,210,.22);
  background: rgba(240,233,210,.045);
  font: 900 11px/1 "Russo One", Inter, Arial, sans-serif;
  letter-spacing: .12em;
  transform: rotate(2deg);
  clip-path: polygon(4% 0, 100% 12%, 94% 100%, 0 86%);
}

.hero-stats {
  position: relative;
}

.hero-stats::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -10px;
  height: 2px;
  opacity: .5;
  background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 26px);
}

.hero-stats div {
  position: relative;
  overflow: hidden;
}

.hero-stats div::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -20px;
  width: 78px;
  height: 78px;
  opacity: .12;
  border: 10px solid var(--accent);
  border-radius: 50%;
}

.search-preview {
  padding: 22px;
}

.search-preview-head {
  position: relative;
}

.search-preview-head::after {
  content: "LIVE";
  position: absolute;
  right: 0;
  bottom: -26px;
  padding: 5px 8px;
  color: var(--bg);
  background: var(--accent-2);
  font: 900 10px/1 "Russo One", Inter, Arial, sans-serif;
  letter-spacing: .16em;
  transform: rotate(4deg);
  clip-path: polygon(0 12%, 100% 0, 93% 100%, 7% 88%);
}

.search-preview-form {
  margin-top: 26px;
}

.preview-list {
  position: relative;
}

.preview-list::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 18px;
  bottom: -9px;
  height: 3px;
  opacity: .35;
  background: var(--accent);
  transform: rotate(-1deg);
}

.preview-list article {
  position: relative;
  box-shadow: 0 12px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
}

.preview-list article::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 12px;
  width: 34px;
  height: 10px;
  opacity: .16;
  background: var(--accent);
  transform: rotate(-7deg);
}

.club-list {
  perspective: 1000px;
}

.club-card {
  box-shadow: 0 20px 36px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07);
}

.club-card::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 3px;
  opacity: .24;
  background: var(--accent);
  z-index: 2;
  transform: rotate(-1deg);
}

.club-card-book {
  clip-path: polygon(0 13%, 96% 0, 100% 84%, 8% 100%);
}

@media (max-width: 760px) {
  .hero-actions::before {
    order: 0;
    width: 100%;
    justify-content: center;
  }

  .brand::after {
    display: none;
  }
}

/* Design play pass 3: night club wall, numbered stickers, deeper poster stack. */
body::after {
  background:
    radial-gradient(circle, rgba(240,233,210,.34) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(47,156,151,.26) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(47,156,151,.08), rgba(47,156,151,.08)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(240,233,210,.06), rgba(240,233,210,.06)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(240,233,210,.075) 20% 20.5%, transparent 20.7% 100%),
    repeating-linear-gradient(115deg, transparent 0 68px, rgba(240,233,210,.035) 68px 69px, transparent 69px 112px);
}

main::before {
  content: "PLAY / BOOK / REPEAT";
  position: fixed;
  left: -8vw;
  top: 46vh;
  z-index: 0;
  pointer-events: none;
  color: rgba(240,233,210,.035);
  -webkit-text-stroke: 1px rgba(47,156,151,.12);
  font: 900 clamp(64px, 12vw, 180px)/.8 "Russo One", Inter, Arial, sans-serif;
  letter-spacing: .02em;
  transform: rotate(-8deg);
}

.site-header::after {
  content: "";
  position: absolute;
  left: clamp(18px, 4vw, 72px);
  right: clamp(18px, 4vw, 72px);
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5;
}

.hero-copy {
  box-shadow:
    14px 16px 0 rgba(0,0,0,.28),
    26px 28px 0 rgba(47,156,151,.045),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.hero-copy > .eyebrow::before {
  content: "01";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 22px;
  margin-right: 8px;
  color: var(--bg);
  background: var(--accent);
  font: 900 11px/1 "Russo One", Inter, Arial, sans-serif;
  transform: rotate(-3deg);
}

.hero h1 {
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
}

.hero h1::before {
  content: "RE:BORN";
  position: absolute;
  right: 5%;
  top: -28px;
  z-index: -1;
  color: rgba(240,233,210,.028);
  -webkit-text-stroke: 1px rgba(47,156,151,.1);
  font-size: clamp(42px, 7vw, 96px);
  transform: rotate(7deg);
}

.hero-stats div::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 10px;
  width: 56px;
  height: 2px;
  opacity: .52;
  background: var(--accent);
  transform: rotate(-6deg);
}

.search-preview {
  box-shadow:
    14px 16px 0 rgba(0,0,0,.32),
    25px 27px 0 rgba(47,156,151,.04),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.search-preview-head strong::before {
  content: "02";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 22px;
  margin-right: 10px;
  color: var(--bg);
  background: var(--accent);
  font: 900 11px/1 "Russo One", Inter, Arial, sans-serif;
  transform: rotate(-4deg);
}

.search-preview-form div {
  position: relative;
}

.search-preview-form div::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 18px;
  height: 18px;
  opacity: .18;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.preview-list article {
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}

.preview-list article:hover {
  transform: translateX(4px) rotate(0deg);
  border-color: rgba(240,233,210,.28);
}

.preview-photo {
  position: relative;
  overflow: hidden;
}

.preview-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 42%, rgba(240,233,210,.18) 44% 49%, transparent 51%);
}

.catalog-toolbar {
  position: relative;
}

.catalog-toolbar::before {
  content: "FILTER WALL";
  position: absolute;
  right: 0;
  top: -30px;
  color: rgba(240,233,210,.13);
  font: 900 34px/.8 "Russo One", Inter, Arial, sans-serif;
  letter-spacing: .04em;
  transform: rotate(-2deg);
  pointer-events: none;
}

.club-card:nth-child(4n + 1)::after,
.club-card:nth-child(4n + 3)::after {
  content: "RE";
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  display: grid;
  width: 34px;
  height: 28px;
  place-items: center;
  color: var(--bg);
  background: var(--accent);
  font: 900 12px/1 "Russo One", Inter, Arial, sans-serif;
  transform: rotate(8deg);
  clip-path: polygon(0 14%, 100% 0, 92% 100%, 8% 88%);
}

.club-card:hover .club-thumb {
  filter: saturate(1.18) contrast(1.08) brightness(1.05);
}

/* Framer-style viewport color moment for the news block. */
.motion-color-swatch {
  position: relative;
  display: grid;
  width: min(320px, 72vw);
  height: 46px;
  place-items: center;
  margin-top: 18px;
  opacity: 0;
  background: rgb(0, 255, 0);
  color: #070707;
  box-shadow: 0 0 0 1px rgba(240,233,210,.18), 10px 10px 0 rgba(0,0,0,.24);
  clip-path: polygon(0 16%, 98% 0, 100% 82%, 5% 100%);
  transform: translateY(18px) rotate(-1.5deg);
  transition:
    background-color 700ms cubic-bezier(.23, 1, .32, 1),
    opacity 700ms cubic-bezier(.23, 1, .32, 1),
    transform 700ms cubic-bezier(.23, 1, .32, 1);
}

.motion-color-swatch::before {
  content: "LIVE NEWS";
  font: 900 13px/1 "Russo One", Inter, Arial, sans-serif;
  letter-spacing: .18em;
}

.motion-color-swatch::after {
  content: "";
  position: absolute;
  inset: 8px 12px;
  border: 1px dashed rgba(7,7,7,.38);
  pointer-events: none;
}

.motion-color-swatch.is-visible,
.content:target .motion-color-swatch {
  opacity: 1;
  background: rgb(255, 0, 0);
  transform: translateY(0) rotate(-1.5deg);
  animation: newsColorPop 900ms cubic-bezier(.23, 1, .32, 1) both;
}

@keyframes newsColorPop {
  0% {
    opacity: 0;
    background: rgb(0, 255, 0);
    transform: translateY(18px) rotate(-1.5deg) scale(.96);
  }
  42% {
    opacity: .82;
    background: rgb(0, 255, 0);
  }
  100% {
    opacity: 1;
    background: rgb(255, 0, 0);
    transform: translateY(0) rotate(-1.5deg) scale(1);
  }
}

.content-grid article {
  opacity: 0;
  transform: translateY(36px) scale(.97) rotate(-.5deg);
  transition:
    opacity 620ms cubic-bezier(.23, 1, .32, 1),
    transform 620ms cubic-bezier(.23, 1, .32, 1),
    background-color 620ms cubic-bezier(.23, 1, .32, 1),
    border-color 620ms cubic-bezier(.23, 1, .32, 1);
}

.content-grid article:first-child {
  background-color: rgb(0, 255, 0);
  color: #071011;
}

.content-grid article:first-child p,
.content-grid article:first-child a {
  color: rgba(7,16,17,.78);
}

.content-grid article.reveal-in {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

.content-grid article.reveal-in:first-child {
  background-color: rgb(255, 0, 0);
  color: #fff4ee;
}

.content-grid article.reveal-in:first-child p,
.content-grid article.reveal-in:first-child a {
  color: rgba(255,244,238,.82);
}

.content-grid article.reveal-in:nth-child(2) {
  transition-delay: 90ms;
}

.content-grid article.reveal-in:nth-child(3) {
  transition-delay: 180ms;
}

/* Palette option 7: Graphite / Dirty White / Hot Pink. */
:root {
  --bg: oklch(8.8% .012 330);
  --paper: oklch(14.8% .018 330);
  --paper-2: oklch(20.5% .024 330);
  --text: oklch(93% .018 72);
  --muted: oklch(74% .022 72);
  --soft: oklch(57% .026 330);
  --line: rgba(244, 236, 222, 0.15);
  --accent: oklch(68% .2 350);
  --accent-2: oklch(86% .035 72);
  --acid: oklch(86% .035 72);
  --violet: oklch(47% .13 320);
  --brick: oklch(24% .08 350);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(95, 30, 66, .42), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(224, 72, 136, .16), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(126, 49, 92, .15), transparent 30rem),
    linear-gradient(180deg, rgba(244, 236, 222, .032), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(244,236,222,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(224,72,136,.12) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(126,49,92,.11) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(244,236,222,.024) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(244,236,222,.015) 0 1px, transparent 1px 11px);
}

body::after {
  background:
    radial-gradient(circle, rgba(244,236,222,.34) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(224,72,136,.28) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(224,72,136,.08), rgba(224,72,136,.08)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(244,236,222,.06), rgba(244,236,222,.06)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(244,236,222,.075) 20% 20.5%, transparent 20.7% 100%),
    repeating-linear-gradient(115deg, transparent 0 68px, rgba(244,236,222,.032) 68px 69px, transparent 69px 112px);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(224,72,136,.16), transparent 31%),
    linear-gradient(180deg, rgba(35,16,28,.95), rgba(8,7,8,.98));
  border-bottom-color: rgba(224,72,136,.24);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(34,15,27,.96), rgba(8,7,8,.97) 46%, rgba(38,18,31,.94)),
    rgba(8, 7, 8, .96);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 -1px 0 rgba(224,72,136,.1);
}

.brand-mark {
  background: #f4ecde;
  color: #10080d;
  box-shadow: 4px 4px 0 rgba(224,72,136,.62), 0 0 22px rgba(244,236,222,.1);
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button,
.hero-copy > .eyebrow::before,
.search-preview-head strong::before,
.hero-text::before {
  background: oklch(68% .2 350);
  color: #12070d;
  box-shadow: 4px 4px 0 rgba(244,236,222,.52), inset 0 1px 0 rgba(255,255,255,.18);
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background: #f4ecde;
  color: #10080d;
  box-shadow: 3px 3px 0 rgba(224,72,136,.58);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(224,72,136,.12), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(126,49,92,.13), transparent 24rem),
    linear-gradient(102deg, rgba(244,236,222,.045) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(244,236,222,.024), transparent);
}

.hero::after,
.search-preview::before,
main::before {
  color: rgba(224,72,136,.055);
  -webkit-text-stroke-color: rgba(244,236,222,.13);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(10,8,9,.98), rgba(38,17,31,.82)),
    rgba(10, 8, 9, .92);
}

h1 {
  color: #f4ecde;
  text-shadow:
    2px 2px 0 rgba(95,30,66,.95),
    5px 5px 0 rgba(4,3,4,.96),
    7px 7px 0 rgba(224,72,136,.22);
}

.eyebrow,
.hero-stats strong {
  color: #f4ecde;
  text-shadow: 2px 2px 0 rgba(224,72,136,.58);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(244,236,222,.52), 0 0 20px rgba(224,72,136,.12);
}

.button.primary::after {
  background: oklch(68% .2 350);
  box-shadow: 38px -6px 0 -1px oklch(68% .2 350), 82px -1px 0 -2px oklch(68% .2 350);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(10,8,9,.98), rgba(34,18,29,.9)),
    rgba(12, 9, 11, .94);
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(224,72,136,.42), transparent 26px),
    linear-gradient(135deg, #110a0e, #2b1424 46%, #090708);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(224,72,136,.58);
}

.club-card:hover {
  border-color: rgba(244,236,222,.38);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(224,72,136,.075);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(12, 9, 11, .93);
}

/* Palette option 8: Serious Graphite / Steel / Deep Crimson. */
:root {
  --bg: oklch(8.5% .006 250);
  --paper: oklch(14.5% .01 250);
  --paper-2: oklch(20% .014 250);
  --text: oklch(93% .014 78);
  --muted: oklch(73% .018 78);
  --soft: oklch(56% .012 250);
  --line: rgba(238, 235, 226, 0.14);
  --accent: oklch(43% .14 24);
  --accent-2: oklch(80% .025 78);
  --acid: oklch(86% .018 78);
  --violet: oklch(30% .035 280);
  --brick: oklch(20% .055 24);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(74, 74, 78, .2), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(98, 26, 28, .18), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(160, 154, 143, .055), transparent 30rem),
    linear-gradient(180deg, rgba(238, 235, 226, .028), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(238,235,226,.06) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(98,26,28,.1) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(238,235,226,.055) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(238,235,226,.022) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(238,235,226,.014) 0 1px, transparent 1px 11px);
}

body::after {
  opacity: .5;
  background:
    radial-gradient(circle, rgba(238,235,226,.3) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(98,26,28,.2) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(98,26,28,.07), rgba(98,26,28,.07)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(238,235,226,.05), rgba(238,235,226,.05)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(238,235,226,.065) 20% 20.5%, transparent 20.7% 100%),
    repeating-linear-gradient(115deg, transparent 0 68px, rgba(238,235,226,.025) 68px 69px, transparent 69px 112px);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(98,26,28,.15), transparent 31%),
    linear-gradient(180deg, rgba(18,18,19,.96), rgba(7,7,8,.98));
  border-bottom-color: rgba(238,235,226,.18);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(17,17,18,.97), rgba(7,7,8,.98) 46%, rgba(23,17,18,.96)),
    rgba(7, 7, 8, .96);
  box-shadow: 0 18px 40px rgba(0,0,0,.36), inset 0 -1px 0 rgba(238,235,226,.06);
}

.brand-mark {
  background: #eeebe2;
  color: #09090a;
  box-shadow: 4px 4px 0 rgba(98,26,28,.72), 0 0 16px rgba(238,235,226,.08);
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button,
.hero-copy > .eyebrow::before,
.search-preview-head strong::before,
.hero-text::before {
  background: oklch(43% .14 24);
  color: #eeebe2;
  box-shadow: 4px 4px 0 rgba(238,235,226,.4), inset 0 1px 0 rgba(255,255,255,.12);
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background: #eeebe2;
  color: #09090a;
  box-shadow: 3px 3px 0 rgba(98,26,28,.58);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(98,26,28,.1), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(238,235,226,.045), transparent 24rem),
    linear-gradient(102deg, rgba(238,235,226,.035) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(238,235,226,.022), transparent);
}

.hero::after,
.search-preview::before,
main::before {
  color: rgba(238,235,226,.038);
  -webkit-text-stroke-color: rgba(98,26,28,.16);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(11,11,12,.98), rgba(28,18,19,.82)),
    rgba(11, 11, 12, .93);
}

h1 {
  color: #eeebe2;
  text-shadow:
    2px 2px 0 rgba(98,26,28,.86),
    5px 5px 0 rgba(4,4,5,.96),
    7px 7px 0 rgba(238,235,226,.08);
}

.eyebrow,
.hero-stats strong {
  color: #eeebe2;
  text-shadow: 2px 2px 0 rgba(98,26,28,.62);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(238,235,226,.4), 0 0 18px rgba(98,26,28,.08);
}

.button.primary::after {
  background: oklch(43% .14 24);
  box-shadow: 38px -6px 0 -1px oklch(43% .14 24), 82px -1px 0 -2px oklch(43% .14 24);
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(10,10,11,.98), rgba(25,20,21,.9)),
    rgba(12, 12, 13, .94);
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(98,26,28,.38), transparent 26px),
    linear-gradient(135deg, #101011, #241718 46%, #090909);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(98,26,28,.58);
}

.club-card:hover {
  border-color: rgba(238,235,226,.35);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(98,26,28,.07);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(12, 12, 13, .94);
}

.content-grid article:first-child {
  background-color: rgba(238,235,226,.08);
  color: var(--text);
}

.content-grid article.reveal-in:first-child {
  background-color: rgba(98,26,28,.88);
  color: #eeebe2;
}

/* Final direction candidate: Black / White / Silver Chrome. */
:root {
  --bg: oklch(7.8% .004 260);
  --paper: oklch(13.8% .006 260);
  --paper-2: oklch(20% .008 260);
  --text: oklch(94% .008 250);
  --muted: oklch(74% .01 250);
  --soft: oklch(56% .01 250);
  --line: rgba(235, 239, 242, 0.15);
  --accent: oklch(90% .01 250);
  --accent-2: oklch(70% .02 250);
  --acid: oklch(93% .008 250);
  --violet: oklch(24% .015 260);
  --brick: oklch(18% .025 24);
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(90, 94, 100, .22), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(215, 222, 228, .08), transparent 28rem),
    radial-gradient(circle at 72% 72%, rgba(110, 118, 128, .08), transparent 30rem),
    linear-gradient(180deg, rgba(235, 239, 242, .03), transparent 330px),
    var(--bg);
}

body::before {
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(235,239,242,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(235,239,242,.045) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(92,98,106,.055) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(235,239,242,.023) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(235,239,242,.014) 0 1px, transparent 1px 11px);
}

body::after {
  background:
    radial-gradient(circle, rgba(235,239,242,.32) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(132,142,154,.22) 0 1px, transparent 1.5px) 22px 19px / 62px 62px,
    linear-gradient(0deg, rgba(235,239,242,.06), rgba(235,239,242,.06)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(0deg, rgba(90,98,108,.055), rgba(90,98,108,.055)) 70vw 76vh / 210px 96px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(235,239,242,.07) 20% 20.5%, transparent 20.7% 100%),
    repeating-linear-gradient(115deg, transparent 0 68px, rgba(235,239,242,.026) 68px 69px, transparent 69px 112px);
}

.app-banner {
  background:
    linear-gradient(100deg, rgba(235,239,242,.12), transparent 31%),
    linear-gradient(180deg, rgba(17,18,19,.97), rgba(6,7,8,.99));
  border-bottom-color: rgba(235,239,242,.18);
}

.site-header {
  background:
    linear-gradient(90deg, rgba(16,17,18,.98), rgba(6,7,8,.98) 46%, rgba(20,21,23,.96)),
    rgba(6, 7, 8, .97);
  box-shadow: 0 18px 40px rgba(0,0,0,.38), inset 0 -1px 0 rgba(235,239,242,.075);
}

.brand-mark,
.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button,
.hero-copy > .eyebrow::before,
.search-preview-head strong::before,
.content-grid article:first-child::before,
.content-grid article::before,
.hero-text::before {
  content: none !important;
  display: none !important;
}

.chip.active,
.ghost-button:hover,
.club-badge {
  background:
    linear-gradient(135deg, #f7f9fb 0%, #9fa8b2 28%, #ffffff 45%, #707985 68%, #e8edf1 100%);
  color: #070809;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}

.hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(235,239,242,.075), transparent 20rem),
    radial-gradient(circle at 16% 62%, rgba(90,98,108,.08), transparent 24rem),
    linear-gradient(102deg, rgba(235,239,242,.04) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, rgba(235,239,242,.022), transparent);
}

.hero::after,
.search-preview::before,
main::before {
  color: rgba(235,239,242,.04);
  -webkit-text-stroke-color: rgba(235,239,242,.13);
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(9,10,11,.99), rgba(24,25,27,.84)),
    rgba(9, 10, 11, .94);
}

h1 {
  color: #f2f4f6;
  text-shadow:
    2px 2px 0 rgba(78,84,92,.9),
    5px 5px 0 rgba(3,4,5,.98),
    7px 7px 0 rgba(235,239,242,.09);
}

.eyebrow,
.hero-stats strong {
  color: #f2f4f6;
  text-shadow: 2px 2px 0 rgba(78,84,92,.72);
}

.button.primary {
  box-shadow: 5px 5px 0 rgba(0,0,0,.48), 0 0 20px rgba(235,239,242,.08);
}

.button.primary::after {
  background: #e8edf1;
  box-shadow: 38px -6px 0 -1px #b6bec7, 82px -1px 0 -2px #f7f9fb;
}

.search-preview {
  background:
    linear-gradient(135deg, rgba(8,9,10,.99), rgba(24,25,27,.9)),
    rgba(11, 12, 13, .95);
}

.preview-photo {
  background:
    radial-gradient(circle at 30% 35%, rgba(235,239,242,.38), transparent 26px),
    linear-gradient(135deg, #101112, #25282c 46%, #08090a);
}

.club-card.active,
.pc-seat.selected {
  border-color: rgba(235,239,242,.52);
}

.club-card:hover {
  border-color: rgba(235,239,242,.42);
}

.club-offer,
.pricing-grid .featured {
  background: rgba(235,239,242,.06);
}

.booking-widget,
.club-page,
.club-card,
.club-detail,
.search-box,
.login-panel,
.product-visual,
.feed-main,
.feed-list article {
  background-color: rgba(11, 12, 13, .94);
}

.content-grid article:first-child {
  background-color: rgba(235,239,242,.07);
  color: var(--text);
}

.content-grid article.reveal-in:first-child {
  background-color: rgba(26,27,29,.96);
  color: #f2f4f6;
}

/* Clarity reset: calmer black / white / silver interface. */
section::before,
section::after,
main::before,
.hero::before,
.hero::after,
.hero h1::before,
.hero-copy::before,
.hero-copy::after,
.brand::after,
.app-banner::before,
.search-preview::before,
.search-preview::after,
.search-preview-head::after,
.hero-actions::before,
.catalog-toolbar::before,
.club-card::before,
.club-card::after,
.preview-list::after,
.preview-list article::before,
.hero-stats::before,
.hero-stats div::after,
.search-preview-form div::after {
  content: none !important;
  display: none !important;
}

body::before {
  opacity: .36;
}

body::after {
  opacity: .22;
}

main {
  background:
    linear-gradient(180deg, rgba(235,239,242,.025), transparent 280px),
    var(--bg);
}

.app-banner,
.site-header {
  background: rgba(8, 9, 10, .94);
  border-color: rgba(235,239,242,.14);
}

.site-header {
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.brand-mark,
.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.book-button,
[data-page-book],
.pc-seat.selected,
.booking-legend i.selected,
.phone-button,
.chip.active,
.ghost-button:hover,
.club-badge {
  background:
    linear-gradient(135deg, #f7f9fb 0%, #c3cbd4 34%, #ffffff 48%, #9aa4af 72%, #eef2f5 100%);
  color: #08090a;
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(0,0,0,.2);
  clip-path: none;
}

.app-banner a:hover,
.header-cta:hover,
.button.primary:hover,
.club-card-book:hover,
.book-button:hover,
[data-page-book]:hover,
.phone-button:hover {
  background:
    linear-gradient(135deg, #ffffff 0%, #d7dde4 34%, #ffffff 48%, #aeb8c2 72%, #f6f8fa 100%);
}

.nav a::after {
  height: 2px;
  background: #eceff2;
}

.hero {
  min-height: 620px;
  gap: clamp(28px, 4vw, 60px);
  background:
    radial-gradient(circle at 78% 20%, rgba(235,239,242,.055), transparent 24rem),
    linear-gradient(180deg, rgba(235,239,242,.02), transparent);
}

.hero-copy,
.search-preview,
.hero-stats div,
.product-visual,
.search-preview-form div,
.preview-list article,
.club-card,
.search-box,
.login-panel,
.content-grid article,
.booking-steps article,
.deals-grid article,
.blog-grid article {
  transform: none !important;
  clip-path: none !important;
  border-radius: 10px;
}

.hero-copy {
  max-width: 760px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(235,239,242,.12);
  background: rgba(12, 13, 15, .92);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.hero-copy > .eyebrow {
  padding: 0;
  border: 0;
  background: transparent;
  clip-path: none;
}

.eyebrow {
  color: rgba(235,239,242,.72);
  text-shadow: none;
}

.hero h1 {
  max-width: 700px;
  font-size: clamp(38px, 4.1vw, 58px);
  line-height: 1.05;
  text-shadow: 2px 2px 0 rgba(70,76,84,.65);
  filter: none;
}

.hero h1::after {
  content: "";
  display: block;
  position: static;
  width: 140px;
  height: 4px;
  margin-top: 18px;
  opacity: 1;
  background: #eceff2;
  transform: none;
  clip-path: none;
}

.hero-text {
  padding-left: 0;
}

.hero-text::before {
  content: none;
}

.button,
.header-cta,
.ghost-button,
.chip {
  clip-path: none !important;
  border-radius: 8px;
}

.button.primary::after {
  content: none;
}

.button.primary {
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.button.secondary {
  background: rgba(235,239,242,.035);
}

.hero-stats {
  gap: 12px;
}

.hero-stats strong {
  color: #eceff2;
  text-shadow: none;
}

.search-preview {
  padding: 22px;
  border: 1px solid rgba(235,239,242,.12);
  background: rgba(12, 13, 15, .92);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.search-preview-head strong,
.preview-list h3,
h1,
h2,
h3 {
  text-shadow: none;
}

.search-preview-form div,
.preview-list article {
  background: rgba(235,239,242,.045);
}

.preview-photo {
  background:
    linear-gradient(135deg, rgba(235,239,242,.18), rgba(80,86,94,.22)),
    #101112;
}

.club-list {
  perspective: none;
}

.club-card {
  border-color: rgba(235,239,242,.12);
  background: rgba(12, 13, 15, .92);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

.club-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(235,239,242,.3);
}

.club-card.active {
  border-color: rgba(235,239,242,.46);
}

.club-card-book {
  border-radius: 7px;
  color: #08090a;
}

.motion-color-swatch {
  display: none;
}

.content-grid article:first-child,
.content-grid article.reveal-in:first-child {
  background-color: rgba(12, 13, 15, .92);
  color: var(--text);
}

.content-grid article:first-child p,
.content-grid article:first-child a,
.content-grid article.reveal-in:first-child p,
.content-grid article.reveal-in:first-child a {
  color: var(--muted);
}

/* Repair display after palette experiments and remove remaining numeric stickers. */
.brand-mark {
  display: grid !important;
}

.app-banner a,
.header-cta,
.button.primary,
.club-card-book,
.pc-seat.selected,
.booking-legend i.selected,
.phone-button,
.chip.active,
.ghost-button:hover,
.club-badge {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1;
}

.hero-copy > .eyebrow::before,
.search-preview-head strong::before,
.content-grid article::before,
.hero-text::before {
  content: none !important;
  display: none !important;
}

/* Final polish: silver booking buttons and restrained chrome details. */
.club-card .club-card-book,
.club-card:nth-child(3n + 1) .club-card-book,
.club-card:nth-child(3n + 2) .club-card-book,
.club-card:nth-child(3n) .club-card-book,
.book-button,
[data-page-book],
.button.primary {
  background:
    linear-gradient(135deg, #f8fafc 0%, #b9c1ca 32%, #ffffff 48%, #8f99a4 74%, #eef2f5 100%) !important;
  color: #08090a !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 9px 18px rgba(0,0,0,.24) !important;
}

.club-card .club-card-book:hover,
.book-button:hover,
[data-page-book]:hover,
.button.primary:hover {
  background:
    linear-gradient(135deg, #ffffff 0%, #d8dee5 32%, #ffffff 48%, #aeb7c0 74%, #f7f9fb 100%) !important;
}

.hero-copy,
.search-preview,
.club-card,
.login-panel,
.content-grid article,
.booking-steps article,
.deals-grid article,
.blog-grid article {
  position: relative;
  overflow: hidden;
}

.hero-copy::before,
.search-preview::before,
.club-card::before,
.login-panel::before,
.content-grid article::before,
.booking-steps article::before,
.deals-grid article::before,
.blog-grid article::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 1px;
  opacity: .42;
  background: linear-gradient(90deg, transparent, rgba(235,239,242,.55), transparent);
  pointer-events: none;
}

.hero-copy::after,
.search-preview::after,
.club-card::after,
.content-grid article::after {
  content: none !important;
  display: none !important;
}

.site-header {
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(235,239,242,.12);
}

.hero h1 {
  letter-spacing: .01em;
}

/* Living graphite wall background. */
body {
  background:
    radial-gradient(circle at var(--wall-x, 18%) var(--wall-y, 18%), rgba(235,239,242,.12), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(88,96,108,.12), transparent 28rem),
    linear-gradient(180deg, rgba(235,239,242,.028), transparent 330px),
    var(--bg);
}

body::before {
  opacity: .34;
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(235,239,242,.075) 9.1% 9.38%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(235,239,242,.045) 48.1% 48.35%, transparent 48.6% 100%),
    repeating-linear-gradient(0deg, rgba(235,239,242,.022) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(235,239,242,.012) 0 1px, transparent 1px 13px);
  background-size: 860px 460px, 720px 420px, auto, auto;
  animation: wallDrift 22s linear infinite;
}

body::after {
  opacity: .28;
  background:
    linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.12) 45%, transparent 52%) -42vw 0 / 44vw 100% no-repeat,
    radial-gradient(circle, rgba(235,239,242,.34) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(132,142,154,.22) 0 1px, transparent 1.5px) 22px 19px / 62px 62px;
  animation: chromeSweep 9s cubic-bezier(.23, 1, .32, 1) infinite;
}

.hero::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .3;
  background:
    radial-gradient(circle at 68% 28%, rgba(235,239,242,.13), transparent 16rem),
    linear-gradient(115deg, transparent 0 44%, rgba(235,239,242,.07) 48%, transparent 53%);
  transform: translate3d(0,0,0);
  animation: heroLightFloat 11s ease-in-out infinite alternate;
}

@keyframes wallDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 120px 70px, -90px 120px, 0 72px, 64px 0;
  }
}

@keyframes chromeSweep {
  0%, 26% {
    background-position: -48vw 0, 0 0, 22px 19px;
  }
  58%, 100% {
    background-position: 120vw 0, 0 0, 22px 19px;
  }
}

@keyframes heroLightFloat {
  0% {
    opacity: .22;
    transform: translate3d(-16px, -8px, 0);
  }
  100% {
    opacity: .36;
    transform: translate3d(18px, 10px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .hero::before {
    animation: none;
  }
}

.live-wall-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 24%, rgba(235,239,242,.13), transparent 22rem),
    radial-gradient(circle at 78% 28%, rgba(132,142,154,.11), transparent 26rem),
    linear-gradient(180deg, #08090a, #101113 48%, #070809);
}

.live-wall-bg::before,
.live-wall-bg::after {
  content: "";
  position: absolute;
  inset: -16%;
}

.live-wall-bg::before {
  opacity: .48;
  background:
    linear-gradient(115deg, transparent 0 15%, rgba(235,239,242,.18) 15.3% 15.9%, transparent 16.2% 100%),
    linear-gradient(115deg, transparent 0 42%, rgba(235,239,242,.12) 42.2% 42.8%, transparent 43.1% 100%),
    linear-gradient(115deg, transparent 0 70%, rgba(235,239,242,.16) 70.2% 71%, transparent 71.4% 100%),
    repeating-linear-gradient(0deg, rgba(235,239,242,.035) 0 1px, transparent 1px 10px);
  transform: rotate(-2deg);
  animation: wallPanelMove 18s linear infinite;
}

.live-wall-bg::after {
  opacity: .34;
  background:
    linear-gradient(100deg, transparent 0 38%, rgba(255,255,255,.24) 46%, transparent 54%) -60vw 0 / 48vw 100% no-repeat,
    radial-gradient(circle at 18% 70%, rgba(235,239,242,.14), transparent 14rem),
    radial-gradient(circle at 70% 60%, rgba(235,239,242,.11), transparent 16rem);
  animation: wallChromePass 8s cubic-bezier(.23, 1, .32, 1) infinite;
}

@keyframes wallPanelMove {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(-2deg);
  }
  100% {
    transform: translate3d(4%, 3%, 0) rotate(-2deg);
  }
}

@keyframes wallChromePass {
  0%, 22% {
    background-position: -60vw 0, 0 0, 0 0;
  }
  62%, 100% {
    background-position: 130vw 0, 0 0, 0 0;
  }
}

.site-header,
.app-banner,
main,
.footer,
.lightbox,
.booking-modal,
.club-page-modal {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after {
    animation: none;
  }
}

/* Stronger visible wall: the previous layer was too hidden under the page. */
body {
  background: #08090a;
}

main {
  background:
    linear-gradient(180deg, rgba(8, 9, 10, .36) 0%, rgba(8, 9, 10, .12) 34rem, rgba(8, 9, 10, .42) 100%) !important;
}

.live-wall-bg {
  background:
    radial-gradient(circle at 16% 20%, rgba(238, 242, 245, .22), transparent 18rem),
    radial-gradient(circle at 84% 12%, rgba(112, 121, 132, .24), transparent 24rem),
    radial-gradient(circle at 70% 76%, rgba(202, 209, 216, .13), transparent 22rem),
    linear-gradient(125deg, rgba(238, 242, 245, .085) 0 9%, transparent 9.2% 30%, rgba(122, 132, 144, .16) 30.2% 42%, transparent 42.2% 100%),
    linear-gradient(180deg, #060708 0%, #151719 46%, #070809 100%) !important;
}

.live-wall-bg::before {
  opacity: .82;
  background:
    linear-gradient(116deg, transparent 0 8%, rgba(232, 236, 240, .28) 8.2% 9.1%, transparent 9.35% 31%, rgba(108, 118, 130, .2) 31.2% 34.5%, transparent 34.75% 100%),
    linear-gradient(116deg, transparent 0 57%, rgba(238, 242, 245, .2) 57.2% 59.6%, transparent 59.85% 100%),
    linear-gradient(26deg, transparent 0 47%, rgba(255, 255, 255, .1) 47.2% 47.8%, transparent 48.1% 100%),
    repeating-linear-gradient(0deg, rgba(238, 242, 245, .05) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(238, 242, 245, .035) 0 1px, transparent 1px 13px);
  filter: contrast(1.08);
  animation: wallPanelMove 16s linear infinite;
}

.live-wall-bg::after {
  opacity: .68;
  background:
    linear-gradient(102deg, transparent 0 32%, rgba(255, 255, 255, .38) 43%, rgba(142, 152, 164, .18) 48%, transparent 58%) -62vw 0 / 52vw 100% no-repeat,
    radial-gradient(circle at 12% 64%, rgba(238, 242, 245, .2), transparent 12rem),
    radial-gradient(circle at 88% 58%, rgba(238, 242, 245, .16), transparent 15rem),
    radial-gradient(circle, rgba(238, 242, 245, .18) 0 1px, transparent 1.8px) 0 0 / 34px 34px;
  animation: wallChromePass 7s cubic-bezier(.23, 1, .32, 1) infinite;
}

.hero {
  background:
    linear-gradient(90deg, rgba(8, 9, 10, .62), rgba(8, 9, 10, .34) 48%, rgba(8, 9, 10, .58)),
    transparent !important;
}

.section,
.catalog,
.content-section,
.map-section,
.booking-section {
  background-color: transparent !important;
}

/* Fast colorful street palette: visible, but without heavy repaint animations. */
:root {
  --bg: oklch(9% .018 285);
  --paper: oklch(14% .024 285);
  --paper-2: oklch(20% .035 285);
  --text: oklch(94% .014 265);
  --muted: oklch(75% .028 270);
  --soft: oklch(60% .036 275);
  --line: rgba(238, 242, 245, .16);
  --accent: oklch(74% .18 28);
  --accent-2: oklch(76% .15 205);
  --acid: oklch(86% .17 92);
  --violet: oklch(63% .18 310);
  --brick: oklch(24% .07 25);
}

body {
  background:
    radial-gradient(circle at 13% 17%, rgba(255, 78, 64, .22), transparent 25rem),
    radial-gradient(circle at 86% 15%, rgba(32, 210, 220, .17), transparent 28rem),
    radial-gradient(circle at 76% 78%, rgba(158, 82, 255, .16), transparent 30rem),
    linear-gradient(180deg, #09080d 0%, #111018 48%, #09090d 100%) !important;
}

body::before,
body::after,
.live-wall-bg,
.live-wall-bg::before,
.live-wall-bg::after {
  animation: none !important;
}

body::before {
  opacity: .26 !important;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255, 78, 64, .18) 18.2% 18.8%, transparent 19% 100%),
    linear-gradient(28deg, transparent 0 58%, rgba(32, 210, 220, .14) 58.2% 59%, transparent 59.2% 100%),
    repeating-linear-gradient(0deg, rgba(238, 242, 245, .028) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(238, 242, 245, .018) 0 1px, transparent 1px 13px) !important;
}

body::after {
  opacity: .2 !important;
  background:
    radial-gradient(circle, rgba(238, 242, 245, .42) 0 1px, transparent 1.6px) 0 0 / 48px 48px,
    radial-gradient(circle, rgba(255, 199, 53, .32) 0 1px, transparent 1.6px) 24px 19px / 66px 66px,
    linear-gradient(98deg, transparent 0 18%, rgba(158, 82, 255, .18) 18.2% 18.8%, transparent 19% 100%) !important;
}

.live-wall-bg {
  background:
    radial-gradient(circle at 8% 24%, rgba(255, 78, 64, .28), transparent 18rem),
    radial-gradient(circle at 92% 20%, rgba(32, 210, 220, .22), transparent 22rem),
    radial-gradient(circle at 78% 82%, rgba(255, 199, 53, .16), transparent 20rem),
    linear-gradient(135deg, rgba(255, 78, 64, .12) 0 10%, transparent 10.3% 32%, rgba(32, 210, 220, .12) 32.3% 43%, transparent 43.3% 100%),
    linear-gradient(180deg, #08070c, #12111a 52%, #08080c) !important;
}

.live-wall-bg::before {
  opacity: .42 !important;
  filter: none !important;
  background:
    linear-gradient(118deg, transparent 0 12%, rgba(255, 78, 64, .35) 12.2% 14.2%, transparent 14.5% 100%),
    linear-gradient(118deg, transparent 0 64%, rgba(32, 210, 220, .28) 64.2% 66.6%, transparent 66.9% 100%),
    linear-gradient(30deg, transparent 0 44%, rgba(255, 199, 53, .2) 44.2% 45%, transparent 45.2% 100%) !important;
}

.live-wall-bg::after {
  opacity: .28 !important;
  background:
    radial-gradient(circle at 18% 64%, rgba(238, 242, 245, .18), transparent 13rem),
    radial-gradient(circle at 84% 55%, rgba(158, 82, 255, .22), transparent 16rem),
    repeating-linear-gradient(115deg, transparent 0 74px, rgba(238, 242, 245, .045) 74px 75px, transparent 75px 124px) !important;
}

main {
  background:
    linear-gradient(180deg, rgba(8, 8, 12, .45) 0%, rgba(8, 8, 12, .2) 32rem, rgba(8, 8, 12, .56) 100%) !important;
}

.app-banner,
.site-header {
  background:
    linear-gradient(90deg, rgba(12, 11, 17, .96), rgba(8, 8, 12, .96) 48%, rgba(18, 11, 21, .94)) !important;
  border-color: rgba(238, 242, 245, .14) !important;
}

.brand-mark {
  background: linear-gradient(135deg, #f7fbff 0%, #20d2dc 42%, #ffc735 100%) !important;
  color: #08080c !important;
  box-shadow: 4px 4px 0 rgba(255, 78, 64, .72), 0 0 22px rgba(32, 210, 220, .18) !important;
}

.hero {
  background:
    radial-gradient(circle at 84% 20%, rgba(32, 210, 220, .12), transparent 22rem),
    radial-gradient(circle at 12% 68%, rgba(255, 78, 64, .14), transparent 24rem),
    linear-gradient(90deg, rgba(9, 8, 13, .72), rgba(9, 8, 13, .38) 52%, rgba(9, 8, 13, .68)) !important;
}

.hero-copy,
.search-preview,
.club-card,
.search-box,
.login-panel,
.content-grid article,
.booking-widget,
.club-page,
.club-detail,
.product-visual,
.feed-main,
.feed-list article {
  background:
    linear-gradient(145deg, rgba(17, 15, 24, .94), rgba(12, 11, 17, .88)) !important;
  border-color: rgba(238, 242, 245, .14) !important;
}

.hero-copy::before,
.search-preview::before,
.club-card::before,
.login-panel::before,
.content-grid article::before,
.booking-steps article::before,
.deals-grid article::before,
.blog-grid article::before {
  background: linear-gradient(90deg, transparent, rgba(32, 210, 220, .5), rgba(255, 199, 53, .42), transparent) !important;
}

h1 {
  color: #f5f7fb !important;
  text-shadow:
    2px 2px 0 rgba(255, 78, 64, .72),
    5px 5px 0 rgba(5, 6, 9, .95),
    7px 7px 0 rgba(32, 210, 220, .34) !important;
}

.hero h1::after {
  background: linear-gradient(90deg, #ff4e40, #ffc735, #20d2dc) !important;
}

.eyebrow,
.hero-stats strong {
  color: #f5f7fb !important;
}

.app-banner a,
.header-cta,
.button.primary,
.club-card .club-card-book,
.club-card:nth-child(3n + 1) .club-card-book,
.club-card:nth-child(3n + 2) .club-card-book,
.club-card:nth-child(3n) .club-card-book,
.book-button,
[data-page-book],
.phone-button {
  background: linear-gradient(135deg, #ff4e40 0%, #ffc735 48%, #20d2dc 100%) !important;
  color: #08080c !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), 4px 4px 0 rgba(158, 82, 255, .34) !important;
}

.button.secondary,
.ghost-button,
.chip {
  background: rgba(238, 242, 245, .05) !important;
  border-color: rgba(238, 242, 245, .16) !important;
}

.chip.active,
.ghost-button:hover,
.club-badge,
.pc-seat.selected,
.booking-legend i.selected {
  background: #20d2dc !important;
  color: #08080c !important;
  box-shadow: 3px 3px 0 rgba(255, 78, 64, .56) !important;
}

.club-card:hover,
.club-card.active {
  border-color: rgba(32, 210, 220, .52) !important;
}

/* Red-led street palette: no rainbow buttons, separate accent colors. */
:root {
  --accent: oklch(62% .22 28);
  --accent-2: oklch(74% .15 205);
  --acid: oklch(84% .16 92);
  --violet: oklch(62% .17 305);
}

.brand-mark {
  background: linear-gradient(135deg, #fff6f2 0%, #ff4438 54%, #8d1518 100%) !important;
  color: #08080c !important;
  box-shadow: 4px 4px 0 rgba(32, 210, 220, .5), 0 0 20px rgba(255, 68, 56, .18) !important;
}

.app-banner strong,
.eyebrow {
  color: #ff6b60 !important;
}

.app-banner a,
.header-cta,
.button.primary,
.club-card .club-card-book,
.club-card:nth-child(3n + 1) .club-card-book,
.club-card:nth-child(3n + 2) .club-card-book,
.club-card:nth-child(3n) .club-card-book,
.book-button,
[data-page-book],
.phone-button {
  background: linear-gradient(180deg, #ff5a4f 0%, #e42f2d 52%, #99171c 100%) !important;
  color: #fff6f2 !important;
  border: 1px solid rgba(255, 139, 128, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 10px 22px rgba(0, 0, 0, .3),
    4px 4px 0 rgba(32, 210, 220, .32) !important;
}

.app-banner a:hover,
.header-cta:hover,
.button.primary:hover,
.club-card .club-card-book:hover,
.book-button:hover,
[data-page-book]:hover,
.phone-button:hover {
  background: linear-gradient(180deg, #ff7168 0%, #f03b36 52%, #ad1b20 100%) !important;
}

.button.secondary,
.ghost-button,
.chip {
  background: rgba(238, 242, 245, .055) !important;
  color: #f5f7fb !important;
  border-color: rgba(238, 242, 245, .18) !important;
}

.button.secondary:hover,
.ghost-button:hover {
  background: #20d2dc !important;
  color: #08080c !important;
  box-shadow: 3px 3px 0 rgba(255, 68, 56, .55) !important;
}

.chip.active,
.pc-seat.selected,
.booking-legend i.selected {
  background: #ffc735 !important;
  color: #08080c !important;
  box-shadow: 3px 3px 0 rgba(255, 68, 56, .58) !important;
}

.club-badge,
.content-grid article span,
.feed-list article span {
  background: #20d2dc !important;
  color: #08080c !important;
  box-shadow: 3px 3px 0 rgba(158, 82, 255, .42) !important;
}

.club-card:nth-child(3n + 2) .club-badge,
.content-grid article:nth-child(3n + 2) span,
.feed-list article:nth-child(3n + 2) span {
  background: #ffc735 !important;
}

.club-card:nth-child(3n) .club-badge,
.content-grid article:nth-child(3n) span,
.feed-list article:nth-child(3n) span {
  background: #9e52ff !important;
  color: #fff6f2 !important;
}

.hero h1::after {
  background: #ff4438 !important;
  box-shadow: 42px 0 0 #20d2dc, 92px 0 0 #ffc735 !important;
}

.hero-copy::before,
.search-preview::before,
.club-card::before,
.login-panel::before,
.content-grid article::before,
.booking-steps article::before,
.deals-grid article::before,
.blog-grid article::before {
  background: linear-gradient(90deg, transparent, rgba(255, 68, 56, .72), transparent) !important;
}

/* New background concept: dark urban poster wall, red-led and non-rainbow. */
body {
  background:
    radial-gradient(circle at 18% 18%, rgba(164, 24, 29, .2), transparent 24rem),
    radial-gradient(circle at 84% 74%, rgba(56, 64, 76, .22), transparent 30rem),
    linear-gradient(180deg, #08080a 0%, #111114 46%, #070708 100%) !important;
}

.live-wall-bg {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 24rem),
    radial-gradient(circle at 20% 22%, rgba(174, 28, 32, .22), transparent 18rem),
    radial-gradient(circle at 78% 64%, rgba(120, 126, 136, .16), transparent 22rem),
    linear-gradient(180deg, #09090b, #121214 52%, #080809) !important;
}

.live-wall-bg::before {
  inset: 0 !important;
  opacity: .62 !important;
  background:
    linear-gradient(0deg, rgba(230, 225, 214, .08), rgba(230, 225, 214, .08)) 7vw 17vh / 230px 92px no-repeat,
    linear-gradient(0deg, rgba(164, 24, 29, .22), rgba(164, 24, 29, .22)) 10vw 28vh / 128px 38px no-repeat,
    linear-gradient(0deg, rgba(230, 225, 214, .06), rgba(230, 225, 214, .06)) 79vw 20vh / 190px 126px no-repeat,
    linear-gradient(0deg, rgba(164, 24, 29, .16), rgba(164, 24, 29, .16)) 83vw 36vh / 106px 44px no-repeat,
    linear-gradient(0deg, rgba(230, 225, 214, .055), rgba(230, 225, 214, .055)) 67vw 78vh / 260px 96px no-repeat,
    linear-gradient(0deg, rgba(164, 24, 29, .14), rgba(164, 24, 29, .14)) 16vw 78vh / 210px 64px no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 11px) !important;
  filter: none !important;
}

.live-wall-bg::after {
  inset: 0 !important;
  opacity: .5 !important;
  background:
    linear-gradient(108deg, transparent 0 16%, rgba(164, 24, 29, .28) 16.2% 17.4%, transparent 17.7% 100%),
    linear-gradient(108deg, transparent 0 72%, rgba(230, 225, 214, .12) 72.2% 73.1%, transparent 73.4% 100%),
    radial-gradient(circle, rgba(230, 225, 214, .19) 0 1px, transparent 1.5px) 0 0 / 38px 38px,
    radial-gradient(circle, rgba(164, 24, 29, .22) 0 1px, transparent 1.5px) 19px 16px / 58px 58px !important;
}

body::before {
  opacity: .3 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 16rem) !important;
}

body::after {
  opacity: .18 !important;
  background:
    radial-gradient(circle, rgba(230,225,214,.26) 0 1px, transparent 1.4px) 0 0 / 42px 42px,
    linear-gradient(115deg, transparent 0 35%, rgba(164,24,29,.18) 35.2% 35.8%, transparent 36% 100%) !important;
}

main {
  background:
    linear-gradient(180deg, rgba(8, 8, 10, .36), rgba(8, 8, 10, .2) 30rem, rgba(8, 8, 10, .62)) !important;
}

.hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(164, 24, 29, .16), transparent 20rem),
    linear-gradient(90deg, rgba(8, 8, 10, .72), rgba(8, 8, 10, .48) 52%, rgba(8, 8, 10, .7)) !important;
}

.hero-copy,
.search-preview,
.club-card,
.search-box,
.login-panel,
.content-grid article,
.booking-widget,
.club-page,
.club-detail,
.product-visual,
.feed-main,
.feed-list article {
  background:
    linear-gradient(145deg, rgba(18, 18, 20, .96), rgba(10, 10, 12, .9)) !important;
  border-color: rgba(230, 225, 214, .13) !important;
}

/* Make the new wall unmistakable: larger poster fields in empty page areas. */
.live-wall-bg {
  background:
    radial-gradient(circle at 14% 30%, rgba(164, 24, 29, .34), transparent 19rem),
    radial-gradient(circle at 82% 22%, rgba(230, 225, 214, .12), transparent 18rem),
    radial-gradient(circle at 78% 76%, rgba(164, 24, 29, .18), transparent 24rem),
    linear-gradient(180deg, #08080a, #131315 52%, #080809) !important;
}

.live-wall-bg::before {
  opacity: .9 !important;
  background:
    linear-gradient(0deg, rgba(230, 225, 214, .16), rgba(230, 225, 214, .16)) 72vw 17vh / 260px 150px no-repeat,
    linear-gradient(0deg, rgba(164, 24, 29, .44), rgba(164, 24, 29, .44)) 75vw 25vh / 170px 54px no-repeat,
    linear-gradient(0deg, rgba(230, 225, 214, .11), rgba(230, 225, 214, .11)) 3vw 65vh / 310px 118px no-repeat,
    linear-gradient(0deg, rgba(164, 24, 29, .34), rgba(164, 24, 29, .34)) 7vw 75vh / 190px 48px no-repeat,
    linear-gradient(0deg, rgba(230, 225, 214, .09), rgba(230, 225, 214, .09)) 44vw 82vh / 280px 88px no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.034) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 12px) !important;
}

.live-wall-bg::after {
  opacity: .58 !important;
  background:
    linear-gradient(106deg, transparent 0 12%, rgba(164,24,29,.36) 12.3% 14.1%, transparent 14.4% 100%),
    linear-gradient(106deg, transparent 0 78%, rgba(230,225,214,.18) 78.2% 79.5%, transparent 79.8% 100%),
    radial-gradient(circle, rgba(230,225,214,.22) 0 1px, transparent 1.5px) 0 0 / 36px 36px !important;
}

/* Modern urban-cyber background: no poster rectangles, no rainbow. */
body {
  background:
    radial-gradient(circle at 18% 22%, rgba(216, 32, 37, .24), transparent 26rem),
    radial-gradient(circle at 86% 66%, rgba(16, 118, 132, .16), transparent 30rem),
    radial-gradient(circle at 52% 92%, rgba(216, 32, 37, .12), transparent 24rem),
    linear-gradient(180deg, #06070a 0%, #101117 48%, #07080b 100%) !important;
}

.live-wall-bg {
  background:
    radial-gradient(ellipse at 16% 28%, rgba(216, 32, 37, .32), transparent 28rem),
    radial-gradient(ellipse at 82% 18%, rgba(18, 150, 162, .18), transparent 26rem),
    radial-gradient(ellipse at 72% 82%, rgba(216, 32, 37, .16), transparent 30rem),
    linear-gradient(145deg, rgba(216, 32, 37, .075) 0 13%, transparent 13.4% 62%, rgba(18, 150, 162, .07) 62.4% 74%, transparent 74.4% 100%),
    linear-gradient(180deg, #06070a, #111219 54%, #07080b) !important;
}

.live-wall-bg::before {
  inset: 0 !important;
  opacity: .56 !important;
  background:
    linear-gradient(116deg, transparent 0 10%, rgba(216, 32, 37, .34) 10.15% 10.65%, transparent 10.85% 100%),
    linear-gradient(116deg, transparent 0 72%, rgba(216, 32, 37, .2) 72.2% 73.15%, transparent 73.35% 100%),
    linear-gradient(26deg, transparent 0 42%, rgba(18, 150, 162, .16) 42.15% 42.75%, transparent 43% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 12px) !important;
}

.live-wall-bg::after {
  inset: 0 !important;
  opacity: .46 !important;
  background:
    radial-gradient(circle at 20% 62%, rgba(216, 32, 37, .2), transparent 14rem),
    radial-gradient(circle at 84% 34%, rgba(245, 246, 248, .08), transparent 11rem),
    radial-gradient(circle, rgba(245, 246, 248, .16) 0 1px, transparent 1.4px) 0 0 / 42px 42px,
    linear-gradient(90deg, transparent 0 49.85%, rgba(245, 246, 248, .07) 50%, transparent 50.15% 100%) 0 0 / 340px 100% !important;
}

body::before {
  opacity: .22 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.013) 0 1px, transparent 1px 14px) !important;
}

body::after {
  opacity: .14 !important;
  background:
    radial-gradient(circle, rgba(245,246,248,.24) 0 1px, transparent 1.3px) 0 0 / 44px 44px,
    linear-gradient(110deg, transparent 0 38%, rgba(216,32,37,.18) 38.2% 38.8%, transparent 39% 100%) !important;
}

.hero {
  background:
    radial-gradient(circle at 16% 24%, rgba(216, 32, 37, .14), transparent 22rem),
    radial-gradient(circle at 82% 18%, rgba(18, 150, 162, .09), transparent 20rem),
    linear-gradient(90deg, rgba(6, 7, 10, .78), rgba(6, 7, 10, .46) 52%, rgba(6, 7, 10, .72)) !important;
}

/* Background only: fixed dark graffiti concrete wall. */
body {
  background:
    radial-gradient(circle at 18% 14%, rgba(178, 224, 20, .16), transparent 21rem),
    radial-gradient(circle at 84% 24%, rgba(236, 214, 28, .14), transparent 24rem),
    radial-gradient(circle at 58% 90%, rgba(101, 118, 86, .12), transparent 28rem),
    linear-gradient(180deg, #070908 0%, #10120f 48%, #070807 100%) !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(5, 7, 6, .34), rgba(5, 7, 6, .56)),
    radial-gradient(ellipse at 14% 22%, rgba(174, 226, 19, .2), transparent 26rem),
    radial-gradient(ellipse at 82% 18%, rgba(245, 218, 28, .18), transparent 23rem),
    radial-gradient(ellipse at 74% 78%, rgba(174, 226, 19, .1), transparent 30rem),
    linear-gradient(135deg, rgba(206, 213, 196, .06) 0 8%, transparent 8.25% 33%, rgba(245, 218, 28, .08) 33.25% 42%, transparent 42.25% 100%),
    linear-gradient(180deg, #070908, #10120f 54%, #070807) !important;
}

.live-wall-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .58 !important;
  filter: none !important;
  animation: none !important;
  background:
    radial-gradient(circle at 18% 62%, rgba(174, 226, 19, .22), transparent 8rem),
    radial-gradient(circle at 86% 34%, rgba(245, 218, 28, .18), transparent 9rem),
    linear-gradient(102deg, transparent 0 13%, rgba(174, 226, 19, .26) 13.15% 14.05%, transparent 14.25% 100%),
    linear-gradient(102deg, transparent 0 70%, rgba(245, 218, 28, .18) 70.2% 71.4%, transparent 71.65% 100%),
    linear-gradient(28deg, transparent 0 44%, rgba(214, 219, 204, .1) 44.15% 44.75%, transparent 45% 100%),
    repeating-linear-gradient(0deg, rgba(232, 236, 222, .028) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(232, 236, 222, .017) 0 1px, transparent 1px 12px) !important;
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .48 !important;
  animation: none !important;
  background:
    linear-gradient(180deg, rgba(174, 226, 19, .22), rgba(174, 226, 19, .22)) 12vw 21vh / 92px 10px no-repeat,
    linear-gradient(180deg, rgba(174, 226, 19, .2), rgba(174, 226, 19, .2)) 14vw 21vh / 9px 72px no-repeat,
    linear-gradient(180deg, rgba(245, 218, 28, .18), rgba(245, 218, 28, .18)) 79vw 31vh / 118px 9px no-repeat,
    linear-gradient(180deg, rgba(245, 218, 28, .15), rgba(245, 218, 28, .15)) 84vw 31vh / 8px 62px no-repeat,
    linear-gradient(180deg, rgba(214, 219, 204, .08), rgba(214, 219, 204, .08)) 68vw 76vh / 78px 28px no-repeat,
    radial-gradient(circle, rgba(232, 236, 222, .18) 0 1px, transparent 1.4px) 0 0 / 38px 38px,
    radial-gradient(circle, rgba(174, 226, 19, .16) 0 1px, transparent 1.4px) 19px 16px / 58px 58px,
    linear-gradient(115deg, transparent 0 36%, rgba(232, 236, 222, .08) 36.15% 36.65%, transparent 36.9% 100%) !important;
}

body::before {
  opacity: .24 !important;
  animation: none !important;
  background:
    repeating-linear-gradient(0deg, rgba(232, 236, 222, .024) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(232, 236, 222, .014) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 30% 30%, rgba(245, 218, 28, .09), transparent 14rem) !important;
}

body::after {
  opacity: .2 !important;
  animation: none !important;
  background:
    radial-gradient(circle, rgba(232, 236, 222, .22) 0 1px, transparent 1.35px) 0 0 / 42px 42px,
    radial-gradient(circle, rgba(174, 226, 19, .18) 0 1px, transparent 1.35px) 21px 17px / 64px 64px,
    linear-gradient(108deg, transparent 0 52%, rgba(245, 218, 28, .11) 52.15% 52.8%, transparent 53% 100%) !important;
}

main {
  background:
    linear-gradient(180deg, rgba(5, 7, 6, .54), rgba(5, 7, 6, .28) 32rem, rgba(5, 7, 6, .68)) !important;
}

/* Hero street-art pass: visual only, no layout or logic changes. */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 18%, rgba(181, 28, 48, .28), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(183, 232, 22, .16), transparent 22rem),
    radial-gradient(circle at 74% 78%, rgba(128, 58, 198, .16), transparent 26rem),
    linear-gradient(112deg, rgba(181, 28, 48, .12) 0 9%, transparent 9.2% 31%, rgba(230, 210, 32, .1) 31.2% 38%, transparent 38.2% 100%),
    linear-gradient(90deg, rgba(5, 7, 6, .82), rgba(8, 9, 8, .52) 52%, rgba(5, 7, 6, .78)) !important;
}

.hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .55 !important;
  background:
    radial-gradient(circle at 16% 70%, rgba(183, 232, 22, .18), transparent 10rem),
    radial-gradient(circle at 82% 38%, rgba(230, 210, 32, .15), transparent 9rem),
    linear-gradient(106deg, transparent 0 12%, rgba(183, 232, 22, .22) 12.2% 13.1%, transparent 13.35% 100%),
    linear-gradient(28deg, transparent 0 55%, rgba(181, 28, 48, .28) 55.2% 56.1%, transparent 56.35% 100%),
    repeating-linear-gradient(0deg, rgba(232, 236, 222, .024) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(232, 236, 222, .014) 0 1px, transparent 1px 13px);
  transform: translateZ(0);
}

.hero::after {
  content: "ClubCore" !important;
  display: block !important;
  position: absolute !important;
  right: clamp(18px, 6vw, 88px) !important;
  bottom: clamp(22px, 6vw, 88px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  max-width: 44vw;
  color: rgba(183, 232, 22, .075) !important;
  font-size: clamp(72px, 13vw, 190px) !important;
  line-height: .8 !important;
  font-weight: 950 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  -webkit-text-stroke: 1px rgba(230, 210, 32, .16) !important;
  text-shadow:
    8px 8px 0 rgba(181, 28, 48, .08),
    -5px 3px 0 rgba(128, 58, 198, .08) !important;
  transform: rotate(-7deg) skewX(-8deg);
}

.hero-copy,
.search-preview {
  background:
    linear-gradient(145deg, rgba(14, 15, 13, .96), rgba(8, 9, 8, .9)) !important;
  border: 1px solid rgba(232, 236, 222, .16) !important;
  box-shadow:
    0 26px 62px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(232, 236, 222, .06) !important;
}

.hero-copy::before,
.search-preview::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 12px !important;
  height: 2px !important;
  opacity: .9 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent, rgba(181, 28, 48, .82), rgba(183, 232, 22, .72), rgba(230, 210, 32, .66), transparent) !important;
}

.hero .eyebrow {
  color: #b7e816 !important;
  text-shadow: 2px 2px 0 rgba(181, 28, 48, .45) !important;
}

.hero h1 {
  color: #f4f6ee !important;
  text-shadow:
    2px 2px 0 rgba(181, 28, 48, .78),
    4px 4px 0 rgba(5, 7, 6, .96),
    -2px 3px 0 rgba(183, 232, 22, .26) !important;
  filter: none !important;
}

.hero h1::after {
  background: #b51c30 !important;
  box-shadow: 42px 0 0 #b7e816, 88px 0 0 #e6d220 !important;
}

.hero-text {
  color: rgba(244, 246, 238, .78) !important;
}

.hero-stats div {
  background:
    linear-gradient(145deg, rgba(232, 236, 222, .055), rgba(181, 28, 48, .045)) !important;
  border-color: rgba(232, 236, 222, .16) !important;
}

.hero-stats strong {
  color: #f4f6ee !important;
  text-shadow: 2px 2px 0 rgba(181, 28, 48, .58) !important;
}

.search-preview-head strong {
  color: #f4f6ee !important;
  text-shadow: 2px 2px 0 rgba(181, 28, 48, .45) !important;
}

.search-preview-head span,
.preview-list strong {
  color: #e6d220 !important;
}

.search-preview-form div,
.preview-list article {
  background:
    linear-gradient(145deg, rgba(232, 236, 222, .06), rgba(8, 9, 8, .28)) !important;
  border-color: rgba(232, 236, 222, .16) !important;
}

/* Background-only pass: fixed dark graffiti concrete wall. */
body {
  background:
    radial-gradient(circle at 14% 18%, rgba(178, 224, 20, .14), transparent 24rem),
    radial-gradient(circle at 86% 26%, rgba(236, 214, 28, .12), transparent 28rem),
    radial-gradient(circle at 68% 88%, rgba(88, 102, 75, .13), transparent 30rem),
    linear-gradient(180deg, #070807 0%, #10110f 48%, #060706 100%) !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(4, 6, 5, .46), rgba(4, 6, 5, .68)),
    radial-gradient(ellipse at 18% 22%, rgba(178, 224, 20, .18), transparent 25rem),
    radial-gradient(ellipse at 82% 20%, rgba(236, 214, 28, .16), transparent 24rem),
    radial-gradient(ellipse at 76% 78%, rgba(178, 224, 20, .09), transparent 28rem),
    linear-gradient(136deg, rgba(218, 224, 208, .055) 0 8%, transparent 8.25% 34%, rgba(236, 214, 28, .075) 34.2% 42%, transparent 42.25% 100%),
    linear-gradient(180deg, #070807, #10110f 54%, #060706) !important;
}

.live-wall-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .54 !important;
  filter: none !important;
  animation: none !important;
  background:
    radial-gradient(circle at 17% 62%, rgba(178, 224, 20, .2), transparent 8rem),
    radial-gradient(circle at 84% 34%, rgba(236, 214, 28, .16), transparent 9rem),
    linear-gradient(104deg, transparent 0 13%, rgba(178, 224, 20, .24) 13.15% 14%, transparent 14.25% 100%),
    linear-gradient(104deg, transparent 0 70%, rgba(236, 214, 28, .17) 70.2% 71.3%, transparent 71.6% 100%),
    linear-gradient(28deg, transparent 0 44%, rgba(218, 224, 208, .09) 44.15% 44.75%, transparent 45% 100%),
    repeating-linear-gradient(0deg, rgba(226, 232, 218, .025) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(226, 232, 218, .015) 0 1px, transparent 1px 12px) !important;
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .44 !important;
  animation: none !important;
  background:
    linear-gradient(180deg, rgba(178, 224, 20, .2), rgba(178, 224, 20, .2)) 12vw 21vh / 92px 10px no-repeat,
    linear-gradient(180deg, rgba(178, 224, 20, .18), rgba(178, 224, 20, .18)) 14vw 21vh / 9px 68px no-repeat,
    linear-gradient(180deg, rgba(236, 214, 28, .16), rgba(236, 214, 28, .16)) 79vw 31vh / 118px 9px no-repeat,
    linear-gradient(180deg, rgba(236, 214, 28, .13), rgba(236, 214, 28, .13)) 84vw 31vh / 8px 58px no-repeat,
    radial-gradient(circle, rgba(226, 232, 218, .16) 0 1px, transparent 1.35px) 0 0 / 38px 38px,
    radial-gradient(circle, rgba(178, 224, 20, .14) 0 1px, transparent 1.35px) 19px 16px / 58px 58px,
    linear-gradient(115deg, transparent 0 36%, rgba(226, 232, 218, .075) 36.15% 36.65%, transparent 36.9% 100%) !important;
}

body::before {
  opacity: .22 !important;
  animation: none !important;
  background:
    repeating-linear-gradient(0deg, rgba(226, 232, 218, .022) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(226, 232, 218, .013) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 30% 30%, rgba(236, 214, 28, .08), transparent 14rem) !important;
}

body::after {
  opacity: .18 !important;
  animation: none !important;
  background:
    radial-gradient(circle, rgba(226, 232, 218, .2) 0 1px, transparent 1.3px) 0 0 / 42px 42px,
    radial-gradient(circle, rgba(178, 224, 20, .16) 0 1px, transparent 1.3px) 21px 17px / 64px 64px,
    linear-gradient(108deg, transparent 0 52%, rgba(236, 214, 28, .1) 52.15% 52.8%, transparent 53% 100%) !important;
}

main {
  background:
    linear-gradient(180deg, rgba(4, 6, 5, .58), rgba(4, 6, 5, .32) 32rem, rgba(4, 6, 5, .72)) !important;
}

/* Restore club card click areas and make booking CTA full-width. */
.club-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 226px !important;
  overflow: hidden !important;
}

.club-card-main {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(82px, 1fr) auto !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: transparent !important;
}

.club-card .club-card-book,
.club-card:nth-child(3n + 1) .club-card-book,
.club-card:nth-child(3n + 2) .club-card-book,
.club-card:nth-child(3n) .club-card-book {
  position: relative !important;
  z-index: 3 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  border-radius: 7px !important;
}

.club-card::before,
.club-card::after {
  pointer-events: none !important;
}

/* Restore modal behavior after visual overrides. */
.booking-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(5, 6, 5, .82) !important;
}

.booking-modal.open {
  display: flex !important;
}

.club-page-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9997 !important;
  display: none !important;
  overflow: auto !important;
  padding: 24px !important;
  background: rgba(5, 6, 5, .84) !important;
}

.club-page-modal.open {
  display: block !important;
}

/* Strict background-only update: fixed graffiti image + dark overlay + neon glow. */
body {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8) 48%, rgba(0, 0, 0, .9)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8) 48%, rgba(0, 0, 0, .9)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
}

.live-wall-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .1 !important;
  animation: none !important;
  filter: none !important;
  background:
    radial-gradient(at center, #22ff88 0%, transparent 70%) !important;
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .18 !important;
  animation: none !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .16) 0 1px, transparent 1.4px) 0 0 / 42px 42px,
    radial-gradient(circle, rgba(34, 255, 136, .14) 0 1px, transparent 1.4px) 21px 17px / 64px 64px,
    linear-gradient(115deg, transparent 0 48%, rgba(255, 235, 59, .12) 48.2% 48.8%, transparent 49% 100%) !important;
}

body::before,
body::after {
  animation: none !important;
}

main {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .18) 32rem, rgba(0, 0, 0, .42)) !important;
}

/* Background hotfix: previous Unsplash URL returned 404, this one is verified. */
body {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .78) 48%, rgba(0, 0, 0, .9)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .78) 48%, rgba(0, 0, 0, .9)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
}

.hero {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 52%, rgba(0, 0, 0, .42)) !important;
}

.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
}

.live-wall-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .12 !important;
  animation: none !important;
  filter: none !important;
  background: radial-gradient(at center, #22ff88 0%, transparent 70%) !important;
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .16 !important;
  animation: none !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .14) 0 1px, transparent 1.4px) 0 0 / 42px 42px,
    radial-gradient(circle, rgba(34, 255, 136, .14) 0 1px, transparent 1.4px) 21px 17px / 64px 64px,
    linear-gradient(115deg, transparent 0 48%, rgba(255, 235, 59, .12) 48.2% 48.8%, transparent 49% 100%) !important;
}

/* Dynamic graffiti background only: image, overlay, neon pulse, drips, spray. */
body {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .82) 48%, rgba(0, 0, 0, .92)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .82) 48%, rgba(0, 0, 0, .93)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
}

.live-wall-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: -8% !important;
  opacity: .24 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 255, 136, .48) 0, transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(255, 0, 170, .36) 0, transparent 36%),
    radial-gradient(circle at 82% 18%, rgba(255, 235, 59, .28) 0, transparent 28%),
    linear-gradient(115deg, transparent 0 22%, rgba(34, 255, 136, .14) 22.2% 22.8%, transparent 23% 100%) !important;
  animation: graffitiNeonPulse 6.5s ease-in-out infinite alternate !important;
  transform: translateZ(0);
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .22 !important;
  background:
    linear-gradient(180deg, rgba(34, 255, 136, .24), rgba(34, 255, 136, 0)) 18vw -14vh / 9px 34vh no-repeat,
    linear-gradient(180deg, rgba(255, 235, 59, .2), rgba(255, 235, 59, 0)) 73vw -20vh / 7px 38vh no-repeat,
    linear-gradient(180deg, rgba(255, 0, 170, .22), rgba(255, 0, 170, 0)) 84vw -10vh / 10px 30vh no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, .18) 0 1px, transparent 1.4px) 0 0 / 42px 42px,
    radial-gradient(circle, rgba(34, 255, 136, .16) 0 1px, transparent 1.4px) 21px 17px / 64px 64px,
    radial-gradient(circle, rgba(255, 235, 59, .14) 0 1px, transparent 1.4px) 9px 31px / 78px 78px,
    linear-gradient(108deg, transparent 0 49%, rgba(255, 255, 255, .08) 49.2% 49.7%, transparent 50% 100%) !important;
  animation: graffitiDrips 18s linear infinite, graffitiSprayDrift 28s linear infinite !important;
  transform: translateZ(0);
}

body::before {
  opacity: .16 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 22% 28%, rgba(34,255,136,.12), transparent 16rem),
    radial-gradient(circle at 78% 68%, rgba(255,0,170,.1), transparent 18rem) !important;
  animation: graffitiTextureGlitch 9s steps(2, end) infinite !important;
}

body::after {
  opacity: .18 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1.35px) 0 0 / 36px 36px,
    radial-gradient(circle, rgba(34,255,136,.14) 0 1px, transparent 1.35px) 18px 14px / 58px 58px,
    linear-gradient(116deg, transparent 0 18%, rgba(255,235,59,.12) 18.2% 18.8%, transparent 19% 100%) !important;
  animation: graffitiParticleFloat 25s linear infinite !important;
}

@keyframes graffitiNeonPulse {
  0% {
    opacity: .16;
    transform: translate3d(-1.2%, -.8%, 0) scale(1);
  }
  55% {
    opacity: .3;
  }
  100% {
    opacity: .22;
    transform: translate3d(1.2%, .9%, 0) scale(1.025);
  }
}

@keyframes graffitiDrips {
  0% {
    background-position:
      18vw -28vh,
      73vw -36vh,
      84vw -22vh,
      0 0,
      21px 17px,
      9px 31px,
      0 0;
  }
  100% {
    background-position:
      18vw 118vh,
      73vw 124vh,
      84vw 112vh,
      0 0,
      21px 17px,
      9px 31px,
      0 0;
  }
}

@keyframes graffitiSprayDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-28px, 18px, 0);
  }
}

@keyframes graffitiTextureGlitch {
  0%, 92%, 100% {
    transform: translate3d(0, 0, 0);
  }
  94% {
    transform: translate3d(7px, -2px, 0);
  }
  96% {
    transform: translate3d(-5px, 2px, 0);
  }
}

@keyframes graffitiParticleFloat {
  0% {
    background-position: 0 0, 18px 14px, 0 0;
  }
  100% {
    background-position: 120px -80px, -70px 96px, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after,
  body::before,
  body::after {
    animation: none !important;
  }
}

/* News article actions should stay straight and centered, not inherit skewed promo buttons. */
.article-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 156px;
  padding: 0 22px;
  color: #071014 !important;
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  border: 1px solid rgba(242, 247, 251, .62) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(226, 235, 240, .96)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    4px 4px 0 rgba(232, 55, 72, .54) !important;
  clip-path: none !important;
  transform: none !important;
}

.article-actions a::before,
.article-actions a::after {
  content: none !important;
}

.article-actions a:hover,
.article-actions a:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    4px 6px 0 rgba(232, 55, 72, .62),
    0 0 24px rgba(158, 231, 255, .16) !important;
}

/* Final page rhythm: app, catalog and news headings share one left edge. */
.catalog > .section-head,
.catalog > .catalog-toolbar,
.catalog > .club-layout,
.catalog > .club-map-panel,
.app-module > .app-download-promo,
.content > .section-head,
.content > .content-grid {
  width: min(100%, 1120px);
  margin-left: auto !important;
  margin-right: auto !important;
}

.catalog > .section-head,
.content > .section-head {
  max-width: min(100%, 1120px);
  margin-bottom: 28px;
}

.content {
  border-top: 1px solid rgba(158, 231, 255, .24);
  padding-top: clamp(54px, 7vw, 92px) !important;
}

.app-module {
  padding-bottom: clamp(54px, 7vw, 92px) !important;
}

.content-grid article {
  min-height: 230px;
  padding: 0 !important;
}

.news-card-link {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  height: 100%;
  padding: 22px;
  color: inherit;
  text-decoration: none;
}

.news-card-link p {
  color: var(--muted);
  line-height: 1.6;
}

.news-card-link strong {
  margin-top: auto;
  color: var(--accent);
  font-weight: 900;
}

@media (max-width: 980px) {
  .catalog > .section-head,
  .catalog > .catalog-toolbar,
  .catalog > .club-layout,
  .catalog > .club-map-panel,
  .app-module > .app-download-promo,
  .content > .section-head,
  .content > .content-grid {
    width: 100%;
  }
}

html,
body,
body * {
  cursor: default !important;
}

.catalog-scope-controls {
  display: inline-flex !important;
  align-items: center;
  gap: 6px !important;
  padding: 4px;
  border: 1px solid rgba(242, 247, 251, .14);
  background: rgba(242, 247, 251, .055);
}

.catalog-scope-controls .chip {
  min-width: 150px;
  justify-content: center;
}

.app-module {
  padding-top: clamp(54px, 7vw, 92px) !important;
  padding-bottom: clamp(54px, 7vw, 92px) !important;
}

.app-download-promo {
  width: min(100%, 1180px);
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  min-height: 310px;
  padding: 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.app-download-promo::before,
.app-download-promo::after {
  content: none !important;
}

.app-phone-preview {
  justify-self: start;
}

.app-preview-trigger {
  appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

.app-preview-trigger:focus-visible {
  outline: 2px solid rgba(158, 231, 255, .7);
  outline-offset: 8px;
}

.app-phone-preview:has(.app-phone-screenshot) {
  width: 214px;
  aspect-ratio: 789 / 1754;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, .34),
    8px 8px 0 rgba(232, 55, 72, .18);
  cursor: zoom-in !important;
}

.app-phone-preview:has(.app-phone-screenshot) .phone-speaker,
.app-phone-preview:has(.app-phone-screenshot) .phone-screen {
  display: none;
}

.app-phone-screenshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  border-radius: 24px;
}

@media (max-width: 620px) {
  .app-phone-preview:has(.app-phone-screenshot) {
    justify-self: center;
    width: min(204px, 72vw);
  }
}

.club-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 118px;
  gap: 10px !important;
  margin: 14px 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
}

.club-gallery::-webkit-scrollbar {
  display: none !important;
}

.gallery-button,
.gallery-button:first-child {
  flex: initial !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  grid-row: auto !important;
}

.gallery-button img,
.gallery-button:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.club-specs-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.club-specs-row {
  display: grid;
  grid-template-columns: minmax(104px, .72fr) minmax(0, 1.28fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(242, 247, 251, .12);
  background: rgba(242, 247, 251, .045);
}

.club-specs-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.club-specs-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.28;
}

@media (max-width: 760px) {
  .club-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 108px;
  }

  .club-specs-table {
    grid-template-columns: 1fr;
  }

  .catalog-scope-controls {
    width: 100%;
  }

  .catalog-scope-controls .chip {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Final scroll-stability pass: keep the page from repainting heavy fixed layers while scrolling. */
html {
  scroll-behavior: auto !important;
}

body,
.live-wall-bg {
  background-attachment: scroll !important;
}

body::before,
body::after,
.live-wall-bg::before,
.live-wall-bg::after,
section::before,
section::after {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

.club-detail {
  position: relative !important;
  top: auto !important;
}

.club-card,
.club-page-section,
.map-card,
.news-card,
.post-card,
.content-grid article {
  contain: layout paint !important;
}

.club-card:hover,
.gallery-button:hover img,
.club-page-gallery button:hover img {
  transform: none !important;
}

/* Lightweight Yandex map: individual club markers stay visible while the map moves. */
.catalog.map-mode .club-map-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .55fr) !important;
  gap: 18px !important;
}

.club-map {
  min-height: min(68vh, 620px) !important;
  overflow: hidden !important;
  background: #101216 !important;
}

.club-map.yandex-tile-map .leaflet-control-attribution {
  color: rgba(20, 24, 28, .78) !important;
  background: rgba(255, 255, 255, .82) !important;
}

.club-map.yandex-tile-map .leaflet-control-attribution a {
  color: #1f4ca3 !important;
}

@media (max-width: 980px) {
  .catalog.map-mode .club-map-panel {
    grid-template-columns: 1fr !important;
  }

  .club-map {
    min-height: 420px !important;
    height: 420px !important;
  }
}

/* Catalog cards: compact real photo preview, full card remains usable. */
.club-card {
  aspect-ratio: auto !important;
  min-height: 186px !important;
}

.club-card-main {
  grid-template-rows: 92px auto !important;
  gap: 8px !important;
}

.club-card .club-thumb {
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}

.club-card-main .club-thumb:not(.club-photo-empty) {
  cursor: zoom-in !important;
}

.club-page-photo-button,
.gallery-button {
  cursor: zoom-in !important;
}

.club-gallery,
.club-page-gallery {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(215, 255, 40, .55) rgba(255, 255, 255, .08) !important;
}

.club-gallery {
  margin: 14px 0 18px !important;
  padding: 2px 2px 10px !important;
}

.club-page-gallery {
  padding: 0 clamp(18px, 4vw, 42px) 22px !important;
}

.club-gallery::-webkit-scrollbar,
.club-page-gallery::-webkit-scrollbar {
  height: 8px !important;
}

.club-gallery::-webkit-scrollbar-track,
.club-page-gallery::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08) !important;
  border-radius: 999px !important;
}

.club-gallery::-webkit-scrollbar-thumb,
.club-page-gallery::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(215, 255, 40, .55) !important;
}

.gallery-button,
.club-page-gallery button,
.club-page-gallery button:first-child {
  flex: 0 0 clamp(104px, 12vw, 148px) !important;
  width: clamp(104px, 12vw, 148px) !important;
  min-height: 0 !important;
  height: clamp(74px, 8vw, 98px) !important;
  grid-row: auto !important;
  scroll-snap-align: start !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #111 !important;
}

.club-page-gallery button:first-child {
  flex-basis: clamp(128px, 15vw, 176px) !important;
  width: clamp(128px, 15vw, 176px) !important;
}

.gallery-button img,
.gallery-button:first-child img,
.club-page-gallery img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, .96) !important;
}

.lightbox.open {
  display: flex !important;
}

.lightbox img {
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 32px) !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.club-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.club-card h3 {
  display: -webkit-box !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

@media (max-width: 640px) {
  .club-card-main {
    grid-template-rows: 104px auto !important;
  }

  .club-card .club-thumb {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }
}

/* FINAL LAST RULE: no image, no mountains, animated neon only */
html,
body {
  min-height: 100%;
  background: #050507 !important;
}

html body {
  position: relative !important;
  isolation: isolate !important;
  background: #050507 !important;
  background-image: none !important;
}

html body .live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 240, 255, .40), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 0, 170, .34), transparent 30%),
    radial-gradient(circle at 52% 84%, rgba(163, 230, 53, .22), transparent 30%),
    linear-gradient(125deg, rgba(34, 255, 136, .18), rgba(255, 0, 170, .22), rgba(0, 240, 255, .20), rgba(255, 122, 24, .14)),
    repeating-linear-gradient(112deg, rgba(255,255,255,.035) 0 1px, transparent 1px 86px),
    #050507 !important;
  background-size: 130% 130%, 140% 140%, 150% 150%, 420% 420%, 160px 160px, cover !important;
  background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%, 0 0, center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  animation: recoreNeonFlow 14s ease-in-out infinite alternate !important;
  transform: none !important;
  filter: saturate(1.15) brightness(.95) !important;
}

html body::before,
html body::after,
html body .live-wall-bg::before,
html body .live-wall-bg::after {
  content: "" !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html body main {
  background: transparent !important;
}

@keyframes recoreNeonFlow {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%, 0 0, center;
    filter: saturate(1.05) brightness(.9);
  }
  50% {
    background-position: 24% 18%, 78% 26%, 44% 74%, 100% 50%, 72px 42px, center;
    filter: saturate(1.35) brightness(1.04);
  }
  100% {
    background-position: 42% 12%, 62% 34%, 58% 66%, 0% 50%, 144px 84px, center;
    filter: saturate(1.18) brightness(.96);
  }
}

/* Final override: animated neon background, no photos */
html,
body {
  min-height: 100%;
  background: #050507 !important;
}

html body {
  position: relative !important;
  isolation: isolate !important;
  background: #050507 !important;
  background-image: none !important;
}

html body .live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 240, 255, .40), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 0, 170, .34), transparent 30%),
    radial-gradient(circle at 52% 84%, rgba(163, 230, 53, .22), transparent 30%),
    linear-gradient(125deg, rgba(34, 255, 136, .18), rgba(255, 0, 170, .22), rgba(0, 240, 255, .20), rgba(255, 122, 24, .14)),
    repeating-linear-gradient(112deg, rgba(255,255,255,.035) 0 1px, transparent 1px 86px),
    #050507 !important;
  background-size:
    130% 130%,
    140% 140%,
    150% 150%,
    420% 420%,
    160px 160px,
    cover !important;
  background-position:
    0% 0%,
    100% 0%,
    50% 100%,
    0% 50%,
    0 0,
    center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  animation: recoreNeonFlow 14s ease-in-out infinite alternate !important;
  transform: none !important;
  filter: saturate(1.15) brightness(.95) !important;
}

html body::before,
html body::after,
html body .live-wall-bg::before,
html body .live-wall-bg::after {
  content: "" !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html body main {
  background: transparent !important;
}

@keyframes recoreNeonFlow {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      50% 100%,
      0% 50%,
      0 0,
      center;
    filter: saturate(1.05) brightness(.9);
  }
  50% {
    background-position:
      24% 18%,
      78% 26%,
      44% 74%,
      100% 50%,
      72px 42px,
      center;
    filter: saturate(1.35) brightness(1.04);
  }
  100% {
    background-position:
      42% 12%,
      62% 34%,
      58% 66%,
      0% 50%,
      144px 84px,
      center;
    filter: saturate(1.18) brightness(.96);
  }
}

/* Final background wrapper only */
html:not(.legacy-bg),
html body:not(.legacy-bg) {
  min-height: 100%;
  background: #0a0a0f !important;
}

html body:not(.legacy-bg) {
  position: relative !important;
  isolation: isolate !important;
  background-image: none !important;
  background: transparent !important;
}

html body .live-wall-bg:not(.legacy-bg) {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background-image:
    linear-gradient(rgba(0, 0, 0, .70), rgba(0, 0, 0, .70)),
    radial-gradient(circle at 70% 60%, rgba(255, 0, 170, .20) 0%, transparent 50%),
    radial-gradient(circle at 30% 20%, rgba(34, 255, 136, .20) 0%, transparent 40%),
    linear-gradient(45deg, rgba(34, 255, 136, .30), rgba(255, 0, 170, .30), rgba(0, 240, 255, .30), rgba(255, 255, 0, .30)),
    linear-gradient(rgba(10, 10, 15, .80), rgba(10, 10, 15, .95)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
  background-size: cover, cover, cover, 400% 400%, cover, cover !important;
  background-position: center, 70% 60%, 30% 20%, 0% 50%, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important;
  background-blend-mode: normal, screen, screen, screen, normal, normal !important;
  animation: gradient 15s ease infinite, neonSprayPulse 12s ease-in-out infinite alternate !important;
  transform: none !important;
  filter: none !important;
}

html body:not(.legacy-bg)::before,
html body:not(.legacy-bg)::after,
html body .live-wall-bg:not(.legacy-bg)::before,
html body .live-wall-bg:not(.legacy-bg)::after {
  content: "" !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

html body main:not(.legacy-bg) {
  background: transparent !important;
}

@keyframes gradient {
  0% {
    background-position: center, 70% 60%, 30% 20%, 0% 50%, center, center;
  }
  50% {
    background-position: center, 68% 56%, 34% 24%, 100% 50%, center, center;
  }
  100% {
    background-position: center, 70% 60%, 30% 20%, 0% 50%, center, center;
  }
}

@keyframes neonSprayPulse {
  0% {
    filter: saturate(1) brightness(.96);
  }
  45% {
    filter: saturate(1.22) brightness(1.04);
  }
  100% {
    filter: saturate(1.08) brightness(.98);
  }
}

/* Strict background reset: user-provided image only */
html,
body {
  min-height: 100%;
  background: #0a0a0f !important;
}

body {
  background-image:
    linear-gradient(rgba(10, 10, 15, .85), rgba(10, 10, 15, .95)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
  opacity: 1 !important;
  animation: none !important;
}

body::before,
body::after,
.live-wall-bg::before,
.live-wall-bg::after {
  content: "" !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

main {
  background: transparent !important;
}

/* Neon Rooftop City, final visual layer */
:root {
  --bg: #050508;
  --paper: #090b12;
  --paper-2: #10131d;
  --text: #f2fbff;
  --muted: #a9bac7;
  --soft: #657684;
  --line: rgba(0, 240, 255, .2);
  --accent: #00f0ff;
  --accent-2: #ff7a18;
  --blue: #00f0ff;
  --acid: #a3e635;
  --violet: #c026d3;
  --brick: #170515;
  --radius: 8px;
}

html body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 240, 255, .26), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(192, 38, 211, .28), transparent 30rem),
    radial-gradient(circle at 68% 82%, rgba(255, 122, 24, .16), transparent 28rem),
    linear-gradient(180deg, rgba(5, 5, 8, .86), rgba(5, 5, 8, .96)),
    #050508 !important;
}

body::before {
  opacity: .42 !important;
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(0, 240, 255, .10) 48.2% 48.6%, transparent 49% 100%),
    linear-gradient(90deg, rgba(0, 240, 255, .09) 1px, transparent 1px) 0 0 / 86px 86px,
    linear-gradient(0deg, rgba(192, 38, 211, .08) 1px, transparent 1px) 0 0 / 86px 86px,
    radial-gradient(circle, rgba(163, 230, 53, .28) 0 1px, transparent 1.5px) 12px 20px / 96px 96px,
    radial-gradient(circle, rgba(255, 0, 170, .22) 0 1px, transparent 1.5px) 64px 48px / 132px 132px !important;
  animation: rooftopParticleDrift 24s linear infinite !important;
}

body::after {
  opacity: .34 !important;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(0, 240, 255, .28) 8.2% 8.4%, transparent 8.8% 100%) 0 24vh / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 66%, rgba(255, 0, 170, .24) 66.2% 66.45%, transparent 66.8% 100%) 0 61vh / 100% 2px no-repeat,
    radial-gradient(ellipse at 50% 105%, rgba(0, 240, 255, .2), transparent 34rem),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px) !important;
  mix-blend-mode: screen;
  animation: rooftopLightLeak 9s ease-in-out infinite alternate !important;
}

main {
  background:
    linear-gradient(180deg, rgba(5, 5, 8, .08), rgba(5, 5, 8, .18) 34rem, rgba(5, 5, 8, .82)),
    radial-gradient(circle at 50% 2%, rgba(0, 240, 255, .08), transparent 26rem) !important;
}

.live-wall-bg {
  background:
    linear-gradient(180deg, rgba(5, 5, 8, .08), rgba(5, 5, 8, .36) 45%, rgba(5, 5, 8, .72)),
    linear-gradient(0deg, #030307 0 15%, transparent 15.2%),
    linear-gradient(0deg, transparent 0 46%, rgba(0, 240, 255, .14) 46.1% 46.5%, transparent 46.8% 100%),
    linear-gradient(90deg, transparent 0 7%, rgba(255, 0, 170, .18) 7.2% 7.55%, transparent 8% 100%),
    radial-gradient(ellipse at 18% 20%, rgba(0, 240, 255, .32), transparent 24rem),
    radial-gradient(ellipse at 78% 18%, rgba(192, 38, 211, .28), transparent 26rem),
    radial-gradient(ellipse at 62% 70%, rgba(255, 122, 24, .18), transparent 25rem),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 240, 255, .055) 59px 60px, transparent 61px 140px) !important;
  animation: rooftopParallax 22s ease-in-out infinite alternate !important;
}

.live-wall-bg::before {
  content: "ClubCore     ROOFTOP LAN\A CYBER STREET     24/7\A FRAG     GG     CLUBCORE" !important;
  inset: -8% -12% 0 -12% !important;
  color: rgba(242, 251, 255, .045) !important;
  -webkit-text-stroke: 1px rgba(0, 240, 255, .42) !important;
  font-family: "Russo One", Inter, Arial, sans-serif !important;
  font-size: clamp(42px, 8.5vw, 150px) !important;
  letter-spacing: .08em !important;
  line-height: .86 !important;
  text-shadow:
    0 0 18px rgba(0, 240, 255, .34),
    14px -8px 0 rgba(255, 0, 170, .11),
    -12px 10px 0 rgba(163, 230, 53, .08) !important;
  transform: translate3d(0, 0, 0) rotate(-5deg) !important;
  animation: rooftopGraffitiFloat 16s ease-in-out infinite alternate, rooftopGlitch 6s steps(2, end) infinite !important;
}

.live-wall-bg::after {
  background:
    linear-gradient(0deg, #050508 0 18%, transparent 18.2%),
    linear-gradient(0deg, #070911 0 26%, transparent 26.2%) 8vw 0 / 11vw 100% no-repeat,
    linear-gradient(0deg, #090b13 0 34%, transparent 34.2%) 22vw 0 / 15vw 100% no-repeat,
    linear-gradient(0deg, #060812 0 29%, transparent 29.2%) 42vw 0 / 12vw 100% no-repeat,
    linear-gradient(0deg, #090b15 0 38%, transparent 38.2%) 59vw 0 / 17vw 100% no-repeat,
    linear-gradient(0deg, #05070f 0 31%, transparent 31.2%) 80vw 0 / 13vw 100% no-repeat,
    linear-gradient(90deg, rgba(0,240,255,.38), transparent 18%) 22vw 64vh / 180px 3px no-repeat,
    linear-gradient(90deg, rgba(255,0,170,.34), transparent 22%) 61vw 58vh / 220px 3px no-repeat,
    radial-gradient(circle, rgba(0, 240, 255, .36) 0 1px, transparent 1.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(255, 0, 170, .28) 0 1px, transparent 1.4px) 23px 19px / 88px 88px !important;
  opacity: .84 !important;
  animation: rooftopWindows 14s ease-in-out infinite alternate, rooftopParticleDrift 26s linear infinite !important;
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 240, 255, .18) !important;
  background:
    linear-gradient(115deg, rgba(0, 240, 255, .16), transparent 34%),
    radial-gradient(circle at 74% 24%, rgba(255, 0, 170, .18), transparent 18rem),
    radial-gradient(circle at 82% 78%, rgba(163, 230, 53, .10), transparent 16rem),
    rgba(8, 10, 18, .36) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 32px 110px rgba(0, 240, 255, .08) !important;
}

.hero::before {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8px),
    linear-gradient(90deg, transparent, rgba(0, 240, 255, .22), transparent) !important;
  opacity: .22 !important;
  animation: heroScanline 7s linear infinite !important;
}

.hero::after {
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 240, 255, .22), transparent 14rem),
    radial-gradient(circle at 78% 24%, rgba(255, 0, 170, .2), transparent 15rem),
    linear-gradient(110deg, transparent 0 32%, rgba(255,255,255,.18) 33%, transparent 36% 100%) !important;
  opacity: .38 !important;
  animation: heroLightLeakMove 8s ease-in-out infinite alternate !important;
}

.hero h1,
.section-heading h2,
.club-page-title h1 {
  color: #f2fbff !important;
  text-shadow:
    0 0 16px rgba(0, 240, 255, .26),
    4px 0 0 rgba(255, 0, 170, .08),
    -4px 0 0 rgba(163, 230, 53, .06) !important;
  animation: titleGlitchPulse 5.8s steps(2, end) infinite !important;
}

.hero h1::after,
.section-heading h2::after {
  content: "" !important;
  display: block !important;
  width: min(220px, 42vw) !important;
  height: 7px !important;
  margin-top: 14px !important;
  background:
    radial-gradient(circle at 14px 5px, #00f0ff 0 4px, transparent 4.5px),
    radial-gradient(circle at 78px 5px, #ff00aa 0 3px, transparent 3.5px),
    linear-gradient(90deg, #00f0ff, #c026d3 54%, #ff7a18) !important;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, .46));
  animation: paintDripSlide 3.8s ease-in-out infinite alternate !important;
}

.club-card,
.news-card,
.post-card,
.pricing-grid article,
.feature-grid article,
.content-grid article,
.preview-card,
.booking-widget,
.club-detail,
.club-page-section,
.map-card {
  position: relative !important;
  border: 1px solid rgba(0, 240, 255, .18) !important;
  border-radius: 14px !important;
  transform-style: preserve-3d;
  transition:
    transform .36s cubic-bezier(.16, 1, .3, 1),
    border-color .36s cubic-bezier(.16, 1, .3, 1),
    box-shadow .36s cubic-bezier(.16, 1, .3, 1),
    background .36s cubic-bezier(.16, 1, .3, 1) !important;
  background:
    linear-gradient(145deg, rgba(0, 240, 255, .075), rgba(255, 0, 170, .045) 42%, rgba(8, 10, 18, .82)),
    rgba(8, 10, 18, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 60px rgba(0,0,0,.34) !important;
  clip-path: none !important;
}

.club-card::after,
.news-card::after,
.post-card::after,
.pricing-grid article::after,
.feature-grid article::after,
.content-grid article::after {
  content: "" !important;
  position: absolute !important;
  inset: -16px !important;
  z-index: -1 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 240, 255, .42) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 18%, rgba(255, 0, 170, .38) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 72%, rgba(163, 230, 53, .36) 0 3px, transparent 4px),
    radial-gradient(circle at 34% 86%, rgba(255, 122, 24, .36) 0 5px, transparent 6px) !important;
  filter: blur(.2px);
  transition: opacity .28s ease-out, transform .36s cubic-bezier(.16, 1, .3, 1) !important;
}

.club-card:hover,
.news-card:hover,
.post-card:hover,
.pricing-grid article:hover,
.feature-grid article:hover,
.content-grid article:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-4deg) translateY(-7px) !important;
  border-color: rgba(0, 240, 255, .62) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 34px rgba(0, 240, 255, .18),
    0 28px 85px rgba(0,0,0,.48) !important;
}

.club-card:hover::after,
.news-card:hover::after,
.post-card:hover::after,
.pricing-grid article:hover::after,
.feature-grid article:hover::after,
.content-grid article:hover::after {
  opacity: .88 !important;
  transform: scale(1.02) rotate(-1deg) !important;
}

.app-banner a,
.brand-mark,
.primary,
.button.primary,
.club-card-book,
.book-button,
.map-open-detail,
.demo-form button,
.phone-button {
  position: relative !important;
  overflow: hidden !important;
  color: #07070a !important;
  border: 1px solid rgba(255, 196, 107, .8) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.78), transparent 18%),
    linear-gradient(135deg, #ffb021, #ff7a18 48%, #ff00aa) !important;
  box-shadow:
    0 0 20px rgba(255, 122, 24, .34),
    0 10px 34px rgba(255, 0, 170, .16),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
  clip-path: none !important;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s cubic-bezier(.16, 1, .3, 1) !important;
}

.button.primary::before,
.club-card-book::before,
.book-button::before,
.map-open-detail::before,
.demo-form button::before,
.phone-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -70% !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.82), transparent 12%),
    radial-gradient(circle at 64% 54%, rgba(0,240,255,.72), transparent 14%),
    radial-gradient(circle at 46% 70%, rgba(163,230,53,.6), transparent 10%) !important;
  transform: translate3d(-22%, 18%, 0) rotate(18deg);
  transition: opacity .26s ease-out, transform .42s cubic-bezier(.16, 1, .3, 1) !important;
}

.button.primary:hover::before,
.club-card-book:hover::before,
.book-button:hover::before,
.map-open-detail:hover::before,
.demo-form button:hover::before,
.phone-button:hover::before {
  opacity: .75 !important;
  transform: translate3d(12%, -8%, 0) rotate(36deg) !important;
}

.button.primary:hover,
.club-card-book:hover,
.book-button:hover,
.map-open-detail:hover,
.demo-form button:hover,
.phone-button:hover {
  transform: translateY(-2px) scale(1.015) !important;
  box-shadow:
    0 0 30px rgba(255, 122, 24, .46),
    0 16px 42px rgba(255, 0, 170, .24),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.button:active,
.club-card-book:active,
.book-button:active {
  transform: translateY(1px) scale(.985) !important;
}

.button.secondary,
.map-jump-button,
.chip {
  color: #f2fbff !important;
  border: 1px solid rgba(0, 240, 255, .25) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(0, 240, 255, .095), rgba(192, 38, 211, .075), rgba(8, 10, 18, .74)) !important;
  clip-path: none !important;
}

.club-card.active,
.pricing-grid .featured,
.pc-seat.selected,
.live-seat.selected {
  animation: neonPulseActive 2.6s ease-in-out infinite !important;
}

.club-card.active,
.pricing-grid .featured,
.booking-widget {
  border-color: rgba(0, 240, 255, .58) !important;
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, .12),
    0 0 36px rgba(0, 240, 255, .12),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.pc-map.live-layout-map {
  border-color: rgba(0, 240, 255, .28) !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(0, 240, 255, .14), transparent 16rem),
    radial-gradient(circle at 84% 72%, rgba(255, 0, 170, .1), transparent 15rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(8,10,18,.86)) !important;
}

.pc-seat:hover:not(:disabled) {
  border-color: rgba(0, 240, 255, .78) !important;
  background: rgba(0, 240, 255, .13) !important;
}

.pc-seat.selected,
.booking-legend i.selected,
.live-seat.selected {
  color: #07070a !important;
  background: linear-gradient(135deg, #00f0ff, #a3e635) !important;
}

@keyframes rooftopParallax {
  0% { background-position: center, 0 0, 0 0, 0 0, center, center, center, 0 0; }
  100% { background-position: center, 0 0, 0 -22px, 14px 0, 2% 1%, 98% -1%, 52% 2%, 80px 0; }
}

@keyframes rooftopGraffitiFloat {
  0% { opacity: .45; transform: translate3d(-1%, -.5%, 0) rotate(-5deg) scale(1); }
  100% { opacity: .68; transform: translate3d(1%, .6%, 0) rotate(-4deg) scale(1.025); }
}

@keyframes rooftopGlitch {
  0%, 86%, 100% { filter: hue-rotate(0deg); }
  88% { filter: hue-rotate(35deg); transform: translate3d(1.2%, -.3%, 0) rotate(-5deg); }
  90% { filter: hue-rotate(-22deg); transform: translate3d(-.8%, .2%, 0) rotate(-4.6deg); }
}

@keyframes rooftopWindows {
  0% { opacity: .72; filter: brightness(1); }
  100% { opacity: .9; filter: brightness(1.18); }
}

@keyframes rooftopParticleDrift {
  0% { background-position: 0 24vh, 0 61vh, center, 0 0, 23px 19px; }
  100% { background-position: 0 24vh, 0 61vh, center, 120px -96px, -82px 120px; }
}

@keyframes rooftopLightLeak {
  0% { opacity: .22; transform: translate3d(-1%, 0, 0); }
  100% { opacity: .42; transform: translate3d(1%, -1%, 0); }
}

@keyframes heroScanline {
  0% { background-position: 0 -140px, -80vw 0; }
  100% { background-position: 0 420px, 80vw 0; }
}

@keyframes heroLightLeakMove {
  0% { transform: translate3d(-2%, -1%, 0); opacity: .24; }
  100% { transform: translate3d(2%, 1%, 0); opacity: .46; }
}

@keyframes titleGlitchPulse {
  0%, 84%, 100% { transform: translate3d(0, 0, 0); filter: none; }
  86% { transform: translate3d(2px, -1px, 0); filter: hue-rotate(28deg); }
  88% { transform: translate3d(-2px, 1px, 0); filter: hue-rotate(-22deg); }
}

@keyframes paintDripSlide {
  0% { transform: translateX(0) scaleX(.86); opacity: .72; }
  100% { transform: translateX(16px) scaleX(1); opacity: 1; }
}

@keyframes neonPulseActive {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 240, 255, .16), 0 0 18px rgba(0, 240, 255, .12); }
  50% { box-shadow: 0 0 0 1px rgba(0, 240, 255, .34), 0 0 32px rgba(0, 240, 255, .22); }
}

/* Palette 3: Asphalt / Ice Blue / White, sharper urban cyber forms */
:root {
  --bg: #03070a;
  --paper: #091015;
  --paper-2: #101a21;
  --text: #f2f7fb;
  --muted: #a8b8c3;
  --soft: #647684;
  --line: rgba(190, 220, 235, .18);
  --accent: #9ee7ff;
  --accent-2: #1d6f91;
  --blue: #5bc7ff;
  --acid: #f2f7fb;
  --violet: #2a5268;
  --brick: #07151d;
  --radius: 6px;
}

html body {
  color: var(--text) !important;
  background:
    linear-gradient(180deg, rgba(3, 7, 10, .74), rgba(3, 7, 10, .94)),
    radial-gradient(ellipse at 14% 20%, rgba(91, 199, 255, .22), transparent 30rem),
    radial-gradient(ellipse at 82% 18%, rgba(255, 255, 255, .08), transparent 28rem),
    radial-gradient(ellipse at 68% 82%, rgba(29, 111, 145, .18), transparent 34rem),
    repeating-linear-gradient(112deg, transparent 0 34px, rgba(158, 231, 255, .05) 35px 36px, transparent 37px 124px),
    linear-gradient(135deg, #03070a, #091015 48%, #020405) !important;
}

body::before {
  opacity: .34 !important;
  background:
    linear-gradient(90deg, rgba(158, 231, 255, .14) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, rgba(158, 231, 255, .08) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(116deg, transparent 0 18%, rgba(242, 247, 251, .12) 18.1% 18.45%, transparent 18.8% 100%),
    linear-gradient(64deg, transparent 0 69%, rgba(91, 199, 255, .13) 69.1% 69.45%, transparent 69.8% 100%) !important;
}

body::after {
  opacity: .22 !important;
  background:
    radial-gradient(circle, rgba(242, 247, 251, .23) 0 1px, transparent 1.4px) 0 0 / 42px 42px,
    radial-gradient(circle, rgba(91, 199, 255, .28) 0 1px, transparent 1.4px) 18px 21px / 78px 78px,
    linear-gradient(90deg, rgba(158, 231, 255, .18), transparent 42%) 0 23vh / 52vw 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(242, 247, 251, .16)) 48vw 67vh / 48vw 2px no-repeat !important;
}

main {
  background:
    linear-gradient(180deg, rgba(3, 7, 10, .18), rgba(3, 7, 10, .06) 32rem, rgba(3, 7, 10, .74)),
    repeating-linear-gradient(0deg, rgba(242, 247, 251, .012) 0 1px, transparent 1px 12px) !important;
}

.live-wall-bg {
  background:
    linear-gradient(180deg, rgba(3, 7, 10, .58), rgba(3, 7, 10, .9)),
    radial-gradient(ellipse at 20% 16%, rgba(91, 199, 255, .2), transparent 28rem),
    radial-gradient(ellipse at 78% 30%, rgba(242, 247, 251, .07), transparent 26rem),
    radial-gradient(ellipse at 46% 78%, rgba(29, 111, 145, .18), transparent 34rem),
    repeating-linear-gradient(112deg, transparent 0 42px, rgba(158, 231, 255, .05) 43px 44px, transparent 45px 138px),
    repeating-linear-gradient(0deg, rgba(242, 247, 251, .021) 0 1px, transparent 1px 9px) !important;
}

.live-wall-bg::before {
  content: "ClubCore     CLUB MAP     ONLINE BOOKING\A 24/7     FRAG     WASD     GG\A CYBER HALL     RESERVE     PC" !important;
  color: rgba(242, 247, 251, .036) !important;
  -webkit-text-stroke-color: rgba(158, 231, 255, .3) !important;
  text-shadow:
    0 0 20px rgba(91, 199, 255, .22),
    18px -10px 0 rgba(242, 247, 251, .045),
    -16px 12px 0 rgba(29, 111, 145, .12) !important;
  transform: translate3d(0, 0, 0) rotate(-4deg) !important;
}

.live-wall-bg::after {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(158, 231, 255, .44) 12.2% 12.45%, transparent 12.8% 100%) 0 17% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 61%, rgba(242, 247, 251, .24) 61.2% 61.45%, transparent 61.8% 100%) 0 47% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 33%, rgba(29, 111, 145, .36) 33.2% 33.55%, transparent 33.8% 100%) 0 74% / 100% 2px no-repeat,
    radial-gradient(circle, rgba(158, 231, 255, .34) 0 1px, transparent 1.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(242, 247, 251, .16) 0 1px, transparent 1.4px) 23px 19px / 88px 88px !important;
}

.site-header,
.app-banner,
.booking-dialog,
.club-page,
.map-card,
.news-card,
.post-card,
.feature-grid article,
.pricing-grid article,
.content-grid article,
.phone-screen {
  border-radius: 0 !important;
  border-color: rgba(158, 231, 255, .18) !important;
  background:
    linear-gradient(135deg, rgba(242, 247, 251, .08), rgba(9, 16, 21, .78) 42%, rgba(3, 7, 10, .84)),
    rgba(9, 16, 21, .72) !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.club-card,
.club-detail,
.booking-widget,
.club-map,
.pc-map,
.club-page-section,
.club-equipment,
.club-dashboard,
.club-stats div {
  border-radius: 0 !important;
  border-color: rgba(158, 231, 255, .18) !important;
  background:
    linear-gradient(145deg, rgba(158, 231, 255, .065), rgba(242, 247, 251, .025) 38%, rgba(3, 7, 10, .62)),
    rgba(9, 16, 21, .62) !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.hero {
  background:
    linear-gradient(115deg, rgba(158, 231, 255, .11), transparent 34%),
    linear-gradient(295deg, rgba(242, 247, 251, .06), transparent 42%),
    rgba(9, 16, 21, .28) !important;
  grid-template-columns: minmax(0, 780px) minmax(280px, 380px) !important;
  justify-content: space-between !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(100% - 52px) 100%, 0 100%) !important;
}

.hero-copy,
.hero-side-card,
.app-download-promo,
.hero-stats div,
.preview-card {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.hero-side-card {
  position: relative;
  display: grid;
  gap: 14px;
  align-self: start;
  align-content: start;
  min-height: 420px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(158, 231, 255, .22);
  background:
    linear-gradient(145deg, rgba(17, 24, 29, .9), rgba(5, 8, 10, .72)),
    rgba(9, 16, 21, .62);
  box-shadow:
    12px 12px 0 rgba(232, 55, 72, .16),
    inset 0 1px 0 rgba(242, 247, 251, .08);
}

.hero-side-card::before {
  content: "";
  position: absolute;
  inset: 18px 18px auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .8;
}

.hero-side-card span {
  position: relative;
  z-index: 1;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-side-card strong {
  position: relative;
  z-index: 1;
  max-width: 300px;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: 34px;
  line-height: 1;
}

.hero-side-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.hero-side-card div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(242, 247, 251, .12);
}

.hero-side-card b {
  color: var(--text);
  font-size: 30px;
  line-height: 1;
}

.hero-side-card small {
  color: var(--muted);
  font-weight: 800;
}

.hero-side-card a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: max-content;
  min-height: 42px;
  align-items: center;
  padding: 0 16px;
  color: #031017;
  font-weight: 950;
  background: var(--accent);
  box-shadow: 4px 4px 0 rgba(232, 55, 72, .24);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.app-download-promo {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 1120px);
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  align-items: center;
  min-height: 360px;
  padding: 32px 36px !important;
  overflow: visible;
  background:
    linear-gradient(145deg, rgba(17, 24, 29, .96), rgba(5, 8, 10, .92)),
    rgba(9, 16, 21, .78) !important;
  border: 1px solid rgba(158, 231, 255, .2) !important;
  box-shadow:
    14px 14px 0 rgba(232, 55, 72, .18),
    inset 0 1px 0 rgba(242, 247, 251, .08) !important;
}

.app-download-promo::before {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  border-top: 2px solid rgba(196, 232, 49, .7);
  transform: skewX(-10deg);
  opacity: .8;
}

.app-download-promo::after {
  content: "APP";
  position: absolute;
  right: 22px;
  bottom: 16px;
  z-index: -1;
  color: rgba(196, 232, 49, .08);
  font-size: 108px;
  font-weight: 950;
  line-height: .8;
  letter-spacing: 0;
}

.app-download-copy {
  position: relative;
  z-index: 1;
}

.app-download-copy > strong {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-download-copy h2 {
  max-width: 700px;
  margin: 0 0 14px;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: 52px;
  line-height: .95;
}

.app-download-copy p {
  max-width: 690px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.48;
}

.app-store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.store-link {
  display: grid;
  min-width: 148px;
  padding: 11px 16px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(242, 247, 251, .18);
  background:
    linear-gradient(180deg, rgba(242, 247, 251, .08), rgba(242, 247, 251, .03)),
    rgba(242, 247, 251, .045);
  box-shadow: 4px 4px 0 rgba(196, 232, 49, .18);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  pointer-events: none;
  cursor: default;
}

.store-link span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.store-link-live {
  pointer-events: auto;
  border-color: rgba(196, 232, 49, .55);
  box-shadow:
    4px 4px 0 rgba(196, 232, 49, .24),
    0 0 24px rgba(196, 232, 49, .12);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.store-link-live:hover,
.store-link-live:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(196, 232, 49, .9);
  background:
    linear-gradient(180deg, rgba(196, 232, 49, .18), rgba(242, 247, 251, .055)),
    rgba(242, 247, 251, .065);
  box-shadow:
    6px 6px 0 rgba(196, 232, 49, .34),
    0 0 34px rgba(196, 232, 49, .28),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  outline: 2px solid rgba(196, 232, 49, .36);
  outline-offset: 3px;
}

.app-phone-preview {
  position: relative;
  z-index: 1;
  justify-self: start;
  width: 218px;
  aspect-ratio: 9 / 18.8;
  padding: 13px 11px 15px;
  border: 1px solid rgba(242, 247, 251, .18);
  background:
    linear-gradient(150deg, rgba(242, 247, 251, .12), transparent 24%),
    #090d11;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, .34),
    8px 8px 0 rgba(232, 55, 72, .22);
  border-radius: 26px !important;
}

.phone-speaker {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 54px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(242, 247, 251, .2);
}

.phone-screen {
  display: grid;
  align-content: end;
  gap: 10px;
  height: 100%;
  padding: 18px 14px;
  overflow: hidden;
  color: var(--text);
  border: 1px solid rgba(158, 231, 255, .18);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(196, 232, 49, .16), transparent 26%),
    linear-gradient(20deg, rgba(232, 55, 72, .2), transparent 40%),
    rgba(15, 22, 28, .96);
}

.phone-screen span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.phone-screen strong {
  font-size: 24px;
  line-height: 1;
}

.phone-screen p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.phone-screen div {
  height: 42px;
  border: 1px solid rgba(242, 247, 251, .12);
  background: rgba(242, 247, 251, .055);
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr !important;
  }

  .hero-side-card {
    min-height: auto;
  }

  .app-download-promo {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
}

@media (max-width: 620px) {
  .app-download-promo {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .app-download-copy h2 {
    font-size: 32px;
  }

  .app-store-links {
    display: grid;
  }

  .store-link {
    min-width: 0;
  }

  .app-phone-preview {
    justify-self: center;
    width: 176px;
  }
}

.news-page-main {
  min-height: 100vh;
  padding: 140px clamp(18px, 5vw, 64px) 80px;
}

.article-page {
  position: relative;
  z-index: 0;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.article-page::before,
.article-page::after {
  content: none;
}

.article-back {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 0;
  color: var(--text);
  font-weight: 950;
  text-decoration: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.article-back span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
  background: transparent;
  clip-path: none;
}

.article-back:hover {
  transform: translateY(-1px);
  color: var(--accent);
  box-shadow: none;
}

.article-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.article-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.article-meta span {
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  border: 0;
  background: transparent;
}

.article-meta span + span::before {
  content: "/";
  margin-right: 10px;
  color: var(--accent-2);
}

.article-page h1 {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: 56px;
  line-height: .98;
  letter-spacing: 0;
}

.article-lead {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.42;
}

.article-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  max-width: 800px;
  margin-top: 30px;
}

.article-body p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.article-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.article-actions a {
  text-decoration: none;
}

@media (max-width: 620px) {
  .news-page-main {
    padding: 120px 14px 48px;
  }

  .article-page {
    padding: 0;
  }

  .article-page h1 {
    font-size: 34px;
  }

  .article-lead {
    font-size: 18px;
  }

  .article-body p {
    font-size: 16px;
  }

  .article-actions {
    display: grid;
  }
}

.button,
.chip,
.club-card-book,
.book-button,
.map-open-detail,
.demo-form button,
.phone-button,
.app-banner a {
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  letter-spacing: .045em;
}

.app-banner a,
.brand-mark,
.primary,
.button.primary,
.club-card-book,
.book-button,
.map-open-detail,
.demo-form button,
.phone-button {
  color: #031017 !important;
  border: 1px solid rgba(242, 247, 251, .62) !important;
  background:
    linear-gradient(135deg, #f2f7fb, #9ee7ff 48%, #5bc7ff) !important;
  box-shadow:
    4px 4px 0 rgba(29, 111, 145, .72),
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 22px rgba(91, 199, 255, .2) !important;
}

.button.secondary,
.map-jump-button,
.chip {
  color: #f2f7fb !important;
  border-color: rgba(158, 231, 255, .28) !important;
  background:
    linear-gradient(135deg, rgba(158, 231, 255, .095), rgba(242, 247, 251, .025)) !important;
}

.club-card.active,
.pricing-grid .featured {
  border-color: rgba(158, 231, 255, .55) !important;
  box-shadow:
    0 0 0 1px rgba(242, 247, 251, .08),
    0 22px 60px rgba(91, 199, 255, .1) !important;
}

.club-offer,
.booking-summary,
.club-review {
  border-color: rgba(158, 231, 255, .2) !important;
  background: rgba(158, 231, 255, .07) !important;
}

.pc-seat:hover:not(:disabled) {
  border-color: rgba(158, 231, 255, .78) !important;
  background: rgba(158, 231, 255, .12) !important;
}

.pc-seat.selected,
.booking-legend i.selected,
.live-seat.selected {
  color: #031017 !important;
  background: linear-gradient(135deg, #f2f7fb, #9ee7ff) !important;
}

/* Palette 1: Black / Red / Concrete */
:root {
  --bg: #050506;
  --paper: #101113;
  --paper-2: #18191d;
  --text: #f4f4f1;
  --muted: #b7b8b4;
  --soft: #767873;
  --line: rgba(255, 255, 255, .13);
  --accent: #d3182e;
  --accent-2: #6f101d;
  --blue: #a8adb5;
  --acid: #f4f4f1;
  --violet: #8f1f30;
  --brick: #2a0b10;
}

body {
  background:
    radial-gradient(circle at 12% 16%, rgba(111, 16, 29, .42), transparent 28rem),
    radial-gradient(circle at 82% 20%, rgba(210, 210, 205, .09), transparent 30rem),
    radial-gradient(circle at 64% 76%, rgba(95, 18, 26, .22), transparent 32rem),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 360px),
    #050506 !important;
}

body::before {
  opacity: .32 !important;
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(255,255,255,.07) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(211,24,46,.18) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(111,16,29,.22) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.023) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 11px) !important;
}

body::after {
  opacity: .18 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(211,24,46,.28) 0 1px, transparent 1.5px) 22px 19px / 66px 66px,
    linear-gradient(0deg, rgba(111,16,29,.17), rgba(111,16,29,.17)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(255,255,255,.08) 20% 20.5%, transparent 20.7% 100%) !important;
}

main {
  background:
    linear-gradient(180deg, rgba(5, 5, 6, .28), rgba(5, 5, 6, .12) 34rem, rgba(5, 5, 6, .66)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 13px) !important;
}

.live-wall-bg {
  background:
    linear-gradient(180deg, rgba(5, 5, 6, .48), rgba(5, 5, 6, .82)),
    radial-gradient(ellipse at 24% 18%, rgba(211, 24, 46, .18), transparent 32rem),
    radial-gradient(ellipse at 78% 24%, rgba(255, 255, 255, .075), transparent 28rem),
    radial-gradient(ellipse at 52% 72%, rgba(111, 16, 29, .22), transparent 31rem),
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(246, 248, 244, .03) 39px 40px, transparent 41px 118px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 9px) !important;
}

.live-wall-bg::before {
  color: rgba(255, 255, 255, .035) !important;
  -webkit-text-stroke-color: rgba(211, 24, 46, .34) !important;
  text-shadow:
    0 0 18px rgba(211, 24, 46, .23),
    18px -10px 0 rgba(255, 255, 255, .045),
    -16px 12px 0 rgba(111, 16, 29, .12) !important;
}

.live-wall-bg::after {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(211, 24, 46, .42) 8.2% 8.55%, transparent 8.8% 100%) 0 18% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 64%, rgba(255, 255, 255, .16) 64.2% 64.55%, transparent 64.8% 100%) 0 43% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 28%, rgba(111, 16, 29, .36) 28.2% 28.55%, transparent 28.8% 100%) 0 71% / 100% 2px no-repeat,
    radial-gradient(circle, rgba(211, 24, 46, .32) 0 1px, transparent 1.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(255, 255, 255, .12) 0 1px, transparent 1.4px) 23px 19px / 88px 88px !important;
}

.app-banner a,
.brand-mark,
.primary,
.button.primary,
.club-card-book,
.book-button,
.map-open-detail,
.demo-form button,
.phone-button {
  color: #fff !important;
  background: linear-gradient(135deg, #d3182e, #7c111f) !important;
  box-shadow: 4px 4px 0 #2a0b10, 0 0 20px rgba(211, 24, 46, .22) !important;
}

.button.secondary,
.map-jump-button {
  color: #f4f4f1 !important;
  border-color: rgba(255, 255, 255, .18) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)) !important;
}

.club-card.active,
.pricing-grid .featured,
.booking-widget {
  border-color: rgba(211, 24, 46, .48) !important;
  background: linear-gradient(145deg, rgba(111, 16, 29, .16), rgba(255, 255, 255, .035)) !important;
}

.club-offer,
.booking-summary {
  background: rgba(111, 16, 29, .18) !important;
}

.pc-seat:hover:not(:disabled) {
  border-color: rgba(211, 24, 46, .7) !important;
  background: rgba(211, 24, 46, .12) !important;
}

.pc-seat.selected,
.booking-legend i.selected {
  color: #fff !important;
  background: #d3182e !important;
}

.live-seat.selected {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .82) !important;
  background: linear-gradient(145deg, #d3182e, #6f101d) !important;
}

/* Palette 2: Black / Silver / Blood Red */
:root {
  --bg: #030405;
  --paper: #0d0f12;
  --paper-2: #171a1f;
  --text: #f5f7f8;
  --muted: #b9bec4;
  --soft: #7d848c;
  --line: rgba(226, 232, 240, .16);
  --accent: #d9dde2;
  --accent-2: #8f0f1d;
  --blue: #aeb7c2;
  --acid: #f5f7f8;
  --violet: #69717c;
  --brick: #24070c;
}

body {
  background:
    radial-gradient(circle at 16% 18%, rgba(180, 188, 198, .13), transparent 30rem),
    radial-gradient(circle at 82% 22%, rgba(143, 15, 29, .23), transparent 28rem),
    radial-gradient(circle at 58% 78%, rgba(255, 255, 255, .055), transparent 34rem),
    linear-gradient(180deg, rgba(255, 255, 255, .026), transparent 360px),
    #030405 !important;
}

body::before {
  opacity: .28 !important;
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(255,255,255,.075) 9.1% 9.45%, transparent 9.55% 100%),
    linear-gradient(157deg, transparent 0 48%, rgba(185,190,196,.11) 48.1% 48.45%, transparent 48.6% 100%),
    linear-gradient(24deg, transparent 0 71%, rgba(143,15,29,.16) 71.1% 71.5%, transparent 71.65% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 11px) !important;
}

body::after {
  opacity: .14 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.24) 0 1px, transparent 1.5px) 0 0 / 44px 44px,
    radial-gradient(circle, rgba(180,188,198,.18) 0 1px, transparent 1.5px) 22px 19px / 66px 66px,
    linear-gradient(0deg, rgba(143,15,29,.12), rgba(143,15,29,.12)) 83vw 34vh / 132px 190px no-repeat,
    linear-gradient(96deg, transparent 0 20%, rgba(255,255,255,.09) 20% 20.5%, transparent 20.7% 100%) !important;
}

main {
  background:
    linear-gradient(180deg, rgba(3, 4, 5, .26), rgba(3, 4, 5, .12) 34rem, rgba(3, 4, 5, .68)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 13px) !important;
}

.live-wall-bg {
  background:
    linear-gradient(180deg, rgba(3, 4, 5, .5), rgba(3, 4, 5, .84)),
    radial-gradient(ellipse at 24% 18%, rgba(185, 190, 196, .13), transparent 32rem),
    radial-gradient(ellipse at 78% 24%, rgba(143, 15, 29, .14), transparent 28rem),
    radial-gradient(ellipse at 52% 72%, rgba(255, 255, 255, .07), transparent 31rem),
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(246, 248, 244, .032) 39px 40px, transparent 41px 118px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 9px) !important;
}

.live-wall-bg::before {
  color: rgba(255, 255, 255, .04) !important;
  -webkit-text-stroke-color: rgba(220, 225, 232, .24) !important;
  text-shadow:
    0 0 18px rgba(220, 225, 232, .16),
    18px -10px 0 rgba(143, 15, 29, .07),
    -16px 12px 0 rgba(255, 255, 255, .055) !important;
}

.live-wall-bg::after {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(220, 225, 232, .25) 8.2% 8.55%, transparent 8.8% 100%) 0 18% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 64%, rgba(143, 15, 29, .24) 64.2% 64.55%, transparent 64.8% 100%) 0 43% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 28%, rgba(255, 255, 255, .18) 28.2% 28.55%, transparent 28.8% 100%) 0 71% / 100% 2px no-repeat,
    radial-gradient(circle, rgba(220, 225, 232, .22) 0 1px, transparent 1.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(143, 15, 29, .16) 0 1px, transparent 1.4px) 23px 19px / 88px 88px !important;
}

.app-banner a,
.brand-mark,
.primary,
.button.primary,
.club-card-book,
.book-button,
.map-open-detail,
.demo-form button,
.phone-button {
  color: #050506 !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  background: linear-gradient(135deg, #f5f7f8, #9da5ad 54%, #6c737c) !important;
  box-shadow:
    4px 4px 0 rgba(143, 15, 29, .72),
    inset 0 1px 0 rgba(255,255,255,.75),
    0 0 20px rgba(220, 225, 232, .16) !important;
}

.button.secondary,
.map-jump-button {
  color: #eef1f4 !important;
  border-color: rgba(226, 232, 240, .2) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
}

.club-card.active,
.pricing-grid .featured,
.booking-widget {
  border-color: rgba(226, 232, 240, .36) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(143, 15, 29, .08), rgba(255, 255, 255, .028)) !important;
}

.club-offer,
.booking-summary {
  background: rgba(255, 255, 255, .065) !important;
}

.pc-seat:hover:not(:disabled) {
  border-color: rgba(226, 232, 240, .72) !important;
  background: rgba(226, 232, 240, .10) !important;
}

.pc-seat.selected,
.booking-legend i.selected {
  color: #050506 !important;
  background: linear-gradient(135deg, #f5f7f8, #aeb7c2) !important;
}

.live-seat.selected {
  color: #050506 !important;
  border-color: rgba(255, 255, 255, .9) !important;
  background: linear-gradient(145deg, #f5f7f8, #8f98a3) !important;
}

/* Cyber-graffiti final background override: keep this block last. */
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 14%, rgba(40, 255, 156, .13), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(255, 45, 204, .12), transparent 28rem),
    radial-gradient(circle at 62% 76%, rgba(38, 214, 255, .11), transparent 32rem),
    linear-gradient(180deg, rgba(3, 5, 7, .96), rgba(9, 10, 13, .94) 42%, rgba(4, 5, 7, .98)),
    repeating-linear-gradient(90deg, rgba(210, 236, 238, .035) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(210, 236, 238, .025) 0 1px, transparent 1px 74px) !important;
  background-attachment: fixed !important;
  background-size: cover, cover, cover, cover, auto, auto !important;
  background-position: center !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(3, 4, 6, .42), rgba(3, 4, 6, .78)),
    radial-gradient(ellipse at 24% 18%, rgba(37, 255, 141, .2), transparent 32rem),
    radial-gradient(ellipse at 78% 24%, rgba(255, 38, 196, .16), transparent 28rem),
    radial-gradient(ellipse at 52% 72%, rgba(34, 211, 238, .14), transparent 31rem),
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(246, 248, 244, .034) 39px 40px, transparent 41px 118px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 9px) !important;
}

.live-wall-bg::before {
  content: "WASD     HEADSHOT     GG\A     CLUBCORE     24/7     FRAG\A ClubCore     WASD     GG";
  position: absolute !important;
  inset: -14% -10% !important;
  display: grid;
  place-items: center;
  white-space: pre;
  text-align: center;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: clamp(44px, 8vw, 148px);
  line-height: .86;
  letter-spacing: .08em;
  color: rgba(219, 255, 245, .05);
  -webkit-text-stroke: 1px rgba(37, 255, 141, .36);
  text-shadow:
    0 0 18px rgba(37, 255, 141, .24),
    18px -10px 0 rgba(255, 38, 196, .075),
    -16px 12px 0 rgba(34, 211, 238, .085);
  opacity: .54 !important;
  transform: translate3d(0, 0, 0) rotate(-7deg);
  mix-blend-mode: screen;
  animation:
    cyberGraffitiFloat 18s cubic-bezier(.23, 1, .32, 1) infinite alternate,
    cyberGraffitiGlitch 7.2s steps(2, end) infinite !important;
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .72 !important;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(37, 255, 141, .42) 8.2% 8.55%, transparent 8.8% 100%) 0 18% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 64%, rgba(255, 38, 196, .38) 64.2% 64.55%, transparent 64.8% 100%) 0 43% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 28%, rgba(34, 211, 238, .36) 28.2% 28.55%, transparent 28.8% 100%) 0 71% / 100% 2px no-repeat,
    radial-gradient(circle, rgba(37, 255, 141, .36) 0 1px, transparent 1.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(255, 38, 196, .26) 0 1px, transparent 1.4px) 23px 19px / 88px 88px,
    radial-gradient(circle, rgba(34, 211, 238, .24) 0 1px, transparent 1.4px) 12px 38px / 112px 112px;
  filter: saturate(1.12);
  transform: translate3d(0, 0, 0);
  animation:
    cyberGraffitiLines 9s cubic-bezier(.77, 0, .175, 1) infinite alternate,
    cyberGraffitiParticles 28s linear infinite !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .27 !important;
  background:
    linear-gradient(90deg, rgba(37, 255, 141, .13) 1px, transparent 1px) 0 0 / 82px 82px,
    linear-gradient(0deg, rgba(34, 211, 238, .1) 1px, transparent 1px) 0 0 / 82px 82px,
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255, 255, 255, .045) 8px, transparent 10px),
    radial-gradient(circle at 14% 82%, rgba(255, 38, 196, .14), transparent 22rem);
  transform: translate3d(0, 0, 0);
  animation: cyberMatrixDrift 22s linear infinite !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .2 !important;
  background:
    linear-gradient(115deg, transparent 0 16%, rgba(37, 255, 141, .12) 16.1% 16.5%, transparent 16.8% 100%),
    linear-gradient(64deg, transparent 0 72%, rgba(255, 38, 196, .11) 72.1% 72.45%, transparent 72.8% 100%),
    radial-gradient(circle, rgba(240, 255, 250, .18) 0 1px, transparent 1.3px) 0 0 / 46px 46px;
  animation: cyberNoiseGlitch 8s steps(2, end) infinite !important;
}

main {
  background:
    linear-gradient(180deg, rgba(3, 4, 6, .34), rgba(3, 4, 6, .18) 34rem, rgba(3, 4, 6, .62)) !important;
}

@keyframes cyberGraffitiFloat {
  0% {
    opacity: .42;
    transform: translate3d(-1.2%, -.8%, 0) rotate(-7deg) scale(1);
  }
  55% {
    opacity: .62;
  }
  100% {
    opacity: .5;
    transform: translate3d(1.1%, .7%, 0) rotate(-5.5deg) scale(1.035);
  }
}

@keyframes cyberGraffitiGlitch {
  0%, 88%, 100% {
    filter: hue-rotate(0deg);
    text-shadow:
      0 0 18px rgba(37, 255, 141, .24),
      18px -10px 0 rgba(255, 38, 196, .075),
      -16px 12px 0 rgba(34, 211, 238, .085);
  }
  90% {
    filter: hue-rotate(18deg);
    text-shadow:
      8px 0 0 rgba(37, 255, 141, .22),
      -10px 0 0 rgba(255, 38, 196, .16),
      0 0 24px rgba(34, 211, 238, .18);
  }
  92% {
    filter: hue-rotate(-14deg);
  }
}

@keyframes cyberGraffitiLines {
  0% {
    opacity: .45;
    transform: translate3d(0, 0, 0);
  }
  48% {
    opacity: .82;
  }
  100% {
    opacity: .58;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes cyberGraffitiParticles {
  0% {
    background-position: 0 18%, 0 43%, 0 71%, 0 0, 23px 19px, 12px 38px;
  }
  100% {
    background-position: 0 18%, 0 43%, 0 71%, 130px -88px, -94px 118px, 118px 74px;
  }
}

@keyframes cyberMatrixDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, center;
  }
  100% {
    background-position: 82px 82px, 82px 82px, 0 120px, center;
  }
}

@keyframes cyberNoiseGlitch {
  0%, 91%, 100% {
    transform: translate3d(0, 0, 0);
  }
  93% {
    transform: translate3d(7px, -2px, 0);
  }
  95% {
    transform: translate3d(-5px, 1px, 0);
  }
  97% {
    transform: translate3d(3px, 2px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after,
  body::before,
  body::after {
    animation: none !important;
  }
}

/* Final page-shape overrides for the simplified ClubCore landing. */
html,
body,
body * {
  cursor: default !important;
}

.catalog-scope-controls {
  display: inline-flex !important;
  align-items: center;
  gap: 6px !important;
  padding: 4px;
  border: 1px solid rgba(242, 247, 251, .14);
  background: rgba(242, 247, 251, .055);
}

.catalog-scope-controls .chip {
  min-width: 150px;
  justify-content: center;
}

.app-module {
  padding-top: clamp(54px, 7vw, 92px) !important;
  padding-bottom: clamp(54px, 7vw, 92px) !important;
}

.app-download-promo {
  width: min(100%, 1180px);
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  min-height: 310px;
  padding: 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.app-download-promo::before,
.app-download-promo::after {
  content: none !important;
}

.app-phone-preview {
  justify-self: start;
}

.club-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 118px;
  gap: 10px !important;
  margin: 14px 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
}

.club-gallery::-webkit-scrollbar {
  display: none !important;
}

.gallery-button,
.gallery-button:first-child {
  flex: initial !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  grid-row: auto !important;
}

.gallery-button img,
.gallery-button:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.club-specs-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.club-specs-row {
  display: grid;
  grid-template-columns: minmax(104px, .72fr) minmax(0, 1.28fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(242, 247, 251, .12);
  background: rgba(242, 247, 251, .045);
}

.club-specs-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.club-specs-row strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.28;
}

@media (max-width: 760px) {
  .club-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 108px;
  }

  .club-specs-table {
    grid-template-columns: 1fr;
  }

  .catalog-scope-controls {
    width: 100%;
  }

  .catalog-scope-controls .chip {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Tag-war street background override: only background layers. */
html body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 18%, rgba(245, 43, 85, .16), transparent 30rem),
    radial-gradient(circle at 78% 14%, rgba(238, 219, 82, .14), transparent 28rem),
    radial-gradient(circle at 52% 78%, rgba(42, 245, 157, .14), transparent 34rem),
    linear-gradient(180deg, rgba(4, 5, 6, .97), rgba(10, 9, 9, .95) 43%, rgba(4, 4, 5, .99)),
    repeating-linear-gradient(90deg, rgba(231, 224, 211, .032) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, rgba(231, 224, 211, .024) 0 1px, transparent 1px 68px) !important;
  background-attachment: fixed !important;
  background-position: center !important;
  background-size: cover, cover, cover, cover, auto, auto !important;
}

body .live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(4, 5, 6, .4), rgba(4, 5, 6, .78)),
    radial-gradient(ellipse at 20% 20%, rgba(245, 43, 85, .22), transparent 29rem),
    radial-gradient(ellipse at 76% 28%, rgba(238, 219, 82, .18), transparent 27rem),
    radial-gradient(ellipse at 58% 78%, rgba(42, 245, 157, .16), transparent 33rem),
    repeating-linear-gradient(98deg, transparent 0 35px, rgba(246, 240, 226, .04) 36px 37px, transparent 38px 104px),
    repeating-linear-gradient(0deg, rgba(246, 240, 226, .025) 0 1px, transparent 1px 8px) !important;
}

body .live-wall-bg::before {
  content: "ClubCore     NO SLEEP     GG\A    FRAG     WALL RUSH     24/7\A TAG WAR     WASD     HEADSHOT\A    CLUBCORE     REBORN     GG";
  position: absolute !important;
  inset: -18% -12% !important;
  display: grid !important;
  place-items: center !important;
  white-space: pre !important;
  text-align: center !important;
  font-family: "Russo One", Inter, Arial, sans-serif !important;
  font-size: clamp(38px, 7.6vw, 136px) !important;
  line-height: .78 !important;
  letter-spacing: .065em !important;
  color: rgba(246, 240, 226, .055) !important;
  -webkit-text-stroke: 1px rgba(238, 219, 82, .28);
  text-shadow:
    0 0 16px rgba(238, 219, 82, .18),
    16px -8px 0 rgba(245, 43, 85, .13),
    -14px 10px 0 rgba(42, 245, 157, .11),
    0 18px 0 rgba(255, 255, 255, .035);
  opacity: .74 !important;
  mix-blend-mode: screen !important;
  transform: translate3d(0, 0, 0) rotate(-8deg);
  animation:
    tagWarWallShift 15s cubic-bezier(.23, 1, .32, 1) infinite alternate,
    tagWarFreshSpray 4.8s steps(3, end) infinite !important;
}

body .live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .66 !important;
  background:
    linear-gradient(14deg, transparent 0 13%, rgba(245, 43, 85, .24) 13.1% 13.8%, transparent 14.1% 100%) 0 18% / 100% 100% no-repeat,
    linear-gradient(108deg, transparent 0 52%, rgba(238, 219, 82, .22) 52.1% 52.7%, transparent 53% 100%) 0 0 / 100% 100% no-repeat,
    linear-gradient(72deg, transparent 0 72%, rgba(42, 245, 157, .21) 72.1% 72.8%, transparent 73.1% 100%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(245, 43, 85, .36), rgba(245, 43, 85, 0)) 14vw -26vh / 10px 46vh no-repeat,
    linear-gradient(180deg, rgba(238, 219, 82, .32), rgba(238, 219, 82, 0)) 58vw -18vh / 7px 38vh no-repeat,
    linear-gradient(180deg, rgba(42, 245, 157, .3), rgba(42, 245, 157, 0)) 83vw -30vh / 9px 48vh no-repeat,
    radial-gradient(circle, rgba(246, 240, 226, .26) 0 1px, transparent 1.35px) 0 0 / 38px 38px,
    radial-gradient(circle, rgba(245, 43, 85, .26) 0 1px, transparent 1.35px) 19px 15px / 62px 62px,
    radial-gradient(circle, rgba(42, 245, 157, .2) 0 1px, transparent 1.35px) 8px 31px / 82px 82px;
  transform: translate3d(0, 0, 0);
  animation:
    tagWarPaintDrips 16s linear infinite,
    tagWarStickerDrift 24s linear infinite,
    tagWarLampPulse 2.8s ease-in-out infinite alternate !important;
}

html body::before {
  content: "STICKER\A 404\A OPEN\A LAN";
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  white-space: pre !important;
  padding: 12vh 0 0 72vw !important;
  font-family: "Russo One", Inter, Arial, sans-serif !important;
  font-size: clamp(12px, 1.5vw, 22px) !important;
  line-height: 1.15 !important;
  letter-spacing: .12em !important;
  color: rgba(246, 240, 226, .46) !important;
  text-shadow:
    -56vw 18vh 0 rgba(238, 219, 82, .5),
    -28vw 42vh 0 rgba(245, 43, 85, .44),
    12vw 58vh 0 rgba(42, 245, 157, .38);
  background:
    linear-gradient(90deg, rgba(246, 240, 226, .11) 1px, transparent 1px) 0 0 / 78px 78px,
    linear-gradient(0deg, rgba(246, 240, 226, .08) 1px, transparent 1px) 0 0 / 78px 78px,
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(246, 240, 226, .04) 8px, transparent 10px),
    radial-gradient(circle at 20% 82%, rgba(245, 43, 85, .16), transparent 20rem),
    radial-gradient(circle at 86% 12%, rgba(238, 219, 82, .14), transparent 22rem) !important;
  opacity: .34 !important;
  transform: translate3d(0, 0, 0);
  animation: tagWarGridDrift 19s linear infinite, tagWarStickersFly 12s cubic-bezier(.23, 1, .32, 1) infinite alternate !important;
}

html body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .24 !important;
  background:
    radial-gradient(circle at 12% 24%, rgba(245, 43, 85, .22), transparent 2.4rem),
    radial-gradient(circle at 76% 20%, rgba(238, 219, 82, .2), transparent 2.8rem),
    radial-gradient(circle at 52% 72%, rgba(42, 245, 157, .18), transparent 3.2rem),
    linear-gradient(116deg, transparent 0 18%, rgba(246, 240, 226, .08) 18.2% 18.7%, transparent 19% 100%),
    radial-gradient(circle, rgba(246, 240, 226, .2) 0 1px, transparent 1.4px) 0 0 / 44px 44px;
  transform: translate3d(0, 0, 0);
  animation: tagWarLampBlink 6.2s steps(2, end) infinite, tagWarNoiseCrawl 21s linear infinite !important;
}

body main {
  background:
    linear-gradient(180deg, rgba(5, 5, 6, .38), rgba(5, 5, 6, .18) 34rem, rgba(5, 5, 6, .68)) !important;
}

@keyframes tagWarWallShift {
  0% {
    opacity: .58;
    transform: translate3d(-1.4%, -.9%, 0) rotate(-8deg) scale(1);
  }
  44% {
    opacity: .8;
  }
  100% {
    opacity: .68;
    transform: translate3d(1.2%, .8%, 0) rotate(-6.4deg) scale(1.04);
  }
}

@keyframes tagWarFreshSpray {
  0%, 86%, 100% {
    filter: saturate(1) contrast(1);
  }
  88% {
    filter: saturate(1.35) contrast(1.12);
  }
  91% {
    filter: saturate(.92) contrast(1.08);
  }
}

@keyframes tagWarPaintDrips {
  0% {
    background-position:
      0 18%,
      0 0,
      0 0,
      14vw -26vh,
      58vw -18vh,
      83vw -30vh,
      0 0,
      19px 15px,
      8px 31px;
  }
  100% {
    background-position:
      0 18%,
      0 0,
      0 0,
      14vw 124vh,
      58vw 116vh,
      83vw 132vh,
      110px -74px,
      -82px 96px,
      96px 62px;
  }
}

@keyframes tagWarStickerDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-30px, 20px, 0);
  }
}

@keyframes tagWarLampPulse {
  0% {
    opacity: .48;
  }
  100% {
    opacity: .76;
  }
}

@keyframes tagWarGridDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, center, center;
  }
  100% {
    background-position: 78px 78px, 78px 78px, 0 110px, center, center;
  }
}

@keyframes tagWarStickersFly {
  0% {
    transform: translate3d(-1%, 1%, 0) rotate(-2deg);
  }
  100% {
    transform: translate3d(1.4%, -1.2%, 0) rotate(2deg);
  }
}

@keyframes tagWarLampBlink {
  0%, 82%, 100% {
    filter: brightness(1);
  }
  86% {
    filter: brightness(1.34);
  }
  90% {
    filter: brightness(.86);
  }
}

@keyframes tagWarNoiseCrawl {
  0% {
    background-position: center, center, center, 0 0, 0 0;
  }
  100% {
    background-position: center, center, center, 0 0, 132px -88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after,
  body::before,
  body::after {
    animation: none !important;
  }
}

/* Cyber-graffiti background override: only global background layers. */
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 14%, rgba(40, 255, 156, .13), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(255, 45, 204, .12), transparent 28rem),
    radial-gradient(circle at 62% 76%, rgba(38, 214, 255, .11), transparent 32rem),
    linear-gradient(180deg, rgba(3, 5, 7, .96), rgba(9, 10, 13, .94) 42%, rgba(4, 5, 7, .98)),
    repeating-linear-gradient(90deg, rgba(210, 236, 238, .035) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(210, 236, 238, .025) 0 1px, transparent 1px 74px) !important;
  background-attachment: fixed !important;
  background-size: cover, cover, cover, cover, auto, auto !important;
  background-position: center !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(3, 4, 6, .42), rgba(3, 4, 6, .78)),
    radial-gradient(ellipse at 24% 18%, rgba(37, 255, 141, .2), transparent 32rem),
    radial-gradient(ellipse at 78% 24%, rgba(255, 38, 196, .16), transparent 28rem),
    radial-gradient(ellipse at 52% 72%, rgba(34, 211, 238, .14), transparent 31rem),
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(246, 248, 244, .034) 39px 40px, transparent 41px 118px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 9px) !important;
}

.live-wall-bg::before {
  content: "WASD     HEADSHOT     GG\A     CLUBCORE     24/7     FRAG\A ClubCore     WASD     GG";
  position: absolute !important;
  inset: -14% -10% !important;
  display: grid;
  place-items: center;
  white-space: pre;
  text-align: center;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: clamp(44px, 8vw, 148px);
  line-height: .86;
  letter-spacing: .08em;
  color: rgba(219, 255, 245, .05);
  -webkit-text-stroke: 1px rgba(37, 255, 141, .36);
  text-shadow:
    0 0 18px rgba(37, 255, 141, .24),
    18px -10px 0 rgba(255, 38, 196, .075),
    -16px 12px 0 rgba(34, 211, 238, .085);
  opacity: .54 !important;
  transform: translate3d(0, 0, 0) rotate(-7deg);
  mix-blend-mode: screen;
  animation:
    cyberGraffitiFloat 18s cubic-bezier(.23, 1, .32, 1) infinite alternate,
    cyberGraffitiGlitch 7.2s steps(2, end) infinite !important;
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .72 !important;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(37, 255, 141, .42) 8.2% 8.55%, transparent 8.8% 100%) 0 18% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 64%, rgba(255, 38, 196, .38) 64.2% 64.55%, transparent 64.8% 100%) 0 43% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 28%, rgba(34, 211, 238, .36) 28.2% 28.55%, transparent 28.8% 100%) 0 71% / 100% 2px no-repeat,
    radial-gradient(circle, rgba(37, 255, 141, .36) 0 1px, transparent 1.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(255, 38, 196, .26) 0 1px, transparent 1.4px) 23px 19px / 88px 88px,
    radial-gradient(circle, rgba(34, 211, 238, .24) 0 1px, transparent 1.4px) 12px 38px / 112px 112px;
  filter: saturate(1.12);
  transform: translate3d(0, 0, 0);
  animation:
    cyberGraffitiLines 9s cubic-bezier(.77, 0, .175, 1) infinite alternate,
    cyberGraffitiParticles 28s linear infinite !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .27 !important;
  background:
    linear-gradient(90deg, rgba(37, 255, 141, .13) 1px, transparent 1px) 0 0 / 82px 82px,
    linear-gradient(0deg, rgba(34, 211, 238, .1) 1px, transparent 1px) 0 0 / 82px 82px,
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255, 255, 255, .045) 8px, transparent 10px),
    radial-gradient(circle at 14% 82%, rgba(255, 38, 196, .14), transparent 22rem);
  transform: translate3d(0, 0, 0);
  animation: cyberMatrixDrift 22s linear infinite !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .2 !important;
  background:
    linear-gradient(115deg, transparent 0 16%, rgba(37, 255, 141, .12) 16.1% 16.5%, transparent 16.8% 100%),
    linear-gradient(64deg, transparent 0 72%, rgba(255, 38, 196, .11) 72.1% 72.45%, transparent 72.8% 100%),
    radial-gradient(circle, rgba(240, 255, 250, .18) 0 1px, transparent 1.3px) 0 0 / 46px 46px;
  animation: cyberNoiseGlitch 8s steps(2, end) infinite !important;
}

main {
  background:
    linear-gradient(180deg, rgba(3, 4, 6, .34), rgba(3, 4, 6, .18) 34rem, rgba(3, 4, 6, .62)) !important;
}

@keyframes cyberGraffitiFloat {
  0% {
    opacity: .42;
    transform: translate3d(-1.2%, -.8%, 0) rotate(-7deg) scale(1);
  }
  55% {
    opacity: .62;
  }
  100% {
    opacity: .5;
    transform: translate3d(1.1%, .7%, 0) rotate(-5.5deg) scale(1.035);
  }
}

@keyframes cyberGraffitiGlitch {
  0%, 88%, 100% {
    filter: hue-rotate(0deg);
    text-shadow:
      0 0 18px rgba(37, 255, 141, .24),
      18px -10px 0 rgba(255, 38, 196, .075),
      -16px 12px 0 rgba(34, 211, 238, .085);
  }
  90% {
    filter: hue-rotate(18deg);
    text-shadow:
      8px 0 0 rgba(37, 255, 141, .22),
      -10px 0 0 rgba(255, 38, 196, .16),
      0 0 24px rgba(34, 211, 238, .18);
  }
  92% {
    filter: hue-rotate(-14deg);
  }
}

@keyframes cyberGraffitiLines {
  0% {
    opacity: .45;
    transform: translate3d(0, 0, 0);
  }
  48% {
    opacity: .82;
  }
  100% {
    opacity: .58;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes cyberGraffitiParticles {
  0% {
    background-position: 0 18%, 0 43%, 0 71%, 0 0, 23px 19px, 12px 38px;
  }
  100% {
    background-position: 0 18%, 0 43%, 0 71%, 130px -88px, -94px 118px, 118px 74px;
  }
}

@keyframes cyberMatrixDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, center;
  }
  100% {
    background-position: 82px 82px, 82px 82px, 0 120px, center;
  }
}

@keyframes cyberNoiseGlitch {
  0%, 91%, 100% {
    transform: translate3d(0, 0, 0);
  }
  93% {
    transform: translate3d(7px, -2px, 0);
  }
  95% {
    transform: translate3d(-5px, 1px, 0);
  }
  97% {
    transform: translate3d(3px, 2px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after,
  body::before,
  body::after {
    animation: none !important;
  }
}

/* Keep booking floorplan layout from being flattened by older pc-map rules. */
.pc-map.pc-floorplan {
  display: grid !important;
  grid-template-columns: repeat(var(--plan-cols), minmax(48px, 1fr)) !important;
  grid-template-rows: repeat(var(--plan-rows), 52px) !important;
}

.pc-map.live-layout-map {
  display: block !important;
  height: min(492px, 52vh);
  max-height: none;
  padding: 12px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .16);
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 34, 90, .14), transparent 17rem),
    radial-gradient(circle at 78% 64%, rgba(30, 214, 255, .10), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)),
    rgba(2, 3, 5, .72);
}

.live-layout-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 10px;
  display: grid;
  align-items: start;
  justify-items: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(0deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 40px 40px,
    rgba(0, 0, 0, .24);
}

.live-layout-stage {
  position: relative;
  flex: 0 0 auto;
  transform: scale(var(--layout-scale, 1));
  transform-origin: top center;
}

.live-layout-element,
.live-seat {
  position: absolute;
  box-sizing: border-box;
}

.live-layout-element {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.live-wall {
  min-width: 2px;
  min-height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18), var(--element-color), rgba(255, 255, 255, .18));
  box-shadow: 0 0 8px rgba(255, 255, 255, .12);
}

.live-door {
  border: 2px dashed rgba(130, 210, 255, .75);
  border-radius: 999px 999px 4px 4px;
  background: rgba(37, 99, 235, .14);
}

.live-admin {
  border: 1px solid rgba(130, 210, 255, .42);
  border-radius: 8px;
  background: rgba(37, 99, 235, .18);
  box-shadow: 0 0 18px rgba(37, 99, 235, .16);
}

.live-text {
  color: rgba(220, 235, 255, .72);
  text-shadow: 0 0 10px color-mix(in srgb, var(--element-color) 70%, transparent);
  letter-spacing: .04em;
}

.live-seat {
  min-height: 0;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 0;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--element-color) 74%, white 12%);
  border-radius: 7px;
  color: rgba(255, 255, 255, .94);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--element-color) 24%, transparent), rgba(255, 255, 255, .045)),
    rgba(0, 0, 0, .58);
  box-shadow: 0 0 12px color-mix(in srgb, var(--element-color) 24%, transparent);
}

.live-seat span {
  font-size: 10px;
  line-height: 1;
}

.live-seat small {
  max-width: 100%;
  color: rgba(255, 255, 255, .68);
  font-size: 8px;
  line-height: 1;
}

.live-seat:hover:not(:disabled) {
  z-index: 5;
  transform: translateY(-1px) scale(1.08);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 0 20px color-mix(in srgb, var(--element-color) 45%, transparent);
}

.live-seat.selected {
  z-index: 6;
  color: #070707;
  border-color: #fff;
  background: linear-gradient(145deg, #f8f8f8, #aeb7c2);
}

.live-seat.selected small {
  color: rgba(0, 0, 0, .68);
}

.live-seat.vip {
  --element-color: #eab308;
}

.live-seat.ps,
.live-seat.pc-1772313826699 {
  --element-color: #ec4899;
}

.live-seat.cockpit {
  --element-color: #14b8a6;
}

.live-seat.busy,
.live-seat.filtered {
  opacity: .32;
  filter: grayscale(.8);
}

.live-layout-note {
  margin: 9px 2px 0;
  color: rgba(255, 255, 255, .46);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.club-floorplan-section {
  overflow: hidden;
}

.floorplan-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.floorplan-section-head h2 {
  margin: 0;
}

.floorplan-section-head span {
  padding: 7px 10px;
  border: 1px solid rgba(215, 255, 40, .28);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(215, 255, 40, .08);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.club-floorplan-preview {
  display: grid;
  gap: 12px;
}

.club-floorplan-empty {
  min-height: 220px;
  align-content: center;
  justify-items: start;
  padding: clamp(18px, 3vw, 28px);
  border: 1px dashed rgba(215, 255, 40, .28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(215, 255, 40, .06), transparent 42%),
    rgba(255, 255, 255, .035);
}

.club-floorplan-empty strong {
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
}

.club-floorplan-empty p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  line-height: 1.55;
}

.club-floorplan-empty .button {
  min-height: 38px;
  padding: 9px 14px;
}

.real-layout-image-frame {
  overflow: auto;
  max-height: min(76vh, 760px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(215, 255, 40, .05), transparent 38%),
    rgba(255, 255, 255, .035);
  aspect-ratio: var(--real-layout-ratio);
}

.real-layout-image {
  display: block;
  width: 100%;
  min-width: min(680px, 100%);
  height: auto;
}

.live-layout-note a {
  color: var(--accent);
}

.floorplan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.floorplan-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .055);
  font-size: 11px;
  font-weight: 900;
}

.floorplan-legend i {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: #3b82f6;
}

.floorplan-legend .legend-vip { background: #eab308; }
.floorplan-legend .legend-ps { background: #ec4899; }
.floorplan-legend .legend-service { background: #82d2ff; }

.club-floorplan-preview .view-layout-map {
  max-height: none;
}

.club-floorplan-preview .view-seat {
  cursor: default;
}

.club-floorplan-preview .view-seat:hover,
.club-floorplan-preview .live-seat.view-seat:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--element-color, #3b82f6) 74%, white 12%);
}

.club-floorplan-preview .floor-seat.view-seat:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
}

@media (max-width: 760px) {
  .pc-map.pc-floorplan {
    grid-template-columns: repeat(var(--plan-cols), minmax(42px, 1fr)) !important;
    grid-template-rows: repeat(var(--plan-rows), 48px) !important;
  }

  .pc-map.live-layout-map {
    height: min(360px, 46vh);
    padding: 8px;
  }

  .live-layout-stage { transform: scale(calc(var(--layout-scale, 1) * .82)); }
}

/* Strong animated PC-club graffiti background only. */
body {
  min-height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .86) 50%, rgba(0, 0, 0, .95)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .84) 56%, rgba(0, 0, 0, .94)),
    radial-gradient(circle at 24% 22%, rgba(34, 255, 136, .22), transparent 27rem),
    radial-gradient(circle at 72% 55%, rgba(255, 0, 170, .18), transparent 31rem),
    radial-gradient(circle at 84% 18%, rgba(255, 235, 59, .16), transparent 24rem),
    linear-gradient(180deg, transparent 62%, rgba(34, 255, 136, .08) 84%, rgba(0, 0, 0, .38)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
}

.live-wall-bg::before {
  content: "CLUBCORE   24/7   FRAG" !important;
  position: absolute !important;
  inset: -10% !important;
  display: block !important;
  opacity: .24 !important;
  color: rgba(34, 255, 136, .16) !important;
  font-family: "Russo One", Inter, Arial, sans-serif !important;
  font-size: clamp(54px, 11vw, 170px) !important;
  font-weight: 900 !important;
  line-height: .85 !important;
  letter-spacing: .08em !important;
  word-spacing: .2em !important;
  text-transform: uppercase !important;
  text-shadow:
    5px 5px 0 rgba(255, 0, 170, .13),
    -4px 3px 0 rgba(255, 235, 59, .12) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 255, 136, .52) 0, transparent 29%),
    radial-gradient(circle at 70% 60%, rgba(255, 0, 170, .42) 0, transparent 36%),
    radial-gradient(circle at 82% 18%, rgba(255, 235, 59, .32) 0, transparent 27%),
    linear-gradient(115deg, transparent 0 20%, rgba(34, 255, 136, .18) 20.2% 21%, transparent 21.3% 100%),
    linear-gradient(74deg, transparent 0 66%, rgba(255, 235, 59, .14) 66.2% 67%, transparent 67.3% 100%) !important;
  background-blend-mode: screen;
  animation: pcGraffitiNeonStrong 6s ease-in-out infinite alternate !important;
  transform: rotate(-7deg) translateZ(0);
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .3 !important;
  background:
    linear-gradient(180deg, rgba(34, 255, 136, .3), rgba(34, 255, 136, 0)) 15vw -18vh / 9px 40vh no-repeat,
    linear-gradient(180deg, rgba(255, 235, 59, .25), rgba(255, 235, 59, 0)) 70vw -26vh / 7px 46vh no-repeat,
    linear-gradient(180deg, rgba(255, 0, 170, .28), rgba(255, 0, 170, 0)) 84vw -12vh / 10px 36vh no-repeat,
    radial-gradient(ellipse at 50% 96%, rgba(34, 255, 136, .18), transparent 34rem),
    radial-gradient(circle, rgba(255, 255, 255, .18) 0 1px, transparent 1.35px) 0 0 / 38px 38px,
    radial-gradient(circle, rgba(34, 255, 136, .17) 0 1px, transparent 1.35px) 21px 17px / 62px 62px,
    radial-gradient(circle, rgba(255, 235, 59, .15) 0 1px, transparent 1.35px) 9px 31px / 76px 76px,
    repeating-linear-gradient(100deg, transparent 0 92px, rgba(255,255,255,.06) 92px 93px, transparent 93px 128px) !important;
  animation:
    pcGraffitiDripsStrong 18s linear infinite,
    pcGraffitiSprayStrong 26s linear infinite,
    pcGraffitiRain 1.8s linear infinite !important;
  transform: translateZ(0);
}

body::before {
  opacity: .19 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.017) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 18% 32%, rgba(34,255,136,.13), transparent 16rem),
    radial-gradient(circle at 78% 68%, rgba(255,0,170,.11), transparent 19rem),
    radial-gradient(circle at 60% 94%, rgba(255,235,59,.09), transparent 22rem) !important;
  animation: pcGraffitiGlitchStrong 8s steps(2, end) infinite !important;
}

body::after {
  opacity: .22 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1.35px) 0 0 / 36px 36px,
    radial-gradient(circle, rgba(34,255,136,.14) 0 1px, transparent 1.35px) 18px 14px / 58px 58px,
    radial-gradient(circle, rgba(255,0,170,.13) 0 1px, transparent 1.35px) 8px 32px / 72px 72px,
    linear-gradient(180deg, transparent 0 66%, rgba(255,255,255,.045) 74%, rgba(34,255,136,.075) 100%) !important;
  animation: pcGraffitiParticlesStrong 24s linear infinite, pcGraffitiFog 11s ease-in-out infinite alternate !important;
}

main {
  background:
    linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.24) 34rem, rgba(0,0,0,.58)) !important;
}

@keyframes pcGraffitiNeonStrong {
  0% {
    opacity: .16;
    transform: rotate(-7deg) translate3d(-1.5%, -.8%, 0) scale(1);
  }
  44% {
    opacity: .36;
  }
  100% {
    opacity: .24;
    transform: rotate(-7deg) translate3d(1.3%, .9%, 0) scale(1.035);
  }
}

@keyframes pcGraffitiDripsStrong {
  0% {
    background-position:
      15vw -34vh,
      70vw -46vh,
      84vw -28vh,
      center,
      0 0,
      21px 17px,
      9px 31px,
      0 0;
  }
  100% {
    background-position:
      15vw 122vh,
      70vw 132vh,
      84vw 116vh,
      center,
      0 0,
      21px 17px,
      9px 31px,
      0 120px;
  }
}

@keyframes pcGraffitiSprayStrong {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-38px, 24px, 0);
  }
}

@keyframes pcGraffitiRain {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes pcGraffitiGlitchStrong {
  0%, 90%, 100% {
    transform: translate3d(0, 0, 0);
  }
  92% {
    transform: translate3d(9px, -2px, 0);
  }
  94% {
    transform: translate3d(-6px, 2px, 0);
  }
  96% {
    transform: translate3d(4px, 1px, 0);
  }
}

@keyframes pcGraffitiParticlesStrong {
  0% {
    background-position: 0 0, 18px 14px, 8px 32px, 0 0;
  }
  100% {
    background-position: 150px -96px, -82px 108px, 98px 72px, 0 0;
  }
}

@keyframes pcGraffitiFog {
  0% {
    opacity: .16;
  }
  100% {
    opacity: .24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after,
  body::before,
  body::after {
    animation: none !important;
  }
}

/* Full animated graffiti background wrapper: fixed, layered, depth overlays. */
body {
  min-height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .84) 48%, rgba(0, 0, 0, .93)),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .82) 54%, rgba(0, 0, 0, .94)),
    radial-gradient(circle at 30% 20%, rgba(34, 255, 136, .2), transparent 28rem),
    radial-gradient(circle at 70% 60%, rgba(255, 0, 170, .15), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(255, 235, 59, .14), transparent 24rem),
    linear-gradient(135deg, rgba(8, 10, 14, .94), rgba(12, 14, 18, .98)) !important;
}

.live-wall-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: -10% !important;
  opacity: .25 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 255, 136, .55) 0, transparent 31%),
    radial-gradient(circle at 70% 60%, rgba(255, 0, 170, .42) 0, transparent 37%),
    radial-gradient(circle at 82% 18%, rgba(255, 235, 59, .3) 0, transparent 29%),
    linear-gradient(115deg, transparent 0 22%, rgba(34, 255, 136, .16) 22.2% 22.8%, transparent 23% 100%),
    linear-gradient(74deg, transparent 0 68%, rgba(255, 235, 59, .12) 68.2% 68.9%, transparent 69.2% 100%) !important;
  animation: graffitiNeonBreath 7s ease-in-out infinite alternate !important;
  transform: translateZ(0);
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .24 !important;
  background:
    linear-gradient(180deg, rgba(34, 255, 136, .26), rgba(34, 255, 136, 0)) 16vw -16vh / 8px 36vh no-repeat,
    linear-gradient(180deg, rgba(255, 235, 59, .22), rgba(255, 235, 59, 0)) 72vw -24vh / 7px 42vh no-repeat,
    linear-gradient(180deg, rgba(255, 0, 170, .22), rgba(255, 0, 170, 0)) 84vw -10vh / 10px 32vh no-repeat,
    radial-gradient(circle, rgba(255, 255, 255, .18) 0 1px, transparent 1.4px) 0 0 / 42px 42px,
    radial-gradient(circle, rgba(34, 255, 136, .16) 0 1px, transparent 1.4px) 21px 17px / 64px 64px,
    radial-gradient(circle, rgba(255, 235, 59, .14) 0 1px, transparent 1.4px) 9px 31px / 78px 78px,
    linear-gradient(108deg, transparent 0 49%, rgba(255, 255, 255, .08) 49.2% 49.7%, transparent 50% 100%) !important;
  animation: graffitiPaintDrips 20s linear infinite, graffitiSprayDriftDeep 30s linear infinite !important;
  transform: translateZ(0);
}

body::before {
  opacity: .18 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.017) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 22% 28%, rgba(34,255,136,.12), transparent 16rem),
    radial-gradient(circle at 78% 68%, rgba(255,0,170,.1), transparent 18rem) !important;
  animation: graffitiWallGlitch 10s steps(2, end) infinite !important;
}

body::after {
  opacity: .2 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1.35px) 0 0 / 36px 36px,
    radial-gradient(circle, rgba(34,255,136,.14) 0 1px, transparent 1.35px) 18px 14px / 58px 58px,
    radial-gradient(circle, rgba(255,0,170,.12) 0 1px, transparent 1.35px) 8px 32px / 72px 72px,
    linear-gradient(116deg, transparent 0 18%, rgba(255,235,59,.12) 18.2% 18.8%, transparent 19% 100%) !important;
  animation: graffitiParticleFloatDeep 26s linear infinite !important;
}

main {
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.22) 34rem, rgba(0,0,0,.56)) !important;
}

@keyframes graffitiNeonBreath {
  0% {
    opacity: .15;
    transform: translate3d(-1.4%, -.9%, 0) scale(1);
  }
  50% {
    opacity: .32;
  }
  100% {
    opacity: .22;
    transform: translate3d(1.3%, .9%, 0) scale(1.03);
  }
}

@keyframes graffitiPaintDrips {
  0% {
    background-position:
      16vw -34vh,
      72vw -44vh,
      84vw -26vh,
      0 0,
      21px 17px,
      9px 31px,
      0 0;
  }
  100% {
    background-position:
      16vw 122vh,
      72vw 130vh,
      84vw 118vh,
      0 0,
      21px 17px,
      9px 31px,
      0 0;
  }
}

@keyframes graffitiSprayDriftDeep {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-34px, 22px, 0);
  }
}

@keyframes graffitiWallGlitch {
  0%, 91%, 100% {
    transform: translate3d(0, 0, 0);
  }
  93% {
    transform: translate3d(7px, -2px, 0);
  }
  95% {
    transform: translate3d(-5px, 2px, 0);
  }
  97% {
    transform: translate3d(3px, 1px, 0);
  }
}

@keyframes graffitiParticleFloatDeep {
  0% {
    background-position: 0 0, 18px 14px, 8px 32px, 0 0;
  }
  100% {
    background-position: 140px -90px, -76px 104px, 92px 68px, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after,
  body::before,
  body::after {
    animation: none !important;
  }
}
/* EOF cyber background marker */
/* Cyber-graffiti final background override: keep this block last. */
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 14%, rgba(40, 255, 156, .13), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(255, 45, 204, .12), transparent 28rem),
    radial-gradient(circle at 62% 76%, rgba(38, 214, 255, .11), transparent 32rem),
    linear-gradient(180deg, rgba(3, 5, 7, .96), rgba(9, 10, 13, .94) 42%, rgba(4, 5, 7, .98)),
    repeating-linear-gradient(90deg, rgba(210, 236, 238, .035) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(210, 236, 238, .025) 0 1px, transparent 1px 74px) !important;
  background-attachment: fixed !important;
  background-size: cover, cover, cover, cover, auto, auto !important;
  background-position: center !important;
}

.live-wall-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(3, 4, 6, .42), rgba(3, 4, 6, .78)),
    radial-gradient(ellipse at 24% 18%, rgba(37, 255, 141, .2), transparent 32rem),
    radial-gradient(ellipse at 78% 24%, rgba(255, 38, 196, .16), transparent 28rem),
    radial-gradient(ellipse at 52% 72%, rgba(34, 211, 238, .14), transparent 31rem),
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(246, 248, 244, .034) 39px 40px, transparent 41px 118px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 9px) !important;
}

.live-wall-bg::before {
  content: "WASD     HEADSHOT     GG\A     CLUBCORE     24/7     FRAG\A ClubCore     WASD     GG";
  position: absolute !important;
  inset: -14% -10% !important;
  display: grid;
  place-items: center;
  white-space: pre;
  text-align: center;
  font-family: "Russo One", Inter, Arial, sans-serif;
  font-size: clamp(44px, 8vw, 148px);
  line-height: .86;
  letter-spacing: .08em;
  color: rgba(219, 255, 245, .05);
  -webkit-text-stroke: 1px rgba(37, 255, 141, .36);
  text-shadow:
    0 0 18px rgba(37, 255, 141, .24),
    18px -10px 0 rgba(255, 38, 196, .075),
    -16px 12px 0 rgba(34, 211, 238, .085);
  opacity: .54 !important;
  transform: translate3d(0, 0, 0) rotate(-7deg);
  mix-blend-mode: screen;
  animation:
    cyberGraffitiFloat 18s cubic-bezier(.23, 1, .32, 1) infinite alternate,
    cyberGraffitiGlitch 7.2s steps(2, end) infinite !important;
}

.live-wall-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .72 !important;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(37, 255, 141, .42) 8.2% 8.55%, transparent 8.8% 100%) 0 18% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0 64%, rgba(255, 38, 196, .38) 64.2% 64.55%, transparent 64.8% 100%) 0 43% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 28%, rgba(34, 211, 238, .36) 28.2% 28.55%, transparent 28.8% 100%) 0 71% / 100% 2px no-repeat,
    radial-gradient(circle, rgba(37, 255, 141, .36) 0 1px, transparent 1.4px) 0 0 / 54px 54px,
    radial-gradient(circle, rgba(255, 38, 196, .26) 0 1px, transparent 1.4px) 23px 19px / 88px 88px,
    radial-gradient(circle, rgba(34, 211, 238, .24) 0 1px, transparent 1.4px) 12px 38px / 112px 112px;
  filter: saturate(1.12);
  transform: translate3d(0, 0, 0);
  animation:
    cyberGraffitiLines 9s cubic-bezier(.77, 0, .175, 1) infinite alternate,
    cyberGraffitiParticles 28s linear infinite !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .27 !important;
  background:
    linear-gradient(90deg, rgba(37, 255, 141, .13) 1px, transparent 1px) 0 0 / 82px 82px,
    linear-gradient(0deg, rgba(34, 211, 238, .1) 1px, transparent 1px) 0 0 / 82px 82px,
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255, 255, 255, .045) 8px, transparent 10px),
    radial-gradient(circle at 14% 82%, rgba(255, 38, 196, .14), transparent 22rem);
  transform: translate3d(0, 0, 0);
  animation: cyberMatrixDrift 22s linear infinite !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .2 !important;
  background:
    linear-gradient(115deg, transparent 0 16%, rgba(37, 255, 141, .12) 16.1% 16.5%, transparent 16.8% 100%),
    linear-gradient(64deg, transparent 0 72%, rgba(255, 38, 196, .11) 72.1% 72.45%, transparent 72.8% 100%),
    radial-gradient(circle, rgba(240, 255, 250, .18) 0 1px, transparent 1.3px) 0 0 / 46px 46px;
  animation: cyberNoiseGlitch 8s steps(2, end) infinite !important;
}

main {
  background:
    linear-gradient(180deg, rgba(3, 4, 6, .34), rgba(3, 4, 6, .18) 34rem, rgba(3, 4, 6, .62)) !important;
}

@keyframes cyberGraffitiFloat {
  0% {
    opacity: .42;
    transform: translate3d(-1.2%, -.8%, 0) rotate(-7deg) scale(1);
  }
  55% {
    opacity: .62;
  }
  100% {
    opacity: .5;
    transform: translate3d(1.1%, .7%, 0) rotate(-5.5deg) scale(1.035);
  }
}

@keyframes cyberGraffitiGlitch {
  0%, 88%, 100% {
    filter: hue-rotate(0deg);
    text-shadow:
      0 0 18px rgba(37, 255, 141, .24),
      18px -10px 0 rgba(255, 38, 196, .075),
      -16px 12px 0 rgba(34, 211, 238, .085);
  }
  90% {
    filter: hue-rotate(18deg);
    text-shadow:
      8px 0 0 rgba(37, 255, 141, .22),
      -10px 0 0 rgba(255, 38, 196, .16),
      0 0 24px rgba(34, 211, 238, .18);
  }
  92% {
    filter: hue-rotate(-14deg);
  }
}

@keyframes cyberGraffitiLines {
  0% {
    opacity: .45;
    transform: translate3d(0, 0, 0);
  }
  48% {
    opacity: .82;
  }
  100% {
    opacity: .58;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes cyberGraffitiParticles {
  0% {
    background-position: 0 18%, 0 43%, 0 71%, 0 0, 23px 19px, 12px 38px;
  }
  100% {
    background-position: 0 18%, 0 43%, 0 71%, 130px -88px, -94px 118px, 118px 74px;
  }
}

@keyframes cyberMatrixDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, center;
  }
  100% {
    background-position: 82px 82px, 82px 82px, 0 120px, center;
  }
}

@keyframes cyberNoiseGlitch {
  0%, 91%, 100% {
    transform: translate3d(0, 0, 0);
  }
  93% {
    transform: translate3d(7px, -2px, 0);
  }
  95% {
    transform: translate3d(-5px, 1px, 0);
  }
  97% {
    transform: translate3d(3px, 2px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-wall-bg::before,
  .live-wall-bg::after,
  body::before,
  body::after {
    animation: none !important;
  }
}