.os {
  --os-dark: #11151a;
  --os-deep: #171d23;
  --os-panel: #20272e;
  --os-line: rgba(255,255,255,.12);
  --os-ink: #f4f7f6;
  --os-muted: #b4bec3;
  --os-green: #9ed4b2;
  --os-green-dark: #225f48;
  --os-paper: #f2f3ee;
  --os-paper-2: #e7e9e2;
  --os-paper-ink: #1a2521;
  --os-paper-muted: #53615b;
  --os-orange: #e6a66d;
  --os-red: #be5f5f;
  --os-ease: cubic-bezier(.22,.82,.24,1);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: clip;
  background: var(--os-dark);
  color: var(--os-ink);
}
.os [hidden] { display: none !important; }
.os button, .os input, .os select, .os textarea { font: inherit; }
.os button { cursor: pointer; }
.os button:focus-visible, .os a:focus-visible, .os input:focus-visible, .os select:focus-visible, .os textarea:focus-visible, .os summary:focus-visible {
  outline: 3px solid #f2bd78;
  outline-offset: 3px;
}
.os h1, .os h2, .os h3, .os h4, .os p { margin-top: 0; }
.os section > header > span, .os-hero__intro > span, .context-object > span, .workspace-title span, .panel-head span, .built-os > header > span {
  display: block;
  color: var(--os-green);
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Hero: fragmented desktop becomes work context */
.os-hero {
  position: relative;
  min-height: 1120px;
  padding: clamp(7rem,14vh,11rem) clamp(1rem,5vw,5rem) clamp(4rem,9vh,7rem);
  background:
    radial-gradient(circle at 50% 40%, rgba(158,212,178,.09), transparent 28%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    var(--os-dark);
  background-size: auto, 46px 46px, 46px 46px, auto;
}
.os-hero__intro { position: relative; z-index: 5; width: min(1180px,100%); margin: 0 auto 3rem; }
.os-hero__intro h1 {
  max-width: 11ch;
  margin: .7rem 0 1.2rem;
  font-family: var(--font-heading);
  font-size: clamp(3rem,7.2vw,7.7rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .88;
}
.os-hero__intro h1 em { color: var(--os-green); font-style: normal; }
.os-hero__intro p { max-width: 62ch; color: var(--os-muted); font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.7; }
.desktop-scene {
  position: relative;
  width: min(1260px,100%);
  min-height: 580px;
  margin-inline: auto;
  perspective: 1400px;
  isolation: isolate;
}
.desktop-scene::before {
  content: "";
  position: absolute;
  inset: 5% 8%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background: rgba(7,10,13,.42);
  box-shadow: 0 60px 140px rgba(0,0,0,.4);
}
.desktop-scene__question {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 43%;
  transform: translate(-50%,-50%);
  width: max-content;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1rem,2vw,1.6rem);
  font-weight: 800;
  opacity: 0;
  transition: opacity .45s var(--os-ease);
}
.source-window {
  position: absolute;
  z-index: 2;
  width: clamp(190px,22vw,290px);
  min-height: 130px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: linear-gradient(145deg,#273038,#171d23);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transform: translate3d(0,0,0) rotate(var(--rotate,0deg));
  transition: transform 1s var(--os-ease), opacity .8s var(--os-ease), filter .8s var(--os-ease), border-color .5s;
}
.source-window header { display: flex; gap: .45rem; align-items: center; padding: .55rem .7rem; border-bottom: 1px solid var(--os-line); }
.source-window header > span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--os-green); }
.source-window header b { font-family: var(--font-heading); font-size: .73rem; }
.source-window header small { margin-left: auto; color: var(--os-muted); }
.source-window > p { margin: 1rem .8rem .45rem; font-weight: 700; }
.source-window > small { display: block; padding: 0 .8rem 1rem; color: var(--os-muted); }
.source-window--mail { left: 3%; top: 5%; --rotate:-1.2deg; }
.source-window--cloud { left: 39%; top: 0; --rotate:.7deg; }
.source-window--finance { right: 1%; top: 10%; --rotate:1.3deg; }
.source-window--calendar { left: 7%; bottom: 8%; --rotate:.8deg; }
.source-window--tech { right: 8%; bottom: 2%; --rotate:-.8deg; }
.source-window--portal { left: 35%; bottom: 0; --rotate:-.35deg; }
.source-window--sheet { right: 27%; top: 34%; --rotate:2deg; background: linear-gradient(145deg,#342f25,#201c16); }
.context-object {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(540px,82%);
  padding: clamp(1.5rem,3vw,2.5rem);
  border: 1px solid rgba(158,212,178,.48);
  border-radius: 18px;
  background: rgba(242,243,238,.97);
  color: var(--os-paper-ink);
  box-shadow: 0 55px 140px rgba(0,0,0,.65);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-42%) translateZ(120px) scale(.82);
  transition: transform 1s var(--os-ease), opacity .7s var(--os-ease);
}
.context-object > span { color: var(--os-green-dark); }
.context-object h2 { margin: .65rem 0 .2rem; font-family: var(--font-heading); font-size: clamp(2rem,4vw,4rem); letter-spacing: -.05em; }
.context-object > p { color: var(--os-paper-muted); }
.context-object > div { display: grid; gap: .25rem; padding: 1rem; border-left: 3px solid var(--os-green-dark); background: #e2e9e2; }
.context-object > div small { color: var(--os-paper-muted); }
.context-object strong { display: block; margin-top: 1.3rem; font-family: var(--font-heading); font-size: clamp(1rem,2vw,1.35rem); }
.desktop-scene.is-asking .desktop-scene__question { opacity: 1; }
.desktop-scene.is-context .desktop-scene__question { opacity: 0; }
.desktop-scene.is-context .source-window { opacity: .34; filter: blur(1.7px) saturate(.5); border-color: transparent; }
.desktop-scene.is-context .source-window--mail { transform: translate3d(-100px,-40px,-180px) scale(.78); }
.desktop-scene.is-context .source-window--cloud { transform: translate3d(0,-90px,-180px) scale(.78); }
.desktop-scene.is-context .source-window--finance { transform: translate3d(100px,-35px,-180px) scale(.78); }
.desktop-scene.is-context .source-window--calendar { transform: translate3d(-100px,60px,-180px) scale(.78); }
.desktop-scene.is-context .source-window--tech { transform: translate3d(100px,70px,-180px) scale(.78); }
.desktop-scene.is-context .source-window--portal { transform: translate3d(0,100px,-180px) scale(.78); }
.desktop-scene.is-context .source-window--sheet { transform: translate3d(80px,10px,-200px) scale(.72); }
.desktop-scene.is-context .context-object { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) translateZ(120px) scale(1); }
.os-hero__actions { position: relative; z-index: 8; width: min(1180px,100%); margin: 1.5rem auto 0; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.os-button { min-height: 48px; border: 1px solid var(--os-line); border-radius: 7px; padding: .8rem 1.1rem; color: var(--os-ink); background: transparent; font-weight: 800; }
.os-button--primary { border-color: var(--os-green); color: #102018; background: var(--os-green); }
.os-hero__actions p { width: 100%; margin: .4rem 0 0; color: var(--os-muted); font-size: .82rem; }

/* Product demo */
.demo-zone { padding: clamp(5rem,10vh,8rem) clamp(1rem,4vw,4rem); background: #0b0f13; }
.demo-zone__head { width: min(1320px,100%); margin: 0 auto 2rem; display: flex; justify-content: space-between; gap: 2rem; align-items: end; }
.demo-zone__head h2, .automation-lab h2, .source-reveal h2, .problem-builder h2, .role-stage h2, .capability-map h2, .industry-lab h2, .assistants h2, .pilot h2, .technical h2, .system-doors h2 {
  margin: .5rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem,4.6vw,4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
}
.demo-zone__head > p { max-width: 38ch; margin: 0; color: var(--os-muted); font-size: .8rem; text-align: right; }
.os-product { position: relative; width: min(1440px,100%); min-height: 820px; margin-inline: auto; overflow: hidden; border: 1px solid #3a454c; border-radius: 18px; background: var(--os-paper); color: var(--os-paper-ink); box-shadow: 0 60px 150px rgba(0,0,0,.58); }
.product-bar { min-height: 68px; display: grid; grid-template-columns: 250px 1fr auto; align-items: center; border-bottom: 1px solid #d5d9d4; background: #fafbf8; }
.product-brand { height: 100%; display: flex; gap: .55rem; align-items: center; border: 0; border-right: 1px solid #d5d9d4; background: transparent; color: var(--os-paper-ink); padding: .8rem 1rem; }
.product-brand > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #173d30; color: #fff; font-weight: 900; }
.product-brand b { font-family: var(--font-heading); }.product-brand small { color: var(--os-paper-muted); text-transform: uppercase; }
.product-context { display: grid; gap: .15rem; padding-inline: 1.2rem; }.product-context span { font-family: var(--font-heading); font-weight: 800; }.product-context small { color: var(--os-paper-muted); }
.role-chip { margin-right: 1rem; border: 1px solid #cad1cc; border-radius: 7px; background: #fff; color: var(--os-paper-ink); padding: .65rem .8rem; font-weight: 800; }
.role-chip span { color: var(--os-green-dark); }
.product-body { display: grid; grid-template-columns: 250px 1fr; min-height: 752px; }
.product-nav { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border-right: 1px solid #d5d9d4; background: #e8ebe6; }
.product-nav button { display: grid; grid-template-columns: 24px 1fr auto; gap: .45rem; align-items: center; border: 0; border-radius: 8px; background: transparent; color: #42504a; padding: .75rem; text-align: left; }
.product-nav button > span { font-size: 1.1rem; }.product-nav button b { min-width: 24px; border-radius: 99px; background: #d6dbd6; padding: .1rem .35rem; font-size: .65rem; text-align: center; }
.product-nav button.is-active { background: #173d30; color: #fff; }
.workspace { min-width: 0; background: var(--os-paper); }
.workspace > section { min-height: 752px; }
.workspace-home { padding: clamp(1.4rem,3vw,3rem); }
.workspace-title { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.workspace-title span { color: #547163; }
.workspace-title h3 { max-width: 18ch; margin: .45rem 0 0; font-family: var(--font-heading); font-size: clamp(1.8rem,3.8vw,3.7rem); letter-spacing: -.05em; line-height: 1; }
.workspace-title button, .panel-head button { border: 0; background: transparent; color: var(--os-green-dark); font-weight: 800; }
.attention-row { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; margin: 2rem 0; }
.attention-row button { min-height: 145px; display: grid; align-content: space-between; gap: .45rem; border: 1px solid #d8dcd7; border-radius: 10px; background: #fff; color: var(--os-paper-ink); padding: 1rem; text-align: left; transition: transform .2s, border-color .2s; }
.attention-row button:hover { transform: translateY(-3px); border-color: #6c8d7e; }
.attention-row span { color: var(--os-paper-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.attention-row b { font-family: var(--font-heading); font-size: 1.1rem; }.attention-row small { color: var(--os-paper-muted); line-height: 1.4; }
.work-list { border-top: 1px solid #d2d7d2; }.work-list > header { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem .4rem .7rem; }.work-list h4 { margin: 0; font-family: var(--font-heading); font-size: 1.1rem; }.work-list > header span { color: var(--os-paper-muted); font-size: .75rem; }
.work-item { width: 100%; display: grid; grid-template-columns: 42px 1fr auto 54px; gap: 1rem; align-items: center; border: 0; border-top: 1px solid #dce0db; background: transparent; color: var(--os-paper-ink); padding: .9rem .4rem; text-align: left; }
.work-item:hover { background: #e7ece7; }.work-item__mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #dae2db; font-weight: 900; }.work-item > span:nth-child(2) { display: grid; gap: .2rem; }.work-item small, .work-item time { color: var(--os-paper-muted); }.work-item strong { color: var(--os-green-dark); font-size: .75rem; }.work-item time { font-size: .7rem; text-align: right; }.work-item.is-urgent { border-left: 3px solid #a25842; padding-left: .7rem; }

/* Work order */
.case-head { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center; padding: 1.2rem 1.4rem; border-bottom: 1px solid #d5d9d4; background: #fff; }
.case-head > button:first-child { border: 0; background: transparent; color: #426757; }
.case-head > div:nth-child(2) span { color: var(--os-paper-muted); font-size: .68rem; }.case-head h3 { margin: .25rem 0 0; font-family: var(--font-heading); font-size: 1.35rem; }
.case-status { display: grid; gap: .2rem; padding-left: 1rem; border-left: 2px solid #d89661; }.case-status span { color: #714224; font-weight: 800; }.case-status small { color: var(--os-paper-muted); }
.customer-toggle { border: 1px solid #173d30; border-radius: 7px; background: #173d30; color: #fff; padding: .7rem .85rem; font-weight: 800; }
.case-nav { display: flex; gap: .15rem; overflow-x: auto; padding: .7rem 1.4rem; border-bottom: 1px solid #d5d9d4; background: #e8ebe6; scrollbar-width: thin; }
.case-nav button { flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: #4c5a54; padding: .6rem .75rem; font-size: .78rem; font-weight: 700; }
.case-nav button.is-active { background: #fff; color: #173d30; box-shadow: 0 2px 8px rgba(30,45,38,.08); }
.case-panel { padding: clamp(1.2rem,3vw,2.5rem); }
.case-overview { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; }
.next-step { grid-row: 1/3; padding: clamp(1.4rem,3vw,2.4rem); border-radius: 12px; background: #173d30; color: #fff; }
.next-step > span { color: var(--os-green); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.next-step h4 { margin: .8rem 0; font-family: var(--font-heading); font-size: clamp(1.6rem,3vw,2.6rem); line-height: 1.05; }
.next-step p { color: #d1dfd7; line-height: 1.65; }.next-step button { border: 0; border-radius: 6px; background: var(--os-green); color: #102018; padding: .75rem; font-weight: 800; }.next-step > small { display: block; margin-top: 1rem; color: #d1dfd7; }
.case-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.case-facts div { display: grid; gap: .35rem; min-height: 96px; padding: 1rem; border: 1px solid #d6dbd6; border-radius: 9px; background: #fff; }.case-facts span { color: var(--os-paper-muted); font-size: .7rem; }.case-facts b { align-self: end; }
.chronology { border: 1px solid #d6dbd6; border-radius: 9px; background: #fff; padding: 1rem; }.chronology header { display: flex; justify-content: space-between; }.chronology h4 { margin: 0; }.chronology header button { border: 0; background: transparent; color: var(--os-green-dark); }.chronology ol { list-style: none; margin: 1rem 0 0; padding: 0; }.chronology li { display: grid; grid-template-columns: 48px 1fr; gap: .8rem; padding: .55rem 0; border-top: 1px solid #e1e4e0; }.chronology time, .chronology small { color: var(--os-paper-muted); font-size: .7rem; }.chronology li span { display: grid; gap: .15rem; }
.panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.5rem; }.panel-head span { color: #547163; }.panel-head h4 { margin: .3rem 0 0; font-family: var(--font-heading); font-size: clamp(1.8rem,3.5vw,3rem); }.panel-head > small { color: var(--os-paper-muted); }
.message-stream { list-style: none; margin: 0; padding: 0; }.message-stream li { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid #d8dcd7; }.message-stream time { color: var(--os-paper-muted); }.message-stream li > div > span { color: var(--os-green-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; }.message-stream p { max-width: 62ch; margin: .45rem 0 0; line-height: 1.65; }
.document-list { display: grid; gap: .5rem; }.document-list button { display: grid; grid-template-columns: 48px 1fr auto; gap: 1rem; align-items: center; border: 1px solid #d5dad5; border-radius: 8px; background: #fff; color: var(--os-paper-ink); padding: .85rem; text-align: left; }.document-list button > span:first-child { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 7px; background: #e3e9e3; color: #315844; font-size: .7rem; font-weight: 900; }.document-list button > span:nth-child(2) { display: grid; gap: .2rem; }.document-list small { color: var(--os-paper-muted); }.document-list strong { color: var(--os-green-dark); font-size: .75rem; }
.document-preview { margin-top: 1rem; min-height: 180px; padding: 1.5rem; border: 1px solid #cbd2cc; background: #fff; box-shadow: 0 16px 40px rgba(35,50,42,.08); }.document-preview h5 { margin: 0 0 .7rem; font-family: var(--font-heading); font-size: 1.25rem; }.document-preview p { color: var(--os-paper-muted); line-height: 1.6; }
.finance-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }.finance-grid article { min-height: 160px; display: grid; align-content: space-between; gap: .6rem; border: 1px solid #d5dad5; border-radius: 9px; background: #fff; padding: 1rem; }.finance-grid span, .finance-grid small { color: var(--os-paper-muted); }.finance-grid b { font-family: var(--font-heading); font-size: 1.1rem; }.context-note { margin-top: 1.5rem; padding: 1rem; border-left: 3px solid #507660; background: #e2e9e2; line-height: 1.6; }
.appointment-form { display: grid; grid-template-columns: repeat(3,1fr) auto; gap: .7rem; align-items: end; }.appointment-form label { display: grid; gap: .35rem; color: var(--os-paper-muted); font-size: .72rem; }.appointment-form select { min-height: 48px; border: 1px solid #c7cec8; border-radius: 6px; background: #fff; color: var(--os-paper-ink); padding: .6rem; }.appointment-form button { min-height: 48px; border: 0; border-radius: 6px; background: #173d30; color: #fff; padding: .7rem 1rem; font-weight: 800; }.appointment-result { margin-top: 1.3rem; padding: 1rem; background: #e1e8e1; color: #274b3a; font-weight: 700; }
.technical-data { margin: 0; }.technical-data div { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid #d6dbd6; }.technical-data dt { color: var(--os-paper-muted); }.technical-data dd { margin: 0; font-weight: 700; }
.task-list { list-style: none; margin: 0; padding: 0; }.task-list li { display: grid; grid-template-columns: 38px 1fr; gap: .8rem; align-items: center; padding: .9rem 0; border-top: 1px solid #d7dcd7; }.task-list li > button { width: 34px; height: 34px; border: 1px solid #9baa9f; border-radius: 50%; background: #fff; color: #173d30; }.task-list li > button[aria-pressed="true"] { background: #d8e6dc; }.task-list li span { display: grid; gap: .2rem; }.task-list small { color: var(--os-paper-muted); }
.ai-actions { display: flex; gap: .6rem; flex-wrap: wrap; }.ai-actions button { border: 1px solid #173d30; border-radius: 6px; background: #173d30; color: #fff; padding: .75rem; font-weight: 800; }.ai-actions button + button { background: transparent; color: #173d30; }
.ai-scan { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; margin-top: 1rem; }.ai-scan span { position: relative; overflow: hidden; padding: .8rem; border: 1px solid #cbd2cc; background: #fff; color: var(--os-paper-muted); text-align: center; }.ai-scan span::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(78,132,105,.22),transparent); animation:scan 1.1s infinite; }
@keyframes scan { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.ai-summary, .draft-card { margin-top: 1rem; padding: 1.2rem; border: 1px solid #cbd2cc; border-radius: 9px; background: #fff; }.ai-summary > span { color: var(--os-green-dark); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.ai-summary ul { list-style: none; margin: 1rem 0; padding: 0; }.ai-summary li { padding: .5rem 0; border-top: 1px solid #e0e3df; }.ai-summary > button { border: 0; background: transparent; color: var(--os-green-dark); font-weight: 800; }.ai-sources { display: grid; gap: .4rem; margin-top: 1rem; }.ai-sources button { border: 1px solid #d4d9d4; background: #f2f5f1; color: var(--os-paper-ink); padding: .7rem; text-align: left; }.ai-sources button.is-highlight { border-color: #376c53; background: #dce9df; }
.draft-card header, .draft-card footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }.draft-card header b { color: #934b38; }.draft-card textarea { width: 100%; min-height: 145px; margin: 1rem 0; border: 1px solid #c4ccc5; border-radius: 6px; background: #f8f9f6; color: var(--os-paper-ink); padding: 1rem; line-height: 1.6; resize: vertical; }.draft-card footer button { border: 1px solid #173d30; border-radius: 6px; background: transparent; color: #173d30; padding: .65rem 1rem; font-weight: 800; }.draft-card footer button:last-child { background: #173d30; color: #fff; }.draft-card p { margin: 1rem 0 0; color: var(--os-paper-muted); }
.customer-portal { min-height: 610px; padding: clamp(1.5rem,4vw,4rem); background: #e8eee9; }.customer-portal > header { display: flex; justify-content: space-between; gap: 1rem; }.customer-portal > header span { color: #527061; font-size: .7rem; font-weight: 800; text-transform: uppercase; }.customer-portal h4 { margin: .4rem 0; font-family: var(--font-heading); font-size: clamp(2rem,5vw,4.5rem); }.customer-portal > header button { border: 0; background: transparent; color: #173d30; font-weight: 800; }.portal-status { margin: 2rem 0; padding: clamp(1.5rem,4vw,3rem); border-radius: 14px; background: #173d30; color: #fff; }.portal-status span { color: var(--os-green); font-size: .7rem; text-transform: uppercase; }.portal-status b { display: block; margin: .6rem 0; font-family: var(--font-heading); font-size: clamp(1.5rem,3vw,2.5rem); }.portal-status p { color: #d1e0d7; }.portal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }.portal-grid article { display: grid; gap: .6rem; padding: 1.2rem; border: 1px solid #cbd5cd; border-radius: 9px; background: #fff; }.portal-grid span, .portal-grid small { color: var(--os-paper-muted); }.customer-portal > p { margin: 2rem 0 0; font-family: var(--font-heading); font-weight: 800; }
.workspace-generic { padding: clamp(1.5rem,4vw,4rem); }.workspace-generic h3 { font-family: var(--font-heading); font-size: clamp(2rem,4vw,3.5rem); }.workspace-generic p { color: var(--os-paper-muted); }.generic-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.generic-grid button { min-height: 120px; display: grid; align-content: space-between; border: 1px solid #d2d8d2; border-radius: 8px; background: #fff; color: var(--os-paper-ink); padding: 1rem; text-align: left; }.generic-grid small { color: var(--os-paper-muted); }
.role-picker { position: absolute; z-index: 30; inset: 68px 0 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; padding: clamp(2rem,6vw,6rem); background: rgba(17,24,21,.98); color: #fff; }.role-picker > div:first-child h3 { margin: .7rem 0; font-family: var(--font-heading); font-size: clamp(2rem,5vw,5rem); line-height: .95; }.role-picker > div:first-child > span { color: var(--os-green); font-size: .7rem; text-transform: uppercase; }.role-picker > div:first-child p { color: #b7c5bc; line-height: 1.7; }.role-picker [role="listbox"] { display: grid; gap: .6rem; }.role-picker [role="option"] { display: grid; gap: .3rem; border: 1px solid #43544b; border-radius: 8px; background: transparent; color: #fff; padding: 1rem; text-align: left; }.role-picker [role="option"].is-active { border-color: var(--os-green); background: #203b30; }.role-picker [role="option"] small { color: #b8c9c0; }.role-picker > button { position: absolute; right: 1rem; top: 1rem; border: 1px solid #53635b; background: transparent; color: #fff; padding: .6rem; }

/* Rest of the operating environment */
.automation-lab, .source-reveal, .problem-builder, .role-stage, .capability-map, .industry-lab, .assistants, .pilot, .technical, .system-doors { padding: clamp(5rem,12vh,10rem) clamp(1rem,6vw,6rem); }
.automation-lab > header, .source-reveal > header, .problem-builder > header, .role-stage > header, .capability-map > header, .industry-lab > header, .assistants > header, .pilot > header, .technical > header, .system-doors > header { max-width: 1100px; margin-bottom: 2.5rem; }
.automation-lab { background: #1b2127; }
.automation-switch { display: inline-flex; padding: .25rem; border: 1px solid var(--os-line); border-radius: 8px; background: #11161b; }.automation-switch button { border: 0; border-radius: 6px; background: transparent; color: var(--os-muted); padding: .75rem 1rem; font-weight: 800; }.automation-switch button.is-active { background: var(--os-green); color: #102018; }
.automation-flow { display: grid; grid-template-columns: repeat(7,1fr); gap: .5rem; margin: 2rem 0; }.automation-flow div { position: relative; min-height: 150px; display: grid; align-content: space-between; gap: .6rem; border: 1px solid var(--os-line); border-radius: 9px; background: #242b31; padding: 1rem; }.automation-flow div:not(:last-child)::after { content:"→"; position:absolute; right:-.55rem; top:50%; z-index:2; color:var(--os-green); }.automation-flow span { color: var(--os-green); font-size: .65rem; text-transform: uppercase; }.automation-flow small { color: var(--os-muted); line-height: 1.4; }
.automation-metrics { display: grid; grid-template-columns: auto auto 1fr; gap: 1rem; align-items: center; }.automation-metrics > div { display: grid; min-width: 180px; padding: 1rem; border-left: 2px solid var(--os-green); background: #14191e; }.automation-metrics b { font-family: var(--font-heading); font-size: 2rem; }.automation-metrics span { color: var(--os-muted); font-size: .75rem; }.automation-metrics p { margin: 0; color: var(--os-muted); }
.source-reveal { background: #dfe3dc; color: var(--os-paper-ink); }.source-reveal > header > span { color: var(--os-green-dark); }.source-reveal > header p, .problem-builder > header p, .capability-map > header p, .assistants > header p, .pilot > header p, .technical > header p { max-width: 62ch; color: var(--os-paper-muted); line-height: 1.65; }
.layer-lift { width: min(900px,100%); display: flex; justify-content: space-between; gap: 1rem; border: 1px solid #a9b4ac; border-radius: 10px; background: #173d30; color: #fff; padding: 1.3rem; text-align: left; box-shadow: 0 24px 50px rgba(31,57,46,.2); }.layer-lift span { color: #cfe0d6; }.layer-lift b { color: var(--os-green); }
.source-map { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; width: min(1100px,100%); margin-top: 1rem; padding: 1.5rem; border: 1px solid #c1c9c2; border-radius: 10px; background: #f0f2ed; }.source-map button { min-height: 140px; display: grid; align-content: space-between; border: 1px solid #d3d8d3; border-radius: 8px; background: #fff; color: var(--os-paper-ink); padding: 1rem; text-align: left; }.source-map button span { color: var(--os-green-dark); font-weight: 800; }.source-map button small { color: var(--os-paper-muted); }.source-map button.is-active { border-color: #386a51; background: #dfeae2; }.connection-detail { max-width: 800px; margin: 1.5rem 0 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; }
.problem-builder { background: #f2f3ee; color: var(--os-paper-ink); }.problem-builder > header > span, .capability-map > header > span, .assistants > header > span, .pilot > header > span, .technical > header > span { color: var(--os-green-dark); }
.builder-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; }.pain-list { display: grid; gap: .3rem; margin: 0; padding: 0; border: 0; }.pain-list legend { margin-bottom: .7rem; color: var(--os-paper-muted); }.pain-list label { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; padding: .8rem; border: 1px solid #d7dcd7; border-radius: 7px; background: #fff; }.pain-list input { width: 20px; height: 20px; accent-color: #245b45; }
.built-os { min-height: 520px; display: grid; grid-template-rows: auto auto 1fr auto; border: 1px solid #9aa9a0; border-radius: 14px; background: #17221d; color: #fff; padding: 1rem; }.built-os > header { display: flex; justify-content: space-between; gap: 1rem; }.built-os > header button { border: 0; background: transparent; color: var(--os-green); }.built-core { width: min(300px,80%); display: grid; gap: .3rem; justify-self: center; margin: 2rem auto; padding: 1.2rem; border: 1px solid var(--os-green); border-radius: 9px; background: #243b31; text-align: center; }.built-core small { color: #c4d2ca; }.capability-orbit { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .55rem; }.capability-orbit span { padding: .65rem .8rem; border: 1px solid #45594f; border-radius: 99px; color: #c8d5ce; }.capability-orbit span.is-new { border-color: var(--os-green); background: #254333; color: #fff; animation:cap-in .35s var(--os-ease); } @keyframes cap-in{from{opacity:0;transform:scale(.8)}}
.built-os > p { margin: 1rem 0 0; color: #c3d0c8; text-align: center; }
.role-stage { background: #151a1f; }.role-stage__controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }.role-stage__controls button { border: 1px solid var(--os-line); border-radius: 7px; background: transparent; color: var(--os-muted); padding: .75rem 1rem; font-weight: 800; }.role-stage__controls button.is-active { border-color: var(--os-green); background: var(--os-green); color: #102018; }
.role-workspace { min-height: 430px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 1rem; padding: clamp(1.2rem,3vw,2.5rem); border: 1px solid #3b454d; border-radius: 14px; background: #20272d; }.role-workspace__main { display: grid; align-content: start; gap: .7rem; }.role-workspace__main > span { color: var(--os-green); font-size: .68rem; text-transform: uppercase; }.role-workspace__main h3 { margin: 0 0 .8rem; font-family: var(--font-heading); font-size: clamp(2rem,4vw,3.8rem); line-height: 1; }.role-workspace__items { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }.role-workspace article { min-height: 120px; display: grid; align-content: space-between; border: 1px solid var(--os-line); border-radius: 8px; background: #161c21; padding: 1rem; }.role-workspace article span, .role-workspace article small { color: var(--os-muted); }.role-workspace article b { font-size: 1rem; }.role-workspace__rail { padding: 1rem; border-left: 1px solid var(--os-line); }.role-workspace__rail span { color: var(--os-green); font-size: .7rem; text-transform: uppercase; }.role-workspace__rail ol { padding-left: 1.2rem; color: var(--os-muted); line-height: 1.8; }.role-stage > p { margin-top: 1.2rem; color: var(--os-green); font-family: var(--font-heading); font-weight: 800; }
.capability-map { background: #e8eae4; color: var(--os-paper-ink); }.map-canvas { position: relative; min-height: 650px; overflow: hidden; border: 1px solid #c6cdc6; border-radius: 18px; background: #f6f7f3; }.map-core { position: absolute; z-index: 2; left: 50%; top: 42%; width: min(310px,75%); transform: translate(-50%,-50%); display: grid; gap: .45rem; padding: 1.5rem; border: 1px solid #315f49; border-radius: 14px; background: #173d30; color: #fff; text-align: center; box-shadow: 0 25px 60px rgba(30,65,49,.22); }.map-core b { font-family: var(--font-heading); font-size: 1.35rem; }.map-core small { color: #cbdcd2; }
.map-ring { position: absolute; inset: 1.5rem 2rem 150px; }.map-ring button { position: absolute; border: 1px solid #bdc7bf; border-radius: 99px; background: #fff; color: #284338; padding: .65rem 1rem; font-weight: 800; }.map-ring button.is-active { border-color: #315f49; background: #d9e7dc; }.map-ring button:nth-child(1){left:7%;top:12%}.map-ring button:nth-child(2){left:36%;top:3%}.map-ring button:nth-child(3){right:10%;top:12%}.map-ring button:nth-child(4){right:2%;top:40%}.map-ring button:nth-child(5){right:12%;bottom:6%}.map-ring button:nth-child(6){left:39%;bottom:0}.map-ring button:nth-child(7){left:9%;bottom:8%}.map-ring button:nth-child(8){left:1%;top:45%}.map-ring button:nth-child(9){left:23%;top:25%}.map-ring button:nth-child(10){right:24%;top:27%}
.map-canvas > p { position: absolute; left: 50%; bottom: 70px; width: min(720px,90%); transform: translateX(-50%); color: var(--os-paper-muted); text-align: center; }.map-foundation { position: absolute; inset: auto 0 0; min-height: 52px; display: grid; place-items: center; background: #d5dad4; color: #53615b; font-size: .78rem; text-align: center; }
.industry-lab { background: #f2f0ea; color: var(--os-paper-ink); }.industry-lab > header > span { color: #7a5332; }.industry-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }.industry-tabs button { border: 1px solid #c6c2b9; border-radius: 6px; background: transparent; color: #61594e; padding: .75rem 1rem; font-weight: 800; }.industry-tabs button.is-active { background: #2e332f; color: #fff; }
.industry-workspace { min-height: 460px; display: grid; grid-template-columns: .75fr 1.25fr; border: 1px solid #c8c4ba; border-radius: 14px; overflow: hidden; background: #fff; }.industry-workspace__side { padding: 2rem; background: #323832; color: #fff; }.industry-workspace__side span { color: #d3b68e; font-size: .7rem; text-transform: uppercase; }.industry-workspace__side h3 { margin: .6rem 0; font-family: var(--font-heading); font-size: clamp(2rem,4vw,4rem); line-height: 1; }.industry-workspace__side p { color: #d5ddd6; line-height: 1.6; }.industry-workspace__content { padding: 2rem; }.industry-object { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; padding: 1rem 0; border-top: 1px solid #dddcd6; }.industry-object span { color: #71685d; font-size: .72rem; }.industry-object b { grid-row: 2; }.industry-object strong { grid-row: 1/3; grid-column: 2; align-self: center; color: #355b47; font-size: .75rem; }
.assistants { background: #dedfd9; color: var(--os-paper-ink); }.assistants > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #b9c0ba; }.assistants article { min-height: 250px; display: grid; align-content: space-between; gap: 1rem; background: #eeefe9; padding: 1.4rem; }.assistants article span { color: var(--os-green-dark); font-family: var(--font-heading); font-size: .72rem; font-weight: 800; text-transform: uppercase; }.assistants article b { font-family: var(--font-heading); font-size: 1.25rem; }.assistants article small { color: var(--os-paper-muted); line-height: 1.6; }
.pilot { background: #f3f4ef; color: var(--os-paper-ink); }.pilot form { display: flex; gap: .7rem; align-items: end; margin-bottom: 2rem; }.pilot label { display: grid; gap: .4rem; color: var(--os-paper-muted); }.pilot select { min-height: 50px; min-width: 280px; border: 1px solid #bdc5bd; border-radius: 6px; background: #fff; color: var(--os-paper-ink); padding: .7rem; }.pilot form button { min-height: 50px; border: 0; border-radius: 6px; background: #173d30; color: #fff; padding: .7rem 1rem; font-weight: 800; }
.pilot-roadmap { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; }.pilot-roadmap div { position: relative; min-height: 190px; display: grid; align-content: space-between; border: 1px solid #ccd2cc; border-radius: 9px; background: #fff; padding: 1rem; }.pilot-roadmap div:not(:last-child)::after { content:"→"; position:absolute; right:-.55rem; top:50%; z-index:2; color:#315f49; }.pilot-roadmap span { color: var(--os-green-dark); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.pilot-roadmap b { font-family: var(--font-heading); font-size: 1.1rem; }.pilot-roadmap small { color: var(--os-paper-muted); line-height: 1.5; }.pilot > p { margin-top: 1rem; padding: 1rem; background: #dfe8e0; color: #2c5942; }
.technical { background: #151a1f; }.technical > header p { color: var(--os-muted); }.technical details { border-top: 1px solid var(--os-line); border-bottom: 1px solid var(--os-line); }.technical summary { padding: 1.2rem 0; color: var(--os-green); font-family: var(--font-heading); font-weight: 800; cursor: pointer; }.architecture { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; padding: 1rem 0; }.architecture button { min-height: 140px; display: grid; align-content: space-between; gap: .7rem; border: 1px solid var(--os-line); border-radius: 8px; background: #20272d; color: #fff; padding: 1rem; text-align: left; }.architecture button.is-active { border-color: var(--os-green); }.architecture small { color: var(--os-muted); line-height: 1.45; }.architecture + p { color: var(--os-muted); line-height: 1.6; }
.replace-control { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; padding: 1.3rem; border: 1px solid var(--os-line); border-radius: 9px; }.replace-control label { display: grid; gap: .45rem; }.replace-control select { min-height: 48px; border: 1px solid #53606a; border-radius: 5px; background: #222a31; color: #fff; padding: .7rem; }.replace-control p { align-self: end; margin: 0; color: var(--os-muted); }
.system-doors { background: #0c1014; }.system-doors > div { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }.system-doors > div a { min-height: 170px; display: grid; align-content: space-between; border: 1px solid var(--os-line); border-radius: 9px; color: #fff; padding: 1.2rem; text-decoration: none; }.system-doors > div a:hover { border-color: var(--os-green); background: #18231d; }.system-doors a span { color: var(--os-muted); }.system-doors a b { color: var(--os-green); }.system-doors footer { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-top: clamp(4rem,10vh,8rem); padding-top: 2rem; border-top: 1px solid var(--os-line); }.system-doors footer span { color: var(--os-green); font-size: .7rem; text-transform: uppercase; }.system-doors footer h2 { margin-top: .6rem; }.system-doors footer > a { flex: 0 0 auto; border-radius: 7px; background: var(--os-green); color: #102018; padding: .9rem 1.1rem; text-decoration: none; font-weight: 800; }

@media (max-width: 1050px) {
  .product-bar { grid-template-columns: 210px 1fr auto; }.product-body { grid-template-columns: 210px 1fr; }
  .attention-row { grid-template-columns: 1fr 1fr; }
  .automation-flow { grid-template-columns: repeat(4,1fr); }
  .automation-flow div::after { display: none; }
  .architecture { grid-template-columns: 1fr; }.architecture > span { text-align: center; }
  .assistants > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .os-hero { min-height: 1130px; padding-top: 6rem; }
  .os-hero__intro h1 { font-size: clamp(3rem,16vw,5rem); }
  .desktop-scene { min-height: 690px; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-content: start; }
  .desktop-scene::before { inset: -.5rem; }
  .source-window { position: relative; inset: auto; width: auto; min-height: 112px; --rotate:0deg; }
  .source-window--sheet { grid-column: 1/-1; }
  .source-window > p { font-size: .78rem; }
  .desktop-scene__question { top: 50%; }
  .desktop-scene.is-context .source-window { transform: scale(.91); opacity: .25; }
  .context-object { width: calc(100% - 1rem); }
  .demo-zone { padding-inline: .5rem; }
  .demo-zone__head { padding-inline: .5rem; display: block; }.demo-zone__head > p { margin-top: 1rem; text-align: left; }
  .os-product { min-height: 880px; border-radius: 12px; }
  .product-bar { grid-template-columns: 1fr auto; }.product-brand { border-right: 0; }.product-context { display: none; }.role-chip { margin-right: .5rem; }
  .product-body { display: block; padding-bottom: 64px; }
  .product-nav { position: absolute; z-index: 20; inset: auto 0 0; min-height: 62px; flex-direction: row; overflow-x: auto; border: 0; border-top: 1px solid #cfd5cf; padding: .4rem; }
  .product-nav button { flex: 0 0 86px; grid-template-columns: 1fr; justify-items: center; gap: .1rem; padding: .35rem; font-size: .68rem; }.product-nav button b { display: none; }
  .workspace > section { min-height: 800px; }
  .workspace-home { padding: 1rem; }.workspace-title { display: block; }.workspace-title > button { margin-top: 1rem; }
  .attention-row { display: flex; overflow-x: auto; }.attention-row button { flex: 0 0 210px; }
  .work-item { grid-template-columns: 38px 1fr; gap: .6rem; }.work-item strong,.work-item time { grid-column: 2; text-align: left; }
  .case-head { grid-template-columns: auto 1fr; padding: .8rem; }.case-status { grid-column: 2; padding-left: 0; border: 0; }.customer-toggle { grid-column: 1/-1; }
  .case-nav { padding-inline: .6rem; }.case-panel { padding: 1rem; }.case-overview { grid-template-columns: 1fr; }.next-step { grid-row: auto; }.case-facts { grid-template-columns: 1fr 1fr; }
  .panel-head { align-items: start; flex-direction: column; }.finance-grid,.portal-grid { grid-template-columns: 1fr; }.appointment-form { grid-template-columns: 1fr; }.technical-data div { grid-template-columns: 1fr; gap: .25rem; }.ai-scan { grid-template-columns: 1fr 1fr; }
  .customer-portal { padding: 1rem; }.customer-portal > header { display: block; }.customer-portal > header button { margin-top: 1rem; }
  .role-picker { inset: 62px 0 0; grid-template-columns: 1fr; gap: 1rem; overflow-y: auto; padding: 2rem 1rem; }
  .builder-layout,.role-workspace,.industry-workspace { grid-template-columns: 1fr; }.role-workspace__rail { border: 0; border-top: 1px solid var(--os-line); }.role-workspace__items { grid-template-columns: 1fr; }
  .automation-flow { grid-template-columns: 1fr 1fr; }.automation-metrics { grid-template-columns: 1fr 1fr; }.automation-metrics p { grid-column: 1/-1; }
  .source-map { grid-template-columns: 1fr 1fr; padding: .7rem; }
  .map-canvas { min-height: 780px; }.map-ring { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 1rem; }.map-ring button { position: static; }.map-core { top: 53%; }.map-canvas > p { bottom: 75px; }
  .assistants > div,.pilot-roadmap,.system-doors > div { grid-template-columns: 1fr; }.pilot-roadmap div { min-height: 140px; }.pilot-roadmap div::after { display:none; }.pilot form { align-items: stretch; flex-direction: column; }.pilot select { min-width: 0; width: 100%; }
  .replace-control { grid-template-columns: 1fr; }.system-doors footer { align-items: start; flex-direction: column; }
}
@media (max-width: 470px) {
  .desktop-scene { grid-template-columns: 1fr; min-height: 820px; }.source-window:nth-of-type(n+6) { display: none; }.source-window--sheet { grid-column: auto; }
  .os-hero { min-height: 1280px; }
  .case-facts,.source-map,.automation-flow,.automation-metrics,.role-workspace__items,.assistants > div { grid-template-columns: 1fr; }
  .automation-metrics p { grid-column: auto; }.document-list button { grid-template-columns: 44px 1fr; }.document-list strong { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .source-window, .context-object { transition: none; }
  .ai-scan span::after, .capability-orbit span.is-new { animation: none; }
  html { scroll-behavior: auto !important; }
}
@media (min-width:861px) and (max-width:1180px) {
  .pg-nav__world { display:none; }
  .pg-nav__switcher { margin-inline:auto; }
}

/* Visual QA corrections */
.role-workspace { color: #fff; }
.os .source-reveal > header > span,
.os .problem-builder > header > span,
.os .capability-map > header > span,
.os .industry-lab > header > span,
.os .assistants > header > span,
.os .pilot > header > span {
  color: #225f48;
}
@media (max-width: 760px) {
  .os-hero__intro h1 { font-size: clamp(2.8rem,13vw,4.2rem); letter-spacing: -.075em; }
}