/* ============================================
   INDEX.CSS — Mobile-First Luxury Landing Page
   Enforces mobile presentation on all screens
   ============================================ */

.content-section {
    padding: 2.5rem 0;
    position: relative;
}

.content-section--alt {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--gold-border-light);
    border-bottom: 1px solid var(--gold-border-light);
}

.section-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ============================================
   HERO SECTION (Mobile-First)
   ============================================ */
.hero {
    position: relative;
    padding: 1.8rem 0 1.25rem;
    background: linear-gradient(180deg, #fefdf9 0%, #f6f1e3 100%);
    border-bottom: 1px solid var(--gold-border);
    overflow: hidden;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 1.25rem;
}

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

.hero-logo {
    margin-bottom: 0.85rem;
    display: flex;
    justify-content: center;
}

.hero-logo img {
    max-height: 48px;
    max-width: 190px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

.hero-badge-wrap {
    margin-bottom: 0.85rem;
}

.hero-badge {
    background: #fdf5df;
    border: 1px solid var(--gold-border);
    color: var(--gold-dark);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-subtle);
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.2;
    margin-bottom: 0.85rem;
    letter-spacing: -0.01em;
}

.hero-desc {
    font-size: 0.88rem;
    color: var(--text-body);
    line-height: 1.6;
    margin-bottom: 1.4rem;
    padding: 0 4px;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 1.4rem;
}

.hero-actions .btn-primary,
.hero-actions .btn-outline {
    width: 100%;
}

.hero-trust-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.hero-trust-list span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hero-trust-list i {
    color: var(--gold-dark);
}

/* Hero Aside / Jackpot Card */
.hero-sidebar {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.4rem 1.1rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hero-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-gold);
}

.jackpot-block {
    margin-bottom: 1.2rem;
}

.jackpot-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--gold-dark);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.jackpot-amount {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 900;
    color: #b8860b;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.jackpot-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.jackpot-sub i {
    color: #e67e22;
}

.sidebar-divider {
    height: 1px;
    background: var(--gold-border-light);
    margin: 1rem 0;
}

.sidebar-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ss-item {
    background: #fbf8f0;
    border: 1px solid var(--gold-border-light);
    border-radius: var(--radius-sm);
    padding: 8px 4px;
}

.ss-item strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.2;
    margin-bottom: 2px;
}

.ss-item span {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

/* Live Winning Marquee */
.live-wins-bar {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    position: relative;
    z-index: 2;
}

.live-wins-label {
    background: var(--gradient-gold);
    color: #1a170d;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 8px 10px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.wins-track-container {
    overflow: hidden;
    flex: 1;
    white-space: nowrap;
}

.wins-track {
    display: inline-flex;
    animation: marquee 35s linear infinite;
    align-items: center;
    padding: 8px 0;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.win-ticket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    font-size: 0.76rem;
    color: var(--text-body);
    border-right: 1px solid var(--gold-border-light);
}

.win-user {
    font-weight: 700;
    color: var(--text-heading);
}

.win-amount {
    font-weight: 800;
    color: var(--gold-dark);
}

/* ============================================
   ABOUT / SHOWCASE SECTION (Mobile Layout)
   ============================================ */
.about-layout {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.about-visual {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-card-tall {
    background: linear-gradient(180deg, #ffffff 0%, #fbf6ea 100%);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.4rem;
    box-shadow: var(--shadow-subtle);
}

.act-icon {
    width: 44px;
    height: 44px;
    background: var(--gradient-gold);
    color: #1a170d;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.act-body h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
    color: var(--text-heading);
}

.act-body p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.act-badge {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gold-dark);
    background: #f7eed8;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.about-card-mini {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-subtle);
}

.acm-icon {
    font-size: 1.3rem;
    color: var(--gold-dark);
    margin-bottom: 0.35rem;
}

.about-card-mini h5 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-heading);
    margin-bottom: 0.2rem;
}

.about-card-mini p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.about-content {
    text-align: center;
}

.about-desc {
    color: var(--text-body);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

.about-features-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.4rem;
}

.afr-item {
    background: #ffffff;
    border: 1px solid var(--gold-border-light);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.afr-icon {
    width: 34px;
    height: 34px;
    background: #fbf5e6;
    color: var(--gold-dark);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.afr-text strong {
    display: block;
    font-size: 0.85rem;
    color: var(--text-heading);
}

.afr-text span {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.about-quote-box {
    background: #fbf8f0;
    border: 1px solid var(--gold-border-light);
    border-left: 3px solid var(--gold-primary);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aqb-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: #f5eedb;
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.aqb-quote p {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-heading);
    line-height: 1.45;
}

.aqb-quote span {
    font-size: 0.68rem;
    color: var(--gold-dark);
    font-weight: 700;
}

/* ============================================
   GAMES CATEGORIES SECTION (Mobile 2-Column Grid)
   ============================================ */
.games-section {
    background: #ffffff;
    border-top: 1px solid var(--gold-border-light);
    border-bottom: 1px solid var(--gold-border-light);
}

/* 2-Columns grid on mobile - Industry standard for casino games */
.masonry-grid, .games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 2rem;
}

.game-card, .game-card-angular {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.game-card-img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
}

.game-card-icon {
    width: 34px;
    height: 34px;
    background: #fcf8ee;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-full);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.game-card-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.game-card-desc {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.game-card-play {
    width: 100%;
}

.game-card-play .btn-primary {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.72rem;
}

/* Providers Strip */
.providers-strip {
    background: #fdfbf7;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.providers-track-container {
    overflow: hidden;
    white-space: nowrap;
}

.providers-track {
    display: inline-flex;
    animation: marquee 25s linear infinite;
    gap: 2rem;
    align-items: center;
}

.provider-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.provider-logo i {
    color: var(--gold-primary);
}

/* Payment Strip (Compact) */
.payment-strip {
    background: #fbf8f0;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
}

.ps-label {
    font-weight: 800;
    color: var(--gold-dark);
    font-size: 0.74rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ps-items-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.ps-item {
    background: #ffffff;
    border: 1px solid var(--gold-border-light);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-heading);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ps-item i {
    color: var(--gold-dark);
}

/* ============================================
   UPCOMING EVENTS SECTION (Mobile Stacked Cards)
   ============================================ */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-row {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
}

.event-date-col {
    background: #fbf5e6;
    border-bottom: 1px solid var(--gold-border);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-day {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gold-dark);
}

.event-month {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--text-heading);
    text-transform: uppercase;
    margin-left: 6px;
}

.event-status {
    font-size: 0.65rem;
    font-weight: 800;
    background: var(--gold-primary);
    color: #fff;
    padding: 2px 7px;
    border-radius: var(--radius-full);
}

.event-info-col {
    padding: 1rem;
}

.event-prize-tag {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--gold-dark);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.event-info-col h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.event-info-col p {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.event-visual-col {
    display: none; /* Hidden on mobile to keep layout clean */
}

/* ============================================
   VIP TIERS SECTION (Mobile Stacked Cards)
   ============================================ */
.vip-tiers-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vip-tier-horizontal {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.1rem;
    box-shadow: var(--shadow-subtle);
    position: relative;
}

.vip-tier-horizontal--featured {
    border: 2px solid var(--gold-primary);
    background: linear-gradient(180deg, #ffffff 0%, #fefcf5 100%);
}

.vip-badge-hot {
    position: absolute;
    top: -10px;
    right: 14px;
    background: var(--gradient-gold);
    color: #1a170d;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-gold);
}

.vip-tier-icon {
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
}

.vip-tier-info h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-heading);
    margin-bottom: 0.2rem;
}

.vip-tier-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.vip-tier-info > p {
    color: var(--gold-dark);
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 0.85rem;
}

.vip-perks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.vip-perks li {
    font-size: 0.8rem;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vip-perks li i {
    color: var(--gold-dark);
    font-size: 0.72rem;
}

.vip-action .btn-primary,
.vip-action .btn-secondary {
    width: 100%;
}

/* ============================================
   BLOG / NEWS / GALLERY (Mobile Stacked)
   ============================================ */
.news-split-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.news-featured {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
}

.news-featured img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-featured-content {
    padding: 1.1rem;
}

.news-kicker {
    background: #f7eed8;
    color: var(--gold-dark);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-bottom: 0.5rem;
}

.news-featured-content h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.news-featured-content p {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.news-link-more {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-list-item {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: flex;
    gap: 12px;
    align-items: center;
}

.news-list-item img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.news-content h3 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.news-content p {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   VIP MANAGEMENT / CONCIERGE (Mobile Stacked)
   ============================================ */
.organizer-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.organizer-photo-card {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    max-width: 260px;
    margin: 0 auto;
}

.organizer-photo-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.organizer-badge-overlay {
    padding: 10px;
    background: #ffffff;
    border-top: 1px solid var(--gold-border-light);
}

.organizer-badge-overlay strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-heading);
}

.organizer-badge-overlay span {
    font-size: 0.72rem;
    color: var(--gold-dark);
    font-weight: 700;
}

.organizer-title-sub {
    font-size: 0.85rem;
    color: var(--gold-dark);
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.organizer-bio {
    color: var(--text-body);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.organizer-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.4rem;
}

.org-social-btn {
    width: 38px;
    height: 38px;
    background: var(--gradient-gold);
    color: #1a170d;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.organizer-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.org-thumb-item {
    background: #fbf8f0;
    border: 1px solid var(--gold-border-light);
    border-radius: var(--radius-sm);
    padding: 8px 4px;
}

.org-thumb-item i {
    font-size: 1.2rem;
    color: var(--gold-dark);
    margin-bottom: 4px;
    display: block;
}

.org-thumb-item strong {
    display: block;
    font-size: 0.74rem;
    color: var(--text-heading);
    margin-bottom: 1px;
}

.org-thumb-item span {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* ============================================
   TESTIMONIALS (Mobile Stacked)
   ============================================ */
.testimonials-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.testimonial-card {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1rem;
    box-shadow: var(--shadow-subtle);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.85rem;
}

.testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--gold-primary);
    background: #f5eedb;
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    flex-shrink: 0;
}

.testimonial-rating {
    color: #e67e22;
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.testimonial-card p {
    color: var(--text-body);
    font-size: 0.82rem;
    line-height: 1.55;
    font-style: italic;
    margin-bottom: 0.65rem;
}

.testimonial-user strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-heading);
}

.testimonial-user span {
    font-size: 0.72rem;
    color: var(--gold-dark);
    font-weight: 600;
}

/* ============================================
   WHY CHOOSE US & APP SECTION (Mobile)
   ============================================ */
.why-layout {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.why-left {
    text-align: center;
}

.why-lead {
    font-size: 0.88rem;
    color: var(--text-body);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.why-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.5rem;
    text-align: left;
}

.why-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--text-heading);
    font-weight: 600;
}

.why-list li i {
    color: var(--gold-dark);
}

.why-choose-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.why-card {
    background: #fbf8f0;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
}

.why-card-icon {
    font-size: 1.5rem;
    color: var(--gold-dark);
    margin-bottom: 0.5rem;
}

.why-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
}

.why-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}

.why-card-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--text-body);
    text-align: left;
}

.why-card-list li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.why-card-list li i {
    color: var(--gold-dark);
}

.why-card-icons {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 1.3rem;
    color: var(--gold-dark);
}

/* App Download */
.app-block {
    background: linear-gradient(135deg, #ffffff 0%, #fcf7ec 100%);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.8rem 1.1rem;
    text-align: center;
}

.app-block > p {
    font-size: 0.85rem;
    color: var(--text-body);
    margin-bottom: 1.25rem;
}

.app-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.4rem;
}

.app-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--gold-border-light);
    padding-top: 1rem;
}

.app-badge-item {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.app-badge-item i {
    color: var(--gold-dark);
}

/* ============================================
   FAQ SECTION (Mobile Accordions)
   ============================================ */
.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: #fbf9f4;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.faq-item.active {
    border-color: var(--gold-primary);
    background: #ffffff;
}

.faq-question {
    padding: 0.95rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 8px;
}

.faq-question i {
    font-size: 0.8rem;
    color: var(--gold-dark);
    transition: transform 0.25s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1rem;
}

.faq-item.active .faq-answer {
    max-height: 250px;
    padding: 0 1rem 1rem;
}

.faq-answer p {
    font-size: 0.82rem;
    color: var(--text-body);
    line-height: 1.55;
}

/* ============================================
   FEATURES & SEO SECTION (Mobile)
   ============================================ */
.features-grid-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 2rem;
}

.feature-box {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-subtle);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: #fbf5e6;
    color: var(--gold-dark);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 0.85rem;
}

.feature-box h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
}

.feature-box p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.seo-block {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.1rem;
    box-shadow: var(--shadow-subtle);
}

.seo-block h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-heading);
    margin-bottom: 0.75rem;
    text-align: center;
}

.seo-block p {
    font-size: 0.82rem;
    color: var(--text-body);
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

/* ============================================
   TRUST & PAYMENTS (Mobile)
   ============================================ */
.trust-layout {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.trust-main {
    text-align: center;
}

.trust-lead {
    font-size: 0.85rem;
    color: var(--text-body);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.trust-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.trust-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-heading);
    font-weight: 600;
}

.trust-list li i {
    color: var(--gold-dark);
}

.trust-side {
    background: #fbf8f0;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
}

.trust-side h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-heading);
    margin-bottom: 0.85rem;
}

.trust-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 1.25rem;
}

.trust-pay-grid span {
    background: #ffffff;
    border: 1px solid var(--gold-border-light);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.trust-pay-grid span i {
    color: var(--gold-dark);
}

.trust-side .btn-primary {
    width: 100%;
}

/* ============================================
   RESPONSIBLE GAMING (Mobile)
   ============================================ */
.responsible-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.responsible-card {
    background: #ffffff;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1rem;
    text-align: center;
}

.responsible-card > i {
    font-size: 1.6rem;
    color: var(--gold-dark);
    margin-bottom: 0.6rem;
    display: block;
}

.responsible-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
}

.responsible-card p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Footer Register CTA Bar */
.footer-register-banner {
    background: linear-gradient(90deg, #181920 0%, #0f1015 100%);
    border-top: 1px solid rgba(197, 155, 39, 0.3);
    padding: 2rem 1rem;
    color: #ffffff;
    text-align: center;
}

.footer-register-banner .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.footer-register-banner h3 {
    font-family: var(--font-heading);
    color: #ffffff;
    font-size: 1.35rem;
}