*,:before,:after{box-sizing:border-box}body{margin:0;padding:0}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{color:#e2e8f0;background:#0f1117;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app-header{background:#1a1d2e;border-bottom:1px solid #2d3148;flex-shrink:0;align-items:center;gap:12px;padding:10px 20px;display:flex}.logo{color:#a78bfa;letter-spacing:-.5px;font-size:20px;font-weight:700}.header-subtitle{color:#64748b;font-size:13px}.app-body{flex:1;display:flex;overflow:hidden}.sidebar-left{background:#1a1d2e;border-right:1px solid #2d3148;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;width:64px;padding:12px 0;display:flex}.sidebar-right{background:#1a1d2e;border-left:1px solid #2d3148;flex-direction:column;flex-shrink:0;width:240px;display:flex;overflow-y:auto}.canvas-area{background:#0f1117;flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}.tool-btn{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;transition:all .15s;display:flex;position:relative}.tool-btn:hover{color:#e2e8f0;background:#2d3148}.tool-btn.active{color:#fff;background:#3730a3;border-color:#6366f1}.tool-btn:disabled{opacity:.4;cursor:not-allowed}.tool-divider{background:#2d3148;width:32px;height:1px;margin:4px 0}.tool-label{color:#64748b;text-align:center;margin-top:2px;font-size:9px}.control-panel{flex-direction:column;gap:14px;padding:16px;display:flex}.control-section{flex-direction:column;gap:6px;display:flex}.control-label{text-transform:uppercase;letter-spacing:.8px;color:#64748b;font-size:11px;font-weight:600}.control-value{color:#e2e8f0;font-size:13px}.slider{accent-color:#6366f1;width:100%}.btn{cursor:pointer;border:none;border-radius:8px;width:100%;padding:10px;font-size:13px;font-weight:600;transition:all .15s}.btn-primary{color:#fff;background:#6366f1}.btn-primary:hover{background:#4f46e5}.btn-danger{color:#fff;background:#dc2626}.btn-danger:hover{background:#b91c1c}.btn-secondary{color:#e2e8f0;background:#2d3148}.btn-secondary:hover{background:#3d4266}.btn:disabled{opacity:.5;cursor:not-allowed}.stat-row{border-bottom:1px solid #2d3148;justify-content:space-between;padding:4px 0;font-size:12px;display:flex}.stat-label{color:#64748b}.stat-value{color:#a78bfa;font-weight:600}.results-panel{border-top:1px solid #2d3148;padding:16px}.results-title{text-transform:uppercase;letter-spacing:.8px;color:#64748b;margin-bottom:10px;font-size:12px;font-weight:700}.result-row{border-bottom:1px solid #1e2235;justify-content:space-between;padding:5px 0;font-size:12px;display:flex}.result-label{color:#94a3b8}.result-value{color:#e2e8f0;font-weight:600}.result-value.good{color:#4ade80}.result-value.warn{color:#facc15}.result-value.bad{color:#f87171}canvas{display:block}.canvas-hint{color:#475569;pointer-events:none;white-space:nowrap;font-size:12px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.toggle-row{justify-content:space-between;align-items:center;font-size:12px;display:flex}.toggle{width:36px;height:20px;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background:#2d3148;border-radius:20px;transition:all .2s;position:absolute;inset:0}.toggle-slider:before{content:"";background:#94a3b8;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;top:3px;left:3px}.toggle input:checked+.toggle-slider{background:#6366f1}.toggle input:checked+.toggle-slider:before{background:#fff;transform:translate(16px)}.zone-legend{color:#64748b;flex-wrap:wrap;gap:10px;font-size:11px;display:flex}.zone-dot{border-radius:2px;width:10px;height:10px;margin-right:4px;display:inline-block}.plan-name-input{color:#e2e8f0;background:0 0;border:none;border-bottom:1px solid #2d3148;outline:none;width:180px;padding:2px 6px;font-size:14px;font-weight:500;transition:border-color .2s}.plan-name-input:focus{border-bottom-color:#6366f1}.plan-name-display{color:#94a3b8;font-size:14px;font-weight:500}.header-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.header-btn{color:#94a3b8;cursor:pointer;white-space:nowrap;background:#1e2235;border:1px solid #2d3148;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:500;transition:all .15s}.header-btn:hover{color:#e2e8f0;background:#2d3148}.header-btn-accent{color:#c7d2fe;background:#3730a3;border-color:#6366f1}.header-btn-accent:hover{color:#fff;background:#4338ca}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#1a1d2e;border:1px solid #2d3148;border-radius:16px;width:100%;max-width:400px;padding:32px;position:relative;box-shadow:0 32px 80px #0009}.modal-wide{max-width:560px}.modal-close{color:#64748b;cursor:pointer;background:0 0;border:none;font-size:16px;transition:color .15s;position:absolute;top:16px;right:16px}.modal-close:hover{color:#e2e8f0}.modal-title{color:#e2e8f0;margin-bottom:24px;font-size:18px;font-weight:700}.modal-form{flex-direction:column;gap:12px;display:flex}.modal-input{color:#e2e8f0;background:#0f1117;border:1px solid #2d3148;border-radius:8px;outline:none;padding:10px 14px;font-size:14px;transition:border-color .2s}.modal-input:focus{border-color:#6366f1}.modal-error{color:#f87171;background:#f871711a;border-radius:6px;padding:8px 12px;font-size:13px}.modal-message{color:#4ade80;text-align:center;background:#4ade801a;border-radius:8px;padding:12px;font-size:14px}.modal-switch{color:#64748b;text-align:center;margin-top:16px;font-size:13px}.modal-switch button{color:#6366f1;cursor:pointer;background:0 0;border:none;font-size:13px;text-decoration:underline}.plans-list{flex-direction:column;gap:10px;max-height:400px;display:flex;overflow-y:auto}.plan-row{background:#0f1117;border:1px solid #2d3148;border-radius:10px;justify-content:space-between;align-items:center;padding:12px 16px;transition:border-color .15s;display:flex}.plan-row:hover{border-color:#6366f1}.plan-name{color:#e2e8f0;font-size:14px;font-weight:600}.plan-meta{color:#64748b;margin-top:3px;font-size:11px}.plan-actions{gap:8px;display:flex}.plan-btn{color:#e2e8f0;cursor:pointer;background:#1a1d2e;border:1px solid #2d3148;border-radius:6px;padding:6px 14px;font-size:12px;transition:all .15s}.plan-btn:hover{background:#2d3148}.plan-btn-danger{color:#f87171;border-color:#f871714d}.plan-btn-danger:hover{background:#f871711a}html,body{height:auto!important;overflow-y:scroll!important}:root{--bg:#080b14;--bg2:#0d1020;--surface:#131729;--border:#1e2440;--accent:#7c6dfa;--accent2:#4fd1c5;--success:#4ade80;--text:#e8eaf6;--muted:#5a6080;--dim:#2a2f50}.landing{background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif}.landing-nav{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#080b14d9;justify-content:space-between;align-items:center;height:64px;padding:0 48px;display:flex;position:fixed;top:0;left:0;right:0}.landing-logo{color:var(--text);font-family:Syne,sans-serif;font-size:20px;font-weight:800}.landing-nav-links{align-items:center;gap:32px;list-style:none;display:flex}.landing-nav-links a{color:var(--muted);font-size:14px;text-decoration:none;transition:color .2s}.landing-nav-links a:hover{color:var(--text)}.nav-cta{border-radius:6px;padding:8px 20px;font-weight:500;background:var(--accent)!important;color:#fff!important}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:120px 24px 80px;display:flex;position:relative}.hero-glow{pointer-events:none;background:radial-gradient(circle,#7c6dfa1f 0%,#0000 70%);border-radius:50%;width:800px;height:800px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-glow2{pointer-events:none;background:radial-gradient(circle,#4fd1c514 0%,#0000 70%);border-radius:50%;width:400px;height:400px;position:absolute;top:30%;right:20%}.badge{color:var(--accent);background:#7c6dfa1f;border:1px solid #7c6dfa4d;border-radius:100px;align-items:center;gap:6px;margin-bottom:32px;padding:6px 14px;font-family:DM Mono,monospace;font-size:12px;animation:.6s both fadeUp;display:inline-flex}.hero h1{letter-spacing:-2px;margin-bottom:28px;font-family:Syne,sans-serif;font-size:clamp(40px,7vw,88px);font-weight:800;line-height:1;animation:.6s .1s both fadeUp}.hero h1 .accent{color:var(--accent)}.hero-sub{color:var(--muted);max-width:560px;margin-bottom:48px;font-size:clamp(16px,2vw,20px);font-weight:300;line-height:1.65;animation:.6s .2s both fadeUp}.hero-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;animation:.6s .3s both fadeUp;display:flex}.btn-hero{cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:14px 32px;font-size:15px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--accent);color:#fff;border:none}.btn-primary:hover{background:#6b5cf0;transform:translateY(-2px);box-shadow:0 8px 32px #7c6dfa59}.btn-outline{color:var(--text);border:1px solid var(--border);background:0 0}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}.sim-preview{width:min(820px,90vw);margin-top:80px;animation:.8s .4s both fadeUp}.sim-preview-frame{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 32px 80px #0009}.sim-preview-bar{background:var(--bg2);border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:12px 16px;display:flex}.dot{border-radius:50%;width:12px;height:12px;display:inline-block}.dot-red{background:#f87171}.dot-yellow{background:#fbbf24}.dot-green{background:#4ade80}.sim-preview-label{color:#475569;margin-left:8px;font-family:DM Mono,monospace;font-size:12px}.sim-canvas-wrap{background:#161929;position:relative}.sim-overlay-label{color:#7c6dfab3;font-family:DM Mono,monospace;font-size:11px;position:absolute;bottom:16px;right:16px}.section{max-width:1100px;margin:0 auto;padding:100px 24px}.section-alt{background:var(--bg2);max-width:100%;padding:100px 24px}.section-alt>*{max-width:1100px;margin-left:auto;margin-right:auto}.section-label{letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-family:DM Mono,monospace;font-size:11px}.section-title{letter-spacing:-1px;margin-bottom:20px;font-family:Syne,sans-serif;font-size:clamp(28px,4vw,48px);font-weight:800;line-height:1.1}.section-sub{color:var(--muted);max-width:520px;font-size:16px;font-weight:300;line-height:1.7}.steps{grid-template-columns:repeat(3,1fr);gap:32px;margin-top:60px;display:grid}.step{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;transition:border-color .2s,transform .2s}.step:hover{border-color:var(--accent);transform:translateY(-4px)}.step-num{color:var(--dim);margin-bottom:16px;font-family:Syne,sans-serif;font-size:48px;font-weight:800;line-height:1}.step h3{margin-bottom:10px;font-family:Syne,sans-serif;font-size:18px;font-weight:700}.step p{color:var(--muted);font-size:14px;line-height:1.6}.use-cases{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:60px;display:grid}.use-case{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .2s}.use-case:hover{border-color:var(--accent2);background:#4fd1c50a}.use-case-icon{margin-bottom:12px;font-size:28px}.use-case h4{margin-bottom:6px;font-family:Syne,sans-serif;font-size:16px;font-weight:700}.use-case p{color:var(--muted);font-size:13px;line-height:1.5}.pricing-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;display:grid}.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 28px;transition:transform .2s;position:relative}.pricing-card:hover{transform:translateY(-4px)}.pricing-card.featured{border-color:var(--accent);background:#7c6dfa0f}.pricing-badge{background:var(--accent);color:#fff;white-space:nowrap;border-radius:100px;padding:4px 14px;font-size:11px;font-weight:600;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.pricing-tier{letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:12px;font-family:DM Mono,monospace;font-size:12px}.pricing-price{margin-bottom:4px;font-family:Syne,sans-serif;font-size:40px;font-weight:800;line-height:1}.pricing-price span{color:var(--muted);font-size:16px;font-weight:400}.pricing-desc{color:var(--muted);margin-bottom:28px;font-size:13px;line-height:1.5}.pricing-features{flex-direction:column;gap:10px;margin-bottom:32px;list-style:none;display:flex}.pricing-features li{color:var(--text);align-items:flex-start;gap:8px;font-size:13px;display:flex}.pricing-features li:before{content:"✓";color:var(--success);flex-shrink:0;font-weight:700}.pricing-features li.dim{color:var(--muted)}.pricing-features li.dim:before{content:"–";color:var(--muted)}.pricing-btn{text-align:center;cursor:pointer;border:none;border-radius:8px;padding:12px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s;display:block}.pricing-btn-primary{background:var(--accent);color:#fff}.pricing-btn-primary:hover{background:#6b5cf0}.pricing-btn-outline{color:var(--text);border:1px solid var(--border);background:0 0}.pricing-btn-outline:hover{border-color:var(--accent);color:var(--accent)}.cta-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;background:linear-gradient(135deg,#7c6dfa26,#4fd1c514);padding:100px 24px}.cta-band h2{letter-spacing:-1.5px;margin-bottom:16px;font-family:Syne,sans-serif;font-size:clamp(28px,4vw,52px);font-weight:800}.cta-band p{color:var(--muted);margin-bottom:40px;font-size:16px}.landing-footer{border-top:1px solid var(--border);color:var(--muted);justify-content:space-between;align-items:center;padding:40px 48px;font-size:13px;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.landing-nav{padding:0 20px}.landing-nav-links{display:none}.steps,.pricing-grid{grid-template-columns:1fr}.landing-footer{text-align:center;flex-direction:column;gap:12px}}