/* ---- fontes self-hosted (sem Google Fonts; CSP fecha em 'self') ---- */
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;font-weight:500 700;font-display:swap;
  src:url("/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --bg:#0D1117;
  --surface:#151B23;
  --surface-2:#1B232E;
  --line:#232B36;
  --ink:#E9EDF2;
  --muted:#8B95A3;
  --copper:#D98E4A;
  --copper-deep:#B86B33;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom));
}
.card{width:100%;max-width:420px}

/* ---- assinatura: ondas NFC ---- */
.mark{display:flex;justify-content:center;margin-bottom:28px}
.mark svg{overflow:visible}
.mark .arc{
  fill:none;stroke:var(--copper);stroke-linecap:round;
  opacity:0;
  animation:ping .6s ease-out forwards;
}
.mark .arc:nth-child(2){animation-delay:.18s}
.mark .arc:nth-child(3){animation-delay:.36s}
.mark .dot{fill:var(--copper)}
@keyframes ping{
  from{opacity:0;transform:scale(.85);transform-origin:12px 32px}
  to{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .mark .arc{animation:none;opacity:1}
}

header{text-align:center;margin-bottom:36px}
.eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--copper);margin-bottom:12px;
}
h1{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;font-size:clamp(28px,8vw,34px);
  letter-spacing:-.01em;line-height:1.1;
}
.role{color:var(--muted);font-size:15px;margin-top:10px;line-height:1.5}
.loc{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:.08em;
}

/* ---- ações de contato ---- */
.actions{display:flex;flex-direction:column;gap:10px}
.action{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
  text-decoration:none;color:var(--ink);
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.action:active{transform:scale(.985)}
@media (hover:hover){
  .action:hover{background:var(--surface-2);border-color:#2E3947}
}
.action:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.action svg{flex:none;width:22px;height:22px;color:var(--copper)}
.action .txt{min-width:0}
.action .label{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.action .value{
  font-size:15px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---- salvar contato ---- */
.save{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;width:100%;
  background:linear-gradient(135deg,var(--copper),var(--copper-deep));
  color:#14100B;font-weight:600;font-size:15px;
  border:none;border-radius:14px;padding:17px;
  text-decoration:none;
  transition:filter .15s ease,transform .1s ease;
}
.save:active{transform:scale(.985)}
@media (hover:hover){ .save:hover{filter:brightness(1.07)} }
.save:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.save svg{width:18px;height:18px}

footer{
  margin-top:34px;text-align:center;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.14em;color:#525D6B;
}