@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --bg:#f4f3ef; --surface:#fff; --ink:#16151a; --muted:#68666d; --line:#deddd8; --accent:#7651d8; --lavender:#ded3ff; --accent-2:#b798e8; --yellow:#f4df4e; --shadow:0 25px 70px #2e22501c; }
html[data-theme="command"] { --bg:#101113; --surface:#191b1d; --ink:#f6f5f1; --muted:#a9aaa6; --line:#34383a; --accent:#b9f5d0; --lavender:#28203f; --accent-2:#7651d8; --yellow:#f4df4e; --shadow:0 25px 70px #0008; }
html[data-theme="editorial"] { --bg:#eee9df; --surface:#f9f6ef; --ink:#201b17; --muted:#74695e; --line:#d7cec0; --accent:#a04c36; --lavender:#e6d8d0; --accent-2:#dbe5a5; --yellow:#e5bd50; --shadow:0 25px 70px #653c2518; }
html[data-mode="dark"] { --bg:#11101b; --surface:#1b1830; --ink:#f5f1ff; --muted:#bcb4d0; --line:#3c355a; --lavender:#302451; --shadow:0 25px 70px #0009; }
html[data-mode="dark"][data-theme="command"] { --bg:#0d0f12; --surface:#181a1e; --ink:#f6f5f1; --muted:#a9aaa6; --line:#34383a; --lavender:#28203f; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'DM Sans',sans-serif; transition:background .35s,color .35s; } a { color:inherit; text-decoration:none; } .shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.lab-bar { background:var(--ink); color:var(--bg); display:flex; justify-content:space-between; padding:9px 24px; font:500 11px 'DM Mono',monospace; letter-spacing:.02em; } .lab-bar b { color:var(--yellow); margin-right:10px; } .lab-bar a { text-decoration:underline; }
.site-header { width:min(1180px,calc(100% - 48px)); margin:auto; height:88px; display:flex; align-items:center; gap:42px; position:relative; z-index:5; } .brand img { width:145px; height:auto; display:block; } .site-header nav { display:flex; gap:28px; margin-left:auto; font-size:13px; color:var(--muted); } .site-header nav a:hover { color:var(--ink); } .header-actions { display:flex; align-items:center; gap:12px; } .header-cta,.button { border-radius:7px; padding:13px 17px; font-weight:700; font-size:13px; } .header-cta,.button-primary { background:var(--ink); color:var(--bg); } .theme-button,.menu-button { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:6px; padding:10px 12px; font:500 12px 'DM Mono',monospace; cursor:pointer; } .menu-button { display:none; font-size:18px; } .theme-menu { display:none; position:absolute; right:112px; top:70px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:8px; padding:7px; width:210px; } .theme-menu.is-open { display:grid; } .theme-menu button { border:0; background:transparent; color:var(--ink); text-align:left; padding:10px; cursor:pointer; font-weight:700; } .theme-menu button:hover { background:var(--bg); } .theme-menu small { display:block; color:var(--muted); font:11px 'DM Mono',monospace; margin-top:3px; }
.hero { min-height:650px; display:grid; grid-template-columns:1.04fr .96fr; gap:50px; align-items:center; padding:70px 0 100px; } .kicker { color:var(--accent); font:500 11px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; margin:0 0 20px; } h1,h2,h3 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.055em; margin:0; } h1 { font-size:clamp(52px,7vw,91px); line-height:.95; max-width:690px; } h1 em { color:var(--accent); font-style:normal; } .hero-lede { color:var(--muted); font-size:18px; line-height:1.6; max-width:530px; margin:28px 0; } .hero-actions { display:flex; align-items:center; gap:22px; } .button span,.text-link span,.feature-card a span,.panel-footer span { margin-left:10px; } .text-link { font-weight:700; font-size:13px; border-bottom:1px solid var(--ink); padding-bottom:4px; } .hero-note { display:flex; gap:9px; align-items:center; color:var(--muted); font:11px 'DM Mono',monospace; margin-top:34px; } .pulse,.live-dot { width:8px; height:8px; display:inline-block; background:var(--accent); border-radius:50%; box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent); }
.hero-stage { min-height:440px; position:relative; display:grid; place-items:center; } .orbit { position:absolute; border:1px solid var(--line); border-radius:50%; width:390px; height:390px; } .orbit-one { transform:rotate(28deg) scaleX(.45); border-color:var(--accent); opacity:.7; } .orbit-two { transform:rotate(-32deg) scaleX(.45); border-color:var(--yellow); opacity:.8; } .hero-card { position:relative; width:min(390px,100%); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; box-shadow:var(--shadow); z-index:1; } .card-top,.card-footer,.panel-header { display:flex; justify-content:space-between; align-items:center; } .card-label,.panel-header { color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.08em; } .live-dot { color:var(--accent); font:10px 'DM Mono',monospace; width:auto; height:auto; background:none; box-shadow:none; } .hero-score { display:flex; gap:16px; align-items:end; margin:45px 0 18px; } .hero-score strong { font:600 78px/.8 'Space Grotesk'; letter-spacing:-.08em; } .hero-score span { color:var(--muted); font:11px/1.4 'DM Mono'; } .hero-score b { color:var(--accent); } .sparkline { height:75px; display:flex; align-items:end; gap:7px; border-bottom:1px solid var(--line); } .sparkline i { flex:1; background:linear-gradient(var(--accent),var(--accent-2)); border-radius:3px 3px 0 0; } .sparkline i:nth-child(1){height:30%}.sparkline i:nth-child(2){height:42%}.sparkline i:nth-child(3){height:35%}.sparkline i:nth-child(4){height:55%}.sparkline i:nth-child(5){height:48%}.sparkline i:nth-child(6){height:65%}.sparkline i:nth-child(7){height:56%}.sparkline i:nth-child(8){height:72%}.sparkline i:nth-child(9){height:66%}.sparkline i:nth-child(10){height:83%}.sparkline i:nth-child(11){height:74%}.sparkline i:nth-child(12){height:94%} .card-footer { color:var(--muted); font:10px 'DM Mono'; padding-top:14px; } .floating-proof { position:absolute; z-index:2; bottom:23px; left:0; display:flex; gap:10px; align-items:center; background:var(--ink); color:var(--bg); border-radius:7px; padding:13px 15px; box-shadow:var(--shadow); } .proof-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--accent-2); color:#151515; } .floating-proof b,.floating-proof small { display:block; } .floating-proof b { font-size:12px; } .floating-proof small { color:#a9aaa6; font:9px 'DM Mono'; margin-top:3px; }
.ticker { overflow:hidden; border-block:1px solid var(--line); color:var(--accent); font:500 13px 'DM Mono'; } .ticker-track { width:max-content; display:flex; gap:30px; align-items:center; padding:16px 0; animation:marquee 24s linear infinite; } .ticker b { color:var(--yellow); } @keyframes marquee { to { transform:translateX(-25%); } }
.section { padding:135px 0; } .section-heading { max-width:620px; } h2 { font-size:clamp(38px,5vw,65px); line-height:1; } .section-heading > p:last-child { color:var(--muted); font-size:16px; line-height:1.6; max-width:510px; margin-top:24px; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:60px; } .feature-card { min-height:330px; border:1px solid var(--line); border-radius:9px; padding:25px; background:var(--surface); display:flex; flex-direction:column; } .feature-card h3 { font-size:27px; margin-top:60px; } .feature-card p { color:var(--muted); font-size:14px; line-height:1.6; max-width:270px; } .feature-number { color:var(--accent); font:11px 'DM Mono'; } .feature-card a { color:var(--accent); font-size:12px; font-weight:700; margin-top:auto; } .feature-dark { background:var(--ink); color:var(--bg); border-color:var(--ink); } .feature-dark p { color:#a9aaa6; } .mini-receipt { display:flex; align-items:center; gap:10px; margin-top:auto; border-top:1px solid #ffffff2c; padding-top:14px; } .mini-receipt > span { display:grid; place-items:center; background:var(--accent); color:#111; width:29px; height:29px; font:10px 'DM Mono'; border-radius:4px; } .mini-receipt b,.mini-receipt small { display:block; } .mini-receipt b { font-size:11px; } .mini-receipt small { color:#a9aaa6; font:9px 'DM Mono'; margin-top:3px; } .mini-receipt strong { margin-left:auto; color:var(--accent); } .mini-bars { height:60px; display:flex; align-items:end; gap:7px; margin-top:auto; } .mini-bars i { flex:1; background:var(--accent); border-radius:3px 3px 0 0; opacity:.8; }
.proof-section { background:color-mix(in srgb,var(--surface) 40%,transparent); } .proof-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; } .proof-list { display:grid; gap:18px; margin-top:38px; } .proof-list > div { display:flex; gap:18px; align-items:start; border-top:1px solid var(--line); padding-top:15px; } .proof-list b { color:var(--accent); font:11px 'DM Mono'; } .proof-list strong,.proof-list small { display:block; } .proof-list strong { font-size:14px; } .proof-list small { color:var(--muted); font-size:12px; margin-top:4px; } .command-panel { background:var(--ink); color:var(--bg); border-radius:10px; padding:25px; box-shadow:var(--shadow); } .panel-header button { border:0; color:var(--bg); background:none; letter-spacing:3px; } .panel-total { display:flex; align-items:end; gap:14px; margin:45px 0 25px; } .panel-total strong { font:600 74px/.8 'Space Grotesk'; letter-spacing:-.08em; } .panel-total span { color:#a9aaa6; font:11px/1.5 'DM Mono'; } .panel-total b { color:var(--accent); } .queue { border-top:1px solid #ffffff2c; } .queue > div { display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:center; border-bottom:1px solid #ffffff2c; padding:17px 0; } .severity { width:7px; height:7px; border-radius:50%; } .severity.high { background:#ff6a62; }.severity.medium { background:var(--yellow); }.severity.low { background:var(--accent); } .queue b { font-size:12px; }.queue small { grid-column:2; color:#a9aaa6; font:9px 'DM Mono'; }.queue em { grid-column:3; grid-row:1 / span 2; color:#a9aaa6; font:9px 'DM Mono'; font-style:normal; } .panel-footer { color:var(--accent); font-size:12px; margin-top:19px; }
.pilot-card { background:var(--accent); color:#16151a; border-radius:10px; padding:50px; display:flex; justify-content:space-between; align-items:end; gap:30px; } .pilot-card .kicker { color:#16151a99; }.pilot-card h2 { max-width:620px; }.pilot-card p:not(.kicker) { max-width:530px; line-height:1.6; }.pilot-actions { display:grid; gap:9px; flex:0 0 190px; }.pilot-actions .button-primary { background:#16151a; color:var(--accent); }.button-quiet { background:#ffffff99; text-align:center; }
.footer { padding:35px 0 55px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:11px 'DM Mono'; }.footer .brand img { width:110px; }.footer div { display:flex; gap:20px; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:800px) { .shell,.site-header { width:min(100% - 32px,600px); }.lab-bar { padding:9px 16px; font-size:9px; }.lab-bar span { max-width:70%; }.site-header { height:76px; gap:16px; }.site-header nav { display:none; position:absolute; top:68px; left:0; right:0; background:var(--surface); border:1px solid var(--line); padding:16px; flex-direction:column; gap:18px; }.site-header nav.is-open { display:flex; }.menu-button { display:block; }.header-cta { display:none; }.theme-menu { right:48px; top:62px; }.hero { grid-template-columns:1fr; padding:65px 0 80px; gap:45px; }.hero-stage { min-height:370px; }.hero-card { width:min(360px,calc(100% - 22px)); }.orbit { width:330px; height:330px; }.floating-proof { left:2px; bottom:8px; }.feature-grid,.proof-layout { grid-template-columns:1fr; }.section { padding:90px 0; }.feature-grid { margin-top:38px; }.feature-card { min-height:260px; }.feature-card h3 { margin-top:40px; }.pilot-card { padding:32px 25px; display:block; }.pilot-actions { margin-top:30px; }.footer { align-items:flex-start; flex-direction:column; gap:25px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .reveal { opacity:1; transform:none; } }

.lang-toggle, .mode-toggle { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:6px; padding:10px 12px; font:500 12px 'DM Mono',monospace; cursor:pointer; }
html[data-mode="dark"] body { background:#11101b; color:#f5f1ff; }
html[data-mode="dark"][data-theme="command"] body { background:#0d0f12; color:#f6f5f1; }

html[data-theme="signal"] .hero-card,
html[data-theme="signal"] .feature-card:not(.feature-dark) {
	background: linear-gradient(145deg, var(--surface) 0%, var(--lavender) 100%);
}

.role-section { background: var(--surface); }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 55px; }
.role-card { min-height: 300px; border: 1px solid var(--line); border-radius: 9px; padding: 23px; display: flex; flex-direction: column; background: var(--bg); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.role-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow); }
.role-card h3 { font-size: 27px; margin-top: 54px; }
.role-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.role-card strong { color: var(--accent); font-size: 12px; margin-top: auto; }
.role-card strong span { margin-left: 8px; }
.role-manager { background: linear-gradient(145deg, var(--bg), var(--lavender)); }
.role-employee { background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--lavender) 55%, var(--surface))); }
.role-mobile { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.role-mobile p { color: #a9aaa6; }
.role-leadership { background: linear-gradient(145deg, var(--surface), var(--bg)); }
@media (max-width:800px) { .role-grid { grid-template-columns: 1fr 1fr; margin-top: 38px; } }
@media (max-width:520px) { .role-grid { grid-template-columns: 1fr; } }