/* ===== CSS Reset & Base ===== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');



*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Poppins', sans-serif;

    background-color: #0b0f1a;

    color: #f8fafc;

    overflow-x: hidden;

    line-height: 1.6;

}



a {

    color: inherit;

    text-decoration: none;

}



img {

    max-width: 100%;

    display: block;

}



button {

    cursor: pointer;

    border: none;

    font-family: inherit;

}



ul {

    list-style: none;

}



/* ===== Utility Classes ===== */

.container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 1.5rem;

}



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

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



.hidden { display: none !important; }



.flex { display: flex; }

.flex-col { flex-direction: column; }

.items-center { align-items: center; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.gap-1 { gap: 0.25rem; }

.gap-3 { gap: 0.75rem; }

.gap-4 { gap: 1rem; }

.gap-5 { gap: 1.25rem; }

.gap-6 { gap: 1.5rem; }

.gap-8 { gap: 2rem; }

.gap-10 { gap: 2.5rem; }

.gap-12 { gap: 3rem; }

.gap-16 { gap: 4rem; }

.gap-20 { gap: 5rem; }



.grid { display: grid; }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }



/* ===== Typography ===== */

.gradient-text {

    background: linear-gradient(135deg, #60a5fa, #c084fc);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.text-xs { font-size: 0.75rem; }

.text-sm { font-size: 0.875rem; }

.text-lg { font-size: 1.125rem; }

.text-xl { font-size: 1.25rem; }

.text-2xl { font-size: 1.5rem; }

.text-3xl { font-size: 1.875rem; }

.text-4xl { font-size: 2.25rem; }

.text-5xl { font-size: 3rem; }

.text-6xl { font-size: 3.75rem; }

.text-7xl { font-size: 4.5rem; }

.text-8xl { font-size: 6rem; }



.font-light { font-weight: 300; }

.font-bold { font-weight: 700; }

.font-black { font-weight: 900; }

.italic { font-style: italic; }

.uppercase { text-transform: uppercase; }



.tracking-tight { letter-spacing: -0.025em; }

.tracking-tighter { letter-spacing: -0.05em; }

.tracking-widest { letter-spacing: 0.1em; }



.leading-tight { line-height: 1.25; }

.leading-none { line-height: 1; }

.leading-relaxed { line-height: 1.625; }

.leading-loose { line-height: 2; }



/* Color Classes */

.text-white { color: #ffffff; }

.text-blue-400 { color: #60a5fa; }

.text-blue-500 { color: #3b82f6; }

.text-slate-300 { color: #cbd5e1; }

.text-slate-400 { color: #94a3b8; }

.text-slate-500 { color: #64748b; }

.text-slate-600 { color: #475569; }



.bg-blue-500 { background-color: #3b82f6; }

.bg-blue-600 { background-color: #2563eb; }

.bg-blue-700 { background-color: #1d4ed8; }

.bg-black { background-color: #000000; }

.bg-red-600 { background-color: #dc2626; }



/* ===== Navigation ===== */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 50;

    transition: all 0.3s ease;

    padding: 1.25rem 1.5rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.navbar.nav-scrolled {

    background-color: rgba(11, 15, 26, 0.95);

    backdrop-filter: blur(12px);

    padding: 0.6rem 1.5rem;

    border-bottom: 1px solid rgba(59, 130, 246, 0.2);

}



.nav-brand {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 1.5rem;

    font-weight: 900;

    letter-spacing: -0.05em;

    font-style: italic;

}



.nav-brand .brand-blue { color: #3b82f6; }

.nav-brand .brand-white { color: #ffffff; }



.nav-menu-btn {

    background: none;

    color: white;

    font-size: 1.5rem;

    transition: color 0.3s ease;

}



.nav-menu-btn:hover { color: #60a5fa; }



.nav-links {

    display: none;

    gap: 2.5rem;

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.75rem;

    letter-spacing: 0.1em;

}



.nav-links a { transition: color 0.3s ease; }

.nav-links a:hover { color: #60a5fa; }



.nav-buttons { display: flex; gap: 1rem; }



.btn-login {

    display: none;

    padding: 0.5rem 1.25rem;

    font-size: 0.875rem;

    font-weight: 700;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 0.5rem;

    background: transparent;

    color: white;

    transition: background 0.3s ease;

}



.btn-login:hover { background: rgba(255, 255, 255, 0.05); }



.btn-register {

    background: #2563eb;

    padding: 0.5rem 1.75rem;

    border-radius: 0.5rem;

    font-size: 0.875rem;

    font-weight: 900;

    color: white;

    transition: background 0.3s ease;

    box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.3);

}



.btn-register:hover { background: #1d4ed8; }



/* ===== Sidebar Panel ===== */

.overview-panel {

    position: fixed;

    inset: 0 auto 0 0;

    width: 20rem;

    background: #020617;

    z-index: 60;

    padding: 2.5rem;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    border-right: 1px solid rgba(59, 130, 246, 0.2);

    transform: translateX(-100%);

    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}



.overview-panel.overview-active {

    transform: translateX(0);

}



.sidebar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 3rem;

}



.sidebar-brand {

    font-size: 1.25rem;

    font-weight: 900;

    color: #3b82f6;

    font-style: italic;

}



.sidebar-close {

    background: none;

    color: #64748b;

    font-size: 1.5rem;

    transition: color 0.3s ease;

}



.sidebar-close:hover { color: white; }



.sidebar-nav { display: flex; flex-direction: column; gap: 2rem; }



.sidebar-nav a {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-size: 1.125rem;

    font-weight: 700;

    transition: color 0.3s ease;

}



.sidebar-nav a:hover { color: #3b82f6; }



.sidebar-nav i { width: 1.5rem; text-align: center; }



.sidebar-cta {

    position: absolute;

    bottom: 2.5rem;

    left: 2.5rem;

    right: 2.5rem;

}



.sidebar-cta button {

    width: 100%;

    background: #2563eb;

    padding: 1rem;

    border-radius: 0.75rem;

    font-weight: 700;

    color: white;

}



.sidebar-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    z-index: 55;

    backdrop-filter: blur(8px);

}



.overflow-hidden { overflow: hidden; }



/* ===== Hero Section ===== */

.hero-bg {

    background: linear-gradient(rgba(11, 15, 26, 0.85), rgba(11, 15, 26, 0.85)), url('./hero_bg.png');

    background-size: cover;

    background-position: center;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 6rem 1.5rem 2rem;

    position: relative;

    overflow: hidden;

}



.hero-content {

    max-width: 64rem;

    text-align: center;

    z-index: 10;

    position: relative;

}



.hero-badge {

    display: inline-block;

    padding: 0.25rem 1rem;

    background: rgba(37, 99, 235, 0.2);

    border: 1px solid rgba(59, 130, 246, 0.3);

    border-radius: 9999px;

    color: #60a5fa;

    font-weight: 700;

    font-size: 0.75rem;

    margin-bottom: 2rem;

    text-transform: uppercase;

    letter-spacing: -0.05em;

}



.hero-title {

    font-size: 3rem;

    font-weight: 900;

    margin-bottom: 2rem;

    line-height: 1;

    letter-spacing: -0.025em;

}



.hero-subtitle {

    font-size: 1.125rem;

    color: #cbd5e1;

    margin-bottom: 3rem;

    max-width: 48rem;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.625;

    font-weight: 300;

}



.hero-subtitle span {

    color: white;

    font-weight: 700;

}



.hero-buttons {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    justify-content: center;

}



.btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    background: #2563eb;

    color: white;

    padding: 1.25rem 3rem;

    border-radius: 1rem;

    font-weight: 900;

    font-size: 1.25rem;

    transition: all 0.3s ease;

    box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.4);

}



.btn-primary:hover {

    background: #1d4ed8;

    transform: scale(1.05);

}



.btn-secondary {

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(8px);

    color: white;

    padding: 1.25rem 3rem;

    border-radius: 1rem;

    font-weight: 900;

    font-size: 1.25rem;

    transition: background 0.3s ease;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }



.hero-glow {

    position: absolute;

    width: 24rem;

    height: 24rem;

    border-radius: 9999px;

    filter: blur(120px);

}



.hero-glow.left {

    bottom: -6rem;

    left: -6rem;

    background: rgba(37, 99, 235, 0.1);

}



.hero-glow.right {

    top: 6rem;

    right: -6rem;

    background: rgba(124, 58, 237, 0.1);

}



/* ===== Section Base ===== */

.section {

    padding: 8rem 1.5rem;

}



.section-dark {

    background: rgba(30, 41, 59, 0.4);

}



.section-darker {

    background: linear-gradient(to bottom right, #0f172a, #000);

}



.section-blue {

    background: #2563eb;

    color: white;

}



.section-black {

    background: #000;

}



.section-title {

    font-size: 2.25rem;

    font-weight: 900;

    margin-bottom: 1rem;

}



.section-title .accent { color: #3b82f6; }



.section-divider {

    width: 6rem;

    height: 0.375rem;

    background: #2563eb;

    margin: 0 auto;

    border-radius: 9999px;

}



/* ===== Glass Card ===== */

.glass-card {

    background: rgba(30, 41, 59, 0.4);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.glass-card:hover {

    transform: translateY(-10px);

    border-color: #60a5fa;

    box-shadow: 0 20px 40px -20px rgba(59, 130, 246, 0.4);

}



/* ===== History Section ===== */

.history-grid {

    display: grid;

    gap: 5rem;

    align-items: center;

}



.history-image {

    position: relative;

}



.history-image img {

    border-radius: 2.5rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.history-stats {

    position: absolute;

    bottom: -2.5rem;

    right: -2.5rem;

    padding: 2rem;

    border-radius: 1.5rem;

    display: none;

}



.history-stats .stat-number {

    font-size: 2.25rem;

    font-weight: 900;

    color: #3b82f6;

}



.history-stats .stat-label {

    font-size: 0.875rem;

    font-weight: 700;

    color: #94a3b8;

}



.trust-card {

    padding: 2rem;

    border-radius: 1.5rem;

}



.trust-card h3 {

    font-size: 1.5rem;

    font-weight: 900;

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    color: #60a5fa;

}



.trust-card p {

    color: #94a3b8;

    line-height: 1.625;

    font-style: italic;

}



.why-us-title {

    font-size: 1.875rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

}



.why-us-text {

    color: #94a3b8;

    line-height: 1.625;

    margin-bottom: 2rem;

    font-size: 1.125rem;

}



.why-us-text span {

    color: white;

    font-weight: 700;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-size: 0.875rem;

    font-weight: 700;

}



.feature-item i { color: #3b82f6; }



/* ===== Games Section ===== */

.games-header {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    margin-bottom: 4rem;

}



.games-header .title { max-width: 42rem; }



.games-header .title h2 {

    font-size: 2.25rem;

    font-weight: 900;

    margin-bottom: 1rem;

}



.games-header .title .accent { color: #3b82f6; }



.games-header .title p {

    color: #94a3b8;

    font-size: 1.125rem;

}



.games-header .title p strong { color: white; }



.btn-outline {

    padding: 0.75rem 2rem;

    border: 2px solid #3b82f6;

    color: #3b82f6;

    font-weight: 700;

    border-radius: 0.75rem;

    background: transparent;

    transition: all 0.3s ease;

}



.btn-outline:hover {

    background: #3b82f6;

    color: white;

}



.games-grid {

    display: grid;

    gap: 2rem;

}



.game-card {

    border-radius: 1.5rem;

    overflow: hidden;

}



.game-card-image {

    height: 16rem;

    overflow: hidden;

    position: relative;

}



.game-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;

}



.game-card:hover .game-card-image img {

    transform: scale(1.1);

}



.game-card-image .overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

}



.game-card-image .badge {

    position: absolute;

    bottom: 1rem;

    left: 1rem;

    padding: 0.25rem 0.75rem;

    border-radius: 0.25rem;

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

}



.game-card-image .badge.hot { background: #dc2626; }

.game-card-image .badge.jackpot { background: #2563eb; }



.game-card-content {

    padding: 2rem;

}



.game-card-content h3 {

    font-size: 1.5rem;

    font-weight: 900;

    margin-bottom: 0.5rem;

    font-style: italic;

}



.game-card-content p {

    font-size: 0.875rem;

    color: #64748b;

    margin-bottom: 1.5rem;

}



.game-card-content button {

    width: 100%;

    padding: 1rem;

    background: rgba(255, 255, 255, 0.05);

    color: white;

    font-weight: 900;

    border-radius: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    font-size: 0.75rem;

    transition: background 0.3s ease;

}



.game-card-content button:hover {

    background: #2563eb;

}



/* ===== Slots, Live Casino, Table Games ===== */

.feature-section {

    display: grid;

    gap: 5rem;

    align-items: center;

}



.feature-section img {

    border-radius: 2.5rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    width: 100%;

}



.feature-section h2 {

    font-size: 2.25rem;

    font-weight: 900;

    line-height: 1.25;

}



.feature-section h2 .accent { color: #3b82f6; }



.feature-section > div > p {

    color: #94a3b8;

    font-size: 1.125rem;

    line-height: 1.625;

    margin-top: 2rem;

}



.feature-section h3 {

    font-size: 1.25rem;

    font-weight: 700;

    color: white;

    margin-top: 2rem;

    margin-bottom: 1rem;

}



.slots-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

}



.slot-item {

    padding: 1rem;

    border-radius: 0.75rem;

    text-align: center;

}



.slot-item span {

    font-weight: 700;

    color: #60a5fa;

}



.feature-list {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    color: #cbd5e1;

}



.feature-list li {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.feature-list i {

    color: #3b82f6;

    font-size: 0.5rem;

}



.table-games-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

}



.table-games-grid .item {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.table-games-grid i { color: #3b82f6; }



.btn-feature {

    margin-top: 2rem;

    display: inline-block;

    background: #2563eb;

    color: white;

    padding: 1rem 2.5rem;

    border-radius: 1rem;

    font-weight: 900;

    font-size: 1.125rem;

    transition: background 0.3s ease;

}



.btn-feature:hover { background: #1d4ed8; }



/* ===== Registration Steps ===== */

.steps-grid {

    display: grid;

    gap: 2.5rem;

}



.step-card {

    padding: 2.5rem;

    border-radius: 1.5rem;

    text-align: center;

}



.step-card .step-number {

    width: 5rem;

    height: 5rem;

    background: #2563eb;

    border-radius: 9999px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.5rem;

    font-size: 1.875rem;

    font-weight: 900;

}



.step-card h3 {

    font-size: 1.5rem;

    font-weight: 900;

    margin-bottom: 1rem;

}



.step-card p { color: #94a3b8; }



/* ===== Bonuses Section ===== */

.bonus-wrapper {

    background: linear-gradient(to bottom right, rgba(30, 58, 138, 0.6), #000);

    padding: 2.5rem;

    border-radius: 3rem;

    border: 1px solid rgba(59, 130, 246, 0.2);

    position: relative;

    overflow: hidden;

}



.bonus-grid {

    display: grid;

    gap: 4rem;

    align-items: center;

    position: relative;

    z-index: 10;

}



.bonus-title {

    font-size: 3rem;

    font-weight: 900;

    margin-bottom: 2rem;

    line-height: 1.25;

}



.bonus-title .accent { color: #3b82f6; }



.bonus-text {

    font-size: 1.25rem;

    color: #cbd5e1;

    margin-bottom: 2.5rem;

    line-height: 1.625;

    font-weight: 300;

}



.bonus-text strong { font-weight: 700; }



.promo-code {

    font-size: 1.125rem;

    color: #94a3b8;

    margin-bottom: 2rem;

    font-weight: 300;

}



.promo-code span {

    color: white;

    font-weight: 700;

    letter-spacing: 0.1em;

    background: rgba(255, 255, 255, 0.1);

    padding: 0.25rem 0.75rem;

    border-radius: 0.25rem;

}



.bonus-features {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 3rem;

}



.bonus-features li {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-size: 1.125rem;

}



.bonus-features i { color: #3b82f6; }



.btn-bonus {

    background: #2563eb;

    color: white;

    padding: 1.25rem 3rem;

    border-radius: 1rem;

    font-weight: 900;

    font-size: 1.25rem;

    transition: all 0.3s ease;

}



.btn-bonus:hover {

    background: #1d4ed8;

    transform: rotate(-1deg);

}



.bonus-image {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.bonus-image img {

    border-radius: 1.5rem;

    max-width: 24rem;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.animate-float {

    animation: float 6s ease-in-out infinite;

}



@keyframes float {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-20px); }

}



.bonus-glow {

    position: absolute;

    top: -10rem;

    right: -10rem;

    width: 24rem;

    height: 24rem;

    background: rgba(59, 130, 246, 0.2);

    filter: blur(150px);

    border-radius: 9999px;

}



/* ===== Mobile App Section ===== */

.mobile-grid {

    display: grid;

    gap: 5rem;

    align-items: center;

}



.mobile-image {

    position: relative;

}



.mobile-image img {

    border-radius: 1.5rem;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    transform: rotate(6deg);

    transition: transform 0.7s ease;

}



.mobile-image img:hover {

    transform: rotate(0deg);

}



.mobile-content h2 {

    font-size: 3rem;

    font-weight: 900;

    line-height: 1.25;

    margin-bottom: 2rem;

}



.mobile-content > p {

    font-size: 1.25rem;

    font-weight: 300;

    opacity: 0.9;

    line-height: 1.625;

    margin-bottom: 2rem;

}



.app-buttons {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.app-btn {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1rem 2rem;

    border-radius: 1rem;

    font-weight: 700;

    transition: background 0.3s ease;

}



.app-btn.android {

    background: #000;

    color: white;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.app-btn.android:hover { background: #0f172a; }



.app-btn.ios {

    background: white;

    color: black;

}



.app-btn.ios:hover { background: #f1f5f9; }



.app-btn i { font-size: 1.875rem; }



.app-btn .label { font-size: 0.625rem; text-transform: uppercase; opacity: 0.6; }

.app-btn .store { font-size: 1.125rem; }



.mobile-stats {

    padding-top: 2.5rem;

    margin-top: 2.5rem;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

    display: flex;

    gap: 3rem;

}



.mobile-stats .stat-number {

    font-size: 1.875rem;

    font-weight: 900;

}



.mobile-stats .stat-label {

    font-size: 0.75rem;

    text-transform: uppercase;

    font-weight: 700;

    opacity: 0.6;

}



/* ===== Reviews Section ===== */

.reviews-section {

    background: #020617;

    overflow: hidden;

}



.reviews-title {

    font-size: 2.25rem;

    font-weight: 900;

    font-style: italic;

    margin-bottom: 3rem;

}



.reviews-title .accent { color: #3b82f6; }



.reviews-container {

    display: flex;

    gap: 2rem;

    transition: transform 0.7s ease-in-out;

}



.review-card {

    min-width: 100%;

    padding: 2.5rem;

    border-radius: 2.5rem;

    border-color: rgba(59, 130, 246, 0.1);

}



.review-stars {

    display: flex;

    gap: 0.25rem;

    color: #3b82f6;

    margin-bottom: 1.5rem;

}



.review-text {

    font-size: 1.125rem;

    color: #cbd5e1;

    font-style: italic;

    margin-bottom: 2rem;

}



.review-author {

    display: flex;

    align-items: center;

    gap: 1.25rem;

}



.review-author img {

    width: 3.5rem;

    height: 3.5rem;

    border-radius: 9999px;

    border: 2px solid #3b82f6;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);

}



.review-author .name {

    font-weight: 900;

    color: white;

}



.review-author .title {

    font-size: 0.75rem;

    font-weight: 700;

    color: #3b82f6;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}



.review-nav {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    margin-top: 4rem;

}



.review-nav button {

    width: 4rem;

    height: 4rem;

    border-radius: 9999px;

    border: 2px solid #1e293b;

    background: transparent;

    color: white;

    transition: all 0.3s ease;

}



.review-nav button:hover {

    border-color: #3b82f6;

    background: rgba(37, 99, 235, 0.1);

}



/* ===== FAQ Section ===== */

.faq-container { max-width: 56rem; margin: 0 auto; }



.faq-title {

    font-size: 2.25rem;

    font-weight: 900;

    text-transform: uppercase;

    margin-bottom: 1rem;

}



.faq-title .accent { color: #3b82f6; }



.faq-subtitle {

    color: #94a3b8;

    font-weight: 700;

    margin-bottom: 5rem;

}



.accordion-item {

    border-radius: 1.5rem;

    padding: 2rem;

    cursor: pointer;

    margin-bottom: 1rem;

}



.accordion-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.accordion-header h4 {

    font-size: 1.25rem;

    font-weight: 700;

    transition: color 0.3s ease;

}



.accordion-item:hover .accordion-header h4 {

    color: #60a5fa;

}



.accordion-header i {

    color: #3b82f6;

    transition: transform 0.3s ease;

}



.accordion-content {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease;

    margin-top: 1.5rem;

    color: #94a3b8;

    line-height: 1.625;

}



.accordion-item.accordion-active .accordion-content {

    max-height: 600px;

}



.accordion-item.accordion-active .accordion-header i {

    transform: rotate(180deg);

}



/* ===== Footer ===== */

.footer {

    background: #000;

    padding-top: 8rem;

    padding-bottom: 3rem;

    border-top: 1px solid rgba(59, 130, 246, 0.1);

}



.footer-grid {

    display: grid;

    gap: 4rem;

    margin-bottom: 6rem;

}



.footer-brand {

    font-size: 1.875rem;

    font-weight: 900;

    font-style: italic;

}



.footer-brand .blue { color: #3b82f6; }

.footer-brand .white { color: white; }



.footer-desc {

    color: #64748b;

    font-size: 0.875rem;

    line-height: 2;

    margin: 2rem 0;

}



.footer-social {

    display: flex;

    gap: 1.5rem;

}



.footer-social a {

    font-size: 1.5rem;

    color: #475569;

    transition: color 0.3s ease;

}



.footer-social a:hover { color: #3b82f6; }



.footer-column h5 {

    color: white;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    font-size: 0.75rem;

    margin-bottom: 2.5rem;

}



.footer-column h5.blue { color: #3b82f6; }



.footer-column ul {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



.footer-column a {

    color: #64748b;

    font-weight: 700;

    font-size: 0.875rem;

    transition: color 0.3s ease;

}



.footer-column a:hover { color: #3b82f6; }



.footer-column > p {

    font-size: 0.875rem;

    color: #94a3b8;

    font-weight: 700;

    margin-bottom: 1.5rem;

}



.payment-icons {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1rem;

}



.payment-icons div {

    background: rgba(255, 255, 255, 0.05);

    padding: 0.75rem;

    border-radius: 0.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    filter: grayscale(100%);

    transition: filter 0.3s ease;

}



.payment-icons div:hover { filter: grayscale(0%); }



.payment-icons i { color: #94a3b8; }



.footer-disclaimer {

    margin-top: 2rem;

    font-size: 0.75rem;

    color: #475569;

    font-weight: 700;

    font-style: italic;

    line-height: 1.625;

}



.footer-bottom {

    padding-top: 3rem;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    text-align: center;

    color: #475569;

    font-size: 0.625rem;

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: 0.2em;

}



/* ===== Responsive Styles ===== */

@media (min-width: 640px) {

    .hero-buttons { flex-direction: row; }

    .app-buttons { flex-direction: row; }

    .slots-grid { grid-template-columns: repeat(3, 1fr); }

    .btn-login { display: block; }

}



@media (min-width: 768px) {

    .hero-title { font-size: 6rem; }

    .hero-subtitle { font-size: 1.5rem; }

    

    .nav-links { display: flex; }

    

    .history-grid { grid-template-columns: repeat(2, 1fr); }

    .history-stats { display: block; }

    

    .games-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }

    .games-grid { grid-template-columns: repeat(2, 1fr); }

    

    .feature-section { grid-template-columns: repeat(2, 1fr); }

    .feature-section h2 { font-size: 3.75rem; }

    

    .steps-grid { grid-template-columns: repeat(3, 1fr); }

    

    .bonus-wrapper { padding: 6rem; }

    .bonus-grid { grid-template-columns: repeat(2, 1fr); }

    .bonus-title { font-size: 4.5rem; }

    

    .mobile-grid { grid-template-columns: repeat(2, 1fr); }

    .mobile-content h2 { font-size: 4.5rem; }

    .mobile-image { order: -1; }

    

    .review-card { min-width: calc(33.333% - 1.5rem); }

    

    .faq-title { font-size: 3.75rem; }

    

    .footer-grid { grid-template-columns: repeat(4, 1fr); }

}



@media (min-width: 1024px) {

    .games-grid { grid-template-columns: repeat(4, 1fr); }

    

    .section-title { font-size: 3.75rem; }

}