/* ===== Payment partner section ===== */
#partners { overflow-x: clip; }
.js .pp-rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 110ms); }
.js .pp-rv.in { opacity: 1; transform: none; }

.pp-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: stretch; }

/* partner hero panel */
.pp-hero { position: relative; border-radius: 26px; padding: 34px; overflow: hidden; box-shadow: var(--shadow); isolation: isolate; }
.pp-hero::before { content: ""; position: absolute; width: 380px; height: 380px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--p3) 32%, transparent), transparent); z-index: -1; animation: ppFloat 9s ease-in-out infinite alternate; }
.pp-hero::after { content: ""; position: absolute; width: 300px; height: 300px; left: -120px; bottom: -150px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--p2) 26%, transparent), transparent); z-index: -1; animation: ppFloat 11s ease-in-out infinite alternate-reverse; }
@keyframes ppFloat { to { transform: translate(-30px, 30px) scale(1.12); } }

.pp-badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border)); }
.pp-badge-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); animation: ppPing 2.4s infinite; }
@keyframes ppPing { 70%, 100% { box-shadow: 0 0 0 9px transparent; } }

.pp-brand { display: flex; align-items: center; gap: 14px; margin: 22px 0 10px; }
.pp-brand b { font-family: var(--font-d); font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(100deg, var(--p1), var(--p2) 40%, var(--p3) 60%, var(--p1)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ppShine 6s linear infinite; padding-bottom: .08em; }
@keyframes ppShine { to { background-position: -250% 0; } }
.pp-mark { position: relative; width: 46px; height: 46px; flex: none; }
.pp-mark i { position: absolute; inset: 0; border-radius: 14px; border: 2px solid var(--p1); animation: spin 10s linear infinite; }
.pp-mark i:nth-child(2) { inset: 7px; border-radius: 10px; border-color: var(--p2); animation-duration: 7s; animation-direction: reverse; }
.pp-mark i:nth-child(3) { inset: 16px; border-radius: 50%; border: 0; background: var(--grad); animation: corepulse 2.6s ease-in-out infinite; }
.pp-tag { color: var(--muted); font-size: 1.05rem; max-width: 34em; }

.pp-pillars { display: grid; gap: 12px; margin: 26px 0 28px; }
.pp-pillars li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.pp-pillars li:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--p1) 45%, var(--border)); }
.pp-pi { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 10px 22px -12px var(--glow2); }
.pp-pillars b { display: block; line-height: 1.35; font-size: .98rem; }
.pp-pillars small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.pp-cta { width: 100%; white-space: normal; text-align: center; }

/* checkout demo */
.pp-demo { position: relative; border-radius: 26px; padding: 22px; box-shadow: var(--shadow), 0 0 90px -40px var(--glow2); display: flex; flex-direction: column; overflow: hidden; }
.pp-dh { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.pp-live { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); position: relative; }
.pp-live i { position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: ping 1.8s ease-out infinite; }
.pp-sim { margin-left: auto; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--border); }
.pp-amt { position: relative; margin: 16px 0 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--p1) 16%, transparent), color-mix(in srgb, var(--p2) 14%, transparent)); border: 1px solid var(--border); overflow: hidden; }
.pp-amt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-100%); animation: sheen 4s ease-in-out infinite; }
.pp-amt small { display: block; color: var(--muted); font-size: .78rem; }
.pp-amt b { font-family: var(--font-d); font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pp-lock { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--ok); }
.pp-choose { color: var(--muted); font-size: .8rem; font-weight: 600; margin-bottom: 8px; }
.pp-opts { display: grid; gap: 8px; }
.pp-opt { --oc: var(--p1); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--field); cursor: pointer; transition: border-color .3s, background .3s, transform .3s, box-shadow .3s; user-select: none; }
.pp-opt:hover { transform: translateY(-2px); }
.pp-opt.on { border-color: var(--oc); background: color-mix(in srgb, var(--oc) 12%, var(--field)); box-shadow: 0 10px 24px -16px var(--oc); }
.pp-oi { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--oc); background: color-mix(in srgb, var(--oc) 14%, transparent); transition: transform .4s cubic-bezier(.2,1.4,.4,1); }
.pp-opt.on .pp-oi { transform: scale(1.1) rotate(-6deg); color: #fff; background: var(--oc); }
.pp-on { flex: 1; font-weight: 600; font-size: .92rem; }
.pp-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex: none; display: grid; place-items: center; transition: border-color .3s; }
.pp-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--oc); transform: scale(0); transition: transform .35s cubic-bezier(.2,1.6,.4,1); }
.pp-opt.on .pp-radio { border-color: var(--oc); } .pp-opt.on .pp-radio::after { transform: scale(1); }
.pp-pay { position: relative; margin-top: 14px; padding: 14px; border-radius: 14px; font-weight: 700; color: #fff; background: var(--grad); overflow: hidden; box-shadow: 0 14px 30px -14px var(--glow2); transition: transform .2s; }
.pp-pay:active { transform: scale(.98); }
.pp-pay span { position: relative; }
.pp-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.28); }
.pp-demo.paying .pp-bar { width: 100%; transition: width 1.25s cubic-bezier(.4,.1,.3,1); }
.pp-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 20px; background: color-mix(in srgb, var(--panel) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.pp-ok b { font-size: 1.2rem; } .pp-ok small { color: var(--muted); }
.pp-tick { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 18%, transparent), 0 0 0 22px color-mix(in srgb, var(--ok) 8%, transparent); transform: scale(.4); transition: transform .5s cubic-bezier(.2,1.5,.4,1); }
.pp-tick svg { stroke-dasharray: 30; stroke-dashoffset: 30; }
.pp-demo.done .pp-ok { opacity: 1; visibility: visible; }
.pp-demo.done .pp-tick { transform: scale(1); }
.pp-demo.done .pp-tick svg { animation: draw2 .5s .2s ease-out forwards; }

/* category cards */
.pp-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.pp-cat { --h: var(--p1); display: flex; flex-direction: column; padding: 22px; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.pp-cat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--h), transparent); opacity: .8; }
.pp-cat:hover { border-color: color-mix(in srgb, var(--h) 55%, var(--border)); box-shadow: var(--shadow), 0 20px 50px -30px var(--h); }
.pp-ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pp-ci { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--h), color-mix(in srgb, var(--h) 55%, #000)); box-shadow: 0 12px 26px -12px var(--h); transition: transform .5s cubic-bezier(.2,1.4,.4,1); }
.pp-cat:hover .pp-ci { transform: rotate(-8deg) scale(1.08); }
.pp-cn { font-size: .74rem; font-weight: 700; color: var(--h); padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--h) 14%, transparent); }
[data-theme="dark"] .pp-cn, :root:not([data-theme="light"]) .pp-cn { color: color-mix(in srgb, var(--h) 60%, #fff); }
.pp-cat h3 { font-size: 1.08rem; margin-bottom: 4px; }
.pp-cat p { font-size: .88rem; line-height: 1.55; margin-bottom: 16px; }
.pp-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* method tile (logo-ready) */
.pp-tile { --c: var(--p1); display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 13px; border-radius: 12px; font-weight: 700; font-size: .86rem; letter-spacing: .01em; white-space: nowrap; color: var(--text); background: var(--field); border: 1px solid var(--border); box-shadow: 0 6px 16px -12px rgba(0,0,0,.5); transition: transform .3s cubic-bezier(.2,1.4,.4,1), border-color .3s, box-shadow .3s; }
.pp-tile:hover { transform: translateY(-3px) scale(1.04); border-color: var(--c); box-shadow: 0 12px 22px -14px var(--c); }
.pp-tile img { height: 22px; width: auto; display: block; }
.pp-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; background: color-mix(in srgb, var(--c) 60%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); transform: rotate(45deg); }
[data-theme="light"] .pp-dot { background: var(--c); }

/* scrolling strip */
.pp-strip { margin-top: 30px; display: grid; gap: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pp-track { display: flex; gap: 10px; width: max-content; animation: marq 36s linear infinite; }
.pp-track.rev { animation-direction: reverse; animation-duration: 44s; }
.pp-strip:hover .pp-track { animation-play-state: paused; }

@media (max-width: 1080px) {
  .pp-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pp-hero { padding: 24px 20px; border-radius: 22px; }
  .pp-demo { padding: 18px; border-radius: 22px; }
  .pp-cats { grid-template-columns: 1fr; gap: 14px; }
  .pp-cat { padding: 20px; }
  .pp-brand { gap: 12px; margin-top: 18px; }
  .pp-mark { width: 38px; height: 38px; }
  .pp-badge { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pp-rv { opacity: 1; transform: none; }
  .pp-strip { display: none; }
}

/* ===== Hero "try demo" button: make it inviting ===== */
.hero .cta .btn-ghost { gap: 12px; padding: 9px 26px 9px 9px; font-weight: 700; border: 2px solid transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, conic-gradient(from var(--ang), var(--p1), var(--p2), var(--p3), var(--p1)) border-box; box-shadow: 0 14px 30px -18px var(--glow2); animation: ang 4s linear infinite, ctaNudge 6s ease-in-out 2.5s infinite; }
.hero .cta .btn-ghost::before { content: ""; width: 36px; height: 36px; flex: none; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E") 55% 50% / 18px no-repeat, var(--grad); animation: ctaPing 2s ease-out infinite; }
.hero .cta .btn-ghost::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--p1) 22%, transparent) 50%, transparent 65%); transform: translateX(-120%); animation: ctaShine 3.4s ease-in-out infinite; }
.hero .cta .btn-ghost span { position: relative; z-index: 1; }
.hero .cta .btn-ghost:hover { box-shadow: 0 18px 40px -16px var(--glow2), 0 0 0 4px color-mix(in srgb, var(--p2) 14%, transparent); }
.hero .cta .btn-ghost:hover::before { animation: none; transform: scale(1.1); transition: transform .3s; }
@keyframes ctaPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p2) 55%, transparent); } 75%, 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes ctaShine { 55%, 100% { transform: translateX(120%); } }
@keyframes ctaNudge { 0%, 84%, 100% { translate: 0 0; } 88% { translate: 0 -5px; } 92% { translate: 0 0; } 95% { translate: 0 -2px; } }
@media (max-width: 560px) {
  .hero .cta .btn { width: 100%; }
}