/* ══════════════════════════════════════
   SIGNER PAGE SPECIFIC STYLES
══════════════════════════════════════ */

.signer-hero{min-height:85vh;}

/* Code preview mockup (reuses dashboard-preview shell) */
.code-preview{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:1.5rem;
  font-family:var(--fn-mono);
  box-shadow:0 0 40px var(--glow),0 0 80px var(--glow2);
  position:relative;overflow:hidden;
}
.code-preview::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(14,165,233,.06) 0%,transparent 60%);
  pointer-events:none;
}
.code-bar{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:1.4rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.code-display{
  text-align:center;padding:1.5rem 0;
}
.code-display-label{
  font-size:.65rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.18em;
  margin-bottom:.8rem;
}
.code-digits{
  font-size:2.4rem;font-weight:700;
  letter-spacing:.3em;color:var(--cyan);
  font-family:var(--fn-mono);
  text-shadow:0 0 20px var(--glow);
}
.code-status{
  margin-top:1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;
}

/* ══════════════════════════════════════
   WORKFLOW STEPS
══════════════════════════════════════ */
.workflow-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
  margin-top:2.5rem;
  position:relative;
}
.workflow-step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem 1.2rem;
  position:relative;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.workflow-step:hover{
  border-color:var(--border2);
  box-shadow:0 0 24px var(--glow);
  transform:translateY(-2px);
}
.workflow-step-number{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,165,233,.1);
  border:1px solid rgba(14,165,233,.3);
  border-radius:50%;
  font-family:var(--fn-mono);font-weight:700;
  color:var(--blue);font-size:.9rem;
  margin-bottom:1rem;
}
.workflow-step-title{
  font-family:var(--fn-display);
  font-weight:700;color:var(--white);
  font-size:.95rem;margin-bottom:.5rem;
}
.workflow-step-body{
  color:var(--muted);font-size:.82rem;line-height:1.6;
}

/* ══════════════════════════════════════
   BENEFITS GRID
══════════════════════════════════════ */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:2.5rem;
}
.benefit-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.6rem 1.2rem;
  text-align:center;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.benefit-card:hover{
  border-color:var(--border2);
  box-shadow:0 0 24px var(--glow);
  transform:translateY(-2px);
}
.benefit-icon{font-size:1.8rem;margin-bottom:.8rem;}
.benefit-title{
  font-family:var(--fn-display);
  font-weight:700;color:var(--white);
  font-size:.95rem;margin-bottom:.5rem;
}
.benefit-body{
  color:var(--muted);font-size:.8rem;line-height:1.6;
}

/* ══════════════════════════════════════
   MOBILE
══════════════════════════════════════ */
@media(max-width:768px){
  .workflow-grid{grid-template-columns:1fr;}
  .benefits-grid{grid-template-columns:1fr 1fr;}
  .code-digits{font-size:1.8rem;}
}
@media(max-width:480px){
  .benefits-grid{grid-template-columns:1fr;}
}