/* ═══════════════════════════════════════════════════════════════
   audit.css — AigenciaLab Lead Magnet Audit Tool
   Mobile-first, Dark premium, standalone
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:       #0A0A0F;
  --surface:  #101018;
  --card:     rgba(16,16,28,.95);
  --border:   rgba(255,255,255,.07);
  --primary:  #2563EB;
  --cyan:     #00D4FF;
  --violet:   #6C3AED;
  --success:  #059669;
  --warning:  #D97706;
  --error:    #DC2626;
  --text:     #EAEDF3;
  --sub:      #8A8FA8;
  --muted:    #555870;
  --ff:       'Inter', system-ui, sans-serif;
  --radius:   14px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--ff); background:var(--bg); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased;
  background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(37,99,235,.08) 0%, transparent 70%);
  padding: 24px 16px 60px;
}

h1,h2,h3 { font-weight:700; line-height:1.2; }
a { text-decoration:none; color:inherit; }

/* ── APP CONTAINER ────────────────────────────────────────── */
.audit-app { max-width:580px; margin:0 auto; }

.audit-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:36px 32px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}

/* ── HEADER ───────────────────────────────────────────────── */
.audit-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:10px; }
.audit-logo { font-size:1.3rem; font-weight:700; }
.audit-logo span { color:var(--cyan); }
.audit-badge {
  font-size:.72rem; font-weight:600; color:var(--cyan);
  background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.18);
  padding:5px 12px; border-radius:50px;
}
h1 { font-size:clamp(1.6rem,4vw,2rem); margin-bottom:12px; }
.audit-sub { color:var(--sub); font-size:.95rem; margin-bottom:28px; line-height:1.6; }

/* ── FORM ─────────────────────────────────────────────────── */
.audit-form { display:flex; flex-direction:column; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:.85rem; font-weight:600; color:var(--text); }
.form-group input, .form-group select {
  padding:13px 16px; background:#0D0F18; border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-family:var(--ff); font-size:.92rem;
  outline:none; transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus { border-color:var(--primary); }
.form-group select option { background:#0D0F18; }
.form-hint { font-size:.72rem; color:var(--muted); }
.phone-wrap { display:flex; align-items:center; background:#0D0F18; border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:border-color .2s; }
.phone-wrap:focus-within { border-color:var(--primary); }
.flag-code { padding:13px 12px; font-size:.85rem; color:var(--sub); border-right:1px solid var(--border); flex-shrink:0; }
.phone-wrap input { border:none; background:transparent; border-radius:0; padding-left:12px; }

.btn-audit {
  padding:16px 24px; background:linear-gradient(135deg, var(--primary), var(--violet));
  border:none; border-radius:10px; color:#fff; font-family:var(--ff);
  font-size:.95rem; font-weight:700; cursor:pointer; letter-spacing:.3px;
  transition:all .3s; box-shadow:0 4px 20px rgba(37,99,235,.35);
  margin-top:4px;
}
.btn-audit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,99,235,.5); }
.btn-audit:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.privacy-note { font-size:.72rem; color:var(--muted); text-align:center; }

/* ── ANALYZING ────────────────────────────────────────────── */
.analyzing-header { text-align:center; margin-bottom:32px; }
.pulse-ring {
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--violet));
  margin:0 auto 20px; display:flex; align-items:center; justify-content:center;
  animation:pulse 1.5s ease-in-out infinite;
  font-size:1.8rem; line-height:60px; position:relative;
}
.pulse-ring::after {
  content:'🤖'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); font-size:1.6rem;
}
.pulse-ring::before {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--primary); opacity:.4; animation:pulse-ring 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.4)} 50%{box-shadow:0 0 20px 8px rgba(37,99,235,.15)} }
@keyframes pulse-ring { 0%{transform:scale(.9);opacity:.6} 100%{transform:scale(1.3);opacity:0} }

.analyzing-header h2 { font-size:1.4rem; margin-bottom:8px; }
#analyzingMsg { font-size:.9rem; }

.check-list { display:flex; flex-direction:column; gap:14px; }
.check-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:10px; background:#0D0F18; border:1px solid var(--border);
  font-size:.88rem; transition:all .4s;
}
.check-item.done { border-color:rgba(5,150,105,.3); background:rgba(5,150,105,.04); }
.check-item.running { border-color:rgba(37,99,235,.3); background:rgba(37,99,235,.04); }
.check-icon { font-size:1.1rem; flex-shrink:0; width:24px; text-align:center; }
.check-bar { flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
.check-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--cyan)); border-radius:2px; width:0; transition:width 1.2s ease; }

/* ── REPORT ───────────────────────────────────────────────── */
.report-header { text-align:center; margin-bottom:28px; }
.report-logo { font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.report-logo span { color:var(--cyan); }
.report-header h2 { font-size:1.5rem; margin-bottom:6px; }
.report-meta { font-size:.78rem; color:var(--sub); }

/* Score ring */
.score-section { display:flex; align-items:center; gap:24px; padding:20px; background:#0D0F18; border-radius:14px; margin-bottom:24px; }
.score-ring { position:relative; flex-shrink:0; }
.score-num { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.6rem; font-weight:800; color:var(--text); font-family:monospace; }
.score-title { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.score-sub { font-size:.8rem; color:var(--sub); margin-bottom:6px; }
.score-issues { font-size:.8rem; color:var(--warning); }

/* Metrics grid */
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.metric-card {
  background:#0D0F18; border:1px solid var(--border); border-radius:12px; padding:16px 14px;
}
.metric-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:8px; font-weight:600; }
.metric-val { font-size:1.5rem; font-weight:800; margin-bottom:4px; font-family:monospace; }
.metric-status { font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:4px; }
.metric-bar { height:4px; background:rgba(255,255,255,.06); border-radius:2px; margin-top:8px; overflow:hidden; }
.metric-fill { height:100%; border-radius:2px; }

/* Issues */
.issues-section { margin-bottom:20px; }
.issues-section h3, .opportunities-section h3 { font-size:1rem; margin-bottom:12px; }
.issue-item {
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin-bottom:8px;
  border-radius:10px; border-left:3px solid; font-size:.86rem; line-height:1.5;
}
.issue-critical { background:rgba(220,38,38,.06); border-color:var(--error); }
.issue-warning  { background:rgba(217,119,6,.06); border-color:var(--warning); }
.issue-info     { background:rgba(37,99,235,.06); border-color:var(--primary); }
.issue-icon { flex-shrink:0; font-size:1rem; }
.issue-text strong { display:block; font-weight:600; margin-bottom:2px; }
.issue-text span { color:var(--sub); font-size:.8rem; }

/* Opportunities */
.opportunities-section { margin-bottom:20px; }
.opp-item {
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:8px;
  background:#0D0F18; border:1px solid rgba(0,212,255,.1); border-radius:10px;
}
.opp-icon { font-size:1.5rem; flex-shrink:0; }
.opp-title { font-weight:600; font-size:.9rem; margin-bottom:2px; }
.opp-desc { font-size:.78rem; color:var(--sub); }
.opp-impact { margin-left:auto; font-size:.72rem; font-weight:700; color:var(--success); flex-shrink:0; text-align:right; }

/* Savings banner */
.savings-banner {
  background:linear-gradient(135deg, rgba(5,150,105,.15), rgba(37,99,235,.1));
  border:1px solid rgba(5,150,105,.2); border-radius:14px; padding:20px 22px;
  margin-bottom:24px; text-align:center;
}
.savings-banner .sv-label { font-size:.85rem; color:var(--sub); margin-bottom:4px; }
.savings-banner .sv-amount { font-size:2rem; font-weight:800; color:var(--success); font-family:monospace; }
.savings-banner .sv-sub { font-size:.78rem; color:var(--muted); margin-top:4px; }

/* CTAs */
.report-ctas { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.btn-cta-primary {
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:16px; background:linear-gradient(135deg, #25D366, #128C7E);
  border:none; border-radius:12px; color:#fff; font-weight:700; font-size:.95rem;
  cursor:pointer; box-shadow:0 4px 16px rgba(37,211,102,.3); transition:all .3s;
}
.btn-cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.4); }
.btn-cta-secondary {
  padding:13px; background:transparent; border:1px solid var(--border);
  border-radius:12px; color:var(--sub); font-family:var(--ff); font-size:.88rem;
  cursor:pointer; transition:all .2s;
}
.btn-cta-secondary:hover { border-color:var(--primary); color:var(--text); }
.btn-cta-ghost { text-align:center; font-size:.82rem; color:var(--muted); transition:color .2s; }
.btn-cta-ghost:hover { color:var(--primary); }
.report-footer { font-size:.7rem; color:var(--muted); text-align:center; }

/* Utilities */
.hidden { display:none !important; }
.text-success { color:var(--success); }
.text-warning { color:var(--warning); }
.text-error   { color:var(--error); }
.text-primary { color:var(--primary); }

/* Print styles */
@media print {
  body { background:#fff; color:#1A1D23; padding:0; }
  .audit-card { background:#fff; border:none; padding:20px; box-shadow:none; }
  .report-header { border-bottom:2px solid #E2E5EA; padding-bottom:16px; }
  .score-section, .metric-card, .issue-item, .opp-item { background:#F4F5F7 !important; border-color:#E2E5EA !important; }
  .btn-cta-primary, .btn-cta-secondary, .btn-cta-ghost, .report-ctas { display:none !important; }
  .audit-sub, .metric-label, .sub { color:#6B7280 !important; }
  .score-num, .metric-val { color:#1A1D23 !important; }
  .savings-banner { background:#EEF7F2 !important; border-color:#059669 !important; }
}

@media (max-width:480px) {
  .audit-card { padding:24px 20px; }
  .metrics-grid { grid-template-columns:1fr; }
  .score-section { flex-direction:column; text-align:center; }
}