:root {
            /* DARK MODE (DEFAULT) */
            --bg-void: #030305;
            --primary-cyan: #00f3ff;
            --primary-purple: #bc13fe;
            --primary-accent: #2d00f7;
            
            --glass-surface: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.25); 
            --glass-highlight: rgba(255, 255, 255, 0.1);
            
            --text-main: #ffffff;
            --text-muted: #b0bcd1;
            --menu-text: #ffffff;
            
            --font-main: 'Inter Tight', sans-serif;
            --font-tech: 'Rajdhani', sans-serif;
            
            --nav-glass: rgba(5, 5, 8, 0.98);
            --nav-border: rgba(255, 255, 255, 0.35);
            
            --mobile-btn-bg: rgba(0, 243, 255, 0.15);
            --mobile-btn-text: #00f3ff;
            --theme-btn-border: rgba(255, 255, 255, 0.25);
            
            --menu-bg: #0f0f13;
            --section-particle-opacity: 0.2;
            --hero-glow: radial-gradient(circle at 50% 50%, rgba(0, 243, 255, 0.15) 0%, transparent 50%);
        }

        /* LIGHT MODE (Modernized & Softer) */
        body.light-mode {
            --bg-void: #f4f6f9; /* Softer white/gray */
            --primary-cyan: #007AFF; /* Modern vibrant blue */
            --primary-purple: #8A2BE2;
            --primary-accent: #00C2FF;
            
            /* Glassmorphism for Light Mode */
            --glass-surface: rgba(255, 255, 255, 0.75);
            --glass-border: rgba(0, 0, 0, 0.08); /* Subtle border */
            --glass-highlight: rgba(255, 255, 255, 1);
            
            --text-main: #1a1a1a;
            --text-muted: #555e6d;
            --menu-text: #1a1a1a;
            
            --nav-glass: rgba(255, 255, 255, 0.95);
            --nav-border: rgba(0, 0, 0, 0.08);
            
            --mobile-btn-bg: rgba(0, 122, 255, 0.1);
            --mobile-btn-text: #007AFF;
            --theme-btn-border: rgba(0, 0, 0, 0.1);
            
            --menu-bg: #ffffff;
            --section-particle-opacity: 0.15;
            --hero-glow: radial-gradient(circle at 50% 50%, rgba(0, 122, 255, 0.1) 0%, transparent 60%);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-void);
            color: var(--text-main);
            font-family: var(--font-main);
            overflow-x: hidden;
            transition: background-color 0.5s ease, color 0.5s ease;
            position: relative;
        }

        /* -----------------------
           MODERN PARTICLES & HERO GLOW
           ----------------------- */
        
        /* Modern Small Particles (Reused) */
.modern-particles { position: absolute; inset: 0; z-index: -1; opacity: var(--section-particle-opacity); pointer-events: none; background-image: radial-gradient(var(--text-main) 1px, transparent 1px), radial-gradient(var(--primary-cyan) 1.5px, transparent 1.5px); background-size: 50px 50px, 30px 30px; background-position: 0 0, 15px 15px; mask-image: radial-gradient(circle, black 40%, transparent 100%); animation: modernTwinkle 10s linear infinite alternate; }
@keyframes modernTwinkle { 0% { opacity: 0.15; transform: scale(1); } 100% { opacity: 0.35; transform: scale(1.05); } }

/* HERO SPECIFIC: ADVANCED CYBER SPHERE (The "Amazing" Factor) */
.hero-complex-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0.6; background: radial-gradient(circle, rgba(0,243,255,0.03) 0%, transparent 70%); }
.hero-complex-effect::before, .hero-complex-effect::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(0,243,255,0.15); transform: translate(-50%, -50%); }
.hero-complex-effect::before { width: 100%; height: 100%; animation: rotateRing 30s linear infinite; }
.hero-complex-effect::after { width: 70%; height: 70%; border-style: solid; border-color: rgba(188, 19, 254, 0.1); animation: rotateRing 20s linear infinite reverse; }
@keyframes rotateRing { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Global Background Canvas */
#blockchain-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 1; pointer-events: none; }

/* Gradient Text */
.gradient-text, .brand-text { background: linear-gradient(135deg, var(--text-main) 10%, var(--primary-cyan) 50%, var(--primary-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; animation: gradientShift 8s ease infinite; background-size: 200% 200%; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Utility */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }

/* MODERN BUTTONS & HOVER */
.btn { position: relative; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-tech); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 1; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity 0.4s ease; }
.btn:hover::after { opacity: 1; }

.btn-primary { background: rgba(0, 243, 255, 0.08); border: 1px solid var(--primary-cyan); color: var(--primary-cyan); box-shadow: 0 0 10px rgba(0, 243, 255, 0.1); position: relative; }
.btn-primary::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(45deg, var(--primary-cyan), var(--primary-magenta), var(--primary-cyan)); border-radius: 50px; opacity: 0; filter: blur(10px); transition: opacity 0.4s ease; z-index: -1; }
body.light-mode .btn-primary { background: rgba(0, 122, 255, 0.08); border-color: var(--primary-cyan); color: var(--primary-cyan); box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2); }
.btn-primary:hover { background: var(--primary-cyan); color: #fff; box-shadow: 0 0 25px var(--primary-cyan), 0 0 50px var(--primary-cyan); transform: translateY(-5px) scale(1.08); border-color: #fff; }
.btn-primary:hover::before { opacity: 1; }

.btn-login-animated { position: relative; background: transparent; color: var(--text-main); border-radius: 50px; overflow: hidden; z-index: 1; padding: 12px 30px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 1px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.btn-login-animated::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: 50px; background: linear-gradient(90deg, #00f3ff, #bc13fe, #00f3ff); background-size: 200% auto; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gradientBorder 3s linear infinite; }
.btn-login-animated::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,243,255,0.1), rgba(188,19,254,0.1)); opacity: 0; transition: opacity 0.4s ease; border-radius: 50px; }
.btn-login-animated:hover { color: var(--primary-cyan); box-shadow: 0 0 30px rgba(0, 243, 255, 0.4); transform: translateY(-3px) scale(1.05); }
.btn-login-animated:hover::after { opacity: 1; }
@keyframes gradientBorder { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }

/* Back to Top */
#backToTop { position: fixed; bottom: 25px; right: 25px; width: 50px; height: 50px; background: var(--bg-void); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-cyan); font-size: 1.2rem; cursor: pointer; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 0 20px rgba(0,0,0,0.3); }
#backToTop::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: 50%; background: linear-gradient(90deg, #00f3ff, #bc13fe, #00f3ff); background-size: 200% auto; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gradientBorder 2s linear infinite; }
#backToTop::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: radial-gradient(circle, var(--primary-cyan), transparent); opacity: 0; filter: blur(15px); transition: opacity 0.4s ease; z-index: -1; }
#backToTop.show { opacity: 1; visibility: visible; }
#backToTop:hover { transform: translateY(-8px) scale(1.15) rotate(360deg); color: #fff; box-shadow: 0 0 40px var(--primary-cyan); background: var(--glass-surface); }
#backToTop:hover::after { opacity: 1; }


       /* MODERN FLOATING NAVBAR - ULTIMATE UPGRADE */
nav { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1280px; padding: 12px 20px; background: var(--nav-glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--nav-border); border-radius: 50px; z-index: 5000; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(99, 102, 241, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: navFloat 3s ease-in-out infinite; }
@keyframes navFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
nav:hover { box-shadow: 0 15px 50px rgba(0,0,0,0.15), 0 0 60px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

.nav-wrap { display: flex; justify-content: space-between; align-items: center; }

.brand-logo { height: 45px; margin-right: 12px; transition: all 0.4s ease; filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.3)); }
.brand-logo:hover { transform: rotate(360deg) scale(1.1); filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.6)); }

.logo { font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; color: var(--text-main); text-decoration: none; font-family: var(--font-tech); background: linear-gradient(135deg, var(--text-main) 0%, var(--primary-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all 0.3s ease; }
.logo:hover { filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.5)); transform: scale(1.05); }

.nav-center { display: flex; gap: 25px; align-items: center; }
.nav-center a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; padding: 5px 0; display: flex; align-items: center; gap: 6px; }
.nav-center a::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(90deg, var(--primary-cyan), var(--primary)); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; }
.nav-center a:hover { color: var(--primary-cyan); text-shadow: 0 0 15px var(--primary-cyan); transform: translateY(-2px); }
.nav-center a:hover::after { width: 100%; }
.nav-center a i { transition: all 0.3s ease; }
.nav-center a:hover i { transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 8px var(--primary-cyan)); }

.dropdown { position: relative; }
.dropdown-content { display: none; position: absolute; background: var(--menu-bg); min-width: 220px; border: 1px solid var(--glass-border); border-radius: 16px; padding: 10px; top: 100%; margin-top: 15px; left: -20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(99, 102, 241, 0.1); z-index: 10; backdrop-filter: blur(20px); }
body.light-mode .dropdown-content { box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(99, 102, 241, 0.1); }
.dropdown-content::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: transparent; }
.dropdown:hover .dropdown-content { display: block; animation: smoothSlideUp 0.3s ease; }
@keyframes smoothSlideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.dropdown-content a { padding: 12px 15px; border-radius: 8px; display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.dropdown-content a::before { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); transition: left 0.4s ease; }
.dropdown-content a:hover::before { left: 100%; }
.dropdown-content a:hover { background: var(--glass-surface); color: var(--primary-cyan); padding-left: 20px; box-shadow: -3px 0 0 var(--primary-cyan); }
.dropdown-content a i { width: 20px; text-align: center; transition: all 0.3s ease; }
.dropdown-content a:hover i { transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 8px var(--primary-cyan)); }

.nav-right { display: flex; gap: 12px; align-items: center; }

.theme-toggle { background: transparent; border: 1px solid var(--theme-btn-border); color: var(--text-main); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1rem; position: relative; overflow: hidden; }
.theme-toggle::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, var(--primary-cyan) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; }
.theme-toggle:hover::before { opacity: 0.2; }
.theme-toggle:hover { border-color: var(--primary-cyan); color: var(--primary-cyan); background: var(--glass-surface); transform: rotate(180deg) scale(1.1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); }
.theme-toggle i { transition: all 0.4s ease; }

.desktop-btns { display: flex; gap: 12px; align-items: center; }

.mobile-actions { display: none; align-items: center; gap: 10px; }

.mobile-sign-in { background: var(--mobile-btn-bg); color: var(--mobile-btn-text); padding: 6px 14px; border-radius: 30px; font-size: 0.75rem; font-weight: 700; text-decoration: none; font-family: var(--font-tech); border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: all 0.3s ease; position: relative; overflow: hidden; }
.mobile-sign-in::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent); transform: translateX(-100%); transition: transform 0.4s ease; }
.mobile-sign-in:hover::before { transform: translateX(100%); }
.mobile-sign-in:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }

.mobile-menu-btn { display: none; color: var(--text-main); font-size: 24px; cursor: pointer; padding: 5px; transition: all 0.3s ease; }
.mobile-menu-btn:hover { color: var(--primary-cyan); transform: scale(1.1); }

.nav-links-mobile { display: none; position: fixed; top: 85px; left: 50%; transform: translateX(-50%) translateY(-10px); width: 95%; max-height: 80vh; overflow-y: auto; background: var(--menu-bg); padding: 20px; flex-direction: column; border: 1px solid var(--nav-border); border-radius: 20px; z-index: 4999; opacity: 0; transition: all 0.4s ease; box-shadow: 0 20px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(99, 102, 241, 0.1); backdrop-filter: blur(20px); }
.nav-links-mobile.show { display: flex; transform: translateX(-50%) translateY(0); opacity: 1; }

.nav-links-mobile a { color: var(--menu-text); text-decoration: none; padding: 15px; border-bottom: 1px solid var(--glass-border); font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.nav-links-mobile a::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary-cyan), transparent); transition: width 0.3s ease; }
.nav-links-mobile a:hover::before { width: 4px; }
.nav-links-mobile a:hover { padding-left: 20px; color: var(--primary-cyan); background: var(--glass-surface); }
.nav-links-mobile a i { width: 25px; text-align: center; color: var(--primary-cyan); transition: all 0.3s ease; }
.nav-links-mobile a:hover i { transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 8px var(--primary-cyan)); }

.mobile-dropdown-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 15px; border-bottom: 1px solid var(--glass-border); color: var(--menu-text); font-size: 1.05rem; font-weight: 600; transition: all 0.3s ease; }
.mobile-dropdown-header:hover { background: var(--glass-surface); color: var(--primary-cyan); }
.mobile-dropdown-header i:first-child { width: 25px; text-align: center; color: var(--primary-cyan); margin-right: 12px; transition: all 0.3s ease; }
.mobile-dropdown-header:hover i:first-child { transform: scale(1.2); filter: drop-shadow(0 0 8px var(--primary-cyan)); }

.mobile-dropdown-content { display: none; background: var(--glass-surface); padding: 5px 0 5px 15px; border-radius: 10px; margin-top: 5px; animation: mobileDropSlide 0.3s ease; }
@keyframes mobileDropSlide { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }
.mobile-dropdown-content.show { display: flex; flex-direction: column; }
.mobile-dropdown-content a { border-bottom: none; font-size: 0.95rem; color: var(--text-muted); padding: 12px; }
.mobile-dropdown-content a:hover { color: var(--primary-cyan); padding-left: 18px; }

.mobile-socials { display: flex; gap: 15px; justify-content: center; margin-top: 25px; }
.mobile-socials a { border: none; padding: 0; color: var(--text-muted); font-size: 1.3rem; width: auto; transition: all 0.3s ease; }
.mobile-socials a:hover { color: var(--primary-cyan); transform: translateY(-3px) scale(1.2); filter: drop-shadow(0 0 10px var(--primary-cyan)); }

     /* HERO SECTION */
#hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 100px 20px 60px; }
.hero-title { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 1.1; margin-bottom: 25px; font-weight: 800; color: var(--text-main); animation: heroTitleFloat 3s ease-in-out infinite; }
@keyframes heroTitleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-subtitle { font-size: clamp(1rem, 2vw, 1.3rem); color: var(--text-muted); margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; text-align: left; }

/* MODERN CARD DESIGNS & PARTICLES */
.glass-card { background: var(--glass-surface); border: 1px solid var(--glass-border); padding: 30px; border-radius: 24px; position: relative; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; text-align: center; height: 100%; }
.glass-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#00f3ff 1px, transparent 1px); background-size: 20px 20px; opacity: 0.05; mask-image: linear-gradient(to bottom, black, transparent); transition: 0.3s; }
.glass-card::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, var(--primary-cyan), var(--primary-magenta)); border-radius: 24px; opacity: 0; filter: blur(15px); transition: opacity 0.4s ease; z-index: -2; }
.glass-card:hover::before { opacity: 0.15; background-size: 24px 24px; }
.glass-card:hover::after { opacity: 0.3; }
.glass-card:hover { transform: translateY(-10px) scale(1.02); border-color: var(--primary-cyan); box-shadow: 0 10px 30px rgba(0, 243, 255, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.05); }
body.light-mode .glass-card:hover { box-shadow: 0 10px 30px rgba(0, 122, 255, 0.15); }
.glass-card h3 { font-size: 1.4rem; margin-bottom: 10px; color: var(--text-main); font-weight: 700; transition: all 0.3s ease; }
.glass-card:hover h3 { color: var(--primary-cyan); text-shadow: 0 0 10px rgba(0, 243, 255, 0.4); transform: scale(1.05); }
.glass-card p { color: var(--text-muted); line-height: 1.5; font-size: 0.95rem; }

.card-image { width: 70px; height: 70px; object-fit: contain; margin: 0 auto 20px auto; display: block; border-radius: 12px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.glass-card:hover .card-image { transform: scale(1.15) rotate(5deg); filter: drop-shadow(0 0 15px var(--primary-cyan)); }

.icon-box { width: 60px; height: 60px; background: rgba(0, 243, 255, 0.05); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--primary-cyan); margin: 0 auto 20px auto; font-size: 24px; border: 1px solid var(--glass-border); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative; }
.icon-box::before { content: ''; position: absolute; inset: 0; background: var(--primary-cyan); border-radius: 16px; opacity: 0; transition: opacity 0.4s ease; }
body.light-mode .icon-box { background: rgba(0, 122, 255, 0.08); }
.glass-card:hover .icon-box { background: var(--primary-cyan); color: #fff; transform: rotateY(180deg) scale(1.1); box-shadow: 0 0 20px var(--primary-cyan); }
.glass-card:hover .icon-box::before { opacity: 1; }

/* GRIDS & LAYOUTS */
section { padding: 50px 0; position: relative; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 10px; position: relative; display: inline-block; }
.section-header h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, var(--primary-cyan), var(--primary-magenta)); transition: width 0.4s ease; }
.section-header:hover h2::after { width: 100%; }

/* Why Choose: 4 PC */
.why-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }

/* Plans: 5 PC, 2 Mobile */
.plans-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.plan-card { background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 20px; padding: 25px 15px; text-align: center; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.plan-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 10%, rgba(188, 19, 254, 0.1), transparent 60%); opacity: 0.4; transition: all 0.3s ease; }
.plan-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, var(--primary-cyan), transparent 30%); opacity: 0; transition: opacity 0.4s ease; animation: planRotate 4s linear infinite; z-index: -2; }
@keyframes planRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.plan-card:hover::before { opacity: 0.7; transform: scale(1.1); }
.plan-card:hover::after { opacity: 0.2; }
.plan-card:hover { transform: translateY(-10px) scale(1.03); border-color: var(--primary-purple); box-shadow: 0 0 25px rgba(188, 19, 254, 0.2), inset 0 0 10px rgba(188, 19, 254, 0.1); }
.plan-card h3 { font-size: 1.1rem; color: var(--primary-cyan); margin-bottom: 10px; font-family: var(--font-tech); text-transform: uppercase; transition: all 0.3s ease; }
.plan-card:hover h3 { transform: scale(1.1); text-shadow: 0 0 10px rgba(188, 19, 254, 0.5); }
.plan-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 5px; }

/* Daily Growth: 3 PC */
.daily-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* Stats: 4 PC, 2 Mobile */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat-box { background: var(--glass-surface); border: 1px solid var(--glass-border); padding: 30px; border-radius: 20px; text-align: center; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative; overflow: hidden; }
.stat-box::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, var(--primary-cyan), var(--primary-magenta)); border-radius: 20px; opacity: 0; filter: blur(10px); transition: opacity 0.4s ease; z-index: -1; }
.stat-box:hover { border-color: var(--primary-cyan); transform: translateY(-8px) scale(1.05); box-shadow: 0 0 30px rgba(0, 243, 255, 0.3); }
.stat-box:hover::before { opacity: 0.4; }
.counter { font-size: 2.5rem; font-weight: 700; color: var(--text-main); font-family: var(--font-tech); transition: all 0.3s ease; }
.stat-box:hover .counter { color: var(--primary-cyan); text-shadow: 0 0 15px rgba(0, 243, 255, 0.5); transform: scale(1.1); }

/* Video Container */
.video-wrapper { max-width: 900px; margin: 0 auto; }
.video-container-styled { border-radius: 24px; overflow: hidden; border: 1px solid var(--glass-border); position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.3); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.video-container-styled::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 243, 255, 0.1), rgba(188, 19, 254, 0.1)); opacity: 0; transition: opacity 0.4s ease; z-index: 1; pointer-events: none; }
body.light-mode .video-container-styled { box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.video-container-styled:hover { border-color: var(--primary-cyan); box-shadow: 0 25px 60px rgba(0, 243, 255, 0.4); transform: translateY(-5px) scale(1.02); }
.video-container-styled:hover::before { opacity: 1; }
.middle-video { height: 350px; object-fit: cover; width: 100%; transition: transform 0.4s ease; }
.video-container-styled:hover .middle-video { transform: scale(1.05); }
.middle-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; z-index: 2; padding: 20px; }

       /* Roadmap */
.roadmap-flex { display: flex; gap: 50px; align-items: center; justify-content: center; }
.roadmap-list { flex: 1; }

.timeline { position: relative; padding-left: 20px; list-style: none; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 2px; background: linear-gradient(to bottom, var(--primary-cyan), var(--primary-purple)); box-shadow: 0 0 10px rgba(0, 243, 255, 0.3); }
.timeline li { position: relative; margin-bottom: 30px; padding: 20px 25px; background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 12px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); overflow: hidden; }
.timeline li::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 243, 255, 0.05), rgba(147, 51, 234, 0.05)); opacity: 0; transition: opacity 0.4s ease; z-index: -1; }
.timeline li::before { content: ''; position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--primary-cyan); border: 3px solid var(--bg-void); box-shadow: 0 0 15px var(--primary-cyan); transition: all 0.4s ease; }
.timeline li:hover { transform: translateX(15px) scale(1.02); border-color: var(--primary-cyan); box-shadow: 0 5px 30px rgba(0, 243, 255, 0.25), inset 0 0 20px rgba(0, 243, 255, 0.1); }
.timeline li:hover::after { opacity: 1; }
.timeline li:hover::before { width: 18px; height: 18px; box-shadow: 0 0 25px var(--primary-cyan), 0 0 40px var(--primary-cyan); background: linear-gradient(135deg, var(--primary-cyan), var(--primary-magenta)); }
.timeline li span { display: block; font-family: var(--font-tech); color: var(--primary-purple); font-weight: 700; font-size: 1.1rem; margin-bottom: 5px; transition: all 0.3s ease; text-shadow: 0 0 0 transparent; }
.timeline li:hover span { color: var(--primary-cyan); text-shadow: 0 0 10px rgba(0, 243, 255, 0.5); transform: translateX(5px); }
.roadmap-video { flex: 1; max-width: 500px; margin: 0 auto; }

/* FAQ */
.faq-grid-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.faq-video-container { width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); position: relative; transition: all 0.4s ease; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); }
.faq-video-container::before { content: ''; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(0, 243, 255, 0.1), rgba(147, 51, 234, 0.1)); opacity: 0; transition: opacity 0.4s ease; z-index: 1; pointer-events: none; }
.faq-video-container:hover { border-color: var(--primary-cyan); box-shadow: 0 10px 40px rgba(0, 243, 255, 0.3); transform: translateY(-5px); }
.faq-video-container:hover::before { opacity: 1; }
.faq-video-container video { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.faq-video-container:hover video { transform: scale(1.05); }
.faq-items { display: flex; flex-direction: column; gap: 15px; }
.faq-items .glass-card { padding: 15px 20px !important; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative; overflow: hidden; }
.faq-items .glass-card::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: linear-gradient(to bottom, var(--primary-cyan), var(--primary-magenta)); transition: height 0.4s ease; }
.faq-items .glass-card:hover { transform: translateX(10px) scale(1.02); border-color: var(--primary-cyan); box-shadow: 0 5px 25px rgba(0, 243, 255, 0.2); }
.faq-items .glass-card:hover::before { height: 100%; }

/* Trusted Partners */
.marquee-section { padding: 40px 0; background: var(--glass-surface); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); overflow: hidden; white-space: nowrap; position: relative; }
.marquee-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-cyan), var(--primary-magenta), transparent); opacity: 0.5; }
.marquee-track { display: inline-flex; gap: 60px; width: max-content; animation: marquee-scroll 30s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-track img { height: 50px; opacity: 0.7; filter: grayscale(100%) brightness(0.8); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); cursor: pointer; }
.marquee-track img:hover { opacity: 1; filter: grayscale(0%) brightness(1.2); transform: scale(1.2) translateY(-5px); box-shadow: 0 10px 30px rgba(0, 243, 255, 0.3); }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        /* FAQ */
        .faq-grid-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
        .faq-video-container { width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); }
        .faq-video-container video { width: 100%; height: auto; display: block; }
        .faq-items { display: flex; flex-direction: column; gap: 15px; }
        .faq-items .glass-card { padding: 15px 20px !important; }

        /* Trusted Partners */
        .marquee-section { padding: 40px 0; background: var(--glass-surface); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); overflow: hidden; white-space: nowrap; }
        .marquee-track { display: inline-flex; gap: 60px; width: max-content; animation: marquee-scroll 30s linear infinite; }
        .marquee-track img { height: 50px; opacity: 0.7; filter: grayscale(100%); transition: 0.3s; }
        .marquee-track img:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.1); }
        @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* Footer */
footer { background: var(--menu-bg); border-top: 1px solid var(--glass-border); padding: 80px 0 30px; font-size: 0.95rem; transition: background 0.3s; position: relative; overflow: hidden; }
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-cyan), var(--primary-magenta), transparent); opacity: 0.5; }

/* FOOTER GRID SYSTEM (PC: 4 Cols, Mobile: 2 Cols/Stacked) */
.footer-grid { display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr; gap: 40px; align-items: start; }
.footer-brand { text-align: left; }
.footer-brand .logo { justify-content: flex-start; transition: transform 0.3s ease; }
.footer-brand .logo:hover { transform: scale(1.05); }

.footer-col { text-align: left; }
.footer-col h3 { color: var(--text-main); margin-bottom: 25px; font-family: var(--font-tech); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; position: relative; display: inline-block; }
.footer-col h3::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary-cyan), var(--primary-magenta)); transition: width 0.4s ease; }
.footer-col h3:hover::after { width: 100%; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { position: relative; overflow: hidden; }
.footer-col ul li::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--primary-cyan); transition: width 0.3s ease; transform: translateY(-50%); }
.footer-col ul li:hover::before { width: 15px; }
.footer-col ul li a { color: var(--text-muted); text-decoration: none; line-height: 2.2; transition: all 0.3s ease; display: block; padding-left: 0; position: relative; }
.footer-col ul li a:hover { color: var(--primary-cyan); transform: translateX(20px); text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); }

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

/* Socials: Circle Style (Aligned Left on PC) */
.footer-socials-row { display: flex; gap: 10px; justify-content: flex-start; margin-top: 20px; }
.footer-social-btn { width: 45px; height: 45px; border-radius: 50%; background: var(--glass-surface); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.2rem; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); text-decoration: none; position: relative; overflow: hidden; }
.footer-social-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, var(--primary-cyan), var(--primary-magenta)); opacity: 0; transition: opacity 0.4s ease; z-index: -1; }
.footer-social-btn:hover { background: transparent; color: #fff; transform: translateY(-5px) scale(1.1); box-shadow: 0 5px 25px rgba(0, 255, 255, 0.4); border-color: var(--primary-cyan); }
.footer-social-btn:hover::before { opacity: 1; }
.footer-social-btn:active { transform: translateY(-3px) scale(1.05); }

        /* -----------------------
           STRICT RESPONSIVE RULES (MOBILE)
           ----------------------- */
        @media (max-width: 1024px) {
            .nav-center { display: none; }
            .desktop-btns { display: none; }
            .mobile-actions { display: flex; }
            .mobile-menu-btn { display: block; }
            nav { top: 10px; width: 95%; padding: 10px 15px; }
            
            /* Theme Toggle Fixed to Circle with Black BG on Mobile */
            .theme-toggle {
                width: 36px !important;
                height: 36px !important;
                border-radius: 50% !important;
                padding: 0 !important;
                font-size: 1rem !important;
                border: 1px solid #ffffff !important; /* White Border */
                background: #000000 !important;       /* Black Background */
                color: #ffffff !important;
                display: flex; align-items: center; justify-content: center;
            }
            
            /* Sign In Button: Modern Pill, Height same as Toggle, Text Visible */
            .mobile-sign-in {
                width: auto !important;
                height: 36px !important;
                border-radius: 50px !important;
                padding: 0 12px !important;
                display: flex;
                align-items: center;
                gap: 6px;
                justify-content: center;
            }
            .mobile-sign-in span { 
                display: inline-block !important; 
                font-size: 0.75rem;
                font-weight: 700;
            }
            .mobile-sign-in i { font-size: 1rem; }

            .why-choose-grid { grid-template-columns: repeat(2, 1fr); }
            .daily-grid { grid-template-columns: repeat(2, 1fr); }
            
            /* Footer Responsive: Restore "Perfect" Mobile Layout */
            .footer-grid {
                grid-template-columns: 1fr 1fr; /* Links side-by-side */
                gap: 40px 20px;
                text-align: center;
            }
            .footer-brand {
                grid-column: 1 / -1; /* Full width top */
                text-align: center;
                max-width: 600px;
                margin: 0 auto;
            }
            .footer-brand .logo { justify-content: center; }
            
            .footer-contact {
                grid-column: 1 / -1; /* Full width bottom */
                text-align: center;
            }
            .footer-col { text-align: center; }
            .footer-socials-row { justify-content: center; }
        }

        @media (max-width: 900px) {
            .plans-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px; }
            .faq-grid-layout { grid-template-columns: 1fr; }
            .roadmap-flex { flex-direction: column; }
            .middle-video { height: 250px; }
            .roadmap-video { max-width: 100%; }
            
            .plan-card { padding: 15px 10px; }
            .plan-card h3 { font-size: 0.9rem; }
            .plan-card p { font-size: 0.75rem; }
            
            .hero-title { font-size: 2.8rem; }
            .marquee-track { gap: 30px; }
            .marquee-track img { height: 35px; }
            
            /* Resize Logo Text on Mobile */
            .logo { font-size: 1.4rem; } 
            .brand-logo { height: 35px; }
        }

        @media (max-width: 600px) {
            .why-choose-grid { grid-template-columns: 1fr; gap: 20px; }
            .daily-grid { grid-template-columns: 1fr; gap: 20px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px; }
            .stat-box { padding: 20px 10px; }
            .stat-box i { font-size: 2rem !important; }
            .counter { font-size: 1.5rem; }
            
            .hero-title { font-size: 2.5rem; }
            .middle-overlay h2 { font-size: 1.4rem; }
            
            nav { width: 96%; padding: 8px 12px; }
            .section-header h2 { font-size: 2rem; }
        }

        .reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }