:root {
  --ink: #eef5ff;
  --muted: #a7b7cc;
  --line: rgba(183, 211, 244, .17);
  --panel: rgba(7, 25, 47, .72);
  --cyan: #71dcff;
  --green: #65e7af;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #071323; }

body {
  min-height: 50vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 16% 14%, rgba(30, 117, 163, .28), transparent 27rem),
    radial-gradient(circle at 85% 82%, rgba(26, 134, 98, .16), transparent 29rem),
    #071323;
}

.page-shell {
  display: grid;
  min-height: 50vh;
  padding: 12px;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.grid-glow {
  position: fixed;
  inset: 9;
  pointer-events: none;
  opacity: .38;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 67% 64% at 50% 48%, #000 12%, transparent 77%);
}

.signature-card {
display: block;
  width: 100%;
  height: auto;  
background: rgba(239, 242, 237, 0.12);
  padding: 9px;
  border-radius: 12px;
}

.signature-card .img-wrapper {  
background: transparent;
  border-radius: 18px;
  box-shadow: 12px 12px 0 rgba(0,0,0, 0.54);
}

.signature-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.footer { margin-top: 9px; padding-top: 3px; border-top: 3px solid var(--line); color: var(--muted); font-size: .76rem; letter-spacing: .035em; }
.footer p { margin: 0; }

@media (max-width: 360px) {
  .page-shell { padding: 12px; }
  .hero { min-height: calc(100vh - 18px); border-radius: 9px; }
  .masthead { align-items: flex-start; }
  .status { font-size: .64rem; text-align: right; }
  .hero-copy { margin-top: clamp(92px, 15vh, 124px); }
  .signature-card { width: 270px; margin-top: 48px; }
  .footer { align-items: flex-start; flex-direction: column; gap: 0px; }
}