/* =====================================================================
   Home+ : enhancement layer for index.html (scoped by html.hp)
   - Capabilities: the three lower cards come alive like the top two
   - Industries: line illustrations (ambient motion + extra motion on hover)
   ===================================================================== */

/* hide the originals only when the new art is mounted */
.hp .capCard[data-hp] > .capCard__media > :not(.hpArt) { display: none !important; }
.hp .indCard[data-hp] .indCard__illo { display: none; }

.hp .hpArt { position: absolute; inset: 0; overflow: hidden; }
.hp .capCard[data-hp] > .capCard__media { overflow: hidden; }
.hp .hpArt * { box-sizing: border-box; }
.hp .hpGlow { position: absolute; left: 50%; top: 50%; width: 300px; height: 240px; transform: translate(-50%, -50%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(74, 61, 204, .22), rgba(36, 179, 157, .1) 58%, transparent 75%); filter: blur(18px); pointer-events: none; }
.hp .caps.is-rest .hpArt *, .hp .hpArt.is-off * { animation-play-state: paused !important; }

/* shared: small round brand-ish badges (same grammar as .capBadge) */
.hp .hpBadge { position: absolute; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tint, #f2f0fe); box-shadow: 0 6px 16px rgba(17, 24, 39, .10); animation: hpBob 5s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .4s; z-index: 3; }
.hp .hpBadge img { width: 54%; height: 54%; object-fit: contain; }
.hp .hpBadge svg { width: 22px; height: 22px; }
@keyframes hpBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ---------------------------------------------------------------
   Card 3 · Digital Products — a phone and a web dashboard, both live
   --------------------------------------------------------------- */
.hp .hpDev__web { position: absolute; left: 50%; top: 50%; width: 236px; height: 160px; margin: -96px 0 0 -170px; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(17, 24, 39, .12), 0 0 0 1px rgba(17, 24, 39, .05); overflow: hidden; transition: transform .7s cubic-bezier(.2, .7, .3, 1); z-index: 1; }
.hp .hpDev__bar { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #f6f6fb; border-bottom: 1px solid #eceef4; }
.hp .hpDev__bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9dbe5; }
.hp .hpDev__bar b { margin-left: 8px; height: 8px; flex: 1; max-width: 110px; border-radius: 4px; background: #eceef4; }
.hp .hpDev__body { display: flex; height: calc(100% - 22px); }
.hp .hpDev__side { width: 46px; padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; border-right: 1px solid #f0f1f6; }
.hp .hpDev__side i { height: 6px; border-radius: 3px; background: #eceef4; }
.hp .hpDev__side i:first-child { background: #4a3dcc; width: 70%; }
.hp .hpDev__main { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; }
.hp .hpDev__kpi { display: flex; gap: 6px; }
.hp .hpDev__kpi span { flex: 1; height: 26px; border-radius: 6px; background: #f6f6fb; position: relative; overflow: hidden; }
.hp .hpDev__kpi span::after { content: ""; position: absolute; left: 6px; top: 7px; width: 40%; height: 5px; border-radius: 3px; background: #c9c4f3; }
.hp .hpDev__kpi span::before { content: ""; position: absolute; left: 6px; bottom: 6px; width: 60%; height: 5px; border-radius: 3px; background: #11131f; opacity: .7; }
.hp .hpDev__chart { flex: 1; display: flex; align-items: flex-end; gap: 6px; padding-top: 10px; }
.hp .hpDev__chart i { flex: 1; border-radius: 3px 3px 0 0; background: #e3ddff; height: var(--h); transform-origin: bottom; animation: hpBars 4.2s cubic-bezier(.6, 0, .3, 1) infinite; animation-delay: var(--d); }
.hp .hpDev__chart i:nth-child(5) { background: #4a3dcc; }
.hp .hpDev__chart i:nth-child(3) { background: #29ccb2; }
@keyframes hpBars { 0%, 12% { transform: scaleY(.25); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.25); } }

.hp .hpDev__phone { position: absolute; left: 50%; top: 50%; width: 118px; height: 232px; margin: -112px 0 0 34px; padding: 6px; border-radius: 24px; background: #11131f; box-shadow: 0 22px 40px rgba(17, 24, 39, .22); transition: transform .7s cubic-bezier(.2, .7, .3, 1); z-index: 2; }
.hp .hpDev__phone::before { content: ""; position: absolute; left: 50%; top: 10px; width: 34px; height: 8px; margin-left: -17px; border-radius: 6px; background: #11131f; z-index: 3; }
.hp .hpDev__screen { position: relative; width: 100%; height: 100%; border-radius: 19px; background: #fff; overflow: hidden; }
.hp .hpDev__s { position: absolute; inset: 0; padding: 24px 10px 10px; display: flex; flex-direction: column; gap: 7px; opacity: 0; animation: hpScreens 9s infinite; }
.hp .hpDev__s:nth-child(1) { animation-delay: 0s; }
.hp .hpDev__s:nth-child(2) { animation-delay: 3s; }
.hp .hpDev__s:nth-child(3) { animation-delay: 6s; }
@keyframes hpScreens { 0% { opacity: 0; transform: translateX(14px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateX(-14px); } }
.hp .hpDev__hi { font: 600 8px/1.2 "Geologica", sans-serif; color: #555a6b; }
.hp .hpDev__bal { border-radius: 10px; padding: 9px; color: #fff; background: linear-gradient(135deg, #4a3dcc 40%, #1a164b); }
.hp .hpDev__bal small { display: block; font: 500 6.5px/1 Inter, sans-serif; opacity: .75; }
.hp .hpDev__bal b { display: block; margin-top: 5px; font: 700 11px/1 "Geologica", sans-serif; letter-spacing: -.02em; }
.hp .hpDev__acts { display: flex; justify-content: space-between; }
.hp .hpDev__acts i { width: 20px; height: 20px; border-radius: 7px; background: #f2f0fe; position: relative; }
.hp .hpDev__acts i::after { content: ""; position: absolute; inset: 7px; border-radius: 2px; background: #4a3dcc; }
.hp .hpDev__acts i:nth-child(2)::after { background: #29ccb2; }
.hp .hpDev__row { display: flex; align-items: center; gap: 6px; }
.hp .hpDev__row i { width: 16px; height: 16px; border-radius: 50%; background: #eef0f5; flex: none; }
.hp .hpDev__row span { flex: 1; height: 5px; border-radius: 3px; background: #eceef4; }
.hp .hpDev__row em { width: 22px; height: 5px; border-radius: 3px; background: #11131f; opacity: .55; }
.hp .hpDev__ok { margin: 18px auto 4px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #e3f7f4; }
.hp .hpDev__ok svg { width: 22px; height: 22px; }
.hp .hpDev__t { text-align: center; font: 700 9px/1.2 "Geologica", sans-serif; color: #11131f; }
.hp .hpDev__sub { text-align: center; font: 500 7px/1.3 Inter, sans-serif; color: #8a90a0; }
.hp .hpDev__btn { margin-top: auto; height: 20px; border-radius: 10px; background: #4a3dcc; }
.hp .hpDev__field { height: 22px; border-radius: 7px; border: 1px solid #e7e8ee; position: relative; }
.hp .hpDev__field::after { content: ""; position: absolute; left: 7px; top: 8px; width: 46%; height: 5px; border-radius: 3px; background: #d9dbe5; }
.hp .hpDev__amt { font: 700 15px/1 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; text-align: center; margin: 6px 0 2px; }
.hp .hpDev__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: auto; }
.hp .hpDev__keys i { height: 12px; border-radius: 4px; background: #f3f4f8; }
.hp .hpDev .hpBadge { --s: 40px; width: var(--s); height: var(--s); }
.hp .hpDev .b1 { left: 14%; top: 64%; --tint: #ebf7ee; --d: -.8s; }
.hp .hpDev .b2 { right: 10%; top: 12%; --tint: #f2f0fe; --d: -2.2s; }
.hp .hpDev .b3 { right: 8%; bottom: 10%; --tint: #fff4e8; --d: -3.4s; }
/* hover: the phone steps forward, the dashboard slides back, screens run quicker */
.hp .capCard:hover .hpDev__phone { transform: translate(-8px, -8px) rotate(-4deg) scale(1.04); }
.hp .capCard:hover .hpDev__web { transform: translate(-10px, 6px) scale(.97); }
.hp .capCard:hover .hpDev__s { animation-duration: 4.5s; }
.hp .capCard:hover .hpDev__s:nth-child(2) { animation-delay: 1.5s; }
.hp .capCard:hover .hpDev__s:nth-child(3) { animation-delay: 3s; }
.hp .capCard:hover .hpDev .hpBadge { transform: scale(1.12); }

/* ---------------------------------------------------------------
   Card 4 · Payments & Commerce — rails flow into a live receipt
   --------------------------------------------------------------- */
.hp .hpPay__rail { position: absolute; left: 0; right: 50%; top: 50%; height: 0; border-top: 1.5px dashed rgba(74, 61, 204, .22); }
.hp .hpPay__lane { position: absolute; left: 0; right: 0; top: 50%; height: 34px; margin-top: -17px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%, #000 40%, transparent 52%); mask: linear-gradient(90deg, transparent 0, #000 12%, #000 40%, transparent 52%); }
.hp .hpPay__chip { position: absolute; left: 0; top: 0; height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 8px; border-radius: 99px; background: #fff; box-shadow: 0 6px 16px rgba(17, 24, 39, .1); font: 700 12px/1 "Geologica", sans-serif; color: #11131f; white-space: nowrap; will-change: transform; }
.hp .hpPay__chip i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #4a3dcc); color: #fff; font: 700 9px/1 Inter, sans-serif; font-style: normal; }
@keyframes hpRail { 0% { transform: translateX(-140px); } 100% { transform: translateX(260px); } }
.hp .hpPay__rcpt { position: absolute; left: 50%; top: 50%; width: 176px; margin: -108px 0 0 -6px; padding: 16px 16px 14px; border-radius: 14px; background: #fff; box-shadow: 0 18px 38px rgba(17, 24, 39, .14), 0 0 0 1px rgba(17, 24, 39, .04); z-index: 2; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.hp .hpPay__rcpt::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 12px; background: radial-gradient(circle at 6px 0, transparent 5px, #fff 5.5px) 0 0 / 12px 12px repeat-x; filter: drop-shadow(0 4px 3px rgba(17, 24, 39, .06)); }
.hp .hpPay__ok { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #29ccb2; color: #fff; box-shadow: 0 0 0 6px rgba(41, 204, 178, .16); }
.hp .hpPay__ok svg { width: 18px; height: 18px; }
.hp .hpPay__rcpt.is-new .hpPay__ok { animation: hpPop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hpPop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.hp .hpPay__lbl { margin-top: 10px; font: 500 11px/1.3 Inter, sans-serif; color: #6b7183; }
.hp .hpPay__amt { margin-top: 3px; font: 700 22px/1.1 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; font-variant-numeric: tabular-nums; }
.hp .hpPay__meta { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4e6ee; display: grid; gap: 6px; }
.hp .hpPay__meta div { display: flex; justify-content: space-between; font: 500 10.5px/1 Inter, sans-serif; color: #8a90a0; }
.hp .hpPay__meta b { font-weight: 600; color: #11131f; }
.hp .hpPay__rcpt.is-new .hpPay__amt, .hp .hpPay__rcpt.is-new .hpPay__meta b { animation: hpIn .5s ease; }
@keyframes hpIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.hp .hpPay__qr { position: absolute; right: 10%; top: 12%; --tint: #fff; }
.hp .hpPay__qr svg { width: 24px; height: 24px; }
.hp .capCard:hover .hpPay__chip { --dur: 3.2s; }
.hp .capCard:hover .hpPay__rcpt { transform: translateY(-6px) rotate(1.5deg); }

/* ---------------------------------------------------------------
   Card 5 · Enterprise Systems — an approval flow tied to the tools
   --------------------------------------------------------------- */
.hp .hpEnt__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp .hpEnt__lines path { fill: none; stroke: rgba(74, 61, 204, .18); stroke-width: 1.2; stroke-dasharray: 3 5; }
.hp .hpEnt__lines path.is-hot { stroke: rgba(74, 61, 204, .55); stroke-dasharray: none; }
.hp .hpEnt__lines circle { fill: #29ccb2; }
.hp .hpEnt__flow { position: absolute; left: 50%; top: 50%; width: 198px; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.hp .hpEnt__step { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(17, 24, 39, .1), 0 0 0 1px rgba(17, 24, 39, .04); transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .4s; }
.hp .hpEnt__step + .hpEnt__step::before { content: ""; position: absolute; left: 24px; top: -15px; height: 15px; border-left: 1.5px dashed #c9c4f3; }
.hp .hpEnt__av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 9px/1 "Geologica", sans-serif; color: #fff; background: var(--c, #4a3dcc); }
.hp .hpEnt__txt { flex: 1; min-width: 0; }
.hp .hpEnt__txt b { display: block; font: 700 11px/1.2 "Geologica", sans-serif; color: #11131f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .hpEnt__txt small { display: block; margin-top: 2px; font: 500 9.5px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .hpEnt__st { flex: none; height: 18px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; font: 700 8.5px/1 Inter, sans-serif; letter-spacing: .02em; background: #f3f4f8; color: #8a90a0; transition: background .4s, color .4s; }
.hp .hpEnt__step.is-run .hpEnt__st { background: #f2f0fe; color: #4a3dcc; }
.hp .hpEnt__step.is-done .hpEnt__st { background: #e3f7f4; color: #1d9783; }
.hp .hpEnt__step.is-run { transform: translateX(4px); box-shadow: 0 14px 30px rgba(74, 61, 204, .18), 0 0 0 1.5px rgba(74, 61, 204, .35); }
.hp .hpEnt .hpBadge { --s: 42px; width: var(--s); height: var(--s); }
.hp .hpEnt .e1 { left: 7%; top: 14%; --tint: #f2f0fe; --d: -1s; }
.hp .hpEnt .e2 { right: 7%; top: 14%; --tint: #eaf3ff; --d: -2.4s; }
.hp .hpEnt .e3 { left: 7%; bottom: 14%; --tint: #fdeaeb; --d: -3.1s; }
.hp .hpEnt .e4 { right: 7%; bottom: 14%; --tint: #f2f0fe; --d: -.3s; }
.hp .hpEnt .hpBadge.is-hot { transform: scale(1.14); box-shadow: 0 8px 22px rgba(74, 61, 204, .3); }

/* ---------------------------------------------------------------
   Industries · white line illustrations on the purple cards
   --------------------------------------------------------------- */
.hp .indCard[data-hp] .indCard__media { overflow: visible; }
.hp .hpInd { width: min(78%, 250px); height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(41, 204, 178, .35)); animation: indMediaFloat 5.5s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.hp .hpInd .w { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp .hpInd .w2 { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp .hpInd .f { fill: #4a3dcc; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.hp .hpInd .t { fill: none; stroke: #29ccb2; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hp .hpInd .tf { fill: #29ccb2; }
.hp .hpInd g, .hp .hpInd path, .hp .hpInd rect, .hp .hpInd circle { transform-box: fill-box; }
.hp .indCard .hpInd * { transition: transform .7s cubic-bezier(.2, .7, .3, 1), opacity .5s ease; }

/* financial: a coin keeps landing on the stacks; hover grows the stacks */
.hp .hpFin .drop { animation: hpDrop 3.2s cubic-bezier(.5, 0, .7, 1) infinite; }
@keyframes hpDrop { 0% { transform: translateY(-46px); opacity: 0; } 15% { opacity: 1; } 55%, 72% { transform: translateY(0); opacity: 1; } 90%, 100% { transform: translateY(0); opacity: 0; } }
.hp .hpFin .grow { transform-origin: 50% 100%; transform: scaleY(1); }
.hp .indCard:hover .hpFin .grow { transform: scaleY(1.28); }
.hp .hpFin .spark { opacity: 0; transform: scale(.4); transform-origin: center; }
.hp .indCard:hover .hpFin .spark { opacity: 1; transform: scale(1); }

/* insurance: the policy lines write themselves; hover stamps it approved */
.hp .hpIns .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hpWrite 4.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes hpWrite { 0%, 8% { stroke-dashoffset: 1; } 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.hp .hpIns .stamp { opacity: 0; transform: scale(1.6) rotate(-14deg); transform-origin: center; }
.hp .indCard:hover .hpIns .stamp { opacity: 1; transform: scale(1) rotate(-14deg); }
.hp .indCard:hover .hpIns .doc { transform: rotate(-3deg); }

/* healthcare: a heartbeat runs through the heart; hover quickens it and adds the cross */
.hp .hpHea .ecg { stroke-dasharray: .28 .72; animation: hpEcg 2.6s linear infinite; }
@keyframes hpEcg { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hp .indCard:hover .hpHea .ecg { animation-duration: 1.1s; }
.hp .hpHea .heart { transform-origin: center; animation: hpBeat 2.6s ease-in-out infinite; }
@keyframes hpBeat { 0%, 60%, 100% { transform: scale(1); } 66% { transform: scale(1.05); } 72% { transform: scale(.99); } 78% { transform: scale(1.03); } }
.hp .indCard:hover .hpHea .heart { animation-duration: 1.1s; }
.hp .hpHea .cross { opacity: 0; transform: scale(.3); transform-origin: center; }
.hp .indCard:hover .hpHea .cross { opacity: 1; transform: scale(1); }

/* retail: a bag swings in the window; hover sends parcels out of the door */
.hp .hpRet .bag { transform-origin: 50% 0; animation: hpSwing 3.4s ease-in-out infinite; }
@keyframes hpSwing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.hp .hpRet .awn { animation: hpAwn 3.4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes hpAwn { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }
.hp .hpRet .box { opacity: 0; transform: translate(-30px, 0); }
.hp .indCard:hover .hpRet .box { opacity: 1; transform: none; }
.hp .indCard:hover .hpRet .box.b2 { transition-delay: .12s; }
.hp .indCard:hover .hpRet .box.b3 { transition-delay: .24s; }

/* enterprise: windows light up in turn; hover adds a floor on top */
.hp .hpEnt2 .win { fill: rgba(255, 255, 255, .14); animation: hpWin 4.8s steps(1) infinite; animation-delay: var(--d); }
@keyframes hpWin { 0%, 100% { fill: rgba(255, 255, 255, .14); } 40%, 70% { fill: #29ccb2; } }
.hp .hpEnt2 .floor { opacity: 0; transform: translateY(-26px); }
.hp .indCard:hover .hpEnt2 .floor { opacity: 1; transform: none; }
.hp .hpEnt2 .crane { transform-origin: 0 0; animation: hpCrane 6s ease-in-out infinite; }
@keyframes hpCrane { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* more: arrows breathe outward; hover sends four blocks out to new places */
.hp .hpMore .arr { animation: hpOut 2.8s ease-in-out infinite; }
.hp .hpMore .arr.up { --x: 0; --y: -6px; } .hp .hpMore .arr.dn { --x: 0; --y: 6px; } .hp .hpMore .arr.lf { --x: -6px; --y: 0; } .hp .hpMore .arr.rt { --x: 6px; --y: 0; }
@keyframes hpOut { 0%, 100% { transform: translate(0, 0); opacity: .65; } 50% { transform: translate(var(--x), var(--y)); opacity: 1; } }
.hp .hpMore .blk { opacity: 0; transform: translate(0, 0) scale(.5); transform-origin: center; }
.hp .indCard:hover .hpMore .blk { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
.hp .indCard:hover .hpMore .core { transform: rotate(45deg); }
.hp .hpMore .core { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .hp .hpArt *, .hp .hpInd, .hp .hpInd * { animation: none !important; }
  .hp .hpDev__s:nth-child(1) { opacity: 1; }
  .hp .hpIns .ln { stroke-dashoffset: 0; }
}
@media (max-width: 1024px) {
  .hp .hpDev__web { margin-left: -150px; width: 210px; }
  .hp .hpDev__phone { margin-left: 30px; }
}
@media (max-width: 620px) {
  .hp .hpDev .hpBadge, .hp .hpEnt .hpBadge { display: none; }
}
/* polish pass 1 */
.hp .hpInd { width: min(88%, 280px); }
@keyframes hpWin { 0%, 100% { fill: rgba(255, 255, 255, .14); } 46%, 62% { fill: #29ccb2; } }
.hp .hpDev__bal b { font-size: 10px; white-space: nowrap; }
.hp .hpPay__qr { right: auto; left: 9%; top: 12%; }
.hp .hpPay__rcpt { margin-top: -98px; }
/* polish pass 2 */
.hp .hpEnt__flow { width: 224px; }
.hp .hpEnt__txt b { white-space: normal; line-height: 1.15; }
.hp .indCard:hover .hpMore .core { transform: rotate(90deg); }
@media (max-width: 620px) {
  .hp .hpPay__rcpt { margin-left: -88px; }
  .hp .hpPay__lane { -webkit-mask: linear-gradient(90deg, transparent 0, #000 10%, #000 30%, transparent 40%); mask: linear-gradient(90deg, transparent 0, #000 10%, #000 30%, transparent 40%); }
  .hp .hpPay__qr { display: none; }
  .hp .hpDev__web { margin-left: -150px; width: 200px; }
  .hp .hpDev__phone { margin-left: 22px; }
}
@media (max-width: 620px) { .hp .hpEnt__lines { display: none; } }

/* ---------------------------------------------------------------
   Statement → Capabilities: no blank white screen after the light.
   On desktop (pinned statement) Capabilities is pulled up under the light,
   kept invisible and click-through while the hands play, then fades in
   the moment the light has filled the screen.
   --------------------------------------------------------------- */
.hp .caps.hp-pull { margin-top: -88vh; transition: background-color .01s; }
.hp .caps.hp-pull.is-veiled { background: transparent; pointer-events: none; }
.hp .caps.hp-pull > * { transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .3, 1); }
.hp .caps.hp-pull.is-veiled > * { opacity: 0; transform: translateY(28px); }
.hp.hp-veilfull .veil { opacity: 1 !important; }

/* ---------- Capabilities v2 ---------- */
/* enterprise: photos, a progress bar on the running step, a drawn check, a Slack toast at the end */
.hp img.hpEnt__av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(17, 24, 39, .15); }
.hp .hpEnt__step { overflow: hidden; }
.hp .hpEnt__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #4a3dcc, #29ccb2); transform-origin: left; transform: scaleX(var(--pr, 0)); opacity: 0; transition: opacity .3s; }
.hp .hpEnt__step.is-run .hpEnt__bar { opacity: 1; }
.hp .hpEnt__st { gap: 4px; }
.hp .hpEnt__st em { font-style: normal; }
.hp .hpEnt__ck { width: 0; height: 10px; transition: width .3s; }
.hp .hpEnt__ck path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s .15s ease; }
.hp .hpEnt__step.is-done .hpEnt__ck { width: 10px; }
.hp .hpEnt__step.is-done .hpEnt__ck path { stroke-dashoffset: 0; }
.hp .hpEnt__step.is-run { transform: translateX(6px) scale(1.02); }
.hp .hpEnt__step { transition: transform .6s cubic-bezier(.2, .8, .2, 1.15), box-shadow .4s, opacity .4s; }
.hp .hpEnt__step:not(.is-run):not(.is-done) { opacity: .72; }
.hp .hpEnt__toast { position: absolute; right: 7%; bottom: calc(14% + 54px); display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 9px; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(17, 24, 39, .16); z-index: 4; opacity: 0; transform: translateY(10px) scale(.92); transform-origin: right bottom; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1.2); pointer-events: none; }
.hp .hpEnt__toast img { width: 18px; height: 18px; }
.hp .hpEnt__toast b { display: block; font: 700 10.5px/1.2 "Geologica", sans-serif; color: #11131f; white-space: nowrap; }
.hp .hpEnt__toast small { display: block; font: 500 9.5px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .hpEnt.is-complete .hpEnt__toast { opacity: 1; transform: none; }
@media (max-width: 620px) { .hp .hpEnt__toast { right: 4%; bottom: 6%; } }

/* reveal after the light: pill → title → panel → cards, instead of everything at once */
.hp .caps.hp-pull.is-veiled > * { opacity: 1; transform: none; }
.hp .caps.hp-pull.hp-rev .caps__header .pill,
.hp .caps.hp-pull.hp-rev .caps__title,
.hp .caps.hp-pull.hp-rev .caps__grid,
.hp .caps.hp-pull.hp-rev .caps__grid > .capCard { transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1), filter .9s ease; }
.hp .caps.hp-pull.hp-rev .caps__header .pill { transition-delay: 0s; }
.hp .caps.hp-pull.hp-rev .caps__title { transition-delay: .12s; }
.hp .caps.hp-pull.hp-rev .caps__grid { transition-delay: .26s; }
.hp .caps.hp-pull.hp-rev .caps__grid > .capCard { transition-delay: calc(.38s + var(--i, 0) * .09s); }
.hp .caps.hp-pull.is-veiled .caps__header .pill { opacity: 0 !important; transform: translateY(16px) scale(.9) !important; }
.hp .caps.hp-pull.is-veiled .caps__title { opacity: 0 !important; transform: translateY(36px) !important; filter: blur(10px); }
.hp .caps.hp-pull.is-veiled .caps__grid { opacity: 0 !important; transform: translateY(60px) scale(.97) !important; }
.hp .caps.hp-pull.is-veiled .caps__grid > .capCard { opacity: 0 !important; transform: translateY(70px) !important; }
.hp .caps.hp-pull .caps__grid > .capCard:nth-child(1) { --i: 0; } .hp .caps.hp-pull .caps__grid > .capCard:nth-child(2) { --i: 1; }
.hp .caps.hp-pull .caps__grid > .capCard:nth-child(3) { --i: 2; } .hp .caps.hp-pull .caps__grid > .capCard:nth-child(4) { --i: 3; } .hp .caps.hp-pull .caps__grid > .capCard:nth-child(5) { --i: 4; }
/* the end of the flow pings Slack instead of a toast (no overlap with the steps) */
.hp .hpEnt__toast { display: none; }
.hp .hpEnt .e4::after { content: "1"; position: absolute; right: -3px; top: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #e5484d; color: #fff; font: 700 9.5px/1 Inter, sans-serif; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.hp .hpEnt.is-complete .e4::after { transform: scale(1); }
.hp .hpEnt .e4::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(74, 61, 204, .35); }
.hp .hpEnt.is-complete .e4::before { animation: hpPing 1.2s ease-out infinite; }
@keyframes hpPing { from { box-shadow: 0 0 0 0 rgba(74, 61, 204, .35); } to { box-shadow: 0 0 0 16px rgba(74, 61, 204, 0); } }
.hp .hpEnt__txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Capabilities v3 (real logos + real photos) ---------- */
/* card 1: grouped orbit, same component as the original */
.hp .hpOrb { position: absolute; inset: 0; }
.hp .hpOrb .capBadge { transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .4s; }
.hp .capCard:hover .hpOrb .capBadge { box-shadow: 0 8px 20px rgba(74, 61, 204, .18); }
.hp .hpOrb__pulse { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1.5px solid rgba(74, 61, 204, .35); animation: hpPulse 3.2s ease-out infinite; z-index: 1; }
@keyframes hpPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5.6); opacity: 0; } }
.hp .capCard:hover .hpOrb__pulse { animation-duration: 1.4s; }

/* cards 3 and 4: an inset photo with live pieces on top */
.hp .hpPhoto__frame { position: absolute; inset: 14px 14px 0; border-radius: 10px; overflow: hidden; background: #eceef4; }
.hp .hpPhoto__img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); animation: hpKen 16s ease-in-out infinite alternate; transition: filter .6s; }
@keyframes hpKen { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1.5%); } }
.hp .capCard:hover .hpPhoto__img { filter: saturate(1.08) brightness(1.03); }
.hp .hpPhoto__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 19, 31, 0) 55%, rgba(17, 19, 31, .28)); pointer-events: none; }

/* digital products: the stack floats around the phone */
.hp .hpChip { --s: 44px; width: var(--s); height: var(--s); background: #fff; box-shadow: 0 8px 22px rgba(17, 24, 39, .16); }
.hp .hpChip img { width: 56%; height: 56%; }
.hp .hpChip.t1 { left: 8%; top: 12%; } .hp .hpChip.t2 { left: 4%; top: 46%; } .hp .hpChip.t3 { left: 13%; bottom: 10%; }
.hp .hpChip.t4 { right: 7%; top: 10%; } .hp .hpChip.t5 { right: 4%; top: 44%; } .hp .hpChip.t6 { right: 12%; bottom: 10%; }
.hp .capCard:hover .hpChip.t1 { transform: translate(-6px, -6px) rotate(-8deg) scale(1.08); } .hp .capCard:hover .hpChip.t2 { transform: translate(-8px, 0) rotate(6deg) scale(1.08); }
.hp .capCard:hover .hpChip.t3 { transform: translate(-6px, 6px) rotate(-6deg) scale(1.08); } .hp .capCard:hover .hpChip.t4 { transform: translate(6px, -6px) rotate(8deg) scale(1.08); }
.hp .capCard:hover .hpChip.t5 { transform: translate(8px, 0) rotate(-6deg) scale(1.08); } .hp .capCard:hover .hpChip.t6 { transform: translate(6px, 6px) rotate(6deg) scale(1.08); }
.hp .hpTag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); font: 700 11px/1 "Geologica", sans-serif; color: #11131f; white-space: nowrap; z-index: 3; }
.hp .hpTag i { width: 7px; height: 7px; border-radius: 50%; background: #29ccb2; box-shadow: 0 0 0 0 rgba(41, 204, 178, .5); animation: hpLive 1.8s ease-out infinite; }
@keyframes hpLive { to { box-shadow: 0 0 0 7px rgba(41, 204, 178, 0); } }

/* payments: confirmations drop in; payment rails scroll in a glass strip */
.hp .hpNotif { position: absolute; left: 50%; top: 28px; width: min(78%, 250px); transform: translate(-50%, -14px) scale(.96); opacity: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); box-shadow: 0 14px 30px rgba(17, 24, 39, .2); z-index: 3; transition: transform .55s cubic-bezier(.2, .9, .25, 1.15), opacity .35s ease; }
.hp .hpNotif.is-in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.hp .hpNotif__ok { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #29ccb2; color: #fff; }
.hp .hpNotif__ok svg { width: 16px; height: 16px; }
.hp .hpNotif__txt { flex: 1; min-width: 0; }
.hp .hpNotif__txt small { display: block; font: 500 10.5px/1.2 Inter, sans-serif; color: #6b7183; }
.hp .hpNotif__txt b { display: block; margin-top: 2px; font: 700 16px/1.1 "Geologica", sans-serif; letter-spacing: -.02em; color: #11131f; font-variant-numeric: tabular-nums; }
.hp .hpNotif__via { flex: none; height: 26px; min-width: 44px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px #eceef4; }
.hp .hpNotif__via img { max-height: 14px; max-width: 46px; }
.hp .hpRails { position: absolute; left: 26px; right: 26px; bottom: 12px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); overflow: hidden; z-index: 3; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hp .hpRails__row { display: flex; align-items: center; height: 100%; width: max-content; animation: hpRails 22s linear infinite; }
.hp .capCard:hover .hpRails__row { animation-duration: 9s; }
.hp .hpRails__logo { flex: none; width: 76px; display: grid; place-items: center; }
.hp .hpRails__logo img { max-height: 16px; max-width: 52px; }
.hp .hpRails__logo--mastercard img { max-height: 20px; }
.hp .hpRails__logo--qris img { max-height: 18px; }
@keyframes hpRails { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hp .hpPhoto__img, .hp .hpRails__row, .hp .hpOrb__pulse { animation: none; } }
@media (max-width: 620px) { .hp .hpChip { --s: 38px; } .hp .hpChip.t2, .hp .hpChip.t5 { display: none; } }
.hp .hpRails { height: 46px; }
.hp .hpRails__logo { width: 84px; }
.hp .hpRails__logo img { max-height: 19px; max-width: 60px; }
.hp .hpRails__logo--qris img { max-height: 24px; }
.hp .hpRails__logo--mastercard img { max-height: 24px; }

/* =====================================================================
   Capabilities v4: component visuals, calm motion, hover = a new layer
   (never a speed-up)
   ===================================================================== */
/* no speed changes on hover anywhere */
.hp .capCard:hover .hpRails__row { animation-duration: 22s; }
.hp .indCard:hover .hpHea .ecg, .hp .indCard:hover .hpHea .heart { animation-duration: 2.6s; }
.hp .indCard:hover .hpHea .ecg { stroke: #fff; filter: drop-shadow(0 0 6px rgba(41, 204, 178, .9)); }
.hp .hpOrb__pulse { display: none; }

/* AI and Automation: the DDT tile takes the petal shape of the logo */
.hp .capAi__badge { border-radius: 50% 50% 18px 50%; }

/* Platform Integration hover: links from the core to every tool, data flowing along them */
.hp .hpOrb__links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.hp .hpOrb.is-linked .hpOrb__links { opacity: 1; }
.hp .hpOrb__links line { stroke: rgba(74, 61, 204, .32); stroke-width: 1.2; stroke-dasharray: 3 6; animation: hpFlow 1.6s linear infinite; }
@keyframes hpFlow { to { stroke-dashoffset: -18; } }
.hp .hpOrb .capOrbit__core { transition: box-shadow .6s, transform .6s cubic-bezier(.2, .8, .2, 1.2); }
.hp .hpOrb.is-linked .capOrbit__core { box-shadow: 0 0 0 10px rgba(74, 61, 204, .08), 0 12px 30px rgba(74, 61, 204, .3); transform: translate(-50%, -50%) scale(1.08); }

/* ---------- Card 3: component kit ---------- */
.hp .hpKit__p, .hp .hpKit__phone { position: absolute; box-sizing: border-box; transition: left .9s cubic-bezier(.65, 0, .25, 1), top .9s cubic-bezier(.65, 0, .25, 1), width .9s cubic-bezier(.65, 0, .25, 1), height .9s cubic-bezier(.65, 0, .25, 1), transform .9s cubic-bezier(.65, 0, .25, 1), border-radius .9s, box-shadow .6s, opacity .6s; }
.hp .hpKit__p { font-family: Inter, sans-serif; box-shadow: 0 12px 28px rgba(17, 24, 39, .12), 0 0 0 1px rgba(17, 24, 39, .04); }
.hp .hpKit__acct { left: calc(50% - 176px); top: calc(50% - 118px); width: 196px; height: 112px; transform: rotate(-4deg); border-radius: 16px; padding: 13px 14px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #6d62e6 0%, #4a3dcc 45%, #1a164b 100%); display: flex; flex-direction: column; justify-content: space-between; }
.hp .hpKit__acctTop { display: flex; align-items: center; gap: 7px; }
.hp .hpKit__petal { width: 14px; height: 14px; color: #fff; display: grid; } .hp .hpKit__petal svg { width: 100%; height: 100%; }
.hp .hpKit__acctTop small { font: 600 10px/1 Inter, sans-serif; opacity: .8; }
.hp .hpKit__bal { font: 700 18px/1 "Geologica", sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp .hpKit__bal.is-tick { animation: hpTick .6s ease; }
@keyframes hpTick { 0% { opacity: .2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
.hp .hpKit__acctBot { display: flex; align-items: center; justify-content: space-between; font: 500 10px/1 Inter, sans-serif; opacity: .85; letter-spacing: .06em; }
.hp .hpKit__chip { width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2)); }
.hp .hpKit__acts { left: calc(50% + 8px); top: calc(50% - 102px); width: 176px; height: 66px; transform: rotate(3deg); border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; }
.hp .hpKit__act { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hp .hpKit__act i { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: #f2f0fe; color: #4a3dcc; }
.hp .hpKit__act:nth-child(2) i { background: #e3f7f4; color: #1d9783; }
.hp .hpKit__act i svg { width: 15px; height: 15px; }
.hp .hpKit__act small { font: 600 9px/1 Inter, sans-serif; color: #555a6b; white-space: nowrap; }
.hp .hpKit__row { left: calc(50% - 166px); top: calc(50% + 30px); width: 204px; height: 52px; transform: rotate(2deg); border-radius: 14px; background: #fff; display: flex; align-items: center; gap: 9px; padding: 0 11px; }
.hp .hpKit__ric { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #e3f7f4; color: #1d9783; font-style: normal; }
.hp .hpKit__ric svg { width: 16px; height: 16px; }
.hp .hpKit__row > span:nth-child(2) { flex: 1; min-width: 0; }
.hp .hpKit__row b { display: block; font: 700 10.5px/1.2 "Geologica", sans-serif; color: #11131f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .hpKit__row small { display: block; margin-top: 2px; font: 500 9px/1.2 Inter, sans-serif; color: #8a90a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .hpKit__sw { width: 30px; height: 18px; flex: none; border-radius: 99px; background: #d9dbe5; position: relative; transition: background .4s; }
.hp .hpKit__sw i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.hp .hpKit__sw.is-on { background: #4a3dcc; } .hp .hpKit__sw.is-on i { transform: translateX(12px); }
.hp .hpKit__btn { left: calc(50% + 34px); top: calc(50% + 50px); width: 142px; height: 40px; transform: rotate(-3deg); border-radius: 99px; background: #4a3dcc; color: #fff; display: flex; align-items: center; justify-content: center; gap: 7px; font: 700 11.5px/1 "Geologica", sans-serif; box-shadow: 0 10px 22px rgba(74, 61, 204, .3); }
.hp .hpKit__btn svg { width: 14px; height: 14px; }
.hp .hpKit__btn.is-press { box-shadow: 0 4px 10px rgba(74, 61, 204, .3); filter: brightness(.94); }
.hp .hpKit__phone { left: calc(50% - 92px); top: calc(50% - 142px); width: 184px; height: 284px; border-radius: 30px; border: 6px solid #11131f; background: #f6f6fa; opacity: 0; transform: scale(.94); box-shadow: 0 24px 50px rgba(17, 24, 39, .2); }
.hp .hpKit__phone::before { content: ""; position: absolute; left: 50%; top: 7px; width: 46px; height: 9px; margin-left: -23px; border-radius: 6px; background: #11131f; }
/* gentle float while resting */
.hp .hpKit__acct, .hp .hpKit__acts, .hp .hpKit__row, .hp .hpKit__btn { animation: hpBob 6s ease-in-out infinite; }
.hp .hpKit__acts { animation-delay: -1.5s; } .hp .hpKit__row { animation-delay: -3s; } .hp .hpKit__btn { animation-delay: -4.5s; }
/* hover: the sheet assembles into one screen inside the phone */
.hp .capCard:hover .hpKit__phone { opacity: 1; transform: none; }
.hp .capCard:hover .hpKit__p { transform: none; box-shadow: 0 2px 6px rgba(17, 24, 39, .06); }
.hp .capCard:hover .hpKit__acct { left: calc(50% - 78px); top: calc(50% - 114px); width: 156px; height: 92px; border-radius: 14px; }
.hp .capCard:hover .hpKit__acct .hpKit__bal { font-size: 15px; }
.hp .capCard:hover .hpKit__acts { left: calc(50% - 78px); top: calc(50% - 14px); width: 156px; height: 58px; border-radius: 12px; }
.hp .capCard:hover .hpKit__row { left: calc(50% - 78px); top: calc(50% + 52px); width: 156px; height: 40px; border-radius: 12px; }
.hp .capCard:hover .hpKit__row small { display: none; }
.hp .capCard:hover .hpKit__btn { left: calc(50% - 78px); top: calc(50% + 100px); width: 156px; height: 32px; }

/* ---------- Card 4: QR payment components ---------- */
.hp .hpQr__methods { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; width: 132px; z-index: 2; }
.hp .hpQr__m { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 11px; background: #fff; box-shadow: 0 6px 16px rgba(17, 24, 39, .08), 0 0 0 1px rgba(17, 24, 39, .05); transition: box-shadow .5s, background .5s, transform .6s cubic-bezier(.2, .8, .2, 1.2); }
.hp .hpQr__m i { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; background: #f3f4f8; color: #555a6b; transition: background .5s, color .5s; }
.hp .hpQr__m i svg { width: 13px; height: 13px; }
.hp .hpQr__m small { font: 600 10.5px/1 Inter, sans-serif; color: #11131f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .hpQr__m.is-on { background: #f8f7ff; box-shadow: 0 8px 20px rgba(74, 61, 204, .16), 0 0 0 1.5px #4a3dcc; transform: translateX(6px); }
.hp .hpQr__m.is-on i { background: #4a3dcc; color: #fff; }
.hp .hpQr__card { position: absolute; right: 18px; top: 50%; width: 178px; height: 244px; margin-top: -122px; perspective: 900px; z-index: 2; }
.hp .hpQr__face { position: absolute; inset: 0; border-radius: 16px; background: #fff; box-shadow: 0 16px 36px rgba(17, 24, 39, .14), 0 0 0 1px rgba(17, 24, 39, .04); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 1s cubic-bezier(.65, 0, .25, 1); padding: 14px; display: flex; flex-direction: column; }
.hp .hpQr__back { transform: rotateY(180deg); align-items: center; text-align: center; justify-content: center; }
.hp .capCard:hover .hpQr__front { transform: rotateY(-180deg); }
.hp .capCard:hover .hpQr__back { transform: rotateY(0); }
.hp .hpQr__mer { display: flex; align-items: center; gap: 8px; }
.hp .hpQr__av { width: 26px; height: 26px; flex: none; border-radius: 50% 50% 6px 50%; display: grid; place-items: center; background: #1a164b; color: #fff; font: 700 9px/1 "Geologica", sans-serif; }
.hp .hpQr__mer b { display: block; font: 700 11.5px/1.2 "Geologica", sans-serif; color: #11131f; }
.hp .hpQr__mer small { display: block; font: 500 9px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .hpQr__code { position: relative; width: 124px; height: 124px; margin: 12px auto 10px; padding: 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px #eceef4; overflow: hidden; }
.hp .hpQr__code > svg { width: 100%; height: 100%; display: block; }
.hp .hpQr__scan { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, rgba(41, 204, 178, 0), rgba(41, 204, 178, .32)); border-bottom: 2px solid #29ccb2; opacity: 0; transform: translateY(-30px); }
.hp .hpQr__code.is-scan .hpQr__scan { opacity: 1; animation: hpScan 2.4s ease-in-out infinite; }
@keyframes hpScan { 0% { transform: translateY(-26px); } 50% { transform: translateY(110px); } 100% { transform: translateY(-26px); } }
.hp .hpQr__paid { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .88); opacity: 0; transition: opacity .5s ease; color: #fff; }
.hp .hpQr__paid svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #29ccb2; box-shadow: 0 0 0 8px rgba(41, 204, 178, .16); transform: scale(.4); transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.hp .hpQr__code.is-paid .hpQr__paid { opacity: 1; } .hp .hpQr__code.is-paid .hpQr__paid svg { transform: scale(1); }
.hp .hpQr__amt { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px dashed #e4e6ee; }
.hp .hpQr__amt small { font: 500 10px/1 Inter, sans-serif; color: #8a90a0; }
.hp .hpQr__amt b { font: 700 16px/1 "Geologica", sans-serif; letter-spacing: -.02em; color: #11131f; font-variant-numeric: tabular-nums; }
.hp .hpQr__ok { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #29ccb2; color: #fff; box-shadow: 0 0 0 7px rgba(41, 204, 178, .14); }
.hp .hpQr__ok svg { width: 20px; height: 20px; }
.hp .hpQr__bt { margin-top: 12px; font: 700 12px/1.2 "Geologica", sans-serif; color: #11131f; }
.hp .hpQr__bamt { margin-top: 4px; font: 700 20px/1.1 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; }
.hp .hpQr__rows { align-self: stretch; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4e6ee; display: grid; gap: 7px; }
.hp .hpQr__rows div { display: flex; justify-content: space-between; font: 500 10px/1 Inter, sans-serif; color: #8a90a0; }
.hp .hpQr__rows b { font-weight: 600; color: #11131f; }

/* ---------- Enterprise: steady tags, calm motion, audit trail on hover ---------- */
.hp .hpEnt__st { width: 66px; justify-content: center; white-space: nowrap; }
.hp .hpEnt__txt small.hpEnt__log { display: none; color: #4a3dcc; font-weight: 600; }
.hp .capCard:hover .hpEnt__txt small:not(.hpEnt__log) { display: none; }
.hp .capCard:hover .hpEnt__txt small.hpEnt__log { display: block; animation: hpIn .5s ease both; }
.hp .capCard:hover .hpEnt__flow { gap: 18px; }
.hp .hpEnt__flow { transition: gap .6s cubic-bezier(.2, .8, .2, 1); }
.hp .hpEnt__bar { transition: opacity .6s; }

@media (max-width: 620px) {
  .hp .hpQr__methods { width: 112px; left: 10px; }
  .hp .hpQr__card { right: 10px; width: 164px; }
  .hp .hpKit__acct { left: calc(50% - 160px); width: 176px; }
  .hp .hpKit__row { left: calc(50% - 156px); width: 188px; }
}

/* Capabilities v4 polish: kit pieces sit apart without touching; nothing wraps */
.hp .hpKit__acct { left: calc(50% - 170px); width: 180px; height: 106px; }
.hp .hpKit__acts { left: calc(50% + 22px); top: calc(50% - 96px); width: 150px; height: 64px; padding: 0 2px; }
.hp .hpKit__act i { width: 26px; height: 26px; }
.hp .hpKit__act small { font-size: 8.5px; }
.hp .hpKit__row { left: calc(50% - 170px); top: calc(50% + 34px); width: 196px; }
.hp .hpKit__btn { left: calc(50% + 34px); top: calc(50% + 46px); width: 146px; white-space: nowrap; }
.hp .hpKit__btn span { white-space: nowrap; }
.hp .capCard:hover .hpKit__btn { font-size: 11px; }
.hp .hpKit__ric { transition: width .6s, margin .6s, opacity .4s; overflow: hidden; }
.hp .capCard:hover .hpKit__ric { width: 0; margin-right: -9px; opacity: 0; }
.hp .capCard:hover .hpKit__row { padding: 0 10px; }

/* phones (no hover): show the assembled screen inside the phone */
@media (max-width: 620px), (hover: none) {
  .hp .hpKit__phone { opacity: 1; transform: none; }
  .hp .hpKit__p { transform: none; box-shadow: 0 2px 6px rgba(17, 24, 39, .06); animation: none; }
  .hp .hpKit__acct { left: calc(50% - 78px); top: calc(50% - 114px); width: 156px; height: 92px; border-radius: 14px; }
  .hp .hpKit__acct .hpKit__bal { font-size: 15px; }
  .hp .hpKit__acts { left: calc(50% - 78px); top: calc(50% - 14px); width: 156px; height: 58px; border-radius: 12px; }
  .hp .hpKit__row { left: calc(50% - 78px); top: calc(50% + 52px); width: 156px; height: 40px; border-radius: 12px; padding: 0 10px; }
  .hp .hpKit__row small, .hp .hpKit__ric { display: none; }
  .hp .hpKit__btn { left: calc(50% - 78px); top: calc(50% + 100px); width: 156px; height: 32px; font-size: 11px; }
}
/* enterprise: room for the Indonesian step names */
.hp .hpEnt__flow { width: 248px; }
.hp .hpEnt__st { width: 62px; padding: 0 5px; }
.hp .hpEnt__txt b { font-size: 10.5px; }
.hp .hpEnt__txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   Capabilities v5
   ===================================================================== */
/* AI: the petal of the logo, sharp bottom-right corner */
.hp .capAi__badge { border-radius: 50% 50% 0 50%; }

/* ---------- Card 3: one product, desktop -> mobile on hover ---------- */
.hp .hpRs__dev { --e: cubic-bezier(.7, 0, .2, 1); position: absolute; left: 50%; top: 45%; width: 300px; height: 196px; transform: translate(-50%, -50%); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(17, 24, 39, .07), 0 18px 40px rgba(17, 24, 39, .1); transition: width .9s var(--e), height .9s var(--e), border-radius .9s var(--e), box-shadow .9s var(--e); }
.hp .hpRs__dev > * { position: absolute; box-sizing: border-box; transition: left .9s var(--e), top .9s var(--e), width .9s var(--e), height .9s var(--e), opacity .5s ease, border-radius .9s var(--e); }
.hp .hpRs__bar { left: 0; top: 0; width: 100%; height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #f7f7fa; border-bottom: 1px solid #eef0f4; }
.hp .hpRs__bar i { width: 6px; height: 6px; border-radius: 50%; background: #dcdee6; }
.hp .hpRs__url { margin: 0 auto; height: 14px; padding: 0 10px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #eceef4; font: 500 7.5px/14px Inter, sans-serif; color: #8a90a0; transform: translateX(-12px); }
.hp .hpRs__notch { left: calc(50% - 20px); top: 6px; width: 40px; height: 8px; border-radius: 6px; background: #11131f; opacity: 0; }
/* desktop positions (device 300 x 196): two columns on a 12px grid */
.hp .hpRs__acct { left: 12px; top: 36px; width: 160px; height: 80px; border-radius: 10px; padding: 10px 11px; color: #fff; background: radial-gradient(130% 150% at 100% 0%, #6d62e6 0%, #4a3dcc 46%, #1a164b 100%); display: flex; flex-direction: column; justify-content: space-between; }
.hp .hpRs__acctTop { display: flex; align-items: center; gap: 6px; }
.hp .hpRs__petal { width: 10px; height: 10px; display: grid; color: #fff; } .hp .hpRs__petal svg { width: 100%; height: 100%; }
.hp .hpRs__acctTop small { font: 600 8.5px/1 Inter, sans-serif; opacity: .8; }
.hp .hpRs__bal { font: 700 15px/1 "Geologica", sans-serif; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp .hpRs__bal.is-tick { animation: hpTick .6s ease; }
.hp .hpRs__no { font: 500 8px/1 Inter, sans-serif; letter-spacing: .08em; opacity: .75; }
.hp .hpRs__acts { left: 12px; top: 124px; width: 160px; height: 60px; border-radius: 10px; box-shadow: inset 0 0 0 1px #eef0f4; display: flex; align-items: center; justify-content: space-around; }
.hp .hpRs__act { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hp .hpRs__act i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #f2f0fe; color: #4a3dcc; }
.hp .hpRs__act:nth-child(2) i { background: #e3f7f4; color: #1d9783; }
.hp .hpRs__act i svg { width: 12px; height: 12px; }
.hp .hpRs__act small { font: 600 7.5px/1 Inter, sans-serif; color: #555a6b; white-space: nowrap; }
.hp .hpRs__list { left: 184px; top: 36px; width: 104px; height: 148px; overflow: hidden; }
.hp .hpRs__lt { display: block; margin-bottom: 8px; font: 700 8.5px/1 "Geologica", sans-serif; color: #11131f; white-space: nowrap; }
.hp .hpRs__row { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-top: 1px solid #f1f2f6; }
.hp .hpRs__av { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 7px/1 "Geologica", sans-serif; }
.hp .hpRs__nm { flex: 1; min-width: 0; }
.hp .hpRs__nm b { display: block; font: 600 8px/1.2 Inter, sans-serif; color: #11131f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .hpRs__nm small { display: none; }
.hp .hpRs__row em { display: none; }
.hp .hpRs__row { flex-wrap: wrap; }
/* amount sits under the name so the column stays narrow */
.hp .hpRs__row .hpRs__nm::after { content: attr(data-amt); }
.hp .hpRs__seg { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 136px; height: 26px; border-radius: 99px; background: #f1f2f6; display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: center; font: 600 9.5px/1 Inter, sans-serif; color: #8a90a0; }
.hp .hpRs__seg span:not(.hpRs__knob) { position: relative; z-index: 1; transition: color .5s; }
.hp .hpRs__seg span:nth-child(2) { color: #11131f; }
.hp .hpRs__knob { position: absolute; left: 3px; top: 3px; width: calc(50% - 3px); height: 20px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgba(17, 24, 39, .12); transition: transform .9s cubic-bezier(.7, 0, .2, 1); }
/* hover: mobile (device 158 x 270), one column */
.hp .capCard:hover .hpRs__dev { width: 158px; height: 270px; border-radius: 26px; box-shadow: 0 0 0 5px #11131f, 0 24px 48px rgba(17, 24, 39, .2); }
.hp .capCard:hover .hpRs__bar { opacity: 0; }
.hp .capCard:hover .hpRs__notch { opacity: 1; }
.hp .capCard:hover .hpRs__acct { left: 10px; top: 24px; width: 138px; height: 78px; }
.hp .capCard:hover .hpRs__acts { left: 10px; top: 110px; width: 138px; height: 54px; }
.hp .capCard:hover .hpRs__list { left: 10px; top: 174px; width: 138px; height: 88px; }
.hp .capCard:hover .hpRs__knob { transform: translateX(100%); }
.hp .capCard:hover .hpRs__seg span:nth-child(2) { color: #8a90a0; }
.hp .capCard:hover .hpRs__seg span:nth-child(3) { color: #11131f; }

/* ---------- Card 4: floating QR with overlapping parts ---------- */
.hp .hpQ2__card { position: absolute; left: 50%; top: 47%; width: 168px; height: 212px; margin: -106px 0 0 -84px; perspective: 900px; z-index: 2; animation: hpBob 7s ease-in-out infinite; }
.hp .hpQ2__face { position: absolute; inset: 0; border-radius: 18px; background: #fff; padding: 13px; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(17, 24, 39, .05), 0 22px 44px rgba(17, 24, 39, .14); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 1s cubic-bezier(.65, 0, .25, 1); }
.hp .hpQ2__back { transform: rotateY(180deg); align-items: center; justify-content: center; text-align: center; }
.hp .capCard:hover .hpQ2__front { transform: rotateY(-180deg); }
.hp .capCard:hover .hpQ2__back { transform: rotateY(0); }
.hp .hpQ2__mer { display: flex; align-items: center; gap: 8px; }
.hp .hpQ2__av { width: 24px; height: 24px; flex: none; border-radius: 50% 50% 0 50%; display: grid; place-items: center; background: #1a164b; color: #fff; font: 700 8.5px/1 "Geologica", sans-serif; }
.hp .hpQ2__mer b { display: block; font: 700 11px/1.2 "Geologica", sans-serif; color: #11131f; }
.hp .hpQ2__mer small { display: block; font: 500 8.5px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .hpQ2__code { position: relative; width: 128px; height: 128px; margin: 11px auto 8px; padding: 7px; border-radius: 12px; box-shadow: inset 0 0 0 1px #eef0f4; overflow: hidden; }
.hp .hpQ2__code > svg { width: 100%; height: 100%; display: block; }
.hp .hpQ2__scan { position: absolute; left: 0; right: 0; top: 0; height: 24px; background: linear-gradient(180deg, rgba(41, 204, 178, 0), rgba(41, 204, 178, .3)); border-bottom: 2px solid #29ccb2; opacity: 0; }
.hp .hpQ2__code.is-scan .hpQ2__scan { opacity: 1; animation: hpScan 2.8s ease-in-out infinite; }
.hp .hpQ2__hint { text-align: center; font: 500 9px/1 Inter, sans-serif; color: #8a90a0; }
.hp .hpQ2__ok { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #29ccb2; color: #fff; box-shadow: 0 0 0 7px rgba(41, 204, 178, .14); }
.hp .hpQ2__ok svg { width: 19px; height: 19px; }
.hp .hpQ2__bt { margin-top: 12px; font: 700 11.5px/1.2 "Geologica", sans-serif; color: #11131f; }
.hp .hpQ2__bamt { margin-top: 3px; font: 700 19px/1.1 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; }
.hp .hpQ2__rows { align-self: stretch; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4e6ee; display: grid; gap: 7px; }
.hp .hpQ2__rows div { display: flex; justify-content: space-between; font: 500 9.5px/1 Inter, sans-serif; color: #8a90a0; }
.hp .hpQ2__rows b { font-weight: 600; color: #11131f; }
/* the floating parts, overlapping the sheet at different depths */
.hp .hpQ2__f { position: absolute; z-index: 3; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, .04), 0 14px 30px rgba(17, 24, 39, .14); animation: hpBob 6s ease-in-out infinite; transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .5s ease, margin .9s cubic-bezier(.65, 0, .25, 1); }
.hp .hpQ2__total { left: calc(50% - 158px); top: calc(47% - 96px); padding: 9px 13px; border-radius: 14px; transform: rotate(-5deg); animation-delay: -2s; }
.hp .hpQ2__total small { display: block; font: 500 9px/1 Inter, sans-serif; color: #8a90a0; }
.hp .hpQ2__total b { display: block; margin-top: 4px; font: 700 15px/1 "Geologica", sans-serif; letter-spacing: -.02em; color: #11131f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp .hpQ2__meth { left: calc(50% - 150px); top: calc(47% + 54px); height: 32px; padding: 0 12px 0 5px; border-radius: 99px; display: flex; align-items: center; gap: 7px; font: 700 10.5px/1 "Geologica", sans-serif; color: #11131f; white-space: nowrap; transform: rotate(4deg); animation-delay: -4s; }
.hp .hpQ2__meth i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #4a3dcc; color: #fff; }
.hp .hpQ2__meth i svg { width: 12px; height: 12px; }
.hp .hpQ2__toast { left: calc(50% + 30px); top: calc(47% + 30px); padding: 9px 12px 9px 9px; border-radius: 14px; display: flex; align-items: center; gap: 8px; opacity: 0; margin-top: 10px; transform: rotate(-3deg) scale(.94); }
.hp .hpQ2__toast.is-in { opacity: 1; margin-top: 0; transform: rotate(-3deg) scale(1); }
.hp .hpQ2__tok { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #29ccb2; color: #fff; }
.hp .hpQ2__tok svg { width: 13px; height: 13px; }
.hp .hpQ2__toast b { display: block; font: 700 10px/1.2 "Geologica", sans-serif; color: #11131f; white-space: nowrap; }
.hp .hpQ2__toast small { display: block; margin-top: 2px; font: 600 9.5px/1.2 Inter, sans-serif; color: #1d9783; white-space: nowrap; }
/* hover: the parts give the sheet room to turn */
.hp .capCard:hover .hpQ2__total { margin-left: -10px; margin-top: -8px; }
.hp .capCard:hover .hpQ2__meth { margin-left: -12px; margin-top: 8px; }

/* ---------- Enterprise: one status language, every state with its own icon ---------- */
.hp .hpEnt__st { width: 72px; gap: 4px; justify-content: center; }
.hp .hpEnt__si { width: 10px; height: 10px; flex: none; display: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp .hpEnt__si .dot { fill: currentColor; stroke: none; }
.hp .hpEnt__step:not(.is-run):not(.is-done) .si-w { display: block; }
.hp .hpEnt__step.is-run .si-r { display: block; animation: hpSpin 3.2s linear infinite; }
.hp .hpEnt__step.is-done .si-d { display: block; }
@keyframes hpSpin { to { transform: rotate(360deg); } }
.hp .hpEnt__step.is-run .hpEnt__st { background: #fff4d6; color: #a86b00; }
.hp .hpEnt__step.is-run { box-shadow: 0 14px 30px rgba(17, 24, 39, .12), 0 0 0 1.5px rgba(232, 168, 28, .55); }
.hp .hpEnt__bar { background: linear-gradient(90deg, #f2b632, #f7d27a); }
/* hover audit line reads like the subtitle (same weight and colour) */
.hp .hpEnt__txt small.hpEnt__log { color: #8a90a0; font-weight: 500; }

@media (max-width: 620px), (hover: none) {
  .hp .hpRs__dev { width: 158px; height: 270px; border-radius: 26px; box-shadow: 0 0 0 5px #11131f, 0 24px 48px rgba(17, 24, 39, .2); }
  .hp .hpRs__bar { opacity: 0; } .hp .hpRs__notch { opacity: 1; }
  .hp .hpRs__acct { left: 10px; top: 24px; width: 138px; height: 78px; }
  .hp .hpRs__acts { left: 10px; top: 110px; width: 138px; height: 54px; }
  .hp .hpRs__list { left: 10px; top: 174px; width: 138px; height: 88px; }
  .hp .hpRs__seg { display: none; }
  .hp .hpRs__dev { top: 50%; }
}
.hp .hpRs__nm em { display: block; margin-top: 2px; font: 700 8px/1.2 Inter, sans-serif; font-style: normal; color: #11131f; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp .hpRs__nm em.is-in { color: #1d9783; }
.hp .hpRs__row { flex-wrap: nowrap; }
.hp .capCard:hover .hpQ2__toast { margin-left: 22px; margin-top: 46px; }
.hp .hpQ2__card { margin-left: -92px; }
.hp .hpEnt__st { width: auto; min-width: 74px; padding: 0 8px; }
/* the legacy .capLottie svg { width:100% !important } rule must not stretch our small icons */
.hp .capLottie .hpEnt__si { width: 10px !important; height: 10px !important; }
.hp .capLottie .hpRs__act i svg { width: 12px !important; height: 12px !important; }
.hp .capLottie .hpRs__petal svg { width: 10px !important; height: 10px !important; }
.hp .capAi__marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 calc(50% - 96px), transparent calc(50% - 74px), transparent calc(50% + 74px), #000 calc(50% + 96px), #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 calc(50% - 96px), transparent calc(50% - 74px), transparent calc(50% + 74px), #000 calc(50% + 96px), #000 88%, transparent); }

/* =====================================================================
   Capabilities v6 polish
   ===================================================================== */
/* Digital Products: no tab switch; the phone keeps the same thin grey edge as the desktop window */
.hp .hpRs__seg { display: none; }
.hp .hpRs__dev { top: 50%; }
.hp .capCard:hover .hpRs__dev { box-shadow: 0 0 0 1px rgba(17, 24, 39, .1), 0 22px 44px rgba(17, 24, 39, .14); }
.hp .hpRs__notch { background: #e4e6ee; width: 34px; left: calc(50% - 17px); height: 6px; top: 8px; }
/* smaller, quieter action icons: outline glyph, no tinted tile */
.hp .hpRs__act { gap: 4px; }
.hp .hpRs__act i { width: 18px; height: 18px; border-radius: 6px; background: #f4f3fd; }
.hp .hpRs__act:nth-child(2) i { background: #f4f3fd; color: #4a3dcc; }
.hp .capLottie .hpRs__act i svg { width: 9px !important; height: 9px !important; }
.hp .hpRs__act small { font-size: 7px; color: #6b7183; }

@media (max-width: 620px), (hover: none) {
  .hp .hpRs__dev { box-shadow: 0 0 0 1px rgba(17, 24, 39, .1), 0 22px 44px rgba(17, 24, 39, .14); }
}

/* Payments: QR only (no merchant), bigger, floating parts balanced left and right */
.hp .hpQ2__mer { display: none; }
.hp .hpQ2__card { width: 196px; height: 226px; margin: -113px 0 0 -98px; top: 50%; }
.hp .hpQ2__face { padding: 16px; border-radius: 20px; }
.hp .hpQ2__code { width: 164px; height: 164px; margin: 0 auto 10px; padding: 8px; }
.hp .hpQ2__hint { font-size: 10px; }
.hp .hpQ2__rows div:first-child { display: none; }
.hp .hpQ2__total { left: calc(50% - 172px); top: calc(50% - 104px); padding: 11px 15px; border-radius: 16px; }
.hp .hpQ2__total small { font-size: 10px; }
.hp .hpQ2__total b { font-size: 18px; margin-top: 5px; }
.hp .hpQ2__meth { left: auto; right: calc(50% - 176px); top: calc(50% - 70px); height: 36px; padding: 0 14px 0 6px; font-size: 11.5px; transform: rotate(5deg); }
.hp .hpQ2__meth i { width: 26px; height: 26px; }
.hp .hpQ2__meth i svg { width: 13px; height: 13px; }
.hp .hpQ2__toast { left: auto; right: calc(50% - 4px); top: calc(50% + 62px); padding: 10px 14px 10px 10px; border-radius: 16px; transform: rotate(-3deg) scale(.94); }
.hp .hpQ2__toast { right: auto; left: calc(50% - 176px); }
.hp .hpQ2__tok { width: 28px; height: 28px; } .hp .hpQ2__tok svg { width: 15px; height: 15px; }
.hp .hpQ2__toast b { font-size: 11.5px; } .hp .hpQ2__toast small { font-size: 10.5px; }
.hp .capCard:hover .hpQ2__total { margin-left: -14px; margin-top: -10px; }
.hp .capCard:hover .hpQ2__meth { margin-left: 0; margin-right: -14px; margin-top: -10px; }
.hp .capCard:hover .hpQ2__toast { margin-left: -14px; margin-top: 12px; }
@media (max-width: 620px) {
  .hp .hpQ2__total { left: 8px; } .hp .hpQ2__meth { right: 8px; } .hp .hpQ2__toast { left: 8px; }
}

/* Enterprise: icon and label sit together in the tag */
.hp .hpEnt__st { min-width: 0; gap: 3px; padding: 0 8px 0 6px; justify-content: flex-start; }
@media (max-width: 620px) { .hp .hpQ2__card { scale: .8; } .hp .hpQ2__f { scale: .9; } }

/* =====================================================================
   Capabilities v7
   ===================================================================== */
/* Payments: a quieter total; the success toast and a burst of petals only on hover */
.hp .hpQ2__total { padding: 8px 12px; border-radius: 13px; top: calc(50% - 98px); }
.hp .hpQ2__total small { font-size: 9px; }
.hp .hpQ2__total b { font-size: 13.5px; margin-top: 3px; }
.hp .hpQ2__toast, .hp .hpQ2__toast.is-in { opacity: 0; margin-top: 14px; transform: rotate(-3deg) scale(.9); transition: opacity .45s ease .35s, transform .7s cubic-bezier(.3, 1.5, .5, 1) .35s, margin .7s cubic-bezier(.3, 1.5, .5, 1) .35s; }
.hp .capCard:hover .hpQ2__toast { opacity: 1; margin-top: 0; margin-left: -14px; transform: rotate(-3deg) scale(1); }
.hp .hpConf { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.hp .hpConf i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); background: var(--c); border-radius: 50% 50% 0 50%; opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
.hp .capCard:hover .hpConf i { animation: hpBurst 1.5s cubic-bezier(.15, .8, .3, 1) both; animation-delay: calc(.45s + var(--d)); }
@keyframes hpBurst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 26px)) rotate(var(--r)) scale(1); }
}
.hp .hpQ2__back .hpQ2__ok { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) .5s; transform: scale(.5); }
.hp .capCard:hover .hpQ2__back .hpQ2__ok { transform: scale(1); }

/* Digital Products: a backdrop with the brand petal; the device sits low and runs off the bottom edge */
.hp .hpRs__grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(74, 61, 204, .16) 1px, transparent 1.2px); background-size: 14px 14px; -webkit-mask: radial-gradient(70% 70% at 50% 60%, #000 30%, transparent 75%); mask: radial-gradient(70% 70% at 50% 60%, #000 30%, transparent 75%); }
.hp .hpRs__petalBg { position: absolute; right: -60px; top: -70px; width: 230px; height: 230px; border-radius: 50% 50% 0 50%; background: linear-gradient(140deg, rgba(74, 61, 204, .16), rgba(41, 204, 178, .14)); transform: rotate(0deg); animation: hpPetalDrift 14s ease-in-out infinite alternate; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1); }
.hp .hpRs__petalBg--2 { right: auto; left: -46px; top: auto; bottom: -40px; width: 120px; height: 120px; background: linear-gradient(140deg, rgba(41, 204, 178, .16), rgba(74, 61, 204, .1)); animation-delay: -6s; }
@keyframes hpPetalDrift { from { transform: rotate(-6deg) translate(0, 0); } to { transform: rotate(6deg) translate(-10px, 8px); } }
.hp .hpRs__dev { top: auto; bottom: -26px; transform: translateX(-50%); }
.hp .capCard:hover .hpRs__dev { bottom: -40px; }
.hp .hpRs__dev { transition: width .9s var(--e), height .9s var(--e), border-radius .9s var(--e), box-shadow .9s var(--e), bottom .9s var(--e); }
.hp .capCard:hover .hpRs__petalBg { transform: rotate(-24deg) translate(-16px, 10px) scale(1.08); animation-play-state: paused; }
@media (max-width: 620px), (hover: none) {
  .hp .hpRs__dev { top: auto; bottom: -40px; transform: translateX(-50%); }
}

/* =====================================================================
   Capabilities v8 (after the reference study): one big hero object per card,
   bleeding off the bottom; readable type; a quiet shared backdrop
   ===================================================================== */
.hp .hpWeb, .hp .hpScan { background: linear-gradient(180deg, #f5f3ff 0%, rgba(245, 243, 255, .6) 38%, rgba(255, 255, 255, 0) 78%); }

/* ---------- Digital Products ---------- */
.hp .hpW__waves { position: absolute; left: 0; top: 0; width: 100% !important; height: 62% !important; -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); }
.hp .hpW__waves path { fill: none; stroke: rgba(74, 61, 204, .12); stroke-width: 1; }
.hp .hpW__panel { position: absolute; left: 8%; right: 8%; top: 18%; height: 320px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, .06), 0 24px 50px rgba(74, 61, 204, .12); overflow: hidden; transition: transform .9s cubic-bezier(.65, 0, .25, 1); }
.hp .hpW__top { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid #f0f1f5; }
.hp .hpW__logo { width: 16px; height: 16px; color: #4a3dcc; display: grid; }
.hp .capLottie .hpW__logo svg { width: 16px !important; height: 16px !important; }
.hp .hpW__top b { flex: 1; font: 700 12px/1 "Geologica", sans-serif; color: #11131f; }
.hp .hpW__me { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #f2f0fe; color: #4a3dcc; font: 700 10px/1 "Geologica", sans-serif; }
.hp .hpW__body { padding: 14px 16px; }
.hp .hpW__hi { display: block; font: 500 11px/1.2 Inter, sans-serif; color: #11131f; }
.hp .hpW__lbl { display: block; margin-top: 12px; font: 500 10px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .hpW__bal { display: inline-block; margin-top: 4px; font: 700 24px/1 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; font-variant-numeric: tabular-nums; }
.hp .hpW__delta { display: inline-flex; margin-left: 8px; height: 20px; padding: 0 8px; align-items: center; border-radius: 99px; background: #e3f7f4; color: #1d9783; font: 600 10px/1 Inter, sans-serif; vertical-align: 4px; }
.hp .capLottie .hpW__chart { display: block; width: 100% !important; height: 74px !important; margin-top: 12px; overflow: visible; }
.hp .hpW__area { fill: url(#hpWg); }
.hp .hpW__line { fill: none; stroke: #4a3dcc; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hpDraw 8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes hpDraw { 0% { stroke-dashoffset: 1; } 35%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.hp .hpW__dot { fill: #fff; stroke: #4a3dcc; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; animation: hpDotIn 8s ease infinite; }
@keyframes hpDotIn { 0%, 32% { opacity: 0; } 38%, 88% { opacity: 1; } 100% { opacity: 0; } }
.hp .hpW__acts { display: flex; gap: 8px; margin-top: 14px; }
.hp .hpW__acts span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 99px; background: #f4f3fd; color: #4a3dcc; white-space: nowrap; }
.hp .hpW__acts i { display: grid; }
.hp .capLottie .hpW__acts i svg { width: 12px !important; height: 12px !important; }
.hp .hpW__acts em { font: 600 10.5px/1 Inter, sans-serif; font-style: normal; }
/* the mobile version of the same screen, waiting off to the right */
.hp .hpW__phone { position: absolute; right: 5%; bottom: -46px; width: 136px; height: 250px; box-sizing: border-box; padding: 24px 12px 12px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, .1), 0 26px 50px rgba(17, 24, 39, .18); opacity: 0; transform: translate(56px, 30px) rotate(6deg); transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .6s ease; z-index: 2; }
.hp .hpW__notch { position: absolute; left: 50%; top: 9px; width: 34px; height: 6px; margin-left: -17px; border-radius: 4px; background: #e4e6ee; }
.hp .hpW__phone .hpW__lbl { margin-top: 0; }
.hp .hpW__pbal { display: block; margin-top: 3px; font: 700 15px/1 "Geologica", sans-serif; letter-spacing: -.02em; color: #11131f; white-space: nowrap; }
.hp .capLottie .hpW__pchart { display: block; width: 100% !important; height: 40px !important; margin: 10px 0 8px; }
.hp .hpW__pline { fill: none; stroke: #4a3dcc; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hp .hpW__prow { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-top: 1px solid #f1f2f6; }
.hp .hpW__pav { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #4a3dcc; color: #fff; font: 700 9px/1 "Geologica", sans-serif; }
.hp .hpW__prow b { display: block; font: 600 10px/1.2 Inter, sans-serif; color: #11131f; white-space: nowrap; }
.hp .hpW__prow em { display: block; font: 600 10px/1.2 Inter, sans-serif; font-style: normal; color: #11131f; white-space: nowrap; }
.hp .hpW__prow em.is-in { color: #1d9783; }
.hp .hpW__pbtn { display: grid; place-items: center; height: 28px; margin-top: 8px; border-radius: 99px; background: #4a3dcc; color: #fff; font: 700 10.5px/1 "Geologica", sans-serif; }
.hp .capCard:hover .hpW__phone { opacity: 1; transform: none; }
.hp .capCard:hover .hpW__panel { transform: translateX(-16px) scale(.98); }

/* ---------- Payments & Commerce ---------- */
.hp .hpS__rings { position: absolute; left: 50%; top: 56%; width: 0; height: 0; }
.hp .hpS__rings i { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(74, 61, 204, .16); transform: translate(-50%, -50%) scale(.9); animation: hpRing 6s ease-in-out infinite; }
.hp .hpS__rings i:nth-child(1) { width: 260px; height: 260px; }
.hp .hpS__rings i:nth-child(2) { width: 350px; height: 350px; animation-delay: -1.5s; }
.hp .hpS__rings i:nth-child(3) { width: 440px; height: 440px; animation-delay: -3s; }
.hp .hpS__rings i:nth-child(4) { width: 530px; height: 530px; animation-delay: -4.5s; border-style: dashed; }
@keyframes hpRing { 0%, 100% { transform: translate(-50%, -50%) scale(.94); opacity: .5; } 50% { transform: translate(-50%, -50%) scale(1.02); opacity: 1; } }
.hp .hpS__sheet { position: absolute; left: 50%; top: 12%; width: 236px; height: 340px; margin-left: -118px; box-sizing: border-box; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, .06), 0 24px 50px rgba(74, 61, 204, .14); overflow: hidden; z-index: 2; transition: transform .8s cubic-bezier(.65, 0, .25, 1); }
.hp .hpS__head { display: flex; align-items: flex-start; justify-content: space-between; }
.hp .hpS__head small { display: block; font: 500 10.5px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .hpS__head b { display: block; margin-top: 3px; font: 700 22px/1 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; }
.hp .hpS__mark { width: 22px; height: 22px; color: #4a3dcc; display: grid; }
.hp .hpS__mark svg { width: 100%; height: 100%; }
.hp .hpS__qr { position: relative; width: 176px; height: 176px; margin: 16px auto 14px; padding: 12px; box-sizing: border-box; border-radius: 16px; box-shadow: inset 0 0 0 1px #eef0f4; overflow: hidden; }
.hp .hpS__qr > svg { width: 100%; height: 100%; display: block; }
.hp .hpS__scan { position: absolute; left: 8px; right: 8px; top: 0; height: 30px; background: linear-gradient(180deg, rgba(41, 204, 178, 0), rgba(41, 204, 178, .26)); border-bottom: 2px solid #29ccb2; border-radius: 0 0 4px 4px; animation: hpScan2 5s ease-in-out infinite; }
@keyframes hpScan2 { 0%, 8% { transform: translateY(-34px); opacity: 0; } 14% { opacity: 1; } 50% { transform: translateY(150px); opacity: 1; } 58%, 100% { transform: translateY(150px); opacity: 0; } }
.hp .hpS__foot { display: flex; align-items: center; justify-content: center; gap: 7px; font: 600 10.5px/1 Inter, sans-serif; color: #555a6b; }
.hp .hpS__foot i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #f2f0fe; color: #4a3dcc; }
.hp .hpS__foot i svg { width: 11px; height: 11px; }
.hp .hpS__ok { position: absolute; inset: 0; padding-top: 58px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; opacity: 0; transition: opacity .5s ease .1s; }
.hp .hpS__check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #29ccb2; color: #fff; box-shadow: 0 0 0 10px rgba(41, 204, 178, .14); transform: scale(.4); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) .2s; }
.hp .hpS__check svg { width: 30px; height: 30px; }
.hp .hpS__ok b { margin-top: 20px; font: 700 14px/1.2 "Geologica", sans-serif; color: #11131f; }
.hp .hpS__ok strong { margin-top: 6px; font: 700 24px/1 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; }
.hp .hpS__ok small { margin-top: 10px; font: 500 10px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .capCard:hover .hpS__ok { opacity: 1; }
.hp .capCard:hover .hpS__check { transform: scale(1); }
.hp .capCard:hover .hpS__sheet { transform: translateY(-6px); }
.hp .hpScan .hpConf { top: 44%; }

@media (max-width: 620px), (hover: none) {
  .hp .hpW__phone { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hp .hpW__line { stroke-dashoffset: 0; } .hp .hpW__dot { opacity: 1; } }
/* v8 polish: white like the other cards; the hero fades into the card body instead of a hard cut */
.hp .hpWeb, .hp .hpScan { background: none; -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, #000 76%, transparent 100%); }
.hp .hpW__waves path { stroke: rgba(74, 61, 204, .09); }
.hp .hpS__rings i { border-color: rgba(74, 61, 204, .12); }
/* the phone uses the same corner radius as the web panel */
.hp .hpW__phone { border-radius: 14px; }

/* =====================================================================
   Industries v2: calmer, sequenced motion; hover tells one more beat
   ===================================================================== */
.hp .hpInd { --spring: cubic-bezier(.3, 1.45, .5, 1); --ease: cubic-bezier(.65, 0, .35, 1); }

/* Financial: a coin settles with a soft bounce; hover stacks new coins in turn and draws a growth line */
.hp .hpFin2 .drop { animation: hpDrop2 4.2s var(--ease) infinite; }
@keyframes hpDrop2 {
  0% { transform: translateY(-48px); opacity: 0; }
  14% { opacity: 1; }
  42% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  58%, 80% { transform: translateY(0); opacity: 1; }
  96%, 100% { transform: translateY(0); opacity: 0; }
}
.hp .hpFin2 .xc { opacity: 0; transform: translateY(-34px); transition: transform .7s var(--spring), opacity .3s ease; transition-delay: calc(var(--i) * .09s); }
.hp .indCard:hover .hpFin2 .xc { opacity: 1; transform: none; }
.hp .indCard:hover .hpFin2 .drop { opacity: 0; animation-play-state: paused; }
.hp .hpFin2 .trend { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) .55s; }
.hp .hpFin2 .trendHead { opacity: 0; transition: opacity .3s ease 1.45s; }
.hp .indCard:hover .hpFin2 .trend { stroke-dashoffset: 0; }
.hp .indCard:hover .hpFin2 .trendHead { opacity: 1; }
.hp .indCard:hover .hpFin2 .spark { transition-delay: 1.3s; }

/* Insurance: slower writing; hover lands the stamp with weight */
.hp .hpIns .ln { animation-duration: 6s; animation-timing-function: var(--ease); }
.hp .hpIns .stamp { transform: scale(1.7) rotate(-20deg); transition: transform .6s var(--spring), opacity .25s ease; }
.hp .indCard:hover .hpIns .stamp { transform: scale(1) rotate(-14deg); }
.hp .hpIns .doc { transition: transform .8s var(--ease); }
.hp .indCard:hover .hpIns .doc { transform: rotate(-3deg) translateY(-3px); }

/* Healthcare: hover fills the heart softly (no speed change) */
.hp .hpHea .heart { transition: fill .6s ease; fill: rgba(41, 204, 178, 0); }
.hp .indCard:hover .hpHea .heart { fill: rgba(41, 204, 178, .16); }

/* Retail: hover opens the door and parcels come out one after another */
.hp .hpRet2 .door { transform-origin: 0 50%; transition: transform .6s var(--ease); }
.hp .indCard:hover .hpRet2 .door { transform: scaleX(.18); }
.hp .hpRet2 .box { opacity: 0; transition: transform .75s var(--spring), opacity .3s ease; }
.hp .hpRet2 .box.b1 { transform: translate(-26px, 0) scale(.5); }
.hp .hpRet2 .box.b2 { transform: translate(-46px, 0) scale(.5); }
.hp .hpRet2 .box.b3 { transform: translate(-62px, 0) scale(.5); }
.hp .indCard:hover .hpRet2 .box { opacity: 1; transform: none; }
.hp .indCard:hover .hpRet2 .box.b1 { transition-delay: .3s; }
.hp .indCard:hover .hpRet2 .box.b2 { transition-delay: .45s; }
.hp .indCard:hover .hpRet2 .box.b3 { transition-delay: .6s; }

/* Enterprise: the crane sets the next floor on the tower; windows light in a slow wave from the ground up */
.hp .hpEnt3 .win { fill: rgba(255, 255, 255, .16); animation: hpWave 6.5s ease-in-out infinite; animation-delay: calc(var(--f) * .32s); transition: fill .45s ease; }
@keyframes hpWave { 0%, 100% { fill: rgba(255, 255, 255, .16); } 14%, 26% { fill: rgba(41, 204, 178, .95); } 40% { fill: rgba(255, 255, 255, .16); } }
.hp .indCard:hover .hpEnt3 .win { animation: none; fill: #29ccb2; transition-delay: calc(var(--f) * .12s); }
.hp .hpEnt3 .beacon { animation: hpBeacon 2.6s ease-in-out infinite; }
@keyframes hpBeacon { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hp .indCard:hover .hpEnt3 .beacon { animation: none; opacity: 1; filter: drop-shadow(0 0 6px #29ccb2); }
.hp .hpEnt3 .trolley { animation: hpTrolley 8s var(--ease) infinite; }
.hp .hpEnt3 .cable { transform-origin: 50% 0; animation: hpCable 8s var(--ease) infinite; }
.hp .hpEnt3 .load { animation: hpLoad 8s var(--ease) infinite; }
@keyframes hpTrolley { 0% { transform: translateX(-60px); opacity: 0; } 8% { opacity: 1; } 36%, 84% { transform: translateX(0); opacity: 1; } 94%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes hpCable { 0%, 38% { transform: scaleY(1); } 58%, 84% { transform: scaleY(2.38); } 100% { transform: scaleY(2.38); } }
@keyframes hpLoad { 0%, 38% { transform: translateY(0); } 58%, 84% { transform: translateY(18px); } 100% { transform: translateY(18px); } }

/* More: blocks spring out and get connected */
.hp .hpMore2 .lnk { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease) .2s; }
.hp .indCard:hover .hpMore2 .lnk { stroke-dashoffset: 0; }
.hp .hpMore2 .blk { transition: transform .8s var(--spring), opacity .3s ease; transition-delay: calc(var(--i) * .07s); }
.hp .hpMore2 .arr { animation-duration: 3.4s; }
.hp .indCard:hover .hpMore2 .arr { opacity: .35; animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hp .hpEnt3 .trolley, .hp .hpEnt3 .cable, .hp .hpEnt3 .load, .hp .hpEnt3 .win, .hp .hpEnt3 .beacon { animation: none !important; }
}
/* reveal lands mid-screen, then scrolls up naturally (was pulled too high and felt abrupt) */
.hp .caps.hp-pull { margin-top: calc(-54vh - 140px); }

/* Financial v3: solid coins; the stack side is filled so nothing shows through; hover wipes new coins in from below */
.hp .hpFin3 .f2 { fill: #4a3dcc; }
.hp .hpFin3 .grow2 { clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--i) * .12s); }
.hp .indCard:hover .hpFin3 .grow2 { clip-path: inset(-10px 0 0 0); }
.hp .hpFin3 .spin { transform-origin: 50% 50%; animation: hpSpinCoin 4.8s cubic-bezier(.65, 0, .35, 1) infinite; transition: translate .7s cubic-bezier(.3, 1.45, .5, 1); }
@keyframes hpSpinCoin { 0%, 30% { transform: scaleX(1); } 45% { transform: scaleX(.12); } 60%, 100% { transform: scaleX(1); } }
.hp .indCard:hover .hpFin3 .spin { translate: 0 -20px; }
.hp .hpFin3 .spark { opacity: 1; transform: scale(0); transform-origin: center; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .55s; }
.hp .hpFin3 .spark.s2 { transition-delay: .7s; }
.hp .indCard:hover .hpFin3 .spark { transform: scale(1); }
.hp .hpFin3 .rp { fill: #29ccb2; font: 800 9.5px/1 "Geologica", sans-serif; letter-spacing: -.02em; }
.hp.hp-veilctl .veil { opacity: var(--hpveil, 0) !important; }

/* Enterprise hover v2: the tower grows two floors, the beacon rises and sends a signal; the crane steps away */
.hp .hpEnt3 .rise { clip-path: inset(100% 0 0 0); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1) .1s; }
.hp .indCard:hover .hpEnt3 .rise { clip-path: inset(-4px 0 0 0); }
.hp .hpEnt3 .top { transition: transform .9s cubic-bezier(.65, 0, .35, 1) .1s; }
.hp .indCard:hover .hpEnt3 .top { transform: translateY(-36px); }
.hp .hpEnt3 .trolley { transition: opacity .35s ease; }
.hp .indCard:hover .hpEnt3 .trolley { opacity: 0 !important; }
.hp .hpEnt3 .ping { fill: none; stroke: #29ccb2; stroke-width: 1.4; opacity: 0; transform-origin: center; transform-box: fill-box; }
.hp .indCard:hover .hpEnt3 .ping { animation: hpPing2 2s ease-out 1.05s infinite; }
.hp .indCard:hover .hpEnt3 .ping.p2 { animation-delay: 2.05s; }
@keyframes hpPing2 { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
.hp .hpEnt3 path[d^="M40 150V14"] { transition: opacity .5s ease; }
.hp .indCard:hover .hpEnt3 path[d^="M40 150V14"] { opacity: .18; }

/* Enterprise v3: no crane (it collided with the hover); a lift rides the side shaft instead */
.hp .hpEnt3 path[d^="M40 150V14"], .hp .hpEnt3 .trolley { display: none; }
.hp .hpEnt3 .car { animation: hpLift 7s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes hpLift { 0%, 12% { transform: translateY(0); } 42%, 58% { transform: translateY(-72px); } 88%, 100% { transform: translateY(0); } }

/* scrolling back up: Capabilities leaves at once (fast, no stagger) while the screen is still white */
.hp .caps.hp-pull.is-veiled .caps__header .pill, .hp .caps.hp-pull.is-veiled .caps__title, .hp .caps.hp-pull.is-veiled .caps__grid, .hp .caps.hp-pull.is-veiled .caps__grid > .capCard { transition: opacity .18s ease, transform .18s ease, filter .18s ease !important; transition-delay: 0s !important; }

/* Platform Integration hover: link lines sit behind the logo discs */
.hp .hpOrb .hpOrb__links { z-index: 0; }
.hp .hpOrb .capOrbit__spin { z-index: 1; }
.hp .hpOrb .capOrbit__core { z-index: 2; }

/* =====================================================================
   About options (Home). Frame lines run edge to edge; "+" marks where they cross.
   Type follows the new scale: statement 44/48, body 18/1.65, label 13 caps.
   ===================================================================== */
.hp .about__intro { --fx: var(--pad-x); --ft: 14vh; --fb: 12vh; --line: rgba(17, 19, 31, .09); }
.hp .abx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hp .abx__h, .hp .abx__v { position: absolute; background: var(--line); }
.hp .abx__h { left: 0; right: 0; height: 1px; }
.hp .abx__h--t { top: var(--ft); } .hp .abx__h--b { bottom: var(--fb); }
.hp .abx__v { top: 0; bottom: 0; width: 1px; }
.hp .abx__v--l { left: var(--fx); } .hp .abx__v--r { right: var(--fx); }
.hp .abx__c { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; }
.hp .abx__c::before, .hp .abx__c::after { content: ""; position: absolute; background: #4a3dcc; }
.hp .abx__c::before { left: 6px; top: 0; width: 1px; height: 13px; }
.hp .abx__c::after { top: 6px; left: 0; height: 1px; width: 13px; }
.hp .abx__c--tl { left: var(--fx); top: var(--ft); } .hp .abx__c--tr { left: calc(100% - var(--fx)); top: var(--ft); }
.hp .abx__c--bl { left: var(--fx); top: calc(100% - var(--fb)); } .hp .abx__c--br { left: calc(100% - var(--fx)); top: calc(100% - var(--fb)); }
/* frame draws in when the section arrives */
.hp .abx__h { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.65, 0, .25, 1); }
.hp .abx__v { transform: scaleY(0); transition: transform 1.2s cubic-bezier(.65, 0, .25, 1) .15s; }
.hp .abx__c { opacity: 0; transform: rotate(-90deg); transition: opacity .5s ease 1s, transform .8s cubic-bezier(.3, 1.4, .5, 1) 1s; }
.hp .about.is-framed .abx__h, .hp .about.is-framed .abx__v { transform: none; }
.hp .about.is-framed .abx__c { opacity: 1; transform: none; }

/* shared type for all three options */
.hp[data-about] .about__statement { font-size: clamp(30px, 3.05vw, 44px) !important; line-height: 1.16 !important; letter-spacing: -.02em !important; font-weight: 500; }
.hp[data-about] .about__paragraph { font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.65 !important; opacity: .9; }
.hp[data-about] .about__label-text { font-size: 13px; letter-spacing: .14em; font-weight: 700; }
.hp[data-about] .about__label img { width: 12px; height: 12px; }

/* ---------- A · framed, centred ---------- */
.hp[data-about="a"] .about__intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; padding: var(--ft) calc(var(--fx) + 6vw) var(--fb); }
.hp[data-about="a"] .about__label { position: absolute; z-index: 2; top: var(--ft); left: 50%; transform: translate(-50%, -50%); padding: 9px 16px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.hp[data-about="a"] .about__body { align-items: center; max-width: 980px; gap: 28px; }
.hp[data-about="a"] .about__paragraph { max-width: 640px; }
.hp[data-about="a"] .about__cta { align-self: center; margin-top: 8px; }

/* ---------- B · framed, editorial ---------- */
.hp[data-about="b"] .about__intro { grid-template-columns: repeat(12, 1fr); align-content: center; padding: var(--ft) calc(var(--fx) + 40px) var(--fb); }
.hp[data-about="b"] .about__label { grid-column: 1 / span 3; align-self: start; margin-top: 10px; }
.hp[data-about="b"] .about__body { grid-column: 4 / span 9; gap: 28px; }
.hp[data-about="b"] .about__paragraph { max-width: 620px; }
.hp .abx__num { position: absolute; left: calc(var(--fx) + 40px); bottom: calc(var(--fb) + 32px); font: 300 clamp(72px, 9vw, 140px)/.8 "Geologica", sans-serif; letter-spacing: -.05em; color: rgba(74, 61, 204, .1); }
.hp[data-about="b"] .abx__v--l { left: calc(var(--fx) + 25%); }
.hp[data-about="b"] .abx__c--tl, .hp[data-about="b"] .abx__c--bl { left: calc(var(--fx) + 25%); }

/* ---------- C · blueprint: A plus a faint grid with a few lit cells ---------- */
.hp[data-about="c"] .about__intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; padding: var(--ft) calc(var(--fx) + 6vw) var(--fb); }
.hp[data-about="c"] .about__label { position: absolute; z-index: 2; top: var(--ft); left: 50%; transform: translate(-50%, -50%); padding: 9px 16px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.hp[data-about="c"] .about__body { align-items: center; max-width: 980px; gap: 28px; }
.hp[data-about="c"] .about__paragraph { max-width: 640px; }
.hp[data-about="c"] .about__cta { align-self: center; margin-top: 8px; }
.hp .abx__grid { position: absolute; left: var(--fx); right: var(--fx); top: var(--ft); bottom: var(--fb); --g: calc((100vw - 2 * var(--fx)) / 12);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: var(--g) var(--g);
  -webkit-mask: radial-gradient(70% 70% at 50% 50%, transparent 30%, #000 80%); mask: radial-gradient(70% 70% at 50% 50%, transparent 30%, #000 80%); opacity: .8; }
.hp .abx__cell { position: absolute; left: calc(var(--fx) + var(--x) * (100vw - 2 * var(--fx)) / 12); top: calc(var(--ft) + var(--y) * (100vw - 2 * var(--fx)) / 12); width: calc((100vw - 2 * var(--fx)) / 12); height: calc((100vw - 2 * var(--fx)) / 12); opacity: 0; animation: hpCell 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s); }
.hp .abx__cell--p { background: rgba(74, 61, 204, .08); } .hp .abx__cell--t { background: rgba(41, 204, 178, .1); }
@keyframes hpCell { 0%, 100% { opacity: 0; } 20%, 40% { opacity: 1; } 60% { opacity: 0; } }

@media (max-width: 900px) {
  .hp .about__intro { --ft: 64px; --fb: 48px; }
  .hp[data-about="a"] .about__intro, .hp[data-about="c"] .about__intro { padding: 96px var(--pad-x) 72px; }
  .hp[data-about="b"] .about__intro { padding: 96px var(--pad-x) 72px; }
  .hp[data-about="b"] .about__label, .hp[data-about="b"] .about__body { grid-column: 1 / -1; }
  .hp .abx__v, .hp .abx__c, .hp .abx__num { display: none; }
}
/* C: cells live inside the grid box and use its own width (no scrollbar drift) */
.hp .abx__grid { container-type: inline-size; --g: calc(100cqw / 12); }
.hp .abx__grid .abx__cell { left: calc(var(--x) * var(--g)); top: calc(var(--y) * var(--g)); width: var(--g); height: var(--g); }

/* =====================================================================
   About v2 (option d, default). Frame + column lines on white; left-aligned;
   a big heading whose last phrase is grey and sweeps to ink on hover; an inline
   brand chip in the sentence; a petal pinwheel mark beside short paragraphs.
   ===================================================================== */
.hp[data-about="d"] .about__intro { --ft: 11vh; --fb: 9vh; --ix: calc(var(--fx) + clamp(24px, 3.4vw, 56px)); display: flex; flex-direction: column; justify-content: center; padding: var(--ft) var(--ix) var(--fb); gap: 0; }
.hp[data-about="d"] .about__label, .hp[data-about="d"] .about__body, .hp[data-about="d"] .about__grid { display: none !important; }
.hp .abx__cols { position: absolute; left: var(--fx); right: var(--fx); top: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.hp .abx__cols i { border-right: 1px solid rgba(17, 19, 31, .05); transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.65, 0, .25, 1) .25s; }
.hp .abx__cols i:nth-child(2) { transition-delay: .35s; } .hp .abx__cols i:nth-child(3) { transition-delay: .45s; }
.hp .about.is-framed .abx__cols i { transform: none; }

.hp .abv { position: relative; z-index: 1; width: 100%; }
.hp .abv__label { position: absolute; top: calc(-1 * (var(--ft) - (var(--ft) - 0px))); }
.hp .abv__label { position: fixed; } /* replaced below; kept simple for the sticky panel */
.hp[data-about="d"] .abv__label { position: absolute; left: 0; top: 0; transform: translateY(calc(-1 * var(--abv-top, 0px))); }
.hp .abv__label { margin: 0 0 clamp(28px, 4vh, 44px); position: static !important; transform: none !important; display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 "Geologica", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6b7183; }
.hp .abv__dot { width: 10px; height: 10px; border-radius: 50% 50% 0 50%; background: #4a3dcc; }

.hp .abv__h { margin: 0; max-width: 1120px; font: 500 clamp(34px, 4.3vw, 66px)/1.06 "Geologica", sans-serif; letter-spacing: -.035em; color: #11131f; text-wrap: balance; }
.hp .abv__gr { background: linear-gradient(90deg, #11131f 0 50%, #a3a8b5 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1s cubic-bezier(.65, 0, .35, 1); }
.hp .abv__h:hover .abv__gr { background-position: 0 0; }
.hp .abv__chip { position: relative; display: inline-block; width: 1.75em; height: .74em; margin: 0 .04em; vertical-align: -.02em; border-radius: .37em; overflow: hidden; background: linear-gradient(110deg, #4a3dcc, #7b70e0 35%, #29ccb2 70%, #4a3dcc); background-size: 300% 100%; animation: hpChip 9s ease-in-out infinite alternate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.hp .abv__chip i { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 10px, rgba(255, 255, 255, .14) 10px 11px); }
.hp .abv__chip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: hpSheen 4.5s ease-in-out infinite; }
@keyframes hpChip { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes hpSheen { 0%, 55% { left: -50%; } 100% { left: 120%; } }

.hp .abv__low { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 6vh, 72px); align-items: start; }
.hp .abv__mark { display: grid; place-items: center; padding-top: 6px; }
.hp .abv__mark svg { width: clamp(110px, 10vw, 156px); height: auto; overflow: visible; }
.hp .abv__pin { fill: #ece9fb; transform-box: view-box; transform-origin: 20px 20px; animation: hpPin 48s linear infinite; }
.hp .abv__pin > g { transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes hpPin { to { transform: rotate(360deg); } }
.hp .abv__txt { max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.hp .abv__p { margin: 0; font: 400 clamp(16px, 1.2vw, 18px)/1.55 Inter, sans-serif; color: #11131f; }
.hp .abv__p--mute { color: #9aa0ae; }
.hp .abv__cta { align-self: flex-start; margin-top: 10px; }

@media (max-width: 900px) {
  .hp[data-about="d"] .about__intro { padding: 96px var(--pad-x) 72px; }
  .hp .abx__cols { display: none; }
  .hp .abv__low { grid-template-columns: 1fr; }
  .hp .abv__mark { justify-content: start; }
}
@media (prefers-reduced-motion: reduce) { .hp .abv__chip, .hp .abv__chip::after, .hp .abv__pin { animation: none; } }
/* About v2: the mark sits in the middle of the text block beside it */
.hp .abv__low { align-items: center; }
.hp .abv__mark { padding-top: 0; align-self: stretch; }

/* column lines carried from About onto the other white sections of Home (same grid: frame at the page
 padding, three inner quarter lines) */
.hp .caps, .hp .tst, .hp .tstBox, .hp .faq { position: relative; isolation: isolate; }
.hp .caps::before, .hp .tst::before, .hp .tstBox::before, .hp .faq::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 rgba(17, 19, 31, .07); border-right: 1px solid rgba(17, 19, 31, .07);
  background-image: linear-gradient(90deg, transparent calc(25% - .5px), rgba(17, 19, 31, .05) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px) calc(50% - .5px), rgba(17, 19, 31, .05) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(75% - .5px), rgba(17, 19, 31, .05) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)); }
.hp .caps.is-veiled::before { opacity: 0; }
@media (max-width: 900px) { .hp .caps::before, .hp .tst::before, .hp .tstBox::before, .hp .faq::before { background-image: none; } }

/* About v2.1: no pinwheel; story on the left, the closing line as a quote on the right */
.hp .abv__low { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(32px, 5vw, 96px); margin-top: clamp(44px, 6.5vh, 80px); }
.hp .abv__col { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.hp .abv__quote { margin: 0; font: 500 clamp(22px, 1.85vw, 28px)/1.3 "Geologica", sans-serif; letter-spacing: -.015em; color: #11131f; text-wrap: balance; }
@media (max-width: 900px) { .hp .abv__low { grid-template-columns: 1fr; } }

/* Chosen by Leading Enterprises: the same left and right frame lines, drawn as backgrounds
   so the section keeps its positioning (the logos fly in from the hero) */
.hp .chosen { background-image: linear-gradient(rgba(17, 19, 31, .07), rgba(17, 19, 31, .07)), linear-gradient(rgba(17, 19, 31, .07), rgba(17, 19, 31, .07)); background-size: 1px 100%, 1px 100%; background-position: var(--pad-x) 0, calc(100% - var(--pad-x)) 0; background-repeat: no-repeat; }
/* About v2.2: same layout as before, without the pinwheel (left column left open) */
.hp .abv__low { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 6vh, 72px); }
.hp .abv__txt .abv__cta { margin-top: 10px; }
@media (max-width: 900px) { .hp .abv__spacer { display: none; } }

/* chip v2: gentle waves (two layers drifting at different speeds); no sheen, no stripes */
.hp .abv__chip.abv__chip--wave { animation: none; background: linear-gradient(180deg, #f2f0fe, #e6f8f5); box-shadow: inset 0 0 0 1px rgba(74, 61, 204, .12); }
.hp .abv__chip--wave::after { content: none; }
.hp .abv__chip--wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp .abv__chip--wave .w1 { fill: #4a3dcc; opacity: .85; animation: hpWaveX 7s linear infinite; }
.hp .abv__chip--wave .w2 { fill: #29ccb2; opacity: .9; animation: hpWaveX 4.6s linear infinite; }
@keyframes hpWaveX { to { transform: translateX(-200px); } }
@media (prefers-reduced-motion: reduce) { .hp .abv__chip--wave path { animation: none; } }

/* About v2: the hover checker cells come back (behind the copy, above the lines) */
.hp[data-about="d"] .about__intro .about__grid { display: grid !important; z-index: 0; }

/* About v2 hover cells: on the frame grid (12 per frame width), replacing the old checkerboard */
.hp[data-about="d"] .about__intro .about__grid { display: none !important; }
.hp .abx__hov { position: absolute; inset: 0; }
.hp .abx__hc { position: absolute; background: rgba(74, 61, 204, .07); box-shadow: inset 0 0 0 1px rgba(74, 61, 204, .12); opacity: 0; transition: opacity .9s ease; }
.hp .abx__hc.is-t { background: rgba(41, 204, 178, .09); box-shadow: inset 0 0 0 1px rgba(41, 204, 178, .18); }
.hp .abx__hc.is-on { opacity: 1; transition-duration: .18s; }

/* chip v3 "sea": three layered gradient swells with a thin white crest, drifting at their own pace;
   hovering the heading raises the tide in steps and brightens the crests (no speed change) */
.hp .abv__chip.abv__chip--sea { animation: none; background: #ece9ff; box-shadow: inset 0 0 0 1px rgba(74, 61, 204, .14), 0 4px 14px -6px rgba(74, 61, 204, .35); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), box-shadow .5s; }
.hp .abv__chip--sea::after { content: none; }
.hp .abv__chip--sea svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hp .abv__chip--sea .crest { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .5s; }
.hp .abv__chip--sea .wx { animation: hpSea 12s linear infinite; }
.hp .abv__chip--sea .t2 .wx { animation-duration: 8.5s; animation-direction: reverse; }
.hp .abv__chip--sea .t3 .wx { animation-duration: 6.5s; }
@keyframes hpSea { to { transform: translateX(-200px); } }
.hp .abv__chip--sea .tide { transition: transform .9s cubic-bezier(.3, 1.3, .5, 1); }
.hp .abv__h:hover .abv__chip--sea .t1 { transform: translateY(-6px); transition-delay: .1s; }
.hp .abv__h:hover .abv__chip--sea .t2 { transform: translateY(-9px); transition-delay: .05s; }
.hp .abv__h:hover .abv__chip--sea .t3 { transform: translateY(-12px); }
.hp .abv__h:hover .abv__chip--sea .crest { stroke: rgba(255, 255, 255, .95); }
.hp .abv__h:hover .abv__chip--sea { transform: translateY(-2px) rotate(-3deg); box-shadow: inset 0 0 0 1px rgba(74, 61, 204, .2), 0 10px 22px -8px rgba(74, 61, 204, .5); }
@media (prefers-reduced-motion: reduce) { .hp .abv__chip--sea .wx { animation: none; } }

/* live water chip: the canvas covers the static SVG (kept as the reduced-motion fallback) */
.hp .abv__chip--sea .abv__water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hp .abv__chip--sea.is-live svg { visibility: hidden; }
.hp .abv__chip--sea.is-live { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 -6px 12px -6px rgba(26, 22, 75, .35), 0 6px 18px -8px rgba(74, 61, 204, .45); }
.hp .abv__chip--sea.is-live::before { content: ""; position: absolute; left: 12%; right: 30%; top: 10%; height: 22%; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); z-index: 2; pointer-events: none; }
.hp .abv__h:hover .abv__chip--sea.is-live { transform: none; }
/* liquid glass: the canvas draws the glass itself, so the CSS sheen/inner shadow step back */
.hp .abv__chip--sea.is-live { background: transparent; box-shadow: 0 10px 24px -10px rgba(74, 61, 204, .5), 0 2px 6px -2px rgba(26, 22, 75, .2); }
.hp .abv__chip--sea.is-live::before { content: none; }
/* capsule moves with the pointer (transform set by JS); a larger invisible hit area around it */
.hp .abv__chip--sea.is-live { transition: box-shadow .4s; will-change: transform; }
.hp .abv__chip--sea.is-live::after { content: ""; position: absolute; inset: -26px -34px; }
.hp .abv__h:hover .abv__chip--sea.is-live { transform: none; }

/* liquid glass chip: no hover motion at all; a soft shadow so the glass sits on the page */
.hp .abv__chip--sea.is-glass, .hp .abv__h:hover .abv__chip--sea.is-glass { transform: none !important; background: transparent; box-shadow: 0 8px 22px -10px rgba(74, 61, 204, .45), 0 1px 3px rgba(26, 22, 75, .12); }
.hp .abv__chip--sea.is-glass::after { content: none; }

/* =====================================================================
   Home polish pass
   ===================================================================== */
/* 1) one heading voice: emphasis is grey and sweeps to ink on hover (as in About) */
.hp .caps__title em.is-brand, .hp .caps__title em.is-teal, .hp .tst__title em.is-brand, .hp .tst__title em.is-teal, .hp .hpg {
  font-style: normal; font-weight: inherit; color: transparent !important;
  background: linear-gradient(90deg, #11131f 0 50%, #a3a8b5 50% 100%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; transition: background-position 1s cubic-bezier(.65, 0, .35, 1);
}
.hp .caps__title:hover em, .hp .tst__title:hover em, .hp .ind__title:hover .hpg { background-position: 0 0; }
.hp .faq__title .hpg { display: inline; }
.hp .faq__panel:hover .faq__title .hpg { background-position: 0 0; }

/* 2) one eyebrow style: petal dot + spaced caps, no pill */
.hp .caps .pill, .hp .ind .ind__header .pill, .hp .tst .pill, .hp .faq .pill {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
  display: inline-flex; align-items: center; gap: 8px; color: #6b7183 !important;
  font: 700 12.5px/1 "Geologica", sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase;
}
.hp .caps .pill::before, .hp .ind .ind__header .pill::before, .hp .tst .pill::before, .hp .faq .pill::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50% 50% 0 50%; background: #4a3dcc; }

/* 4) partners: tiles lift and the logo comes up to full white; the last tile invites */
.hp .partnerItem { transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .35s, box-shadow .45s; }
.hp .partnerItem:hover { transform: translateY(-4px); background-color: rgba(255, 255, 255, .18); box-shadow: 0 18px 36px -18px rgba(10, 6, 60, .55); }
.hp .partnerItem__logo { transition: opacity .35s, filter .35s; opacity: .85; }
.hp .partnerItem:hover .partnerItem__logo { opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .35)); }
.hp .partnerItem--cta { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; color: #fff; font: 600 18px/1.2 "Geologica", sans-serif; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.hp .partnerItem--cta svg { width: 20px; height: 20px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.hp .partnerItem--cta:hover { background: #fff; color: #4a3dcc; }
.hp .partnerItem--cta:hover svg { transform: rotate(45deg); }

/* 6) testimonial: brand panel instead of the stock photo (glass card stays) */

/* 7) FAQ: a framed light panel instead of the photo; thin outline toggles */

/* 8) hero: sentence case, and the photo breathes very slowly */
/* the copy itself is written in sentence case (EN + ID), so no text-transform trick: ::first-letter is unreliable in Safari/Firefox */
.hp .hero__bg img { animation: hpHeroBreath 28s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes hpHeroBreath { from { scale: 1.02; } to { scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .hp .hero__bg img { animation: none; } }

/* polish fixes */
.hp .partnerItem--cta { opacity: 1 !important; transform: none; }
.hp .partnerItem--cta, .hp .partnerItem--cta .partnerItem__ctaTxt { font: 600 18px/1.2 "Geologica", sans-serif !important; letter-spacing: -.01em; }

/* partner CTA v2: an empty slot (dashed), same lift as the logo tiles; plus turns into an arrow */
.hp .partnerItem--cta, .hp .partnerItem--cta:hover { color: #fff !important; }
.hp .partnerItem--cta { gap: 12px; background: transparent !important; box-shadow: none !important; outline: 1.5px dashed rgba(255, 255, 255, .45); outline-offset: -1.5px; }
.hp .partnerItem--cta:hover { background: rgba(255, 255, 255, .14) !important; outline: 1.5px solid rgba(255, 255, 255, .7); transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(10, 6, 60, .55) !important; }
.hp .partnerItem__ctaIc { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); display: grid; place-items: center; transition: background-color .4s, box-shadow .4s, color .4s; }
.hp .partnerItem__ctaIc svg { position: absolute; width: 16px; height: 16px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.hp .partnerItem__ctaIc .ar { opacity: 0; transform: rotate(-90deg) scale(.6); }
.hp .partnerItem--cta:hover .partnerItem__ctaIc { background: #fff; color: #4a3dcc; box-shadow: none; }
.hp .partnerItem--cta:hover .partnerItem__ctaIc .pl { opacity: 0; transform: rotate(90deg) scale(.6); }
.hp .partnerItem--cta:hover .partnerItem__ctaIc .ar { opacity: 1; transform: none; }
.hp .partnerItem--cta > svg { display: none; }

/* retail awning v2: board + striped canopy with a scalloped edge */
.hp .hpRet2 .awBoard { fill: #4a3dcc; }
.hp .hpRet2 .awS { fill: rgba(255, 255, 255, .26); stroke: none; }
.hp .hpRet2 .awS--b { fill: #4a3dcc; }
.hp .hpRet2 .awLine { fill: none; }
.hp .hpRet2 rect.w:not(.awBoard) { fill: none; }

/* =====================================================================
   Testimonials, dark: night tone, frame lines kept, one centred column,
   content left-aligned inside it. The carousel mechanics are untouched
   (one card = 100% of the viewport).
   ===================================================================== */

/* one column, centred on the page, reading from the left */

/* the stage loses its panel; it is just the same centred column */

/* card: quote first, then a hairline, then person (left) and metric (right) */

/* arrows: thin outline circles, sitting under the card on the left; dots follow them */

/* testimonials dark, fixes: lines visible through the pin, block centred, dots beside the arrows */

/* testimonials: progress dots on the right under the metric, arrows stay left */

/* =====================================================================
   FAQ rework: no panel on the left; heading, a line of copy, direct
   contacts and the button sit on the page with the frame lines.
   Questions are numbered and separated by hairlines.
   ===================================================================== */

/* numbered questions */

/* FAQ: only the outer frame lines (the inner column lines clashed with the content), and the content
   sits inside the frame with room on both sides, like About */

/* the FAQ heading answers its own hover too */

/* let the button shadow breathe (the panel no longer needs to clip anything) */

/* meteors on the testimonial lines */

@keyframes hpMeteor { 0% { transform: translateY(-140px); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--h, 110vh)); opacity: 0; } }

/* industries: no ground lines under the drawings */
.hp .hpInd path.w2[d^="M14 150"], .hp .hpInd path.w2[d^="M10 150"], .hp .hpInd path.w2[d^="M25 150"] { display: none; }

/* Enterprise v4: workflow tree */
.hp .hpTree .pk { fill: #29ccb2; }
.hp .hpTree .hqDot { animation: hpBeacon 2.4s ease-in-out infinite; }
.hp .hpTree .depBox, .hp .hpTree .teamC { transition: fill .45s ease, stroke .45s ease; transition-delay: calc(var(--i) * .12s); }
.hp .hpTree .teamK { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(.45s + var(--i) * .09s); }
.hp .hpTree .hq { transition: filter .5s ease; }
.hp .indCard:hover .hpTree .depBox { fill: rgba(41, 204, 178, .28); stroke: #29ccb2; }
.hp .indCard:hover .hpTree .teamC { fill: rgba(41, 204, 178, .18); transition-delay: calc(.35s + var(--i) * .09s); }
.hp .indCard:hover .hpTree .teamK { stroke-dashoffset: 0; }
.hp .indCard:hover .hpTree .hq { filter: drop-shadow(0 0 8px rgba(41, 204, 178, .9)); transition-delay: 1s; }

/* meteors run the full height of the pinned screen, bright until they leave at the bottom */

@keyframes hpMeteor { 0% { transform: translateY(-140px); opacity: 0; } 6% { opacity: 1; } 100% { transform: translateY(var(--h, 110vh)); opacity: 1; } }
/* awning stripes are solid so the building edge stays hidden under the canopy */
.hp .hpRet2 .awS { fill: #8b82ea; }
.hp .hpRet2 .awS.awS--b { fill: #4a3dcc; }

/* one meteor layer for the whole dark area: it carries the dark background under both sections */

@keyframes hpMeteorAll { from { transform: translateY(-160px); } to { transform: translateY(var(--h)); } }

/* AI & Automation hover */
.hp .capAi__logo { transition: none; will-change: transform; }
.hp .capAi__beam, .hp .capAi__glow { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.hp .capCard.is-ai-on .capAi__beam { opacity: 1; transform: translate(-50%, -50%) scaleX(1.35); }
.hp .capCard.is-ai-on .capAi__glow { transform: translate(-50%, -50%) scale(1.25); }
.hp .capAi__badge { transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), box-shadow .5s; }
.hp .capCard.is-ai-on .capAi__badge { transform: translateY(-6px); box-shadow: 0 22px 34px rgba(26, 22, 75, .28), 0 10px 30px rgba(74, 61, 204, .45); }
.hp .hpAiRip { position: absolute; left: 50%; top: 50%; width: 148px; height: 148px; margin: -74px 0 0 -74px; pointer-events: none; z-index: 1; }
.hp .hpAiRip i { position: absolute; inset: 0; border-radius: 50% 50% 0 50%; box-shadow: inset 0 0 0 1.5px rgba(74, 61, 204, .5); opacity: 0; }
.hp .capCard.is-ai-on .hpAiRip i { animation: hpAiRip 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.hp .capCard.is-ai-on .hpAiRip i:nth-child(2) { animation-delay: .8s; }
.hp .capCard.is-ai-on .hpAiRip i:nth-child(3) { animation-delay: 1.6s; }
@keyframes hpAiRip { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
@media (max-width: 1024px) { .hp .hpAiRip { width: 118px; height: 118px; margin: -59px 0 0 -59px; } }

/* AI hover v2: logos pass behind the tile (no centre mask), the lens reaches the card edges and the card clips,
   ripples breathe slowly */
.hp .capAi__marquee { -webkit-mask-image: none !important; mask-image: none !important; }
.hp .caps__grid > .capCard:nth-child(2) { overflow: hidden; }
.hp .capCard.is-ai-on .hpAiRip i { animation-duration: 5.4s; }
.hp .capCard.is-ai-on .hpAiRip i:nth-child(2) { animation-delay: 1.8s; }
.hp .capCard.is-ai-on .hpAiRip i:nth-child(3) { animation-delay: 3.6s; }
/* AI card: the logo row never clips top/bottom; only the card clips (left/right) */
.hp .capAi__marquee { overflow: visible !important; }
.hp .capAi__row { overflow: visible; }

/* capabilities closing line: two beats, heading voice */
.hp .caps__footerText { font: 500 clamp(26px, 2.6vw, 40px)/1.15 "Geologica", sans-serif !important; letter-spacing: -.025em !important; text-wrap: balance; color: #11131f; }
.hp .caps__footerText:hover .hpg { background-position: 0 0; }
.hp .caps__footerText { max-width: min(100%, 980px) !important; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .hp .caps__footerText br { display: none; } }

/* =====================================================================
   Partners v2 (white): colour logos can sit on it later. Same frame as the
   other white sections; the grid IS the frame: 4 cells per row, divided by
   clear hairlines that run the full width.
   Colour logos: add class "partnerItem--color" to the tile to skip the ink filter.
   ===================================================================== */
.hp .partners { background: #fff !important; height: auto !important; min-height: 0 !important; gap: clamp(48px, 6vw, 80px) !important; padding: clamp(96px, 10vw, 152px) 0 !important; position: relative; isolation: isolate; }
.hp .partners__texture { display: none; }
.hp .partners::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 rgba(17, 19, 31, .07); border-right: 1px solid rgba(17, 19, 31, .07); }
.hp .partners__title { color: #11131f !important; font-weight: 500 !important; letter-spacing: -.025em !important; line-height: 1.15 !important; font-size: clamp(30px, 3.05vw, 44px) !important; padding: 0 var(--pad-x); }
.hp .partners__title:hover .hpg { background-position: 0 0; }
/* the heading sits centred in its own box: a line on top, equal space above and below */
.hp .partners { border-top: 1px solid #e3e4ea; padding-top: clamp(64px, 7vw, 104px) !important; gap: clamp(64px, 7vw, 104px) !important; }

/* the grid: full-bleed hairlines top/bottom, cells exactly between the frame lines */
.hp .partners__grid { gap: 0 !important; width: 100%; padding: 0 var(--pad-x); border-top: 1px solid #e3e4ea; position: relative; }
.hp .partnerItem { position: relative; border-radius: 0 !important; background: transparent !important; min-height: clamp(150px, 13vw, 196px) !important; border-bottom: 1px solid #e3e4ea; box-shadow: none !important; transform: none !important; }
.hp .partners__grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #e3e4ea; pointer-events: none; }
.hp .partnerItem:not(:nth-child(4n)) { border-right: 1px solid #e3e4ea; }
.hp .partnerItem:nth-child(4n + 1) { border-left: 1px solid #e3e4ea; }
.hp .partnerItem:nth-child(4n) { border-right: 1px solid #e3e4ea; }

/* logos: one ink family by default, full ink on hover */
.hp .partnerItem__logo { filter: brightness(0) !important; opacity: .62 !important; transition: opacity .4s, transform .6s cubic-bezier(.2, .8, .2, 1) !important; }
.hp .partnerItem--color .partnerItem__logo { filter: none !important; opacity: .9 !important; }
.hp .partnerItem:hover .partnerItem__logo { opacity: 1 !important; transform: scale(1.04); }

/* hover layer: a soft lilac fill rises in the cell and four purple corner brackets close in on the logo */
.hp .partnerItem::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f6f5ff; clip-path: inset(100% 0 0 0); transition: clip-path .6s cubic-bezier(.65, 0, .35, 1); }
.hp .partnerItem:hover::before { clip-path: inset(0 0 0 0); }
.hp .partnerItem { isolation: isolate; }
.hp .partnerItem::after { content: ""; position: absolute; inset: 14px; pointer-events: none; opacity: 0; transform: scale(1.08); transition: opacity .35s, transform .6s cubic-bezier(.2, .8, .2, 1);
  --c: #4a3dcc; --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l);
  background-repeat: no-repeat; }
.hp .partnerItem:hover::after { opacity: 1; transform: none; }

/* the invite tile: an open slot in the grid, purple text; hover fills it purple */
.hp .partnerItem--cta { outline: 0 !important; color: #4a3dcc !important; background: transparent !important; }
.hp .partnerItem--cta::before { background: #4a3dcc; }
.hp .partnerItem--cta::after { display: none; }
.hp .partnerItem--cta:hover { color: #fff !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; transform: none !important; }
.hp .partnerItem__ctaIc { box-shadow: inset 0 0 0 1.5px currentColor !important; }
.hp .partnerItem--cta:hover .partnerItem__ctaIc { background: #fff !important; color: #4a3dcc !important; }

@media (max-width: 1024px) {
  .hp .partnerItem:nth-child(n) { border-left: 0; border-right: 1px solid #e3e4ea; }
  .hp .partnerItem:nth-child(3n + 1) { border-left: 1px solid #e3e4ea; }
}
@media (max-width: 760px) {
  .hp .partnerItem:nth-child(n) { border-left: 0; border-right: 1px solid #e3e4ea; }
  .hp .partnerItem:nth-child(2n + 1) { border-left: 1px solid #e3e4ea; }
}
@media (max-width: 760px) { .hp .partnerItem__logo { height: calc(var(--lh, 56px) * .62) !important; } .hp .partnerItem { min-height: 112px !important; } }
/* partners: logo tiles hover without the lilac fill (brackets + ink logo only); the invite tile keeps its purple fill */
.hp .partnerItem:not(.partnerItem--cta)::before { display: none; }
/* hero: the frame lines run through it too (left and right, at the content edge), light on the photo */
.hp .hero::after { 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 rgba(255, 255, 255, .14); border-right: 1px solid rgba(255, 255, 255, .14); }

/* capability art v9: plainer, product-real. No logo marks, photos instead of initials, no glow/gradient washes */
.hp .hpW__top { justify-content: space-between; }
.hp .capLottie .hpW__me, .hp .hpW__me { width: 26px !important; height: 26px !important; border-radius: 50%; object-fit: cover; background: #eceefa; }
.hp .hpW__top b { flex: 0 1 auto; }
.hp .hpW__delta { margin-left: 10px; height: auto; padding: 0; background: none; color: #1d9783; font-weight: 600; }
.hp .hpW__grid { fill: none; stroke: #eef0f5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hp .hpW__months { display: flex; justify-content: space-between; margin-top: 6px; font: 500 9px/1 Inter, sans-serif; color: #a2a7b5; }
.hp .capLottie img.hpW__pav, .hp img.hpW__pav { width: 22px !important; height: 22px !important; border-radius: 50%; object-fit: cover; }
.hp .hpW__pav--ic { background: #eaf8f5 !important; color: #1d9783; }
.hp .capLottie .hpW__pav--ic svg { width: 12px !important; height: 12px !important; }
.hp .hpS__mer { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #f0f1f5; }
.hp .capLottie .hpS__mer img, .hp .hpS__mer img { width: 28px !important; height: 28px !important; border-radius: 50%; object-fit: cover; flex: none; }
.hp .hpS__mer b { display: block; font: 600 11px/1.2 Inter, sans-serif; color: #11131f; }
.hp .hpS__mer small { display: block; margin-top: 2px; font: 500 9.5px/1.2 Inter, sans-serif; color: #8a90a0; }
.hp .hpS__sheet { height: 372px; }
.hp .hpS__qr { margin-top: 12px; }
.hp .hpS__scan { height: 2px; background: #29ccb2; border-bottom: 0; box-shadow: none; opacity: .8; }
.hp .hpScan .hpConf { display: none; }   /* no logo-shaped confetti: the success screen speaks for itself */
.hp .hpS__check { box-shadow: none !important; }
@media (max-width: 640px) { .hp .hpW__delta { display: flex; margin: 4px 0 0; } }

/* v10 (review): Digital Products chart draws on with a clip reveal, so the line always reaches the edge;
   no end dot. Payments QR spans the sheet like "Scan to pay", DDT badge in its centre, no merchant row;
   hover keeps the success screen and brings the celebration back with plain confetti. */
.hp .capLottie .hpW__chart .hpW__area { fill: rgba(74, 61, 204, .07); stroke: none; }
.hp .hpW__line { stroke-dasharray: none; stroke-dashoffset: 0; animation: hpReveal 8s cubic-bezier(.65, 0, .35, 1) infinite; }
.hp .hpW__chart .hpW__area { animation: hpReveal 8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes hpReveal { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 35%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hp .hpW__line, .hp .hpW__chart .hpW__area { animation: none; } }
.hp .hpS__sheet { height: 352px; }
.hp .hpS__qr { width: 100%; height: auto; aspect-ratio: 1; margin: 16px 0 14px; padding: 14px; }
.hp .hpS__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 34px; border-radius: 9px; background: #4a3dcc; box-shadow: 0 0 0 4px #fff; z-index: 1; }
.hp .capLottie .hpS__logo img { width: 52px !important; height: auto !important; display: block; }
.hp .hpScan .hpConf { display: block; top: 40%; }
.hp .hpScan .hpConf i:nth-child(odd) { border-radius: 50%; }
.hp .hpScan .hpConf i:nth-child(even) { border-radius: 2px; }
.hp .hpS__ok { z-index: 2; }                         /* success screen covers the DDT badge */
@media (max-width: 640px) {
  .hp .hpS__sheet { top: 9%; transform: scale(.84); transform-origin: 50% 0; }
  .hp .capCard:hover .hpS__sheet { transform: scale(.84); }
}
/* QR centre: only the DDT petal, not the wordmark */
.hp .hpS__logo { width: 46px; height: 46px; border-radius: 10px; background: #fff; box-shadow: none; color: #4a3dcc; }
.hp .hpS__logo svg, .hp .capLottie .hpS__logo svg { width: 24px !important; height: 24px !important; display: block; }

/* Home (review): no separator strip between the "Chosen by" logo grid and About. The grid ends where the
   About frame begins: no bottom padding, and About's top line (with its + marks) moves to its top edge,
   standing in for the grid's bottom line. The About copy keeps its own top padding. */
.hp .chosen { padding-bottom: 0 !important; }
.hp .chosen > .chosen__row::after { display: none; }
.hp .about .abx__h--t, .hp .about .abx__c--tl, .hp .about .abx__c--tr { top: 0; }
.hp .hpS__scan { z-index: 2; }                       /* scan line passes over the DDT badge, not behind it */