/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:       #0f172a;
  --card:     #0f1f35;
  --input:    #0a1628;
  --border:   #1e293b;
  --border2:  #2d3f57;
  --text:     #f1f5f9;
  --muted:    #64748b;
  --soft:     #94a3b8;
  --accent:   #38bdf8;
  --accent2:  #0ea5e9;
  --success:  #34d399;
  --warn:     #fbbf24;
  --danger:   #f87171;
  --r:        12px;
  --shadow:   0 4px 24px rgba(0,0,0,.4);
}

html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:'SF Mono','Fira Mono',monospace; font-size:.875em; }

/* ─── Nav ───────────────────────────────────────────────────────────────────── */
.nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(15,23,42,.95); backdrop-filter:blur(8px); z-index:100; }
.nav-logo { font-size:1.25rem; font-weight:700; color:var(--accent); letter-spacing:-.5px; }
.nav-links { display:flex; align-items:center; gap:1.5rem; }
.nav-links a { color:var(--soft); font-size:.9rem; }
.nav-links a:hover { color:var(--text); text-decoration:none; }

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.75rem; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; border:none; transition:all .15s; text-decoration:none; white-space:nowrap; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:var(--accent); color:#0a1628; }
.btn-primary:hover { background:var(--accent2); }
.btn-secondary { background:transparent; color:var(--soft); border:1px solid var(--border2); }
.btn-secondary:hover { color:var(--text); border-color:var(--accent); }
.btn-lg { padding:1rem 2.25rem; font-size:1.1rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.hero { text-align:center; padding:6rem 1.5rem 4rem; max-width:780px; margin:0 auto; }
.hero-badge { display:inline-block; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25); color:var(--accent); border-radius:999px; padding:.35rem 1rem; font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.5rem; }
.hero h1 { font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.15; letter-spacing:-1px; margin-bottom:1.25rem; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero p { font-size:1.15rem; color:var(--soft); max-width:580px; margin:0 auto 2.25rem; }
.hero-cta { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ─── How it works ──────────────────────────────────────────────────────────── */
.how { background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:5rem 1.5rem; }
.sec { max-width:900px; margin:0 auto; }
.sec-title { text-align:center; font-size:1.75rem; font-weight:700; margin-bottom:.5rem; }
.sec-sub { text-align:center; color:var(--muted); margin-bottom:3rem; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; }
.step { text-align:center; }
.step-num { width:48px; height:48px; border-radius:50%; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25); color:var(--accent); font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.step h3 { font-size:1rem; font-weight:600; margin-bottom:.4rem; }
.step p { font-size:.875rem; color:var(--muted); }

/* ─── Pricing ───────────────────────────────────────────────────────────────── */
.pricing-sec { padding:5rem 1.5rem; max-width:960px; margin:0 auto; }
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.pricing-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2rem; position:relative; transition:border-color .2s; }
.pricing-card:hover { border-color:var(--border2); }
.pricing-card.featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),var(--shadow); }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#0a1628; font-size:.75rem; font-weight:700; padding:3px 14px; border-radius:999px; white-space:nowrap; }
.pricing-tier { font-size:.8rem; color:var(--muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.5rem; }
.pricing-price { font-size:2.5rem; font-weight:800; line-height:1; margin-bottom:.25rem; }
.pricing-price span { font-size:1rem; font-weight:400; color:var(--muted); }
.pricing-desc { color:var(--soft); font-size:.875rem; margin-bottom:1.5rem; }
.pricing-features { list-style:none; margin-bottom:2rem; }
.pricing-features li { padding:.4rem 0; font-size:.9rem; color:var(--soft); display:flex; align-items:center; gap:.5rem; }
.pricing-features li::before { content:'✓'; color:var(--success); font-weight:700; }

/* ─── FAQ ───────────────────────────────────────────────────────────────────── */
.faq-sec { background:var(--card); border-top:1px solid var(--border); padding:5rem 1.5rem; }
.faq-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2.5rem; max-width:900px; margin-left:auto; margin-right:auto; }
.faq-item h3 { font-size:1rem; font-weight:600; margin-bottom:.5rem; }
.faq-item p { color:var(--muted); font-size:.9rem; }

/* ─── CTA / Footer ──────────────────────────────────────────────────────────── */
.cta-sec { text-align:center; padding:6rem 1.5rem; border-top:1px solid var(--border); }
.cta-sec h2 { font-size:2rem; font-weight:700; margin-bottom:.75rem; }
.cta-sec p { color:var(--muted); margin-bottom:2rem; }
.footer { border-top:1px solid var(--border); padding:2rem; text-align:center; color:var(--muted); font-size:.85rem; }

/* ─── Scan page ─────────────────────────────────────────────────────────────── */
.scan-wrap { max-width:700px; margin:0 auto; padding:3rem 1.5rem 5rem; }
.scan-wrap h1 { font-size:1.75rem; font-weight:700; margin-bottom:.5rem; }
.scan-wrap .subtitle { color:var(--muted); margin-bottom:2.5rem; }
.form-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2rem; }
.form-group { margin-bottom:1.5rem; }
label { display:block; font-size:.875rem; font-weight:600; color:var(--soft); margin-bottom:.4rem; }
label .hint { font-weight:400; color:var(--muted); margin-left:.25rem; }
input[type="text"],input[type="url"],textarea,select { width:100%; background:var(--input); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.95rem; font-family:inherit; padding:.65rem .9rem; transition:border-color .15s; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,189,248,.12); }
textarea { resize:vertical; min-height:120px; }

/* Tier selector */
.tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.tier-option { position:relative; }
.tier-option input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.tier-label { display:flex; flex-direction:column; align-items:center; padding:1rem .75rem; background:var(--input); border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all .15s; text-align:center; }
.tier-label:hover { border-color:var(--border2); }
.tier-option input:checked + .tier-label { border-color:var(--accent); background:rgba(56,189,248,.05); }
.tier-price { font-size:1.25rem; font-weight:700; }
.tier-name { font-size:.75rem; color:var(--muted); margin-top:.1rem; }
.tier-pages { font-size:.75rem; color:var(--soft); margin-top:.25rem; }

/* ─── Results ───────────────────────────────────────────────────────────────── */
#results-panel { display:none; }
.status-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2rem; margin-top:2rem; }
.status-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; }
.status-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.status-dot.pending  { background:var(--muted); }
.status-dot.running  { background:var(--accent); animation:pulse 1.5s infinite; }
.status-dot.done     { background:var(--success); }
.status-dot.failed   { background:var(--danger); }
.status-dot.awaiting_payment { background:var(--warn); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.status-text { font-weight:600; font-size:1rem; }
.status-sub { color:var(--muted); font-size:.875rem; margin-left:auto; }
.progress-wrap { background:var(--input); border-radius:999px; height:6px; overflow:hidden; margin-bottom:.75rem; }
.progress-fill { height:100%; background:var(--accent); border-radius:999px; transition:width .4s ease; min-width:3%; }
.progress-label { font-size:.8rem; color:var(--muted); text-align:right; }

/* Result cards */
.results-header { display:flex; align-items:center; justify-content:space-between; margin:2rem 0 1rem; flex-wrap:wrap; gap:.5rem; }
.results-count { font-size:1rem; font-weight:600; }
.result-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.25rem 1.5rem; margin-bottom:1rem; transition:border-color .15s; }
.result-card:hover { border-color:var(--border2); }
.result-src { font-size:.8rem; color:var(--muted); margin-bottom:.4rem; }
.result-src a { color:var(--soft); }
.result-broken { display:flex; align-items:flex-start; gap:.6rem; flex-wrap:wrap; }
.badge-broken { display:inline-block; background:#7f1d1d; color:#fca5a5; border-radius:4px; padding:2px 8px; font-size:.75rem; font-weight:600; white-space:nowrap; }
.result-url { color:var(--danger); font-size:.85rem; word-break:break-all; flex:1; }
.result-status { color:var(--muted); font-size:.75rem; white-space:nowrap; }
.email-toggle { background:none; border:none; color:var(--accent); cursor:pointer; font-size:.8rem; margin-top:.5rem; padding:0; text-decoration:underline; }
.email-box { background:var(--input); border:1px solid var(--border); border-radius:8px; padding:1rem; font-size:.8rem; color:#cbd5e1; white-space:pre-wrap; word-break:break-word; margin-top:.5rem; display:none; font-family:'SF Mono','Fira Mono',monospace; }

/* Paywall */
.results-blur { position:relative; margin-top:1rem; }
.blur-overlay { position:absolute; inset:0; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; z-index:10; border-radius:var(--r); }
.paywall-card { background:rgba(15,23,42,.95); border:1px solid var(--accent); border-radius:var(--r); padding:2rem 2.5rem; text-align:center; max-width:440px; box-shadow:var(--shadow); }
.paywall-card h3 { font-size:1.2rem; margin-bottom:.5rem; }
.paywall-card p { color:var(--muted); font-size:.875rem; margin-bottom:1.5rem; }
.paywall-btns { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
.blurred-cards { pointer-events:none; user-select:none; }

/* Report bar */
.report-bar { background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.2); border-radius:10px; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.report-bar p { color:var(--soft); font-size:.9rem; }

/* Alert */
.alert { padding:.75rem 1rem; border-radius:8px; font-size:.875rem; margin-bottom:1rem; }
.alert-error { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:#fca5a5; }

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media(max-width:640px) {
  .nav { padding:.75rem 1rem; }
  .hero { padding:3.5rem 1rem 3rem; }
  .hero h1 { font-size:2rem; }
  .tier-grid { grid-template-columns:1fr; }
  .paywall-btns { flex-direction:column; }
  .paywall-card { padding:1.5rem; }
}