/* /lead-magnet-generator/style.css */
/* TailwindCSS loads via CDN; these are minimal custom utilities & overrides */

:root {
  --brand: #ff9900;
  --brand-dark: #e28300;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
}

/* ---------- Buttons ---------- */
.btn-option {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: all 0.15s ease;
}
.btn-option:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  background: #f8fafc;
}
.btn-option:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

/* Primary CTA (solid pill) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--brand-dark);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

/* Ghost button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-ghost:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border-color: #94a3b8;
}

/* 3D dashed CTA (signature style) */
.cta-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 9999px;
  background: var(--brand);
  color: #fff;
  border: 2.5px dashed #fff;
  font-weight: 700;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 12px 24px rgba(30,41,59,0.22);
  transition: transform 100ms ease, box-shadow 120ms ease;
}
.cta-3d:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 0 rgba(0,0,0,0.15), 0 14px 28px rgba(30,41,59,0.28);
}
.cta-3d:active {
  transform: translateY(0);
  box-shadow: 0 4px 0 rgba(0,0,0,0.18), 0 10px 20px rgba(30,41,59,0.3);
}

/* ---------- Optional light/dark tweak ---------- */
@media (prefers-color-scheme: dark) {
  body { background: #0b1220; color: #e5e7eb; }
  .btn-option { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
  .btn-option:hover { background: #111827; border-color: #334155; }
  .btn-ghost { background: #0f172a; color: #e2e8f0; border-color: #334155; }
  .btn-ghost:hover { background: #111827; }
}