/* Hero Section */
    .heroSection {
      position: relative;
      padding: 100px 0 80px;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 0%, rgba(184,134,11,0.12) 0%, transparent 65%), linear-gradient(180deg, #0a0a0f 0%, #0d0d1a 100%);
    }

    .heroSection::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b8860b' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }

    .heroSection::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0; right: 0;
      height: 80px;
      background: linear-gradient(to bottom, transparent, var(--surface));
      pointer-events: none;
    }

    .heroContent { position: relative; z-index: 2; }

    .heroSection h1 {
      background: linear-gradient(135deg, #ffd700 0%, #fff8dc 40%, #ffd700 70%, #b8860b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 24px;
      text-shadow: none;
    }

    .heroSection p {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--textSecondary);
      max-width: 720px;
      margin-bottom: 32px;
    }

    .heroBadges {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 36px;
    }

    .heroBadge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(184,134,11,0.08);
      border: 1px solid var(--borderSubtle);
      border-radius: 50px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--textPrimary);
    }

    .heroBadgeDot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accentBright);
      box-shadow: 0 0 6px rgba(255,215,0,0.7);
      flex-shrink: 0;
    }

    .heroStats {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 40px;
    }

    .heroStat {
      text-align: center;
      padding: 20px 28px;
      background: rgba(184,134,11,0.06);
      border: 1px solid var(--borderSubtle);
      border-radius: var(--radius);
      min-width: 120px;
    }

    .heroStatNum {
      display: block;
      font-size: 2rem;
      font-weight: 700;
      background: var(--gradientGold);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 4px;
    }

    .heroStatLabel {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--textSecondary);
    }

    .heroCtaGroup {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .heroTrust {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      color: var(--textMuted);
    }

    .heroTrustDot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--textMuted);
    }

    /* Licensing Section */
    .licensingSection {
      padding: 80px 0;
      background: var(--surface);
    }

    .licensingSection .sectionHead { margin-bottom: 32px; }

    .licensingGrid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
      margin: 32px 0;
    }

    .licenseCard {
      padding: 24px;
      background: var(--surfaceCard);
      border: 1px solid var(--borderSubtle);
      border-radius: var(--radius);
      text-align: center;
      transition: all 0.3s ease;
    }

    .licenseCard:hover {
      border-color: var(--borderAccent);
      box-shadow: var(--shadowGlow);
      transform: translateY(-4px);
    }

    .licenseIcon {
      font-size: 1.5rem;
      margin-bottom: 12px;
      display: block;
    }

    .licenseCardTitle {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--accentBright);
      margin-bottom: 4px;
    }

    .licenseCardSub {
      font-size: 0.75rem;
      color: var(--textMuted);
    }

    /* Providers Section */
    .providersSection {
      padding: 80px 0;
      background: linear-gradient(180deg, var(--surface) 0%, #0d0d1a 100%);
    }

    /* Game Categories */
    .gameCategoriesSection {
      padding: 80px 0;
      background: var(--surface);
    }

    .gameCard { height: auto; }

    .gameCard figure {
      margin: 0;
      overflow: hidden;
    }

    .gameCard figure img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .gameCard:hover figure img { transform: scale(1.08); }

    .gameCardBody {
      padding: 20px;
    }

    .gameCardBody h3 {
      color: var(--accentBright);
      margin-bottom: 10px;
    }

    .gameCardBody p {
      font-size: 0.9rem;
      color: var(--textSecondary);
      margin: 0;
    }

    /* Payment Methods */
    .paymentSection {
      padding: 80px 0;
      background: linear-gradient(180deg, #0d0d1a 0%, var(--surface) 100%);
    }

    .paymentTable {
      width: 100%;
      border-collapse: collapse;
    }

    .paymentTable thead th {
      padding: 16px 20px;
      background: rgba(184,134,11,0.15);
      color: var(--accentBright);
      font-weight: 700;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      border-bottom: 2px solid var(--borderAccent);
      text-align: left;
    }

    .paymentTable tbody tr {
      border-bottom: 1px solid var(--borderSubtle);
      transition: background 0.2s ease;
    }

    .paymentTable tbody tr:hover { background: rgba(184,134,11,0.04); }

    .paymentTable tbody td {
      padding: 14px 20px;
      color: var(--textPrimary);
      font-size: 0.9rem;
    }

    .paymentTable tbody td:last-child {
      color: var(--textSecondary);
      font-size: 0.82rem;
    }

    .paymentTypeBadge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 50px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .badgeCrypto { background: rgba(255,215,0,0.1); color: #ffd700; border: 1px solid rgba(255,215,0,0.2); }
    .badgeEwallet { background: rgba(100,200,255,0.1); color: #64c8ff; border: 1px solid rgba(100,200,255,0.2); }
    .badgeCard { background: rgba(180,120,255,0.1); color: #b478ff; border: 1px solid rgba(180,120,255,0.2); }
    .badgeBank { background: rgba(100,220,130,0.1); color: #64dc82; border: 1px solid rgba(100,220,130,0.2); }
    .badgeVoucher { background: rgba(255,140,60,0.1); color: #ff8c3c; border: 1px solid rgba(255,140,60,0.2); }

    /* Responsible Gaming */
    .responsibleSection {
      padding: 80px 0;
      background: var(--surface);
    }

    .highlightBox {
      padding: 32px;
      background: var(--surfaceCard);
      border: 1px solid var(--borderSubtle);
      border-radius: var(--radiusLg);
      height: auto;
      transition: all 0.3s ease;
    }

    .highlightBox:hover {
      border-color: var(--borderAccent);
      box-shadow: var(--shadowGlow);
    }

    .highlightBox h3 {
      color: var(--accentBright);
      margin-bottom: 12px;
    }

    .highlightBox p {
      color: var(--textSecondary);
      font-size: 0.92rem;
      margin: 0;
    }

    /* Login Guide */
    .loginSection {
      padding: 80px 0;
      background: linear-gradient(180deg, var(--surface) 0%, #0d0d1a 100%);
    }

    .stepsList { list-style: none; padding: 0; }

    .stepItem {
      display: flex;
      gap: 24px;
      padding: 28px;
      background: var(--surfaceCard);
      border: 1px solid var(--borderSubtle);
      border-radius: var(--radius);
      margin-bottom: 16px;
      transition: all 0.3s ease;
      align-items: flex-start;
    }

    .stepItem:hover {
      border-color: var(--borderAccent);
      transform: translateX(4px);
    }

    .stepNumber {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: var(--gradientGold);
      border-radius: 50%;
      font-weight: 700;
      font-size: 1.1rem;
      color: #0a0a0f;
      flex-shrink: 0;
      box-shadow: var(--shadowAccent);
    }

    .stepContent h3 {
      color: var(--accentBright);
      margin-bottom: 8px;
    }

    .stepContent p {
      color: var(--textSecondary);
      font-size: 0.9rem;
      margin: 0;
    }

    /* FAQ */
    .faqSection {
      padding: 80px 0;
      background: var(--surface);
    }

    .accordionItem {
      background: var(--surfaceCard);
      border: 1px solid var(--borderSubtle);
      border-radius: var(--radius);
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color 0.3s ease;
    }

    .accordionItem:hover { border-color: var(--borderAccent); }

    .accordionToggle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 20px 24px;
      background: transparent;
      border: none;
      color: var(--textPrimary);
      font-size: 1rem;
      font-weight: 600;
      font-family: 'Georgia', serif;
      text-align: left;
      cursor: pointer;
      gap: 16px;
      transition: color 0.3s ease;
    }

    .accordionToggle:hover { color: var(--accentBright); }

    .accordionToggle[aria-expanded="true"] { color: var(--accentBright); }

    .accordionArrow {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid var(--borderAccent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: var(--accentBright);
      transition: transform 0.3s ease;
    }

    .accordionToggle[aria-expanded="true"] .accordionArrow { transform: rotate(180deg); }

    .accordionBody {
      display: none;
      padding: 0 24px 20px;
    }

    .accordionBody p {
      color: var(--textSecondary);
      font-size: 0.92rem;
      margin: 0;
    }

    .accordionBody.open { display: block; }

    @media (max-width: 767px) {
      .sectionPadding { padding: 60px 0; }
      .heroSection { padding: 60px 0 50px; }
      .heroStats { gap: 12px; }
      .heroStat { padding: 16px 20px; min-width: 100px; }
      .heroStatNum { font-size: 1.5rem; }
      .heroCtaGroup { flex-direction: column; align-items: flex-start; }
      .licensingGrid { grid-template-columns: 1fr; }
      .stepItem { flex-direction: column; gap: 16px; }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
      .licensingGrid { grid-template-columns: 1fr 1fr; }
    }

    @media (min-width: 1024px) {
      .heroSection { padding: 120px 0 100px; }
    }

    @media (min-width: 1440px) {
      .heroSection { padding: 140px 0 120px; }
    }