/* ============================================================================
   SoftBet landing — self-contained dark/acid theme (converted from the design
   export). Loads AFTER tokens/components/auth so it owns the page paint; the
   dark look comes from inline styles + the rules below. Isolated from app pages.
   ============================================================================ */
html { scroll-behavior: smooth; }
    body { margin: 0; background: #060606; }
    ::selection { background: #C9F31D; color: #0c1000; }
    @keyframes sbFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-16px); } }
    @keyframes sbFloatSm { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-9px); } }
    @keyframes sbTwinkle { 0%, 100% { opacity: 0.9; transform: scale(1) rotate(0deg); } 50% { opacity: 0.2; transform: scale(0.65) rotate(14deg); } }
    @keyframes sbGlowPulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.12); } }
    @keyframes sbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes sbChrome { 0%, 100% { background-position: 50% 12%; } 50% { background-position: 50% 88%; } }
    @keyframes sbSheen { 0% { background-position: 130% 0%; } 55% { background-position: -60% 0%; } 100% { background-position: -60% 0%; } }
    @keyframes sbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes sbBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
    @keyframes sbCardSpin {
      from { transform: rotate3d(0.42, 1, 0.14, 0deg); }
      to { transform: rotate3d(0.42, 1, 0.14, 360deg); }
    }
    [data-reveal] { opacity: 0; transform: translateY(46px); filter: blur(12px); transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s ease; will-change: opacity, transform, filter; }
    [data-reveal="left"] { transform: translateX(-64px); }
    [data-reveal="right"] { transform: translateX(64px); }
    [data-reveal="pop"] { transform: translateY(34px) scale(0.93); }
    [data-reveal].sb-in { opacity: 1; transform: none; filter: none; }
    details[data-faq] > summary { list-style: none; cursor: pointer; }
    details[data-faq] > summary::-webkit-details-marker { display: none; }
    details[data-faq] .sb-plus { transition: transform 0.3s ease; }
    details[data-faq][open] .sb-plus { transform: rotate(45deg); }
    @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; } }
    @media (max-width: 1240px) {
      [data-rsp="hero-collage"] { transform: scale(0.78); transform-origin: top left; width: 440px !important; height: 510px !important; }
    }
    @media (max-width: 1024px) {
      [data-rsp="nav-links"] { display: none !important; }
      [data-rsp="hero-inner"] { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
      [data-rsp="hero-right"] { padding-top: 6px !important; align-items: center !important; text-align: center !important; }
      [data-rsp="hero-ctas"] { justify-content: center !important; }
      [data-rsp="hero-collage"] { order: 2; margin: 0 auto !important; transform: scale(0.85); transform-origin: top center; width: 560px !important; height: 560px !important; }
      [data-rsp="grid-2"] { grid-template-columns: 1fr !important; }
      [data-rsp="grid-4"] { grid-template-columns: repeat(2, 1fr) !important; }
      [data-rsp="process-grid"] { grid-template-columns: repeat(2, 1fr) !important; row-gap: 48px !important; }
      [data-rsp="process-line"] { display: none !important; }
      [data-rsp="stack-grid"] { grid-template-columns: 1fr !important; gap: 48px !important; }
      [data-rsp="faq-grid"] { grid-template-columns: 1fr !important; gap: 36px !important; }
      [data-rsp="cta-deco"] { display: none !important; }
      [data-sec] { padding-left: 24px !important; padding-right: 24px !important; }
    }
    @media (max-width: 680px) {
      [data-rsp="grid-4"], [data-rsp="process-grid"] { grid-template-columns: 1fr !important; }
      [data-rsp="stack-tiles"] { grid-template-columns: repeat(2, 1fr) !important; }
      [data-rsp="ticker-grid"] { grid-template-columns: repeat(3, 1fr) !important; }
      [data-rsp="hero-collage"] { transform: scale(0.6); width: 380px !important; height: 400px !important; }
      [data-rsp="hero-line2"] { margin-left: 0 !important; }
      [data-sec] { padding-top: 84px !important; padding-bottom: 72px !important; }
      [data-rsp="trust-row"] { flex-wrap: wrap !important; gap: 16px 28px !important; }
    }

/* --- generated :hover rules (from style-hover, !important to beat inline base) --- */
.lx-h1:hover { color: #C9F31D !important; }
.lx-h2:hover { box-shadow: 0 0 52px rgba(201,243,29,0.75), inset 0 1px 0 rgba(255,255,255,0.6) !important; transform: translateY(-2px) !important; }
.lx-h3:hover { border-color: #C9F31D !important; color: #C9F31D !important; }
.lx-h4:hover { border-color: rgba(201,243,29,0.5) !important; transform: translateY(-5px) !important; }
.lx-h5:hover { border-color: rgba(201,243,29,0.55) !important; transform: translateY(-6px) !important; }
.lx-h6:hover { background: rgba(201,243,29,0.09) !important; transform: translateY(-6px) !important; }
.lx-h7:hover { border-color: rgba(201,243,29,0.5) !important; }
.lx-h8:hover { box-shadow: 0 0 70px rgba(201,243,29,0.8), inset 0 1px 0 rgba(255,255,255,0.6) !important; transform: translateY(-2px) !important; }

/* --- nav auth controls + footer links (class hover over inline base styles) --- */
.signin-link:hover { color: #C9F31D !important; }
.nav-cta-group .btn-primary:hover { box-shadow: 0 0 44px rgba(201,243,29,0.7), inset 0 1px 0 rgba(255,255,255,0.6) !important; transform: translateY(-1px) !important; }
.lx-foot-link:hover { color: #C9F31D !important; }
@media (max-width: 880px) { [data-rsp="footer-grid"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }
@media (max-width: 560px) { [data-rsp="footer-grid"] { grid-template-columns: 1fr !important; } }

/* ============================================================================
   Auth modal — dark acid restyle for the landing. The modal internals in
   auth.css are 100% token-driven, so re-declaring the tokens on the modal
   root re-themes every view (signin/register/forgot/reset/verify/2FA)
   without touching auth.css rules. Landing-only (this file loads only here).
   ============================================================================ */
.auth-modal {
  --canvas:        #101010;
  --canvas-deep:   #0c0c0c;
  --canvas-paper:  #141414;
  --ink:           #e8e8e8;
  --ink-soft:      #cfcfcf;
  --ink-mute:      #9a9a9a;
  --ink-line:      rgba(255, 255, 255, 0.12);
  --lime:          #C9F31D;
  --lime-glow:     #E4FF66;
  --lime-deep:     #C9F31D;
  --lime-shadow:   rgba(201, 243, 29, 0.35);
  --violet:        #C9F31D;
  --violet-deep:   #E4FF66;
  --font-sans:     'Chakra Petch', system-ui, sans-serif;
  --font-mono:     'Chakra Petch', ui-monospace, monospace;
  --font-display:  'Anton', sans-serif;
}
.auth-modal .module-modal-backdrop { background: rgba(4, 5, 6, 0.74); }
.auth-modal .auth-modal-shell {
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 64px rgba(201, 243, 29, 0.12);
}
/* checkbox tick + close hover flip dark→light foregrounds */
.auth-modal .am-checkbox input:checked::before { color: #0c1000; }
.auth-modal .auth-modal-close:hover { background: #C9F31D; color: #0c1000; border-color: #C9F31D; }
/* readable banner text on dark (auth.css hardcodes light-theme colors) */
.auth-modal .am-form-error   { color: #ff8f8f; }
.auth-modal .am-form-success { color: #5fe0a1; }
/* hint class used by the 2FA (TOTP) view; defined only in dashboard.css */
.auth-modal .db-form-hint { font-size: 0.78rem; color: #9a9a9a; line-height: 1.5; }
/* primary submit inherits components.css .btn-primary (lime bg + dark text) — correct on dark */

/* signed-in user pill in the landing nav */
.top-nav .user-pill {
  background: #141414;
  border-color: rgba(255, 255, 255, 0.14);
  color: #cfcfcf;
}
.top-nav .user-pill:hover { border-color: #C9F31D; color: #f0f0f0; }

/* ============================================================================
   Mobile nav — hamburger + slide-down menu (nav links are display:none
   ≤1024px with no fallback until now)
   ============================================================================ */
.lx-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.lx-burger span {
  display: block; width: 18px; height: 2px;
  background: #e8e8e8; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.lx-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lx-burger.open span:nth-child(2) { opacity: 0; }
.lx-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lx-mobile-menu {
  display: none;
  position: fixed;
  top: 66px; left: 0; right: 0;
  z-index: 49;
  background: rgba(6,6,6,0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 24px 22px;
  flex-direction: column;
  gap: 2px;
}
.lx-mobile-menu.open { display: flex; }
.lx-mobile-menu a {
  color: #cfcfcf; text-decoration: none;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lx-mobile-menu a:last-child { border-bottom: none; }
.lx-mobile-menu a:hover { color: #C9F31D; }
.lx-mobile-menu .lx-mm-cta {
  margin-top: 12px;
  text-align: center;
  background: linear-gradient(160deg, #e3ff62 0%, #C9F31D 50%, #a3cc05 100%);
  color: #0c1000; font-weight: 700;
  border-radius: 10px; border-bottom: none;
  text-transform: none; letter-spacing: 0;
}
@media (max-width: 1024px) {
  .lx-burger { display: inline-flex; }
}