/* ============================================================
   AgentRank — dark, calibrated to Linear-grade restraint
   Near-monochrome. Refined medium-weight type. Accent used sparingly.
   ============================================================ */

:root {
  --bg:        #0a0b0d;
  --bg-soft:   #101216;
  --panel:     #14161a;
  --panel-2:   #141518;
  --ink:       #edf2f5;
  --muted:     #8a8f98;
  --faint:     #5f636b;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.13);
  --accent:    #3ecf8e;
  --accent-dim:#2a8f64;
  --on-accent: #052016;
  --c-red:     #e5644e;
  --c-blue:    #5b8def;

  --sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --maxw: 1100px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent); color: var(--on-accent); }
a { color: var(--ink); text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ── Header ─────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
header .wrap { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.logo a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.logo-mark { color: var(--ink); opacity: 0.92; }
.logo-word { font-weight: 560; font-size: 15.5px; letter-spacing: -0.02em; color: var(--ink); }
.logo-word span { font-weight: 560; }
nav { display: flex; gap: 26px; align-items: center; }
nav > a { color: var(--muted); font-size: 13.5px; font-weight: 450; transition: color 0.16s var(--ease); }
nav > a:hover { color: var(--ink); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #0a0c0f;
  padding: 11px 19px; border-radius: 8px;
  font-size: 14px; font-weight: 540; letter-spacing: -0.01em;
  border: 1px solid var(--ink);
  transition: transform 0.16s var(--ease), opacity 0.16s var(--ease), background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.btn:hover { opacity: 0.92; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.03); opacity: 1; }
.btn.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 7px; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(72px, 12vw, 128px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 320px at 50% -10%, rgba(62,207,142,0.10), transparent 64%),
    radial-gradient(900px 500px at 50% -2%, rgba(255,255,255,0.035), transparent 60%);
}
.hero .wrap { position: relative; z-index: 1; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 450; color: var(--muted);
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; margin-bottom: 30px; transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pill:hover { border-color: var(--line-2); color: var(--ink); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(62,207,142,0.16); }
.pill-arrow { color: var(--faint); margin-left: 2px; }
.cta-fallback { margin-top: 16px; font-size: 13.5px; color: var(--faint); max-width: 480px; }
.hero .cta-fallback { margin-left: auto; margin-right: auto; }
.cta-fallback a { color: var(--muted); border-bottom: 1px solid var(--line-2); }
.cta-fallback a:hover { color: var(--ink); }
.hero h1 {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.03; letter-spacing: -0.022em; font-weight: 540;
  margin: 0 auto; max-width: 17ch; color: var(--ink);
}
.hero h1 .accent { color: var(--accent); font-weight: 540; }
.hero .sub {
  margin: 22px auto 0; max-width: 560px;
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--muted); font-weight: 400;
}
.hero .sub strong { color: var(--ink); font-weight: 540; }
.hero .cta { margin-top: 32px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Dashboard mockup ───────────────────────────────────── */
.dash {
  margin: clamp(52px, 8vw, 84px) auto 0; max-width: 880px; text-align: left;
  background: #0d0e10;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 50px 100px -50px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.dash-bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; background: rgba(255,255,255,0.018); border-bottom: 1px solid var(--line); }
.dash-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.dash-bar em { font-family: var(--mono); font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 8px; }
.dash-tag { margin-left: auto; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--line); padding: 3px 9px; border-radius: 6px; }
.dash-body { padding: 22px; display: grid; gap: 18px; }

.funnel { display: flex; align-items: stretch; gap: 8px; }
.fn { flex: 1; background: rgba(255,255,255,0.022); border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; gap: 5px; }
.fn-hot { border-color: rgba(62,207,142,0.32); background: rgba(62,207,142,0.05); }
.fn-k { font-size: 11.5px; color: var(--muted); }
.fn-v { font-family: var(--mono); font-size: 21px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.fn-hot .fn-v { color: var(--accent); }
.fn-arrow { display: flex; align-items: center; color: var(--faint); font-size: 13px; }

.board { background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 12.5px; color: var(--muted); }
.board-sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.row { display: grid; grid-template-columns: 24px 1fr 1fr 46px; align-items: center; gap: 14px; padding: 9px 0; }
.row + .row { border-top: 1px solid var(--line); }
.rk { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.nm { font-size: 14px; color: var(--muted); font-weight: 450; display: flex; align-items: center; gap: 8px; }
.row-you .nm { color: var(--ink); font-weight: 500; }
.badge { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-accent); background: var(--accent); padding: 2px 6px; border-radius: 5px; }
.track { height: 7px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.fill.dim { background: rgba(255,255,255,0.16); }
.pct { font-family: var(--mono); font-size: 13.5px; font-weight: 500; color: var(--muted); text-align: right; }
.row-you .pct { color: var(--ink); }

.trend { background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-radius: 12px; padding: 13px 18px 7px; }
.trend-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.trend-up { color: var(--accent); font-family: var(--mono); font-size: 11.5px; }

/* ── Trust band ─────────────────────────────────────────── */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 17px 28px; justify-content: center; }
.trust-i { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.trust-i::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; opacity: 0.8; }

/* ── Sections ───────────────────────────────────────────── */
section { padding: clamp(72px, 10vw, 116px) 0; }
section.alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker { font-family: var(--mono); font-size: 11.5px; font-weight: 450; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.kicker::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
h2 { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.022em; line-height: 1.05; font-weight: 540; max-width: 18ch; color: var(--ink); }
.lead { color: var(--muted); max-width: 600px; margin-top: 16px; font-size: 17px; }

/* ── How it works ───────────────────────────────────────── */
.steps { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.step { background: var(--bg); padding: 26px 24px; }
section.alt .step { background: var(--bg-soft); }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.step h3 { font-size: 16px; font-weight: 560; margin: 12px 0 8px; letter-spacing: -0.01em; color: var(--ink); }
.step p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ── Cards (metrics) ────────────────────────────────────── */
.grid { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 24px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.card:hover { border-color: var(--line-2); background: rgba(255,255,255,0.018); }
.card-stage { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 14px; }
.card h3 { font-size: 16px; font-weight: 560; margin-bottom: 9px; color: var(--ink); letter-spacing: -0.01em; }
.card p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ── Black-box statement ────────────────────────────────── */
.statement { padding: clamp(88px, 12vw, 132px) 0; text-align: center; }
.big-statement { font-size: clamp(30px, 4vw, 48px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.22; color: var(--ink); max-width: 20ch; margin: 0 auto; }
.big-statement .accent { color: var(--accent); }

/* ── Feature / chart rows ───────────────────────────────── */
.feature { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.feature:first-of-type { margin-top: 12px; }
.feature.reverse .feature-txt { order: 2; }
.feature-stage { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 14px; }
.feature-txt h3 { font-size: clamp(20px, 2.3vw, 26px); font-weight: 540; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin-bottom: 12px; }
.feature-txt p { font-size: 15.5px; color: var(--muted); line-height: 1.62; max-width: 42ch; }
.feature-txt p em { color: var(--ink); font-style: italic; }

.viz { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 20px; box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9); }
.viz-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.viz-sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.viz-center { display: flex; flex-direction: column; }

.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.chart .grid-v { stroke: rgba(255,255,255,0.12); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .vlabel { fill: var(--faint); font-family: var(--mono); font-size: 10px; }
.chart polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .ln-acc { stroke: var(--accent); }
.chart .ln-mut { stroke: #8a8f98; }
.chart .ln-dim { stroke: #3a4049; }
.chart .dot-acc { fill: var(--accent); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.legend.col { flex-direction: column; gap: 8px; margin-top: 0; }
.lg { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.lg::before { content: ""; width: 10px; height: 3px; border-radius: 2px; background: currentColor; }
.lg-acc { color: var(--accent); } .lg-mut { color: #8a8f98; } .lg-dim { color: #5f636b; } .lg-red { color: var(--c-red); }

.gap { padding: 6px 0 2px; }
.gap-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 12px; margin-bottom: 14px; }
.gap-k { font-size: 13px; color: var(--muted); }
.gap-track { height: 10px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; }
.gap-fill { display: block; height: 100%; border-radius: 999px; }
.gap-fill.mut { background: rgba(255,255,255,0.22); }
.gap-fill.acc { background: var(--accent); }
.gap-v { font-family: var(--mono); font-size: 13.5px; color: var(--ink); text-align: right; }
.gap-note { font-family: var(--mono); font-size: 11px; color: var(--c-red); margin-top: 6px; }

.donut-wrap { display: flex; align-items: center; gap: 26px; justify-content: center; padding: 6px 0 4px; }
.donut .donut-track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 11; }
.donut .donut-acc { fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; }
.donut .donut-red { fill: none; stroke: var(--c-red); stroke-width: 11; stroke-linecap: round; }
.donut .donut-num { fill: var(--ink); font-family: var(--mono); font-size: 21px; font-weight: 600; text-anchor: middle; }
.donut .donut-lbl { fill: var(--muted); font-family: var(--sans); font-size: 8.5px; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Closing ────────────────────────────────────────────── */
.close { text-align: center; }
.close h2 { margin: 0 auto; max-width: 20ch; }
.close .cta { margin-top: 32px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 44px 0 60px; }
.foot-logo { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 560; font-size: 14.5px; margin-bottom: 16px; }
.foot-links { display: flex; gap: 22px; margin-bottom: 14px; }
.foot-links a { color: var(--muted); font-size: 13.5px; }
.foot-links a:hover { color: var(--ink); }
.foot-fine { color: var(--faint); font-size: 12.5px; max-width: 620px; line-height: 1.6; }

/* ── Methodology prose (dark) ───────────────────────────── */
.prose { padding: clamp(60px, 8vw, 88px) 28px 96px; max-width: 760px; margin: 0 auto; }
.prose > .kicker { margin-bottom: 16px; }
.prose h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.022em; line-height: 1.06; font-weight: 540; }
.prose h2 { margin-top: 52px; font-size: 22px; letter-spacing: -0.02em; font-weight: 560; }
.prose h3 { margin-top: 28px; margin-bottom: 6px; font-size: 17px; font-weight: 560; }
.prose p, .prose li { color: var(--muted); line-height: 1.7; }
.prose strong, .prose b { color: var(--ink); font-weight: 540; }
.prose ul, .prose ol { margin: 12px 0 12px 22px; }
.prose li { margin-bottom: 7px; }
.prose table { border-collapse: collapse; margin: 22px 0; width: 100%; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 13px; text-align: left; vertical-align: top; color: var(--muted); }
.prose th { background: rgba(255,255,255,0.025); font-family: var(--mono); font-size: 11.5px; font-weight: 450; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
code { font-family: var(--mono); font-size: 0.88em; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 5px; color: var(--accent); }
.principles { margin: 16px 0 0 20px; }
.principles li { margin-bottom: 11px; color: var(--muted); }
.principles b { color: var(--ink); }

/* ── Evidence band ──────────────────────────────────────── */
.evidence { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(62,207,142,0.045), transparent 55%), var(--bg-soft); padding: clamp(38px, 5vw, 56px) 0; }
.ev-grid { display: grid; grid-template-columns: 0.85fr 1.5fr 1fr; gap: clamp(24px, 4vw, 54px); align-items: start; }
.ev-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); margin-bottom: 11px; }
.ev-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ev-meta { font-size: 13px; color: var(--muted); margin-top: 7px; }
.ev-finding p { font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.ev-finding em { color: var(--accent); font-style: normal; font-weight: 540; }
.ev-hook { color: var(--muted) !important; font-size: 14px !important; margin-top: 10px !important; }
.ev-receipt-k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 11px; }
.ev-receipt ul { list-style: none; display: grid; gap: 7px; }
.ev-receipt li { font-size: 13px; color: var(--muted); padding-left: 15px; position: relative; line-height: 1.4; }
.ev-receipt li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
.ev-receipt a { display: inline-block; margin-top: 13px; font-size: 13px; color: var(--accent); }
.ev-receipt a:hover { text-decoration: underline; }
.ev-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* ── Mid-page CTA + urgency ─────────────────────────────── */
.midcta { margin-top: clamp(44px, 6vw, 68px); display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.midcta-or { font-size: 13.5px; color: var(--faint); }
.midcta-or a, .close-urgency a { color: var(--muted); border-bottom: 1px solid var(--line-2); }
.midcta-or a:hover { color: var(--ink); }
.close-urgency { max-width: 660px; margin: 0 auto 30px; font-size: 16px; color: var(--muted); line-height: 1.6; }

/* ── Focus ──────────────────────────────────────────────── */
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 22px; }
  .feature.reverse .feature-txt { order: 0; }
  .ev-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 720px) {
  .funnel { flex-wrap: wrap; } .fn-arrow { display: none; } .fn { min-width: 44%; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  nav { gap: 14px; } nav > a:not(.btn) { display: none; }
  .hero .cta, .close .cta { flex-direction: column; } .btn { width: 100%; }
  .row { grid-template-columns: 22px 1fr 56px; } .row .track { display: none; }
  .dash-body { padding: 15px; }
}