:root { color-scheme:dark; --bg:#061015; --surface:#0c181e; --surface-2:#102129; --line:rgba(177,207,220,.13); --text:#f6fafb; --muted:#91a6b0; --cyan:#5ddbff; --green:#32d583; --yellow:#f2cc0c; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--bg); } a,button { -webkit-tap-highlight-color:transparent; }.home-glow { position:fixed; z-index:0; width:700px; height:700px; border-radius:50%; filter:blur(170px); pointer-events:none; opacity:.07; }.glow-one { top:-440px; right:-250px; background:var(--cyan); }.glow-two { top:800px; left:-560px; background:var(--green); }
.home-header,main,footer { position:relative; z-index:1; width:min(100% - 48px,1240px); margin-inline:auto; }.home-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:88px; border-bottom:1px solid var(--line); }.home-brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }.home-brand img { width:41px; height:41px; object-fit:contain; }.home-brand span { display:flex; flex-direction:column; line-height:1; }.home-brand b { font-size:14px; letter-spacing:.24em; }.home-brand small { margin-top:5px; color:var(--muted); font-size:7px; letter-spacing:.2em; }.home-header nav { display:flex; gap:27px; }.home-header nav a { color:#a6b7bf; text-decoration:none; font-size:10px; font-weight:650; }.home-header nav a:hover { color:var(--cyan); }.home-actions { display:flex; justify-self:end; align-items:center; gap:10px; }.header-cta { display:flex; align-items:center; gap:18px; min-height:42px; padding:0 14px; color:var(--text); border:1px solid var(--line); border-radius:12px; text-decoration:none; font-size:9px; font-weight:800; }.header-cta i { color:var(--cyan); font-style:normal; }
.hero { display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:64px; min-height:690px; padding:78px 0 72px; }.hero-kicker { display:flex; align-items:center; gap:10px; color:var(--cyan); font-size:9px; font-weight:800; letter-spacing:.19em; }.hero-kicker i { width:23px; height:1px; background:var(--cyan); box-shadow:0 0 9px rgba(93,219,255,.7); }.hero h1 { max-width:670px; margin:22px 0 23px; font-size:clamp(52px,6.1vw,88px); line-height:.93; letter-spacing:-.068em; }.hero h1 span,.hero h1 em { display:block; }.hero h1 em { color:transparent; background:linear-gradient(90deg,#9be9fa,#43d9b4); -webkit-background-clip:text; background-clip:text; font-style:normal; }.hero-copy>p { max-width:620px; margin:0; color:#a5b6be; font-size:16px; line-height:1.7; }.hero-actions { display:flex; align-items:center; gap:15px; margin-top:31px; }.primary-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-width:245px; min-height:52px; padding:0 18px; color:#031116; border-radius:13px; background:linear-gradient(135deg,#78e7ff,#38dab9); text-decoration:none; font-size:10px; font-weight:850; box-shadow:0 18px 45px rgba(43,211,189,.12); }.primary-cta b { font-size:19px; }.secondary-cta { color:#c8d3d8; text-decoration:none; font-size:10px; font-weight:750; }.secondary-cta:hover { color:var(--cyan); }.trust-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:27px; }.trust-row span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:8px; }.trust-row i { display:grid; place-items:center; width:16px; height:16px; color:var(--green); border-radius:50%; background:rgba(50,213,131,.08); font-style:normal; font-size:8px; }
.command-preview { position:relative; min-width:0; padding:20px; border:1px solid rgba(93,219,255,.2); border-radius:24px; background:linear-gradient(145deg,rgba(16,33,41,.96),rgba(7,17,22,.97)); box-shadow:0 42px 100px rgba(0,0,0,.33),0 0 0 8px rgba(93,219,255,.018); transform:perspective(1000px) rotateY(-2deg); }.command-preview::before { content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:linear-gradient(135deg,rgba(93,219,255,.18),transparent 34%,rgba(50,213,131,.12)); }.preview-top { display:flex; justify-content:space-between; align-items:center; }.preview-top div>span,.preview-top div>b { display:block; }.section-label { color:var(--cyan); font-size:8px; font-weight:850; letter-spacing:.2em; }.preview-top b { margin-top:6px; font-size:12px; }.live-status { display:flex; align-items:center; gap:6px; padding:6px 9px; color:var(--green); border:1px solid rgba(50,213,131,.17); border-radius:999px; background:rgba(50,213,131,.05); font-size:7px; font-weight:850; letter-spacing:.12em; }.live-status i { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(50,213,131,.8); }.preview-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:17px 0; }.preview-kpis>span { padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(7,16,21,.5); }.preview-kpis small,.preview-kpis b { display:block; }.preview-kpis small { color:var(--muted); font-size:7px; }.preview-kpis b { margin-top:7px; font-size:20px; }.preview-kpis>span:first-child b { color:var(--green); }.factory-map { padding:15px; border:1px solid var(--line); border-radius:16px; background:rgba(7,16,21,.35); }.map-label { position:relative; width:65%; padding:11px 13px; border:1px solid rgba(93,219,255,.17); border-radius:11px; background:rgba(93,219,255,.045); }.map-label span,.map-label b,.map-label small { display:block; }.map-label span { color:var(--muted); font-size:6px; font-weight:800; letter-spacing:.14em; }.map-label b { margin-top:5px; font-size:10px; }.map-label small { margin-top:4px; color:var(--muted); font-size:7px; }.map-connector { width:1px; height:13px; margin-left:25px; background:rgba(93,219,255,.3); }.line-label { width:84%; margin-left:25px; border-color:rgba(50,213,131,.18); background:rgba(50,213,131,.04); }.machine-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:13px 0 0 50px; }.machine-grid>div { display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:7px; min-width:0; padding:9px 8px; border:1px solid var(--line); border-radius:10px; background:rgba(15,30,37,.8); }.machine-grid span b,.machine-grid span small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.machine-grid span b { font-size:7px; }.machine-grid span small { margin-top:4px; color:var(--muted); font-size:6px; }.machine-grid em { width:5px; height:5px; border-radius:50%; }.machine-grid em.healthy { background:var(--green); box-shadow:0 0 7px var(--green); }.machine-grid em.watch { background:var(--yellow); box-shadow:0 0 7px var(--yellow); }.machine-icon { position:relative; width:21px; height:16px; border:1px solid #5b7682; border-radius:4px; }.machine-icon::before { content:""; position:absolute; top:4px; left:4px; width:7px; height:7px; border:1px solid var(--cyan); border-radius:50%; }.machine-icon::after { content:""; position:absolute; right:-4px; bottom:2px; width:4px; height:10px; border-radius:2px; background:#5b7682; }.machine-icon.pump::before { border-radius:2px; }.machine-icon.fan::before { transform:rotate(45deg); }.preview-scan { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; margin-top:11px; padding:10px; overflow:hidden; border:1px solid rgba(93,219,255,.13); border-radius:12px; background:rgba(93,219,255,.035); }.preview-scan>i { display:grid; place-items:center; width:32px; height:32px; color:var(--cyan); border-radius:9px; background:rgba(93,219,255,.08); font-style:normal; font-size:7px; font-weight:900; }.preview-scan div b,.preview-scan div small { display:block; }.preview-scan div b { font-size:8px; }.preview-scan div small { margin-top:4px; color:var(--muted); font-size:7px; }.cloud-check { display:grid; place-items:center; width:24px; height:24px; color:var(--green); border-radius:50%; background:rgba(50,213,131,.08); }.scan-line { position:absolute; left:10px; width:40%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); animation:scan 3.5s infinite ease-in-out; }
.manager-story,.how-section,.teams-section { padding:100px 0; border-top:1px solid var(--line); }.story-heading { display:grid; grid-template-columns:.8fr 1.25fr 1fr; align-items:start; gap:50px; }.story-heading h2,.section-head h2 { margin:0; font-size:clamp(35px,4.3vw,60px); line-height:1.02; letter-spacing:-.052em; }.story-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }.outcomes { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:57px; }.outcomes article { position:relative; min-height:285px; padding:23px; overflow:hidden; border:1px solid var(--line); border-radius:19px; background:linear-gradient(145deg,rgba(15,30,37,.92),rgba(8,18,23,.92)); }.outcomes article>span { position:absolute; top:19px; right:20px; color:#516670; font-size:9px; font-weight:800; }.outcomes h3 { margin:31px 0 10px; font-size:19px; letter-spacing:-.025em; }.outcomes p { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }.outcome-icon { position:relative; width:70px; height:70px; margin-top:10px; border:1px solid rgba(93,219,255,.14); border-radius:20px; background:rgba(93,219,255,.045); }.signal-icon { display:flex; align-items:end; justify-content:center; gap:5px; padding-bottom:20px; }.signal-icon i { width:4px; border-radius:3px; background:var(--cyan); }.signal-icon i:nth-child(1) { height:10px; }.signal-icon i:nth-child(2) { height:27px; }.signal-icon i:nth-child(3) { height:17px; }.hierarchy-icon i { position:absolute; border:1px solid var(--green); border-radius:4px; }.hierarchy-icon i:nth-child(1) { top:16px; left:26px; width:17px; height:12px; }.hierarchy-icon i:nth-child(2) { bottom:14px; left:13px; width:17px; height:12px; }.hierarchy-icon i:nth-child(3) { right:13px; bottom:14px; width:17px; height:12px; }.handoff-icon { display:grid; place-items:center; }.handoff-icon i { display:grid; place-items:center; width:31px; height:31px; color:var(--green); border:1px solid rgba(50,213,131,.3); border-radius:10px; font-style:normal; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; }.section-head h2 { max-width:680px; }.steps { display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr; align-items:center; gap:12px; margin-top:58px; }.steps article { align-self:stretch; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(12,24,30,.75); }.steps article>span { color:var(--cyan); font-size:8px; font-weight:850; }.steps h3 { margin:24px 0 9px; font-size:18px; }.steps p { margin:0; color:var(--muted); font-size:10px; line-height:1.65; }.step-arrow { color:#45616d; text-align:center; }.step-art { position:relative; display:grid; place-items:center; width:90px; height:78px; margin:19px auto 0; }.qr-art i { position:absolute; width:25px; height:25px; border-color:var(--cyan); border-style:solid; }.qr-art i:nth-child(1) { top:0; left:0; border-width:2px 0 0 2px; }.qr-art i:nth-child(2) { top:0; right:0; border-width:2px 2px 0 0; }.qr-art i:nth-child(3) { bottom:0; left:0; border-width:0 0 2px 2px; }.qr-art i:nth-child(4) { right:0; bottom:0; border-width:0 2px 2px 0; }.qr-art b,.link-art b { color:var(--cyan); font-size:13px; letter-spacing:.1em; }.link-art b { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(50,213,131,.3); border-radius:14px; background:rgba(50,213,131,.07); color:var(--green); }.link-art i { position:absolute; width:65px; height:65px; border:1px solid rgba(50,213,131,.16); border-radius:50%; animation:pulse 2.7s infinite; }.view-art { grid-template-columns:repeat(3,1fr); gap:5px; }.view-art i { height:45px; border:1px solid rgba(93,219,255,.18); border-radius:7px; background:linear-gradient(to top,rgba(93,219,255,.14) 35%,transparent 35%); }.view-art i:nth-child(2) { background:linear-gradient(to top,rgba(50,213,131,.14) 70%,transparent 70%); }.view-art i:nth-child(3) { background:linear-gradient(to top,rgba(242,204,12,.14) 48%,transparent 48%); }
.centered { display:grid; justify-items:center; text-align:center; }.centered h2 { max-width:850px; margin-top:17px; }.team-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:53px; }.team-cards article { min-height:360px; padding:30px; border:1px solid var(--line); border-radius:22px; }.manager-card { background:radial-gradient(circle at 90% 0,rgba(93,219,255,.1),transparent 40%),var(--surface); }.technician-card { background:radial-gradient(circle at 90% 0,rgba(50,213,131,.09),transparent 40%),var(--surface); }.team-top { display:flex; justify-content:space-between; color:var(--cyan); font-size:8px; font-weight:850; letter-spacing:.18em; }.technician-card .team-top { color:var(--green); }.team-top i { color:#55707b; font-style:normal; }.team-cards h3 { margin:37px 0 24px; font-size:31px; letter-spacing:-.04em; }.team-cards ul { display:grid; gap:13px; margin:0; padding:0; list-style:none; }.team-cards li { display:flex; align-items:center; gap:10px; color:#b7c6cc; font-size:11px; }.team-cards li i { display:grid; place-items:center; width:20px; height:20px; color:var(--green); border-radius:6px; background:rgba(50,213,131,.08); font-style:normal; }.team-cards article>a { display:inline-block; margin-top:34px; color:var(--cyan); text-decoration:none; font-size:9px; font-weight:850; }.technician-card>a { color:var(--green)!important; }
.final-cta { display:grid; grid-template-columns:1.35fr .65fr; align-items:center; gap:60px; margin:30px 0 80px; padding:57px; overflow:hidden; border:1px solid rgba(93,219,255,.2); border-radius:26px; background:radial-gradient(circle at 85% 50%,rgba(50,213,131,.1),transparent 28%),linear-gradient(135deg,rgba(17,35,43,.98),rgba(7,17,22,.98)); }.final-cta h2 { max-width:750px; margin:14px 0 0; font-size:clamp(35px,4.2vw,58px); line-height:1.03; letter-spacing:-.052em; }.final-cta>div:last-child { display:grid; justify-items:stretch; gap:17px; }.final-cta .secondary-cta { text-align:center; } footer { display:flex; align-items:center; justify-content:space-between; min-height:120px; border-top:1px solid var(--line); } footer p,footer>span { color:var(--muted); font-size:8px; letter-spacing:.1em; } footer p { display:grid; gap:6px; max-width:480px; line-height:1.5; } footer p small { color:color-mix(in srgb,var(--muted) 82%,transparent); font-size:8px; font-weight:500; letter-spacing:.04em; }
@keyframes scan { 0%,100% { transform:translateX(-10%); opacity:.2; } 50% { transform:translateX(150%); opacity:1; } } @keyframes pulse { from { transform:scale(.65); opacity:.9; } to { transform:scale(1.2); opacity:0; } }
@media (max-width:980px) { .home-header { grid-template-columns:1fr auto; }.home-header nav { display:none; }.hero { grid-template-columns:1fr; padding-top:65px; }.hero-copy { max-width:760px; }.command-preview { max-width:680px; transform:none; }.story-heading { grid-template-columns:1fr 1.4fr; }.story-heading p { grid-column:2; }.lines-grid { grid-template-columns:1fr; }.final-cta { grid-template-columns:1fr; }.final-cta>div:last-child { max-width:360px; } }
@media (max-width:680px) { .home-header,main,footer { width:min(100% - 28px,1240px); }.home-header { min-height:76px; }.home-brand img { width:35px; height:35px; }.home-brand small { display:none; }.header-cta span { display:none; }.header-cta { min-width:42px; justify-content:center; padding:0; }.hero { gap:45px; min-height:0; padding:57px 0 70px; }.hero h1 { font-size:50px; }.hero-copy>p { font-size:14px; }.hero-actions { align-items:stretch; flex-direction:column; }.primary-cta { width:100%; }.secondary-cta { padding:12px; text-align:center; }.trust-row { display:grid; gap:9px; }.command-preview { padding:14px; border-radius:19px; }.preview-kpis>span { padding:10px; }.preview-kpis small { min-height:17px; }.machine-grid { grid-template-columns:1fr; margin-left:30px; }.manager-story,.how-section,.teams-section { padding:75px 0; }.story-heading { grid-template-columns:1fr; gap:20px; }.story-heading p { grid-column:auto; }.outcomes,.team-cards { grid-template-columns:1fr; }.steps { grid-template-columns:1fr; }.step-arrow { transform:rotate(90deg); }.section-head { align-items:start; flex-direction:column; }.final-cta { margin-bottom:55px; padding:32px 24px; }.final-cta h2 { font-size:38px; } footer { align-items:start; flex-direction:column; justify-content:center; gap:15px; } footer p { margin:0; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; } }