/* ====== Global Box Sizing Reset ====== */
*, *::before, *::after { box-sizing: border-box; }

/* ====== Custom Font Definition ====== */
@font-face {
    font-family: 'A4 Speed Bold';
    src: url('../fonts/A4SPEED-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* ====== Global Styles (Vibrant Aurora Theme) ====== */
:root {
    --color-pink: #ff007f;
    --color-blue: #007fff;
    --color-green: #00ff7f;
    --color-purple: #7f00ff;
    
    --color-bg-dark: #0d0c1d;
    --color-surface: rgba(22, 27, 34, 0.75);
    --color-border: rgba(127, 127, 255, 0.2);
    
    --color-text-primary: #ffffff;
    --color-text-secondary: #c0c0e0;
    --color-text-on-accent: #000000;
    
    --font-display: 'A4 Speed Bold', sans-serif;
    --font-body: 'Inter', sans-serif;
}
  
body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-dark);
    margin: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Aurora Background */
#aurora-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.aurora-shape { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; }
.shape1 { width: 600px; height: 600px; background-color: var(--color-pink); top: -20%; left: -20%; animation: move-aurora 25s alternate ease-in-out infinite; }
.shape2 { width: 500px; height: 500px; background-color: var(--color-blue); top: 20%; right: -20%; animation: move-aurora 30s alternate-reverse ease-in-out infinite; }
.shape3 { width: 400px; height: 400px; background-color: var(--color-green); bottom: -20%; left: 10%; animation: move-aurora 28s alternate ease-in-out infinite; }
.shape4 { width: 450px; height: 450px; background-color: var(--color-purple); bottom: -10%; right: 10%; animation: move-aurora 32s alternate-reverse ease-in-out infinite; }
@keyframes move-aurora { 0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); } 100% { transform: translateX(100px) translateY(50px) rotate(180deg) scale(1.3); } }

.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
h1, h2, h3, h4 { font-weight: 700; margin: 0 0 15px 0; text-align: center; }
h1, h2 { font-family: var(--font-display); }
h3, h4, p, a, button, li, span { font-family: var(--font-body); }
h1 { font-size: 3em; text-shadow: 0 0 20px rgba(255, 0, 127, 0.7); }
h2 { font-size: 2.5em; text-shadow: 0 0 15px rgba(0, 127, 255, 0.7); }
p { text-align: center; color: var(--color-text-secondary); margin: 0 0 20px 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: var(--color-green); transition: all 0.3s ease; }
a:hover { color: #fff; text-shadow: 0 0 10px var(--color-green); }

/* ====== Layout & Sidebar ====== */
.app-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 240px 1fr; }
.sidebar { background-color: var(--color-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid var(--color-border); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 20px; z-index: 1000; }
.main-content { overflow-y: auto; height: 100vh; }
.sidebar-header { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; }
.sidebar-logo { height: 40px; }
.sidebar-nav { flex-grow: 1; overflow-y: auto; }
.sidebar-nav .btn { width: 100%; margin-bottom: 10px; }
.sidebar-nav ul { list-style: none; padding: 0; margin: 20px 0 0 0; }
.sidebar-nav ul li a { display: block; padding: 10px 15px; border-radius: 5px; color: var(--color-text-secondary); font-weight: 600; }
.sidebar-nav ul li a:hover, .sidebar-nav ul li a.active { background-color: rgba(0,0,0,0.2); color: var(--color-text-primary); }
.sidebar-footer { margin-top: auto; padding-top: 20px; }
.sidebar-footer .social-links { justify-content: center; margin-bottom: 15px; }
.sidebar-footer p { font-size: 0.8em; }

/* Buttons */
.btn { display: inline-block; padding: 10px 25px; border-radius: 50px; font-weight: 700; text-transform: uppercase; transition: all 0.3s ease; cursor: pointer; border: none; text-align: center; font-size: 0.9em; }
.btn-primary { background: linear-gradient(90deg, var(--color-pink), var(--color-blue)); color: var(--color-text-primary); box-shadow: 0 0 20px rgba(255, 0, 127, 0.5); }
.btn-primary:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 35px rgba(0, 127, 255, 0.7); }
.btn-secondary { background-color: transparent; border: 2px solid var(--color-blue); color: var(--color-text-primary); }
.btn-secondary:hover { background-color: var(--color-blue); box-shadow: 0 0 20px rgba(0, 127, 255, 0.5); }
.btn-large { padding: 15px 40px; font-size: 1.1em; }

/* Sections */
#hero, #games-section, #why-us-section, #cta-section, #cara-main-section { padding: 100px 0; background-color: transparent; position: relative; }
#games-section, #why-us-section, #cta-section, #cara-main-section, footer { border-top: 1px solid var(--color-border); }

/* Hero Section */
.hero-container { display: flex; align-items: center; gap: 40px; }
.hero-text { flex: 1; }
.hero-image { flex: 1; position: relative; min-height: 400px; }
.offer-subtitle { font-size: 1.1em; color: var(--color-text-primary); background: none; border: none; padding: 5px 0; display: block; text-align: left; }
.offer-subtitle strong { color: var(--color-green); font-weight: 700; }
.hero-cta-group { justify-content: flex-start; margin-top: 30px; }
.ball { position: absolute; }
.ball img { filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); }
.ball-1 { width: 40%; top: 0; left: 50%; animation: float 8s ease-in-out infinite; }
.ball-2 { width: 35%; top: 20%; left: 10%; animation: float 7s ease-in-out infinite 1s; }
.ball-3 { width: 30%; top: 50%; left: 60%; animation: float 9s ease-in-out infinite 0.5s; }
.ball-4 { width: 50%; top: 60%; left: 0; animation: float 6s ease-in-out infinite 1.5s; }
@keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-25px) rotate(5deg); } 100% { transform: translateY(0px) rotate(0deg); } }

/* Games Section */
.section-subtitle { max-width: 700px; margin: 0 auto 50px auto; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.game-card { background-color: var(--color-surface); backdrop-filter: blur(10px); border-radius: 12px; padding: 20px; border: 1px solid var(--color-border); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; }
.game-card:hover { transform: translateY(-10px); box-shadow: 0 0 30px var(--color-pink); border-color: var(--color-pink); }
.game-card-logo { height: 60px; width: auto; margin-bottom: 20px; flex-shrink: 0; }
.game-card-content-img { width: 100%; height: auto; border-radius: 8px; }

/* Why Us Section */
.features-list { list-style: none; padding: 0; display: inline-block; text-align: left; margin-top: 30px; }
.features-list li { font-family: var(--font-display); font-size: 1.5em; display: flex; align-items: center; gap: 15px; margin-bottom: 20px; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.features-list img { width: 30px; height: 30px; }
.cta-container { display: flex; align-items: center; gap: 40px; }
.cta-text { flex: 1; text-align: left; }
.cta-text h2 { text-align: left; }
.cta-text h3 { text-align: left; font-family: var(--font-body); font-size: 1.2em; color: var(--color-text-secondary); }
.cta-qr { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 0 40px rgba(255,255,255,0.3); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.video-card { text-align: center; }
.video-placeholder { width: 100%; aspect-ratio: 16 / 9; background-color: #000; border-radius: 8px; border: 1px solid var(--color-border); position: relative; overflow: hidden; }
.video-placeholder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-card h4 { font-size: 1.4em; margin-bottom: 20px; }

/* Footer */
footer { padding: 60px 0 30px 0; background-color: transparent; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; max-width: 100%; }
.footer-column h4 { text-align: left; color: var(--color-text-secondary); text-transform: uppercase; font-size: 0.9em; }
.social-links { display: flex; gap: 15px; justify-content: flex-start; }
.social-links img { width: 24px; height: 24px; opacity: 0.7; transition: opacity 0.3s ease; }
.social-links a:hover img { opacity: 1; transform: scale(1.1); }
.app-badges { display: flex; gap: 15px; flex-wrap: wrap; justify-content: flex-start; }
.app-badges img { height: 35px; width: auto; }
.footer-bottom { border-top: 1px solid var(--color-border); padding-top: 30px; text-align: center; }
.disclaimer { font-size: 0.8em; color: var(--color-text-secondary); }


/* Responsive Design */
@media (max-width: 992px) {
    body { overflow-y: auto; }
    .app-layout { display: block; }
    .sidebar { position: fixed; top: 0; left: -100%; width: 280px; height: 100%; transition: left 0.3s ease-in-out; z-index: 2000; border-right: 1px solid var(--color-border); }
    .sidebar.is-active { left: 0; }
    .main-content { height: auto; overflow: visible; }
    .mobile-menu-toggle { display: flex; position: fixed; top: 20px; right: 20px; z-index: 2001; }
    h1 { font-size: 2.5em; } h2 { font-size: 2em; }
    .hero-container, .cta-container { flex-direction: column; }
    .hero-text, .cta-text, .hero-text h1, .cta-text h2, .cta-text h3 { text-align: center; }
    .hero-cta-group { justify-content: center; }
    .hero-container { flex-direction: column-reverse; }
    .hero-image { min-height: 300px; margin-bottom: 40px; width: 100%; }
}

@media (max-width: 768px) {
    h1 { font-size: 2em; }
    #hero, #games-section, #why-us-section, #cta-section, #cara-main-section, footer { padding: 60px 0; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-column { text-align: center; }
    .footer-column h4 { text-align: center; }
    .social-links, .app-badges { justify-content: center; }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle span { background-color: var(--color-text-primary); }
.mobile-menu-toggle.is-active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.mobile-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }