/* Capability showcase, review board and primitives.
   Motion vocabulary adapted from modal.com, recoloured to the SyntheraOS black and neon-blue system. */
:root {
 --cap-blue:#2f8bff; --cap-neon:#00b7ff; --cap-hot:#a8dcff;
 --cap-dim:#12233a; --cap-line:#ffffff1f; --cap-line-soft:#ffffff12;
 --cap-panel:#0e0f11; --cap-window:#151619; --cap-ink:#e7e9ed; --cap-muted:#a5a8b0;
}

/* Glyph-cluster field */
.cap-section { position:relative; background:#000; }
.cap-field { position:relative; height:clamp(620px,92svh,920px); overflow:hidden; isolation:isolate; }
.cap-field-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.cap-field::after { content:""; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(0deg,#000,#0000); pointer-events:none; }
.cap-field-copy { position:relative; z-index:2; max-width:760px; margin:0 auto; padding:clamp(56px,9vh,96px) var(--pad) 0; text-align:center; }
.cap-field-copy h2 { margin:0; color:#e4e6eb; font:400 clamp(34px,4.4vw,64px)/1.12 var(--sans); letter-spacing:-.04em; text-wrap:balance; }
.cap-field-copy p { max-width:520px; margin:22px auto 0; color:var(--cap-muted); font:15px/1.75 var(--sans); }
.cap-field-labels { position:absolute; inset:0; z-index:3; margin:0; padding:0; list-style:none; pointer-events:none; }
.cap-field-labels li { position:absolute; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 16px; border:1px solid #ffffff1f; border-radius:12px; background:#02061acc; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 12px 32px -10px #000; transform:translate(-50%,-50%) scale(.94); opacity:0; transition:opacity 220ms var(--ease),transform 320ms var(--ease); white-space:nowrap; }
.cap-field-labels li.is-lit { opacity:1; transform:translate(-50%,-50%); }
.cap-field-labels strong { color:#f2f8ff; font:500 18px/1.15 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.cap-field-labels span { color:#8fc6ff; font:400 10.5px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; }

/* Product rail and stages */
.cap-product { padding-top:40px; }
.cap-product-intro,.board-intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:end; margin-bottom:72px; }
.cap-product-intro h2,.board-intro h2 { margin:0; color:#dddfe5; font:400 clamp(30px,3.2vw,46px)/1.2 var(--sans); letter-spacing:-.04em; text-wrap:balance; }
.cap-product-intro p,.board-intro p { justify-self:end; max-width:520px; margin:0; color:var(--cap-muted); font:15px/1.8 var(--sans); }
.cap-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(32px,4vw,72px); align-items:start; }
.cap-rail { position:sticky; top:104px; display:flex; flex-direction:column; gap:6px; }
.cap-rail a { display:flex; align-items:center; gap:10px; width:max-content; padding:9px 16px 9px 12px; border:1px solid transparent; border-radius:999px; color:#8d93a0; font:400 14px/1 var(--sans); text-decoration:none; transition:color 200ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease); }
.cap-rail a .ui-icon { width:18px; height:18px; transition:color 300ms var(--ease); }
.cap-rail a:hover { color:#e4e8f0; }
.cap-rail a[aria-current="true"] { color:#f2f4f8; background:#17191d; border-color:#ffffff14; }
.cap-rail a[aria-current="true"] .ui-icon { color:var(--cap-neon); }
.cap-stages { display:flex; flex-direction:column; gap:clamp(120px,14vh,180px); }
.cap-stage { scroll-margin-top:96px; }
.cap-stage>h3 { margin:0; color:#e1e4eb; font:400 clamp(20px,1.7vw,24px)/1.35 var(--sans); letter-spacing:-.02em; }
.cap-stage>p { max-width:620px; margin:12px 0 0; color:var(--cap-muted); font:15px/1.75 var(--sans); }
.cap-screen { position:relative; margin-top:36px; padding:clamp(14px,2.4vw,36px); border:1px solid #ffffff0f; border-radius:16px; background:#0e0f11; box-shadow:inset 0 1px 0 #ffffff08; overflow:hidden; }
.cap-svg { display:block; width:100%; height:auto; overflow:visible; font-family:var(--sans); }
.cap-readout { position:absolute; left:clamp(14px,2.4vw,36px); bottom:clamp(12px,2vw,26px); max-width:calc(100% - 48px); margin:0; padding:8px 14px; border:1px solid #ffffff1a; border-radius:999px; background:#05080ecc; color:#cfe0ff; font:400 12px/1.4 var(--sans); font-variant-numeric:tabular-nums; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transform:translateY(6px); transition:opacity 400ms var(--ease),transform 400ms var(--ease); }
.cap-readout.is-on { opacity:1; transform:none; }
.cap-readout b { color:#fff; font-weight:500; }
.cap-readout .warn { color:var(--yellow); } .cap-readout .ok { color:var(--green); } .cap-readout .fault { color:var(--fault); }
.cap-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 40px; margin:32px 0 0; padding:0; list-style:none; }
.cap-points li { display:grid; grid-template-columns:20px 1fr; column-gap:10px; row-gap:6px; }
.cap-points .ui-icon { width:18px; height:18px; color:#8fb8ff; margin-top:1px; }
.cap-points strong { color:#e2e5ec; font:500 14px/1.4 var(--sans); }
.cap-points span { grid-column:2; color:var(--cap-muted); font:13px/1.65 var(--sans); }

/* SVG vocabulary shared by every stage */
.cap-svg .panel { fill:#141518; stroke:#ffffff17; stroke-width:1; }
.cap-svg .panel-label { fill:#8d97aa; font-size:11px; letter-spacing:.14em; }
.cap-svg .wire { fill:none; stroke:#ffffff26; stroke-width:1.2; }
.cap-svg .wire.is-lit { stroke:var(--cap-neon); stroke-opacity:.85; }
.cap-svg .flow { fill:none; stroke:var(--cap-neon); stroke-width:1.6; stroke-dasharray:3 9; stroke-linecap:round; }
.cap-svg .port { fill:#0a0e16; stroke:#ffffff40; }
.cap-svg .tile { fill:#1a1c21; stroke:#2a2d34; stroke-width:1.2; transition:fill 380ms var(--ease),stroke 380ms var(--ease); }
.cap-svg .tile.is-lit { fill:#0e3a73; stroke:var(--cap-neon); }
.cap-svg .tile.is-ok { fill:#033b2a; stroke:var(--green); }
.cap-svg .tile.is-warn { fill:#2d2600; stroke:var(--yellow); }
.cap-svg .tile.is-fault { fill:#3a1c00; stroke:var(--fault); }
.cap-svg .tile.is-plan { fill:#0b2240; stroke:#7fbfff; stroke-dasharray:3 3; }
.cap-svg .node rect { fill:#16171b; stroke:#ffffff21; transition:fill 400ms var(--ease),stroke 400ms var(--ease); }
.cap-svg .node text { fill:#c9d3e6; font-size:13px; }
.cap-svg .node .sub { fill:#7f8ba2; font-size:10.5px; letter-spacing:.04em; }
.cap-svg .node.is-lit rect { stroke:var(--cap-neon); fill:#0b1e3a; }
.cap-svg .node.is-fault rect { stroke:var(--fault); fill:#2a1400; }
.cap-svg .node.is-hit rect { stroke:var(--yellow); fill:#1f1a00; }
.cap-svg .node.is-new rect { stroke:var(--cap-neon); stroke-dasharray:4 4; fill:#07162b; }
.cap-svg .cell { stroke:#ffffff0c; }
.cap-svg .axis { fill:#7f889a; font-size:11px; }
.cap-svg .risk-dot circle { stroke:#000; stroke-width:2; }
.cap-svg .risk-dot text { fill:#dfe8f8; font-size:11px; font-variant-numeric:tabular-nums; }

/* Ask stage */
.cap-ask { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(16px,2.4vw,32px); min-height:420px; }
.ask-chat { display:flex; flex-direction:column; gap:16px; padding:24px; border:1px solid #ffffff12; border-radius:12px; background:var(--cap-window); }
.ask-q { align-self:flex-end; max-width:92%; min-height:44px; margin:0; padding:12px 16px; border-radius:12px; background:#1d1f24; color:#eaf2ff; font:400 14px/1.55 var(--sans); }
.ask-caret { display:inline-block; width:1.5px; height:1.05em; margin-left:2px; vertical-align:-2px; background:var(--cap-neon); animation:ask-blink 1s steps(1) infinite; }
@keyframes ask-blink { 50% { opacity:0; } }
.ask-a { margin:0; min-height:110px; color:#d6dae3; font:400 14.5px/1.75 var(--sans); }
.ask-a .w { opacity:0; filter:blur(4px); transition:opacity 260ms var(--ease),filter 260ms var(--ease); }
.ask-a .w.in { opacity:1; filter:none; }
.ask-cites { display:flex; flex-wrap:wrap; gap:8px; min-height:34px; }
.ask-cites button { padding:7px 12px; border:1px solid #2a4c80; border-radius:999px; background:#0a172b; color:#cfe2ff; font:400 12px/1 var(--sans); font-variant-numeric:tabular-nums; opacity:0; transform:translateY(6px) scale(.96); transition:opacity 300ms var(--ease),transform 300ms var(--ease),background-color 160ms ease,border-color 160ms ease; cursor:pointer; }
.ask-cites button.in { opacity:1; transform:none; }
.ask-cites button:hover,.ask-cites button.is-hot { background:#0f2648; border-color:var(--cap-neon); }
.ask-note { margin:auto 0 0; color:#7f8798; font:12px/1.4 var(--sans); }
.ask-records { display:flex; flex-direction:column; gap:10px; }
.ask-record { position:relative; padding:14px 16px; border:1px solid #ffffff12; border-radius:12px; background:#141518; opacity:.45; transform:translateX(8px); transition:opacity 420ms var(--ease),transform 420ms var(--ease),border-color 420ms var(--ease),background-color 420ms var(--ease),box-shadow 420ms var(--ease); }
.ask-record.in { opacity:1; transform:none; border-color:#2a4c80; background:#0a1426; box-shadow:0 10px 30px -12px #00b7ff40; }
.ask-record small { display:flex; justify-content:space-between; gap:12px; color:#8fa1c1; font:400 11px/1.4 var(--sans); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.ask-record strong { display:block; margin-top:6px; color:#e6eaf2; font:400 14px/1.4 var(--sans); }
.ask-record .state { padding:2px 8px; border-radius:999px; color:var(--status-ink,#101004); font-size:10.5px; letter-spacing:.02em; }
.state.review,.state.open { background:var(--yellow); } .state.planned { background:var(--cap-neon); } .state.approved { background:var(--green); }

/* Review board panels */
.board-section,.prim-section { background:#000; }
.board-grid,.prim-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); }
.board-card,.prim { margin:0; }
.board-stage { display:grid; place-items:center; aspect-ratio:1/0.93; padding:clamp(18px,2.6vw,40px); border:1px solid #ffffff0f; border-radius:16px; background:#0e0f11; box-shadow:inset 0 1px 0 #ffffff08; overflow:hidden; }
.board-window { width:100%; border:1px solid #ffffff17; border-radius:12px; background:var(--cap-window); box-shadow:0 24px 60px -24px #000, 0 0 0 1px #00000080; overflow:hidden; }
.board-card figcaption,.prim figcaption { display:grid; grid-template-columns:20px 1fr; column-gap:10px; row-gap:10px; padding:26px 20px 0; }
.prim figcaption { grid-template-columns:1fr; padding-left:4px; }
.board-card figcaption .ui-icon { width:18px; height:18px; color:#8fb8ff; margin-top:2px; }
.board-card figcaption strong,.prim figcaption strong { color:#e4e7ed; font:400 17px/1.4 var(--sans); letter-spacing:-.01em; }
.board-card figcaption span,.prim figcaption span { grid-column:1/-1; max-width:440px; color:var(--cap-muted); font:14px/1.75 var(--sans); }
.board-card figcaption span { grid-column:2; }
.prim figcaption span { grid-column:1; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.audit-filter { display:flex; align-items:center; gap:8px; margin:12px; padding:0 12px; border:1px solid #ffffff17; border-radius:8px; background:#0f1012; color:#7f8798; }
.audit-filter .ui-icon { width:15px; height:15px; flex:none; }
.audit-filter input { flex:1; min-width:0; height:36px; border:0; background:transparent; color:#e6e8ed; font:400 12.5px/1 var(--sans); outline:none; }
.audit-filter:focus-within { border-color:#3c6bb3; }
.audit-filter input::placeholder { color:#7f8798; }
.audit-head,.audit-rows li { display:grid; grid-template-columns:72px minmax(0,1fr) 108px; gap:10px; align-items:center; padding:0 14px; }
.audit-head { height:34px; background:#1a1b1f; color:#8d95a5; font:400 11px/1 var(--sans); letter-spacing:.04em; }
.audit-rows { position:relative; height:228px; margin:0; padding:0; list-style:none; overflow:hidden; }
.audit-rows li { height:57px; border-top:1px solid #ffffff0d; color:#b9c0cd; font:400 11.5px/1.35 var(--sans); font-variant-numeric:tabular-nums; animation:audit-in 600ms var(--ease) both; }
.audit-rows li.is-new { background:linear-gradient(90deg,#00b7ff14,#0000 70%); }
.audit-rows .act { color:#e3e8f2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-rows .act small { display:block; color:#7f8ba2; font-size:10.5px; }
.audit-rows .who { display:flex; align-items:center; gap:7px; min-width:0; color:#aab3c3; font-size:11px; }
.audit-rows .who i { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#13294a; color:#bcd6ff; font:500 9.5px/1 var(--sans); font-style:normal; }
.audit-rows .who span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-rows .empty { display:block; height:auto; padding:22px 14px; color:#7f8798; }
@keyframes audit-in { from { opacity:0; transform:translateY(-14px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }

.win-title { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px 6px; color:#e1e5ec; font:400 13px/1.3 var(--sans); }
.win-sub { color:#7f8798; font-size:11.5px; }
.live-dot { display:inline-flex; align-items:center; gap:7px; color:#cfd8e8; font-size:12px; }
.live-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--cap-neon); box-shadow:0 0 0 0 #00b7ff80; animation:live-ping 2s ease-out infinite; }
@keyframes live-ping { 70% { box-shadow:0 0 0 7px #00b7ff00; } 100% { box-shadow:0 0 0 0 #00b7ff00; } }
.quality-svg { display:block; width:100%; height:auto; padding:0 6px; font-family:var(--sans); }
.quality-svg .grid { stroke:#ffffff14; stroke-dasharray:1 4; }
.quality-svg .tick { fill:#7f8798; font-size:10px; font-variant-numeric:tabular-nums; }
.quality-svg .area { fill:url(#q-fill); }
.quality-svg .line { fill:none; stroke:var(--cap-neon); stroke-width:1.6; stroke-linejoin:round; }
.quality-svg .pt { fill:#05070b; stroke:var(--cap-neon); stroke-width:1.4; transition:r 200ms var(--ease); }
.quality-svg .pt.flag { stroke:var(--yellow); }
.quality-svg .cursor { stroke:#ffffff40; stroke-dasharray:2 3; }
.quality-tip { min-height:44px; margin:0; padding:4px 18px 16px; color:#aab2c2; font:400 12px/1.5 var(--sans); font-variant-numeric:tabular-nums; }
.quality-tip b { color:#fff; font-weight:500; } .quality-tip .warn { color:var(--yellow); }

.evidence-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:6px 18px 0; }
.evidence-stats div { display:flex; flex-direction:column; gap:4px; }
.evidence-stats dt { color:#7f8798; font:400 11px/1.3 var(--sans); }
.evidence-stats dd { margin:0; color:#eef2f8; font:400 20px/1.1 var(--sans); font-variant-numeric:tabular-nums; }
.evidence-stats dd.ok { color:var(--green); } .evidence-stats dd.plan { color:var(--cap-neon); }
.evidence-tiles { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin:18px 18px 0; padding:14px; border:1px solid #ffffff0f; border-radius:10px; background:#101114; }
.evidence-tiles span { aspect-ratio:1; border-radius:8px; background:#1d1f24; transition:background-color 500ms var(--ease),box-shadow 500ms var(--ease),transform 500ms var(--ease); }
.evidence-tiles span.ok { background:var(--green); box-shadow:0 0 12px -2px #00e68a90; }
.evidence-tiles span.prog { background:#7fbfff; }
.evidence-tiles span.plan { background:#0d2c55; box-shadow:inset 0 0 0 1px #2f8bff; }
.evidence-tiles span.scan { transform:scale(1.25); box-shadow:0 0 14px #00b7ffa0; }
.evidence-ticker { min-height:52px; margin:0; padding:14px 18px 16px; color:#aab2c2; font:400 12px/1.5 var(--sans); font-variant-numeric:tabular-nums; }
.evidence-ticker b { color:#fff; font-weight:500; }

/* Primitives */
.prim-grid { gap:clamp(20px,3vw,48px); }
.prim-svg { display:block; width:100%; height:auto; aspect-ratio:1; overflow:visible; }
.prim-svg .e { fill:none; stroke:#ffffff52; stroke-width:1; }
.prim-svg .d { fill:none; stroke:#ffffff30; stroke-width:1; stroke-dasharray:1.5 4; }
.prim-svg .v { fill:var(--cap-neon); }
.prim-svg .v.alt { fill:#7fbfff; }
.prim-svg .v.warn { fill:var(--yellow); }
.prim-svg .lbl { fill:#8d97aa; font:400 10px/1 var(--sans); letter-spacing:.12em; }
[data-anim].is-arriving { filter:blur(10px); opacity:0; }
[data-anim].has-arrived { transition:filter 900ms var(--ease),opacity 900ms var(--ease); }

/* Responsive */
@media (max-width:1100px) {
 .cap-points { grid-template-columns:1fr; gap:18px; }
 .board-grid,.prim-grid { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
 .prim-grid { max-width:440px; }
}
@media (max-width:900px) {
 .cap-product-intro,.board-intro { grid-template-columns:1fr; gap:18px; margin-bottom:44px; }
 .cap-product-intro p,.board-intro p { justify-self:start; }
 .cap-layout { grid-template-columns:1fr; gap:24px; }
 .cap-rail { top:64px; z-index:5; flex-direction:row; gap:4px; margin:0 calc(var(--pad) * -1); padding:10px var(--pad); background:#000000e0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow-x:auto; scrollbar-width:none; }
 .cap-rail::-webkit-scrollbar { display:none; }
 .cap-rail a { flex:none; padding:8px 14px 8px 10px; font-size:13px; }
 .cap-stages { gap:96px; }
 .cap-stage { scroll-margin-top:132px; }
 .cap-ask { grid-template-columns:1fr; }
 .cap-field { height:clamp(600px,96svh,760px); }
}
@media (max-width:560px) {
 .cap-screen { margin-left:calc(var(--pad) * -.5); margin-right:calc(var(--pad) * -.5); border-radius:16px; }
 .cap-readout { position:static; margin-top:12px; max-width:none; border-radius:10px; }
 .audit-head,.audit-rows li { grid-template-columns:60px minmax(0,1fr) 90px; }
 .evidence-tiles { gap:4px; padding:10px; }
 .ask-chat { padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
 .ask-caret,.live-dot::before { animation:none; }
 .audit-rows li { animation:none; }
 [data-anim].is-arriving { filter:none; opacity:1; }
}
body.motion-paused .ask-caret,body.motion-paused .live-dot::before { animation:none; }

/* Hero light layer: sits under the transparent WebGL canvas, above the stage fill. */
.experience-viewport .hero-light { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }