@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;600;800&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: #0a0a0a;
            color: #ffffff;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Animated background */
        .noise-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 0, 110, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(57, 255, 20, 0.08) 0%, transparent 50%);
            z-index: 0;
            animation: pulse 8s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }
        
        .content {
            position: relative;
            z-index: 1;
        }
        
        /* Header */
        header {
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-family: 'Bangers', cursive;
            font-size: 36px;
            color: #00FFFF;
            text-shadow: 0 0 20px #00FFFF, 0 0 40px #FF006E;
            letter-spacing: 3px;
        }
        
        .mute-toggle {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgb(7, 204, 174);
            padding: 5px 5px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 400;
            font-size: 25px;
            transition: all 0.3s;
        }
        
        .mute-toggle:hover {
            background: rgb(7, 204, 174);
            color: #0a0a0a;
            transform: scale(1.05);
        }
        
        /* Hero Section */
        .hero {
            padding: 80px 0;
            text-align: center;
            position: relative;
        }

        .gif-temp {
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            pointer-events: none; /* So it doesn’t block clicks */
        }
        
        .mascot-container {
            position: relative;
            display: inline-block;
            margin-bottom: 40px;
        }
        
        .mascot {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #ff006f40, #00ffff3a);
            border-radius: 50%;
            position: relative;
            animation: bounce 2s ease-in-out infinite;
            box-shadow: 0 0 60px rgba(0, 255, 255, 0.4), 0 0 100px rgba(255, 0, 110, 0.3);
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.05); }
        }
        
        .sound-wave {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid #39FF14;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: wave 1.5s ease-out infinite;
        }
        
        .sound-wave:nth-child(2) {
            animation-delay: 0.3s;
        }
        
        .sound-wave:nth-child(3) {
            animation-delay: 0.6s;
        }
        
        @keyframes wave {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.8);
                opacity: 0;
            }
        }
        
        .hero h1 {
            font-family: 'Bangers', cursive;
            font-size: 72px;
            line-height: 1.1;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #00FFFF, #FF006E, #39FF14);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shimmer 3s ease-in-out infinite;
        }
        
        @keyframes shimmer {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
            color: #cccccc;
        }
        
        .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, #FF006E, #00FFFF);
            color: #0a0a0a;
            font-family: 'Bangers', cursive;
            font-size: 32px;
            padding: 20px 60px;
            border-radius: 50px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            animation: wiggle 1s ease-in-out infinite;
            box-shadow: 0 10px 40px rgba(255, 0, 110, 0.5);
        }

        .cta-button-2 {
            display: inline-block;
            position: relative;
            background: rgb(4, 33, 30);
            color: #08c9bc;
            font-family: 'Bangers', cursive;
            font-size: 32px;
            padding: 20px 60px;
            border-radius: 50px;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s;
            animation: wiggle 1s ease-in-out infinite;
            box-shadow: 0 10px 40px rgba(255, 0, 110, 0.5);
        }

        .cta-button-3 {
            display: inline-block;
            position: relative;
            background: rgb(1, 1, 1);
            color: #08c9bc;
            font-family: 'Bangers', cursive;
            font-size: 25px;
            padding: 10px 30px;
            border-radius: 50px;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s;
            animation: wiggle 1s ease-in-out infinite;
            box-shadow: 0 10px 40px rgba(255, 0, 110, 0.5);
        }

        .cta-button-3::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 2px; /* border thickness */
            border-radius: 50px;
            background: linear-gradient(135deg, #FF006E, #00FFFF);
            -webkit-mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        .cta-button-2::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 2px; /* border thickness */
            border-radius: 50px;
            background: linear-gradient(135deg, #FF006E, #00FFFF);
            -webkit-mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        
        .cta-button:hover {
            transform: scale(1.1) rotate(-2deg);
            box-shadow: 0 15px 60px rgba(0, 255, 255, 0.6);
        }

        .cta-button-2:hover {
            transform: scale(1.1) rotate(-2deg);
            box-shadow: 0 15px 60px rgba(0, 255, 255, 0.6);
            background: #0a0a0a;
        }

        .cta-button-3:hover {
            transform: scale(1.1) rotate(-2deg);
            box-shadow: 0 15px 60px rgba(0, 255, 255, 0.6);
            background: #0a0a0a;
        }
        
        @keyframes wiggle {
            0%, 100% { transform: rotate(-1deg); }
            50% { transform: rotate(1deg); }
        }
        
        /* Value Prop Section */
        .value-prop {
            padding: 100px 0;
            background: linear-gradient(180deg, transparent, rgba(0, 255, 255, 0.05), transparent);
        }
        
        .value-prop h2 {
            font-family: 'Bangers', cursive;
            font-size: 48px;
            text-align: center;
            margin-bottom: 60px;
            color: #39FF14;
            text-shadow: 0 0 20px #39FF14;
        }
        
        .value-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        
        .value-card {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid #00FFFF;
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .value-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }
        
        .value-card:hover {
            transform: translateY(-10px);
            border-color: #FF006E;
            box-shadow: 0 20px 60px rgba(255, 0, 110, 0.3);
        }
        
        .value-card:hover::before {
            left: 100%;
        }
        
        .value-icon {
            font-size: 64px;
            margin-bottom: 20px;
        }
        
        .value-card h3 {
            font-family: 'Bangers', cursive;
            font-size: 28px;
            margin-bottom: 15px;
            color: #00FFFF;
        }
        
        /* How It Works */
        .how-it-works {
            padding: 100px 0;
        }
        
        .how-it-works h2 {
            font-family: 'Bangers', cursive;
            font-size: 48px;
            text-align: center;
            margin-bottom: 60px;
            color: #FF006E;
            text-shadow: 0 0 20px #FF006E;
        }
        
        .steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
        
        .step {
            background: rgba(255, 255, 255, 0.03);
            border: 2px solid #39FF14;
            border-radius: 20px;
            padding: 40px;
            position: relative;
            transition: all 0.3s;
        }
        
        .step:hover {
            transform: scale(1.05);
            background: rgba(57, 255, 20, 0.1);
        }
        
        .step-number {
            position: absolute;
            top: -20px;
            left: 30px;
            background: linear-gradient(135deg, #39FF14, #00FFFF);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Bangers', cursive;
            font-size: 28px;
            color: #0a0a0a;
        }
        
        .step h3 {
            font-family: 'Bangers', cursive;
            font-size: 24px;
            margin: 20px 0 15px 0;
            color: #39FF14;
        }
        
        /* Character Panel */
        .character-panel {
            padding: 100px 0;
            background: linear-gradient(180deg, transparent, rgba(255, 0, 110, 0.05), transparent);
        }
        
        .character-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .character-image {
            position: relative;
        }
        
        .speech-bubble {
            background: #FF006E;
            color: #0a0a0a;
            padding: 30px;
            border-radius: 30px;
            position: relative;
            font-family: 'Bangers', cursive;
            font-size: 32px;
            text-align: center;
            animation: float 3s ease-in-out infinite;
            box-shadow: 0 10px 40px rgba(255, 0, 110, 0.4);
        }
        
        .speech-bubble::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #FF006E;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        .character-text h2 {
            font-family: 'Bangers', cursive;
            font-size: 42px;
            margin-bottom: 20px;
            color: #00FFFF;
        }
        
        .character-text p {
            font-size: 18px;
            line-height: 1.6;
            color: #cccccc;
            margin-bottom: 15px;
        }
        
        /* Community Section */
        .community {
            padding: 100px 0;
        }
        
        .community h2 {
            font-family: 'Bangers', cursive;
            font-size: 48px;
            text-align: center;
            margin-bottom: 60px;
            color: #39FF14;
            text-shadow: 0 0 20px #39FF14;
        }
        
        .meme-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .meme-card {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid #00FFFF;
            border-radius: 20px;
            padding: 20px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .meme-card:hover {
            transform: rotate(2deg) scale(1.05);
            border-color: #FF006E;
        }
        
        .meme-placeholder {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #FF006E, #00FFFF, #39FF14);
            border-radius: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        
        .meme-card p {
            font-family: 'Bangers', cursive;
            font-size: 20px;
            color: #00FFFF;
        }
        
        /* Roadmap */
        .roadmap {
            padding: 100px 0;
            background: linear-gradient(180deg, transparent, rgba(0, 255, 255, 0.05), transparent);
        }
        
        .roadmap h2 {
            font-family: 'Bangers', cursive;
            font-size: 48px;
            text-align: center;
            margin-bottom: 60px;
            color: #FF006E;
            text-shadow: 0 0 20px #FF006E;
        }
        
        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #00FFFF, #FF006E, #39FF14);
        }
        
        .timeline-item {
            display: flex;
            justify-content: flex-end;
            padding-right: 50%;
            position: relative;
            margin-bottom: 50px;
        }
        
        .timeline-item:nth-child(even) {
            justify-content: flex-start;
            padding-left: 50%;
            padding-right: 0;
        }
        
        .timeline-content {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid #39FF14;
            border-radius: 20px;
            padding: 30px;
            max-width: 350px;
            transition: all 0.3s;
        }
        
        .timeline-content:hover {
            transform: scale(1.05);
            border-color: #00FFFF;
        }
        
        .timeline-content h3 {
            font-family: 'Bangers', cursive;
            font-size: 24px;
            margin-bottom: 10px;
            color: #39FF14;
        }
        
        .timeline-dot {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: #FF006E;
            border-radius: 50%;
            border: 4px solid #0a0a0a;
        }
        
        /* Footer */
        footer {
            padding: 80px 0 40px 0;
            text-align: center;
            border-top: 2px solid rgba(0, 255, 255, 0.2);
        }
        
        .footer-cta {
            margin-bottom: 40px;
        }
        
        .footer-cta h2 {
            font-family: 'Bangers', cursive;
            font-size: 42px;
            margin-bottom: 30px;
            color: #00FFFF;
        }
        
        .social-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .social-link {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid #00FFFF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            transition: all 0.3s;
            text-decoration: none;
        }
        
        .social-link:hover {
            background: #00FFFF;
            transform: scale(1.2) rotate(10deg);
        }
        
        .disclaimer {
            font-size: 12px;
            color: #666;
            max-width: 800px;
            margin: 0 auto 20px auto;
            line-height: 1.6;
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 48px;
            }
            
            .hero p {
                font-size: 18px;
            }
            
            .cta-button {
                font-size: 24px;
                padding: 15px 40px;
            }
            
            .mascot {
                width: 200px;
                height: 200px;
            }
            
            .value-prop h2,
            .how-it-works h2,
            .community h2,
            .roadmap h2 {
                font-size: 36px;
            }
            
            .character-content {
                grid-template-columns: 1fr;
            }
            
            .timeline::before {
                left: 20px;
            }
            
            .timeline-item,
            .timeline-item:nth-child(even) {
                justify-content: flex-start;
                padding-left: 60px;
                padding-right: 0;
            }
            
            .timeline-dot {
                left: 20px;
            }
            
            .logo {
                font-size: 28px;
            }
        }

        /* Staking Section */
        .staking {
            padding: 100px 0;
            background: linear-gradient(180deg, rgba(255, 0, 110, 0.05), rgba(57, 255, 20, 0.05));
        }
        
        .staking h2 {
            font-family: 'Bangers', cursive;
            font-size: 48px;
            text-align: center;
            margin-bottom: 60px;
            color: #39FF14;
            text-shadow: 0 0 20px #39FF14;
        }
        
        .staking-content {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 60px;
            align-items: center;
        }
        
        .staking-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .coin-stack {
            position: relative;
            animation: stackFloat 3s ease-in-out infinite;
        }
        
        .coin {
            font-size: 100px;
            text-shadow: 0 0 30px #39FF14;
            animation: coinSpin 4s linear infinite;
            margin: -20px 0;
        }
        
        .coin:nth-child(2) {
            animation-delay: 0.5s;
            font-size: 120px;
        }
        
        .coin:nth-child(3) {
            animation-delay: 1s;
        }
        
        @keyframes stackFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes coinSpin {
            0%, 100% { transform: rotateY(0deg) scale(1); }
            50% { transform: rotateY(180deg) scale(1.1); }
        }
        
        .reward-burst {
            position: absolute;
            top: -20px;
            right: -20px;
            background: linear-gradient(135deg, #FF006E, #00FFFF);
            padding: 20px 30px;
            border-radius: 20px;
            font-family: 'Bangers', cursive;
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: burst 2s ease-in-out infinite;
            box-shadow: 0 10px 40px rgba(255, 0, 110, 0.5);
        }
        
        .reward-burst span:first-child {
            font-size: 36px;
            color: #0a0a0a;
            line-height: 1;
        }
        
        .reward-burst span:last-child {
            font-size: 18px;
            color: #0a0a0a;
        }
        
        @keyframes burst {
            0%, 100% { transform: scale(1) rotate(-5deg); }
            50% { transform: scale(1.1) rotate(5deg); }
        }
        
        .staking-info h3 {
            font-family: 'Bangers', cursive;
            font-size: 36px;
            margin-bottom: 20px;
            color: #00FFFF;
        }
        
        .staking-info > p {
            font-size: 18px;
            line-height: 1.6;
            color: #cccccc;
            margin-bottom: 40px;
        }
        
        .staking-benefits {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .benefit-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(57, 255, 20, 0.3);
            border-radius: 15px;
            padding: 20px;
            transition: all 0.3s;
        }
        
        .benefit-item:hover {
            background: rgba(57, 255, 20, 0.1);
            border-color: #39FF14;
            transform: translateX(10px);
        }
        
        .benefit-icon {
            font-size: 40px;
            flex-shrink: 0;
        }
        
        .benefit-item h4 {
            font-family: 'Bangers', cursive;
            font-size: 20px;
            margin-bottom: 5px;
            color: #39FF14;
        }
        
        .benefit-item p {
            font-size: 14px;
            color: #cccccc;
        }
        
        .stake-cta {
            display: inline-block;
            background: linear-gradient(135deg, #39FF14, #00FFFF);
            color: #0a0a0a;
            font-family: 'Bangers', cursive;
            font-size: 28px;
            padding: 18px 50px;
            border-radius: 50px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 10px 40px rgba(57, 255, 20, 0.5);
        }
        
        .stake-cta:hover {
            transform: scale(1.1) rotate(2deg);
            box-shadow: 0 15px 60px rgba(57, 255, 20, 0.7);
            background: linear-gradient(135deg, #00FFFF, #39FF14);
        }