/* ============================================================
   BigDrago (big-drago.com) - site overrides
   Sofia Sans headings, Fira Sans text, DM Serif Display in the logo image.
   Violet black ground, aubergine tiles, white type, the violet of
   Register, Log in, Join Now and the word Drago in the logo, the green
   of the live player dots and the orange of the VIP Market car, all
   taken from the supplied BigDrago screens. Centred column, 1120 px.
   ============================================================ */
:root {
  --font-display: "Sofia Sans", "Trebuchet MS", Arial, sans-serif;
  --font-body: "Fira Sans", "Segoe UI", Arial, sans-serif;
  --bd-vio: #d76cff;
  --bd-vio-2: #e59bff;
  --bd-vio-deep: #a944d6;
  --bd-green: #3ed696;
  --bd-orange: #ff9446;
  --bd-ink: #0c0911;
  --bd-tile: #1a1424;
  --bd-tile-2: #251c33;
  --bd-line: #342845;
  --bd-text: #d9d0e4;
  --bd-faint: #a093b2;
}

body {
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--bd-text);
  background: var(--color-bg);
}
.container { max-width: 1120px; }

/* ---------- Header: underline nav ---------- */
.site-header.bd-header {
  background: rgba(12, 9, 17, 0.96);
  border-bottom: 1px solid var(--bd-line);
  box-shadow: 0 1px 0 rgba(215, 108, 255, 0.18);
  backdrop-filter: blur(10px);
}
.site-header .site-logo img { height: 38px; width: auto; }
.nav-main--desktop { gap: 2px; }
.nav-main--desktop a {
  position: relative; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em;
  padding: 0.5rem 0.8rem; border-radius: 8px; color: #efe7f8; background: transparent;
}
.nav-main--desktop a::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.18rem; height: 3px; border-radius: 3px;
  background: var(--bd-vio); transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease;
}
.nav-main--desktop a:hover { color: #ffffff; background: transparent; }
.nav-main--desktop a:hover::after { transform: scaleX(1); }
.btn { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; border-radius: 12px; }
.btn--primary, main a.btn--primary, .bd-register {
  background: var(--bd-vio); color: var(--bd-ink) !important; border: 1px solid var(--bd-vio);
  box-shadow: 0 8px 22px rgba(215, 108, 255, 0.25);
}
.btn--primary:hover, main a.btn--primary:hover { background: var(--bd-vio-2); border-color: var(--bd-vio-2); color: var(--bd-ink) !important; }
.btn--outline { background: var(--bd-tile-2); color: #f5f0fb; border: 1px solid var(--bd-line); }
.btn--outline:hover { background: rgba(215, 108, 255, 0.12); color: #ffffff; border-color: var(--bd-vio); }

/* ---------- Language switcher ---------- */
.lang-switcher__toggle { border-radius: 10px; border-color: var(--bd-line); }
.bd-code {
  display: inline-grid; place-items: center; min-width: 36px; height: 22px; padding: 0 6px;
  border-radius: 6px; background: var(--bd-tile-2); border: 1px solid var(--bd-line);
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.05em; color: var(--bd-vio);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 236px; max-width: 92vw; display: grid !important; grid-template-columns: 1fr; gap: 2px;
  padding: 8px; max-height: 70vh; overflow-y: auto;
  background: var(--bd-tile); border: 1px solid var(--bd-line); border-radius: 12px;
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 7px 10px; }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(215, 108, 255, 0.12); }
.lang-switcher__menu li[aria-selected="true"] .bd-code { background: var(--bd-vio); color: var(--bd-ink); border-color: var(--bd-vio); }
.nav-mobile__langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.nav-mobile__lang { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; padding: 6px 8px; border-radius: 8px; }
.nav-mobile__lang.is-active { background: rgba(215, 108, 255, 0.12); }

/* ---------- Hero: copy left, ticket board right ---------- */
.bd-hero {
  padding: 62px 0 30px; text-align: left; border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(12, 9, 17, 0) 55%, #0c0911 100%),
    linear-gradient(90deg, rgba(12, 9, 17, 0.98) 0%, rgba(12, 9, 17, 0.84) 55%, rgba(12, 9, 17, 0.4) 100%),
    url("/assets/img/hero-bg.jpg") center / cover no-repeat, var(--color-bg);
}
.bd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.bd-hero .hero__content { max-width: none; margin: 0; text-align: left; align-items: flex-start; display: block; }
.bd-kicker {
  display: inline-block; margin: 0 0 14px; padding: 0 0 0 14px;
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bd-orange); border-left: 4px solid var(--bd-orange); background: none;
}
.bd-hero h1 {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; color: #ffffff; letter-spacing: -0.01em;
}
.bd-vio { color: var(--bd-vio); }
.bd-hero__lead p { margin: 0; max-width: 64ch; color: #d6cce2; font-size: 1.08rem; }
.bd-hero__ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.bd-board { padding: 18px; border-radius: 18px; background: rgba(26, 20, 36, 0.94); border: 1px solid var(--bd-line); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5); }
.bd-board__title { margin: 0 0 12px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; }
.bd-tile {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tag value" "note value";
  align-items: center; gap: 0 14px; padding: 13px 16px 13px 20px; margin-bottom: 10px; border-radius: 12px;
  background: var(--bd-tile-2); border: 1px dashed #4a3a61;
}
.bd-tile::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--bd-vio); }
.bd-tile:last-child { margin-bottom: 0; }
.bd-tile__tag { grid-area: tag; font-family: var(--font-display); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #f1e9fa; }
.bd-tile__note { grid-area: note; font-size: 0.88rem; color: var(--bd-faint); }
.bd-tile__value { grid-area: value; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--bd-vio); white-space: nowrap; }
.bd-tile--0 { background: linear-gradient(135deg, rgba(215, 108, 255, 0.24), rgba(255, 148, 70, 0.08)); border-style: solid; border-color: rgba(215, 108, 255, 0.5); }
.bd-tile--0 .bd-tile__value { font-size: 1.75rem; color: #ffffff; }
.bd-tile--2::before { background: var(--bd-orange); }
.bd-tile--2 .bd-tile__value { color: var(--bd-orange); }
@media (max-width: 920px) {
  .bd-hero { padding: 40px 0 24px; }
  .bd-hero__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Key figures: one joined band ---------- */
.bd-strip { padding: 18px 0 10px; }
.bd-strip__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--bd-line); border-radius: 16px; overflow: hidden; background: var(--bd-tile); }
.bd-fig { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-right: 1px solid var(--bd-line); }
.bd-fig:last-child { border-right: 0; }
.bd-fig__v { font-family: var(--font-display); font-weight: 900; font-size: 1.32rem; line-height: 1.1; color: var(--bd-vio); white-space: nowrap; }
.bd-fig:nth-child(even) .bd-fig__v { color: #ffffff; }
.bd-fig__l { font-size: 0.84rem; line-height: 1.3; color: var(--bd-faint); }
@media (max-width: 1060px) {
  .bd-strip__row { grid-template-columns: repeat(3, 1fr); }
  .bd-fig:nth-child(3n) { border-right: 0; }
  .bd-fig:nth-child(-n+3) { border-bottom: 1px solid var(--bd-line); }
}
@media (max-width: 560px) {
  .bd-strip__row { grid-template-columns: repeat(2, 1fr); }
  .bd-fig { border-right: 1px solid var(--bd-line) !important; border-bottom: 1px solid var(--bd-line); }
  .bd-fig:nth-child(2n) { border-right: 0 !important; }
  .bd-fig:nth-last-child(-n+2) { border-bottom: 0; }
  .bd-fig__v { font-size: 1.12rem; }
}

/* ---------- Sections ---------- */
.content-section { padding: 52px 0 34px; background: transparent; border: 0; }
.content-section--alt { background: #110c18; border-top: 1px solid #221a2e; border-bottom: 1px solid #221a2e; }
.content-section > .container { max-width: 1120px; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(1.65rem, 2.5vw, 2.2rem); line-height: 1.18;
  color: #ffffff; margin: 0 0 22px; padding: 2px 0 2px 18px; border: 0; border-left: 6px solid var(--bd-vio); max-width: none; position: relative;
}
.content-section h2::before, .content-section h2::after { display: none !important; }
.content-section h3 {
  position: relative; font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; line-height: 1.32;
  color: #ffffff; margin: 30px 0 10px; padding: 0 0 0 22px; border: 0; text-transform: none;
}
.content-section h3::before {
  content: ""; display: block; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 10px;
  background: var(--bd-orange); transform: rotate(45deg); border-radius: 2px;
}
.content-section p { margin-bottom: 1rem; color: var(--bd-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.4rem; color: var(--bd-text); }
.content-section ul li::marker { color: var(--bd-vio); }
.content-section a:not(.btn) { color: var(--bd-vio-2); }
.content-section strong { color: #ffffff; }
@media (max-width: 900px) { .content-section { padding: 36px 0 22px; } }

/* ---------- Supplied artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 340px; max-width: 340px; height: auto; background: transparent; box-shadow: none; border-radius: 0;
}
.content-section .section-illus--right { float: right; margin: -10px -10px 8px 24px; }
.content-section .section-illus--left { float: left; margin: -10px 24px 8px -10px; }
.bd-clear { clear: both; }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 290px; max-width: 80%; margin: 0 auto 12px; }
}

/* ---------- Tables: violet head row ---------- */
.bd-table-wrap { clear: none; display: flow-root; margin: 22px 0 26px; border: 1px solid var(--bd-line); border-radius: 14px; overflow: hidden; background: var(--bd-tile); }
.bd-table-wrap .bd-table-title {
  margin: 0; padding: 12px 18px; max-width: none;
  font-family: var(--font-display); font-weight: 900; font-size: 1.06rem; letter-spacing: 0.01em; color: #ffffff;
  background: var(--bd-tile-2); border-bottom: 2px solid var(--bd-vio);
}
.bd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .bd-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 0.97rem; }
.content-section .bd-table-wrap th, .content-section .bd-table-wrap td { padding: 10px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--bd-line); white-space: normal; }
.content-section .bd-table-wrap thead th { font-family: var(--font-display); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bd-ink); background: var(--bd-vio); }
.content-section .bd-table-wrap tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.022); }
.content-section .bd-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .bd-table-wrap td:first-child { color: #ffffff; font-weight: 600; }
.bd-table-note { font-size: 0.9rem; color: var(--bd-faint); padding: 11px 18px; margin: 0 !important; border-top: 1px solid var(--bd-line); max-width: none !important; }
@media (max-width: 600px) {
  .content-section .bd-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.9rem; }
  .content-section .bd-table-wrap th, .content-section .bd-table-wrap td { padding: 9px 10px; overflow-wrap: break-word; hyphens: auto; }
  .content-section .bd-table-wrap th:first-child, .content-section .bd-table-wrap td:first-child { width: 38%; }
}

/* ---------- Numbered steps: violet squares ---------- */
.bd-steps { display: flow-root; counter-reset: bdstep; list-style: none; margin: 14px 0 22px !important; padding: 0; }
.bd-steps li { counter-increment: bdstep; position: relative; padding: 4px 0 4px 48px; margin-bottom: 12px; }
.bd-steps li::before {
  content: counter(bdstep); position: absolute; left: 0; top: 1px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 9px;
  font-family: var(--font-display); font-weight: 900; font-size: 1rem; color: var(--bd-vio); background: var(--bd-tile-2); border: 1px solid var(--bd-vio);
}

/* ---------- FAQ ---------- */
.bd-faq { clear: both; margin: 18px 0 8px; display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
.bd-faq details { border: 1px solid var(--bd-line); border-left: 4px solid var(--bd-vio); border-radius: 10px; background: var(--bd-tile); }
.bd-faq summary { cursor: pointer; list-style: none; padding: 14px 48px 14px 18px; position: relative; font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; color: #ffffff; }
.bd-faq summary::-webkit-details-marker { display: none; }
.bd-faq summary::after {
  content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 6px; background: var(--bd-tile-2); font-size: 1.1rem; line-height: 1; color: var(--bd-orange);
}
.bd-faq details[open] summary::after { content: "\2212"; background: var(--bd-orange); color: var(--bd-ink); }
.bd-faq details p { padding: 0 18px 16px; margin: 0; }

/* ---------- Sign-up panel, footer, sticky bar ---------- */
.bd-join { padding: 48px 0 52px; }
.bd-join__panel {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 36px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(215, 108, 255, 0.22), rgba(255, 148, 70, 0.10) 70%), var(--bd-tile);
  border: 1px solid rgba(215, 108, 255, 0.45);
}
.bd-join__text h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.45rem, 2.2vw, 1.9rem); color: #ffffff; border: 0; padding: 0; }
.bd-join__text p { margin: 0; max-width: 62ch; color: var(--bd-text); }
.bd-join .btn { flex-shrink: 0; }
@media (max-width: 760px) { .bd-join__panel { flex-direction: column; align-items: flex-start; padding: 22px 20px; } }
.site-footer.bd-footer { background: #07050a; border-top: 2px solid var(--bd-vio-deep); }
.site-footer h5 { font-family: var(--font-display); font-weight: 900; font-size: 0.88rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bd-orange); }
.site-footer .site-logo img { height: 36px; width: auto; }
.footer-badge { border-color: var(--bd-line); border-radius: 6px; color: #efe7f8; }
.sticky-cta { border-top: 1px solid rgba(215, 108, 255, 0.4); background: rgba(12, 9, 17, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 900; color: #ffffff; }
.sticky-cta__bonus { color: var(--bd-vio); font-weight: 600; }

/* ---------- Anchors, mobile header ---------- */
.content-section[id] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 28px; }
  .site-header .site-logo { flex-shrink: 0; margin-right: 6px; }
  .nav-toggle { flex-shrink: 0; margin-left: 6px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.8rem !important; padding: 0.5rem 0.8rem !important; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.95rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
  .bd-tile__value { font-size: 1.28rem; }
  .bd-tile--0 .bd-tile__value { font-size: 1.45rem; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.7rem !important; padding: 0.45rem 0.55rem !important; } }

.content-section p, .content-section li, .content-section ul, .content-section ol { max-width: none; }
.content-section h2 { clear: none; overflow: visible; }
.content-section h3 { clear: none; }
.content-section ul, .content-section ol.bd-steps { display: flow-root; padding-left: 1.2rem; margin-left: 0; }
.content-section .bd-clear + h2 { margin-top: 54px; }
.hero h1, .content-section h2, .content-section h3, .bd-join h2, .bd-table-wrap .bd-table-title { text-transform: none; }