/* The business page (work.html): hero, recreated app screens, systems strip, capabilities, gallery, call to action. */

.whero{padding:64px 0 40px}
.whero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:960px){.whero-grid{grid-template-columns:1.02fr .98fr;gap:40px}.whero{padding:90px 0 56px}}
.whero .pill{margin-bottom:22px}
.whero h1{font-size:clamp(2.4rem,5.6vw,3.9rem);margin-bottom:20px}
.whero .sub{font-size:1.16rem;max-width:40ch;color:var(--soft);margin-bottom:30px}

/* app mockup window (the real green-themed tools, framed dark) */
.winframe{background:var(--panel-2);border:1px solid var(--line);border-radius:18px;padding:13px;box-shadow:0 0 0 1px rgba(96,165,250,.12),0 24px 60px rgba(0,0,0,.5),0 0 50px rgba(59,130,246,.18)}
.g-app{font-size:11px;color:#243029;background:#f3f4f0;border:1px solid #cfd3cc;border-radius:9px;overflow:hidden}
.g-hd{background:#1e4a2e;color:#eaf3ec;padding:9px 11px;display:flex;align-items:center;gap:8px}
.g-hd .lg{width:16px;height:16px;border-radius:5px;background:#fff;flex:none}
.g-hd .ht{font-weight:700;font-size:.82rem}
.g-hd .pill2{margin-left:auto;font-size:.5rem;font-weight:800;letter-spacing:.06em;background:#cda53f;color:#1c3a25;border-radius:999px;padding:3px 9px}
.g-hd .clk{margin-left:auto;font-weight:700;font-size:.78rem}
.g-bd{padding:10px 11px}
.g-kps{display:grid;gap:6px;margin-bottom:9px}
.g-kp{background:#fff;border:1px solid #e4e6e0;border-radius:7px;padding:7px 8px}
.g-kp .l{font-size:.46rem;font-weight:700;letter-spacing:.04em;color:#8b958c;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-kp .n{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.92rem;margin-top:2px;color:#22302a}
.g-pk{display:grid;grid-template-columns:.85fr 1.5fr;gap:8px}
.g-gauge{background:#fff;border:1px solid #e4e6e0;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px}
.g-gring{position:relative;width:66px;height:66px}.g-gring svg{width:66px;height:66px;display:block}
.g-gring .gv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.72rem;color:#22302a}
.g-gauge .gl{font-size:.44rem;color:#8b958c;margin-top:4px}
.g-lp{background:#fff;border:1px solid #e4e6e0;border-radius:7px;padding:8px 9px}
.g-lr{display:flex;align-items:center;gap:6px;margin-bottom:6px}.g-lr:last-child{margin-bottom:0}
.g-lr .nm{width:34px;font-weight:700;font-size:.6rem;color:#33433a}
.g-st{font-size:.4rem;font-weight:800;letter-spacing:.03em;border-radius:999px;padding:2px 5px;flex:none}
.g-st.pk{background:#cda53f;color:#1c3a25}.g-st.idle{background:#e0e3dd;color:#9aa39a}
.g-pb{flex:1;height:7px;border-radius:4px;background:#e9ebe5;overflow:hidden}.g-pb i{display:block;height:100%;border-radius:4px}
.g-tbl{background:#fff;border:1px solid #e4e6e0;border-radius:7px;overflow:hidden}
.g-tr{display:grid;align-items:center;gap:6px;padding:6px 8px;font-size:.62rem;color:#33433a;border-top:1px solid #eef0ea}
.g-tr:first-child{border-top:none}
.g-tr.hd2{background:#eef1ea;color:#7d877e;font-weight:700;font-size:.5rem;letter-spacing:.04em;text-transform:uppercase}
.g-neg{color:#22a05a;font-weight:700}.g-pos{color:#c0392b;font-weight:700}
.g-chip{font-size:.46rem;font-weight:800;letter-spacing:.03em;border-radius:999px;padding:2px 6px;text-align:center}
.g-chip.e{background:#dbeafe;color:#2563c9}.g-chip.o{background:#d7f0e0;color:#1f8a4d}.g-chip.l{background:#fbdcdc;color:#c0392b}
.g-flow{font-size:.44rem;font-weight:800;letter-spacing:.03em;border-radius:5px;padding:2px 6px;background:#1e4a2e;color:#eaf3ec;text-align:center}
.g-app.lite .g-hd{background:#fff;color:#22302a;border-bottom:1px solid #eef0ea}.g-app.lite .g-hd .lg{background:#1e4a2e}
.g-otif .n{color:#c79a2a}
.g-chart{background:#fff;border:1px solid #e4e6e0;border-radius:7px;padding:8px;margin-bottom:9px}.g-chart svg{width:100%;height:46px;display:block}
.g-leg{display:flex;gap:12px;font-size:.5rem;color:#7d877e;margin-bottom:7px;padding-left:2px}
.g-leg .sw{display:inline-block;width:9px;height:3px;border-radius:2px;vertical-align:middle;margin-right:4px}
.g-gh{display:flex}
.g-side{width:62px;flex:none;background:#14331f;color:#a9c8b5;padding:8px 6px;display:flex;flex-direction:column;gap:5px}
.g-si{font-size:.48rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g-si.on{color:#fff;font-weight:800}
.g-ghmain{flex:1;min-width:0}
.g-yd{background:#10291b;color:#d7ebde;border-color:#1c3d29}.g-yd .g-hd{background:#0c2014}
.g-yd .g-kp{background:#16321f;border-color:#214a30}.g-yd .g-kp .l{color:#7fa68d}.g-yd .g-kp .n{color:#fff}
.g-bays{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.g-bay{background:#16321f;border:1px solid #214a30;border-radius:6px;padding:7px 7px 8px}
.g-bay .bn{font-size:.56rem;font-weight:700;color:#cfe6d7}.g-bay .bs{font-size:.42rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-top:3px;color:#6f9a80}
.g-bay.exc{border-color:#7d3a3a;background:#3a1c1c}.g-bay.exc .bs{color:#f08a8a}
.g-bay.occ{border-color:#b08a2a;background:#2f2a16}.g-bay.occ .bs{color:#e6b84a}

/* systems strip */
.systems{padding:20px 0 6px}
.sys-lead{text-align:center;font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.sys-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px;margin:0 auto}
.sys-chip{font-size:.86rem;font-weight:600;color:var(--soft);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 16px}

/* capabilities */
.caps{padding:56px 0 20px}
.cap-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.cap-grid{grid-template-columns:1fr 1fr}}
.cap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;transition:transform .2s ease,background .2s ease}
.cap:hover{transform:translateY(-4px);background:var(--panel-2)}
.cap-ic{width:50px;height:50px;border-radius:13px;background:rgba(59,130,246,.14);border:1px solid rgba(96,165,250,.25);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--blue-bright)}
.cap-ic svg{width:26px;height:26px}
.cap h3{font-size:1.3rem;margin-bottom:8px}
.cap > p{color:var(--soft);font-size:.98rem;margin-bottom:14px}
.cap ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.cap li{display:flex;gap:10px;align-items:flex-start;color:var(--soft);font-size:.93rem}
.cap li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue-bright);margin-top:8px;box-shadow:0 0 8px var(--blue-bright)}

/* gallery of recreated screens */
.gallery{padding:54px 0 14px}
.gal-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:860px){.gal-grid{grid-template-columns:1fr 1fr}}
.shot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s ease,background .2s ease}
.shot:hover{transform:translateY(-4px);background:var(--panel-2)}
.shot .frame{padding:14px}
.shot .cap-h{padding:2px 18px 18px}
.shot .cap-h .t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.1rem}
.shot .cap-h .s{color:var(--soft);font-size:.9rem;margin-top:4px;line-height:1.5}

/* how we work */
.how2{padding:62px 0}
.how2-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.how2-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.how2-grid{grid-template-columns:repeat(4,1fr)}}
.pt{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:22px 20px;transition:transform .2s ease,background .2s ease}
.pt:hover{transform:translateY(-3px);background:var(--panel-2)}
.pt .n{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--blue-bright);margin-bottom:10px}
.pt h3{font-size:1.1rem;margin-bottom:7px}
.pt p{color:var(--soft);font-size:.92rem}

/* call to action */
.cta-band{padding:40px 0 90px;text-align:center}
.cta-card{position:relative;max-width:780px;margin:0 auto;border-radius:var(--r);padding:54px 32px;overflow:hidden;background:linear-gradient(120deg,rgba(59,130,246,.16),rgba(34,211,238,.10));border:1px solid rgba(96,165,250,.28)}
.cta-card h2{font-size:clamp(1.9rem,4.2vw,2.6rem);margin-bottom:14px}
.cta-card p{color:var(--soft);font-size:1.06rem;margin-bottom:26px;max-width:50ch;margin-left:auto;margin-right:auto}
.cta-card .btns{justify-content:center}