/* ============================================================
   Betarctica (bet-arctica.com) - site overrides
   Brygada 1918 headings, Ysabeau Office text, Brygada Bold in the logo image.
   Teal black ground, slate teal tiles, white type and the mint of Register,
   Log in, Join Now and the word arctica, all taken from the supplied
   Betarctica screens, with a cold ice blue as the second accent.
   Centred column, 1140 px. Split hero with a VIP ladder card on the right.
   ============================================================ */
:root {
  --font-display: "Brygada 1918", Georgia, "Times New Roman", serif;
  --font-body: "Ysabeau Office", "Segoe UI", Arial, sans-serif;
  --ba-mint: #3ae0c8;
  --ba-mint-2: #6ce9d6;
  --ba-mint-deep: #1fb39e;
  --ba-ice: #9fcfff;
  --ba-ink: #071417;
  --ba-on-mint: #04110f;
  --ba-tile: #0d1f23;
  --ba-tile-2: #13292e;
  --ba-line: #1d3a40;
  --ba-text: #cfe0e1;
  --ba-faint: #8aa7aa;
}

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

/* ---------- Header: underline nav ---------- */
.site-header.ba-header { background: rgba(7, 20, 23, 0.95); border-bottom: 1px solid var(--ba-line); backdrop-filter: blur(10px); }
.site-header .site-logo img { height: 34px; width: auto; }
.nav-main--desktop { gap: 2px; }
.nav-main--desktop a {
  position: relative; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
  padding: 0.5rem 0.85rem; border-radius: 6px; color: #e3eeee; background: transparent;
}
.nav-main--desktop a::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.2rem; height: 2px; border-radius: 2px;
  background: var(--ba-mint); 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-body); font-weight: 800; letter-spacing: 0.02em; border-radius: 10px; }
.btn--primary, main a.btn--primary, .ba-register {
  background: var(--ba-mint); color: var(--ba-on-mint) !important; border: 1px solid var(--ba-mint);
  box-shadow: 0 8px 22px rgba(58, 224, 200, 0.2);
}
.btn--primary:hover, main a.btn--primary:hover { background: var(--ba-mint-2); border-color: var(--ba-mint-2); color: var(--ba-on-mint) !important; }
.btn--outline { background: transparent; color: #ecf6f6; border: 1px solid #2c5158; }
.btn--outline:hover { background: rgba(58, 224, 200, 0.08); color: #ffffff; border-color: var(--ba-mint); }

/* ---------- Language switcher ---------- */
.lang-switcher__toggle { border-radius: 10px; border-color: var(--ba-line); }
.ba-code {
  display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px;
  border-radius: 6px; background: var(--ba-tile-2); border: 1px solid var(--ba-line);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: var(--ba-ice);
}
.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(--ba-tile); border: 1px solid var(--ba-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(58, 224, 200, 0.1); }
.lang-switcher__menu li[aria-selected="true"] .ba-code { background: var(--ba-mint); color: var(--ba-on-mint); border-color: var(--ba-mint); }
.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(58, 224, 200, 0.1); }

/* ---------- Hero: copy left, ladder right ---------- */
.ba-hero {
  padding: 64px 0 40px; text-align: left; border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(7, 20, 23, 0.1) 0%, rgba(7, 20, 23, 0.55) 70%, #071417 100%),
    url("/assets/img/hero-bg.jpg") center top / cover no-repeat, var(--color-bg);
}
.ba-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 44px; align-items: center; }
.ba-hero .hero__content { max-width: none; margin: 0; text-align: left; display: block; }
.ba-kicker {
  display: inline-block; margin: 0 0 16px; padding: 5px 12px; border-radius: 6px;
  font-family: var(--font-body); font-size: 0.84rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ba-ice); background: rgba(159, 207, 255, 0.08); border: 1px solid rgba(159, 207, 255, 0.28);
}
.ba-hero h1 {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.95rem); line-height: 1.14; color: #ffffff; letter-spacing: -0.01em;
}
.ba-mint { color: var(--ba-mint); }
.ba-hero__lead p { margin: 0; max-width: 62ch; color: #c9dcdd; font-size: 1.1rem; }
.ba-hero__ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.ba-ladder {
  padding: 20px 20px 16px; border-radius: 16px; background: rgba(13, 31, 35, 0.9); border: 1px solid var(--ba-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ba-ladder__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: #ffffff; }
.ba-ladder__head, .ba-ladder__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; align-items: center; }
.ba-ladder__head { padding: 0 12px 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ba-faint); }
.ba-ladder__head span:not(:first-child), .ba-ladder__row span:not(:first-child) { text-align: right; }
.ba-ladder__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ba-ladder__row { padding: 10px 12px; border-radius: 10px; background: var(--ba-tile-2); border-left: 3px solid var(--ba-line); }
.ba-ladder__tier { font-weight: 800; color: #ffffff; }
.ba-ladder__cb { font-weight: 800; font-size: 1.12rem; color: var(--ba-mint); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ba-ladder__rb { font-weight: 700; color: var(--ba-ice); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ba-ladder__row--0 { border-left-color: #b9825a; }
.ba-ladder__row--1 { border-left-color: #b8c4c6; }
.ba-ladder__row--2 { border-left-color: #e0bd5b; }
.ba-ladder__row--3 { border-left-color: var(--ba-ice); }
.ba-ladder__row--4 { border-left-color: var(--ba-mint); background: linear-gradient(90deg, rgba(58, 224, 200, 0.16), var(--ba-tile-2) 70%); }
.ba-ladder__note { margin: 12px 0 0; font-size: 0.86rem; line-height: 1.4; color: var(--ba-faint); }
@media (max-width: 900px) {
  .ba-hero { padding: 40px 0 26px; }
  .ba-hero__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Key figures: one ruled band ---------- */
.ba-band { padding: 10px 0 14px; }
.ba-band__row {
  display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--ba-line); border-radius: 14px;
  background: var(--ba-tile); overflow: hidden;
}
.ba-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--ba-line); }
.ba-stat:last-child { border-right: 0; }
.ba-stat__v { font-family: var(--font-display); font-weight: 700; font-size: 1.36rem; line-height: 1.15; color: #ffffff; white-space: nowrap; }
.ba-stat:nth-child(odd) .ba-stat__v { color: var(--ba-mint); }
.ba-stat__l { font-size: 0.84rem; line-height: 1.3; color: var(--ba-faint); }
@media (max-width: 1000px) {
  .ba-band__row { grid-template-columns: repeat(3, 1fr); }
  .ba-stat:nth-child(3n) { border-right: 0; }
  .ba-stat:nth-child(-n+3) { border-bottom: 1px solid var(--ba-line); }
}
@media (max-width: 520px) {
  .ba-band__row { grid-template-columns: repeat(2, 1fr); }
  .ba-stat { border-right: 1px solid var(--ba-line) !important; border-bottom: 1px solid var(--ba-line); padding: 12px; }
  .ba-stat:nth-child(2n) { border-right: 0 !important; }
  .ba-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .ba-stat__v { font-size: 1.15rem; }
}

/* ---------- Sections ---------- */
.content-section { padding: 56px 0 36px; background: transparent; border: 0; }
.content-section--alt { background: #0a191c; border-top: 1px solid #142c31; border-bottom: 1px solid #142c31; }
.content-section > .container { max-width: 1140px; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.2;
  color: #ffffff; margin: 0 0 22px; padding: 0 0 14px; border: 0; max-width: none; position: relative;
}
.content-section h2::before { display: none !important; }
.content-section h2::after {
  content: "" !important; display: block !important; position: absolute; left: 0; bottom: 0; width: 100%; max-width: 420px; height: 1px;
  background: linear-gradient(90deg, var(--ba-mint) 0 64px, var(--ba-line) 64px 100%);
}
.content-section h3 {
  position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.32;
  color: #f0f8f8; 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: 9px; height: 9px;
  transform: rotate(45deg); background: var(--ba-ice); border-radius: 1px;
}
.content-section p { margin-bottom: 1rem; color: var(--ba-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.4rem; color: var(--ba-text); }
.content-section ul li::marker { color: var(--ba-mint); }
.content-section a:not(.btn) { color: var(--ba-mint-2); }
.content-section strong { color: #ffffff; }
.ba-callout {
  display: flow-root; margin: 6px 0 20px !important; padding: 14px 18px; border-radius: 12px;
  background: rgba(159, 207, 255, 0.06); border: 1px solid rgba(159, 207, 255, 0.22); border-left: 4px solid var(--ba-ice); color: #dbe9f5 !important;
}
@media (max-width: 900px) { .content-section { padding: 40px 0 24px; } }

/* ---------- Supplied artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 330px; max-width: 330px; height: auto; background: transparent; box-shadow: none; border-radius: 0;
}
.content-section .section-illus--right { float: right; margin: -6px -8px 8px 26px; }
.content-section .section-illus--left { float: left; margin: -6px 26px 8px -8px; }
.ba-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: 280px; max-width: 80%; margin: 0 auto 12px; }
}

/* ---------- Tables: striped rows, mint head text ---------- */
.ba-table-wrap { clear: none; display: flow-root; margin: 22px 0 26px; border: 1px solid var(--ba-line); border-radius: 12px; overflow: hidden; background: var(--ba-tile); }
.ba-table-wrap .ba-table-title {
  margin: 0; padding: 12px 18px; max-width: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: #ffffff;
  background: linear-gradient(90deg, rgba(58, 224, 200, 0.1), transparent 60%); border-bottom: 1px solid var(--ba-line);
}
.ba-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .ba-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 0.97rem; }
.content-section .ba-table-wrap th, .content-section .ba-table-wrap td { padding: 9px 16px; text-align: left; vertical-align: top; border: 0; white-space: normal; }
.content-section .ba-table-wrap thead th {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ba-mint); background: var(--ba-tile-2); border-bottom: 1px solid var(--ba-line);
}
.content-section .ba-table-wrap tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.content-section .ba-table-wrap tbody tr:hover td { background: rgba(58, 224, 200, 0.05); }
.content-section .ba-table-wrap td:first-child { color: #ffffff; font-weight: 700; }
.ba-table-note { font-size: 0.9rem; color: var(--ba-faint); padding: 10px 16px; margin: 0 !important; border-top: 1px solid var(--ba-line); max-width: none !important; }
@media (max-width: 600px) {
  .content-section .ba-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.88rem; }
  .content-section .ba-table-wrap th, .content-section .ba-table-wrap td { padding: 8px 8px; overflow-wrap: break-word; hyphens: auto; }
}
.ba-table-wrap.ba-table-wrap--wide table { min-width: 720px; }

/* ---------- Numbered steps: square mint badges ---------- */
.ba-steps { display: flow-root; counter-reset: bastep; list-style: none; margin: 14px 0 22px !important; padding: 0; }
.ba-steps li { counter-increment: bastep; position: relative; padding: 3px 0 6px 48px; margin-bottom: 10px; }
.ba-steps li::before {
  content: counter(bastep); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ba-on-mint); background: var(--ba-mint);
}

/* ---------- FAQ: single column, ruled ---------- */
.ba-faq { clear: both; margin: 18px 0 8px; border-top: 1px solid var(--ba-line); }
.ba-faq details { border-bottom: 1px solid var(--ba-line); }
.ba-faq summary { cursor: pointer; list-style: none; padding: 16px 46px 16px 4px; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #ffffff; }
.ba-faq summary::-webkit-details-marker { display: none; }
.ba-faq summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ba-mint); border-bottom: 2px solid var(--ba-mint); transform: rotate(45deg); transition: transform 0.15s ease;
}
.ba-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ba-faq details[open] summary { color: var(--ba-mint-2); }
.ba-faq details p { padding: 0 4px 16px; margin: 0; }

/* ---------- Sign-up panel, footer, sticky bar ---------- */
.ba-join { padding: 48px 0 54px; }
.ba-join__panel {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 30px 34px; border-radius: 16px;
  background: linear-gradient(110deg, rgba(58, 224, 200, 0.14), rgba(13, 31, 35, 0.96) 55%), var(--ba-tile);
  border: 1px solid rgba(58, 224, 200, 0.3);
}
.ba-join__text h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.3vw, 1.9rem); color: #ffffff; border: 0; padding: 0; }
.ba-join__text p { margin: 0; max-width: 66ch; color: var(--ba-text); }
.ba-join .btn { flex-shrink: 0; }
@media (max-width: 760px) { .ba-join__panel { flex-direction: column; align-items: flex-start; padding: 24px 20px; } }
.site-footer.ba-footer { background: #040d0f; border-top: 1px solid var(--ba-line); }
.site-footer h5 { font-family: var(--font-body); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ba-ice); }
.site-footer .site-logo img { height: 32px; width: auto; }
.footer-badge { border-color: var(--ba-line); border-radius: 6px; color: #e3eeee; }
.sticky-cta { border-top: 1px solid rgba(58, 224, 200, 0.3); background: rgba(7, 20, 23, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 700; color: #ffffff; }
.sticky-cta__bonus { color: var(--ba-mint); font-weight: 700; }

/* ---------- 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: 21px; width: auto; }
  .site-header .site-logo { min-width: 0; }
  .site-header .site-logo { flex-shrink: 0; margin-right: 2px; }
  .nav-toggle { flex-shrink: 0; margin-left: 2px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.8rem !important; padding: 0.5rem 0.85rem !important; white-space: nowrap; max-width: 50vw; 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; }
}
@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; display: flow-root; }
.content-section ul, .content-section ol.ba-steps { display: flow-root; padding-left: 1.2rem; margin-left: 0; }
.content-section ol.ba-steps { padding-left: 0; }
.content-section .ba-clear + h2 { margin-top: 54px; }
.hero h1, .content-section h2, .content-section h3, .ba-join h2, .ba-table-wrap .ba-table-title { text-transform: none; }