:root {
  --paper: #0b1216;
  --surface: #121e23;
  --surface-raised: #18282e;
  --ink: #f0f6f5;
  --muted: #aabdc2;
  --line: #2b4248;
  --accent: #62eac0;
  --accent-soft: #9bf2d6;
  --indigo: var(--accent);
  --lavender: #142329;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background: var(--paper);
}

:where(main[id], main [id]) {
  scroll-margin-top: var(--showroom-anchor-offset, 16px);
}

h1, h2, h3 {
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.label {
  color: var(--accent-soft);
}

:where(a, button, input, select, summary):focus-visible {
  outline-color: var(--accent-soft);
}

.skip {
  background: var(--accent-soft);
  color: #10201b;
}

.app-shell {
  display: block;
  width: 100%;
  background: transparent;
}

.wrap {
  width: min(1240px, calc(100% - clamp(36px, 8vw, 128px)));
}

.site-bar {
  display: none;
  z-index: 3;
  height: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #0e171bf5;
}

.site-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(1376px, calc(100% - 54px));
  min-height: 76px;
  margin-inline: auto;
}

.site-bar nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
}

.site-bar .brand {
  padding: 0;
}

.site-bar nav a,
.site-bar nav a.nav-sub {
  margin: 0;
  padding: 8px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}

.site-bar nav a.nav-sub::before,
.site-bar nav a::after {
  content: none;
}

.site-bar nav a:is(:hover, [aria-current="page"], [data-section-active]) {
  border-color: var(--line);
  background: #18312e;
  box-shadow: none;
  color: var(--accent-soft);
}

.brand strong {
  font: 850 22px/1 system-ui, sans-serif;
  letter-spacing: -.055em;
}

.brand > span {
  color: var(--accent-soft);
  font-size: 13px;
}

.show-top {
  position: relative;
  z-index: 2;
  gap: 8px;
  padding-inline: 14px;
  border-color: var(--line);
  background: #0e171b;
}

.show-top .mobile-brand,
.show-top .mobile-nav {
  display: block;
}

.show-top .mobile-brand {
  display: inline-flex;
  gap: 5px;
}

.show-top .brand strong {
  font-size: 19px;
}

.show-top .brand > span {
  font-size: 11px;
}

.mobile-nav nav {
  position: absolute;
  top: calc(100% - 3px);
  right: 14px;
  left: 14px;
  max-height: calc(100dvh - 82px);
  padding: 10px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111e24;
  box-shadow: 0 18px 36px #05090bba;
}

.mobile-nav nav a,
.mobile-nav nav a.nav-sub {
  background: transparent;
  color: var(--muted);
}

.mobile-nav nav a.nav-sub::before,
.mobile-nav nav a::after {
  color: var(--accent-soft);
  border-color: currentColor;
}

.mobile-nav nav a:is(:hover, [aria-current="page"], [data-section-active]),
.mobile-nav:is([open], :hover) summary {
  border-color: var(--line);
  background: #18312e;
  box-shadow: none;
  color: var(--accent-soft);
}

.top-cta,
.button,
.provider-filter-options button[aria-pressed="true"],
.football-periods button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #10251f;
}

.top-cta {
  padding: 8px 14px;
  border-radius: 999px;
}

.top-cta:hover,
.show-top .top-cta:hover,
.button:hover {
  background: #a0f4d9;
}

.button {
  border-radius: 999px;
  padding-inline: 18px;
}

.button.secondary {
  border-color: #42605e;
  background: #132328;
  color: var(--ink);
}

.button.secondary:hover {
  background: #1b3335;
  border-color: var(--accent);
}

.show-hero {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 76px);
  margin-top: clamp(22px, 4vw, 52px);
  padding: clamp(28px, 4vw, 64px);
  border-color: #325653;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 80% 42%, #153b34cf, transparent 69%),
    linear-gradient(114deg, #101b21, #102027 72%, #10191e);
}

.show-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(#91d1bd12 1px, transparent 1px),
    linear-gradient(90deg, #91d1bd12 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent 16%, #000 64%);
  content: "";
  pointer-events: none;
}

.show-hero h1 {
  font-size: clamp(37px, 4.55vw, 68px);
  font-weight: 790;
  line-height: 1.06;
}

.show-hero h1 em {
  color: var(--accent);
  font-style: normal;
}

.show-hero .hero-kicker {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-soft);
  text-transform: uppercase;
}

.show-hero .lead {
  max-width: 46ch;
  margin-block: 20px 25px;
  color: #c3d2d4;
}

#sportsbook-api .actions {
  align-items: center;
}

.hero-market {
  margin: 22px 0 0;
  padding-left: 12px;
  border-left: 1px solid var(--accent);
  color: var(--muted);
  font-size: 14px;
}

.hero-screen {
  --glow: #62eac0;
  width: 100%;
  padding: 0;
  border-color: #3c6b62;
  border-radius: 13px;
  background: #0d171d;
  box-shadow: 0 19px 60px #05090a80;
}

.hero-screen:hover {
  border-color: var(--accent);
}

.hero-screen .screen-chrome,
.hero-screen .screen-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 13px;
  color: var(--accent-soft);
}

.screen-chrome i {
  background: var(--accent);
  box-shadow: 0 0 12px #62eac08c;
}

.screen-chrome small {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.hero-screen img {
  max-height: 394px;
  border-radius: 0;
  background: #0b1014;
}

.hero-screen .screen-caption {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: #dce8e7;
}

.screen-caption b {
  color: var(--accent);
}

.shelf {
  padding-top: clamp(26px, 4vw, 50px);
}

.shelf-head h2::before {
  background: var(--accent);
  box-shadow: none;
}

.show-card,
.show-end,
.showroom-explore a,
.tile,
.plan,
form,
.fee-table,
.board,
.board.casino,
.tile .product-shot.prediction,
.provider-card,
.provider-evolution.provider-card,
.provider-pragmatic-play.provider-card,
.game-preview-link,
.football-board,
.football-guide-grid article,
.page-faq-list details {
  border-color: var(--line);
  background: var(--surface);
}

.consult-topic:not([hidden]) {
  display: grid;
  gap: 12px;
  min-inline-size: 0;
  margin: 0;
  padding: 12px clamp(12px, 2vw, 18px) 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
}

.consult-topic legend {
  max-inline-size: 100%;
  padding-inline: 5px;
  color: var(--accent-soft);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.consult-topic :is(input, select) {
  min-inline-size: 0;
  min-block-size: 44px;
  border-color: var(--line);
  border-radius: 7px;
}

.show-card {
  --glow: #62eac0;
}

.card-media {
  height: clamp(168px, 22vw, 262px);
  background: #0e171c;
}

.card-copy {
  padding: 18px 20px;
  border-color: var(--line);
}

.card-copy h3 {
  padding-right: 25px;
}

.compact .card-copy h3 {
  padding-right: 0;
}

.card-copy small,
.showroom-explore a > span:last-child,
.provider-kicker,
.provider-type,
.game-preview-action,
.faq-toggle {
  color: var(--accent-soft);
}

.card-copy p,
.board-head span {
  color: var(--muted);
}

.showroom-explore a:hover,
.game-preview-link:hover,
.page-faq-list details:hover {
  border-color: #538277;
}

.plan.featured,
.fee-table thead,
.page-faq-list details[open],
.football-controls,
.football-count,
.provider-search-empty {
  border-color: #38665b;
  background: var(--surface-raised);
}

.provider-search-field input[type="search"],
.provider-filter-options button[aria-pressed="false"],
.football-periods button[aria-pressed="false"],
.football-select select {
  border-color: var(--line);
  background: var(--surface);
}

.provider-search-field input::placeholder {
  color: var(--muted);
}

.provider-search-field svg,
.provider-search-clear,
.provider-sources a,
.buyer-guide a,
.page-faq-list a {
  color: var(--accent-soft);
}

.provider-search-clear:hover {
  background: var(--surface-raised);
}

.items article,
.guide-grid article {
  border-top-color: #478675;
}

.football-hero {
  border-color: #325653;
  background: radial-gradient(ellipse at 91% 20%, #1d433b, transparent 60%),
    linear-gradient(118deg, #111d23, #17282e);
}

.football-hero-image,
.football-example,
.football-fixture,
.shot-dialog {
  border-color: var(--line);
}

.football-example,
.shot-dialog {
  background: var(--surface);
}

.shot-dialog__head button,
.shot-zoom-icon,
.game-preview-icon {
  border-color: #426b63;
  background: #142724;
}

.shot-dialog__head button:hover {
  background: #244439;
}

.footer {
  color: var(--muted);
}

.table-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
}

.table-layout .fee-table,
.fee-table.payment-methods {
  max-width: none;
}

.table-note {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.table-note .label { margin-bottom: 8px; }
.table-note h3 { font-size: 1.2rem; }
.table-note p:last-child { margin-bottom: 0; }
.table-note .table-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.table-rate strong { color: var(--accent); font-size: 2rem; line-height: 1; }
.table-rate span { color: var(--muted); font-size: .9rem; }

.market-table .pending {
  color: #f4d6a5;
  background: #2e261b;
  border-color: #705938;
}

@media (min-width: 900px) {
  .table-layout { grid-template-columns: minmax(0, 1fr) minmax(245px, 27%); }
  .table-note { margin-top: 3.1rem; }
}

@media (min-width: 1180px) {
  :root { --showroom-anchor-offset: 96px; }
  .site-bar { display: block; }
  .show-top { display: none; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 28px); }
  .show-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: clamp(20px, 5vw, 36px);
  }
  .show-hero h1 { font-size: clamp(35px, 8.3vw, 55px); }
  .show-hero .lead { margin-block: 15px 18px; }
  .hero-market { margin-top: 16px; }
  .hero-screen img { max-height: 290px; }
  .card-media { height: clamp(154px, 46vw, 260px); }
}

@media (max-width: 360px) {
  .show-top { gap: 6px; padding-inline: 10px; }
  .show-top .brand strong { font-size: 17px; }
  .top-cta { padding-inline: 8px; font-size: 13px; }
  .show-top .mobile-nav summary { padding-inline: 6px; }
}

.hero-showcase { min-width: 0; }

.hero-screen-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.35;
  max-height: 394px;
  background: #0b1014;
}

.hero-screen-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
}

.hero-screen-stage img[data-active] {
  opacity: 1;
  visibility: visible;
}

.hero-screen :is([data-showcase-name], [data-showcase-caption]) {
  padding: 0;
  color: inherit;
  font: inherit;
}

.hero-showcase-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.hero-showcase-controls[hidden], .motion-switch[hidden] { display: none; }
.hero-showcase-options { display: flex; flex-wrap: wrap; gap: 6px; }

.hero-showcase-options button, .motion-switch {
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #102127;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.hero-showcase-options button[aria-pressed="true"] {
  border-color: #5a9e8b;
  background: #1a3734;
  color: var(--accent-soft);
}

.hero-showcase-options button:hover, .motion-switch:hover {
  border-color: var(--accent);
  color: var(--accent-soft);
}

.football-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #3c625d;
  border-radius: 13px;
  box-shadow: 0 12px 35px #07101391;
  background: #101e23;
}

.football-visual .football-hero-image {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.football-visual .motion-switch {
  position: absolute;
  right: 9px;
  bottom: 9px;
  background: #0b161ce8;
  color: #e8f4f2;
}

.screen-chrome i { position: relative; }

html[data-motion="on"] .screen-chrome i::after {
  position: absolute;
  inset: -4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  content: "";
  animation: showroom-beacon 2.5s ease-out infinite;
}

html[data-motion="on"] .hero-screen-stage img[data-active] {
  animation: showroom-frame 460ms ease-out both;
}

html[data-motion="on"] .live-card:not(:hover) .casino-preview-motion {
  animation: casino-preview-pan 3.5s ease-in-out infinite alternate;
}

@keyframes casino-preview-pan {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

html[data-motion="on"] .show-hero::before {
  animation: showroom-grid-drift 22s linear infinite;
}

html[data-motion="on"] .motion-arrival {
  animation: showroom-arrival 550ms ease-out both;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

html[data-motion="off"] :is(.show-card, .hero-screen, .shot-link, .game-preview-link):hover,
html[data-motion="off"] :is(.show-card, .hero-screen, .shot-link, .game-preview-link):hover img {
  transform: none;
}

@keyframes showroom-beacon {
  from { transform: scale(.7); opacity: .9; }
  75%, to { transform: scale(1.9); opacity: 0; }
}

@keyframes showroom-frame {
  from { opacity: .22; }
  to { opacity: 1; }
}

@keyframes showroom-grid-drift {
  to { background-position: 42px 42px; }
}

@keyframes showroom-arrival {
  from { opacity: .72; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .hero-screen-stage { max-height: 290px; }
  .hero-screen-stage img { max-height: none; }
}