:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden;width:100%}:root{--primary-color: #6366f1;--primary-dark: #4f46e5;--secondary-color: #ec4899;--text-dark: #1f2937;--text-light: #6b7280;--background: #ffffff;--background-light: #f9fafb;--border-color: #e5e7eb;--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text-dark);line-height:1.6;background-color:var(--background);overflow-x:hidden;width:100%}.homepage{min-height:100vh;background-color:#f5f0e6;background-image:repeating-linear-gradient(0deg,transparent,transparent 25px,rgba(139,111,71,.03) 25px,rgba(139,111,71,.03) 26px);position:relative}.navbar{position:fixed;top:0;width:100%;background:linear-gradient(to bottom,#d4a574,#c19660);background-image:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none"/><path d="M0 50 Q25 40 50 50 T100 50" stroke="rgba(139,111,71,0.1)" stroke-width="2" fill="none"/><path d="M0 30 Q25 20 50 30 T100 30" stroke="rgba(139,111,71,0.08)" stroke-width="1.5" fill="none"/><path d="M0 70 Q25 60 50 70 T100 70" stroke="rgba(139,111,71,0.08)" stroke-width="1.5" fill="none"/></svg>'),linear-gradient(to bottom,#d4a574,#c19660);background-size:200px 100px,100%;z-index:1000;box-shadow:0 4px 15px #0000004d;border-bottom:4px solid #8b6f47}.nav-container{max-width:1200px;margin:0 auto;padding:0rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo a{text-decoration:none;display:inline-block}.logo-image{height:100px;width:auto;display:block;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.3));transition:transform .3s ease}.logo-image:hover{transform:scale(1.05) rotate(-2deg)}.nav-links{display:flex;align-items:center;gap:2rem}.nav-links a{text-decoration:none;color:#2d1810;font-weight:700;transition:all .3s;font-family:Comic Sans MS,cursive;padding:10px 20px;background:#ffeb3b;border:3px solid #2d1810;box-shadow:4px 4px #2d1810;transform:rotate(-2deg);display:inline-block;position:relative}.nav-links a:hover{transform:rotate(0) translateY(-2px);box-shadow:5px 5px #2d1810}.btn-primary{background:var(--primary-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:all .3s;font-size:1rem}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--hover-shadow)}.btn-secondary{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color);padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:all .3s;font-size:1rem}.btn-secondary:hover{background:var(--primary-color);color:#fff;transform:translateY(-2px);box-shadow:var(--hover-shadow)}.btn-large{padding:1rem 2rem;font-size:1.125rem}.hero{margin-top:80px;padding:8rem 2rem 10rem;text-align:center;position:relative;overflow:hidden;background:#2d5016}.hero:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><text x="120" y="85" font-family="cursive" font-size="24" fill="rgba(255,255,255,0.14)" transform="rotate(-7 120 85)">E=mc²</text><text x="780" y="140" font-family="Arial" font-size="18" fill="rgba(255,255,255,0.11)" transform="rotate(12 780 140)" style="text-decoration: underline">∫₂⁵ f(x)dx</text><text x="400" y="240" font-family="serif" font-size="28" fill="rgba(255,255,255,0.1)" transform="rotate(-3 400 240)">π ≈ 3.14159...</text><text x="920" y="560" font-family="Arial" font-size="16" fill="rgba(255,255,255,0.12)" transform="rotate(9 920 560)">√16 = 4</text><text x="650" y="440" font-family="cursive" font-size="20" fill="rgba(255,255,255,0.11)" transform="rotate(-11 650 440)">a²+b²=c²</text><text x="180" y="680" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.09)" transform="rotate(5 180 680)">2x + 5 = 13</text><text x="550" y="320" font-family="serif" font-size="22" fill="rgba(255,255,255,0.12)" transform="rotate(-8 550 320)">Δ = b²-4ac</text><text x="1050" y="200" font-family="Arial" font-size="17" fill="rgba(255,255,255,0.1)" transform="rotate(15 1050 200)">sin²+cos²=1</text><text x="300" y="450" font-family="cursive" font-size="16" fill="rgba(255,255,255,0.08)" transform="rotate(-2 300 450)">F=ma</text><circle cx="850" cy="380" r="25" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1.5" stroke-dasharray="5,5"/><circle cx="200" cy="180" r="15" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="2"/><path d="M50 350 Q150 320 250 350 T350 350" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="1.5"/><line x1="700" y1="150" x2="820" y2="130" stroke="rgba(255,255,255,0.06)" stroke-width="2"/><path d="M980 480 L1010 480 L995 460 Z" fill="rgba(255,255,255,0.07)"/><rect x="450" y="600" width="40" height="30" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1.5" transform="rotate(10 470 615)"/><text x="60" y="30" font-family="Arial" font-size="12" fill="rgba(255,255,255,0.06)" style="text-decoration: line-through">WRONG!</text><text x="750" y="750" font-family="serif" font-size="36" fill="rgba(255,255,255,0.05)" transform="rotate(45 750 750)">∞</text><text x="950" y="780" font-family="Arial" font-size="20" fill="rgba(255,255,255,0.08)" transform="rotate(-20 950 780)">θ = 45°</text><path d="M320 150 C350 130, 390 130, 420 150" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="2"/><text x="1100" y="450" font-family="cursive" font-size="14" fill="rgba(255,255,255,0.07)" transform="rotate(30 1100 450)">x→∞</text><text x="50" y="20" font-family="cursive" font-size="22" fill="rgba(255,255,255,0.1)" transform="rotate(5 50 20)">2+2=5?</text><text x="500" y="30" font-family="Arial" font-size="16" fill="rgba(255,255,255,0.09)" transform="rotate(-10 500 30)">log(xy)=log x + log y</text><text x="900" y="40" font-family="serif" font-size="18" fill="rgba(255,255,255,0.08)" transform="rotate(8 900 40)">i² = -1</text><text x="200" y="780" font-family="cursive" font-size="20" fill="rgba(255,255,255,0.11)" transform="rotate(-5 200 780)">V = πr²h</text><text x="600" y="770" font-family="Arial" font-size="15" fill="rgba(255,255,255,0.09)" transform="rotate(12 600 770)">PV = nRT</text><text x="1000" y="750" font-family="serif" font-size="17" fill="rgba(255,255,255,0.1)" transform="rotate(-8 1000 750)">e^(iπ)+1=0</text></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><text x="250" y="150" font-family="Arial" font-size="19" fill="rgba(255,255,255,0.09)" transform="rotate(8 250 150)">dy/dx</text><text x="600" y="80" font-family="serif" font-size="16" fill="rgba(255,255,255,0.07)" transform="rotate(-15 600 80)">σ = √σ²</text><circle cx="150" cy="500" r="20" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1.5"/><text x="480" y="380" font-family="cursive" font-size="13" fill="rgba(255,255,255,0.08)" transform="rotate(3 480 380)">n!</text><line x1="900" y1="300" x2="950" y2="280" stroke="rgba(255,255,255,0.05)" stroke-width="1.5"/><text x="350" y="550" font-family="Arial" font-size="25" fill="rgba(255,255,255,0.06)" transform="rotate(-6 350 550)">H₂O</text><polygon points="800,500 820,530 780,530" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/><text x="1000" y="100" font-family="serif" font-size="15" fill="rgba(255,255,255,0.07)" transform="rotate(20 1000 100)">pH=7</text><text x="150" y="50" font-family="cursive" font-size="18" fill="rgba(255,255,255,0.1)" transform="rotate(-12 150 50)">x² - 4x + 4 = 0</text><text x="800" y="20" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.08)" transform="rotate(6 800 20)">sin(2θ) = 2sinθcosθ</text><text x="400" y="750" font-family="serif" font-size="21" fill="rgba(255,255,255,0.09)" transform="rotate(-4 400 750)">∑(1/n²) = π²/6</text><text x="700" y="780" font-family="cursive" font-size="16" fill="rgba(255,255,255,0.07)" transform="rotate(10 700 780)">lim(1 + 1/n)ⁿ = e</text><text x="50" y="400" font-family="Arial" font-size="19" fill="rgba(255,255,255,0.11)" transform="rotate(7 50 400)">∇²φ = 0</text><path d="M100 100 Q200 80 300 100 T400 100" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1.5"/><circle cx="1050" cy="650" r="18" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="1.5" stroke-dasharray="3,3"/><text x="300" y="30" font-family="serif" font-size="15" fill="rgba(255,255,255,0.08)" transform="rotate(-7 300 30)">v = u + at</text></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><text x="80" y="200" font-family="cursive" font-size="17" fill="rgba(255,255,255,0.1)" transform="rotate(15 80 200)">∂u/∂t</text><text x="1100" y="300" font-family="Arial" font-size="20" fill="rgba(255,255,255,0.09)" transform="rotate(-9 1100 300)">cos²θ + sin²θ = 1</text><rect x="200" y="50" width="50" height="35" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1" transform="rotate(-5 225 67)"/><text x="450" y="500" font-family="serif" font-size="16" fill="rgba(255,255,255,0.08)" transform="rotate(4 450 500)">√(a² + b²)</text><line x1="50" y1="700" x2="150" y2="680" stroke="rgba(255,255,255,0.06)" stroke-width="2"/><text x="850" y="100" font-family="cursive" font-size="22" fill="rgba(255,255,255,0.11)" transform="rotate(-6 850 100)">∫ sin x dx = -cos x + C</text><circle cx="600" cy="300" r="30" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="2"/><text x="20" y="50" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.08)" transform="rotate(8 20 50)">(a+b)² = a²+2ab+b²</text><text x="1050" y="20" font-family="serif" font-size="18" fill="rgba(255,255,255,0.09)" transform="rotate(-11 1050 20)">tan θ = sin θ/cos θ</text><path d="M800 700 C850 680, 900 680, 950 700" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1.5"/><text x="300" y="780" font-family="cursive" font-size="15" fill="rgba(255,255,255,0.07)" transform="rotate(3 300 780)">x = (-b ± √Δ)/2a</text></svg>');background-size:100% 100%,100% 100%,100% 100%;background-position:0 0,0 0,0 0;pointer-events:none}.hero-content{max-width:800px;margin:0 auto 4rem;position:relative;z-index:10}.hero-badge{display:inline-flex;align-items:center;background:#ffeb3b;padding:10px 20px;margin-bottom:20px;box-shadow:2px 2px 5px #0003;transform:rotate(-2deg);position:relative}.hero-badge:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:35px;height:20px;background:linear-gradient(to bottom,#e0e0e0,silver);clip-path:polygon(20% 0%,80% 0%,100% 100%,0% 100%);box-shadow:0 2px 3px #0003;border:1px solid #999}.badge-text{color:#1a1a1a;font-size:14px;font-weight:600;letter-spacing:.5px;font-family:Comic Sans MS,cursive}.hero-title{font-size:4rem;line-height:1.2;margin-bottom:2rem;color:#fff;font-weight:800;text-shadow:2px 2px 4px rgba(0,0,0,.3);font-family:Courier New,monospace;position:relative}.highlight{color:#fbbf24;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:8px;text-shadow:2px 2px 4px rgba(0,0,0,.3);-webkit-text-fill-color:unset;background:none}.hero-subtitle{font-size:1.5rem;color:#ffffffe6;line-height:1.8;font-weight:400;font-family:Courier New,monospace;margin-bottom:2rem;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.hero-visual{max-width:1000px;margin:0 auto;position:relative;z-index:10}.dashboard-preview{background:#f5f5f5;border:3px solid #8b6f47;border-radius:0;position:relative;box-shadow:5px 5px 15px #0000004d,inset 0 0 20px #0000000d;margin-top:40px;overflow:hidden;transform:perspective(1000px) rotateX(2deg)}.dashboard-header{background:linear-gradient(to bottom,#d4a574,#c19660);background-image:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none"/><path d="M0 50 Q25 40 50 50 T100 50" stroke="rgba(139,111,71,0.1)" stroke-width="2" fill="none"/><path d="M0 30 Q25 20 50 30 T100 30" stroke="rgba(139,111,71,0.08)" stroke-width="1.5" fill="none"/><path d="M0 70 Q25 60 50 70 T100 70" stroke="rgba(139,111,71,0.08)" stroke-width="1.5" fill="none"/></svg>'),linear-gradient(to bottom,#d4a574,#c19660);background-size:200px 100px,100%;padding:14px 20px;display:flex;align-items:center;gap:12px;position:relative;z-index:2;box-shadow:0 3px 8px #0000004d;border-bottom:3px solid #8b6f47}.window-controls{display:flex;gap:.5rem}.control{width:16px;height:16px;border-radius:50%;display:block;border:2px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 2px #0003}.control.red{background:#ff5f57;border-color:#e74c3c}.control.yellow{background:#ffbd2e;border-color:#f39c12}.control.green{background:#28ca42;border-color:#27ae60}.dashboard-title{color:#2d1810;font-size:16px;font-weight:700;margin-left:auto;margin-right:auto;letter-spacing:1px;font-family:Comic Sans MS,cursive;text-shadow:1px 1px 0 rgba(139,111,71,.3);transform:rotate(-1deg);display:inline-block}.dashboard-content{display:flex;height:480px;position:relative;z-index:2}.mobile-menu-button{display:none;padding:12px 16px;background:#fff3cd;border-bottom:3px solid #333;cursor:pointer;font-family:Comic Sans MS,cursive;font-weight:600;font-size:.9rem;align-items:center;gap:10px}.menu-icon{font-size:1.2rem;color:#333}.menu-text{color:#333}.mobile-menu-dropdown{display:none;position:absolute;top:48px;left:0;right:0;background:#fff;border:3px solid #333;border-top:none;z-index:100;box-shadow:0 4px 6px #0000001a}.mobile-menu-item{padding:12px 16px;border-bottom:2px solid #eee;cursor:pointer;font-family:Comic Sans MS,cursive;font-weight:600;transition:all .3s;background:#fff}.mobile-menu-item:last-child{border-bottom:none}.mobile-menu-item:hover{background:#f0f0f0}.mobile-menu-item.active{background:#fff3cd;border-bottom-color:#333}.sidebar{width:200px;background:#e8dcc0;background-image:repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(139,111,71,.05) 20px,rgba(139,111,71,.05) 21px);padding:20px;border-right:3px solid #8b6f47;position:relative}.sidebar:before{content:"📐";position:absolute;top:10px;right:10px;font-size:20px;opacity:.2}.sidebar-item{padding:12px 16px;margin-bottom:8px;cursor:pointer;transition:all .3s;font-size:14px;color:#1a1a1a;background:#ffeb3b;box-shadow:2px 2px 4px #0000001a;transform:rotate(-1deg);position:relative;font-family:Comic Sans MS,cursive;font-weight:500}.sidebar-item:nth-child(2n){background:#ff9800;transform:rotate(1deg);color:#1a1a1a}.sidebar-item:nth-child(3){background:#4fc3f7;color:#1a1a1a}.sidebar-item:nth-child(4){background:#81c784;transform:rotate(-1deg);color:#1a1a1a}.sidebar-item:nth-child(5){background:#f06292;color:#1a1a1a}.sidebar-item:hover{transform:scale(1.05) rotate(0);z-index:10;box-shadow:4px 4px 8px #0003}.sidebar-item.active{background:#1e40af;color:#fff;font-weight:600;transform:scale(1.1) rotate(0);box-shadow:4px 4px 10px #0000004d}.main-content{flex:1;padding:30px;background:#fff;background-image:repeating-linear-gradient(0deg,transparent,transparent 24px,#e5e5e5 24px,#e5e5e5 25px);overflow-y:auto;position:relative}.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.course-card{background:#fff3cd;padding:20px;display:flex;gap:16px;transition:all .3s;position:relative;align-items:center;box-shadow:3px 3px #333;transform:rotate(-1deg);margin-bottom:12px;border:3px solid #333;cursor:pointer}.course-card:nth-child(2n){background:#e3f2fd;transform:rotate(1deg)}.course-card:nth-child(3){background:#f3e5f5;transform:rotate(-.5deg)}.course-card:before{content:"";position:absolute;top:-8px;right:15px;width:30px;height:30px;background:radial-gradient(circle at 30% 30%,#ff6b6b,#dc2626);border-radius:50%;box-shadow:1px 1px 3px #0000004d,inset -1px -1px 2px #0003;border:1px solid #b91c1c}.course-card:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 5px #333;z-index:10}.course-header{width:60px;height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#fff;position:relative;box-shadow:2px 2px 4px #0003;flex-shrink:0;font-family:Comic Sans MS,cursive}.course-header.purple{background:#8b7bc7}.course-header.pink{background:#e91e63}.course-header.blue{background:#2196f3}.course-info{flex:1}.course-name{font-weight:600;color:#1a1a1a;margin-bottom:.5rem;font-size:.875rem;font-family:Comic Sans MS,cursive}.course-progress{display:flex;align-items:center;gap:.5rem}.progress-bar{flex:1;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px #0000001a}.progress-fill{height:100%;background:repeating-linear-gradient(90deg,#4caf50 0px 10px,#66bb6a 10px 20px);transition:width .3s;box-shadow:inset 0 1px 2px #0003}.progress-text{font-size:.75rem;color:#4a4a4a;white-space:nowrap;font-weight:500}.floating-elements{position:absolute;inset:0;pointer-events:none;z-index:1;display:none}.float-icon{display:none}.icon-1{top:10%;left:-5%;animation-delay:0s}.icon-2{top:20%;right:-5%;animation-delay:5s}.icon-3{bottom:20%;left:-3%;animation-delay:10s}.icon-4{bottom:10%;right:-3%;animation-delay:15s}@keyframes float-rotate{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(90deg)}50%{transform:translateY(0) rotate(180deg)}75%{transform:translateY(20px) rotate(270deg)}}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:3px dotted #666}.section-header h3{font-size:1.25rem;color:var(--text-dark);margin:0}.analytics-section .section-header{border-bottom:none;margin-bottom:2rem}.analytics-section .section-header h3{background:#fff3cd;display:inline-block;padding:10px 20px;border:3px solid #333;box-shadow:3px 3px #333;transform:rotate(-2deg);font-family:Comic Sans MS,cursive;font-size:1.5rem}.add-btn{background:#ffeb3b;color:#333;border:2px solid #333;padding:.5rem 1rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:2px 2px #333;font-family:Comic Sans MS,cursive;transform:rotate(-1deg)}.add-btn:hover{transform:rotate(0) translateY(-2px);box-shadow:3px 3px #333}.plans-list{display:flex;flex-direction:column;gap:1rem}.plan-item{background:#fff3cd;padding:1.25rem;border:3px solid #333;box-shadow:3px 3px #333;display:flex;gap:1rem;transition:all .3s;cursor:pointer;position:relative;transform:rotate(-1deg);margin-bottom:1rem}.plan-item:nth-child(2n){background:#e3f2fd;transform:rotate(1deg)}.plan-item:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 5px #333;z-index:10}.plan-icon{font-size:2rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid #333;border-radius:8px;box-shadow:3px 3px #333;position:relative}.plan-icon:after{content:"";position:absolute;top:-5px;right:-5px;width:15px;height:15px;background:#f9ca24;border-radius:50%;border:2px solid #333}.plan-details h4{margin:0 0 .25rem;font-size:1rem;color:#1a1a1a;font-weight:600}.plan-details p{margin:0 0 .5rem;font-size:.875rem;color:#4a4a4a}.task-count{font-size:.75rem;color:#333;font-weight:600;background:#4ecdc4;padding:2px 8px;border-radius:12px;border:2px solid #333}.study-tabs{display:flex;gap:10px;margin-bottom:1.5rem;border-bottom:3px solid #e8dcc0;padding-bottom:10px}.tab-btn{padding:8px 16px;background:#fff3cd;border:2px solid #333;box-shadow:2px 2px #333;font-family:Comic Sans MS,cursive;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;transform:rotate(-1deg)}.tab-btn:hover{transform:rotate(0) translateY(-2px);box-shadow:3px 3px #333}.tab-btn.active{background:#ff9800;transform:rotate(1deg)}.study-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.study-card{background:#fff;border:3px solid #333;padding:1.5rem;text-align:center;transition:all .3s;cursor:pointer;position:relative;overflow:hidden}.study-card.flashcard-type{background:#fff3cd;box-shadow:3px 3px #333;transform:rotate(-1deg)}.study-card.quiz-type{background:#e3f2fd;box-shadow:3px 3px #333;transform:rotate(1deg)}.study-card.game-type{background:#f3e5f5;box-shadow:3px 3px #333;transform:rotate(-.5deg)}.study-card:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 5px #333;z-index:10}.study-icon{font-size:2.5rem;margin-bottom:1rem;display:flex;justify-content:center;align-items:center;height:60px}.grade-circle{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#fff;border:3px solid #dc2626;color:#dc2626;font-size:24px;font-weight:700;font-family:Courier New,monospace;transform:rotate(15deg);box-shadow:2px 2px 4px #0000001a}.study-card h4{font-size:1.125rem;margin-bottom:.5rem;color:#1a1a1a;font-weight:700;font-family:Comic Sans MS,cursive}.study-type{font-size:.75rem;color:#666;margin-bottom:1rem;text-transform:uppercase;letter-spacing:1px;font-family:Courier New,monospace}.study-stats{display:flex;flex-direction:column;gap:.75rem;align-items:center}.stat-item{font-size:.875rem;color:#4a4a4a;font-family:Comic Sans MS,cursive}.progress-bar{width:100%;height:12px;background:#e0e0e0;border:2px solid #333;box-shadow:inset 0 1px 3px #0000001a;position:relative;overflow:hidden}.progress-fill{position:absolute;left:0;top:0;height:100%;background:#4caf50;transition:width .3s ease}.grade-text{font-size:.875rem;color:#1a1a1a;font-weight:600;font-family:Comic Sans MS,cursive}.retake-btn,.play-btn{padding:6px 16px;background:#ffeb3b;border:2px solid #333;box-shadow:2px 2px #333;font-family:Comic Sans MS,cursive;font-weight:600;font-size:12px;cursor:pointer;transition:all .2s}.retake-btn:hover,.play-btn:hover{transform:translateY(-1px);box-shadow:3px 3px #333}.high-score{font-size:.875rem;color:#9c27b0;font-weight:600;font-family:Comic Sans MS,cursive}.decks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.deck-card{background:#fff;border-radius:12px;padding:1.5rem;border:2px solid #e2e8f0;text-align:center;transition:all .3s;cursor:pointer;position:relative;overflow:hidden}.deck-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.05) 0%,transparent 50%);opacity:0;transition:opacity .3s}.deck-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #3b82f626;border-color:#93c5fd}.deck-card:hover:before{opacity:1}.deck-icon{font-size:2.5rem;margin-bottom:.75rem;display:inline-block;padding:10px;background:#fff;border-radius:10px;border:2px solid #ddd;box-shadow:0 2px 4px #0000001a}.deck-card h4{margin:0 0 .25rem;font-size:1rem;color:#1a1a1a;font-weight:600}.deck-card p{margin:0 0 .75rem;font-size:.875rem;color:#4a4a4a}.deck-stats{display:flex;justify-content:center;gap:1rem;font-size:.75rem}.mastered{color:#10b981;font-weight:600}.learning{color:#f59e0b;font-weight:600}.groups-list{display:flex;flex-direction:column;gap:1rem}.group-card{background:#fff3cd;padding:1.25rem;border:3px solid #333;box-shadow:3px 3px #333;transition:all .3s;cursor:pointer;position:relative;transform:rotate(-1deg);margin-bottom:1rem}.group-card:nth-child(2n){background:#e3f2fd;transform:rotate(1deg)}.group-card:after{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#3b82f6,#06b6d4);border-radius:14px;opacity:0;transition:opacity .3s;z-index:-1}.group-card:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 5px #333;z-index:10}.group-card:hover:after{opacity:.1}.group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.group-header h4{margin:0;font-size:1rem;color:#1a1a1a;font-weight:600}.member-count{font-size:.75rem;color:#333;background:#f9ca24;padding:.25rem .75rem;border-radius:20px;font-weight:600;border:2px solid #333;box-shadow:2px 2px #333}.group-card p{margin:0 0 .75rem;font-size:.875rem;color:#4a4a4a}.group-activity{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#4a4a4a}.activity-dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb}.activity-dot.active{background:#10b981}.stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.stat-card{background:#fff3cd;padding:2rem;border:3px solid #333;box-shadow:4px 4px #333;transition:all .3s;position:relative;overflow:hidden;transform:rotate(-2deg)}.stat-card:nth-child(2n){background:#e3f2fd;transform:rotate(2deg)}.stat-card:nth-child(3){background:#fde2e4;transform:rotate(-1deg)}.stat-card:nth-child(4){background:#e2f0cb;transform:rotate(1deg)}.stat-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#3b82f6,#06b6d4);transform:scaleX(0);transform-origin:left;transition:transform .3s}.stat-card:hover{transform:rotate(0) translateY(-3px);box-shadow:5px 5px #333;z-index:10}.stat-card:hover:before{transform:scaleX(1)}.stat-card h4{margin:0 0 1rem;font-size:1.1rem;color:#333;font-family:Comic Sans MS,cursive;font-weight:700;display:flex;align-items:center;gap:8px}.stat-icon{font-size:1.5rem}.stat-value{font-size:2.5rem;font-weight:900;color:#1a1a1a;margin-bottom:1rem;font-family:Comic Sans MS,cursive;text-shadow:2px 2px 0 rgba(0,0,0,.1)}.stat-chart{height:60px;display:flex;align-items:flex-end;justify-content:center;padding:10px;background:#f5f5f5;border-radius:8px;border:2px solid #ddd}.mini-bars{display:flex;gap:4px;align-items:flex-end;height:100%}.mini-bars span{width:16px;background:linear-gradient(to top,#3b82f6,#60a5fa);border-radius:2px 2px 0 0;display:block;border:2px solid #333;box-shadow:0 -1px #333;transition:all .3s}.mini-bars span:hover{transform:scaleY(1.1)}.progress-ring{width:60px;height:60px}.progress-ring svg{transform:rotate(-90deg)}.grade-display{display:flex;justify-content:center;align-items:center;height:100%}.grade-circle.large{font-size:2rem;width:60px;height:60px;line-height:56px}.card-progress{display:flex;align-items:center;justify-content:center;height:100%}.progress-text{font-family:Comic Sans MS,cursive;font-size:1rem;color:#333;font-weight:600}.detailed-analytics{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem}.analytics-card{background:#fff3cd;border:3px solid #333;box-shadow:4px 4px #333;padding:2rem;transform:rotate(-1deg);transition:all .3s;position:relative}.analytics-card:hover{transform:rotate(0) translateY(-3px);box-shadow:6px 6px #333}.analytics-card h4{font-family:Comic Sans MS,cursive;font-size:1.2rem;margin-bottom:1.5rem;color:#333;display:flex;align-items:center;gap:10px}.analytics-card .card-icon{font-size:1.5rem}.time-breakdown{display:flex;flex-direction:column;gap:1rem}.time-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#fff;border:2px solid #333;box-shadow:2px 2px #333;font-family:Comic Sans MS,cursive}.time-item .course-name{font-weight:600}.time-item .time-spent{color:#3b82f6;font-weight:700}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.achievement-badge{text-align:center;padding:1rem;background:#fff;border:2px solid #333;box-shadow:2px 2px #333;transition:all .3s;cursor:pointer}.achievement-badge:hover{transform:translateY(-2px);box-shadow:3px 3px #333}.achievement-badge .badge-icon{font-size:2rem;margin-bottom:.5rem}.achievement-badge .badge-name{font-size:.875rem;font-family:Comic Sans MS,cursive;font-weight:600}.main-content>div{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.nav-container{padding:.5rem 1rem;flex-wrap:nowrap;gap:1rem}.nav-logo{flex-shrink:0}.logo-image{height:50px}.nav-links{gap:.5rem;flex-shrink:0;margin-left:auto}.nav-links a{padding:6px 10px;font-size:.85rem;box-shadow:2px 2px #2d1810;min-width:auto;text-align:center;white-space:nowrap}.hero{padding:6rem 1rem 4rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.2rem;margin-bottom:1rem}.hero-badge{padding:8px 16px}.badge-text{font-size:12px}.dashboard-preview{margin-top:0;font-size:.75rem;overflow:visible}.sidebar{display:none}.mobile-menu-button{display:flex}.dashboard-content{min-height:500px;height:auto;flex-direction:column}.main-content{width:100%!important;padding:1rem;min-height:400px}.features-grid{grid-template-columns:1fr;gap:1.5rem}.feature-card{padding:1.5rem}.study-grid{grid-template-columns:1fr}.study-card{margin-bottom:1rem}.flashcards-section{min-height:500px}.stats-overview,.detailed-analytics{grid-template-columns:1fr}.analytics-section{min-height:600px}.course-grid,.groups-list{grid-template-columns:1fr}.about-hero{padding-top:5rem}.about-hero-content h1{font-size:2.5rem}.values-grid,.founders-grid{grid-template-columns:1fr;gap:2rem}.founder-content{padding:2rem}.footer-content{flex-direction:column;gap:2rem}.footer-section{text-align:center}.section-container{padding:3rem 1rem}.vision-section,.founders-section{padding:4rem 1rem}.floating-elements{display:none}}@media (max-width: 480px){.nav-container{padding:.5rem;max-width:100%;overflow-x:auto}.about-hero{padding-top:4rem}.logo-image{height:40px}.nav-links{gap:.25rem;display:flex;flex-shrink:0}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem;margin-bottom:.5rem}.nav-links a{padding:5px 8px;font-size:.75rem;box-shadow:2px 2px #2d1810;min-width:auto;transform:rotate(0);white-space:nowrap}.section-title{font-size:1.75rem}.dashboard-preview{font-size:.65rem;margin-top:0}.dashboard-content{min-height:450px}.sidebar{display:none}.mobile-menu-button{font-size:.8rem;padding:10px 12px}}@media (max-width: 360px){.navbar{width:100vw}.nav-container{padding:.25rem;width:100%;box-sizing:border-box}.logo-image{height:35px}.nav-links{gap:.2rem}.nav-links a{padding:4px 6px;font-size:.7rem;border:2px solid #2d1810;box-shadow:1px 1px #2d1810}}.about-page{min-height:100vh}.about-hero{padding:8rem 2rem 10rem;padding-top:calc(8rem + 80px);text-align:center;position:relative;overflow:hidden;background:#2d5016}.about-hero:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><text x="150" y="80" font-family="Comic Sans MS" font-size="26" fill="rgba(255,255,255,0.15)" transform="rotate(-5 150 80)">2+2=5</text><text x="155" y="110" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.17)" transform="rotate(-5 155 110)" style="text-decoration: line-through">4!</text><text x="820" y="160" font-family="serif" font-size="20" fill="rgba(255,255,255,0.13)" transform="rotate(8 820 160)">A B C D E F G</text><text x="430" y="350" font-family="Arial" font-size="32" fill="rgba(255,255,255,0.12)" transform="rotate(-10 430 350)">πr² = Area</text><text x="200" y="560" font-family="cursive" font-size="24" fill="rgba(255,255,255,0.14)" transform="rotate(6 200 560)">∑ n = n(n+1)/2</text><text x="940" y="450" font-family="Arial" font-size="18" fill="rgba(255,255,255,0.13)" transform="rotate(-4 940 450)">f(x) = mx + b</text><text x="1030" y="640" font-family="serif" font-size="16" fill="rgba(255,255,255,0.11)" transform="rotate(20 1030 640)">i² = -1</text><text x="130" y="300" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.1)" transform="rotate(-12 130 300)">V = lwh</text><text x="600" y="240" font-family="cursive" font-size="19" fill="rgba(255,255,255,0.12)" transform="rotate(3 600 240)">∂/∂x</text><text x="310" y="190" font-family="Arial" font-size="22" fill="rgba(255,255,255,0.09)" transform="rotate(15 310 190)">√-1 = i</text><line x1="100" y1="250" x2="240" y2="240" stroke="rgba(255,255,255,0.1)" stroke-width="2" stroke-dasharray="8,4"/><circle cx="550" cy="140" r="30" fill="none" stroke="rgba(255,255,255,0.09)" stroke-width="1.5"/><circle cx="550" cy="140" r="20" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><path d="M770 290 C815 270, 890 270, 940 290" fill="none" stroke="rgba(255,255,255,0.09)" stroke-width="2"/><rect x="680" y="400" width="60" height="40" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1.5" transform="rotate(-5 710 420)"/><polygon points="1080,80 1100,110 1060,110" fill="none" stroke="rgba(255,255,255,0.09)" stroke-width="1.5"/><text x="50" y="670" font-family="Arial" font-size="11" fill="rgba(255,255,255,0.08)">Remember: Study for test!</text><path d="M350 610 Q430 580 510 610" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="3"/><text x="770" y="80" font-family="serif" font-size="40" fill="rgba(255,255,255,0.07)" transform="rotate(-30 770 80)">θ</text><text x="380" y="440" font-family="Arial" font-size="18" fill="rgba(255,255,255,0.11)" transform="rotate(12 380 440)">log(xy) = log x + log y</text><circle cx="900" cy="560" r="25" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="2" stroke-dasharray="3,3"/><text x="70" y="480" font-family="cursive" font-size="15" fill="rgba(255,255,255,0.09)" transform="rotate(-18 70 480)">x³-1</text><line x1="470" y1="520" x2="550" y2="500" stroke="rgba(255,255,255,0.07)" stroke-width="1.5"/><path d="M250 120 L270 120 L260 100 Z" fill="rgba(255,255,255,0.08)"/><text x="1110" y="320" font-family="serif" font-size="21" fill="rgba(255,255,255,0.09)" transform="rotate(25 1110 320)">λ</text><text x="50" y="30" font-family="cursive" font-size="18" fill="rgba(255,255,255,0.1)" transform="rotate(10 50 30)">∫x²dx = x³/3</text><text x="300" y="25" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.08)" transform="rotate(-5 300 25)">lim→0</text><text x="600" y="40" font-family="serif" font-size="16" fill="rgba(255,255,255,0.09)" transform="rotate(7 600 40)">d/dx(sin x)</text><text x="900" y="30" font-family="cursive" font-size="20" fill="rgba(255,255,255,0.11)" transform="rotate(-8 900 30)">∑∞</text><text x="100" y="750" font-family="Arial" font-size="15" fill="rgba(255,255,255,0.09)" transform="rotate(5 100 750)">x→∞</text><text x="400" y="780" font-family="serif" font-size="18" fill="rgba(255,255,255,0.1)" transform="rotate(-3 400 780)">Δx→0</text><text x="700" y="760" font-family="cursive" font-size="14" fill="rgba(255,255,255,0.08)" transform="rotate(8 700 760)">∂²/∂x²</text><text x="1000" y="770" font-family="Arial" font-size="16" fill="rgba(255,255,255,0.09)" transform="rotate(-6 1000 770)">∇·F=0</text></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><text x="520" y="120" font-family="Arial" font-size="16" fill="rgba(255,255,255,0.09)" transform="rotate(-8 520 120)">1+1=2</text><text x="300" y="680" font-family="cursive" font-size="14" fill="rgba(255,255,255,0.08)" transform="rotate(10 300 680)">QED</text><circle cx="210" cy="400" r="18" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="1.5"/><text x="980" y="280" font-family="serif" font-size="17" fill="rgba(255,255,255,0.09)" transform="rotate(-3 980 280)">π/2</text><rect x="380" y="280" width="30" height="25" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="1" transform="rotate(7 395 292)"/><text x="680" y="600" font-family="Arial" font-size="13" fill="rgba(255,255,255,0.08)" transform="rotate(5 680 600)">v=d/t</text><text x="150" y="20" font-family="serif" font-size="15" fill="rgba(255,255,255,0.08)" transform="rotate(-4 150 20)">cos x</text><text x="450" y="35" font-family="cursive" font-size="17" fill="rgba(255,255,255,0.09)" transform="rotate(6 450 35)">e^x</text><text x="750" y="25" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.07)" transform="rotate(-7 750 25)">ln x</text><text x="1050" y="40" font-family="serif" font-size="19" fill="rgba(255,255,255,0.1)" transform="rotate(9 1050 40)">√2</text><text x="200" y="790" font-family="cursive" font-size="16" fill="rgba(255,255,255,0.09)" transform="rotate(4 200 790)">n→∞</text><text x="500" y="770" font-family="Arial" font-size="15" fill="rgba(255,255,255,0.08)" transform="rotate(-5 500 770)">∫∫</text><text x="800" y="780" font-family="serif" font-size="18" fill="rgba(255,255,255,0.1)" transform="rotate(7 800 780)">∂y/∂x</text><text x="1100" y="760" font-family="cursive" font-size="14" fill="rgba(255,255,255,0.08)" transform="rotate(-8 1100 760)">∴</text></svg>'),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><text x="80" y="150" font-family="Arial" font-size="13" fill="rgba(255,255,255,0.08)" transform="rotate(12 80 150)">x²+y²=r²</text><text x="350" y="500" font-family="cursive" font-size="16" fill="rgba(255,255,255,0.09)" transform="rotate(-6 350 500)">tan⁻¹</text><text x="650" y="350" font-family="serif" font-size="14" fill="rgba(255,255,255,0.07)" transform="rotate(5 650 350)">∃x</text><text x="950" y="200" font-family="Arial" font-size="17" fill="rgba(255,255,255,0.09)" transform="rotate(-9 950 200)">∀ε>0</text><line x1="0" y1="400" x2="100" y2="380" stroke="rgba(255,255,255,0.06)" stroke-width="1.5"/><circle cx="1150" cy="500" r="15" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="1"/><text x="30" y="50" font-family="serif" font-size="12" fill="rgba(255,255,255,0.07)" transform="rotate(8 30 50)">±</text><text x="250" y="45" font-family="cursive" font-size="15" fill="rgba(255,255,255,0.08)" transform="rotate(-3 250 45)">∝</text><text x="550" y="60" font-family="Arial" font-size="13" fill="rgba(255,255,255,0.06)" transform="rotate(4 550 60)">≈</text><text x="850" y="50" font-family="serif" font-size="16" fill="rgba(255,255,255,0.08)" transform="rotate(-5 850 50)">≠</text><text x="1130" y="45" font-family="cursive" font-size="14" fill="rgba(255,255,255,0.07)" transform="rotate(6 1130 45)">≤</text><text x="50" y="790" font-family="Arial" font-size="15" fill="rgba(255,255,255,0.08)" transform="rotate(-4 50 790)">⊂</text><text x="350" y="795" font-family="serif" font-size="13" fill="rgba(255,255,255,0.07)" transform="rotate(5 350 795)">∩</text><text x="650" y="785" font-family="cursive" font-size="16" fill="rgba(255,255,255,0.09)" transform="rotate(-6 650 785)">∪</text><text x="950" y="790" font-family="Arial" font-size="14" fill="rgba(255,255,255,0.08)" transform="rotate(7 950 790)">∈</text><text x="1150" y="795" font-family="serif" font-size="15" fill="rgba(255,255,255,0.09)" transform="rotate(-8 1150 795)">∉</text></svg>');background-size:100% 100%,100% 100%,100% 100%;background-position:0 0,0 0;pointer-events:none}@keyframes sun-rays{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;opacity:0;animation:chalk-dust-fall 8s ease-in-out infinite;filter:blur(1px)}@keyframes chalk-dust-fall{0%{opacity:0;transform:translateY(-10px) translate(0)}10%{opacity:.6}90%{opacity:.3}to{opacity:0;transform:translateY(100vh) translate(20px)}}.particle-0{left:5%;animation-delay:0s;animation-duration:8s}.particle-1{left:10%;animation-delay:.5s;animation-duration:9s}.particle-2{left:15%;animation-delay:1s;animation-duration:10s}.particle-3{left:20%;animation-delay:1.5s;animation-duration:8s}.particle-4{left:25%;animation-delay:2s;animation-duration:11s}.particle-5{left:30%;animation-delay:2.5s;animation-duration:9s}.particle-6{left:35%;animation-delay:3s;animation-duration:10s}.particle-7{left:40%;animation-delay:3.5s;animation-duration:8s}.particle-8{left:45%;animation-delay:4s;animation-duration:12s}.particle-9{left:50%;animation-delay:4.5s;animation-duration:9s}.particle-10{left:55%;animation-delay:5s;animation-duration:10s}.particle-11{left:60%;animation-delay:5.5s;animation-duration:8s}.particle-12{left:65%;animation-delay:6s;animation-duration:11s}.particle-13{left:70%;animation-delay:6.5s;animation-duration:9s}.particle-14{left:75%;animation-delay:7s;animation-duration:10s}.particle-15{left:80%;animation-delay:7.5s;animation-duration:8s}.particle-16{left:85%;animation-delay:8s;animation-duration:12s}.particle-17{left:90%;animation-delay:8.5s;animation-duration:9s}.particle-18{left:95%;animation-delay:9s;animation-duration:10s}.particle-19{left:97%;animation-delay:9.5s;animation-duration:11s}.about-hero-content{max-width:800px;margin:0 auto;position:relative;z-index:10}.about-title{font-size:4rem;line-height:1.2;margin-bottom:2rem;color:#fff;font-weight:800;text-shadow:2px 2px 4px rgba(0,0,0,.3);font-family:Courier New,monospace;position:relative}.about-title .highlight{color:#fbbf24;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:8px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.about-subtitle{font-size:1.5rem;color:#ffffffe6;line-height:1.8;font-weight:400;font-family:Courier New,monospace}.vision-section{padding:8rem 2rem;background:#fafaf0;background-image:repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(200,200,200,.3) 24px,rgba(200,200,200,.3) 25px),repeating-linear-gradient(90deg,transparent,transparent 24px,rgba(200,200,200,.2) 24px,rgba(200,200,200,.2) 25px);position:relative;overflow:hidden}.vision-section:before{content:"";position:absolute;top:20px;left:20px;width:100px;height:100px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="2"/><path d="M50 10 L50 90 M10 50 L90 50" stroke="rgba(0,0,0,0.1)" stroke-width="1"/></svg>');opacity:.5}@keyframes float-right{0%,to{transform:translate(0) translateY(0)}50%{transform:translate(-50px) translateY(50px)}}.vision-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.vision-content h2{font-size:2.5rem;margin-bottom:2rem;color:var(--text-dark)}.vision-content p{font-size:1.125rem;line-height:2;color:var(--text-light);margin-bottom:2.5rem}.vision-values h3{font-size:2rem;margin-bottom:3rem;color:#2d5016;font-family:Courier New,monospace;text-align:center;position:relative;text-transform:uppercase;letter-spacing:2px}.vision-values h3:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:100px;height:3px;background:#8b6f47;box-shadow:0 2px #6b563a}.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.value-item{text-align:center;padding:2rem;transition:all .3s ease;cursor:pointer;position:relative;background:#fff;border:3px solid #2d5016;box-shadow:5px 5px #2d5016;transform:perspective(500px) rotateX(5deg);border-radius:0}.value-item:nth-child(2n){transform:perspective(500px) rotateX(-5deg)}.value-item:nth-child(3){transform:perspective(500px) rotateY(5deg)}.value-item:nth-child(4){transform:perspective(500px) rotateY(-5deg)}.value-item:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:30px;height:20px;background:#c8c8c8cc;clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}.value-item:hover{transform:perspective(500px) rotateX(0) rotateY(0) translateY(-5px);box-shadow:7px 7px #2d5016;z-index:10}.value-icon{font-size:2.5rem;margin-bottom:1rem;background:#2d5016;color:#fff;width:60px;height:60px;line-height:60px;border-radius:50%;box-shadow:3px 3px #0003;display:inline-block;transition:transform .3s ease}.value-item:hover .value-icon{transform:scale(1.2) rotate(10deg)}.value-item h4{font-size:1.25rem;margin-bottom:1rem;color:#2d5016;position:relative;font-family:Courier New,monospace;font-weight:700;text-transform:uppercase;letter-spacing:1px}.value-item p{font-size:.9rem;color:#4a4a4a;font-family:Comic Sans MS,cursive;line-height:1.5;position:relative}.founders-section{padding:8rem 2rem 10rem;background:linear-gradient(135deg,#ffd4a3,#ffecd1);position:relative;overflow:hidden}.founders-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse at top left,rgba(255,255,255,.4) 0%,transparent 40%),radial-gradient(ellipse at bottom right,rgba(255,223,186,.3) 0%,transparent 50%);pointer-events:none}@keyframes sun-rays-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.founders-container{max-width:1000px;margin:0 auto}.founders-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:4rem}.founder-card{background:#fff;padding:10px;position:relative;box-shadow:0 1px 3px #0003,0 10px 20px #0000001a;transition:all .4s cubic-bezier(.4,0,.2,1);animation:slideUp .6s ease-out forwards;opacity:0;transform:translateY(30px) rotate(-2deg)}.founder-card:before{content:"";position:absolute;top:-15px;left:50%;transform:translate(-50%);width:40px;height:40px;background:radial-gradient(circle at 30% 30%,#f0f0f0,gray);border-radius:50%;box-shadow:2px 2px 4px #0000004d,inset -2px -2px 3px #0003;border:2px solid #666;z-index:10}.founder-card-0{animation-delay:.1s;transform:translateY(30px) rotate(-3deg)}.founder-card-1{animation-delay:.2s;transform:translateY(30px) rotate(3deg)}@keyframes slideUp{to{opacity:1;transform:translateY(0)}}.founder-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 30px #fbbf2433;border-color:#fbbf2466}.founder-gradient{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}.founder-card:hover .founder-gradient{transform:scaleX(1)}.founder-content{padding:3rem;position:relative;z-index:1}.founder-card h3{font-size:1.5rem;margin:0 0 1rem;color:#1a1a1a;font-family:Comic Sans MS,cursive}.founder-card h4{font-size:1rem;color:#4a4a4a;margin-bottom:1.5rem;font-weight:600;position:relative;display:inline-block;font-family:Comic Sans MS,cursive}.founder-card h4:after{content:"";position:absolute;bottom:-4px;left:0;width:30px;height:2px;background:#fbbf24;transition:width .3s ease}.founder-card:hover h4:after{width:100%}.founder-card p{font-size:.95rem;line-height:1.7;color:var(--text-light);margin-bottom:1.5rem}.linkedin-link{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);padding:.75rem 1.5rem;background:linear-gradient(135deg,#0077b5,#005885);border-radius:.5rem;font-size:1rem;position:relative;overflow:hidden}.linkedin-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.linkedin-link:hover:before{left:100%}.linkedin-link:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0077b54d}.journey-section{padding:5rem 2rem;background:linear-gradient(to bottom,#fef3c7,#fffbeb);position:relative}.journey-container{max-width:800px;margin:0 auto;text-align:center}.journey-container h2{font-size:2.5rem;margin-bottom:2rem;color:var(--text-dark)}.journey-container p{font-size:1.125rem;line-height:1.8;color:var(--text-light);margin-bottom:1.5rem}.nav-links a{position:relative}.nav-links a.active{background:#ff9800;transform:rotate(1deg);box-shadow:3px 3px #2d1810}@media (max-width: 1024px){.vision-container{grid-template-columns:1fr;gap:3rem}}@media (max-width: 768px){.about-title{font-size:2.5rem}.about-subtitle{font-size:1.25rem}.vision-content h2{font-size:2rem}.values-grid{grid-template-columns:1fr;gap:1.5rem}.founders-grid{grid-template-columns:1fr;gap:2rem}.founder-card{padding:2rem}}.features{padding:8rem 2rem 10rem;background:#f5e6d3;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(139,111,71,.03) 10px,rgba(139,111,71,.03) 20px),radial-gradient(circle at 30% 40%,rgba(255,235,59,.1) 0%,transparent 40%),radial-gradient(circle at 70% 60%,rgba(255,152,0,.1) 0%,transparent 40%);position:relative;overflow:hidden;border-top:8px solid transparent;border-bottom:8px solid transparent;border-image:repeating-linear-gradient(90deg,#ff6b6b 0px 20px,#4ecdc4 20px 40px,#45b7d1 40px 60px,#f9ca24 60px 80px) 8}.features:before{content:"";position:absolute;bottom:0;left:0;right:0;height:200px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath d='M0,100 Q300,50 600,100 T1200,100 L1200,200 L0,200 Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") no-repeat bottom;background-size:cover;pointer-events:none}.section-container{max-width:1200px;margin:0 auto;position:relative}.section-title{font-size:2.5rem;text-align:center;margin-bottom:2.5rem;color:#5d4037;font-family:Courier New,monospace;text-shadow:2px 2px 0 #8b6f47;position:relative;font-weight:700;letter-spacing:-1px}.section-subtitle{font-size:1.25rem;text-align:center;color:#6d4c41;margin-bottom:5rem;max-width:600px;margin-left:auto;margin-right:auto;font-family:Comic Sans MS,cursive;font-weight:500}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:3.5rem}.feature-card{padding:3rem;text-align:center;transition:all .3s ease;cursor:pointer;position:relative;background:#ffeb3b;box-shadow:2px 2px 5px #0000001a;transform:rotate(-2deg)}.feature-card:nth-child(2n){background:#ff9800;transform:rotate(2deg)}.feature-card:nth-child(3){background:#4fc3f7;transform:rotate(-1deg)}.feature-card:nth-child(4){background:#81c784;transform:rotate(1deg)}.feature-card:nth-child(5){background:#f06292;transform:rotate(-1.5deg)}.feature-card:nth-child(6){background:#ba68c8;transform:rotate(1.5deg)}.feature-card:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:35px;height:20px;background:linear-gradient(to bottom,#e0e0e0,silver);clip-path:polygon(20% 0%,80% 0%,100% 100%,0% 100%);box-shadow:0 2px 3px #0003;border:1px solid #999}.feature-card:hover{transform:scale(1.05) rotate(0);box-shadow:4px 4px 10px #0003;z-index:10}.feature-icon{font-size:3rem;margin-bottom:1.5rem;display:inline-block;transition:transform .3s ease}.feature-card:hover .feature-icon{transform:scale(1.2) rotate(10deg)}.feature-card h3{font-size:1.125rem;margin-bottom:1.25rem;color:#1a1a1a;font-weight:600;position:relative;font-family:Comic Sans MS,cursive}.feature-card p{font-size:.875rem;color:#333;line-height:1.6;position:relative}.footer{background:#2d5016;color:#fff;padding:6rem 2rem 2rem;position:relative;overflow:hidden}.footer-container{max-width:1200px;margin:0 auto}.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;margin-bottom:3rem}.footer-section h3,.footer-section h4{margin-bottom:1rem}.footer-section p{opacity:.8;line-height:1.6}.footer-section a{display:block;color:#fff;text-decoration:none;opacity:.8;margin-bottom:.5rem;transition:opacity .3s}.footer-section a:hover{opacity:1}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;text-align:center;opacity:.6}@media (max-width: 1024px){.hero{flex-direction:column;gap:3rem}.hero-content{max-width:100%;text-align:center}.hero-visual{width:100%;max-width:600px;margin:0 auto}.dashboard-preview{transform:scale(.9)}}@media (max-width: 768px){.nav-links{gap:1rem}.hero{padding:2rem 1rem;margin-top:60px}.hero-badge{margin-bottom:1rem}.badge-text{font-size:.75rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1rem}.dashboard-preview{transform:scale(.7)}.sidebar{display:none}.dashboard-content{height:300px}.course-grid{grid-template-columns:1fr}.features-grid{grid-template-columns:1fr;gap:1.5rem}.footer-content{grid-template-columns:1fr;gap:2rem}.floating-elements{display:none}}