:root{--bg-primary:#0a0a0e;--bg-secondary:#13141c;--bg-surface:#ffffff08;--bg-surface-hover:#ffffff0f;--text-primary:#fff;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-color:#7c3aed;--accent-hover:#8b5cf6;--accent-glow:#7c3aed66;--gradient-primary:linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);--gradient-border:linear-gradient(135deg, #7c3aed80 0%, #3b82f680 100%);--font-heading:"Outfit", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--border-color:#ffffff14;--border-glass:#ffffff1f;--shadow-sm:0 4px 6px -1px #0000004d;--shadow-md:0 10px 15px -3px #0006;--shadow-glass:0 8px 32px 0 #0000004d}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}a{color:var(--text-primary);text-decoration:none;transition:all .3s}#root{flex-direction:column;min-height:100vh;display:flex}.glass{background:var(--bg-surface);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);box-shadow:var(--shadow-glass);border-radius:16px}.bg-gradient-text{background:var(--gradient-primary);color:#0000;-webkit-background-clip:text;background-clip:text;display:inline-block}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}input,textarea,button{font-family:var(--font-body)}.hero-section{text-align:center;padding:100px 0 60px;position:relative;overflow:hidden}.hero-background{z-index:-1;position:absolute;inset:0;overflow:hidden}.glow-orb{filter:blur(80px);opacity:.5;border-radius:50%;animation:10s infinite alternate float;position:absolute}.glow-orb.primary{background:var(--accent-glow);width:400px;height:400px;top:-100px;left:20%}.glow-orb.secondary{background:#3b82f64d;width:300px;height:300px;animation-delay:-5s;bottom:-50px;right:20%}@keyframes float{0%{transform:translateY(0)scale(1)}to{transform:translateY(30px)scale(1.1)}}.hero-content{flex-direction:column;align-items:center;max-width:800px;margin:0 auto;display:flex}.badge{background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-secondary);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;align-items:center;gap:8px;margin-bottom:24px;padding:8px 16px;font-size:14px;display:inline-flex}.badge-dot{background:#10b981;border-radius:50%;width:8px;height:8px;box-shadow:0 0 10px #10b981}.hero-title{letter-spacing:-2px;text-shadow:0 10px 30px #00000080;margin-bottom:24px;font-size:64px}.hero-description{color:var(--text-secondary);max-width:600px;margin-bottom:40px;font-size:20px}.hero-actions{justify-content:center;align-items:center;gap:16px;display:flex}.install-box{border:1px solid var(--border-glass);cursor:pointer;font-family:var(--font-mono);background:#0006;border-radius:8px;align-items:center;padding:12px 16px;transition:all .3s;display:flex}.install-box:hover{border-color:var(--accent-border);background:#0009}.install-box .prompt{color:var(--text-muted);margin-right:12px}.install-box .command{color:#e2e8f0;margin-right:16px;font-size:16px}.install-box .copy-btn{cursor:pointer;opacity:.7;background:0 0;border:none;font-size:16px}.install-box:hover .copy-btn{opacity:1}.btn{font-weight:600;font-family:var(--font-body);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:14px 28px;font-size:16px;transition:all .3s;display:inline-flex}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 15px var(--accent-glow);border:none}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed99}@media (width<=768px){.hero-title{font-size:48px}.hero-description{font-size:18px}.hero-actions{flex-direction:column;width:100%;max-width:300px}}.features-section{padding:80px 0}.section-header{text-align:center;margin-bottom:60px}.section-header h2{margin-bottom:16px;font-size:40px}.section-header p{color:var(--text-secondary);font-size:18px}.features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;display:grid}.feature-card{text-align:left;padding:32px 24px;transition:transform .3s,box-shadow .3s}.feature-card.hover-effect:hover{box-shadow:0 15px 35px var(--accent-glow);border-color:var(--accent-border);transform:translateY(-5px)}.feature-icon{background:var(--bg-surface-hover);border:1px solid var(--border-color);border-radius:12px;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:24px;font-size:40px;display:flex}.feature-card h3{color:var(--text-primary);margin-bottom:12px;font-size:20px}.feature-card p{color:var(--text-secondary);font-size:15px;line-height:1.6}.usage-section{justify-content:center;padding:80px 0;display:flex}.usage-layout{grid-template-columns:1fr 1fr;align-items:center;gap:40px;width:100%;padding:40px;display:grid}.usage-text{text-align:left}.usage-text .badge{background:var(--accent-bg);border-color:var(--accent-border);color:#c084fc}.usage-text h2{margin-bottom:24px;font-size:32px}.usage-text p{color:var(--text-secondary);font-size:18px;line-height:1.8}.usage-code-wrapper{box-shadow:var(--shadow-md);border:1px solid var(--border-color);text-align:left;background:#0f111a;border-radius:12px;overflow:hidden}.window-controls{background:#ffffff05;border-bottom:1px solid #ffffff0d;gap:8px;padding:16px 20px;display:flex}.window-controls .dot{border-radius:50%;width:12px;height:12px}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}.code-block{margin:0;padding:24px;overflow-x:auto}.code-block code{font-family:var(--font-mono);color:#e2e8f0;white-space:pre;font-size:14px;line-height:1.6}@media (width<=900px){.usage-layout{grid-template-columns:1fr}}.get-api-key-section{justify-content:center;padding:80px 0;display:flex}.key-container{width:100%;max-width:520px;position:relative;overflow:hidden}.key-glow{pointer-events:none;z-index:0;background:radial-gradient(circle,#7c3aed14 0%,#0000 55%);width:160%;height:160%;position:absolute;top:-60%;left:-30%}.key-content{z-index:1;padding:40px;position:relative}.step-indicator{justify-content:center;align-items:center;gap:0;margin-bottom:36px;display:flex}.step-row{align-items:center;gap:0;display:flex}.step-dot{border:2px solid var(--border-color);width:32px;height:32px;color:var(--text-muted);background:var(--bg-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:600;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex}.step-dot.active{border-color:var(--accent-color);color:#fff;background:var(--accent-color);box-shadow:0 0 16px var(--accent-glow)}.step-dot.completed{background:#10b981;border-color:#10b981;box-shadow:0 0 12px #10b98166}.step-label{display:none}.step-line{background:var(--border-color);flex-shrink:0;width:48px;height:2px;margin:0 8px;transition:background .4s}.step-line.active{background:linear-gradient(90deg, #10b981, var(--accent-color))}.key-form{flex-direction:column;gap:24px;display:flex}.form-header{text-align:center}.form-header h2{letter-spacing:-.5px;margin-bottom:10px;font-size:28px}.form-header p{color:var(--text-secondary);font-size:15px;line-height:1.6}.form-header strong{color:var(--text-primary)}.form-group{text-align:left;flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text-secondary);font-size:14px;font-weight:500}.key-form input[type=email],.key-form input[type=text]{border:1px solid var(--border-color);width:100%;color:var(--text-primary);background:#00000040;border-radius:10px;outline:none;padding:14px 16px;font-size:16px;transition:all .3s}.key-form input[type=email]:focus,.key-form input[type=text]:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #7c3aed26}.key-form input::placeholder{color:var(--text-muted)}.otp-input-group{justify-content:center;gap:10px;display:flex}.otp-box{text-align:center;width:52px;height:60px;font-size:24px;font-weight:700;font-family:var(--font-mono);border:2px solid var(--border-color);color:var(--text-primary);caret-color:var(--accent-color);background:#0000004d;border-radius:12px;outline:none;transition:all .3s}.otp-box:focus{border-color:var(--accent-color);background:#0006;box-shadow:0 0 0 3px #7c3aed33}.submit-btn{background:var(--gradient-primary);color:#fff;cursor:pointer;box-shadow:0 4px 15px var(--accent-glow);border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:600;transition:all .3s}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed80}.submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-loading{align-items:center;gap:8px;display:inline-flex}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.form-footer{text-align:center}.form-footer p{color:var(--text-muted);font-size:14px}.link-btn{color:var(--accent-hover);cursor:pointer;text-underline-offset:3px;background:0 0;border:none;font-size:14px;font-weight:600;text-decoration:underline;transition:color .2s}.link-btn:hover{color:#a78bfa}.link-btn:disabled{opacity:.5;cursor:not-allowed}.alert{border-radius:10px;align-items:center;gap:10px;padding:14px 16px;font-size:14px;font-weight:500;animation:.4s shake;display:flex}.alert.error{color:#f87171;background:#ef44441a;border:1px solid #ef444433}.alert-icon{flex-shrink:0;font-size:16px}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.success-state{text-align:center;align-items:center}.success-icon-wrapper{margin-bottom:8px}.success-icon{color:#10b981;background:#10b9811a;border:2px solid #10b9814d;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;animation:.5s cubic-bezier(.16,1,.3,1) pop;display:flex}@keyframes pop{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.success-tip{text-align:left;color:var(--text-secondary);align-items:flex-start;gap:12px;padding:16px 20px;font-size:14px;line-height:1.5;display:flex}.tip-icon{flex-shrink:0;margin-top:1px;font-size:18px}.success-tip p{margin:0}.fade-in{animation:.5s cubic-bezier(.16,1,.3,1) fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.key-content{padding:28px 20px}.form-header h2{font-size:24px}.otp-box{width:44px;height:52px;font-size:20px}.step-line{width:32px}}.navbar{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:48px;padding:24px 0;display:flex}.logo{font-family:var(--font-heading);letter-spacing:-.5px;align-items:center;gap:8px;font-size:24px;font-weight:800;display:flex}.logo-icon{background:var(--gradient-primary);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:inline-flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-up{animation:.8s cubic-bezier(.16,1,.3,1) forwards fadeUp}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.main-content{flex-direction:column;flex-grow:1;gap:120px;padding-bottom:80px;display:flex}.footer{text-align:center;border-top:1px solid var(--border-color);color:var(--text-muted);padding:40px 0;font-size:14px}