/* WorkFlow OS - site design system (plain CSS, no build step). Loaded after style.css; all new components are wf- prefixed. */
:root{--bg:#0b1326;--canvas:#060e20;--low:#131b2e;--card:#171f33;--elev:#222a3d;--elev2:#31394d;--hi:#F8FAFC;--text:#dae2fd;--soft:#bbc9c7;--sec:#94A3B8;--mute:#64748B;--p:#63ede5;--pc:#3fd0c9;--glow:#00F2FE;--blue:#7bd0ff;--vib:#0EA5E9;--em:#10B981;--am:#F59E0B;--ro:#F43F5E;--onp:#005552;--f-d:'Space Grotesk','Inter',sans-serif;--f-b:'Inter',system-ui,sans-serif;--f-m:'JetBrains Mono',ui-monospace,monospace}
body.wf{background:var(--bg);color:var(--text);font:400 15px/24px var(--f-b);padding-top:80px;-webkit-font-smoothing:antialiased}
.wf ::selection{background:var(--pc);color:var(--onp)}
.wf h1,.wf h2,.wf h3,.wf h4{font-family:var(--f-d);color:var(--hi);letter-spacing:-.02em;margin:0}
.wf a{color:inherit;text-decoration:none}.wf p{margin:0}.wf ul,.wf ol{list-style:none;margin:0;padding:0}
.wf :focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--f-m)}.wf-accent{color:var(--p)}
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:20px;line-height:1;display:inline-block;letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';flex:none}
.wf-skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--p);color:var(--onp);padding:10px 16px;border-radius:8px;font-weight:600}.wf-skip:focus{top:12px}
.wf-wrap{max-width:1280px;margin:0 auto;padding:0 32px}
/* header */
.wf-header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(11,19,38,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 8px rgba(0,0,0,.4)}
.wf-nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wf-brand{display:flex;align-items:center;gap:12px}
.wf-logo{width:40px;height:40px;flex:none;display:block;border-radius:50%;filter:drop-shadow(0 0 8px rgba(76,211,224,.25));transition:filter .2s}.wf-logo.sm{width:36px;height:36px}
.wf-brand:hover .wf-logo{filter:drop-shadow(0 0 14px rgba(76,211,224,.5))}
.wf-brand-text{display:flex;flex-direction:column;line-height:1.2}.wf-brand-text>span{display:flex;align-items:center;gap:8px}
.wf-brand-text b{font:600 18px var(--f-d);color:var(--hi);letter-spacing:-.01em}
.wf-brand-text i{font:700 11px var(--f-m);letter-spacing:.08em;font-style:normal;color:var(--p);background:var(--card);padding:2px 6px;border-radius:4px}
.wf-brand-text small{font-size:13px;color:var(--mute)}
.wf-links{display:flex;gap:28px}.wf-links a{color:var(--soft);transition:color .2s}.wf-links a:hover{color:var(--text)}.wf-links a.active{color:var(--p);font-weight:700}
.wf-nav-cta{display:flex;align-items:center;gap:12px}
.wf-menu{display:none;position:relative}.wf-menu summary{list-style:none;cursor:pointer;width:40px;height:40px;border-radius:12px;background:var(--elev);display:grid;place-items:center}.wf-menu summary::-webkit-details-marker{display:none}
.wf-menu div{position:absolute;right:0;top:52px;width:220px;background:var(--card);border-radius:16px;padding:8px;box-shadow:0 20px 40px rgba(0,0,0,.5);display:flex;flex-direction:column}
.wf-menu div a{padding:10px 16px;border-radius:8px;color:var(--soft)}.wf-menu div a:hover{background:var(--elev)}
/* buttons, badges, cards */
.wf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font:600 14px/20px var(--f-b);padding:12px 24px;white-space:nowrap;transition:all .2s;border:0;cursor:pointer}
.wf-btn-primary{background:var(--pc);color:var(--onp);box-shadow:0 0 24px rgba(63,208,201,.35)}.wf-btn-primary:hover{background:var(--glow);color:#003735;transform:translateY(-2px)}
.wf-btn-secondary{background:var(--elev);color:var(--hi)}.wf-btn-secondary:hover{background:var(--elev2);color:var(--p)}
.wf-btn-lg{padding:14px 32px;font-size:15px}
.wf-badge{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:8px 16px;font:600 11px/14px var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.wf-chip{display:inline-flex;align-items:center;gap:8px;border-radius:4px;padding:4px 12px;font:600 11px/14px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--p));background:color-mix(in srgb,var(--c,var(--p)) 12%,transparent)}
.wf-eyebrow{font:600 11px/14px var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--p));display:block}
.wf-dot{width:8px;height:8px;border-radius:50%;background:var(--em);display:inline-block;animation:wfp 2s infinite}@keyframes wfp{50%{opacity:.4}}
.wf-card{background:var(--card);border-radius:16px;padding:24px;transition:background .2s}a.wf-card:hover,.wf-card.hover:hover{background:var(--elev)}
.wf-tile{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:24px;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);transition:transform .2s}
.wf-card:hover .wf-tile{transform:scale(1.05)}
/* layout */
.wf-sec{padding:96px 0}.wf-sec.alt{background:var(--canvas)}
.wf-head{max-width:768px;margin-bottom:64px}.wf-head.center{margin-inline:auto;text-align:center}
.wf-h1{font:700 56px/64px var(--f-d);letter-spacing:-.03em}
.wf-h2{font:600 36px/44px var(--f-d);margin:8px 0 16px}
.wf-h3{font:600 30px/38px var(--f-d);margin-bottom:16px}
.wf-lead{font-size:18px;line-height:28px;color:var(--sec)}
.wf-grad{background:linear-gradient(90deg,var(--p),var(--glow),var(--vib));-webkit-background-clip:text;background-clip:text;color:transparent}
.wf-grid{display:grid;gap:24px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g6{grid-template-columns:repeat(6,1fr);gap:12px}
/* hero */
.wf-hero{position:relative;overflow:hidden;padding:80px 0 128px;background:linear-gradient(var(--bg),var(--canvas))}
.wf-glow{position:absolute;border-radius:50%;pointer-events:none}
.wf-hero-copy{max-width:896px;margin:0 auto 64px;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative}
.wf-hero-copy .wf-badge{background:rgba(34,42,61,.9);color:var(--hi);margin-bottom:32px}
.wf-hero-copy .wf-h1{margin-bottom:24px}.wf-hero-copy .wf-lead{max-width:768px;margin-bottom:40px}
.wf-actions{display:flex;gap:16px;justify-content:center;margin-bottom:40px}
.wf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;width:100%;max-width:672px}
.wf-stats div{background:rgba(23,31,51,.6);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.wf-stats dt{font:700 24px/32px var(--f-d);color:var(--c)}.wf-stats dd{margin:0;font-size:13px;color:var(--mute)}
.wf-stage{max-width:1152px;margin:0 auto;border-radius:24px;padding:24px;background:var(--low);box-shadow:0 25px 50px rgba(0,0,0,.5);position:relative}
.wf-stage-bar{display:flex;justify-content:space-between;align-items:center;padding:0 12px 16px;font:500 12px var(--f-m);color:var(--sec)}
.wf-stage-bar i{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:8px}
.wf-stage-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:center}
.wf-device{background:var(--canvas);border-radius:16px;overflow:hidden;box-shadow:0 20px 25px rgba(0,0,0,.35)}
.wf-device-bar{background:var(--elev);padding:12px;display:flex;justify-content:space-between;align-items:center;font:600 12px var(--f-m);color:var(--hi)}
.wf-device-bar span{display:flex;align-items:center;gap:8px}
.wf-phone{max-width:320px;margin:0 auto;background:var(--canvas);border-radius:28px;padding:10px;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.wf-phone .wf-device-bar{border-radius:12px;margin-bottom:8px}
.wf-cap{font-size:13px;color:var(--mute);text-align:center;margin-top:12px}
/* screenshots: never cropped, never upscaled beyond native size */
.wf-shot img,.wf-device img,.wf-phone img{display:block;width:100%;height:auto;max-width:100%}
.wf-device img{margin:0 auto}
.wf-phone img{border-radius:18px}
.wf-shot{background:var(--card);border-radius:24px;padding:16px;box-shadow:0 25px 50px rgba(0,0,0,.5)}.wf-shot img{border-radius:16px;margin:0 auto}
.wf-shot.phone{max-width:384px;margin:0 auto;padding:12px}.wf-shot.phone img{max-width:346px}
.wf-missing{padding:48px 16px;text-align:center;font:12px var(--f-m);color:var(--mute);border:1px dashed var(--elev2);border-radius:12px}
/* step blocks */
.wf-split{display:grid;grid-template-columns:repeat(12,1fr);gap:48px;align-items:center;margin-bottom:112px}.wf-split:last-child{margin:0}
.wf-split>.a{grid-column:span 5}.wf-split>.b{grid-column:span 7}.wf-split.even>.a,.wf-split.even>.b{grid-column:span 6}
.wf-split .a p.t{color:var(--sec);margin-bottom:24px}
.wf-check li{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--soft);margin-bottom:12px}.wf-check .ms{color:var(--p);font-size:18px}
.wf-person{display:flex;align-items:center;gap:16px;margin-top:32px}.wf-person b{font-size:13px;color:var(--hi);display:block}.wf-person span.m{font:12px var(--f-m);color:var(--pc)}
.wf-av{width:40px;height:40px;border-radius:50%;background:rgba(245,158,11,.2);color:var(--am);display:grid;place-items:center;font:700 16px var(--f-d)}
.wf-note{background:var(--low);border-radius:12px;padding:16px;font-size:13px;color:var(--sec)}.wf-note strong{color:var(--hi)}
.wf-rows li{display:flex;justify-content:space-between;gap:12px;background:var(--card);border-radius:8px;padding:12px;margin-bottom:12px;font-size:13px}.wf-rows b{font-weight:500;color:var(--hi)}.wf-rows span{font:12px var(--f-m)}
.wf-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.wf-pair figure{margin:0;background:var(--card);border-radius:16px;padding:12px;box-shadow:0 20px 25px rgba(0,0,0,.35)}.wf-pair figcaption{padding:8px;text-align:center;font:12px var(--f-m);color:var(--sec)}.wf-pair img{width:100%;height:auto;border-radius:12px;display:block}
/* cards */
.wf-card h3{font:600 18px/26px var(--f-d);margin-bottom:12px}.wf-card p.d{color:var(--mute)}
.wf-card.sp{display:flex;flex-direction:column;justify-content:space-between}
.wf-card .foot{margin-top:24px;font:12px var(--f-m);color:var(--c);display:flex;align-items:center;gap:8px}
.wf-card.big{padding:32px}.wf-card.big p.d{color:var(--sec)}.wf-card.big .foot{margin-top:32px}
.wf-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.wf-two .wf-card{background:var(--elev);padding:16px}.wf-two h3{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--c);margin-bottom:8px}.wf-two p{font-size:13px;color:var(--mute)}
.wf-fit{border-radius:24px;padding:40px;box-shadow:0 20px 25px rgba(0,0,0,.35)}.wf-fit h3{display:flex;gap:12px;align-items:center;font:600 24px/32px var(--f-d);margin-bottom:24px}
.wf-fit h3 span.i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 20%,transparent)}
.wf-fit li{display:flex;gap:12px;color:var(--soft);margin-bottom:16px}.wf-fit li .ms{color:var(--c);margin-top:2px}
.wf-road{background:var(--canvas);border-radius:24px;padding:48px;margin-top:80px}.wf-road h3{font-size:24px;margin:4px 0 8px}.wf-road .sm{font-size:13px;color:var(--mute);margin-bottom:32px;max-width:672px}
.wf-road li{background:var(--card);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}.wf-road li b{font-size:13px;color:var(--hi)}.wf-road li .ms{color:var(--c);font-size:22px}.wf-road li small{font:600 11px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.wf-step{font:700 24px var(--f-d);width:48px;height:48px;border-radius:16px;background:var(--elev);color:var(--c);display:grid;place-items:center;margin-bottom:24px}
.wf-invest{max-width:1024px;margin:0 auto;border-radius:24px;background:var(--elev);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:32px;box-shadow:0 20px 25px rgba(0,0,0,.35)}
.wf-invest .l{display:flex;gap:16px;align-items:flex-start}.wf-invest .k{width:48px;height:48px;border-radius:12px;background:#2d3449;color:var(--blue);display:grid;place-items:center;flex:none}
.wf-invest h3{font:600 18px var(--f-d);margin:4px 0 8px}.wf-invest p{font-size:13px;color:var(--sec);max-width:576px}
.wf-cta{position:relative;overflow:hidden;padding:128px 0;background:var(--canvas);text-align:center}
.wf-trust{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;font-size:13px;color:var(--mute)}.wf-trust li{display:flex;gap:8px;align-items:center}.wf-trust .ms{color:var(--em);font-size:16px}
/* footer */
.wf-footer{background:var(--canvas);padding:64px 0 40px}
.wf-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:64px}
.wf-footer-brand p{font-size:13px;color:var(--mute);max-width:360px;margin-top:16px}.wf-footer-brand .wf-live{display:flex;align-items:center;gap:8px;font:12px var(--f-m);color:var(--sec)}
.wf-footer nav{display:flex;flex-direction:column;gap:8px;font-size:13px}.wf-footer nav a{color:var(--soft);transition:color .2s;word-break:break-all}.wf-footer nav a:hover{color:var(--p)}
.wf-footer h4{font:600 11px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.wf-footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute)}.wf-footer-bottom .mono{font-size:12px}
/* dialog */
.wf-dialog{border:0;border-radius:16px;background:var(--card);color:var(--text);padding:24px;width:calc(100% - 32px);max-width:448px;box-shadow:0 25px 50px rgba(0,0,0,.6)}.wf-dialog::backdrop{background:rgba(6,14,32,.8);backdrop-filter:blur(8px)}
.wf-dialog header{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid #1E293B;margin-bottom:16px}.wf-dialog h2{font-size:18px;display:flex;gap:8px;align-items:center}
.wf-dialog .x{background:0;border:0;color:var(--mute);cursor:pointer;padding:6px;border-radius:8px}.wf-dialog .x:hover{color:var(--hi)}
.wf-dialog label{display:block;font-size:13px;color:var(--sec);margin-bottom:16px}
.wf-dialog input,.wf-dialog textarea{display:block;width:100%;margin:4px 0 0;padding:10px 16px;border-radius:8px;border:0;background:var(--canvas);color:var(--hi);font:inherit}.wf-dialog input:focus,.wf-dialog textarea:focus{outline:1px solid var(--p)}
.wf-dialog .hp{position:absolute;left:-9999px}
.wf-dialog .row{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.wf-dialog .form-status{font-size:13px;margin-bottom:12px}.wf-dialog .form-status.success{color:var(--em)}.wf-dialog .form-status.error{color:var(--ro)}
.wf-btn-ghost{background:0;color:var(--sec)}.wf-btn-ghost:hover{color:var(--hi)}
/* responsive */
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g6{grid-template-columns:repeat(3,1fr)}.wf-links{display:none}.wf-menu{display:block}}
@media(max-width:900px){.wf-split,.wf-split.even{display:block}.wf-split>.a,.wf-split>.b{margin-bottom:32px}.wf-split>.b{order:-1}.wf-stage-grid,.g3,.g2{grid-template-columns:1fr}.wf-footer-grid{grid-template-columns:1fr 1fr}.wf-invest{flex-direction:column;align-items:flex-start}}
@media(max-width:640px){.wf-wrap{padding:0 20px}.wf-h1{font-size:36px;line-height:44px}.wf-h2{font-size:28px;line-height:36px}.wf-sec{padding:72px 0}.wf-actions{flex-direction:column;width:100%}.wf-stats,.g4,.wf-two,.wf-pair{grid-template-columns:1fr}.g6{grid-template-columns:repeat(2,1fr)}.wf-fit,.wf-road{padding:24px}.wf-nav-cta .wf-btn{display:none}.wf-stage{padding:12px}.wf-footer-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.wf *{animation:none!important;transition:none!important}}