@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-dark:#0f1115;--bg-card:#191c23b3;--bg-card-hover:#232730cc;--primary:#4ade80;--primary-hover:#22c55e;--secondary:#60a5fa;--text-main:#f8fafc;--text-muted:#94a3b8;--border-light:#ffffff14;--glass-blur:blur(12px);--glass-shadow:0 8px 32px 0 #0000005e;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-display:"Outfit", var(--font-sans)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2}.text-gradient{background:linear-gradient(to right, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.section{padding:8rem 0}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-light);box-shadow:var(--glass-shadow);border-radius:16px;padding:2rem;transition:all .3s}.glass-card:hover{background:var(--bg-card-hover);border-color:#ffffff26;transform:translateY(-5px)}.btn{font-family:var(--font-display);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--primary);color:#000;box-shadow:0 4px 14px #4ade804d}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px #4ade8066}.btn-outline{color:var(--text-main);border:1px solid var(--border-light);background-color:#0000}.btn-outline:hover{background-color:#ffffff0d;border-color:#fff3}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{opacity:0;animation:.8s forwards fadeIn}.delay-1{animation-delay:.2s}.delay-2{animation-delay:.4s}.delay-3{animation-delay:.6s}.mockup-container{background:var(--bg-card);border:1px solid #ffffff1a;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000080}.code-block{border:1px solid var(--border-light);color:#e6edf3;background:#0d1117;border-radius:8px;margin:1rem 0;padding:1rem;font-family:monospace;position:relative;overflow-x:auto}.copy-btn{color:var(--text-muted);cursor:pointer;background:#ffffff1a;border:none;border-radius:4px;padding:.3rem .6rem;font-size:.8rem;transition:all .2s;position:absolute;top:.5rem;right:.5rem}.copy-btn:hover{color:#fff;background:#fff3}.hero-section{text-align:center;background:radial-gradient(circle at top center, #4ade801a 0%, var(--bg-dark) 50%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:6rem 2rem 2rem;display:flex}.hero-title{max-width:800px;margin-bottom:1.5rem;font-size:4rem}.hero-subtitle{color:var(--text-muted);max-width:600px;margin-bottom:3rem;font-size:1.2rem}.hero-mockup{background-image:url(https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?q=80&w=2070&auto=format&fit=crop);background-position:50%;background-size:cover;width:100%;max-width:1000px;height:500px;margin-top:4rem}.features-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:4rem;display:grid}.feature-card{flex-direction:column;gap:1rem;display:flex}.feature-icon{width:48px;height:48px;color:var(--primary);background:#4ade801a;border-radius:12px;justify-content:center;align-items:center;display:flex}.feature-title{margin-bottom:.5rem;font-size:1.5rem}.feature-desc{color:var(--text-muted)}.install-section{background:linear-gradient(to bottom, var(--bg-dark), #60a5fa0d);text-align:center}.install-steps{text-align:left;flex-direction:column;gap:2rem;max-width:800px;margin:4rem auto 0;display:flex}.step-card{align-items:flex-start;gap:1.5rem;display:flex}.step-number{background:var(--primary);color:#000;width:40px;height:40px;font-family:var(--font-display);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex}.step-content h3{margin-bottom:.5rem;font-size:1.3rem}.step-content p{color:var(--text-muted);margin-bottom:1rem}footer{text-align:center;border-top:1px solid var(--border-light);color:var(--text-muted);padding:3rem}footer a{color:var(--primary);text-decoration:none}footer a:hover{text-decoration:underline}@media (width<=768px){.hero-title{font-size:2.5rem}.hero-mockup{height:300px}}
