<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ACT B - The Bonk Prophecy</title>
    <style>
        /* ========== TEMPLATE CONFIGURATION ========== */
        :root {
            /* PRIMARY COLORS - Change these to match your brand */
            --primary-color: #ff6b1a;
            --secondary-color: #ff8c42;
            --accent-color: #ffa366;
            
            /* BACKGROUND COLORS */
            --bg-dark: #1a0e0a;
            --bg-medium: #2d1810;
            --bg-light: rgba(255, 107, 26, 0.1);
            
            /* TEXT COLORS */
            --text-primary: #ffffff;
            --text-secondary: rgba(255, 255, 255, 0.8);
            --text-accent: var(--primary-color);
            
            /* SPACING */
            --section-padding: 100px 0;
            --container-max-width: 1200px;
            --border-radius: 15px;
            
            /* EFFECTS */
            --glow-effect: 0 0 30px rgba(255, 107, 26, 0.5);
            --hover-transform: translateY(-10px);
            --transition-speed: 0.3s ease;
        }

        /* ========== RESET & BASE STYLES ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 25%, var(--primary-color) 100%);
            color: var(--text-primary);
            overflow-x: hidden;
            line-height: 1.6;
        }

        .container {
            max-width: var(--container-max-width);
            margin: 0 auto;
            padding: 0 20px;
        }

        /* ========== BANNER SYSTEM ========== */
        .banner {
            width: 100%;
            text-align: center;
            padding: 15px;
            font-weight: bold;
            position: relative;
            z-index: 1001;
        }

        .banner.announcement {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: white;
        }

        .banner.warning {
            background: linear-gradient(90deg, #ef4444, #f97316);
            color: white;
        }

        .banner.success {
            background: linear-gradient(90deg, #10b981, #34d399);
            color: white;
        }

        .banner.info {
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            color: white;
        }

        .banner-close {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            padding: 5px;
        }

        /* ========== HEADER STYLES ========== */
        header {
            padding: 20px 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(26, 14, 10, 0.9);
            backdrop-filter: blur(10px);
            transition: all var(--transition-speed);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
            text-shadow: var(--glow-effect);
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .nav-links a {
            color: var(--text-primary);
            text-decoration: none;
            transition: color var(--transition-speed);
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: width var(--transition-speed);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* ========== HERO SECTION ========== */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            background-image: var(--hero-bg-image, none);
            background-size: cover;
            background-position: center;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--hero-overlay, radial-gradient(circle at center, rgba(255, 107, 26, 0.3) 0%, transparent 70%));
            animation: pulse 4s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        .hero-content {
            z-index: 2;
            position: relative;
        }

        .hero h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: var(--glow-effect);
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: var(--glow-effect); }
            to { 
                text-shadow: 0 0 50px var(--primary-color), 
                             0 0 60px rgba(255, 107, 26, 0.8); 
            }
        }

        .hero p {
            font-size: 1.4rem;
            margin-bottom: 40px;
            opacity: 0.9;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 40px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all var(--transition-speed);
            box-shadow: 0 10px 30px rgba(255, 107, 26, 0.4);
            position: relative;
            overflow: hidden;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .cta-button:hover::before {
            left: 100%;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(255, 107, 26, 0.6);
        }

        /* ========== SECTION BASE STYLES ========== */
        .section {
            padding: var(--section-padding);
        }

        .section.alt-bg {
            background: rgba(0, 0, 0, 0.3);
        }

        .section h2 {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 50px;
            color: var(--primary-color);
        }

        .section-description {
            text-align: center;
            font-size: 1.2rem;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        /* ========== CARD SYSTEM ========== */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-top: 50px;
        }

        .card {
            background: var(--bg-light);
            padding: 30px;
            border-radius: var(--border-radius);
            border: 1px solid rgba(255, 107, 26, 0.3);
            transition: all var(--transition-speed);
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        }

        .card:hover {
            transform: var(--hover-transform);
            box-shadow: 0 20px 40px rgba(255, 107, 26, 0.2);
        }

        .card h3 {
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 1.5rem;
        }

        .card p {
            line-height: 1.6;
            margin-bottom: 15px;
        }

        /* ========== STATS GRID ========== */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .stat-card {
            text-align: center;
            padding: 40px 20px;
            background: var(--bg-light);
            border-radius: var(--border-radius);
            border: 1px solid rgba(255, 107, 26, 0.3);
            transition: all var(--transition-speed);
        }

        .stat-card:hover {
            background: rgba(255, 107, 26, 0.2);
            transform: scale(1.05);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1.1rem;
            opacity: 0.8;
        }

        /* ========== TIMELINE STYLES ========== */
        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -2px;
        }

        .timeline-item {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
            margin-bottom: 30px;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            right: -10px;
            background-color: var(--primary-color);
            border: 4px solid var(--bg-dark);
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

        .timeline-item:nth-child(even) {
            left: 50%;
        }

        .timeline-item:nth-child(even)::after {
            left: -10px;
        }

        .timeline-content {
            padding: 20px 30px;
            background: var(--bg-light);
            position: relative;
            border-radius: var(--border-radius);
            border: 1px solid rgba(255, 107, 26, 0.3);
        }

        .timeline-content h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        /* ========== LORE SPECIFIC STYLES ========== */
        .lore {
            background: rgba(0, 0, 0, 0.4);
            position: relative;
        }

        .lore::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="stars" patternUnits="userSpaceOnUse" width="20" height="20"><circle cx="10" cy="10" r="0.5" fill="%23ff6b1a" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23stars)"/></svg>') repeat;
            opacity: 0.3;
        }

        .prophecy-scroll {
            background: linear-gradient(135deg, rgba(255, 107, 26, 0.1), rgba(255, 140, 66, 0.05));
            border: 2px solid rgba(255, 107, 26, 0.3);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 50px;
            position: relative;
            overflow: hidden;
        }

        .prophecy-scroll::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--primary-color));
            z-index: -1;
            border-radius: 20px;
            animation: borderGlow 3s ease-in-out infinite;
        }

        @keyframes borderGlow {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .scroll-text {
            font-style: italic;
            line-height: 1.8;
            font-size: 1.1rem;
        }

        .symbols-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }

        .symbol-item {
            text-align: center;
            padding: 20px;
            background: rgba(255, 107, 26, 0.1);
            border-radius: var(--border-radius);
            border: 1px solid rgba(255, 107, 26, 0.3);
            transition: all var(--transition-speed);
        }

        .symbol-item:hover {
            transform: scale(1.05);
            background: rgba(255, 107, 26, 0.15);
        }

        .symbol {
            font-size: 3rem;
            margin-bottom: 15px;
            display: block;
        }

        /* ========== FOOTER STYLES ========== */
        footer {
            padding: 50px 0;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
        }

        .social-links a {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: rgba(255, 107, 26, 0.2);
            border-radius: 50%;
            line-height: 50px;
            color: var(--primary-color);
            text-decoration: none;
            transition: all var(--transition-speed);
            border: 1px solid rgba(255, 107, 26, 0.3);
        }

        .social-links a:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-5px);
        }

        /* ========== RESPONSIVE DESIGN ========== */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero p {
                font-size: 1.1rem;
            }

            .section h2 {
                font-size: 2rem;
            }

            .timeline::after {
                left: 31px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }

            .timeline-item::after {
                left: 22px;
            }

            .timeline-item:nth-child(even) {
                left: 0%;
            }

            .timeline-item:nth-child(even)::after {
                left: 22px;
            }
        }

        /* ========== UTILITY CLASSES ========== */
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .mb-20 { margin-bottom: 20px; }
        .mb-30 { margin-bottom: 30px; }
        .mb-40 { margin-bottom: 40px; }
        .mt-20 { margin-top: 20px; }
        .mt-30 { margin-top: 30px; }
        .mt-40 { margin-top: 40px; }
        .hidden { display: none; }
        .visible { display: block; }

        /* ========== ANIMATION CLASSES ========== */
        .fade-in {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ========== FLOATING PARTICLES ========== */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 50%;
            opacity: 0.7;
            animation: float 6s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.7;
            }
            90% {
                opacity: 0.7;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <!-- ========== BANNER SECTION ========== -->
    <!-- Add banners here - they will appear at the top of the page -->
    <div class="banner announcement" id="announcement-banner">
        🚀 ACT B Token Launch - Join the prophecy! Limited time presale active now! 
        <button class="banner-close" onclick="closeBanner('announcement-banner')">&times;</button>
    </div>

    <!-- ========== FLOATING PARTICLES ========== -->
    <div class="particles" id="particles"></div>

    <!-- ========== HEADER ========== -->
    <header>
        <nav class="container">
            <!-- EDITABLE: Change logo text -->
            <div class="logo" id="site-logo">ACT B</div>
            
            <!-- EDITABLE: Add/remove/modify navigation links -->
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#lore">Lore</a></li>
                <li><a href="#tokenomics">Tokenomics</a></li>
                <li><a href="#roadmap">Roadmap</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- ========== HERO SECTION ========== -->
    <section id="home" class="hero">
        <div class="hero-content">
            <!-- EDITABLE: Change main title -->
            <h1 id="hero-title">ACT B</h1>
            
            <!-- EDITABLE: Change subtitle -->
            <p id="hero-subtitle">The Bonk Prophecy - New Era</p>
            
            <!-- EDITABLE: Change description -->
            <p id="hero-description">The ancient prophecy foretold of a chosen token that would unite the crypto realm</p>
            
            <!-- EDITABLE: Change CTA button text and link -->
            <a href="#about" class="cta-button" id="hero-cta">Discover the Prophecy</a>
        </div>
    </section>

    <!-- ========== ABOUT SECTION ========== -->
    <section id="about" class="section">
        <div class="container">
            <!-- EDITABLE: Change section title -->
            <h2 id="about-title">The Prophecy Unfolds</h2>
            
            <!-- EDITABLE: Change section description -->
            <p class="section-description" id="about-description">
                In the mystical realm of decentralized finance, ancient oracles have spoken of a token that would herald a new era. 
                ACT B emerges from the shadows, carrying the essence of the legendary Bonk prophecy.
            </p>
            
            <!-- EDITABLE: Modify cards - add/remove/edit as needed -->
            <div class="cards-grid">
                <div class="card">
                    <h3>🔮 Mystical Origins</h3>
                    <p>Born from ancient crypto prophecies, ACT B carries the spiritual essence of the Bonk lineage, destined to bring prosperity to its holders.</p>
                </div>
                <div class="card">
                    <h3>⚡ Lightning Fast</h3>
                    <p>Built on cutting-edge blockchain technology, ensuring rapid transactions and minimal fees for the crypto community.</p>
                </div>
                <div class="card">
                    <h3>🌟 Community Driven</h3>
                    <p>The prophecy speaks of unity. ACT B is governed by its community, ensuring every voice is heard in shaping our destiny.</p>
                </div>
                <div class="card">
                    <h3>🔥 Deflationary Mechanics</h3>
                    <p>With each transaction, tokens are burned according to the ancient ritual, increasing scarcity and value over time.</p>
                </div>
                <div class="card">
                    <h3>🛡️ Security First</h3>
                    <p>Protected by mystical smart contract barriers and audited by the most skilled crypto wizards in the realm.</p>
                </div>
                <div class="card">
                    <h3>🎯 Utility Focused</h3>
                    <p>Beyond mere speculation, ACT B powers a ecosystem of DeFi applications and community-driven initiatives.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== LORE SECTION ========== -->
    <section id="lore" class="section lore">
        <div class="container">
            <div class="lore-content">
                <!-- EDITABLE: Change lore section title -->
                <h2 id="lore-title">The Ancient Scrolls</h2>
                
                <!-- EDITABLE: The prophecy scroll - modify the verses -->
                <div class="prophecy-scroll">
                    <h3>📜 The Original Prophecy</h3>
                    <div class="scroll-text" id="prophecy-text">
                        <p><em>"In the twilight of the old blockchain age, when memes ruled the digital realm, there arose a prophecy spoken by the Oracle of Decentralization..."</em></p>
                        
                        <p><strong>The First Verse:</strong><br>
                        <em>"From the ashes of forgotten tokens shall rise the Chosen One,<br>
                        Bearing the mark of Bonk, yet transcending its earthly form,<br>
                        ACT B shall be its name, and prosperity its gift to believers."</em></p>

                        <p><strong>The Second Verse:</strong><br>
                        <em>"Seven robed figures shall gather in the sacred circle,<br>
                        Each holding the flame of community spirit,<br>
                        Together they shall summon the New Era of abundance."</em></p>

                        <p><strong>The Final Verse:</strong><br>
                        <em>"When the great eye opens and gazes upon the faithful,<br>
                        The golden dog shall ascend to its rightful throne,<br>
                        And all who hold the sacred tokens shall share in eternal wealth."</em></p>
                    </div>
                </div>

                <!-- EDITABLE: Lore story cards -->
                <div class="cards-grid" id="lore-cards">
                    <div class="card">
                        <h3>🏛️ The Ancient Order</h3>
                        <p>Long before the first blockchain was forged, an ancient order of crypto-mystics preserved the sacred knowledge of digital currencies. They foresaw the rise of meme tokens and prophesied that one would emerge to unite all communities under a single banner of prosperity.</p>
                    </div>
                    <div class="card">
                        <h3>👁️ The Great Awakening</h3>
                        <p>The prophecy speaks of a Great Eye that would open to witness the birth of the new era. This mystical eye represents the collective consciousness of the crypto community, watching over and protecting those who believe in the power of decentralized unity.</p>
                    </div>
                    <div class="card">
                        <h3>🔥 The Ritual of Burning</h3>
                        <p>According to the ancient texts, each transaction of ACT B performs a sacred ritual - the burning of tokens as an offering to the crypto gods. This deflationary mechanism was not born of economics, but of ancient wisdom that understood scarcity breeds desire, and desire breeds value.</p>
                    </div>
                    <div class="card">
                        <h3>🌟 The Golden Ascension</h3>
                        <p>The final chapter of the prophecy describes the Golden Ascension - a time when ACT B will transcend its digital origins and become a beacon of prosperity that guides other projects toward enlightenment.</p>
                    </div>
                </div>

                <!-- EDITABLE: Sacred symbols section -->
                <div class="card mb-40">
                    <h3 class="text-center">⚡ Sacred Symbols & Their Meanings</h3>
                    <div class="symbols-grid mt-30">
                        <div class="symbol-item">
                            <div class="symbol">🐕</div>
                            <h4>The Golden Dog</h4>
                            <p>Represents loyalty, community, and the eternal bond between holder and token</p>
                        </div>
                        <div class="symbol-item">
                            <div class="symbol">👁️</div>
                            <h4>The All-Seeing Eye</h4>
                            <p>Symbolizes the collective wisdom and protection of the community</p>
                        </div>
                        <div class="symbol-item">
                            <div class="symbol">🔥</div>
                            <h4>The Sacred Flame</h4>
                            <p>Represents the burning mechanism that purifies and strengthens the token</p>
                        </div>
                        <div class="symbol-item">
                            <div class="symbol">⭕</div>
                            <h4>The Unity Circle</h4>
                            <p>Signifies the endless cycle of growth and prosperity within the community</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== TOKENOMICS SECTION ========== -->
    <section id="tokenomics" class="section alt-bg">
        <div class="container">
            <!-- EDITABLE: Change tokenomics title -->
            <h2 id="tokenomics-title">Sacred Economics</h2>
            
            <!-- EDITABLE: Change tokenomics description -->
            <p class="section-description" id="tokenomics-description">
                The tokenomics of ACT B follow the ancient principles laid out in the prophecy scrolls
            </p>
            
            <!-- EDITABLE: Modify token statistics -->
            <div class="stats-grid" id="token-stats">
                <div class="stat-card">
                    <div class="stat-number">1B</div>
                    <div class="stat-label">Total Supply</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">40%</div>
                    <div class="stat-label">Community Pool</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">30%</div>
                    <div class="stat-label">Liquidity Pool</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">20%</div>
                    <div class="stat-label">Development</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">10%</div>
                    <div class="stat-label">Marketing</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">2%</div>
                    <div class="stat-label">Transaction Tax</div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== ROADMAP SECTION ========== -->
    <section id="roadmap" class="section">
        <div class="container">
            <!-- EDITABLE: Change roadmap title -->
            <h2 id="roadmap-title">The Journey Ahead</h2>
            
            <!-- EDITABLE: Modify roadmap phases -->
            <div class="timeline" id="roadmap-timeline">
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h3>Phase 2: The Gathering</h3>
                        <p>Major CEX listings, partnerships with DeFi protocols, and the first utility implementations.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h3>Phase 3: The Ascension</h3>
                        <p>Launch of the ACT B ecosystem, including staking mechanisms and governance protocols.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h3>Phase 4: The New Era</h3>
                        <p>Full ecosystem deployment, cross-chain integration, and the fulfillment of the ancient prophecy.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== FOOTER ========== -->
    <footer id="contact">
        <div class="container">
            <!-- EDITABLE: Social media links -->
            <div class="social-links" id="social-links">
                <a href="#" title="Telegram">📱</a>
                <a href="#" title="Twitter">🐦</a>
                <a href="#" title="Discord">💬</a>
                <a href="#" title="Medium">📝</a>
            </div>
            
            <!-- EDITABLE: Footer text -->
            <p id="footer-copyright">&copy; 2025 ACT B - The Bonk Prophecy. All rights reserved.</p>
            <p id="footer-tagline" class="mt-20" style="opacity: 0.7;">The prophecy lives on through community</p>
        </div>
    </footer>

    <!-- ========== JAVASCRIPT ========== -->
    <script>
        // ========== TEMPLATE CONFIGURATION ========== 
        const CONFIG = {
            // EDITABLE: Animation settings
            particleCount: 50,
            animationSpeed: 0.3,
            
            // EDITABLE: Scroll animation threshold
            scrollThreshold: 0.1,
            
            // EDITABLE: Enable/disable features
            enableParticles: true,
            enableScrollAnimations: true,
            enableSmoothScrolling: true
        };

        // ========== BANNER MANAGEMENT ========== 
        function closeBanner(bannerId) {
            const banner = document.getElementById(bannerId);
            if (banner) {
                banner.style.transform = 'translateY(-100%)';
                setTimeout(() => {
                    banner.remove();
                    // Adjust header position if needed
                    updateHeaderPosition();
                }, 300);
            }
        }

        function addBanner(type, message, id = null, closeable = true) {
            const bannerId = id || 'banner-' + Date.now();
            const bannerHTML = `
                <div class="banner ${type}" id="${bannerId}">
                    ${message}
                    ${closeable ? `<button class="banner-close" onclick="closeBanner('${bannerId}')">&times;</button>` : ''}
                </div>
            `;
            
            document.body.insertAdjacentHTML('afterbegin', bannerHTML);
            updateHeaderPosition();
            return bannerId;
        }

        function updateHeaderPosition() {
            const banners = document.querySelectorAll('.banner');
            const totalBannerHeight = Array.from(banners).reduce((height, banner) => {
                return height + banner.offsetHeight;
            }, 0);
            
            document.querySelector('header').style.top = totalBannerHeight + 'px';
        }

        // ========== CONTENT MANAGEMENT FUNCTIONS ========== 
        function updateContent(elementId, content) {
            const element = document.getElementById(elementId);
            if (element) {
                element.innerHTML = content;
            }
        }

        function updateColors(primaryColor, secondaryColor) {
            const root = document.documentElement;
            root.style.setProperty('--primary-color', primaryColor);
            root.style.setProperty('--secondary-color', secondaryColor);
        }

        function addCard(containerId, title, content, icon = '') {
            const container = document.getElementById(containerId);
            if (container) {
                const cardHTML = `
                    <div class="card fade-in">
                        <h3>${icon} ${title}</h3>
                        <p>${content}</p>
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', cardHTML);
                
                // Trigger animation
                setTimeout(() => {
                    const newCard = container.lastElementChild;
                    newCard.classList.add('visible');
                }, 100);
            }
        }

        function addStatCard(containerId, number, label) {
            const container = document.getElementById(containerId);
            if (container) {
                const cardHTML = `
                    <div class="stat-card fade-in">
                        <div class="stat-number">${number}</div>
                        <div class="stat-label">${label}</div>
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', cardHTML);
            }
        }

        function addTimelineItem(containerId, title, description) {
            const container = document.getElementById(containerId);
            if (container) {
                const itemHTML = `
                    <div class="timeline-item fade-in">
                        <div class="timeline-content">
                            <h3>${title}</h3>
                            <p>${description}</p>
                        </div>
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', itemHTML);
            }
        }

        // ========== BACKGROUND IMAGE FUNCTIONS ========== 
        function setHeroBackground(imageUrl, overlay = null) {
            const hero = document.querySelector('.hero');
            hero.style.setProperty('--hero-bg-image', `url(${imageUrl})`);
            if (overlay) {
                hero.style.setProperty('--hero-overlay', overlay);
            }
        }

        function setSectionBackground(sectionId, imageUrl, overlay = 'rgba(0,0,0,0.7)') {
            const section = document.getElementById(sectionId);
            if (section) {
                section.style.backgroundImage = `linear-gradient(${overlay}), url(${imageUrl})`;
                section.style.backgroundSize = 'cover';
                section.style.backgroundPosition = 'center';
                section.style.backgroundAttachment = 'fixed';
            }
        }

        // ========== CORE FUNCTIONALITY ========== 
        // Smooth scrolling for navigation links
        if (CONFIG.enableSmoothScrolling) {
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        const headerHeight = document.querySelector('header').offsetHeight;
                        const bannerHeight = Array.from(document.querySelectorAll('.banner')).reduce((height, banner) => {
                            return height + banner.offsetHeight;
                        }, 0);
                        
                        window.scrollTo({
                            top: target.offsetTop - headerHeight - bannerHeight,
                            behavior: 'smooth'
                        });
                    }
                });
            });
        }

        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 100) {
                header.style.background = 'rgba(26, 14, 10, 0.95)';
            } else {
                header.style.background = 'rgba(26, 14, 10, 0.9)';
            }
        });

        // Particle system
        function createParticles() {
            if (!CONFIG.enableParticles) return;
            
            const particlesContainer = document.getElementById('particles');
            particlesContainer.innerHTML = ''; // Clear existing particles
            
            for (let i = 0; i < CONFIG.particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
                particlesContainer.appendChild(particle);
            }
        }

        // Scroll animations
        const observerOptions = {
            threshold: CONFIG.scrollThreshold,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        // Initialize animations
        function initializeAnimations() {
            if (!CONFIG.enableScrollAnimations) return;
            
            document.querySelectorAll('.card, .stat-card, .timeline-item').forEach(element => {
                element.classList.add('fade-in');
                observer.observe(element);
            });
        }

        // ========== INITIALIZATION ========== 
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize particles
            createParticles();
            
            // Initialize scroll animations
            initializeAnimations();
            
            // Update header position for banners
            updateHeaderPosition();
            
            console.log('🚀 Template loaded successfully!');
            console.log('💡 Use the provided functions to customize content:');
            console.log('   - updateContent(elementId, content)');
            console.log('   - updateColors(primary, secondary)');
            console.log('   - addBanner(type, message)');
            console.log('   - setHeroBackground(imageUrl)');
        });

        // ========== TEMPLATE HELPER FUNCTIONS ========== 
        // Example usage functions (can be called from console or other scripts)
        
        // Function to quickly change the site theme
        function changeTheme(themeName) {
            const themes = {
                orange: { primary: '#ff6b1a', secondary: '#ff8c42' },
                blue: { primary: '#3b82f6', secondary: '#60a5fa' },
                green: { primary: '#10b981', secondary: '#34d399' },
                purple: { primary: '#8b5cf6', secondary: '#a78bfa' },
                red: { primary: '#ef4444', secondary: '#f87171' }
            };
            
            if (themes[themeName]) {
                updateColors(themes[themeName].primary, themes[themeName].secondary);
            }
        }

        // Function to add multiple social links at once
        function updateSocialLinks(links) {
            const container = document.getElementById('social-links');
            if (container && Array.isArray(links)) {
                container.innerHTML = links.map(link => 
                    `<a href="${link.url}" title="${link.name}">${link.icon}</a>`
                ).join('');
            }
        }

        // Function to bulk update hero content
        function updateHeroContent(title, subtitle, description, ctaText, ctaLink) {
            updateContent('hero-title', title);
            updateContent('hero-subtitle', subtitle);
            updateContent('hero-description', description);
            
            const cta = document.getElementById('hero-cta');
            if (cta) {
                cta.textContent = ctaText;
                cta.href = ctaLink;
            }
        }

        // Export functions for external use
        window.TemplateAPI = {
            updateContent,
            updateColors,
            addBanner,
            closeBanner,
            addCard,
            addStatCard,
            addTimelineItem,
            setHeroBackground,
            setSectionBackground,
            changeTheme,
            updateSocialLinks,
            updateHeroContent,
            createParticles
        };
    </script>

    <!-- ========== TEMPLATE USAGE EXAMPLES ========== -->
    <!-- 
    BANNER EXAMPLES:
    addBanner('announcement', '🎉 New feature launched!');
    addBanner('warning', '⚠️ Maintenance scheduled for tonight');
    addBanner('success', '✅ Transaction completed successfully');
    addBanner('info', 'ℹ️ Check out our new roadmap');

    CONTENT UPDATE EXAMPLES:
    updateContent('hero-title', 'My New Token');
    updateContent('about-description', 'This is my amazing new project...');
    
    COLOR THEME EXAMPLES:
    changeTheme('blue');
    updateColors('#ff0000', '#ff6666');
    
    BACKGROUND EXAMPLES:
    setHeroBackground('https://example.com/hero-bg.jpg');
    setSectionBackground('about', 'https://example.com/about-bg.jpg');
    
    SOCIAL LINKS EXAMPLE:
    updateSocialLinks([
        { url: 'https://t.me/mytoken', name: 'Telegram', icon: '📱' },
        { url: 'https://twitter.com/mytoken', name: 'Twitter', icon: '🐦' }
    ]);
    -->
</body>
</html>
                    <div class="timeline-content">
                        <h3>Phase 1: The Awakening</h3>
                        <p>Token launch, community building, and initial exchange listings. The prophecy begins to manifest.</p>
                    </div>
                </div>
                <div class="timeline-item">