/* 04 — sticky dark panel + 5 cards that untilt and spread (3040px) */
.proof { position: relative; height: 3040px; background: #fff; padding-top: 80px; }
.proof-pin { position: sticky; top: 0; height: 900px; }
.proof-panel { position: absolute; inset: 48px; border-radius: 80px; background: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.proof-head { width: 858px; max-width: calc(100% - 48px); text-align: center; color: #fff; }
.proof-head .h-sec { color: #fff; }
.proof-head .sub { color: rgba(255, 255, 255, .6); max-width: 580px; margin: 24px auto 0; }
.proof-badges { display: flex; justify-content: center; gap: 32px; margin-top: 24px; }
.pb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pb img { width: 28px; height: 28px; border-radius: 8px; }
.pb b { font-weight: 500; } .pb small { font-size: 12px; color: var(--grey-2); }
.proof-cards { position: absolute; inset: 0; pointer-events: none; }
.pcard { position: absolute; left: 0; top: 0; padding: 28px; border-radius: 40px; box-shadow: 0 15px 25px rgba(0, 0, 0, .05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 14px; will-change: transform; pointer-events: auto; color: #fff; }
.pcard.k1 { width: 341px; height: 304px; background: linear-gradient(#fff, #b2b2ff); color: var(--ink); }
.pcard.k2 { width: 321px; height: 312px; background: linear-gradient(rgba(2, 67, 179, .8), #0243b3); }
.pcard.k3 { width: 321px; height: 352px; background: linear-gradient(#3d3d3d, #000); }
.pcard.k4 { width: 332px; height: 304px; background: linear-gradient(rgba(204, 62, 222, .8), #cc3ede); }
.pcard.k5 { width: 318px; height: 339px; background: linear-gradient(#cedcf8, #fff); color: var(--ink); }
.ps { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ps img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.ps b { font-size: 15px; font-weight: 600; }
.ps .res { margin-left: auto; height: 26px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .22); }
.k1 .ps .res { background: rgba(56, 26, 201, .12); color: var(--indigo); }
.pq { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); flex: none; }
.pq::before { content: ''; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--q) center / contain no-repeat; mask: var(--q) center / contain no-repeat; }
.pcard { --q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.pcard.dn { --q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 8v9H8'/%3E%3C/svg%3E"); }
.k1 .pq { background: #fff; color: var(--indigo); } .k2 .pq { background: rgba(255, 255, 255, .05); }
.logo .pq { width: 52px; height: 52px; border-radius: 16px; } .logo .pq::before { width: 24px; height: 24px; }
.k5 .pq { background: #9696ff; color: #fff; }
.pt { font-size: 15px; line-height: 22px; letter-spacing: -0.15px; }
.k3 .pt, .k5 .pt { font-size: 16px; line-height: 24px; }
.pp { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.av { width: 44px; height: 44px; border-radius: 50%; flex: none; background: conic-gradient(from var(--h, 0deg), #6262fe, #45d6f3, #cc3ede, #6262fe); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.pn { display: grid; line-height: 1.3; min-width: 0; }
.pn b { font-size: 14px; font-weight: 600; }
.pn span { font-size: 12px; opacity: .72; }
.pyth { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; line-height: 1.1; max-width: 90px; }
.pyth img { width: 26px; height: 26px; border-radius: 7px; }
@media (max-width: 900px) {
  .proof { height: auto; padding: 48px 16px; }
  .proof-pin { position: relative; height: auto; }
  .proof-panel { position: relative; inset: auto; border-radius: 40px; padding: 56px 20px; }
  .proof-cards { position: relative; display: grid; gap: 12px; margin-top: 16px; }
  .pcard { position: relative; width: auto !important; height: auto !important; transform: none !important; min-height: 220px; }
  .proof-badges { flex-direction: column; align-items: center; gap: 10px; }
}