/* ============================================
   PARTY PARROT - DISCO THEME STYLES
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Primary Colors */
    --party-green: #1CBF66;
    --tropical-yellow: #FFD93D;
    --fiesta-red: #FF3E3E;
    --ocean-blue: #1D7EFF;
    --electric-purple: #A020F0;

    /* Accent Colors */
    --neon-magenta: #FF2EC4;
    --teal-glow: #00FFE8;
    --laser-orange: #FF8A0A;

    /* Background Colors */
    --bg-dark: #0a0a0f;
    --bg-darker: #050508;
    --bg-card: rgba(20, 20, 35, 0.8);

    /* Gradients */
    --gradient-disco: linear-gradient(135deg, #FF2EC4, #FF8A0A);
    --gradient-neon: linear-gradient(135deg, #1D7EFF, #A020F0);
    --gradient-party: linear-gradient(135deg, #1CBF66, #00FFE8);
    --gradient-sunset: linear-gradient(135deg, #FF3E3E, #FFD93D);

    /* Typography */
    --font-display: 'Bangers', cursive;
    --font-body: 'Nunito', sans-serif;

    /* Spacing */
    --section-padding: 100px 0;
    --container-width: 1200px;

    /* Animation */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Disco Lights Overlay */
.disco-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255, 46, 196, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(29, 126, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(160, 32, 240, 0.1) 0%, transparent 50%);
    animation: discoLights 8s ease-in-out infinite;
}

@keyframes discoLights {
    0%, 100% {
        background:
            radial-gradient(ellipse at 20% 20%, rgba(255, 46, 196, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 30%, rgba(29, 126, 255, 0.1) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 80%, rgba(160, 32, 240, 0.1) 0%, transparent 50%);
    }
    33% {
        background:
            radial-gradient(ellipse at 70% 60%, rgba(255, 46, 196, 0.1) 0%, transparent 50%),
            radial-gradient(ellipse at 20% 80%, rgba(29, 126, 255, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 90% 20%, rgba(160, 32, 240, 0.1) 0%, transparent 50%);
    }
    66% {
        background:
            radial-gradient(ellipse at 40% 90%, rgba(255, 46, 196, 0.1) 0%, transparent 50%),
            radial-gradient(ellipse at 60% 10%, rgba(29, 126, 255, 0.1) 0%, transparent 50%),
            radial-gradient(ellipse at 10% 50%, rgba(160, 32, 240, 0.15) 0%, transparent 50%);
    }
}

/* Confetti Container */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-100%) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* ============================================
   NAVIGATION
   ============================================ */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 15px 0;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 46, 196, 0.2);
    transition: var(--transition-smooth);
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}

.nav-logo img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--neon-magenta);
    box-shadow: 0 0 15px rgba(255, 46, 196, 0.5);
    transition: var(--transition-smooth);
}

.nav-logo:hover img {
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 0 25px rgba(255, 46, 196, 0.8);
}

.nav-logo span {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: 2px;
    background: var(--gradient-disco);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0;
    position: relative;
    transition: var(--transition-smooth);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-disco);
    transition: var(--transition-smooth);
}

.nav-links a:hover {
    color: var(--neon-magenta);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-social {
    display: flex;
    align-items: center;
    padding: 10px !important;
    background: rgba(255, 46, 196, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(255, 46, 196, 0.3);
}

.nav-social:hover {
    background: rgba(255, 46, 196, 0.2);
    box-shadow: 0 0 20px rgba(255, 46, 196, 0.4);
}

.nav-social::after {
    display: none !important;
}

.nav-buy {
    background: var(--gradient-disco) !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 0 20px rgba(255, 46, 196, 0.4);
    animation: pulseGlow 2s ease-in-out infinite;
}

.nav-buy:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 46, 196, 0.6);
}

.nav-buy::after {
    display: none !important;
}

.nav-chart {
    background: var(--gradient-party) !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(28, 191, 102, 0.4);
}

.nav-chart:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(28, 191, 102, 0.6);
}

.nav-chart::after {
    display: none !important;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: var(--neon-magenta);
    border-radius: 2px;
    transition: var(--transition-smooth);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 120px 20px 60px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at center, rgba(160, 32, 240, 0.2) 0%, transparent 60%),
        var(--bg-dark);
}

.hero-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Disco Ball */
.disco-ball {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    animation: discoBallSway 4s ease-in-out infinite;
}

.disco-ball::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5));
}

.disco-ball-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #fff 2px, transparent 2px),
        radial-gradient(circle at 70% 30%, #fff 2px, transparent 2px),
        radial-gradient(circle at 50% 50%, #fff 2px, transparent 2px),
        radial-gradient(circle at 30% 70%, #fff 2px, transparent 2px),
        radial-gradient(circle at 70% 70%, #fff 2px, transparent 2px),
        radial-gradient(circle at 50% 20%, #fff 2px, transparent 2px),
        radial-gradient(circle at 50% 80%, #fff 2px, transparent 2px),
        radial-gradient(circle at 20% 50%, #fff 2px, transparent 2px),
        radial-gradient(circle at 80% 50%, #fff 2px, transparent 2px),
        linear-gradient(135deg, #666 0%, #ddd 50%, #666 100%);
    background-size: 100% 100%;
    box-shadow:
        0 0 60px rgba(255, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
    animation: discoBallRotate 10s linear infinite;
}

@keyframes discoBallSway {
    0%, 100% { transform: translateX(-50%) rotate(-3deg); }
    50% { transform: translateX(-50%) rotate(3deg); }
}

@keyframes discoBallRotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* Light Rays */
.light-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 46, 196, 0.1) 10deg,
            transparent 20deg,
            transparent 30deg,
            rgba(29, 126, 255, 0.1) 40deg,
            transparent 50deg,
            transparent 60deg,
            rgba(160, 32, 240, 0.1) 70deg,
            transparent 80deg,
            transparent 90deg,
            rgba(0, 255, 232, 0.1) 100deg,
            transparent 110deg,
            transparent 120deg);
    animation: lightRaysRotate 20s linear infinite;
    opacity: 0.5;
}

@keyframes lightRaysRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-content {
    max-width: var(--container-width);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* Mascot */
.hero-mascot {
    position: relative;
    flex-shrink: 0;
}

.mascot-image {
    width: 350px;
    height: 350px;
    object-fit: contain;
    border-radius: 30px;
    position: relative;
    z-index: 2;
    animation: mascotBounce 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 46, 196, 0.5));
}

@keyframes mascotBounce {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

.mascot-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 46, 196, 0.4) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* Hero Text */
.hero-text {
    max-width: 550px;
}

.hero-title {
    margin-bottom: 20px;
}

.title-line {
    display: block;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.title-main {
    display: block;
    font-family: var(--font-display);
    font-size: 5rem;
    letter-spacing: 8px;
    line-height: 1;
}

.neon-text {
    background: var(--gradient-disco);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(255, 46, 196, 0.5));
    animation: neonFlicker 3s ease-in-out infinite;
}

@keyframes neonFlicker {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(255, 46, 196, 0.5)); }
    50% { filter: drop-shadow(0 0 50px rgba(255, 46, 196, 0.8)); }
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
    line-height: 1.8;
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition-bounce);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-disco);
    color: #fff;
    border: none;
    box-shadow: 0 10px 30px rgba(255, 46, 196, 0.4);
}

.btn-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 40px rgba(255, 46, 196, 0.6);
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid var(--neon-magenta);
    box-shadow: 0 0 20px rgba(255, 46, 196, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 46, 196, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 46, 196, 0.4);
}

.btn-large {
    padding: 20px 50px;
    font-size: 1.1rem;
    white-space: nowrap;
    min-width: 160px;
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(255, 46, 196, 0.4); }
    50% { box-shadow: 0 10px 50px rgba(255, 46, 196, 0.8), 0 0 100px rgba(255, 46, 196, 0.4); }
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: 40px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--teal-glow);
    text-shadow: 0 0 20px rgba(0, 255, 232, 0.5);
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator span {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-right: 2px solid var(--neon-magenta);
    border-bottom: 2px solid var(--neon-magenta);
    transform: rotate(45deg);
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* ============================================
   SECTION COMMONS
   ============================================ */
.section-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-family: var(--font-display);
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 15px;
    letter-spacing: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.title-icon {
    font-size: 3rem;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 60px;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-section {
    padding: var(--section-padding);
    position: relative;
    background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(160, 32, 240, 0.1) 50%, var(--bg-dark) 100%);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.about-video {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.feature-video {
    width: 100%;
    border-radius: 20px;
    border: 3px solid rgba(255, 46, 196, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: var(--transition-smooth);
}

.about-video:hover .feature-video {
    border-color: var(--neon-magenta);
    box-shadow: 0 20px 60px rgba(255, 46, 196, 0.3);
}

.video-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: radial-gradient(circle at center, transparent 60%, rgba(255, 46, 196, 0.2) 100%);
    pointer-events: none;
}

.about-text .lead-text {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.6;
}

.about-text p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
    line-height: 1.8;
}

.highlight {
    color: var(--neon-magenta);
    font-weight: 700;
}

.highlight-alt {
    color: var(--tropical-yellow);
    font-weight: 700;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.feature-card {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 46, 196, 0.2);
    text-align: center;
    transition: var(--transition-smooth);
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--neon-magenta);
    box-shadow: 0 20px 40px rgba(255, 46, 196, 0.2);
}

.feature-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    color: var(--teal-glow);
}

.feature-icon svg {
    width: 100%;
    height: 100%;
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}

.feature-card p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Disco Floor Effect */
.disco-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 50px,
            rgba(255, 46, 196, 0.05) 50px,
            rgba(255, 46, 196, 0.05) 100px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 50px,
            rgba(29, 126, 255, 0.05) 50px,
            rgba(29, 126, 255, 0.05) 100px
        );
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
    opacity: 0.5;
    animation: discoFloorPulse 2s ease-in-out infinite;
}

@keyframes discoFloorPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ============================================
   TOKENOMICS SECTION
   ============================================ */
.tokenomics-section {
    padding: var(--section-padding);
    background: var(--bg-darker);
    position: relative;
}

.tokenomics-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 138, 10, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(29, 126, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

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

/* Vinyl Record Chart */
.vinyl-chart {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vinyl-record {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            circle at center,
            #1a1a1a 0px,
            #1a1a1a 2px,
            #222 2px,
            #222 4px
        );
    box-shadow:
        0 0 0 10px #111,
        0 20px 60px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    animation: vinylSpin 8s linear infinite;
    position: relative;
}

.vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--gradient-disco);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.vinyl-label img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.vinyl-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background: #111;
    border-radius: 50%;
    border: 2px solid #333;
}

@keyframes vinylSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vinyl-arm {
    position: absolute;
    top: -20px;
    right: 20px;
    width: 120px;
    height: 8px;
    background: linear-gradient(to right, #444, #666);
    border-radius: 4px;
    transform-origin: right center;
    transform: rotate(25deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.vinyl-arm::before {
    content: '';
    position: absolute;
    right: -15px;
    top: -15px;
    width: 35px;
    height: 35px;
    background: radial-gradient(circle, #555, #333);
    border-radius: 50%;
}

.vinyl-arm::after {
    content: '';
    position: absolute;
    left: -5px;
    top: -3px;
    width: 20px;
    height: 14px;
    background: #888;
    border-radius: 3px;
}

/* Equalizer Bars */
.equalizer-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eq-bar-container {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    gap: 15px;
    align-items: center;
}

.eq-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.eq-bar {
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.eq-fill {
    height: 100%;
    width: 0;
    border-radius: 15px;
    background: var(--gradient-disco);
    position: relative;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(255, 46, 196, 0.5);
}

.eq-fill.animated {
    width: var(--target-width);
}

.eq-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: eqShine 2s linear infinite;
}

@keyframes eqShine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.eq-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--teal-glow);
    text-shadow: 0 0 10px rgba(0, 255, 232, 0.5);
}

/* Token Info Cards */
.token-info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.info-card {
    background: var(--bg-card);
    padding: 35px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 46, 196, 0.2);
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-disco);
}

.info-card:hover {
    transform: translateY(-10px);
    border-color: var(--neon-magenta);
    box-shadow: 0 20px 50px rgba(255, 46, 196, 0.2);
}

.info-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.info-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.info-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--neon-magenta);
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 46, 196, 0.5);
}

.info-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   ROADMAP SECTION
   ============================================ */
.roadmap-section {
    padding: var(--section-padding);
    background: var(--bg-dark);
    position: relative;
}

.club-rooms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.club-room {
    background: var(--bg-card);
    border-radius: 25px;
    overflow: hidden;
    border: 2px solid transparent;
    position: relative;
    transition: var(--transition-smooth);
}

.club-room:hover {
    transform: translateY(-10px);
}

.club-room.lounge {
    border-color: rgba(28, 191, 102, 0.3);
}

.club-room.lounge:hover {
    border-color: var(--party-green);
    box-shadow: 0 20px 60px rgba(28, 191, 102, 0.3);
}

.club-room.dance-floor {
    border-color: rgba(255, 46, 196, 0.3);
}

.club-room.dance-floor:hover {
    border-color: var(--neon-magenta);
    box-shadow: 0 20px 60px rgba(255, 46, 196, 0.3);
}

.club-room.vip-balcony {
    border-color: rgba(255, 217, 61, 0.3);
}

.club-room.vip-balcony:hover {
    border-color: var(--tropical-yellow);
    box-shadow: 0 20px 60px rgba(255, 217, 61, 0.3);
}

.club-room.backstage {
    border-color: rgba(160, 32, 240, 0.3);
}

.club-room.backstage:hover {
    border-color: var(--electric-purple);
    box-shadow: 0 20px 60px rgba(160, 32, 240, 0.3);
}

.room-neon {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 4px;
    padding: 20px;
    text-align: center;
}

.lounge .room-neon {
    color: var(--party-green);
    text-shadow: 0 0 30px rgba(28, 191, 102, 0.8);
}

.dance-floor .room-neon {
    color: var(--neon-magenta);
    text-shadow: 0 0 30px rgba(255, 46, 196, 0.8);
}

.vip-balcony .room-neon {
    color: var(--tropical-yellow);
    text-shadow: 0 0 30px rgba(255, 217, 61, 0.8);
}

.backstage .room-neon {
    color: var(--electric-purple);
    text-shadow: 0 0 30px rgba(160, 32, 240, 0.8);
}

.room-phase {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.room-content {
    padding: 0 25px 25px;
}

.room-video {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.room-list {
    list-style: none;
}

.room-list li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.room-list li:last-child {
    border-bottom: none;
}

.room-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--party-green);
    font-weight: bold;
}

.room-status {
    text-align: center;
    padding: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.room-status.active {
    background: rgba(28, 191, 102, 0.2);
    color: var(--party-green);
    animation: statusPulse 2s ease-in-out infinite;
}

.room-status.upcoming {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

@keyframes statusPulse {
    0%, 100% { background: rgba(28, 191, 102, 0.2); }
    50% { background: rgba(28, 191, 102, 0.4); }
}

/* ============================================
   GALLERY SECTION
   ============================================ */
.gallery-section {
    padding: var(--section-padding);
    background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(29, 126, 255, 0.1) 50%, var(--bg-dark) 100%);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid rgba(255, 46, 196, 0.2);
    transition: var(--transition-smooth);
}

.gallery-item:hover {
    transform: scale(1.05);
    border-color: var(--neon-magenta);
    box-shadow: 0 20px 50px rgba(255, 46, 196, 0.4);
    z-index: 10;
}

.gallery-item.featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition-smooth);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
    transform: translateY(0);
}

.gallery-overlay span {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 46, 196, 0.5);
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
    padding: 80px 20px;
    background: var(--gradient-neon);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
}

.cta-section .section-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-content {
    max-width: 600px;
}

.cta-title {
    font-family: var(--font-display);
    font-size: 3rem;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.cta-text {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
}

.cta-mascot {
    flex-shrink: 0;
}

.cta-mascot img {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    animation: ctaMascotFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

@keyframes ctaMascotFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

/* ============================================
   FOOTER
   ============================================ */
.main-footer {
    background: var(--bg-darker);
    padding-top: 0;
}

.footer-glow-line {
    height: 2px;
    background: var(--gradient-disco);
    box-shadow: 0 0 20px rgba(255, 46, 196, 0.5);
}

.footer-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 60px 20px 30px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    padding-bottom: 40px;
}

.footer-brand {
    text-align: left;
}

.footer-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin-bottom: 15px;
    border: 2px solid rgba(255, 46, 196, 0.3);
}

.footer-tagline {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-col h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: var(--neon-magenta);
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.footer-col a:hover {
    color: var(--neon-magenta);
    transform: translateX(5px);
}

.footer-col svg {
    flex-shrink: 0;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
}

.footer-disclaimer {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 15px;
    line-height: 1.6;
}

.footer-copyright {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .mascot-image {
        width: 280px;
        height: 280px;
    }

    .hero-stats {
        justify-content: center;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .tokenomics-content {
        grid-template-columns: 1fr;
    }

    .vinyl-chart {
        margin-bottom: 40px;
    }

    .club-rooms {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item.featured {
        grid-column: span 2;
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 75px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(10, 10, 15, 0.98);
        padding: 30px;
        gap: 20px;
        transform: translateX(-100%);
        transition: var(--transition-smooth);
        border-bottom: 1px solid rgba(255, 46, 196, 0.2);
    }

    .nav-links.active {
        transform: translateX(0);
    }

    .section-title {
        font-size: 2.5rem;
    }

    .title-main {
        font-size: 3.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .token-info-cards {
        grid-template-columns: 1fr;
    }

    .eq-bar-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .eq-label {
        text-align: left;
    }

    .eq-value {
        text-align: right;
        margin-top: -30px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item.featured {
        grid-column: auto;
    }

    .cta-section .section-container {
        flex-direction: column;
        text-align: center;
    }

    .cta-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-col a {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .mascot-image {
        width: 220px;
        height: 220px;
    }

    .title-main {
        font-size: 2.8rem;
        letter-spacing: 4px;
    }

    .section-title {
        font-size: 2rem;
        flex-direction: column;
        gap: 10px;
    }

    .btn {
        padding: 14px 24px;
        font-size: 0.9rem;
    }

    .vinyl-record {
        width: 220px;
        height: 220px;
    }

    .vinyl-label {
        width: 80px;
        height: 80px;
    }

    .vinyl-label img {
        width: 55px;
        height: 55px;
    }

    .room-neon {
        font-size: 1.5rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .disco-ball {
        width: 80px;
        height: 80px;
    }
}

/* Scroll Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Selection */
::selection {
    background: var(--neon-magenta);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-disco);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-magenta);
}