/* --- 1. Accurate Dream Vegas Color Palette --- */
:root {
    --dv-deep-blue: #0d122b; /* The main background color */
    --dv-vibrant-orange: #f08920; /* Brightest CTA color */
    --dv-vibrant-yellow: #f9c939; /* Lighter part of the CTA gradient */
    --dv-classic-gold: #fde88d;   /* For text like "UP TO £100" */
    --dv-card-red: #8c1e2f;       /* Red hue in the bonus card */
    --dv-neon-blue: #55aaff;      /* The glowing border on the card */
    --light-bg: #f8f9fa;
}

/* --- 2. Global & Typography Settings --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
    color: #444;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.section-title {
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 80px; height: 3px;
    background: linear-gradient(90deg, var(--dv-vibrant-yellow), var(--dv-vibrant-orange));
}

/* --- 3. Navigation Bar (Matched to Screenshot) --- */
.navbar {
    background-color: rgba(13, 18, 43, 0.9) !important; /* --dv-deep-blue */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.text-gold { color: var(--dv-classic-gold) !important; }
.nav-link { font-family: 'Oswald', sans-serif; text-transform: uppercase; transition: color 0.3s; }
.nav-link:hover, .nav-link.active { color: var(--dv-vibrant-yellow) !important; }

/* --- 4. Hero Section (The Main Update) --- */
.hero-static {
    position: relative;
    min-height: 100vh;
    padding: 120px 0 60px 0;
    overflow: hidden;
    background-color: var(--dv-deep-blue);
    background-image: radial-gradient(circle at 70% 40%, #1f2a5c 0%, var(--dv-deep-blue) 60%);
}

/* --- 5. Bonus Card (Rebuilt to Match Screenshot) --- */
.bonus-card {
    position: relative; z-index: 10;
    background: linear-gradient(165deg, var(--dv-card-red) 0%, rgba(13, 18, 43, 0.7) 70%);
    border-radius: 20px;
    border: 2px solid var(--dv-neon-blue);
    box-shadow: 0 0 25px rgba(85, 170, 255, 0.5), 0 5px 30px #000;
    backdrop-filter: blur(5px);
}
/* Removed .card-glow as the box-shadow now handles this */

.bonus-title { /* "100%" Text with Gradient */
    font-size: 5rem;
    line-height: 1;
    font-weight: 700;
    background: linear-gradient(to bottom, var(--dv-vibrant-yellow), var(--dv-vibrant-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 3px 15px rgba(0,0,0,0.6);
}
.bonus-subtitle { font-size: 1.5rem; letter-spacing: 2px; color: #fff; }
.bonus-amount { font-size: 2.8rem; color: var(--dv-classic-gold); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.bonus-spins { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.2rem; color: #fff; text-transform: uppercase;}
.terms-text p { font-size: 0.75rem !important; line-height: 1.4; color: #ccc !important; }
.terms-text a { color: #fff !important; }

/* --- 6. Sign-Up Button (Matched to Screenshot) --- */
.btn-signup {
    background: linear-gradient(to bottom, var(--dv-vibrant-yellow) 0%, var(--dv-vibrant-orange) 100%);
    border: none;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 0 #b36b00;
    transition: all 0.2s ease;
}
.btn-signup:hover {
    background: linear-gradient(to bottom, #ffdd77 0%, #ff9c30 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(240, 137, 32, 0.4);
    color: white;
}
.btn-signup:active { transform: translateY(2px); box-shadow: 0 2px 0 #995c00; }

/* --- 7. Hero Main Image --- */
.hero-main-image {
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
    animation: floatImage 8s ease-in-out infinite;
}
@keyframes floatImage {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* --- 8. Other Sections (Refined Styles) --- */
#bonuses { background-color: var(--light-bg); }
.feature-card { /* Card hover effect */
    background: #fff; border: 1px solid #e9ecef; border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.btn-gold { /* General CTA Button to match theme */
    background: linear-gradient(90deg, var(--dv-vibrant-yellow), var(--dv-vibrant-orange));
    color: #fff; font-weight: bold; border: none; border-radius: 50px;
    padding: 12px 30px; transition: all 0.3s ease;
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(240, 137, 32, 0.4); }

/* --- 9. Animations & Scroll to Top --- */
/* (This section remains the same as it's already professional) */
.animated-item { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animated-item.is-visible { opacity: 1; transform: translateY(0); }
.scroll-to-top {
    position: fixed; bottom: 20px; right: 20px;
    width: 50px; height: 50px;
    background: var(--dv-vibrant-orange); color: #fff; border-radius: 50%;
    text-align: center; line-height: 50px; font-size: 1.2rem;
    z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.4s ease;
}
.scroll-to-top.visible { opacity: 1; visibility: visible; }
.scroll-to-top:hover { background-color: var(--dv-vibrant-yellow); transform: scale(1.1); }