:root { --cert-bg:#05050b; }
.cert.cert--canva { background:none; box-shadow:none; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--cert-bg); color:#fff; font-family:Outfit,Arial,sans-serif; }
.cert-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px 14px; background:#05050b; }
.cert {
  position:relative; isolation:isolate; overflow:hidden; width:min(1120px,100%); aspect-ratio:16 / 9; container-type:inline-size; color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,.29),transparent 27%,rgba(0,0,0,.12) 49%,transparent 70%,rgba(0,0,0,.54)),url('../../certificates/fundx-4k-background-v1.png') center/cover no-repeat,#030308;
  box-shadow:0 28px 100px rgba(0,0,0,.62),0 0 0 1px #484158;
}
.cert__frame { position:absolute; inset:1%; pointer-events:none; border:1px solid rgba(143,139,169,.38); box-shadow:inset 0 0 0 6px rgba(14,14,27,.55); }
.cert__topline { position:absolute; z-index:2; left:5%; right:5%; top:4%; display:flex; justify-content:space-between; gap:15px; color:#ece9f8; font-size:1.75cqw; font-weight:800; letter-spacing:.05em; }
.cert__brand { position:absolute; z-index:2; top:5%; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4cqw; }
.cert__brand img { display:block; width:6.6cqw; height:auto; }
.cert__brand strong { font-size:1.8cqw; letter-spacing:.04em; white-space:nowrap; }
.cert__heading { position:absolute; z-index:2; top:18%; width:100%; text-align:center; }
.cert__heading h1 { margin:0; font-size:6.3cqw; font-weight:400; line-height:1; letter-spacing:-.03em; }
.cert__heading p { margin:.9cqw 0 0; color:#e0dce9; font-size:2.25cqw; }
.cert__heading span { display:block; width:18%; height:1px; margin:2.6cqw auto 0; background:#a18bbd; }
.cert__recipient { position:absolute; z-index:2; top:35.2%; left:10%; width:80%; text-align:center; }
.cert__label { margin:0; color:#e8e4ef; font-size:1.75cqw; font-weight:800; letter-spacing:.66em; text-indent:.66em; }
.cert__name { margin:3.1cqw 0 1.2cqw; font-size:clamp(22px,7.9cqw,92px); font-weight:800; line-height:1.07; text-transform:uppercase; overflow-wrap:anywhere; text-shadow:0 2px 4px #05050a,0 0 14px rgba(0,0,0,.9); }
.cert__copy { margin:0; color:#eeebf4; font-size:2.1cqw; text-shadow:0 1px 8px #000; }
.cert__stage { margin:1.5cqw 0 0; color:#d4baff; font-size:2.05cqw; font-weight:800; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 1px 8px #000; }
.cert__amount { margin:1cqw 0 0; color:#fff; font-size:2.35cqw; font-weight:800; text-transform:uppercase; text-shadow:0 1px 8px #000; }
.cert--payout .cert__stage { color:#d8b9ff; font-family:'Arial Black',Impact,sans-serif; font-size:2.8cqw; font-weight:900; letter-spacing:.2em; text-shadow:0 2px 10px #05020b; }
.cert--payout .cert__amount { margin-top:1.2cqw; color:#fff; font-family:'Arial Black',Impact,sans-serif; font-size:5.8cqw; font-weight:900; letter-spacing:-.03em; text-shadow:0 3px 3px #05020b,0 5px 19px #05020b,0 0 22px rgba(213,184,255,.5); }
.cert--payout .cert__recipient { top:35.2%; height:40%; }
.cert--payout .cert__label,.cert--payout .cert__name,.cert--payout .cert__copy,.cert--payout .cert__stage,.cert--payout .cert__amount { position:absolute; left:0; width:100%; margin:0; }
.cert--payout .cert__label { top:0; }
.cert--payout .cert__name { top:16%; font-size:7.4cqw; line-height:1; }
.cert--payout .cert__copy { top:49%; }
.cert--payout .cert__stage { top:62%; }
.cert--payout .cert__amount { top:74%; font-size:6cqw; line-height:1; }
.cert__divider { display:none; }
.cert__statement { position:absolute; z-index:2; top:78.4%; left:19%; width:62%; margin:0; color:#e4e0eb; text-align:center; font-size:1.65cqw; line-height:1.45; }
.cert__corner-logo { position:absolute; z-index:2; left:3.5%; bottom:11%; width:7%; }
.cert__corner-logo img { display:block; width:100%; height:auto; }
.cert__date { position:absolute; z-index:2; left:11%; bottom:10.5%; display:flex; flex-direction:column; gap:.6cqw; }
.cert__date span { color:#c6c2d2; font-size:1.15cqw; font-weight:800; }
.cert__date strong { font-size:2.1cqw; }
.cert__qr { position:absolute; z-index:3; right:3.5%; bottom:6.7%; width:10%; padding:.8%; background:#fff; color:#151222; border-radius:5px; box-shadow:0 0 0 4px #060610; text-align:center; }
.cert__qr img { display:block; width:100%; aspect-ratio:1; object-fit:contain; image-rendering:pixelated; }
.cert__qr span { display:block; margin-top:.4cqw; font-size:.8cqw; line-height:1.3; font-weight:800; letter-spacing:0; white-space:nowrap; }
.cert__footer { position:absolute; z-index:2; bottom:2.7%; width:100%; color:#c8c2dc; text-align:center; font-size:1.4cqw; font-weight:800; }
.cert-page--embed { min-height:0; padding:0; background:transparent; }
.cert-page--embed .cert { width:100%; }
.cert-page--public { flex-direction:column; gap:18px; }
.cert-public-bar,.cert-public-foot { width:min(1120px,100%); }
.cert-public-bar { padding:13px 18px; background:#11111d; border:1px solid #363349; border-radius:10px; }
.cert-public-bar strong { display:block; font-size:16px; }
.cert-public-bar small { display:block; margin-top:3px; color:#c2bdd4; }
.cert-public-foot { text-align:center; color:#bcb6ce; font-size:13px; }
.cert-public-dl { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.cert-public-dl a { display:inline-block; padding:12px 18px; color:#080715; background:#cab3ff; border-radius:9px; font-weight:800; text-decoration:none; }
@media(max-width:600px) {
  .cert-page { padding:8px 4px; }
  .cert__topline { font-size:1.75cqw; }
  .cert__recipient { top:36%; }
  .cert__name { margin-top:2.4cqw; }
  .cert__qr { width:11%; }
  .cert__qr span { font-size:.8cqw; }
}
@media print {
  @page { size:16in 9in; margin:0; }
  body,.cert-page { padding:0; margin:0; background:#fff; }
  .cert { width:100%; height:100vh; aspect-ratio:auto; box-shadow:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .cert-public-bar,.cert-public-foot,.cert-public-dl { display:none; }
}
