/* ═══════════════════════════════════════════════════════════════════
   Showcase scenes — animated hero visuals on service & industry pages
   (resources/views/partials/showcase/*). Loaded only on those pages.

   Everything is sized in cqw (1cqw = 1% of the scene's width) so each
   scene scales as one picture. initShowcase() in app.js sequences them:
   [data-at="N"] gets .on at step N, [data-at2..4] get .on2…on4.
   Hero backgrounds are always dark, so colours here are fixed.
   ═══════════════════════════════════════════════════════════════════ */

.sc { --c: #7C3AED; position: relative; width: 100%; max-width: 480px; margin-left: auto; aspect-ratio: 1 / .92; container-type: inline-size; color: #fff; user-select: none; }
.sc::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 50%, transparent), transparent); filter: blur(30px); }
/* cqw only resolves against .sc for its descendants, so the base type size lives on the children */
.sc > * { position: absolute; z-index: 1; font-size: 2.6cqw; line-height: 1.35; }
.sc b, .sc strong { font-weight: 700; }
.sc small { display: block; }
@media (max-width: 991.98px) { .sc { margin: 1rem auto 0; } }

/* sequencer states — elements stay visible without JS; reduced motion gets the final frame */
.sc [data-at] { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.sc.is-live [data-at]:not(.on) { opacity: 0; transform: translateY(3cqw) scale(.96); }
.sc.is-resetting > * { opacity: 0 !important; transition: opacity .35s !important; }

/* ── shared pieces ── */
.sc-win { position: absolute; inset: 4% 3% 9% 3%; display: flex; flex-direction: column; overflow: hidden; border-radius: 4.5cqw; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 10cqw 20cqw -6cqw rgba(0, 0, 0, .85), 0 0 18cqw -6cqw var(--c); backdrop-filter: blur(16px); }
.sc-bar { display: flex; align-items: center; gap: 1.4cqw; padding: 2.6cqw 3.2cqw; border-bottom: 1px solid rgba(255, 255, 255, .07); flex: none; }
.sc-bar > i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: rgba(255, 255, 255, .2); flex: none; }
.sc-bar > i:nth-child(1) { background: #F87171; }
.sc-bar > i:nth-child(2) { background: #FBBF24; }
.sc-bar > i:nth-child(3) { background: #34D399; }
.sc-title { margin-left: 1.4cqw; font-weight: 600; color: rgba(255, 255, 255, .75); }
.sc-url { flex: 1; min-height: 6cqw; margin-left: 2cqw; display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 2.4cqw; border-radius: 99px; background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .8); }
.sc-url > i { color: #34D399; font-size: .9em; }
.sc-body { position: relative; flex: 1; min-height: 0; padding: 3.4cqw; background: rgba(6, 9, 18, .55); }
.sc-sk { display: block; height: 1.8cqw; margin-bottom: 1.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .22); }
.sc-sk.dim { background: rgba(255, 255, 255, .1); }
.sc .w40 { width: 40%; } .sc .w50 { width: 50%; } .sc .w60 { width: 60%; } .sc .w70 { width: 70%; } .sc .w80 { width: 80%; } .sc .w90 { width: 90%; }
.sc-cursor { position: absolute; z-index: 3; font-size: 4.6cqw; color: #fff; filter: drop-shadow(0 1cqw 1.5cqw rgba(0, 0, 0, .6)); }

.sc .float-chip { display: flex; z-index: 4; gap: 2cqw; padding: 2cqw 2.8cqw; border-radius: 3.2cqw; font-size: 2.5cqw; line-height: 1.3; animation: scFloat 6s ease-in-out infinite; }
.sc .float-chip > i { width: 7cqw; height: 7cqw; border-radius: 2.2cqw; font-size: 3.4cqw; flex: none; }
.sc .float-chip small { font-size: 2.1cqw; }
.sc-chip-tr { top: 0; right: -4cqw; }
.sc-chip-tl { top: 2cqw; left: -6cqw; }
.sc-chip-bl { bottom: 1cqw; left: -6cqw; animation-delay: -3s !important; }
.sc-chip-br { bottom: 1cqw; right: -4cqw; animation-delay: -3s !important; }
.sc .sc-ok { background: linear-gradient(135deg, #10B981, #059669); }
.sc .sc-wa { background: #25D366; }
.sc-ring { --p: 100; position: relative; width: 8cqw; height: 8cqw; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#34D399 calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); }
.sc-ring::before { content: ''; position: absolute; inset: .8cqw; border-radius: 50%; background: #0D1324; }
.sc-ring b { position: relative; font-size: 2.3cqw; }
@media (max-width: 575.98px) {
  .sc-chip-tr, .sc-chip-br { right: 0; }
  .sc-chip-tl, .sc-chip-bl { left: 0; }
}

/* ── website ── */
.sw-nav { display: flex; align-items: center; gap: 2cqw; margin-bottom: 3cqw; }
.sw-nav b { width: 9cqw; height: 2.6cqw; border-radius: 99px; background: var(--grad); }
.sw-nav span { width: 6cqw; height: 1.5cqw; border-radius: 99px; background: rgba(255, 255, 255, .18); }
.sw-nav em { margin-left: auto; width: 10cqw; height: 4cqw; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.sw-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3cqw; align-items: center; margin-bottom: 3cqw; }
.sw-hero .sc-sk { height: 2.6cqw; }
.sw-btn { display: block; width: 18cqw; height: 5.4cqw; margin-top: 2cqw; border-radius: 99px; background: var(--grad); transition: transform .2s, box-shadow .3s; }
.sw-btn.on2 { transform: scale(.94); box-shadow: 0 0 0 1.5cqw color-mix(in srgb, var(--c) 35%, transparent); }
.sw-art { aspect-ratio: 1.2; display: grid; place-items: center; border-radius: 3cqw; font-size: 8cqw; background: linear-gradient(135deg, #2563EB, #7C3AED 55%, #22D3EE); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.sw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.sw-cards > div { padding: 2.4cqw; border-radius: 2.6cqw; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.sw-cards i { width: 6cqw; height: 6cqw; display: grid; place-items: center; margin-bottom: 1.8cqw; border-radius: 1.8cqw; font-size: 3cqw; background: rgba(124, 58, 237, .35); }
.sw-cursor { right: 8%; bottom: 6%; transition: right 1.1s var(--ease), bottom 1.1s var(--ease), opacity .4s, transform .2s !important; }
.sc.is-live .sw-cursor:not(.on) { transform: none; }
.sw-cursor.on { right: 72%; bottom: 44%; }
.sw-cursor.on2 { transform: scale(.82); }

/* ── ecommerce ── */
.se-cart { position: relative; margin-left: auto; font-size: 3.6cqw; }
.se-cart b { position: absolute; top: -1.2cqw; right: -2cqw; min-width: 3.6cqw; height: 3.6cqw; display: grid; place-items: center; border-radius: 99px; background: #F472B6; font-size: 2.1cqw; }
.sc.is-live .se-cart b:not(.on) { transform: scale(0); }
.se-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.se-product { display: flex; flex-direction: column; gap: 1.4cqw; padding: 2.6cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.se-img { position: relative; aspect-ratio: 1.2; display: grid; place-items: center; border-radius: 2.4cqw; font-size: 10cqw; background: linear-gradient(135deg, #1E3A8A, #6D28D9); }
.se-img span { position: absolute; top: 1.6cqw; left: 1.6cqw; padding: .4cqw 1.4cqw; border-radius: 99px; background: #F472B6; font-size: 2cqw; font-weight: 700; }
.se-product strong { font-size: 2.8cqw; }
.se-price { font: 700 3.4cqw var(--font-display); }
.se-price s { margin-right: 1cqw; font-size: .65em; font-weight: 400; color: rgba(255, 255, 255, .4); }
.se-btn, .sre-btn { position: relative; display: block; height: 6.4cqw; overflow: hidden; border-radius: 99px; background: var(--grad); font-weight: 600; }
.se-btn > span, .sre-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1cqw; transition: transform .45s var(--ease); }
.se-btn .t2, .sre-btn .t2 { transform: translateY(100%); background: #10B981; }
.se-btn.on2 .t1, .sre-btn.on2 .t1 { transform: translateY(-100%); }
.se-btn.on2 .t2, .sre-btn.on2 .t2 { transform: none; }
.se-side { display: flex; flex-direction: column; gap: 3cqw; }
.se-mini { display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .05); }
.se-mini > div:last-child { flex: 1; }
.se-thumb { width: 10cqw; height: 10cqw; flex: none; display: grid; place-items: center; border-radius: 2.2cqw; font-size: 5cqw; background: linear-gradient(135deg, #0E7490, #2563EB); }
.se-checkout { padding: 2.6cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.se-checkout small { color: rgba(255, 255, 255, .55); }
.se-steps { display: flex; gap: 1.4cqw; margin: 2cqw 0; }
.se-steps span { flex: 1; padding: 1.2cqw 0; text-align: center; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: 2.2cqw; transition: background .4s; }
.se-steps span.on2 { background: var(--grad); }
.se-upi { display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 2cqw; border-radius: 2cqw; background: rgba(16, 185, 129, .15); color: #6EE7B7; font-weight: 600; }

/* ── lms ── */
.sl-grid { display: flex; flex-direction: column; gap: 3cqw; }
.sl-video { position: relative; aspect-ratio: 16 / 7; display: grid; place-items: center; overflow: hidden; border-radius: 3cqw; background: radial-gradient(circle at 30% 30%, #312E81, #0B1020 70%); }
.sl-play { width: 11cqw; height: 11cqw; display: grid; place-items: center; border-radius: 50%; font-size: 6cqw; background: rgba(255, 255, 255, .15); animation: scPulse 2s infinite; }
.sl-live { position: absolute; top: 2cqw; left: 2cqw; display: flex; align-items: center; gap: .8cqw; padding: .5cqw 1.6cqw; border-radius: 99px; background: #EF4444; font-size: 2cqw; font-weight: 700; }
.sl-live i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #fff; animation: scBlink 1s infinite; }
.sl-prog { position: absolute; left: 3cqw; right: 3cqw; bottom: 2.4cqw; height: 1.2cqw; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .15); }
.sl-prog b { display: block; width: 100%; height: 100%; background: var(--grad); transition: width 3.6s linear !important; }
.sc.is-live .sl-prog b:not(.on) { opacity: 1; transform: none; width: 0; }
.sl-list { display: grid; gap: 1.6cqw; margin: 0; padding: 0; list-style: none; }
.sl-list li { display: flex; align-items: center; gap: 2cqw; padding: 1.7cqw 2.4cqw; border-radius: 2.4cqw; background: rgba(255, 255, 255, .05); }
.sl-list li i { font-size: 3.2cqw; color: rgba(255, 255, 255, .2); transition: color .4s, transform .4s var(--ease); }
.sl-list li.on2 i { color: #34D399; transform: scale(1.15); }
.sl-list li em { margin-left: auto; font-style: normal; font-size: 2.1cqw; color: rgba(255, 255, 255, .45); }

/* ── erp ── */
.sx { left: 10cqw; top: 5cqw; width: 80cqw; height: 80cqw; }
.sx-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-lines line { stroke: color-mix(in srgb, var(--c) 60%, #fff); stroke-width: .6; stroke-dasharray: 2 2; opacity: .6; animation: scDash 1.2s linear infinite; }
.sx-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 22cqw; height: 22cqw; display: grid; place-content: center; text-align: center; border-radius: 50%; font: 700 4cqw var(--font-display); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, #1E1B4B); box-shadow: 0 0 0 2cqw rgba(124, 58, 237, .15), 0 0 12cqw -2cqw var(--c); }
.sx-core i { display: block; font-size: 6cqw; line-height: 1; animation: scSpin 10s linear infinite; }
.sx-core::after { content: ''; position: absolute; inset: -2cqw; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); animation: scRing 2.4s ease-out infinite; }
.sx-node { position: absolute; left: calc(50% + sin(var(--a)) * 44.7%); top: calc(50% - cos(var(--a)) * 44.7%); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: .8cqw; padding: 1.8cqw 2.4cqw; white-space: nowrap; border-radius: 3cqw; font-size: 2.3cqw; font-weight: 600; background: rgba(13, 19, 36, .92); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .8); }
.sx-node i { font-size: 4cqw; color: color-mix(in srgb, var(--c) 45%, #fff); }
.sx-bars { display: flex; align-items: flex-end; gap: .8cqw; height: 7cqw; }
.sx-bars b { width: 1.6cqw; height: var(--h); border-radius: .6cqw; background: var(--grad); }

/* ── mobile ── */
.sm-phone { left: 27cqw; top: 1cqw; width: 46cqw; height: 88cqw; overflow: hidden; border-radius: 8cqw; background: #05070F; border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.2cqw #1F2937, 0 10cqw 20cqw -6cqw rgba(0, 0, 0, .9), 0 0 20cqw -6cqw var(--c); }
.sm-notch { position: absolute; top: 2.6cqw; left: 50%; translate: -50% 0; z-index: 3; width: 14cqw; height: 3.6cqw; border-radius: 99px; background: #000; }
.sm-screen { position: absolute; inset: 2cqw 2cqw 11cqw; overflow: hidden; border-radius: 6.4cqw 6.4cqw 2cqw 2cqw; background: linear-gradient(180deg, #111A3A, #0B1020); }
.sm-track { display: flex; width: 300%; height: 100%; transition: transform .8s var(--ease) !important; }
.sc.is-live .sm-track:not(.on) { opacity: 1; transform: none; }
.sm-track.on { transform: translateX(-33.333%); }
.sm-track.on2 { transform: translateX(-66.666%); }
.sm-page { position: relative; width: 33.333%; display: flex; flex-direction: column; gap: 2cqw; padding: 9cqw 3.4cqw 3cqw; }
.sm-page small { font-size: 2.2cqw; color: rgba(255, 255, 255, .55); }
.sm-page strong { font: 700 3.6cqw var(--font-display); }
.sm-card { padding: 2.6cqw; border-radius: 3cqw; background: var(--grad); }
.sm-card b { font: 700 4cqw var(--font-display); }
.sm-card .sc-sk { background: rgba(255, 255, 255, .45); }
.sm-row { display: flex; align-items: center; gap: 2cqw; padding: 2cqw; border-radius: 2.6cqw; background: rgba(255, 255, 255, .06); }
.sm-row i { color: #A78BFA; }
.sm-row .sc-sk { flex: 1; margin: 0; }
.sm-chart { display: flex; align-items: flex-end; gap: 1.6cqw; height: 26cqw; padding: 2cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .05); }
.sm-chart b { flex: 1; height: var(--h); border-radius: 1cqw 1cqw .4cqw .4cqw; background: linear-gradient(180deg, #22D3EE, #7C3AED); }
.sm-steps { display: grid; gap: 3cqw; margin: 0; padding: 0 0 0 1cqw; list-style: none; }
.sm-steps li { position: relative; padding-left: 5cqw; font-size: 2.6cqw; color: rgba(255, 255, 255, .5); }
.sm-steps li::before { content: ''; position: absolute; left: 0; top: .4cqw; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; border: .5cqw solid rgba(255, 255, 255, .25); }
.sm-steps li.ok { color: #fff; }
.sm-steps li.ok::before { background: #34D399; border-color: #34D399; }
.sm-tap { position: absolute; left: 50%; top: 58%; width: 8cqw; height: 8cqw; margin: -4cqw; border-radius: 50%; background: rgba(255, 255, 255, .4); pointer-events: none; }
.sm-tap.on { animation: scTap .7s var(--ease) forwards; }
.sm-push { position: absolute; top: 7cqw; left: 3cqw; right: 3cqw; z-index: 4; display: flex; align-items: center; gap: 2cqw; padding: 2cqw 2.4cqw; border-radius: 3cqw; font-size: 2.3cqw; background: rgba(30, 41, 59, .94); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); }
.sm-push i { width: 6cqw; height: 6cqw; flex: none; display: grid; place-items: center; border-radius: 1.8cqw; background: var(--grad); }
.sm-push b { font-size: 2.3cqw; }
.sm-push small { font-size: 2cqw; color: rgba(255, 255, 255, .6); }
.sc.is-live .sm-push:not(.on) { transform: translateY(-14cqw); }
.sm-dock { position: absolute; left: 2cqw; right: 2cqw; bottom: 2cqw; height: 8cqw; display: flex; align-items: center; justify-content: space-around; font-size: 3.4cqw; color: rgba(255, 255, 255, .5); }
.sm-dock i:first-child { color: #fff; }

/* ── custom software (code) ── */
.sk-tab { margin-left: 2cqw; padding: .8cqw 2.2cqw; border-radius: 1.6cqw; background: rgba(6, 9, 18, .6); font-size: 2.3cqw; color: rgba(255, 255, 255, .8); }
.sk-code { font: 2.55cqw/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.sk-code > div { overflow: hidden; clip-path: inset(0 0 0 0); transition: clip-path .7s steps(20) !important; }
.sc.is-live .sk-code > div:not(.on) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.sk-code em { display: inline-block; width: 4cqw; font-style: normal; color: rgba(255, 255, 255, .25); }
.sk-code .k { color: #C084FC; }
.sk-code .t { color: #67E8F9; }
.sk-code .f { color: #FCD34D; }
.sk-caret { display: inline-block; width: .9cqw; height: 3cqw; margin-left: .6cqw; vertical-align: middle; background: #fff; animation: scBlink 1s steps(1) infinite; }
.sk-term { min-height: 19cqw; padding: 2.6cqw 3.4cqw; font: 2.4cqw/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #03050B; border-top: 1px solid rgba(255, 255, 255, .08); }
.sk-term .p { color: #34D399; }
.sk-term .ok { color: #6EE7B7; }

/* ── cloud ── */
.scl { inset: 0; }
.scl-cloud { position: absolute; left: 50%; top: 1cqw; translate: -50% 0; display: grid; place-items: center; }
.scl-cloud i { font-size: 30cqw; line-height: 1; color: transparent; background: linear-gradient(180deg, #E0E7FF, color-mix(in srgb, var(--c) 55%, #93C5FD)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 6cqw color-mix(in srgb, var(--c) 60%, transparent)); }
.scl-cloud b { position: absolute; top: 52%; font: 800 4cqw var(--font-display); color: #1E1B4B; }
.scl-wires, .scl-servers { position: absolute; left: 4cqw; right: 4cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqw; }
.scl-wires { top: 30cqw; height: 21cqw; justify-items: center; }
.scl-wires span { position: relative; width: 2px; height: 100%; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05)); }
.scl-wires span::after { content: ''; position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 8px #22D3EE; animation: scPacket 1.6s linear infinite; }
.scl-wires span:nth-child(2)::after { animation-delay: -.6s; animation-direction: reverse; }
.scl-wires span:nth-child(3)::after { animation-delay: -1.1s; }
.scl-wires span:nth-child(4)::after { animation-delay: -.3s; animation-direction: reverse; }
.scl-servers { top: 51cqw; }
.scl-srv { position: relative; display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.4cqw 2cqw; border-radius: 2.6cqw; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); }
.scl-srv i { position: relative; display: block; height: 2.4cqw; border-radius: .8cqw; background: rgba(0, 0, 0, .35); }
.scl-srv i::after { content: ''; position: absolute; right: 1cqw; top: 50%; width: 1cqw; height: 1cqw; margin-top: -.5cqw; border-radius: 50%; background: #34D399; box-shadow: 0 0 6px #34D399; animation: scBlink 1.4s infinite; }
.scl-srv i:nth-child(2)::after { animation-delay: -.4s; }
.scl-srv i:nth-child(3)::after { animation-delay: -.9s; background: #22D3EE; box-shadow: 0 0 6px #22D3EE; }
.scl-srv b { text-align: center; font: 600 2.2cqw ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255, 255, 255, .7); }
.scl-new { border-color: rgba(52, 211, 153, .6); box-shadow: 0 0 6cqw -2cqw #34D399; }
.scl-new span { position: absolute; top: -3.4cqw; left: 50%; translate: -50% 0; padding: .4cqw 1.4cqw; white-space: nowrap; border-radius: 99px; background: #10B981; font-size: 1.9cqw; font-weight: 700; }
.scl-load { position: absolute; left: 30cqw; right: 4cqw; top: 73cqw; }
.scl-load small { font-size: 2.2cqw; color: rgba(255, 255, 255, .6); }
.scl-load div { height: 1.8cqw; margin-top: 1cqw; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.scl-load b { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #34D399, #FBBF24, #F87171); animation: scLoad 3s ease-in-out infinite alternate; }

/* ── crm ── */
.sc-win.sr { inset: 4% 3% 20% 3%; }
.sr-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; align-items: start; }
.sr-col { min-height: 48cqw; padding: 2cqw; border-radius: 2.6cqw; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); transition: background .5s, border-color .5s, box-shadow .5s; }
.sr-col h6 { display: flex; justify-content: space-between; margin: 0 0 2cqw; font-size: 2.4cqw; color: rgba(255, 255, 255, .75); }
.sr-col h6 em { padding: 0 1.2cqw; border-radius: 99px; font-style: normal; font-size: 2cqw; background: rgba(255, 255, 255, .1); }
.sr-card { margin-bottom: 1.8cqw; padding: 2cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .07); }
.sr-won.on2 { background: rgba(16, 185, 129, .12); border-color: rgba(52, 211, 153, .5); box-shadow: 0 0 8cqw -3cqw #10B981; }
.sr-deal { position: absolute; z-index: 2; left: 5.4cqw; top: 31cqw; width: 23.4cqw; padding: 2cqw; border-radius: 2cqw; font-size: 2.3cqw; background: linear-gradient(135deg, rgba(37, 99, 235, .95), rgba(124, 58, 237, .95)); box-shadow: 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .8); transition: left .9s var(--ease), top .9s var(--ease), background .6s, opacity .5s, transform .6s !important; }
.sr-deal b { display: block; }
.sr-deal span { font-size: 2cqw; opacity: .85; }
.sr-deal.on2 { left: 35.3cqw; top: 21cqw; }
.sr-deal.on3 { left: 65.1cqw; top: 21cqw; background: linear-gradient(135deg, #059669, #10B981); }

/* ── automation ── */
.sa { left: 8cqw; right: 12cqw; top: 3cqw; display: flex; flex-direction: column; }
.sa-node { position: relative; display: flex; align-items: center; gap: 2.6cqw; padding: 2.3cqw 3cqw; border-radius: 3.4cqw; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 5cqw 10cqw -4cqw rgba(0, 0, 0, .8); backdrop-filter: blur(12px); transition: border-color .4s, opacity .5s var(--ease), transform .6s var(--ease); }
.sa-node:nth-of-type(2), .sa-node:nth-of-type(4) { margin-left: 8cqw; margin-right: -8cqw; }
.sa-node > i { width: 8cqw; height: 8cqw; flex: none; display: grid; place-items: center; border-radius: 2.4cqw; font-size: 3.8cqw; background: rgba(255, 255, 255, .08); }
.sa-trig > i { background: linear-gradient(135deg, #F59E0B, #F97316); }
.sa-node b { display: block; font-size: 2.7cqw; }
.sa-node small { font-size: 2.2cqw; color: rgba(255, 255, 255, .55); }
.sa-ok { width: 5cqw; height: 5cqw; flex: none; margin-left: auto; display: grid; place-items: center; border-radius: 50%; color: transparent; background: rgba(255, 255, 255, .08); transition: background .4s, color .4s, transform .4s var(--ease); }
.sa-node.on2 { border-color: rgba(52, 211, 153, .45); }
.sa-node.on2 .sa-ok { color: #fff; background: #10B981; transform: scale(1.1); }
.sa-link { position: relative; align-self: center; width: 2px; height: 5.4cqw; overflow: hidden; background: rgba(255, 255, 255, .15); }
.sc.is-live .sa-link:not(.on) { opacity: 1; transform: none; }
.sa-link::after { content: ''; position: absolute; inset: 0; transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--c), #22D3EE); transition: transform .6s var(--ease); }
.sa-link.on::after { transform: scaleY(1); }

/* ── ui/ux design ── */
.sd-tools { display: flex; gap: 2.4cqw; margin-left: auto; font-size: 3cqw; color: rgba(255, 255, 255, .55); }
.sd-tools i:nth-child(3) { color: #fff; }
.sd-canvas { background-color: rgba(6, 9, 18, .6); background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 4cqw 4cqw; }
.sd-pen { position: absolute; left: 4cqw; top: 3cqw; width: 50cqw; height: 20cqw; overflow: visible; }
.sd-pen path { fill: none; stroke: #F472B6; stroke-width: 2; stroke-dasharray: 320; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
.sd-pen circle { fill: #fff; stroke: #F472B6; stroke-width: 1.5; }
.sc.is-live .sd-pen:not(.on) { opacity: 1; transform: none; }
.sc.is-live .sd-pen:not(.on) path { stroke-dashoffset: 320; }
.sd-frame { position: absolute; left: 7cqw; top: 25cqw; width: 46cqw; padding: 3.4cqw; border-radius: 3cqw; background: #F8FAFC; box-shadow: 0 6cqw 12cqw -4cqw rgba(0, 0, 0, .7); }
.sd-frame .sc-sk { background: #CBD5E1; }
.sd-frame .sc-sk.dim { background: #E2E8F0; }
.sd-cta { display: block; width: 20cqw; height: 5.6cqw; margin-top: 2.4cqw; border-radius: 99px; background: linear-gradient(90deg, #2563EB, #7C3AED); }
.sd-sel { position: absolute; inset: -1.6cqw; border: 1.5px solid #22D3EE; border-radius: 3.6cqw; }
.sd-sel i { position: absolute; width: 1.8cqw; height: 1.8cqw; background: #fff; border: 1.5px solid #22D3EE; }
.sd-sel i:nth-child(1) { left: -1cqw; top: -1cqw; }
.sd-sel i:nth-child(2) { right: -1cqw; top: -1cqw; }
.sd-sel i:nth-child(3) { left: -1cqw; bottom: -1cqw; }
.sd-sel i:nth-child(4) { right: -1cqw; bottom: -1cqw; }
.sd-swatches { position: absolute; right: 5cqw; top: 5cqw; display: grid; gap: 2cqw; }
.sd-swatches i { display: block; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: var(--s); box-shadow: 0 0 0 .6cqw rgba(255, 255, 255, .12); }
.sd-comp { position: absolute; right: 4cqw; bottom: 5cqw; padding: 2cqw 3cqw; border-radius: 2.4cqw; font-size: 2.4cqw; background: rgba(124, 58, 237, .25); border: 1px dashed rgba(167, 139, 250, .8); }
.sc.is-live .sd-comp:not(.on) { transform: translateX(8cqw) scale(.96); }
.sd-user { position: absolute; left: 62%; top: 72%; z-index: 3; display: flex; align-items: flex-start; gap: .6cqw; transition: left 1s var(--ease), top 1s var(--ease), opacity .4s, transform .5s !important; }
.sd-user i { font-size: 4cqw; color: #F472B6; }
.sd-user b { margin-top: 3cqw; padding: .4cqw 1.4cqw; border-radius: 99px; background: #F472B6; font-size: 2cqw; }
.sd-user.on2 { left: 38%; top: 44%; }

/* ── seo ── */
.ss-list { position: relative; height: 54cqw; }
.ss-r { position: absolute; left: 0; right: 0; top: calc(var(--s) * 13.4cqw); min-height: 11.6cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 2.4cqw; border-radius: 2.6cqw; background: rgba(255, 255, 255, .05); transition: top .8s var(--ease), background .4s, box-shadow .4s, opacity .5s, transform .6s !important; }
.ss-r > div { flex: 1; min-width: 0; }
.ss-r .sc-sk { margin: .8cqw 0; }
.ss-r > b { width: 6cqw; height: 6cqw; flex: none; display: grid; place-items: center; border-radius: 1.8cqw; font-size: 2.4cqw; background: rgba(255, 255, 255, .08); }
.ss-r.on2:not(.ss-you) { top: calc((var(--s) + 1) * 13.4cqw); }
.ss-you { z-index: 2; background: linear-gradient(135deg, rgba(37, 99, 235, .4), rgba(124, 58, 237, .4)); border: 1px solid rgba(167, 139, 250, .5); }
.ss-you strong { display: block; font-size: 2.6cqw; }
.ss-you small { font-size: 2.1cqw; color: #6EE7B7; }
.ss-you > b { background: linear-gradient(135deg, #F59E0B, #F97316); }
.ss-you.on2 { top: calc(2 * 13.4cqw); }
.ss-you.on3 { top: 13.4cqw; }
.ss-you.on4 { top: 0; box-shadow: 0 0 10cqw -3cqw var(--c); }
.ss-chart { display: block; width: 100%; height: 11cqw; margin-top: 1cqw; overflow: visible; }
.ss-chart path { fill: none; stroke: #34D399; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.sc.is-live .ss-chart:not(.on) { opacity: 1; transform: none; }
.sc.is-live .ss-chart:not(.on) path { stroke-dashoffset: 300; }

/* ── ai ── */
.sai-net { inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .35; }
.sai-net line { stroke: color-mix(in srgb, var(--c) 60%, #fff); stroke-width: .3; }
.sai-net circle { fill: #A78BFA; animation: scBlink 2s ease-in-out infinite; }
.sai-net circle:nth-of-type(odd) { animation-delay: -1s; }
.sai .sc-bar { gap: 2cqw; }
.sai-avatar { width: 6cqw; height: 6cqw; display: grid; place-items: center; border-radius: 50%; font-size: 3cqw; background: var(--grad); }
.sai .sc-title em { margin-left: 1cqw; font-style: normal; font-size: 2cqw; color: #34D399; }
.sai-chat { display: flex; flex-direction: column; gap: 2.2cqw; }
.sai-msg { max-width: 80%; padding: 2cqw 2.8cqw; border-radius: 3cqw; font-size: 2.6cqw; line-height: 1.45; }
.sai-msg.me { align-self: flex-end; border-bottom-right-radius: .8cqw; background: var(--grad); }
.sai-msg.bot { align-self: flex-start; min-height: 7cqw; border-bottom-left-radius: .8cqw; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .1); }
.sai-typing { display: inline-flex; gap: 1cqw; padding: 1cqw 0; }
.sai-typing i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: rgba(255, 255, 255, .7); animation: scBounce 1s infinite; }
.sai-typing i:nth-child(2) { animation-delay: .15s; }
.sai-typing i:nth-child(3) { animation-delay: .3s; }
.sai-typing.on2 { display: none; }
.sc:not(.is-live) .sai-typing { display: none; }

/* ── logistics ── */
.sc-win.sg { inset: 4% 3% 15% 3%; }
.sg-map { padding: 0; background-color: #0A1224; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 6cqw 6cqw; }
.sg-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-route { fill: none; stroke: color-mix(in srgb, var(--c) 60%, #22D3EE); stroke-width: 1.6; stroke-dasharray: 4 3; animation: scDash 1.4s linear infinite reverse; }
.sg-truck circle { fill: #fff; }
.sg-truck .halo { fill: #22D3EE; opacity: .35; animation: scBlink 1.2s infinite; }
.sg-pin { position: absolute; display: flex; align-items: center; gap: .8cqw; padding: .8cqw 1.8cqw; white-space: nowrap; border-radius: 99px; font-size: 2.2cqw; background: rgba(13, 19, 36, .9); border: 1px solid rgba(255, 255, 255, .15); }
.sg-pin i { color: #F472B6; }
.sg-pin.a { left: 3%; bottom: 6%; }
.sg-pin.b { right: 3%; top: 5%; }
.sg-track { flex: none; padding: 2.6cqw 3.4cqw; background: rgba(6, 9, 18, .75); border-top: 1px solid rgba(255, 255, 255, .08); }
.sg-track b { font-size: 2.6cqw; }
.sg-track ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; margin: 1.6cqw 0 0; padding: 0; list-style: none; }
.sg-track li { position: relative; padding-top: 3cqw; font-size: 2cqw; color: rgba(255, 255, 255, .75); }
.sg-track li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.2cqw; border-radius: 99px; background: linear-gradient(90deg, #34D399, #22D3EE); }

/* ── healthcare ── */
.sh-vitals { display: flex; gap: 2.4cqw; margin-bottom: 2.6cqw; }
.sh-ecg { flex: 1; height: 14cqw; overflow: hidden; border-radius: 2.6cqw; background: rgba(16, 185, 129, .08); border: 1px solid rgba(52, 211, 153, .2); }
.sh-ecg svg { width: 200%; height: 100%; animation: scEcg 3s linear infinite; }
.sh-ecg path { fill: none; stroke: #34D399; stroke-width: 1.6; stroke-linejoin: round; }
.sh-bpm { width: 22cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 2.6cqw; background: rgba(239, 68, 68, .12); border: 1px solid rgba(248, 113, 113, .3); }
.sh-bpm i { font-size: 3.6cqw; color: #F87171; animation: scBeat 1s infinite; }
.sh-bpm b { font: 700 4.6cqw/1 var(--font-display); }
.sh-bpm small { font-size: 2cqw; color: rgba(255, 255, 255, .55); }
.sh-card { display: flex; align-items: center; gap: 2.4cqw; margin-bottom: 1.8cqw; padding: 2.2cqw 2.6cqw; border-radius: 2.6cqw; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.sh-card > i { width: 7cqw; height: 7cqw; flex: none; display: grid; place-items: center; border-radius: 2cqw; font-size: 3.4cqw; color: #67E8F9; background: rgba(34, 211, 238, .15); }
.sh-card b { display: block; font-size: 2.6cqw; }
.sh-card small { font-size: 2.1cqw; color: rgba(255, 255, 255, .55); }
.sc.is-live .sh-card:not(.on) { transform: translateX(6cqw); }

/* ── real estate ── */
.sre { inset: 0; }
.sre-tower { position: absolute; left: 6cqw; top: 3cqw; width: 34cqw; height: 84cqw; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 1.6cqw; padding: 3cqw 2.4cqw; border-radius: 2cqw 2cqw 0 0; background: linear-gradient(180deg, #1E293B, #0F172A); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 16cqw -6cqw var(--c); }
.sre-tower i { display: block; height: 9cqw; border-radius: .8cqw; background: rgba(255, 255, 255, .06); animation: scWindow 6s infinite; animation-delay: calc(var(--i) * -1.7s); }
.sc-win.sre-listing { inset: 14cqw 2cqw auto 32cqw; }
.sre-photo { position: relative; height: 24cqw; display: grid; place-items: center; font-size: 11cqw; background: linear-gradient(135deg, #0EA5E9, #6366F1 60%, #A855F7); }
.sre-photo span { position: absolute; top: 2cqw; left: 2cqw; padding: .6cqw 1.6cqw; border-radius: 99px; font-size: 2cqw; font-weight: 700; background: rgba(0, 0, 0, .45); }
.sre-info { padding: 3cqw 3cqw 1cqw; background: rgba(6, 9, 18, .6); }
.sre-info b { display: block; font-size: 3cqw; }
.sre-info small { font-size: 2.2cqw; color: rgba(255, 255, 255, .55); }
.sre-info strong { display: block; margin-top: 1.2cqw; font: 700 4.6cqw var(--font-display); color: transparent; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.sre-btn { margin: 0; border-radius: 0; height: 7cqw; font-size: 2.6cqw; }

/* ── manufacturing ── */
.sf-top { display: flex; align-items: center; gap: 3cqw; margin-bottom: 3cqw; }
.sf-gears { position: relative; width: 34cqw; height: 26cqw; flex: none; }
.sf-gears i { position: absolute; line-height: 1; }
.sf-gears .g1 { left: 0; top: 0; font-size: 18cqw; color: color-mix(in srgb, var(--c) 40%, #CBD5E1); animation: scSpin 6s linear infinite; }
.sf-gears .g2 { left: 15cqw; top: 11cqw; font-size: 12cqw; color: #94A3B8; animation: scSpin 4s linear infinite reverse; }
.sf-gears .g3 { left: 23cqw; top: 0; font-size: 9cqw; color: #22D3EE; animation: scSpin 3s linear infinite; }
.sf-gauge { position: relative; flex: 1; text-align: center; }
.sf-gauge svg { display: block; width: 100%; }
.sf-gauge path { fill: none; stroke-width: 8; stroke-linecap: round; }
.sf-gauge .bg { stroke: rgba(255, 255, 255, .1); }
.sf-gauge .fg { stroke: #34D399; stroke-dasharray: 132; stroke-dashoffset: 17; transition: stroke-dashoffset 1.4s var(--ease); }
.sc.is-live .sf-gauge:not(.on) { opacity: 1; transform: none; }
.sc.is-live .sf-gauge:not(.on) .fg { stroke-dashoffset: 132; }
.sf-gauge b { position: absolute; left: 0; right: 0; top: 34%; font: 700 5cqw var(--font-display); }
.sf-gauge small { position: absolute; left: 0; right: 0; top: 72%; font-size: 2.2cqw; color: rgba(255, 255, 255, .55); }
.sf-belt { position: relative; height: 9cqw; margin-bottom: 3cqw; overflow: hidden; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .1); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 3cqw, rgba(255, 255, 255, .03) 3cqw 6cqw); animation: scBelt 1s linear infinite; }
.sf-box { position: absolute; top: 1.4cqw; width: 6cqw; height: 6cqw; border-radius: 1.2cqw; background: linear-gradient(135deg, #F59E0B, #D97706); animation: scConvey 4.5s linear infinite; }
.sf-box:nth-child(2) { animation-delay: -1.5s; }
.sf-box:nth-child(3) { animation-delay: -3s; }
.sf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.sf-stats > div { padding: 2.2cqw; border-radius: 2.4cqw; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.sf-stats small { font-size: 2cqw; color: rgba(255, 255, 255, .55); }
.sf-stats b { font: 700 3.6cqw var(--font-display); }
.sc .sf-alert > i { background: linear-gradient(135deg, #F59E0B, #EF4444); }

/* ── keyframes ── */
@keyframes scFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6cqw; } }
@keyframes scSpin { to { transform: rotate(360deg); } }
@keyframes scBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes scPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .25); } 50% { box-shadow: 0 0 0 3cqw rgba(255, 255, 255, 0); } }
@keyframes scRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes scDash { to { stroke-dashoffset: 8; } }
@keyframes scBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-1cqw); opacity: 1; } }
@keyframes scBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
@keyframes scTap { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@keyframes scPacket { from { top: 100%; } to { top: -6px; } }
@keyframes scLoad { from { transform: scaleX(.3); } to { transform: scaleX(.92); } }
@keyframes scEcg { to { transform: translateX(-50%); } }
@keyframes scWindow { 0%, 40%, 100% { background: rgba(255, 255, 255, .06); box-shadow: none; } 50%, 85% { background: rgba(251, 191, 36, .75); box-shadow: 0 0 3cqw rgba(251, 191, 36, .5); } }
@keyframes scBelt { to { background-position: 6cqw 0; } }
@keyframes scConvey { from { left: -8cqw; } to { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .sc *, .sc *::before, .sc *::after { animation: none !important; transition: none !important; }
}