
:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#eaf5ff;background:#08121e;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:#72e3bf}p{line-height:1.6}h1,h2,h3{letter-spacing:-.035em;margin:0}h2{font-size:1.36rem}h3{font-size:1.08rem}
.app{display:flex;min-height:100vh}.sidebar{width:252px;flex-shrink:0;background:#0a1725;border-right:1px solid #20354a;padding:30px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:13px;align-items:center;padding:4px 11px 42px}.brand-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#0ccfa3;color:#062a24;font-size:25px;font-weight:900}.brand strong{display:block;font-size:19px;letter-spacing:-.04em}.brand em{font-style:normal;color:#57e6bf}.brand small{color:#738fa6;font-size:10px;letter-spacing:.22em;font-weight:800}.sidebar-label{padding:0 14px 12px;font-size:10px;font-weight:800;letter-spacing:.17em;color:#7088a0}.nav{display:grid;gap:6px}.nav-link{width:100%;border:1px solid transparent;background:transparent;color:#a8c0d1;border-radius:11px;padding:13px 12px;text-align:left;font-size:14px;display:flex;align-items:center;gap:12px}.nav-link:hover,.nav-link.selected{background:#123044;color:#eafffa}.nav-link.selected{border-color:#215269}.nav-ico{font-size:19px;color:#6fe5c6}.nav-count{margin-left:auto;background:#27405a;border-radius:6px;padding:2px 7px;font-size:12px}.sidebar-bottom{margin-top:auto}.support-note{border:1px solid #24435a;border-radius:14px;background:#112738;padding:14px;color:#b1c7d8;font-size:12px;line-height:1.5}.support-note p{margin:6px 0 0;color:#7796aa}.dot{display:inline-block;width:8px;height:8px;background:#47deaf;border-radius:50%;margin-right:5px;box-shadow:0 0 0 4px #47deaf20}
.workspace{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{min-height:78px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1a3445;background:#0b1827}.breadcrumb{color:#8ba6bc;font-size:13px}.breadcrumb span{margin:0 9px;color:#47758d}.breadcrumb strong{color:#f0f7fe}.top-actions{display:flex;align-items:center;gap:16px}.mode-pill,.chat-chip,.coming{display:inline-flex;align-items:center;gap:4px;padding:7px 11px;color:#91c5b6;background:#15302f;border:1px solid #23564a;border-radius:100px;font-size:11px;font-weight:700}.avatar{height:37px;width:37px;border:1px solid #346477;border-radius:50%;background:#124051;color:#c4fff1;font-weight:800}
.main{width:100%;max-width:1300px;margin:auto;padding:44px clamp(18px,5%,68px) 64px;flex:1}.page{display:none;animation:appear .2s ease}.page.page-current{display:block}@keyframes appear{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{font-size:11px;letter-spacing:.16em;color:#53d7b7;font-weight:900;margin-bottom:20px}.sparkle{font-size:18px;color:#5ae2bc;margin-right:5px}
h1{font-size:clamp(40px,5.3vw,70px);line-height:1.1;max-width:830px;color:#f8fcff}h1 span{color:#5ee2bd}.lead{font-size:16px;color:#91aabd;max-width:645px;line-height:1.8;margin:22px 0 26px}.lead.narrow{max-width:590px}.small-h1{font-size:clamp(28px,3.4vw,43px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:42px}.primary,.outline,.ghost{padding:12px 19px;border-radius:10px;font-weight:750;font-size:13px;transition:background .17s}.primary{background:#4fe0b5;border:1px solid #4fe0b5;color:#083329}.primary:hover{background:#7af0ce}.outline{background:#102539;color:#d8eaf2;border:1px solid #2d4a60}.outline:hover{background:#19394e}.ghost{border:0;background:transparent;color:#9bb9c8;margin-top:14px}.full{width:100%}.text-action{border:0;padding:0;color:#59e2bd;background:transparent;font-size:13px;font-weight:800}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:48px}.metric,.step-card,.project-card,.billing-card,.integration,.chat-container,.notice{background:linear-gradient(135deg,#10273b,#0d1e2c);border:1px solid #213e53;border-radius:16px}.metric{padding:24px}.metric span{font-size:10px;color:#809aaf;font-weight:800;letter-spacing:.16em}.metric strong{display:block;font-size:36px;margin:10px 0 4px;letter-spacing:-.05em}.metric i{font-style:normal;font-size:17px;color:#7693a4}.metric small{font-size:12px;color:#829bad}
.section-line{margin-bottom:18px}.section-line h2{font-size:23px}.section-line p{font-size:13px;color:#849caf;margin-top:5px}.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.step-card{position:relative;min-height:250px;padding:24px}.step-num{position:absolute;right:22px;top:20px;color:#345064;font-weight:800;font-size:13px}.step-symbol{height:48px;width:48px;border:1px solid #235d59;display:grid;place-items:center;border-radius:12px;font-size:25px;color:#55dfb9;background:#103633;margin-bottom:15px}.step-card h3{margin:0 0 7px}.step-card p{font-size:13px;color:#8fabbc;min-height:66px;margin:6px 0 13px}
.page-heading,.detail-head{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:28px}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:15px}.project-card{display:flex;flex-direction:column;text-align:left;padding:25px;color:#fff;gap:9px;min-height:160px}.project-card:hover{border-color:#43c9a6}.project-card span{color:#4ae1b7;font-size:11px;letter-spacing:.14em}.project-card strong{font-size:19px;overflow-wrap:anywhere}.project-card small{color:#9cb1c1;overflow-wrap:anywhere}.empty-projects{border:1px dashed #2a4f65;border-radius:17px;padding:55px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px;background:#0d2030;color:#d7e9f4;grid-column:1/-1}.empty-projects p{color:#8da9bb;font-size:14px;margin:0}.empty-icon{font-size:43px;color:#55d8b7}
.project-detail .detail-head{margin-top:10px}.detail-head h2{font-size:25px}.muted{color:#8aa5b6;font-size:13px;overflow-wrap:anywhere}.chat-container{max-width:930px;overflow:hidden}.chat-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid #20394e;padding:20px 23px}.chat-chip{margin-left:auto;color:#c3b594;background:#352d24;border-color:#5c4b31}.messages{height:min(430px,48vh);min-height:260px;overflow:auto;padding:23px;display:flex;flex-direction:column;gap:12px}.bubble{padding:13px 16px;max-width:min(90%,700px);border-radius:14px;background:#203b51;color:#dceaf3;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.bubble.user{align-self:flex-end;background:#155b4d;color:#eafff7}.chat-form{border-top:1px solid #20394e;padding:18px}.chat-form textarea{width:100%;resize:vertical;min-height:95px;border:1px solid #31546b;border-radius:10px;padding:13px;color:#f2fff9;background:#0a1c2c;outline:none}.chat-form textarea:focus,.field:focus{border-color:#53d6b4}.chat-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}.chat-footer small{color:#8aa8ba;line-height:1.5}
.integration-list{display:grid;gap:13px;margin-top:28px}.integration{display:flex;align-items:center;gap:18px;padding:21px}.integration-mark{width:49px;height:49px;flex-shrink:0;display:grid;place-items:center;border-radius:13px;font-weight:900;font-size:19px;color:white;background:#26394f}.integration-mark.supa{background:#134c39;color:#69efbb}.integration-mark.lov{background:#533368;color:#f1b6ff}.integration-body{flex:1}.integration-body h3{margin-bottom:3px}.integration-body p{font-size:13px;color:#8faabc;margin:2px 0 7px}.coming{font-size:10px;background:#1e2d3c;border-color:#334b61;color:#a6bdc9}.notice{padding:20px 25px;margin-top:25px}.notice strong{color:#74e6c4}.notice p{font-size:13px;color:#93adbc;margin-bottom:0}.billing-card{max-width:650px;padding:30px;margin-top:30px}.billing-icon{font-size:44px;color:#4fe0b5}.billing-card h2{font-size:24px}.billing-card p{color:#a3bbca;font-size:14px}.billing-foot{display:flex;align-items:center;justify-content:space-between;margin-top:25px;gap:15px}.footer{border-top:1px solid #21394e;color:#738da1;font-size:12px;padding:21px 5%;display:flex;justify-content:space-between;gap:12px}.mobile-menu{display:none}
.modal{width:min(95vw,500px);border-radius:17px;border:1px solid #31546d;background:#102536;color:#eff9ff;box-shadow:0 40px 100px #000b;padding:24px}.modal::backdrop{background:#030913bb}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-head h2{font-size:20px}.icon-button{font-size:26px;color:#a9c3d4;background:none;border:0}.modal p,.modal li{line-height:1.65;color:#9eb7c6;font-size:14px}.modal form{display:grid;gap:12px}.modal label{font-size:12px;font-weight:750;color:#bcd2df}.field{display:block;width:100%;background:#0a1d2d;color:white;border:1px solid #335168;border-radius:10px;padding:12px;outline:none}.toast{position:fixed;bottom:22px;right:22px;z-index:200;background:#174636;color:#e0fff6;border:1px solid #42c998;border-radius:11px;padding:15px 20px;max-width:90vw;box-shadow:0 10px 35px #0007}.hidden{display:none!important}
@media(max-width:980px){.metric-grid,.steps-grid{grid-template-columns:1fr 1fr}.steps-grid .step-card:last-child{grid-column:span 2}.sidebar{width:220px}.main{padding:33px 4%}}@media(max-width:700px){.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:150;height:100dvh;transform:translateX(-102%);transition:transform .2s;box-shadow:5px 0 40px #0009}.sidebar.open{transform:none}.mobile-menu{display:block;background:none;border:0;color:white;font-size:22px;margin-right:8px}.topbar{min-height:64px;padding:0 16px}.breadcrumb{margin-right:auto}.main{padding:30px 16px}.metric-grid,.steps-grid{grid-template-columns:1fr}.steps-grid .step-card:last-child{grid-column:auto}.page-heading,.detail-head{align-items:flex-start;flex-direction:column}.metric{padding:18px}.step-card{min-height:0}.integration{align-items:flex-start;flex-wrap:wrap}.integration-body{flex-basis:calc(100% - 75px)}.integration>.outline{margin-left:65px}.chat-footer{flex-direction:column;align-items:stretch}.chat-footer .primary{width:100%}.chat-chip{margin-left:0}.footer{flex-direction:column;font-size:11px}.mode-pill{font-size:10px}h1{font-size:42px}.lead{font-size:14px}}
