@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@600;700&display=swap";
:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--accent-primary:#38bdf8;--accent-secondary:#818cf8;--text-primary:#f8fafc;--text-secondary:#94a3b8;--glass-bg:#1e293bb3;--glass-border:#ffffff1a;--font-main:"Inter",system-ui,sans-serif;--font-heading:"Outfit",sans-serif;--transition-smooth:all .3s cubic-bezier(.4,0,.2,1)}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-main);-webkit-font-smoothing:antialiased;margin:0}.glass-effect{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border)}.gradient-text{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text}
:root{--background:#111821;--foreground:#f6f7f8;--accent-primary:#1c74e9;--accent-secondary:#2ecc71;--accent-tertiary:#38bdf8;--glass-bg:#ffffff05;--glass-border:#ffffff0f;--glass-highlight:#ffffff1a;--font-main:"Outfit",sans-serif;--font-body:"Inter",sans-serif;--card-radius:32px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--background);color:var(--foreground);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}h1,h2,h3,.logo{font-family:var(--font-main)}.bg-canvas{z-index:-1;background:radial-gradient(circle,#172230 0%,#111821 100%);width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.bg-light{filter:blur(120px);opacity:.15;pointer-events:none;border-radius:50%;width:60vw;height:60vw;animation:20s ease-in-out infinite alternate float;position:absolute}.light-1{background:var(--accent-primary);top:-10%;right:-10%}.light-2{background:var(--accent-secondary);animation-delay:-5s;bottom:-10%;left:-10%}.light-3{background:var(--accent-tertiary);opacity:.1;width:30vw;height:30vw;animation-delay:-10s;top:40%;left:20%}@keyframes float{0%{transform:translate(0)scale(1)}50%{transform:translate(5%,10%)scale(1.1)}to{transform:translate(-5%,-5%)scale(.9)}}.container{max-width:1200px;margin:0 auto;padding:0 2rem}header{z-index:100;justify-content:space-between;align-items:center;height:100px;display:flex;position:relative}.header-actions{align-items:center;gap:1.5rem;display:flex}.auth-btn{cursor:pointer;border:1px solid #0000;border-radius:1rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:700;transition:all .3s cubic-bezier(.16,1,.3,1)}.auth-btn.login{color:#000;background:#fff}.auth-btn.login:hover{transform:translateY(-2px);box-shadow:0 10px 20px #ffffff1a}.auth-btn.logout{color:#fff9;background:#ffffff0d;border-color:#ffffff1a}.auth-btn.logout:hover{color:#ff4646;background:#ff46461a;border-color:#ff464633}.user-profile{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff0d;border-radius:1.25rem;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.25rem;display:flex}.user-name{color:#fff;font-size:.875rem;font-weight:700}.loading-spinner{border:2px solid #ffffff1a;border-top-color:var(--accent-primary);border-radius:50%;width:24px;height:24px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.logo{letter-spacing:-.05em;align-items:center;gap:.75rem;font-size:1.75rem;font-weight:800;display:flex}.logo-icon{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:8px;width:32px;height:32px;transform:rotate(-10deg)}.logo-text{background:linear-gradient(135deg,#fff 0%,#aaa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero{justify-content:space-between;align-items:center;gap:4rem;min-height:90vh;padding:4rem 0;display:flex}.hero-content{flex:1}.hero-visual{flex:1;justify-content:center;align-items:center;display:flex;position:relative}.hero-animation-container{width:400px;height:400px;position:relative}.abstract-shape{filter:blur(40px);opacity:.2;border-radius:40% 60% 70% 30%/40% 50% 60%;animation:20s linear infinite rotate;position:absolute}.shape-1{background:var(--accent-primary);width:300px;height:300px;top:10%;left:10%}.shape-2{background:var(--accent-secondary);width:250px;height:250px;animation-duration:25s;animation-direction:reverse;bottom:10%;right:10%}.shape-3{background:var(--accent-tertiary);width:200px;height:200px;animation-duration:15s;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-btns{gap:1.5rem;margin-top:2rem;display:flex}.feature-btn.primary{color:#000;background:#fff;align-items:center;gap:.75rem;display:flex}.feature-btn.secondary{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a;align-items:center;gap:.75rem;display:flex}.feature-btn.secondary:hover{background:#ffffff1a;border-color:#fff3}.hero-badge{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--accent-tertiary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:100px;align-items:center;margin-bottom:2rem;padding:.5rem 1.25rem;font-size:.875rem;font-weight:600;display:inline-flex}.hero h1{letter-spacing:-.04em;background:linear-gradient(#fff 40%,#fff6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:2rem;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:800;line-height:1.1}.hero p{color:#fff9;max-width:650px;margin-bottom:3.5rem;font-size:clamp(1.1rem,2vw,1.35rem);font-weight:400}.section-title{margin-bottom:4rem}.section-title h2{letter-spacing:-.03em;margin-bottom:1rem;font-size:3rem;font-weight:800}.section-title p{color:#ffffff80;font-size:1.1rem}.features-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem;margin-bottom:8rem;display:grid}.feature-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--card-radius);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-direction:column;min-height:500px;padding:3.5rem;transition:all .5s cubic-bezier(.23,1,.32,1);display:flex;position:relative;overflow:hidden}.feature-card:before{content:"";background:radial-gradient(circle at var(--mouse-x,50%)var(--mouse-y,50%),#ffffff14 0%,transparent 50%);opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.feature-card:hover{border-color:var(--glass-highlight);background:#ffffff0d;transform:translateY(-12px);box-shadow:0 40px 80px -20px #00000080}.feature-card:hover:before{opacity:1}.feature-visual{flex:1;justify-content:center;align-items:center;margin-bottom:2.5rem;display:flex;position:relative}.feature-card h3{margin-bottom:1rem;font-size:2.25rem;font-weight:800}.feature-card p{color:#fff9;max-width:90%;margin-bottom:2.5rem;font-size:1.1rem}.feature-btn{color:#000;background:#fff;border-radius:100px;align-items:center;gap:.75rem;width:fit-content;padding:1rem 2rem;font-size:1rem;font-weight:700;text-decoration:none;transition:all .3s;display:flex}.feature-btn:hover{background:var(--accent-primary);color:#fff;transform:scale(1.05)}.future-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:10rem;display:grid}.future-card{border:1px solid var(--glass-border);text-align:center;background:#ffffff05;border-radius:24px;padding:2.5rem;transition:all .4s;position:relative;overflow:hidden}.coming-soon-badge{color:#ffffff80;text-transform:uppercase;letter-spacing:.05em;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:100px;padding:.25rem .75rem;font-size:.7rem;font-weight:800;position:absolute;top:1rem;right:1rem}.future-card:hover{background:#ffffff0a;border-color:#ffffff26}.future-icon{width:48px;height:48px;color:var(--accent-tertiary);opacity:.6;margin:0 auto 1.5rem}.future-card h4{margin-bottom:.75rem;font-size:1.25rem}.future-card p{color:#fff6;font-size:.9rem}.reveal{opacity:0;transition:all 1s cubic-bezier(.23,1,.32,1);transform:translateY(40px)}.reveal.active{opacity:1;transform:translateY(0)}.text-gradient{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text}@media (max-width:968px){.features-grid{grid-template-columns:1fr}.future-grid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.future-grid{grid-template-columns:1fr}.hero h1{font-size:4rem}}