/* Service pages: hero with the service's own visual (.hv), which plays once the zoom has handed over. */

.svc-hero { position: relative; padding: 128px 0 72px; overflow: clip; }
.svc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44vw 50vh at 74% 48%, rgb(28 60 150 / 0.26), transparent 70%);
}
.svc-hero-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: center; min-height: min(680px, calc(100svh - 200px)); }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--mute); transition: color .2s; }
.back:hover { color: var(--ink); }
.back .i-arr { transform: scaleX(-1); }
.svc-hero .h1 { margin-top: 22px; }
.svc-hero .lead { margin-top: 26px; }
.svc-hero .hero-act { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; margin-top: 40px; }
.svc-hero .result { display: flex; gap: 14px; align-items: baseline; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: #dfe6f5; font-size: 16px; max-width: 34em; }
.svc-hero .result .sq { flex: none; width: 9px; height: 9px; background: var(--core); box-shadow: 0 0 10px var(--core); transform: translateY(-1px); }
@media (max-width: 900px) {
  .svc-hero { padding: 88px 0 48px; }
  .svc-hero-in { grid-template-columns: 1fr; min-height: 0; }
  .svc-hero .hv-wrap { order: -1; }
}

/* ------------------------------------------------------- the visuals */
.hv-wrap { position: relative; }
.hv { position: relative; container-type: inline-size; aspect-ratio: 1.12; perspective: 1600px; }
.hv > * { position: absolute; }
.hv .hv-core { position: absolute; }
/* things that assemble around the object */
.hv [data-s] { opacity: 0; transform: translateY(1.6cqi); transition: opacity .55s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--s, 0) * 1ms); }
.hv.play [data-s] { opacity: 1; transform: none; }
.hv-label { font: 500 clamp(10px, 2.2cqi, 14px)/1.25 var(--f-text); color: #d5dbe6; }

/* ---------------------- 01 web: the blue panel unfolds into an app */
.hv-web .hv-core {
  left: 28cqi; top: 38cqi; width: 44cqi; height: 13cqi; border-radius: 1.6cqi;
  transition: left .62s var(--ease-io), top .62s var(--ease-io), width .62s var(--ease-io), height .62s var(--ease-io), border-radius .62s, box-shadow .8s;
}
.hv-web .hv-core::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(158deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.02) 40%), #0d121b;
  border: 1px solid rgb(220 230 255 / 0.18);
  transition: opacity .5s ease .38s;
}
.hv-web.play .hv-core { left: 2cqi; top: 5cqi; width: 96cqi; height: 76cqi; border-radius: 2.2cqi; box-shadow: 0 0 0 1px rgb(120 160 255 / 0.35), 0 3cqi 8cqi -2cqi rgb(0 0 0 / 0.8), 0 0 10cqi -2cqi rgb(var(--core-rgb) / 0.45); }
.hv-web.play .hv-core::before { opacity: 1; }
.hv-web.play .hv-core::after { opacity: 0; transition: opacity .4s .38s; }
.hv-ui { left: 2cqi; top: 5cqi; width: 96cqi; height: 76cqi; }
.hv-ui > * { position: absolute; }
.w-top { left: 0; right: 0; top: 0; height: 6.5cqi; border-bottom: 1px solid rgb(220 230 255 / 0.1); }
.w-top .dots { top: 2.5cqi; }
.w-url { position: absolute; left: 30%; right: 30%; top: 1.7cqi; height: 3cqi; border-radius: 3cqi; background: rgb(255 255 255 / 0.05); }
.w-side { left: 0; top: 6.5cqi; bottom: 0; width: 20cqi; padding: 3cqi 2cqi; display: flex; flex-direction: column; gap: 1.2cqi; border-right: 1px solid rgb(220 230 255 / 0.08); }
.w-logo { width: 7cqi; height: 2.2cqi; border-radius: 0.6cqi; background: rgb(220 228 245 / 0.3); margin-bottom: 2cqi; }
.w-side b { font: 500 clamp(8px, 1.9cqi, 12.5px)/1 var(--f-text); color: #9aa3b2; padding: 1.3cqi 1.4cqi; border-radius: 1cqi; }
.w-side b.on { color: #fff; background: rgb(var(--core-rgb) / 0.22); box-shadow: inset 0 0 0 1px rgb(var(--core-rgb) / 0.55); }
.w-head { left: 24cqi; right: 3cqi; top: 10cqi; height: 5cqi; display: flex; align-items: center; justify-content: space-between; }
.w-head .sk { position: static; width: 20cqi; height: 2cqi; }
.w-btn { font: 600 clamp(8px, 1.8cqi, 12px)/1 var(--f-text); color: #fff; padding: 1.4cqi 2.2cqi; border-radius: 1cqi; background: var(--core-fill); box-shadow: 0 0 2.4cqi rgb(var(--core-rgb) / 0.7); }
.w-kpis { left: 24cqi; right: 3cqi; top: 18.5cqi; height: 14cqi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; }
.w-kpi { position: relative; border-radius: 1.4cqi; border: 1px solid rgb(220 230 255 / 0.1); background: rgb(255 255 255 / 0.025); padding: 2cqi; }
.w-kpi .sk { position: static; display: block; }
.w-kpi .sk.t { width: 50%; }
.w-kpi .sk.b { width: 35%; margin-top: 1.4cqi; height: 2cqi; }
.w-kpi svg { position: absolute; right: 2cqi; bottom: 2cqi; width: 40%; height: 40%; fill: none; stroke: rgb(220 228 245 / 0.35); stroke-width: 1.5; }
.w-kpi.hot svg { stroke: var(--core-hi); filter: drop-shadow(0 0 3px var(--core)); }
.w-table { left: 24cqi; right: 3cqi; top: 36cqi; bottom: 3cqi; border-radius: 1.4cqi; border: 1px solid rgb(220 230 255 / 0.1); overflow: hidden; }
.w-row { display: flex; align-items: center; gap: 3cqi; height: 7.4cqi; padding: 0 2.4cqi; border-bottom: 1px solid rgb(220 230 255 / 0.07); }
.w-row .sk { position: static; }
.w-row .sk:nth-child(1) { width: 14cqi; }
.w-row .sk:nth-child(2) { width: 22cqi; }
.w-pill { margin-left: auto; width: 8cqi; height: 2.6cqi; border-radius: 3cqi; background: rgb(220 228 245 / 0.12); }
.w-row:nth-child(2) .w-pill { background: rgb(var(--core-rgb) / 0.35); box-shadow: inset 0 0 0 1px rgb(var(--core-rgb) / 0.7); }
.w-toast { left: 58cqi; top: 71cqi; width: 38cqi; height: 11cqi; display: flex; align-items: center; gap: 2cqi; padding: 0 2.6cqi; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 3cqi 6cqi -1cqi rgb(0 0 0 / 0.8), 0 0 0 1px rgb(var(--core-rgb) / 0.3); }
.w-check { width: 4.4cqi; height: 4.4cqi; flex: none; border-radius: 50%; background: var(--core-fill); box-shadow: 0 0 2cqi var(--core); display: grid; place-items: center; }
.w-check svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* --------------- 02 ai: the cube turns 3D, inputs and outputs connect */
.hv-ai .ai-stage { inset: 0; transform-style: preserve-3d; }
.hv-ai .hv-core { --s: 18cqi; left: 41cqi; top: 35cqi; border-radius: 0; background: none; box-shadow: none; transition: transform 1s var(--ease-io); }
.hv-ai .hv-core::after { display: none; }
.hv-ai .hv-core > i { box-shadow: inset 0 0 0 1px rgb(170 200 255 / 0.6), 0 0 4cqi rgb(var(--core-rgb) / 0.55); }
.hv-ai.play .hv-core { transform: rotateX(-24deg) rotateY(-38deg); }
.hv-ai.play .ai-stage { animation: float 6s ease-in-out 1.6s infinite; }
@keyframes float { 50% { translate: 0 -1.2cqi; } }
.ai-glow { left: 25cqi; top: 22cqi; width: 50cqi; height: 46cqi; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--core-rgb) / 0.4), transparent); opacity: 0; transition: opacity 1s .3s; }
.hv-ai.play .ai-glow { opacity: 1; }
.ai-wires { inset: 0; width: 100%; height: 100%; overflow: visible; }
.ai-wires path { fill: none; vector-effect: non-scaling-stroke; }
.ai-wires .w-line { stroke: rgb(91 140 255 / 0.55); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .7s var(--ease-io); transition-delay: calc(var(--s, 0) * 1ms); }
.ai-wires .w-pulse { stroke: #a8c2ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 100; stroke-dashoffset: 10; opacity: 0; filter: drop-shadow(0 0 4px #1a5cff); }
.hv-ai.play .ai-wires .w-line { stroke-dashoffset: 0; }
.hv-ai.play .ai-wires .w-pulse { opacity: 1; animation: wire-flow2 2.2s linear infinite; animation-delay: calc(var(--s, 0) * 1ms + 700ms); }
@keyframes wire-flow2 { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -100; } }
.chip { display: flex; align-items: center; gap: 1.6cqi; width: 27cqi; height: 10cqi; padding: 0 2cqi; border-radius: 1.6cqi; }
.chip svg { width: 3.6cqi; height: 3.6cqi; flex: none; fill: none; stroke: #c9d2e3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chip.human { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 1px rgb(var(--core-rgb) / 0.5), 0 0 3cqi -0.5cqi rgb(var(--core-rgb) / 0.6); }
.chip.human svg { stroke: var(--core-hi); }
.ai-in .chip, .ai-out .chip { position: absolute; }
.ai-in, .ai-out { inset: 0; }
.ai-cap { left: 31cqi; right: 31cqi; top: 67cqi; text-align: center; color: var(--mute); font-size: clamp(10px, 2.1cqi, 14px); }

/* ---------------- 03 systems: the blue layer lies down, layers rise from it */
.sys-scene {
  left: 16cqi; top: 23cqi; width: 42cqi; height: 42cqi; transform-style: preserve-3d;
  transition: transform 1.1s var(--ease-io);
}
.sys-scene > * { position: absolute; inset: 0; }
.hv-sys .hv-core { inset: 0; width: auto; height: auto; border-radius: 1.8cqi; }
.hv-sys.play .sys-scene { transform: translateY(12cqi) rotateX(60deg) rotateZ(-45deg); }
.sys-l { border-radius: 1.8cqi; opacity: 0; transform: translateZ(0); transition: transform .9s var(--ease-io), opacity .4s; transition-delay: calc(700ms + var(--k) * 140ms); }
.hv-sys.play .sys-l { opacity: 1; transform: translateZ(calc(var(--k) * 10cqi)); }
.sys-l .cell { position: absolute; border-radius: 1cqi; border: 1px solid rgb(220 230 255 / 0.16); background: rgb(255 255 255 / 0.03); }
.sys-l .cell.on { background: rgb(var(--core-rgb) / 0.35); border-color: rgb(120 160 255 / 0.8); box-shadow: 0 0 2cqi rgb(var(--core-rgb) / 0.6); }
.sys-l .ln { position: absolute; height: 0.8cqi; border-radius: 1cqi; background: rgb(220 228 245 / 0.2); }
.sys-labels { inset: 0; pointer-events: none; }
.sys-labels li { position: absolute; left: 68cqi; display: flex; align-items: center; gap: 1.6cqi; width: 29cqi; }
.sys-labels li::before { content: ""; flex: none; width: 5cqi; height: 1px; background: rgb(220 230 255 / 0.35); }
.sys-labels li.core::before { background: var(--core-hi); box-shadow: 0 0 6px var(--core); }

/* ------------------ 04 data: the blue bar stretches, a dashboard forms */
.d-frame { left: 2cqi; top: 4cqi; width: 96cqi; height: 80cqi; }
.d-frame .dots { top: 2.5cqi; }
.d-kpis { position: absolute; left: 3cqi; right: 3cqi; top: 9cqi; height: 14cqi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; }
.d-kpi { border-radius: 1.4cqi; border: 1px solid rgb(220 230 255 / 0.1); background: rgb(255 255 255 / 0.025); padding: 2cqi 2.2cqi; }
.d-kpi .hv-label { color: var(--mute); }
.d-kpi .sk { position: static; display: block; width: 45%; height: 2.2cqi; margin-top: 1.6cqi; }
.d-chart { left: 7cqi; top: 34cqi; width: 56cqi; height: 44cqi; display: flex; align-items: flex-end; gap: 2.2cqi; padding-bottom: 0; border-bottom: 1px solid rgb(220 230 255 / 0.18); }
.d-chart i { flex: 1; height: 0; border-radius: 0.8cqi 0.8cqi 0 0; background: linear-gradient(rgb(220 228 245 / 0.36), rgb(220 228 245 / 0.12)); transition: height .8s var(--ease); transition-delay: calc(var(--s, 0) * 1ms); }
.hv-data.play .d-chart i { height: var(--h); }
.hv-data .hv-core { position: relative; flex: 1; height: 62%; border-radius: 0.8cqi 0.8cqi 0 0; transition: height .7s var(--ease-io) .05s, box-shadow .6s; }
.hv-data.play .hv-core { height: 94%; }
.d-line { left: 7cqi; top: 34cqi; width: 56cqi; height: 44cqi; overflow: visible; }
.d-line path { fill: none; stroke: #a8c2ff; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease-io) 1.1s; filter: drop-shadow(0 0 3px rgb(var(--core-rgb) / .9)); }
.hv-data.play .d-line path { stroke-dashoffset: 0; }
.d-side { left: 71cqi; top: 36cqi; width: 22cqi; }
.d-donut { position: relative; width: 20cqi; height: 20cqi; margin: 0 auto; }
.d-donut circle { fill: none; stroke-width: 4.5; }
.d-donut .arc { stroke: var(--core-hi); stroke-dasharray: 0 100; transition: stroke-dasharray 1.1s var(--ease-io) 1s; filter: drop-shadow(0 0 2px var(--core)); }
.hv-data.play .d-donut .arc { stroke-dasharray: 64 100; }
.d-legend { margin-top: 4cqi; display: grid; gap: 1.8cqi; }
.d-legend span { display: flex; align-items: center; gap: 1.4cqi; }
.d-legend i { width: 1.6cqi; height: 1.6cqi; border-radius: 0.4cqi; background: rgb(220 228 245 / 0.3); flex: none; }
.d-legend span:first-child i { background: var(--core); box-shadow: 0 0 6px var(--core); }
.d-legend b { height: 1cqi; flex: 1; border-radius: 1cqi; background: rgb(220 228 245 / 0.14); }

/* ------------------------------------------------------ page sections */
.when { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.when li { padding: 30px 28px 30px; }
.when .q { display: block; width: 26px; height: 2px; background: var(--core); box-shadow: 0 0 8px var(--core); margin-bottom: 22px; }
.when h3 { font-size: 21px; }
.when p { margin-top: 10px; color: #b7bec9; font-size: 16px; line-height: 1.55; }

.build { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.build li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 18px; padding: 28px 32px 28px 0; border-bottom: 1px solid var(--line); }
.build li:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
.build .ic { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.02); }
.build .ic i { width: 10px; height: 10px; background: var(--core); box-shadow: 0 0 10px var(--core); }
.build h3 { font-size: 20px; }
.build p { color: #b7bec9; font-size: 16px; line-height: 1.55; }

.change { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.change-h, .change-r { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.change-h { background: var(--panel-2); font-size: 14px; font-weight: 600; color: var(--mute); padding: 16px 32px; }
.change-h span:last-child { color: var(--core-hi); }
.change-r { padding: 24px 32px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.5; }
.change-r .was { color: #8d96a5; }
.change-r .now { color: var(--ink); }
.change-r .to { width: 26px; height: 2px; background: linear-gradient(90deg, rgb(var(--core-rgb) / .2), var(--core)); position: relative; }
.change-r .to::after { content: ""; position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; border-top: 2px solid var(--core); border-right: 2px solid var(--core); transform: rotate(45deg); }

.svc-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.svc-grid.is-3 .svc { grid-template-columns: 1fr; min-height: 0; }
.svc-grid.is-3 .svc .viz { order: -1; width: 86%; margin: 10px auto -10px; }
.svc-grid.is-3 .svc-copy { padding: 0 28px 28px; }
.svc-grid.is-3 .svc-copy p { max-width: none; }
.svc-grid.is-3 .svc-copy .go { margin-top: 20px; }

@media (max-width: 1000px) {
  .when { grid-template-columns: 1fr; gap: 12px; }
  .build { grid-template-columns: 1fr; }
  .build li, .build li:nth-child(even) { padding: 24px 0; border-left: 0; }
  .svc-grid.is-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .change-h { display: none; }
  .change-r { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .change-r .to { transform: rotate(90deg); margin: 4px 0 4px 10px; }
  .svc-grid.is-3 .svc { grid-template-columns: minmax(0, 1fr) 46%; }
  .svc-grid.is-3 .svc .viz { order: 0; width: 118%; margin: 0 0 0 -12%; }
  .svc-grid.is-3 .svc-copy { padding: 22px 0 20px 20px; }
}

/* paused off screen; lite tier keeps the one-time assembly but drops the endless loops */
.hv.is-off *, .hv.is-off { animation-play-state: paused !important; }
.lite .hv-ai.play .ai-stage { animation: none; }
.lite .hv-ai .ai-wires .w-pulse { display: none; }