/* =====================================================
   KO888 — Dark Navy Casino Design System
   Generated: 2026-04-07
   ===================================================== */

:root {
      --color-primary: #1A1D23;
      --color-secondary: #D4511E;
      --color-accent: #60A5FA;
      --color-bg: #101318;
      --color-surface: #2A2E369C;
      --color-text: #FFFFFF;

      --bg-body: #101318;
      --bg-header: #1A1D23;
      --bg-footer: #15181E;
      --bg-card: #2A2E369C;
      --bg-card-solid: #24282F;
      --bg-card-dark: #1A1D23CC;
      --bg-heading-block: #1A1D2380;
      --bg-overlay: rgba(0, 0, 0, 0.6);
      --bg-mobile-nav: #1A1D23F2;

      --gradient-btn-primary: linear-gradient(180deg, #D4511E 0%, #9A3A14 100%);
      --gradient-btn-secondary: linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%);
      --gradient-header-col: linear-gradient(180deg, #24282F 0%, #1A1D23 100%);
      --gradient-mobile-nav: linear-gradient(180deg, #1A1D23 0%, #101318 100%);

      --text-white: #FFFFFF;
      --text-heading: #FDEBD0;
      --text-heading-alt: #F0D9B5;
      --text-nav: #CCCCCC;
      --text-nav-hover: #60A5FA;
      --text-nav-active: #FFFFFF;
      --text-link: #E86A32;
      --text-keyword: #60A5FA;
      --text-footer-brand: #D4511E;
      --text-footer: #AAAAAA;

      --border-header: #33383F;
      --border-section: #33383F40;
      --border-footer: #33383F;
      --border-divider: #33383F40;

      --shadow-card: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
      --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.1);

      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 40px;
      --space-2xl: 60px;
      --space-3xl: 80px;

      --radius-sm: 7px;
      --radius-md: 10px;
      --radius-lg: 20px;
      --radius-pill: 25px;
    }

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

    body {
      font-family: 'Kanit', sans-serif;
      background-color: var(--bg-body);
      color: var(--color-text);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.7;
    }

    a {
      color: var(--text-link);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    a:hover {
      color: var(--color-accent);
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 var(--space-md);
    }

    /* HEADER */
    .site-header {
      background: var(--bg-header);
      border-bottom: 1px solid var(--border-header);
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: var(--space-md) 0;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
    }

    .logo img {
      height: 44px;
      width: auto;
      display: block;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
    }

    .main-nav a {
      color: var(--text-nav);
      font-size: 15px;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .main-nav a:hover,
    .main-nav a.active {
      color: var(--text-nav-hover);
    }

    .cta-button {
      display: inline-block;
      background: var(--gradient-btn-primary);
      color: var(--text-white);
      padding: 12px 28px;
      border-radius: var(--radius-pill);
      font-weight: 600;
      font-size: 16px;
      text-align: center;
      transition: transform 0.2s ease;
      border: none;
      cursor: pointer;
    }

    .cta-button:hover {
      transform: scale(0.96);
      color: var(--text-white);
    }

    .cta-secondary {
      background: transparent;
      border: 2px solid var(--color-accent);
      color: var(--color-accent);
    }

    .cta-secondary:hover {
      background: var(--color-accent);
      color: var(--color-primary);
    }

    /* HAMBURGER */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: rgba(26, 29, 35, 0.8);
      border: 1px solid rgba(96, 165, 250, 0.2);
      padding: 8px;
      border-radius: var(--radius-sm);
      cursor: pointer;
    }

    .hamburger span {
      width: 24px;
      height: 2px;
      background: var(--color-accent);
      transition: all 0.3s ease;
    }

    #mobile-toggle {
      display: none;
    }

    /* HERO */
    .hero {
      position: relative;
      padding: var(--space-3xl) 0;
      text-align: center;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-overlay);
      z-index: 1;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .hero h1 {
      font-size: 32px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: var(--space-md);
      line-height: 1.3;
    }

    .hero-sub {
      font-size: 18px;
      color: var(--text-heading-alt);
      margin-bottom: var(--space-xl);
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero-buttons {
      display: flex;
      gap: var(--space-md);
      justify-content: center;
      flex-wrap: wrap;
    }

    /* TOC */
    .toc-container {
      background: var(--bg-card-solid);
      border-radius: var(--radius-md);
      padding: var(--space-lg) var(--space-xl);
      margin: var(--space-xl) auto;
      max-width: 700px;
      box-shadow: var(--shadow-card);
    }

    .toc-container h2 {
      font-size: 20px;
      font-weight: 700;
      color: var(--color-secondary);
      margin-bottom: var(--space-md);
    }

    .toc-container ol {
      padding-left: var(--space-lg);
    }

    .toc-container li {
      margin-bottom: var(--space-sm);
    }

    .toc-container a {
      color: var(--text-nav);
      font-size: 15px;
    }

    .toc-container a:hover {
      color: var(--color-accent);
    }

    /* SECTIONS */
    .section {
      padding: var(--space-2xl) 0;
      border-bottom: 1px solid var(--border-section);
    }

    .section h2 {
      font-size: 26px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: var(--space-lg);
      line-height: 1.3;
    }

    .section h3 {
      font-size: 20px;
      font-weight: 600;
      color: var(--text-heading-alt);
      margin-top: var(--space-xl);
      margin-bottom: var(--space-md);
    }

    .section p {
      margin-bottom: var(--space-md);
      line-height: 1.8;
    }

    .section ul, .section ol {
      padding-left: var(--space-lg);
      margin-bottom: var(--space-md);
    }

    .section li {
      margin-bottom: var(--space-sm);
      line-height: 1.7;
    }

    /* FEATURE CARDS */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-lg);
      margin-top: var(--space-lg);
    }

    .feature-card {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      box-shadow: var(--shadow-card);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }

    .feature-card h3 {
      margin-top: 0;
      font-size: 18px;
    }

    .feature-icon {
      font-size: 36px;
      margin-bottom: var(--space-md);
    }

    /* TWO COL */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: center;
    }

    .two-col img {
      border-radius: var(--radius-md);
      width: 100%;
    }

    /* PAYMENT BADGES */
    .payment-badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-md);
      margin: var(--space-lg) 0;
    }

    .payment-badge {
      background: var(--bg-card-solid);
      border-radius: var(--radius-sm);
      padding: var(--space-sm) var(--space-md);
      font-size: 14px;
      font-weight: 500;
      color: var(--text-heading-alt);
      border: 1px solid var(--border-section);
    }

    /* CTA SECTION */
    .cta-section {
      text-align: center;
      padding: var(--space-3xl) 0;
      background: var(--bg-heading-block);
      border-radius: var(--radius-lg);
      margin: var(--space-xl) 0;
    }

    .cta-section ol {
      text-align: left;
      max-width: 500px;
      margin: var(--space-lg) auto;
      padding-left: var(--space-lg);
    }

    .cta-section li {
      margin-bottom: var(--space-md);
      font-size: 16px;
    }

    /* FOOTER */
    .site-footer {
      background: var(--bg-footer);
      border-top: 1px solid var(--border-footer);
      padding: var(--space-xl) 0 var(--space-lg);
    }

    .footer-inner {
      text-align: center;
    }

    .footer-brand {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-footer-brand);
      margin-bottom: var(--space-md);
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: var(--space-lg);
      margin-bottom: var(--space-lg);
      flex-wrap: wrap;
    }

    .footer-links a {
      color: var(--text-footer);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: var(--color-accent);
    }

    .footer-disclaimer {
      font-size: 13px;
      color: var(--text-footer);
      max-width: 700px;
      margin: 0 auto var(--space-md);
      line-height: 1.6;
    }

    .footer-copyright {
      font-size: 13px;
      color: var(--text-footer);
    }

    /* RESPONSIVE */
    @media (max-width: 1024px) {
      .hero h1 { font-size: 25px; }
      .section h2 { font-size: 22px; }
      .section h3 { font-size: 18px; }
      body { font-size: 15px; }
    }

    @media (max-width: 767px) {
      .hamburger { display: flex; }

      .main-nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bg-mobile-nav);
        flex-direction: column;
        padding: var(--space-lg);
        gap: var(--space-md);
        z-index: 99;
      }

      #mobile-toggle:checked ~ .main-nav {
        display: flex;
      }

      .hero h1 { font-size: 20px; }
      .hero { padding: var(--space-xl) 0; }
      .section h2 { font-size: 18px; }
      .section h3 { font-size: 16px; }
      body { font-size: 15px; }

      .feature-grid { grid-template-columns: 1fr; }
      .two-col { grid-template-columns: 1fr; }

      .hero-buttons {
        flex-direction: column;
        align-items: center;
      }

      .cta-button {
        font-size: 14px;
        padding: 10px 24px;
      }
    }

/* Mobile scroll fix */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* MOBILE BOTTOM CTA BAR */
.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 10px 16px;
  background: var(--bg-header);
  border-top: 1px solid var(--border-header);
  gap: 10px;
}

.mobile-bottom-bar .bottom-btn {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  font-family: 'Kanit', sans-serif;
}

.bottom-btn-login {
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.bottom-btn-login:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

.bottom-btn-register {
  background: var(--gradient-btn-primary);
  color: #fff;
  border: none;
}

.bottom-btn-register:hover {
  color: #fff;
  transform: scale(0.97);
}

@media (max-width: 767px) {
  .mobile-bottom-bar { display: flex; }
  body { padding-bottom: 70px; }
}