/* ============ ReputaGuard — main.css ============ */
/* Design tokens */
:root {
  --bg: #f6f8fb;
  --bg-dark: #0b1220;
  --surface: #ffffff;
  --ink: #101828;
  --ink-soft: #475467;
  --line: #e4e9f0;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #eff4ff;
  --ok: #067647;
  --ok-soft: #ecfdf3;
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.container-narrow { max-width: 760px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; flex-wrap: wrap; padding-top: .35rem; padding-bottom: .35rem; }
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none;
}
.brand-mark { width: 26px; height: 26px; color: var(--accent); }
.nav-links { display: flex; gap: 1.25rem; list-style: none; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.header-cta { margin-left: auto; }

/* Buttons */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 10px;
  padding: .6rem 1.1rem; font-weight: 600; font-size: .95rem; text-decoration: none;
  cursor: pointer; font-family: inherit; line-height: 1.4;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.05rem; }
.btn-sm { padding: .35rem .8rem; font-size: .85rem; }
.btn-block { width: 100%; }
.linklike { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

/* Hero */
.hero { background: var(--bg-dark); color: #fff; padding: 5rem 0 4.5rem; }
.hero-inner { max-width: 780px; }
.hero-eyebrow {
  color: #93b4ff; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8rem; margin-bottom: .75rem;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: 1rem; }
.hero h1 .accent { color: #6d9bff; }
.hero-sub { font-size: 1.15rem; color: #c3cdd9; max-width: 640px; }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin: 1.75rem 0; }
.hero-points { display: flex; gap: 1.5rem; flex-wrap: wrap; list-style: none; color: #9aa8b8; font-size: .9rem; }
.hero-points li::before { content: "✓ "; color: #6d9bff; font-weight: 700; }

/* Sections */
.section { padding: 4rem 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-title { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.section-lead { color: var(--ink-soft); max-width: 720px; margin-bottom: 2.25rem; }

.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.section-alt .card { background: var(--bg); }
.card h3 { font-size: 1.05rem; }
.card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding: 0; margin: 0 0 1.5rem; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 1rem;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.solution-note { text-align: center; margin: 0; }

/* Pricing */
.pricing-grid { align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: .6rem; }
.plan h3 { margin: 0; letter-spacing: .06em; font-size: .95rem; color: var(--ink-soft); }
.plan-price { font-size: 2rem; font-weight: 800; margin: 0; }
.plan-period { font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.plan-features { list-style: none; flex: 1; display: grid; gap: .4rem; margin: .4rem 0 .6rem; }
.plan-features li { font-size: .88rem; color: var(--ink-soft); padding-left: 1.1rem; position: relative; }
.plan-features li::before { content: "•"; position: absolute; left: .3rem; color: var(--accent); font-weight: 700; }
.plan .btn { text-align: center; }
.plan-featured { border-color: var(--accent); border-width: 2px; position: relative; }
.plan-badge {
  position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: .18rem .7rem; margin: 0; letter-spacing: .04em;
}
.plan-featured h3 { color: var(--accent-strong); }
.pricing-footnote { color: var(--ink-soft); font-size: .85rem; margin-top: 1.25rem; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  font: inherit; font-weight: 600; padding: 1rem .25rem; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q::after { content: "+"; font-size: 1.3rem; color: var(--accent); flex: none; }
.faq-q[aria-expanded="true"]::after { content: "−"; }
.faq-a { padding: 0 .25rem 1rem; color: var(--ink-soft); }
.faq-a p { margin: 0; }
.faq-item h3 { margin: 0; font-size: 1rem; }

/* Footer */
.site-footer { background: var(--bg-dark); color: #9aa8b8; padding: 3rem 0 1.5rem; margin-top: 4rem; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.footer-col h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: #c3cdd9; }
.footer-col ul { list-style: none; display: grid; gap: .5rem; }
.footer-col a { color: #9aa8b8; text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-brand .brand { color: #fff; margin-bottom: .75rem; }
.footer-brand p { margin: 0; font-size: .9rem; }
.placeholder-tag { font-size: .7rem; opacity: .7; }
.footer-bottom { border-top: 1px solid #1d2939; margin-top: 2rem; padding-top: 1.25rem; font-size: .8rem; }
.footer-bottom p { margin: 0; }

/* ============ Dashboard ============ */
.dashboard-body { background: var(--bg); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2.25rem; width: 100%; max-width: 440px;
}
.brand-lg { font-size: 1.3rem; margin-bottom: 1.25rem; }
.login-card h1 { font-size: 1.4rem; }
.login-card form { display: grid; gap: .5rem; margin: 1.25rem 0; }
.login-card label { font-weight: 600; font-size: .9rem; }
.login-card input {
  font: inherit; padding: .65rem .8rem; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink);
}
.login-card input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-help { color: var(--ink-soft); font-size: .8rem; margin: 0; }
.field-help code { background: var(--accent-soft); padding: .05rem .3rem; border-radius: 4px; }
.field-error { color: var(--danger); font-size: .85rem; margin: 0; }
.login-foot { font-size: .9rem; color: var(--ink-soft); margin: 0; }

.demo-banner {
  background: var(--warn-soft); border: 1px solid #fedf89; color: var(--warn);
  border-radius: 8px; padding: .6rem .9rem; font-size: .85rem; margin: 0 0 1rem;
}
.demo-banner-persist { margin-bottom: 1.5rem; }

.dash-header .header-inner { flex-wrap: nowrap; }
.mode-badge {
  margin: 0 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  background: var(--warn-soft); color: var(--warn); border: 1px solid #fedf89;
  border-radius: 999px; padding: .25rem .75rem;
}
.mode-badge.live { background: var(--ok-soft); color: var(--ok); border-color: #a6f4c5; }

.dash-main { padding-top: 1.5rem; padding-bottom: 3rem; }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.tab {
  background: none; border: none; border-bottom: 3px solid transparent;
  font: inherit; font-weight: 600; color: var(--ink-soft);
  padding: .6rem 1rem; cursor: pointer; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.dash-view h1 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.dash-view:focus { outline: none; }

.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.score-card h2 { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.score-value { font-size: 2.6rem; font-weight: 800; margin: 0; line-height: 1.1; }
.score-scale { font-size: 1rem; color: var(--ink-soft); font-weight: 500; margin-left: .2rem; }
.score-trend { color: var(--ink-soft); font-size: .85rem; margin: .35rem 0 0; }
.score-trend.up { color: var(--ok); }
.score-trend.down { color: var(--danger); }
.meter { height: 10px; background: var(--line); border-radius: 999px; margin-top: 1rem; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .6s ease; }

.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { text-align: left; color: var(--ink-soft); font-weight: 600; padding: .55rem .75rem; border-bottom: 2px solid var(--line); }
.data-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); }
.cases-table { background: var(--surface); }

.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px;
  padding: .18rem .6rem; letter-spacing: .03em;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--accent-soft); color: var(--accent-strong); }

.reviews-list, .alerts-list { list-style: none; display: grid; gap: 1rem; }
.review-item, .alert-item { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.review-meta, .alert-meta { color: var(--ink-soft); font-size: .8rem; margin: .25rem 0 0; }
.review-text { margin: 0; }
.filter-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.inline-label { font-weight: 600; font-size: .9rem; }
select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.stars { color: #f59e0b; letter-spacing: .05em; }

.conn-status { font-size: .8rem; color: var(--ink-soft); margin: 0 0 1rem; }
.conn-status code { background: var(--accent-soft); border-radius: 4px; padding: .05rem .3rem; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 700px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .header-cta { margin-left: auto; }
  .review-item, .alert-item { flex-direction: column; }
  .cases-table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ===== v0.2: pricing toggle, launch offer, demo, auth pages ===== */
.hero-eyebrow{color:var(--accent,#4da3ff);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;margin:0 0 .5rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none}
.hero-badges span{font-size:.85rem;background:rgba(77,163,255,.12);border:1px solid rgba(77,163,255,.35);padding:.35rem .7rem;border-radius:999px}
.hero-note{font-size:.85rem;opacity:.7;margin-top:.75rem}
.billing-toggle{display:flex;justify-content:center;gap:.5rem;margin:1.5rem 0 .75rem}
.toggle-btn{border:1px solid var(--border,#334);background:transparent;color:inherit;padding:.55rem 1.25rem;border-radius:999px;cursor:pointer;font-weight:600;font-size:.95rem}
.toggle-btn.toggle-active{background:var(--accent,#4da3ff);border-color:var(--accent,#4da3ff);color:#fff}
.save-badge{background:#16a34a;color:#fff;font-size:.72rem;padding:.15rem .5rem;border-radius:999px;margin-left:.4rem;vertical-align:middle}
.launch-banner{text-align:center;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.4);border-radius:12px;padding:.85rem 1rem;margin:0 auto 1.5rem;max-width:640px}
.plan .price-strike{text-decoration:line-through;opacity:.55;font-size:.85em;margin-right:.4rem}
.plan-eq{font-size:.8rem;opacity:.75;margin:.25rem 0 0}
.price-eq{display:block;font-size:.8rem;opacity:.7}
.pipeline{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;padding:0;margin:2rem 0 0}
.pipeline li{counter-increment:step;background:var(--card,#161d2e);border:1px solid var(--border,#2a3550);border-radius:12px;padding:1rem;position:relative}
.pipeline li::before{content:counter(step);position:absolute;top:-12px;left:12px;background:var(--accent,#4da3ff);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.pipeline strong{display:block;margin-bottom:.35rem}
.honesty-note{margin-top:1.5rem;font-size:.85rem;opacity:.75;border-left:3px solid var(--accent,#4da3ff);padding-left:1rem}
.demo-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 1rem;padding:0}
.demo-tabs button{border:1px solid var(--border,#2a3550);background:transparent;color:inherit;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem}
.demo-tabs button[aria-selected="true"]{background:var(--accent,#4da3ff);border-color:var(--accent,#4da3ff);color:#fff}
.demo-panel{background:var(--card,#161d2e);border:1px solid var(--border,#2a3550);border-radius:12px;padding:1.5rem;margin-bottom:.75rem}
.demo-alert-head{margin:0 0 .75rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.demo-review{margin:.5rem 0;padding:.85rem 1rem;border-left:3px solid #ef4444;background:rgba(239,68,68,.08);border-radius:0 8px 8px 0;font-style:italic}
.demo-analyze-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-bottom:.75rem}
.demo-stat{display:flex;flex-direction:column;gap:.3rem}
.demo-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;opacity:.65}
.pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600}
.pill-red{background:rgba(239,68,68,.15);color:#f87171}
.pill-orange{background:rgba(245,158,11,.15);color:#fbbf24}
.pill-grey{background:rgba(148,163,184,.15);color:#cbd5e1}
.pill-blue{background:rgba(59,130,246,.15);color:#93c5fd}
.demo-note,.demo-disclaimer{font-size:.82rem;opacity:.75;margin-top:.75rem}
.demo-disclaimer{opacity:.9;border-top:1px dashed var(--border,#2a3550);padding-top:.75rem}
.demo-evidence ul{margin:.5rem 0 0;padding-left:1.2rem}
.demo-evidence li{margin-bottom:.4rem}
.demo-response blockquote{margin:.5rem 0;padding:.85rem 1rem;border-left:3px solid var(--accent,#4da3ff);background:rgba(77,163,255,.08);border-radius:0 8px 8px 0}
.auth-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1.5rem}
.auth-wrap{width:100%;max-width:460px}
.auth-wrap .brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.2rem;margin-bottom:1rem;text-decoration:none}
.auth-card{padding:2rem}
.auth-card h1{margin:0 0 .5rem;font-size:1.4rem}
.auth-sub{font-size:.9rem;opacity:.8;margin:0 0 1.5rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;margin-bottom:.35rem;font-weight:600}
.field input,.field select{width:100%;padding:.65rem .75rem;border-radius:8px;border:1px solid var(--border,#334);background:var(--bg,#0b1220);color:inherit;font-size:1rem;box-sizing:border-box}
.form-note{font-size:.8rem;opacity:.7;margin:.5rem 0}
.form-error{color:#f87171;font-size:.85rem;margin:.75rem 0 0}
.btn-block{width:100%;box-sizing:border-box}
.token-box{background:rgba(77,163,255,.08);border:1px solid rgba(77,163,255,.3);border-radius:8px;padding:1rem;margin:1rem 0}
.token-box code{display:block;word-break:break-all;font-size:.78rem;margin:.5rem 0;background:rgba(0,0,0,.25);padding:.5rem;border-radius:6px}
.auth-foot{text-align:center;font-size:.8rem;opacity:.7;margin-top:1rem}
.cta-final{text-align:center}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-grid nav{display:flex;flex-direction:column;gap:.4rem}
@media(max-width:700px){.billing-toggle{flex-direction:column}.toggle-btn{width:100%}.hero-badges{font-size:.8rem}}