*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary-bg: #1a0000;
    --secondary-bg: #2b0505;
    --accent-gold: #ffd700;
    --accent-gold-hover: #ffea00;
    --text-color: #ffffff;
    --text-muted: #cccccc;
    --header-bg: rgba(26, 0, 0, 0.95);
    --border-color: #4a0d0d;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}


h1,
h2,
h3 {
    color: var(--accent-gold);
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    color: #ffffff;
}

h2 {
    font-size: 2rem;
    /* border-bottom removed per user request */
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

p {
    margin-bottom: 1rem;
}


.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}


.btn {
    display: inline-block;
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(180deg, var(--accent-gold) 0%, #d4af37 100%);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(180deg, var(--accent-gold-hover) 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
}

.btn-secondary:hover {
    background: rgba(255, 215, 0, 0.1);
    color: #fff;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.2rem;
}

.cta-wrapper {
    text-align: center;
    margin-top: 2rem;
}


.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 82px;
    /* Fixed height per request */
    background-color: transparent;
    z-index: 1000;
    transition: background-color 0.3s ease, padding 0.3s ease;
    padding: 0;
    /* Remove padding to use fixed height */
    display: flex;
    align-items: center;
    /* Vertical center */
}

.sticky-header.scrolled {
    background-color: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* height stays 82px */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    /* Fill header */
}

.header-logo-img {
    max-height: 60px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--text-color);
    font-weight: bold;
    font-size: 1.1rem;
}

.nav-links a:hover {
    color: var(--accent-gold);
}

.btn-nav {
    background-color: var(--accent-gold);
    color: #000 !important;
    padding: 8px 16px;
    border-radius: 4px;
}

.btn-nav:hover {
    background-color: var(--accent-gold-hover);
    color: #000 !important;
}


.lang-switcher {
    position: relative;
    margin-left: 0.5rem;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.lang-current:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.lang-current img {
    width: 24px;
    height: auto;
    border-radius: 2px;
}

.lang-current .arrow {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: -10vw;
    /* Shift slightly left if needed, or align right */
    background: #ffffff;
    /* Light theme bg */
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    width: 320px;
    /* Wide enough for 3 columns */
    display: none;
    /* Hidden by default */
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1001;
}

/* Align right on desktop to prevent overflow */
@media (min-width: 1025px) {
    .lang-dropdown {
        right: 0;
    }
}

.lang-switcher:hover .lang-dropdown {
    display: grid;
}

.lang-dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 0.9rem;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.lang-dropdown li a:hover {
    background: #f0f0f0;
    color: #000;
}

.lang-dropdown img {
    width: 20px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Mobile Nav overrides for Lang Switcher */
@media (max-width: 768px) {
    .lang-switcher {
        width: 100%;
        margin: 0;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    .lang-current {
        justify-content: center;
        width: 100%;
    }

    .lang-dropdown {
        position: static;
        /* Stack in mobile menu */
        width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
        display: none;
        grid-template-columns: repeat(4, 1fr);
        /* 4 cols on mobile for compactness */
        padding: 10px 0;
    }

    .lang-switcher:hover .lang-dropdown,
    .lang-switcher:active .lang-dropdown {
        display: grid;
    }

    /* On mobile, maybe center items */
    .lang-dropdown li a {
        justify-content: center;
        flex-direction: column;
        font-size: 0.8rem;
    }
}


.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 82px;
    /* Updated header height */
    /* Header height */
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/screens/1_Section_Main 777 Coins Slot screen with gold 777 coin, gems and jackpots_результат.webp');
    background-size: cover;
    background-position: center;
    filter: brightness(0.4) blur(2px);
    z-index: -1;
}

.game-card {
    background: rgba(0, 0, 0, 0.6);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    max-width: 600px;
    margin: 0 auto;
    backdrop-filter: blur(5px);
}

.hero-logo {
    max-width: 300px;
    margin: 0 auto 2rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


.content-section {
    padding: 2rem 0;
    /* Reduced from 4rem */
    border-bottom: 1px solid #eee;
    /* Lighter border for light theme */
    background-color: #ffffff;
    color: #000000;
}

.content-section:nth-child(even) {
    background-color: #ffffff;
    /* User requested white, removing dark alternate */
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.content-grid.reverse {
    direction: rtl;
}

.content-grid.reverse>* {
    direction: ltr;
}

.content-grid .image img {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Softer shadow */
    border: 1px solid #ddd;
}

/* Update text colors for light background */
.content-section h2,
.content-section h3 {
    color: #000;
    /* Black headings for contrast */
    border-bottom: none;
    /* User requested removal of underlines */
}

.content-section p {
    color: #333;
    /* Dark gray for readability */
}

.caption {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    /* Dark muted */
    margin-top: 0.5rem;
    font-style: italic;
}

.author-intro {
    background: #f9f9f9;
    /* Light gray box */
    padding: 2rem;
    border-left: 4px solid var(--accent-gold);
    border-radius: 0 8px 8px 0;
    color: #333;
}

/* Adjust secondary button for light bg */
.content-section .btn-secondary {
    color: #333;
    border-color: #333;
}

.content-section .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

/* Demo Section specifics - keep dark or make light? */
/* User said "starting from intro... and below", which includes Demo */
.demo-container {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
    /* Game container stays dark */
    border: 2px solid var(--accent-gold);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* FAQ Styling update for light theme */
.faq-item {
    background: #f9f9f9;
    margin-bottom: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.faq-item h3 {
    color: #000;
}


.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    /* Generous gap per reference */
    margin-bottom: 2rem;
    align-items: start;
}

.comp-block {
    margin-bottom: 3rem;
}

/* Headers */
.col-pros h3 {
    color: #3da642;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: bold;
}

.col-cons h3 {
    color: #c94632;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: bold;
}

/* List Styling */
.comparison-grid ul li {
    position: relative;
    padding-left: 25px;
    /* Space for icon */
    margin-bottom: 1rem;
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

.comparison-grid ul li::before {
    content: '▷';
    /* Hollow triangle */
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* Icon Colors */
.col-pros ul li::before {
    color: #3da642;
    /* Match header or keep grey? Reference said "greyish" but user said "like here". Usually colorful is better for clarity, let's try greyish to be strict to ref if possible, but matching header is safer design. Let's go with Green/Red for icons to ensure distinction */
    color: #777;
    /* Actually, let's stick to the "subtle and grey-toned" analysis from the reference check */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .comp-block {
        margin-bottom: 2rem;
    }
}


/* Footer */
footer {
    background-color: #0b0000;
    padding: 3rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

.disclaimer {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #333;
}

.disclaimer h3 {
    font-size: 1.1rem;
    color: #fff;
}

.copyright {
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {

    .content-grid,
    .content-grid.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        text-align: center;
    }

    .content-grid.reverse>* {
        direction: ltr;
    }

    .image {
        order: -1;
        /* Image first on mobile usually looks better or stick to text first */
    }

    h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .header-content {
        position: relative;
    }

    .menu-toggle {
        display: block;
        /* Shown in bigger query below if needed, but usually mobile only */
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--header-bg);
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease;
        flex-direction: column;
    }

    .main-nav.active {
        max-height: 300px;
        border-top: 1px solid var(--border-color);
    }

    .nav-links {
        flex-direction: column;
        padding: 1rem 0;
        width: 100%;
    }

    .nav-links li {
        margin-bottom: 1rem;
    }

    .pros-cons-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .btn {
        width: 100%;
        display: block;
    }

    .container {
        padding: 0 1rem;
    }

    .header-logo-img {
        width: 120px;
    }
}

@media (max-width: 768px) {

    /* Mobile/Tablet Portrait specific for Demo */
    .demo-container {
        aspect-ratio: 9/16 !important;
        width: 100%;
        max-height: 70vh;
    }

    h1 {
        font-size: 1.5rem;
    }

    .hero {
        min-height: auto;
        padding: 100px 0 60px;
    }

    .demo-container-wrapper {
        width: 100%;
        padding: 0;
    }
}

/* Mobile Menu Button */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--accent-gold);
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

.header-logo-img {
    width: auto;
    height: auto;
    max-height: 60px;
    /* Constrain for 82px header */
}