/* ============================================
           BACKGROUND THEME STYLES
           මෙම styles ඔබගේ CSS file එකට copy කරන්න
           ============================================ */
        
        :root {
            --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --glow-color: rgba(102, 126, 234, 0.6);
        }

        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: #0a0a1a;
            min-height: 100vh;
            position: relative;
        }

        /* Canvas Background */
        #backgroundCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
        }

        /* Animated Gradient Orbs */
        .background-orbs {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.3;
            animation: floatOrb 20s infinite ease-in-out;
        }

        .orb:nth-child(1) {
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            top: -200px;
            left: -200px;
            animation-duration: 25s;
        }

        .orb:nth-child(2) {
            width: 500px;
            height: 500px;
            background: linear-gradient(135deg, #f093fb, #f5576c);
            bottom: -250px;
            right: -250px;
            animation-duration: 30s;
            animation-delay: 5s;
        }

        .orb:nth-child(3) {
            width: 350px;
            height: 350px;
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            top: 50%;
            right: -175px;
            animation-duration: 35s;
            animation-delay: 10s;
        }

        @keyframes floatOrb {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(100px, -100px) scale(1.1); }
            66% { transform: translate(-50px, 50px) scale(0.9); }
        }

        /* Content එක සඳහා wrapper */
        .page-content {
            position: relative;
            z-index: 10;
            min-height: 100vh;
        }

        /* Demo content box */
        .demo-box {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
            margin: 50px auto;
            max-width: 800px;
            color: white;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
        }

        .demo-box h1 {
            background: linear-gradient(135deg, #667eea 0%, #f093fb 50%, #667eea 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 3s ease infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }