:root {
  --ink: #020711;
  --panel: #071224;
  --panel-2: #0b1930;
  --blue: #0a84ff;
  --cyan: #4bc6ff;
  --electric: #7aa8ff;
  --text: #f3f8ff;
  --muted: #8ba0b8;
  --line: rgba(139, 192, 255, .16);
  --shadow: 0 24px 70px rgba(0, 5, 17, .46);
  --font-title: Inter, Arial, sans-serif;
  --font-body: "Helvetica Now Text", "Helvetica Now", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --surface-canvas: #020711;
  --surface-base: #050e1d;
  --surface-raised: #09182d;
  --surface-overlay: #0d213b;
  --border-subtle: rgba(123, 189, 255, .12);
  --border-default: rgba(123, 189, 255, .2);
  --border-active: rgba(87, 203, 255, .48);
  --success: #69f7ba;
  --warning: #ffd06b;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --motion-fast: 180ms;
  --motion-base: 260ms;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--text); font-family: var(--font-body); }
button, input, textarea, select { font-family: var(--font-body); }
:is(h1, h2, h3, h4, h5, h6, .brand-lockup strong, .brand-lockup small, footer .brand, .eyebrow, .scene-top > b, .process-head span, .insight-head span, .map-top span, .genius-head p b) { font-family: var(--font-title); font-weight: 700; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--blue); color: white; }

.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; transform: translateY(-160%); border-radius: 8px; background: white; color: var(--ink); font-weight: 800; }
.skip-link:focus { transform: none; }
.site-noise { position: fixed; z-index: 50; inset: 0; pointer-events: none; opacity: .035; background-image: radial-gradient(circle at 30% 20%, white 0 .55px, transparent .7px); background-size: 5px 5px; mix-blend-mode: screen; }

.topbar { position: fixed; z-index: 40; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 clamp(24px, 5vw, 82px); border-bottom: 1px solid rgba(255,255,255,.055); background: linear-gradient(180deg, rgba(2,7,17,.92), rgba(2,7,17,.52)); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; width: max-content; letter-spacing: normal; }
.brand-liquid { position: relative; display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; filter: drop-shadow(0 0 9px rgba(10,132,255,.55)); }
.brand-liquid::before { content: ""; position: absolute; inset: 5px; border-radius: 47% 53% 42% 58%; background: radial-gradient(circle at 32% 28%, rgba(127,225,255,.75), rgba(10,132,255,.22) 38%, transparent 70%); animation: brandLiquidBreath 3.2s ease-in-out infinite; }
.brand-liquid canvas { position: relative; z-index: 2; display: block; width: 36px; height: 36px; }
.brand-liquid > i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #b5f0ff; box-shadow: 0 0 10px #49c8ff; }
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.brand-lockup strong { font-size: 14px; line-height: 1; }
.brand-lockup strong span { color: var(--cyan); }
.brand-lockup small { color: #7895b2; font-size: 9px; font-weight: 800; line-height: 1; text-transform: uppercase; }
@keyframes brandLiquidBreath { 50% { transform: scale(.78) rotate(18deg); opacity: .48; } }
.topbar nav { display: flex; gap: 36px; color: #b7c8dc; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.topbar nav a, .nav-cta { transition: color var(--motion-fast) var(--ease-out-expo), border-color var(--motion-fast) var(--ease-out-expo), background var(--motion-fast) var(--ease-out-expo), transform var(--motion-fast) var(--ease-out-expo); }
.topbar nav a:hover, .topbar nav a:focus-visible { color: white; }
.nav-cta { justify-self: end; padding: 11px 15px; border: 1px solid rgba(75,198,255,.3); border-radius: 8px; background: rgba(10,132,255,.1); color: #dff6ff; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.nav-cta:hover, .nav-cta:focus-visible { transform: translateY(-1px); border-color: var(--cyan); background: rgba(10,132,255,.2); }

.hero { position: relative; display: grid; min-height: 100svh; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); align-items: center; overflow: hidden; padding: 120px clamp(24px, 7vw, 112px) 78px; background: radial-gradient(circle at 72% 42%, rgba(0,110,255,.14), transparent 34%), linear-gradient(180deg, #020711, #030a17); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2,7,17,.96) 0%, rgba(2,7,17,.72) 41%, rgba(2,7,17,.04) 68%); }
.hero-copy { position: relative; z-index: 4; min-width: 0; max-width: 750px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; color: #b8cbe1; font-size: 12px; font-weight: 800; letter-spacing: normal; }
.eyebrow span { width: 31px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 10px var(--blue); }
h1, h2, h3, p { letter-spacing: normal; }
h1 { margin: 0; font-size: clamp(52px, 6.8vw, 112px); font-weight: 800; line-height: .86; text-transform: uppercase; text-shadow: 0 5px 34px rgba(0,0,0,.8); }
h1 em, h2 em { color: #8bd5ff; font-style: normal; }
.hero-lead { max-width: 650px; margin: 30px 0 0; color: #b4c5d8; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.52; text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 19px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; transition: transform var(--motion-base) var(--ease-out-expo), background var(--motion-base) var(--ease-out-expo), border-color var(--motion-base) var(--ease-out-expo), box-shadow var(--motion-base) var(--ease-out-expo); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(.97); }
.button:focus-visible, .topbar a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.button.primary { background: linear-gradient(135deg, var(--blue), #54c6ff); color: #001126; box-shadow: 0 12px 35px rgba(10,132,255,.3); }
.button.ghost { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.045); }

.hero-visual { position: relative; z-index: 2; min-height: 670px; }
#liquid-canvas { position: absolute; width: min(64vw, 870px); height: min(70vw, 760px); top: 50%; left: 47%; transform: translate(-50%, -50%); pointer-events: none; filter: saturate(1.13); }
.liquid-fallback { position: absolute; width: min(48vw, 610px); aspect-ratio: 1; top: 50%; left: 49%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(119,219,255,.86), rgba(10,132,255,.28) 26%, rgba(0,39,100,.08) 58%, transparent 72%); filter: blur(2px); opacity: 0; }
.no-webgl .liquid-fallback { opacity: .75; }
.operation-feed { position: absolute; z-index: 3; right: 0; bottom: 56px; width: min(360px, 72%); padding: 18px; border: 1px solid rgba(75,198,255,.17); border-radius: 14px; background: rgba(4,14,31,.72); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.feed-head, .feed-line { display: grid; align-items: center; }
.feed-head { grid-template-columns: 1fr auto; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: #d7e6f5; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.feed-head i { color: #6fffc1; font-size: 10px; font-style: normal; }
.feed-line { grid-template-columns: 26px 1fr auto; gap: 10px; padding-top: 13px; color: #c5d4e5; font-size: 12px; }
.feed-line b { color: var(--cyan); }
.feed-line small { color: #66819f; }
.feed-line::after { content: ""; grid-column: 2 / 4; height: 1px; margin-top: 11px; background: linear-gradient(90deg, rgba(75,198,255,.15), transparent); }
.hero-foot { position: absolute; z-index: 4; right: clamp(24px, 5vw, 82px); bottom: 26px; left: clamp(24px, 5vw, 82px); display: flex; justify-content: space-between; color: #63809e; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.scroll-hint { display: flex; align-items: center; gap: 10px; }
.scroll-hint i { display: block; width: 28px; height: 1px; overflow: hidden; background: #153658; }
.scroll-hint i::after { content: ""; display: block; width: 12px; height: 1px; background: var(--cyan); animation: scrollLine 1.7s ease-in-out infinite; }
@keyframes scrollLine { from { transform: translateX(-12px); } to { transform: translateX(30px); } }

.proof, .tool-preview { position: relative; z-index: 3; padding: 130px clamp(24px, 7vw, 112px); }
.proof { background: linear-gradient(180deg, #030a17, #061224); }
.section-intro { min-width: 0; max-width: 930px; }
.section-intro h2 { margin: 0; font-size: clamp(44px, 6vw, 96px); font-weight: 800; line-height: .92; text-transform: uppercase; text-shadow: 0 5px 30px rgba(0,0,0,.7); }
.section-intro > p:last-child { max-width: 710px; margin: 28px 0 0; color: var(--muted); font-size: 19px; line-height: 1.55; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 74px; }
.metric-card { position: relative; display: grid; min-width: 0; min-height: 208px; grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: auto 1fr auto; overflow: hidden; padding: 27px 25px 23px 28px; border: 1px solid rgba(91,176,250,.2); border-radius: 18px; background: radial-gradient(circle at 88% 18%, rgba(10,132,255,.14), transparent 32%), linear-gradient(145deg, rgba(11,25,48,.94), rgba(4,14,31,.82)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 20px 50px rgba(0,0,0,.18); isolation: isolate; }
.metric-card::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .52; background-image: linear-gradient(rgba(75,160,245,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(75,160,245,.055) 1px, transparent 1px); background-size: 16px 16px; mask-image: linear-gradient(115deg, transparent 5%, #000 48%, transparent 100%); }
.metric-card::after { content: ""; position: absolute; z-index: -1; width: 150px; height: 150px; top: -75px; right: -64px; border: 1px solid rgba(93,200,255,.11); border-radius: 50%; box-shadow: 0 0 70px rgba(10,132,255,.1); }
.metrics.is-visible .metric-card { animation: metricCardArrive .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--metric-index) * 75ms); }
.metric-card > strong { position: relative; z-index: 3; grid-column: 1; grid-row: 1; align-self: start; color: #8edaff; font-size: clamp(53px, 4.8vw, 76px); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.045em; line-height: .88; text-shadow: 0 0 25px rgba(10,132,255,.28); }
.metric-card.is-counted > strong { animation: metricCountSettle .48s cubic-bezier(.16,1,.3,1) both; }
.metric-card > span { position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 3; align-self: end; margin: 0; padding-right: 104px; color: #c6d7e6; font-size: 12px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.metric-state { position: absolute; z-index: 4; right: 23px; bottom: 21px; display: flex; max-width: 106px; align-items: center; justify-content: flex-end; gap: 5px; color: #6f91ae; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1.08; text-align: right; text-transform: uppercase; }
.metric-state > i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #67ffc1; box-shadow: 0 0 9px #67ffc1; animation: metricStatus 1.8s ease-in-out infinite; }
.metric-visual { position: relative; z-index: 3; display: grid; width: 98px; height: 98px; grid-column: 2; grid-row: 1 / 3; place-items: center; align-self: center; justify-self: end; border: 1px solid rgba(101,194,255,.2); border-radius: 24px; background: radial-gradient(circle at 50% 44%, rgba(10,132,255,.18), rgba(6,25,48,.76) 65%, rgba(3,13,29,.9)); box-shadow: inset 0 0 28px rgba(10,132,255,.08), 0 0 28px rgba(10,132,255,.08); }
.metric-visual::before, .metric-visual::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: rgba(118,220,255,.72); border-style: solid; }
.metric-visual::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.metric-visual::after { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }
.metric-visual svg, .metric-visual canvas { display: block; width: 86px; height: 86px; overflow: visible; }
.metric-liquid { overflow: hidden; border-radius: 50%; background: radial-gradient(circle, rgba(10,132,255,.13), rgba(3,13,29,.82) 68%); box-shadow: inset 0 0 28px rgba(10,132,255,.11), 0 0 28px rgba(10,132,255,.14); }
.metric-liquid::before { width: 78px; height: 78px; top: 9px; left: 9px; border: 1px dashed rgba(112,218,255,.33); border-radius: 50%; animation: metricOrbit 11s linear infinite; }
.metric-liquid::after { width: 58px; height: 18px; right: 19px; bottom: 39px; border: 1px solid rgba(129,228,255,.22); border-radius: 50%; transform: rotate(-14deg); }
.metric-liquid canvas { position: relative; z-index: 2; width: 82px; height: 82px; filter: drop-shadow(0 0 10px rgba(10,132,255,.58)); }
.metric-liquid-orbit { position: absolute; z-index: 3; width: 68px; height: 25px; border: 1px solid rgba(137,230,255,.44); border-radius: 50%; transform: rotate(24deg); }
.metric-liquid-signal { position: absolute; z-index: 4; width: 5px; height: 5px; top: 30px; right: 18px; border-radius: 50%; background: #a5ecff; box-shadow: 0 0 10px #35b8ff; animation: metricSignal 2.4s ease-in-out infinite; }
.metric-route-grid { fill: none; stroke: rgba(80,153,220,.13); stroke-width: 1; }
.metric-route-base, .metric-route-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.metric-route-base { stroke: rgba(66,142,211,.38); stroke-width: 7; }
.metric-route-flow { stroke: #72dcff; stroke-width: 2; stroke-dasharray: 4 10; filter: drop-shadow(0 0 5px #0a84ff); animation: metricRouteFlow 2.3s linear infinite; }
.metric-route-nodes circle { fill: #071a32; stroke: #7ce5ff; stroke-width: 2; filter: drop-shadow(0 0 4px #0a84ff); animation: metricNodePulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.metric-route-nodes circle:nth-child(2) { animation-delay: -.9s; }.metric-route-nodes circle:nth-child(3) { animation-delay: -1.8s; }
.metric-table-back, .metric-table-front { fill: rgba(8,43,79,.58); stroke: rgba(111,207,255,.52); stroke-width: 1.5; }
.metric-table-back path, .metric-table-front path { fill: none; stroke: rgba(95,177,232,.34); stroke-width: 1; }
.metric-table-front { filter: drop-shadow(0 0 6px rgba(10,132,255,.32)); }
.metric-table-scan { fill: none; stroke: #7ce6ff; stroke-width: 2; filter: drop-shadow(0 0 6px #0a84ff); animation: metricTableScan 3.4s cubic-bezier(.16,1,.3,1) infinite; transform-box: fill-box; transform-origin: center; }
.metric-table-sync { fill: #082542; stroke: #6fffc1; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(103,255,193,.7)); animation: metricSyncPulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.metric-table-check { fill: none; stroke: #90ffd2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.metric-version-tree { fill: none; stroke: rgba(104,192,248,.55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 4; animation: metricRouteFlow 3.8s linear infinite; }
.version-node circle:first-child { fill: #071b34; stroke: #73ddff; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(10,132,255,.72)); }
.version-node circle:last-child { fill: #a4ecff; stroke: none; }
.version-node path { fill: none; stroke: #9dffd5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.version-node { animation: metricVersionReady 4.8s cubic-bezier(.16,1,.3,1) infinite; transform-box: fill-box; transform-origin: center; }
.version-left { animation-delay: -.8s; }.version-center { animation-delay: -1.6s; }.version-right { animation-delay: -2.4s; }
@keyframes metricCardArrive { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes metricCountSettle { 0% { transform: translateY(6px); filter: brightness(1); } 55% { transform: translateY(0) scale(1.055); filter: brightness(1.45); } 100% { transform: none; filter: brightness(1); } }
@keyframes metricStatus { 50% { opacity: .38; transform: scale(.72); } }
@keyframes metricOrbit { to { transform: rotate(360deg); } }
@keyframes metricSignal { 50% { opacity: .35; transform: translate(-7px, 16px) scale(.72); } }
@keyframes metricRouteFlow { to { stroke-dashoffset: -28; } }
@keyframes metricNodePulse { 0%,70%,100% { transform: scale(.84); opacity: .62; } 18% { transform: scale(1.16); opacity: 1; } }
@keyframes metricTableScan { 0%,18% { opacity: 0; transform: translateY(-20px); } 32%,72% { opacity: 1; } 82%,100% { opacity: 0; transform: translateY(19px); } }
@keyframes metricSyncPulse { 50% { transform: scale(1.13); filter: drop-shadow(0 0 10px rgba(103,255,193,.9)); } }
@keyframes metricVersionReady { 0%,58%,100% { opacity: .46; transform: scale(.88); } 72%,84% { opacity: 1; transform: scale(1.12); } }

.tool-preview { background: radial-gradient(circle at 80% 30%, rgba(10,132,255,.12), transparent 29%), #020711; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 70px; }
.preview-card { position: relative; min-height: 640px; overflow: hidden; padding: 36px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(10,25,48,.92), rgba(4,13,29,.92)); box-shadow: var(--shadow); }
.preview-card small { color: var(--cyan); font-size: 11px; font-weight: 800; }
.preview-card h3 { margin: 18px 0 12px; font-size: clamp(29px, 3.2vw, 48px); line-height: .98; text-transform: uppercase; }
.preview-card p { max-width: 520px; margin: 0; color: #9db1c7; font-size: 16px; line-height: 1.55; }
.demo { position: relative; width: 100%; height: 320px; margin-bottom: 34px; overflow: hidden; border: 1px solid rgba(120,188,255,.13); border-radius: 14px; background: linear-gradient(160deg, rgba(8,28,55,.86), rgba(2,9,22,.88)); }
.demo-flow { display: flex; align-items: center; justify-content: space-evenly; }
.demo-flow i { position: relative; z-index: 2; width: 45px; height: 45px; border: 1px solid #278fff; border-radius: 12px; background: rgba(10,132,255,.13); box-shadow: 0 0 25px rgba(10,132,255,.14); }
.demo-flow i::after { content: ""; position: absolute; inset: 13px; border: 2px solid #70ceff; border-radius: 4px; }
.demo-flow span { position: absolute; right: 18%; left: 18%; height: 1px; background: #153e6b; }
.demo-flow span::after { content: ""; display: block; width: 18%; height: 1px; background: linear-gradient(90deg, transparent, #78d7ff, transparent); animation: flowX 2.1s linear infinite; }
@keyframes flowX { from { transform: translateX(-100%); } to { transform: translateX(555%); } }
.demo-chart { display: flex; align-items: end; justify-content: center; gap: 13px; padding: 45px 20%; }
.demo-chart i { width: 14%; height: 36%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #62d2ff, #086cf4); animation: chartGrow 3s ease-in-out infinite alternate; transform-origin: bottom; }
.demo-chart i:nth-child(2) { height: 65%; animation-delay: -.8s; }.demo-chart i:nth-child(3) { height: 48%; animation-delay: -1.4s; }.demo-chart i:nth-child(4) { height: 82%; animation-delay: -2.1s; }
@keyframes chartGrow { 50% { transform: scaleY(.72); filter: brightness(.8); } }
.demo-chart span { position: absolute; right: 10%; bottom: 31%; left: 10%; height: 1px; transform: rotate(-13deg); background: #9fe4ff; box-shadow: 0 0 12px #0a84ff; }
.demo-route { background-image: linear-gradient(rgba(31,95,158,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(31,95,158,.12) 1px, transparent 1px); background-size: 24px 24px; }
.demo-route::before { content: ""; position: absolute; width: 66%; height: 54%; top: 21%; left: 17%; border: 2px solid transparent; border-top-color: #4bc6ff; border-right-color: #187ffc; border-radius: 52% 42% 55% 35%; transform: rotate(-10deg); }
.demo-route i, .demo-route b { position: absolute; width: 13px; height: 13px; border: 3px solid var(--cyan); border-radius: 50%; background: #041023; box-shadow: 0 0 14px var(--blue); }
.demo-route i { top: 31%; left: 20%; }.demo-route b { right: 18%; bottom: 26%; }
.demo-route span { position: absolute; width: 21px; height: 13px; top: 42%; left: 30%; border-radius: 3px; background: #8edfff; box-shadow: 0 0 16px #0a84ff; animation: truckMove 4s ease-in-out infinite; }
.demo-route span::after { content: ""; position: absolute; right: 2px; bottom: -4px; left: 2px; height: 4px; border-radius: 3px; background: #1976f3; }
@keyframes truckMove { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(160px,62px) rotate(15deg); } }
.demo-chat { padding: 32px; }
.demo-chat i { display: block; width: 68%; height: 38px; margin-bottom: 14px; border-radius: 8px 8px 8px 2px; background: rgba(255,255,255,.065); }
.demo-chat i:nth-child(2) { width: 55%; margin-left: auto; border-radius: 8px 8px 2px 8px; background: rgba(10,132,255,.28); }
.demo-chat i:nth-child(3) { width: 78%; height: 54px; animation: chatPulse 2.6s ease-in-out infinite; }
.demo-chat span { display: block; width: 30px; height: 7px; margin: 8px 0 0 12px; border-radius: 10px; background: radial-gradient(circle, #8edfff 0 2px, transparent 3px) 0 0 / 10px 7px; animation: typing 1s steps(3) infinite; }
@keyframes chatPulse { 50% { background: rgba(75,198,255,.14); } } @keyframes typing { to { transform: translateX(10px); } }

/* Demonstrações principais: cada cena explica um processo real. */
.demo-process, .demo-insight, .demo-map, .demo-genius { background: radial-gradient(circle at 75% 15%, rgba(10,132,255,.13), transparent 31%), linear-gradient(155deg, #071a34, #020916); }
.demo-process::before, .demo-insight::before, .demo-map::before, .demo-genius::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(75,160,245,.085) 1px, transparent 1px), linear-gradient(90deg, rgba(75,160,245,.085) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 95%); }
.process-head, .insight-head, .map-top, .genius-head { position: relative; z-index: 5; display: flex; height: 49px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid rgba(105,181,255,.13); background: rgba(3,12,26,.54); }
.process-head span, .insight-head span, .map-top span { color: #b8cde2; font-size: 9px; font-weight: 800; }
.process-head strong, .insight-head b, .map-top strong { color: #70ffc1; font-size: 8px; font-weight: 800; }
.process-head strong i, .map-top strong i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #65ffc0; box-shadow: 0 0 10px #65ffc0; animation: liveStatus 1.4s ease-in-out infinite; }
@keyframes liveStatus { 50% { opacity: .35; transform: scale(.65); } }

.process-track { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding: 55px 18px 22px; }
.process-track::before { content: ""; position: absolute; z-index: -1; height: 1px; top: 85px; right: 10%; left: 10%; background: linear-gradient(90deg, rgba(45,111,178,.45), rgba(75,198,255,.68), rgba(45,111,178,.45)); }
.process-track::after { content: ""; position: absolute; z-index: 2; width: 10%; height: 10px; top: 80px; left: 10%; border-radius: 50%; background: radial-gradient(circle at 100% 50%, #d5f8ff 0 4px, rgba(75,198,255,.3) 5px, transparent 13px); filter: drop-shadow(0 0 8px #4bc6ff); animation: processSignal 8.6s var(--ease-standard) infinite; will-change: transform; }
@keyframes processSignal { 0%,5% { transform: translateX(0); } 20% { transform: translateX(190%); } 38% { transform: translateX(385%); } 56% { transform: translateX(580%); } 74%,88% { transform: translateX(780%); } 100% { transform: translateX(0); } }
.process-step { --step-delay: 0s; position: relative; z-index: 3; min-width: 0; text-align: center; animation: processStep 8.6s ease-in-out var(--step-delay) infinite; }
.process-step:nth-child(2) { --step-delay: 1.55s; }.process-step:nth-child(3) { --step-delay: 3.1s; }.process-step:nth-child(4) { --step-delay: 4.65s; }.process-step:nth-child(5) { --step-delay: 6.2s; }
@keyframes processStep { 0%,70%,100% { opacity: .48; } 10%,42% { opacity: 1; transform: translateY(-4px); } }
.process-icon { position: relative; display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 15px; border: 1px solid rgba(62,155,244,.48); border-radius: 15px; background: linear-gradient(145deg, rgba(18,71,126,.88), rgba(4,18,39,.95)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 22px rgba(10,132,255,.13); }
.process-step b, .process-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.process-step b { color: #e7f2ff; font-size: 9px; text-transform: uppercase; }.process-step small { margin-top: 5px; color: #6f8fac; font-size: 8px; }
.step-progress { display: block; height: 2px; overflow: hidden; margin: 11px 8px 0; border-radius: 4px; background: #17375a; }
.step-progress::after { content: ""; display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #0a84ff, #7ce0ff); box-shadow: 0 0 9px #0a84ff; animation: stepFill 8.6s ease-in-out var(--step-delay) infinite; }
@keyframes stepFill { 0%,5%,100% { transform: scaleX(0); } 20%,78% { transform: scaleX(1); } 82% { transform: scaleX(0); transform-origin: right; } }
.process-icon::before, .process-icon::after { content: ""; position: absolute; }
.icon-order::before { width: 23px; height: 28px; border: 2px solid #86ddff; border-radius: 4px; box-shadow: inset 0 -8px rgba(10,132,255,.22); }.icon-order::after { width: 13px; height: 2px; top: 19px; background: #86ddff; box-shadow: 0 6px #438fd1; }
.icon-stock::before { width: 25px; height: 25px; transform: rotate(30deg) skew(-7deg); border: 2px solid #83ddff; border-radius: 3px; }.icon-stock::after { width: 18px; height: 2px; top: 27px; transform: rotate(-30deg); background: #448ecd; box-shadow: 0 -7px #83ddff; }
.icon-finance::before { content: "$"; display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid #83ddff; border-radius: 50%; color: #a9ebff; font-size: 16px; font-weight: 800; }.icon-finance::after { width: 32px; height: 32px; border: 1px solid rgba(10,132,255,.35); border-radius: 50%; }
.icon-fiscal::before { width: 22px; height: 29px; border: 2px solid #83ddff; border-radius: 3px; }.icon-fiscal::after { width: 12px; height: 2px; background: #83ddff; box-shadow: 0 6px #4a91cf, 0 12px #4a91cf; }
.icon-truck::before { width: 28px; height: 15px; border: 2px solid #83ddff; border-radius: 3px 5px 3px 3px; background: linear-gradient(90deg, transparent 63%, rgba(75,198,255,.22) 64%); }.icon-truck::after { width: 6px; height: 6px; top: 35px; left: 16px; border-radius: 50%; background: #83ddff; box-shadow: 17px 0 #83ddff; }
.process-foot { position: absolute; z-index: 4; right: 18px; bottom: 13px; left: 18px; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(85,164,240,.12); color: #627f9e; font-size: 8px; font-weight: 800; }
.process-foot span i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #4bc6ff; box-shadow: 0 0 8px #0a84ff; }.process-foot b { color: #9db4ca; }

.demo-insight { padding-top: 49px; }
.demo-insight .insight-head { position: absolute; top: 0; right: 0; left: 0; }
.insight-kpi { position: absolute; z-index: 3; top: 72px; left: 24px; }
.insight-kpi small, .insight-kpi strong { display: block; }.insight-kpi small { color: #6584a4; font-size: 8px; font-weight: 800; }.insight-kpi strong { margin-top: 7px; color: #e5f3ff; font-size: 31px; line-height: 1; }.insight-kpi em { position: absolute; top: 16px; left: calc(100% + 12px); padding: 5px 7px; border-radius: 6px; background: rgba(77,255,185,.1); color: #70ffc1; font-size: 9px; font-style: normal; font-weight: 800; }
.insight-chart { position: absolute; z-index: 2; top: 72px; right: 24px; display: flex; width: 43%; height: 112px; align-items: flex-end; gap: 7px; border-bottom: 1px solid #234c75; }
.insight-chart > i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #68d5ff, #096df5); transform-origin: bottom; animation: insightBars 3.8s ease-in-out infinite alternate; }.insight-chart > i:nth-child(2n) { animation-delay: -.9s; }.insight-chart > i:nth-child(3n) { animation-delay: -1.7s; }
.insight-chart > span { position: absolute; z-index: 3; right: -3%; bottom: 43%; left: -4%; height: 2px; transform: rotate(-10deg); background: #b3eeff; box-shadow: 0 0 12px #4bc6ff; animation: insightLine 3.2s ease-in-out infinite alternate; }
@keyframes insightBars { to { transform: scaleY(.74); filter: brightness(.8); } } @keyframes insightLine { to { transform: translateY(-9px) rotate(-7deg); } }
.insight-note { position: absolute; z-index: 4; right: 18px; bottom: 17px; left: 18px; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 13px; border: 1px solid rgba(91,181,255,.17); border-radius: 11px; background: rgba(7,25,48,.9); box-shadow: 0 16px 35px rgba(0,0,0,.23); animation: insightNote 5s ease-in-out infinite; }
.insight-note > i { width: 31px; height: 31px; border: 1px solid #4ccaff; border-radius: 10px; background: radial-gradient(circle at 50% 45%, #8fe7ff 0 3px, transparent 4px), radial-gradient(circle at 50% 50%, rgba(10,132,255,.38), transparent 70%); box-shadow: 0 0 16px rgba(10,132,255,.22); }.insight-note p { margin: 0; }.insight-note p b, .insight-note p span { display: block; }.insight-note p b { color: #dcecff; font-size: 10px; }.insight-note p span { margin-top: 3px; color: #87a0b9; font-size: 9px; }.insight-note small { color: #5dbeff; font-size: 8px; font-weight: 800; }
@keyframes insightNote { 50% { transform: translateY(-4px); border-color: rgba(96,211,255,.37); } }

.demo-map { background-color: #061427; background-image: linear-gradient(32deg, transparent 48%, rgba(27,89,147,.11) 49% 51%, transparent 52%), linear-gradient(145deg, transparent 44%, rgba(27,89,147,.1) 45% 47%, transparent 48%); }
.demo-map .map-top { position: absolute; top: 0; right: 0; left: 0; }
.map-block { position: absolute; z-index: 1; border: 1px solid rgba(41,105,165,.14); border-radius: 9px; background: rgba(8,33,62,.7); }.map-block.b1 { width: 23%; height: 22%; top: 22%; left: 8%; transform: rotate(-6deg); }.map-block.b2 { width: 27%; height: 19%; top: 21%; right: 12%; transform: rotate(5deg); }.map-block.b3 { width: 30%; height: 22%; bottom: 13%; left: 11%; transform: rotate(4deg); }.map-block.b4 { width: 21%; height: 25%; right: 9%; bottom: 12%; transform: rotate(-7deg); }
.map-road { position: absolute; z-index: 2; height: 2px; transform-origin: left; background: repeating-linear-gradient(90deg, #2e6f9f 0 7px, transparent 7px 13px); }.map-road.r1 { width: 24%; top: 70%; left: 17%; transform: rotate(-29deg); }.map-road.r2 { width: 24%; top: 58%; left: 37%; transform: rotate(11deg); }.map-road.r3 { width: 22%; top: 61%; left: 58%; transform: rotate(-37deg); }.map-road.r4 { width: 13%; top: 45%; left: 73%; transform: rotate(-12deg); }
.map-origin, .map-destination { position: absolute; z-index: 4; width: 13px; height: 13px; border: 3px solid #64d7ff; border-radius: 50%; background: #06152a; box-shadow: 0 0 14px #0a84ff; }.map-origin { top: 72%; left: 15%; }.map-destination { top: 37%; right: 12%; }.map-destination::after { content: "CLIENTE"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); color: #82a7c7; font-size: 7px; font-style: normal; font-weight: 800; }
.moving-truck { position: absolute; z-index: 6; width: 34px; height: 20px; top: 66%; left: 18%; animation: deliveryDrive 8s cubic-bezier(.45,.03,.35,1) infinite; filter: drop-shadow(0 0 10px rgba(10,132,255,.8)); }.moving-truck > i { position: absolute; width: 28px; height: 15px; border: 2px solid #a3eaff; border-radius: 3px 7px 3px 3px; background: linear-gradient(90deg, #1575d4 0 63%, #6dd7ff 64%); }.moving-truck > b, .moving-truck > span { position: absolute; width: 6px; height: 6px; bottom: 0; border-radius: 50%; background: #d5f7ff; }.moving-truck > b { left: 4px; }.moving-truck > span { right: 3px; }
@keyframes deliveryDrive { 0%,7% { top: 66%; left: 18%; transform: rotate(-24deg); } 28% { top: 49%; left: 37%; transform: rotate(10deg); } 53% { top: 55%; left: 58%; transform: rotate(-33deg); } 76%,91% { top: 34%; left: 80%; transform: rotate(-8deg); } 100% { top: 66%; left: 18%; transform: rotate(-24deg); } }
.delivery-bubble { position: absolute; z-index: 7; top: 71px; right: 17px; width: 205px; padding: 12px 13px; border: 1px solid rgba(96,207,255,.31); border-radius: 11px 11px 3px 11px; background: rgba(4,18,36,.94); box-shadow: 0 16px 35px rgba(0,0,0,.3), 0 0 24px rgba(10,132,255,.1); animation: deliveryBubble 8s ease-in-out infinite; }.delivery-bubble small, .delivery-bubble strong, .delivery-bubble span { display: block; }.delivery-bubble small { color: #5da7dd; font-size: 7px; font-weight: 800; }.delivery-bubble strong { margin-top: 6px; color: #e1f3ff; font-size: 13px; }.delivery-bubble span { margin-top: 4px; color: #7d9bb7; font-size: 8px; }
@keyframes deliveryBubble { 0%,55%,100% { opacity: .58; transform: translateY(5px) scale(.98); } 65%,91% { opacity: 1; transform: none; } }
.map-foot { position: absolute; z-index: 5; right: 16px; bottom: 12px; left: 16px; display: flex; justify-content: space-between; padding: 11px 12px; border: 1px solid rgba(72,151,221,.16); border-radius: 8px; background: rgba(3,13,27,.77); color: #7894af; font-size: 8px; }.map-foot b { color: #8ee4ff; }

.delivery-canvas { position: absolute; z-index: 1; top: 49px; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: calc(100% - 49px); }
.delivery-stop { position: absolute; z-index: 5; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.delivery-stop.stop-depot { top: 74%; left: 13%; }.delivery-stop.stop-checkpoint { top: 54%; left: 34%; }.delivery-stop.stop-notice { top: 59%; left: 62%; }.delivery-stop.stop-client { top: 31%; left: 84%; }
.delivery-stop > i { position: relative; z-index: 2; display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #66d9ff; border-radius: 50%; background: #061427; box-shadow: 0 0 0 5px rgba(10,132,255,.09), 0 0 17px rgba(10,132,255,.5); font-style: normal; transition: background .35s ease, border-color .35s ease, transform .35s ease; }
.delivery-stop > i b { color: #a8ebff; font-size: 8px; }
.delivery-stop > div { position: absolute; width: 182px; left: 18px; bottom: 17px; padding: 10px 11px; border: 1px solid rgba(101,205,255,.32); border-radius: 10px 10px 10px 3px; background: rgba(4,18,36,.96); box-shadow: 0 16px 34px rgba(0,0,0,.34), 0 0 24px rgba(10,132,255,.09); opacity: 0; transform: translateY(7px) scale(.97); transform-origin: bottom left; transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.delivery-stop.stop-notice > div, .delivery-stop.stop-client > div { right: 18px; left: auto; border-radius: 10px 10px 3px 10px; transform-origin: bottom right; }
.delivery-stop > div small, .delivery-stop > div strong, .delivery-stop > div span { display: block; }.delivery-stop > div small { color: #54b7ef; font-size: 7px; font-weight: 800; }.delivery-stop > div strong { margin-top: 4px; color: #e2f3ff; font-size: 11px; }.delivery-stop > div span { margin-top: 3px; color: #7896b2; font-size: 7px; line-height: 1.35; }
.delivery-stop.is-current > i { transform: scale(1.15); border-color: #b7f1ff; background: #0a70c8; box-shadow: 0 0 0 7px rgba(10,132,255,.13), 0 0 25px rgba(75,198,255,.68); animation: deliveryStopPulse 1.8s ease-in-out infinite; }
.delivery-stop.is-current > div { opacity: 1; transform: none; }
.delivery-stop.is-complete > i { border-color: #68ffc0; background: #0a513f; box-shadow: 0 0 0 5px rgba(104,255,192,.07), 0 0 14px rgba(104,255,192,.28); }.delivery-stop.is-complete > i b { color: #91ffd2; }
@keyframes deliveryStopPulse { 50% { box-shadow: 0 0 0 11px rgba(10,132,255,0), 0 0 28px rgba(75,198,255,.78); } }
.delivery-trip { position: absolute; z-index: 7; right: 13px; bottom: 10px; left: 13px; display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border: 1px solid rgba(87,171,248,.17); border-radius: 8px; background: rgba(2,11,24,.88); box-shadow: 0 10px 24px rgba(0,0,0,.24); color: #718eaa; font-size: 7px; font-weight: 700; }.delivery-trip span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #68ffc0; box-shadow: 0 0 8px #68ffc0; }.delivery-trip b { color: #8fe5ff; font-size: 8px; }

.demo-genius { padding-top: 49px; }
.demo-genius .genius-head { position: absolute; top: 0; right: 0; left: 0; }
.genius-head > div { display: flex; align-items: center; gap: 9px; }.genius-head p { margin: 0; }.genius-head p b, .genius-head p small { display: block; }.genius-head p b { color: #ddecfa; font-size: 10px; }.genius-head p small { margin-top: 3px; color: #6986a2; font-size: 7px; }.genius-head p small i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: #65ffc0; box-shadow: 0 0 8px #65ffc0; }.genius-head > em { padding: 5px 7px; border: 1px solid rgba(75,198,255,.16); border-radius: 6px; color: #67bfff; font-size: 7px; font-style: normal; font-weight: 800; }
.genius-mini-liquid { position: relative; display: block; width: 26px; height: 26px; border-radius: 48% 52% 43% 57%; background: radial-gradient(circle at 35% 29%, #9ceaff 0 2px, #0a84ff 22%, #073262 64%, transparent 67%); box-shadow: 0 0 12px rgba(10,132,255,.37); animation: miniLiquid 3.1s ease-in-out infinite; }.genius-mini-liquid i { position: absolute; inset: 4px; border: 1px dotted #a2ebff; border-radius: 54% 46% 55% 45%; animation: ringTurn 4s linear infinite; }
@keyframes miniLiquid { 50% { transform: scale(.82) rotate(23deg); border-radius: 60% 40% 48% 52%; } }
.chat-thread { position: relative; z-index: 3; padding: 17px 18px 40px; }
.chat-user { width: 62%; margin-left: auto; padding: 10px 12px; border-radius: 12px 12px 3px 12px; background: linear-gradient(135deg, rgba(10,132,255,.42), rgba(10,74,149,.35)); animation: chatUserScene 9s ease-in-out -7.6s infinite; }.chat-user small, .chat-answer > small { color: #7abff2; font-size: 7px; font-weight: 800; }.chat-user p, .chat-answer > p { margin: 5px 0 0; color: #d9e9f7; font-size: 10px; line-height: 1.35; }
.chat-answer { width: 81%; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(81,167,248,.14); border-radius: 12px 12px 12px 3px; background: rgba(7,26,49,.9); animation: chatAnswerScene 9s ease-in-out -6.4s infinite; }.chat-answer > p b { color: #72ffc0; }
@keyframes chatUserScene { 0%,8%,96%,100% { opacity: .72; transform: translateY(4px); } 16%,88% { opacity: 1; transform: none; } } @keyframes chatAnswerScene { 0%,14%,96%,100% { opacity: .68; transform: translateY(5px); } 23%,89% { opacity: 1; transform: none; } }
.chat-chart { margin-top: 9px; padding: 9px; border: 1px solid rgba(74,155,229,.14); border-radius: 8px; background: rgba(2,10,22,.62); }.chat-chart span { display: grid; grid-template-columns: 52px 1fr 54px; gap: 7px; align-items: center; margin-top: 6px; }.chat-chart span:first-child { margin-top: 0; }.chat-chart b, .chat-chart em { color: #7895b1; font-size: 7px; font-style: normal; font-weight: 700; }.chat-chart em { text-align: right; }.chat-chart i { height: 5px; overflow: hidden; border-radius: 5px; background: #173757; }.chat-chart i::after { content: ""; display: block; width: var(--w); height: 100%; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #0a84ff, #77dcff); animation: chatBarScene 9s ease-in-out -5.2s infinite; }
@keyframes chatBarScene { 0%,19%,100% { transform: scaleX(.12); } 32%,90% { transform: scaleX(1); } }
.genius-foot { position: absolute; z-index: 4; right: 18px; bottom: 11px; left: 18px; display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(80,159,231,.12); color: #63809d; font-size: 7px; }.genius-foot span i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 2px; background: #2f92e4; }.genius-foot b { color: #7598b8; }
.atlas { position: relative; z-index: 3; padding: 138px clamp(24px, 7vw, 112px); background: radial-gradient(circle at 14% 15%, rgba(10,132,255,.13), transparent 25%), linear-gradient(180deg, #061224, #020711 13%, #020711); }
.atlas-heading { display: grid; grid-template-columns: 1.2fr .65fr; gap: 8vw; align-items: end; }
.atlas-heading h2 { margin: 0; font-size: clamp(46px, 6.4vw, 101px); font-weight: 800; line-height: .9; text-transform: uppercase; text-shadow: 0 5px 34px rgba(0,0,0,.78); }
.atlas-heading > p { margin: 0 0 6px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.atlas-nav { position: relative; z-index: 5; display: flex; gap: 8px; overflow-x: auto; margin: 72px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: rgba(3,10,23,.82); box-shadow: var(--shadow); backdrop-filter: blur(18px); scrollbar-width: none; }
.atlas-nav::-webkit-scrollbar { display: none; }
.atlas-nav a { flex: 1 0 auto; padding: 12px 15px; border-radius: 8px; color: #89a1bb; font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; transition: color var(--motion-fast) var(--ease-out-expo), background var(--motion-fast) var(--ease-out-expo), box-shadow var(--motion-fast) var(--ease-out-expo); }
.atlas-nav a:hover, .atlas-nav a:focus-visible, .atlas-nav a.is-current { background: rgba(10,132,255,.13); color: white; box-shadow: inset 0 0 0 1px rgba(91,210,255,.16); outline: none; }
.tool-chapter { padding: 134px 0 24px; scroll-margin-top: 132px; }
.chapter-head { display: grid; min-width: 0; grid-template-columns: 90px minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 46px; }
.chapter-head > * { min-width: 0; }
.chapter-head > span { padding-top: 8px; color: var(--cyan); font-size: 11px; font-weight: 800; }
.chapter-head h3 { margin: 0; font-size: clamp(38px, 4.5vw, 70px); font-weight: 800; line-height: .96; text-transform: uppercase; }
.chapter-head p { max-width: 700px; margin: 17px 0 0; color: var(--muted); font-size: 17px; line-height: 1.58; }
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tool-card { position: relative; min-height: 530px; overflow: hidden; border: 1px solid rgba(120,188,255,.14); border-radius: 20px; background: linear-gradient(150deg, rgba(10,26,49,.92), rgba(3,11,25,.97)); box-shadow: 0 20px 55px rgba(0,5,18,.28); content-visibility: auto; contain-intrinsic-size: 600px; }
.tool-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.035), transparent 34%); }
.tool-copy { position: relative; z-index: 2; padding: 30px 32px 34px; }
.tool-copy small { color: var(--cyan); font-size: 10px; font-weight: 800; }
.tool-copy h4 { margin: 13px 0 12px; font-size: clamp(31px, 3vw, 48px); line-height: .98; text-transform: uppercase; }
.tool-copy > p { max-width: 620px; margin: 0; color: #a7b9cd; font-size: 16px; line-height: 1.56; }
.tool-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.tool-copy li { padding: 8px 10px; border: 1px solid rgba(75,198,255,.16); border-radius: 999px; background: rgba(10,132,255,.07); color: #c9d8e9; font-size: 11px; font-weight: 700; }
.live-demo { position: relative; height: 250px; overflow: hidden; border-bottom: 1px solid rgba(120,188,255,.11); background: radial-gradient(circle at 55% 55%, rgba(10,132,255,.15), transparent 36%), linear-gradient(155deg, #081b35, #030a18); }
.live-demo::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(63,128,196,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(63,128,196,.11) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.live-demo::after { content: "LIVE"; position: absolute; top: 18px; right: 19px; padding-left: 13px; color: #89a4c1; font-size: 8px; font-weight: 800; }
.live-demo::after { background: radial-gradient(circle at 3px 50%, #5dffba 0 3px, transparent 4px); }
.live-demo > small { position: absolute; z-index: 5; top: 19px; left: 20px; color: #6f91b2; font-size: 8px; font-weight: 800; }
.live-demo.demo-flow .demo-nodes i::before { content: attr(data-label); position: absolute; width: 70px; top: 54px; left: 50%; transform: translateX(-50%); color: #7390ad; font-size: 7px; font-style: normal; font-weight: 800; text-align: center; text-transform: uppercase; }
.demo-warehouse > em, .demo-approval > em, .demo-mobile > em, .demo-route .route-bubble { position: absolute; z-index: 5; margin: 0; padding: 6px 8px; border: 1px solid rgba(75,198,255,.19); border-radius: 7px; background: rgba(4,18,35,.84); color: #88badc; font-size: 7px; font-style: normal; font-weight: 800; }
.demo-warehouse > em { top: 20px; left: 20px; }.demo-approval > em { top: 20px; left: 20px; }.demo-mobile > em { right: 19px; bottom: 19px; }.demo-route .route-bubble { top: 24px; right: 19px; animation: deliveryBubble 5s ease-in-out infinite; }
.mini-chat { position: relative; z-index: 3; padding: 40px 28px 24px; }
.mini-chat > p { width: 67%; margin: 0 0 12px auto; padding: 11px 13px; border: 1px solid rgba(82,177,255,.18); border-radius: 10px 10px 3px 10px; background: rgba(10,132,255,.43); color: #e8f5ff; font-size: 10px; line-height: 1.35; animation: miniChatUser 8s ease-in-out -6.8s infinite; }
.mini-chat > div { width: 86%; padding: 12px 13px; border: 1px solid rgba(75,198,255,.24); border-radius: 10px 10px 10px 3px; background: rgba(8,36,68,.97); box-shadow: 0 14px 30px rgba(0,0,0,.22); animation: miniChatAnswer 8s ease-in-out -5.5s infinite; }
.mini-chat > div span { display: block; margin-bottom: 10px; color: #deedf9; font-size: 10px; }.mini-chat > div span b { color: #70ffc1; }
.mini-chat > div i { display: block; height: 7px; margin-top: 7px; overflow: hidden; border-radius: 6px; background: #173858; }.mini-chat > div i::after { content: ""; display: block; width: var(--w); height: 100%; transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #0a84ff, #73dbff); animation: chatBarScene 8s ease-in-out -4.4s infinite; }
@keyframes miniChatUser { 0%,8%,96%,100% { opacity: .84; transform: translateY(3px); } 16%,88% { opacity: 1; transform: none; } }
@keyframes miniChatAnswer { 0%,14%,96%,100% { opacity: .8; transform: translateY(4px); } 23%,89% { opacity: 1; transform: none; } }

.demo-flow .demo-nodes, .demo-neural .neural { position: absolute; inset: 0; }
.demo-flow .demo-nodes i { position: absolute; z-index: 2; width: 44px; height: 44px; top: 104px; border: 1px solid #368fff; border-radius: 12px; background: #0a1d3a; box-shadow: 0 0 22px rgba(10,132,255,.22); }
.demo-flow .demo-nodes i:nth-child(1) { left: 9%; }.demo-flow .demo-nodes i:nth-child(2) { left: 31%; }.demo-flow .demo-nodes i:nth-child(3) { left: 56%; }.demo-flow .demo-nodes i:nth-child(4) { right: 8%; }
.demo-flow .demo-nodes b { position: absolute; top: 125px; right: 11%; left: 12%; height: 1px; background: #1b4d7f; }
.demo-flow .signal { position: absolute; z-index: 3; width: 9px; height: 9px; top: 121px; left: 11%; border-radius: 50%; background: #a4ecff; box-shadow: 0 0 16px #4bc6ff; animation: liveFlow 3.5s ease-in-out infinite; }
@keyframes liveFlow { 0% { transform: translateX(0); } 50%,100% { transform: translateX(min(34vw, 500px)); } }

.demo-cash { padding: 70px 11%; }
.demo-cash strong, .demo-progress strong, .demo-score strong, .demo-dashboard strong { position: relative; z-index: 2; color: #9ee6ff; font-size: clamp(34px, 4vw, 59px); line-height: 1; text-shadow: 0 0 25px rgba(10,132,255,.36); }
.demo-cash i { display: block; position: relative; z-index: 2; width: 75%; height: 5px; margin-top: 14px; border-radius: 6px; background: rgba(145,199,255,.13); }
.demo-cash i:nth-of-type(2) { width: 54%; }.demo-cash i:nth-of-type(3) { width: 67%; }
.demo-cash span { position: absolute; width: 90px; height: 90px; right: 12%; bottom: 36px; border: 1px solid #2d8fff; border-radius: 50%; box-shadow: 0 0 24px rgba(10,132,255,.26); animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse { 50% { transform: scale(.82); opacity: .42; } }

.demo-catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: center; padding: 58px 10%; }
.demo-catalog i { position: relative; z-index: 2; height: 112px; border: 1px solid rgba(92,174,255,.24); border-radius: 12px; background: linear-gradient(160deg, rgba(27,99,178,.33), rgba(4,17,38,.8)); animation: catalogSelect 4s ease-in-out infinite; }
.demo-catalog i::before { content: ""; position: absolute; width: 38px; height: 38px; top: 19px; left: 50%; transform: translateX(-50%); border-radius: 8px; background: #1a467a; box-shadow: inset 0 0 15px rgba(75,198,255,.22); }
.demo-catalog i::after { content: ""; position: absolute; right: 12px; bottom: 17px; left: 12px; height: 4px; border-radius: 4px; background: #2e6ca7; }
.demo-catalog i:nth-child(2) { animation-delay: -1s; }.demo-catalog i:nth-child(3) { animation-delay: -2s; }.demo-catalog i:nth-child(4) { animation-delay: -3s; }
@keyframes catalogSelect { 0%,20% { border-color: #73d8ff; transform: translateY(-7px); box-shadow: 0 8px 28px rgba(10,132,255,.28); } 25%,100% { transform: none; } }

.demo-people i { position: absolute; z-index: 2; width: 58px; height: 58px; top: 92px; border: 1px solid #267fd7; border-radius: 50%; background: radial-gradient(circle at 50% 32%, #5ecfff 0 7px, transparent 8px), radial-gradient(ellipse at 50% 82%, #1869c3 0 17px, transparent 18px), #07172e; }
.demo-people i:nth-child(1) { left: 14%; }.demo-people i:nth-child(2) { left: 38%; }.demo-people i:nth-child(3) { left: 62%; }
.demo-people b { position: absolute; z-index: 3; right: 13%; bottom: 49px; display: grid; width: 70px; height: 70px; place-items: center; border-radius: 50%; background: #8be3ff; color: #031125; font-size: 23px; box-shadow: 0 0 24px rgba(75,198,255,.38); animation: scoreFloat 2.6s ease-in-out infinite; }
@keyframes scoreFloat { 50% { transform: translateY(-9px); } }

.demo-chart .bars, .demo-dashboard .dash-bars, .demo-forecast .forecast-bars { position: absolute; z-index: 2; right: 12%; bottom: 45px; left: 12%; display: flex; height: 140px; align-items: flex-end; gap: 10px; }
.demo-chart .bars i, .demo-dashboard .dash-bars i, .demo-forecast .forecast-bars i { flex: 1; height: 32%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #71d9ff, #086efa); transform-origin: bottom; animation: demoBars 3.2s ease-in-out infinite alternate; }
.demo-chart .bars i:nth-child(2), .demo-dashboard .dash-bars i:nth-child(2), .demo-forecast .forecast-bars i:nth-child(2) { height: 56%; animation-delay: -.5s; }.demo-chart .bars i:nth-child(3), .demo-dashboard .dash-bars i:nth-child(3), .demo-forecast .forecast-bars i:nth-child(3) { height: 43%; animation-delay: -1s; }.demo-chart .bars i:nth-child(4), .demo-dashboard .dash-bars i:nth-child(4), .demo-forecast .forecast-bars i:nth-child(4) { height: 76%; animation-delay: -1.5s; }.demo-chart .bars i:nth-child(5), .demo-dashboard .dash-bars i:nth-child(5), .demo-forecast .forecast-bars i:nth-child(5) { height: 92%; animation-delay: -2s; }
.demo-chart .chart-line, .demo-forecast > span { position: absolute; z-index: 3; right: 10%; bottom: 99px; left: 10%; height: 2px; transform: rotate(-12deg); background: #b1edff; box-shadow: 0 0 13px #2e9fff; animation: lineDrift 3s ease-in-out infinite alternate; }
@keyframes demoBars { 50% { transform: scaleY(.68); filter: brightness(.72); } } @keyframes lineDrift { to { transform: translateY(-13px) rotate(-8deg); } }

.demo-stock { display: flex; align-items: flex-end; gap: 12px; padding: 52px 12%; }
.demo-stock i { position: relative; z-index: 2; flex: 1; height: 40%; border: 1px solid rgba(75,198,255,.25); border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, rgba(75,198,255,.65), rgba(10,84,190,.35)); animation: stockLevel 3.3s ease-in-out infinite alternate; transform-origin: bottom; }
.demo-stock i:nth-child(2) { height: 76%; animation-delay: -.8s; }.demo-stock i:nth-child(3) { height: 54%; animation-delay: -1.6s; }.demo-stock i:nth-child(4) { height: 88%; animation-delay: -2.4s; }
@keyframes stockLevel { to { transform: scaleY(.72); } }

.demo-warehouse .shelves { position: absolute; z-index: 2; inset: 50px 13%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-warehouse .shelves i { border: 1px solid rgba(79,167,255,.24); border-radius: 6px; background: linear-gradient(135deg, #124b85, #081a33); animation: boxBlink 3s ease-in-out infinite; }
.demo-warehouse .shelves i:nth-child(2n) { animation-delay: -1.5s; }
.demo-warehouse > span { position: absolute; z-index: 3; width: 38px; height: 27px; bottom: 36px; left: 15%; border-radius: 4px; background: #8be2ff; box-shadow: 0 0 16px #0a84ff; animation: forkMove 4.2s ease-in-out infinite; }
@keyframes boxBlink { 50% { background: #155da7; } } @keyframes forkMove { 50% { transform: translateX(min(30vw, 420px)); } }

.demo-progress { display: grid; place-items: center; }
.demo-progress strong { z-index: 3; }
.demo-progress i, .demo-progress span { position: absolute; width: 150px; height: 150px; border-radius: 50%; }
.demo-progress i { border: 16px solid rgba(52,118,188,.22); }
.demo-progress span { border: 16px solid transparent; border-top-color: #70d8ff; border-right-color: #0a84ff; transform: rotate(34deg); animation: ringTurn 3.8s linear infinite; }
@keyframes ringTurn { to { transform: rotate(394deg); } }

.demo-score { padding: 69px 12%; }
.demo-score i { display: block; position: relative; z-index: 2; width: 72%; height: 5px; margin-top: 17px; border-radius: 5px; background: linear-gradient(90deg, #0a84ff 72%, rgba(90,155,220,.18) 72%); }
.demo-score i:nth-of-type(2) { width: 61%; background: linear-gradient(90deg, #4bc6ff 84%, rgba(90,155,220,.18) 84%); }.demo-score i:nth-of-type(3) { width: 81%; background: linear-gradient(90deg, #367ef5 61%, rgba(90,155,220,.18) 61%); }

.demo-document { display: grid; place-items: center; }
.demo-document .paper { position: relative; z-index: 2; width: 150px; height: 175px; padding: 38px 22px; border: 1px solid #2c7cc5; border-radius: 9px; background: #0b1c33; box-shadow: 0 20px 40px rgba(0,0,0,.34); transform: rotate(-3deg); }
.demo-document .paper i { display: block; height: 5px; margin-bottom: 13px; border-radius: 4px; background: #326eaa; }.demo-document .paper i:nth-child(2) { width: 68%; }.demo-document .paper i:nth-child(4) { width: 76%; }
.demo-document > span { position: absolute; z-index: 3; width: 180px; height: 2px; top: 48px; background: #9beaff; box-shadow: 0 0 14px #4bc6ff; animation: scanDown 3s ease-in-out infinite; }
@keyframes scanDown { 50%,100% { transform: translateY(150px); } }

.demo-approval { display: flex; align-items: center; justify-content: center; gap: 24px; }
.demo-approval i { position: relative; z-index: 2; width: 70px; height: 70px; border: 1px solid #2369ad; border-radius: 50%; background: #081a32; }
.demo-approval i::after { content: ""; position: absolute; width: 17px; height: 9px; top: 25px; left: 24px; transform: rotate(-45deg); border-bottom: 3px solid #7ce0ff; border-left: 3px solid #7ce0ff; }
.demo-approval i:nth-child(2) { animation: approvalPulse 2.8s ease-in-out infinite; }.demo-approval i:nth-child(3)::after { border-color: #5d7794; }
@keyframes approvalPulse { 50% { border-color: #83e2ff; box-shadow: 0 0 28px rgba(75,198,255,.36); transform: scale(1.08); } }

.demo-route .route-path { position: absolute; z-index: 2; width: 68%; height: 54%; top: 23%; left: 15%; border: 2px solid transparent; border-top-color: #4bc6ff; border-right-color: #147bf4; border-radius: 48% 58% 35% 56%; transform: rotate(-9deg); }
.demo-route > i, .demo-route > b { position: absolute; z-index: 3; width: 15px; height: 15px; border: 3px solid #64d6ff; border-radius: 50%; background: #06152a; box-shadow: 0 0 13px #0a84ff; }.demo-route > i { top: 31%; left: 18%; }.demo-route > b { right: 15%; bottom: 24%; }
.demo-route > span { position: absolute; z-index: 4; width: 27px; height: 17px; top: 38%; left: 26%; border-radius: 4px; background: #9ce9ff; box-shadow: 0 0 18px #0a84ff; animation: routeMove 4s ease-in-out infinite; }
@keyframes routeMove { 50%,100% { transform: translate(min(27vw, 390px), 75px) rotate(13deg); } }

.demo-mobile { display: grid; place-items: center; }
.demo-mobile .phone { position: relative; z-index: 2; width: 122px; height: 205px; padding: 45px 16px; border: 2px solid #3c8bd9; border-radius: 22px; background: #061326; box-shadow: 0 20px 45px rgba(0,0,0,.42); }
.demo-mobile .phone::before { content: ""; position: absolute; width: 38px; height: 4px; top: 13px; left: 41px; border-radius: 5px; background: #225890; }
.demo-mobile .phone i { display: block; height: 7px; margin-bottom: 14px; border-radius: 7px; background: #245e99; }.demo-mobile .phone i:nth-child(2) { width: 65%; }.demo-mobile .phone i:nth-child(3) { width: 82%; }
.demo-mobile .phone span { display: block; height: 37px; margin-top: 22px; border-radius: 8px; background: linear-gradient(135deg, #0a84ff, #69d6ff); animation: mobileTap 2.7s ease-in-out infinite; }
@keyframes mobileTap { 50% { transform: scale(.92); filter: brightness(1.25); } }

.demo-dashboard { padding: 52px 10%; }
.demo-dashboard .dash-bars { right: 10%; bottom: 34px; left: 10%; height: 102px; }.demo-dashboard .dash-bars i { border-radius: 3px 3px 0 0; }
.demo-data > i { position: absolute; z-index: 2; width: 45px; height: 45px; border: 1px solid #2379c8; border-radius: 10px; background: #0a1c34; }.demo-data > i:nth-child(1) { top: 42px; left: 15%; }.demo-data > i:nth-child(2) { bottom: 39px; left: 20%; }.demo-data > i:nth-child(3) { top: 96px; right: 15%; }
.demo-data > b { position: absolute; z-index: 3; width: 88px; height: 88px; top: 82px; left: calc(50% - 44px); border: 1px solid #6cd9ff; border-radius: 50%; background: radial-gradient(circle, #157cd7, #07172d 67%); box-shadow: 0 0 35px rgba(10,132,255,.35); animation: livePulse 2.5s ease-in-out infinite; }
.demo-data > span { position: absolute; z-index: 2; inset: 63px 20%; border: 1px dashed rgba(75,198,255,.35); border-radius: 50%; animation: ringTurn 8s linear infinite; }
.demo-forecast .forecast-bars { height: 125px; }.demo-forecast .forecast-bars i { opacity: .68; }

.demo-ai .neural { animation: neuralTurn 14s linear infinite; }
.demo-ai .neural i { position: absolute; z-index: 3; width: 25px; height: 25px; border: 1px solid #66d4ff; border-radius: 50%; background: #0a5aaa; box-shadow: 0 0 17px #0a84ff; }.demo-ai .neural i:nth-child(1) { top: 44px; left: 24%; }.demo-ai .neural i:nth-child(2) { top: 102px; right: 22%; }.demo-ai .neural i:nth-child(3) { bottom: 37px; left: 32%; }.demo-ai .neural i:nth-child(4) { bottom: 35px; right: 28%; }
.demo-ai .neural b { position: absolute; width: 74px; height: 74px; top: 89px; left: calc(50% - 37px); border: 1px solid #81dfff; border-radius: 50%; background: radial-gradient(circle, #258bdc, #07162b 68%); box-shadow: 0 0 32px rgba(75,198,255,.34); }
.demo-ai > span { position: absolute; inset: 46px 25%; border: 1px solid rgba(58,147,237,.25); border-radius: 50%; }
@keyframes neuralTurn { to { transform: rotate(360deg); } }

.tool-card .demo-chat { padding: 49px 10%; }
.tool-card .demo-chat i { display: block; position: relative; z-index: 2; width: 67%; height: 34px; margin-bottom: 12px; border-radius: 9px 9px 9px 2px; background: rgba(101,175,251,.13); }.tool-card .demo-chat i:nth-child(2) { width: 52%; margin-left: auto; border-radius: 9px 9px 2px 9px; background: rgba(10,132,255,.32); }.tool-card .demo-chat i:nth-child(3) { width: 79%; }
.tool-card .demo-chat span { display: block; position: relative; z-index: 2; width: 33px; height: 7px; margin: 10px 0 0 12px; border-radius: 9px; background: radial-gradient(circle, #8edfff 0 2px, transparent 3px) 0 0 / 11px 7px; animation: typing 1s steps(3) infinite; }

.demo-gateway, .demo-comm { display: flex; align-items: center; justify-content: center; gap: 28px; }
.demo-gateway i, .demo-comm i { position: relative; z-index: 2; display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid #2679c7; border-radius: 16px; background: #0a1c35; color: #a9ddff; font-size: 11px; font-style: normal; font-weight: 800; box-shadow: 0 0 23px rgba(10,132,255,.15); }
.demo-gateway b, .demo-comm b { position: absolute; z-index: 1; right: 14%; left: 14%; height: 1px; background: #285f96; }
.demo-gateway span, .demo-comm span { position: absolute; z-index: 3; width: 10px; height: 10px; left: 19%; border-radius: 50%; background: #a1ebff; box-shadow: 0 0 14px #4bc6ff; animation: packetMove 3.4s linear infinite; }
@keyframes packetMove { to { transform: translateX(min(29vw, 430px)); } }

.demo-agent { display: grid; place-items: center; }
.demo-agent .agent-core { position: relative; z-index: 3; width: 86px; height: 86px; border: 1px solid #72d8ff; border-radius: 26px; background: radial-gradient(circle, #177fd6, #07162c 70%); box-shadow: 0 0 32px rgba(10,132,255,.36); animation: agentBreathe 2.8s ease-in-out infinite; }
.demo-agent > i { position: absolute; z-index: 2; width: 43px; height: 43px; border: 1px solid #2e7abf; border-radius: 11px; background: #081b34; }.demo-agent > i:nth-of-type(1) { top: 39px; left: 18%; }.demo-agent > i:nth-of-type(2) { right: 17%; bottom: 37px; }.demo-agent > i:nth-of-type(3) { right: 22%; top: 37px; }
.demo-agent > span { position: absolute; width: 192px; height: 192px; border: 1px dashed rgba(75,198,255,.24); border-radius: 50%; animation: ringTurn 11s linear infinite; }
@keyframes agentBreathe { 50% { transform: scale(1.09) rotate(4deg); } }

.demo-table { padding: 53px 12%; }
.demo-table i, .demo-ops i { display: block; position: relative; z-index: 2; height: 25px; margin-bottom: 9px; border: 1px solid rgba(83,158,231,.2); border-radius: 6px; background: linear-gradient(90deg, rgba(10,132,255,.28) 24%, rgba(34,94,151,.12) 24%); }
.demo-table span, .demo-ops span { position: absolute; z-index: 3; right: 10%; left: 10%; height: 34px; top: 54px; border: 1px solid #5acfff; border-radius: 7px; box-shadow: 0 0 19px rgba(10,132,255,.23); animation: tableScan 3.2s ease-in-out infinite; }
@keyframes tableScan { 50%,100% { transform: translateY(99px); } }

.demo-platform { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 10px; perspective: 600px; }
.demo-platform i { position: relative; z-index: 2; width: 48%; height: 28px; transform: rotateX(55deg); border: 1px solid #347fc4; border-radius: 8px; background: linear-gradient(90deg, #0b2f58, #176cad, #0b2f58); box-shadow: 0 10px 25px rgba(0,0,0,.27); animation: layerFloat 3.3s ease-in-out infinite; }.demo-platform i:nth-child(2) { animation-delay: -.6s; }.demo-platform i:nth-child(3) { animation-delay: -1.2s; }.demo-platform i:nth-child(4) { animation-delay: -1.8s; }
@keyframes layerFloat { 50% { transform: translateY(-5px) rotateX(55deg); filter: brightness(1.3); } }

.demo-help { padding: 58px 12%; }
.demo-help strong { position: absolute; z-index: 3; top: 62px; left: 14%; display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid #60d2ff; border-radius: 50%; color: #8ee5ff; font-size: 44px; box-shadow: 0 0 28px rgba(10,132,255,.28); }
.demo-help i { display: block; position: relative; z-index: 2; width: 54%; height: 42px; margin: 0 0 12px auto; border-radius: 10px; background: rgba(56,132,207,.17); }.demo-help i:nth-of-type(2) { width: 43%; }

.demo-ops { padding: 50px 12%; }.demo-ops i { padding-left: 50px; background: radial-gradient(circle at 22px 50%, #62ffbd 0 4px, transparent 5px), rgba(24,78,131,.13); }.demo-ops i:nth-child(3) { background: radial-gradient(circle at 22px 50%, #ffc35a 0 4px, transparent 5px), rgba(24,78,131,.13); }

.demo-shield { display: grid; place-items: center; }
.demo-shield i { position: absolute; z-index: 2; border: 1px solid rgba(78,193,255,.45); border-radius: 50%; animation: shieldWave 3.1s ease-out infinite; }.demo-shield i:nth-child(1) { width: 62px; height: 62px; }.demo-shield i:nth-child(2) { width: 112px; height: 112px; animation-delay: -1s; }.demo-shield i:nth-child(3) { width: 170px; height: 170px; animation-delay: -2s; }
.demo-shield span { position: relative; z-index: 3; width: 64px; height: 79px; border-radius: 35px 35px 42px 42px; background: linear-gradient(155deg, #63d5ff, #076ff5); clip-path: polygon(50% 0, 96% 18%, 86% 76%, 50% 100%, 14% 76%, 4% 18%); box-shadow: 0 0 30px rgba(10,132,255,.38); }
@keyframes shieldWave { 60%,100% { transform: scale(1.2); opacity: .1; } }

.demo-identity { display: grid; place-items: center; }
.demo-identity strong { position: relative; z-index: 3; display: grid; width: 88px; height: 88px; place-items: center; border: 1px solid #63d5ff; border-radius: 50%; background: #0a2b50; color: #8fffc6; font-size: 38px; box-shadow: 0 0 27px rgba(10,132,255,.3); }
.demo-identity i { position: absolute; width: 132px; height: 132px; border: 1px solid rgba(62,154,241,.3); border-radius: 50%; animation: identityOrbit 5s linear infinite; }.demo-identity i:nth-of-type(2) { width: 178px; height: 178px; animation-direction: reverse; }
@keyframes identityOrbit { to { transform: rotate(360deg); border-radius: 38%; } }

.demo-api { padding: 54px 12%; }
.demo-api i { display: flex; position: relative; z-index: 2; height: 35px; align-items: center; margin-bottom: 10px; padding: 0 14px; border: 1px solid rgba(80,173,255,.22); border-radius: 7px; background: rgba(10,40,73,.72); color: #87dfff; font-size: 10px; font-style: normal; font-weight: 800; }
.demo-api i:nth-child(2) { width: 82%; }.demo-api i:nth-child(3) { width: 65%; color: #74ffc1; }
.demo-api span { position: absolute; z-index: 3; width: 9px; height: 9px; top: 67px; left: 14%; border-radius: 50%; background: white; box-shadow: 0 0 13px #4bc6ff; animation: apiMove 2.4s ease-in-out infinite; }
@keyframes apiMove { 50%,100% { transform: translateX(min(34vw, 500px)) translateY(90px); } }

/* Tool atlas: bespoke operational mini interfaces */
.scene-demo { isolation: isolate; background: radial-gradient(circle at 86% 12%, rgba(39,154,255,.12), transparent 34%), linear-gradient(145deg, #07182d, #030a17 72%); font-variant-numeric: tabular-nums; }
.scene-demo *, .scene-demo *::before, .scene-demo *::after { animation-play-state: paused !important; }
.tool-card.is-scene-active .scene-demo *, .tool-card.is-scene-active .scene-demo *::before, .tool-card.is-scene-active .scene-demo *::after { animation-play-state: running !important; }
.scene-demo::after { display: none; }
.scene-demo::before { z-index: 0; opacity: .42; background-size: 22px 22px; }
.scene-shell { position: absolute; z-index: 2; inset: 13px; display: grid; grid-template-rows: 29px 1fr 27px; overflow: hidden; border: 1px solid rgba(102,181,255,.16); border-radius: 13px; background: rgba(4,15,31,.72); box-shadow: 0 20px 45px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(4px); }
.scene-top, .scene-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.scene-top { border-bottom: 1px solid rgba(100,178,255,.12); background: rgba(11,37,68,.46); }
.scene-top > b { overflow: hidden; color: #c9ddf1; font-size: 7px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.scene-top > span { display: flex; align-items: center; gap: 5px; color: #6d8aa5; font-size: 6px; font-weight: 800; }
.scene-top > span i { width: 5px; height: 5px; border-radius: 50%; background: #63ffc0; box-shadow: 0 0 8px #63ffc0; animation: sceneStatus 1.8s ease-in-out infinite; }
.scene-foot { border-top: 1px solid rgba(100,178,255,.1); color: #607d99; font-size: 6px; font-weight: 800; }
.scene-foot b { color: #8bcff5; font-size: 6.5px; }
.scene-body { position: relative; min-width: 0; overflow: hidden; padding: 11px 13px; }
.scene-rows { display: grid; gap: 5px; }
.scene-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; min-height: 18px; padding: 0 7px; border: 1px solid rgba(88,159,226,.09); border-radius: 5px; background: rgba(12,39,70,.28); color: #7894af; font-size: 6.5px; }
.scene-row b { color: #c7d9e9; font-size: 6.5px; }.scene-row.positive b { color: #70ffc1; }.scene-row.attention b { color: #ffd477; }
.scene-progress { display: block; height: 4px; overflow: hidden; border-radius: 9px; background: rgba(73,137,200,.18); }
.scene-progress i { display: block; width: var(--value); height: 100%; transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #097cf2, #63d8ff); box-shadow: 0 0 10px rgba(75,198,255,.45); animation: sceneFill 5.6s cubic-bezier(.22,.72,.2,1) infinite; }
.scene-progress.cyan i { background: linear-gradient(90deg, #24a9ff, #72e9ff); }
.scene-bars { display: flex; height: 54px; align-items: flex-end; gap: 5px; }
.scene-bars > span { display: grid; flex: 1; height: 100%; grid-template-rows: 1fr 10px; align-items: end; text-align: center; }
.scene-bars > span > i { display: block; height: var(--bar); transform-origin: bottom; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #65daff, #087af1); box-shadow: 0 0 11px rgba(10,132,255,.17); animation: sceneBar 4.8s ease-in-out infinite; }
.scene-bars > span:nth-child(2n) i { animation-delay: -.6s; }.scene-bars > span:nth-child(3n) i { animation-delay: -1.2s; }
.scene-bars small { align-self: end; color: #5c7894; font-size: 5.5px; }
.scene-alert { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid rgba(255,190,70,.18); border-radius: 7px; background: rgba(98,67,11,.14); }
.scene-alert > i { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 6px; background: rgba(255,184,55,.15); color: #ffd377; font-size: 9px; font-style: normal; font-weight: 900; }
.scene-alert p { min-width: 0; margin: 0; }.scene-alert p b, .scene-alert p small { display: block; }.scene-alert p b { color: #e2edf7; font-size: 7px; }.scene-alert p small { margin-top: 2px; color: #7892aa; font-size: 5.5px; }
.scene-alert.positive { border-color: rgba(100,255,193,.17); background: rgba(22,111,77,.13); }.scene-alert.positive > i { background: rgba(100,255,193,.13); color: #70ffc1; }
@keyframes sceneStatus { 50% { opacity: .28; transform: scale(.75); } }
@keyframes sceneFill { 0%,12% { transform: scaleX(.08); } 36%,86% { transform: scaleX(1); } 100% { transform: scaleX(.08); } }
@keyframes sceneBar { 0%,100% { transform: scaleY(.8); filter: brightness(.78); } 50% { transform: scaleY(1); filter: brightness(1.18); } }

.scene-customer { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }.scene-customer span { color: #7692ad; font-size: 6px; font-weight: 800; }.scene-customer b { color: #dff2ff; font-size: 15px; }
.scene-pipeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; padding-top: 8px; }.scene-pipeline::before { content: ""; position: absolute; height: 1px; top: 14px; right: 12%; left: 12%; background: #173c61; }
.scene-pipeline > span { position: relative; z-index: 2; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; color: #607d98; font-size: 5.5px; font-weight: 700; }.scene-pipeline > span i { width: 12px; height: 12px; border: 2px solid #254d73; border-radius: 50%; background: #071628; }.scene-pipeline > span.done i { border-color: #65ffc0; background: #167252; }.scene-pipeline > span.active { color: #9cddff; }.scene-pipeline > span.active i { border-color: #72ddff; background: #0876dc; box-shadow: 0 0 12px rgba(75,198,255,.5); animation: sceneStatus 1.8s infinite; }

.scene-checkout { display: grid; height: 100%; grid-template-columns: 1.25fr .75fr; gap: 9px; }.checkout-items { display: grid; align-content: start; gap: 6px; }.checkout-items > span { display: grid; min-width: 0; grid-template-columns: 26px 1fr; grid-template-rows: 1fr 1fr; column-gap: 7px; padding: 6px; border: 1px solid rgba(88,160,228,.12); border-radius: 7px; background: rgba(13,42,75,.3); }.checkout-items > span > i { grid-row: 1 / 3; }.checkout-items b { overflow: hidden; align-self: end; color: #d4e4f2; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap; }.checkout-items small { color: #6c88a4; font-size: 5.5px; }.checkout-total { display: flex; flex-direction: column; justify-content: center; padding: 8px; border: 1px solid rgba(81,185,255,.2); border-radius: 8px; background: linear-gradient(145deg, rgba(11,94,158,.2), rgba(6,27,51,.6)); }.checkout-total small { color: #6d8ca7; font-size: 5.5px; }.checkout-total strong { margin: 5px 0 9px; color: #e3f5ff; font-size: clamp(12px,1.4vw,21px); line-height: .95; }.checkout-total em { padding: 5px; border-radius: 5px; background: rgba(75,255,181,.12); color: #72ffc0; font-size: 5.5px; font-style: normal; font-weight: 800; text-align: center; animation: paymentSuccess 5s ease-in-out infinite; }
@keyframes paymentSuccess { 0%,15% { opacity: .35; transform: translateY(3px); } 28%,90% { opacity: 1; transform: none; } }

.scene-search { display: grid; grid-template-columns: 12px 1fr auto; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid rgba(96,175,247,.16); border-radius: 7px; background: rgba(5,21,41,.8); }.scene-search > i { width: 8px; height: 8px; border: 1px solid #5caee8; border-radius: 50%; }.scene-search > i::after { content: ""; display: block; width: 4px; height: 1px; transform: translate(6px,7px) rotate(45deg); background: #5caee8; }.scene-search > span { overflow: hidden; color: #6c88a3; font-size: 5.5px; white-space: nowrap; }.scene-search > b { color: #517190; font-size: 5px; }
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 8px; }.product-grid article { min-width: 0; padding: 6px; border: 1px solid rgba(96,175,247,.11); border-radius: 7px; background: linear-gradient(160deg, rgba(18,61,101,.42), rgba(4,17,35,.62)); animation: productFocus 8s ease-in-out infinite; }.product-grid article:nth-child(2) { animation-delay: -2s; }.product-grid article:nth-child(3) { animation-delay: -4s; }.product-grid article:nth-child(4) { animation-delay: -6s; }.product-grid article > i, .checkout-items i { display: block; position: relative; height: 29px; margin-bottom: 6px; border-radius: 5px; background-color: #122f4d; }.product-grid article b, .product-grid article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-grid article b { color: #cfdfed; font-size: 5.5px; }.product-grid article small { margin-top: 2px; color: #5e7a96; font-size: 4.8px; }
.product-cement { background: linear-gradient(145deg,#536879,#21364c)!important; clip-path: polygon(12% 10%,88% 10%,100% 88%,0 88%); }.product-cement::after { content: "CP II"; position: absolute; top: 10px; right: 0; left: 0; color: #d2e3ec; font-size: 4px; font-style: normal; font-weight: 900; text-align:center; }.product-brick { background: repeating-linear-gradient(0deg,#ad5d42 0 8px,#6d3429 8px 10px)!important; }.product-brick::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 16px,#6d3429 16px 18px); }.product-tile { background: linear-gradient(135deg,#b7d8e4,#6f94a9)!important; }.product-tile::after { content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.45); background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.25) 49% 51%,transparent 52%); }.product-bag { background:linear-gradient(145deg,#4d86a7,#214d6a)!important; clip-path:polygon(10% 14%,90% 14%,100% 91%,0 91%); }.product-bag::after { content:"ACIII"; position:absolute; top:9px; right:0; left:0; color:#d9f3ff; font-size:4px; font-style:normal; font-weight:900; text-align:center; }
@keyframes productFocus { 0%,18% { border-color: rgba(104,220,255,.62); transform: translateY(-2px); box-shadow:0 8px 17px rgba(10,132,255,.16); } 24%,100% { transform:none; } }

.crm-overview, .commercial-summary, .partner-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 7px; }
.crm-overview > span, .commercial-summary > span, .partner-summary > span { display: flex; min-width: 0; align-items: center; justify-content: space-between; padding: 6px 8px; border: 1px solid rgba(91,174,248,.14); border-radius: 7px; background: rgba(11,42,75,.42); }
.crm-overview small, .commercial-summary small, .partner-summary small { color: #718ea9; font-size: 8px; font-weight: 800; }
.crm-overview strong, .commercial-summary strong, .partner-summary strong { color: #d8efff; font-size: 13px; white-space: nowrap; }
.crm-overview .is-hot { border-color: rgba(102,255,193,.29); background: linear-gradient(135deg, rgba(25,118,82,.24), rgba(8,44,60,.5)); box-shadow: inset 0 0 19px rgba(87,255,189,.05); }
.crm-overview .is-hot small, .crm-overview .is-hot strong { color: #79ffc5; }
.crm-moments { display: grid; gap: 4px; }
.crm-moment { position: relative; display: grid; min-height: 34px; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; align-items: center; overflow: hidden; padding: 4px 7px; border: 1px solid rgba(88,161,228,.1); border-radius: 7px; background: rgba(7,29,55,.54); }
.crm-moment::after { content: ""; position: absolute; width: 46%; height: 100%; top: 0; left: -55%; background: linear-gradient(90deg, transparent, rgba(106,221,255,.1), transparent); animation: crmScan 6s ease-in-out infinite; }
.crm-moment:nth-child(2)::after { animation-delay: -2s; }.crm-moment:nth-child(3)::after { animation-delay: -4s; }
.crm-avatar, .partner-avatar { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(103,205,255,.36); border-radius: 50%; background: linear-gradient(145deg, #116bb8, #082e59); color: #d4f3ff; font-size: 8px; font-weight: 900; }
.crm-moment p, .partner-entry p { min-width: 0; margin: 0; }.crm-moment p b, .crm-moment p small, .partner-entry p b, .partner-entry p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-moment p b, .partner-entry p b { color: #d6e9f7; font-size: 9px; }.crm-moment p small, .partner-entry p small { margin-top: 1px; color: #7894ad; font-size: 8px; }
.crm-moment > em, .partner-entry > em { padding: 4px 6px; border-radius: 5px; background: rgba(51,112,164,.18); color: #8acff3; font-size: 8px; font-style: normal; font-weight: 900; white-space: nowrap; }
.crm-moment.is-now { border-color: rgba(105,255,195,.32); background: linear-gradient(90deg, rgba(18,103,73,.2), rgba(7,34,57,.64)); box-shadow: 0 0 18px rgba(68,255,183,.06); animation: crmNow 3s ease-in-out infinite; }.crm-moment.is-now > em { background: rgba(63,235,165,.14); color: #79ffc4; }
.crm-next-action { display: grid; min-height: 33px; grid-template-columns: 23px 1fr auto; gap: 7px; align-items: center; margin-top: 6px; padding: 5px 7px; border: 1px solid rgba(255,202,93,.2); border-radius: 7px; background: rgba(104,70,15,.13); }
.crm-next-action > i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: rgba(255,197,75,.13); }.crm-next-action > i::before { content: "↗"; color: #ffd374; font-size: 12px; font-style: normal; font-weight: 900; }
.crm-next-action span small, .crm-next-action span strong { display: block; }.crm-next-action span small { color: #8c7955; font-size: 7px; }.crm-next-action span strong { margin-top: 1px; color: #f0dfbc; font-size: 9px; }.crm-next-action > b { color: #ffd374; font-size: 8px; }
@keyframes crmScan { 0%,18% { transform: translateX(0); opacity: 0; } 35%,58% { opacity: 1; } 75%,100% { transform: translateX(340%); opacity: 0; } }
@keyframes crmNow { 50% { border-color: rgba(105,255,195,.55); box-shadow: 0 0 22px rgba(68,255,183,.11); } }

.commercial-summary > span:first-child { grid-column: span 1; }.commercial-summary > span:last-child strong { color: #74ffc2; }
.commercial-flow { position: relative; height: 76px; margin: 2px 0 6px; padding-top: 4px; }
.commercial-line { position: absolute; height: 2px; top: 24px; right: 9%; left: 9%; background: linear-gradient(90deg, #1789e7, #58ceff); box-shadow: 0 0 12px rgba(10,132,255,.3); }.commercial-line > i { display: block; width: 26%; height: 100%; transform-origin: left; background: #79ffc5; box-shadow: 0 0 9px #4affb5; animation: commercialLine 5.6s ease-in-out infinite; }
.deal-signal { position: absolute; display: grid; width: 24px; height: 24px; top: -11px; left: -4px; place-items: center; border: 2px solid #8fe7ff; border-radius: 50%; background: #0b66ac; color: #e1f8ff; font-size: 7px; font-weight: 900; box-shadow: 0 0 16px rgba(75,198,255,.7); animation: dealTravel 5.6s cubic-bezier(.42,0,.23,1) infinite; }
.commercial-stages { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.commercial-stages article { display: grid; min-width: 0; justify-items: center; text-align: center; }.commercial-stages article > i { display: grid; width: 18px; height: 18px; place-items: center; border: 2px solid #3683ba; border-radius: 50%; background: #071b31; color: #7ca9c8; font-size: 7px; font-style: normal; font-weight: 900; }.commercial-stages small { overflow: hidden; width: 100%; margin-top: 7px; color: #67849d; font-size: 7px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.commercial-stages strong { margin-top: 2px; color: #d6ecfb; font-size: 12px; }.commercial-stages em { margin-top: 1px; color: #6686a2; font-size: 7px; font-style: normal; }
.commercial-alert { display: grid; min-height: 40px; grid-template-columns: 23px 1fr auto; gap: 8px; align-items: center; padding: 5px 7px; border: 1px solid rgba(255,197,78,.2); border-radius: 7px; background: linear-gradient(90deg, rgba(102,69,14,.17), rgba(9,35,61,.52)); }
.commercial-alert > i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: rgba(255,195,68,.13); color: #ffd373; font-size: 10px; font-style: normal; font-weight: 900; animation: commercialAlert 2.4s ease-in-out infinite; }.commercial-alert span { min-width: 0; }.commercial-alert span b, .commercial-alert span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.commercial-alert span b { color: #eadfc8; font-size: 9px; }.commercial-alert span small { margin-top: 2px; color: #927d59; font-size: 8px; }.commercial-alert > em { color: #ffd374; font-size: 7px; font-style: normal; font-weight: 900; white-space: nowrap; }
@keyframes commercialLine { 0%,8% { transform: scaleX(.02); } 75%,90% { transform: scaleX(3.8); } 100% { transform: scaleX(.02); } }
@keyframes dealTravel { 0%,8% { left: -4px; } 28% { left: 28%; } 50% { left: 59%; } 75%,90% { left: calc(100% - 20px); } 100% { left: -4px; } }
@keyframes commercialAlert { 50% { background: rgba(255,195,68,.24); box-shadow: 0 0 12px rgba(255,195,68,.13); } }

.partner-summary > span:last-child strong { color: #75ffc2; }
.partner-list { display: grid; gap: 4px; }.partner-entry { position: relative; display: grid; min-height: 35px; grid-template-columns: 26px minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 4px 7px; border: 1px solid rgba(89,162,229,.1); border-radius: 7px; background: rgba(7,29,55,.53); animation: partnerFocus 7.5s ease-in-out infinite; }.partner-entry:nth-child(2) { animation-delay: -2.5s; }.partner-entry:nth-child(3) { animation-delay: -5s; }.partner-entry.is-new { border-color: rgba(104,255,194,.28); background: linear-gradient(90deg, rgba(18,100,71,.18), rgba(7,31,55,.58)); }.partner-entry.is-new > em { background: rgba(63,235,165,.13); color: #76ffc1; }
.partner-event { display: grid; min-height: 33px; grid-template-columns: 23px 1fr; gap: 7px; align-items: center; margin-top: 6px; padding: 5px 7px; border: 1px solid rgba(91,180,252,.2); border-radius: 7px; background: rgba(11,55,93,.34); animation: partnerEvent 5s ease-in-out infinite; }.partner-event > i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: rgba(10,132,255,.2); color: #8ee5ff; font-size: 13px; font-style: normal; font-weight: 900; }.partner-event span b, .partner-event span small { display: block; }.partner-event span b { color: #d6eaf8; font-size: 9px; }.partner-event span small { margin-top: 2px; color: #7793ad; font-size: 8px; }
@keyframes partnerFocus { 0%,18% { transform: translateX(3px); border-color: rgba(96,203,255,.36); box-shadow: 0 7px 16px rgba(0,0,0,.14); } 28%,100% { transform: none; } }
@keyframes partnerEvent { 0%,62% { opacity: .62; transform: translateY(4px); } 72%,96% { opacity: 1; transform: none; } }

.warehouse-map{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}.warehouse-map>span{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:6px;border:1px solid rgba(87,168,242,.15);border-radius:6px;color:#7491aa;font-size:5px}.warehouse-map>span>i{height:31px;border-radius:3px;background:rgba(32,81,127,.22)}.warehouse-map>span>i.full{background:linear-gradient(180deg,#238bd6,#0a477d);box-shadow:inset 0 0 8px rgba(118,221,255,.18)}.warehouse-map>span>i.low{height:17px;align-self:end;background:linear-gradient(180deg,#ffc45b,#9f6a17);animation:lowStock 1.7s ease-in-out infinite}@keyframes lowStock{50%{opacity:.45}}
.quote-table,.tenant-table{display:grid;gap:4px}.quote-table header,.quote-table p,.tenant-table header,.tenant-table p{display:grid;grid-template-columns:1fr .75fr .55fr;gap:6px;align-items:center;margin:0;padding:5px 7px;border-radius:5px}.quote-table header,.tenant-table header{color:#55728e;font-size:5px;font-weight:800}.quote-table p,.tenant-table p{border:1px solid rgba(88,158,224,.09);background:rgba(12,39,70,.25);font-size:6px}.quote-table p b,.tenant-table p b{overflow:hidden;color:#c9dceb;text-overflow:ellipsis;white-space:nowrap}.quote-table p span,.tenant-table p span{color:#7894ae}.quote-table p em,.tenant-table p em{color:#89cce9;font-style:normal;text-align:right}.quote-table p.selected{border-color:rgba(99,255,191,.35);background:rgba(27,115,79,.14);box-shadow:0 0 16px rgba(99,255,191,.06)}.quote-table p.selected::before{content:"✓";position:absolute;right:18px;color:#70ffc1;font-weight:900}
.demand-curve{position:relative;height:72px;margin-bottom:5px}.demand-curve svg{width:100%;height:100%;overflow:visible}.demand-curve path{fill:none;stroke:#4384bd;stroke-width:2}.demand-curve path.forecast{stroke:#70dfff;stroke-dasharray:5 4;filter:drop-shadow(0 0 4px #0a84ff);animation:dashTravel 5s linear infinite}.demand-curve span{position:absolute;right:0;bottom:4px;padding:3px 5px;border-radius:4px;background:rgba(255,188,65,.11);color:#e5bd6f;font-size:4.5px;font-weight:800}@keyframes dashTravel{to{stroke-dashoffset:-36}}
.works-timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:6px 0 15px}.works-timeline::before{content:"";position:absolute;height:1px;top:12px;right:15%;left:15%;background:#224d76}.works-timeline span{position:relative;z-index:2;display:grid;justify-items:center;text-align:center}.works-timeline i{display:grid;width:23px;height:23px;place-items:center;border:2px solid #285a88;border-radius:50%;background:#07182b;color:#6987a2;font-size:5px;font-style:normal}.works-timeline b{margin-top:5px;color:#adc3d5;font-size:5.5px}.works-timeline small{margin-top:2px;color:#617d98;font-size:4.5px}.works-timeline .done i{border-color:#5bf0b3;background:#105c43;color:#80ffca}.works-timeline .active i{border-color:#65d8ff;background:#096bbd;color:white;box-shadow:0 0 15px rgba(75,198,255,.45);animation:sceneStatus 1.8s infinite}

.finance-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.finance-kpis>span{padding:5px 6px;border:1px solid rgba(86,164,236,.11);border-radius:5px;background:rgba(12,40,72,.27)}.finance-kpis small,.finance-kpis b{display:block}.finance-kpis small{color:#5e7b96;font-size:4.5px}.finance-kpis b{margin-top:3px;color:#cce1f1;font-size:7px}.finance-kpis>span:last-child b{color:#6fffc0}.line-chart{position:relative;height:70px;margin-top:4px;border-bottom:1px solid rgba(80,155,223,.13);background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(73,143,204,.08) 23px)}.line-chart svg{width:100%;height:100%;overflow:visible}.line-chart path:not(.area){fill:none;stroke:#65daff;stroke-width:2;filter:drop-shadow(0 0 4px rgba(10,132,255,.8));stroke-dasharray:410;animation:chartDraw 7s ease-in-out infinite}.line-chart path.area{fill:url(#cashArea);stroke:none}@keyframes chartDraw{0%,10%{stroke-dashoffset:410}40%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-410}}
.cash-count{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}.cash-count>span{padding:6px;border:1px solid rgba(89,167,237,.12);border-radius:6px;background:rgba(12,41,73,.26)}.cash-count small,.cash-count b{display:block}.cash-count small{color:#607d98;font-size:4.5px}.cash-count b{margin-top:3px;color:#d9ebf8;font-size:8px}.cash-ok{display:flex;align-items:center;gap:7px;margin-bottom:6px;padding:5px 7px;border:1px solid rgba(99,255,190,.17);border-radius:6px;background:rgba(21,111,77,.13)}.cash-ok>i{display:grid;width:19px;height:19px;place-items:center;border-radius:50%;background:#146b50;color:#7dffc8;font-size:8px;font-style:normal}.cash-ok p{margin:0}.cash-ok p b,.cash-ok p small{display:block}.cash-ok p b{color:#bff4dd;font-size:6px}.cash-ok p small{margin-top:2px;color:#6c947f;font-size:5px}.scene-cash .scene-row{min-height:14px}
.credit-score{display:grid;grid-template-columns:95px 1fr;gap:8px;align-items:center;height:100%}.score-ring,.goal-ring{display:grid;width:86px;height:86px;place-content:center;border:9px solid rgba(50,110,169,.26);border-top-color:#68d8ff;border-right-color:#0a84ff;border-radius:50%;background:radial-gradient(circle,rgba(10,132,255,.14),transparent 66%);box-shadow:0 0 22px rgba(10,132,255,.12);text-align:center;animation:creditBreathe 3.3s ease-in-out infinite}.score-ring strong,.goal-ring strong{color:#e5f6ff;font-size:19px;line-height:1}.score-ring small,.goal-ring small{margin-top:4px;color:#6edfb8;font-size:4.5px;font-weight:800}@keyframes creditBreathe{50%{transform:scale(.94);filter:brightness(1.25)}}
.fiscal-doc{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;margin-bottom:7px;padding:8px;border:1px solid rgba(85,165,237,.14);border-radius:7px;background:rgba(12,39,70,.31)}.fiscal-doc>span{display:grid;width:37px;height:48px;place-items:center;border:1px solid #3c86c8;border-radius:4px;background:linear-gradient(145deg,#123d66,#07192d);color:#9edfff;font-size:9px;font-weight:900}.fiscal-doc>div{min-width:0}.fiscal-doc>div small,.fiscal-doc>div b{display:block}.fiscal-doc>div small{color:#5e7892;font-size:4.5px}.fiscal-doc>div b{overflow:hidden;margin:3px 0 5px;color:#bbcede;font-size:5.5px;text-overflow:ellipsis;white-space:nowrap}.fiscal-doc>div i{display:block;width:90%;height:2px;margin-top:3px;border-radius:3px;background:#245178}.fiscal-doc>div i:nth-of-type(2){width:68%}.fiscal-doc>em{padding:5px;border-radius:4px;background:rgba(99,255,190,.11);color:#70ffc0;font-size:5px;font-style:normal;font-weight:900;white-space:nowrap}.scene-fiscal .scene-row{min-height:15px}
.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:100%;align-items:center}.payment-methods>span{min-width:0;padding:9px 7px;border:1px solid rgba(82,158,229,.13);border-radius:8px;background:rgba(10,36,65,.48);animation:paymentCard 8s ease-in-out infinite}.payment-methods>span:nth-child(2){animation-delay:-2.65s}.payment-methods>span:nth-child(3){animation-delay:-5.3s}.payment-methods i,.payment-methods b,.payment-methods small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-methods i{width:max-content;padding:3px 5px;border-radius:4px;background:rgba(10,132,255,.18);color:#75ccff;font-size:4.5px;font-style:normal;font-weight:900}.payment-methods b{margin-top:11px;color:#deedf8;font-size:9px}.payment-methods small{margin-top:3px;color:#64819b;font-size:4.8px}@keyframes paymentCard{0%,21%{border-color:rgba(101,255,194,.46);transform:translateY(-3px);box-shadow:0 9px 24px rgba(26,157,112,.08)}27%,100%{transform:none}}
.approval-chain{display:grid;grid-template-columns:1fr 13px 1fr 13px 1fr;align-items:start;margin:6px 0 12px}.approval-chain>span{display:grid;justify-items:center;text-align:center}.approval-chain>span>i{display:grid;width:25px;height:25px;place-items:center;border:2px solid #27557f;border-radius:50%;background:#07172a;color:#6a88a3;font-size:6px;font-style:normal}.approval-chain>span b{margin-top:5px;color:#b8ccdd;font-size:5.5px}.approval-chain>span small{margin-top:2px;color:#627e99;font-size:4.5px}.approval-chain>em{height:1px;margin-top:12px;background:#27557f}.approval-chain .done i{border-color:#63f7ba;background:#125a43;color:#7effc9}.approval-chain .active i{border-color:#65d9ff;background:#086cc3;color:#e1f7ff;box-shadow:0 0 14px rgba(75,198,255,.36);animation:sceneStatus 1.6s infinite}

.scene-logistics .scene-body{display:grid;grid-template-columns:1.08fr .92fr;gap:12px;align-items:center}.truck-load{position:relative;width:170px;height:78px;margin:auto}.truck-cargo{position:absolute;width:116px;height:57px;top:4px;left:2px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:3px;padding:6px;border:2px solid #5ebeea;border-radius:7px 4px 4px 7px;background:linear-gradient(145deg,#175e91,#0a3052);box-shadow:0 0 22px rgba(10,132,255,.18)}.truck-cab{position:absolute;width:43px;height:47px;right:7px;bottom:17px;border:2px solid #7ddfff;border-radius:6px 14px 5px 4px;background:linear-gradient(145deg,#2fa6df,#12649b)}.truck-cab::before{content:"";position:absolute;width:20px;height:14px;top:5px;left:5px;border-radius:3px;background:#08243c}.truck-cab i{position:absolute;width:5px;height:4px;right:-3px;bottom:8px;background:#e7f8ff;box-shadow:0 0 7px white}.truck-load .load{border-radius:3px;background:linear-gradient(145deg,#4fbcf0,#17618f);animation:loadBlink 6s ease-in-out infinite}.truck-load .load.a{grid-area:1/1/3/2}.truck-load .load.b{grid-area:1/2/2/4;animation-delay:-1.5s}.truck-load .load.c{grid-area:2/2/3/3;animation-delay:-3s}.truck-load .load.d{grid-area:2/3/3/5;animation-delay:-4.5s}.truck-load .wheel{position:absolute;width:19px;height:19px;bottom:6px;border:5px solid #02070e;border-radius:50%;background:#80dfff;box-shadow:inset 0 0 0 2px #164b70}.truck-load .wheel.w1{left:27px}.truck-load .wheel.w2{right:19px}@keyframes loadBlink{0%,18%{filter:brightness(1.6)}25%,100%{filter:none}}.load-metrics{display:grid;gap:14px}.load-metrics>span>small,.load-metrics>span>b{display:block}.load-metrics small{color:#5f7d98;font-size:5px}.load-metrics b{margin:3px 0 5px;color:#c8dcec;font-size:7px}
.picking-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;height:100%;align-items:center}.picking-list>span{position:relative;display:grid;min-width:0;justify-items:center;overflow:hidden;padding:8px 4px;border:1px solid rgba(81,157,226,.11);border-radius:7px;background:rgba(11,37,66,.32);text-align:center}.picking-list>span:not(:last-child)::after{content:"";position:absolute;width:7px;height:1px;top:20px;right:-7px;background:#285278}.picking-list>span>i{display:grid;width:24px;height:24px;place-items:center;border:2px solid #2b5882;border-radius:7px;background:#071729;color:#617e98;font-size:6px;font-style:normal}.picking-list p{width:100%;margin:6px 0 0}.picking-list b,.picking-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picking-list b{color:#b7ccdd;font-size:5.5px}.picking-list small{margin-top:3px;color:#607c97;font-size:4.5px}.picking-list .done i{border-color:#5ff4b8;background:#135d46;color:#80ffca}.picking-list .active{border-color:rgba(101,216,255,.3);box-shadow:0 0 16px rgba(10,132,255,.09)}.picking-list .active i{border-color:#61d7ff;background:#086cc4;color:#e1f7ff;animation:sceneStatus 1.6s infinite}
.mini-route{position:relative;height:100%;overflow:visible}.mini-route svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.mini-route svg path{fill:none;stroke:#143956;stroke-width:13;stroke-linecap:round}.mini-route svg path.route-dash{stroke:#6bdcff;stroke-width:1.5;stroke-dasharray:5 8;filter:drop-shadow(0 0 4px #0a84ff);animation:dashTravel 5s linear infinite}.route-stop{position:absolute;width:12px;height:12px;border:2px solid #67d9ff;border-radius:50%;background:#07182a;box-shadow:0 0 0 3px rgba(10,132,255,.1)}.route-stop.s1{left:5%;bottom:16%}.route-stop.s2{left:55%;top:51%}.route-stop.s3{right:2%;top:10%}.mini-truck{position:absolute;width:29px;height:18px;left:48%;top:48%;filter:drop-shadow(0 0 6px rgba(75,198,255,.55));animation:miniTruckDrive 10s cubic-bezier(.45,.02,.55,.98) infinite}.mini-truck>b{position:absolute;width:18px;height:13px;left:0;top:0;border:1px solid #c4efff;border-radius:3px;background:#1287d5}.mini-truck>i{position:absolute;width:11px;height:11px;right:0;bottom:4px;border:1px solid #c4efff;border-radius:2px 4px 2px 2px;background:#5bc8f5}.mini-truck>em{position:absolute;width:5px;height:5px;right:3px;bottom:0;border-radius:50%;background:#02070e;box-shadow:-17px 0 #02070e}.route-info{position:absolute;right:1%;bottom:6%;padding:7px 8px;border:1px solid rgba(101,218,255,.28);border-radius:7px 7px 2px 7px;background:rgba(5,24,44,.96);box-shadow:0 12px 26px rgba(0,0,0,.26);animation:routeBubbleInfo 10s ease-in-out infinite}.route-info b,.route-info small{display:block}.route-info b{color:#b7ebff;font-size:5.5px}.route-info small{margin-top:2px;color:#6687a2;font-size:4.5px}@keyframes miniTruckDrive{0%,8%{left:4%;top:73%;transform:rotate(-9deg)}30%{left:29%;top:31%;transform:rotate(12deg)}55%{left:56%;top:50%;transform:rotate(-10deg)}82%,100%{left:88%;top:14%;transform:rotate(-15deg)}}@keyframes routeBubbleInfo{0%,62%,100%{opacity:.3;transform:translateY(3px)}72%,92%{opacity:1;transform:none}}
.scene-portal .scene-body{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center}.driver-phone{position:relative;width:94px;height:132px;margin:auto;padding:14px 7px 7px;border:2px solid #255780;border-radius:15px;background:#05111f;box-shadow:0 13px 28px rgba(0,0,0,.35)}.phone-notch{position:absolute;width:31px;height:5px;top:4px;left:calc(50% - 15px);border-radius:5px;background:#1b3c5b}.driver-phone header{display:flex;justify-content:space-between;color:#6887a2;font-size:4.5px}.driver-phone header b{color:#8adfff}.phone-map{position:relative;height:67px;margin:7px 0;border-radius:6px;background:linear-gradient(135deg,#0b2948,#0c1e35);overflow:hidden}.phone-map::before{content:"";position:absolute;width:90px;height:34px;top:16px;left:-8px;border:5px solid #1c527c;border-radius:50%;transform:rotate(-18deg)}.phone-map>i{position:absolute;width:7px;height:7px;top:38px;left:22px;border:2px solid #68ddff;border-radius:50%;background:#061427;box-shadow:0 0 8px #0a84ff}.phone-map>span{position:absolute;width:6px;height:6px;top:20px;right:19px;border-radius:50%;background:#64ffc0;box-shadow:0 0 7px #64ffc0}.driver-phone button{width:100%;padding:6px 2px;border:0;border-radius:4px;background:linear-gradient(90deg,#0877e9,#42c5f4);color:#02101f;font:900 4.5px var(--font-body)}.driver-data .scene-row{min-height:22px}

.bi-grid{display:grid;height:100%;grid-template-columns:.8fr .8fr 1.4fr;gap:6px;align-items:stretch}.bi-grid article{min-width:0;padding:8px;border:1px solid rgba(84,163,234,.11);border-radius:7px;background:rgba(12,40,72,.3)}.bi-grid article>small,.bi-grid article>b,.bi-grid article>em{display:block}.bi-grid article>small{color:#5d7a95;font-size:4.5px}.bi-grid article>b{margin-top:9px;color:#d5e9f8;font-size:11px}.bi-grid article>em{margin-top:5px;color:#65ffc0;font-size:5px;font-style:normal}.bi-grid .bi-chart{display:flex;align-items:flex-end}.bi-chart .scene-bars{width:100%;height:91px}
.data-flow{display:grid;height:100%;grid-template-columns:.7fr .6fr 1fr;gap:7px;align-items:center}.data-sources{display:grid;gap:5px}.data-sources span,.gateway-tools span{display:grid;min-height:21px;place-items:center;border:1px solid rgba(83,165,239,.16);border-radius:5px;background:rgba(13,48,85,.45);color:#88bddd;font-size:5.5px;font-weight:800}.data-stream{position:relative;height:100%}.data-stream::before{content:"";position:absolute;width:1px;top:10%;bottom:10%;left:50%;background:#24567e}.data-stream i{position:absolute;width:6px;height:6px;top:13%;left:calc(50% - 3px);border-radius:50%;background:#88e6ff;box-shadow:0 0 9px #0a84ff;animation:dataPacket 3s linear infinite}.data-stream i:nth-child(2){animation-delay:-1s}.data-stream i:nth-child(3){animation-delay:-2s}@keyframes dataPacket{to{transform:translateY(93px)}}.data-vault{display:grid;height:87px;place-content:center;border:1px solid rgba(103,216,255,.3);border-radius:50%/16%;background:linear-gradient(180deg,rgba(21,95,151,.45),rgba(7,30,54,.6));box-shadow:0 0 27px rgba(10,132,255,.15);text-align:center}.data-vault b{color:#bcecff;font-size:7px}.data-vault small{margin-top:4px;color:#6789a5;font-size:5px}
.forecast-chart{position:relative;height:83px;border-bottom:1px solid rgba(83,158,226,.14);background:repeating-linear-gradient(0deg,transparent 0 24px,rgba(78,144,204,.07) 25px)}.forecast-chart svg{width:100%;height:100%;overflow:visible}.forecast-chart path{fill:none}.forecast-chart .history{stroke:#427cae;stroke-width:2}.forecast-chart .future{stroke:#70dcff;stroke-width:2;stroke-dasharray:5 4;filter:drop-shadow(0 0 4px #0a84ff);animation:dashTravel 4s linear infinite}.forecast-chart .range{fill:rgba(62,177,246,.12);stroke:none}.forecast-cut{position:absolute;top:0;bottom:0;left:69%;padding-left:4px;border-left:1px dashed rgba(118,210,255,.34);color:#70a7c7;font-size:4px;font-weight:800}.forecast-result{display:grid;grid-template-columns:.55fr 1.45fr;gap:8px;align-items:center;margin-top:6px}.forecast-result small,.forecast-result b{display:block}.forecast-result small{color:#5d7892;font-size:4.5px}.forecast-result b{margin-top:2px;color:#73ffc2;font-size:11px}.forecast-result p{margin:0;color:#7894ad;font-size:5.5px;line-height:1.35}
.model-net{position:relative;height:77px}.model-net .input{position:absolute;width:11px;height:11px;left:3%;border:1px solid #3993d6;border-radius:50%;background:#0a3157}.model-net .i1{top:5px}.model-net .i2{top:33px}.model-net .i3{top:61px}.model-net>i{position:absolute;width:37%;height:1px;left:7%;top:11px;transform-origin:left;background:linear-gradient(90deg,#2d6592,#54cdfd)}.model-net>i:nth-of-type(2){top:39px}.model-net>i:nth-of-type(3){top:67px}.model-core{position:absolute;display:grid;width:55px;height:55px;top:11px;left:42%;place-items:center;border:1px solid #6bdbff;border-radius:18px;background:radial-gradient(circle,#157bca,#07223d 70%);color:#c8f2ff;font-size:12px;box-shadow:0 0 23px rgba(10,132,255,.27);animation:agentBreathe 2.8s ease-in-out infinite}.model-net>em{position:absolute;width:20%;height:1px;top:39px;left:58%;background:#5ed2ff}.model-net>strong{position:absolute;display:grid;width:56px;height:28px;top:25px;right:2%;place-items:center;border:1px solid rgba(100,255,193,.32);border-radius:6px;background:rgba(25,115,79,.17);color:#74ffc2;font-size:5.5px}.model-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.model-stats>span{padding:4px 6px;border:1px solid rgba(86,160,229,.1);border-radius:5px;background:rgba(11,36,65,.28)}.model-stats small,.model-stats b{display:block}.model-stats small{color:#587590;font-size:4px}.model-stats b{margin-top:2px;color:#c7ddec;font-size:6.5px}
.goal-layout{display:grid;grid-template-columns:99px 1fr;gap:8px;align-items:center}.goal-ring{width:82px;height:82px;border-width:8px}.scene-goals .scene-progress{margin-top:7px}.executive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.executive-grid article{padding:7px;border:1px solid rgba(85,163,234,.11);border-radius:6px;background:rgba(12,40,72,.28)}.executive-grid small,.executive-grid b,.executive-grid em{display:block}.executive-grid small{color:#5c7892;font-size:4.5px}.executive-grid b{margin-top:5px;color:#d6e8f6;font-size:9px}.executive-grid em{margin-top:3px;font-size:4.8px;font-style:normal}.executive-grid em.up{color:#6fffc0}.executive-grid em.down{color:#6edaff}
.dashboard-grid{display:grid;height:100%;grid-template-columns:1.3fr .7fr;grid-template-rows:1fr 1fr;gap:6px}.dashboard-grid article{min-width:0;padding:7px;border:1px solid rgba(84,161,232,.12);border-radius:6px;background:rgba(12,40,72,.31)}.dashboard-grid article.wide{grid-row:1/3}.dashboard-grid small,.dashboard-grid b,.dashboard-grid em{display:block}.dashboard-grid small{color:#5c7894;font-size:4.5px}.dashboard-grid b{margin-top:6px;color:#dbedf9;font-size:14px}.dashboard-grid em{margin-top:5px;color:#6effbf;font-size:5px;font-style:normal}.dashboard-grid .alert-text{color:#ffd477}.dashboard-grid .scene-bars{height:60px;margin-top:7px}

.genius-mini-chat{display:grid;gap:7px}.genius-mini-chat .question{width:65%;margin:0 0 0 auto;padding:7px 9px;border-radius:8px 8px 2px 8px;background:linear-gradient(135deg,rgba(10,132,255,.55),rgba(9,78,148,.42));color:#e7f5ff;font-size:6px;line-height:1.35;animation:miniQuestion 9s ease-in-out infinite}.genius-mini-chat .answer{width:87%;padding:8px 9px;border:1px solid rgba(91,176,250,.17);border-radius:8px 8px 8px 2px;background:rgba(8,32,59,.86);animation:miniAnswer 9s ease-in-out infinite}.genius-mini-chat .answer>span{display:block;color:#b8ccdb;font-size:5.5px;line-height:1.35}.genius-mini-chat .answer>span b{color:#70ffc1}.genius-mini-chat .answer>.scene-bars{height:46px;margin-top:5px}.genius-mini-chat .answer>small{display:block;margin-top:4px;color:#526f89;font-size:4px}@keyframes miniQuestion{0%,8%,100%{opacity:.4;transform:translateY(3px)}18%,88%{opacity:1;transform:none}}@keyframes miniAnswer{0%,18%,100%{opacity:.3;transform:translateY(4px)}30%,90%{opacity:1;transform:none}}
.gateway-flow{display:grid;grid-template-columns:.65fr 15px .8fr 15px .8fr;gap:4px;align-items:center;margin:5px 0 7px}.gateway-flow>span,.gateway-core{display:grid;min-height:51px;place-content:center;border:1px solid rgba(91,176,248,.17);border-radius:7px;background:rgba(12,43,77,.42);color:#83bdda;font-size:5px;font-weight:800;text-align:center}.gateway-flow>i{height:1px;overflow:hidden;background:#24547d}.gateway-flow>i::after{content:"";display:block;width:7px;height:1px;background:#87e9ff;box-shadow:0 0 8px #0a84ff;animation:gatewayPacket 2.2s linear infinite}.gateway-core{border-color:rgba(105,220,255,.3);box-shadow:0 0 18px rgba(10,132,255,.1)}.gateway-core b{color:#bcecff;font-size:9px}.gateway-core small{margin-top:3px;color:#62829d;font-size:4px}.gateway-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.gateway-tools span{min-height:25px;font-size:4px}@keyframes gatewayPacket{to{transform:translateX(17px)}}.scene-mcp .scene-row{min-height:15px}
.message-flow{display:grid;grid-template-columns:1fr 32px 1fr;gap:4px;align-items:center;margin:8px 0 9px}.event-card,.channel-card{min-height:58px;padding:8px;border:1px solid rgba(86,164,237,.14);border-radius:7px;background:rgba(11,41,74,.4)}.event-card small,.event-card b{display:block}.event-card small{color:#58758f;font-size:4px}.event-card b{margin-top:8px;color:#c8dcec;font-size:6px;line-height:1.3}.message-flow>i{height:1px;background:#265985}.message-flow>i::after{content:"";display:block;width:7px;height:7px;transform:translateY(-3px);border-radius:50%;background:#75dfff;box-shadow:0 0 9px #0a84ff;animation:messagePacket 3s ease-in-out infinite}@keyframes messagePacket{0%{transform:translate(0,-3px)}70%,100%{transform:translate(28px,-3px)}}.channel-card{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center}.channel-card>b{display:grid;width:24px;height:24px;place-items:center;border-radius:7px;background:#147e5d;color:#88ffd0;font-size:5px}.channel-card span small,.channel-card span{display:block}.channel-card span{color:#bcd1df;font-size:5.5px;line-height:1.25}.channel-card span small{margin-bottom:3px;color:#64ffc0;font-size:4px;font-weight:800}.scene-comm .scene-row{min-height:14px}
.journey{display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr;align-items:start;margin:10px 0 12px}.journey>span{display:grid;justify-items:center;text-align:center}.journey>span>i{display:grid;width:26px;height:26px;place-items:center;border:2px solid #2a577f;border-radius:8px;background:#07172a;color:#6987a3;font-size:5px;font-style:normal}.journey>span b{margin-top:5px;color:#b6cbdc;font-size:5px}.journey>span small{margin-top:2px;color:#5f7d98;font-size:4px}.journey>em{height:1px;margin-top:13px;background:#28547d}.journey .done i{border-color:#5df0b4;background:#125941;color:#7dffc8}.journey .active i{border-color:#64d7ff;background:#086cc3;color:white;box-shadow:0 0 14px rgba(75,198,255,.35);animation:sceneStatus 1.7s infinite}.preference{display:flex;align-items:center;gap:7px;padding:6px 7px;border:1px solid rgba(101,217,255,.13);border-radius:6px;background:rgba(11,43,75,.3)}.preference>i{display:grid;width:19px;height:19px;place-items:center;border-radius:50%;background:rgba(99,255,190,.13);color:#72ffc1;font-size:7px;font-style:normal}.preference b,.preference small{display:block}.preference b{color:#bcd1e0;font-size:5.5px}.preference small{margin-top:2px;color:#64819b;font-size:4.5px}
.ai-signal{display:grid;grid-template-columns:34px 1fr 32px;gap:8px;align-items:center;margin:5px 0 8px;padding:8px;border:1px solid rgba(255,194,82,.17);border-radius:7px;background:rgba(91,62,13,.13)}.signal-icon{display:grid;width:31px;height:31px;place-items:center;border:1px solid rgba(255,201,102,.31);border-radius:10px;background:rgba(255,185,59,.1);color:#ffd477;font-size:14px;font-weight:900;animation:lowStock 1.8s ease-in-out infinite}.ai-signal p{margin:0}.ai-signal p small,.ai-signal p b,.ai-signal p span{display:block}.ai-signal p small{color:#a2844c;font-size:4px;font-weight:800}.ai-signal p b{margin-top:3px;color:#e5d9bd;font-size:6px}.ai-signal p span{margin-top:2px;color:#8f836e;font-size:4.5px}.ai-signal>em{color:#ffd477;font-size:10px;font-style:normal;font-weight:900;text-align:right}.ai-action{position:relative;padding:7px;border:1px solid rgba(91,173,245,.14);border-radius:7px;background:rgba(10,43,77,.36)}.ai-action small,.ai-action b{display:block}.ai-action small{color:#5b7a96;font-size:4px}.ai-action b{margin-top:4px;padding-right:78px;color:#c8ddec;font-size:5.5px}.ai-action button{position:absolute;right:7px;bottom:7px;padding:5px 7px;border:1px solid rgba(100,216,255,.35);border-radius:4px;background:rgba(10,132,255,.12);color:#81dfff;font:800 4px var(--font-body)}
.agent-task>header{display:flex;gap:7px;align-items:center;margin-bottom:7px}.agent-avatar{display:grid;width:29px;height:29px;place-items:center;border:1px solid #65d8ff;border-radius:9px;background:radial-gradient(circle,#1682d3,#082846);color:#c9f2ff;font-size:7px;font-weight:900;box-shadow:0 0 15px rgba(10,132,255,.2)}.agent-task header p{margin:0}.agent-task header p b,.agent-task header p small{display:block}.agent-task header p b{color:#d4e5f2;font-size:6.5px}.agent-task header p small{margin-top:2px;color:#67839d;font-size:4.5px}.agent-checks{display:grid;gap:4px}.agent-checks>span{display:grid;grid-template-columns:17px 1fr;gap:6px;align-items:center;min-height:20px;padding:0 6px;border:1px solid rgba(83,158,227,.09);border-radius:5px;background:rgba(10,36,65,.26);color:#7894ac;font-size:5.5px}.agent-checks>span>i{display:grid;width:13px;height:13px;place-items:center;border:1px solid #2c5a84;border-radius:4px;color:#6a88a2;font-size:5px;font-style:normal}.agent-checks>span.done i{border-color:#5eeeb4;background:#125a42;color:#7effc8}.agent-checks>span.active{border-color:rgba(101,216,255,.25);color:#b9d8ea}.agent-checks>span.active i{border-color:#5ed4ff;background:#096bc0;animation:sceneStatus 1.5s infinite}

.people-board{display:grid;gap:5px}.people-board>span{display:grid;grid-template-columns:27px 1fr auto;gap:7px;align-items:center;padding:6px;border:1px solid rgba(85,161,230,.1);border-radius:6px;background:rgba(11,38,68,.28)}.people-board .avatar{width:26px;height:26px}.people-board .avatar.b{background:linear-gradient(145deg,#6e67d7,#29275f)}.people-board .avatar.c{background:linear-gradient(145deg,#179f8c,#0a4a47)}.people-board p{margin:0}.people-board b,.people-board small{display:block}.people-board b{color:#c8dae8;font-size:6px}.people-board small{margin-top:2px;color:#63809a;font-size:4.5px}.people-board em{color:#70ffc0;font-size:5px;font-style:normal}
.settings-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.settings-list>span{display:grid;grid-template-columns:1fr 25px;gap:6px;align-items:center;padding:8px;border:1px solid rgba(86,162,231,.11);border-radius:7px;background:rgba(11,38,68,.29)}.settings-list p{margin:0}.settings-list b,.settings-list small{display:block}.settings-list b{color:#c4d7e6;font-size:5.5px}.settings-list small{margin-top:3px;color:#627e98;font-size:4.5px}.toggle{position:relative;width:24px;height:13px;border-radius:9px;background:#183a59}.toggle::after{content:"";position:absolute;width:9px;height:9px;top:2px;left:2px;border-radius:50%;background:#5f7790;transition:transform .3s}.toggle.on{background:#0c6b71}.toggle.on::after{transform:translateX(11px);background:#71e9ff;box-shadow:0 0 7px #51cfff}
.tenant-table p em.healthy{color:#70ffc0}.tenant-table p em.warning{color:#ffd477}.help-modal{display:grid;grid-template-columns:43px 1fr;gap:10px;align-items:start;padding:11px;border:1px solid rgba(102,211,255,.24);border-radius:9px;background:linear-gradient(145deg,rgba(12,53,91,.7),rgba(5,22,42,.86));box-shadow:0 16px 35px rgba(0,0,0,.25)}.help-icon{display:grid;width:39px;height:39px;place-items:center;border:1px solid #69d9ff;border-radius:50%;background:rgba(10,132,255,.16);color:#a8ecff;font-size:19px;font-weight:900;box-shadow:0 0 20px rgba(10,132,255,.17)}.help-modal p{margin:0}.help-modal p small,.help-modal p b,.help-modal p em{display:block}.help-modal p small{color:#6197ba;font-size:4.5px}.help-modal p b{margin-top:5px;color:#d5e9f7;font-size:8px}.help-modal p em{margin-top:4px;color:#7693ac;font-size:5px;font-style:normal;line-height:1.35}.help-modal>div{grid-column:2;display:flex;gap:7px;align-items:center}.help-modal button{padding:6px 8px;border:0;border-radius:5px;background:linear-gradient(90deg,#0878eb,#4acbf5);color:#03111e;font:900 4.5px var(--font-body)}.help-modal>div small{color:#5e7b96;font-size:4.5px}
.ops-board{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.ops-board>span{display:grid;grid-template-columns:8px 1fr auto;gap:6px;align-items:center;padding:7px;border:1px solid rgba(84,161,232,.1);border-radius:6px;background:rgba(11,38,68,.3)}.ops-board>span>i{width:6px;height:6px;border-radius:50%;background:#5d7a94}.ops-board p{margin:0}.ops-board b,.ops-board small{display:block}.ops-board b{color:#c4d7e6;font-size:5.5px}.ops-board small{margin-top:2px;color:#607d97;font-size:4.5px}.ops-board em{font-size:4.5px;font-style:normal}.ops-board .ok>i{background:#63ffc0;box-shadow:0 0 7px #63ffc0}.ops-board .ok>em{color:#66dca7}.ops-board .running>i{background:#61d8ff;box-shadow:0 0 8px #0a84ff;animation:sceneStatus 1.4s infinite}.ops-board .running>em{color:#6fc9ed}.ops-board .attention>i{background:#ffd16d;box-shadow:0 0 7px #d89624}.ops-board .attention>em{color:#e2b95f}
.platform-stack{display:flex;height:100%;flex-direction:column;justify-content:center;gap:5px;perspective:600px}.platform-stack>span{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;width:82%;min-height:27px;margin:auto;padding:5px 8px;border:1px solid rgba(87,170,243,.17);border-radius:6px;background:linear-gradient(90deg,rgba(12,60,105,.65),rgba(8,29,53,.7));box-shadow:0 8px 15px rgba(0,0,0,.14);animation:layerFloat 4s ease-in-out infinite}.platform-stack>span:nth-child(2){width:88%;animation-delay:-1s}.platform-stack>span:nth-child(3){width:94%;animation-delay:-2s}.platform-stack>span:nth-child(4){width:100%;animation-delay:-3s}.platform-stack>span>i{display:grid;width:20px;height:17px;place-items:center;border-radius:4px;background:rgba(10,132,255,.15);color:#78d7ff;font-size:4.5px;font-style:normal;font-weight:900}.platform-stack b{color:#c2d8e7;font-size:5.5px}.platform-stack small{color:#5c7a95;font-size:4.5px}

.privacy-request>header{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:8px;border:1px solid rgba(89,171,243,.13);border-radius:7px;background:rgba(11,40,72,.31)}.shield-mark{display:grid;width:29px;height:32px;place-items:center;background:linear-gradient(145deg,#1687d7,#0a477c);clip-path:polygon(50% 0,95% 17%,84% 78%,50% 100%,16% 78%,5% 17%);color:#c8f4ff;font-size:8px;font-weight:900}.privacy-request header p{margin:0}.privacy-request header small,.privacy-request header b{display:block}.privacy-request header small{color:#5f7c97;font-size:4px}.privacy-request header b{margin-top:3px;color:#c9dcea;font-size:6.5px}.privacy-request header em{padding:4px 5px;border-radius:4px;background:rgba(99,255,190,.1);color:#70ffc1;font-size:4.5px;font-style:normal;font-weight:900}.privacy-line{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px}.privacy-line::before{content:"";position:absolute;height:1px;top:9px;right:10%;left:10%;background:#28547d}.privacy-line>span{position:relative;z-index:2;display:grid;justify-items:center}.privacy-line i{display:grid;width:19px;height:19px;place-items:center;border:2px solid #2b587f;border-radius:50%;background:#07172a;color:#67859f;font-size:5px;font-style:normal}.privacy-line small{margin-top:4px;color:#607d98;font-size:4.5px}.privacy-line .done i{border-color:#60eeb5;background:#125a43;color:#7effc8}.privacy-line .active i{border-color:#63d8ff;background:#086cc2;color:#e1f7ff;animation:sceneStatus 1.6s infinite}
.mfa-card{display:grid;grid-template-columns:37px 1fr;gap:9px;align-items:start;padding:9px;border:1px solid rgba(98,197,255,.19);border-radius:9px;background:linear-gradient(145deg,rgba(12,54,92,.55),rgba(5,22,41,.71))}.identity-avatar{display:grid;width:35px;height:35px;place-items:center;border:1px solid #66d9ff;border-radius:50%;background:#0a477b;color:#cef4ff;font-size:7px;font-weight:900}.mfa-card p{margin:0}.mfa-card p small,.mfa-card p b,.mfa-card p em{display:block}.mfa-card p small{color:#5d85a0;font-size:4px}.mfa-card p b{margin-top:3px;color:#d3e6f4;font-size:6.5px}.mfa-card p em{margin-top:2px;color:#6c89a2;font-size:4.5px;font-style:normal}.mfa-code{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.mfa-code i{display:grid;height:24px;place-items:center;border:1px solid rgba(100,207,255,.24);border-radius:5px;background:rgba(10,52,90,.48);color:#c8f3ff;font-size:8px;font-style:normal;animation:codeReveal 6s ease-in-out infinite}.mfa-code i:nth-child(2){animation-delay:-.2s}.mfa-code i:nth-child(3){animation-delay:-.4s}.mfa-code i:nth-child(4){animation-delay:-.6s}.mfa-code i:nth-child(5){animation-delay:-.8s}.mfa-code i:nth-child(6){animation-delay:-1s}@keyframes codeReveal{0%,9%{color:transparent;transform:translateY(2px)}18%,90%{color:#c8f3ff;transform:none}}.session-safe{grid-column:1/-1;padding:5px;border-radius:4px;background:rgba(99,255,190,.09);color:#71ffc1;font-size:4.5px;font-weight:900;text-align:center}
.api-console{overflow:hidden;border:1px solid rgba(90,176,248,.17);border-radius:8px;background:#030b15;box-shadow:0 15px 28px rgba(0,0,0,.24)}.api-console header{display:grid;grid-template-columns:31px 1fr auto;gap:7px;align-items:center;padding:6px 8px;border-bottom:1px solid rgba(83,155,223,.13);background:#0a1b2d}.api-console header b{padding:3px;border-radius:3px;background:#106345;color:#71ffc1;font-size:4.5px;text-align:center}.api-console header span{color:#9ab4c8;font:5px Consolas,monospace}.api-console header em{color:#70ffc1;font:normal 5px Consolas,monospace}.api-console pre{height:72px;margin:0;padding:9px;color:#83cfff;font:5.5px/1.5 Consolas,monospace;white-space:pre-wrap;animation:codePulse 5s ease-in-out infinite}.api-console>div{display:flex;justify-content:space-between;padding:5px 8px;border-top:1px solid rgba(83,155,223,.11);color:#53708b;font:4.5px Consolas,monospace}@keyframes codePulse{0%,12%{opacity:.35}24%,90%{opacity:1}}

/* Functional motion and rebuilt atlas scenes */
.model-net>strong { width: 78px; height: 30px; top: 24px; right: 0; white-space: nowrap; }
.agent-checks>span { grid-template-columns: 22px 1fr; gap: 7px; min-height: 25px; padding: 0 7px; }
.agent-checks>span>i { width: 18px; height: 18px; border-radius: 5px; font-size: 7px; line-height: 1; }
.api-console header { grid-template-columns: 48px minmax(0,1fr) auto; }
.api-console header b, .api-console header em { white-space: nowrap; }
.api-console header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-console pre { height: 104px; line-height: 1.45; }

.scene-delivery .scene-body { padding: 9px 11px; }
.delivery-live-map { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 1px solid rgba(85,181,248,.17); border-radius: 11px; background: #061426; box-shadow: inset 0 0 35px rgba(10,132,255,.06); }
.tool-delivery-canvas { position: absolute; width: 100%; height: 100%; inset: 0; }
.delivery-map-point { position: absolute; z-index: 3; display: grid; grid-template-columns: 25px auto; gap: 5px; align-items: center; color: #7f9db6; font-size: 11px; font-weight: 800; }
.delivery-map-point > i { display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid #65dbff; border-radius: 50%; background: #07182a; color: #d9f7ff; font-size: 11px; font-style: normal; box-shadow: 0 0 0 4px rgba(10,132,255,.09), 0 0 18px rgba(10,132,255,.18); animation: deliveryStopPulse 10s ease-in-out infinite; }
.delivery-map-point > b { padding: 4px 6px; border: 1px solid rgba(91,178,242,.13); border-radius: 5px; background: rgba(3,16,31,.88); color: #9db7cb; font-size: 11px; }
.delivery-map-point.point-start { left: 6%; bottom: 18%; }.delivery-map-point.point-route { left: 31%; top: 42%; }.delivery-map-point.point-notice { left: 57%; top: 51%; }.delivery-map-point.point-destination { right: 5%; top: 14%; }
.delivery-map-point.point-route > i { animation-delay: -2.5s; }.delivery-map-point.point-notice > i { animation-delay: -5s; }.delivery-map-point.point-destination > i { animation-delay: -7.5s; }
.delivery-live-bubble { position: absolute; z-index: 5; width: min(220px, 44%); top: 10px; left: 12px; padding: 10px 12px; border: 1px solid rgba(101,216,255,.32); border-radius: 9px 9px 9px 3px; background: rgba(4,20,38,.94); box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 25px rgba(10,132,255,.08); animation: deliveryBubbleLive 10s ease-in-out infinite; }
.delivery-live-bubble small, .delivery-live-bubble b, .delivery-live-bubble span { display: block; }.delivery-live-bubble small { color: #54cfff; font-size: 11px; font-weight: 900; }.delivery-live-bubble b { margin-top: 4px; color: #dff5ff; font-size: 12px; }.delivery-live-bubble span { margin-top: 3px; color: #829db3; font-size: 11px; line-height: 1.28; }
.delivery-live-progress { position: absolute; z-index: 6; display: flex; height: 34px; align-items: center; justify-content: space-between; right: 9px; bottom: 8px; left: 9px; padding: 0 10px; border: 1px solid rgba(88,174,239,.18); border-radius: 8px; background: rgba(3,16,31,.93); box-shadow: 0 10px 24px rgba(0,0,0,.24); color: #7795ad; font-size: 11px; }
.delivery-live-progress span i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #67ffc2; box-shadow: 0 0 10px #4bffb8; animation: sceneStatus 1.5s ease-in-out infinite; }.delivery-live-progress b { color: #75d9ff; font-size: 11px; }
@keyframes deliveryStopPulse { 0%,18%,100% { border-color: #28577f; color: #6f8da6; box-shadow: none; } 25%,41% { border-color: #69e0ff; color: #e7fbff; box-shadow: 0 0 0 5px rgba(10,132,255,.11), 0 0 20px rgba(10,132,255,.35); } }
@keyframes deliveryBubbleLive { 0%,10%,100% { opacity: .55; transform: translateY(4px); } 19%,88% { opacity: 1; transform: none; } }

.scene-portal .scene-body { display: block; padding: 9px 11px; }
.portal-live { display: grid; height: 100%; min-height: 0; grid-template-columns: minmax(155px,.78fr) 1.22fr; gap: 12px; }
.portal-device { position: relative; width: 100%; max-width: 190px; height: 100%; min-height: 0; margin: auto; padding: 14px 7px 7px; border: 2px solid #3e91c9; border-radius: 18px; background: linear-gradient(155deg,#071b30,#020813); box-shadow: 0 18px 36px rgba(0,0,0,.36), inset 0 0 18px rgba(60,180,255,.05); animation: portalDeviceLive 5.8s ease-in-out infinite; }
.portal-notch { position: absolute; width: 42px; height: 5px; top: 5px; left: calc(50% - 21px); border-radius: 5px; background: #285a7c; }
.portal-screen { position: relative; display: grid; height: 100%; grid-template-rows: 24px 72px 1fr 34px; overflow: hidden; border-radius: 11px; background: linear-gradient(180deg,rgba(10,45,78,.74),rgba(3,14,27,.96)); }
.portal-screen > header { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: #7b9bb4; font-size: 11px; }.portal-screen > header b { color: #8de8ff; font-size: 11px; }
.portal-route-canvas { width: 100%; height: 72px; }
.portal-next { padding: 6px 8px; border-top: 1px solid rgba(84,164,228,.11); }.portal-next small,.portal-next b,.portal-next span { display: block; }.portal-next small { color: #5ccfff; font-size: 11px; font-weight: 900; }.portal-next b { overflow: hidden; margin-top: 3px; color: #d6eaf7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.portal-next span { overflow: hidden; margin-top: 2px; color: #7896ae; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.portal-screen button { position: relative; overflow: hidden; margin: 3px 6px 6px; border: 0; border-radius: 8px; background: linear-gradient(135deg,#0a84ff,#65d8ff); color: #03111e; font: 900 11px var(--font-body); }.portal-screen button span,.portal-screen button b { position: absolute; display: grid; overflow: hidden; inset: 0; place-items: center; line-height: 1; white-space: nowrap; transition: none; }.portal-screen button span { animation: portalConfirmText 9s ease-in-out infinite; }.portal-screen button b { background: linear-gradient(135deg,#18b776,#79ffc0); opacity: 0; animation: portalConfirmedText 9s ease-in-out infinite; }
.portal-activity { display: grid; min-width: 0; grid-template-rows: 28px 1fr 31px; padding: 8px; border: 1px solid rgba(87,175,241,.15); border-radius: 11px; background: rgba(5,22,41,.74); }
.portal-activity > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(89,169,234,.11); color: #65d7ff; font-size: 11px; }.portal-activity > header span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #63ffc0; box-shadow: 0 0 8px #63ffc0; animation: sceneStatus 1.5s infinite; }.portal-activity > header b { color: #76ffc2; font-size: 11px; }
.portal-steps { display: grid; align-content: center; gap: 6px; }.portal-steps > span { display: grid; min-width: 0; grid-template-columns: 27px 1fr; gap: 7px; align-items: center; padding: 6px; border: 1px solid rgba(80,157,222,.09); border-radius: 7px; background: rgba(10,39,69,.33); animation: portalStepLive 9s ease-in-out infinite; }.portal-steps > span:nth-child(2) { animation-delay: -3s; }.portal-steps > span:nth-child(3) { animation-delay: -6s; }.portal-steps > span > i { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #32698f; border-radius: 7px; color: #7f9fb7; font-size: 11px; font-style: normal; }.portal-steps > span.done > i { border-color: #53dda4; background: rgba(41,178,126,.15); color: #73ffc0; }.portal-steps > span.active > i { border-color: #68dcff; background: rgba(10,132,255,.2); color: #dff8ff; animation: sceneStatus 1.5s infinite; }.portal-steps p { min-width: 0; margin: 0; }.portal-steps b,.portal-steps small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.portal-steps b { color: #c9deed; font-size: 11px; }.portal-steps small { margin-top: 2px; color: #718da6; font-size: 11px; }
.portal-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }.portal-proof span { display: grid; place-items: center; border: 1px solid rgba(98,212,255,.17); border-radius: 5px; background: rgba(10,132,255,.08); color: #76cce9; font-size: 11px; font-weight: 900; animation: portalProofLive 9s ease-in-out infinite; }.portal-proof span:nth-child(2) { animation-delay: -.22s; }.portal-proof span:nth-child(3) { animation-delay: -.44s; }
@keyframes portalDeviceLive { 50% { border-color: #6fe1ff; box-shadow: 0 20px 38px rgba(0,0,0,.38),0 0 25px rgba(10,132,255,.15); } }
@keyframes portalConfirmText { 0%,60% { opacity: 1; } 63%,88% { opacity: 0; } 91%,100% { opacity: 1; } }
@keyframes portalConfirmedText { 0%,60%,91%,100% { opacity: 0; } 63%,88% { opacity: 1; } }
@keyframes portalStepLive { 0%,16% { border-color: rgba(98,218,255,.38); transform: translateX(3px); box-shadow: 0 0 17px rgba(10,132,255,.08); } 19%,100% { transform: none; } }
@keyframes portalProofLive { 0%,62% { color: #55758f; } 70%,86% { border-color: rgba(99,255,191,.4); color: #75ffc2; box-shadow: 0 0 12px rgba(72,255,180,.08); } 100% { color: #55758f; } }

.scene-genius .scene-body { padding: 9px 11px; }
.tool-genius-chat { display: grid; height: 100%; grid-template-rows: 43px 1fr; overflow: hidden; border: 1px solid rgba(91,182,249,.18); border-radius: 11px; background: linear-gradient(160deg,rgba(8,37,69,.9),rgba(3,13,26,.96)); }
.tool-genius-head { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 0 9px; border-bottom: 1px solid rgba(91,171,233,.12); }.tool-genius-liquid,.tool-genius-liquid canvas { width: 30px; height: 30px; }.tool-genius-liquid { filter: drop-shadow(0 0 10px rgba(10,132,255,.65)); }.tool-genius-head p { min-width: 0; margin: 0; }.tool-genius-head p b,.tool-genius-head p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.tool-genius-head p b { color: #e0eff9; font-size: 11px; }.tool-genius-head p small { margin-top: 2px; color: #718ea6; font-size: 11px; }.tool-genius-head p small i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #66ffc2; box-shadow: 0 0 7px #66ffc2; animation: sceneStatus 1.5s infinite; }.tool-genius-head > em { padding: 4px 6px; border: 1px solid rgba(101,215,255,.19); border-radius: 5px; color: #70cdf1; font-size: 11px; font-style: normal; font-weight: 900; }
.tool-genius-thread { position: relative; min-height: 0; overflow: hidden; padding: 8px; }
.tool-genius-user { position: absolute; width: 72%; top: 8px; right: 8px; padding: 7px 9px; border-radius: 8px 8px 3px 8px; background: linear-gradient(135deg,#0b74d6,#0a477e); box-shadow: 0 9px 18px rgba(0,0,0,.18); animation: toolGeniusUser 12s ease-in-out infinite; }.tool-genius-user small,.tool-genius-user span { display: block; }.tool-genius-user small { color: #9adfff; font-size: 11px; font-weight: 900; }.tool-genius-user span { margin-top: 3px; color: #eefaff; font-size: 11px; line-height: 1.25; }
.tool-genius-thinking { position: absolute; display: grid; width: 66%; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; top: 65px; left: 8px; padding: 7px 9px; border: 1px solid rgba(96,203,255,.2); border-radius: 8px 8px 8px 3px; background: rgba(7,29,53,.96); opacity: 0; animation: toolGeniusThinking 12s ease-in-out infinite; }.tool-genius-thinking > i { width: 17px; height: 17px; border: 2px dotted #73ddff; border-radius: 50%; animation: ringTurn 1.8s linear infinite; }.tool-genius-thinking p { margin: 0; }.tool-genius-thinking p b,.tool-genius-thinking p small { display: block; }.tool-genius-thinking p b { color: #d4eaf7; font-size: 11px; }.tool-genius-thinking p small { margin-top: 2px; color: #718ea6; font-size: 11px; }.tool-genius-thinking > em { display: flex; gap: 3px; }.tool-genius-thinking > em i { width: 4px; height: 4px; border-radius: 50%; background: #70ddff; animation: thinkingDots 1s ease-in-out infinite; }.tool-genius-thinking > em i:nth-child(2) { animation-delay: -.33s; }.tool-genius-thinking > em i:nth-child(3) { animation-delay: -.66s; }
.tool-genius-answer { position: absolute; width: calc(100% - 16px); top: 63px; left: 8px; padding: 8px 9px; border: 1px solid rgba(91,178,241,.18); border-radius: 8px 8px 8px 3px; background: rgba(6,27,51,.97); opacity: 0; transform: translateY(7px); animation: toolGeniusAnswer 12s ease-in-out infinite; }.tool-genius-answer > small { color: #61d6ff; font-size: 11px; font-weight: 900; }.tool-genius-answer > p { margin: 4px 0 6px; color: #bed4e3; font-size: 11px; line-height: 1.25; }.tool-genius-answer > p b { color: #75ffc3; font-size: 11px; }.tool-genius-answer > div { display: grid; gap: 4px; }.tool-genius-answer > div span { display: grid; grid-template-columns: 58px 1fr 64px; gap: 6px; align-items: center; color: #7896ae; font-size: 11px; }.tool-genius-answer > div span > b { color: #8eabc0; font-size: 11px; }.tool-genius-answer > div span > i { height: 5px; overflow: hidden; border-radius: 5px; background: #153d61; }.tool-genius-answer > div span > i::after { content: ""; display: block; width: var(--w); height: 100%; transform-origin: left; background: linear-gradient(90deg,#0a84ff,#73ddff); box-shadow: 0 0 8px rgba(75,198,255,.35); animation: geniusMiniBar 12s ease-in-out infinite; }.tool-genius-answer > div span > em { color: #a9c5d7; font-size: 11px; font-style: normal; text-align: right; }
.tool-genius-composer { position: absolute; display: grid; height: 31px; grid-template-columns: minmax(0,1fr) 2px 24px; gap: 5px; align-items: center; right: 8px; bottom: 7px; left: 8px; padding: 3px 4px 3px 8px; border: 1px solid rgba(99,205,255,.25); border-radius: 8px; background: rgba(3,16,31,.97); }.tool-genius-composer span { overflow: hidden; color: #91aabe; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.tool-genius-composer > i { width: 1px; height: 13px; background: #7de3ff; animation: caretBlink .8s steps(1) infinite; }.tool-genius-composer > b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; background: linear-gradient(135deg,#0a84ff,#68d9ff); color: #03111e; font-size: 13px; }
@keyframes toolGeniusUser { 0%,5% { opacity: .2; transform: translateY(6px); } 7%,94% { opacity: 1; transform: none; } 97%,100% { opacity: .2; transform: translateY(-2px); } }
@keyframes toolGeniusThinking { 0%,28%,48%,100% { opacity: 0; transform: translateY(5px); } 30%,46% { opacity: 1; transform: none; } }
@keyframes toolGeniusAnswer { 0%,48%,97%,100% { opacity: 0; transform: translateY(7px); } 50%,94% { opacity: 1; transform: none; } }
@keyframes geniusMiniBar { 0%,50% { transform: scaleX(.05); } 53%,94% { transform: scaleX(1); } 97%,100% { transform: scaleX(.05); } }

/* Every operational scene now demonstrates a visible action */
.scene-sales .scene-pipeline::after { content: ""; position: absolute; z-index: 3; width: 9px; height: 9px; top: 10px; left: 15%; border-radius: 50%; background: #9deaff; box-shadow: 0 0 12px #0a84ff; animation: atlasPipelineMove 6s ease-in-out infinite; }
.scene-purchases .quote-table p { position: relative; animation: atlasRowFocus 7.2s ease-in-out infinite; }.scene-purchases .quote-table p:nth-of-type(2) { animation-delay: -2.4s; }.scene-purchases .quote-table p:nth-of-type(3) { animation-delay: -4.8s; }
.scene-cash .cash-ok { animation: atlasConfirm 4.5s ease-in-out infinite; }.scene-cash .cash-count>span { animation: atlasMetricRefresh 5s ease-in-out infinite; }.scene-cash .cash-count>span:nth-child(2) { animation-delay: -.35s; }
.scene-fiscal .fiscal-doc::after { content: ""; position: absolute; width: calc(100% - 18px); height: 2px; left: 9px; background: linear-gradient(90deg,transparent,#70e1ff,transparent); box-shadow: 0 0 9px #0a84ff; animation: atlasDocScan 4.8s ease-in-out infinite; }.scene-fiscal .fiscal-doc { position: relative; overflow: hidden; }.scene-fiscal .fiscal-doc>em { animation: atlasStamp 4.8s ease-in-out infinite; }
.scene-approval .approval-chain>em { position: relative; overflow: hidden; }.scene-approval .approval-chain>em::after { content: ""; display: block; width: 10px; height: 1px; background: #8de8ff; box-shadow: 0 0 7px #0a84ff; animation: atlasConnector 2.2s linear infinite; }.scene-approval .approval-chain>em:nth-of-type(2)::after { animation-delay: -1.1s; }
.scene-expedicao .picking-list>span { animation: atlasStageFocus 8s ease-in-out infinite; }.scene-expedicao .picking-list>span:nth-child(2) { animation-delay: -2s; }.scene-expedicao .picking-list>span:nth-child(3) { animation-delay: -4s; }.scene-expedicao .picking-list>span:nth-child(4) { animation-delay: -6s; }
.scene-managerial .executive-grid article { animation: atlasMetricRefresh 8s ease-in-out infinite; }.scene-managerial .executive-grid article:nth-child(2) { animation-delay: -2s; }.scene-managerial .executive-grid article:nth-child(3) { animation-delay: -4s; }.scene-managerial .executive-grid article:nth-child(4) { animation-delay: -6s; }
.scene-comm-v2 .journey>em { position: relative; overflow: hidden; }.scene-comm-v2 .journey>em::after { content: ""; display: block; width: 8px; height: 1px; background: #87e9ff; box-shadow: 0 0 8px #0a84ff; animation: atlasConnector 1.9s linear infinite; }.scene-comm-v2 .preference { animation: atlasConfirm 5.8s ease-in-out infinite; }
.scene-ai .agent-checks>span { animation: atlasRowFocus 8s ease-in-out infinite; }.scene-ai .agent-checks>span:nth-child(2) { animation-delay: -2s; }.scene-ai .agent-checks>span:nth-child(3) { animation-delay: -4s; }.scene-ai .agent-checks>span:nth-child(4) { animation-delay: -6s; }
.scene-hr .people-board>span { animation: atlasRowFocus 7.5s ease-in-out infinite; }.scene-hr .people-board>span:nth-child(2) { animation-delay: -2.5s; }.scene-hr .people-board>span:nth-child(3) { animation-delay: -5s; }
.scene-admin .settings-list>span { animation: atlasRowFocus 8s ease-in-out infinite; }.scene-admin .settings-list>span:nth-child(2) { animation-delay: -2s; }.scene-admin .settings-list>span:nth-child(3) { animation-delay: -4s; }.scene-admin .settings-list>span:nth-child(4) { animation-delay: -6s; }.scene-admin .toggle::after { animation: atlasToggle 8s ease-in-out infinite; }
.scene-superadmin .tenant-table p { animation: atlasRowFocus 7.5s ease-in-out infinite; }.scene-superadmin .tenant-table p:nth-of-type(2) { animation-delay: -2.5s; }.scene-superadmin .tenant-table p:nth-of-type(3) { animation-delay: -5s; }
.scene-help .help-icon { animation: miniLiquid 3s ease-in-out infinite; }.scene-help .help-modal { animation: atlasHelpLive 6s ease-in-out infinite; }.scene-help .help-modal button { animation: atlasConfirm 6s ease-in-out infinite; }
.scene-ops .ops-board>span { animation: atlasRowFocus 8s ease-in-out infinite; }.scene-ops .ops-board>span:nth-child(2) { animation-delay: -2s; }.scene-ops .ops-board>span:nth-child(3) { animation-delay: -4s; }.scene-ops .ops-board>span:nth-child(4) { animation-delay: -6s; }
.scene-lgpd .privacy-line::after { content: ""; position: absolute; z-index: 1; width: 22%; height: 2px; top: 9px; left: 10%; transform-origin: left; background: linear-gradient(90deg,#52efb2,#65dcff); box-shadow: 0 0 9px rgba(10,132,255,.4); animation: atlasPrivacyProgress 7s ease-in-out infinite; }
@keyframes atlasPipelineMove { 0%,10% { transform: translateX(0); } 42% { transform: translateX(275%); } 74%,90% { transform: translateX(550%); } 100% { transform: translateX(0); } }
@keyframes atlasRowFocus { 0%,18% { transform: translateX(3px); border-color: rgba(100,217,255,.36); background-color: rgba(12,60,99,.43); box-shadow: 0 8px 18px rgba(0,0,0,.12); } 21%,100% { transform: none; } }
@keyframes atlasConfirm { 0%,25%,100% { filter: none; } 36%,60% { border-color: rgba(99,255,190,.42); filter: brightness(1.2); box-shadow: 0 0 18px rgba(99,255,190,.08); } }
@keyframes atlasMetricRefresh { 0%,18% { transform: translateY(-2px); border-color: rgba(98,214,255,.3); filter: brightness(1.18); } 21%,100% { transform: none; filter: none; } }
@keyframes atlasDocScan { 0%,12%,100% { transform: translateY(0); opacity: 0; } 16% { opacity: 1; } 70%,86% { transform: translateY(68px); opacity: 1; } }
@keyframes atlasStamp { 0%,58% { opacity: .25; transform: scale(.88) rotate(-3deg); } 62%,90% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes atlasConnector { from { transform: translateX(-10px); } to { transform: translateX(30px); } }
@keyframes atlasStageFocus { 0%,17% { transform: translateY(-3px); border-color: rgba(101,216,255,.34); box-shadow: 0 10px 20px rgba(10,132,255,.08); } 20%,100% { transform: none; } }
@keyframes atlasToggle { 0%,72%,100% { filter: none; } 80%,91% { filter: brightness(1.7); box-shadow: 0 0 9px #5bd8ff; } }
@keyframes atlasHelpLive { 0%,18%,100% { transform: translateY(4px); opacity: .72; } 28%,88% { transform: none; opacity: 1; } }
@keyframes atlasPrivacyProgress { 0%,12% { transform: scaleX(.04); } 68%,89% { transform: scaleX(3.64); } 100% { transform: scaleX(.04); } }

/* Living product moments */
.preview-card { min-height: 690px; }
.demo { height: 350px; }
.process-head, .insight-head, .map-top, .genius-head { height: 54px; padding-right: 20px; padding-left: 20px; }
.process-head span, .insight-head span, .map-top span { font-size: 11px; }
.process-head strong, .insight-head b, .map-top strong { font-size: 10px; }
.process-step b { font-size: 10px; }.process-step small { font-size: 9px; }.process-foot { font-size: 10px; }
.insight-kpi { top: 73px; left: 26px; }.insight-kpi small { font-size: 10px; }.insight-kpi strong { font-size: 34px; }.insight-kpi em { top: 18px; font-size: 11px; }
.insight-chart { top: 70px; right: 26px; height: 116px; }
.insight-alert-stream { position: absolute; z-index: 6; right: 18px; bottom: 38px; left: 18px; height: 128px; overflow: hidden; pointer-events: none; mask-image: linear-gradient(transparent, black 18%, black 82%, transparent); }
.insight-alert { position: absolute; display: grid; width: min(330px, 66%); min-height: 52px; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; right: 0; bottom: -54px; padding: 9px 11px; border: 1px solid rgba(100,203,255,.23); border-radius: 11px; background: linear-gradient(135deg, rgba(9,43,78,.97), rgba(5,22,42,.96)); box-shadow: 0 16px 34px rgba(0,0,0,.3), 0 0 22px rgba(10,132,255,.1); animation: insightRise 13s linear infinite; }
.insight-alert:nth-child(2n) { right: auto; left: 0; }.insight-alert:nth-child(2) { animation-delay: -3.25s; }.insight-alert:nth-child(3) { animation-delay: -6.5s; }.insight-alert:nth-child(4) { animation-delay: -9.75s; }
.insight-alert > i { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(104,216,255,.42); border-radius: 9px; background: rgba(10,132,255,.13); color: #91e7ff; font-size: 14px; font-style: normal; font-weight: 900; box-shadow: 0 0 15px rgba(10,132,255,.14); }
.insight-alert p { min-width: 0; margin: 0; }.insight-alert p b, .insight-alert p span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.insight-alert p b { color: #deeffb; font-size: 11px; }.insight-alert p span { margin-top: 3px; color: #829db6; font-size: 9px; }.insight-alert > em { color: #70ffc1; font-size: 10px; font-style: normal; font-weight: 900; }
.insight-alert.alert-stock { border-color: rgba(255,197,85,.26); }.insight-alert.alert-stock > i, .insight-alert.alert-stock > em { color: #ffd477; }.insight-alert.alert-goal > i { color: #77ffc5; }
.insight-activity { position: absolute; z-index: 7; right: 18px; bottom: 10px; left: 18px; display: flex; align-items: center; justify-content: space-between; color: #66839e; font-size: 8px; font-weight: 800; }.insight-activity span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #67ffc1; box-shadow: 0 0 9px #67ffc1; animation: sceneStatus 1.5s ease-in-out infinite; }.insight-activity b { color: #77c9ef; font-size: 8px; }
@keyframes insightRise { 0% { opacity: 0; transform: translateY(22px) scale(.97); } 3%,42% { opacity: 1; } 45%,100% { opacity: 0; transform: translateY(-153px) scale(1); } }

.demo-genius { padding-top: 54px; }.demo-genius .genius-head { height: 54px; }
.genius-brand-liquid, .genius-brand-liquid canvas { width: 38px; height: 38px; }.genius-brand-liquid { filter: drop-shadow(0 0 13px rgba(10,132,255,.72)); }
.genius-head > div { gap: 11px; }.genius-head p b { font-size: 12px; }.genius-head p small { margin-top: 4px; font-size: 9px; }.genius-head > em { padding: 6px 8px; font-size: 9px; }
.chat-thread { position: absolute; inset: 54px 0 0; padding: 12px 17px 0; }
.chat-thread .chat-user { position: absolute; z-index: 3; width: 67%; top: 12px; right: 17px; margin: 0; padding: 10px 12px; opacity: 0; transform: translateY(7px) scale(.98); animation: none; transition: opacity .38s ease, transform .38s ease; }
.chat-thread.is-sent .chat-user { opacity: 1; transform: none; }
.chat-user small, .chat-answer > small { font-size: 9px; }.chat-user p, .chat-answer > p { margin-top: 5px; font-size: 11px; }
.chat-thinking { position: absolute; z-index: 4; display: grid; width: 72%; min-height: 60px; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; top: 78px; left: 17px; padding: 10px 12px; border: 1px solid rgba(93,184,255,.22); border-radius: 12px 12px 12px 3px; background: rgba(7,28,53,.96); box-shadow: 0 16px 34px rgba(0,0,0,.23); opacity: 0; transform: translateY(7px); transition: opacity .35s ease, transform .35s ease; }
.chat-thread.is-thinking .chat-thinking { opacity: 1; transform: none; }.thinking-orb { position: relative; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #66d9ff; border-radius: 48% 52% 42% 58%; background: radial-gradient(circle at 34% 30%, #a8edff, #0a84ff 30%, #072b52 68%); box-shadow: 0 0 17px rgba(10,132,255,.4); animation: miniLiquid 2.6s ease-in-out infinite; }.thinking-orb i { width: 14px; height: 14px; border: 1px dotted #c5f5ff; border-radius: 50%; animation: ringTurn 3s linear infinite; }.chat-thinking p { margin: 0; }.chat-thinking p b, .chat-thinking p small { display: block; }.chat-thinking p b { color: #dceefa; font-size: 11px; }.chat-thinking p small { margin-top: 3px; color: #7794ae; font-size: 9px; }.chat-thinking > em { display: flex; gap: 4px; }.chat-thinking > em i { width: 5px; height: 5px; border-radius: 50%; background: #79dfff; animation: thinkingDots 1.1s ease-in-out infinite; }.chat-thinking > em i:nth-child(2) { animation-delay: -.35s; }.chat-thinking > em i:nth-child(3) { animation-delay: -.7s; }
.chat-thread .chat-answer { position: absolute; z-index: 4; width: 84%; top: 77px; left: 17px; margin: 0; padding: 11px 13px; opacity: 0; transform: translateY(8px); animation: none; transition: opacity .42s ease, transform .42s ease; }.chat-thread.is-answered .chat-answer { opacity: 1; transform: none; }.chat-thread.is-answered .chat-thinking { opacity: 0; }
.chat-chart { margin-top: 10px; padding: 10px; }.chat-chart span { grid-template-columns: 58px 1fr 62px; gap: 8px; }.chat-chart b, .chat-chart em { font-size: 8px; }.chat-chart i { height: 7px; }.chat-chart i::after { transform: scaleX(.08); animation: none; }.chat-thread.is-answered .chat-chart i::after { animation: geniusGraphReveal 1.1s cubic-bezier(.2,.75,.2,1) forwards; }.chat-thread.is-answered .chat-chart span:nth-child(2) i::after { animation-delay: .12s; }.chat-thread.is-answered .chat-chart span:nth-child(3) i::after { animation-delay: .24s; }
.chat-composer { position: absolute; z-index: 7; display: grid; height: 41px; grid-template-columns: 1fr 2px 31px; gap: 7px; align-items: center; right: 17px; bottom: 10px; left: 17px; padding: 5px 5px 5px 13px; border: 1px solid rgba(105,203,255,.32); border-radius: 11px; background: rgba(5,22,42,.96); box-shadow: 0 0 0 3px rgba(10,132,255,.05), 0 14px 28px rgba(0,0,0,.25); }.chat-composer > span { overflow: hidden; color: #c8ddec; font-size: 10px; white-space: nowrap; }.typing-caret { width: 1px; height: 15px; background: #87e5ff; box-shadow: 0 0 7px #4bc6ff; animation: caretBlink .8s steps(1) infinite; }.chat-thread.is-sent .typing-caret { opacity: .35; }.chat-composer button { display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 8px; background: linear-gradient(135deg, #0a84ff, #69d8ff); color: #03111e; font-size: 15px; font-weight: 900; }.chat-thread.is-sent .chat-composer button { filter: saturate(.45); opacity: .72; }
.genius-foot { right: 19px; bottom: 58px; left: 19px; padding-top: 8px; font-size: 8px; }.genius-foot b { font-size: 8px; }
@keyframes thinkingDots { 0%,100% { opacity: .25; transform: translateY(2px); } 45% { opacity: 1; transform: translateY(-2px); } }
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes geniusGraphReveal { to { transform: scaleX(1); } }

/* Legibility layer for every tool demonstration */
.tool-card { min-height: 650px; }
.live-demo { height: 345px; }
.scene-shell { inset: 14px; grid-template-rows: 38px 1fr 35px; }
.scene-top, .scene-foot { padding-right: 15px; padding-left: 15px; }
.scene-top > b { font-size: 11px; }.scene-top > span { font-size: 11px; }.scene-foot { font-size: 11px; }.scene-foot b { font-size: 11px; }
.scene-body { padding: 15px 17px; font-size: 11px; }
.scene-body :where(small, em, p, span, button, pre, b) { font-size: 11px; }.scene-body :where(strong) { font-size: 14px; }
.scene-row { min-height: 27px; padding-right: 10px; padding-left: 10px; font-size: 11px; }.scene-row b { font-size: 11px; }
.scene-bars small { font-size: 11px; }
.checkout-items b, .product-grid article b, .crm-moment p b, .partner-entry p b, .works-timeline b, .payment-methods b, .picking-list b, .people-board b, .settings-list b, .ops-board b, .platform-stack b { font-size: 11px; }
.checkout-items small, .product-grid article small, .crm-moment p small, .partner-entry p small, .works-timeline small, .payment-methods small, .picking-list small, .people-board small, .settings-list small, .ops-board small, .platform-stack small { font-size: 11px; }
.scene-alert p b, .scene-alert p small { font-size: 11px; }
.demo .demo-readable-text, .scene-demo .demo-readable-text { font-size: 11px !important; }
.chat-composer > span { font-size: 11px; }

/* UI/UX Pro Max refinement: one operational language across all 42 live scenes. */
.tool-card {
  border-color: var(--border-subtle);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 86% 4%, rgba(42, 163, 255, .075), transparent 34%),
    linear-gradient(150deg, rgba(9, 25, 48, .96), rgba(3, 10, 23, .99));
  box-shadow: 0 28px 72px rgba(0, 4, 15, .38), inset 0 1px rgba(255, 255, 255, .035);
  transition: border-color var(--motion-base) var(--ease-out-expo), box-shadow var(--motion-base) var(--ease-out-expo);
}
.tool-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  height: 1px;
  top: 0;
  right: 18px;
  left: 18px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(139, 224, 255, .24), transparent);
}
.tool-card.is-scene-active {
  border-color: rgba(89, 190, 255, .24);
  box-shadow: 0 32px 82px rgba(0, 4, 15, .48), 0 0 0 1px rgba(10, 132, 255, .025), inset 0 1px rgba(255, 255, 255, .045);
}
.tool-copy small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(75, 198, 255, .16);
  border-radius: 999px;
  background: rgba(10, 132, 255, .07);
}
.tool-copy li {
  border-color: var(--border-subtle);
  background: rgba(10, 132, 255, .055);
}
.live-demo {
  isolation: isolate;
  contain: layout paint style;
  container-type: inline-size;
  border-bottom-color: var(--border-subtle);
  background:
    radial-gradient(circle at 78% 18%, rgba(43, 169, 255, .13), transparent 36%),
    linear-gradient(155deg, #081c36, #030914 78%);
}
.scene-demo { font-variant-numeric: tabular-nums; }
.scene-shell {
  isolation: isolate;
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(7, 23, 43, .93), rgba(3, 13, 28, .96));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .045);
}
.scene-shell::before {
  content: "";
  position: absolute;
  z-index: 8;
  height: 1px;
  top: 0;
  right: 12px;
  left: 12px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(144, 224, 255, .26), transparent);
}
.scene-top {
  border-bottom-color: var(--border-subtle);
  background: linear-gradient(180deg, rgba(14, 43, 76, .72), rgba(8, 28, 52, .46));
}
.scene-top > b { min-width: 0; color: #d5e8f8; letter-spacing: normal; }
.scene-top > span {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(103, 255, 193, .12);
  border-radius: 999px;
  background: rgba(30, 120, 85, .08);
  color: #8bacbf;
}
.scene-top > span i { background: var(--success); box-shadow: 0 0 9px var(--success); }
.scene-foot {
  border-top-color: var(--border-subtle);
  background: rgba(3, 12, 25, .54);
  color: #7894ad;
}
.scene-foot b { color: #a5dcf7; }
.scene-body {
  background:
    radial-gradient(circle at 92% 0, rgba(32, 142, 226, .065), transparent 42%),
    linear-gradient(180deg, rgba(4, 16, 33, .2), rgba(2, 9, 20, .08));
}
.scene-body :where(strong, b) { text-wrap: balance; }
.scene-body :where(.scene-row, article, .scene-alert, .commercial-alert, .crm-next-action, .partner-event, .portal-next, .portal-proof, .tool-genius-user, .tool-genius-thinking, .tool-genius-answer) {
  border-color: var(--border-subtle);
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}
.scene-row { border-radius: var(--radius-sm); background: rgba(12, 39, 70, .34); }
.scene-row.positive b { color: var(--success); }
.scene-row.attention b { color: var(--warning); }
.scene-progress i, .chat-chart i::after, .tool-genius-answer > div span > i::after { animation-timing-function: var(--ease-out-expo); }
.scene-sales .scene-pipeline::after { left: 15%; will-change: transform; }
.scene-fiscal .fiscal-doc::after { top: 7px; will-change: transform, opacity; }
.tool-genius-user, .tool-genius-thinking, .tool-genius-answer,
.portal-screen button span, .portal-screen button b { animation-timing-function: var(--ease-out-expo); }
.reveal { transition: opacity .55s var(--ease-out-expo), transform .55s var(--ease-out-expo); }

/* The four cinematic feature demos use the same minimum readable type as the atlas. */
.process-step b, .process-step small,
.process-head span, .process-head strong,
.insight-head span, .insight-head b,
.insight-kpi small, .insight-kpi em,
.insight-alert p b, .insight-alert p span, .insight-alert > em,
.map-top span, .map-top strong,
.delivery-bubble small, .delivery-bubble span,
.genius-head p small, .genius-head > em,
.chat-user small, .chat-answer > small,
.chat-thinking p small,
.chat-chart b, .chat-chart em,
.genius-foot, .genius-foot b { font-size: 11px; }
.process-step b, .process-step small { overflow: visible; line-height: 1.18; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.insight-alert { animation-timing-function: var(--ease-standard); }
.insight-alert p span { line-height: 1.18; white-space: normal; }

/* Operational clarity pass: each selected tool demonstrates cause and effect. */
.scene-sales .scene-body,
.scene-pos .scene-body,
.scene-catalog .scene-body,
.scene-commercial .scene-body,
.scene-stock .scene-body,
.scene-works .scene-body { padding: 12px 14px; }
.scene-sales .scene-body :where(small, b, span, em, p),
.scene-pos .scene-body :where(small, b, span, em, p),
.scene-catalog .scene-body :where(small, b, span, em, p),
.scene-commercial .scene-body :where(small, b, span, em, p),
.scene-stock .scene-body :where(small, b, span, em, p),
.scene-works .scene-body :where(small, b, span, em, p) { font-size: 11px; }

/* Pedido: a carga percorre cada etapa e confirma o resultado operacional. */
.order-summary { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 12px; }
.order-summary > div { min-width: 0; }
.order-summary small, .order-summary b { display: block; }
.order-summary small { color: #63819d; font-weight: 800; }
.order-summary b { overflow: hidden; margin-top: 2px; color: #d6eafa; text-overflow: ellipsis; white-space: nowrap; }
.order-summary > strong { flex: 0 0 auto; color: #e3f5ff; font-size: 18px; font-variant-numeric: tabular-nums; }
.order-journey { position: relative; height: 100px; margin-top: 3px; }
.order-rail { position: absolute; z-index: 1; height: 6px; top: 26px; right: 8%; left: 8%; overflow: hidden; border-radius: 999px; background: rgba(55,114,166,.24); box-shadow: inset 0 0 0 1px rgba(102,191,246,.08); }
.order-rail > i { position: absolute; width: 100%; height: 100%; transform: scaleX(.02); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #0a84ff, #66deff 72%, #69f7ba); box-shadow: 0 0 12px rgba(64,196,255,.5); animation: orderRailFill 8s var(--ease-out-expo) infinite; }
.order-rail > b { position: absolute; width: 24%; height: 100%; transform: translateX(-110%); border-radius: inherit; background: linear-gradient(90deg, transparent, #c7f6ff, transparent); filter: drop-shadow(0 0 6px #51ceff); animation: orderLoadTravel 8s var(--ease-standard) infinite; }
.order-stages { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
.order-step { display: grid; min-width: 0; justify-items: center; text-align: center; }
.order-step > span { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid #285b86; border-radius: 12px; background: linear-gradient(145deg, #0a2948, #06172c); color: #7797b2; box-shadow: 0 6px 15px rgba(0,0,0,.18); transform-origin: center; }
.order-step svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.order-step > b { overflow: hidden; width: 100%; margin-top: 6px; color: #bed2e2; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.order-step > small { margin-top: 2px; color: #67839d; line-height: 1.05; }
.order-step.step-quote > span { animation: orderStepOne 8s var(--ease-out-expo) infinite; }
.order-step.step-order > span { animation: orderStepTwo 8s var(--ease-out-expo) infinite; }
.order-step.step-stock > span { animation: orderStepThree 8s var(--ease-out-expo) infinite; }
.order-step.step-picking > span { animation: orderStepFour 8s var(--ease-out-expo) infinite; }
.order-result { display: grid; min-height: 48px; grid-template-columns: 1fr 1fr 1.08fr; gap: 5px; opacity: 0; transform: translateY(6px); animation: orderResultReady 8s var(--ease-out-expo) infinite; }
.order-result > span, .order-result > em { min-width: 0; border: 1px solid rgba(91,176,250,.13); border-radius: 8px; background: rgba(9,36,66,.54); }
.order-result > span { display: grid; grid-template-columns: 7px 1fr; column-gap: 5px; align-content: center; padding: 5px 7px; }
.order-result > span > i { width: 6px; height: 6px; grid-row: 1 / 3; align-self: center; border-radius: 50%; background: #69f7ba; box-shadow: 0 0 8px #69f7ba; }
.order-result > span > b, .order-result > span > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-result > span > b { color: #d1e6f4; }.order-result > span > small { color: #71ffc0; }
.order-result > em { display: grid; place-content: center; padding: 5px; border-color: rgba(102,255,193,.2); background: rgba(22,105,75,.14); color: #7affc4; font-style: normal; font-weight: 900; line-height: 1.1; text-align: center; }
@keyframes orderRailFill { 0%,7% { transform: scaleX(.02); } 22% { transform: scaleX(.18); } 42% { transform: scaleX(.48); } 62% { transform: scaleX(.76); } 78%,91% { transform: scaleX(1); } 100% { transform: scaleX(.02); } }
@keyframes orderLoadTravel { 0%,7% { transform: translateX(-110%); opacity: 0; } 11% { opacity: 1; } 78%,91% { transform: translateX(420%); opacity: 1; } 96%,100% { opacity: 0; transform: translateX(420%); } }
@keyframes orderStepOne { 0%,5%,100% { border-color:#285b86; background:#0a2948; color:#7797b2; transform:scale(.92); } 9%,18% { border-color:#70dcff; background:#0a72bd; color:white; transform:scale(1.08); box-shadow:0 0 18px rgba(75,198,255,.55); } 23%,92% { border-color:#69f7ba; background:#125c46; color:#9affd4; transform:none; } }
@keyframes orderStepTwo { 0%,20%,100% { border-color:#285b86; background:#0a2948; color:#7797b2; transform:scale(.92); } 25%,36% { border-color:#70dcff; background:#0a72bd; color:white; transform:scale(1.08); box-shadow:0 0 18px rgba(75,198,255,.55); } 42%,92% { border-color:#69f7ba; background:#125c46; color:#9affd4; transform:none; } }
@keyframes orderStepThree { 0%,40%,100% { border-color:#285b86; background:#0a2948; color:#7797b2; transform:scale(.92); } 45%,56% { border-color:#70dcff; background:#0a72bd; color:white; transform:scale(1.08); box-shadow:0 0 18px rgba(75,198,255,.55); } 62%,92% { border-color:#69f7ba; background:#125c46; color:#9affd4; transform:none; } }
@keyframes orderStepFour { 0%,60%,100% { border-color:#285b86; background:#0a2948; color:#7797b2; transform:scale(.92); } 65%,76% { border-color:#70dcff; background:#0a72bd; color:white; transform:scale(1.08); box-shadow:0 0 18px rgba(75,198,255,.55); } 81%,92% { border-color:#69f7ba; background:#125c46; color:#9affd4; transform:none; } }
@keyframes orderResultReady { 0%,76%,100% { opacity:0; transform:translateY(6px); } 81%,93% { opacity:1; transform:none; } }

/* Caixa: os itens entram individualmente e o total acompanha a soma real. */
.pos-checkout { display: grid; height: 100%; grid-template-columns: minmax(0,1.35fr) minmax(112px,.65fr); gap: 9px; }
.pos-receipt { min-width: 0; }
.pos-reader { position: relative; display: grid; min-height: 34px; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; overflow: hidden; padding: 5px 8px; border: 1px solid rgba(90,174,246,.16); border-radius: 8px; background: rgba(7,29,55,.7); color: #7fa0bb; }
.pos-reader svg { width: 20px; height: 20px; fill: none; stroke: #71d9ff; stroke-width: 1.5; }
.pos-reader > i { width: 6px; height: 6px; border-radius: 50%; background: #6af7ba; box-shadow: 0 0 8px #6af7ba; animation: sceneStatus 1.5s ease-in-out infinite; }
.pos-reader::after { content:""; position:absolute; width:28%; height:100%; left:-35%; background:linear-gradient(90deg,transparent,rgba(112,222,255,.22),transparent); animation: posReaderScan 9s var(--ease-standard) infinite; }
.pos-items { display: grid; gap: 6px; margin-top: 7px; }
.pos-item { display: grid; min-width: 0; min-height: 57px; grid-template-columns: 34px minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 6px 8px; border: 1px solid rgba(94,174,241,.14); border-radius: 8px; background: linear-gradient(135deg, rgba(11,48,83,.58), rgba(5,23,45,.7)); opacity: 0; transform: translateY(8px) scale(.98); }
.pos-item > i { width: 31px; height: 36px; margin: 0; }
.pos-item p { min-width: 0; margin: 0; }
.pos-item p b, .pos-item p small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pos-item p b { color:#d8e9f6; }.pos-item p small { margin-top:3px; color:#7592ab; }
.pos-item > em { color:#9edfff; font-style:normal; font-weight:900; white-space:nowrap; }
.pos-item-one { animation: posItemOne 9s var(--ease-out-expo) infinite; }
.pos-item-two { animation: posItemTwo 9s var(--ease-out-expo) infinite; }
.pos-total-panel { position:relative; display:flex; min-width:0; flex-direction:column; justify-content:center; padding:10px; border:1px solid rgba(88,187,255,.23); border-radius:10px; background:linear-gradient(145deg,rgba(12,79,132,.26),rgba(5,25,48,.72)); box-shadow:inset 0 0 28px rgba(10,132,255,.05); }
.pos-total-panel > small { color:#6d8ca7; font-weight:800; }
.pos-total-values { position:relative; height:38px; margin:7px 0 3px; }
.pos-total-values > strong { position:absolute; inset:0; display:flex; align-items:center; color:#e6f6ff; font-size:clamp(17px,1.7vw,24px); font-variant-numeric:tabular-nums; line-height:1; opacity:0; }
.pos-total-values .total-zero { animation:posTotalZero 9s ease-in-out infinite; }.pos-total-values .total-one { animation:posTotalOne 9s ease-in-out infinite; }.pos-total-values .total-final { animation:posTotalFinal 9s ease-in-out infinite; }
.pos-total-panel > span { color:#7895af; line-height:1.2; }
.pos-payment-state { position:relative; height:32px; margin-top:13px; }
.pos-payment-state > b, .pos-payment-state > em { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:5px; border-radius:7px; font-style:normal; font-weight:900; }
.pos-payment-state > b { border:1px solid rgba(101,183,240,.17); background:rgba(10,71,119,.14); color:#82b8d5; animation:posWaiting 9s ease-in-out infinite; }
.pos-payment-state > b i { width:7px; height:7px; border:1px solid #69d8ff; border-top-color:transparent; border-radius:50%; animation:ringTurn 1.1s linear infinite; }
.pos-payment-state > em { border:1px solid rgba(105,247,186,.2); background:rgba(23,112,78,.16); color:#78ffc4; opacity:0; transform:translateY(5px); animation:posApproved 9s var(--ease-out-expo) infinite; }
.pos-payment-state > em i { display:grid; width:16px; height:16px; place-items:center; border-radius:50%; background:#176e52; color:#a1ffda; font-style:normal; }
@keyframes posReaderScan { 0%,4% { transform:translateX(0); opacity:0; } 9%,34% { opacity:1; } 38%,100% { transform:translateX(480%); opacity:0; } }
@keyframes posItemOne { 0%,11%,100% { opacity:0; transform:translateY(8px) scale(.98); } 15%,90% { opacity:1; transform:none; } 18%,24% { border-color:rgba(105,247,186,.48); box-shadow:0 0 18px rgba(54,234,164,.08); } }
@keyframes posItemTwo { 0%,34%,100% { opacity:0; transform:translateY(8px) scale(.98); } 38%,90% { opacity:1; transform:none; } 41%,47% { border-color:rgba(105,247,186,.48); box-shadow:0 0 18px rgba(54,234,164,.08); } }
@keyframes posTotalZero { 0%,11% { opacity:1; } 15%,100% { opacity:0; transform:translateY(-3px); } }
@keyframes posTotalOne { 0%,13%,36%,100% { opacity:0; transform:translateY(4px); } 16%,33% { opacity:1; transform:none; } }
@keyframes posTotalFinal { 0%,36%,100% { opacity:0; transform:translateY(4px); } 40%,92% { opacity:1; transform:none; } 43%,48% { filter:brightness(1.55); transform:scale(1.04); transform-origin:left; } }
@keyframes posWaiting { 0%,54% { opacity:1; transform:none; } 59%,100% { opacity:0; transform:translateY(-3px); } }
@keyframes posApproved { 0%,54%,100% { opacity:0; transform:translateY(5px); } 59%,91% { opacity:1; transform:none; } }

/* Catálogo: a cena mostra pergunta, filtros, comparação e recomendação. */
.catalog-query { display:grid; min-height:34px; grid-template-columns:20px minmax(0,1fr) 2px auto; gap:7px; align-items:center; padding:5px 8px; border:1px solid rgba(96,180,248,.19); border-radius:8px; background:rgba(5,23,44,.84); }
.catalog-query svg, .catalog-reason svg { width:18px; height:18px; fill:none; stroke:#6bd9ff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.catalog-query > span { overflow:hidden; width:max-content; max-width:100%; color:#c9dfef; white-space:nowrap; clip-path:inset(0 100% 0 0); animation:catalogTyping 9s steps(26,end) infinite; }
.catalog-query > i { width:1px; height:16px; background:#83e6ff; box-shadow:0 0 7px #4bc6ff; animation:caretBlink .8s steps(1) infinite; }
.catalog-query > em { padding:4px 6px; border-radius:5px; background:rgba(10,132,255,.17); color:#83dcff; font-style:normal; font-weight:900; }
.catalog-filters { display:flex; min-height:28px; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.catalog-filters > div { display:flex; min-width:0; gap:4px; }
.catalog-filters span { padding:4px 6px; border:1px solid rgba(97,190,248,.17); border-radius:999px; background:rgba(10,132,255,.08); color:#87b5d0; opacity:0; transform:translateY(4px); animation:catalogFilterIn 9s var(--ease-out-expo) infinite; white-space:nowrap; }
.catalog-filters span:nth-child(2) { animation-delay:.08s; }.catalog-filters span:nth-child(3) { animation-delay:.16s; }
.catalog-filters > b { flex:0 0 auto; color:#72ffc1; opacity:0; animation:catalogResultsIn 9s ease-in-out infinite; }
.catalog-results { display:grid; height:91px; grid-template-columns:1.32fr .68fr; gap:6px; margin-top:5px; }
.catalog-results article { border:1px solid rgba(94,177,242,.15); border-radius:8px; background:linear-gradient(145deg,rgba(12,48,81,.56),rgba(5,22,42,.68)); }
.catalog-best { display:grid; min-width:0; grid-template-columns:58px minmax(0,1fr); gap:8px; align-items:center; padding:7px; opacity:0; transform:translateY(6px); animation:catalogBestIn 9s var(--ease-out-expo) infinite; }
.catalog-best > i { width:56px; height:56px; margin:0; }
.catalog-best > div { min-width:0; }
.catalog-best small, .catalog-best b, .catalog-best span, .catalog-best em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.catalog-best small { color:#69f7ba; font-weight:900; }.catalog-best b { margin-top:3px; color:#e0effa; }.catalog-best span { margin-top:3px; color:#7e9bb4; }.catalog-best em { width:max-content; max-width:100%; margin-top:5px; padding:3px 5px; border-radius:5px; background:rgba(35,147,104,.17); color:#79ffc5; font-style:normal; font-weight:900; }
.catalog-options { display:grid; gap:5px; }
.catalog-options article { display:grid; min-width:0; grid-template-columns:34px minmax(0,1fr); gap:6px; align-items:center; padding:5px; opacity:0; transform:translateX(6px); animation:catalogOptionIn 9s var(--ease-out-expo) infinite; }
.catalog-options article:nth-child(2) { animation-delay:.12s; }
.catalog-options article > i { width:32px; height:30px; margin:0; }
.catalog-options p { min-width:0; margin:0; }.catalog-options p b,.catalog-options p small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.catalog-options p b { color:#c8dbe9; }.catalog-options p small { margin-top:2px; color:#728ca5; }
.catalog-reason { display:grid; min-height:39px; grid-template-columns:25px 1fr; gap:7px; align-items:center; margin-top:6px; padding:5px 8px; border:1px solid rgba(105,247,186,.18); border-radius:8px; background:linear-gradient(90deg,rgba(21,105,74,.15),rgba(8,35,59,.55)); opacity:0; transform:translateY(5px); animation:catalogReasonIn 9s var(--ease-out-expo) infinite; }
.catalog-reason svg { stroke:#7affc4; }.catalog-reason span b,.catalog-reason span small { display:block; }.catalog-reason span b { color:#d8f1e7; }.catalog-reason span small { margin-top:2px; color:#789d90; }
@keyframes catalogTyping { 0%,6%,100% { clip-path:inset(0 100% 0 0); } 24%,91% { clip-path:inset(0 0 0 0); } }
@keyframes catalogFilterIn { 0%,24%,100% { opacity:0; transform:translateY(4px); } 29%,91% { opacity:1; transform:none; } }
@keyframes catalogResultsIn { 0%,29%,100% { opacity:0; } 34%,91% { opacity:1; } }
@keyframes catalogBestIn { 0%,32%,100% { opacity:0; transform:translateY(6px); } 38%,91% { opacity:1; transform:none; } 55%,66% { border-color:rgba(102,226,255,.52); box-shadow:0 0 22px rgba(10,132,255,.13); } }
@keyframes catalogOptionIn { 0%,40%,100% { opacity:0; transform:translateX(6px); } 46%,91% { opacity:1; transform:none; } }
@keyframes catalogReasonIn { 0%,58%,100% { opacity:0; transform:translateY(5px); } 64%,91% { opacity:1; transform:none; } }

/* Gestão comercial: a oportunidade viaja em uma faixa exclusiva, acima das legendas. */
.commercial-journey { height:98px; margin:2px 0 5px; }
.commercial-track { position:relative; height:35px; margin:0 13px; --deal-travel:420px; --deal-step-one:140px; --deal-step-two:280px; }
.commercial-track::before { content:""; position:absolute; height:3px; top:14px; right:0; left:0; border-radius:999px; background:#153f65; box-shadow:inset 0 0 0 1px rgba(91,184,245,.08); }
.commercial-track > i { position:absolute; z-index:1; width:100%; height:3px; top:14px; left:0; transform:scaleX(.02); transform-origin:left; border-radius:999px; background:linear-gradient(90deg,#0a84ff,#65dcff,#69f7ba); box-shadow:0 0 10px rgba(75,198,255,.45); animation:commercialTrackFill 8s var(--ease-out-expo) infinite; }
.commercial-node { position:absolute; z-index:2; width:11px; height:11px; top:10px; transform:translateX(-50%); border:2px solid #3b7dab; border-radius:50%; background:#07192d; }
.commercial-node.node-one { left:0; }.commercial-node.node-two { left:33.333%; }.commercial-node.node-three { left:66.666%; }.commercial-node.node-four { left:100%; }
.commercial-track .deal-signal { position:absolute; z-index:4; width:29px; height:29px; top:1px; left:0; display:grid; place-items:center; border:2px solid #99ebff; border-radius:50%; background:linear-gradient(145deg,#1187d5,#084d89); color:#effcff; font-weight:900; box-shadow:0 0 17px rgba(75,198,255,.7); animation:dealTravelClear 8s var(--ease-standard) infinite; will-change:transform; }
.commercial-stage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.commercial-stage-grid article { display:grid; min-width:0; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:1px 5px; padding:6px 7px; border:1px solid rgba(89,167,237,.12); border-radius:7px; background:rgba(8,31,58,.52); }
.commercial-stage-grid small { grid-column:1 / -1; min-height:22px; overflow:visible; color:#738fa8; font-weight:800; line-height:1.02; text-overflow:clip; white-space:normal; }.commercial-stage-grid strong { grid-row:2; color:#d8ecfa; font-size:15px; }.commercial-stage-grid em { grid-column:2; grid-row:2; align-self:center; color:#7090aa; font-style:normal; font-weight:900; }
.commercial-stage-grid .stage-lead { animation:commercialStageOne 8s var(--ease-out-expo) infinite; }.commercial-stage-grid .stage-qualified { animation:commercialStageTwo 8s var(--ease-out-expo) infinite; }.commercial-stage-grid .stage-proposal { animation:commercialStageThree 8s var(--ease-out-expo) infinite; }.commercial-stage-grid .stage-won { animation:commercialStageFour 8s var(--ease-out-expo) infinite; }
@keyframes commercialTrackFill { 0%,7% { transform:scaleX(.02); } 28% { transform:scaleX(.34); } 52% { transform:scaleX(.67); } 76%,91% { transform:scaleX(1); } 100% { transform:scaleX(.02); } }
@keyframes dealTravelClear { 0%,7% { transform:translateX(-14px); } 28% { transform:translateX(var(--deal-step-one)); } 52% { transform:translateX(var(--deal-step-two)); } 76%,91% { transform:translateX(var(--deal-travel)); } 100% { transform:translateX(-14px); } }
@keyframes commercialStageOne { 0%,7%,100% { border-color:rgba(89,167,237,.12); transform:none; } 10%,24% { border-color:rgba(105,220,255,.45); background:rgba(10,92,151,.22); transform:translateY(-2px); } }
@keyframes commercialStageTwo { 0%,27%,100% { border-color:rgba(89,167,237,.12); transform:none; } 30%,48% { border-color:rgba(105,220,255,.45); background:rgba(10,92,151,.22); transform:translateY(-2px); } }
@keyframes commercialStageThree { 0%,51%,100% { border-color:rgba(89,167,237,.12); transform:none; } 54%,72% { border-color:rgba(105,220,255,.45); background:rgba(10,92,151,.22); transform:translateY(-2px); } }
@keyframes commercialStageFour { 0%,75%,100% { border-color:rgba(89,167,237,.12); transform:none; } 78%,91% { border-color:rgba(105,247,186,.5); background:rgba(24,112,79,.2); transform:translateY(-2px); } }

/* Estoque: mapa, endereço encontrado e ação de reposição no mesmo olhar. */
.inventory-legend { display:flex; min-height:23px; align-items:center; gap:12px; color:#7f9bb4; }
.inventory-legend > span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.inventory-legend i { width:9px; height:9px; border:1px solid rgba(87,154,214,.3); border-radius:2px; background:rgba(31,76,117,.28); }
.inventory-legend i.available { background:#1986cf; box-shadow:0 0 6px rgba(52,170,240,.35); }.inventory-legend i.low { background:#d3942d; }
.inventory-layout { display:grid; height:171px; grid-template-columns:minmax(0,1.28fr) minmax(125px,.72fr); gap:8px; margin-top:5px; }
.inventory-map { position:relative; display:grid; min-width:0; grid-template-columns:1fr 1fr; gap:6px; overflow:hidden; padding:6px; border:1px solid rgba(90,171,239,.15); border-radius:9px; background:rgba(5,23,44,.62); }
.inventory-map article { position:relative; display:grid; min-width:0; grid-template-columns:25px 1fr auto; gap:5px; align-items:center; padding:6px; border:1px solid rgba(86,162,228,.13); border-radius:7px; background:rgba(10,38,68,.48); }
.inventory-map article > b { color:#9ab8cf; }.inventory-map article > small { color:#66849d; white-space:nowrap; }
.inventory-map article > div { display:grid; min-width:0; grid-template-columns:repeat(3,1fr); gap:3px; }
.inventory-map article > div > i { position:relative; height:27px; border:1px solid rgba(76,136,190,.13); border-radius:3px; background:rgba(25,64,103,.26); }
.inventory-map article > div > i.available { background:linear-gradient(180deg,#2098e1,#0a477d); box-shadow:inset 0 0 8px rgba(118,221,255,.18); }
.inventory-map article > div > i.low { background:linear-gradient(180deg,#f2b948,#9b6718); }
.inventory-map article.is-located { border-color:rgba(255,199,88,.4); background:linear-gradient(135deg,rgba(105,69,14,.2),rgba(8,34,59,.58)); animation:inventoryLocated 6.8s ease-in-out infinite; }
.inventory-map article.is-located i.low > em { position:absolute; width:9px; height:9px; top:50%; left:50%; transform:translate(-50%,-50%); border:2px solid #fff0b9; border-radius:50%; box-shadow:0 0 8px #ffc957; }
.inventory-map article.is-located i.low > em::after { content:""; position:absolute; inset:-6px; border:1px solid #ffd06b; border-radius:50%; animation:inventoryPing 1.8s ease-out infinite; }
.inventory-scan { position:absolute; z-index:5; height:2px; top:8px; right:8px; left:8px; background:linear-gradient(90deg,transparent,#78deff,transparent); box-shadow:0 0 8px #0a84ff; opacity:0; animation:inventoryScan 6.8s var(--ease-standard) infinite; }
.inventory-detail { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:10px; border:1px solid rgba(255,199,88,.2); border-radius:9px; background:linear-gradient(145deg,rgba(94,64,13,.16),rgba(5,27,50,.72)); opacity:0; transform:translateX(7px); animation:inventoryDetailIn 6.8s var(--ease-out-expo) infinite; }
.inventory-detail > small { color:#a68a58; font-weight:800; }.inventory-detail > strong { margin-top:5px; color:#ffd275; font-size:15px; }.inventory-detail > b { margin-top:9px; color:#e0edf7; }.inventory-detail > span { margin-top:3px; color:#7f9bb3; line-height:1.2; }.inventory-detail > em { margin-top:10px; padding:6px; border-radius:6px; background:rgba(255,196,75,.13); color:#ffd374; font-style:normal; font-weight:900; text-align:center; }
@keyframes inventoryScan { 0%,7% { opacity:0; transform:translateY(0); } 13%,46% { opacity:1; } 50%,100% { opacity:0; transform:translateY(138px); } }
@keyframes inventoryLocated { 0%,44%,100% { filter:none; } 51%,88% { filter:brightness(1.18); box-shadow:0 0 18px rgba(255,195,73,.09); } }
@keyframes inventoryPing { 0% { opacity:.85; transform:scale(.5); } 80%,100% { opacity:0; transform:scale(1.55); } }
@keyframes inventoryDetailIn { 0%,47%,100% { opacity:0; transform:translateX(7px); } 54%,91% { opacity:1; transform:none; } }

/* Obras: o desenho da estrutura, a etapa atual e a entrega explicam o uso. */
.works-overview { display:grid; min-height:29px; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; }
.works-overview > span { display:flex; align-items:baseline; gap:7px; }.works-overview small { color:#6d8aa5; font-weight:800; }.works-overview strong { color:#e0f2ff; font-size:18px; }
.works-overall-progress { height:6px; overflow:hidden; border-radius:999px; background:rgba(60,122,179,.2); }.works-overall-progress i { display:block; width:68%; height:100%; transform:scaleX(.05); transform-origin:left; border-radius:inherit; background:linear-gradient(90deg,#0a84ff,#68dcff); box-shadow:0 0 8px rgba(75,198,255,.45); animation:worksProgress 7.5s var(--ease-out-expo) infinite; }
.works-overview > em { padding:4px 6px; border-radius:999px; background:rgba(28,119,84,.13); color:#72ffc0; font-style:normal; font-weight:900; }
.works-live { display:grid; height:137px; grid-template-columns:minmax(115px,.8fr) minmax(0,1.2fr); gap:8px; margin-top:4px; }
.works-site { position:relative; overflow:hidden; border:1px solid rgba(89,171,239,.14); border-radius:9px; background:linear-gradient(180deg,rgba(12,55,91,.4),rgba(5,23,43,.68)); }
.works-site::before { content:""; position:absolute; width:80px; height:80px; top:12px; right:8px; border-radius:50%; background:radial-gradient(circle,rgba(68,181,243,.12),transparent 68%); }
.works-ground { position:absolute; height:3px; right:10px; bottom:17px; left:10px; background:#315b72; box-shadow:0 4px 0 rgba(81,116,121,.2); }
.works-building { position:absolute; width:105px; height:91px; right:13px; bottom:20px; }
.works-foundation,.works-column,.works-beam { position:absolute; display:block; border-radius:2px; background:linear-gradient(180deg,#72dfff,#1678b5); box-shadow:0 0 7px rgba(75,198,255,.22); }
.works-foundation { width:100%; height:8px; bottom:0; }.works-column { width:6px; height:70px; bottom:8px; transform:scaleY(.04); transform-origin:bottom; animation:worksColumnRise 7.5s var(--ease-out-expo) infinite; }.works-column.column-a { left:8px; }.works-column.column-b { left:50px; animation-delay:.08s; }.works-column.column-c { right:8px; animation-delay:.16s; }
.works-beam { width:100%; height:6px; left:0; transform:scaleX(.04); transform-origin:left; animation:worksBeamSet 7.5s var(--ease-out-expo) infinite; }.works-beam.beam-one { bottom:41px; }.works-beam.beam-two { bottom:74px; animation-delay:.15s; }
.works-crane { position:absolute; width:104px; height:72px; top:7px; left:6px; border-left:3px solid rgba(93,177,224,.55); }.works-crane::before { content:""; position:absolute; width:76px; height:3px; top:0; left:0; background:rgba(104,200,245,.6); }.works-crane > i { position:absolute; width:1px; height:48px; top:2px; right:12px; background:#6ccdec; transform-origin:top; animation:worksHook 7.5s var(--ease-standard) infinite; }.works-crane > b { position:absolute; width:9px; height:6px; top:46px; right:8px; border:1px solid #8fe7ff; border-top:0; transform-origin:top; animation:worksHookLoad 7.5s var(--ease-standard) infinite; }
.works-current { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:8px 10px; border:1px solid rgba(91,175,241,.14); border-radius:9px; background:rgba(7,29,54,.57); }
.works-current > small { color:#69d9ff; font-weight:900; }.works-current > strong { margin-top:3px; color:#dcecf8; font-size:15px; }.works-current > span { margin-top:3px; color:#7895ad; }
.works-delivery { display:grid; min-width:0; grid-template-columns:32px minmax(0,1fr) auto; gap:7px; align-items:center; margin-top:9px; padding:6px; border:1px solid rgba(105,247,186,.17); border-radius:7px; background:rgba(22,104,74,.13); opacity:0; transform:translateX(8px); animation:worksDeliveryIn 7.5s var(--ease-out-expo) infinite; }
.works-delivery svg { width:31px; height:24px; fill:none; stroke:#78ffc4; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.works-delivery p { min-width:0; margin:0; }.works-delivery p b,.works-delivery p small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.works-delivery p b { color:#d8f2e6; }.works-delivery p small { margin-top:2px; color:#79a290; }.works-delivery > em { color:#75ffc1; font-style:normal; font-weight:900; }
.works-stage-strip { display:grid; min-height:31px; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:5px; }
.works-stage-strip > span { display:flex; min-width:0; align-items:center; justify-content:center; gap:5px; overflow:hidden; padding:5px; border:1px solid rgba(85,159,224,.12); border-radius:7px; background:rgba(8,31,58,.48); color:#708da6; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.works-stage-strip > span i { display:grid; width:17px; height:17px; flex:0 0 17px; place-items:center; border:1px solid #3d7098; border-radius:50%; color:#7d9db6; font-style:normal; }.works-stage-strip > span.done { color:#8dcdb1; }.works-stage-strip > span.done i { border-color:#69f7ba; background:#155e48; color:#8fffd0; }.works-stage-strip > span.active { border-color:rgba(101,216,255,.33); color:#c5eaff; animation:worksStageActive 2.2s ease-in-out infinite; }.works-stage-strip > span.active i { border-color:#6fdcff; background:#0a70b9; color:white; }
@keyframes worksProgress { 0%,8%,100% { transform:scaleX(.05); } 46%,91% { transform:scaleX(1); } }
@keyframes worksColumnRise { 0%,15%,100% { transform:scaleY(.04); opacity:.25; } 32%,91% { transform:scaleY(1); opacity:1; } }
@keyframes worksBeamSet { 0%,31%,100% { transform:scaleX(.04); opacity:.25; } 47%,91% { transform:scaleX(1); opacity:1; } }
@keyframes worksHook { 0%,20%,100% { transform:scaleY(.32); } 39%,58% { transform:scaleY(1); } 72%,91% { transform:scaleY(.55); } }
@keyframes worksHookLoad { 0%,20%,100% { transform:translateY(-30px); opacity:0; } 39%,58% { transform:none; opacity:1; } 72%,91% { transform:translateY(-18px); opacity:.5; } }
@keyframes worksDeliveryIn { 0%,56%,100% { opacity:0; transform:translateX(8px); } 63%,91% { opacity:1; transform:none; } }
@keyframes worksStageActive { 50% { border-color:rgba(101,216,255,.56); box-shadow:0 0 16px rgba(10,132,255,.08); } }

/* BI: KPIs, participação e ranking ocupam áreas próprias e nunca disputam o texto. */
.bi-dashboard-v2 { display:grid; height:100%; grid-template-rows:52px minmax(0,1fr); gap:7px; }
.bi-kpi-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.bi-kpi-strip > span { display:grid; min-width:0; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; gap:1px 5px; align-items:end; padding:7px 8px; border:1px solid rgba(91,176,244,.14); border-radius:8px; background:linear-gradient(145deg,rgba(10,47,81,.58),rgba(5,24,46,.7)); animation:biKpiSignal 8s var(--ease-out-expo) infinite; }
.bi-kpi-strip > span:nth-child(2) { animation-delay:.12s; }.bi-kpi-strip > span:nth-child(3) { animation-delay:.24s; }
.bi-kpi-strip small { grid-column:1 / -1; overflow:hidden; color:#7896af; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.bi-kpi-strip b { color:#e1f2fd; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bi-kpi-strip em { justify-self:end; color:#70ffc1; font-style:normal; font-weight:900; text-align:right; white-space:nowrap; }
.bi-chart-grid-v2 { display:grid; min-height:0; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:7px; }
.bi-donut-panel,.bi-bar-panel { min-width:0; overflow:hidden; padding:8px 9px; border:1px solid rgba(91,177,244,.15); border-radius:9px; background:linear-gradient(145deg,rgba(9,38,68,.66),rgba(4,20,40,.76)); }
.bi-donut-panel > header,.bi-bar-panel > header { display:flex; min-height:17px; align-items:center; justify-content:space-between; gap:7px; border-bottom:1px solid rgba(82,153,217,.12); }
.bi-donut-panel header b,.bi-bar-panel header b { color:#bcd4e5; font-weight:900; }.bi-donut-panel header em,.bi-bar-panel header em { color:#62829e; font-style:normal; font-weight:800; white-space:nowrap; }
.bi-donut-body { display:grid; height:calc(100% - 18px); grid-template-columns:minmax(82px,.88fr) minmax(82px,1.12fr); gap:7px; align-items:center; }
.bi-donut { position:relative; display:grid; width:90px; height:90px; place-items:center; margin:auto; }
.bi-donut svg { width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.bi-donut circle { fill:none; stroke-width:6.2; }.bi-donut .donut-track { stroke:rgba(42,88,128,.3); }
.bi-donut .donut-segment { stroke-linecap:round; transform-origin:center; filter:drop-shadow(0 0 3px rgba(75,198,255,.26)); }
.bi-donut .segment-one { stroke:#55d6ff; stroke-dasharray:50 50; animation:biDonutOne 8s var(--ease-out-expo) infinite; }
.bi-donut .segment-two { stroke:#0a84ff; stroke-dasharray:28 72; stroke-dashoffset:-53; animation:biDonutTwo 8s var(--ease-out-expo) infinite; }
.bi-donut .segment-three { stroke:#69f7ba; stroke-dasharray:16 84; stroke-dashoffset:-84; animation:biDonutThree 8s var(--ease-out-expo) infinite; }
.bi-donut > span { position:absolute; display:grid; place-items:center; line-height:1; }.bi-donut > span b { color:#e7f8ff; font-size:17px; }.bi-donut > span small { height:13px; margin-top:3px; overflow:visible; color:#7294ae; font-weight:800; line-height:13px; }
.bi-donut-legend { display:grid; gap:7px; }.bi-donut-legend > span { display:grid; min-width:0; grid-template-columns:8px minmax(0,1fr) auto; gap:5px; align-items:center; }
.bi-donut-legend i { width:7px; height:7px; border-radius:50%; background:#55d6ff; box-shadow:0 0 6px rgba(85,214,255,.45); }.bi-donut-legend span:nth-child(2) i { background:#0a84ff; }.bi-donut-legend span:nth-child(3) i { background:#69f7ba; }
.bi-donut-legend b { overflow:hidden; color:#91adc2; text-overflow:ellipsis; white-space:nowrap; }.bi-donut-legend em { color:#d7eaf7; font-style:normal; font-weight:900; }
.bi-ranked-bars { display:grid; height:calc(100% - 20px); grid-template-rows:repeat(4,1fr); gap:4px; padding-top:5px; }
.bi-ranked-bars > span { display:grid; min-width:0; grid-template-columns:76px minmax(35px,1fr) 47px; gap:7px; align-items:center; }
.bi-ranked-bars small { overflow:hidden; color:#8ba7bd; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.bi-ranked-bars i { position:relative; height:9px; overflow:hidden; border-radius:999px; background:rgba(42,94,139,.27); }
.bi-ranked-bars i::after { content:""; position:absolute; inset:0; transform:scaleX(var(--bar)); transform-origin:left; border-radius:inherit; background:linear-gradient(90deg,#0a84ff,#69d9ff); box-shadow:0 0 8px rgba(64,191,255,.36); animation:biBarGrow 8s var(--ease-out-expo) infinite; }
.bi-ranked-bars span:nth-child(2) i::after { animation-delay:.08s; }.bi-ranked-bars span:nth-child(3) i::after { animation-delay:.16s; }.bi-ranked-bars span:nth-child(4) i::after { animation-delay:.24s; }
.bi-ranked-bars b { color:#c9dfed; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
@keyframes biKpiSignal { 0%,7%,100% { border-color:rgba(91,176,244,.14); transform:none; } 13%,22% { border-color:rgba(105,220,255,.42); transform:translateY(-1px); } }
@keyframes biDonutOne { 0%,8%,100% { stroke-dasharray:0 100; opacity:.2; } 28%,92% { stroke-dasharray:50 50; opacity:1; } }
@keyframes biDonutTwo { 0%,22%,100% { stroke-dasharray:0 100; opacity:.2; } 42%,92% { stroke-dasharray:28 72; opacity:1; } }
@keyframes biDonutThree { 0%,36%,100% { stroke-dasharray:0 100; opacity:.2; } 56%,92% { stroke-dasharray:16 84; opacity:1; } }
@keyframes biBarGrow { 0%,13%,100% { transform:scaleX(.03); opacity:.35; } 44%,92% { transform:scaleX(var(--bar)); opacity:1; } }

/* Data Warehouse: origem, tratamento e consumo formam uma história única. */
.dw-console-v2 { display:grid; height:100%; grid-template-rows:minmax(0,1fr) 31px; gap:5px; }
.dw-architecture-v2 { display:grid; min-height:0; grid-template-columns:minmax(118px,.88fr) minmax(125px,.92fr) minmax(140px,1.2fr); gap:8px; }
.dw-architecture-v2 > section { position:relative; min-width:0; padding:7px; border:1px solid rgba(88,169,239,.14); border-radius:9px; background:linear-gradient(145deg,rgba(8,36,65,.59),rgba(4,21,41,.72)); }
.dw-architecture-v2 section > small { display:block; margin-bottom:5px; color:#6e90a9; font-weight:900; }
.dw-source-stack-v2 { display:grid; grid-template-rows:auto repeat(4,1fr); gap:4px; overflow:visible; }
.dw-source-v2 { position:relative; display:grid; min-width:0; grid-template-columns:23px minmax(0,1fr); gap:6px; align-items:center; padding:4px 6px; border:1px solid rgba(82,162,232,.14); border-radius:6px; background:rgba(9,42,74,.54); animation:dwSourceRead 9s var(--ease-out-expo) infinite; }
.dw-source-v2:nth-of-type(2) { animation-delay:.16s; }.dw-source-v2:nth-of-type(3) { animation-delay:.32s; }.dw-source-v2:nth-of-type(4) { animation-delay:.48s; }
.dw-source-v2 svg { width:21px; height:21px; fill:none; stroke:#69d8ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dw-source-v2 p { min-width:0; margin:0; }.dw-source-v2 b,.dw-source-v2 em { display:block; overflow:hidden; line-height:1.04; text-overflow:ellipsis; white-space:nowrap; }.dw-source-v2 b { color:#c9dfed; }.dw-source-v2 em { margin-top:2px; color:#718da5; font-style:normal; }
.dw-source-v2 > i { position:absolute; z-index:5; width:7px; height:7px; top:calc(50% - 4px); right:-5px; border-radius:50%; background:#78e4ff; box-shadow:0 0 8px #0a84ff; opacity:0; animation:dwPacketOut 9s var(--ease-standard) infinite; }
.dw-source-v2:nth-of-type(2) > i { animation-delay:.16s; }.dw-source-v2:nth-of-type(3) > i { animation-delay:.32s; }.dw-source-v2:nth-of-type(4) > i { animation-delay:.48s; }
.dw-pipeline-v2 { display:grid; grid-template-rows:auto repeat(3,1fr); gap:5px; overflow:hidden; }
.dw-process-line { position:absolute; width:3px; top:35px; bottom:16px; left:20px; overflow:hidden; border-radius:999px; background:rgba(43,93,137,.38); }
.dw-process-line i { display:block; width:100%; height:100%; transform:scaleY(.03); transform-origin:top; background:linear-gradient(#0a84ff,#69d9ff,#69f7ba); box-shadow:0 0 8px rgba(64,195,255,.45); animation:dwPipelineFill 9s var(--ease-out-expo) infinite; }
.dw-process-step { position:relative; z-index:2; display:grid; min-width:0; grid-template-columns:28px minmax(0,1fr); gap:7px; align-items:center; }
.dw-process-step > i { display:grid; width:27px; height:27px; place-items:center; border:1px solid #2c668f; border-radius:8px; background:#082844; color:#78a2be; font-style:normal; font-weight:900; animation:dwProcessStep 9s var(--ease-out-expo) infinite; }
.dw-process-step.step-validate > i { animation-delay:.75s; }.dw-process-step.step-unify > i { animation-delay:1.5s; }
.dw-process-step p { min-width:0; margin:0; }.dw-process-step b,.dw-process-step em { display:block; overflow:hidden; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }.dw-process-step b { color:#bdd4e4; }.dw-process-step em { margin-top:2px; color:#6e8ca5; font-style:normal; }
.dw-destination-v2 { display:flex; flex-direction:column; }
.dw-vault-v2 { position:relative; display:grid; min-height:104px; flex:1; place-content:center; overflow:hidden; border:1px solid rgba(103,216,255,.3); border-radius:50% / 13%; background:linear-gradient(180deg,rgba(19,98,159,.45),rgba(6,31,57,.78)); box-shadow:0 0 24px rgba(10,132,255,.11),inset 0 0 30px rgba(46,177,242,.06); text-align:center; animation:dwVaultAccept 9s var(--ease-out-expo) infinite; }
.dw-vault-v2::before,.dw-vault-v2::after { content:""; position:absolute; height:16px; right:0; left:0; border:1px solid rgba(111,220,255,.22); border-radius:50%; }.dw-vault-v2::before { top:-8px; }.dw-vault-v2::after { bottom:-8px; }
.dw-vault-v2 > span { position:absolute; width:36%; height:2px; top:17px; left:-42%; background:linear-gradient(90deg,transparent,#86e9ff,transparent); animation:dwVaultScan 9s var(--ease-standard) infinite; }
.dw-vault-v2 b { color:#c9efff; font-size:14px; }.dw-vault-v2 em { margin-top:4px; color:#78a0b9; font-style:normal; }.dw-vault-v2 i { margin-top:8px; padding:4px 6px; border-radius:5px; background:rgba(28,124,88,.17); color:#79ffc4; font-style:normal; font-weight:900; }
.dw-data-marts { display:grid; grid-template-columns:.86fr 1.04fr 1.1fr; gap:3px; margin-top:5px; }.dw-data-marts span { overflow:hidden; padding:4px 0; border:1px solid rgba(89,168,234,.14); border-radius:5px; background:rgba(8,40,71,.55); color:#7da3bb; font-weight:800; text-align:center; text-overflow:ellipsis; white-space:nowrap; opacity:0; animation:dwMartReady 9s var(--ease-out-expo) infinite; }.dw-data-marts span:nth-child(2) { animation-delay:.12s; }.dw-data-marts span:nth-child(3) { animation-delay:.24s; }
.dw-status-v2 { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 9px; border:1px solid rgba(105,247,186,.16); border-radius:7px; background:rgba(20,91,66,.12); }.dw-status-v2 span { display:flex; min-width:0; align-items:center; gap:6px; overflow:hidden; color:#91b7a6; text-overflow:ellipsis; white-space:nowrap; }.dw-status-v2 span i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#69f7ba; box-shadow:0 0 7px #69f7ba; animation:sceneStatus 1.6s ease-in-out infinite; }.dw-status-v2 b { color:#75ffc1; white-space:nowrap; }
@keyframes dwSourceRead { 0%,5%,100% { border-color:rgba(82,162,232,.14); transform:none; } 12%,22% { border-color:rgba(105,218,255,.5); background:rgba(10,84,138,.26); transform:translateX(2px); } }
@keyframes dwPacketOut { 0%,8%,100% { opacity:0; transform:translateX(0); } 14% { opacity:1; } 30% { opacity:0; transform:translateX(22px); } }
@keyframes dwPipelineFill { 0%,22%,100% { transform:scaleY(.03); } 70%,92% { transform:scaleY(1); } }
@keyframes dwProcessStep { 0%,23%,100% { border-color:#2c668f; background:#082844; color:#78a2be; transform:none; } 31%,48% { border-color:#75dcff; background:#0a6dab; color:white; transform:scale(1.07); box-shadow:0 0 13px rgba(75,198,255,.35); } 57%,92% { border-color:#69f7ba; background:#145d47; color:#92ffd0; transform:none; } }
@keyframes dwVaultAccept { 0%,56%,100% { border-color:rgba(103,216,255,.3); filter:none; } 67%,91% { border-color:rgba(105,247,186,.45); filter:brightness(1.2); box-shadow:0 0 28px rgba(64,222,181,.15); } }
@keyframes dwVaultScan { 0%,59%,100% { opacity:0; transform:translateX(0); } 67%,87% { opacity:1; transform:translateX(390%); } }
@keyframes dwMartReady { 0%,68%,100% { opacity:0; transform:translateY(3px); } 75%,92% { opacity:1; transform:none; } }

/* Machine Learning: dados chegam, o cérebro aprende e a previsão é liberada. */
.ml-learning-lab { display:grid; height:100%; grid-template-rows:minmax(0,1fr) 24px 42px; gap:5px; }
.ml-learning-flow { display:grid; min-height:0; grid-template-columns:minmax(118px,.82fr) minmax(135px,1.18fr) minmax(112px,.8fr); gap:8px; }
.ml-source-stack { display:grid; grid-template-rows:auto repeat(3,1fr); gap:5px; min-width:0; }.ml-source-stack > small { color:#6e8ca5; font-weight:900; }
.ml-source { position:relative; display:grid; min-width:0; grid-template-columns:24px minmax(0,1fr); gap:6px; align-items:center; padding:5px 6px; border:1px solid rgba(84,164,234,.14); border-radius:7px; background:rgba(8,39,69,.56); animation:mlSourceFeed 9s var(--ease-out-expo) infinite; }
.ml-source.source-stock { animation-delay:.85s; }.ml-source.source-season { animation-delay:1.7s; }
.ml-source svg { width:21px; height:21px; fill:none; stroke:#6bd9ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.ml-source p { min-width:0; margin:0; }.ml-source b,.ml-source em { display:block; overflow:hidden; line-height:1.04; text-overflow:ellipsis; white-space:nowrap; }.ml-source b { color:#c4dbe9; }.ml-source em { margin-top:2px; color:#6f8aa3; font-style:normal; }
.ml-source > i { position:absolute; z-index:7; width:7px; height:7px; top:calc(50% - 4px); right:-5px; border-radius:50%; background:#71ddff; box-shadow:0 0 8px #0a84ff; opacity:0; animation:mlSourcePacket 9s var(--ease-standard) infinite; }.ml-source.source-stock > i { animation-delay:.85s; }.ml-source.source-season > i { animation-delay:1.7s; }
.ml-brain-stage { position:relative; display:grid; min-width:0; place-items:center; overflow:hidden; border:1px solid rgba(92,177,241,.13); border-radius:10px; background:radial-gradient(circle at center,rgba(14,109,174,.21),transparent 58%),rgba(5,24,45,.55); }
.ml-brain-stage::before { content:""; position:absolute; height:1px; top:50%; right:8px; left:8px; background:linear-gradient(90deg,rgba(81,173,236,.04),rgba(92,210,255,.42),rgba(81,173,236,.04)); }
.ml-packet { position:absolute; z-index:3; width:6px; height:6px; left:4px; border-radius:50%; background:#79e3ff; box-shadow:0 0 9px #0a84ff; opacity:0; animation:mlPacketArrive 9s var(--ease-standard) infinite; }.ml-packet.packet-one { top:27%; }.ml-packet.packet-two { top:50%; animation-delay:.85s; }.ml-packet.packet-three { top:73%; animation-delay:1.7s; }
.ml-brain { position:relative; z-index:4; display:grid; width:126px; height:112px; place-items:center; animation:mlBrainLearn 9s var(--ease-out-expo) infinite; }
.ml-brain svg { position:absolute; width:100%; height:100%; overflow:visible; }.ml-brain .brain-outline,.ml-brain .brain-path { fill:rgba(10,77,126,.22); stroke:#6bdcff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(75,198,255,.38)); }.ml-brain .brain-path { fill:none; stroke:rgba(117,221,255,.48); stroke-width:1.2; }.ml-brain .brain-nodes { fill:#8bebff; filter:drop-shadow(0 0 4px #0a84ff); }
.ml-brain strong { position:relative; z-index:3; display:grid; width:43px; height:43px; place-items:center; border:1px solid #8ce8ff; border-radius:50%; background:radial-gradient(circle at 35% 28%,#77e4ff,#0a78bd 38%,#07233f 76%); color:white; font-size:16px; box-shadow:0 0 20px rgba(10,132,255,.4); }
.ml-learned { position:absolute; z-index:5; bottom:2px; padding:4px 7px; border:1px solid rgba(105,247,186,.27); border-radius:999px; background:rgba(17,100,70,.72); color:#83ffca; font-style:normal; font-weight:900; opacity:0; animation:mlLearned 9s var(--ease-out-expo) infinite; }
.ml-output-card { display:flex; min-width:0; flex-direction:column; justify-content:center; align-items:center; padding:8px; border:1px solid rgba(105,247,186,.18); border-radius:10px; background:linear-gradient(145deg,rgba(20,100,72,.17),rgba(5,27,49,.7)); text-align:center; opacity:.28; transform:translateX(-5px); animation:mlOutputReady 9s var(--ease-out-expo) infinite; }
.ml-output-card small { color:#70a08b; font-weight:900; }.ml-output-card svg { width:30px; height:30px; margin:6px 0 2px; fill:none; stroke:#74ffc1; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.ml-output-card strong { color:#8dffd0; font-size:22px; font-variant-numeric:tabular-nums; }.ml-output-card b { margin-top:3px; color:#d4eadd; line-height:1.12; }.ml-output-card em { margin-top:4px; color:#78a08d; font-style:normal; }
.ml-learning-status { position:relative; overflow:hidden; border:1px solid rgba(87,166,234,.12); border-radius:6px; background:rgba(7,31,56,.58); }.ml-learning-status > span { position:absolute; inset:0; display:flex; align-items:center; padding:0 9px; color:#79ffc4; font-weight:900; opacity:0; transform:translateY(5px); }.ml-learning-status .status-sales { animation:mlStatusSales 9s var(--ease-out-expo) infinite; }.ml-learning-status .status-stock { animation:mlStatusStock 9s var(--ease-out-expo) infinite; }.ml-learning-status .status-season { animation:mlStatusSeason 9s var(--ease-out-expo) infinite; }
.ml-stats-v2 { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.ml-stats-v2 > span { display:grid; min-width:0; align-content:center; padding:5px 7px; border:1px solid rgba(85,161,229,.12); border-radius:6px; background:rgba(8,35,63,.55); }.ml-stats-v2 small,.ml-stats-v2 b { display:block; overflow:hidden; line-height:1; text-overflow:ellipsis; white-space:nowrap; }.ml-stats-v2 small { color:#67849e; font-weight:800; }.ml-stats-v2 b { margin-top:3px; color:#c9dfed; font-variant-numeric:tabular-nums; }
@keyframes mlSourceFeed { 0%,7%,100% { border-color:rgba(84,164,234,.14); transform:none; } 13%,24% { border-color:rgba(108,221,255,.5); background:rgba(8,89,145,.25); transform:translateX(2px); } 30%,92% { border-color:rgba(105,247,186,.2); } }
@keyframes mlSourcePacket { 0%,9%,100% { opacity:0; transform:translateX(0); } 14% { opacity:1; } 30% { opacity:0; transform:translateX(52px); } }
@keyframes mlPacketArrive { 0%,10%,100% { opacity:0; transform:translateX(0) scale(.7); } 15% { opacity:1; } 31% { opacity:0; transform:translateX(74px) scale(1.15); } }
@keyframes mlBrainLearn { 0%,12%,100% { transform:scale(.96); filter:brightness(.86); } 19%,24%,39%,44%,59%,66% { transform:scale(1.055); filter:brightness(1.36); } 29%,34%,49%,54%,71%,92% { transform:scale(1); filter:brightness(1); } }
@keyframes mlLearned { 0%,16%,27%,35%,43%,52%,60%,100% { opacity:0; transform:translateY(4px) scale(.94); } 20%,24%,39%,47%,65%,91% { opacity:1; transform:none; } }
@keyframes mlOutputReady { 0%,66%,100% { opacity:.28; transform:translateX(-5px); } 74%,92% { opacity:1; transform:none; box-shadow:0 0 25px rgba(75,231,177,.1); } }
@keyframes mlStatusSales { 0%,9%,29%,100% { opacity:0; transform:translateY(5px); } 14%,24% { opacity:1; transform:none; } }
@keyframes mlStatusStock { 0%,28%,51%,100% { opacity:0; transform:translateY(5px); } 34%,46% { opacity:1; transform:none; } }
@keyframes mlStatusSeason { 0%,50%,100% { opacity:0; transform:translateY(5px); } 57%,92% { opacity:1; transform:none; } }
.ml-stats-v2 small { min-height:13px; line-height:13px; }

@container (max-width: 500px) {
  .order-result > span > b, .order-result > span > small {
    overflow: visible;
    line-height: 1.06;
    text-overflow: clip;
    white-space: normal;
  }
  .commercial-stage-grid small {
    min-height: 13px;
    overflow: hidden;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
  }
  .commercial-stage-grid .stage-qualified small,
  .commercial-stage-grid .stage-proposal small { font-size: 0 !important; }
  .commercial-stage-grid .stage-qualified small::after { content: "QUALIF."; font-size: 11px; }
  .commercial-stage-grid .stage-proposal small::after { content: "PROP."; font-size: 11px; }
  .works-delivery { grid-template-columns: 30px minmax(0,1fr); gap: 5px 7px; }
  .works-delivery > em { width: max-content; grid-column: 2; margin-top: 0; }
  .works-delivery p b, .works-delivery p small {
    overflow: visible;
    line-height: 1.06;
    text-overflow: clip;
    white-space: normal;
  }
  .bi-ranked-bars > span { grid-template-columns:70px minmax(32px,1fr) 44px; gap:5px; }
  .bi-dashboard-v2 { grid-template-rows:65px minmax(0,1fr); }
  .bi-kpi-strip > span { grid-template-columns:1fr; grid-template-rows:auto auto auto; align-content:center; }
  .bi-kpi-strip small,.bi-kpi-strip b,.bi-kpi-strip em { grid-column:1; justify-self:start; }
  .bi-kpi-strip em { overflow:hidden; max-width:100%; margin-top:2px; text-overflow:ellipsis; }
  .bi-chart-grid-v2 { grid-template-columns:.95fr 1.05fr; gap:5px; }
  .bi-donut-panel,.bi-bar-panel { padding:7px; }
  .bi-donut-panel header em { display:none; }
  .bi-donut-body { grid-template-columns:70px minmax(0,1fr); gap:4px; }
  .bi-donut { width:70px; height:70px; }
  .bi-donut-legend { gap:4px; }
  .bi-donut-legend span:nth-child(2) b { font-size:0!important; }
  .bi-donut-legend span:nth-child(2) b::after { content:"Telev."; font-size:11px; }
  .dw-architecture-v2 { grid-template-columns:minmax(102px,.82fr) minmax(112px,.88fr) minmax(123px,1.3fr); gap:5px; }
  .dw-architecture-v2 > section { padding:6px; }
  .dw-source-v2 { grid-template-columns:18px minmax(0,1fr); gap:4px; padding:4px; }.dw-source-v2 svg { width:18px; height:18px; }
  .dw-source-v2 em,.dw-process-step em { display:none; }
  .scene-dw .dw-data-marts span { font-size:0!important; }
  .dw-data-marts span:nth-child(1)::after { content:"VEN."; font-size:11px; }
  .dw-data-marts span:nth-child(2)::after { content:"EST."; font-size:11px; }
  .dw-data-marts span:nth-child(3)::after { content:"FIN."; font-size:11px; }
  .ml-learning-flow { grid-template-columns:minmax(102px,.78fr) minmax(125px,1.22fr) minmax(104px,.8fr); gap:5px; }
  .ml-source { grid-template-columns:19px minmax(0,1fr); gap:4px; padding:4px; }.ml-source svg { width:18px; height:18px; }
  .ml-source em { display:none; }
  .ml-brain { width:112px; height:101px; }
}

.trust { position: relative; z-index: 3; padding: 138px clamp(24px, 7vw, 112px); background: radial-gradient(circle at 82% 37%, rgba(0,99,255,.15), transparent 28%), #061224; }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 70px; }
.trust-card { min-height: 260px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4,15,33,.77); }
.trust-card > span { color: var(--cyan); font-size: 10px; font-weight: 800; }
.trust-card h3 { margin: 45px 0 12px; font-size: 25px; line-height: 1; text-transform: uppercase; }
.trust-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.governed-flow { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr; align-items: center; margin-top: 18px; padding: 26px; border: 1px solid rgba(75,198,255,.16); border-radius: 16px; background: rgba(8,28,53,.78); }
.governed-flow div { min-height: 95px; padding: 19px; border-radius: 10px; background: rgba(5,15,31,.72); }
.governed-flow small, .governed-flow strong { display: block; }.governed-flow small { color: #6d8baa; font-size: 9px; font-weight: 800; text-transform: uppercase; }.governed-flow strong { margin-top: 15px; color: #d9e7f5; font-size: 13px; line-height: 1.35; }
.governed-flow > i { height: 1px; overflow: hidden; background: #21517f; }.governed-flow > i::after { content: ""; display: block; width: 15px; height: 1px; background: #83e5ff; animation: governedSignal 2.2s linear infinite; }
@keyframes governedSignal { to { transform: translateX(45px); } }

.zero-touch { position: relative; z-index: 3; display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; align-items: center; min-height: 760px; padding: 138px clamp(24px, 7vw, 112px); background: linear-gradient(125deg, rgba(3,11,25,.98), rgba(8,31,58,.93)); }
.zero-copy h2, .contact h2 { margin: 0; font-size: clamp(46px, 6vw, 96px); font-weight: 800; line-height: .91; text-transform: uppercase; text-shadow: 0 5px 32px rgba(0,0,0,.7); }
.zero-copy > p:last-child { max-width: 610px; margin: 26px 0 0; color: var(--muted); font-size: 18px; line-height: 1.58; }
.state-machine { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin: 0; padding: 0; list-style: none; }
.state-machine::before { content: ""; position: absolute; z-index: 2; width: 2px; top: 8%; bottom: 8%; left: 50%; background: linear-gradient(#4bc6ff, #0a84ff, #4bc6ff); box-shadow: 0 0 18px #0a84ff; animation: stateGlow 2.8s ease-in-out infinite; }
.state-machine li { position: relative; z-index: 3; display: grid; min-height: 104px; grid-template-columns: 44px 1fr; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,15,31,.88); }
.state-machine b { color: var(--cyan); font-size: 11px; }.state-machine span { font-size: 13px; font-weight: 800; text-transform: uppercase; }
@keyframes stateGlow { 50% { opacity: .32; filter: blur(2px); } }

.contact { position: relative; z-index: 3; display: grid; min-height: 820px; place-content: center; overflow: hidden; padding: 120px 24px; background: radial-gradient(circle at 50% 50%, rgba(10,132,255,.18), transparent 32%), #020711; text-align: center; }
.contact > *:not(.contact-orb) { position: relative; z-index: 3; }
.contact .eyebrow { justify-content: center; }
.contact > p:nth-of-type(2) { max-width: 700px; margin: 28px auto 0; color: #a8bacd; font-size: 18px; line-height: 1.56; }
.contact .button { width: max-content; margin: 35px auto 0; }
.contact-orb { position: absolute; width: min(72vw, 740px); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(61,177,255,.13); border-radius: 50%; box-shadow: inset 0 0 100px rgba(10,132,255,.09), 0 0 100px rgba(10,132,255,.06); animation: orbBreathe 6s ease-in-out infinite; }
.contact-orb i { position: absolute; inset: 8%; border: 1px solid rgba(75,198,255,.13); border-radius: 43% 57% 49% 51%; animation: ringTurn 18s linear infinite; }.contact-orb i:nth-child(2) { inset: 18%; animation-duration: 12s; animation-direction: reverse; }.contact-orb i:nth-child(3) { inset: 31%; animation-duration: 8s; }
@keyframes orbBreathe { 50% { transform: translate(-50%, -50%) scale(1.05); } }

footer { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; min-height: 150px; padding: 36px clamp(24px, 5vw, 82px); border-top: 1px solid var(--line); background: #020711; }
footer p { margin: 0; color: #687f99; font-size: 12px; text-align: center; } footer > a:last-child { justify-self: end; color: #91a6bd; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.noscript-message { padding: 24px; color: #adc0d3; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .preview-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 192px; }
  .scene-bi,.scene-dw,.scene-ml { height:410px; }
}

@media (max-width: 900px) {
  .tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar nav { display: none; }
  .hero { grid-template-columns: 1fr; align-content: center; padding-top: 122px; }
  .hero::before { background: linear-gradient(180deg, rgba(2,7,17,.48), rgba(2,7,17,.87) 58%, #020711 88%); }
  .hero-copy { z-index: 4; padding-top: 44px; }
  .hero-visual { position: absolute; inset: 48px 0 0; min-height: auto; opacity: .86; }
  #liquid-canvas { width: 100vw; height: 92vw; top: 34%; left: 68%; }
  .operation-feed { right: 24px; bottom: 82px; width: 300px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 192px; }
  .atlas-heading { grid-template-columns: 1fr; }
  .atlas-heading > p { max-width: 680px; margin-top: 8px; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .governed-flow { grid-template-columns: 1fr; gap: 0; }
  .governed-flow > i { width: 1px; height: 28px; margin-left: 50%; }
  .governed-flow > i::after { width: 1px; height: 12px; animation-name: governedSignalY; }
  @keyframes governedSignalY { to { transform: translateY(30px); } }
  .zero-touch { grid-template-columns: 1fr; min-height: auto; }
  footer { grid-template-columns: 1fr auto; gap: 28px; }
  footer p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

@media (max-width: 680px) {
  .topbar { height: 62px; padding: 0 18px; }
  .nav-cta { display: none; }
  .brand { gap: 7px; }
  .brand-liquid, .brand-liquid canvas { width: 36px; height: 36px; }
  .brand-lockup strong { font-size: 13px; }
  .brand-lockup small { max-width: 150px; font-size: 8px; }
  .hero { min-height: 1020px; padding: 98px 22px 80px; align-items: end; }
  .hero-copy { width: 100%; align-self: end; padding-bottom: 292px; }
  h1 { font-size: clamp(40px, 11.5vw, 52px); line-height: .92; }
  h1, .section-intro h2, .atlas-heading h2, .zero-copy h2, .contact h2 { padding-bottom: 4px; }
  .hero-lead { font-size: 17px; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  #liquid-canvas { width: 112vw; height: 112vw; top: 28%; left: 65%; }
  .operation-feed { right: 20px; bottom: 74px; left: 20px; width: auto; }
  .hero-foot span:first-child { display: none; }
  .proof, .tool-preview { padding: 92px 22px; }
  .atlas, .trust, .zero-touch { padding: 96px 22px; }
  .section-intro h2 { font-size: clamp(35px, 9.8vw, 48px); line-height: .96; }
  .section-intro > p:last-child { font-size: 17px; }
  .metrics, .preview-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 174px; grid-template-columns: minmax(0,1fr) 98px; padding: 24px 22px 21px; }
  .metric-card > strong { font-size: clamp(58px, 17vw, 74px); }
  .metric-card > span { padding-right: 104px; font-size: 12px; }
  .metric-state { right: 21px; bottom: 19px; }
  .metric-visual { width: 92px; height: 92px; }
  .metric-visual svg { width: 80px; height: 80px; }
  .preview-card { min-height: 670px; padding: 24px; }
  .demo { height: 350px; }
  .process-track { gap: 2px; padding: 55px 7px 22px; }
  .process-icon { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; transform: scale(.88); }
  .process-track::before { top: 78px; }
  .process-track::after { top: 73px; }
  .process-step b { font-size: 9px; }
  .process-step small { font-size: 8px; }
  .step-progress { margin-right: 4px; margin-left: 4px; }
  .process-foot { right: 10px; left: 10px; }
  .insight-kpi { left: 16px; }
  .insight-kpi strong { font-size: 27px; }
  .insight-chart { right: 15px; width: 45%; }
  .insight-alert-stream { right: 10px; bottom: 37px; left: 10px; }
  .insight-alert { width: 90%; min-height: 62px; grid-template-columns: 31px 1fr auto; gap: 7px; padding: 8px; }
  .insight-alert > i { width: 29px; height: 29px; font-size: 12px; }
  .insight-alert p b { font-size: 10px; }.insight-alert p span { font-size: 8px; }.insight-alert > em { font-size: 9px; }
  .insight-activity { right: 10px; left: 10px; }
  .delivery-bubble { right: 10px; width: 178px; }
  .map-foot { right: 9px; left: 9px; }
  .chat-thread { padding-right: 10px; padding-left: 10px; }
  .chat-thread .chat-user { width: 78%; right: 10px; }
  .chat-thread .chat-answer { width: 94%; left: 10px; }
  .chat-thinking { width: 88%; left: 10px; }
  .chat-composer { right: 10px; left: 10px; }
  .chat-chart span { grid-template-columns: 47px 1fr 49px; gap: 5px; }
  .genius-foot { right: 11px; left: 11px; }
  .atlas-heading h2 { font-size: clamp(36px, 10.2vw, 49px); line-height: .96; }
  .atlas-heading > p { font-size: 16px; }
  .atlas-nav { width: calc(100% + 44px); margin: 52px -22px 0; border-right: 0; border-left: 0; border-radius: 0; padding-right: 22px; padding-left: 22px; }
  .tool-chapter { padding-top: 96px; scroll-margin-top: 106px; }
  .chapter-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; }
  .chapter-head h3 { font-size: clamp(29px, 8vw, 40px); }
  .chapter-head p { font-size: 16px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 650px; }
  .live-demo { height: 345px; }
  .scene-shell { inset: 10px; grid-template-rows: 37px 1fr 33px; }
  .scene-sales { height: 390px; }
  .scene-pos { height: 420px; }
  .scene-catalog { height: 440px; }
  .scene-commercial { height: 380px; }
  .scene-stock, .scene-works { height: 430px; }
  .scene-bi { height: 580px; }
  .scene-dw { height: 560px; }
  .scene-ml { height: 520px; }
  .scene-sales .scene-body, .scene-pos .scene-body, .scene-catalog .scene-body,
  .scene-commercial .scene-body, .scene-stock .scene-body, .scene-works .scene-body { padding: 12px 14px; }

  .order-result { min-height: 79px; grid-template-columns: 1fr 1fr; }
  .order-result > em { grid-column: 1 / -1; min-height: 31px; }
  .order-result > span > b, .order-result > span > small { overflow: visible; line-height: 1.08; text-overflow: clip; white-space: normal; }

  .pos-checkout { grid-template-columns: 1fr; grid-template-rows: 1fr 92px; }
  .pos-items { gap: 5px; }
  .pos-item { min-height: 59px; }
  .pos-item p b, .pos-item p small { overflow: visible; line-height: 1.08; text-overflow: clip; white-space: normal; }
  .pos-total-panel { display: grid; grid-template-columns: 1fr 1.15fr; grid-template-rows: auto 35px auto; gap: 1px 9px; align-content: center; justify-content: stretch; padding: 8px 10px; }
  .pos-total-panel > small { grid-column: 1; grid-row: 1; }
  .pos-total-values { height: 35px; grid-column: 1; grid-row: 2; margin: 0; }
  .pos-total-panel > span { grid-column: 1; grid-row: 3; }
  .pos-payment-state { height: auto; grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .pos-payment-state > b, .pos-payment-state > em { padding: 5px 4px; }

  .catalog-results { height: 151px; grid-template-columns: 1fr; grid-template-rows: 91px 55px; }
  .catalog-options { grid-template-columns: 1fr 1fr; }
  .catalog-best small, .catalog-best b, .catalog-best span, .catalog-best em,
  .catalog-options p b, .catalog-options p small { overflow: visible; line-height: 1.08; text-overflow: clip; white-space: normal; }
  .catalog-best > i { width: 58px; height: 58px; }
  .catalog-options article { grid-template-columns: 34px 1fr; }

  .commercial-stage-grid { gap: 3px; }
  .commercial-stage-grid article { padding: 6px 5px; }
  .commercial-stage-grid small { min-height: 13px; overflow: hidden; line-height: 1; text-overflow: clip; white-space: nowrap; }
  .commercial-stage-grid .stage-qualified small { font-size: 0 !important; }
  .commercial-stage-grid .stage-qualified small::after { content: "QUALIF."; font-size: 11px; }
  .commercial-stage-grid .stage-proposal small { font-size: 0 !important; }
  .commercial-stage-grid .stage-proposal small::after { content: "PROP."; font-size: 11px; }
  .scene-commercial .commercial-alert span small { display: block; overflow: visible; line-height: 1.08; text-overflow: clip; white-space: normal; }

  .inventory-legend { flex-wrap: wrap; gap: 5px 11px; }
  .inventory-layout { height: 285px; grid-template-columns: 1fr; grid-template-rows: 147px 131px; }
  .inventory-map article { grid-template-columns: 25px 1fr; grid-template-rows: 1fr auto; }
  .inventory-map article > b { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .inventory-map article > div { grid-column: 2; grid-row: 1; }
  .inventory-map article > small { grid-column: 2; grid-row: 2; text-align: right; }
  .inventory-map article > div > i { height: 23px; }
  .inventory-detail { display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto auto 1fr; gap: 2px 10px; align-content: center; padding: 9px 11px; }
  .inventory-detail > small { grid-column: 1; grid-row: 1; }
  .inventory-detail > strong { grid-column: 1; grid-row: 2; }
  .inventory-detail > b { grid-column: 2; grid-row: 1; margin: 0; }
  .inventory-detail > span { grid-column: 2; grid-row: 2; margin: 0; }
  .inventory-detail > em { grid-column: 2; grid-row: 3; align-self: end; margin: 5px 0 0; }

  .works-live { height: 180px; grid-template-columns: .9fr 1.1fr; }
  .works-building { right: 8px; }
  .works-current { padding: 8px; }
  .works-delivery { grid-template-columns: 28px minmax(0,1fr); gap: 6px; }
  .works-delivery > em { width: max-content; grid-column: 2; margin-top: 2px; }
  .works-delivery p b, .works-delivery p small { overflow: visible; line-height: 1.08; text-overflow: clip; white-space: normal; }
  .works-stage-strip { gap: 3px; }
  .works-stage-strip > span { gap: 3px; padding: 4px 2px; }
  .works-stage-strip > span i { width: 8px; height: 8px; flex-basis: 8px; border: 0; background: #3d7098; color: transparent; font-size: 0; }
  .works-stage-strip > span.done i { background: #69f7ba; }.works-stage-strip > span.active i { background: #6fdcff; }
  .bi-dashboard-v2 { grid-template-rows:136px minmax(0,1fr); }
  .bi-kpi-strip { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .bi-kpi-strip > span:nth-child(3) { grid-column:1 / -1; }
  .bi-kpi-strip > span { padding:6px; }
  .bi-kpi-strip small { height:22px; min-height:22px; overflow:hidden; line-height:22px; text-overflow:clip; white-space:nowrap; }
  .bi-kpi-strip b { font-size:13px; }
  .bi-kpi-strip em { overflow:hidden; text-overflow:ellipsis; }
  .bi-chart-grid-v2 { grid-template-columns:1fr; grid-template-rows:145px 160px; }
  .bi-donut-body { grid-template-columns:100px 1fr; }
  .bi-donut { width:96px; height:96px; }
  .bi-donut-legend span:nth-child(2) b { font-size:11px!important; }
  .bi-donut-legend span:nth-child(2) b::after { content:none; }
  .bi-ranked-bars > span { grid-template-columns:82px minmax(36px,1fr) 50px; }

  .dw-architecture-v2 { grid-template-columns:1fr; grid-template-rows:142px 102px 139px; gap:6px; }
  .dw-source-stack-v2 { grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr 1fr; gap:4px; }
  .dw-source-stack-v2 > small { grid-column:1 / -1; margin-bottom:0; }
  .dw-source-v2 { grid-template-columns:22px minmax(0,1fr); padding:5px 6px; }
  .dw-source-v2 svg { width:20px; height:20px; }
  .dw-source-v2 em,.dw-process-step em { display:block; }
  .dw-pipeline-v2 { grid-template-columns:repeat(3,1fr); grid-template-rows:auto 1fr; gap:5px; }
  .dw-pipeline-v2 > small { grid-column:1 / -1; margin-bottom:0; }
  .dw-process-line { width:auto; height:3px; top:44px; right:17%; bottom:auto; left:17%; }
  .dw-process-line i { transform:scaleX(.03); transform-origin:left; animation-name:dwPipelineFillMobile; }
  .dw-process-step { grid-template-columns:1fr; grid-template-rows:29px auto; gap:4px; justify-items:center; text-align:center; }
  .dw-process-step p { width:100%; }.dw-process-step b,.dw-process-step em { white-space:normal; }
  .dw-destination-v2 { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:auto 1fr; gap:5px; }
  .dw-destination-v2 > small { grid-column:1 / -1; margin-bottom:0!important; }
  .dw-vault-v2 { min-height:0; grid-column:1; }
  .dw-data-marts { grid-column:2; grid-row:2; grid-template-columns:1fr; margin-top:0; }
  .scene-dw .dw-data-marts span { font-size:11px!important; }.dw-data-marts span::after { content:none!important; }
  .dw-status-v2 span { white-space:normal; line-height:1.05; }

  .ml-learning-lab { grid-template-rows:minmax(0,1fr) 26px 55px; }
  .ml-learning-flow { grid-template-columns:1fr 1fr; grid-template-rows:128px 166px; gap:6px; }
  .ml-source-stack { grid-column:1 / -1; grid-template-columns:repeat(3,1fr); grid-template-rows:auto 1fr; gap:5px; }
  .ml-source-stack > small { grid-column:1 / -1; }
  .ml-source { grid-template-columns:1fr; grid-template-rows:24px auto; justify-items:center; gap:4px; padding:6px 4px; text-align:center; }
  .ml-source svg { width:22px; height:22px; }.ml-source b,.ml-source em { overflow:visible; line-height:1.06; text-overflow:clip; white-space:normal; }
  .ml-source em { display:block; }
  .ml-source > i { display:none; }
  .ml-brain-stage { grid-column:1; grid-row:2; }.ml-output-card { grid-column:2; grid-row:2; }
  .ml-brain { width:126px; height:115px; }
  .ml-output-card strong { font-size:21px; }
  .ml-stats-v2 small { height:13px; overflow:visible; line-height:13px; text-overflow:clip; white-space:normal; }
  .ml-stats-v2 b { overflow:visible; line-height:1.04; text-overflow:clip; white-space:normal; }
  .scene-body { padding: 12px 12px; font-size: 11px; }
  .scene-top, .scene-foot { padding-right: 11px; padding-left: 11px; }
  .scene-top > b, .scene-top > span, .scene-foot, .scene-foot b { font-size: 11px; }
  .scene-body :where(small, em, p, span, button, pre, b) { font-size: 11px; }
  .scene-row { min-height: 27px; padding-right: 8px; padding-left: 8px; font-size: 11px; }.scene-row b { font-size: 11px; }
  .commercial-alert { min-height: 46px; }
  .commercial-stages { gap: 1px; }
  .commercial-alert span b { line-height: 1.15; white-space: normal; }
  .commercial-alert span small { display: none; }
  .partner-entry p small, .crm-moment p small, .payment-methods small { overflow: visible; line-height: 1.16; text-overflow: clip; white-space: normal; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .product-grid article > i { height: 32px; }
  .product-grid { gap: 4px; }.product-grid article { padding: 5px; }.product-grid article > i { height: 25px; }
  .scene-partners .partner-network { height: 83px; }
  .scene-logistics .scene-body { grid-template-columns: .95fr 1.05fr; gap: 4px; }
  .truck-load { transform: scale(.7); transform-origin: center; }
  .load-metrics { gap: 10px; }
  .delivery-live-bubble { width: 148px; top: 7px; left: 7px; padding: 7px 8px; }
  .delivery-live-bubble span { display: none; }
  .delivery-map-point { grid-template-columns: 22px auto; gap: 3px; }
  .delivery-map-point > i { width: 22px; height: 22px; }
  .delivery-map-point > b { padding: 3px 4px; }
  .delivery-map-point.point-route { left: 28%; }.delivery-map-point.point-notice { left: 53%; }
  .delivery-live-progress { right: 6px; bottom: 6px; left: 6px; padding: 0 7px; }
  .scene-portal .scene-body { grid-template-columns: 94px 1fr; gap: 7px; }
  .portal-live { grid-template-columns: 122px minmax(0,1fr); gap: 7px; }
  .portal-device { max-width: 122px; padding-right: 5px; padding-left: 5px; }
  .portal-screen { grid-template-rows: 23px 65px 1fr 40px; }
  .portal-route-canvas { height: 65px; }
  .portal-activity { padding: 5px; }
  .portal-steps { gap: 4px; }
  .portal-steps > span { grid-template-columns: 23px 1fr; gap: 5px; padding: 4px; }
  .portal-steps > span > i { width: 22px; height: 22px; }
  .portal-next span, .portal-steps small { display: none; }
  .portal-next { display: grid; align-content: center; }
  .portal-proof { gap: 2px; }
  .tool-genius-head { grid-template-columns: 32px minmax(0,1fr); }
  .tool-genius-head > em { display: none; }
  .tool-genius-user { width: 82%; }
  .tool-genius-thinking { width: 86%; }
  .tool-genius-answer > div span { grid-template-columns: 54px 1fr 57px; gap: 4px; }
  .driver-phone { width: 78px; height: 112px; padding: 13px 6px 6px; }
  .phone-map { height: 51px; margin: 5px 0; }
  .driver-data .scene-row { min-height: 19px; }
  .bi-grid { grid-template-columns: .78fr .78fr 1.44fr; }
  .bi-grid article { padding: 6px; }
  .credit-score { grid-template-columns: 86px 1fr; }.score-ring { width: 75px; height: 75px; border-width: 7px; }
  .goal-layout { grid-template-columns: 90px 1fr; }.goal-ring { width: 74px; height: 74px; border-width: 7px; }
  .route-info { max-width: 125px; }
  .delivery-stop > div { width: 146px; }
  .delivery-stop.stop-notice > div, .delivery-stop.stop-client > div { right: 13px; }
  .tool-copy { padding: 26px 24px 30px; }
  .tool-copy h4 { font-size: clamp(28px, 8vw, 40px); }
  .tool-copy > p { font-size: 15px; }
  .trust-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .trust-card { min-height: 225px; }
  .governed-flow { padding: 15px; }
  .zero-copy h2, .contact h2 { font-size: clamp(36px, 10.2vw, 49px); line-height: .96; }
  .state-machine { grid-template-columns: 1fr 1fr; }
  .state-machine li { min-height: 92px; grid-template-columns: 32px 1fr; padding: 13px; }
  .state-machine span { font-size: 10px; }
  .contact { min-height: 720px; padding: 100px 22px; }
  .contact > p:nth-of-type(2) { font-size: 16px; }
  footer { grid-template-columns: 1fr; padding: 42px 22px; }
  footer > a:last-child { justify-self: start; }
  footer p { grid-column: auto; grid-row: auto; }
  .demo-catalog { padding-right: 5%; padding-left: 5%; }
  .demo-catalog i { height: 100px; }
  .demo-flow .signal { animation-name: liveFlowMobile; }
  @keyframes liveFlowMobile { 0% { transform: translateX(0); } 50%,100% { transform: translateX(240px); } }
  .demo-warehouse > span { animation-name: forkMoveMobile; }
  @keyframes forkMoveMobile { 50% { transform: translateX(230px); } }
  .demo-route > span { animation-name: routeMoveMobile; }
  @keyframes routeMoveMobile { 50%,100% { transform: translate(215px, 64px) rotate(13deg); } }
  .demo-gateway, .demo-comm { gap: 15px; }
  .demo-gateway i, .demo-comm i { width: 60px; height: 60px; }
  .demo-gateway span, .demo-comm span { animation-name: packetMoveMobile; }
  @keyframes packetMoveMobile { to { transform: translateX(222px); } }
  .demo-api span { animation-name: apiMoveMobile; }
  @keyframes apiMoveMobile { 50%,100% { transform: translateX(245px) translateY(78px); } }
  @keyframes truckMove { 0%,100% { transform: translate(0,0) rotate(-8deg); } 50% { transform: translate(115px,55px) rotate(15deg); } }
  @keyframes dwPipelineFillMobile { 0%,22%,100% { transform:scaleX(.03); } 70%,92% { transform:scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .scene-sales *,
  .scene-pos *,
  .scene-catalog *,
  .scene-commercial *,
  .scene-stock *,
  .scene-works *,
  .scene-bi *,
  .scene-dw *,
  .scene-ml * { animation: none !important; transition: none !important; }
  .order-rail > i { transform: scaleX(1); }
  .order-rail > b { display: none; }
  .order-step > span { border-color: #69f7ba; background: #125c46; color: #9affd4; transform: none; }
  .order-result,
  .pos-item,
  .catalog-filters span,
  .catalog-filters > b,
  .catalog-best,
  .catalog-options article,
  .catalog-reason,
  .inventory-detail,
  .works-delivery { opacity: 1; transform: none; }
  .pos-total-values .total-zero,
  .pos-total-values .total-one,
  .pos-payment-state > b { opacity: 0; }
  .pos-total-values .total-final,
  .pos-payment-state > em { opacity: 1; transform: none; }
  .catalog-query > span { clip-path: inset(0); }
  .commercial-track > i { transform: scaleX(1); }
  .commercial-track .deal-signal { transform: translateX(var(--deal-travel)); }
  .inventory-scan { opacity: 0; }
  .works-overall-progress i { transform: scaleX(1); opacity: 1; }
  .works-column { transform: scaleY(1); opacity: 1; }
  .works-beam { transform: scaleX(1); opacity: 1; }
  .bi-ranked-bars i::after { animation:none!important; transform:scaleX(var(--bar)); opacity:1; }
  .dw-source-v2 > i,
  .ml-source > i,
  .ml-packet { display:none; }
  .dw-process-line i { transform:scaleY(1); }
  .dw-process-step > i { border-color:#69f7ba; background:#145d47; color:#92ffd0; }
  .dw-data-marts span { opacity:1; transform:none; }
  .dw-vault-v2 { border-color:rgba(105,247,186,.45); filter:brightness(1.12); }
  .ml-brain { transform:none; filter:none; }
  .ml-learned,
  .ml-output-card { opacity:1; transform:none; }
  .ml-learning-status > span { display:none; }
  .ml-learning-status .status-season { display:flex; opacity:1; transform:none; }
}

/* Feature demo refinement: the order advances only after the active sector finishes. */
.demo-process { --process-cycle: 10.5s; --process-stage: 2.1s; --process-icon-size: 58px; }
.process-track {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 48px 16px 24px;
}
.process-track::before,
.process-track::after { content: none; }
.process-step {
  --step-index: 0;
  --step-delay: calc(var(--step-index) * var(--process-stage));
  z-index: 3;
  min-width: 0;
  color: #e7f4ff;
  opacity: .34;
  transform: none;
  animation: processStageState var(--process-cycle) var(--ease-standard) var(--step-delay) infinite;
}
.process-step:nth-child(2) { --step-index: 1; }
.process-step:nth-child(3) { --step-index: 2; }
.process-step:nth-child(4) { --step-index: 3; }
.process-step:nth-child(5) { --step-index: 4; }
.process-step:not(:last-child)::before,
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(100% - var(--process-icon-size));
  height: 2px;
  top: calc(var(--process-icon-size) / 2 - 1px);
  left: calc(50% + var(--process-icon-size) / 2);
  border-radius: 999px;
}
.process-step:not(:last-child)::before { background: rgba(63, 112, 159, .4); }
.process-step:not(:last-child)::after {
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #65ffc0, #65d8ff);
  box-shadow: 0 0 12px rgba(101, 255, 192, .72);
  animation: processConnectorFill var(--process-cycle) var(--ease-out-expo) var(--step-delay) infinite;
  will-change: transform;
}
.process-icon {
  width: var(--process-icon-size);
  height: var(--process-icon-size);
  margin-bottom: 13px;
  border-color: rgba(73, 143, 203, .38);
  background: linear-gradient(145deg, rgba(13, 54, 94, .88), rgba(4, 18, 39, .97));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 0 rgba(75,198,255,0);
  animation: processIconState var(--process-cycle) var(--ease-standard) var(--step-delay) infinite;
  will-change: transform, filter;
}
.process-step b,
.process-step small {
  color: inherit;
  font-size: 11px;
  line-height: 1.16;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.process-step b { min-height: 25px; font-weight: 800; }
.process-step small { min-height: 13px; margin-top: 2px; opacity: .7; }
.step-progress {
  height: 3px;
  margin: 9px 8px 0;
  border: 1px solid rgba(72, 139, 197, .23);
  background: rgba(17, 48, 80, .88);
}
.step-progress::after {
  transform: scaleX(0);
  background: linear-gradient(90deg, #0a84ff, #8ce8ff 72%, #d7f9ff);
  box-shadow: 0 0 11px rgba(75, 198, 255, .85);
  animation: processStepFill var(--process-cycle) var(--ease-out-expo) var(--step-delay) infinite;
  will-change: transform;
}
@keyframes processStageState {
  0%, 19.75%, 100% { color: #eff9ff; opacity: 1; }
  20%, 99.75% { color: #9deac9; opacity: .88; }
}
@keyframes processIconState {
  0%, 8%, 16%, 19.75%, 100% {
    transform: scale(1);
    border-color: #65d8ff;
    filter: brightness(1.18);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 0 4px rgba(75,198,255,.07), 0 0 25px rgba(75,198,255,.62);
  }
  4%, 12% {
    transform: scale(1.065);
    border-color: #b9f2ff;
    filter: brightness(1.35);
    box-shadow: inset 0 1px rgba(255,255,255,.15), 0 0 0 7px rgba(75,198,255,.06), 0 0 34px rgba(75,198,255,.84);
  }
  20%, 99.75% {
    transform: scale(1);
    border-color: rgba(101,255,192,.68);
    filter: brightness(.94) saturate(.85);
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 14px rgba(101,255,192,.16);
  }
}
@keyframes processStepFill {
  0% { transform: scaleX(0); }
  16.5%, 99.75% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes processConnectorFill {
  0%, 16.5% { transform: scaleX(0); }
  20%, 99.75% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* Commercial view: a readable trend line with one point per observation. */
.insight-chart {
  top: 66px;
  right: 22px;
  display: block;
  width: 50%;
  height: 115px;
  border: 0;
}
.insight-chart-meta {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7897b5;
  font-size: 11px;
  font-weight: 800;
}
.insight-chart-meta b { color: #79ffc3; font-size: 11px; }
.insight-chart-meta b i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #69ffc0;
  box-shadow: 0 0 9px #69ffc0;
  animation: liveStatus 1.35s ease-in-out infinite;
}
.insight-chart svg {
  position: absolute;
  z-index: 1;
  top: 21px;
  right: 0;
  width: 100%;
  height: calc(100% - 38px);
  overflow: visible;
}
.insight-grid-lines path {
  fill: none;
  stroke: rgba(83, 142, 195, .17);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.insight-series { animation: insightSeriesFloat 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.insight-series-reveal {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  animation: insightSeriesReveal 7.6s var(--ease-out-expo) infinite;
  will-change: transform;
}
.insight-area { fill: url(#insight-area-gradient); }
.insight-trend {
  fill: none;
  stroke: #78ddff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: url(#insight-line-glow);
}
.insight-points circle {
  fill: #061b31;
  stroke: #9fe9ff;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(75,198,255,.8));
}
.insight-points .insight-tip-halo {
  fill: rgba(103,255,193,.12);
  stroke: rgba(103,255,193,.42);
  stroke-width: 2;
  animation: insightTipPulse 1.35s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.insight-points .insight-tip {
  fill: #c9ffe5;
  stroke: #69ffc0;
  stroke-width: 3;
  filter: drop-shadow(0 0 7px #69ffc0);
}
.insight-chart-axis {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  color: #63809e;
  font-size: 11px;
  font-weight: 700;
}
.insight-chart-axis span:last-child { color: #9eddf7; }
@keyframes insightSeriesReveal {
  0%, 7% { transform: scaleX(0); }
  78%, 94% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes insightSeriesFloat { to { transform: translateY(-2px); } }
@keyframes insightTipPulse {
  50% { transform: scale(1.65); opacity: .24; }
}

@media (max-width: 680px) {
  .demo-process { --process-icon-size: 44px; }
  .process-track { padding: 47px 5px 22px; }
  .process-step b,
  .process-step small { font-size: 11px; overflow-wrap: anywhere; }
  .process-step b { min-height: 38px; }
  .step-progress { margin-right: 4px; margin-left: 4px; }
  .insight-kpi { top: 67px; left: 15px; }
  .insight-kpi small,
  .insight-kpi em { font-size: 11px; }
  .insight-kpi strong { font-size: 29px; }
  .insight-chart {
    top: 128px;
    right: 14px;
    left: 14px;
    width: auto;
    height: 96px;
  }
  .insight-chart svg { top: 20px; height: calc(100% - 36px); }
  .insight-alert-stream { height: 78px; bottom: 36px; }
  .insight-alert {
    width: 96%;
    min-height: 61px;
    grid-template-columns: 31px minmax(0,1fr) auto;
  }
  .insight-alert p b,
  .insight-alert p span,
  .insight-alert > em,
  .insight-activity,
  .insight-activity b { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-step { color: #9deac9; opacity: .9; animation: none !important; }
  .process-icon {
    border-color: rgba(101,255,192,.68);
    filter: none;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 14px rgba(101,255,192,.16);
    animation: none !important;
  }
  .process-step:not(:last-child)::after,
  .step-progress::after,
  .insight-series-reveal { transform: scaleX(1); animation: none !important; }
  .insight-series,
  .insight-tip-halo { animation: none !important; }
}

/* Runtime state classes keep the process causal across every loop. */
.process-step,
.process-icon,
.process-step:not(:last-child)::after,
.step-progress::after { animation: none; }
.process-step { color: #8ba2b7; opacity: .55; transition: color .22s ease, opacity .22s ease; }
.process-step.is-active { color: #f0faff; opacity: 1; }
.process-step.is-complete { color: #9deac9; opacity: .88; }
.process-step.is-active .process-icon {
  border-color: #65d8ff;
  filter: brightness(1.2);
  animation: processActivePulse .92s ease-in-out infinite;
}
.process-step.is-complete .process-icon {
  border-color: rgba(101,255,192,.68);
  filter: brightness(.94) saturate(.85);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 14px rgba(101,255,192,.16);
}
.process-step.is-active .step-progress::after {
  animation: processActiveFill 1.7s linear forwards;
}
.process-step.is-complete .step-progress::after,
.process-step.is-complete:not(:last-child)::after { transform: scaleX(1); }
.process-step:not(:last-child)::after { transition: none; }
.process-step.is-complete:not(:last-child)::after { transition: transform .24s var(--ease-out-expo); }
@keyframes processActivePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 0 4px rgba(75,198,255,.07), 0 0 24px rgba(75,198,255,.58);
  }
  50% {
    transform: scale(1.065);
    border-color: #c4f5ff;
    box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 0 7px rgba(75,198,255,.07), 0 0 36px rgba(75,198,255,.9);
  }
}
@keyframes processActiveFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .process-step.is-complete { color: #9deac9; opacity: .9; }
  .process-step.is-complete .step-progress::after,
  .process-step.is-complete:not(:last-child)::after { transform: scaleX(1); }
}

@media (max-width: 680px) {
  .demo-process { --process-icon-size: 36px; }
  .process-track {
    display: grid;
    height: 250px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 10px 12px 32px;
  }
  .process-step {
    display: grid;
    grid-template-columns: var(--process-icon-size) 76px 66px minmax(22px, 1fr);
    gap: 5px;
    align-items: center;
    text-align: left;
  }
  .process-icon { margin: 0; border-radius: 10px; transform: scale(.86); }
  .process-step b,
  .process-step small {
    min-height: 0;
    margin: 0;
    overflow-wrap: normal;
    white-space: nowrap;
  }
  .step-progress { width: auto; margin: 0; }
  .process-step:not(:last-child)::before,
  .process-step:not(:last-child)::after {
    width: 2px;
    height: 8px;
    top: calc(50% + var(--process-icon-size) / 2 - 2px);
    left: calc(var(--process-icon-size) / 2 - 1px);
    transform: scaleY(0);
    transform-origin: center top;
  }
  .process-step:not(:last-child)::before { transform: scaleY(1); }
  .process-step.is-complete:not(:last-child)::after { transform: scaleY(1); }
  .process-step.is-active .process-icon { animation-name: processActivePulseMobile; }
  @keyframes processActivePulseMobile {
    0%, 100% {
      transform: scale(.86);
      box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 0 3px rgba(75,198,255,.06), 0 0 20px rgba(75,198,255,.55);
    }
    50% {
      transform: scale(.94);
      border-color: #c4f5ff;
      box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 0 5px rgba(75,198,255,.07), 0 0 30px rgba(75,198,255,.88);
    }
  }
  .insight-alert { animation-name: insightRiseMobile; }
  @keyframes insightRiseMobile {
    0% { opacity: 0; transform: translateY(14px) scale(.98); }
    5% { opacity: 1; transform: translateY(-55px) scale(1); }
    20% { opacity: 1; transform: translateY(-59px) scale(1); }
    25% { opacity: 0; transform: translateY(-74px) scale(.99); }
    26%, 100% { opacity: 0; transform: translateY(14px) scale(.98); }
  }
}

@media (max-width: 360px) {
  .process-track { padding-right: 8px; padding-left: 8px; }
  .process-step { grid-template-columns: 34px 72px 62px minmax(20px, 1fr); gap: 4px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .process-step.is-complete:not(:last-child)::after { transform: scaleY(1); }
}

/* 3D load-planning truck: cutaway body with causal pallet loading. */
.scene-logistics .scene-body {
  grid-template-columns: minmax(0, 1.5fr) minmax(150px, .5fr);
  gap: 18px;
  align-items: center;
}
.load-planner-v2,
.load-truck-visual {
  min-width: 0;
}
.load-truck-visual {
  position: relative;
  display: grid;
  width: 100%;
  place-items: center;
  isolation: isolate;
}
.truck-3d-svg {
  display: block;
  width: min(100%, 520px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 18px rgba(0, 7, 15, .38));
}
.truck-3d-rig {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: loadTruckSettle 3.8s ease-in-out infinite alternate;
}
.truck-wheel {
  transform-box: fill-box;
  transform-origin: center;
}
.cargo-unit {
  opacity: 0;
  transform: translate(42px, -23px) scale(.86);
  transform-box: fill-box;
  transform-origin: center bottom;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .48));
}
.cargo-unit-1 { animation: cargoLoadOne 9.6s var(--ease-out-expo) infinite; }
.cargo-unit-2 { animation: cargoLoadTwo 9.6s var(--ease-out-expo) infinite; }
.cargo-unit-3 { animation: cargoLoadThree 9.6s var(--ease-out-expo) infinite; }
.cargo-unit-4 { animation: cargoLoadFour 9.6s var(--ease-out-expo) infinite; }
.cargo-unit-5 { animation: cargoLoadFive 9.6s var(--ease-out-expo) infinite; }
.cargo-unit-6 { animation: cargoLoadSix 9.6s var(--ease-out-expo) infinite; }
.load-live-badge {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  top: 2px;
  left: 5%;
  min-width: 184px;
  padding: 7px 10px;
  border: 1px solid rgba(102, 216, 255, .2);
  border-radius: 8px;
  background: linear-gradient(105deg, rgba(4, 28, 49, .94), rgba(5, 41, 67, .74));
  box-shadow: 0 10px 28px rgba(0, 7, 14, .26), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(8px);
}
.load-live-badge > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6bffc4;
  box-shadow: 0 0 0 4px rgba(93, 255, 190, .08), 0 0 13px #36e9a0;
  animation: loadStatusPulse 1.6s ease-in-out infinite;
}
.load-live-badge small,
.load-live-badge b {
  display: block;
  overflow: visible;
  white-space: nowrap;
}
.load-live-badge small {
  color: #73a5c4;
  font-size: 11px;
  font-weight: 800;
}
.load-live-badge b {
  margin-top: 2px;
  color: #d7f4ff;
  font-size: 11px;
  letter-spacing: normal;
}
.scene-logistics .load-metrics {
  display: grid;
  gap: 19px;
  align-content: center;
  min-width: 0;
}
.scene-logistics .load-metrics > span {
  min-width: 0;
}
.scene-logistics .load-metrics small,
.scene-logistics .load-metrics b {
  display: block;
}
.scene-logistics .load-metrics small {
  color: #6d8da7;
  font-size: 11px;
  letter-spacing: normal;
}
.scene-logistics .load-metrics b {
  margin: 4px 0 7px;
  color: #d8edf9;
  font-size: 12px;
  letter-spacing: normal;
}

@keyframes loadTruckSettle {
  0% { transform: translateY(1px) rotate(-.15deg); }
  100% { transform: translateY(-2px) rotate(.15deg); }
}
@keyframes loadStatusPulse {
  50% { transform: scale(1.22); filter: brightness(1.3); box-shadow: 0 0 0 6px rgba(93, 255, 190, .06), 0 0 18px #36e9a0; }
}
@keyframes cargoLoadOne {
  0%, 3% { opacity: 0; transform: translate(42px, -23px) scale(.86); }
  11%, 91% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(4px) scale(.98); }
}
@keyframes cargoLoadTwo {
  0%, 13% { opacity: 0; transform: translate(42px, -23px) scale(.86); }
  21%, 91% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(4px) scale(.98); }
}
@keyframes cargoLoadThree {
  0%, 23% { opacity: 0; transform: translate(42px, -23px) scale(.86); }
  31%, 91% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(4px) scale(.98); }
}
@keyframes cargoLoadFour {
  0%, 33% { opacity: 0; transform: translate(42px, -23px) scale(.86); }
  41%, 91% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(4px) scale(.98); }
}
@keyframes cargoLoadFive {
  0%, 43% { opacity: 0; transform: translate(42px, -23px) scale(.86); }
  51%, 91% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(4px) scale(.98); }
}
@keyframes cargoLoadSix {
  0%, 53% { opacity: 0; transform: translate(42px, -23px) scale(.86); }
  61%, 91% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(4px) scale(.98); }
}

@media (max-width: 680px) {
  .scene-logistics .scene-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-content: center;
  }
  .truck-3d-svg {
    width: min(100%, 430px);
    max-height: 178px;
  }
  .load-live-badge {
    top: 0;
    left: 3%;
    min-width: 172px;
    padding: 6px 8px;
  }
  .scene-logistics .load-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }
}

@container (max-width: 500px) {
  .scene-logistics .scene-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-content: center;
  }
  .truck-3d-svg {
    width: min(100%, 430px);
    max-height: 178px;
  }
  .load-live-badge {
    top: 0;
    left: 3%;
    min-width: 172px;
    padding: 6px 8px;
  }
  .scene-logistics .load-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }
}

@media (max-width: 380px) {
  .truck-3d-svg { max-height: 158px; }
  .load-live-badge { transform: scale(.92); transform-origin: left top; }
}

@media (prefers-reduced-motion: reduce) {
  .truck-3d-rig,
  .cargo-unit,
  .load-live-badge > i { animation: none !important; }
  .cargo-unit { opacity: 1; transform: none; }
}