:root{
  --red:#c1121f;
  --black:#0b0b0b;
  --gold:#d4af37;
  --gold2:#a8831e;
  --off:#f7f3e9;
  --muted: rgba(247,243,233,.78);
  --panel: rgba(18,18,18,.92);
  --line: rgba(212,175,55,.22);
}

/* Page shell */
*{box-sizing:border-box}
body{
  margin:0;
  color: var(--off);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(193,18,31,.24), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(212,175,55,.10), transparent 55%),
    var(--black);
  line-height:1.55;
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:20px 18px}
.card{
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.20);
  background: linear-gradient(180deg, rgba(18,18,18,.92), rgba(11,11,11,.92));
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  padding: 16px;
}
.h1{font-size:28px; font-weight:1000; margin:0 0 6px}
.sub{color:var(--muted); font-weight:800; margin:0 0 12px}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; gap:10px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 950;
  border: 1px solid rgba(212,175,55,.34);
  background: rgba(212,175,55,.06);
}
.btn:hover{background: rgba(212,175,55,.10)}
.btn.primary{
  background: linear-gradient(180deg, rgba(193,18,31,.95), rgba(123,10,18,.95));
  border-color: rgba(212,175,55,.55);
}
.grid{display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:14px; margin-top:14px}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }
.field{grid-column: span 6; display:grid; gap:6px}
@media (max-width: 980px){ .field{grid-column: span 12} }
label{font-weight:950; color: rgba(247,243,233,.90)}
input, select{
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.20);
  background: rgba(0,0,0,.22);
  color: var(--off);
  padding: 10px 12px;
  font-weight: 850;
}
small.hint{color: rgba(247,243,233,.68); font-weight:800}
hr.sep{border:0; border-top: 1px solid rgba(212,175,55,.14); margin: 14px 0}

/* Certificate wrapper */
.certWrap{
  margin-top:14px;
  border-radius: 22px;
  border: 1px solid rgba(212,175,55,.22);
  background: rgba(0,0,0,.16);
  padding: 16px;
}

/* ===== REAL CERTIFICATE LOOK ===== */
.certificate{
  width: 100%;
  aspect-ratio: 1.414 / 1;      /* landscape certificate proportion */
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  padding: 26px;
  /* outer frame */
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(212,175,55,.12), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(193,18,31,.10), transparent 55%),
    radial-gradient(900px 650px at 60% 120%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, rgba(18,18,18,.96), rgba(8,8,8,.94));
  border: 2px solid rgba(212,175,55,.55);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* Double gold border + inner parchment panel */
.certificate::before{
  content:"";
  position:absolute; inset: 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.45);
  box-shadow: inset 0 0 0 2px rgba(168,131,30,.18);
  pointer-events:none;
}

/* Inner “paper” panel (makes it feel like a real certificate) */
.certificate::after{
  content:"";
  position:absolute; inset: 28px;
  border-radius: 12px;
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 650px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(247,243,233,.10), rgba(247,243,233,.04));
  border: 1px solid rgba(212,175,55,.20);
  pointer-events:none;
}

/* Corner ornaments */
.corner{
  position:absolute; width:80px; height:80px; pointer-events:none; opacity:.75;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.corner.tl{left:14px; top:14px}
.corner.tr{right:14px; top:14px; transform: scaleX(-1)}
.corner.bl{left:14px; bottom:14px; transform: scaleY(-1)}
.corner.br{right:14px; bottom:14px; transform: scale(-1)}
.corner svg{width:100%; height:100%}
.corner path{fill: rgba(212,175,55,.55)}

/* Watermark seal */
.seal{
  position:absolute; left:50%; top:54%;
  transform: translate(-50%, -50%);
  width: 240px; height: 240px;
  border-radius: 999px;
  border: 2px solid rgba(212,175,55,.18);
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(193,18,31,.08), transparent 55%),
    rgba(0,0,0,.10);
  opacity:.26;
  pointer-events:none;
}
.seal::before{
  content:"MBCC • FINTERNETOPS • CERTIFIED •";
  position:absolute; inset: 12px;
  border-radius: 999px;
  border: 1px dashed rgba(212,175,55,.22);
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  letter-spacing: .38em;
  font-size: 11px;
  color: rgba(212,175,55,.50);
  text-transform: uppercase;
}
.seal::after{
  content:"FO";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 1000;
  font-size: 64px;
  color: rgba(212,175,55,.22);
}

/* Header area */
.certHeader{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; position:relative; z-index:2}
.mark{display:flex; gap:12px; align-items:center}
.dot{
  width:16px;height:16px;border-radius:50%;
  background: linear-gradient(180deg, var(--red), #7b0a12);
  box-shadow:0 0 0 2px rgba(212,175,55,.25);
}
.brandTitle{
  font-weight:1000; letter-spacing:.3px;
  font-size: 16px;
}
.brandSub{color: rgba(247,243,233,.72); font-weight:850; font-size:13px}
.qrBox{
  border:1px solid rgba(212,175,55,.22);
  background: rgba(0,0,0,.22);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 240px;
}
.qrBox b{display:block; font-size:12px; letter-spacing:.35px; text-transform:uppercase}
.qrBox .u{margin-top:6px; font-size:12px; color: rgba(247,243,233,.78); word-break:break-all; font-weight:850}

/* Main text */
.certBody{margin-top:18px; text-align:center; position:relative; z-index:2}
.certBody h2{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.certBody h1{
  margin:12px 0 6px;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 44px;
  letter-spacing:.02em;
}
.certBody p{margin:0 auto 10px; max-width: 90ch; color: rgba(247,243,233,.82); font-weight:800}

.ribbon{
  display:inline-flex; gap:10px; align-items:center; margin-top:12px;
  border-radius:999px; padding:10px 14px;
  border:1px solid rgba(212,175,55,.36);
  background: rgba(212,175,55,.06);
  font-weight:950;
}
.ribbon span{color: rgba(247,243,233,.80); font-weight:900}

/* Footer signatures */
.certFooter{
  position:absolute; left:26px; right:26px; bottom:18px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:1px solid rgba(212,175,55,.18);
  padding-top:12px;
  z-index:2;
}
.meta{font-size:12px; font-weight:900; color: rgba(247,243,233,.82)}
.meta b{color: var(--off)}
.sig{display:flex; gap:14px; align-items:flex-end}
.sigLine{
  width:240px;
  border-top:1px solid rgba(212,175,55,.34);
  padding-top:6px;
  text-align:center
}
.sigLine b{
  display:block;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sigLine span{font-size:12px; color: rgba(247,243,233,.72); font-weight:850}

/* Print: keep it white background but preserve gold frame feel */
@media print{
  body{background:#fff;color:#000}
  .container{max-width:none; padding:0}
  .card, .btnrow, .grid, .sub, .h1, .hint, hr.sep{display:none !important}
  .certWrap{border:none; padding:0; margin:0}
  .certificate{
    border: 2px solid #b08b1f;
    border-radius: 0;
    padding: 22px;
    box-shadow:none;
    background: #fff;
  }
  .certificate::after{
    background: #fff;
    border: 1px solid #d6b860;
  }
  .seal{opacity:.12}
  .corner{opacity:.55}
  .qrBox{border-color:#caa84a}
}