:root{--primary-color: #4361ee;--primary-dark: #2a3990;--glass-background: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .3);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);--text-primary: #1a1a1a;--text-secondary: #666;--background: #f0f2f5;--button-gradient: linear-gradient(135deg, #4361ee, #2a3990);--button-hover: linear-gradient(135deg, #3251de, #1a2980);--button-shadow: 0 4px 15px rgba(67, 97, 238, .3)}:root.dark{--primary-color: #7b96ff;--primary-dark: #4361ee;--glass-background: rgba(23, 25, 35, .7);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--text-primary: #ffffff;--text-secondary: #a0a0a0;--background: #0f1117;--button-gradient: linear-gradient(135deg, #7b96ff, #4361ee);--button-hover: linear-gradient(135deg, #6a85ee, #3251de);--button-shadow: 0 4px 15px rgba(123, 150, 255, .3)}html{font-family:Outfit,system-ui,sans-serif;background:var(--background);color:var(--text-primary);transition:background-color .3s ease}body{margin:0;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}.background-gradient{position:fixed;inset:0;background:radial-gradient(circle at 0% 0%,rgba(67,97,238,.15) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgba(42,57,144,.15) 0%,transparent 50%);z-index:-1;transition:opacity .3s ease}.dark .background-gradient{background:radial-gradient(circle at 0% 0%,rgba(67,97,238,.2) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgba(123,150,255,.2) 0%,transparent 50%)}nav{background:var(--glass-background);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:100;transition:all .3s ease}.nav-container{max-width:1200px;margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;color:var(--primary-color);text-decoration:none;text-shadow:0 2px 4px rgba(0,0,0,.1);transition:color .3s ease}.nav-links{display:flex;gap:2rem;align-items:center}.nav-links a{color:var(--text-primary);text-decoration:none;transition:all .3s;padding:.5rem 1rem;border-radius:8px;position:relative}.nav-links a:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--button-gradient);transition:all .3s ease;transform:translate(-50%)}.nav-links a:hover:after{width:80%}.theme-toggle{background:none;border:none;padding:.5rem;cursor:pointer;color:var(--text-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative;overflow:hidden}.theme-toggle:before{content:"";position:absolute;inset:0;background:var(--button-gradient);opacity:0;transition:opacity .3s ease;border-radius:50%}.theme-toggle:hover:before{opacity:.1}.theme-toggle .sun{display:none;transform:rotate(0);transition:transform .5s ease}.dark .theme-toggle .sun{display:block;transform:rotate(180deg)}.theme-toggle .moon{display:block;transform:rotate(0);transition:transform .5s ease}.dark .theme-toggle .moon{display:none;transform:rotate(-180deg)}footer{background:var(--glass-background);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--glass-border);padding:2rem 0;margin-top:auto;transition:all .3s ease}.footer-container{max-width:1200px;margin:0 auto;padding:0 1rem;text-align:center;color:var(--text-secondary)}@media (max-width: 768px){.nav-container{flex-direction:column;gap:1rem;text-align:center}.nav-links{justify-content:center}}.glass{background:var(--glass-background);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);transition:all .3s ease}.button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;font-weight:600;color:#fff;background:var(--button-gradient);border:none;border-radius:12px;text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:var(--button-shadow)}.button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--button-hover);opacity:0;transition:opacity .3s ease}.button:hover:before{opacity:1}.button span{position:relative;z-index:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.animate-fade-in{animation:fadeIn .6s ease forwards}.animate-slide-in{animation:slideIn .6s ease forwards}
