/* Ask Compass homepage: light hero with the 3D emblem, story video, use cases, platform preview,
   capabilities, Studio canvas and industries. Loaded on the homepage only,
   after site.css and pages.css. */
.is-home { --night: #050b1c; --night-2: #0a1530; --cyan: #5fd0ff; --cyan-2: #8fe1ff; --night-line: rgba(140, 190, 255, .18); --night-ink: #e8f0ff; --night-ink-2: #a6b6d4; }

/* Homepage rhythm: tighter than inner pages so sections read as one story */
.is-home .section { padding-block: clamp(56px, 6vw, 88px); }
.is-home .huc-head, .is-home .hp-head { margin-bottom: 32px; }
.is-home .hk-head { margin-bottom: 32px; }

/* ── Hero: light, colourful mesh; copy on the left, the 3D emblem on the right half ── */
.hx { position: relative; overflow: hidden; isolation: isolate; color: var(--ink);
  margin-top: calc(-68px - env(safe-area-inset-top, 0px)); padding-top: calc(68px + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, #f6f9ff 0%, #fbfaf6 100%); }
.hx-mesh { position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 44% at 76% 42%, rgba(76, 141, 255, .30), transparent 70%),
    radial-gradient(26% 32% at 92% 84%, rgba(239, 182, 74, .30), transparent 70%),
    radial-gradient(30% 38% at 60% 8%, rgba(95, 208, 255, .22), transparent 70%),
    radial-gradient(28% 36% at 6% 18%, rgba(20, 184, 166, .16), transparent 70%),
    radial-gradient(30% 34% at 30% 96%, rgba(236, 120, 170, .12), transparent 70%);
  animation: meshDrift 26s ease-in-out infinite alternate; }
.hx-mesh::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(23, 63, 115, .10) 1px, transparent 1.3px) 0 0 / 28px 28px;
  -webkit-mask: radial-gradient(60% 60% at 70% 45%, #000, transparent 75%); mask: radial-gradient(60% 60% at 70% 45%, #000, transparent 75%); }
@keyframes meshDrift { to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } }
.hx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, #fff); }
.hx-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 28px 12px; }
.hx-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
.hx-copy { container-type: inline-size; }
/* Always two lines: each line stays whole and the size follows the column width */
.hx h1 { color: var(--navy); font-size: min(62px, 9.3cqi); line-height: 1.05; letter-spacing: -.045em; font-weight: 700; }
.hx h1 .hx-line { display: block; white-space: nowrap; }
.hx .hx-grad { background: linear-gradient(92deg, #2563EB 0%, #0B87B6 55%, #0E8A80 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-lead { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-2); max-width: 34em; }
.hx-how { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 34em; }
.hx-how li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hx-how b { display: block; color: var(--ink); font-size: 15.5px; font-weight: 650; }
.hx-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(180deg, #fff, #eef4fd); border: 1px solid #d6e2f3; box-shadow: 0 4px 12px rgba(16, 40, 76, .08); }
.hx-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Dark-section accents reused by the capabilities and industries bands */
.hx-eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-2, #8fe1ff); margin: 0; }
.hx-grad { background: linear-gradient(92deg, #8fe1ff 0%, #4cc3ff 40%, #4c8dff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-btn-primary { background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 0 0 1px rgba(143, 225, 255, .25), 0 12px 30px rgba(37, 99, 235, .45); }
.hx-btn-primary:hover { background: linear-gradient(180deg, #4c8dff, #3b74f0); }
.hx-btn-outline { background: rgba(255, 255, 255, .04); color: #fff; border-color: rgba(255, 255, 255, .32); }
.hx-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Stage: the emblem floats over a soft halo and a lit floor */
.hx-stage { aspect-ratio: 1 / .9; margin: 0; max-width: none; }
.hx-stage::before { display: none; }
.hx-halo { position: absolute; left: 50%; top: 48%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(214, 230, 255, .55) 45%, rgba(239, 182, 74, .14) 70%, transparent 100%); }
.hx-halo::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(23, 63, 115, .16); animation: haloSpin 60s linear infinite; }
@keyframes haloSpin { to { transform: rotate(360deg); } }
.hx-floor { position: absolute; left: 50%; bottom: 7%; width: 54%; height: 7%; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(16, 40, 76, .22), transparent); filter: blur(4px); }
.hx-stage .compass-canvas, .hx-stage .compass-fallback { z-index: 1; }
.hx-stage .compass-fallback img { width: 76%; height: auto; transform: none; filter: drop-shadow(0 24px 40px rgba(16, 40, 76, .22)); }
.hx-stage .stage-lines { z-index: 2; }
.hx-stage .bearings { z-index: 3; }
.hx-labels button { gap: 10px; padding: 9px 16px 9px 9px; border-radius: 14px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(16, 40, 76, .06), 0 14px 34px rgba(16, 40, 76, .14); color: var(--ink); text-align: left; }
.hx-labels li.is-active button { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(239, 182, 74, .22), 0 0 24px rgba(239, 182, 74, .4); }
.hx-lt { display: flex; flex-direction: column; line-height: 1.2; }
.hx-lt b { font-size: 14.5px; font-weight: 650; color: var(--navy); }
.hx-lt span { font-size: 13px; font-weight: 400; color: var(--ink-2); }

/* ── Platform preview ── */
.hplat { background: linear-gradient(180deg, #fff 0%, var(--bg-blue) 100%); }
.hp-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: 0 auto 48px; max-width: 760px; }
.hp-head h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.035em; }
.hp-head .section-lead { margin: 0; }
.hp-frame { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.app { border-radius: 16px; overflow: hidden; background: #0b1530; border: 1px solid #1d2b52; box-shadow: 0 40px 90px rgba(16, 40, 76, .28); color: #dfe8fb; font-size: 13px; }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #08102a; border-bottom: 1px solid #18264a; }
.app-bar i { width: 9px; height: 9px; border-radius: 50%; background: #26365f; }
.app-url { margin-left: 12px; font-family: var(--mono); font-size: 11.5px; color: #7f92b8; }
.app-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 380px; }
.app-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; background: #0a1430; border-right: 1px solid #18264a; }
.app-side span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #93a5c8; }
.app-side span.is-on { background: rgba(76, 141, 255, .16); color: #fff; }
.app-side svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-side .app-brand { color: #fff; font-weight: 650; margin-bottom: 10px; }
.app-brand b { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #efb64a 0 25%, #13306a 27%); border: 1px solid #3b5a9c; }
.app-main { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: #101d3e; border: 1px solid #1d2c55; color: #7f92b8; margin-bottom: 14px; }
.app-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.app-hi { margin: 0; font-size: 20px; font-weight: 650; color: #fff; letter-spacing: -.02em; }
.app-sub { margin: 0 0 12px; color: #93a5c8; }
.app-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 11px; background: #101d3e; border: 1px solid #1d2c55; min-width: 0; }
.app-card small, .app-chart small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #7fbfff; }
.app-card b { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
.app-card em { font-style: normal; color: #93a5c8; font-size: 12px; }
.app-prog { height: 5px; border-radius: 3px; background: #1d2c55; overflow: hidden; margin-top: 4px; }
.app-prog i { display: block; height: 100%; background: linear-gradient(90deg, #4c8dff, #5fd0ff); }
.app-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.app-chart { padding: 12px 14px; border-radius: 11px; background: #101d3e; border: 1px solid #1d2c55; }
.app-bars { display: flex; align-items: flex-end; gap: 8px; height: 86px; margin-top: 10px; }
.app-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #5fd0ff, #2563eb); }
.app-days { display: flex; gap: 8px; margin-top: 6px; }
.app-days span { flex: 1; text-align: center; color: #7f92b8; font-size: 11px; }
.app-drop { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.app-drop li { display: grid; gap: 5px; color: #c9d6ef; }
.app-drop i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #efb64a, #e98a3a); }
.hp-ask { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 10px; }
.hp-ask-h { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; color: var(--ink); }
.hp-ask-h svg, .hst-ph svg { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linejoin: round; }
.hp-ask-p { margin: 0; font-size: 14px; color: var(--ink-2); }
.hp-ask-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-ask-list a { display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s; }
.hp-ask-list a:hover { border-color: var(--blue); background: var(--blue-soft); }
.hp-ask .text-link { font-size: 14px; }
.hp-cap { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--ink-2); text-align: center; }

/* ── Key capabilities ── */
.hk { background: radial-gradient(60% 80% at 80% 0%, rgba(37, 99, 235, .22), transparent 70%), var(--night, #050b1c); color: var(--night-ink); }
.hk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; margin-bottom: 44px; }
.hk-head .hx-eyebrow { grid-column: 1 / -1; }
.hk-head h2 { color: #fff; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.hk-all { color: var(--cyan-2, #8fe1ff); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hk-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.hk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hk-card { --c: #4c8dff; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px 22px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 255, 255, .02) 60%), #0a1430; border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); transition: transform .3s var(--ease), border-color .3s; }
.hk-card:hover { transform: translateY(-3px); border-color: var(--c); }
.hk-card.c1 { --c: #4c8dff; } .hk-card.c2 { --c: #a46bff; } .hk-card.c3 { --c: #2fc4c9; }
.hk-card.c4 { --c: #f0a23b; } .hk-card.c5 { --c: #3fbf7f; } .hk-card.c6 { --c: #ff6f91; }
.hk-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); margin-bottom: 6px; }
.hk-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hk-card h3 { color: #fff; font-size: 19px; letter-spacing: -.02em; }
.hk-card p { margin: 0; color: var(--night-ink-2); font-size: 15px; line-height: 1.6; flex: 1; }
.hk-card .status { margin-top: 4px; }
.hk-card .status-demo { color: #7be0b0; background: rgba(63, 191, 127, .12); border-color: rgba(63, 191, 127, .35); }
.hk-card .status-planned { color: #c9d4ea; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.hk-card a { margin-top: 6px; color: var(--c); font-weight: 600; text-decoration: none; }
.hk-card a::after { content: ""; position: absolute; inset: 0; }
.hk-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hk-card a:focus-visible { outline: none; }
.hk-card:has(a:focus-visible) { outline: 2px solid var(--c); outline-offset: 3px; }

/* ── Experience the Studio ── */
.hst { background: var(--bg); }
.hst-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hst-copy { display: flex; flex-direction: column; gap: 18px; }
.hst-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.035em; }
.hst-copy .section-lead { margin: 0; }
.hst-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hst-checks li { position: relative; padding-left: 30px; color: var(--ink); }
.hst-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.5L14 7.5' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.hst-canvas { border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.hst-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.hst-name { font-weight: 650; font-size: 15px; color: var(--ink); }
.hst-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; }
.hst-flow { position: relative; aspect-ratio: 4 / 5; max-height: 560px; margin: 18px; border-radius: 12px;
  background: radial-gradient(circle, #d6e0ee 1px, transparent 1.2px) 0 0 / 18px 18px, #f6f9fd; }
.hst-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hst-lines path { fill: none; stroke: #b9c7da; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; transition: stroke .3s; }
.hst-flow[data-path="yes"] .hst-lines .br-yes, .hst-flow[data-path="no"] .hst-lines .br-no, .hst-lines path:not([class]) { stroke: var(--blue); stroke-dasharray: none; }
.hn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 44%; max-width: 200px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid #c6d3e6; background: #fff; color: var(--ink); font: 600 13.5px/1.25 var(--font); cursor: pointer; box-shadow: 0 2px 6px rgba(16, 40, 76, .06); transition: border-color .2s, box-shadow .2s, opacity .3s; }
.hn:hover { border-color: var(--blue); }
.hn-start, .hn-end { border-radius: 999px; background: var(--navy); color: #fff; border-color: var(--navy); }
.hn-dec { border-color: #e7b04a; background: #fff8ea; }
.hn.is-sel { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .16), 0 8px 18px rgba(37, 99, 235, .18); }
.hn-start.is-sel, .hn-end.is-sel { border-color: var(--blue-bright); }
.hst-flow[data-path="yes"] .hn.br-no, .hst-flow[data-path="no"] .hn.br-yes { opacity: .5; }
.hst-tag { position: absolute; top: 58%; transform: translate(-50%, -50%); padding: 2px 9px; border-radius: 999px; font: 600 11.5px/1.4 var(--mono); background: #fff; border: 1px solid var(--line-strong); color: var(--ink-2); }
.hst-tag.t-yes { left: 33%; } .hst-tag.t-no { left: 67%; }
.hst-flow[data-path="yes"] .t-yes, .hst-flow[data-path="no"] .t-no { background: var(--blue); border-color: var(--blue); color: #fff; }
.hst-panel { border-left: 1px solid var(--line); padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.hst-ph { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14.5px; color: var(--ink); }
.hst-kind { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--deep); }
.hst-title { font-size: 18px; letter-spacing: -.02em; }
.hst-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.hst-choice { display: flex; gap: 8px; }
.hst-choice[hidden] { display: none; }
.hst-choice button { flex: 1; min-height: 40px; border-radius: 9px; border: 1.5px solid var(--line-strong); background: #fff; font: 600 14px var(--font); color: var(--ink); cursor: pointer; }
.hst-choice button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.hst-dh { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.hst-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hst-docs a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.hst-docs a::before { content: ""; flex: none; width: 14px; height: 16px; border-radius: 2px; border: 1.5px solid var(--blue); }
.hst-docs a:hover { border-color: var(--blue); }

/* ── Industries ── */
.hi { background: radial-gradient(50% 90% at 10% 100%, rgba(37, 99, 235, .25), transparent 70%), linear-gradient(180deg, #0a1530, var(--night, #050b1c)); color: var(--night-ink); }
.hi-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.hi-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hi-copy h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.035em; }
.hi-copy p { margin: 0; color: var(--night-ink-2); font-size: 17px; line-height: 1.6; max-width: 30em; }
.hi-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hi-list li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--night-line); text-align: center; font-size: 14.5px; font-weight: 500; color: #fff; }
.hi-list li > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(95, 208, 255, .1); border: 1px solid rgba(143, 225, 255, .3); }
.hi-list svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hi-cta { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.hi-cta p { margin: 0; color: var(--night-ink-2); max-width: 40em; }
.hi-cta b { color: #fff; }
.is-home .founder-section { background: var(--bg); }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .hx-how li { font-size: 14.5px; }
  .hp-frame { grid-template-columns: 1fr; }
  .hp-ask { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hp-ask-list { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .hp-ask-list li { flex: 1 1 calc(50% - 8px); }
  .hk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hst-in { grid-template-columns: 1fr; gap: 40px; }
  .hst-copy { max-width: 680px; }
  .hi-in { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .hx-in { grid-template-columns: 1fr; min-height: 0; padding-block: 40px 24px; gap: 8px; }
  .hx-stage { margin: 0 auto; width: 100%; max-width: 620px; aspect-ratio: 1 / .92; }
  .hx-copy { max-width: 680px; }
  .app-body { grid-template-columns: 1fr; }
  .app-side { display: none; }
}
@media (max-width: 640px) {
  .hx-lead { font-size: 16px; }
  .hx .hero-ctas .btn { flex: 1 1 100%; }
  .hx-stage { aspect-ratio: 1 / 1.08; }
  .hx-labels button { padding: 6px 10px 6px 6px; gap: 7px; border-radius: 11px; }
  .hx-labels .hx-ic { width: 26px; height: 26px; border-radius: 8px; }
  .hx-labels .hx-ic svg { width: 14px; height: 14px; }
  .hx-lt b { font-size: 12.5px; }
  .hx-lt span { font-size: 11.5px; }
  .app-cards, .app-row { grid-template-columns: 1fr; }
  .app-main { padding: 14px; }
  .hp-ask-list li { flex: 1 1 100%; }
  .hk-head { grid-template-columns: 1fr; }
  .hk-grid { grid-template-columns: 1fr; }
  .hst-body { grid-template-columns: 1fr; }
  .hst-flow { margin: 12px; aspect-ratio: 4 / 5.6; }
  .hn { width: 46%; font-size: 12.5px; padding: 6px 8px; }
  .hst-panel { border-left: 0; border-top: 1px solid var(--line); }
  .hst .hero-ctas .btn, .hi-cta .hero-ctas .btn { flex: 1 1 100%; }
  .hi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hi-list li:last-child { grid-column: 1 / -1; }
  .hi-cta .hero-ctas { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-mesh, .hx-halo::after { animation: none; }
  .hk-card, .hn { transition: none; }
  .hk-card:hover { transform: none; }
}

/* ── Story video ── */
.hv { background: #fff; padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); }
.hv-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 760px; margin: 0 auto 40px; }
.hv-head h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.035em; }
.hv-head .section-lead { margin: 0; }
.hv-frame { margin: 0 auto; max-width: 1040px; }
.hv-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #f3f7fc; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(16, 40, 76, .18); }
.hv-script { max-width: 760px; margin: 22px auto 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.hv-script summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--ink); }
.hv-script ol { margin: 0; padding: 0 22px 18px 40px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.hv-script b { color: var(--ink); }
@media (max-width: 640px) { .hv-video { border-radius: 12px; } }
.btn-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

/* ── Use cases: tabs on top, kinetic headline, blueprint drawing ── */
.huc { --t1: rgba(37, 99, 235, .14); --t2: rgba(20, 184, 166, .12); --t3: rgba(239, 182, 74, .10);
  position: relative; overflow: hidden; isolation: isolate; background: #fff; }
.huc::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(32% 40% at 12% 30%, var(--t1), transparent 70%), radial-gradient(30% 36% at 88% 70%, var(--t2), transparent 70%), radial-gradient(24% 30% at 60% 10%, var(--t3), transparent 70%);
  transition: background 1.2s var(--ease); }
.huc[data-tone="1"] { --t1: rgba(20, 184, 166, .13); --t2: rgba(37, 99, 235, .12); --t3: rgba(239, 182, 74, .12); }
.huc[data-tone="2"] { --t1: rgba(23, 63, 115, .13); --t2: rgba(239, 182, 74, .13); --t3: rgba(37, 99, 235, .10); }
.huc[data-tone="3"] { --t1: rgba(239, 182, 74, .14); --t2: rgba(37, 99, 235, .12); --t3: rgba(229, 72, 77, .07); }
.huc[data-tone="4"] { --t1: rgba(22, 155, 98, .12); --t2: rgba(23, 63, 115, .12); --t3: rgba(37, 99, 235, .10); }
.huc[data-tone="5"] { --t1: rgba(95, 208, 255, .16); --t2: rgba(124, 92, 255, .10); --t3: rgba(37, 99, 235, .12); }
.huc-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: 0 auto 32px; max-width: 760px; }
.huc-head h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -.035em; }

.huc-zone { padding: 28px 0 22px; margin: -28px 0 0; }
.huc-bar { position: relative; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 10px 30px rgba(16, 40, 76, .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow-x: auto; scrollbar-width: none; }
.huc-bar::-webkit-scrollbar { display: none; }
.huc-bar [role="tab"] { position: relative; z-index: 2; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 999px; background: none;
  font: 600 14.5px/1.2 var(--font); color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: color .25s; }
.huc-bar [role="tab"]:hover, .huc-bar [role="tab"][aria-selected="true"] { color: var(--navy); }
.huc-n { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--ink-3); transition: color .25s; }
.huc-bar [aria-selected="true"] .huc-n { color: var(--blue); }
.huc-ind { position: absolute; z-index: 1; top: 6px; bottom: 6px; left: var(--l, 6px); right: var(--r, 80%); border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f4f8fe); box-shadow: 0 0 0 1px rgba(37, 99, 235, .22), 0 6px 18px rgba(37, 99, 235, .16);
  transition: left .42s var(--ease-spatial), right .42s var(--ease-spatial); }
.huc-bar.to-right .huc-ind { transition: left .5s .07s var(--ease-spatial), right .34s var(--ease-spatial); }
.huc-bar.to-left .huc-ind { transition: left .34s var(--ease-spatial), right .5s .07s var(--ease-spatial); }
.huc-near { position: absolute; z-index: 0; top: 50%; left: 0; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .14), transparent); transform: translateX(var(--nx, 0px)); transition: opacity .3s; }
.huc-zone:hover .huc-near { opacity: 1; }
.huc-prog { position: absolute; left: 22%; right: 22%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; opacity: 0; }
.huc-tabs.is-auto [aria-selected="true"] .huc-prog { opacity: .55; animation: hucProg var(--cycle, 7s) linear forwards; }
@keyframes hucProg { to { transform: scaleX(1); } }

.huc-stage { position: relative; display: grid; margin-top: 18px; border-radius: 24px; padding: 1px;
  background: conic-gradient(from var(--ang, 0deg) at 50% 50%, rgba(37, 99, 235, .45), rgba(95, 208, 255, .35), rgba(239, 182, 74, .4), rgba(20, 184, 166, .35), rgba(37, 99, 235, .45));
  box-shadow: 0 30px 80px rgba(16, 40, 76, .12); }
.huc-stage::after { content: ""; position: absolute; inset: 1px; border-radius: 23px; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 40%, rgba(95, 208, 255, .12) 47%, rgba(239, 182, 74, .10) 53%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: var(--sheen, 130%) 0; transition: background-position 1.2s var(--ease); }
.huc-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 23px; background: rgba(255, 255, 255, .96); }
.js .huc-panel { transition: opacity .45s var(--ease), visibility .45s; }
.js .huc-panel:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; }
.huc-copy { display: flex; flex-direction: column; gap: 18px; }
.huc-h { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.04em; font-weight: 700; color: var(--navy); }
.huc-h em { font-style: normal; background: linear-gradient(92deg, #2563EB, #0B87B6 70%, #0E8A80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.huc-copy > p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 36em; }
.huc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.huc-meta .text-link { font-size: 15px; }

/* kinetic words: each word rises out of a soft blur, one after another */
.huc-h .w { display: inline-block; }
.huc-h em .w { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.js .huc-panel.is-on .huc-h .w { animation: wordIn .7s calc(var(--i) * 45ms) var(--ease-spatial) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(.45em) rotateX(-35deg); filter: blur(6px); } }
.js .huc-panel.is-on .huc-copy > p, .js .huc-panel.is-on .huc-meta { animation: fadeUp .6s .35s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

/* blueprint drawing */
.huc-art { width: 100%; height: auto; border-radius: 16px; background: #f4f8fe; border: 1px solid #dbe6f5; overflow: visible; }
.bp-grid path { fill: none; stroke: #dde7f4; stroke-width: 1; }
.bp { fill: none; stroke: #4c7ed8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bp-hot { stroke: var(--blue); stroke-width: 2.2; }
.bp-warn { stroke: #d9822b; stroke-width: 2.2; }
.bp-x { stroke: #b9c4d6; }
.bp-flow { stroke-dasharray: .02 .02; }
.bp-dim { stroke: #9aa9bf; stroke-width: 1; }
.bp-dot { fill: var(--blue); }
.bp-t { font: 500 11px var(--mono); fill: #5e6c82; letter-spacing: .02em; }
.bp-warnt { fill: #b45f06; }
.js .huc-panel.is-on .bp:not(.bp-flow) { animation: draw 1s calc(.15s + var(--d, 0) * 110ms) var(--ease) both; }
.js .huc-panel.is-on .bp-flow { animation: flowDash 1.6s linear infinite, fadeIn .6s calc(.15s + var(--d, 0) * 110ms) both; }
.js .huc-panel.is-on .bp-dot, .js .huc-panel.is-on .bp-t { animation: fadeIn .5s calc(.45s + var(--d, 2) * 90ms) both; }
.js .huc-panel.is-on .bp-pulse { animation: fadeIn .5s .9s both, pulseDot 2.2s 1.4s ease-in-out infinite; }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes flowDash { to { stroke-dashoffset: -.04; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pulseDot { 50% { r: 9; opacity: .6; } }

@media (max-width: 1260px) { .huc-bar .huc-n { display: none; } .huc-bar [role="tab"] { padding: 0 10px; font-size: 13.5px; } }
@media (max-width: 920px) {
  .huc-panel { grid-template-columns: 1fr; gap: 28px; }
  .huc-art { max-width: 460px; }
  .huc-bar { border-radius: 16px; }
  .huc-bar [role="tab"] { flex: 0 0 auto; border-radius: 12px; }
  .huc-ind { border-radius: 12px; }
}
@media (max-width: 640px) {
  .huc-h { font-size: clamp(26px, 8vw, 34px); }
  .huc-copy > p { font-size: 16px; }
  .huc-zone { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .huc::before, .huc-ind, .huc-stage::after { transition: none; }
  .js .huc-panel { transition: none; }
  .js .huc-panel.is-on .huc-h .w, .js .huc-panel.is-on .huc-copy > p, .js .huc-panel.is-on .huc-meta,
  .js .huc-panel.is-on .bp, .js .huc-panel.is-on .bp-flow, .js .huc-panel.is-on .bp-dot, .js .huc-panel.is-on .bp-t, .js .huc-panel.is-on .bp-pulse { animation: none; }
}

/* ── Motion layer ── */
/* Kinetic hero headline: words rise out of a soft blur once, on load */
.hx h1 .kw { display: inline-block; }
.hx .hx-grad.g1, .hx .hx-grad.g2 { background-size: 220% 100%; }
.hx .hx-grad.g2 { background-position: 100% 0; }
.js .hx h1 .kw { animation: wordIn .8s calc(.05s + var(--i) * 70ms) var(--ease-spatial) both; }

/* Particle constellation in the night sky (canvas drawn by home.js) */
.hx-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask: linear-gradient(180deg, #000 0, #000 70%, transparent 95%); mask: linear-gradient(180deg, #000 0, #000 70%, transparent 95%); }

/* Holographic capability cards: pointer-following light, iridescent edge, slight tilt */
@property --g { syntax: "<number>"; inherits: false; initial-value: 0; }
.hk-card { border: 1px solid transparent;
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) calc(var(--g) * 26%), transparent), transparent 65%) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 255, 255, .02) 60%) padding-box,
    linear-gradient(#0a1430, #0a1430) padding-box,
    conic-gradient(from var(--ang, 210deg), color-mix(in srgb, var(--c) calc(34% + var(--g) * 66%), transparent), color-mix(in srgb, #5fd0ff calc(var(--g) * 85%), transparent), color-mix(in srgb, #efb64a calc(var(--g) * 70%), transparent), color-mix(in srgb, var(--c) calc(34% + var(--g) * 66%), transparent)) border-box;
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: --g .35s, transform .5s var(--ease-spatial); }
.hk-card:hover { --g: 1; transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-3px); border-color: transparent; }

/* Split-flap board */
.hi-flapline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; color: var(--night-ink-2); font-size: 17px; }
.flap { display: inline-flex; gap: 3px; perspective: 400px; }
.ft { position: relative; display: grid; place-items: center; width: 22px; height: 32px; border-radius: 5px; background: linear-gradient(180deg, #14244a 50%, #0e1b3a 50%); border: 1px solid rgba(143, 200, 255, .22);
  font: 600 17px var(--mono); color: #e8f0ff; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.ft::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .5); }
.ft.is-blank { color: transparent; opacity: .55; }
.ft.flip { animation: flapTurn .3s ease-in-out; }
@keyframes flapTurn { 50% { transform: rotateX(88deg); filter: brightness(1.6); } }
@media (max-width: 640px) { .ft { width: 18px; height: 27px; font-size: 14px; } .flap { gap: 2px; } }

@media (prefers-reduced-motion: reduce) {
  .js .hx h1 .kw { animation: none; }
  .hk-card { transition: none; transform: none; }
  .hk-card:hover { transform: none; }
  .ft.flip { animation: none; }
}

/* ── The challenge: problem ⇄ fix cards on a dark halftone field ── */
.hch { position: relative; overflow: hidden; isolation: isolate; color: var(--night-ink); background: radial-gradient(60% 70% at 50% 0%, rgba(37, 99, 235, .28), transparent 70%), linear-gradient(180deg, #071233, #050b1c); }
.hch::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(143, 200, 255, .22) 1.2px, transparent 1.6px) 0 0 / 14px 14px;
  -webkit-mask: radial-gradient(70% 60% at 50% 100%, #000, transparent 70%); mask: radial-gradient(70% 60% at 50% 100%, #000, transparent 70%); }
.hch-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 820px; margin: 0 auto 36px; }
.hch-pill { margin: 0; padding: 7px 16px; border-radius: 999px; border: 1.5px solid rgba(143, 225, 255, .5); font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-2, #8fe1ff); }
.hch-head h2 { color: #fff; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.hch-sub { margin: 0; font-size: 18px; line-height: 1.6; color: var(--night-ink-2); max-width: 40em; }
.hch-toggle { position: relative; display: inline-flex; margin-top: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(143, 200, 255, .22); }
.hch-toggle button { position: relative; z-index: 1; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 600 14.5px var(--font); color: var(--night-ink-2); cursor: pointer; transition: color .25s; }
.hch-toggle button.is-on { color: var(--navy); }
.hch-knob { position: absolute; top: 5px; bottom: 5px; left: var(--kl, 5px); width: var(--kw, 120px); border-radius: 999px; background: linear-gradient(180deg, #F5C35E, #EBAA3C); box-shadow: 0 6px 18px rgba(212, 150, 40, .35); transition: left .45s var(--ease-spatial), width .45s var(--ease-spatial); }

.hch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.hch-card { --edge: rgba(143, 200, 255, .2); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 28px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)), #0a1533; border: 1px solid var(--edge); outline: none; transition: border-color .35s, transform .45s var(--ease-spatial), box-shadow .35s; }
.hch-feature { background: linear-gradient(150deg, #1d4fd8 0%, #1a3fa8 45%, #0d6f8a 100%); border-color: rgba(143, 225, 255, .45); box-shadow: 0 30px 70px rgba(37, 99, 235, .35); }
.hch-feature::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 48%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; transition: background-position 1.2s var(--ease); }
.hch-card.is-fixed { --edge: rgba(239, 182, 74, .6); }
.hch-card.is-fixed.hch-feature::after { background-position: -30% 0; }
.hch-card:focus-visible { box-shadow: 0 0 0 3px rgba(239, 182, 74, .7); }
.hch-top { display: flex; align-items: center; gap: 12px; }
.hch-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(143, 200, 255, .16); border: 1px solid rgba(143, 225, 255, .4); font: 700 15px var(--font); color: #fff; }
.hch-k { font-weight: 650; font-size: 15px; color: #dfe9ff; }
.hch-badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: var(--gold); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s var(--ease-spatial); }
.hch-card.is-fixed .hch-badge { opacity: 1; transform: none; }
.hch-card h3 { position: relative; display: grid; color: #fff; font-size: 22px; letter-spacing: -.02em; line-height: 1.25; }
.hch-card h3 > span, .hch-card > p { grid-area: 1 / 1; }
.hch-card > p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #c2cfea; }
.hch-feature > p { color: #e3ecff; }
/* problem and fix text share one cell, so cards keep their height when they switch */
.hch-card { display: grid; grid-template-rows: auto auto auto 1fr; }
.hch-card > p.hch-p, .hch-card > p.hch-f { grid-row: 4; grid-column: 1; }
.hch-p, .hch-f { transition: opacity .35s, transform .45s var(--ease-spatial), filter .35s; }
.hch-f { opacity: 0; transform: translateY(8px); filter: blur(4px); pointer-events: none; }
.hch-card.is-fixed .hch-p { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.hch-card.is-fixed .hch-f { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.hch-card.is-fixed .hch-f { color: #fff; }

/* drawings */
.hch-art { width: 100%; height: auto; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(143, 200, 255, .14); overflow: visible; }
.hch-art * { transition: transform .9s var(--ease-spatial), opacity .5s, stroke .5s, fill .5s, stroke-dashoffset 1s var(--ease); }
/* 1: scattered pages straighten into three connected steps */
.art-docs .pg { transform-box: fill-box; transform-origin: center; transform: translate(var(--bx), var(--by)) rotate(var(--br)); }
.art-docs .pg rect { fill: #13224a; stroke: #6f86b8; stroke-width: 1.4; }
.art-docs .pg-l { stroke: #6f86b8; stroke-width: 1.4; fill: none; opacity: .8; }
.art-docs .pg-t { font: 700 9px var(--mono); fill: #f08a6a; }
.art-docs .pg-ok { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.art-docs .fx-line { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; fill: none; }
.is-fixed .art-docs .pg { transform: translate(var(--ax), var(--ay)) rotate(0deg) scale(.9); }
.is-fixed .art-docs .pg rect { fill: #0f2d6b; stroke: #8fc4ff; }
.is-fixed .art-docs .pg-l, .is-fixed .art-docs .pg-t { opacity: 0; }
.is-fixed .art-docs .pg-ok { opacity: 1; }
.is-fixed .art-docs .fx-line { stroke-dashoffset: 0; }
/* 2: diverging paths fold into one straight route */
.art-drift .dr { fill: none; stroke: #9fb3df; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 6; transform-box: view-box; transform-origin: 34px 75px; transform: rotate(var(--r)); opacity: .8; }
.art-drift .dr-start { fill: #fff; }
.art-drift .dr-ends circle { fill: #ff8f8f; opacity: .9; }
.art-drift .dr-goal { fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: 0; }
.art-drift .dr-run { fill: var(--gold); opacity: 0; }
.art-drift .dr-l { font: 500 11px var(--mono); fill: #c9d6f2; }
.art-drift .dr-v { font: 600 11px var(--mono); fill: var(--gold); opacity: 0; }
.is-fixed .art-drift .dr { transform: rotate(0deg); stroke: #fff; stroke-dasharray: none; opacity: 1; }
.is-fixed .art-drift .dr-ends, .is-fixed .art-drift .dr-l { opacity: 0; }
.is-fixed .art-drift .dr-goal, .is-fixed .art-drift .dr-v { opacity: 1; }
.is-fixed .art-drift .dr-run { opacity: 1; animation: drRun 2.4s .6s var(--ease) infinite; }
@keyframes drRun { from { transform: translateX(0); } 85%, to { transform: translateX(252px); } }
/* 3: scattered sources gather around one hub */
.art-nodes .nd { transform: translate(var(--bx), var(--by)); }
.art-nodes .nd circle { fill: #13224a; stroke: #7f95c4; stroke-width: 1.4; }
.art-nodes .nd text { font: 10px var(--font); fill: #c9d6f2; text-anchor: middle; }
.art-nodes .hub circle { fill: #0f2d6b; stroke: var(--gold); stroke-width: 2; }
.art-nodes .hub path { fill: var(--gold); }
.art-nodes .hub { opacity: .25; transform-box: fill-box; transform-origin: center; transform: scale(.6); }
.art-nodes .sp path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.art-nodes .nd-q { font: italic 500 11px var(--font); fill: #9fb0d4; text-anchor: middle; }
.is-fixed .art-nodes .nd { transform: translate(var(--ax), var(--ay)); }
.is-fixed .art-nodes .nd circle { stroke: #8fc4ff; fill: #0f2d6b; }
.is-fixed .art-nodes .hub { opacity: 1; transform: scale(1); }
.is-fixed .art-nodes .sp path { stroke-dashoffset: 0; transition-delay: .35s; }
.is-fixed .art-nodes .nd-q { opacity: 0; }

.hch-foot { margin: 34px 0 0; text-align: center; color: var(--night-ink-2); font-size: 17px; }
.hch-foot .text-link { margin-left: 14px; white-space: nowrap; }
.hch-foot b { color: #fff; }
.hch-foot .text-link { color: var(--cyan-2, #8fe1ff); }

@media (hover: hover) and (pointer: fine) {
  .hch-card:hover { transform: translateY(-4px); }
}
@media (max-width: 1080px) { .hch-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }
@media (max-width: 640px) { .hch-sub { font-size: 16px; } .hch-card h3 { font-size: 20px; } .hch-toggle button { padding: 0 12px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) {
  .hch-art *, .hch-p, .hch-f, .hch-card, .hch-knob, .hch-badge, .hch-feature::after { transition: none !important; }
  .is-fixed .art-drift .dr-run { animation: none; transform: translateX(252px); }
  .hch-card:hover { transform: none; }
}

/* ── SI knowledge infrastructure: tabs over a blueprint field ── */
.hin { position: relative; overflow: hidden; isolation: isolate; background: #f7f9fd; }
.hin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(37, 99, 235, .06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(37, 99, 235, .06) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask: radial-gradient(80% 70% at 50% 40%, #000, transparent 85%); mask: radial-gradient(80% 70% at 50% 40%, #000, transparent 85%); }
.hin-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 780px; margin: 0 auto 30px; }
.hin-pill { margin: 0; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--navy); font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); background: #fff; }
.hin-head h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -.04em; }
.hin-hl { background: linear-gradient(92deg, #2563EB, #0B87B6 60%, #0E8A80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hin-head .section-lead { margin: 0; }

.hin-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-blue); transition: background .3s; }
.hin-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hin-tabs.is-auto [aria-selected="true"] 
.js .hin-copy { display: flex; flex-direction: column; gap: 16px; }
.hin-copy h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.03em; color: var(--navy); }
.hin-copy p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.hin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.js .slat.is-on .hin-copy > * { animation: fadeUp .6s calc(var(--k, 0) * 80ms) var(--ease) both; }
.hin-copy > :nth-child(2) { --k: 1; } .hin-copy > :nth-child(3) { --k: 2; }
.hin-vis { position: relative; min-height: 340px; border-radius: 18px; background: radial-gradient(circle, #dbe5f3 1px, transparent 1.2px) 0 0 / 18px 18px, #f6f9fd; border: 1px solid #e1e9f4; overflow: hidden; }

/* 1: document vs flow */
.vis-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; padding: 22px; }
.vs-doc { position: relative; border-radius: 14px; }
.vs-mark { position: absolute; z-index: 3; top: -10px; left: -10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font: 700 15px var(--font); box-shadow: 0 6px 14px rgba(16, 40, 76, .2); }
.vs-mark.no { background: #e5484d; } .vs-mark.ok { background: #169B62; }
.vs-doc { background: #eef1f6; padding: 18px 14px 12px; }
.vs-pages i { position: absolute; left: calc(14px + var(--o) * 1px); right: calc(14px - var(--o) * 1px); top: calc(18px - var(--o) * 1px); height: 70%; border-radius: 8px; background: #fff; border: 1px solid #d9dfe9; }
.vs-pages i:nth-child(1) { --o: 12; opacity: .5; } .vs-pages i:nth-child(2) { --o: 8; opacity: .7; } .vs-pages i:nth-child(3) { --o: 4; }
.vs-sheet { position: relative; height: 230px; border-radius: 8px; background: #fff; border: 1px solid #d3dae6; box-shadow: 0 8px 20px rgba(16, 40, 76, .08); overflow: hidden; padding: 16px 14px; }
.vs-sheet b { display: block; width: 45%; height: 6px; border-radius: 3px; background: #c4ccd9; margin-bottom: 12px; }
.vs-lines { display: flex; flex-direction: column; gap: 7px; }
.vs-lines i { display: block; height: 3px; border-radius: 2px; background: #d5dbe5; }
.vs-lines i:nth-child(3n) { width: 82%; } .vs-lines i:nth-child(5n) { width: 64%; }
.js .slat.is-on .vs-lines { animation: docScroll 9s linear infinite; }
@keyframes docScroll { to { transform: translateY(-50%); } }
.vs-doc small { display: block; margin-top: 10px; font: 500 11px var(--mono); color: #8a93a6; }
.js .slat.is-on .js .slat.is-on @keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.94); } }

/* 2: governance */
.vis-gov { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px; }
.gv-time { grid-column: 1 / -1; position: relative; display: flex; justify-content: space-between; padding: 0 6px; }
.gv-track { position: absolute; left: 30px; right: 30px; top: 50%; height: 2px; background: #c9d6ea; z-index: 0; }
.gv-v { position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1.5px solid #c9d6ea; font: 600 12.5px var(--mono); color: var(--ink-2); }
.gv-v.now { border-color: var(--ok, #169B62); color: #0e7a4c; background: #e3f4ec; }
.gv-chart { border-radius: 14px; background: #fff; border: 1px solid #e1e9f4; padding: 14px; display: flex; flex-direction: column; }
.gv-chart small { font: 600 12px var(--font); color: var(--navy); }
.gv-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; min-height: 150px; padding-top: 10px; }
.gv-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #F5C35E, #fbe3b1); transform-origin: bottom; }
.js .slat.is-on .gv-bars i { animation: barUp .8s var(--ease-spatial) both; }
.gv-bars i:nth-child(2) { animation-delay: .06s !important; } .gv-bars i:nth-child(3) { animation-delay: .12s !important; } .gv-bars i:nth-child(4) { animation-delay: .18s !important; } .gv-bars i:nth-child(5) { animation-delay: .24s !important; } .gv-bars i:nth-child(6) { animation-delay: .3s !important; } .gv-bars i:nth-child(7) { animation-delay: .36s !important; }
@keyframes barUp { from { transform: scaleY(0); } }
.gv-log { list-style: none; margin: 0; padding: 8px; border-radius: 14px; background: #fff; border: 1.5px solid #cdbff2; box-shadow: 0 14px 30px rgba(16, 40, 76, .1); display: flex; flex-direction: column; gap: 6px; }
.gv-log li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 9px 10px; border-radius: 9px; background: #f6f8fc; font-size: 12.5px; color: var(--ink-2); }
.gv-log time { grid-row: span 2; font: 600 11.5px var(--mono); color: var(--deep); align-self: center; }
.gv-log b { font-weight: 650; color: var(--navy); }
.gv-log u { text-decoration: none; color: var(--blue); }
.js .slat.is-on .gv-log li { animation: slideIn .5s calc(.25s + var(--r, 0) * 140ms) var(--ease-spatial) both; }
.gv-log li:nth-child(2) { --r: 1; } .gv-log li:nth-child(3) { --r: 2; } .gv-log li:nth-child(4) { --r: 3; }
@keyframes slideIn { from { opacity: 0; transform: translateX(18px); } }

/* 3: search that lands on a step */
.vis-search { padding: 30px 26px; display: flex; flex-direction: column; gap: 16px; }
.sr-box { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; border-radius: 14px; background: #fff; border: 2px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 2px #9fc0f0, 0 14px 30px rgba(37, 99, 235, .14); font-size: 20px; color: var(--navy); }
.sr-box svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.sr-caret { width: 2px; height: 24px; background: var(--blue); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sr-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sr-res li { display: grid; gap: 3px; padding: 13px 16px; border-radius: 12px; background: #fff; border: 1px solid #e1e9f4; font-size: 14px; }
.sr-res small { font: 500 11.5px var(--mono); color: var(--ink-3); }
.sr-res b { color: var(--navy); font-weight: 650; }
.sr-res em { font-style: normal; font-size: 12.5px; color: #0e7a4c; }
.sr-res li.hot { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.js .slat.is-on .sr-res li { animation: fadeUp .5s calc(1.4s + var(--r, 0) * 120ms) var(--ease) both; }
.sr-res li:nth-child(2) { --r: 1; opacity: .75; } .sr-res li:nth-child(3) { --r: 2; opacity: .55; }

/* 4: person → procedure → SI */
.vis-link { display: flex; align-items: center; justify-content: center; gap: 0; padding: 24px; }
.lk-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.lk-node small { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.lk-person > svg, .lk-si > svg { width: 92px; height: 92px; padding: 22px; border-radius: 50%; }
.lk-person > svg { background: linear-gradient(180deg, #4c9aff, #2563eb); fill: none; stroke: #fff; stroke-width: 1.6; box-shadow: 0 14px 30px rgba(37, 99, 235, .3); }
.lk-si > svg { background: radial-gradient(circle, #efe9ff, #f6f3ff 60%, transparent 70%); fill: none; stroke: #7c5cff; stroke-width: 1.4; stroke-linejoin: round; }
.lk-core img { width: 132px; height: 132px; filter: drop-shadow(0 16px 30px rgba(16, 40, 76, .25)); }
.lk-wire { position: relative; flex: 1; max-width: 120px; height: 2px; margin: 0 10px 28px; background: repeating-linear-gradient(90deg, #10284C 0 9px, transparent 9px 16px); }
.lk-wire b { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(239, 182, 74, .8); opacity: 0; }
.js .slat.is-on .lk-wire.w1 b { animation: wire 2.2s .4s ease-in-out infinite; }
.js .slat.is-on .lk-wire.w2 b { animation: wire 2.2s 1.5s ease-in-out infinite; }
@keyframes wire { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.js .slat.is-on .lk-si > svg { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(124, 92, 255, .5)); } }

/* 5: one emblem, many teams and sites */
.vis-scale { display: grid; place-items: center; }
.sc-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid; transform: translate(-50%, -50%); }
.sc-ring.r1 { width: 170px; height: 170px; border-color: rgba(37, 99, 235, .35); }
.sc-ring.r2 { width: 250px; height: 250px; border-color: rgba(14, 138, 128, .3); }
.sc-ring.r3 { width: 330px; height: 330px; border-color: rgba(239, 182, 74, .45); }
.sc-core { position: relative; z-index: 2; width: 104px; height: 104px; filter: drop-shadow(0 12px 26px rgba(16, 40, 76, .25)); }
.sc-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.sc-orbit span { position: absolute; left: var(--rad); top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #d6e2f3; box-shadow: 0 8px 18px rgba(16, 40, 76, .1); font: 600 12.5px var(--font); color: var(--navy); white-space: nowrap; }
.o1 { --a: -20deg; --rad: 85px; } .o2 { --a: 140deg; --rad: 85px; }
.o3 { --a: 60deg; --rad: 125px; } .o4 { --a: 210deg; --rad: 125px; }
.o5 { --a: 15deg; --rad: 165px; } .o6 { --a: 255deg; --rad: 165px; }
.js .slat.is-on .sc-orbit { animation: orbit 40s linear infinite; }
.js .slat.is-on .sc-orbit span { animation: counter 40s linear infinite; }
.o3, .o4 { animation-duration: 55s !important; } .o3 span, .o4 span { animation-duration: 55s !important; }
.o5, .o6 { animation-duration: 70s !important; } .o5 span, .o6 span { animation-duration: 70s !important; }
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes orbit { to { transform: rotate(calc(var(--a) + 360deg)); } }
@keyframes counter { to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); } }

@media (max-width: 920px) {
    }
@media (max-width: 640px) {
  .vis-vs, .vis-gov { grid-template-columns: 1fr; }
  .vs-doc { display: none; }
  .vis-gov .gv-chart { display: none; }
  .hin-vis { min-height: 300px; }
  .lk-core img { width: 92px; height: 92px; }
  .lk-person > svg, .lk-si > svg { width: 68px; height: 68px; padding: 16px; }
  .lk-wire { margin-inline: 6px; }
  .vis-scale { min-height: 300px; }
  .sc-ring.r1 { width: 120px; height: 120px; } .sc-ring.r2 { width: 190px; height: 190px; } .sc-ring.r3 { width: 230px; height: 230px; }
  .sc-core { width: 80px; height: 80px; }
  .o1, .o2 { --rad: 60px; } .o3, .o4 { --rad: 95px; } .o5, .o6 { --rad: 112px; }
  .sc-orbit span { font-size: 11px; padding: 4px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hin-ind, .js   .js .slat.is-on *, .js .slat.is-on .hin-copy > *, .sr-caret { animation: none !important; }
}
/* infra panel 1: the guided question card */
.vs-q { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px 18px; border-radius: 16px; background: #fff; border: 1px solid #dfe6f2; box-shadow: 0 16px 34px rgba(16, 40, 76, .12); }
.q-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #fff3cf; border: 1px solid #f3d27a; font: 700 11.5px var(--font); letter-spacing: .07em; text-transform: uppercase; color: #9a5a00; }
.q-badge::before { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.q-text { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: #0f1d36; }
.q-chip { padding: 6px 12px; border-radius: 999px; background: #eaf3ff; border: 1px solid #c6dcfa; font-size: 13px; font-weight: 600; color: var(--blue); }
.q-sel { margin: 4px 0 0; font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #9aa6bd; }
.q-opt { align-self: stretch; padding: 12px 16px; border-radius: 12px; background: #f3f6fd; border: 1.5px solid #e1e7f3; font-size: 15px; color: #3a4762; }
.q-btns { display: flex; gap: 10px; margin-top: 4px; }
.q-btns span { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #dfe5f0; font-size: 13px; font-weight: 600; color: #4a5670; }
.q-btns .q-pf { border: 2px solid #b49cf0; color: #5b32c9; }
.js .slat.is-on .vs-q > * { animation: fadeUp .5s calc(.15s + var(--q, 0) * 90ms) var(--ease) both; }
.q-text { --q: 1; } .q-chip { --q: 2; } .q-sel { --q: 3; } .q-opt { --q: 4; } .q-btns { --q: 5; }
.js .slat.is-on .q-opt.yes { animation: fadeUp .5s .5s var(--ease) both, pick 3.4s 1.6s var(--ease) infinite; }
@keyframes pick { 0%, 15% { background: #f3f6fd; border-color: #e1e7f3; box-shadow: none; } 25%, 85% { background: #e7f0fd; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); color: var(--navy); } 100% { background: #f3f6fd; border-color: #e1e7f3; } }
.vis-vs { align-items: center; }

/* ── Closing band ── */
.hi-close { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.hi-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hi-actions p { margin: 0; color: var(--night-ink-2); font-size: 17px; line-height: 1.6; }
@media (max-width: 1080px) { .hi-close { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .hi-actions .hero-ctas { width: 100%; } .hi-actions .hero-ctas .btn { flex: 1 1 100%; } }


/* ── The challenge, light version (matches the surrounding sections) ── */
.hch { color: var(--ink); background: radial-gradient(60% 70% at 50% 0%, rgba(76, 141, 255, .12), transparent 70%), linear-gradient(180deg, #f7f9fd, #fff); }
.hch::before { background: radial-gradient(circle, rgba(23, 63, 115, .12) 1.2px, transparent 1.6px) 0 0 / 14px 14px; }
.hch-pill { border-color: var(--navy); color: var(--navy); background: #fff; }
.hch-head h2 { color: var(--navy); }
.hch .hx-grad { background: linear-gradient(92deg, #2563EB, #0B87B6 60%, #0E8A80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hch-sub { color: var(--ink-2); }
.hch-toggle { background: #fff; border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(16, 40, 76, .06); }
.hch-toggle button { color: var(--ink-2); }
.hch-card { --edge: var(--line); background: #fff; box-shadow: 0 16px 40px rgba(16, 40, 76, .07); }
.hch-card.is-fixed { --edge: rgba(212, 150, 40, .65); box-shadow: 0 16px 40px rgba(212, 150, 40, .14); }
.hch-n { background: var(--bg-blue); border-color: #c9dbf5; color: var(--deep); }
.hch-k { color: var(--deep); }
.hch-card h3 { color: var(--navy); }
.hch-card > p { color: var(--ink-2); }
.hch-card.is-fixed .hch-f { color: var(--ink); }
.hch-art { background: #f4f8fe; border-color: #e1e9f4; }
.hch-feature { background: linear-gradient(150deg, #2563EB 0%, #1d4fd8 45%, #0e8a80 100%); border-color: transparent; box-shadow: 0 30px 60px rgba(37, 99, 235, .28); }
.hch-feature .hch-n { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); color: #fff; }
.hch-feature .hch-k, .hch-feature h3 { color: #fff; }
.hch-feature > p, .hch-feature.is-fixed .hch-f { color: #eef4ff; }
.hch-feature .hch-art { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
/* drawings on light */
.hch-card:not(.hch-feature) .art-docs .pg rect { fill: #fff; stroke: #9fb2d3; }
.hch-card:not(.hch-feature) .art-docs .pg-l { stroke: #b8c6dd; }
.hch-card:not(.hch-feature) .art-docs .pg-t { fill: #d9603d; }
.hch-card:not(.hch-feature).is-fixed .art-docs .pg rect { fill: #e7f0fd; stroke: var(--blue); }
.hch-card:not(.hch-feature) .art-nodes .nd circle { fill: #fff; stroke: #9fb2d3; }
.hch-card:not(.hch-feature) .art-nodes .nd text { fill: var(--deep); }
.hch-card:not(.hch-feature) .art-nodes .hub circle { fill: #fff; }
.hch-card:not(.hch-feature).is-fixed .art-nodes .nd circle { fill: #e7f0fd; stroke: var(--blue); }
.hch-card:not(.hch-feature) .art-nodes .nd-q { fill: var(--ink-2); }
.hch-foot { color: var(--ink-2); }
.hch-foot b { color: var(--navy); }
.hch-foot .text-link { color: var(--blue); }

/* ── Key capabilities: interactive capability wheel ── */
.hcap { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(50% 60% at 30% 50%, rgba(76, 141, 255, .10), transparent 70%), radial-gradient(40% 50% at 85% 30%, rgba(239, 182, 74, .10), transparent 70%), #fbfcfe; }
.hcap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(23, 63, 115, .09) 1px, transparent 1.3px) 0 0 / 22px 22px; -webkit-mask: radial-gradient(60% 70% at 30% 50%, #000, transparent 80%); mask: radial-gradient(60% 70% at 30% 50%, #000, transparent 80%); }
.hcap-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 780px; margin: 0 auto 26px; }
.hcap-head h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.04em; }
.hcap-head .section-lead { margin: 0; }
.hcap-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.cw { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; }
.cw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cw-orbit { fill: none; stroke: rgba(23, 63, 115, .14); stroke-width: 1.2; stroke-dasharray: 3 7; transform-origin: 260px 260px; animation: haloSpin 80s linear infinite; }
.cw-stage { fill: none; stroke-width: 4; stroke-linecap: round; }
.cw-stage.s0 { stroke: #2563EB; } .cw-stage.s1 { stroke: #0E9F8E; } .cw-stage.s2 { stroke: #e8922b; }
.cw-stage-t { font: 700 11px var(--mono); letter-spacing: .24em; fill: var(--deep); dominant-baseline: middle; }
.cw-seg { fill: #fff; stroke: color-mix(in srgb, var(--c) 35%, #dfe7f2); stroke-width: 1.4; cursor: pointer; transform-origin: 260px 260px; transition: fill .35s, stroke .35s, transform .45s var(--ease-spatial), filter .35s; filter: drop-shadow(0 6px 10px rgba(16, 40, 76, .06)); }
.cw-seg:hover { fill: color-mix(in srgb, var(--c) 10%, #fff); }
.cw-seg.is-on { fill: var(--c); stroke: var(--c); filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--c) 45%, transparent)); }
.cw-beam { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.cw-beam.is-on { opacity: 1; }
.cw-core { fill: #fff; stroke: #e1e9f4; }
.cw-core-ring { fill: none; stroke: rgba(239, 182, 74, .55); stroke-width: 1.5; stroke-dasharray: 2 6; transform-origin: 260px 260px; animation: haloSpin 30s linear infinite reverse; }
.cw-needle { transform-origin: 260px 260px; transform: rotate(var(--rot, 0deg)); transition: transform .7s var(--ease-spatial); }
.cw-needle path { fill: var(--gold); }
.cw-glow { opacity: .9; }
.cw-emblem { position: absolute; left: 50%; top: 50%; width: 30%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 12px 26px rgba(16, 40, 76, .22)); pointer-events: none; }
.cw-btn { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 21%; padding: 4px; border: 0; background: none; border-radius: 12px; font: 650 12.5px/1.2 var(--font); color: var(--navy); text-align: center; cursor: pointer; transition: color .3s, transform .45s var(--ease-spatial); }
.cw-btn svg { width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.cw-btn[aria-selected="true"] { color: #fff; }
.cw-btn[aria-selected="true"] svg { stroke: #fff; }
.cw-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cw-panels { position: relative; display: grid; }
.cw-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 26px; border-radius: 24px; background: #fff; border: 1px solid #e3e9f3; box-shadow: 0 30px 70px rgba(16, 40, 76, .10); position: relative; overflow: hidden; }
.cw-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #5fd0ff)); }
.js .cw-panel { transition: opacity .4s var(--ease), transform .5s var(--ease-spatial), visibility .4s; }
.js .cw-panel:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); pointer-events: none; }
.cw-stage-l { margin: 0; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.cw-panel h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.03em; color: var(--navy); }
.cw-desc { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.cw-feats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cw-feats li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); font-size: 15px; font-weight: 500; color: var(--ink); }
.cw-feats li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.js .cw-panel.is-on .cw-feats li { animation: slideIn .45s calc(.12s + var(--n, 0) * 90ms) var(--ease-spatial) both; }
.cw-feats li:nth-child(2) { --n: 1; } .cw-feats li:nth-child(3) { --n: 2; }
.cw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.hcap .hk-all { margin-top: 16px; justify-self: start; color: var(--blue); }
@media (max-width: 1080px) { .hcap-in { grid-template-columns: 1fr; gap: 28px; } .cw { max-width: 520px; } }
@media (max-width: 640px) {
  .cw-btn { font-size: 10.5px; gap: 3px; width: 22%; }
  .cw-btn svg { width: 20px; height: 20px; }
  .cw-stage-t { font-size: 13px; }
  .cw-panel { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-orbit, .cw-core-ring { animation: none; }
  .cw-seg, .cw-needle, .js .cw-panel { transition: none; }
  .js .cw-panel.is-on .cw-feats li { animation: none; }
}

/* Split-flap board under the hero emblem (light) */
.hx-right { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.hx-right .hx-stage { width: 100%; }
.hx-flap { justify-content: center; margin-top: -18px; color: var(--ink-2); font-size: 16px; font-weight: 500; position: relative; z-index: 4; }
.hx-flap .ft { background: linear-gradient(180deg, #ffffff 50%, #eef3fa 50%); border-color: #d3deee; color: var(--navy); box-shadow: 0 4px 10px rgba(16, 40, 76, .10); }
.hx-flap .ft::after { background: rgba(16, 40, 76, .14); }
.hx-flap .ft.is-blank { opacity: .75; }
@media (max-width: 640px) { .hx-flap { margin-top: -6px; font-size: 14px; } .hx-flap .ft { width: 17px; height: 26px; font-size: 13px; } }

/* ── Under the hood: five expanding slats ── */
.hin-acc { display: flex; gap: 12px; height: 560px; }
.slat { --tint: #2563EB; position: relative; flex: 0 0 84px; min-width: 0; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16, 40, 76, .06); overflow: hidden; transition: flex .7s var(--ease-spatial), box-shadow .4s, border-color .4s; }
.slat:nth-child(2) { --tint: #16a34a; } .slat:nth-child(3) { --tint: #0E9F8E; } .slat:nth-child(4) { --tint: #7c5cff; } .slat:nth-child(5) { --tint: #e8922b; }
.slat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 10%, transparent), transparent 40%); opacity: .9; }
.slat:not(.is-on):hover { flex-basis: 100px; border-color: color-mix(in srgb, var(--tint) 40%, var(--line)); }
.slat.is-on { flex: 1 1 auto; border-color: color-mix(in srgb, var(--tint) 35%, var(--line)); box-shadow: 0 30px 70px rgba(16, 40, 76, .12); }
.slat-h { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 84px; margin: 0; }
.slat-btn { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0; border: 0; background: none; cursor: pointer; color: var(--navy); font: 650 17px var(--font); }
.slat-btn .hin-ic { width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 14%, #fff); }
.slat-btn .hin-ic svg { width: 22px; height: 22px; stroke: var(--tint); }
.slat.is-on .slat-btn .hin-ic { background: var(--tint); }
.slat.is-on .slat-btn .hin-ic svg { stroke: #fff; }
.slat-n { font: 600 12px var(--mono); color: var(--tint); }
.slat-t { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; letter-spacing: -.01em; }
.slat.is-on .slat-t { color: var(--tint); }
.slat-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; border-radius: 20px; }
.slat-body { position: absolute; inset: 0 0 0 84px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; padding: 34px 34px 34px 10px; min-width: 760px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.slat.is-on .slat-body { opacity: 1; visibility: visible; transition: opacity .5s .25s, visibility 0s; }
.slat .hin-copy h4 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.15; letter-spacing: -.03em; color: var(--navy); }
.slat .hin-vis { min-height: 0; height: 100%; max-height: 480px; }
.slat .vis-vs, .slat .vis-gov { align-content: center; }
@media (max-width: 1080px) {
  .hin-acc { flex-direction: column; height: auto; }
  .slat, .slat.is-on, .slat:not(.is-on):hover { flex: none; }
  .slat-h { position: relative; width: auto; }
  .slat-btn { flex-direction: row; height: auto; padding: 16px 18px; gap: 14px; text-align: left; }
  .slat-t { writing-mode: horizontal-tb; transform: none; }
  .slat-body { position: static; display: none; min-width: 0; grid-template-columns: 1fr; padding: 0 18px 22px; opacity: 1; visibility: visible; }
  .slat.is-on .slat-body { display: grid; }
  .slat .hin-vis { height: auto; min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .slat, .slat-body { transition: none !important; } }
/* slat 1: the 40-page PDF tilted behind, the question card in front */
.slat .vis-vs { display: block; position: relative; padding: 0; }
.slat .vs-doc { position: absolute; left: 6%; top: 12%; width: 46%; transform: rotate(-7deg); opacity: .92; }
.slat .vs-doc .vs-sheet { height: 260px; }
.slat .vs-q { position: absolute; right: 6%; top: 50%; width: 60%; transform: translateY(-50%); z-index: 2; }
.slat .vs-q .q-opt { padding: 10px 14px; }
@media (max-width: 1080px) {
  .slat .vis-vs { min-height: 470px; }
  .slat .vs-doc { display: block; width: 52%; left: 4%; top: 8%; }
  .slat .vs-q { width: 72%; right: 4%; }
}
@media (max-width: 640px) { .slat .vs-doc { display: none; } .slat .vs-q { position: relative; width: auto; right: auto; top: auto; transform: none; margin: 14px; } .slat .vis-vs { min-height: 0; } }
/* Closing band: compact */
.is-home #get-started { padding-block: clamp(28px, 3vw, 40px); }
.is-home #get-started .hi-copy { gap: 10px; }
.is-home #get-started h2 { font-size: clamp(26px, 3vw, 38px); }

/* ── Industries: editorial index + live preview ── */
.hind { background: #fff; position: relative; overflow: hidden; }
.hind-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 820px; margin: 0 auto 34px; }
.hind-head h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.04em; }
.hind-head .section-lead { margin: 0; }
.ix-stage { position: relative; }
.ix-glow { position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ixc, #2563EB) 30%, transparent), transparent); filter: blur(10px); transition: background .6s; }
.ix-device { position: relative; z-index: 1; padding: 16px; border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--ixc, #2563EB) 16%, #fff), #fff 55%); border: 1px solid color-mix(in srgb, var(--ixc, #2563EB) 30%, #e3e9f3); box-shadow: 0 40px 80px rgba(16, 40, 76, .14); transition: background .6s, border-color .6s; }
.ix-bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; font-size: 12.5px; letter-spacing: .08em; color: var(--navy); }
.ix-bar img { width: 22px; height: 22px; }
.ix-ind { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--ixc, #2563EB) 35%, #e3e9f3); font: 600 11.5px var(--font); letter-spacing: 0; color: var(--ixc, #2563EB); }
.ix-proc { margin: 0 6px 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ix-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px 18px; border-radius: 18px; background: #fff; border: 1px solid #e3e9f3; box-shadow: 0 16px 34px rgba(16, 40, 76, .10); }
.ix-card.swap { animation: ixSwap .55s var(--ease-spatial); }
@keyframes ixSwap { 0% { opacity: 0; transform: perspective(900px) rotateY(-14deg) translateX(24px); } 100% { opacity: 1; transform: none; } }
.ix-card .q-badge.act { background: #e3f0ff; color: #1d4fa8; border-color: #b9d3f7; }
.ix-q { margin: 2px 0 0; font-size: 19px; font-weight: 700; line-height: 1.32; color: #0f1d36; }
.ix-opts { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.ix-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #f3f6fd; border: 1.5px solid #e1e7f3; font-size: 14.5px; color: #3a4762; }
.ix-opt.pick { background: color-mix(in srgb, var(--ixc, #2563EB) 10%, #fff); border-color: var(--ixc, #2563EB); color: var(--navy); font-weight: 600; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ixc, #2563EB) 14%, transparent); transition: all .3s; }
.ix-card.is-act .ix-opt::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #169B62; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
@media (max-width: 960px) {
    .ix-stage { position: relative; top: 0; order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ix-card.swap { animation: none; } .ix-glow, .ix-device { transition: none; } }
.is-home .hv { padding-top: 20px; }
.hx::after { height: 40px; }
/* Homepage rhythm, tighter again */
.is-home .section { padding-block: clamp(40px, 4.5vw, 64px); }
.is-home .hv { padding-top: 20px; padding-bottom: 20px; }
.is-home .huc { padding-top: 28px; }
.is-home .huc-head { margin-bottom: 22px; }

/* ── Industries: 3D ring of twelve cards ── */
.r3 { --cw: 196px; --ch: 250px; --rad: 430px; }
.r3-stage { position: relative; height: calc(var(--ch) + 90px); perspective: 1500px; perspective-origin: 50% 30%; overflow: hidden; margin: 0 -24px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); touch-action: pan-y; cursor: grab; }
.r3-stage.is-drag { cursor: grabbing; }
.r3-floor { position: absolute; left: 50%; bottom: 18px; width: min(900px, 90%); height: 70px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ixc, #2563EB) 22%, transparent), transparent); filter: blur(6px); transition: background .6s; }
.r3-ring-el { position: absolute; left: 50%; top: 24px; width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2); transform-style: preserve-3d; transform: translateZ(calc(var(--rad) * -1)) rotateY(var(--rot, 0deg)); }
.r3-ring-el.is-anim { transition: transform .8s var(--ease-spatial); }
.r3-card { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: rotateY(calc(var(--i) * 30deg)) translateZ(var(--rad)); transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; }
.r3-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 20px; border-radius: 22px; text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 70%, #0a1530) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 24px 40px color-mix(in srgb, var(--c) 35%, transparent);
  color: #fff; overflow: hidden; opacity: var(--vis, 1); filter: saturate(var(--sat, 1)) brightness(var(--bri, 1)); transition: opacity .4s, filter .4s; }
.r3-face::before { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .28) 50%, transparent 58%); transform: translateX(var(--sheen, -30%)); transition: transform .9s var(--ease); pointer-events: none; }
.r3-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.4px) 0 0 / 12px 12px; -webkit-mask: linear-gradient(180deg, transparent 50%, #000); mask: linear-gradient(180deg, transparent 50%, #000); pointer-events: none; }
.r3-card.is-front .r3-face { --sheen: 30%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 3px rgba(255, 255, 255, .9), 0 30px 50px color-mix(in srgb, var(--c) 55%, transparent); }
.r3-n { font: 600 12px var(--mono); opacity: .8; }
.r3-art { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 6px 0 8px; border-radius: 26px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.r3-art svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2)); }
.r3-ring { position: absolute; inset: -8px; border-radius: 30px; border: 1px dashed rgba(255, 255, 255, .45); }
.r3-card.is-front .r3-ring { animation: haloSpin 14s linear infinite; }
.r3-name { font-size: 19px; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; }
.r3-sub { margin-top: auto; font-size: 12px; line-height: 1.35; opacity: .88; }
.r3-card:focus-visible { outline: none; }
.r3-card:focus-visible .r3-face { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy); }
.r3-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 30px; }
.r3-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; font-size: 18px; color: var(--navy); cursor: pointer; transition: border-color .2s, transform .2s; }
.r3-arrow:hover { border-color: var(--ixc, var(--blue)); color: var(--ixc, var(--blue)); }
.r3-arrow:active { transform: scale(.94); }
.r3-count { margin: 0; min-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.r3-count b { font-size: 17px; color: var(--navy); }
.r3-count span { font: 500 12px var(--mono); color: var(--ink-3); }
.r3-example { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; align-items: center; max-width: 1040px; margin: 0 auto; }
.r3-info { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.r3-k { margin: 0; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ixc, var(--blue)); }
.r3-info h3 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.03em; color: var(--navy); }
.r3-tags, .r3-for { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.r3-for { font-weight: 600; color: var(--ink); }
.r3-info .text-link { color: var(--ixc, var(--blue)); }
@media (max-width: 960px) { .r3-example { grid-template-columns: 1fr; gap: 20px; } .r3 { --rad: 360px; --cw: 176px; --ch: 232px; } }
@media (max-width: 640px) { .r3 { --rad: 290px; --cw: 150px; --ch: 206px; } .r3-art { width: 64px; height: 64px; border-radius: 20px; } .r3-art svg { width: 30px; height: 30px; } .r3-name { font-size: 16px; } .r3-stage { margin: 0 calc(-1 * var(--gutter)); } .r3-count { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .r3-ring-el.is-anim { transition: none; } .r3-card.is-front .r3-ring { animation: none; } .r3-face, .r3-face::before { transition: none; } }