/* ============================================================
   citeproof.ai — landing page
   Self-hosted Inter + full design-token system.
   ============================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;           /* variable: full weight axis */
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --accent-1: #2f5fe0;
  --accent-2: #8b5cf6;
  --accent-grad: linear-gradient(120deg, var(--accent-1), var(--accent-2));

  /* Semantic status — same meaning everywhere (mock UIs + icons + badges) */
  --ok: #16a34a;          /* cited / verified */
  --ok-bg: rgba(22,163,74,.12);
  --warn: #d97706;        /* flagged gap (no evidence) */
  --warn-bg: rgba(217,119,6,.12);
  --stale: #e11d63;       /* invalidated by a document change — the lineage signature */
  --stale-bg: rgba(225,29,99,.12);

  /* Neutrals — light */
  --bg: #ffffff;
  --bg-alt: #f5f6f9;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --text: #12151a;
  --text-muted: #565d66;
  --border: #e4e6ea;
  --border-strong: #d3d6db;
  --dot: rgba(18,21,26,.055);     /* ambient dot-grid color */

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-eyebrow: .8rem;
  --lh-tight: 1.1;
  --lh-body: 1.62;
  --tracking-display: -0.03em;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px;

  /* Radius */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(16,18,22,.05);
  --shadow: 0 1px 2px rgba(16,18,22,.04), 0 10px 28px rgba(16,18,22,.07);
  --shadow-lg: 0 8px 24px rgba(16,18,22,.08), 0 24px 60px rgba(16,18,22,.10);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .55s;

  /* Layout */
  --maxw: 1140px;

  /* Band tint (translucent so the fixed ambient layer shows through) */
  --band-tint: rgba(18,21,26,.035);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-1: #6ea8fe;
    --accent-2: #b18cfe;

    --ok: #34d399;   --ok-bg: rgba(52,211,153,.14);
    --warn: #fbbf24; --warn-bg: rgba(251,191,36,.14);
    --stale: #fb7185; --stale-bg: rgba(251,113,133,.15);

    --bg: #08090b;
    --bg-alt: #0f1114;
    --surface: #14171c;
    --surface-2: #191d23;
    --text: #eef0f2;
    --text-muted: #9aa1ab;
    --border: #262a30;
    --border-strong: #333941;
    --dot: rgba(255,255,255,.045);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.5);

    --band-tint: rgba(255,255,255,.022);
  }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* prevent horizontal scroll without making body a scroll container */
}

/* Fixed ambient background: a faint dot-grid + soft colour glows that stay
   behind every section as you scroll (so no section reads as flat/plain). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 28px 28px;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 14% 12%, color-mix(in srgb, var(--accent-1) 16%, transparent), transparent 62%),
    radial-gradient(42% 50% at 86% 40%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 62%),
    radial-gradient(40% 46% at 24% 86%, color-mix(in srgb, var(--stale) 10%, transparent), transparent 62%),
    radial-gradient(46% 52% at 78% 96%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 64%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: var(--sp-3);
}

.grad-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--text-muted); }

h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 800;
}
h2 {
  font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 750;
}
h3 { font-size: 1.05rem; font-weight: 650; line-height: 1.3; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  white-space: nowrap;
}
.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-primary { background: var(--accent-grad); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47,95,224,.34); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.btn-ghost:hover { border-color: var(--accent-1); color: var(--accent-1); }
.arrow-down { transition: transform .15s var(--ease); }
.btn-ghost:hover .arrow-down { transform: translateY(2px); }

/* ---------- Icons ---------- */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }

.icon-badge {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-1) 13%, transparent);
  color: var(--accent-1);
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.icon-badge.tone-ok   { background: var(--ok-bg);   color: var(--ok); }
.icon-badge.tone-warn { background: var(--warn-bg); color: var(--warn); }
.icon-badge.tone-stale{ background: var(--stale-bg);color: var(--stale); }
.icon-badge-sm { width: 40px; height: 40px; }
.icon-badge-sm .icon { width: 20px; height: 20px; }

/* icons lift a touch when their card is hovered */
.feature-card:hover .icon-badge,
.steps li:hover .icon-badge { transform: translateY(-2px) scale(1.06); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--border); }

.nav-inner { display: flex; align-items: center; gap: var(--sp-5); padding-block: 15px; }

.logo { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--text); }
.logo-dot { color: var(--accent-1); }

.nav-links { display: flex; gap: var(--sp-6); margin-left: auto; font-size: .92rem; font-weight: 500; }
.nav-links a { color: var(--text-muted); transition: color .15s var(--ease); }
.nav-links a:hover { color: var(--text); }

.nav-contact { font-size: .92rem; font-weight: 600; color: var(--accent-1); }
.nav-contact:hover { text-decoration: underline; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer; margin-left: auto;
}
.nav-toggle span { display: block; height: 2px; width: 17px; margin: 0 auto; background: var(--text); transition: transform .2s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile { display: none; flex-direction: column; padding-block: 4px 18px; border-bottom: 1px solid var(--border); }
.nav-mobile a { padding: 14px 4px; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 500; }
.nav-mobile a.nav-contact { color: var(--accent-1); border-bottom: 0; }
.nav-mobile.open { display: flex; }

@media (max-width: 820px) {
  .nav-links, .nav-inner > .nav-contact { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- Section rhythm + backgrounds ---------- */
section { padding: clamp(56px, 8vw, 92px) 0; position: relative; }
/* Bands use a translucent tint so the fixed ambient layer shows through. */
.band { background: var(--band-tint); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- Hero ---------- */
.hero { padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 112px); overflow: hidden; }
.hero-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(100px); opacity: .34; pointer-events: none; animation: float 18s ease-in-out infinite; }
.hero-glow-a { background: var(--accent-1); top: -180px; left: -140px; }
.hero-glow-b { background: var(--accent-2); top: 20px; right: -180px; animation-delay: -9s; }
@keyframes float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(34px,44px); } }

.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.hero h1 { margin-bottom: var(--sp-5); }
.lede { color: var(--text-muted); font-size: 1.12rem; max-width: 540px; margin-bottom: var(--sp-6); }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }

/* ---------- Mock UI card (shared look) ---------- */
.mock-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-visual .mock-card { transform: rotate(1deg); animation: cardfloat 9s ease-in-out infinite; }
@keyframes cardfloat { 0%,100% { transform: rotate(1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-10px); } }

.mock-card-head { display: flex; align-items: center; gap: var(--sp-2); padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; }
.mock-dot-r { background: #ff5f57; } .mock-dot-y { background: #febc2e; } .mock-dot-g { background: #28c840; }
.mock-title { margin-left: var(--sp-2); font-size: .82rem; color: var(--text-muted); font-weight: 500; }
.mock-body { padding: 20px; display: flex; flex-direction: column; gap: var(--sp-4); }

.mock-banner {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .82rem; font-weight: 600; color: var(--stale);
  background: var(--stale-bg); border: 1px solid color-mix(in srgb, var(--stale) 30%, transparent);
  border-radius: var(--radius-sm); padding: 10px 12px;
  animation: pulse-stale 2.6s var(--ease) infinite;
}
/* "off" state keeps the banner's box in layout (visibility, not display) so the
   card height stays identical between the before/after states — no page shift. */
.mock-banner.is-off { visibility: hidden; }
@keyframes pulse-stale {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stale) 30%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stale) 0%, transparent); }
}
.mock-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; background: var(--surface-2); transition: border-color .35s var(--ease), background .35s var(--ease); }
.mock-q { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.mock-a { color: var(--text-muted); font-size: .85rem; margin-bottom: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; border-radius: var(--radius-pill);
  padding: 5px 10px; width: fit-content;
}
.pill-ok    { color: var(--ok);    background: var(--ok-bg); }
.pill-warn  { color: var(--warn);  background: var(--warn-bg); }
.pill-stale { color: var(--stale); background: var(--stale-bg); }

.mock-row.is-stale { border-color: color-mix(in srgb, var(--stale) 45%, transparent); background: color-mix(in srgb, var(--stale) 6%, var(--surface-2)); }

/* ---------- Problem cards ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 720px) { .pain-grid { grid-template-columns: 1fr; } }

/* ---------- Product highlights ---------- */
/* Lineage (the differentiator) is a full-width hero row on top; the three
   supporting features sit in an even three-column row beneath it. */
.highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.feature-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 22px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-card h3 { margin-bottom: var(--sp-2); }
.feature-card p { color: var(--text-muted); font-size: .92rem; }

.feature-card.feature-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(26px, 3vw, 36px);
  border-color: color-mix(in srgb, var(--stale) 32%, var(--border));
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--stale) 9%, transparent), transparent 60%),
    color-mix(in srgb, var(--stale) 4%, var(--surface));
}
.feature-hero .tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--stale); margin-bottom: var(--sp-3); }
.feature-hero .icon-badge { animation: tick 4s var(--ease) infinite; }
@keyframes tick { 0%,70%,100% { transform: rotate(0); } 78% { transform: rotate(-22deg); } 86% { transform: rotate(6deg); } 94% { transform: rotate(0); } }
.feature-hero h3 { font-size: 1.3rem; margin-bottom: var(--sp-2); }
.feature-hero > .fh-copy p { color: var(--text-muted); font-size: 1rem; }

/* mini animated demo inside the hero feature card */
.fh-visual { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-4); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); }
.fh-doc { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; font-weight: 600; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.fh-ver { font-size: .72rem; font-weight: 700; color: var(--stale); background: var(--stale-bg); border-radius: var(--radius-pill); padding: 2px 9px; animation: pulse-stale 2.6s var(--ease) infinite; }
.fh-arrow { text-align: center; color: var(--text-muted); font-size: 1rem; line-height: 1; }
.fh-answers { display: flex; flex-direction: column; gap: 8px; }
.fh-ans { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; padding: 8px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.fh-ans span { font-size: .72rem; font-weight: 700; border-radius: var(--radius-pill); padding: 2px 9px; }
.fh-ans.ok span { color: var(--ok); background: var(--ok-bg); }
.fh-ans.flip { border-color: color-mix(in srgb, var(--stale) 45%, transparent); background: color-mix(in srgb, var(--stale) 7%, var(--surface-2)); animation: flipglow 2.6s var(--ease) infinite; }
.fh-ans.flip span { color: var(--stale); background: var(--stale-bg); }
@keyframes flipglow { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stale) 26%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }

@media (max-width: 760px) {
  .highlights-grid { grid-template-columns: 1fr; }
  .feature-card.feature-hero { grid-template-columns: 1fr; }
}

/* ---------- Lineage spotlight (centerpiece) ---------- */
.lineage-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.lineage-copy .checklist { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.lineage-copy .checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-muted); font-size: .95rem; }
.lineage-copy .checklist .icon { color: var(--ok); flex-shrink: 0; margin-top: 1px; }

.lineage-demo { display: flex; flex-direction: column; gap: var(--sp-3); }
.lineage-caption { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: .82rem; color: var(--text-muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: live-pulse 2s var(--ease) infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

@media (max-width: 900px) { .lineage-inner { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.steps li { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.steps li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-num { position: absolute; top: -13px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: .85rem; }
.steps h3 { margin-bottom: var(--sp-2); }
.steps p { color: var(--text-muted); font-size: .9rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Compare ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.compare-col { border-radius: var(--radius-lg); padding: 30px 26px; border: 1px solid var(--border); }
.compare-col h3 { margin-bottom: var(--sp-4); }
.compare-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.compare-col li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: .92rem; }
.compare-them { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.compare-them li { color: var(--text-muted); }
.compare-us { background: color-mix(in srgb, var(--accent-1) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent-1) 32%, var(--border)); }
.compare-col .icon { flex-shrink: 0; margin-top: 1px; }
.mark-x { color: var(--stale); } .mark-ok { color: var(--ok); }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }

/* ---------- Contact (plain text, no button) ---------- */
.contact { text-align: center; }
.contact .wrap { max-width: 640px; }
.contact h2 { margin-bottom: var(--sp-4); }
.contact p { color: var(--text-muted); font-size: 1.05rem; margin: 0 auto; }
.contact .email-line { margin-top: var(--sp-5); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem); font-weight: 700; }
.contact .email-line a { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .15s var(--ease); }
.contact .email-line a:hover { opacity: .8; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: var(--sp-6) 0; color: var(--text-muted); font-size: .85rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.footer-inner .logo { font-size: 1.05rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-glow, .hero-visual .mock-card, .mock-banner, .feature-hero .icon-badge, .fh-ver, .fh-ans.flip, .live-dot { animation: none; }
  html { scroll-behavior: auto; }
  .mock-row, .btn { transition: none; }
}