/* ===== INNER PAGES (extends style.css) ===== */
@keyframes gridDrift90 { to { background-position: 90px 90px } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes plGlow { 0%, 12%, 100% { r: 9; fill: #1a1450 } 5% { r: 13; fill: #a9a6f5 } }
@keyframes dashMove { to { stroke-dashoffset: -28 } }
@keyframes corePulse { 0% { transform: scale(.7); opacity: .6 } 100% { transform: scale(2.1); opacity: 0 } }

.ihero { position: relative; overflow: hidden; margin-top: -108px; padding: calc(108px + 3.4rem) 0 5rem; border-radius: 0 0 40px 40px }
.ihero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--gl) 1px, transparent 1px), linear-gradient(90deg, var(--gl) 1px, transparent 1px); background-size: 90px 90px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); animation: gridDrift90 34s linear infinite }
.ihero.light { --gl: rgba(37, 39, 201, .08); background: linear-gradient(180deg, #e5e7ff 0%, #f1f2fc 65%, var(--page) 100%) }
.ihero.dark { --gl: rgba(255, 255, 255, .07); background: linear-gradient(135deg, #140e37 0%, #3c2896 58%, #7a44dc 100%); color: #fff }
.ihero .orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none }
.ihero .o1 { width: 420px; height: 420px; left: -60px; top: 120px; background: radial-gradient(circle, rgba(37, 39, 201, .28), transparent 70%); animation: orbA 16s ease-in-out infinite alternate }
.ihero .o2 { width: 380px; height: 380px; right: -40px; bottom: -40px; background: radial-gradient(circle, rgba(150, 120, 240, .35), transparent 70%); animation: orbB 19s ease-in-out infinite alternate }
.iwrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center }
.ihero h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.13; font-weight: 600; margin-bottom: 1.4rem }
.ihero.dark h1 { color: #fff }
.ihero .lead p { font-size: 1.05rem; line-height: 1.65; color: #3d3f4c; margin-bottom: 1rem }
.ihero.dark .lead p { color: #d6d2f6 }
.hv { animation: heroIn 1.1s var(--ease) .5s backwards }

/* hero visual: pipeline (dark) */
.hv-card { border-radius: 26px; padding: 1rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.hv svg { width: 100%; height: auto; display: block; overflow: visible }
.pl-path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-dasharray: 8 6; animation: dashMove 1.4s linear infinite }
.pl-node { fill: #1a1450; stroke: #a9a6f5; stroke-width: 2.5; animation: plGlow 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.28s) }
.pl-lbl { fill: #e9e6ff; font: 600 12.5px Manrope, sans-serif; text-anchor: middle }
.pl-token { fill: #fff; filter: drop-shadow(0 0 8px #a9a6f5) drop-shadow(0 0 16px #6f68f0) }

/* hero visual: orbit (light) */
.orbit { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin: 0 auto; --r: 190px }
.orbit .ring { position: absolute; inset: 7%; border: 1.5px dashed rgba(37, 39, 201, .3); border-radius: 50%; animation: spin 60s linear infinite }
.orbit .ring2 { position: absolute; inset: 26%; border: 1px solid rgba(37, 39, 201, .16); border-radius: 50% }
.orbit .core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; font: 700 .95rem/1.2 Manrope, sans-serif; background: radial-gradient(circle at 30% 25%, #6c66f0, #2527c9 70%); box-shadow: 0 20px 40px -12px rgba(37, 39, 201, .55) }
.orbit .core::before, .orbit .core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(37, 39, 201, .45); animation: corePulse 3.2s ease-out infinite }
.orbit .core::after { animation-delay: 1.6s }
.orbit .on { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(calc(var(--r) * var(--k, 1))) }
.orbit .cnt { position: absolute; animation: spin 60s linear infinite reverse }
.orbit .on span { position: absolute; display: block; white-space: nowrap; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); padding: .6rem 1.05rem; border-radius: 999px; background: #fff; border: 1px solid rgba(37, 39, 201, .25); color: var(--indigo); font: 600 .88rem Manrope, sans-serif; box-shadow: 0 14px 26px -14px rgba(37, 39, 201, .5) }

/* sections */
.isec { padding: 4.6rem 0 0 }
.ihead { max-width: 840px; margin-bottom: 2.2rem }
.ihead h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 400; line-height: 1.15 }
.ihead p { color: var(--grey); margin: 1rem 0 0; font-size: 1.05rem }
.frow { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.4rem; padding: 2.3rem 0; border-top: 1px solid var(--line) }
.frow::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--indigo), #8b8df0); transform: scaleX(0); transform-origin: left; opacity: 0 }
.frow.in::before { animation: stepSweep 1.5s var(--ease) both }
.frow .num { color: var(--indigo); font: 700 2.2rem Manrope, sans-serif }
.frow h3 { font-size: 1.5rem; margin: .5rem 0 .7rem; font-weight: 600 }
.frow.solo h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 400; margin-top: 0 }
.frow p { color: var(--grey); margin: 0 }
.flabel { font: 500 .72rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-bottom: .9rem }
.chips { display: flex; flex-wrap: wrap; gap: .6rem }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border: 1px solid var(--card-line); border-radius: 999px; background: var(--cbg); font-size: .9rem; opacity: 0; transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease) }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); opacity: .55 }
.in .chip { opacity: 1; animation: chipIn .7s var(--ease) backwards; animation-delay: calc(var(--i) * 45ms + .15s) }
.in .chip:hover { background: var(--accs); border-color: var(--acc); color: var(--acc); transform: translateY(-3px) }
@keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(.95) } }
.steps4.multi .step-col { padding-bottom: 1.8rem }
.steps4.multi .step-col:nth-child(4n+1) { border-left: none; padding-left: 0 }
.steps4.in .step-col:nth-child(5)::before { animation-delay: .6s }
.steps4.in .step-col:nth-child(6)::before { animation-delay: 1.1s }
.steps4.in .step-col:nth-child(7)::before { animation-delay: 1.6s }
.steps4.multi .step-col h5 { font-size: 1.45rem }
.steps4.multi .step-col p { font-size: 1rem }

.whygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1.2rem }
.whygrid .svc-card .n { color: var(--indigo); font: 700 .8rem 'IBM Plex Mono', monospace; letter-spacing: .12em; margin-bottom: .8rem }
.qband { margin-top: 5rem; padding: 4.6rem 0; text-align: center; position: relative; overflow: hidden; background: linear-gradient(120deg, #d7d8f8, #eef0fd 55%, #f8f8fc) }
.qband h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 400; margin-bottom: 1rem }
.qband p { max-width: 720px; margin: 0 auto; color: #3f4152; font-size: 1.1rem }

@media (max-width:991px) { .iwrap { grid-template-columns: 1fr } .frow { grid-template-columns: 1fr; gap: 1.4rem } .steps4.multi .step-col:nth-child(4n+1) { border-left: 1px solid #b6b7e9; padding-left: 1.4rem } .steps4.multi .step-col:nth-child(2n+1) { border-left: none; padding-left: 0 } }
@media (max-width:767px) { .steps4.multi .step-col { border-left: none !important; padding-left: 0 !important } .orbit { --r: 150px } .orbit .on span { font-size: .78rem; padding: .5rem .8rem } }
@media (min-width:992px) { .frow > div:first-child { position: sticky; top: 120px; align-self: start } }

/* ===== more hero variants ===== */
.ihero.navy { background: linear-gradient(135deg, #140e37 0%, #3c2896 58%, #7a44dc 100%) }
.ihero.plum { background: linear-gradient(200deg, #7a44dc 0%, #3c2896 45%, #140e37 100%) }
.ihero.night { background: linear-gradient(160deg, #140e37 0%, #2f2390 55%, #6a3fd6 100%) }
.ihero.void { background: radial-gradient(90% 80% at 50% 45%, #3c2896 0%, #1b1252 50%, #140e37 100%) }
.ihero.sky, .ihero.mint, .ihero.sand { --gl: rgba(37, 39, 201, .08); background: linear-gradient(180deg, #e5e7ff 0%, #f1f2fc 65%, var(--page) 100%) }
.ihero .hsub { font: 600 1.15rem Manrope, sans-serif; color: var(--indigo); margin-bottom: .8rem }
.hv-card.light { background: #fff; border: 1px solid rgba(37, 39, 201, .12); box-shadow: 0 30px 60px -30px rgba(37, 39, 201, .35); backdrop-filter: none }
.hv svg text { font-family: Manrope, sans-serif }
@keyframes fl { 50% { transform: translateY(-10px) } }
@keyframes tk { 0% { opacity: 0; transform: scale(.3) } 6%, 88% { opacity: 1; transform: none } 96%, 100% { opacity: 0 } }
@keyframes scan { from { top: 4% } to { top: 96% } }
@keyframes barUp { 0% { transform: scaleY(0) } 18%, 84% { transform: scaleY(1) } 100% { transform: scaleY(0) } }
@keyframes nn { 0%, 30%, 100% { r: 6; opacity: .6 } 12% { r: 9; opacity: 1 } }
@keyframes flow { 0% { transform: translate(0, 0); opacity: 0 } 10%, 88% { opacity: 1 } 100% { transform: translate(470px, var(--dy)); opacity: 0 } }
@keyframes sweep { to { transform: rotate(360deg) } }
@keyframes blip { 0%, 100% { transform: scale(.6); opacity: .25 } 50% { transform: scale(1.3); opacity: 1 } }
@keyframes ecg { to { stroke-dashoffset: -600 } }
@keyframes ripple { 0% { transform: scale(.25); opacity: .7 } 100% { transform: scale(1); opacity: 0 } }
@keyframes chainGlow { 0%, 12%, 100% { background: var(--cbg); color: var(--ink); border-color: var(--card-line); transform: none } 4% { background: var(--acc); color: #fff; border-color: var(--acc); transform: translateY(-4px) } }

/* checklist (compliance) */
.chk { position: relative; overflow: hidden; padding: 1.6rem 1.8rem }
.chk ul { list-style: none; margin: 0; padding: 0 }
.chk li { display: flex; align-items: center; gap: .9rem; padding: .78rem 0; border-bottom: 1px dashed rgba(37, 39, 201, .18); font: 600 .98rem Manrope, sans-serif; color: var(--ink) }
.chk li:last-child { border: 0 }
.chk li b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2527c9; color: #fff; font-size: .8rem; animation: tk 8s ease-in-out infinite; animation-delay: calc(var(--i) * .7s) }
.chk .scan { position: absolute; left: 0; right: 0; height: 60px; margin-top: -30px; background: linear-gradient(180deg, transparent, rgba(37, 39, 201, .16), transparent); border-bottom: 2px solid rgba(37, 39, 201, .55); animation: scan 5.6s linear infinite alternate; pointer-events: none }

/* integration hub */
.hub-lines line { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-dasharray: 5 5 }
.pk { fill: #fff; filter: drop-shadow(0 0 6px #b9b6f7) }
.hub-c { fill: #2527c9; stroke: #b9b6f7; stroke-width: 2 }
.hub-r { fill: none; stroke: #b9b6f7; animation: corePulse 3s ease-out infinite; transform-origin: 260px 200px }
.hub-t { fill: #fff; font-weight: 700; font-size: 11.5px; text-anchor: middle }
.hub-n { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .4) }
.hub-l { fill: #fff; font-weight: 600; font-size: 11.5px; text-anchor: middle }

/* chart (BI) */
.ax { stroke: rgba(30, 20, 80, .25); stroke-width: 2 }
.bar { fill: url(#bg); fill: #7a76ea; transform-box: fill-box; transform-origin: bottom; animation: barUp 6.5s var(--ease) infinite; animation-delay: calc(var(--i) * .12s) }
.bar:nth-child(odd) { fill: #2527c9 }
.trend { fill: none; stroke: #8248e1; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: ecg 0s; animation: trendDraw 6.5s ease-in-out infinite }
@keyframes trendDraw { 0%, 10% { stroke-dashoffset: 700 } 45%, 84% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -700 } }
.tdot { fill: #fff; stroke: #8248e1; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: blip 3s ease-in-out infinite; animation-delay: calc(var(--i) * .25s) }
.cl { fill: #4a4c60; font-weight: 700; font-size: 13px; text-anchor: middle }

/* neural network */
.nl { stroke: rgba(255, 255, 255, .17); stroke-width: 1 }
.nd { fill: #d9c4ff; animation: nn 3.4s ease-in-out infinite; animation-delay: calc(var(--l) * .5s + var(--i) * .08s) }
.sg { fill: #fff; filter: drop-shadow(0 0 6px #c9a8ff) }
.nt-l { fill: #e7dcff; font-weight: 600; font-size: 10.5px; text-anchor: middle }

/* devices (full stack) */
.dev { position: relative; height: 400px; max-width: 500px; margin: 0 auto }
.dv-browser { position: absolute; left: 0; top: 40px; width: 78%; padding: 14px 16px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(37, 39, 201, .14); box-shadow: 0 30px 60px -28px rgba(37, 39, 201, .5); animation: fl 6s ease-in-out infinite }
.dv-browser > i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d5d6f5; margin-right: 6px }
.dv-phone { position: absolute; right: 0; top: 150px; width: 34%; padding: 18px 14px; border-radius: 26px; background: #14103b; box-shadow: 0 34px 60px -24px rgba(20, 16, 70, .7); animation: fl 5s ease-in-out infinite reverse }
.sk { height: 12px; border-radius: 6px; margin-top: 12px; background: linear-gradient(90deg, #e6e7ff 25%, #f7f7ff 50%, #e6e7ff 75%); background-size: 200% 100%; animation: shimmerSk 2.4s linear infinite }
.dv-phone .sk { background: linear-gradient(90deg, #2c2670 25%, #4a43a8 50%, #2c2670 75%); background-size: 200% 100% }
@keyframes shimmerSk { to { background-position: -200% 0 } }
.sk.w60 { width: 60% } .sk.w90 { width: 90% } .sk.w70 { width: 70% }
.sk.box { height: 70px; border-radius: 12px; flex: 1 }
.dv-row { display: flex; gap: 10px; margin-top: 14px }
.dv-phone .sk.circle { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px }
.dev .tg { position: absolute; padding: .5rem .95rem; border-radius: 999px; background: var(--indigo); color: #fff; font: 600 .82rem Manrope, sans-serif; box-shadow: 0 12px 24px -10px rgba(37, 39, 201, .6); animation: fl 4.5s ease-in-out infinite }

/* funnel (agentic) */
.fn-shape { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .3) }
.fn-gate { stroke: rgba(255, 255, 255, .28); stroke-dasharray: 4 5 }
.fn-l { fill: #e9e6ff; font-weight: 600; font-size: 11.5px; text-anchor: middle }
.fn-p { fill: #c6b3ee; animation: flow 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * .38s) }
.fn-h { fill: #fff; filter: drop-shadow(0 0 8px #c6b3ee); animation: blip 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center }

/* radar (cygeniq) */
.radar { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 15.5%, rgba(160, 130, 255, .28) 15.5% 16%), radial-gradient(circle, rgba(120, 80, 255, .22), transparent 70%); border: 1px solid rgba(160, 130, 255, .45); box-shadow: 0 0 80px -10px rgba(120, 80, 255, .55) }
.radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(198, 179, 238, .55), rgba(198, 179, 238, 0) 28%, transparent); animation: sweep 5s linear infinite }
.radar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(160, 130, 255, .3); box-shadow: 0 0 0 0 transparent }
.radar .sh { position: absolute; left: 50%; top: 50%; width: 22%; margin: -11% 0 0 -11%; z-index: 2; filter: drop-shadow(0 0 16px rgba(198, 179, 238, .8)) }
.radar .bl { position: absolute; z-index: 3; display: flex; align-items: center; gap: .5rem; color: #fff; font: 600 .78rem Manrope, sans-serif; white-space: nowrap }
.radar .bl::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c6b3ee; box-shadow: 0 0 12px 3px rgba(198, 179, 238, .8); animation: blip 2.6s ease-in-out infinite; animation-delay: var(--d) }

/* heartbeat (veeva) */
.ecg { fill: none; stroke: #2527c9; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140 460; animation: ecg 3.4s linear infinite }
.ecg-bg { fill: none; stroke: rgba(37, 39, 201, .2); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round }
.hb-pill { fill: #e5e7ff; stroke: rgba(37, 39, 201, .35) }
.hb-t { fill: #2527c9; font-weight: 700; font-size: 12px; text-anchor: middle }
.hb-lock { animation: fl 4s ease-in-out infinite }

/* ripple (contact) */
.rp { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto }
.rp > i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 39, 201, .4); animation: ripple 5s ease-out infinite; animation-delay: calc(var(--i) * 1.25s) }
.rp .ct { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 1.05rem Manrope, sans-serif; background: radial-gradient(circle at 30% 25%, #6c66f0, #2527c9 70%); box-shadow: 0 20px 40px -12px rgba(37, 39, 201, .6) }
.rp .cp { position: absolute; padding: .6rem 1.05rem; border-radius: 999px; background: #fff; border: 1px solid rgba(37, 39, 201, .25); color: var(--indigo); font: 600 .85rem Manrope, sans-serif; box-shadow: 0 14px 26px -14px rgba(37, 39, 201, .5); animation: fl 5s ease-in-out infinite; white-space: nowrap }

/* chain + tiles + text + notes + contact */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem .2rem }
.chain .cn { padding: .85rem 1.25rem; border-radius: 14px; background: var(--cbg); border: 1px solid var(--card-line); font: 600 .98rem Manrope, sans-serif; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 90ms) }
.chain .ca { width: 34px; text-align: center; color: var(--indigo); font-size: 1.2rem; opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--i) * 90ms + 200ms) }
.chain.in .cn { opacity: 1; transform: none; animation: chainGlow calc(var(--n) * 1s) ease-in-out infinite; animation-delay: calc(var(--i) * 1s + 1.2s) }
.chain.in .ca { opacity: 1 }
.chain-out { margin-top: 1.4rem; color: var(--grey); font-size: 1.05rem }
.tiles .svc-card h3 { margin: 0; font-size: 1.15rem }
.frow-note { grid-column: 2; margin-top: 1.2rem; color: var(--ink); font-size: 1.02rem; padding-left: 1rem; border-left: 3px solid var(--indigo) }
.frow .sub { font: 600 1.05rem Manrope, sans-serif; color: var(--indigo); margin-bottom: .5rem }
.tsec p { max-width: 820px; color: var(--grey); font-size: 1.1rem; margin-bottom: 1rem }
.qband .qs { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1.4rem auto 0; max-width: 900px }
.qband .qs span { padding: .7rem 1.2rem; border-radius: 999px; background: #fff; border: 1px solid rgba(37, 39, 201, .2); font: 600 .95rem Manrope, sans-serif }
.cinfo { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 2rem 0 0 }
.cinfo div { min-width: 220px; padding: 1rem 1.4rem; border-radius: 16px; background: #fff; border: 1px solid rgba(37, 39, 201, .18); text-align: left; box-shadow: 0 16px 30px -18px rgba(37, 39, 201, .4) }
.cinfo b { display: block; font: 500 .7rem 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-bottom: .3rem }
.cta-section .cta-close { margin-top: 1.6rem; font-weight: 600; color: var(--indigo) }
@media (max-width:991px) { .frow-note { grid-column: 1 } .dev { height: 360px } }
@media (max-width:767px) { .chain .ca { display: none } .radar .bl { font-size: .68rem } }

/* ===================== PER-PAGE THEMES ===================== */
:root { --cbg: #fff; --acc: #2527c9; --accs: rgba(37, 39, 201, .1) }
body.pg-sky, body.pg-navy, body.pg-sand, body.pg-code, body.pg-mint { --acc: #2527c9; --accs: rgba(37, 39, 201, .1) }
body.pg-dark, body.pg-plum, body.pg-night, body.pg-void { --ink: #f1efff; --grey: #c3bfee; --line: rgba(255, 255, 255, .12); --card-line: rgba(255, 255, 255, .16); --cbg: rgba(255, 255, 255, .06); --page: #140e37; --acc: #b9b6f7; --accs: rgba(185, 182, 247, .14) }
body[class*="pg-"] .svc-card { background: var(--cbg); border-color: var(--card-line) }
body[class*="pg-"] .svc-card::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--accs), transparent 60%) }
body[class*="pg-"] .whygrid .svc-card .n, body[class*="pg-"] .flabel { color: var(--acc) }
body.pg-dark .qband, body.pg-plum .qband, body.pg-night .qband, body.pg-void .qband { background: linear-gradient(120deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border-block: 1px solid var(--line) }
body.pg-dark .qband p, body.pg-plum .qband p, body.pg-night .qband p, body.pg-void .qband p, body[class*="pg-"] .qband p { color: var(--grey) }
body.pg-dark .qband .qs span, body.pg-plum .qband .qs span, body.pg-night .qband .qs span, body.pg-void .qband .qs span { background: var(--cbg); color: var(--ink); border-color: var(--card-line) }
body[class*="pg-"] .ihead h2, body[class*="pg-"] .frow h3, body[class*="pg-"] .qband h2 { color: var(--ink) }
body[class*="pg-"] .frow, body[class*="pg-"] .kpi-i, body[class*="pg-"] .mqi { border-color: var(--line) }

/* ===================== COMPONENTS ===================== */
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) } }
@keyframes fillBar { to { transform: scaleX(1) } }
@keyframes typeIn { to { width: 100% } }
@keyframes cvFill { to { transform: none } }
@keyframes cvTxt { to { color: #fff } }
@keyframes railMove { from { left: 4% } to { left: calc(96% - 14px) } }
@keyframes checkDraw { to { stroke-dashoffset: 0 } }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg }
@keyframes angSpin { to { --ang: 360deg } }
.grp-t h3, .acc-h .t { font: 600 1.45rem Manrope, sans-serif }
.grp-p { color: var(--grey); margin: .5rem 0 0 }

/* tabs */
.tabs { background: var(--cbg); border: 1px solid var(--card-line); border-radius: 26px; padding: 1rem; box-shadow: 0 30px 60px -40px var(--acc) }
.tab-nav { position: relative; display: flex; flex-wrap: wrap; gap: .3rem; padding: .4rem; background: var(--accs); border-radius: 18px }
.tab-nav button { position: relative; z-index: 1; border: 0; background: none; padding: .85rem 1.3rem; border-radius: 14px; font: 600 .98rem Manrope, sans-serif; color: var(--ink); cursor: pointer; transition: color .3s }
.tab-nav button.on { color: #fff }
.tab-ink { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 14px; background: var(--acc); box-shadow: 0 10px 22px -8px var(--acc); transition: transform .5s var(--ease), width .5s var(--ease) }
.tab-panel { display: none; padding: 2rem 1.4rem 1.2rem; grid-template-columns: .85fr 1.15fr; gap: 2rem }
.tab-panel.on { display: grid; animation: panelIn .6s var(--ease) }
.tab-panel p { color: var(--grey); margin: .6rem 0 0 }

/* accordion */
.acc-item { border-top: 1px solid var(--line) }
.acc-item:last-child { border-bottom: 1px solid var(--line) }
.acc-h { width: 100%; display: flex; align-items: center; gap: 1.4rem; padding: 1.5rem .2rem; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer }
.acc-h .num { font: 700 1rem 'IBM Plex Mono', monospace; color: var(--acc); min-width: 2.2rem }
.acc-h .t { flex: 1; transition: color .3s, transform .4s var(--ease) }
.acc-h:hover .t { color: var(--acc); transform: translateX(6px) }
.acc-h .pm { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--acc); transition: background .3s, transform .5s var(--ease) }
.acc-h .pm::before, .acc-h .pm::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15.5px; height: 2px; background: var(--acc); transition: transform .4s var(--ease), background .3s }
.acc-h .pm::after { transform: rotate(90deg) }
.acc-item.on .pm { background: var(--acc); transform: rotate(180deg) }
.acc-item.on .pm::before, .acc-item.on .pm::after { background: #fff }
.acc-item.on .pm::after { transform: rotate(0) }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease) }
.acc-item.on .acc-b { grid-template-rows: 1fr }
.acc-in { overflow: hidden; padding: 0 0 0 3.6rem }
.acc-item.on .acc-in { padding-bottom: 1.8rem }
.acc-in p { color: var(--grey); margin: 0 0 1rem; max-width: 720px }

/* bento */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem }
.bc { position: relative; overflow: hidden; grid-column: span 6; background: var(--cbg); border: 1px solid var(--card-line); border-radius: 24px; padding: 1.9rem; transition: transform .5s var(--ease), box-shadow .5s }
.bc:nth-child(4n+1), .bc:nth-child(4n+4) { grid-column: span 7 }
.bc:nth-child(4n+2), .bc:nth-child(4n+3) { grid-column: span 5 }
.bc::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--accs), transparent 70%); animation: fl 7s ease-in-out infinite }
.bc:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px var(--acc) }
.bc > * { position: relative }
.bc h3 { font: 600 1.4rem Manrope, sans-serif; margin-bottom: .6rem }
.bc p { color: var(--grey); margin: 0 0 1rem }
.bc .flabel { margin-top: 1rem }
.bc .chip { font-size: .82rem; padding: .45rem .8rem }

/* marquee rows */
.mqi { padding: 1.8rem 0; border-top: 1px solid var(--line) }
.mqi h3 { font: 600 1.5rem Manrope, sans-serif }
.mqi p { color: var(--grey); margin: .5rem 0 0; max-width: 760px }
.mq { overflow: hidden; margin-top: 1.3rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.mq-t { display: flex; width: max-content; animation: tick 38s linear infinite }
.mqi.rev .mq-t { animation-direction: reverse }
.mq:hover .mq-t { animation-play-state: paused }
.mq .chip { opacity: 1; animation: none; flex: none; margin-right: .7rem }

/* sticky stacking cards */
.sc { position: sticky; top: calc(120px + var(--i) * 26px); margin-bottom: 2.4rem; padding: 2.2rem 2.4rem; min-height: 250px; border-radius: 28px; background: var(--cbg); border: 1px solid var(--card-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -14px 40px -24px rgba(0, 0, 0, .5), 0 30px 60px -40px var(--acc); overflow: hidden }
body:not([class*="pg-dark"]):not(.pg-night):not(.pg-plum):not(.pg-void) .sc { background: #fff }
.sc .bn { position: absolute; right: 1.6rem; top: .4rem; font: 800 7rem Manrope, sans-serif; color: var(--accs); line-height: 1; pointer-events: none }
.sc h3 { font: 600 1.6rem Manrope, sans-serif; margin-bottom: .7rem; position: relative }
.sc p { color: var(--grey); max-width: 620px; position: relative }
.sc .chips { margin-top: 1.2rem; position: relative }

/* ledger (paper documents with ticking checks) */
.ledger { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem }
.doc { position: relative; background: var(--cbg); border: 1px solid var(--card-line); border-left: 6px solid var(--acc); border-radius: 6px 22px 22px 6px; padding: 1.8rem 1.8rem 1.5rem; box-shadow: 0 22px 40px -28px var(--acc); transition: transform .5s var(--ease) }
body.pg-sky .doc { background: #fff }
.doc:hover { transform: translateY(-5px) rotate(-.4deg) }
.doc::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 36px 36px 0; border-color: transparent var(--page) var(--accs) transparent; border-top-right-radius: 22px }
.doc:last-child:nth-child(odd) { grid-column: 1 / -1 }
.doc h3 { font: 600 1.4rem Manrope, sans-serif }
.doc p { color: var(--grey); margin: .5rem 0 0; font-size: .98rem }
.doc ul { list-style: none; padding: 0; margin: 1.1rem 0 0; columns: 2; column-gap: 1.6rem }
.doc li { display: flex; gap: .6rem; padding: .36rem 0; font-size: .92rem; break-inside: avoid }
.doc li svg { flex: none; width: 18px; height: 18px; margin-top: 2px }
.doc li path { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24 }
.in .doc li path { animation: checkDraw .6s ease forwards; animation-delay: calc(var(--i) * 70ms + .3s) }
.doc .note { margin-top: 1rem; padding-left: .9rem; border-left: 3px solid var(--acc); font-size: .95rem }

/* KPI tiles (dashboard) */
.kpi-i { padding: 2.2rem 0; border-top: 1px solid var(--line) }
.kpi-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.3rem }
.kpi-h h3 { font: 600 1.6rem Manrope, sans-serif }
.kpi-h p { color: var(--grey); margin: 0; max-width: 520px }
.kpi-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: .9rem }
.kt { position: relative; background: var(--cbg); border: 1px solid var(--card-line); border-top: 3px solid var(--acc); border-radius: 14px; padding: .95rem 1rem 1.1rem; opacity: 0; transition: transform .3s var(--ease), box-shadow .3s }
.kt:nth-child(3n+2) { border-top-color: #4a4ce0 } .kt:nth-child(3n) { border-top-color: #8b8df0 }
.in .kt { opacity: 1; animation: chipIn .7s var(--ease) backwards; animation-delay: calc(var(--i) * 55ms) }
.kt:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -20px var(--acc) }
.kt span { display: block; font: 600 .92rem Manrope, sans-serif; margin-bottom: .85rem }
.kt i { display: block; position: relative; height: 6px; border-radius: 3px; background: var(--accs); overflow: hidden }
.kt i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--acc), #8b8df0); transform: scaleX(0); transform-origin: left }
.in .kt i::after { animation: fillBar 1.5s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + .35s) }

/* terminal windows */
.termg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1.5rem }
.term { background: #140e37; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(10, 8, 40, .8); transition: transform .5s var(--ease) }
.term:hover { transform: translateY(-5px) }
.term-h { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; background: #1f1650 }
.term-h i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57 } .term-h i:nth-child(2) { background: #febc2e } .term-h i:nth-child(3) { background: #28c840 }
.term-h b { margin-left: .8rem; font: 500 .78rem 'IBM Plex Mono', monospace; color: #b5b1e8 }
.term-b { padding: 1.2rem 1.3rem 1.4rem; font: 500 .84rem/1.95 'IBM Plex Mono', monospace; color: #dcd9ff }
.term-b .c { color: #7f7bbd; margin-bottom: .3rem }
.tl { width: 0; overflow: hidden; white-space: nowrap }
.tl::before { content: "$ "; color: #b9b6f7 }
.in .tl { animation: typeIn .9s steps(28) forwards; animation-delay: calc(var(--i) * .22s + .3s) }
.term-b .tl:last-child::after { content: "▍"; color: #b9b6f7; animation: blip 1s steps(2) infinite }

/* hex product panels (glowing border) */
.hexp { position: relative; border-radius: 28px; padding: 2.3rem; margin-bottom: 1.6rem; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem }
.hexp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), rgba(160, 130, 255, .25) 0 60%, var(--acc) 82%, rgba(160, 130, 255, .25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: angSpin 7s linear infinite; pointer-events: none }
.hexp h3 { font: 600 1.7rem Manrope, sans-serif }
.hexp .sub { font: 600 1.02rem Manrope, sans-serif; color: var(--acc); margin: .5rem 0 .6rem }
.hexp p { color: var(--grey); margin: 0 0 .7rem }
.hxs { display: flex; flex-wrap: wrap; gap: .55rem }
.hx { padding: .8rem 1.55rem; clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%); background: linear-gradient(135deg, rgba(60, 40, 150, .9), rgba(130, 75, 225, .5)); font: 600 .8rem Manrope, sans-serif; color: #fff; opacity: 0 }
.in .hx { opacity: 1; animation: chipIn .7s var(--ease) backwards; animation-delay: calc(var(--i) * 50ms + .2s) }
.hexp .note { grid-column: 1 / -1; padding-left: .9rem; border-left: 3px solid var(--acc); color: var(--ink) }
.hexp .flabel { margin: 1rem 0 .6rem }

/* blueprint layers */
.layers { display: grid; gap: 1.5rem }
.slab { position: relative; display: grid; grid-template-columns: 240px 1fr; gap: 1.6rem; align-items: start; padding: 1.5rem 1.7rem; background-color: #fff; background-image: linear-gradient(rgba(37, 39, 201, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 39, 201, .07) 1px, transparent 1px); background-size: 22px 22px; border: 2px solid var(--acc); border-radius: 10px; opacity: 0; transform: translateX(-70px) }
.slab:nth-child(even) { transform: translateX(70px) }
.in .slab { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .14s) }
.slab:not(:last-child)::after { content: ""; position: absolute; left: 40px; top: 100%; width: 2px; height: 1.5rem; background: repeating-linear-gradient(var(--acc) 0 4px, transparent 4px 8px) }
.slab .lt { font: 700 .72rem 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--acc) }
.slab h3 { font: 600 1.3rem Manrope, sans-serif; margin: .3rem 0 .5rem }
.slab p { color: var(--grey); margin: 0; font-size: .95rem }
.slab .chip { border-radius: 4px; font: 500 .8rem 'IBM Plex Mono', monospace; border-color: var(--acc); background: #fff }
.slab .flabel { margin-bottom: .7rem }

/* step / chain / why variants */
.vt { position: relative; padding: 1rem 0 }
.vt::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(var(--acc), transparent); transform: scaleY(0); transform-origin: top; transition: transform 2.6s var(--ease) }
.vt.in::before { transform: scaleY(1) }
.vi { position: relative; width: 50%; padding: 0 3rem 2.6rem 0; text-align: right; opacity: 0; transform: translateX(-30px); transition: opacity .8s var(--ease), transform .9s var(--ease) }
.vi:nth-child(even) { margin-left: 50%; padding: 0 0 2.6rem 3rem; text-align: left; transform: translateX(30px) }
.vt.in .vi { opacity: 1; transform: none; transition-delay: calc(var(--i) * .3s + .3s) }
.vi::after { content: ""; position: absolute; right: -9px; top: .35rem; width: 18px; height: 18px; border-radius: 50%; background: var(--page); border: 3px solid var(--acc); box-shadow: 0 0 0 6px var(--accs) }
.vi:nth-child(even)::after { right: auto; left: -9px }
.vi .snum { font: 500 .78rem 'IBM Plex Mono', monospace; letter-spacing: .15em; color: var(--acc) }
.vi h5 { font: 400 1.5rem Inter, sans-serif; margin: .3rem 0 .4rem }
.vi p { color: var(--grey); margin: 0 }
.hs { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem 0 1.2rem; scrollbar-width: none; cursor: grab }
.hs::-webkit-scrollbar { display: none }
.hc { flex: 0 0 min(300px, 80%); scroll-snap-align: start; position: relative; overflow: hidden; background: var(--cbg); border: 1px solid var(--card-line); border-radius: 22px; padding: 1.7rem; min-height: 260px }
.hc .hn { font: 800 4.4rem/1 Manrope, sans-serif; color: var(--accs); position: absolute; right: 1rem; top: .6rem }
.hc h5 { font: 600 1.35rem Manrope, sans-serif; margin: 3rem 0 .6rem; position: relative }
.hc p { color: var(--grey); margin: 0; position: relative }
.hs-bar { height: 4px; border-radius: 2px; background: var(--accs); margin-top: .4rem }
.hs-bar i { display: block; height: 100%; width: 25%; border-radius: 2px; background: var(--acc); transform-origin: left }
.chev { display: grid; grid-template-columns: repeat(var(--n), 1fr) }
.chev .cv { position: relative; overflow: hidden; display: flex; align-items: center; height: 76px; padding: 0 1.6rem 0 2.3rem; background: var(--accs); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); font: 700 1.05rem Manrope, sans-serif }
.chev > div:first-child .cv { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); padding-left: 1.6rem }
.chev .cv::before { content: ""; position: absolute; inset: 0; background: var(--acc); transform: translateX(-101%) }
.chev .cv span { position: relative; z-index: 1 }
.chev.in .cv::before { animation: cvFill 1s var(--ease) forwards; animation-delay: calc(var(--i) * .4s + .2s) }
.chev.in .cv span { animation: cvTxt .4s forwards; animation-delay: calc(var(--i) * .4s + .5s) }
.chev p { padding: 1rem 1.2rem 0 .6rem; margin: 0; font-size: .95rem; color: var(--grey) }
.hxst { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem }
.hxi { text-align: center }
.hxi b { display: grid; place-items: center; width: 80px; height: 90px; margin: 0 auto 1rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, #7a44dc, var(--acc)); color: #140e37; font: 800 1.4rem Manrope, sans-serif; animation: blip 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * .5s) }
.hxi h5 { font: 600 1.25rem Manrope, sans-serif; margin-bottom: .4rem }
.hxi p { color: var(--grey); font-size: .95rem; margin: 0 }
.rail { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding-top: 1.6rem }
.rail::before { content: ""; position: absolute; top: calc(1.6rem + 15px); left: 4%; right: 4%; height: 2px; background: repeating-linear-gradient(90deg, var(--acc) 0 6px, transparent 6px 12px); opacity: .55 }
.rail::after { content: ""; position: absolute; top: calc(1.6rem + 9px); left: 4%; width: 14px; height: 14px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 5px var(--accs), 0 0 18px var(--acc); animation: railMove 6s ease-in-out infinite alternate }
.rail .rn { position: relative; text-align: center; padding: 0 .4rem; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 100ms) }
.rail.in .rn { opacity: 1; transform: none }
.rail .rn b { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto .8rem; border-radius: 50%; background: var(--page); border: 2px solid var(--acc); font: 700 .8rem Manrope, sans-serif }
.rail .rn span { font: 600 .95rem Manrope, sans-serif }
.venn { display: flex; justify-content: center; padding: 2rem 0 1rem }
.venn div { width: 240px; height: 240px; margin: 0 -26px; border-radius: 50%; display: grid; place-items: center; padding: 1.5rem; text-align: center; font: 700 1.2rem Manrope, sans-serif; color: #fff; mix-blend-mode: screen; animation: fl 6s ease-in-out infinite }
.venn div:nth-child(1) { background: rgba(185, 182, 247, .3); border: 1px solid rgba(185, 182, 247, .75) }
.venn div:nth-child(2) { background: rgba(130, 75, 225, .36); border: 1px solid rgba(160, 110, 240, .75); animation-delay: -2s }
.venn div:nth-child(3) { background: rgba(110, 100, 240, .36); border: 1px solid rgba(140, 132, 250, .75); animation-delay: -4s }
.wlist .wr { position: relative; display: grid; grid-template-columns: 70px 1fr 1.4fr; gap: 1.5rem; align-items: baseline; padding: 1.7rem 0; border-top: 1px solid var(--line) }
.wlist .wr::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--acc), transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) }
.in.wlist .wr::before, .wlist.in .wr::before { transform: scaleX(1) }
.wlist .wr b { font: 700 .9rem 'IBM Plex Mono', monospace; color: var(--acc) }
.wlist .wr h3 { font: 600 1.35rem Manrope, sans-serif }
.wlist .wr p { color: var(--grey); margin: 0 }
.tilt .svc-card { transition: transform .25s ease-out, box-shadow .4s; transform-style: preserve-3d }
@media (max-width:991px) { .tab-panel, .hexp, .slab { grid-template-columns: 1fr } .ledger { grid-template-columns: 1fr } .doc ul { columns: 1 } .bento { display: block } .bc { margin-bottom: 1.2rem } .hxst { grid-template-columns: repeat(2, 1fr) } .chev { grid-template-columns: 1fr } .chev .cv { clip-path: none !important; border-radius: 12px } .wlist .wr { grid-template-columns: 50px 1fr } .wlist .wr p { grid-column: 2 } .acc-in { padding-left: 0 } }
@media (max-width:767px) { .vt::before { left: 12px } .vi, .vi:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 2.2rem 2.6rem; text-align: left; transform: translateX(20px) } .vi::after, .vi:nth-child(even)::after { left: 3px; right: auto } .rail { grid-template-columns: 1fr; padding: 0 0 0 2.4rem } .rail::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: var(--acc); opacity: .3 } .rail::after { display: none } .rail .rn { text-align: left; display: flex; gap: 1rem; align-items: center; padding: .7rem 0 } .rail .rn b { margin: 0 0 0 -2.4rem } .venn { flex-direction: column; align-items: center } .venn div { margin: -26px 0 } .sc { position: relative; top: auto } }

/* ---- dark pages: keep the header pill and footer on the light palette so menu text stays readable ---- */
body[class*="pg-"] .navwrap,
body[class*="pg-"] footer {
  --ink: #11151a; --grey: #66717c; --line: #e4e8ec; --card-line: #d5d5d5; --cbg: #fff; --acc: #2527c9; --accs: rgba(37, 39, 201, .1)
}