/* Work System – the Hub tour (scroll-driven: laptop opens, camera dives in, flies round the dashboard) */
.top.dark{background:rgba(9,16,28,.72);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);position:fixed;left:0;right:0;top:0;z-index:50}
.top.dark .wordmark,.top.dark nav a:not(.button){color:#e7ecf3}
.top.dark .wordmark .mark g{stroke:#e7ecf3}.top.dark .wordmark .mark circle:not(:last-child){fill:#e7ecf3}
.top.dark nav a:not(.button):hover{color:#fff}

.tour{position:relative;height:1150vh;background:#070d18}
.tour-stage{position:sticky;top:0;height:100vh;overflow:hidden;
  background:radial-gradient(1200px 700px at 50% 62%,#16263f 0%,#0b1424 48%,#070d18 100%)}
.tour-stage:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(800px 500px at 50% 60%,#000,transparent 75%);mask-image:radial-gradient(800px 500px at 50% 60%,#000,transparent 75%)}
.tour-glow{position:absolute;left:50%;top:58%;width:1300px;height:560px;margin:-280px 0 0 -650px;border-radius:50%;background:radial-gradient(closest-side,rgba(120,170,230,.22),rgba(47,176,139,.08) 55%,rgba(47,176,139,0));filter:blur(20px);pointer-events:none}

/* intro */
.tour-intro{position:absolute;left:0;right:0;top:calc(64px + 4vh);text-align:center;z-index:5;padding:0 20px;will-change:opacity,transform}
.tour-intro .pill{display:inline-block;background:rgba(47,176,139,.12);color:#7fd8b9;border:1px solid rgba(47,176,139,.3);border-radius:999px;padding:6px 14px;font-weight:600;font-size:13.5px}
.tour-intro h1{color:#fff;font-size:clamp(34px,min(5vw,7.4vh),68px);line-height:1;letter-spacing:-.035em;margin:18px auto 0;max-width:13ch}
.tour-intro p{color:#b8c3d2;font-size:clamp(16px,1.4vw,19px);max-width:46ch;margin:18px auto 0;line-height:1.5}
.tour-intro .actions{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tour-intro .button.ghost{background:transparent;color:#e7ecf3;border:1px solid rgba(255,255,255,.22)}
.tour-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:#8794a7;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px}
.tour-cue i{width:1px;height:38px;background:linear-gradient(#8794a7,transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* devices: a WebGL scene on top, the live screens in matching 3D underneath */
.devices{position:absolute;inset:0;z-index:2;pointer-events:none}
.devices .css3d,.devices .gl3d{position:absolute!important;inset:0;pointer-events:none}
.devices .css3d{z-index:1}.devices .gl3d{z-index:2}
.scr3d{background:#f4f6f9;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none!important}
.scr3d.lap{display:flex;align-items:center}
.scr3d.lap .d-app{flex:none;height:900px;border-radius:0;box-shadow:none}
.scr3d.lap .d-side{border-radius:0}
.scr3d.ph{border-radius:50px}
.scr3d.ph .d-pscr{border-radius:0;height:100%}
.scr3d .sheen{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.16) 47%,rgba(255,255,255,0) 60%);transform:translateX(var(--sx,-80%));pointer-events:none}

/* the 3D dashboard */
.cam{position:absolute;inset:0;perspective:2200px;opacity:0;z-index:3;pointer-events:none}
.dash{position:absolute;left:50%;top:50%;width:1440px;height:900px;margin:-450px 0 0 -720px;transform-style:preserve-3d;will-change:transform}
.dash .d-app{transform-style:preserve-3d}
.dash .d-main,.dash .d-row{transform-style:preserve-3d}

/* a dark fade behind the captions so they always read */
.shade{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(90deg,rgba(7,13,24,.97) 0%,rgba(7,13,24,.88) 22%,rgba(7,13,24,.62) 33%,rgba(7,13,24,.3) 43%,rgba(7,13,24,.1) 52%,rgba(7,13,24,0) 60%)}
.shade.end{background:linear-gradient(0deg,rgba(7,13,24,.96) 0%,rgba(7,13,24,.8) 22%,rgba(7,13,24,0) 45%)}
/* captions */
.caps{position:absolute;inset:0;z-index:6;pointer-events:none}
.cap{position:absolute;left:6vw;top:50%;width:min(31vw,420px);transform:translateY(-40%);opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.cap.on{opacity:1;transform:translateY(-50%)}
.cap .n{display:inline-flex;align-items:center;gap:10px;color:#7fd8b9;font-weight:600;font-size:13.5px;letter-spacing:.02em}
.cap .n:before{content:"";width:22px;height:1px;background:#2fb08b}
.cap h2{color:#fff;font-size:clamp(28px,2.8vw,42px);line-height:1.04;letter-spacing:-.03em;margin:12px 0 14px}
.cap p{color:#b8c3d2;font-size:17px;line-height:1.55;margin:0}
.cap.end{left:0;right:0;width:auto;text-align:center;top:auto;bottom:9vh;transform:translateY(20px)}
.cap.end.on{transform:none}
.cap.end h2{max-width:20ch;margin:10px auto 18px}
.cap.end .actions{display:flex;gap:12px;justify-content:center;pointer-events:auto}
.cap.end .button.ghost{background:transparent;color:#e7ecf3;border:1px solid rgba(255,255,255,.22)}
.dots{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:6;opacity:0;transition:opacity .4s}
.dots.on{opacity:1}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,transform .3s}
.dots i.on{background:#2fb08b;transform:scale(1.5)}
.skip{position:absolute;right:24px;bottom:22px;z-index:7;color:#8794a7;font-size:13px;text-decoration:none;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 14px;opacity:0;transition:opacity .4s}
.skip.on{opacity:1}.skip:hover{color:#fff;border-color:rgba(255,255,255,.3)}

/* ---------- Dashboard UI ---------- */
.d-app{position:relative;width:1440px;height:900px;display:grid;grid-template-columns:232px 1fr;background:#f4f6f9;border-radius:18px;font-family:"Inter Tight",Inter,system-ui,sans-serif;color:#0f1b2d;font-size:14px;text-align:left;box-shadow:0 0 0 1px rgba(15,27,45,.06)}
.dash .d-app{box-shadow:0 80px 160px -60px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.d-side{background:#0f1b2d;color:#c9d2de;border-radius:18px 0 0 18px;padding:24px 16px;display:flex;flex-direction:column;gap:22px}
.d-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:16px;padding:0 8px}
.d-logo i{width:28px;height:28px;border-radius:8px;background:linear-gradient(140deg,#2fb08b,#0b7a5e)}
.d-side nav{display:grid;gap:3px}
.d-side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-weight:500;color:#aab6c6}
.d-side nav a.on{background:rgba(255,255,255,.08);color:#fff}
.d-side .ic{width:16px;height:16px;border-radius:4px;border:1.6px solid currentColor;opacity:.75}
.d-side .ic-home{border-radius:3px 3px 5px 5px}.d-side .ic-rota{border-radius:3px;box-shadow:inset 0 4px 0 -2px currentColor}.d-side .ic-staff{border-radius:50%}.d-side .ic-lic{border-radius:3px 3px 8px 8px}
.d-badge{margin-left:auto;background:#2fb08b;color:#06261c;font-style:normal;font-weight:700;font-size:11px;border-radius:99px;padding:1px 7px;transition:opacity .4s,transform .4s}
.d-badge.gone{opacity:0;transform:scale(.4)}
.d-me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px;border-top:1px solid rgba(255,255,255,.08)}
.d-me b{display:block;color:#fff;font-size:13.5px}.d-me small{color:#8794a7;font-size:12px}
.d-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#e2e8f0,#cbd5e1);color:#3b4757;display:inline-grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.d-me .d-av{background:linear-gradient(140deg,#2fb08b,#0b7a5e);color:#fff}
.d-av.sm{width:30px;height:30px;font-size:11px}
.d-main{padding:26px 30px 24px;display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;min-width:0}
.d-head{display:flex;justify-content:space-between;align-items:center}
.d-head h1{font-size:26px;letter-spacing:-.025em;margin:0;color:#0f1b2d;line-height:1.1}
.d-head p{margin:4px 0 0;color:#6b7686;font-size:13.5px}
.d-tools{display:flex;align-items:center;gap:12px}
.d-search{background:#fff;border:1px solid #e3e7ec;border-radius:10px;padding:9px 14px;color:#9aa3af;font-size:13px;width:260px}
.d-bell{position:relative;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid #e3e7ec;display:grid;place-items:center}
.d-bell i{width:14px;height:14px;border:1.8px solid #3b4757;border-radius:7px 7px 3px 3px}
.d-bell em{position:absolute;right:-5px;top:-5px;background:#e5484d;color:#fff;font-style:normal;font-size:10px;font-weight:700;border-radius:99px;padding:1px 6px;transition:opacity .4s}
.d-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.d-kpi{background:#fff;border:1px solid #e6e9ee;border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(15,27,45,.04)}
.d-kpi span{color:#6b7686;font-size:13px;font-weight:500}
.d-kpi b{display:block;font-size:34px;letter-spacing:-.03em;margin:6px 0 4px;font-variant-numeric:tabular-nums;transition:color .4s}
.d-kpi b.done{color:#0b7a5e}
.d-kpi small{color:#8a94a3;font-size:12px;display:flex;align-items:center;gap:6px}
.d-kpi small .up{width:0;height:0;border:4px solid transparent;border-bottom:6px solid #2fb08b;margin-top:-4px}
.d-row{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;min-height:0}
.d-card{background:#fff;border:1px solid #e6e9ee;border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(15,27,45,.04);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s;position:relative}
.d-ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.d-ch h2{font-size:15px;margin:0;letter-spacing:-.01em;color:#0f1b2d}
.d-pill{background:#eef2f6;color:#4a5566;font-size:11.5px;font-weight:600;border-radius:99px;padding:4px 10px;transition:background .4s,color .4s}
.d-pill.ok{background:#e6f6ef;color:#0b7a5e}
.d-it{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #eef1f4}
.d-it div{flex:1;line-height:1.35;color:#2b3645}.d-it small{display:block;color:#8a94a3;font-size:12px}
.dot{width:9px;height:9px;border-radius:50%;flex:none;transition:background .4s,box-shadow .4s}
.dot.r{background:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.12)}.dot.a{background:#e8932b;box-shadow:0 0 0 4px rgba(232,147,43,.12)}.dot.g{background:#2fb08b;box-shadow:0 0 0 4px rgba(47,176,139,.14)}
.d-it em,.d-tag{font-style:normal;font-weight:600;font-size:12px;border-radius:99px;padding:5px 12px;white-space:nowrap;background:#0f1b2d;color:#fff;transition:background .4s,color .4s}
.d-it.done div{color:#8a94a3}.d-it.done em{background:#e6f6ef;color:#0b7a5e}
.d-lrow{display:grid;grid-template-columns:1.3fr 1fr auto;align-items:center;gap:14px;padding:9px 0;border-top:1px solid #eef1f4}
.d-lp{display:flex;align-items:center;gap:10px}.d-lp b{display:block;font-size:13.5px}.d-lp small{color:#8a94a3;font-size:12px}
.d-bar{height:6px;border-radius:9px;background:#eef1f4;overflow:hidden}
.d-bar i{display:block;height:100%;width:var(--w);border-radius:9px;transition:width .8s cubic-bezier(.2,.7,.2,1),background .4s}
.d-bar .red{background:#e5484d}.d-bar .amb{background:#e8932b}.d-bar .grn{background:#2fb08b}
.d-tag{background:#f1f3f6;color:#3b4757}.d-tag.red{background:#fdecec;color:#c4363b}.d-tag.amb{background:#fdf2e3;color:#a7621a}.d-tag.grn{background:#e6f6ef;color:#0b7a5e}
.d-note{margin:8px 0 0;color:#8a94a3;font-size:12px}
.d-rota{padding-bottom:14px}
.d-grid{display:grid;grid-template-columns:96px repeat(6,1fr);gap:6px}
.d-grid .h{color:#8a94a3;font-size:12px;font-weight:600;padding:2px 4px}
.d-grid .s{font-weight:600;font-size:12.5px;color:#3b4757;display:flex;align-items:center}
.d-grid .c{background:#eef7f3;color:#0b5c47;border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:600;position:relative;overflow:hidden;transition:background .5s,color .5s}
.d-grid .c.off{background:#f3f4f6;color:#a1a9b5}
.d-grid .c.gap{background:#fdecec;color:#c4363b;outline:1.5px dashed #e5484d;outline-offset:-1.5px}
.d-grid .c.gap b{position:absolute;inset:0;padding:8px 10px;background:#2fb08b;color:#fff;transform:translateY(100%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.d-grid .c.gap.filled b{transform:none}
.d-suggest{position:absolute;right:18px;bottom:62px;width:330px;background:#fff;border:1px solid #e3e7ec;border-radius:14px;padding:14px;box-shadow:0 30px 60px -20px rgba(15,27,45,.35);opacity:0;transform:translateY(14px) scale(.97);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:4}
.d-suggest.on{opacity:1;transform:none}
.d-suggest>b{display:block;font-size:13px;margin-bottom:6px}
.d-sg{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px}
.d-sg:nth-child(2){background:#eef7f3}
.d-sg div{flex:1}.d-sg b{display:block;font-size:13px}.d-sg small{color:#8a94a3;font-size:11.5px}
.d-sg i{font-style:normal;font-size:11px;font-weight:700;color:#0b7a5e}
.d-sg.dim{opacity:.45}

.d-mail{position:absolute;right:30px;top:76px;width:360px;background:#fff;border-radius:16px;padding:18px;border:1px solid #e3e7ec;box-shadow:0 40px 80px -30px rgba(15,27,45,.45);opacity:0;transform-origin:top right;z-index:8}
.d-mh{display:flex;justify-content:space-between;align-items:center;color:#6b7686;font-size:12px}
.d-mfrom{display:flex;align-items:center;gap:8px;font-weight:600;color:#3b4757}
.d-mfrom i{width:22px;height:22px;border-radius:6px;background:linear-gradient(140deg,#2fb08b,#0b7a5e)}
.d-msub{display:block;font-size:18px;letter-spacing:-.02em;color:#0b7a5e;margin:10px 0 8px}
.d-mrow{display:grid;grid-template-columns:82px 1fr;gap:8px;padding:8px 0;border-top:1px solid #eef1f4;font-size:13px}
.d-mrow span{color:#8a94a3}.d-mrow p{margin:0;color:#2b3645}
.d-mbtn{display:inline-block;margin-top:10px;background:#0f1b2d;color:#fff;font-weight:600;font-size:12.5px;border-radius:9px;padding:9px 14px}

.d-phone{position:absolute;left:1500px;top:40px;width:390px;height:820px;background:#0d1117;border-radius:56px;padding:14px;box-shadow:0 0 0 2px #3a4456,0 80px 120px -40px rgba(0,0,0,.85);opacity:0;z-index:9}
.d-pscr,.rig .scr.ph .d-pscr{height:100%;background:#f4f6f9;border-radius:44px;padding:16px 20px;font-family:"Inter Tight",Inter,system-ui,sans-serif;color:#0f1b2d;box-sizing:border-box;text-align:left}
.d-pbar{display:flex;justify-content:space-between;font-size:13px;font-weight:600;padding:4px 10px 18px}
.d-pscr h3{font-size:30px;letter-spacing:-.03em;margin:4px 0 2px}
.d-psub{color:#6b7686;margin:0 0 16px;font-size:14.5px}
.d-pc{background:#fff;border:1px solid #e6e9ee;border-radius:18px;padding:16px;margin-bottom:12px}
.d-pc small{color:#6b7686;font-size:13.5px;display:block;margin-top:2px}
.d-pr{display:flex;justify-content:space-between;align-items:center}.d-pr b{font-size:17px}
.d-pr span{background:#e6f6ef;color:#0b7a5e;font-weight:600;font-size:13px;border-radius:99px;padding:4px 10px}
.d-pbtn{display:block;text-align:center;margin-top:12px;background:#0f1b2d;color:#fff;font-weight:600;border-radius:12px;padding:12px;font-size:15px;transition:background .4s,transform .2s}
.d-pbtn.done{background:#2fb08b}
.d-pbtn.tap{transform:scale(.96)}
.d-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.d-cal span{display:grid;place-items:center;height:34px;border-radius:10px;background:#f1f3f6;font-weight:600;font-size:13px;color:#8a94a3}
.d-cal .y{background:#e6f6ef;color:#0b7a5e}.d-cal .n{background:#fdecec;color:#c4363b}

/* focus: the area the camera is on lifts, the rest steps back */
.dash.focus [data-zone]{opacity:.32}
.dash.focus [data-zone].hot{opacity:1}
.dash [data-zone]{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
.dash [data-zone].hot{transform:translateZ(46px);box-shadow:0 40px 70px -30px rgba(15,27,45,.55)}
.dash .d-side[data-zone].hot{transform:none}
.dash .d-mail.hot,.dash .d-phone.hot{transform:none}

@media (max-width:900px){
  .tour{height:1050vh}
  .shade{background:linear-gradient(0deg,rgba(7,13,24,.97) 0%,rgba(7,13,24,.85) 30%,rgba(7,13,24,0) 52%)}
  .tour-intro{top:13vh}
  .cap{left:20px;right:20px;width:auto;top:auto;bottom:4vh;transform:translateY(16px);background:linear-gradient(180deg,rgba(7,13,24,0),rgba(7,13,24,.88) 30%);padding:40px 4px 4px}
  .cap.on{transform:none}
  .cap h2{font-size:26px}.cap p{font-size:15.5px}
  .dots{right:10px}
  .skip{top:76px;bottom:auto;right:14px}
  .top.dark nav a:not(.button){display:none}
}
@media (prefers-reduced-motion:reduce){
  .tour{height:auto}
  .tour-stage{position:relative;height:auto;min-height:100vh;padding:120px 0 60px}
  .tour-cue,.dots,.skip{display:none}
  .cam{opacity:1;position:relative;height:60vh}
  .devices{display:none}
  .caps{position:relative;display:grid;gap:28px;padding:0 6vw}
  .cap,.cap.end{position:static;opacity:1;transform:none;width:auto;text-align:left}
}

/* the site's section spacing must not leak into the dashboard */
.d-app section{margin:0}
.d-app section.d-kpis{padding:0}
.d-app section.d-card{padding:16px 18px}
.d-app section.d-rota{padding-bottom:14px}

/* skip-the-tour fade */
.tour-veil{position:fixed;inset:0;z-index:100;background:#070d18;opacity:0;pointer-events:none;transition:opacity .38s ease}
.tour-veil.on{opacity:1;pointer-events:auto}

/* "What kind of business do you run?" */
.chooser{margin:22px auto 0;max-width:760px;pointer-events:auto}
.chooser .q{color:#e7ecf3;font-weight:600;font-size:15px;margin:0 auto 12px;max-width:none}
.chooser .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chooser .chips button{font:inherit;font-size:14.5px;font-weight:500;color:#e7ecf3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.chooser .chips button:hover{background:rgba(47,176,139,.16);border-color:rgba(47,176,139,.6);transform:translateY(-1px)}
.chooser .chips button.back{background:none;border-color:transparent;color:#8794a7}
.chooser .chosen{color:#b8c3d2;font-size:15px;margin:0 auto;max-width:none}
.chooser .chosen b{color:#7fd8b9;font-weight:600}
.chooser .chosen button{font:inherit;color:#e7ecf3;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.35);padding:0;cursor:pointer}
.chooser .chosen span{color:#8794a7}
.tour-intro h1{margin-top:14px}
@media (max-width:900px){
  .tour-intro>p{display:none}
  .chooser .chips button{font-size:13.5px;padding:8px 13px}
}
.chooser [hidden]{display:none!important}

@media (max-height:860px){ .tour-intro>p{display:none} .tour-intro .pill{display:none} .chooser{margin-top:18px} }

/* wide screens: words on the left, devices on the right */
@media (min-width:1100px){
  .tour-intro{left:max(6vw,calc(50vw - 700px));right:auto;top:64px;bottom:0;width:min(540px,38vw);text-align:left;padding:0;display:flex;flex-direction:column;justify-content:center}
  .tour-intro .pill{align-self:flex-start}
  .tour-intro h1{margin-left:0;font-size:clamp(40px,4.2vw,64px);max-width:12ch}
  .tour-intro>p{margin-left:0}
  .tour-intro .chooser{margin-left:0;max-width:none}
  .chooser .chips{justify-content:flex-start}
  .chooser .q,.chooser .chosen{margin-left:0!important}
  .tour-intro .actions{justify-content:flex-start}
}