*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f6f8;color:#111318;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;border-bottom:1px solid #dddfe4;background:#f8f9fa;position:sticky;top:0;z-index:10}.brand{font-size:20px;font-weight:800;letter-spacing:-.6px;color:#111;text-decoration:none}.brand span{font-weight:400}.nav nav{display:flex;gap:28px}.nav nav a,.nav-cta{color:#34373d;text-decoration:none;font-size:14px}.nav-cta{border:1px solid #bfc2c8;border-radius:999px;padding:9px 15px;background:#fff}.hero{min-height:650px;padding:110px 9vw 90px;max-width:1250px;margin:auto}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#656a73;margin-bottom:18px}.hero h1{font-size:clamp(48px,7vw,92px);line-height:.98;letter-spacing:-5px;margin:0;max-width:950px}.hero h1 span{color:#777c84}.hero-copy{font-size:20px;max-width:680px;color:#5b6068;margin:30px 0}.actions{display:flex;gap:12px}.button{display:inline-block;padding:13px 19px;border-radius:8px;text-decoration:none;font-weight:700;font-size:14px}.primary{background:#111318;color:#fff}.secondary{border:1px solid #c8cbd0;color:#222;background:#fff}.hero-note{margin-top:55px;color:#6c7077;font-size:13px}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#111;margin-right:8px}.section{padding:95px 9vw;max-width:1250px;margin:auto}.section.dark{max-width:none;background:#111318;color:#fff}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:42px}.section-head h2{font-size:42px;line-height:1.05;letter-spacing:-2px;margin:0}.section-head>p{max-width:430px;color:#747981;margin:0}.dark .section-head>p{color:#aeb2ba}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border:1px solid #e0e2e6;border-radius:14px;padding:28px;min-height:230px}.icon{font-size:26px;margin-bottom:45px}.card h3{margin:0 0 8px;font-size:21px}.card p{color:#686d75;margin:0 0 20px}.tags{display:flex;gap:7px}.tags span{font-size:11px;background:#eef0f2;padding:5px 8px;border-radius:5px;color:#666b73}.metrics{max-width:1080px;margin:0 auto 40px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #353941;border-bottom:1px solid #353941}.metrics div{padding:26px;border-right:1px solid #353941}.metrics div:last-child{border:0}.metrics strong{display:block;font-size:35px;letter-spacing:-1px}.metrics span{color:#999ea7;font-size:12px}.benchmark-card{max-width:1080px;margin:auto;background:#191c21;border:1px solid #30343b;border-radius:12px;overflow:hidden}.terminal-top{height:42px;border-bottom:1px solid #30343b;display:flex;align-items:center;gap:7px;padding:0 15px;color:#777d87;font-size:11px}.terminal-top span{width:8px;height:8px;border-radius:50%;background:#4d5158}.terminal-top b{margin-left:8px;font-weight:500}.benchmark-card pre{padding:25px;margin:0;overflow:auto;color:#d8dbe0;font-size:13px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.steps b{font-size:12px;color:#858a92}.steps h3{margin:30px 0 8px}.steps p{color:#686d75;font-size:14px}.cta{margin:30px auto 90px;max-width:1080px;padding:75px;text-align:center;background:#e5e7ea;border-radius:18px}.cta h2{font-size:46px;letter-spacing:-2px;line-height:1.05;max-width:720px;margin:0 auto 15px}.cta p{color:#666b73;margin-bottom:28px}footer{border-top:1px solid #dddfe4;padding:25px 9vw;display:flex;justify-content:space-between;color:#7b8088;font-size:12px}@media(max-width:800px){.nav nav{display:none}.hero{padding-top:75px}.hero h1{letter-spacing:-3px}.section-head{display:block}.section-head>p{margin-top:18px}.grid,.steps{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.metrics div:nth-child(2){border-right:0}.metrics div:nth-child(3),.metrics div:nth-child(4){border-top:1px solid #353941}.cta{margin:20px 5vw 60px;padding:45px 25px}.cta h2{font-size:34px}footer{display:block}footer span{display:block;margin:5px 0}}
.page{max-width:1080px;margin:auto;padding:90px 6vw 120px}.page h1{font-size:clamp(46px,6vw,76px);letter-spacing:-4px;line-height:1;margin:0 0 20px}.lead{font-size:19px;color:#666b73;max-width:700px;margin:0 0 40px}.toolbar{display:flex;gap:10px;margin:40px 0 24px}.toolbar input,.toolbar select{border:1px solid #d5d8dd;background:#fff;border-radius:8px;padding:12px 14px;font:inherit;color:#333}.toolbar input{flex:1}.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.behavior-card{background:#fff;border:1px solid #dfe1e5;border-radius:14px;padding:25px;color:#17191d;text-decoration:none;transition:.18s}.behavior-card:hover{transform:translateY(-2px);border-color:#aaa}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center}.behavior-card .icon{width:38px;height:38px;border-radius:9px;background:#eef0f2;display:grid;place-items:center;margin:0;font-weight:800}.pill{font-size:11px;background:#f0f1f3;padding:5px 8px;border-radius:999px;color:#626770}.behavior-card h3{font-size:22px;margin:35px 0 8px}.behavior-card p{color:#6b7078;min-height:52px}.card-bottom{border-top:1px solid #eceef0;padding-top:15px;font-size:12px;color:#777}.card-bottom strong{color:#202329}.detail-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:35px;margin-top:55px}.detail-grid h2,.runner h2{font-size:25px;letter-spacing:-1px}.step-list{list-style:none;padding:0;margin:20px 0}.step-list li{display:flex;gap:20px;border-top:1px solid #dddfe3;padding:17px 0}.step-list b{color:#888;font-size:12px}.metric-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dddfe3;border-radius:12px;overflow:hidden}.metric-grid div{padding:25px;border-right:1px solid #dddfe3;border-bottom:1px solid #dddfe3}.metric-grid div:nth-child(even){border-right:0}.metric-grid div:nth-last-child(-n+2){border-bottom:0}.metric-grid strong{display:block;font-size:30px}.metric-grid span{font-size:12px;color:#777}.runner{margin-top:55px;background:#111318;color:#fff;border-radius:15px;padding:32px;display:grid;grid-template-columns:1fr auto;gap:20px}.runner p{color:#aeb2ba;max-width:650px}.run-result{grid-column:1/-1;border-top:1px solid #30343b;padding-top:20px;display:flex;gap:20px;align-items:center;color:#dfe2e6}.spinner{width:13px;height:13px;border:2px solid #666;border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.benchmark-table{background:#fff;border:1px solid #dddfe3;border-radius:12px;overflow:hidden;margin-top:50px}.table-row{display:grid;grid-template-columns:2fr repeat(4,1fr);padding:18px 20px;border-top:1px solid #e4e6e9;gap:10px}.table-row.head{border:0;background:#f0f1f3;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#777;font-weight:800}.table-row span:not(:first-child){text-align:right}.empty{padding:50px;text-align:center;color:#777;background:#fff;border:1px dashed #ccc;border-radius:12px}@media(max-width:800px){.library-grid,.detail-grid{grid-template-columns:1fr}.runner{grid-template-columns:1fr}.table-row{grid-template-columns:1.5fr repeat(4,.7fr);font-size:12px;padding:14px 10px}.page{padding-top:60px}.toolbar{flex-direction:column}.nav{padding:0 5vw}}
.builder-form{max-width:850px;display:flex;flex-direction:column;gap:14px;margin:35px 0}.builder-form textarea{min-height:170px;border:1px solid #d5d8dd;border-radius:12px;padding:18px;font:inherit;resize:vertical;background:#fff}.builder-result{max-width:850px;background:#fff;border:1px solid #dddfe3;border-radius:14px;padding:30px;margin-top:30px}.run-table{background:#fff;border:1px solid #dddfe3;border-radius:12px;overflow:hidden}.run-row{display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:12px;padding:17px 20px;border-top:1px solid #e5e7ea}.run-row.head{border:0;background:#f0f1f3;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#777;font-weight:800}.run-row strong{color:#287a49}.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}.doc-grid article{background:#fff;border:1px solid #dddfe3;border-radius:12px;padding:25px}.doc-grid pre{background:#f0f1f3;padding:16px;border-radius:8px;overflow:auto;font-size:12px}@media(max-width:800px){.doc-grid{grid-template-columns:1fr}.run-row{grid-template-columns:1fr 1fr}.run-row span:nth-child(3),.run-row span:nth-child(4){text-align:left}}.auth-page{min-height:100vh;display:grid;place-items:center;padding:30px}.auth-card{width:min(500px,100%);background:#fff;border:1px solid #dddfe3;border-radius:16px;padding:40px}.auth-card h1{font-size:48px;letter-spacing:-2px;line-height:1.02;margin:15px 0}.auth-card p{color:#686d75;margin-bottom:28px}.workspace-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:35px 0 55px}.workspace-card,.price-card{background:#fff;border:1px solid #dddfe3;border-radius:14px;padding:26px}.workspace-card span,.price-card>span{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#777}.workspace-card strong{display:block;font-size:32px;margin:18px 0 2px}.workspace-card small{color:#777}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:45px}.price-card{display:flex;flex-direction:column;min-height:360px}.price-card.featured{border-color:#222}.price-card>strong{font-size:42px;letter-spacing:-2px;margin:25px 0 8px}.price-card>strong span{font-size:14px;letter-spacing:0}.price-card p{color:#666}.price-card ul{padding-left:18px;color:#555;line-height:2;margin-bottom:30px}.price-card .button{margin-top:auto;text-align:center}@media(max-width:800px){.workspace-grid,.pricing-grid{grid-template-columns:1fr}}.code-block{background:#111318;color:#e5e7ea;padding:20px;border-radius:10px;overflow:auto;font-size:13px;line-height:1.6}
#statusbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.run-result{min-height:22px}.builder-result table{width:100%;border-collapse:collapse}.builder-result th,.builder-result td{padding:12px 10px;border-bottom:1px solid #e5e7ea;text-align:left}.builder-result th{font-size:11px;text-transform:uppercase;color:#777;letter-spacing:1px}.toolbar{align-items:center}
/* 2026 workspace polish */
:root{--bg:#f7f8fa;--surface:#fff;--ink:#0b0d10;--muted:#6b7280;--line:#e5e7eb;--ok:#15803d;--warn:#b45309;--danger:#b91c1c}
body{background:var(--bg);color:var(--ink)}.nav{height:70px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(17,24,39,.08)}
.nav nav a{transition:.18s;color:#4b5563}.nav nav a:hover,.nav nav a.active{color:#111827}.button{border-radius:10px;transition:transform .15s,box-shadow .15s;cursor:pointer}.button:hover{transform:translateY(-1px)}
.builder-result,.workspace-card,.price-card,.behavior-card,.card{box-shadow:0 1px 2px rgba(15,23,42,.03),0 12px 32px rgba(15,23,42,.035)}
input,select,textarea{outline:none;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:#6b7280!important;box-shadow:0 0 0 3px rgba(107,114,128,.12)}
.status-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#f3f4f6;color:#4b5563}.status-pill.completed{background:#ecfdf3;color:var(--ok)}.status-pill.running{background:#eff6ff;color:#1d4ed8}.status-pill.queued{background:#fff7ed;color:var(--warn)}.status-pill.failed,.status-pill.cancelled{background:#fef2f2;color:var(--danger)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0}.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}.kpi strong{display:block;font-size:28px;letter-spacing:-1px}.kpi span{font-size:12px;color:var(--muted)}
.sim-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}.sim-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
@media(max-width:800px){.sim-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}}
/* Product landing page */
.hero-product{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.7fr);gap:55px;align-items:center;min-height:720px}
.hero-copy-wrap{max-width:850px}.hero-product .hero-copy{max-width:720px}.hero-trust{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:34px;color:#737983;font-size:12px}.live-dot{width:8px;height:8px;border-radius:50%;background:#9ca3af;display:inline-block}.platform-live .live-dot{background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.10)}
.hero-product-card{background:#111318;color:#fff;border:1px solid #292d34;border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(15,23,42,.14)}
.product-card-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #30343b;padding-bottom:18px;font-size:10px;letter-spacing:1.5px;color:#9aa0aa;font-weight:800}
.product-flow{padding-top:14px}.product-flow>div{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:15px 0}.product-flow b{grid-row:1/3;font-size:11px;color:#777d87}.product-flow span{font-size:11px;color:#8e949e}.product-flow strong{font-size:14px}.product-flow i{display:block;text-align:center;color:#5d636d;font-style:normal}.flow-result{background:#191d23;border:1px solid #30343b;border-radius:10px;padding:14px!important}.proof-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.proof-strip div{padding:24px 5vw;border-right:1px solid var(--line)}.proof-strip div:last-child{border-right:0}.proof-strip strong,.proof-strip span{display:block}.proof-strip strong{font-size:14px}.proof-strip span{font-size:11px;color:#7a8089;margin-top:4px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:30px;min-height:270px;box-shadow:0 1px 2px rgba(15,23,42,.03)}.feature-number{font-size:11px;font-weight:800;letter-spacing:1px;color:#8a9099}.feature-card h3{font-size:25px;margin:48px 0 10px}.feature-card p{color:#6b7078;max-width:340px}.feature-card a{display:inline-block;margin-top:12px;color:#111;text-decoration:none;font-weight:750;font-size:13px}.product-demo{padding-bottom:100px}.terminal-product{max-width:950px;margin:10px auto 0;background:#15181d;border:1px solid #30343b;border-radius:14px;overflow:hidden}.terminal-product pre{margin:0;padding:28px;overflow:auto;font-size:13px;line-height:1.8;color:#dfe2e7}.term-muted{color:#858b95}.demo-actions{max-width:950px;margin:20px auto 0;display:flex;gap:10px}.dark-button{border-color:#454a53;background:transparent;color:#fff}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.audience-grid article{padding:30px;border-top:2px solid #111318}.audience-grid span{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#7b818a}.audience-grid h3{font-size:24px;margin:25px 0 8px}.audience-grid p{color:#6b7078}.workflow-section{padding-top:35px}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.workflow div{padding:28px 24px;border-right:1px solid var(--line)}.workflow div:last-child{border-right:0}.workflow b,.workflow strong,.workflow span{display:block}.workflow b{font-size:11px;color:#8a9099}.workflow strong{font-size:16px;margin:28px 0 8px}.workflow span{font-size:13px;color:#747a83}.cta-product{background:#111318;color:#fff}.cta-product .eyebrow{color:#9aa0aa}.cta-product p{color:#b1b6bf}.cta-product small{display:block;color:#858b95;margin-top:18px}.center-actions{justify-content:center}.cta-product .secondary{background:transparent;color:#fff;border-color:#454a53}footer a{color:inherit;text-decoration:none}@media(max-width:900px){.hero-product{grid-template-columns:1fr;min-height:auto;padding-top:75px}.hero-product-card{margin-top:10px}.proof-strip{grid-template-columns:1fr 1fr}.proof-strip div:nth-child(2){border-right:0}.proof-strip div:nth-child(n+3){border-top:1px solid var(--line)}.product-grid,.audience-grid,.workflow{grid-template-columns:1fr}.workflow div{border-right:0;border-bottom:1px solid var(--line)}.workflow div:last-child{border-bottom:0}.demo-actions{flex-wrap:wrap}}
@media(max-width:600px){.proof-strip{grid-template-columns:1fr}.proof-strip div{border-right:0!important;border-bottom:1px solid var(--line)}.proof-strip div:last-child{border-bottom:0}.hero-product h1{font-size:52px}.hero-trust{align-items:flex-start;flex-direction:column;gap:5px}.demo-actions .button{width:100%;text-align:center}}
/* Refined visual system v2 */
:root{
--bg:#f5f7fb;--surface:#ffffff;--surface-soft:#f8faff;--ink:#101828;--muted:#667085;
--line:#e4e7ec;--primary:#5b5bd6;--primary-2:#7c6cf2;--primary-soft:#eeedff;
--cyan:#22b8cf;--success:#12b76a;--warning:#f79009;--danger:#f04438;
--dark:#101828;--dark-2:#171d2b;
}
body{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.nav{height:72px;padding:0 clamp(20px,5vw,72px);background:rgba(255,255,255,.82);border-bottom:1px solid rgba(16,24,40,.07);box-shadow:0 4px 24px rgba(16,24,40,.04)}
.brand{font-size:21px;color:var(--ink)}.brand span{color:var(--primary);font-weight:650}
.nav nav{gap:24px}.nav nav a,.nav-cta{color:#475467;font-weight:600}.nav nav a:hover,.nav nav a.active{color:var(--primary)}
.nav-cta{border:0;background:var(--primary);color:#fff!important;padding:10px 17px;box-shadow:0 8px 20px rgba(91,91,214,.18)}
.hero-product{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 35%,rgba(124,108,242,.14),transparent 32%),radial-gradient(circle at 92% 70%,rgba(34,184,207,.10),transparent 28%)}
.hero-product:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(124,108,242,.07);filter:blur(8px);right:-210px;top:30px;pointer-events:none}
.eyebrow{color:var(--primary);font-weight:850;letter-spacing:2.2px}.hero h1{color:var(--ink);letter-spacing:-5.5px}.hero h1 span{color:#667085}
.hero-copy{color:#475467}.hero-trust{color:#667085}.live-dot{background:#98a2b3}.platform-live .live-dot{background:var(--success);box-shadow:0 0 0 5px rgba(18,183,106,.10)}
.button{border-radius:11px;padding:13px 19px;box-shadow:none}.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 10px 24px rgba(91,91,214,.18)}.primary:hover{box-shadow:0 14px 30px rgba(91,91,214,.24)}.secondary{background:#fff;border:1px solid #d0d5dd;color:var(--ink)}.secondary:hover{border-color:#aeb5c2;background:#fbfcff}
.hero-product-card{background:linear-gradient(145deg,#101828,#1b2333);border:1px solid #2b3548;box-shadow:0 28px 70px rgba(16,24,40,.20)}
.product-card-top{border-color:#303b50;color:#98a2b3}.product-flow i{color:#667085}.flow-result{background:linear-gradient(135deg,rgba(91,91,214,.16),rgba(34,184,207,.07));border-color:#35405a}
.status-pill.running{background:rgba(34,184,207,.12);color:#67e8f9}
.proof-strip{background:#fff;border-color:var(--line)}.proof-strip div{border-color:var(--line)}.proof-strip strong{color:var(--ink)}
.section{padding:100px clamp(24px,8vw,120px)}.section-head h2{color:var(--ink);font-size:clamp(32px,4vw,48px);letter-spacing:-2.4px}.section-head>p{color:var(--muted)}
.grid,.product-grid,.audience-grid{gap:20px}.card,.feature-card,.audience-grid article,.builder-result,.workspace-card,.price-card,.behavior-card,.sim-card{border-color:var(--line);border-radius:18px;box-shadow:0 10px 30px rgba(16,24,40,.045)}
.card:hover,.feature-card:hover,.behavior-card:hover{border-color:#c7c9f5;box-shadow:0 16px 36px rgba(91,91,214,.08)}
.feature-number{color:var(--primary)}.feature-card h3{color:var(--ink)}.feature-card p,.audience-grid p,.card p{color:var(--muted)}.feature-card a{color:var(--primary)}
.product-demo{background:linear-gradient(145deg,#0f172a,#151f33)}.product-demo .section-head h2{color:#fff}.product-demo .eyebrow{color:#a9a2ff}.product-demo .section-head>p{color:#aeb8c8}
.terminal-product{background:#0b1220;border-color:#263248;box-shadow:0 24px 60px rgba(0,0,0,.2)}.terminal-top{border-color:#263248;color:#8793a8}.terminal-product pre{color:#dbe5f4}.term-muted{color:#7d8ba3}.dark-button{border-color:#475467;color:#fff;background:transparent}
.workflow{border-color:var(--line)}.workflow div{border-color:var(--line)}.workflow b{color:var(--primary)}.workflow strong{color:var(--ink)}.workflow span{color:var(--muted)}
.cta-product{background:linear-gradient(135deg,#111827,#20264a);box-shadow:0 24px 60px rgba(16,24,40,.12)}.cta-product .eyebrow{color:#b8b2ff}.cta-product small{color:#98a2b3}
footer{border-color:var(--line);color:#667085;background:#fff}
.page{padding-top:78px}.page h1{color:var(--ink)}.lead{color:var(--muted)}
.toolbar input,.toolbar select,.builder-form textarea{border-color:#d0d5dd;background:#fff}.toolbar input:focus,.toolbar select:focus,.builder-form textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 4px rgba(91,91,214,.10)}
.pill,.tags span{background:var(--primary-soft);color:#514ab3}.behavior-card .icon{background:var(--primary-soft);color:var(--primary)}
.metric-grid,.benchmark-table,.run-table{border-color:var(--line)}.metric-grid strong{color:var(--ink)}.metric-grid span{color:var(--muted)}
.runner{background:linear-gradient(145deg,#111827,#1d2638);border-radius:18px;box-shadow:0 20px 50px rgba(16,24,40,.14)}
.status-pill.completed{background:#ecfdf3;color:#067647}.status-pill.queued{background:#fffaeb;color:#b54708}.status-pill.failed,.status-pill.cancelled{background:#fef3f2;color:#b42318}
.kpi{border-color:var(--line);border-radius:16px}.kpi strong{color:var(--ink)}
.price-card.featured{border:1.5px solid var(--primary);box-shadow:0 18px 45px rgba(91,91,214,.12)}
.auth-card{border-color:var(--line);border-radius:20px;box-shadow:0 20px 60px rgba(16,24,40,.08)}
.code-block{background:#101828;border:1px solid #253148}
@media(max-width:900px){.nav nav{display:none}.section{padding:75px 24px}.hero-product{padding-left:24px;padding-right:24px}}
/* Accessibility + layout polish */
.skip-link{position:fixed;left:16px;top:-60px;z-index:9999;background:#fff;color:#101828;border:2px solid var(--primary);padding:10px 14px;border-radius:10px;font-weight:800;text-decoration:none}.skip-link:focus{top:16px}.nav a:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(91,91,214,.28);outline-offset:3px}.muted,.section-note{color:var(--muted)}
/* Registry + report polish */
.registry-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:stretch;margin-bottom:24px;padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#fff,rgba(238,237,255,.65));box-shadow:0 14px 40px rgba(16,24,40,.05)}
.registry-hero h1{margin:0;font-size:clamp(36px,5vw,58px);letter-spacing:-3px}.registry-hero .lead{margin:14px 0 18px;max-width:720px}.registry-trust{display:flex;flex-wrap:wrap;gap:9px}.registry-trust span{font-size:12px;font-weight:700;color:#475467;background:#fff;border:1px solid var(--line);padding:7px 10px;border-radius:999px}.registry-summary{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:3px 14px;padding:22px;border-radius:16px;background:#101828;color:#fff}.registry-summary strong{font-size:30px;line-height:1.1}.registry-summary span{font-size:11px;color:#98a2b3}.registry-status{margin:16px 0;color:var(--muted);font-size:12px;font-weight:700}.registry-card{position:relative}.registry-meta{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.registry-meta span{font-size:10px;font-weight:800;color:#667085;background:#f8f9fc;border:1px solid var(--line);padding:5px 7px;border-radius:7px}.registry-card .card-bottom strong{color:var(--primary)}
.report-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.report-status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800}.report-status.complete{background:#ecfdf3;color:#067647}.report-status.running{background:#eff8ff;color:#175cd3}.report-status.failed{background:#fef3f2;color:#b42318}.report-section{margin-top:20px}.report-table{width:100%;border-collapse:collapse}.report-table th,.report-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.report-table th{font-size:11px;color:#667085;text-transform:uppercase;letter-spacing:.6px}.report-kicker{font-size:11px;color:var(--primary);font-weight:850;letter-spacing:1.6px}.report-note{font-size:12px;color:var(--muted)}
@media(max-width:700px){.registry-hero{grid-template-columns:1fr;padding:22px}.registry-summary{grid-template-columns:1fr 1fr}.report-header{flex-direction:column}}
/* UI/UX refinement */
:root{--bg:#f5f6f8;--surface:#fff;--ink:#111318;--muted:#666b73;--line:#dfe2e7;--soft:#eef0f3;--accent:#111318;--radius:14px}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.nav{backdrop-filter:blur(14px);background:rgba(248,249,250,.92);padding-left:max(24px,6vw);padding-right:max(24px,6vw)}
.nav a{transition:color .16s ease,opacity .16s ease}.nav nav a:hover,.nav-cta:hover{color:#000}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.button:hover{transform:translateY(-1px)}.button:active{transform:translateY(0)}.button:focus-visible,.nav a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #aeb4bd;outline-offset:2px}
.primary:hover{box-shadow:0 8px 24px rgba(17,19,24,.16)}
.secondary:hover{border-color:#999ea7;background:#fafafa}
.hero-product{padding-top:clamp(72px,10vw,120px)}
.hero-product-card{box-shadow:0 18px 55px rgba(17,19,24,.08)}
.proof-strip{max-width:1250px;margin:0 auto;padding:0 9vw 70px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.proof-strip>div,.audience-grid article,.workflow>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.proof-strip strong,.proof-strip span{display:block}.proof-strip strong{font-size:14px}.proof-strip span{font-size:12px;color:var(--muted);margin-top:5px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.feature-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;transition:transform .18s ease,box-shadow .18s ease}.feature-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(17,19,24,.07)}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.audience-grid article>span{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#777}.audience-grid h3{font-size:23px;margin:18px 0 8px}.audience-grid p{color:var(--muted);margin:0}
.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.workflow>div{display:flex;flex-direction:column;gap:9px}.workflow b{font-size:11px;color:#858a92}.workflow span{font-size:13px;color:var(--muted)}
.registry-hero{display:grid;grid-template-columns:1fr 250px;gap:30px;align-items:stretch;margin:10px 0 25px;padding:34px;border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:0 10px 35px rgba(17,19,24,.04)}.registry-hero h1{margin-bottom:14px}.registry-trust{display:flex;flex-wrap:wrap;gap:8px}.registry-trust span{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:#555}.registry-summary{display:grid;align-content:center;text-align:center;border-left:1px solid var(--line);padding-left:28px}.registry-summary strong{font-size:34px;letter-spacing:-1px}.registry-summary span{font-size:11px;color:#777;margin-bottom:12px}.registry-status{margin:0 0 18px;padding:10px 13px;border-radius:9px;background:#eef0f3;color:#555;font-size:12px}
.library-grid{gap:15px}.behavior-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.behavior-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(17,19,24,.07);border-color:#b8bcc3}
.sim-grid{gap:18px}.sim-card{box-shadow:0 8px 28px rgba(17,19,24,.04)}
.sim-card label{font-size:12px;font-weight:700;color:#50555d}.sim-card input,.sim-card select{transition:border-color .16s ease,box-shadow .16s ease}.sim-card input:focus,.sim-card select:focus{border-color:#8d929b!important;box-shadow:0 0 0 3px rgba(141,146,155,.12)}
.workspace-grid{gap:15px}.workspace-card{box-shadow:0 8px 28px rgba(17,19,24,.04);transition:transform .16s ease}.workspace-card:hover{transform:translateY(-2px)}
.price-card{transition:transform .18s ease,box-shadow .18s ease}.price-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(17,19,24,.07)}
.empty{border:1px dashed #cdd1d7;border-radius:12px;background:#fafbfc}
@media(max-width:800px){.proof-strip,.product-grid,.audience-grid,.workflow{grid-template-columns:1fr 1fr}.registry-hero{grid-template-columns:1fr}.registry-summary{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;grid-template-columns:1fr 1fr}.registry-summary span{margin:0}.hero-product-card{margin-top:28px}}
@media(max-width:560px){.proof-strip,.product-grid,.audience-grid,.workflow{grid-template-columns:1fr}.page{padding-top:60px}.toolbar{flex-wrap:wrap}.toolbar input,.toolbar select{min-width:0;width:100%}.actions{flex-direction:column;align-items:stretch}.button{width:100%}.registry-hero{padding:24px}.registry-hero h1{font-size:44px}.nav{height:68px}}
/* Landing page conversion polish */
.hero-tip{margin-top:22px;display:flex;align-items:center;gap:12px;max-width:720px;padding:12px 14px;border:1px solid #e4e7ec;border-radius:12px;background:rgba(255,255,255,.72);box-shadow:0 8px 28px rgba(16,24,40,.045)}
.hero-tip>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:13px}.hero-tip div{min-width:0;flex:1}.hero-tip b,.hero-tip small{display:block}.hero-tip b{font-size:11px;letter-spacing:.6px;text-transform:uppercase}.hero-tip small{margin-top:2px;color:var(--muted);font-size:12px;line-height:1.45}.hero-tip a{white-space:nowrap;color:var(--primary);font-size:12px;font-weight:800;text-decoration:none}.micro-tips{padding-top:28px;padding-bottom:28px}.tip-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 8px 30px rgba(16,24,40,.035)}.tip-row>div{padding:22px 25px;border-right:1px solid var(--line)}.tip-row>div:last-child{border-right:0}.tip-row span{font-size:10px;letter-spacing:1.4px;font-weight:800;color:var(--primary)}.tip-row strong{display:block;margin-top:8px;font-size:16px}.tip-row p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5}@media(max-width:800px){.hero-tip{align-items:flex-start;flex-wrap:wrap}.hero-tip a{margin-left:40px}.tip-row{grid-template-columns:1fr}.tip-row>div{border-right:0;border-bottom:1px solid var(--line)}.tip-row>div:last-child{border-bottom:0}}
/* =========================================================
HUMANOIDBEHAVIOR — UI/UX SYSTEM v3
High-contrast robotics console / premium SaaS
========================================================= */
:root{
--hb-bg:#f6f7fb;
--hb-surface:#ffffff;
--hb-ink:#101828;
--hb-muted:#667085;
--hb-subtle:#98a2b3;
--hb-line:#e4e7ec;
--hb-primary:#635bff;
--hb-primary-2:#7c6cf2;
--hb-cyan:#17b6c9;
--hb-dark:#0b1020;
--hb-dark-2:#11182a;
--hb-shadow:0 18px 50px rgba(16,24,40,.08);
}
html{background:var(--hb-bg)}
body{
background:
radial-gradient(circle at 8% -5%,rgba(99,91,255,.07),transparent 28rem),
radial-gradient(circle at 96% 12%,rgba(23,182,201,.055),transparent 24rem),
var(--hb-bg);
color:var(--hb-ink);
}
body:before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.35;
background-image:linear-gradient(rgba(16,24,40,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,24,40,.025) 1px,transparent 1px);
background-size:36px 36px;
}
.nav{
height:74px;padding:0 clamp(18px,5vw,76px);
background:rgba(255,255,255,.78);backdrop-filter:blur(20px);
border-bottom:1px solid rgba(16,24,40,.08);
box-shadow:0 6px 24px rgba(16,24,40,.035);
}
.brand{font-weight:850;letter-spacing:-.8px}
.brand span{color:var(--hb-primary)}
.nav nav{gap:22px}
.nav nav a{font-size:13px;font-weight:700;color:#475467}
.nav nav a:hover,.nav nav a.active{color:var(--hb-primary)}
.nav-cta{
border:1px solid rgba(99,91,255,.15);background:linear-gradient(135deg,var(--hb-primary),var(--hb-primary-2));
color:#fff!important;border-radius:10px;padding:10px 16px;font-weight:800;
box-shadow:0 9px 22px rgba(99,91,255,.20)
}
.hero-product{min-height:760px;padding-top:115px;padding-bottom:105px}
.hero-product:after{
content:"";position:absolute;width:680px;height:680px;right:-300px;top:80px;border:1px solid rgba(99,91,255,.10);
border-radius:50%;box-shadow:0 0 0 80px rgba(99,91,255,.025),0 0 0 160px rgba(99,91,255,.018);pointer-events:none
}
.hero h1{font-weight:900;max-width:980px}
.hero h1 span{background:linear-gradient(90deg,#667085,#98a2b3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{font-size:21px;line-height:1.65;max-width:700px}
.eyebrow{color:var(--hb-primary);font-size:10px;letter-spacing:2.5px}
.actions{gap:10px}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-weight:800}
.primary{background:linear-gradient(135deg,var(--hb-primary),var(--hb-primary-2));box-shadow:0 12px 26px rgba(99,91,255,.18)}
.secondary{border-color:#d0d5dd;background:#fff}
.hero-product-card{
position:relative;z-index:1;border-radius:22px;padding:27px;
background:linear-gradient(150deg,#0b1020 0%,#121a2d 60%,#18223a 100%);
border:1px solid #29344c;box-shadow:0 30px 90px rgba(16,24,40,.22)
}
.hero-product-card:before{
content:"";position:absolute;inset:1px;border-radius:21px;pointer-events:none;
background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 35%,rgba(99,91,255,.08));opacity:.8
}
.product-flow>div{padding:17px 0}
.product-flow b{color:#636b7a}.product-flow span{color:#8e99ad}.product-flow strong{color:#f8fafc}
.flow-result{border-color:#36435f!important}
.proof-strip{position:relative;z-index:2;box-shadow:0 1px 0 var(--hb-line)}
.proof-strip strong{font-size:15px}.proof-strip span{color:#667085}
.section{padding-top:110px;padding-bottom:110px}
.section-head{margin-bottom:48px}
.section-head h2{font-weight:850}
.product-grid,.audience-grid{gap:18px}
.feature-card,.card,.behavior-card,.builder-result,.workspace-card,.price-card,.sim-card{
border:1px solid var(--hb-line);box-shadow:0 10px 35px rgba(16,24,40,.045)
}
.feature-card{min-height:290px;padding:32px}
.feature-card h3{font-weight:850}
.feature-card:hover,.behavior-card:hover,.card:hover{
transform:translateY(-3px);transition:.22s ease;border-color:#c9c5ff;box-shadow:0 20px 45px rgba(99,91,255,.09)
}
.section.dark{background:linear-gradient(145deg,#090e1c,#11182a)}
.terminal-product{border-color:#2b3850;box-shadow:0 22px 60px rgba(0,0,0,.24)}
.cta-product{border-radius:24px;margin-left:auto;margin-right:auto}
.page{padding-top:78px}
.page h1{font-weight:900}
.toolbar input,.toolbar select,.builder-form input,.builder-form select,.builder-form textarea{
border-color:#d0d5dd;border-radius:11px;background:#fff
}
.toolbar input:focus,.toolbar select:focus,.builder-form input:focus,.builder-form select:focus,.builder-form textarea:focus{
border-color:var(--hb-primary)!important;box-shadow:0 0 0 4px rgba(99,91,255,.10)
}
.status-pill{border:1px solid rgba(16,24,40,.05)}
.registry-hero{
margin:28px 0 36px;padding:34px;border:1px solid var(--hb-line);border-radius:22px;
background:linear-gradient(135deg,#fff,#f7f7ff);box-shadow:var(--hb-shadow);
display:flex;justify-content:space-between;gap:40px;align-items:end
}
.registry-summary{display:grid;grid-template-columns:auto auto;gap:4px 14px;min-width:220px}
.registry-summary strong{font-size:28px;letter-spacing:-1px}.registry-summary span{font-size:11px;color:var(--hb-muted);align-self:end}
.auth-page{
min-height:100vh;padding:24px;
background:
radial-gradient(circle at 12% 15%,rgba(99,91,255,.13),transparent 30rem),
radial-gradient(circle at 90% 85%,rgba(23,182,201,.10),transparent 28rem),
#f7f8fc;
}
.auth-shell{
width:min(1080px,100%);min-height:690px;display:grid;grid-template-columns:1.05fr .95fr;
background:#fff;border:1px solid #e4e7ec;border-radius:28px;overflow:hidden;
box-shadow:0 35px 100px rgba(16,24,40,.13)
}
.auth-showcase{
position:relative;padding:52px;background:linear-gradient(145deg,#0b1020,#121a2d 65%,#1a2440);color:#fff;overflow:hidden
}
.auth-showcase:before{
content:"";position:absolute;width:480px;height:480px;right:-220px;top:-150px;border-radius:50%;
border:1px solid rgba(124,108,242,.25);box-shadow:0 0 0 70px rgba(124,108,242,.035),0 0 0 140px rgba(124,108,242,.025)
}
.auth-showcase .brand{color:#fff;position:relative;z-index:1}.auth-showcase .brand span{color:#9c95ff}
.auth-showcase h2{position:relative;z-index:1;font-size:clamp(38px,5vw,62px);line-height:1;letter-spacing:-3px;margin:90px 0 20px;max-width:500px}
.auth-showcase>p{position:relative;z-index:1;color:#aeb8ca;max-width:470px;font-size:16px;line-height:1.7}
.auth-points{position:relative;z-index:1;margin-top:42px;display:grid;gap:13px}
.auth-point{display:flex;gap:12px;align-items:center;color:#dbe2ee;font-size:13px}
.auth-point i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(124,108,242,.14);color:#a69fff;font-style:normal}
.auth-card{
width:auto;margin:0;padding:52px;display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;box-shadow:none
}
.auth-card .auth-brand-mobile{display:none}
.auth-card h1{font-size:42px;letter-spacing:-2.5px;margin:14px 0 10px}
.auth-card>p{font-size:14px;line-height:1.7;margin-bottom:28px}
.auth-form{display:grid;gap:15px}
.auth-field{display:grid;gap:7px}
.auth-field label{font-size:12px;font-weight:800;color:#344054}
.auth-field input{
width:100%;height:50px;padding:0 14px;border:1px solid #d0d5dd;border-radius:11px;font:inherit;color:var(--hb-ink);background:#fff
}
.auth-field input:focus{border-color:var(--hb-primary);box-shadow:0 0 0 4px rgba(99,91,255,.10);outline:none}
.password-wrap{position:relative}.password-wrap input{padding-right:76px}
.password-toggle{
position:absolute;right:8px;top:7px;height:36px;padding:0 10px;border:0;border-radius:8px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:800;cursor:pointer
}
.password-meter{display:flex;gap:4px;margin-top:2px}.password-meter span{height:4px;flex:1;border-radius:9px;background:#eaecf0}.password-meter span.on{background:var(--hb-primary)}
.auth-meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#667085}
.auth-actions{display:grid;gap:9px;margin-top:5px}
.auth-actions .button{width:100%}
.auth-divider{display:flex;align-items:center;gap:12px;color:#98a2b3;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;margin:24px 0}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#eaecf0;flex:1}
.auth-status{min-height:22px;font-size:12px;font-weight:700;padding:9px 11px;border-radius:9px;background:#f8f9fc;color:#667085}
.auth-status.ok{background:#ecfdf3;color:#067647}.auth-status.error{background:#fef3f2;color:#b42318}
.auth-foot{margin-top:22px;color:#98a2b3;font-size:10px;line-height:1.6}
.security-badge{display:flex;align-items:center;gap:7px;color:#667085;font-size:10px;margin-top:16px}
.security-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.10)}
.workspace-grid{gap:16px}
.workspace-card{padding:25px}
.workspace-card strong{font-weight:900}
.kpi-grid{gap:14px}.kpi{border-radius:16px}
.builder-result{border-radius:18px}
@media(max-width:900px){
.auth-shell{grid-template-columns:1fr;min-height:auto}
.auth-showcase{display:none}
.auth-card{padding:38px 26px}
.registry-hero{align-items:start;flex-direction:column}
}
@media(max-width:600px){
.nav{height:66px}.nav nav{display:none}.nav-cta{padding:9px 13px}
.hero-product{padding-top:72px;min-height:auto}
.hero h1{font-size:50px;letter-spacing:-3.5px}
.hero-copy{font-size:18px}
.hero-product-card{margin-top:12px}
.section{padding:76px 24px}
.proof-strip{grid-template-columns:1fr}
.proof-strip div{border-right:0!important;border-bottom:1px solid var(--hb-line)}
.proof-strip div:last-child{border-bottom:0}
.auth-page{padding:0}.auth-shell{border-radius:0;border:0;min-height:100vh}.auth-card{padding:30px 22px}
.auth-card h1{font-size:36px}.page{padding-top:50px}
}
/* end UI/UX v3 */
/* =========================================================
RESPONSIVE HARDENING — mobile / tablet / desktop / legacy
========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;min-width:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
button,.button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{overflow-wrap:anywhere}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:9999;padding:10px 14px;background:#111827;color:#fff;border-radius:8px}
.skip-link:focus{left:8px}
.nav{width:100%;min-width:0}
.nav nav{min-width:0}
.nav nav a{white-space:nowrap}
.page{width:min(100% - 40px,1080px);padding-left:0;padding-right:0}
.section{width:100%;max-width:1250px;margin-left:auto;margin-right:auto}
.hero-product{width:100%;max-width:1250px;margin-left:auto;margin-right:auto}
.hero-copy-wrap{min-width:0}
.hero-product-card,.feature-card,.card,.builder-result,.sim-card,.workspace-card,.price-card,.behavior-card{min-width:0}
.product-grid,.audience-grid,.grid,.steps,.doc-grid,.pricing-grid,.workspace-grid,.kpi-grid{width:100%}
pre,.code-block,.benchmark-card pre,.terminal-product pre{max-width:100%;overflow-x:auto;white-space:pre}
.run-table,.benchmark-table{width:100%;max-width:100%;overflow-x:auto}
.run-row,.table-row{min-width:640px}
.registry-hero{min-width:0}.registry-hero>div{min-width:0}
.toolbar{width:100%;min-width:0}.toolbar>*{min-width:0}
.toolbar input{min-width:0}
.auth-page{width:100%;overflow-x:hidden}
.auth-shell{width:min(1080px,100%);max-width:100%}
.auth-card,.auth-showcase{min-width:0}
.auth-field input{min-width:0}
@media (max-width:1100px){
.hero-product{gap:36px}
.section{padding-left:clamp(24px,5vw,70px);padding-right:clamp(24px,5vw,70px)}
}
@media (max-width:900px){
.nav{padding-left:20px;padding-right:20px}
.nav nav{display:none}
.hero-product{grid-template-columns:1fr;gap:30px}
.hero-product-card{max-width:720px;width:100%;margin:0 auto}
.product-grid,.audience-grid,.workflow,.grid,.steps,.doc-grid,.pricing-grid,.workspace-grid{grid-template-columns:1fr 1fr}
.metrics{grid-template-columns:1fr 1fr}
.detail-grid,.sim-grid{grid-template-columns:1fr}
.proof-strip{grid-template-columns:repeat(2,1fr)}
.proof-strip div:nth-child(2n){border-right:0}
.proof-strip div:nth-child(n+3){border-top:1px solid var(--hb-line)}
.section-head{align-items:start}
.section-head>p{max-width:680px}
.auth-shell{grid-template-columns:1fr}
.auth-showcase{display:none}
.auth-card{padding:42px 34px}
}
@media (max-width:640px){
.nav{height:64px;padding:0 16px}
.brand{font-size:19px}
.nav-cta{font-size:12px;padding:9px 12px}
.hero-product{padding:64px 20px 60px}
.hero-product h1,.hero h1{font-size:clamp(42px,12vw,54px);line-height:1.02;letter-spacing:-3px}
.hero-copy{font-size:17px;line-height:1.6}
.actions{flex-direction:column;width:100%}
.actions .button{width:100%}
.hero-trust{font-size:11px}
.section{padding:70px 20px}
.section-head{display:block;margin-bottom:32px}
.section-head h2{font-size:34px}
.product-grid,.audience-grid,.workflow,.grid,.steps,.doc-grid,.pricing-grid,.workspace-grid,.kpi-grid,.metrics{grid-template-columns:1fr}
.proof-strip{grid-template-columns:1fr}
.proof-strip div{border-right:0!important;border-top:0!important;border-bottom:1px solid var(--hb-line)}
.proof-strip div:last-child{border-bottom:0}
.registry-hero{padding:24px;margin-top:20px}
.registry-summary{width:100%;min-width:0}
.registry-summary strong{font-size:24px}
.page{width:min(100% - 32px,1080px);padding-top:44px}
.page h1{font-size:clamp(40px,11vw,56px);letter-spacing:-3px}
.lead{font-size:17px}
.toolbar{flex-direction:column;align-items:stretch}
.toolbar>*{width:100%!important}
.run-table,.benchmark-table{border-radius:12px}
.run-row,.table-row{min-width:560px}
.sim-card{padding:18px}
.sim-grid{gap:12px}
.sim-card .kpi-grid{grid-template-columns:1fr}
.auth-page{padding:0}
.auth-shell{min-height:100svh;border-radius:0}
.auth-card{padding:30px 20px}
.auth-card h1{font-size:34px}
.auth-meta{align-items:flex-start;flex-direction:column}
.auth-foot{font-size:9px}
.cta{padding:48px 24px;margin-left:16px;margin-right:16px}
.cta h2{font-size:32px}
.terminal-product pre{font-size:11px;padding:18px}
.demo-actions{flex-direction:column}
.demo-actions .button{width:100%}
}
@media (max-width:380px){
.nav-cta{font-size:11px;padding:8px 9px}
.hero-product h1,.hero h1{font-size:40px;letter-spacing:-2.5px}
.section-head h2{font-size:30px}
.page{width:calc(100% - 24px)}
.auth-card{padding:26px 16px}
.button{padding-left:14px;padding-right:14px}
}
@media (min-width:1200px){
.hero-product{padding-left:70px;padding-right:70px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media (forced-colors:active){
.button,.nav-cta,.status-pill,.auth-status{border:1px solid CanvasText}
.primary{background:ButtonFace;color:ButtonText}
}
/* Cross-device layout hardening — fluid sizing, touch-safe controls, replay-safe canvas */
html,body{width:100%;max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
.page{width:min(1080px,100%);padding-left:clamp(16px,5vw,72px);padding-right:clamp(16px,5vw,72px)}
.section{padding-left:clamp(16px,7vw,120px);padding-right:clamp(16px,7vw,120px)}
input,select,textarea,button,.button{max-width:100%;font:inherit}
button,.button{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.toolbar{flex-wrap:wrap}
.toolbar>*{min-width:0}
.run-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.run-row{min-width:0;overflow-wrap:anywhere}
pre,.code-block{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.sim-card{min-width:0}
#sim-canvas,#simulation-canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:460px;min-height:220px}
@media(max-width:900px){
.page{padding-top:clamp(48px,8vw,70px);padding-bottom:80px}
.page h1{font-size:clamp(38px,8vw,62px);letter-spacing:clamp(-3px,-.7vw,-2px)}
.lead{font-size:clamp(16px,3vw,19px)}
.toolbar{align-items:stretch}
.toolbar>.button,.toolbar>a.button,.toolbar>button,.toolbar>input,.toolbar>select{flex:1 1 180px}
.sim-card{padding:clamp(16px,4vw,24px)}
.runner{padding:clamp(20px,4vw,32px)}
}
@media(max-width:640px){
.nav{padding-left:12px;padding-right:12px}
.brand{font-size:18px}
.nav-cta{padding:9px 12px}
.page{padding-left:14px;padding-right:14px}
.section{padding-left:16px;padding-right:16px}
.hero{padding-left:16px;padding-right:16px}
.hero h1,.hero-product h1{font-size:clamp(40px,12vw,54px);letter-spacing:-3px}
.hero-copy{font-size:17px}
.actions{flex-direction:column;align-items:stretch}
.actions .button{width:100%;text-align:center}
.toolbar{flex-direction:column}
.toolbar>*{width:100%;flex:1 1 auto}
.kpi-grid{grid-template-columns:1fr}
.workspace-grid,.pricing-grid{grid-template-columns:1fr}
.metric-grid{grid-template-columns:1fr}
.metric-grid div,.metric-grid div:nth-child(even){border-right:0}
.metric-grid div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.metric-grid div:last-child{border-bottom:0}
.run-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:13px 12px}
.run-row.head{font-size:10px}
.run-row span,.run-row a,.run-row button{min-width:0;overflow-wrap:anywhere}
#sim-canvas,#simulation-canvas{min-height:200px}
}
@media(max-width:420px){
.nav{height:60px}
.brand{font-size:16px}
.nav-cta{font-size:12px;padding:8px 10px}
.page h1{font-size:clamp(34px,10vw,44px)}
.sim-card{border-radius:14px}
#sim-canvas,#simulation-canvas{min-height:180px}
}
@media(hover:none){
.button:hover,.card:hover,.feature-card:hover,.behavior-card:hover{transform:none;box-shadow:inherit}
}
/* Contact + site footer */
.contact-page{padding-bottom:70px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.contact-card{padding:34px;border:1px solid var(--hb-line);border-radius:20px;background:#fff;box-shadow:var(--hb-shadow)}
.contact-card h2{font-size:30px;line-height:1.1;letter-spacing:-1.4px;margin:14px 0}
.contact-card p{color:var(--hb-muted);max-width:520px}
.contact-label{font-size:10px;letter-spacing:1.8px;font-weight:850;color:var(--hb-primary)}
.contact-card-dark{background:linear-gradient(145deg,#0b1020,#151f36);border-color:#29344c;color:#fff}
.contact-card-dark p{color:#aeb8ca}.contact-card-dark .contact-label{color:#9c95ff}
.contact-note{margin-top:18px;padding:20px 24px;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hb-line);border-radius:14px;background:#fafbfc}
.contact-note>span{color:var(--hb-primary);font-size:18px}.contact-note p{margin:3px 0 0;color:var(--hb-muted);font-size:13px}
.site-footer{margin-top:0;padding:52px clamp(20px,7vw,100px) 24px;background:#0b1020;color:#cbd5e1;border-top:1px solid #1f2937}
.footer-main{max-width:1250px;margin:auto;display:flex;justify-content:space-between;gap:60px}
.footer-brand{max-width:330px}.site-footer .brand{color:#fff}.site-footer .brand span{color:#9c95ff}.footer-brand p{color:#8995aa;font-size:13px;line-height:1.6;margin-top:12px}
.footer-links{display:grid;grid-template-columns:repeat(3,auto);gap:60px}.footer-links div{display:grid;gap:9px;align-content:start}.footer-links strong{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#fff;margin-bottom:4px}.footer-links a{font-size:12px;color:#8995aa;text-decoration:none}.footer-links a:hover{color:#fff}
.footer-bottom{max-width:1250px;margin:42px auto 0;padding-top:18px;border-top:1px solid #202a3b;display:flex;justify-content:space-between;gap:20px;color:#69758a;font-size:10px}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}.footer-main{display:block}.footer-links{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px}}
@media(max-width:560px){.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.contact-card{padding:26px}.contact-card h2{font-size:26px}}
/* Primary contact CTA */
.nav-actions{display:flex;align-items:center;gap:9px}
.nav-contact-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 17px;border-radius:10px;background:#0b1020;color:#fff!important;text-decoration:none;font-size:13px;font-weight:850;box-shadow:0 10px 24px rgba(11,16,32,.16)}
.nav-contact-cta:hover{background:#171f35;transform:translateY(-1px)}
.contact-float{position:fixed;right:22px;bottom:22px;z-index:50;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:999px;background:linear-gradient(135deg,var(--hb-primary),var(--hb-primary-2));color:#fff;text-decoration:none;font-size:13px;font-weight:850;box-shadow:0 16px 36px rgba(99,91,255,.28);border:1px solid rgba(255,255,255,.35)}
.contact-float:hover{transform:translateY(-2px)}
@media(max-width:640px){.nav-actions{gap:6px}.nav-contact-cta{min-height:40px;padding:9px 12px;font-size:12px}.nav-cta{display:none}.contact-float{right:14px;bottom:14px;min-height:48px;padding:0 18px}}
/* Premium navigation + persistent contact control v2 */
.nav{
height:76px;
padding:0 clamp(18px,5vw,72px);
gap:22px;
background:rgba(255,255,255,.90);
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
border-bottom:1px solid rgba(16,24,40,.08);
box-shadow:0 8px 30px rgba(16,24,40,.055);
}
.nav .brand{
flex:0 0 auto;
font-size:21px;
letter-spacing:-.7px;
}
.nav nav{
flex:1 1 auto;
justify-content:center;
align-items:center;
gap:4px;
}
.nav nav a{
position:relative;
display:inline-flex;
align-items:center;
min-height:40px;
padding:0 11px;
border-radius:9px;
color:#475467;
font-size:12px;
font-weight:750;
letter-spacing:.05px;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav nav a:hover{
color:var(--hb-primary);
background:#f4f3ff;
transform:translateY(-1px);
}
.nav-actions{
flex:0 0 auto;
display:flex;
align-items:center;
gap:8px;
}
.nav-contact-cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:42px;
padding:0 14px;
border:1px solid rgba(99,91,255,.18);
border-radius:11px;
background:#fff;
color:#3f3b9d!important;
text-decoration:none;
font-size:12px;
font-weight:850;
box-shadow:0 6px 18px rgba(99,91,255,.09);
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.nav-contact-cta:hover{
transform:translateY(-2px);
background:#f8f7ff;
border-color:rgba(99,91,255,.34);
box-shadow:0 10px 24px rgba(99,91,255,.16);
}
.nav-contact-icon{
width:22px;height:22px;border-radius:7px;
display:grid;place-items:center;
background:var(--hb-primary-soft);
color:var(--hb-primary);
font-size:12px;line-height:1;
}
.nav-cta{
display:inline-flex;
align-items:center;
gap:6px;
min-height:42px;
padding:0 15px;
border-radius:11px;
font-size:12px!important;
font-weight:850!important;
background:linear-gradient(135deg,var(--hb-primary),var(--hb-primary-2))!important;
color:#fff!important;
box-shadow:0 9px 22px rgba(99,91,255,.20);
transition:transform .18s ease,box-shadow .18s ease;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(99,91,255,.28)}
.contact-float{
position:fixed;
right:22px;
bottom:22px;
z-index:100;
width:58px;
height:58px;
min-height:58px;
padding:0;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
gap:0;
background:linear-gradient(145deg,var(--hb-primary),var(--hb-primary-2));
color:#fff;
text-decoration:none;
border:1px solid rgba(255,255,255,.42);
box-shadow:0 16px 38px rgba(99,91,255,.30),0 4px 12px rgba(16,24,40,.12);
transition:width .22s ease,transform .2s ease,box-shadow .2s ease,border-radius .2s ease;
}
.contact-float:before{
content:"";
position:absolute;
inset:-5px;
border-radius:22px;
border:1px solid rgba(99,91,255,.16);
pointer-events:none;
animation:contact-pulse 2.8s ease-out infinite;
}
.contact-float:hover{
width:142px;
transform:translateY(-3px);
border-radius:17px;
box-shadow:0 20px 46px rgba(99,91,255,.38),0 6px 16px rgba(16,24,40,.14);
}
.contact-float-icon{
width:27px;height:27px;
display:grid;place-items:center;
border-radius:9px;
background:rgba(255,255,255,.16);
font-size:14px;
flex:0 0 auto;
}
.contact-float-label{
max-width:0;
overflow:hidden;
opacity:0;
white-space:nowrap;
font-size:12px;
font-weight:850;
transition:max-width .22s ease,opacity .16s ease,margin .22s ease;
}
.contact-float:hover .contact-float-label{
max-width:80px;
opacity:1;
margin-left:8px;
}
.contact-float-arrow{
max-width:0;
overflow:hidden;
opacity:0;
font-size:13px;
transition:max-width .22s ease,opacity .16s ease,margin .22s ease;
}
.contact-float:hover .contact-float-arrow{
max-width:18px;
opacity:1;
margin-left:5px;
}
@keyframes contact-pulse{
0%,55%{transform:scale(.94);opacity:.55}
80%,100%{transform:scale(1.10);opacity:0}
}
@media(max-width:1000px){
.nav{gap:12px}
.nav nav{gap:0}
.nav nav a{padding:0 8px;font-size:11px}
}
@media(max-width:800px){
.nav{height:68px;padding:0 16px}
.nav nav{display:none}
.nav-actions{margin-left:auto}
.nav-contact-cta{min-height:40px;padding:0 12px}
.nav-cta{min-height:40px;padding:0 13px}
}
@media(max-width:560px){
.nav{height:64px;padding:0 12px}
.nav .brand{font-size:18px}
.nav-contact-cta{width:40px;height:40px;padding:0;border-radius:11px}
.nav-contact-cta>span:last-child{display:none}
.nav-contact-icon{width:24px;height:24px}
.nav-cta{min-height:40px;padding:0 11px}
.nav-cta>span:last-child{display:none}
.contact-float{right:14px;bottom:14px;width:54px;height:54px;min-height:54px;border-radius:17px}
.contact-float:hover{width:54px}
.contact-float:before{border-radius:21px}
.contact-float-label,.contact-float-arrow{display:none!important}
}
@media(prefers-reduced-motion:reduce){
.contact-float:before{animation:none}
}
/* Draggable WhatsApp contact control */
.whatsapp-float{
position:fixed;right:20px;bottom:20px;z-index:1000;
width:46px;height:46px;display:grid;place-items:center;
border-radius:50%;background:#25D366;color:#fff;text-decoration:none;
border:1.5px solid rgba(255,255,255,.92);
box-shadow:0 8px 20px rgba(37,211,102,.22),0 3px 9px rgba(16,24,40,.12);
cursor:grab;touch-action:none;user-select:none;
transition:transform .18s ease,box-shadow .18s ease;
}
.whatsapp-float:active{cursor:grabbing}
.whatsapp-float:hover{transform:scale(1.05);box-shadow:0 11px 25px rgba(37,211,102,.28),0 4px 11px rgba(16,24,40,.14)}
.whatsapp-float-icon{width:24px;height:24px;display:grid;place-items:center}
.whatsapp-float-icon svg{width:100%;height:100%;fill:currentColor;display:block}
@media(max-width:560px){
.whatsapp-float{right:12px;bottom:12px;width:42px;height:42px}
.whatsapp-float-icon{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}
#hb-secret-entry{user-select:none}
#hb-secret-entry:focus-visible{outline:2px solid var(--hb-primary);outline-offset:4px;border-radius:6px}
/* Acquisition opportunity — premium bordered card */
.acquisition-banner{
position:relative;
z-index:90;
margin:16px auto 0;
width:min(1240px,calc(100% - 32px));
border:1px solid rgba(255,193,7,.42);
border-radius:20px;
overflow:hidden;
background:
radial-gradient(circle at 8% 50%,rgba(255,183,3,.12),transparent 26%),
radial-gradient(circle at 92% 50%,rgba(37,211,102,.08),transparent 24%),
linear-gradient(110deg,#0a1020,#121c31 55%,#0d1829);
color:#fff;
box-shadow:0 18px 50px rgba(11,16,32,.20),0 0 0 5px rgba(255,193,7,.035);
}
.acquisition-banner:before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:4px;
background:linear-gradient(180deg,#ffd166,#ff9f1c,#25d366);
}
.acquisition-banner-inner{
max-width:none;
min-height:82px;
padding:12px 18px 12px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.acquisition-main{gap:14px}
.acquisition-badge{
padding:8px 11px;
border-color:rgba(255,209,102,.48);
background:rgba(255,193,7,.12);
box-shadow:inset 0 0 0 1px rgba(255,209,102,.04);
}
.acquisition-copy strong{
font-size:14px;
letter-spacing:-.2px;
}
.acquisition-copy span{font-size:11.5px}
.acquisition-contact{
padding:8px 12px;
border-color:rgba(37,211,102,.30);
background:rgba(37,211,102,.075);
box-shadow:inset 0 0 0 1px rgba(37,211,102,.035);
}
.acquisition-whatsapp{
font-size:12.5px;
}
.acquisition-cta{
min-height:44px;
padding:0 17px;
border-radius:11px;
font-size:11.5px;
}
@media(max-width:900px){
.acquisition-banner{width:min(100% - 24px,1240px);margin-top:12px}
.acquisition-banner-inner{min-height:76px}
}
@media(max-width:680px){
.acquisition-banner{width:calc(100% - 20px);border-radius:16px}
.acquisition-banner-inner{padding:12px 12px 12px 16px}
}
@media(max-width:390px){
.acquisition-banner{width:calc(100% - 16px)}
}
/* Acquisition UX refinement — product-first hierarchy */
.acquisition-quiet{
width:min(1080px,calc(100% - 32px));
margin:12px auto 0;
border-radius:14px;
border-color:rgba(148,163,184,.24);
background:linear-gradient(105deg,rgba(11,16,32,.97),rgba(20,30,49,.96));
box-shadow:0 8px 24px rgba(11,16,32,.09);
}
.acquisition-quiet:before{
width:3px;
background:linear-gradient(180deg,#ffd166,#25d366);
}
.acquisition-quiet .acquisition-banner-inner{
min-height:58px;
padding:8px 12px 8px 18px;
gap:12px;
}
.acquisition-quiet .acquisition-main{gap:10px;min-width:0}
.acquisition-quiet .acquisition-badge{
padding:6px 9px;
font-size:9px;
letter-spacing:1.1px;
white-space:nowrap;
background:rgba(255,193,7,.08);
border-color:rgba(255,209,102,.28);
}
.acquisition-quiet .acquisition-copy{
min-width:0;
}
.acquisition-quiet .acquisition-copy strong{
display:block;
font-size:12px;
line-height:1.35;
letter-spacing:0;
}
.acquisition-quiet .acquisition-copy span{
display:none;
}
.acquisition-quiet .acquisition-contact{
flex:0 0 auto;
padding:6px 9px;
border-radius:9px;
background:rgba(37,211,102,.055);
border-color:rgba(37,211,102,.20);
}
.acquisition-quiet .acquisition-whatsapp-label{
display:none;
}
.acquisition-quiet .acquisition-whatsapp{
font-size:11px;
white-space:nowrap;
}
.acquisition-quiet .acquisition-cta{
flex:0 0 auto;
min-height:36px;
padding:0 12px;
border-radius:9px;
font-size:10px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.14);
color:#fff;
}
.acquisition-quiet .acquisition-cta:hover{
background:rgba(255,255,255,.12);
border-color:rgba(255,209,102,.32);
}
@media(max-width:760px){
.acquisition-quiet{
width:calc(100% - 24px);
}
.acquisition-quiet .acquisition-banner-inner{
flex-wrap:wrap;
min-height:0;
padding:9px 10px 9px 15px;
}
.acquisition-quiet .acquisition-main{
flex:1 1 100%;
}
.acquisition-quiet .acquisition-contact{
margin-left:auto;
}
}
@media(max-width:430px){
.acquisition-quiet{
width:calc(100% - 16px);
border-radius:12px;
}
.acquisition-quiet .acquisition-banner-inner{
gap:8px;
}
.acquisition-quiet .acquisition-copy strong{
font-size:11px;
}
.acquisition-quiet .acquisition-contact{
order:3;
margin-left:0;
}
.acquisition-quiet .acquisition-cta{
margin-left:auto;
}
.acquisition-quiet .acquisition-whatsapp{
font-size:10px;
}
}
/* Homepage/contact remain intentionally prominent; interior pages stay product-first. */
/* Keep WhatsApp semantic green */
.acquisition-whatsapp{color:#25d366!important;text-decoration:none!important;font-weight:800}
.acquisition-whatsapp:hover{color:#5ee58c!important;text-decoration:none!important}
/* Acquisition card — responsive mobile repair */
.acquisition-main{display:flex;align-items:center;min-width:0}
.acquisition-copy{min-width:0}
.acquisition-copy strong,.acquisition-copy span{display:block}
.acquisition-contact{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0}
.acquisition-cta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none!important}
@media(max-width:680px){
.acquisition-banner-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;min-height:0;padding:12px 12px 12px 16px}
.acquisition-main{grid-column:1/-1;align-items:flex-start;gap:10px}
.acquisition-badge{flex:0 0 auto;white-space:nowrap;font-size:8.5px;letter-spacing:.9px;line-height:1.1;padding:7px 8px}
.acquisition-copy{flex:1 1 auto}.acquisition-copy strong{font-size:12px;line-height:1.35;letter-spacing:0}.acquisition-copy span{margin-top:2px;font-size:10px;line-height:1.35}
.acquisition-contact{grid-column:1;grid-row:2;margin:0!important;padding:7px 9px;border-radius:9px}.acquisition-whatsapp-label{display:none}.acquisition-whatsapp{font-size:10.5px;line-height:1.2;white-space:nowrap}
.acquisition-cta{grid-column:2;grid-row:2;min-height:36px;padding:0 11px;border-radius:9px;font-size:10px}
}
@media(max-width:430px){
.acquisition-banner{width:calc(100% - 16px);border-radius:14px}.acquisition-banner-inner{padding:10px 10px 10px 14px;gap:9px 10px}.acquisition-main{gap:8px}
.acquisition-badge{font-size:7.5px;letter-spacing:.65px;padding:6px 7px}.acquisition-copy strong{font-size:11px}.acquisition-copy span{font-size:9px}.acquisition-contact{padding:6px 8px}.acquisition-whatsapp{font-size:9.5px}.acquisition-cta{min-height:34px;padding:0 9px;font-size:9px}
}
/* Dashboard — responsive, bounded controls */
.dashboard-page{max-width:1120px}.dashboard-page>h1{max-width:900px}.dashboard-page .lead{max-width:760px}.dashboard-page .builder-result{margin-top:18px;padding:24px}.dashboard-page .builder-result h2{margin-top:0}
.dashboard-page .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.dashboard-page .toolbar .button,.dashboard-page .toolbar button{width:auto;min-height:38px;max-width:190px;padding:0 13px;font-size:12px;flex:0 0 auto}.dashboard-page .toolbar input{min-height:38px}
.dashboard-page #experiments .run-row{grid-template-columns:28px minmax(180px,2fr) .8fr 1.3fr auto}.dashboard-page #key-list .run-row{grid-template-columns:2fr 1.3fr .8fr auto}.dashboard-page .run-row .button{white-space:nowrap}
@media(max-width:700px){
.dashboard-page{padding:48px 16px 80px}.dashboard-page>h1{font-size:clamp(34px,9vw,46px);line-height:1.03;letter-spacing:-2px;margin-bottom:12px}.dashboard-page .lead{font-size:14px;line-height:1.5;margin-bottom:24px}
.dashboard-page .workspace-grid{grid-template-columns:1fr;gap:10px;margin:22px 0}.dashboard-page .workspace-card{padding:18px;min-height:0}.dashboard-page .workspace-card strong{font-size:30px;margin:9px 0 2px}
.dashboard-page .builder-result{margin-top:12px;padding:18px}.dashboard-page .builder-result h2{font-size:22px}
.dashboard-page .toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}.dashboard-page .toolbar input{width:100%;flex:1 1 100%}.dashboard-page .toolbar .button,.dashboard-page .toolbar button{width:auto;max-width:180px;min-height:38px;padding:0 12px;font-size:11px}
.dashboard-page #experiments .run-row,.dashboard-page #key-list .run-row{display:grid;grid-template-columns:1fr!important;gap:8px;padding:14px;margin:8px 0;border:1px solid var(--hb-line);border-radius:12px;background:#fafbfc}
.dashboard-page #experiments .run-row .exp{position:absolute;margin-top:2px}.dashboard-page #experiments .run-row span:nth-of-type(1){padding-left:26px}
.dashboard-page #experiments .run-row .button,.dashboard-page #key-list .run-row .button{width:auto;max-width:170px;min-height:36px;padding:0 12px}.dashboard-page #experiments .run-row .button + .button{margin-top:6px}
}
@media(max-width:420px){
.dashboard-page{padding-left:12px;padding-right:12px}.dashboard-page>h1{font-size:32px;letter-spacing:-1.7px}.dashboard-page .builder-result{padding:15px}.dashboard-page .toolbar .button,.dashboard-page .toolbar button{max-width:165px}
}
/* Cross-browser + interaction polish */
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
overflow-x:hidden;
}
body{
min-width:0;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg,video,canvas,iframe{
max-width:100%;
}
button,
input,
select,
textarea{
font:inherit;
max-width:100%;
}
button,
.button,
.nav-cta,
.nav-contact-cta,
.acquisition-cta{
-webkit-appearance:none;
appearance:none;
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
user-select:none;
}
button{
border:0;
cursor:pointer;
}
button::-moz-focus-inner{
border:0;
padding:0;
}
button:disabled,
.button[aria-disabled="true"]{
cursor:not-allowed;
opacity:.55;
transform:none!important;
box-shadow:none!important;
}
input,
select,
textarea{
min-width:0;
}
select{
-webkit-appearance:none;
appearance:none;
}
a{
-webkit-tap-highlight-color:transparent;
}
@supports not ((backdrop-filter:blur(1px))){
.nav{
background:#f8f9fa;
}
}
@supports (-webkit-touch-callout:none){
input,select,textarea,button{
font-size:16px;
}
}
@media (hover:hover) and (pointer:fine){
.button:hover,
.nav-cta:hover,
.nav-contact-cta:hover,
.acquisition-cta:hover{
transform:translateY(-1px);
}
}
@media (hover:none){
.button:hover,
.nav-cta:hover,
.nav-contact-cta:hover,
.acquisition-cta:hover{
transform:none;
}
}
@media(max-width:700px){
.button{
min-height:42px;
padding:0 14px;
}
.nav-contact-cta{
min-height:40px;
}
.acquisition-cta{
min-height:36px;
}
}
@media(max-width:430px){
.button{
min-height:40px;
padding:0 12px;
font-size:12px;
}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
}
/* LaunchBuff attribution — compact footer placement */
.launchbuff-badge-wrap{
max-width:1250px;
margin:14px auto 0;
display:flex;
justify-content:flex-end;
align-items:center;
opacity:.62;
}
.launchbuff-badge-wrap a{
display:inline-flex;
align-items:center;
line-height:0;
text-decoration:none;
}
.launchbuff-badge-wrap img{
width:128px;
height:40px;
display:block;
object-fit:contain;
}
.launchbuff-badge-wrap a:hover,
.launchbuff-badge-wrap a:focus-visible{
opacity:1;
}
@media(max-width:560px){
.launchbuff-badge-wrap{
justify-content:center;
margin-top:12px;
}
.launchbuff-badge-wrap img{
width:112px;
height:auto;
}
}
/* Additive v2 product-evidence layer */
.registry-note{margin:18px 0;padding:15px 17px;border:1px solid rgba(99,91,255,.18);border-radius:14px;background:linear-gradient(135deg,rgba(99,91,255,.045),rgba(37,211,102,.035));color:var(--hb-ink);font-size:12px;line-height:1.55}
.hero-proof{margin-top:22px;padding:15px 17px;border:1px solid rgba(99,91,255,.18);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 14px 34px rgba(16,24,40,.06)}
.hero-proof-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.hero-proof-head>span:first-child{font-size:10px;font-weight:850;letter-spacing:1.1px;color:#5b6475}
.hero-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.hero-proof-grid>div{padding:11px 10px;border-radius:11px;background:#f7f8fb;border:1px solid #eceef4}.hero-proof-grid span{display:block;font-size:10px;color:#71798a;margin-bottom:5px}.hero-proof-grid strong{font-size:12px;line-height:1.25}
.hero-proof-note{margin-top:11px;font-size:10.5px;line-height:1.45;color:#6d7483}.hero-proof-link{display:inline-flex;margin-top:8px;font-size:10.5px;font-weight:800;color:var(--hb-primary);text-decoration:none}.hero-proof-link:hover{text-decoration:underline}
@media(max-width:700px){.hero-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-proof{padding:13px}.hero-proof-grid>div{padding:9px}.hero-proof-head{align-items:flex-start;flex-direction:column}.registry-note{font-size:11.5px}}
/* Visual refresh 2026 — motion, depth, acquisition restraint, premium auth */
@keyframes hb-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes hb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hb-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes hb-grid{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,18px,0)}}
.hero-product .hero-copy-wrap{animation:hb-fade-up .7s cubic-bezier(.2,.8,.2,1) both}
.hero-product-card{animation:hb-fade-up .8s .08s cubic-bezier(.2,.8,.2,1) both,hb-float 7s 1s ease-in-out infinite}
.hero-proof,.hero-tip,.feature-card,.audience-grid article,.workflow div{animation:hb-fade-up .65s cubic-bezier(.2,.8,.2,1) both}
.hero-product:after{content:"";position:absolute;inset:auto -10% -150px -10%;height:280px;background:radial-gradient(ellipse at center,rgba(99,91,255,.10),transparent 65%);pointer-events:none}
.acquisition-banner{position:relative;z-index:5;background:rgba(248,249,252,.72)!important;border-bottom:1px solid rgba(16,24,40,.06)!important}
.acquisition-banner-inner{max-width:1250px!important;min-height:48px!important}
.acquisition-badge{font-size:9px!important;letter-spacing:1.4px!important;background:#fff!important;border-color:#e4e7ec!important;color:#667085!important}
.acquisition-copy strong{font-size:11px!important;color:#475467!important}
.acquisition-copy span{font-size:10px!important;color:#98a2b3!important}
.acquisition-cta{font-size:11px!important;padding:8px 12px!important;border-radius:9px!important}
.acquisition-contact{display:none!important}
.hero-product{isolation:isolate}
.hero-product-card{position:relative;z-index:1}
.product-flow>div{transition:transform .25s ease,background .25s ease}
.product-flow>div:not(.flow-result):hover{transform:translateX(5px)}
.feature-card,.audience-grid article,.hero-proof,.hero-tip{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.feature-card:hover,.audience-grid article:hover{transform:translateY(-5px)}
.button{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.button:hover{filter:saturate(1.08)}
.auth-page{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 20%,rgba(99,91,255,.16),transparent 30%),radial-gradient(circle at 85% 80%,rgba(34,184,207,.12),transparent 28%),linear-gradient(135deg,#f7f8fc,#eef1f8)}
.auth-page:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(99,91,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(99,91,255,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%);animation:hb-grid 9s linear infinite}
.auth-shell{position:relative;z-index:1;width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,500px);gap:28px;align-items:stretch}
.auth-showcase{padding:58px 38px;display:flex;flex-direction:column;justify-content:center;border-radius:28px;background:linear-gradient(145deg,#0b1020,#151f36 70%,#1c2540);color:#fff;box-shadow:0 30px 80px rgba(16,24,40,.18);border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative}
.auth-showcase:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-170px;bottom:-180px;background:radial-gradient(circle,rgba(124,108,242,.35),transparent 68%);pointer-events:none}
.auth-showcase .brand{color:#fff;position:relative;z-index:1}
.auth-showcase .brand span{color:#a9a2ff}
.auth-showcase h2{font-size:clamp(48px,6vw,78px);line-height:.96;letter-spacing:-4px;margin:70px 0 22px;max-width:620px;position:relative;z-index:1}
.auth-showcase>p{max-width:560px;color:#aeb8ca;font-size:16px;line-height:1.7;position:relative;z-index:1}
.auth-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px;position:relative;z-index:1}
.auth-point{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);color:#dbe2ef;font-size:12px}
.auth-point i{font-style:normal;color:#9c95ff;font-weight:900}
.auth-card{width:100%;padding:42px;border:1px solid rgba(16,24,40,.09);border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 30px 80px rgba(16,24,40,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:hb-fade-up .65s cubic-bezier(.2,.8,.2,1) both}
.auth-card h1{font-size:clamp(42px,5vw,58px);letter-spacing:-3px;margin:10px 0 10px}
.auth-card>p{color:#667085;margin-bottom:30px}
.auth-brand-mobile{display:none}
.auth-field{margin-bottom:18px}.auth-field label{display:block;font-size:12px;font-weight:800;color:#344054;margin-bottom:8px}
.auth-field input{width:100%;height:52px;border:1px solid #d0d5dd;border-radius:12px;padding:0 14px;background:#fff;color:#101828;font:inherit}
.auth-field input:focus{border-color:var(--hb-primary)!important;box-shadow:0 0 0 4px rgba(99,91,255,.11)!important}
.password-wrap{position:relative}.password-wrap input{padding-right:70px}.password-toggle{position:absolute;right:8px;top:8px;height:36px;padding:0 10px;border:0;border-radius:8px;background:#f2f3f7;color:#475467;font-weight:800;font-size:11px;cursor:pointer}
.password-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}.password-meter span{height:4px;border-radius:99px;background:#e4e7ec;transition:background .2s,transform .2s}.password-meter span.on{background:linear-gradient(90deg,var(--hb-primary),var(--hb-primary-2));transform:scaleY(1.25)}
.auth-meta{display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:#98a2b3;font-size:10px}
.auth-actions{display:grid;gap:10px;margin-top:24px}.auth-actions .button{width:100%;min-height:50px}
.auth-divider{display:flex;align-items:center;gap:10px;margin:25px 0 13px;color:#98a2b3;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:#eaecf0}
.auth-status{min-height:42px;padding:12px 14px;border-radius:11px;background:#f8f9fb;border:1px solid #eaecf0;color:#667085;font-size:12px}.auth-status.ok{background:#ecfdf3;border-color:#abefc6;color:#067647}.auth-status.error{background:#fef3f2;border-color:#fecdca;color:#b42318}
.security-badge{margin-top:14px;padding:11px 12px;border-radius:10px;background:#f8f7ff;color:#4f46b5;font-size:10px;font-weight:750}
.auth-foot{margin-top:20px;color:#98a2b3;font-size:10px;line-height:1.7}.auth-foot a{color:#667085}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr;max-width:560px}.auth-showcase{padding:34px}.auth-showcase h2{margin-top:45px;font-size:52px}.auth-points{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.auth-page{padding:16px}.auth-showcase{display:none}.auth-card{padding:28px 22px;border-radius:22px}.auth-brand-mobile{display:inline-block}.auth-card h1{font-size:42px}.auth-actions{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
/* Live motion + robotics palette v3 */
:root{
--hb-violet:#6d5dfc;--hb-violet-2:#8b7cff;--hb-cyan:#22d3ee;--hb-blue:#3b82f6;
--hb-emerald:#18c985;--hb-ink:#0b1220;--hb-surface:#f7f9fc;
}
@keyframes hb-mesh-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}35%{transform:translate3d(28px,-18px,0) scale(1.06)}70%{transform:translate3d(-20px,16px,0) scale(.98)}}
@keyframes hb-orbit{from{transform:rotate(0deg) translateX(26px) rotate(0deg)}to{transform:rotate(360deg) translateX(26px) rotate(-360deg)}}
@keyframes hb-orbit2{from{transform:rotate(180deg) translateX(42px) rotate(-180deg)}to{transform:rotate(540deg) translateX(42px) rotate(-540deg)}}
@keyframes hb-pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(109,93,252,.24)}50%{box-shadow:0 0 0 10px rgba(109,93,252,0)}}
@keyframes hb-scan{0%{transform:translateY(-130%);opacity:0}12%,72%{opacity:.7}100%{transform:translateY(520%);opacity:0}}
@keyframes hb-glow{0%,100%{opacity:.55;filter:blur(18px)}50%{opacity:1;filter:blur(26px)}}
@keyframes hb-dots{from{background-position:0 0,0 0}to{background-position:28px 28px,28px 28px}}
@keyframes hb-login-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.008)}}
.hero-product{
background:
radial-gradient(circle at 78% 18%,rgba(109,93,252,.18),transparent 27%),
radial-gradient(circle at 94% 72%,rgba(34,211,238,.13),transparent 24%),
linear-gradient(180deg,#fbfcff 0%,#f5f8ff 100%);
}
.hero-product:before{
content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-150px;top:-130px;
border-radius:50%;background:radial-gradient(circle,rgba(109,93,252,.18),rgba(34,211,238,.06) 45%,transparent 70%);
animation:hb-mesh-drift 10s ease-in-out infinite;
}
.hero-product:after{
content:"";position:absolute;z-index:-1;width:380px;height:380px;left:-210px;bottom:-180px;
border-radius:50%;background:radial-gradient(circle,rgba(24,201,133,.12),transparent 68%);
animation:hb-mesh-drift 12s 1s ease-in-out infinite reverse;
}
.hero-copy-wrap{position:relative}
.hero-copy-wrap:before{
content:"";position:absolute;left:-35px;top:12px;width:7px;height:7px;border-radius:50%;
background:var(--hb-cyan);box-shadow:0 0 24px 5px rgba(34,211,238,.38);animation:hb-pulse-ring 2.6s ease-in-out infinite;
}
.hero-product-card{
position:relative;overflow:hidden;
background:linear-gradient(145deg,#0a1020 0%,#121c34 54%,#18234a 100%);
border:1px solid rgba(139,124,255,.30);
box-shadow:0 30px 90px rgba(20,28,60,.24),inset 0 1px rgba(255,255,255,.07);
}
.hero-product-card:before{
content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 72%,rgba(34,211,238,.12),rgba(109,93,252,.18),transparent 88%);
animation:hb-orbit 16s linear infinite;pointer-events:none;
}
.hero-product-card:after{
content:"";position:absolute;left:0;right:0;height:2px;top:-20%;background:linear-gradient(90deg,transparent,var(--hb-cyan),var(--hb-violet),transparent);
box-shadow:0 0 22px rgba(34,211,238,.5);animation:hb-scan 5.5s ease-in-out infinite;pointer-events:none;
}
.hero-product-card>*{position:relative;z-index:1}
.product-card-top .status-pill{animation:hb-pulse-ring 2.2s ease-in-out infinite}
.product-flow>div{border-left:2px solid transparent}
.product-flow>div:nth-of-type(1){border-left-color:rgba(109,93,252,.55)}
.product-flow>div:nth-of-type(2){border-left-color:rgba(59,130,246,.55)}
.product-flow>div:nth-of-type(3){border-left-color:rgba(34,211,238,.55)}
.product-flow .flow-result{border-left-color:rgba(24,201,133,.8)!important}
.product-flow i{animation:hb-fade-up 1s ease both;opacity:.65}
.hero-proof{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-color:rgba(109,93,252,.16)}
.hero-proof-head .status-pill{background:rgba(24,201,133,.10);color:#07945c;border-color:rgba(24,201,133,.16)}
.hero-tip{background:linear-gradient(135deg,rgba(109,93,252,.055),rgba(34,211,238,.045));border-color:rgba(109,93,252,.14)}
.proof-strip strong{background:linear-gradient(90deg,var(--hb-violet),var(--hb-blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--hb-violet)}
.primary{background:linear-gradient(135deg,var(--hb-violet),var(--hb-blue));box-shadow:0 12px 30px rgba(109,93,252,.23)}
.primary:hover{box-shadow:0 16px 38px rgba(109,93,252,.32)}
.feature-card:hover,.audience-grid article:hover{border-color:rgba(109,93,252,.30);box-shadow:0 22px 48px rgba(109,93,252,.11)}
.feature-number{color:var(--hb-violet)}
.feature-card a{color:#5547d8}
.product-demo{background:linear-gradient(145deg,#080d19,#101a30 65%,#101b2d);position:relative;overflow:hidden}
.product-demo:before{
content:"";position:absolute;inset:0;opacity:.18;
background-image:radial-gradient(rgba(139,124,255,.65) 1px,transparent 1px),radial-gradient(rgba(34,211,238,.4) 1px,transparent 1px);
background-size:28px 28px;animation:hb-dots 7s linear infinite;pointer-events:none;
}
.product-demo>*{position:relative;z-index:1}
.terminal-product{border-color:rgba(139,124,255,.25);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.terminal-product:after{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--hb-violet),var(--hb-cyan),var(--hb-emerald),var(--hb-violet));background-size:220% 100%;animation:hb-shimmer 5s linear infinite}
.workflow div{position:relative;overflow:hidden}
.workflow div:after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(var(--hb-violet),var(--hb-cyan));transform:scaleY(0);transform-origin:top;transition:transform .35s ease}
.workflow div:hover:after{transform:scaleY(1)}
/* Auth: luminous robotics lab */
.auth-page{
background:
radial-gradient(circle at 12% 12%,rgba(109,93,252,.22),transparent 28%),
radial-gradient(circle at 88% 18%,rgba(34,211,238,.16),transparent 26%),
radial-gradient(circle at 78% 88%,rgba(24,201,133,.12),transparent 25%),
linear-gradient(135deg,#f8faff 0%,#eef3ff 48%,#f5fbff 100%);
}
.auth-page:after{
content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:50%;top:50%;
transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(109,93,252,.08),transparent 68%);
animation:hb-glow 6s ease-in-out infinite;pointer-events:none;
}
.auth-showcase{
background:linear-gradient(145deg,#080e1b 0%,#111b31 48%,#172650 100%);
border-color:rgba(139,124,255,.25);
box-shadow:0 34px 100px rgba(20,28,60,.25),inset 0 1px rgba(255,255,255,.08);
}
.auth-showcase:before{
content:"";position:absolute;width:260px;height:260px;right:-75px;top:-75px;border:1px solid rgba(34,211,238,.28);border-radius:50%;
box-shadow:0 0 0 28px rgba(34,211,238,.025),0 0 0 56px rgba(109,93,252,.025);
animation:hb-orbit2 12s linear infinite;pointer-events:none;
}
.auth-showcase:after{background:radial-gradient(circle,rgba(109,93,252,.34),rgba(34,211,238,.06) 45%,transparent 70%);animation:hb-mesh-drift 8s ease-in-out infinite}
.auth-point{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.auth-point:hover{transform:translateX(4px);border-color:rgba(139,124,255,.32);background:rgba(139,124,255,.07)}
.auth-point i{color:var(--hb-cyan)}
.auth-card{
border-color:rgba(109,93,252,.16);
box-shadow:0 34px 90px rgba(16,24,40,.15),0 0 0 1px rgba(255,255,255,.55) inset;
animation:hb-fade-up .65s cubic-bezier(.2,.8,.2,1) both,hb-login-breathe 7s 1s ease-in-out infinite;
}
.auth-card:before{
content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;
background:linear-gradient(120deg,rgba(255,255,255,.55),transparent 35%,transparent 65%,rgba(109,93,252,.035));
}
.auth-card .primary{background:linear-gradient(135deg,var(--hb-violet),var(--hb-blue),var(--hb-cyan));background-size:180% 180%;animation:hb-shimmer 7s linear infinite}
.auth-field input:focus{border-color:var(--hb-violet)!important;box-shadow:0 0 0 4px rgba(109,93,252,.11),0 8px 24px rgba(109,93,252,.06)!important}
.password-meter span.on{background:linear-gradient(90deg,var(--hb-violet),var(--hb-cyan))}
.security-badge{background:linear-gradient(135deg,rgba(109,93,252,.07),rgba(34,211,238,.06));color:#5146c7;border-color:rgba(109,93,252,.10)}
.auth-status.ok{box-shadow:0 0 0 4px rgba(24,201,133,.06)}
@media(max-width:900px){.auth-showcase:before{right:-120px}.hero-copy-wrap:before{left:-18px}}
@media(prefers-reduced-motion:reduce){
.hero-product:before,.hero-product:after,.hero-product-card,.hero-product-card:before,.hero-product-card:after,.product-card-top .status-pill,.product-demo:before,.terminal-product:after,.auth-page:after,.auth-showcase:before,.auth-showcase:after,.auth-card,.auth-card .primary{animation:none!important}
}
.hero-ambient,.auth-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-ambient span,.auth-ambient span{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.hero-ambient span:nth-child(1),.auth-ambient span:nth-child(1){width:9px;height:9px;left:18%;top:24%;background:var(--hb-cyan);box-shadow:0 0 24px 7px rgba(34,211,238,.28);animation:hb-float 4.5s ease-in-out infinite}
.hero-ambient span:nth-child(2),.auth-ambient span:nth-child(2){width:7px;height:7px;left:67%;top:30%;background:var(--hb-violet);box-shadow:0 0 24px 7px rgba(109,93,252,.28);animation:hb-float 5.5s 1s ease-in-out infinite reverse}
.hero-ambient span:nth-child(3),.auth-ambient span:nth-child(3){width:6px;height:6px;left:83%;top:76%;background:var(--hb-emerald);box-shadow:0 0 22px 6px rgba(24,201,133,.25);animation:hb-float 6s 1.5s ease-in-out infinite}
.hero-ambient{z-index:0}.hero-product>*:not(.hero-ambient){position:relative;z-index:1}
.auth-ambient{z-index:0}.auth-shell{z-index:2}
.auth-ambient span:nth-child(1){left:8%;top:18%}.auth-ambient span:nth-child(2){left:88%;top:36%}.auth-ambient span:nth-child(3){left:74%;top:84%}
/* Responsive design system v4 — spatial rhythm, icon containment, adaptive navigation */
:root{
--hb-space-1:4px;--hb-space-2:8px;--hb-space-3:12px;--hb-space-4:16px;
--hb-space-5:20px;--hb-space-6:24px;--hb-space-7:32px;--hb-space-8:40px;
--hb-control-h:44px;--hb-icon-box:36px;
}
.nav{min-width:0}
.nav nav{
min-width:0;align-items:center;justify-content:center;flex:1 1 auto;
gap:clamp(12px,1.7vw,24px);
}
.nav nav a{
display:inline-flex;align-items:center;justify-content:center;min-height:36px;
white-space:nowrap;line-height:1;padding:0 2px;
}
.nav-actions{
display:flex;align-items:center;justify-content:flex-end;gap:10px;
flex:0 0 auto;min-width:max-content;
}
.nav-contact-cta,.nav-cta,.acquisition-cta{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
white-space:nowrap;line-height:1;
}
.nav-contact-icon{
width:var(--hb-icon-box);height:var(--hb-icon-box);min-width:var(--hb-icon-box);
display:grid;place-items:center;border-radius:10px;
background:rgba(109,93,252,.08);color:var(--hb-violet,#6d5dfc);
font-size:14px;line-height:1;
}
.nav-cta{gap:7px}
.nav-cta span[aria-hidden="true"]{display:inline-grid;place-items:center;width:16px;min-width:16px;height:16px}
.actions,.demo-actions,.center-actions,.tags,.hero-trust{align-items:center;gap:clamp(8px,1.2vw,14px)}
.tags{flex-wrap:wrap}
.hero-trust span,.hero-trust b{white-space:nowrap}
.icon{
width:var(--hb-icon-box);height:var(--hb-icon-box);min-width:var(--hb-icon-box);
display:grid;place-items:center;margin-bottom:var(--hb-space-6);line-height:1;
}
.feature-number{
display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:28px;
padding:0 8px;border-radius:8px;background:rgba(109,93,252,.07);
}
.card-top,.card-bottom,.product-card-top,.hero-proof-head{gap:var(--hb-space-3)}
.card-top>*,.card-bottom>*{min-width:0}
.card-top .pill,.card-top .status-pill{flex:0 0 auto}
.acquisition-banner-inner{gap:var(--hb-space-5)}
.acquisition-main{min-width:0;display:flex;align-items:center;gap:var(--hb-space-3)}
.acquisition-copy{min-width:0}
.acquisition-copy strong,.acquisition-copy span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:1180px){
.nav{padding-left:clamp(16px,3vw,36px);padding-right:clamp(16px,3vw,36px)}
.nav nav{gap:12px}.nav nav a{font-size:13px}
.nav-contact-cta span:not(.nav-contact-icon){display:none}
.nav-contact-cta{padding:4px}.nav-actions{gap:7px}
}
@media(max-width:900px){
.nav{height:auto;min-height:68px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:10px}
.nav nav{
order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;padding:2px 0 3px;gap:18px;-webkit-overflow-scrolling:touch;
}
.nav nav::-webkit-scrollbar{display:none}
.nav nav a{flex:0 0 auto;min-height:34px}.nav-actions{margin-left:auto}
.hero-trust{align-items:flex-start}
}
@media(max-width:700px){
.actions,.demo-actions,.center-actions{display:grid;grid-template-columns:1fr;width:100%}
.actions .button,.demo-actions .button,.center-actions .button{width:100%;text-align:center}
.hero-trust{display:grid;grid-template-columns:auto 1fr;gap:8px 9px}
.hero-trust .live-dot{grid-row:1}.hero-trust b{grid-column:2}
.hero-trust span:not(.live-dot){grid-column:2;white-space:normal}
.acquisition-banner-inner{align-items:flex-start;flex-direction:column;gap:10px;padding-top:10px!important;padding-bottom:10px!important}
.acquisition-main{align-items:flex-start}
.acquisition-copy strong,.acquisition-copy span{white-space:normal;overflow:visible}
.acquisition-cta{align-self:flex-start}
}
@media(max-width:430px){
.nav-actions{gap:5px}.nav-contact-cta{display:none}
.nav-cta{padding-left:12px;padding-right:12px}.nav nav{gap:16px}
}
@media(prefers-reduced-motion:reduce){.nav nav,.nav-actions{scroll-behavior:auto}}
/* Acquisition contact — responsive WhatsApp presentation */
.acquisition-contact{display:flex!important;align-items:center;gap:8px;flex:0 0 auto}
.acquisition-whatsapp-label{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#98a2b3}
.acquisition-whatsapp{
display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 10px;
border:1px solid rgba(18,183,106,.18);border-radius:9px;background:rgba(18,183,106,.07);
color:#087443;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap;
transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.acquisition-whatsapp:hover{transform:translateY(-1px);background:rgba(18,183,106,.11);border-color:rgba(18,183,106,.3)}
@media(max-width:900px){.acquisition-contact{align-self:flex-start}.acquisition-whatsapp-label{display:none}}
@media(max-width:700px){.acquisition-contact{width:100%}.acquisition-whatsapp{width:auto;min-height:36px}}
/* Adaptive layout system v5 — layout changes by available width, not device labels */
.nav{
container-type:inline-size;
container-name:hb-nav;
}
.hero-product{
container-type:inline-size;
container-name:hb-hero;
}
@media(max-width:1100px){
.nav{
height:auto;
min-height:68px;
padding-top:11px;
padding-bottom:10px;
flex-wrap:wrap;
gap:8px 14px;
}
.nav nav{
order:3;
flex:1 0 100%;
justify-content:flex-start;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
padding:3px 1px 5px;
gap:18px;
-webkit-overflow-scrolling:touch;
}
.nav nav::-webkit-scrollbar{display:none}
.nav nav a{flex:0 0 auto;min-height:34px;font-size:12px}
.nav-actions{margin-left:auto}
.nav-contact-cta span:not(.nav-contact-icon){display:none}
.nav-contact-cta{padding:4px}
.hero-product{
grid-template-columns:minmax(0,1fr);
gap:32px;
min-height:auto;
padding-top:72px;
}
.hero-product-card{
width:min(100%,620px);
margin:0 auto;
}
.hero-product .hero-copy-wrap{max-width:760px}
.hero h1{
font-size:clamp(48px,7vw,76px);
letter-spacing:-4.5px;
}
.acquisition-banner-inner{
flex-wrap:wrap;
gap:10px 16px;
}
.acquisition-main{flex:1 1 420px}
.acquisition-contact{flex:0 0 auto}
.acquisition-cta{flex:0 0 auto}
}
@media(max-width:760px){
.nav{
padding-left:16px;
padding-right:16px;
}
.nav nav{gap:16px}
.nav nav a{font-size:11px}
.nav-cta{
min-height:40px;
padding:0 12px;
}
.hero-product{
padding:58px 20px 64px;
gap:26px;
}
.hero h1{
font-size:clamp(42px,12vw,58px);
line-height:.98;
letter-spacing:-3.2px;
}
.hero-copy{
font-size:17px;
line-height:1.65;
margin:22px 0;
}
.hero-product-card{
padding:19px;
border-radius:17px;
}
.product-flow>div{padding:13px 0}
.hero-proof{margin-top:18px}
.hero-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.acquisition-banner-inner{
padding:10px 16px!important;
flex-direction:column;
align-items:stretch;
}
.acquisition-main{
width:100%;
align-items:flex-start;
}
.acquisition-contact{
width:100%;
}
.acquisition-whatsapp{
min-height:36px;
}
.acquisition-cta{
align-self:flex-start;
}
}
@media(max-width:480px){
.nav{
padding-left:12px;
padding-right:12px;
}
.brand{font-size:18px}
.nav-actions{gap:5px}
.nav-contact-cta{display:none}
.nav-cta{font-size:11px}
.nav nav{gap:14px}
.nav nav a{font-size:10.5px}
.hero-product{
padding-left:16px;
padding-right:16px;
}
.hero-trust{
display:grid;
grid-template-columns:auto 1fr;
gap:7px 8px;
}
.hero-trust .live-dot{grid-row:1}
.hero-trust b{grid-column:2}
.hero-trust span:not(.live-dot){grid-column:2;white-space:normal}
.actions{
grid-template-columns:1fr;
}
.hero-proof-grid{gap:7px}
.hero-proof-grid>div{min-width:0}
.hero-proof-grid strong{overflow-wrap:anywhere}
.product-flow strong{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
.hero-product-card{animation:none!important}
}
/* Site-wide customization + mobile navigation v6 */
:root{
--hb-user-accent:var(--hb-violet,#6d5dfc);
--hb-user-accent-2:var(--hb-violet-2,#8b7cff);
--hb-radius-scale:1;
}
html[data-density="compact"]{--hb-density:0.82}
html[data-density="comfortable"]{--hb-density:1}
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html[data-theme="dark"]{
--bg:#080c15;--surface:#101722;--surface-soft:#121b29;--ink:#edf2ff;--muted:#9aa7bb;--line:#243044;
--primary:var(--hb-user-accent);--primary-2:var(--hb-user-accent-2);
--dark:#050914;--dark-2:#0d1524;
color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .nav{background:rgba(8,12,21,.84);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .nav nav a,html[data-theme="dark"] .nav-cta{color:#c5cede}
html[data-theme="dark"] .brand{color:#f4f7ff}
html[data-theme="dark"] .secondary,html[data-theme="dark"] .card,html[data-theme="dark"] .feature-card,html[data-theme="dark"] .behavior-card,html[data-theme="dark"] .workspace-card,html[data-theme="dark"] .price-card,html[data-theme="dark"] .sim-card,html[data-theme="dark"] .builder-result,html[data-theme="dark"] .hero-proof,html[data-theme="dark"] .hero-tip{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .card p,html[data-theme="dark"] .feature-card p,html[data-theme="dark"] .hero-copy,html[data-theme="dark"] .section-head>p,html[data-theme="dark"] .lead{color:var(--muted)}
html[data-theme="dark"] .hero-product{background:radial-gradient(circle at 78% 18%,rgba(109,93,252,.20),transparent 27%),radial-gradient(circle at 94% 72%,rgba(34,211,238,.10),transparent 24%),linear-gradient(180deg,#0a0f1a,#0d1420)}
html[data-theme="dark"] .proof-strip{background:#0d1420;border-color:var(--line)}
html[data-theme="dark"] .proof-strip div,.html[data-theme="dark"] .workflow div{border-color:var(--line)}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0d1420;color:var(--ink);border-color:#334155}
html[data-theme="dark"] .toolbar input,html[data-theme="dark"] .toolbar select{background:#0d1420;color:var(--ink)}
html[data-theme="dark"] .tags span,html[data-theme="dark"] .status-pill{background:#172235;color:#cbd5e1}
html[data-theme="dark"] .cta:not(.cta-product){background:#141d2b;color:var(--ink)}
html[data-theme="dark"] footer{border-color:var(--line);color:#8997ab}
html[data-theme="dark"] .auth-page{background:radial-gradient(circle at 12% 12%,rgba(109,93,252,.20),transparent 28%),radial-gradient(circle at 88% 18%,rgba(34,211,238,.12),transparent 26%),#080c15}
html[data-theme="dark"] .auth-card{background:rgba(16,23,34,.94);color:var(--ink);border-color:#29364c}
html[data-theme="dark"] .auth-field label{color:#cbd5e1}
html[data-theme="dark"] .auth-field input{background:#0b111c;color:#f4f7ff;border-color:#334155}
html[data-theme="dark"] .auth-foot,html[data-theme="dark"] .auth-meta{color:#8795aa}
html[data-theme="dark"] .registry-note{background:rgba(109,93,252,.08);color:var(--ink)}
html[data-theme="dark"] .empty{background:var(--surface);border-color:#334155;color:var(--muted)}
html[data-theme="dark"] .table-row.head{background:#172235}
html[data-theme="dark"] .benchmark-table,html[data-theme="dark"] .run-table{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .acquisition-banner{background:rgba(13,20,32,.78)!important;border-color:rgba(255,255,255,.07)!important}
html[data-theme="dark"] .acquisition-copy strong{color:#dbe5f5!important}
html[data-theme="dark"] .acquisition-copy span{color:#8e9caf!important}
/* Accent follows user choice */
.primary,.nav-cta{background:linear-gradient(135deg,var(--hb-user-accent),var(--hb-user-accent-2))}
.eyebrow,.feature-number,.feature-card a{color:var(--hb-user-accent)}
.nav nav a:hover,.nav nav a.active{color:var(--hb-user-accent)}
.auth-field input:focus{border-color:var(--hb-user-accent)!important}
.hb-settings-trigger{
width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(16,24,40,.10);
border-radius:10px;background:rgba(255,255,255,.78);color:var(--hb-user-accent);cursor:pointer;
font-size:16px;transition:transform .2s,background .2s;
}
.hb-settings-trigger:hover{transform:rotate(18deg);background:#fff}
html[data-theme="dark"] .hb-settings-trigger{background:#121b29;border-color:#2a3850;color:var(--hb-user-accent)}
.hb-mobile-menu{
display:none;width:40px;height:40px;padding:8px;border:1px solid rgba(16,24,40,.10);border-radius:10px;
background:rgba(255,255,255,.8);cursor:pointer;flex-direction:column;justify-content:center;gap:4px;
}
.hb-mobile-menu span{display:block;height:2px;width:20px;margin:auto;background:currentColor;border-radius:3px;transition:transform .2s,opacity .2s}
html[data-theme="dark"] .hb-mobile-menu{background:#121b29;border-color:#2a3850;color:#e5edf9}
.hb-settings{
position:fixed;z-index:100;right:20px;top:84px;width:min(360px,calc(100vw - 28px));padding:18px;
border:1px solid rgba(109,93,252,.16);border-radius:20px;background:rgba(255,255,255,.94);
box-shadow:0 30px 90px rgba(16,24,40,.20);backdrop-filter:blur(22px);transform:translateY(-10px) scale(.98);
opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.hb-settings.is-open{opacity:1;pointer-events:auto;transform:none}
html[data-theme="dark"] .hb-settings{background:rgba(13,20,32,.96);border-color:#2a3850;color:#edf2ff}
.hb-settings-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.hb-settings-head b,.hb-settings-head span{display:block}.hb-settings-head b{font-size:16px}.hb-settings-head span{font-size:11px;color:#7b8799;margin-top:3px}
.hb-settings-close{width:30px;height:30px;border:0;border-radius:8px;background:#f1f3f7;color:#667085;font-size:20px;cursor:pointer}
html[data-theme="dark"] .hb-settings-close{background:#1a2535;color:#cbd5e1}
.hb-setting{padding:15px 0;border-top:1px solid #eaecf0}
html[data-theme="dark"] .hb-setting{border-color:#243044}
.hb-setting>label{display:block;font-size:11px;font-weight:850;letter-spacing:.8px;text-transform:uppercase;color:#667085;margin-bottom:10px}
html[data-theme="dark"] .hb-setting>label{color:#9aa7bb}
.hb-segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.hb-segment button{border:1px solid #dfe3ea;background:#f8f9fb;color:#475467;border-radius:9px;padding:9px 7px;font:inherit;font-size:11px;font-weight:750;cursor:pointer}
html[data-theme="dark"] .hb-segment button{background:#111a29;border-color:#2a3850;color:#cbd5e1}
.hb-segment button.selected{border-color:var(--hb-user-accent);background:color-mix(in srgb,var(--hb-user-accent) 10%,transparent);color:var(--hb-user-accent)}
.hb-swatches{display:flex;gap:10px}
.hb-swatch{width:32px;height:32px;border-radius:50%;border:3px solid transparent;cursor:pointer;box-shadow:0 0 0 1px rgba(16,24,40,.12)}
.hb-swatch.selected{outline:2px solid var(--hb-user-accent);outline-offset:3px}
.hb-violet{background:#6d5dfc}.hb-cyan{background:#0891b2}.hb-blue{background:#2563eb}.hb-emerald{background:#059669}.hb-orange{background:#ea580c}
.hb-settings-note{margin-top:12px;padding:10px 11px;border-radius:10px;background:#f7f8fb;color:#7b8799;font-size:10px;line-height:1.5}
html[data-theme="dark"] .hb-settings-note{background:#111a29;color:#8f9db0}
@media(max-width:1100px){
.hb-mobile-menu{display:flex}
.nav.hb-menu-open nav{display:flex}
.nav:not(.hb-menu-open) nav{display:none}
.nav{position:sticky}
.nav .nav-actions{margin-left:auto}
}
@media(max-width:560px){
.hb-settings{right:12px;top:72px}
.hb-settings-trigger{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.hb-settings,.hb-settings-trigger,.hb-mobile-menu span{transition:none}}
/* Product system v1 — command palette + workspace control center */
.hb-command{position:fixed;inset:0;z-index:300;display:none}.hb-command.is-open{display:block}
.hb-command-backdrop{position:absolute;inset:0;background:rgba(3,7,18,.52);backdrop-filter:blur(8px)}
.hb-command-panel{position:absolute;top:12vh;left:50%;transform:translateX(-50%);width:min(650px,calc(100vw - 28px));overflow:hidden;border:1px solid rgba(109,93,252,.22);border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 40px 120px rgba(0,0,0,.3)}
.hb-command-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #e8ebf0}.hb-command-head>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#f0efff;color:var(--hb-user-accent,#6d5dfc);font-weight:900}.hb-command-head input{flex:1;border:0!important;box-shadow:none!important;outline:0!important;background:transparent;font-size:16px;color:#111827}
.hb-command-list{max-height:420px;overflow:auto;padding:8px}.hb-command-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;text-decoration:none;color:#111827}.hb-command-item:hover,.hb-command-item.active{background:#f4f3ff}.hb-command-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#f0f1f5;color:var(--hb-user-accent,#6d5dfc);font-size:12px;font-weight:900}.hb-command-item b,.hb-command-item small{display:block}.hb-command-item b{font-size:13px}.hb-command-item small{font-size:10px;color:#8a94a6;margin-top:2px}.hb-command-item kbd{font-size:11px;color:#98a2b3}.hb-command-empty{padding:35px;text-align:center;color:#8a94a6;font-size:13px}.hb-command-foot{display:flex;gap:18px;padding:10px 16px;border-top:1px solid #e8ebf0;color:#98a2b3;font-size:10px}
.hb-command-trigger{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 9px;border:1px solid #d9dce3;border-radius:8px;background:rgba(255,255,255,.75);color:#667085;font-size:10px;font-weight:800;cursor:pointer}.hb-command-trigger:hover{border-color:var(--hb-user-accent,#6d5dfc);color:var(--hb-user-accent,#6d5dfc)}
html[data-theme="dark"] .hb-command-panel{background:rgba(12,18,30,.98);border-color:#2b3a53}.html[data-theme="dark"] .hb-command-head{border-color:#26344a}.html[data-theme="dark"] .hb-command-item{color:#edf2ff}.html[data-theme="dark"] .hb-command-item:hover,.html[data-theme="dark"] .hb-command-item.active{background:#172238}.html[data-theme="dark"] .hb-command-icon{background:#172238}.html[data-theme="dark"] .hb-command-foot{border-color:#26344a}
.workspace-commandbar{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding:28px 30px;margin:0 0 18px;border:1px solid rgba(109,93,252,.15);border-radius:20px;background:linear-gradient(135deg,rgba(109,93,252,.07),rgba(34,211,238,.045),rgba(255,255,255,.8));box-shadow:0 18px 50px rgba(30,41,59,.06)}
.workspace-commandbar h2{margin:-7px 0 5px;font-size:34px;letter-spacing:-1.5px}.workspace-commandbar p{margin:0;color:#697386;font-size:13px}.workspace-actions{display:flex;gap:8px;flex-wrap:wrap}
.workspace-status-rail{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:10px;padding:12px 16px;margin-bottom:22px;border:1px solid #e3e7ee;border-radius:14px;background:#fff}.workspace-status-rail>div{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center}.workspace-status-rail b{font-size:11px}.workspace-status-rail small{grid-column:2;font-size:9px;color:#8994a6}.workspace-status-rail i{height:1px;background:linear-gradient(90deg,#d8dee8,rgba(109,93,252,.35))}
.status-node{width:7px;height:7px;border-radius:50%;background:#b9c1ce;box-shadow:0 0 0 3px rgba(185,193,206,.12)}.status-node.live{background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.10)}
@media(max-width:800px){.workspace-commandbar{align-items:flex-start;flex-direction:column;padding:22px}.workspace-status-rail{grid-template-columns:1fr 1fr;gap:12px}.workspace-status-rail i{display:none}.hb-command-trigger{display:none}}
html[data-theme="dark"] .workspace-commandbar{background:linear-gradient(135deg,rgba(109,93,252,.12),rgba(34,211,238,.06),rgba(16,23,34,.9));border-color:#29364d}.html[data-theme="dark"] .workspace-status-rail{background:#101722;border-color:#2a3850}.html[data-theme="dark"] .workspace-commandbar p{color:#9aa7bb}