LionsDenPrototype – Custom dApp Creations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=cover">
    <title>SATURN • The Next Generation of Bitcoin</title>
    
    <meta name="description" content="Saturn is the next generation of Bitcoin. Faster, more secure, and built for global scale with zero-compromise decentralization.">
    <meta name="keywords" content="Saturn, Bitcoin, Crypto, Blockchain, Web3, Mining, Decentralized, dApp">
    
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://saturn.boats/">
    <meta property="og:title" content="SATURN • The Next Generation of Bitcoin">
    <meta property="og:description" content="Saturn is the next generation of Bitcoin. Faster, more secure, and built for global scale with zero-compromise decentralization.">
    <meta property="og:image" content="https://dev.afbn.me/wp-content/uploads/2026/06/8be97796e6651217ef2f59e233ddacef.png">
    
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="SATURN • The Next Generation of Bitcoin">
    <meta property="twitter:image" content="https://dev.afbn.me/wp-content/uploads/2026/06/8be97796e6651217ef2f59e233ddacef.png">

body { 
            margin: 0; padding: 0; background: var(--void-black); 
            font-family: 'Inter', system-ui, -apple-system, sans-serif; 
            color: var(--text-main); overflow-x: hidden; 
            width: 100%; max-width: 100vw;
            -webkit-font-smoothing: antialiased;
        }

/* Cinematic Intro */
        #cinematic-intro { position: fixed; inset: 0; background: #000; z-index: 9999999; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background 1s; }
        #cinematic-saturn { width: 100px; height: 100px; background-image: url('https://dev.afbn.me/wp-content/uploads/2026/06/8be97796e6651217ef2f59e233ddacef.png'); background-size: cover; border-radius: 50%; box-shadow: 0 0 100px rgba(244, 211, 94, 0.8); transform: scale(0.5); transition: transform 2.5s cubic-bezier(0.8, 0, 0.2, 1), opacity 0.5s ease-in; }
        #cinematic-intro.zooming #cinematic-saturn { transform: scale(60); opacity: 0; }
        #cinematic-intro.cleared { opacity: 0; pointer-events: none; transition: opacity 1.5s; }

body::after {
            content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 4px, 3px 100%; pointer-events: none; z-index: 9998; opacity: 0.15;
        }

.saturn-app-wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; }
        
        /* Background Parallax Planets */
        .bg-planet { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0.4; filter: blur(3px); box-shadow: inset -20px -20px 50px rgba(0,0,0,0.8); }
        .planet-jupiter { width: 400px; height: 400px; background: radial-gradient(circle at 30% 30%, #c88b3a, #5c3a21); top: 120vh; left: -100px; }
        .planet-mars { width: 150px; height: 150px; background: radial-gradient(circle at 30% 30%, #c1440e, #5a1c02); top: 250vh; right: 5%; opacity: 0.6; filter: blur(1px); }
        .planet-neptune { width: 250px; height: 250px; background: radial-gradient(circle at 30% 30%, #4b70dd, #121f45); top: 400vh; left: 10%; }

.cyber-grid {
            position: fixed; width: 200vw; height: 200vh; top: -50%; left: -50%;
            background-image: linear-gradient(var(--saturn-gold-glow) 1px, transparent 1px), linear-gradient(90deg, var(--saturn-gold-glow) 1px, transparent 1px);
            background-size: 60px 60px; transform: perspective(1000px) rotateX(60deg) translateY(-100px) translateZ(-200px);
            animation: gridMove 20s linear infinite; pointer-events: none; z-index: 0; opacity: 0.3;
        }
        @keyframes gridMove { 0% { transform: perspective(1000px) rotateX(60deg) translateY(0) translateZ(-200px); } 100% { transform: perspective(1000px) rotateX(60deg) translateY(60px) translateZ(-200px); } }

.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.04em; }
        .font-cyber { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
        
        .saturn-text-gradient { background: linear-gradient(90deg, #fff, var(--saturn-gold), #ff9f43, var(--saturn-gold), #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 300% 100%; animation: shimmerText 6s linear infinite; }
        @keyframes shimmerText { 0% { background-position: 300% 0; } 100% { background-position: -300% 0; } }

.section-header { font-size: 3.1rem; line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; color: var(--saturn-gold); margin-bottom: 2rem; }

/* Scroll Reveal Animation System */
        .scroll-reveal { opacity: 0; transform: scale(0.85) translateY(50px); filter: blur(10px); transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform, opacity, filter; }
        .scroll-reveal.in-view { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }

.glass-panel {
            background: var(--panel-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
            position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s;
            word-break: normal; overflow-wrap: break-word; width: 100%;
        }
        .glass-panel::before {
            content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
            background: linear-gradient(to right, transparent, rgba(244, 211, 94, 0.05), transparent);
            transform: skewX(-25deg); transition: 0.5s; pointer-events: none;
        }
        .glass-panel:hover { border-color: rgba(244, 211, 94, 0.3); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(244, 211, 94, 0.1); }
        .glass-panel:hover::before { left: 200%; }
        .glass-panel.clickable { cursor: pointer; }
        .glass-panel.clickable:hover { background: rgba(255, 255, 255, 0.05); }

.btn-cyber-primary, .btn-cyber-secondary {
            border-radius: 12px; padding: 14px 32px; font-weight: 700; font-family: 'Space Grotesk', sans-serif;
            text-transform: uppercase; letter-spacing: 1px; cursor: pointer; position: relative; overflow: hidden;
            transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; line-height: 1.4; max-width: 100%;
        }
        .btn-cyber-primary { background: rgba(244, 211, 94, 0.05); border: 1px solid var(--saturn-gold); color: var(--saturn-gold); box-shadow: 0 0 15px rgba(244, 211, 94, 0.1), inset 0 0 10px rgba(244, 211, 94, 0.05); }
        .btn-cyber-primary:hover { background: var(--saturn-gold); color: #000; box-shadow: 0 0 30px rgba(244, 211, 94, 0.5), 0 0 10px rgba(255, 255, 255, 0.5); transform: scale(1.02); }
        .btn-cyber-secondary { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
        .btn-cyber-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }

@keyframes orbitSpin { 100% { transform: rotate(360deg); } }
        .nav-logo-icon { display: inline-block; animation: orbitSpin 15s linear infinite; filter: drop-shadow(0 0 8px rgba(244,211,94,0.6)); font-size: 2rem; }

/* Saturn 3D System (Overflow visible to prevent cutoffs) */
        .saturn-hero-wrapper { position: relative; width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; perspective: 1500px; z-index: 10; overflow: visible; }
        .saturn-system { position: relative; width: 400px; height: 400px; transform-style: preserve-3d; transform: rotateX(25deg) rotateY(15deg); transition: transform 0.1s linear; will-change: transform; transform-origin: center center; cursor: grab; }
        .saturn-system:active { cursor: grabbing; }
        
        @keyframes floatCoin { 0%, 100% { transform: translate(-50%, -50%) translateY(0) translateZ(0); } 50% { transform: translate(-50%, -50%) translateY(-15px) translateZ(0); } }

.saturn-planet-core {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(0);
            width: 180px; height: 180px; border-radius: 50%;
            background-image: url('https://dev.afbn.me/wp-content/uploads/2026/06/8be97796e6651217ef2f59e233ddacef.png');
            background-size: cover; background-position: center;
            box-shadow: 0 0 100px rgba(244, 211, 94, 0.6), inset 0 0 40px rgba(0,0,0,0.8);
            z-index: 20; transform-style: preserve-3d; animation: floatCoin 6s ease-in-out infinite; overflow: visible;
        }

.saturn-ring-layer { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform-style: preserve-3d; backface-visibility: visible; }
        .ring-inner { width: 320px; height: 320px; margin: -160px 0 0 -160px; border: 2px solid rgba(244, 211, 94, 0.6); box-shadow: 0 0 25px rgba(244, 211, 94, 0.3), inset 0 0 15px rgba(244, 211, 94, 0.3); animation: spinRingCW 15s linear infinite; transform: rotateX(75deg) translateZ(0); }
        .ring-middle { width: 380px; height: 380px; margin: -190px 0 0 -190px; border: 4px solid transparent; border-top-color: rgba(244, 211, 94, 0.9); border-bottom-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 40px rgba(244, 211, 94, 0.2); animation: spinRingCCW 20s linear infinite; transform: rotateX(75deg) translateZ(0); }
        .ring-outer { width: 440px; height: 440px; margin: -220px 0 0 -220px; border: 1px dashed rgba(255, 255, 255, 0.4); animation: spinRingCW 30s linear infinite; transform: rotateX(75deg) translateZ(0); }
        .ring-glow-field { width: 500px; height: 500px; margin: -250px 0 0 -250px; background: radial-gradient(circle, rgba(244, 211, 94, 0.1) 30%, transparent 70%); transform: rotateX(75deg) translateZ(-1px); pointer-events: none; animation: pulseGlow 4s ease-in-out infinite; }

@keyframes spinRingCW { 0% { transform: rotateX(75deg) rotate(0deg); } 100% { transform: rotateX(75deg) rotate(360deg); } }
        @keyframes spinRingCCW { 0% { transform: rotateX(75deg) rotate(360deg); } 100% { transform: rotateX(75deg) rotate(0deg); } }
        @keyframes pulseGlow { 0%, 100% { opacity: 0.6; transform: rotateX(75deg) scale(1); } 50% { opacity: 1; transform: rotateX(75deg) scale(1.05); } }

.content-section { width: 100%; max-width: 1400px; margin: 0 auto; padding: 5rem 2rem; position: relative; z-index: 10; border-top: 1px solid rgba(255,255,255,0.05); }
        .hero-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto; padding: 4rem 2rem; position: relative; z-index: 10;}
        .hero-text-col { flex: 1 1 400px; max-width: 700px; z-index: 20; }
        .hero-gfx-col { flex: 1 1 400px; display: flex; justify-content: center; z-index: 10; max-width: 100%; overflow: visible; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; margin-top: 3rem; width: 100%; }
        .stat-box .label { color: var(--saturn-gold); font-size: 0.75rem; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; }
        .stat-box .value { font-size: 2.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #fff; line-height: 1; }
        
        .bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; width: 100%; }
        .bento-col-span-2 { grid-column: span 2; }
        .bento-col-span-full { grid-column: 1 / -1; }

.cyber-nav { width: 100%; background: rgba(5, 5, 15, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: sticky; top: 0; z-index: 100; }
        .nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; padding: 1rem 2rem; flex-wrap: wrap; gap: 1rem; }
        .view-toggle { display: flex; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 4px; }
        .view-btn { padding: 8px 16px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; color: #fff; cursor: pointer; transition: 0.3s; border: none; background: transparent; display: flex; align-items: center; gap: 8px; }
        .view-btn.active { background: var(--saturn-gold); color: #000; }
        
        .sub-nav { display: flex; align-items: center; gap: 2rem; overflow-x: auto; width: 100%; max-width: 1400px; margin: 0 auto; padding: 1rem 2rem; background: rgba(5, 5, 15, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.05); -ms-overflow-style: none; scrollbar-width: none; }
        .sub-nav::-webkit-scrollbar { display: none; }
        .sub-nav a, .sub-nav button { color: var(--text-dim); text-decoration: none; font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: color 0.3s; background: none; border: none; cursor: pointer; padding: 0; }
        .sub-nav a:hover, .sub-nav button:hover, .sub-nav .active { color: var(--saturn-gold); }
        
        /* Application Experience dApp View */
        #dapp-view.app-mode {
            position: fixed !important; top: 73px; left: 0; right: 0; bottom: 0;
            overflow: hidden; background: #05050f; z-index: 90;
            display: flex; flex-direction: column;
        }
        #dapp-view.app-mode .dapp-scroll-container { flex-grow: 1; overflow-y: auto; padding-bottom: 2rem; }

.cyber-footer { background: #05050f; border-top: 1px solid rgba(255,255,255,0.05); position: relative; z-index: 40; padding: 4rem 2rem; width: 100%; overflow: hidden; }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; width: 100%; max-width: 1400px; margin: 0 auto; }
        .footer-col h4 { color: #fff; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }
        .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
        .footer-link { color: var(--text-dim); text-decoration: none; font-size: 0.875rem; transition: color 0.3s; background: none; border: none; cursor: pointer; padding: 0; text-align: left; word-wrap: break-word; }
        .footer-link:hover { color: var(--saturn-gold); }
        .social-circle { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: 0.3s; }
        .social-circle:hover { background: var(--saturn-gold); color: #000; border-color: var(--saturn-gold); }

#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; max-width: calc(100vw - 48px); }
        .toast { background: rgba(10, 10, 20, 0.95); backdrop-filter: blur(16px); border: 1px solid var(--saturn-gold); border-radius: 12px; padding: 16px 20px; min-width: 250px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; }
        .toast.show { transform: translateX(0); }
        .toast-icon { color: var(--saturn-gold); font-size: 20px; flex-shrink: 0; }
        
        .modal-overlay { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 1rem; }
        .modal-overlay.show { opacity: 1; pointer-events: auto; }
        .modal-content { background: #0a0a14; border: 1px solid rgba(244, 211, 94, 0.3); border-radius: 24px; padding: 2.5rem; width: 100%; max-width: 500px; transform: scale(0.95); transition: transform 0.3s; position: relative; max-height: 90vh; overflow-y: auto; }
        .modal-overlay.show .modal-content { transform: scale(1); }
        .modal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1.5rem; cursor: pointer; transition: 0.3s; z-index: 20; }
        .modal-close:hover { color: #fff; }
        
        .modal-content.large { max-width: 900px; }
        .modal-content.full { max-width: 1200px; height: 90vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.legal-text-container h3 { color: var(--saturn-gold); font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; font-family: 'Space Grotesk', sans-serif; }
        .legal-text-container p { margin-bottom: 1rem; line-height: 1.7; color: var(--text-dim); }
        .legal-text-container ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; color: var(--text-dim); }
        .legal-text-container li { margin-bottom: 0.5rem; }

.hide-section { display: none !important; }

@media (max-width: 800px) {
            .hero-layout { flex-direction: column-reverse; padding: 2rem 1.5rem; text-align: center; }
            .saturn-hero-wrapper { height: 350px; }
            .saturn-system { transform: scale(0.65) rotateX(25deg) rotateY(15deg); }
            h1.hero-title { font-size: 3.2rem !important; line-height: 1 !important; }
            .hero-actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
            .btn-cyber-primary, .btn-cyber-secondary { width: 100%; max-width: 350px; }
            .nav-inner { padding: 1rem; justify-content: center; }
            .view-btn span { display: none; }
            .footer-col { grid-column: 1 / -1 !important; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
            .footer-col ul { align-items: center; }
            .footer-logo-wrapper, .footer-social-wrapper { justify-content: center !important; width: 100%; }
            .footer-link { text-align: center !important; justify-content: center; width: 100%; }
        }
    </style>
</head>
<body data-rsssl=1>

<nav class="cyber-nav">
        <div class="nav-inner">
            <div class="flex items-center gap-3">
                <div class="nav-logo-icon">🪐</div>
                <span class="font-display" style="font-size: 1.75rem; color: #fff; letter-spacing: -1.5px;">SATURN</span>
            </div>

<div class="view-toggle">
                <button onclick="switchView('website')" id="btn-website" class="view-btn active"><i class="fa-solid fa-globe"></i> <span>Website</span></button>
                <button onclick="switchView('dapp')" id="btn-dapp" class="view-btn"><i class="fa-solid fa-rocket"></i> <span>dApp Experience</span></button>
            </div>

<div class="flex items-center gap-3">
                <button onclick="openModal('connect-modal')" class="btn-cyber-secondary hidden md:flex" style="padding: 10px 20px; font-size: 0.875rem;"><i class="fa-solid fa-wallet"></i> Connect</button>
                <button onclick="document.getElementById('community-section').scrollIntoView({behavior:'smooth'})" class="btn-cyber-primary" style="padding: 10px 20px; font-size: 0.875rem;">Join the Movement</button>
            </div>
        </div>
    </nav>

<div id="website-view" style="flex-grow: 1; width: 100%;">
        
        <div class="sub-nav sticky top-[73px] z-40">
            <a href="#why-section">Why Saturn</a>
            <a href="#mining-section">Mining</a>
            <a href="#roadmap-section">Roadmap</a>
            <a href="#community-section">Community</a>
        </div>

<div class="hero-layout scroll-reveal">
            <div class="hero-text-col">
                <div style="display:inline-block; padding: 6px 16px; background: rgba(244, 211, 94, 0.1); border: 1px solid var(--saturn-gold); border-radius: 50px; color: var(--saturn-gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 2rem; box-shadow: 0 0 15px rgba(244, 211, 94, 0.2);">
                    BITCOIN FORK • THE UPGRADE
                </div>
                
                <h1 class="hero-title font-display" style="font-size: 5.5rem; line-height: 0.95; margin-bottom: 1.5rem; color: #fff;">
                    The next<br>generation of<br><span class="saturn-text-gradient">Bitcoin.</span>
                </h1>
                
                <p style="font-size: 1.35rem; color: var(--text-dim); margin-bottom: 2.5rem; max-width: 500px; line-height: 1.5;">
                    Faster. More secure.<br>Built for global scale.
                </p>
                
                <div class="hero-actions" style="display: flex; gap: 1rem; margin-bottom: 3rem;">
                    <button onclick="document.getElementById('why-section').scrollIntoView({behavior:'smooth'})" class="btn-cyber-primary">
                        WHY SATURN <i class="fa-solid fa-arrow-right ml-2"></i>
                    </button>
                    <button onclick="openIframeModal('https://saturn.boats/submissions', 'Submit Your Design')" class="btn-cyber-secondary">
                        Submit Your Design
                    </button>
                </div>
                
                <div class="stats-grid border-t border-white/10 pt-8">
                    <div class="stat-box"><div class="label">TRANSACTION SPEED</div><div class="value font-display">< 2 <span style="font-size: 1rem;">seconds</span></div></div>
                    <div class="stat-box"><div class="label">AVG FEE</div><div class="value font-display">$0.0003</div></div>
                    <div class="stat-box"><div class="label">TPS CAPACITY</div><div class="value font-display">100,000</div></div>
                </div>
            </div>

<div style="text-align: center; margin: 2rem 0; color: rgba(255,255,255,0.4); font-size: 0.75rem; letter-spacing: 4px; text-transform: uppercase; padding: 0 1rem;">
            DRAG TO SPIN SATURN • SCROLL TO EXPLORE<br><i class="fa-solid fa-chevron-down mt-2" style="animation: pulseGlow 2s infinite;"></i>
        </div>

<section id="why-section" class="content-section">
            <div class="scroll-reveal" style="text-align: center; max-width: 800px; margin: 0 auto 3rem;">
                <div style="color: var(--saturn-gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 4px; margin-bottom: 1rem;">THE UPGRADE</div>
                <h2 class="section-header">Built from the ground up<br>to fix Bitcoin’s limitations.</h2>
            </div>
            
            <div class="bento-grid">
                <div class="glass-panel scroll-reveal" style="padding: 2.5rem;">
                    <div class="font-display" style="color: var(--saturn-gold); font-size: 3.5rem; line-height: 1; margin-bottom: 1rem;">47×</div>
                    <h3 class="font-display" style="font-size: 1.5rem; margin-bottom: 1rem;">Faster Transactions</h3>
                    <p style="color: var(--text-dim); line-height: 1.6;">Process transactions in under 2 seconds. Saturn is 47 times faster than traditional Bitcoin.</p>
                </div>
                <div class="glass-panel scroll-reveal" style="padding: 2.5rem;">
                    <h3 class="font-display" style="font-size: 1.5rem; margin-bottom: 1rem;">Military-Grade Security</h3>
                    <p style="color: var(--text-dim); line-height: 1.6;">Enhanced cryptographic protocols and multi-layer validation protect against emerging threats.</p>
                </div>
                <div class="glass-panel scroll-reveal" style="padding: 2.5rem;">
                    <div class="font-display" style="color: var(--saturn-gold); font-size: 3.5rem; line-height: 1; margin-bottom: 1rem;">94%</div>
                    <h3 class="font-display" style="font-size: 1.5rem; margin-bottom: 1rem;">Lower Fees</h3>
                    <p style="color: var(--text-dim); line-height: 1.6;">Average fee of just $0.0003 — 94% lower than Bitcoin.</p>
                </div>
                <div class="glass-panel scroll-reveal" style="padding: 2.5rem;">
                    <h3 class="font-display" style="font-size: 1.5rem; margin-bottom: 1rem;">Infinite Scalability</h3>
                    <p style="color: var(--text-dim); line-height: 1.6;">Sharded architecture supporting up to 100,000 transactions per second.</p>
                </div>
            </div>
        </section>

<section id="mining-section" class="content-section scroll-reveal">
            <div style="text-align: center; max-width: 800px; margin: 0 auto 3rem;">
                <h2 class="section-header">Mining on Saturn</h2>
            </div>
            <div class="bento-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                <div class="glass-panel" style="padding: 2.5rem; text-align: center; font-weight: 500;">Accessible mining with consumer hardware.</div>
                <div class="glass-panel" style="padding: 2.5rem; text-align: center; font-weight: 500;">Fair rewards — 12.5 STRN per block with sustainable halving.</div>
                <div class="glass-panel" style="padding: 2.5rem; text-align: center; font-weight: 500;">Real yield through staking options.</div>
            </div>
        </section>

<section id="roadmap-section" class="content-section scroll-reveal" style="background: radial-gradient(circle at 50% 0%, rgba(244,211,94,0.05) 0%, transparent 70%);">
            <div style="max-width: 800px; margin: 0 auto 3rem; text-align: center;">
                <h2 class="section-header">Roadmap</h2>
            </div>
            <div style="max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
                <div class="glass-panel scroll-reveal" style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;"><div class="font-cyber" style="color: var(--saturn-gold); width: 120px; text-align: center;">Q2 2026</div><div style="flex: 1; min-width: 200px; text-align: center;">Network launch completed. Mainnet live across 47 countries.</div></div>
                <div class="glass-panel scroll-reveal" style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;"><div class="font-cyber" style="color: var(--saturn-gold); width: 120px; text-align: center;">Q3 2026</div><div style="flex: 1; min-width: 200px; text-align: center;">Major exchange listings (Binance, Coinbase, Kraken).</div></div>
                <div class="glass-panel scroll-reveal" style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;"><div class="font-cyber" style="color: var(--saturn-gold); width: 120px; text-align: center;">Q4 2026</div><div style="flex: 1; min-width: 200px; text-align: center;">1M active miners target + mobile mining app.</div></div>
                <div class="glass-panel scroll-reveal" style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;"><div class="font-cyber" style="color: var(--saturn-gold); width: 120px; text-align: center;">Q1 2027</div><div style="flex: 1; min-width: 200px; text-align: center;">Saturn Virtual Machine (SVM) for smart contracts.</div></div>
                <div class="glass-panel scroll-reveal" style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;"><div class="font-cyber" style="color: var(--saturn-gold); width: 120px; text-align: center;">Q2 2027</div><div style="flex: 1; min-width: 200px; text-align: center;">Lightning Network integration.</div></div>
                <div class="glass-panel scroll-reveal" style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;"><div class="font-cyber" style="color: var(--saturn-gold); width: 120px; text-align: center;">Q4 2027</div><div style="flex: 1; min-width: 200px; text-align: center;">Surpass Bitcoin market cap target.</div></div>
            </div>
        </section>

<section id="community-section" class="content-section scroll-reveal" style="padding-bottom: 8rem;">
            <div style="text-align: center; max-width: 800px; margin: 0 auto 3rem;">
                <h2 class="section-header">Community & Resources</h2>
            </div>
            <div class="bento-grid">
                <div onclick="openIframeModal('https://saturn.boats/submissions', 'Design Submissions')" class="glass-panel scroll-reveal clickable" style="padding: 2.5rem; text-align: center; font-weight: 500;">Design Submissions</div>
                <div onclick="openIframeModal('https://saturn.boats/exchange-logo-submissions', 'Exchange Logo Submissions')" class="glass-panel scroll-reveal clickable" style="padding: 2.5rem; text-align: center; font-weight: 500;">Exchange Logo Redesigns</div>
                <div onclick="showToast('info', 'Developer Grants', 'Applications for developer grants open in Q3 2026.')" class="glass-panel scroll-reveal clickable" style="padding: 2.5rem; text-align: center; font-weight: 500;">Developer Grants</div>
                <div onclick="showToast('info', 'Community Forum', 'The new community discourse forum is launching soon.')" class="glass-panel scroll-reveal clickable" style="padding: 2.5rem; text-align: center; font-weight: 500;">Community Forum</div>
            </div>
        </section>
        
        <footer class="cyber-footer">
            <div class="footer-grid scroll-reveal">
                <div class="footer-col" style="min-width: 250px;">
                    <div class="footer-logo-wrapper" style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem;">
                        <div class="nav-logo-icon">🪐</div>
                        <span class="font-display" style="font-size: 1.75rem; color: #fff; letter-spacing: -1.5px;">SATURN</span>
                    </div>
                    <p style="color: var(--text-dim); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 300px;">The censorship-resistant, infinitely scalable evolution of Bitcoin. Built for the entire world.</p>
                    <div class="footer-social-wrapper" style="display: flex; gap: 1rem;">
                        <a href="https://github.com/saturn-cash/saturn-core" target="_blank" class="social-circle"><i class="fa-brands fa-github text-lg"></i></a>
                        <a href="https://saturn.boats" target="_blank" class="social-circle"><i class="fa-solid fa-globe text-lg"></i></a>
                        <a href="mailto:submissions@saturn.boats" class="social-circle"><i class="fa-solid fa-envelope text-lg"></i></a>
                    </div>
                </div>

<div class="footer-col">
                    <h4>Explorers & Data</h4>
                    <ul>
                        <li><button onclick="openIframeModal('https://saturn.boats/roadmap', 'Interactive Roadmap')" class="footer-link">Roadmap</button></li>
                        <li><button onclick="openIframeModal('https://saturn.boats/mining', 'Mining Statistics')" class="footer-link">Mining Data</button></li>
                        <li><button onclick="openIframeModal('https://saturn.boats/about', 'About Saturn Core')" class="footer-link">About Saturn Core</button></li>
                        <li><a href="https://github.com/saturn-cash/saturn-core" target="_blank" class="footer-link">Source Code</a></li>
                    </ul>
                </div>

<div class="footer-col">
                    <h4>Community Vault</h4>
                    <ul>
                        <li><button onclick="openIframeModal('https://saturn.boats/logos', 'Brand Logos & Assets')" class="footer-link">Brand Logos & Assets</button></li>
                        <li><button onclick="openIframeModal('https://saturn.boats/exchange-logo-submissions', 'Exchange Logo Submissions')" class="footer-link">Exchange Logo Specs</button></li>
                        <li><button onclick="openIframeModal('https://saturn.boats/submissions', 'General Submissions')" class="footer-link">General Submissions</button></li>
                        <li><button onclick="openIframeModal('https://saturn.boats/submissions', 'Submit Artwork')" class="footer-link">Submit Artwork</button></li>
                    </ul>
                </div>

<div class="footer-col">
                    <h4>Legal & Compliance</h4>
                    <ul>
                        <li><button onclick="openLegalModal('privacy')" class="footer-link">Privacy Policy</button></li>
                        <li><button onclick="openLegalModal('terms')" class="footer-link">Terms of Use</button></li>
                        <li><button onclick="openLegalModal('disclaimer')" class="footer-link">Disclaimer</button></li>
                        <li><button onclick="openLegalModal('liability')" class="footer-link">Liability Matrix</button></li>
                        <li><button onclick="openLegalModal('cookie')" class="footer-link">Cookie Policy</button></li>
                    </ul>
                </div>
            </div>
            
            <div style="border-top: 1px solid rgba(255,255,255,0.05); margin-top: 4rem; padding-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--text-dim); font-size: 0.75rem; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; text-align: center;">
                <div style="flex: 1; min-width: 250px;">© 2026 Saturn Core Decentralized Autonomous Framework. Unlicensed open source.</div>
                <div style="flex: 1; min-width: 200px;">Built for the unstoppable web.</div>
            </div>
        </footer>
    </div>

<div id="dapp-view" class="hide-section">
        <div class="dapp-scroll-container">
            <div style="width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; position: relative; z-index: 10;">
                
                <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; gap: 1rem;">
                    <div style="flex: 1; min-width: 250px;">
                        <div style="color: #10b981; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                            SATURN MAINNET • BLOCK 142,891
                        </div>
                        <h1 class="font-display" style="font-size: 2.5rem; margin: 0;">Dashboard</h1>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; max-width: 500px; justify-content: flex-end;">
                        <button class="btn-cyber-secondary" style="padding: 8px 16px; font-size: 0.85rem; background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); color: #10b981; flex: 1; min-width: 200px;">
                            <div style="width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; animation: pulseGlow 2s infinite; display: inline-block; margin-right: 8px;"></div>
                            CONNECTED • 47 NODES ONLINE
                        </button>
                        <button onclick="openModal('connect-modal')" class="btn-cyber-secondary" style="padding: 8px 16px; font-size: 0.85rem; flex: 1; min-width: 150px;"><i class="fa-solid fa-wallet"></i> <span id="wallet-addr">0x71C…F9a3</span></button>
                    </div>
                </div>

<div class="sub-nav" style="background: transparent; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 2rem; padding: 0;">
                    <button onclick="switchDappTab('dapp-dashboard', this)" class="active" style="padding: 1rem; border-bottom: 2px solid var(--saturn-gold); color: var(--saturn-gold);">Dashboard</button>
                    <button onclick="switchDappTab('dapp-mining', this)" style="padding: 1rem; border-bottom: 2px solid transparent;">Mining</button>
                    <button onclick="switchDappTab('dapp-roadmap-tab', this)" style="padding: 1rem; border-bottom: 2px solid transparent;">Roadmap</button>
                    <button onclick="switchDappTab('dapp-community-tab', this)" style="padding: 1rem; border-bottom: 2px solid transparent;">Community Hub</button>
                    <button onclick="switchDappTab('dapp-docs', this)" style="padding: 1rem; border-bottom: 2px solid transparent;">Docs</button>
                </div>

<div id="dapp-dashboard" class="dapp-tab-content bento-grid scroll-reveal" style="padding: 0;">
                    <div class="glass-panel bento-col-span-2" style="padding: 2.5rem;">
                        <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; gap: 1.5rem;">
                            <div>
                                <div style="color: var(--saturn-gold); font-size: 0.85rem; letter-spacing: 2px; font-weight: 700; margin-bottom: 1rem;">YOUR PORTFOLIO</div>
                                <div class="font-display" style="font-size: 3.5rem; line-height: 1; color: #fff;">142.84</div>
                                <div style="font-size: 1.25rem; color: var(--text-dim); margin-top: 0.5rem;">$SATURN</div>
                            </div>
                            <div style="text-align: left;">
                                <div style="display: inline-block; padding: 4px 12px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); color: #10b981; border-radius: 50px; font-weight: 700; font-size: 0.85rem;">+$12.40 (8.7%)</div>
                                <div style="font-size: 0.75rem; color: var(--text-dim); margin-top: 8px;">Today</div>
                            </div>
                        </div>
                        
                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin-top: 2rem;">
                            <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.25rem; border-radius: 16px;">
                                <div style="font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; font-weight: 600;">Staked</div>
                                <div class="font-display" style="font-size: 1.25rem; margin-top: 0.5rem; color: #fff;">89.20</div>
                            </div>
                            <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.25rem; border-radius: 16px;">
                                <div style="font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; font-weight: 600;">Pending</div>
                                <div class="font-display" style="font-size: 1.25rem; margin-top: 0.5rem; color: #fff;">4.81</div>
                            </div>
                            <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.25rem; border-radius: 16px;">
                                <div style="font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; font-weight: 600;">Current APY</div>
                                <div class="font-display" style="font-size: 1.25rem; margin-top: 0.5rem; color: var(--saturn-gold);">18.4%</div>
                            </div>
                        </div>
                    </div>

<div class="glass-panel scroll-reveal" style="padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem;">
                        <div style="font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 1rem; text-align: center;">Quick Actions</div>
                        <button onclick="stakeSaturnAction()" class="btn-cyber-primary" style="width: 100%;">Stake $SATURN</button>
                        <button onclick="claimRewardsAction()" class="btn-cyber-secondary" style="width: 100%;">Claim Rewards</button>
                        <button onclick="openIframeModal('https://saturn.boats/submissions', 'Submit New Design')" class="btn-cyber-secondary" style="width: 100%;">Submit New Design</button>
                    </div>
                </div>

<div id="dapp-mining" class="dapp-tab-content hide-section glass-panel scroll-reveal" style="padding: 2.5rem;">
                    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem;">
                        <div style="flex: 1; min-width: 250px;">
                            <h2 class="font-display" style="font-size: 2rem; margin-bottom: 0.5rem;">Mining Dashboard</h2>
                            <p style="color: var(--text-dim); font-size: 0.9rem;">Currently mining with 3 workers connected to main pool.</p>
                        </div>
                        <button id="mine-btn" onclick="toggleMining()" class="btn-cyber-primary" style="background: #10b981; border-color: #10b981; color: #fff; text-shadow: none; width: 100%; max-width: 250px;">STOP MINING</button>
                    </div>
                    
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem;">
                        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 16px;">
                            <div style="font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem;">HASHRATE</div>
                            <div id="ui-hashrate" class="font-display" style="font-size: 2.5rem; color: var(--saturn-gold);">124.8</div>
                            <div style="font-size: 0.85rem; color: var(--text-dim); margin-top: 0.25rem;">TH/s</div>
                        </div>
                        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 16px;">
                            <div style="font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem;">WORKERS</div>
                            <div class="font-display" style="font-size: 2.5rem; color: #fff;">3</div>
                            <div style="font-size: 0.85rem; color: #10b981; margin-top: 0.25rem;">All Active</div>
                        </div>
                        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 16px;">
                            <div style="font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem;">DAILY REWARD</div>
                            <div class="font-display" style="font-size: 2.5rem; color: #fff;">0.84</div>
                            <div style="font-size: 0.85rem; color: var(--text-dim); margin-top: 0.25rem;">$SATURN</div>
                        </div>
                        <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 16px;">
                            <div style="font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem;">TOTAL MINED</div>
                            <div class="font-display" style="font-size: 2.5rem; color: #fff;">312.7</div>
                            <div style="font-size: 0.85rem; color: var(--text-dim); margin-top: 0.25rem;">$SATURN</div>
                        </div>
                    </div>
                </div>

<div id="dapp-roadmap-tab" class="dapp-tab-content hide-section glass-panel scroll-reveal" style="padding: 2.5rem; text-align: center;">
                    <h2 class="font-display" style="font-size: 2rem; margin-bottom: 1rem;">Interactive Roadmap</h2>
                    <p style="color: var(--text-dim); margin-bottom: 2rem;">Track our live progress on the core protocol upgrades.</p>
                    <button onclick="openIframeModal('https://saturn.boats/roadmap', 'Saturn Interactive Roadmap')" class="btn-cyber-primary" style="margin: 0 auto;">Open Full Roadmap Explorer</button>
                </div>

<div id="dapp-community-tab" class="dapp-tab-content hide-section glass-panel scroll-reveal" style="padding: 2.5rem;">
                    <h2 class="font-display" style="font-size: 2rem; margin-bottom: 1.5rem; text-align: center;">Community Hub</h2>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
                        <button onclick="openIframeModal('https://saturn.boats/submissions', 'General Submissions Vault')" class="btn-cyber-secondary" style="justify-content: space-between;">Submit New Design <i class="fa-solid fa-arrow-right opacity-50"></i></button>
                        <button onclick="openIframeModal('https://saturn.boats/exchange-logo-submissions', 'Exchange Logo Submissions')" class="btn-cyber-secondary" style="justify-content: space-between;">Exchange Logos <i class="fa-solid fa-arrow-right opacity-50"></i></button>
                        <button onclick="openIframeModal('https://saturn.boats/submissions', 'General Submissions Vault')" class="btn-cyber-secondary" style="justify-content: space-between;">Submissions Vault <i class="fa-solid fa-arrow-right opacity-50"></i></button>
                    </div>
                </div>

<div id="dapp-docs" class="dapp-tab-content hide-section glass-panel scroll-reveal" style="padding: 2.5rem; text-align: center;">
                    <h2 class="font-display" style="font-size: 2rem; margin-bottom: 1rem;">Documentation</h2>
                    <p style="color: var(--text-dim); line-height: 1.6; margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto;">Saturn uses an optimized Proof of Work consensus mechanism designed to secure the network while remaining accessible. Block reward is 12.5 STRN. Mining is accessible with standard consumer hardware through our custom CPU/GPU optimization layers. The network adheres to a sustainable, mathematically sound halving schedule.</p>
                    <button onclick="openIframeModal('https://saturn.boats/about', 'About Saturn Core')" class="btn-cyber-secondary" style="margin: 0 auto;">Read Full Documentation</button>
                </div>
            </div>
        </div>
    </div>

<div id="connect-modal" class="modal-overlay" onclick="if(event.target === this) closeModal('connect-modal')">
        <div class="modal-content">
            <button class="modal-close" onclick="closeModal('connect-modal')">×</button>
            <h2 class="font-display" style="font-size: 2rem; margin-bottom: 2rem;">Connect Wallet</h2>
            <div style="display: flex; flex-direction: column; gap: 1rem;">
                <button onclick="executeWalletConnect()" class="btn-cyber-secondary" style="justify-content: flex-start; padding: 20px; font-size: 1.1rem; background: rgba(0,0,0,0.5);">
                    <i class="fa-brands fa-ethereum" style="font-size: 2rem; margin-right: 15px; width: 30px;"></i> 
                    <div style="text-align: left;"><div style="font-weight: 700;">MetaMask</div><div style="font-size: 0.8rem; color: var(--text-dim);">Browser Extension</div></div>
                </button>
                <button onclick="executeWalletConnect()" class="btn-cyber-secondary" style="justify-content: flex-start; padding: 20px; font-size: 1.1rem; background: rgba(0,0,0,0.5);">
                    <i class="fa-brands fa-bitcoin" style="font-size: 2rem; margin-right: 15px; width: 30px;"></i>
                    <div style="text-align: left;"><div style="font-weight: 700;">Phantom / Solflare</div><div style="font-size: 0.8rem; color: var(--text-dim); font-weight: 400;">Multi-chain Supported</div></div>
                </button>
            </div>
            <button onclick="closeModal('connect-modal')" class="btn-cyber-secondary" style="width: 100%; margin-top: 2rem; border-color: transparent;">CLOSE</button>
        </div>
    </div>

<div id="iframe-modal" class="modal-overlay" onclick="if(event.target === this) closeModal('iframe-modal')">
        <div class="modal-content full">
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5);">
                <div class="font-display" style="font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 12px;">
                    <i class="fa-solid fa-link" style="color: var(--saturn-gold);"></i>
                    <span id="iframe-modal-title">Saturn Network Resource</span>
                </div>
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <button onclick="closeModal('iframe-modal')" class="btn-cyber-secondary hidden md:flex" style="padding: 6px 16px; font-size: 0.75rem;">CLOSE</button>
                    <button onclick="closeModal('iframe-modal')" class="modal-close" style="position: static;">×</button>
                </div>
            </div>
            <div style="flex-grow: 1; position: relative; background: #05050f;">
                <div id="iframe-loader" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--saturn-gold);">
                    <i class="fa-solid fa-circle-notch fa-spin" style="font-size: 2.5rem; margin-bottom: 1rem;"></i>
                    <div style="font-family: monospace; font-size: 0.875rem; letter-spacing: 2px;">ESTABLISHING SECURE CONNECTION…</div>
                </div>
                <iframe id="dynamic-iframe" style="width: 100%; height: 100%; border: none; position: relative; z-index: 10; opacity: 0; transition: opacity 0.5s;" onload="this.style.opacity='1'; document.getElementById('iframe-loader').style.display='none';"></iframe>
            </div>
        </div>
    </div>

<div id="legal-modal" class="modal-overlay" onclick="if(event.target === this) closeModal('legal-modal')">
        <div class="modal-content large" style="display: flex; flex-direction: column; padding: 0;">
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5);">
                <div class="font-display" style="font-size: 1.5rem; font-weight: 700; color: var(--saturn-gold);" id="legal-modal-title">Legal Documentation</div>
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <button onclick="closeModal('legal-modal')" class="btn-cyber-secondary hidden md:flex" style="padding: 8px 20px; font-size: 0.75rem;">CLOSE</button>
                    <button onclick="closeModal('legal-modal')" class="modal-close" style="position: static;">×</button>
                </div>
            </div>
            <div style="flex-grow: 1; overflow-y: auto; padding: 2rem; background: rgba(0,0,0,0.2);" class="legal-text-container" id="legal-modal-content"></div>
            <div class="md:hidden" style="padding: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5);">
                <button onclick="closeModal('legal-modal')" class="btn-cyber-secondary" style="width: 100%;">CLOSE MODAL</button>
            </div>
        </div>
    </div>

</div>

function render() {
            bgCtx.fillStyle = '#05050f'; bgCtx.fillRect(0, 0, width, height);
            bgCtx.fillStyle = '#ffffff';
            stars.forEach(s => {
                s.phase += s.speed;
                bgCtx.globalAlpha = Math.max(0.1, Math.abs(Math.sin(s.phase)));
                bgCtx.beginPath(); bgCtx.arc(s.x, s.y, s.radius, 0, Math.PI * 2); bgCtx.fill();
            });
            bgCtx.globalAlpha = 1.0;

fxCtx.clearRect(0, 0, width, height);
            for(let i = particles.length - 1; i >= 0; i--) {
                let p = particles[i];
                p.x += p.vx; p.y += p.vy; p.life -= p.decay;
                if(p.life <= 0) { particles.splice(i, 1); continue; }
                fxCtx.fillStyle = p.color + p.life + ')';
                fxCtx.beginPath(); fxCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2); fxCtx.fill();
            }
            requestAnimationFrame(render);
        }
        window.addEventListener('resize', resize); resize(); render();
    }

/* Cinematic Zoom Sequence */
    function runCinematicSequence() {
        const intro = document.getElementById('cinematic-intro');
        if(!intro) return;
        setTimeout(() => {
            intro.classList.add('zooming');
            triggerDustExplosion(window.innerWidth / 2, window.innerHeight / 2, 400, true);
            setTimeout(() => {
                intro.classList.add('cleared');
                setTimeout(() => intro.remove(), 1500);
            }, 700);
        }, 1200);
    }

/* Scroll Observers for Fading & Dust & Parallax */
    function initScrollSystems() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    if(!entry.target.classList.contains('in-view')) {
                        entry.target.classList.add('in-view');
                        const rect = entry.target.getBoundingClientRect();
                        triggerDustExplosion(rect.left + rect.width/2, rect.top + rect.height/2, 40);
                    }
                } else {
                    entry.target.classList.remove('in-view'); 
                }
            });
        }, { threshold: 0.1 });

document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));

/* 3D Drag Engine */
    function initGyroSpin() {
        const sys = document.getElementById('saturn-system');
        const con = document.getElementById('saturn-drag-container');
        if(!sys || !con) return;
        let dragging = false, prevX = 0, rotY = 15, rotX = 25;
        const down = e => { dragging = true; prevX = e.clientX || e.touches[0].clientX; };
        const up = () => { dragging = false; };
        const move = e => {
            if(!dragging) return;
            const x = e.clientX || e.touches[0].clientX;
            rotY += (x - prevX) * 0.8;
            sys.style.transform = `scale(1) rotateX(${rotX}deg) rotateY(${rotY}deg)`;
            prevX = x;
        };
        con.addEventListener('mousedown', down); window.addEventListener('mouseup', up); window.addEventListener('mousemove', move);
        con.addEventListener('touchstart', down); window.addEventListener('touchend', up); window.addEventListener('touchmove', move);

setInterval(() => {
            if(!dragging) {
                rotY += 0.2;
                let scaleVal = window.innerWidth <= 800 ? (window.innerWidth <= 480 ? 0.55 : 0.65) : 1;
                sys.style.transform = `scale(${scaleVal}) rotateX(${rotX}deg) rotateY(${rotY}deg)`;
            }
        }, 30);
    }

/* dApp App-Mode Switching */
    window.switchView = function(mode) {
        const web = document.getElementById('website-view');
        const dapp = document.getElementById('dapp-view');
        const btnW = document.getElementById('btn-website');
        const btnD = document.getElementById('btn-dapp');

if(mode === 'website') {
            web.classList.remove('hide-section'); 
            dapp.classList.remove('app-mode'); dapp.classList.add('hide-section');
            btnW.classList.add('active'); btnD.classList.remove('active');
            document.body.style.overflow = '';
        } else {
            web.classList.add('hide-section'); 
            dapp.classList.remove('hide-section'); dapp.classList.add('app-mode');
            btnD.classList.add('active'); btnW.classList.remove('active');
            document.body.style.overflow = 'hidden'; 
        }
    }

/* Modals & Toasts */
    window.openModal = function(id) { const m = document.getElementById(id); if(m) { m.style.display = 'flex'; setTimeout(() => m.classList.add('show'), 10); document.body.style.overflow = 'hidden'; } }
    window.closeModal = function(id) { 
        const m = document.getElementById(id); 
        if(m) { 
            m.classList.remove('show'); 
            setTimeout(() => {
                m.style.display = 'none';
                document.body.style.overflow = 'auto';
                if(id === 'iframe-modal') {
                    const iframe = document.getElementById('dynamic-iframe');
                    if(iframe) iframe.src = '';
                }
            }, 300); 
        } 
    }
    
    window.showToast = function(type, title, msg) {
        const c = document.getElementById('toast-container');
        if(!c) return;
        const id = 't_' + Date.now();
        const icon = type === 'success' ? 'fa-check' : (type === 'error' ? 'fa-triangle-exclamation' : (type === 'warning' ? 'fa-triangle-exclamation' : 'fa-circle-info'));
        const color = type === 'success' ? '#10b981' : (type === 'error' ? '#ef4444' : (type === 'warning' ? '#f59e0b' : '#3b82f6'));
        
        const html = `
            <div class="toast" id="${id}" style="border-color: ${color}; box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 15px ${color}33;">
                <i class="fa-solid ${icon} toast-icon" style="color: ${color}"></i>
                <div>
                    <div style="font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: #fff; margin-bottom: 4px; word-break: normal; overflow-wrap: break-word;">${title}</div>
                    <div style="font-size: 0.85rem; color: var(--text-dim); line-height: 1.4; word-break: normal; overflow-wrap: break-word;">${msg}</div>
                </div>
            </div>`;
        c.insertAdjacentHTML('beforeend', html);
        
        const el = document.getElementById(id);
        void el.offsetWidth; el.classList.add('show');
        setTimeout(() => { el.classList.remove('show'); setTimeout(() => el.remove(), 400); }, 5000);
    }

window.stakeSaturnAction = function() {
        showToast('info', 'Initiating Smart Contract', 'Preparing proof-of-stake allocation transaction. Please sign the request in your wallet.');
        setTimeout(() => showToast('success', 'Staking Successful', 'Transaction confirmed in block 142,892. Your assets are now compounding yield.'), 2500);
    };

window.claimRewardsAction = function() {
        showToast('warning', 'Validating Rewards', 'Connecting to node ledger to verify pending 4.81 $SATURN balance.');
        setTimeout(() => showToast('success', 'Rewards Claimed', 'Your pending rewards have been securely transferred to your primary wallet address.'), 2200);
    };

window.executeWalletConnect = function() {
        closeModal('connect-modal');
        setTimeout(() => {
            const wallet = document.getElementById('wallet-addr');
            if(wallet) wallet.textContent = '0x71C...F9a3';
            showToast('success', 'Wallet Connected Successfully', 'Zero-knowledge verification complete. Welcome to the Saturn mainnet.');
        }, 400);
    }

window.openIframeModal = function(url, title) {
        const titleEl = document.getElementById('iframe-modal-title');
        const loader = document.getElementById('iframe-loader');
        const iframe = document.getElementById('dynamic-iframe');
        
        if(titleEl) titleEl.innerText = title;
        if(loader) loader.style.display = 'flex';
        if(iframe) {
            iframe.style.opacity = '0';
            iframe.src = url;
        }
        openModal('iframe-modal');
    }

window.openLegalModal = function(type) {
        const titleEl = document.getElementById('legal-modal-title');
        const contentEl = document.getElementById('legal-modal-content');
        if(!titleEl || !contentEl) return;
        
        let title = '';
        let content = '';

if (type === 'privacy') {
            title = 'Robust Privacy Policy & Data Handling Framework';
            content = `
                <h3>1. Fundamental Philosophy of Data Sovereignty</h3>
                <p>The Saturn Core framework operates on the strict foundational principle that your data is exclusively your property. Unlike centralized legacy platforms that harvest, commodify, and sell user telemetry, the Saturn infrastructure is designed with cryptographic compartmentalization from the ground up. This policy explicitly details how non-identifiable interaction mechanics are handled in a trustless environment.</p>
                
                <h3>2. Zero-Knowledge Execution</h3>
                <p>When you interact with the Saturn decentralized application (dApp) or website, absolutely zero personally identifiable information (PII) is transmitted to central servers. Wallet connections utilize standard web3 injection methodologies (e.g., EIP-1193) meaning public key broadcasting occurs solely for localized DOM state management and reading public blockchain ledgers. Private keys remain strictly within your local environment hardware or browser extension sandbox.</p>
                
                <h3>3. Off-Chain Telemetry & Metrics</h3>
                <p>To ensure network latency optimization and node health, the system may passively monitor RPC endpoint response times and generalized block synchronization statuses. This data is rigorously anonymized. We do not track IP addresses, browser fingerprinting hashes, or cross-site tracking cookies. The connection between your geographical locus and your cryptographic identity remains mathematically severed.</p>

<h3>4. Decentralized Storage (IPFS/Swarm)</h3>
                <p>Any assets submitted via the Community Vault (such as artwork, logo submissions, or JSON architectural schema) are permanently uploaded to decentralized storage arrays. By utilizing this function, you acknowledge that the data becomes immutable and globally distributed. The Saturn Core developers possess zero administrative capability to alter, redact, or delete submissions once consensus confirms the block transaction.</p>
            `;
        } else if (type === 'terms') {
            title = 'Comprehensive Terms of Network Usage';
            content = `
                <h3>1. Acceptance of Trustless Interaction</h3>
                <p>By engaging with the Saturn protocol, web interfaces, or associated smart contracts, you explicitly acknowledge and agree that you are interacting with open-source, decentralized, mathematically bound software. You accept these terms entirely, without modification. If you reject the premise of self-custody or algorithmic governance, you must immediately terminate your connection to the node network.</p>
                
                <h3>2. The "Code is Law" Precedent</h3>
                <p>Saturn operates autonomously. There is no corporate entity, CEO, or administrative oversight committee capable of reversing transactions, freezing assets, or intervening in protocol execution. All smart contract actions, staking deployments, and mining reward distributions execute precisely as written in the immutable blockchain bytecode. You bear absolute and sole responsibility for verifying the parameters of any transaction before cryptographic signing.</p>
                
                <h3>3. Network Participation Ethics</h3>
                <p>While the network is permissionless, bad-actor mitigation is handled via decentralized consensus penalties (slashing). Attempting to submit malformed blocks, sybil-attacking the RPC endpoints, or manipulating the submission vaults will result in automated IP/Node blacklisting at the decentralized firewall layer. Users operating standard consumer hardware for legitimate network validation (mining) are permanently insulated from such penalties.</p>

<h3>4. Forking and Derivative Works</h3>
                <p>The underlying Saturn Core codebase is governed by extreme open-source tenets. You possess the unalienable right to fork, modify, redistribute, and compile derivative works. However, the trademarked term "SATURN", the specific 🪐 logo implementation, and the physical coin design remain under the collective intellectual stewardship of the primary DAO. Malicious spoofing or phishing attempts utilizing these assets are categorically condemned.</p>
            `;
        } else if (type === 'disclaimer') {
            title = 'Uncompromising Risk Disclaimer';
            content = `
                <h3>1. As-Is Architecture</h3>
                <p>The Saturn platform, website, dApp, and associated node software are provided on a strictly "AS-IS" and "AS-AVAILABLE" basis without warranties of any kind, either express or implied. The developers, contributors, and active nodes disclaim all warranties, including, but not limited to, implied warranties of merchantability, fitness for a particular purpose, and non-infringement.</p>
                
                <h3>2. Cryptographic Volatility</h3>
                <p>Cryptographic assets ($SATURN) are inherently speculative, highly volatile, and entirely dependent on decentralized market consensus for valuation. The numerical representations in your dashboard do not constitute a promise of fiat value. The entire ecosystem is subject to extreme market fluctuations, regulatory interference by legacy geopolitical entities, and unseen macroeconomic variables. You may lose 100% of your allocated purchasing power.</p>
                
                <h3>3. Experimental Software Contingency</h3>
                <p>While the Saturn network aims to improve upon Bitcoin's legacy limitations via 47x speed increases and military-grade cryptography, the software remains in active deployment. Unforeseen smart contract vulnerabilities, zero-day exploits, consensus fracturing (chain splits), or quantum decryption advancements could theoretically compromise the network's integrity. Participation denotes your full comprehension of edge-case technological risks.</p>
            `;
        } else if (type === 'liability') {
            title = 'Absolute Shielding Liability Matrix';
            content = `
                <h3>1. Complete Indemnification</h3>
                <p>To the maximum extent permitted by applicable universal law, in no event shall the Saturn Core creators, contributors, github committers, UI designers, or infrastructure providers be held liable for any direct, indirect, incidental, special, consequential, or exemplary damages. This includes, but is not limited to, damages for loss of profits, goodwill, data integrity, or other intangible losses resulting from the utilization of this interface.</p>
                
                <h3>2. The Self-Custody Mandate</h3>
                <p>Because you retain the private keys to your assets, you bear infinite liability for their security. If your local hardware is compromised by malware, if you are subject to a social engineering attack, or if you accidentally send funds to a burn address or incorrect contract, the Saturn Core developers cannot and will not intervene. There is no customer support desk to rectify user-side errors.</p>
                
                <h3>3. Third-Party Interactions</h3>
                <p>Any interaction facilitated through the Saturn interface to third-party exchanges, decentralized liquidity pools, or external RPC nodes is conducted entirely at your own risk. The Saturn website serves purely as an optical lens into the blockchain; it does not custody, route, or insure your assets. We maintain zero legal liability for the insolvency or malicious actions of third-party platforms.</p>
            `;
        } else if (type === 'cookie') {
            title = 'Zero-Intrusion Cookie Policy';
            content = `
                <h3>1. Rejection of Surveillance Capitalism</h3>
                <p>The Saturn interface actively rejects the invasive tracking mechanisms utilized by legacy Web2 platforms. We do not deploy third-party advertising cookies, cross-site trackers, or behavioral analytics scripts (e.g., Google Analytics, Meta Pixels). Your browsing habits are yours alone.</p>
                
                <h3>2. Essential Local Storage Operations</h3>
                <p>To provide a seamless, non-amnesiac user experience, the dApp utilizes strictly essential browser APIs: <code>localStorage</code> and <code>sessionStorage</code>. These are employed exclusively for localized state retention—such as remembering your preferred UI theme (Website vs. dApp mode), temporarily caching RPC connection strings, and maintaining basic session state to prevent redundant wallet connection prompts during a single visit.</p>
                
                <h3>3. Your Autonomy and Control</h3>
                <p>Because all data retention occurs entirely client-side within your own browser architecture, you retain absolute authority to clear, block, or manipulate this data via your browser's native developer tools or security settings. Clearing your cache will result in the loss of localized UI preferences and mandate a re-initialization of your wallet connection upon your next visit, but it will have zero impact on your cryptographic assets stored on-chain.</p>
            `;
        }

titleEl.innerText = title;
        contentEl.innerHTML = content;
        openModal('legal-modal');
    }

/* Boot */
    window.onload = () => {
        initCosmicEngine();
        initScrollSystems();
        initGyroSpin();
        runCinematicSequence();
        console.log("%c🪐 SATURN TERMINAL SECURE", "color: #f4d35e; font-size: 20px; font-weight: bold; background: #000; padding: 10px;");
    };