:root {
    --primary: #00ff88;
    --secondary: #00ccff;
    --dark-bg: #0a0a0f;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #b3b3b3;
    --font-heading: 'Luckiest Guy', cursive;
    --font-body: 'Luckiest Guy', cursive;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Luckiest Guy', cursive !important;
}

body {
    font-family: var(--font-body);
    /* Background moved to pseudo-element for isolated blur */
    background-color: var(--dark-bg);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(0, 255, 136, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(0, 204, 255, 0.1) 0%, transparent 20%),
        url("background.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: blur(10px);
    /* 20% visual blur approx */
    z-index: -2;
    transform: scale(1.1);
    /* Prevent blurred edges */
}

/* Floating V-Bucks Animation */
@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-120vh) rotate(360deg);
        opacity: 0;
    }
}

.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    bottom: -100px;
    background-image: url('Icon_VBucks.webp');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    animation: floatUp linear infinite;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation - Glass Pill */
.glass-pill {
    position: fixed;
    top: 30px;
    right: 30px;
    /* Position top right like screenshot? Or keep centered? Screenshot shows Top Right roughly or centered? Let's use Top Right or Centered. The screenshot actually crops the top. Standard landing page usually top right or center. The previous code was centered. Let's make it a nice pill top center.*/
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    /* Dark transparency */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 40px;
    border-radius: 50px;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Hero Section */
.hero {
    min-height: auto;
    padding: 120px 0 60px;
    /* Reduced height, just enough for header */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.hero-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: 8rem;
    /* Huge font */
    line-height: 0.9;
    color: white;
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
    transform: skewY(-2deg);
    /* Slight dynamic skew */
}

.text-white {
    color: white;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 3rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    font-weight: 500;
}

/* Cyan CTA Button */
.cyan-cta {
    background: #00FFFF;
    /* Cyan */
    color: black;
    font-family: 'Luckiest Guy';
    font-size: 3rem;
    padding: 1rem 4rem;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 20px #00FFFF, 0 0 60px rgba(0, 255, 255, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.cyan-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px #00FFFF, 0 0 80px rgba(0, 255, 255, 0.6);
    background: #E0FFFF;
}

.cyan-cta i {
    font-size: 2rem;
}

/* Hero Badges */
.hero-badges {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 4rem;
}

.badge-pill {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-family: 'Luckiest Guy', cursive;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-pill.main-badge {
    background: linear-gradient(90deg, #00FFFF, #00BFFF);
    color: black;
    border: none;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.badge-pill i {
    font-size: 1.2rem;
}

/* Trust Badges - Old removed */


/* LobbyBot Panel */
.lobby-bot-panel {
    background: #1e1e1e;
    /* Dark Grey like authentic Epic launcher */
    color: white;
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 450px;
    margin: 2rem auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    border: 1px solid #333;
    font-family: 'Luckiest Guy', cursive;
    position: relative;
    overflow: hidden;
}

.panel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    color: #ccc;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 600;
}

.epic-logo {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    fill: white;
}

.panel-step h3 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* Inputs */
.input-group input {
    width: 100%;
    background: #2a2a2a;
    border: 1px solid #444;
    color: white;
    padding: 1rem;
    border-radius: 4px;
    font-size: 1.1rem;
    font-family: 'Luckiest Guy', cursive;
    margin-bottom: 1.5rem;
    outline: none;
    transition: 0.3s;
}

.input-group input:focus {
    border-color: var(--secondary);
    background: #333;
}

/* Platform Selector */
.platform-selector {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.platform-option {
    width: 50px;
    height: 50px;
    background: #2a2a2a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    transition: 0.3s;
    border: 2px solid transparent;
}

.platform-option:hover,
.platform-option.selected {
    background: #333;
    color: white;
    border-color: var(--secondary);
}

/* Epic Button */
.epic-button {
    background: var(--secondary);
    /* Epic Blue-ish */
    color: white;
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Luckiest Guy', cursive;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
}

.epic-button:hover {
    background: #00b3e6;
    transform: translateY(-2px);
}

/* Loading State */
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #333;
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    margin: 2rem auto;
    animation: spin 1s linear infinite;
}

.blink-text {
    animation: blink 1.5s infinite;
}

.console-log {
    background: #111;
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Luckiest Guy', cursive;
    font-size: 0.9rem;
    color: var(--primary);
    text-align: left;
    height: 80px;
    overflow: hidden;
    margin-top: 1rem;
    border: 1px solid #333;
}

/* Amount Grid */
.amount-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.amount-option {
    background: #2a2a2a;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #444;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.amount-option:hover {
    border-color: var(--primary);
    background: #333;
}

.amount-option img {
    height: 40px;
    margin-bottom: 0.5rem;
}

.amount-option span {
    display: block;
    font-family: 'Luckiest Guy', cursive;
    font-weight: bold;
    font-size: 1.1rem;
}

.badge-pop {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--secondary);
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Luckiest Guy', cursive;
    color: #000;
    font-weight: 800;
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    50% {
        opacity: 0.5;
    }
}

/* Steps Section */
.steps-section {
    padding: 5rem 0;
}

.section-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 4rem;
    text-transform: uppercase;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.step-card {
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.step-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.step-number {
    font-family: 'Luckiest Guy', cursive;
    font-size: 4rem;
    color: transparent;
    -webkit-text-stroke: 2px var(--secondary);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.step-card h3 {
    margin-bottom: 1rem;
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.5rem;
}

/* Video Section */
.video-section {
    padding: 5rem 0;
    text-align: center;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Video Steps Styling */
.video-steps-container {
    max-width: 600px;
    margin: 0 auto 2rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.video-steps-intro {
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.8rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.video-steps-list {
    list-style: none;
    padding: 0;
}

.video-steps-list li {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    display: flex;
    font-family: 'Luckiest Guy', cursive;
    align-items: center;
    gap: 10px;
}

.video-steps-list li::before {
    content: "❤";
    color: var(--primary);
    font-size: 0.8rem;
}

/* Footer */
footer {
    padding: 3rem 0;
    text-align: center;
    font-family: 'Luckiest Guy', cursive;
    color: var(--text-muted);
    border-top: 1px solid var(--glass-border);
    margin-top: 5rem;
}

/* Animations */
@keyframes glow {
    from {
        filter: drop-shadow(0 0 10px rgba(0, 204, 255, 0.3));
    }

    to {
        filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.6));
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Responsive Optimization */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 100px 0 40px;
    }

    .hero-title {
        font-size: 4rem;
        margin-bottom: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
        padding: 0 10px;
        margin-bottom: 2rem;
    }

    .cyan-cta {
        font-family: 'Luckiest Guy', cursive !important;
        font-size: 2.2rem;
        padding: 0.8rem 2.5rem;
    }

    .hero-badges {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 3rem;
    }

    .section-title {
        font-size: 2.2rem;
        margin-bottom: 3rem;
    }

    .video-steps-container {
        padding: 1.5rem;
        margin: 0 15px 2rem;
    }

    .video-steps-intro {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 3rem;
    }

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

    .cyan-cta {
        font-size: 1.8rem;
        padding: 0.7rem 2rem;
        width: 90%;
        justify-content: center;
    }

    .lobby-bot-panel {
        padding: 1.5rem 1rem;
        margin: 1rem auto;
    }
}