/* ================================================
   BATWIN GAME — Premium Gaming Platform
   Design System v2.0
   ================================================ */

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

/* ================================================
   CSS Custom Properties
   ================================================ */
:root {
  --bg-primary: #0B1020;
  --bg-secondary: #11182D;
  --bg-card: rgba(255,255,255,0.06);
  --bg-glass: rgba(255,255,255,0.08);
  --border-glass: rgba(255,255,255,0.12);
  --border-glow: rgba(77,124,254,0.35);
  --electric-blue: #4D7CFE;
  --soft-purple: #8B5CF6;
  --luxury-gold: #FFC857;
  --neon-cyan: #38BDF8;
  --soft-pink: #EC4899;
  --success: #22c55e;
  --text-primary: #FFFFFF;
  --text-secondary: #B6C2D9;
  --text-muted: #7E8AA8;
  --grad-primary: linear-gradient(135deg,#4D7CFE,#8B5CF6);
  --grad-gold: linear-gradient(135deg,#FFC857,#FF9500);
  --grad-cyan: linear-gradient(135deg,#38BDF8,#4D7CFE);
  --grad-pink: linear-gradient(135deg,#EC4899,#8B5CF6);
  --shadow-glow: 0 0 40px rgba(77,124,254,0.3);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-hover: 0 24px 60px rgba(77,124,254,0.22);
  --font: 'Space Grotesk',sans-serif;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px;
  --t-fast: 0.2s ease;
  --t-smooth: 0.4s cubic-bezier(0.4,0,0.2,1);
  --t-bounce: 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* ================================================
   Reset & Base
   ================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
input,textarea,select,button{font-family:var(--font)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--electric-blue);border-radius:2px}
::selection{background:rgba(77,124,254,0.3);color:#fff}

/* ================================================
   Typography
   ================================================ */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.15;color:var(--text-primary)}
h1{font-size:clamp(2.6rem,5.5vw,5.5rem);font-weight:800;letter-spacing:-0.025em}
h2{font-size:clamp(1.9rem,4vw,3.5rem);font-weight:700;letter-spacing:-0.02em}
h3{font-size:clamp(1.4rem,2.5vw,2.2rem);font-weight:700}
h4{font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:600}
p{color:var(--text-secondary);line-height:1.8}

.gradient-text{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-gold{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-cyan{background:var(--grad-cyan);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-muted{color:var(--text-muted)}
.text-sm{font-size:0.875rem}
.text-xs{font-size:0.75rem}
.fw-700{font-weight:700}
.fw-800{font-weight:800}

/* ================================================
   Layout
   ================================================ */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-lg{max-width:1400px;margin:0 auto;padding:0 24px}
section{padding:100px 0;position:relative;overflow:hidden}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* ================================================
   Glass Card
   ================================================ */
.glass-card{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--r-lg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:var(--t-smooth)}
.glass-card:hover{background:rgba(255,255,255,0.09);border-color:var(--border-glow);transform:translateY(-5px);box-shadow:var(--shadow-hover)}

/* ================================================
   Buttons
   ================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--r-md);font-size:0.95rem;font-weight:600;cursor:pointer;transition:var(--t-smooth);border:none;white-space:nowrap;position:relative;overflow:hidden;text-decoration:none;line-height:1}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background var(--t-fast)}
.btn:hover::after{background:rgba(255,255,255,0.08)}

.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 4px 20px rgba(77,124,254,0.4)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(77,124,254,0.55)}

.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-glass);backdrop-filter:blur(10px)}
.btn-secondary:hover{border-color:var(--electric-blue);transform:translateY(-3px);box-shadow:0 8px 24px rgba(77,124,254,0.2)}

.btn-gold{background:var(--grad-gold);color:#0B1020;font-weight:700;box-shadow:0 4px 20px rgba(255,200,87,0.4)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(255,200,87,0.55)}

.btn-outline{background:transparent;color:var(--electric-blue);border:1px solid var(--electric-blue)}
.btn-outline:hover{background:rgba(77,124,254,0.1);transform:translateY(-2px)}

.btn-lg{padding:17px 36px;font-size:1.05rem}
.btn-xl{padding:20px 44px;font-size:1.15rem;border-radius:var(--r-lg)}
.btn-sm{padding:10px 20px;font-size:0.85rem;border-radius:var(--r-sm)}
.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--r-sm)}

.btn-glow{animation:glowPulse 2.5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 4px 20px rgba(77,124,254,0.4)}50%{box-shadow:0 4px 50px rgba(77,124,254,0.75),0 0 70px rgba(139,92,246,0.35)}}

.btn-magnetic{transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}

/* ================================================
   Scroll Progress
   ================================================ */
#scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--grad-primary);z-index:9999;transition:width 0.1s linear;width:0}

/* ================================================
   Loading Screen
   ================================================ */
#loading-screen{position:fixed;inset:0;background:var(--bg-primary);z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;transition:opacity 0.6s ease,visibility 0.6s ease}
#loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loading-logo{font-size:2.2rem;font-weight:800;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:logoBreathe 1.5s ease-in-out infinite}
@keyframes logoBreathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(0.97)}}
.loading-bar{width:220px;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
.loading-fill{height:100%;background:var(--grad-primary);border-radius:2px;animation:loadFill 1.6s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes loadFill{from{width:0}to{width:100%}}
.loading-text{font-size:0.8rem;color:var(--text-muted);letter-spacing:0.1em;text-transform:uppercase}

/* ================================================
   Particles Canvas
   ================================================ */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.5}

/* ================================================
   Navigation
   ================================================ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 0;transition:var(--t-smooth)}
#navbar.scrolled{background:rgba(11,16,32,0.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border-glass);padding:12px 0}

.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}

.navbar-logo{display:flex;align-items:center;gap:10px;font-size:1.35rem;font-weight:800;z-index:1001}
.logo-icon{width:38px;height:38px;background:var(--grad-primary);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 0 24px rgba(77,124,254,0.5);animation:logoPulse 3s ease-in-out infinite;flex-shrink:0}
@keyframes logoPulse{0%,100%{box-shadow:0 0 20px rgba(77,124,254,0.5)}50%{box-shadow:0 0 40px rgba(139,92,246,0.7)}}
.logo-text{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.navbar-nav{display:flex;align-items:center;gap:4px}
.navbar-nav a{padding:8px 14px;border-radius:var(--r-sm);color:var(--text-secondary);font-weight:500;font-size:0.9rem;transition:var(--t-fast)}
.navbar-nav a:hover,.navbar-nav a.active{color:var(--text-primary);background:var(--bg-card)}

.navbar-actions{display:flex;align-items:center;gap:10px}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:9px;border-radius:var(--r-sm);border:1px solid var(--border-glass);background:var(--bg-card);z-index:1001}
.hamburger span{display:block;width:20px;height:2px;background:var(--text-primary);border-radius:2px;transition:var(--t-smooth)}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0;transform:translateX(-8px)}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{display:none;position:fixed;inset:0;background:rgba(11,16,32,0.98);backdrop-filter:blur(40px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1.6rem;font-weight:700;color:var(--text-secondary);padding:14px 40px;border-radius:var(--r-lg);width:100%;text-align:center;max-width:280px;transition:var(--t-fast)}
.mobile-menu a:hover{color:#fff;background:var(--bg-card)}
.mobile-menu-footer{margin-top:24px;display:flex;gap:12px}

/* ================================================
   Section Header
   ================================================ */
.section-header{text-align:center;margin-bottom:64px}
.section-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(77,124,254,0.1);border:1px solid rgba(77,124,254,0.22);border-radius:var(--r-pill);padding:7px 16px;font-size:0.78rem;font-weight:700;color:var(--electric-blue);letter-spacing:0.07em;text-transform:uppercase;margin-bottom:20px}
.section-badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:dotBlink 1.5s ease-in-out infinite}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:0.3}}
.section-title{margin-bottom:16px}
.section-subtitle{max-width:580px;margin:0 auto;font-size:1.05rem;line-height:1.8}

/* ================================================
   Hero Section
   ================================================ */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:130px 0 80px}

.hero-bg{position:absolute;inset:0;z-index:0}
.hero-gradient{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 60%,rgba(77,124,254,0.18) 0%,transparent 55%),radial-gradient(ellipse at 80% 15%,rgba(139,92,246,0.14) 0%,transparent 55%),radial-gradient(ellipse at 60% 85%,rgba(56,189,248,0.08) 0%,transparent 45%)}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(77,124,254,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(77,124,254,0.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 50%,black 40%,transparent 80%)}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center}
.hero-content{max-width:620px}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(77,124,254,0.1);border:1px solid rgba(77,124,254,0.3);border-radius:var(--r-pill);padding:9px 18px;font-size:0.82rem;font-weight:700;color:var(--electric-blue);margin-bottom:28px;animation:badgeGlow 3s ease-in-out infinite}
@keyframes badgeGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 24px rgba(77,124,254,0.3)}}
.hero-badge-icon{font-size:0.9rem}

.hero-title{line-height:1.08;margin-bottom:26px}
.hero-title .line2{display:block;color:var(--text-secondary);font-size:0.7em;font-weight:400;margin-top:8px;letter-spacing:0}

.hero-desc{font-size:1.08rem;color:var(--text-secondary);line-height:1.85;margin-bottom:40px;max-width:520px}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}

.hero-stats{display:flex;gap:36px;flex-wrap:wrap}
.stat-item{display:flex;flex-direction:column;gap:3px}
.stat-value{font-size:1.9rem;font-weight:800;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.stat-label{font-size:0.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em}

.trust-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.trust-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:var(--r-pill);padding:6px 12px;font-size:0.78rem;color:var(--success);font-weight:600}

/* Hero Visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:580px}

.hero-phone{position:relative;z-index:3;animation:floatPhone 6s ease-in-out infinite}
@keyframes floatPhone{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-24px) rotate(1deg)}}

.phone-frame{width:280px;height:575px;border-radius:46px;border:2px solid rgba(255,255,255,0.18);box-shadow:0 60px 120px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.05) inset,0 0 80px rgba(77,124,254,0.22);overflow:hidden;position:relative;animation:phoneGlow 4s ease-in-out infinite;background:#0d1422}
@keyframes phoneGlow{0%,100%{box-shadow:0 60px 120px rgba(0,0,0,0.55),0 0 80px rgba(77,124,254,0.22),0 0 0 1px rgba(255,255,255,0.05) inset}50%{box-shadow:0 60px 120px rgba(0,0,0,0.55),0 0 140px rgba(139,92,246,0.4),0 0 0 1px rgba(255,255,255,0.1) inset}}

.phone-notch{width:90px;height:26px;background:#0d1422;border-radius:0 0 18px 18px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;justify-content:center;gap:6px}
.phone-notch::before{content:'';width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.18)}
.phone-notch::after{content:'';width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,0.1)}

.phone-screen{width:100%;height:100%;position:relative;overflow:hidden}
.phone-screen-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease}
.hero-phone:hover .phone-screen-img{transform:scale(1.04)}

/* Shimmer sweep */
.phone-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,0.09) 50%,transparent 65%);animation:shimmerSweep 3.2s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes shimmerSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(200%)}}

/* Live badge */
.phone-live-badge{position:absolute;top:32px;right:14px;background:rgba(0,0,0,0.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(34,197,94,0.45);border-radius:20px;padding:5px 11px;font-size:0.58rem;font-weight:800;color:#22c55e;letter-spacing:0.1em;display:flex;align-items:center;gap:5px;z-index:4;text-transform:uppercase}

/* Glow beneath phone */
.phone-glow{position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);width:280px;height:130px;background:radial-gradient(ellipse,rgba(77,124,254,0.5),transparent 70%);border-radius:50%;filter:blur(22px);z-index:1;animation:glowPulse 4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:0.55;transform:translateX(-50%) scaleX(1)}50%{opacity:1;transform:translateX(-50%) scaleX(1.35)}}

/* Floating Cards */
.f-card{position:absolute;background:rgba(13,18,34,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r-md);padding:13px 17px;box-shadow:0 16px 48px rgba(0,0,0,0.4);z-index:4;min-width:158px}
.f-card-1{top:8%;right:-52px;animation:fcFloat1 5.5s ease-in-out infinite}
.f-card-2{bottom:16%;left:-72px;animation:fcFloat2 6.5s ease-in-out infinite}
@keyframes fcFloat1{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(10px,-18px) rotate(1deg)}}
@keyframes fcFloat2{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-10px,-14px) rotate(-1deg)}}
.f-card-title{font-size:0.68rem;color:var(--text-muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.f-card-value{font-size:1.05rem;font-weight:800;color:var(--luxury-gold)}
.f-card-sub{font-size:0.67rem;color:var(--success)}
.f-card-row{display:flex;align-items:center;gap:8px}
.f-card-avatar{width:28px;height:28px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0}
.f-card-info{display:flex;flex-direction:column}
.f-card-name{font-size:0.74rem;font-weight:600}
.f-card-detail{font-size:0.64rem;color:var(--text-muted)}
.live-dot-sm{width:7px;height:7px;border-radius:50%;background:var(--success);animation:dotBlink 1.5s ease-in-out infinite;margin-left:auto;flex-shrink:0}

/* Glow Orbs */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.orb-1{width:450px;height:450px;background:rgba(77,124,254,0.22);top:-120px;right:-80px;animation:orbDrift 9s ease-in-out infinite}
.orb-2{width:320px;height:320px;background:rgba(139,92,246,0.18);bottom:-60px;left:15%;animation:orbDrift 11s ease-in-out infinite reverse}
.orb-3{width:200px;height:200px;background:rgba(56,189,248,0.12);top:40%;left:-50px;animation:orbDrift 7s ease-in-out infinite 2s}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.12)}66%{transform:translate(-25px,20px) scale(0.92)}}

/* Pulse Rings */
.pulse-rings{position:absolute;inset:0;pointer-events:none;z-index:1}
.pulse-ring{position:absolute;top:50%;left:50%;width:300px;height:300px;border:1px solid rgba(77,124,254,0.2);border-radius:50%;transform:translate(-50%,-50%);animation:pulseRing 4s ease-out infinite}
.pulse-ring:nth-child(2){animation-delay:1.3s}
.pulse-ring:nth-child(3){animation-delay:2.6s}
@keyframes pulseRing{0%{transform:translate(-50%,-50%) scale(0.4);opacity:0.8}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}

/* ================================================
   Features Section
   ================================================ */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{padding:30px 24px;text-align:center}
.feature-icon{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 20px;transition:var(--t-smooth)}
.feature-card:hover .feature-icon{transform:scale(1.12) rotate(6deg)}
.icon-blue{background:rgba(77,124,254,0.14);border:1px solid rgba(77,124,254,0.22)}
.icon-purple{background:rgba(139,92,246,0.14);border:1px solid rgba(139,92,246,0.22)}
.icon-gold{background:rgba(255,200,87,0.14);border:1px solid rgba(255,200,87,0.22)}
.icon-cyan{background:rgba(56,189,248,0.14);border:1px solid rgba(56,189,248,0.22)}
.icon-pink{background:rgba(236,72,153,0.14);border:1px solid rgba(236,72,153,0.22)}
.icon-green{background:rgba(34,197,94,0.14);border:1px solid rgba(34,197,94,0.22)}
.feature-title{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.feature-desc{font-size:0.875rem;color:var(--text-muted);line-height:1.65}

/* ================================================
   App Preview Slider
   ================================================ */
.preview-wrapper{overflow:hidden;padding:20px 0;position:relative}
.preview-wrapper::before,.preview-wrapper::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.preview-wrapper::before{left:0;background:linear-gradient(to right,var(--bg-primary),transparent)}
.preview-wrapper::after{right:0;background:linear-gradient(to left,var(--bg-primary),transparent)}
.preview-track{display:flex;gap:20px;animation:scrollSlide 30s linear infinite}
.preview-track:hover{animation-play-state:paused}
@keyframes scrollSlide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.preview-slide{flex-shrink:0;width:200px;height:380px;border-radius:20px;background:var(--bg-secondary);border:1px solid var(--border-glass);display:flex;align-items:center;justify-content:center;font-size:2.8rem;transition:var(--t-smooth);cursor:pointer;position:relative;overflow:hidden}
.preview-slide:hover{transform:scale(1.04);border-color:var(--border-glow);box-shadow:0 16px 40px rgba(77,124,254,0.2)}
.preview-slide-label{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:0.7rem;font-weight:600;color:var(--text-secondary)}

/* ================================================
   Game Categories
   ================================================ */
.categories-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.category-card{padding:22px 14px;text-align:center;cursor:pointer;transition:var(--t-smooth);border-radius:var(--r-lg)}
.category-card:hover,.category-card.active{background:rgba(77,124,254,0.1);border-color:rgba(77,124,254,0.3) !important}
.category-card.glass-card:hover{transform:translateY(-6px)}
.cat-emoji{font-size:1.8rem;margin-bottom:10px;display:block;transition:var(--t-smooth)}
.category-card:hover .cat-emoji,.category-card.active .cat-emoji{transform:scale(1.2)}
.cat-name{font-size:0.85rem;font-weight:700;margin-bottom:2px}
.cat-count{font-size:0.72rem;color:var(--text-muted)}

/* ================================================
   Games Grid
   ================================================ */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.game-card{border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:var(--t-smooth);background:var(--bg-secondary);border:1px solid var(--border-glass);position:relative}
.game-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(77,124,254,0.22);border-color:rgba(77,124,254,0.45)}
.game-thumb{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:2.8rem;position:relative;overflow:hidden;background:var(--bg-card)}
.game-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.65))}
.game-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.68);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--t-smooth);z-index:2}
.game-card:hover .game-overlay{opacity:1}
.play-btn{width:48px;height:48px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 0 30px rgba(77,124,254,0.6);transform:scale(0.8);transition:var(--t-bounce)}
.game-card:hover .play-btn{transform:scale(1)}
.rtp-badge{position:absolute;top:10px;left:10px;background:rgba(255,200,87,0.92);color:#0B1020;border-radius:var(--r-pill);padding:3px 9px;font-size:0.65rem;font-weight:800;z-index:3;letter-spacing:0.02em}
.fav-btn{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;background:rgba(11,16,32,0.75);border:1px solid var(--border-glass);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:var(--t-fast);font-size:0.8rem;color:var(--text-muted)}
.fav-btn:hover,.fav-btn.active{background:rgba(236,72,153,0.2);border-color:var(--soft-pink);color:var(--soft-pink)}
.new-badge{position:absolute;top:10px;left:10px;background:var(--grad-primary);color:#fff;border-radius:var(--r-pill);padding:3px 9px;font-size:0.6rem;font-weight:800;z-index:3;text-transform:uppercase;letter-spacing:0.06em}
.hot-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#FF4757,#FF6B6B);color:#fff;border-radius:var(--r-pill);padding:3px 9px;font-size:0.6rem;font-weight:800;z-index:3;text-transform:uppercase;letter-spacing:0.06em}
.game-info{padding:12px}
.game-name{font-size:0.875rem;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-provider{font-size:0.72rem;color:var(--text-muted)}

/* ================================================
   Live Activity
   ================================================ */
#live-feed{display:flex;flex-direction:column;gap:10px}
.live-notif{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--bg-card);border:1px solid var(--border-glass);animation:slideIn 0.5s ease;transition:var(--t-smooth)}
.live-notif:hover{border-color:var(--border-glow);background:rgba(77,124,254,0.06)}
@keyframes slideIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
.live-av{width:38px;height:38px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0}
.live-body{flex:1;min-width:0}
.live-name{font-size:0.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-act{font-size:0.75rem;color:var(--text-muted)}
.live-reward{font-size:0.85rem;font-weight:800;color:var(--luxury-gold);white-space:nowrap}
.live-online{width:8px;height:8px;border-radius:50%;background:var(--success);animation:dotBlink 1.5s ease-in-out infinite;flex-shrink:0}

/* ================================================
   Testimonials
   ================================================ */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial-card{padding:28px 24px}
.stars{color:var(--luxury-gold);font-size:0.95rem;letter-spacing:2px;margin-bottom:16px}
.testimonial-text{font-size:0.92rem;color:var(--text-secondary);line-height:1.75;margin-bottom:22px}
.t-author{display:flex;align-items:center;gap:12px}
.t-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.t-name{font-size:0.9rem;font-weight:700;margin-bottom:2px}
.t-role{font-size:0.75rem;color:var(--text-muted)}

/* ================================================
   FAQ
   ================================================ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--r-md);overflow:hidden;transition:var(--t-smooth)}
.faq-item.active{border-color:rgba(77,124,254,0.32);box-shadow:0 4px 24px rgba(77,124,254,0.1)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;cursor:pointer;font-weight:600;font-size:0.975rem;transition:var(--t-fast)}
.faq-q:hover{color:var(--electric-blue)}
.faq-toggle{width:30px;height:30px;border-radius:8px;background:rgba(77,124,254,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--t-smooth);font-size:1rem;color:var(--electric-blue)}
.faq-item.active .faq-toggle{background:var(--electric-blue);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.42s ease,padding 0.42s ease;padding:0 24px;color:var(--text-secondary);font-size:0.92rem;line-height:1.75}
.faq-item.active .faq-a{max-height:280px;padding:0 24px 22px}

/* ================================================
   CTA Section
   ================================================ */
.cta-section{text-align:center}
.cta-bg-grad{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(77,124,254,0.2) 0%,transparent 55%),radial-gradient(ellipse at 70% 50%,rgba(139,92,246,0.18) 0%,transparent 55%)}
.cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.cta-title{margin-bottom:18px}
.cta-subtitle{font-size:1.08rem;margin-bottom:44px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ================================================
   Steps
   ================================================ */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.steps-grid::after{content:'';position:absolute;top:38px;left:calc(12.5% + 10px);right:calc(12.5% + 10px);height:2px;background:linear-gradient(90deg,var(--electric-blue),var(--soft-purple));opacity:0.22;z-index:0}
.step-card{text-align:center;padding:30px 20px;position:relative;z-index:1}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:800;margin:0 auto 20px;box-shadow:0 0 32px rgba(77,124,254,0.45);transition:var(--t-smooth)}
.step-card:hover .step-num{transform:scale(1.1);box-shadow:0 0 50px rgba(77,124,254,0.65)}
.step-title{font-size:0.975rem;font-weight:700;margin-bottom:8px}
.step-desc{font-size:0.84rem;color:var(--text-muted);line-height:1.65}

/* ================================================
   Counters
   ================================================ */
.counters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.counter-card{text-align:center;padding:34px 24px}
.counter-val{font-size:3rem;font-weight:800;display:block;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}
.counter-lbl{font-size:0.9rem;color:var(--text-secondary)}

/* ================================================
   Contact Form
   ================================================ */
.contact-form{max-width:640px;margin:0 auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:7px;color:var(--text-secondary)}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--r-md);padding:13px 17px;color:var(--text-primary);font-size:0.92rem;outline:none;transition:var(--t-fast);resize:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--electric-blue);box-shadow:0 0 0 3px rgba(77,124,254,0.14);background:rgba(77,124,254,0.04)}
.form-group textarea{min-height:140px}
.form-group select option{background:var(--bg-secondary);color:var(--text-primary)}

/* ================================================
   Support Cards
   ================================================ */
.support-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.support-card{display:flex;align-items:center;gap:16px;padding:22px;text-decoration:none;transition:var(--t-smooth)}
.support-card:hover{transform:translateY(-5px)}
.support-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.support-title{font-size:0.95rem;font-weight:700;margin-bottom:3px}
.support-desc{font-size:0.78rem;color:var(--text-muted)}

/* ================================================
   Filter Bar
   ================================================ */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filter-chip{padding:8px 18px;border-radius:var(--r-pill);background:var(--bg-card);border:1px solid var(--border-glass);color:var(--text-secondary);font-size:0.83rem;font-weight:600;cursor:pointer;transition:var(--t-fast)}
.filter-chip:hover,.filter-chip.active{background:var(--electric-blue);border-color:var(--electric-blue);color:#fff}
.search-box{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--r-pill);padding:9px 18px;margin-left:auto;min-width:220px;transition:var(--t-fast)}
.search-box:focus-within{border-color:var(--electric-blue);box-shadow:0 0 0 3px rgba(77,124,254,0.12)}
.search-box input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:0.87rem}
.search-box input::placeholder{color:var(--text-muted)}
.search-icon{color:var(--text-muted);font-size:0.9rem}

/* ================================================
   Page Hero (Inner Pages)
   ================================================ */
.page-hero{padding:160px 0 80px;text-align:center;position:relative;overflow:hidden}
.page-hero-grad{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(77,124,254,0.18) 0%,transparent 60%)}
.page-hero-content{position:relative;z-index:1}

/* Breadcrumb */
.breadcrumb{display:inline-flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--text-muted);margin-bottom:20px;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--r-pill);padding:6px 14px}
.breadcrumb a{color:var(--electric-blue);transition:var(--t-fast)}
.breadcrumb a:hover{color:#fff}
.bc-sep{opacity:0.4}

/* ================================================
   Game Detail
   ================================================ */
.game-detail-banner{height:380px;border-radius:var(--r-xl);overflow:hidden;position:relative;margin-bottom:0}
.game-detail-banner-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5rem}
.game-detail-cover{position:absolute;bottom:-24px;left:32px;width:110px;height:110px;border-radius:20px;background:var(--bg-secondary);border:3px solid rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;font-size:2.8rem;box-shadow:0 12px 40px rgba(0,0,0,0.35)}
.game-detail-content{padding-top:44px}
.game-detail-layout{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start;margin-top:32px}
.game-detail-main{}
.game-detail-sidebar{}
.game-meta-tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.meta-tag{background:rgba(77,124,254,0.1);border:1px solid rgba(77,124,254,0.2);border-radius:var(--r-pill);padding:5px 12px;font-size:0.75rem;font-weight:600;color:var(--electric-blue)}
.rating-display{display:flex;align-items:center;gap:10px;margin:12px 0}
.rating-stars{color:var(--luxury-gold);font-size:1.1rem}
.rating-num{font-size:1.5rem;font-weight:800}
.rating-count{color:var(--text-muted);font-size:0.85rem}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* ================================================
   About
   ================================================ */
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--grad-primary);opacity:0.3;border-radius:2px}
.timeline-item{position:relative;margin-bottom:28px}
.timeline-item::before{content:'';position:absolute;left:-34px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--grad-primary);box-shadow:0 0 16px rgba(77,124,254,0.6)}
.timeline-year{font-size:0.75rem;font-weight:700;color:var(--electric-blue);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
.timeline-title{font-size:0.95rem;font-weight:700;margin-bottom:4px}
.timeline-desc{font-size:0.84rem;color:var(--text-muted)}

/* ================================================
   Footer
   ================================================ */
footer{background:var(--bg-secondary);border-top:1px solid var(--border-glass);padding:80px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand p{font-size:0.875rem;color:var(--text-muted);max-width:300px;line-height:1.75;margin:16px 0 24px}
.footer-socials{display:flex;gap:10px}
.social-btn{width:38px;height:38px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border-glass);display:flex;align-items:center;justify-content:center;font-size:0.95rem;cursor:pointer;transition:var(--t-smooth)}
.social-btn:hover{background:var(--electric-blue);border-color:var(--electric-blue);transform:translateY(-3px)}
.footer-col-title{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:20px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:0.875rem;color:var(--text-secondary);transition:var(--t-fast)}
.footer-links a:hover{color:#fff;padding-left:5px}
.glow-divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--electric-blue) 30%,var(--soft-purple) 70%,transparent 100%);opacity:0.3;margin-bottom:32px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-bottom p{font-size:0.82rem;color:var(--text-muted)}
.rg-notice{background:rgba(255,200,87,0.08);border:1px solid rgba(255,200,87,0.2);border-radius:var(--r-md);padding:14px 18px;margin-bottom:24px;display:flex;align-items:flex-start;gap:10px;font-size:0.82rem;color:var(--text-muted);line-height:1.65}

.newsletter-form{display:flex;gap:10px;margin-top:16px}
.newsletter-form input{flex:1;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--r-md);padding:11px 15px;color:var(--text-primary);font-size:0.85rem;outline:none;transition:var(--t-fast)}
.newsletter-form input:focus{border-color:var(--electric-blue)}
.newsletter-form input::placeholder{color:var(--text-muted)}

/* ================================================
   Mobile CTA Bar
   ================================================ */
#mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:800;background:rgba(11,16,32,0.97);backdrop-filter:blur(24px);border-top:1px solid var(--border-glass);padding:14px 20px;gap:10px}

/* Floating Download Fab */
#fab-download{display:none;position:fixed;bottom:90px;right:20px;z-index:801;width:56px;height:56px;border-radius:50%;background:var(--grad-primary);border:none;cursor:pointer;box-shadow:0 8px 32px rgba(77,124,254,0.5);font-size:1.3rem;color:#fff;transition:var(--t-bounce);animation:fabPulse 3s ease-in-out infinite}
@keyframes fabPulse{0%,100%{box-shadow:0 8px 32px rgba(77,124,254,0.5)}50%{box-shadow:0 8px 50px rgba(77,124,254,0.8),0 0 0 8px rgba(77,124,254,0.1)}}
#fab-download:hover{transform:scale(1.12)}

/* ================================================
   Reveal Animations
   ================================================ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.9);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}
.reveal-delay-5{transition-delay:0.5s}
.reveal-delay-6{transition-delay:0.6s}
.reveal-delay-7{transition-delay:0.7s}
.reveal-delay-8{transition-delay:0.8s}

/* ================================================
   Shimmer
   ================================================ */
.shimmer-card::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.04) 50%,transparent 100%);background-size:200% 100%;animation:shimmerAnim 2.5s ease-in-out infinite;border-radius:inherit}
@keyframes shimmerAnim{0%{background-position:200% center}100%{background-position:-200% center}}

/* ================================================
   Misc
   ================================================ */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:4px 12px;font-size:0.75rem;font-weight:700}
.badge-blue{background:rgba(77,124,254,0.15);color:var(--electric-blue);border:1px solid rgba(77,124,254,0.25)}
.badge-gold{background:rgba(255,200,87,0.15);color:var(--luxury-gold);border:1px solid rgba(255,200,87,0.25)}
.badge-green{background:rgba(34,197,94,0.15);color:var(--success);border:1px solid rgba(34,197,94,0.25)}
.badge-purple{background:rgba(139,92,246,0.15);color:var(--soft-purple);border:1px solid rgba(139,92,246,0.25)}

.divider{height:1px;background:var(--border-glass);margin:40px 0}

.security-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sec-badge{text-align:center;padding:24px 16px}
.sec-icon{font-size:2rem;margin-bottom:12px;display:block}
.sec-title{font-size:0.85rem;font-weight:700;margin-bottom:4px}
.sec-desc{font-size:0.75rem;color:var(--text-muted)}

/* ================================================
   Responsive
   ================================================ */
@media(max-width:1024px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .categories-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .counters-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid::after{display:none}
  .game-detail-layout{grid-template-columns:1fr}
  .security-badges{grid-template-columns:repeat(2,1fr)}
  .support-cards{grid-template-columns:1fr}
}

@media(max-width:768px){
  section{padding:70px 0}
  .navbar-nav,.navbar-actions .btn:not(.btn-download-nav){display:none}
  .hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero-visual{display:flex;min-height:auto;order:2}
  .hero-content{order:1}
  .hero-cta,.hero-stats,.trust-badges{justify-content:center}
  .hero-desc{margin-left:auto;margin-right:auto}
  .phone-frame{width:210px;height:432px;border-radius:36px}
  .f-card{display:none}
  .pulse-rings{display:none}
  .features-grid{grid-template-columns:1fr 1fr}
  .categories-grid{grid-template-columns:repeat(3,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  #mobile-cta{display:flex}
  #fab-download{display:flex;align-items:center;justify-content:center}
  main,.hero{padding-bottom:100px}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .support-cards{grid-template-columns:1fr}
  .counters-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:1fr}
  .section-header{margin-bottom:48px}
}

@media(max-width:480px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .categories-grid{grid-template-columns:repeat(2,1fr)}
  .features-grid{grid-template-columns:1fr}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .security-badges{grid-template-columns:repeat(2,1fr)}
  .phone-frame{width:180px;height:370px;border-radius:30px}
}

/* ================================================
   Print / Perf helpers
   ================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}

/* ================================================
   GOLDEN THEME — Primary colour: #FFC857
   Overrides all blue/purple primary usages
   ================================================ */

/* 1. Re-define colour tokens */
:root{
  --electric-blue:#FFC857;
  --luxury-gold:#FF9800;
  --neon-cyan:#FFE082;
  --grad-primary:linear-gradient(135deg,#FFC857,#FF9800);
  --grad-gold:linear-gradient(135deg,#FFE082,#FFC857);
  --grad-cyan:linear-gradient(135deg,#FFC857,#FF9800);
  --border-glow:rgba(255,200,87,.38);
  --shadow-glow:0 0 40px rgba(255,200,87,.32);
  --shadow-hover:0 24px 60px rgba(255,200,87,.22);
  --glow-pulse-start:0 4px 20px rgba(255,200,87,.45);
  --glow-pulse-end:0 4px 50px rgba(255,200,87,.8),0 0 70px rgba(255,152,0,.35);
}

/* 2. Gradient text → golden */
.gradient-text{background:linear-gradient(135deg,#FFC857,#FF9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-gold{background:linear-gradient(135deg,#FFE082,#FFC857);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-cyan{background:linear-gradient(135deg,#FFC857,#FF9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 3. Primary button → gold background + dark text */
.btn-primary{background:linear-gradient(135deg,#FFC857,#FF9800);color:#0B1020;box-shadow:0 4px 20px rgba(255,200,87,.42);font-weight:700}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(255,200,87,.6);color:#0B1020}
.btn-gold{background:linear-gradient(135deg,#FFE082,#FFC857);color:#0B1020;box-shadow:0 4px 20px rgba(255,200,87,.4)}

/* 4. Glow animation → golden pulses */
@keyframes glowPulse{0%,100%{box-shadow:0 4px 20px rgba(255,200,87,.45)}50%{box-shadow:0 4px 50px rgba(255,200,87,.8),0 0 70px rgba(255,152,0,.35)}}

/* 5. Scroll progress → gold */
#scroll-progress{background:linear-gradient(90deg,#FFC857,#FF9800)}

/* 6. Navbar logo pulse → gold */
@keyframes logoPulse{0%,100%{box-shadow:0 0 20px rgba(255,200,87,.5)}50%{box-shadow:0 0 40px rgba(255,152,0,.7)}}
.logo-icon{background:linear-gradient(135deg,#FFC857,#FF9800)}

/* 7. Hero badge → gold */
.hero-badge{background:rgba(255,200,87,.12);border-color:rgba(255,200,87,.32);color:#FFC857}
@keyframes badgeGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 24px rgba(255,200,87,.32)}}

/* 8. Stat values → gold */
.stat-value{background:linear-gradient(135deg,#FFC857,#FF9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 9. Trust badges → gold-green */
.trust-badge{background:rgba(255,200,87,.08);border-color:rgba(255,200,87,.2);color:#FFC857}

/* 10. Section badge → gold */
.section-badge{background:rgba(255,200,87,.1);border-color:rgba(255,200,87,.22);color:#FFC857}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* 11. Feature icon base glow → gold tints */
.icon-blue{background:rgba(255,200,87,.14);border-color:rgba(255,200,87,.22)}
.icon-purple{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.22)}
.icon-gold{background:rgba(255,200,87,.18);border-color:rgba(255,200,87,.28)}
.icon-cyan{background:rgba(255,200,87,.12);border-color:rgba(255,200,87,.2)}

/* 12. Glass card glow on hover → gold */
.glass-card:hover{border-color:rgba(255,200,87,.35);box-shadow:0 24px 60px rgba(255,200,87,.14)}

/* 13. FAQ item active → gold */
.faq-item.active{border-color:rgba(255,200,87,.35);box-shadow:0 4px 24px rgba(255,200,87,.12)}
.faq-toggle{background:rgba(255,200,87,.12);color:#FFC857}
.faq-item.active .faq-toggle{background:#FFC857;color:#0B1020}
.faq-q:hover{color:#FFC857}

/* 14. Hero orbs → warm gold/orange */
.orb-1{background:rgba(255,200,87,.22)}
.orb-2{background:rgba(255,152,0,.16)}
.orb-3{background:rgba(255,200,87,.1)}

/* 15. Pulse rings → gold */
.pulse-ring{border-color:rgba(255,200,87,.25)}
@keyframes pulseRing{0%{transform:translate(-50%,-50%) scale(.4);opacity:.8}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}

/* 16. Live online dot */
.live-online{background:#FFC857}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}
.live-reward{color:#FFC857}

/* 17. Phone live badge */
.phone-live-badge{border-color:rgba(34,197,94,.45);color:#22c55e}

/* 18. Counter values → gold */
.counter-val{background:linear-gradient(135deg,#FFC857,#FF9800);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 19. Step number → gold */
.step-num{background:linear-gradient(135deg,#FFC857,#FF9800);color:#0B1020;box-shadow:0 0 32px rgba(255,200,87,.45)}
.step-card:hover .step-num{box-shadow:0 0 50px rgba(255,200,87,.65)}

/* 20. Filter chips active → gold */
.filter-chip:hover,.filter-chip.active{background:linear-gradient(135deg,#FFC857,#FF9800);border-color:#FFC857;color:#0B1020}

/* 21. Search box focus → gold */
.search-box:focus-within{border-color:#FFC857;box-shadow:0 0 0 3px rgba(255,200,87,.14)}

/* 22. Form input focus → gold */
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#FFC857;box-shadow:0 0 0 3px rgba(255,200,87,.14);background:rgba(255,200,87,.03)}

/* 23. Affiliate bar gold themed */
#affiliate-bar{background:rgba(255,200,87,.06);border-color:rgba(255,200,87,.18)}
.aff-bar-link{color:#FFC857}
.aff-footer-link{color:#FFC857}

/* 24. Glow divider → gold */
.glow-divider{background:linear-gradient(90deg,transparent 0%,#FFC857 30%,#FF9800 70%,transparent 100%)}

/* 25. RTP badge colour stay gold */
.rtp-badge{background:rgba(255,200,87,.92);color:#0B1020}
.hot-badge{background:linear-gradient(135deg,#FFC857,#FF9800);color:#0B1020}
.badge-gold{background:rgba(255,200,87,.15);color:#FFC857;border-color:rgba(255,200,87,.28)}
.badge-blue{background:rgba(255,200,87,.1);color:#FFC857;border-color:rgba(255,200,87,.22)}

/* 26. Breadcrumb link → gold */
.breadcrumb a{color:#FFC857}

/* 27. Meta tag pill → gold */
.meta-tag{background:rgba(255,200,87,.1);border-color:rgba(255,200,87,.22);color:#FFC857}

/* 28. Stars rating → brighter gold */
.stars,.rating-stars{color:#FFC857}

/* 29. mobile-cta bar → gold primary */
#mobile-cta .btn-primary{background:linear-gradient(135deg,#FFC857,#FF9800);color:#0B1020;font-weight:700}

/* 30. Navbar download btn */
.btn-download-nav{background:linear-gradient(135deg,#FFC857,#FF9800);color:#0B1020;font-weight:700;box-shadow:0 4px 16px rgba(255,200,87,.4)}
.btn-download-nav:hover{color:#0B1020;box-shadow:0 8px 28px rgba(255,200,87,.55)}

/* 31. Social hover — brand colours keep, just refine */
.social-btn{color:var(--text-secondary)}

/* 32. Affiliate notice icon accent */
.aff-notice-icon{color:#FFC857}
.affiliate-footer-notice{background:rgba(255,200,87,.05);border-color:rgba(255,200,87,.14)}

/* 33. v-stat value accent */
.v-value.gradient-text,.v-value{color:#FFC857}

/* 34. Timeline dots */
.timeline-item::before{background:linear-gradient(135deg,#FFC857,#FF9800);box-shadow:0 0 16px rgba(255,200,87,.6)}
.timeline::before{background:linear-gradient(to bottom,#FFC857,#FF9800);opacity:.3}
.timeline-year{color:#FFC857}

/* 35. category card hover */
.category-card:hover,.category-card.active{background:rgba(255,200,87,.08) !important;border-color:rgba(255,200,87,.32) !important}

/* 36. Headline hero */
#hero-heading{color:#fff}

/* ================================================
   APP SCREENSHOT SWIPER
   ================================================ */
.app-swiper{position:relative;padding-bottom:60px;overflow:hidden}
.app-swiper-inner{overflow:hidden;padding:24px 0}
.app-swiper-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 20px;cursor:grab}
.app-swiper-track::-webkit-scrollbar{display:none}
.app-swiper-track.dragging{cursor:grabbing;scroll-behavior:auto}
.app-swiper-slide{flex:0 0 200px;height:380px;scroll-snap-align:center;border-radius:20px;overflow:hidden;border:2px solid var(--border-glass);background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;position:relative;user-select:none;-webkit-user-select:none}
.app-swiper-slide.active-slide{border-color:rgba(255,200,87,.55);transform:scale(1.06);box-shadow:0 16px 48px rgba(255,200,87,.22)}
.app-swiper-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .4s ease}
.app-swiper-slide.active-slide img{transform:scale(1.03)}

/* Dots */
.app-swiper-dots{display:flex;justify-content:center;align-items:center;gap:7px;position:absolute;bottom:14px;left:0;right:0}
.app-swiper-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);border:none;cursor:pointer;transition:all .3s ease;padding:0;flex-shrink:0}
.app-swiper-dot.active{background:#FFC857;width:26px;border-radius:4px;box-shadow:0 0 8px rgba(255,200,87,.5)}

/* Arrows */
.app-swiper-btn{position:absolute;top:50%;transform:translateY(calc(-50% - 20px));background:rgba(11,16,32,.85);border:1px solid rgba(255,200,87,.25);color:#FFC857;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:4;backdrop-filter:blur(10px);line-height:1}
.app-swiper-btn:hover{background:#FFC857;color:#0B1020;border-color:#FFC857;box-shadow:0 0 20px rgba(255,200,87,.4)}
.app-swiper-prev{left:12px}
.app-swiper-next{right:12px}
@media(max-width:768px){.app-swiper-btn{width:36px;height:36px;font-size:1.2rem}}

/* ================================================
   MOBILE / PHONE-FRIENDLY IMPROVEMENTS
   ================================================ */
@media(max-width:768px){
  /* Bigger tap targets */
  .btn{min-height:48px;font-size:1rem}
  .filter-chip{min-height:42px;font-size:0.87rem}
  .faq-q{padding:18px 18px;font-size:.95rem;min-height:52px}
  /* Better hero spacing */
  .hero{padding:100px 0 80px}
  .hero-title{font-size:clamp(2.2rem,9vw,3.2rem)}
  .hero-desc{font-size:1rem}
  .hero-stats{gap:20px}
  .stat-value{font-size:1.6rem}
  /* Cards readable on mobile */
  .glass-card.feature-card{padding:22px 18px}
  .feature-icon{width:52px;height:52px}
  .feature-title{font-size:1rem}
  /* Game grid 2-col */
  .games-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .game-thumb{min-height:160px}
  /* Page hero */
  .page-hero{padding:130px 0 60px}
  /* Section spacing */
  section{padding:60px 0}
  /* Contact form */
  .form-row{grid-template-columns:1fr}
  /* Support cards */
  .support-cards{grid-template-columns:1fr;gap:12px}
  /* Counters */
  .counters-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .counter-val{font-size:2.4rem}
  /* Game detail */
  .game-detail-layout{grid-template-columns:1fr}
  .game-screenshots-grid{grid-template-columns:repeat(2,1fr)}
  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:28px}
  /* FAB position */
  #fab-download{bottom:90px;right:14px}
  /* Live section */
  #live-activity .container > div{grid-template-columns:1fr}
}

@media(max-width:480px){
  h1{font-size:clamp(2rem,8vw,2.8rem)}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn{width:100%;max-width:320px;justify-content:center}
  .features-grid{grid-template-columns:1fr}
  .categories-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .category-card{padding:16px 10px}
  .cat-emoji{font-size:1.5rem}
  .cat-name{font-size:.78rem}
  .security-badges{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .device-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .aff-bar-text{font-size:.68rem}
  .app-swiper-slide{flex:0 0 165px;height:320px}
}

/* Remove loading screen completely */
#loading-screen{display:none !important}

/* ---- Site Logo Image (logo.png) ---- */
.site-logo-img{height:52px;width:auto;max-width:220px;object-fit:contain;vertical-align:middle;display:block}
.navbar-logo{display:flex;align-items:center;gap:8px}
/* Shrink logo slightly when navbar is scrolled */
#navbar.scrolled .site-logo-img{height:44px}

/* ================================================
   v2.0 Additions — Affiliate Bar, Social Icons,
   Game Thumb Images, Logo Images, Disclaimer
   ================================================ */

/* ---- Affiliate Disclaimer Bar (inside #navbar) ---- */
#affiliate-bar{background:rgba(255,165,0,0.07);border-bottom:1px solid rgba(255,165,0,0.18);padding:8px 0;overflow:hidden;max-height:60px;transition:max-height 0.35s ease,opacity 0.35s ease,padding 0.35s ease}
.aff-bar-inner{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.aff-bar-icon{font-size:0.9rem;flex-shrink:0}
.aff-bar-text{flex:1;font-size:0.76rem;color:var(--text-muted);line-height:1.4;margin:0}
.aff-bar-text strong{color:var(--text-secondary)}
.aff-bar-link{color:var(--electric-blue);font-weight:600;white-space:nowrap;font-size:0.76rem;transition:var(--t-fast)}
.aff-bar-link:hover{color:#fff}
.aff-bar-close{background:none;border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:var(--text-muted);cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--t-fast);line-height:1}
.aff-bar-close:hover{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.2)}

/* Navbar with affiliate bar is taller — bump hero/page offsets */
#navbar{padding:0}
.navbar-inner{padding:14px 0}

/* ---- Affiliate Footer Notice ---- */
.affiliate-footer-notice{display:flex;align-items:flex-start;gap:12px;background:rgba(77,124,254,0.06);border:1px solid rgba(77,124,254,0.14);border-radius:var(--r-md);padding:16px 20px;margin-bottom:20px}
.aff-notice-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px}
.affiliate-footer-notice p{font-size:0.8rem;color:var(--text-muted);line-height:1.7;margin:0}
.aff-footer-link{color:var(--electric-blue);font-weight:600;transition:var(--t-fast)}
.aff-footer-link:hover{color:#fff}

/* ---- Footer bottom links ---- */
.footer-bottom a{color:var(--text-muted);font-size:0.82rem;transition:var(--t-fast)}
.footer-bottom a:hover{color:#fff}

/* ---- Logo Image ---- */
.logo-img{height:20px;width:auto;max-width:140px;object-fit:contain;vertical-align:middle}
.logo-text-fallback{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.35rem;font-weight:800;letter-spacing:-0.01em}
.logo-icon{overflow:hidden;display:flex;align-items:center;justify-content:center}
.logo-icon img{width:100%;height:100%;object-fit:contain}

/* ---- Social Buttons (now <a> tags with SVG) ---- */
.social-btn{width:38px;height:38px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border-glass);display:flex;align-items:center;justify-content:center;transition:var(--t-smooth);cursor:pointer;color:var(--text-secondary);text-decoration:none}
.social-btn svg{width:17px;height:17px;display:block}
.social-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.3)}
.social-telegram:hover{background:#2AABEE;border-color:#2AABEE;color:#fff}
.social-whatsapp:hover{background:#25D366;border-color:#25D366;color:#fff}
.social-facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.social-instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:#E4405F;color:#fff}
.social-youtube:hover{background:#FF0000;border-color:#FF0000;color:#fff}
.social-twitter:hover{background:#000;border-color:#333;color:#fff}

/* ---- Game Thumb — real image overlay ---- */
.game-thumb{position:relative;overflow:hidden}
.game-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform 0.5s ease}
.game-card:hover .game-thumb-img{transform:scale(1.06)}
.game-thumb-fallback{position:relative;z-index:0;font-size:2.8rem;line-height:1}
/* badges/overlay sit above the image */
.rtp-badge,.new-badge,.hot-badge,.fav-btn,.game-overlay{z-index:3}

/* ---- Navbar download btn icon ---- */
.btn-download-nav svg,.btn svg{vertical-align:middle;margin-right:2px}
#fab-download svg{display:block}

/* ---- Disclaimer page ---- */
.disclaimer-section{max-width:820px;margin:0 auto}
.disclaimer-section h2{font-size:1.4rem;margin:32px 0 12px}
.disclaimer-section h3{font-size:1.1rem;margin:22px 0 10px;color:var(--text-secondary)}
.disclaimer-section p{font-size:0.9rem;line-height:1.8;margin-bottom:14px}
.disclaimer-section ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.disclaimer-section li{font-size:0.9rem;color:var(--text-secondary);line-height:1.7}
.disclaimer-box{background:rgba(255,165,0,0.08);border:1px solid rgba(255,165,0,0.25);border-radius:var(--r-md);padding:20px 24px;margin:24px 0}
.disclaimer-box p{color:var(--text-secondary);font-size:0.875rem;margin:0}

/* ---- Responsive tweaks for affiliate bar ---- */
@media(max-width:768px){
  .aff-bar-text{font-size:0.7rem}
  .aff-bar-inner{flex-wrap:wrap;gap:6px}
}
@media(max-width:480px){
  .aff-bar-inner{flex-wrap:nowrap}
  .aff-bar-text .aff-bar-link{display:none}
}