/* =====================================================================
   WHO WE SERVE+ — styles for assets/revamp/serve-plus.js (html.svx). Home system: frame lines, hairline boards,
   grey-tail headings, petal eyebrows, Solar line icons that draw, purple corner brackets on hover.
   ===================================================================== */
.svx { --svx-line: #e3e4ea; --svx-frame: rgba(17, 19, 31, .07); --svx-ink: #11131f; --svx-grey: #555a6b; --svx-in: calc(var(--pad-x) + 24px); }

/* frame: outer hairlines through every light section, a full-bleed line on top of each */
.svx .finHero, .svx .counter--fin, .svx .finWhy, .svx .finSol, .svx .finOut { position: relative; isolation: isolate; }
.svx .finHero::before, .svx .counter--fin::before, .svx .finWhy::before, .svx .finSol::before, .svx .finOut::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: -1; pointer-events: none;
  border-left: 1px solid var(--svx-frame); border-right: 1px solid var(--svx-frame); }
.svx .counter--fin::after, .svx .finWhy::after, .svx .finSol::after, .svx .finOut::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--svx-line); z-index: -1; }

/* headings: Home voice + grey tail that sweeps to ink on hover */
.svx .svxG { color: transparent; background: linear-gradient(90deg, var(--svx-ink) 0 50%, #a3a7b3 50% 100%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position .9s cubic-bezier(.65, 0, .35, 1); }
.svx :hover > .svxG, .svx h1:hover .svxG, .svx h2:hover .svxG { background-position: 0 0; }
.svx .finHero__title, .svx .finWhy__title, .svx .finSol__title, .svx .finOut__title { font-family: "Geologica", sans-serif !important; font-weight: 500 !important; letter-spacing: -.03em !important; color: var(--svx-ink) !important; }
.svx .finWhy__title, .svx .finSol__title, .svx .finOut__title { font-size: clamp(34px, 3.6vw, 56px) !important; line-height: 1.08 !important; text-align: left !important; max-width: none !important; }

/* eyebrows: petal + spaced caps (the hero badge and the old pills) */
.svx .finHero__badge { padding: 0 !important; gap: 0 !important; background: none !important; border: 0 !important; }
.svx .finHero__badge-laurel { display: none !important; }
.svx .finHero__badge-text, .svx .finWhy .pill, .svx .finOut .pill, .svx .svxEye {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  color: #6b7183 !important; font: 700 12.5px/1 "Geologica", sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase; }
.svx .finHero__badge-text::before, .svx .finWhy .pill::before, .svx .finOut .pill::before, .svx .svxEye::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50% 50% 0 50%; background: #4a3dcc; }

/* entrance for layer-made blocks */
.svx [data-svx-rv] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.svx [data-svx-rv].is-in { opacity: 1; transform: none; }

/* ---------------- hero ---------------- */
.svx .finHero { height: auto !important; min-height: 100vh; padding: 0 var(--pad-x) !important; }
.svx .finHero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0 !important; padding-bottom: 0 !important; align-items: stretch !important; border-top: 1px solid var(--svx-line); margin: 0 calc(-1 * var(--pad-x)); padding: 0 var(--pad-x) !important; }
.svx .finHero__col { grid-column: auto !important; justify-content: center; padding: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 64px) clamp(48px, 6vw, 96px) 24px; gap: 26px !important; }
.svx .finHero__title { font-size: clamp(44px, 4.8vw, 76px) !important; line-height: 1.03 !important; }
.svx .finHero__lead { color: var(--svx-grey) !important; font-size: 17px !important; line-height: 1.65 !important; max-width: 560px; }
.svx .finHero { background: #f6f6f9 !important; overflow: hidden; }
.svx .finHero__art { grid-column: auto !important; position: relative; padding: 0 !important; animation: none !important; }
.svx .finHero__art > img { display: none !important; }
.svx .finHero__col { position: relative; z-index: 2; }
.svx .svxGlobe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; animation: svxFade 1.2s ease both .2s; }
@keyframes svxFade { from { opacity: 0; } }

/* technical drawings (same family as the solution pages): grey line work, a few key ink lines, one purple block */
.svx [data-svx-fig] { --fig-line: rgba(17, 24, 39, .26); --fig-key: rgba(17, 24, 39, .82); --fig-bg: #fff; --fig-soft: #f3f4f6; --fig-accent: #4a3dcc; }
.svx [data-svx-fig] svg { width: 100%; height: auto; display: block; overflow: visible; }
.svx [data-svx-fig] .p { fill: var(--fig-bg); stroke: var(--fig-line); stroke-width: .9; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1), fill-opacity .6s .9s, fill .5s ease, stroke .5s ease; }
.svx [data-svx-fig].is-drawn .p { stroke-dashoffset: 0; fill-opacity: 1; }
.svx [data-svx-fig] .l { fill: none; stroke: var(--fig-line); stroke-width: .9; transition: stroke .4s; }
.svx [data-svx-fig] .l.dash { stroke-dasharray: 3 4; }
.svx [data-svx-fig] .l.is-on { stroke: #4a3dcc; stroke-dasharray: none; stroke-width: 1.4; }
.svx [data-svx-fig] .l.envl { stroke: var(--fig-accent); stroke-width: 1.1; animation: svxMarch2 1.2s linear infinite; }
@keyframes svxMarch2 { to { stroke-dashoffset: -14; } }
.svx [data-svx-fig] g.blk.is-key .p { stroke: var(--fig-key); }
.svx [data-svx-fig] g.blk.is-soft .p.ft, .svx [data-svx-fig] g.blk.is-soft-top .p.ft { fill: var(--fig-soft); }
.svx [data-svx-fig] g.blk.is-hov .p, .svx [data-svx-fig] g.blk.is-hl .p { stroke: #4a3dcc; }
.svx [data-svx-fig] g.blk.is-acc .p { fill: var(--fig-accent); stroke: var(--fig-accent); }
.svx [data-svx-fig] g.blk.is-acc .p.fz { fill: color-mix(in srgb, var(--fig-accent) 74%, #000); stroke: color-mix(in srgb, var(--fig-accent) 74%, #000); }
.svx [data-svx-fig] g.blk.is-acc .p.fx { fill: color-mix(in srgb, var(--fig-accent) 56%, #000); stroke: color-mix(in srgb, var(--fig-accent) 56%, #000); }
.svx [data-svx-fig] g.blk.is-acc.is-flash .p.ft { fill: color-mix(in srgb, var(--fig-accent) 70%, #fff); }
.svx [data-svx-fig] g.blk.pk .p { fill: #fff; stroke: var(--fig-key); }
.svx [data-svx-fig] g.blk.pk.is-ok .p.ft { fill: #29ccb2; stroke: #1fa892; }
.svx [data-svx-fig] g.blk.sh .p { fill: #fff; stroke: var(--fig-key); }
.svx [data-svx-fig] text.lbl { font: 500 12px Inter, sans-serif; fill: #8a8f9c; transition: fill .3s; }
.svx [data-svx-fig] text.lbl.is-on { fill: #4a3dcc; }

/* ---------------- proof row ---------------- */
.svx .counter--fin { padding: 0 var(--pad-x) !important; background: #fff !important; min-height: 0 !important; }
.svx .counter--fin .counter__texture { display: none !important; }
.svx .counter--fin .stats { margin: 0 !important; padding: 0 !important; background: none !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; width: auto !important; max-width: none !important; }
.svx .counter--fin .stats__item { min-width: 0 !important; flex: none !important; width: auto !important; align-items: center !important; text-align: center !important; padding: 48px 24px 52px !important; gap: 10px !important; }
.svx .counter--fin .stats__item + .stats__item { border-left: 1px solid var(--svx-line); }
.svx .counter--fin .stats__value { color: var(--svx-ink) !important; font: 500 clamp(40px, 4vw, 60px)/1 "Geologica", sans-serif !important; letter-spacing: -.035em !important; font-variant-numeric: tabular-nums; }
.svx .counter--fin .stats__label { color: var(--svx-grey) !important; font: 400 15px/1.4 Inter, sans-serif !important; opacity: 1 !important; }

/* ---------------- why: heading row + three drawn cells ---------------- */
.svx .finWhy { display: block !important; padding: 0 var(--pad-x) !important; }
.svx .finWhy__head { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end !important; gap: 24px 64px !important; padding: clamp(96px, 10vw, 140px) 24px 56px; }
.svx .svxHeadL { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.svx .finWhy__desc { text-align: left !important; max-width: 520px !important; color: var(--svx-grey) !important; font: 400 18px/1.6 Inter, sans-serif !important; margin: 0 0 6px !important; }
.svx .finWhy__descEm { color: var(--svx-ink) !important; font-weight: 500 !important; }
.svx .finWhy__grid { gap: 0 !important; border-top: 1px solid var(--svx-line); }
.svx .finWhy__card { border: 0 !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; gap: 0 !important; background: none !important; }
.svx .finWhy__card + .finWhy__card { border-left: 1px solid var(--svx-line) !important; }
.svx .finWhy__illo { order: -1; flex: none !important; height: clamp(240px, 21vw, 300px); border: 0 !important; border-radius: 0 !important; background: none !important; border-bottom: 1px solid var(--svx-line) !important; display: grid; place-items: center; overflow: hidden; }
.svx .finWhy__cardText { padding: 28px 24px 48px; gap: 10px !important; }
.svx .finWhy__cardTitle { font: 500 clamp(22px, 1.8vw, 26px)/1.2 "Geologica", sans-serif !important; letter-spacing: -.02em !important; color: var(--svx-ink) !important; }
.svx .finWhy__cardDesc { color: var(--svx-grey) !important; font-size: 15.5px !important; line-height: 1.6 !important; }

/* drawings: graphite line art, purple accent, teal light */
.svx .svxDraw { width: 92%; max-width: 420px; height: auto; overflow: visible; }
.svx .svxDraw * { vector-effect: non-scaling-stroke; }
.svx .svxE2e .track { stroke: #d5d7df; stroke-width: 1; stroke-dasharray: 2 5; fill: none; }
.svx .svxE2e .link { stroke: #11131f; stroke-opacity: .35; stroke-width: 1.4; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .4s, stroke-opacity .4s; }
.svx .svxE2e .ring { fill: none; stroke: #c9cbd4; stroke-width: 1; stroke-dasharray: 2 6; transform-box: fill-box; transform-origin: center; animation: svxSpin 26s linear infinite; }
.svx .svxE2e .disc { fill: #fff; stroke: #11131f; stroke-opacity: .55; stroke-width: 1.2; transition: stroke .4s, stroke-opacity .4s, fill .4s; transition-delay: calc(var(--i) * .14s); }
.svx .svxE2e .ic { color: #11131f; opacity: .78; transition: color .4s; transition-delay: calc(var(--i) * .14s); }
.svx .svxE2e .ic path, .svx .svxE2e .ic circle, .svx .svxE2e .ic ellipse { stroke-dasharray: 1; stroke-dashoffset: 0; }
.svx .svxE2e .lb { fill: #7a7f8f; font: 700 9.5px/1 "Geologica", sans-serif; letter-spacing: .14em; }
.svx .svxE2e .pulse { fill: #29ccb2; filter: drop-shadow(0 0 5px rgba(41, 204, 178, .9)); animation: svxRun 3.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes svxRun { 0% { transform: translateX(40px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(360px); opacity: 0; } }
@keyframes svxSpin { to { transform: rotate(360deg); } }
.svx .finWhy__card:hover .svxE2e .link { stroke: #4a3dcc; stroke-opacity: 1; animation: svxDraw .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--i, 0) * .25s); }
.svx .finWhy__card:hover .svxE2e .disc { stroke: #4a3dcc; stroke-opacity: 1; fill: #f4f2ff; }
.svx .finWhy__card:hover .svxE2e .ic { color: #4a3dcc; }
.svx .finWhy__card:hover .svxE2e .ic path, .svx .finWhy__card:hover .svxE2e .ic circle { animation: svxDraw .9s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--i) * .2s); }
@keyframes svxDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.svx .svxArch .gd { fill: none; stroke: #b9bcc7; stroke-width: 1; stroke-dasharray: 3 5; animation: svxMarch 4s linear infinite; transition: opacity .5s; }
@keyframes svxMarch { to { stroke-dashoffset: -32; } }
.svx .svxArch .dim path { fill: none; stroke: #9a9eab; stroke-width: 1; }
.svx .svxArch .arm { transform-box: view-box; transform-origin: 200px 130px; animation: svxSpin 9s linear infinite; }
.svx .svxArch .arm path { stroke: #11131f; stroke-opacity: .45; stroke-width: 1.2; fill: none; }
.svx .svxArch .arm circle { fill: #29ccb2; }
.svx .svxArch .pin { fill: #11131f; }
.svx .svxArch .plan { fill: none; stroke: #11131f; stroke-opacity: .5; stroke-width: 1.4; stroke-dasharray: 6 6; }
.svx .svxArch .built { fill: none; stroke: #4a3dcc; stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1); }
.svx .svxArch .fill { fill: #4a3dcc; opacity: 0; transition: opacity .6s ease; }
.svx .finWhy__card:hover .svxArch .built { stroke-dashoffset: 0; }
.svx .finWhy__card:hover .svxArch .fill { opacity: .1; transition-delay: .9s; }
.svx .finWhy__card:hover .svxArch .gd { opacity: .4; }

.svx .svxOps .grid { fill: none; stroke: #e7e8ee; stroke-width: 1; }
.svx .svxOps .axis { fill: none; stroke: #c9cbd4; stroke-width: 1; }
.svx .svxOps .sla { fill: none; stroke: #29ccb2; stroke-width: 1; stroke-dasharray: 4 5; opacity: .8; }
.svx .svxOps .run { animation: svxScroll 9s linear infinite; }
@keyframes svxScroll { to { transform: translateX(-320px); } }
.svx .svxOps .ln { fill: none; stroke: #11131f; stroke-opacity: .7; stroke-width: 1.6; stroke-linejoin: round; transition: stroke .4s, stroke-opacity .4s; }
.svx .svxOps .area { fill: url(#svxOpsFill); opacity: 0; transition: opacity .5s; }
.svx .svxOps .scan { opacity: 0; transition: opacity .3s; }
.svx .svxOps .scan path { stroke: #4a3dcc; stroke-width: 1; stroke-dasharray: 3 3; }
.svx .svxOps .scan circle { fill: #fff; stroke: #4a3dcc; stroke-width: 2; }
.svx .finWhy__card:hover .svxOps .run { animation-play-state: paused; }
.svx .finWhy__card:hover .svxOps .ln { stroke: #4a3dcc; stroke-opacity: 1; }
.svx .finWhy__card:hover .svxOps .area, .svx .finWhy__card:hover .svxOps .scan { opacity: 1; }

/* ---------------- boards (solutions + outcomes): hairline cells, Solar icons, corner brackets ---------------- */
.svx .finSol { background: #f7f7fa !important; display: block !important; padding: 0 var(--pad-x) clamp(96px, 10vw, 140px) !important; }
.svx .finSol__title { padding: clamp(96px, 10vw, 140px) 24px 56px; margin: 0 !important; }
.svx .finOut { background: #f7f7fa !important; display: block !important; padding: 0 var(--pad-x) clamp(96px, 10vw, 140px) !important; }
.svx .finOut__head { align-items: flex-start !important; gap: 18px !important; padding: clamp(96px, 10vw, 140px) 24px 56px; }
.svx .finSol__grid, .svx .finOut__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; border-top: 1px solid var(--svx-line); border-bottom: 1px solid var(--svx-line); }
.svx .finOut__photo { display: none !important; }
.svx .finSolCard, .svx .finOutCard { grid-column: auto !important; grid-row: auto !important; position: relative; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; background: transparent !important; padding: 32px 24px 40px !important; min-height: 248px; }
.svx .finSolCard:nth-child(3n + 2), .svx .finSolCard:nth-child(3n + 3) { border-left: 1px solid var(--svx-line) !important; }
.svx .finSolCard:nth-child(n + 4) { border-top: 1px solid var(--svx-line) !important; }
.svx .finOutCard { gap: 12px !important; }
/* an unfinished last row: close the cells next to the empty slots (right edge of the last card, bottom of the card above an empty slot) */
@media (min-width: 901px) {
  .svx .finSolCard:last-child:not(:nth-child(3n)), .svx .finOut__grid > .finOutCard:last-of-type:not(:nth-of-type(3n)) { border-right: 1px solid var(--svx-line) !important; }
  .svx .finSolCard:nth-last-child(3):nth-child(3n + 3), .svx .finSolCard:nth-last-child(2):nth-child(3n + 3), .svx .finSolCard:nth-last-child(3):nth-child(3n + 2),
  .svx .finOut__grid > .finOutCard:nth-last-of-type(3):nth-of-type(3n + 3), .svx .finOut__grid > .finOutCard:nth-last-of-type(2):nth-of-type(3n + 3), .svx .finOut__grid > .finOutCard:nth-last-of-type(3):nth-of-type(3n + 2) { border-bottom: 1px solid var(--svx-line) !important; margin-bottom: -1px !important; }
}
.svx .finOut__grid > .finOutCard:nth-of-type(3n + 2), .svx .finOut__grid > .finOutCard:nth-of-type(3n + 3) { border-left: 1px solid var(--svx-line) !important; }
.svx .finOut__grid > .finOutCard:nth-of-type(n + 4) { border-top: 1px solid var(--svx-line) !important; }
.svx .finSolCard::after, .svx .finOutCard::after { content: ""; position: absolute; inset: 12px; pointer-events: none; opacity: 0; transform: scale(1.05); transition: opacity .3s, transform .5s cubic-bezier(.2, .8, .2, 1);
  --c: #4a3dcc; --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px var(--l);
  background-repeat: no-repeat; }
.svx .finSolCard:hover::after, .svx .finOutCard:hover::after, .svx .finSolCard:focus-visible::after { opacity: 1; transform: none; }
.svx .finSolCard__icon, .svx .finOutCard__icon { width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; padding: 0 !important; justify-content: flex-start !important; }
.svx .finSolCard__icon img, .svx .finOutCard__icon img { display: none !important; }
.svx .svxIc { width: 32px; height: 32px; color: #4a3dcc; display: block; }
.svx .svxIc path, .svx .svxIc circle, .svx .svxIc ellipse { stroke-dasharray: 1; stroke-dashoffset: 0; }
.svx .is-in .svxIc path, .svx .is-in .svxIc circle, .svx .is-in .svxIc ellipse { animation: svxDraw 1.1s cubic-bezier(.65, 0, .35, 1) both .2s; }
.svx .finSolCard:hover .svxIc path, .svx .finSolCard:hover .svxIc circle, .svx .finOutCard:hover .svxIc path, .svx .finOutCard:hover .svxIc circle, .svx .finOutCard:hover .svxIc ellipse { animation: svxDraw .9s cubic-bezier(.65, 0, .35, 1) both; }
.svx .finSolCard__head { gap: 22px !important; }
.svx .finSolCard__arrow { width: 22px !important; height: 22px !important; color: #9aa0ae !important; transition: color .3s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.svx .finSolCard__arrow svg { width: 20px !important; height: 20px !important; }
.svx .finSolCard:hover .finSolCard__arrow { color: #4a3dcc !important; transform: translate(3px, -3px); }
.svx .finSolCard__title, .svx .finOutCard__title { font: 500 clamp(20px, 1.6vw, 24px)/1.25 "Geologica", sans-serif !important; letter-spacing: -.02em !important; color: var(--svx-ink) !important; }
.svx .finSolCard__desc, .svx .finOutCard__desc { opacity: 1 !important; min-height: 0 !important; color: var(--svx-grey) !important; font-size: 15.5px !important; line-height: 1.6 !important; max-width: 36ch; }
.svx .finOutCard__icon { margin-bottom: 14px; }

/* ---------------- capabilities: the Advisory "extend the core" pattern on white ---------------- */
.svx .finCaps { display: none !important; }
.svx .svxCap { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 100vh; padding: 0 var(--pad-x); background: #fff; }
.svx .svxCap::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: -1; pointer-events: none; border-left: 1px solid var(--svx-frame); border-right: 1px solid var(--svx-frame); }
.svx .svxCap::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--svx-line); z-index: -1; }
.svx .svxCap__l { padding: clamp(80px, 9vw, 120px) clamp(32px, 4vw, 64px) clamp(80px, 9vw, 120px) 24px; }
.svx .svxCap .svxEye { margin-bottom: 18px; }
.svx .svxCap__title { margin: 0; color: var(--svx-ink); font: 500 clamp(34px, 3.6vw, 56px)/1.08 "Geologica", sans-serif; letter-spacing: -.03em; }
.svx .svxTabs { list-style: none; margin: 36px 0 0; padding: 0; max-width: 520px; }
.svx .advTab { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto 0fr; column-gap: 12px; padding: 22px 0; cursor: pointer; outline: none; transition: grid-template-rows .6s cubic-bezier(.65, 0, .35, 1); }
.svx .advTab::before, .svx .advTab::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.svx .advTab::before { background: var(--svx-line); }
.svx .advTab::after { height: 2px; top: -.5px; background: #4a3dcc; transform: scaleX(var(--t, 0)); transform-origin: left; opacity: 0; transition: opacity .3s; }
.svx .advTab.is-on::after { opacity: 1; }
.svx .advTab:last-child { border-bottom: 1px solid var(--svx-line); }
.svx .advTab__no { grid-row: 1; font: 500 12px/1.9 "JetBrains Mono", ui-monospace, monospace; color: #9aa0ae; transition: color .4s; }
.svx .advTab__title { grid-row: 1; font: 600 18px/1.35 "Geologica", sans-serif !important; letter-spacing: -.015em; color: #9aa0ae !important; transition: color .4s; background: none !important; border: 0 !important; padding: 0 !important; }
.svx .advTab__desc { grid-column: 2; grid-row: 2; overflow: hidden; min-height: 0; margin: 0 !important; padding: 0 !important; background: none !important; width: auto !important;
  font: 400 15px/1.6 Inter, sans-serif !important; color: var(--svx-grey) !important; opacity: 0; transform: translateY(-4px); transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.svx .advTab.is-on { grid-template-rows: auto 1fr; }
.svx .advTab.is-on .advTab__no { color: #4a3dcc; }
.svx .advTab.is-on .advTab__title, .svx .advTab:hover .advTab__title { color: var(--svx-ink) !important; }
.svx .advTab.is-on .advTab__desc { opacity: 1; transform: none; padding-top: 10px !important; transition-delay: .12s; }
.svx .advTab:focus-visible { box-shadow: 0 0 0 2px #29ccb2; border-radius: 4px; }
.svx .svxCap__fig { position: relative; margin: 0; padding: 48px clamp(16px, 3vw, 48px); }
.svx .svxCap__art { max-width: 560px; margin: 0 auto; }

/* ---------------- tablet / mobile ---------------- */
@media (max-width: 900px) {
  .svx .finHero__inner { grid-template-columns: 1fr !important; }
  .svx .finHero__col { padding: 48px 20px 48px; }
  .svx .finHero__art { min-height: 400px; overflow: hidden; }
  .svx .counter--fin .stats { grid-template-columns: 1fr 1fr; }
  .svx .counter--fin .stats__item:nth-child(3) { border-left: 0; }
  .svx .counter--fin .stats__item:nth-child(n + 3) { border-top: 1px solid var(--svx-line); }
  .svx .finWhy__head { grid-template-columns: 1fr; padding: 80px 20px 40px; }
  .svx .finWhy__grid { grid-template-columns: 1fr !important; }
  .svx .finWhy__card + .finWhy__card { border-left: 0 !important; border-top: 1px solid var(--svx-line) !important; }
  .svx .finWhy__cardText { padding: 24px 20px 36px; }
  .svx .finSol__title, .svx .finOut__head { padding: 80px 20px 40px; }
  .svx .finSol__grid, .svx .finOut__grid { grid-template-columns: 1fr !important; }
  .svx .finSolCard, .svx .finOutCard { border-left: 0 !important; min-height: 0; padding: 28px 20px 32px !important; }
  .svx .finSolCard + .finSolCard, .svx .finOut__grid > .finOutCard + .finOutCard, .svx .finOut__grid > .finOut__photo + .finOutCard { border-top: 1px solid var(--svx-line) !important; }
  .svx .svxCap { grid-template-columns: 1fr; min-height: 0; }
  .svx .svxCap__l { padding: 80px 20px 24px; }
  .svx .svxCap__fig { padding: 40px 20px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .svx .svxE2e .pulse, .svx .svxE2e .ring, .svx .svxArch .gd, .svx .svxArch .arm, .svx .svxOps .run { animation: none !important; }
  .svx [data-svx-rv] { opacity: 1; transform: none; }
}
/* fixes: the hero row fills the whole space under the nav; the cloned quote drops the old white card */
.svx .finHero__inner { align-content: stretch !important; }
.svx .finHero__title .svxG { white-space: nowrap; }
.svx .advTab__title::after, .svx .advTab__title::before { content: none !important; display: none !important; }
.svx .advTab__title { border-bottom: 0 !important; box-shadow: none !important; white-space: normal !important; flex: none !important; }

/* contrast: Capabilities is the one night section on the page (the rest stays light) */
.svx .svxCap { background: #0e1020; }
.svx .svxCap::before { border-color: rgba(255, 255, 255, .08); }
.svx .svxCap::after { background: rgba(255, 255, 255, .08); }
.svx .svxCap .svxEye { color: #9aa0ae !important; }
.svx .svxCap .svxEye::before { background: #29ccb2; }
.svx .svxCap__title { color: #fff; }
.svx .svxCap__title .svxG { background-image: linear-gradient(90deg, #fff 0 50%, rgba(255, 255, 255, .42) 50% 100%); }
.svx .svxCap .advTab::before { background: rgba(255, 255, 255, .12); }
.svx .svxCap .advTab:last-child { border-bottom-color: rgba(255, 255, 255, .12); }
.svx .svxCap .advTab::after { background: #29ccb2; }
.svx .svxCap .advTab__no { color: rgba(255, 255, 255, .35); }
.svx .svxCap .advTab__title { color: rgba(255, 255, 255, .5) !important; }
.svx .svxCap .advTab.is-on .advTab__no { color: #29ccb2; }
.svx .svxCap .advTab.is-on .advTab__title, .svx .svxCap .advTab:hover .advTab__title { color: #fff !important; }
.svx .svxCap .advTab__desc { color: rgba(255, 255, 255, .62) !important; }
.svx .svxCap [data-svx-fig] { --fig-line: rgba(255, 255, 255, .32); --fig-key: rgba(255, 255, 255, .85); --fig-bg: #0e1020; --fig-soft: #1d1f3a; --fig-accent: #4a3dcc; }
.svx .finWhy__title { max-width: 11.5em !important; }   /* "We speak the / language of finance" */
@media (max-width: 900px) {
  .svx .finHero__title { font-size: clamp(36px, 10vw, 44px) !important; }
  .svx .finHero__title .svxG { white-space: normal; }
}

/* capabilities v2: two equal halves with a centre line; the list runs edge to edge (lines from the frame to the centre);
   one screen tall and fixed, so opening a point never moves the section */
.svx .svxCap { grid-template-columns: 1fr 1fr !important; align-items: stretch !important; height: 100vh; min-height: 680px; max-height: 1000px; }
.svx .svxCap__l { padding: 0 !important; display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(72px, 11vh, 128px) !important; }
.svx .svxCap__head { padding: 0 32px 0 24px; }
.svx .svxTabs { list-style: none; margin: 40px 0 0; padding: 0; max-width: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.svx .svxTab { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 0fr; column-gap: 8px; padding: 22px 32px 22px 24px; cursor: pointer; outline: none; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: grid-template-rows .6s cubic-bezier(.65, 0, .35, 1), background-color .4s; }
.svx .svxTab__no { grid-row: 1; font: 500 12px/1.9 "JetBrains Mono", ui-monospace, monospace; color: rgba(255, 255, 255, .35); transition: color .4s; }
.svx .svxTab__title { grid-row: 1; font: 600 18px/1.35 "Geologica", sans-serif !important; letter-spacing: -.015em; color: rgba(255, 255, 255, .5) !important; background: none !important; border: 0 !important; padding: 0 !important; transition: color .4s; }
.svx .svxTab__title::before, .svx .svxTab__title::after { content: none !important; display: none !important; }
.svx .svxTab__desc { grid-column: 2; grid-row: 2; overflow: hidden; min-height: 0; margin: 0 !important; padding: 0 !important; background: none !important; width: auto !important; max-width: 52ch;
  font: 400 15px/1.6 Inter, sans-serif !important; color: rgba(255, 255, 255, .62) !important; opacity: 0; transform: translateY(-4px); transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.svx .svxTab.is-on { grid-template-rows: auto 1fr; background: rgba(255, 255, 255, .025); }
.svx .svxTab.is-on .svxTab__no { color: #29ccb2; }
.svx .svxTab.is-on .svxTab__title, .svx .svxTab:hover .svxTab__title { color: #fff !important; }
.svx .svxTab.is-on .svxTab__desc { opacity: 1; transform: none; padding-top: 10px !important; transition-delay: .12s; }
.svx .svxTab__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #29ccb2; transform: scaleX(var(--t, 0)); transform-origin: left; opacity: 0; }
.svx .svxTab.is-on .svxTab__bar { opacity: 1; }
.svx .svxTab:focus-visible { box-shadow: inset 0 0 0 2px #29ccb2; }
.svx .svxCap__fig { padding: 0 !important; border-left: 1px solid rgba(255, 255, 255, .1); position: relative; }
.svx .svxRib { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .svx .svxCap { grid-template-columns: 1fr !important; height: auto; min-height: 0; max-height: none; }
  .svx .svxCap__l { padding-top: 80px !important; }
  .svx .svxCap__head { padding: 0 20px; }
  .svx .svxTab { padding: 20px 20px; }
  .svx .svxCap__fig { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); height: 480px; }
}

/* why · architecture drawing: on hover the petal is drawn whole and the drafting aids clear away (nothing left half-done) */
.svx .svxArch .built { stroke-linecap: round; stroke-dasharray: 1.02 1; }
.svx .svxArch .plan, .svx .svxArch .arm, .svx .svxArch .pin, .svx .svxArch .dim, .svx .svxArch .guides { transition: opacity .5s ease; }
.svx .finWhy__card:hover .svxArch .plan, .svx .finWhy__card:hover .svxArch .arm, .svx .finWhy__card:hover .svxArch .pin { opacity: 0; }
.svx .finWhy__card:hover .svxArch .guides, .svx .finWhy__card:hover .svxArch .dim { opacity: .25; }

/* ---- why drawings for Insurance, Healthcare, Retail & Commerce and Enterprise (same language as Financial Services) ---- */
.svx .svxW .tr { fill: none; stroke: #d5d7df; stroke-width: 1; stroke-dasharray: 2 5; }
.svx .svxW .ln, .svx .svxW .lk { fill: none; stroke: #11131f; stroke-opacity: .4; stroke-width: 1.2; stroke-linecap: round; transition: stroke .4s, stroke-opacity .4s; }
.svx .svxW .lk { stroke-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.svx .svxW .lk.on { stroke-opacity: .45; stroke-dasharray: none; stroke-dashoffset: 0; }
.svx .svxW .ring { fill: none; stroke: #c9cbd4; stroke-width: 1; stroke-dasharray: 2 6; transform-box: fill-box; transform-origin: center; animation: svxSpin 26s linear infinite; }
.svx .svxW .disc { fill: #fff; stroke: #11131f; stroke-opacity: .55; stroke-width: 1.2; transition: stroke .4s, stroke-opacity .4s, fill .4s; transition-delay: calc(var(--i, 0) * .12s); }
.svx .svxW .ic { color: #11131f; opacity: .78; transition: color .4s; transition-delay: calc(var(--i, 0) * .12s); }
.svx .svxW .nd.hub .disc { fill: #f4f2ff; stroke: #4a3dcc; stroke-opacity: .8; }
.svx .svxW .nd.hub .ic { color: #4a3dcc; opacity: 1; }
.svx .svxW .lb { fill: #7a7f8f; font: 700 9.5px/1 "Geologica", sans-serif; letter-spacing: .14em; }
.svx .svxW .lb.inv { fill: #fff; }
.svx .svxW .pl { fill: #29ccb2; offset-rotate: 0deg; filter: drop-shadow(0 0 5px rgba(41, 204, 178, .9)); animation: svxAlong 3s cubic-bezier(.45, 0, .55, 1) infinite both; }
@keyframes svxAlong { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.svx .svxW .spine { fill: none; stroke: #11131f; stroke-opacity: .55; stroke-width: 1.6; stroke-linecap: round; }
.svx .svxW .sys { fill: #fff; stroke: #11131f; stroke-opacity: .5; stroke-width: 1.1; transition: stroke .4s, fill .4s; transition-delay: calc(var(--i, 0) * .1s); }
.svx .svxW .base { fill: #f4f2ff; stroke: #4a3dcc; stroke-opacity: .6; stroke-width: 1.2; }
.svx .svxW .chip { fill: #fff; stroke: #11131f; stroke-opacity: .5; stroke-width: 1.1; }
.svx .svxW .chip.neo, .svx .svxW .neo { fill: #4a3dcc; stroke: #4a3dcc; }
/* insurance */
.svx .svx-insHub .lk { animation: svxLk 5.6s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes svxLk { 0%, 8% { stroke-dashoffset: 1; stroke-opacity: .5; } 30%, 80% { stroke-dashoffset: 0; stroke-opacity: .5; } 100% { stroke-dashoffset: 0; stroke-opacity: 0; } }
.svx .svx-insMod .old { fill: #fff; stroke: #11131f; stroke-opacity: .45; stroke-width: 1.1; }
.svx .svx-insMod .old.gone { stroke-dasharray: 4 4; animation: svxOut 6s ease-in-out infinite; }
.svx .svx-insMod .ext { fill: none; stroke: #4a3dcc; stroke-width: 1.3; stroke-dasharray: 4 4; transform-box: fill-box; transform-origin: 50% 100%; animation: svxGrow 6s ease-in-out infinite; }
.svx .svx-insMod .neo { opacity: 0; animation: svxIn 6s ease-in-out infinite; }
@keyframes svxGrow { 0%, 10% { transform: scaleY(0); opacity: 0; } 30%, 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes svxOut { 0%, 50% { opacity: 1; } 65%, 92% { opacity: .15; } 100% { opacity: 1; } }
@keyframes svxIn { 0%, 52% { opacity: 0; } 66%, 90% { opacity: .9; } 100% { opacity: 0; } }
.svx .svx-insMod .disc.sm { fill: #fff; stroke: #4a3dcc; stroke-width: 1.3; }
.svx .svx-insStack .bar { fill: #fff; stroke: #11131f; stroke-opacity: .4; stroke-width: 1.1; animation: svxBar 5s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes svxBar { 0%, 100% { stroke: #11131f; stroke-opacity: .4; fill: #fff; } 18%, 30% { stroke: #4a3dcc; stroke-opacity: 1; fill: #f4f2ff; } }
.svx .svx-insStack .sweep { animation: svxSweepX 5s cubic-bezier(.45, 0, .55, 1) infinite; }
.svx .svx-insStack .sweep path { stroke: #29ccb2; stroke-width: 1; stroke-dasharray: 3 3; }
.svx .svx-insStack .sweep circle { fill: #29ccb2; }
@keyframes svxSweepX { 0% { transform: translateX(60px); } 50% { transform: translateX(340px); } 100% { transform: translateX(60px); } }
/* healthcare */
.svx .svx-hcBus .lk { stroke-opacity: .45; animation: svxDrawLoop 5s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes svxDrawLoop { 0%, 6% { stroke-dashoffset: 1; } 30%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.svx .svx-hcSecure .layer { fill: none; stroke: #b9bcc7; stroke-width: 1; stroke-dasharray: 3 5; animation: svxMarch 4s linear infinite, svxLayer 3.6s ease-in-out infinite; animation-delay: 0s, calc(var(--i) * .45s + .3s); }
@keyframes svxLayer { 0%, 100% { stroke: #b9bcc7; } 12%, 22% { stroke: #29ccb2; } }
.svx .svx-hcSecure .rec { fill: #fff; stroke: #11131f; stroke-opacity: .55; stroke-width: 1.2; }
@keyframes svxAlongStop { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 60%, 88% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.svx .svx-hcRings .orb { fill: none; stroke: #d5d7df; stroke-width: 1; }
.svx .svx-hcRings .orb.dash { stroke-dasharray: 2 5; }
.svx .svx-hcRings .spin { transform-box: view-box; transform-origin: 200px 130px; animation: svxSpin 12s linear infinite; }
.svx .svx-hcRings .ob { fill: #29ccb2; }
/* retail */
.svx .svx-rtOmni .lk { stroke-opacity: .45; animation: svxDrawLoop 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
.svx .svx-rtPay .swapA { animation: svxSwapA 6s ease-in-out infinite; }
.svx .svx-rtPay .swapB { opacity: 0; animation: svxSwapB 6s ease-in-out infinite; }
@keyframes svxSwapA { 0%, 40% { opacity: 1; transform: translateY(0); } 50%, 90% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes svxSwapB { 0%, 45% { opacity: 0; transform: translateY(-14px); } 55%, 88% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(-14px); } }
.svx .svx-rtScale .axis { fill: none; stroke: #c9cbd4; stroke-width: 1; }
.svx .svx-rtScale .capb { fill: #f4f2ff; stroke: #4a3dcc; stroke-opacity: .35; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: svxCap 5s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); }
@keyframes svxCap { 0%, 100% { transform: scaleY(.35); } 45%, 70% { transform: scaleY(1); } }
.svx .svx-rtScale .dem { stroke-opacity: .7; stroke-width: 1.6; }
.svx .svx-rtScale .peakl { stroke: #29ccb2; stroke-width: 1; stroke-dasharray: 2 3; }
/* enterprise */
.svx .svx-enTree .br { fill: none; stroke: #11131f; stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: svxDrawLoop 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.svx .svx-enTree .br.no { stroke-opacity: .25; }
.svx .svx-enTree .blk { fill: #fff; stroke: #11131f; stroke-opacity: .5; stroke-width: 1.1; }
.svx .svx-enTree .blk.key { fill: #4a3dcc; stroke: #4a3dcc; stroke-opacity: 1; }
.svx .svx-enTree .blk.no { stroke-dasharray: 3 3; stroke-opacity: .35; }
.svx .svx-enTree .jn { fill: #11131f; opacity: .6; }
.svx .svx-enRoute .mess { fill: none; stroke: #11131f; stroke-opacity: .28; stroke-width: 1; animation: svxMess 7s ease-in-out infinite; }
.svx .svx-enRoute .tidy { opacity: 0; animation: svxTidy 7s ease-in-out infinite; }
@keyframes svxMess { 0%, 35% { opacity: 1; } 48%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes svxTidy { 0%, 40% { opacity: 0; } 52%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } }
.svx .svx-enLife .arc { fill: none; stroke: #d5d7df; stroke-width: 1.4; }
.svx .svx-enLife .spin { transform-box: view-box; transform-origin: 200px 130px; animation: svxSpin 10s linear infinite; }
.svx .svx-enLife .prog { fill: none; stroke: #29ccb2; stroke-width: 2; stroke-linecap: round; }
/* hover: the drawing commits to purple, like the Financial Services cells */
.svx .finWhy__card:hover .svxW .disc { stroke: #4a3dcc; stroke-opacity: 1; fill: #f4f2ff; }
.svx .finWhy__card:hover .svxW .ic { color: #4a3dcc; }
.svx .finWhy__card:hover .svxW .ln, .svx .finWhy__card:hover .svxW .lk.on, .svx .finWhy__card:hover .svxW .spine, .svx .finWhy__card:hover .svxW .br:not(.no) { stroke: #4a3dcc; stroke-opacity: .9; }
.svx .finWhy__card:hover .svxW .sys, .svx .finWhy__card:hover .svxW .chip:not(.neo), .svx .finWhy__card:hover .svx-hcSecure .rec { stroke: #4a3dcc; stroke-opacity: .9; }
@media (prefers-reduced-motion: reduce) { .svx .svxW * { animation: none !important; } .svx .svxW .lk { stroke-dashoffset: 0; stroke-opacity: .45; } .svx .svxW .pl { display: none; } }

/* ---- why drawings, round 2 ---- */
.svx .svxW .old { fill: #fff; stroke: #11131f; stroke-opacity: .5; stroke-width: 1.1; }
.svx .svxW .rec, .svx .svxW .dev, .svx .svxW .row { fill: #fff; stroke: #11131f; stroke-opacity: .5; stroke-width: 1.2; }
.svx .svxW .scr { fill: #fafafc; stroke: #11131f; stroke-opacity: .2; stroke-width: 1; }
.svx .svxW .sock, .svx .svxW .port { fill: #fff; stroke: #4a3dcc; stroke-width: 1.1; }
.svx .svxW .dim { fill: none; stroke: #9a9eab; stroke-width: 1; }
.svx .svxW .crop { fill: none; stroke: #11131f; stroke-opacity: .45; stroke-width: 1.2; }
.svx .svxW .mask { fill: #11131f; opacity: .82; }
.svx .svxW .nd.seal .disc { fill: #f4f2ff; stroke: #4a3dcc; stroke-opacity: .9; }
.svx .svxW .nd.seal .ic { color: #4a3dcc; opacity: 1; }
/* insurance · decision */
.svx .svx-insMod .dia { fill: #fff; stroke: #11131f; stroke-opacity: .55; stroke-width: 1.2; }
.svx .svx-insMod .diaG { fill: none; stroke: #b9bcc7; stroke-width: 1; stroke-dasharray: 3 5; animation: svxMarch 4s linear infinite; }
.svx .svx-insMod .opt { fill: #fff; stroke: #11131f; stroke-opacity: .45; stroke-width: 1.1; animation: svxOpt 7.2s ease-in-out infinite; animation-delay: calc(var(--i) * 2.4s); }
.svx .svx-insMod .opt-l { fill: none; stroke: #4a3dcc; stroke-width: 1.4; opacity: 0; animation: svxOptL 7.2s ease-in-out infinite; animation-delay: calc(var(--i) * 2.4s); }
.svx .svx-insMod .pl.one { animation: svxOne 7.2s cubic-bezier(.45, 0, .55, 1) infinite both; }
@keyframes svxOpt { 0%, 22%, 40%, 100% { stroke: #11131f; stroke-opacity: .45; fill: #fff; } 26%, 36% { stroke: #4a3dcc; stroke-opacity: 1; fill: #f4f2ff; } }
@keyframes svxOptL { 0%, 4%, 40%, 100% { opacity: 0; } 14%, 34% { opacity: .9; } }
@keyframes svxOne { 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 25% { offset-distance: 100%; opacity: 1; } 30%, 100% { offset-distance: 100%; opacity: 0; } }
/* healthcare · record fills from the five systems */
.svx .svx-hcBus .fillln { fill: none; stroke: #11131f; stroke-opacity: .45; stroke-width: 1.2; stroke-linecap: round; animation: svxFillLn 4.4s ease-in-out infinite; animation-delay: calc(var(--i) * .5s + .6s); }
@keyframes svxFillLn { 0%, 5% { opacity: .08; } 20%, 85% { opacity: 1; } 100% { opacity: .08; } }
/* healthcare · masked record, scan line */
.svx .svx-hcSecure .scanY { animation: svxScanY 4s cubic-bezier(.45, 0, .55, 1) infinite; }
.svx .svx-hcSecure .scanY path { stroke: #29ccb2; stroke-width: 1.2; stroke-dasharray: 4 3; }
@keyframes svxScanY { 0%, 100% { transform: translateY(48px); } 50% { transform: translateY(212px); } }
/* healthcare · patient app with the three services */
.svx .svx-hcRings .apt { fill: #fff; stroke: #11131f; stroke-opacity: .45; stroke-width: 1.1; }
.svx .svx-hcRings .apt.on { fill: #4a3dcc; stroke: #4a3dcc; stroke-opacity: 1; }
.svx .svx-hcRings .tick { fill: none; stroke: #29ccb2; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: svxTick 4s ease-in-out infinite; animation-delay: calc(var(--i) * .9s + 1.6s); }
@keyframes svxTick { 0%, 4% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* retail · payment chips sit higher now */
.svx .svx-rtPay .swapA, .svx .svx-rtPay .swapB { transform-box: view-box; }
/* enterprise · ports light in turn along the spine */
.svx .svx-enRoute .port { animation: svxPort 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes svxPort { 0%, 100% { fill: #fff; } 15%, 30% { fill: #29ccb2; stroke: #29ccb2; } }
.svx .finWhy__card:hover .svxW .rec, .svx .finWhy__card:hover .svxW .dev, .svx .finWhy__card:hover .svxW .row, .svx .finWhy__card:hover .svxW .old, .svx .finWhy__card:hover .svx-insMod .dia { stroke: #4a3dcc; stroke-opacity: .9; }

/* ---- capabilities drawing (assets/revamp/serve-caps.js): twelve blocks re-arranging per capability ---- */
.svx .svxCap__fig:has(.svxBlk) { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.svx .svxBlk { display: block; width: 100%; max-width: 640px; height: auto; max-height: 78vh; margin: 0 auto; overflow: visible; }
/* a solid massing model: lit tops, two shaded walls, floor lines as windows */
.svx .svxBlk .p { stroke: rgba(255, 255, 255, .28); stroke-width: .9; stroke-linejoin: round; transition: fill .45s ease, stroke .45s ease; }
.svx .svxBlk .blk .p.ft { fill: #34386a; }
.svx .svxBlk .blk .p.fz { fill: #232649; }
.svx .svxBlk .blk .p.fx { fill: #181a35; }
.svx .svxBlk .blk.is-soft .p.ft { fill: #444a85; }
.svx .svxBlk .win { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; transition: stroke .35s; }
.svx .svxBlk .blk.is-hot .win { stroke: rgba(41, 204, 178, .9); }
.svx .svxBlk .blk.is-acc .win { stroke: rgba(255, 255, 255, .28); }
.svx .svxBlk .blk.is-acc .p.ft { fill: #4a3dcc; stroke: #4a3dcc; }
.svx .svxBlk .blk.is-acc .p.fz { fill: #3b31a6; stroke: #3b31a6; }
.svx .svxBlk .blk.is-acc .p.fx { fill: #2d2580; stroke: #2d2580; }
.svx .svxBlk .blk.is-ghost .p { fill: none; stroke: rgba(255, 255, 255, .35); stroke-dasharray: 4 4; }
.svx .svxBlk .blk.is-off { opacity: 0; }
.svx .svxBlk .blk.is-hot .p.ft { fill: #3f4a86; stroke: rgba(41, 204, 178, .8); }
.svx .svxBlk .blk.is-acc.is-hot .p.ft { fill: #5b4fe0; }
.svx .svxBlk .fx { opacity: 0; transition: opacity .5s ease; }
.svx .svxBlk .fx.on { opacity: 1; }
.svx .svxBlk .fl { fill: none; stroke: rgba(41, 204, 178, .5); stroke-width: 1; stroke-dasharray: 3 5; }
.svx .svxBlk .dt { fill: #29ccb2; filter: drop-shadow(0 0 4px rgba(41, 204, 178, .9)); }
.svx .svxBlk .seal { fill: none; stroke: #4a3dcc; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: svxSeal 1.4s cubic-bezier(.65, 0, .35, 1) .5s forwards; filter: drop-shadow(0 0 6px rgba(74, 61, 204, .8)); }
@keyframes svxSeal { to { stroke-dashoffset: 0; } }

/* ---- capabilities drawings in each industry's own language (assets/revamp/serve-caps-art.js) ---- */
.svx .svxCap__fig:has(.svxArt) { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.svx .svxArt { display: block; width: 100%; max-width: 560px; height: auto; aspect-ratio: 1; max-height: 78vh; margin: 0 auto; overflow: visible; }
.svx .svxArt .fx { opacity: 0; transition: opacity .5s ease; }
.svx .svxArt .fx.on { opacity: 1; }
.svx .svxArt .trk { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 5; }
.svx .svxArt .dt { fill: #29ccb2; filter: drop-shadow(0 0 4px rgba(41, 204, 178, .9)); }
/* insurance sheets */
.svx .svxSheets .pg { fill: #1a1c36; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; stroke-linejoin: round; transition: fill .4s, stroke .4s; }
.svx .svxSheets .fd { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; stroke-linejoin: round; }
.svx .svxSheets .tx { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.4; stroke-linecap: round; }
.svx .svxSheets .sh.is-acc .pg { fill: #4a3dcc; stroke: #4a3dcc; }
.svx .svxSheets .sh.is-acc .tx { stroke: rgba(255, 255, 255, .7); }
.svx .svxSheets .sh.is-hot .pg { stroke: #29ccb2; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.svx .svxSheets .arr { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; stroke-linecap: round; }
.svx .svxSheets .tick { fill: none; stroke: #29ccb2; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.svx .svxSheets .gate { fill: rgba(74, 61, 204, .25); stroke: #4a3dcc; stroke-width: 1.4; }
.svx .svxSheets .frame { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; stroke-dasharray: 5 5; }
/* healthcare trace */
.svx .svxTrace .ln { fill: none; stroke: #e9fbf7; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.svx .svxTrace .gl { fill: none; stroke: rgba(41, 204, 178, .35); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; filter: blur(3px); }
.svx .svxTrace .hd { fill: #29ccb2; filter: drop-shadow(0 0 6px rgba(41, 204, 178, 1)); }
/* retail tokens */
.svx .svxTok .tk { fill: #1a1c36; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
.svx .svxTok .tk.is-acc { fill: #4a3dcc; stroke: #4a3dcc; }
.svx .svxTok .halo { fill: none; stroke: #29ccb2; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0; transition: opacity .25s; animation: svxMarch 4s linear infinite; }
.svx .svxTok .halo.on { opacity: 1; }