@charset "utf-8";

@font-face { font-family: "Whiskey Girls Semi-Italic"; src: local("Whiskey Girls Semi-Italic"); font-weight: 400; font-style: italic; }

*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }

:root { --color1: #FE7C00; --color2: #FE5201; --gradient-orange-dot: linear-gradient(180deg,rgba(255,153,0,1) 0%,rgba(255,42,0,1) 100%); --orange: #FE7C00; --orange2: #FE5201; --white: #FFFFFF; --grey1: #FFFFFF; --grey2: #F2F2F2; --grey3: #DBDBDB; --grey4: #C4C4C4; --grey6: #969696; --grey8: #696969; --grey10: #3B3B3B; --grey11: #242424; --surface: rgba(23,24,34,0.6); --card-bg: rgba(47,47,48,0.5); --bg: #0f0f13; --gradient-orange: linear-gradient(180deg,#FF9900 0%,#FF2A00 100%); --gradient-black: linear-gradient(180deg,#181819 0%,#2B2B2E 100%); --border-orange: #FE7C00; }

body { font-family: Roboto, sans-serif; background: var(--bg); color: var(--white); min-height: 100vh; }

.page-wrapper { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 99999; overflow: hidden auto; background: var(--bg); display: flex; flex-direction: column; box-sizing: border-box; scroll-behavior: smooth; }

.sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 32px; align-self: flex-start; height: fit-content; }

.page-wrapper-inner { max-width: 1148px; margin: 0px auto; width: 100%; display: flex; flex-direction: column; gap: 44px; padding: 32px 16px 60px; }

.breadcrumb { display: flex; align-items: center; gap: 6px; }

.breadcrumb .crumb-label { font-size: 16px; font-weight: 400; color: var(--grey3); }

.breadcrumb .arrow { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }

.breadcrumb .arrow svg { width: 10px; height: 10px; }

.breadcrumb .crumb-current { font-size: 16px; font-weight: 500; color: var(--grey2); }

.hero-banner { width: 100%; aspect-ratio: 1148 / 229; min-height: 180px; border-radius: 12px; overflow: hidden; background: url("/assets/bbbe5dd94026c5f9ce73.png") center center / cover no-repeat; position: relative; display: flex; align-items: center; justify-content: flex-start; padding: 0px 48px; }

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

.content-layout { display: flex; gap: 36px; align-items: flex-start; }

.sidebar-nav { display: flex; flex-direction: column; overflow: hidden; }

.sidebar-nav a { display: flex; align-items: center; height: 48px; padding: 0px 12px; font-size: 16px; font-weight: 500; color: var(--grey3); text-decoration: none; background: var(--surface); transition: color 0.2s, background 0.2s; }

.sidebar-nav a.active { color: rgb(255, 255, 255); border-right-width: medium; border-right-style: none; border-right-color: currentcolor; background: rgba(23, 24, 34, 0.6); box-shadow: none; }

.sidebar-nav a:hover:not(.active) { color: var(--orange); background: rgba(23, 24, 34, 0.6); box-shadow: rgba(254, 82, 1, 0.08) 0px 4px 100px 0px inset; }

.main-content { flex: 1 1 0%; display: flex; flex-direction: column; gap: 60px; }

.section-title { color: rgb(255, 255, 255); line-height: normal; margin-bottom: 16px; text-transform: uppercase; font-size: 18px !important; font-weight: 700 !important; }

.about-section { display: flex; flex-direction: column; gap: 24px; }

.hero-heading { font-size: 32px; font-weight: 700; color: rgb(255, 255, 255); line-height: normal; }

.hero-heading span { color: var(--white); }

.about-block { display: flex; flex-direction: column; gap: 16px; }

.about-subtitle { font-size: 18px; font-weight: 700; color: rgb(255, 255, 255); line-height: normal; text-transform: uppercase; }

.about-desc { font-size: 16px; font-weight: 400; color: rgb(219, 219, 219); line-height: 22px; }

.stats-row { display: flex; gap: 12px; flex-wrap: wrap; }

.stat-card { background: var(--card-bg); border: 1px solid var(--grey11); border-radius: 8px; padding: 10px 16px; width: 201px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: rgba(254, 82, 1, 0.04) 0px 4px 100px 0px inset; }

.stat-label { font-size: 12px; font-weight: 400; color: var(--grey6); text-align: center; text-transform: uppercase; }

.stat-value { font-size: 24px; font-weight: 700; color: var(--orange); text-align: center; }

.stat-sub { font-size: 12px; font-weight: 400; color: var(--grey6); text-align: center; }

.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.section-header-label { font-size: 14px; font-weight: 700; color: rgb(254, 124, 0); white-space: nowrap; text-transform: uppercase; }

.section-divider { flex: 1 1 0%; height: 1px; background: rgba(59, 59, 59, 0.4); }

.bullet-list { display: flex; flex-direction: column; gap: 8px; }

.bullet-item { display: flex; align-items: flex-start; gap: 8px; }

.bullet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-orange); flex-shrink: 0; margin-top: 8px; }

.bullet-text { font-size: 16px; font-weight: 400; color: rgb(219, 219, 219); line-height: 22px; }

.how-card { background: var(--card-bg); border: 0.5px solid var(--border-orange); border-radius: 12px; padding: 24px 20px; box-shadow: rgba(254, 82, 1, 0.04) 0px 4px 200px 0px inset; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.steps-visual { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 473px; flex-shrink: 0; }

.steps-indicators { display: flex; justify-content: space-between; align-items: center; width: 412px; }

.step-group { display: flex; align-items: center; gap: 20px; }

.step-circle-active, .step-circle-inactive { width: 32px; height: 32px; border-radius: 20px; background: var(--gradient-black); border: 1px solid var(--grey8); display: flex; align-items: center; justify-content: center; font-family: "Whiskey Girls Semi-Italic", Georgia, serif; font-style: italic; font-size: 18px; color: rgb(255, 255, 255); font-weight: 400; line-height: 1; }

.step-circle-active span, .step-circle-inactive span { display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font-family: "Whiskey Girls Semi-Italic", Georgia, serif; font-size: 18px; font-style: italic; font-weight: 400; width: 13px; height: 18px; flex-shrink: 0; }

.step-connector { width: 120px; height: 1px; background: var(--grey10); }

.steps-labels { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }

.step-info { display: flex; flex-direction: column; gap: 6px; width: 90px; }

.step-info.center-step { align-items: center; }

.step-title { font-size: 14px; font-weight: 600; color: var(--white); text-align: center; line-height: normal; }

.step-subtitle { font-size: 10px; font-weight: 500; color: var(--grey6); text-align: center; line-height: normal; text-wrap: wrap; }

.cta-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.cta-btn { display: inline-flex; width: 165px; height: 44px; padding: 12px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 24px; background: linear-gradient(rgb(255, 153, 0) 0%, rgb(255, 42, 0) 100%); font-size: 16px; font-weight: 500; color: var(--white); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; transition: background 0.2s; }

.cta-btn:hover { border-radius: var(--24, 24px); background: var(--Gradient, linear-gradient(180deg, #F90 0%, #FF2A00 100%)); box-shadow: rgba(0, 0, 0, 0.32) 0px 4px 24px 0px, rgba(254, 82, 1, 0.38) 0px 4px 24px 0px; }

.terms-table { display: flex; flex-direction: column; gap: 4px; }

.terms-row { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--grey11); border-radius: 6px; min-height: 48px; }

.terms-key { width: 410px; padding: 0px 12px; font-size: 14px; font-weight: 500; color: var(--grey4); display: flex; align-items: center; line-height: normal; }

.terms-val { flex: 1 1 0%; padding: 0px 12px; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: flex-end; line-height: normal; }

.terms-val.orange { color: var(--orange); }

.terms-val.orange2 { color: var(--orange2); }

.terms-val.white { color: var(--white); }

.other-promos-section { display: flex; flex-direction: column; gap: 16px; }

.other-promos-header { display: flex; justify-content: space-between; align-items: center; padding-left: 16px; }

.other-promos-title { color: var(--white); text-transform: uppercase; font-size: 18px !important; font-weight: 700 !important; }

.more-btn { display: flex; height: 32px; padding: 6px 16px; align-items: center; gap: 8px; border-radius: 24px; background: rgb(32, 32, 32); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }

.more-label { font-size: 16px; font-weight: 500; color: rgb(254, 124, 0); }

.promos-row { display: flex; gap: 12px; padding-left: 16px; flex-wrap: nowrap; align-items: stretch; }

.promos-row a { flex: 1 1 0%; min-width: 0px; }

.promo-card { width: 100%; height: 208px; border-radius: 12px; overflow: hidden; position: relative; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }

.promo-card::after { content: none; }

.page-wrapper:has(#about:target) .sidebar-nav a[href="#about"], .page-wrapper:has(#how:target) .sidebar-nav a[href="#how"], .page-wrapper:has(#why:target) .sidebar-nav a[href="#why"], .page-wrapper:has(#terms:target) .sidebar-nav a[href="#terms"], .page-wrapper:has(#spins:target) .sidebar-nav a[href="#spins"] { color: rgb(255, 255, 255); border-right-width: medium; border-right-style: none; border-right-color: currentcolor; background: rgba(23, 24, 34, 0.6); box-shadow: none; }

.page-wrapper:has(#how:target) .sidebar-nav a[href="#about"], .page-wrapper:has(#why:target) .sidebar-nav a[href="#about"], .page-wrapper:has(#terms:target) .sidebar-nav a[href="#about"], .page-wrapper:has(#spins:target) .sidebar-nav a[href="#about"] { color: var(--grey3); border-right-width: medium; border-right-style: none; border-right-color: currentcolor; background: var(--surface); box-shadow: none; }

.close-btn { position: fixed; top: 16px; right: 16px; z-index: 100000; width: 32px; height: 32px; border-radius: 50%; background: rgba(59, 59, 59, 0.6); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s; }

.close-btn:hover { background: rgba(254, 82, 1, 0.4); }

.close-btn svg { width: 14px; height: 14px; }

.promotion-details-info a { color: rgb(255, 255, 255); }

.desktop-only-msg { display: none; }

@media (max-width: 768px) {
  .page-wrapper { display: none !important; }
  .hero-banner { display: none !important; }
  .mob-fullscreen .breadcrumb { display: none !important; }
}

@media (min-width: 769px) {
  .mob-fullscreen { display: none !important; }
  .desktop-only-msg { display: none !important; }
}