/* ==========================================================================
   LLM Tracker — llmtracker.xenrion.net
   Aesthetic: monitoring instrument. Near-black ground, hairline rules instead
   of shadowed cards, editorial serif against technical mono, one signal accent.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Ground: warm-shifted near-black so the lime doesn't read as neon-on-grey */
  --ink:        #07090A;
  --ink-2:      #0B0E0F;
  --ink-3:      #101415;

  /* Hairlines carry the structure — no box-shadows anywhere in this design */
  --line:        rgba(226,240,214,.09);
  --line-strong: rgba(226,240,214,.17);

  --text:  #E7ECE4;
  --dim:   #8D968C;
  --dim-2: #626A61;

  /* Single sharp accent. Everything else is a neutral. */
  --signal:      #C6F24E;
  --signal-dim:  rgba(198,242,78,.14);
  --signal-line: rgba(198,242,78,.34);

  /* Competitor ramp: desaturated so "you" always wins the eye */
  --c1: #5E7F8C;
  --c2: #46545C;
  --c3: #2E383D;
  --c4: #1A2124;

  --f-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --f-sans:    'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 3px;                       /* tight radius — instrument, not app-store icon */
  --shell: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Film grain — kills the flatness of a large dark field */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.030;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
svg{ display:block; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--signal); color:#0A0D05; padding:10px 16px;
  font:500 13px/1 var(--f-mono);
}
.skip-link:focus{ left:12px; top:12px; }

/* Shared eyebrow: mono, uppercase, with a live dot */
.eyebrow{
  font:500 11px/1 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); display:flex; align-items:center; gap:9px; margin-bottom:22px;
}
.eyebrow-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 0 3px var(--signal-dim);
}

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:500 14px/1 var(--f-sans); letter-spacing:.01em;
  padding:14px 24px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.btn-primary{ background:var(--signal); color:#0A0D05; font-weight:600; }
.btn-primary:hover{ background:#D4FA65; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--text); }
.btn-ghost:hover{ border-color:var(--signal-line); color:var(--signal); }
.btn-ghost:hover svg{ transform:translateX(3px); }
.btn-sm{ padding:10px 17px; font-size:13px; }

/* ---------- 4. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,9,10,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:28px; height:66px; }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ color:var(--signal); }
.brand-mark svg{ width:19px; height:19px; }
.brand-text{ font:600 16px/1 var(--f-sans); letter-spacing:-.015em; }
.brand-thin{ color:var(--dim); font-weight:400; }

.site-nav{ display:flex; gap:28px; margin-left:auto; }
.site-nav a{
  font-size:14px; color:var(--dim);
  transition:color .2s var(--ease);
}
.site-nav a:hover{ color:var(--text); }

.header-actions{ display:flex; align-items:center; gap:16px; }
/* The small login link the app lives behind (/app) */
.login-link{
  font:500 13px/1 var(--f-mono); letter-spacing:.03em;
  color:var(--dim); padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.login-link:hover{ color:var(--signal); border-bottom-color:var(--signal-line); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; padding:0 7px;
  background:none; border:1px solid var(--line-strong); border-radius:var(--r);
}
.nav-toggle span{ display:block; height:1.5px; background:var(--text); transition:transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero{ position:relative; padding:clamp(64px,9vw,110px) 0 clamp(70px,8vw,100px); overflow:hidden; }
/* Off-centre glow: keeps the composition asymmetric */
.hero-glow{
  position:absolute; top:-25%; left:52%; width:min(880px,95vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(198,242,78,.10) 0%, rgba(198,242,78,.03) 38%, transparent 66%);
  pointer-events:none;
}
.hero-grid-lines{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 75% 55% at 50% 32%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 32%, #000 25%, transparent 78%);
}
.hero-inner{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(40px,5vw,70px); align-items:center;
}
.hero-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.55rem,5.6vw,4.35rem); line-height:1.03; letter-spacing:-.018em;
  margin-bottom:26px;
}
.hero-title em{ color:var(--signal); }
.hero-sub{
  font-size:clamp(15px,1.15vw,17px); color:var(--dim);
  max-width:53ch; margin-bottom:34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; }
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:28px;
  font:400 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim-2);
}
.hero-meta i{ width:3px; height:3px; border-radius:50%; background:var(--dim-2); }

/* ---------- 6. Readout panel ---------- */
.panel{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg, var(--ink-3) 0%, var(--ink-2) 58%);
  border:1px solid var(--line-strong); border-radius:var(--r);
  padding:clamp(20px,2.2vw,26px);
}
/* Slow radar sweep — the one ambient animation on the page */
.panel-scan{
  position:absolute; left:0; right:0; height:130px; top:-130px;
  background:linear-gradient(180deg, transparent, rgba(198,242,78,.055), transparent);
  animation:sweep 7.5s linear infinite;
}
@keyframes sweep{ to{ transform:translateY(calc(100% + 900px)); } }

.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:15px; border-bottom:1px solid var(--line);
}
.panel-label{
  display:flex; align-items:center; gap:8px;
  font:500 11px/1 var(--f-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--dim);
}
.live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--signal);
  animation:pulse 2.1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(198,242,78,.5); }
  70%    { box-shadow:0 0 0 6px rgba(198,242,78,0); }
}
.panel-range{ font:400 11px/1 var(--f-mono); color:var(--dim-2); letter-spacing:.08em; }

.panel-metric{ padding:22px 0 6px; }
.metric-value{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3rem,4.6vw,3.9rem); line-height:1; letter-spacing:-.02em;
  color:var(--signal); font-variant-numeric:tabular-nums;
}
.metric-delta{
  display:inline-flex; align-items:center; gap:5px; margin-top:11px;
  font:500 12px/1 var(--f-mono);
  color:var(--signal); background:var(--signal-dim);
  border:1px solid var(--signal-line); border-radius:var(--r); padding:5px 9px;
}
.metric-delta svg{ width:11px; height:11px; }
.metric-caption{ margin-top:13px; font-size:13px; color:var(--dim-2); }

.panel-block{ padding-top:22px; margin-top:20px; border-top:1px solid var(--line); }
.panel-block-title{
  font:500 10px/1 var(--f-mono); letter-spacing:.17em; text-transform:uppercase;
  color:var(--dim-2); margin-bottom:13px;
}

/* Stacked answer-share bar */
.stack{ display:flex; gap:2px; height:9px; margin-bottom:13px; }
.stack-seg{
  width:0; border-radius:1px;
  transition:width 1.1s var(--ease);
}
.panel.in-view .stack-seg{ width:var(--w); }
.stack-seg.is-you{ background:var(--signal); }
.stack-seg.is-c1{ background:var(--c1); }
.stack-seg.is-c2{ background:var(--c2); }
.stack-seg.is-c3{ background:var(--c3); }
.stack-seg.is-rest{ background:var(--c4); }

.legend{ display:flex; flex-wrap:wrap; gap:14px; font:400 11px/1 var(--f-mono); color:var(--dim-2); }
.legend li{ display:flex; align-items:center; gap:6px; }
.legend i{ width:7px; height:7px; border-radius:1px; }
.k-you{ background:var(--signal); } .k-c1{ background:var(--c1); }
.k-c2{ background:var(--c2); }     .k-rest{ background:var(--c4); }

/* Per-engine bars */
.bars li{ display:flex; align-items:center; gap:11px; padding:5px 0; }
.bar-name{ flex:0 0 84px; font:400 11.5px/1 var(--f-mono); color:var(--dim); }
.bar-track{ flex:1; height:5px; background:rgba(226,240,214,.06); border-radius:1px; overflow:hidden; }
.bar-fill{
  display:block; height:100%; width:0; border-radius:1px;
  background:linear-gradient(90deg, rgba(198,242,78,.45), var(--signal));
  transition:width 1.2s var(--ease);
}
.panel.in-view .bar-fill{ width:var(--w); }
.bar-num{
  flex:0 0 34px; text-align:right;
  font:500 11.5px/1 var(--f-mono); color:var(--text); font-variant-numeric:tabular-nums;
}

/* Citation feed */
.panel-feed{ padding-top:22px; margin-top:20px; border-top:1px solid var(--line); }
.feed-row{
  display:flex; align-items:center; gap:10px; padding:6px 0 6px 10px;
  border-left:1.5px solid transparent;
  font:400 11.5px/1.45 var(--f-mono); color:var(--dim-2);
  transition:color .4s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease);
  opacity:.55;
}
.feed-row.is-on{ border-left-color:var(--signal); color:var(--dim); opacity:1; }
.feed-engine{ flex:0 0 66px; color:var(--text); }
.feed-row.is-on .feed-engine{ color:var(--signal); }
.feed-q{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-src{ flex-shrink:0; }

/* ---------- 7. Coverage strip ---------- */
.models{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-2); }
.models-inner{ display:flex; align-items:center; gap:clamp(20px,4vw,48px); padding-block:22px; flex-wrap:wrap; }
.models-label{
  font:500 10px/1 var(--f-mono); letter-spacing:.19em; text-transform:uppercase;
  color:var(--dim-2); flex-shrink:0;
}
.models-list{ display:flex; flex-wrap:wrap; gap:clamp(18px,3.2vw,40px); }
.models-list li{
  font:500 13px/1 var(--f-sans); letter-spacing:.02em; color:var(--dim);
  transition:color .25s var(--ease);
}
.models-list li:hover{ color:var(--text); }

/* ---------- 8. Sections ---------- */
.section{ padding:clamp(72px,9vw,118px) 0; }
.section-alt{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:clamp(44px,5vw,64px); }
.section-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,4vw,3.15rem); line-height:1.07; letter-spacing:-.015em;
  margin-bottom:20px;
}
.section-title em{ color:var(--signal); }
.section-sub{ color:var(--dim); font-size:16px; max-width:54ch; }

/* Features: a hairline table, deliberately not a card grid.
   1px grid gap over a line-coloured background paints the rules for free. */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.feature{
  background:var(--ink); padding:clamp(26px,2.6vw,34px);
  transition:background .3s var(--ease);
}
.feature:hover{ background:var(--ink-3); }
.feature-num{
  display:block; font:500 11px/1 var(--f-mono); letter-spacing:.1em;
  color:var(--signal); margin-bottom:18px;
}
.feature h3{ font:600 17px/1.3 var(--f-sans); letter-spacing:-.01em; margin-bottom:11px; }
.feature p{ font-size:14.5px; color:var(--dim); }

/* Benefits: open columns with serif numerals — a different texture to features */
.benefit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(34px,4vw,54px) clamp(40px,5vw,72px); }
.benefit{ border-top:1px solid var(--line-strong); padding-top:24px; }
.benefit-stat{
  font-family:var(--f-display); font-size:2.4rem; line-height:1;
  color:var(--signal); margin-bottom:16px;
}
.benefit h3{ font:600 19px/1.3 var(--f-sans); letter-spacing:-.012em; margin-bottom:11px; }
.benefit p{ font-size:15px; color:var(--dim); max-width:44ch; }

/* ---------- 9. CTA ---------- */
.cta{ position:relative; padding:clamp(80px,10vw,130px) 0; overflow:hidden; }
.cta::before{
  content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(760px,92vw); aspect-ratio:1.6;
  background:radial-gradient(ellipse, rgba(198,242,78,.09), transparent 68%);
  pointer-events:none;
}
.cta-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.06; letter-spacing:-.018em; margin-bottom:18px;
}
.cta-title em{ color:var(--signal); }
.cta-sub{ color:var(--dim); margin-bottom:32px; max-width:48ch; }

/* ---------- 10. Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:44px 0 40px; background:var(--ink-2); }
.footer-inner{ display:flex; flex-wrap:wrap; gap:26px 40px; align-items:flex-start; }
.footer-brand p{ font-size:13.5px; color:var(--dim-2); margin-top:9px; max-width:34ch; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:22px; margin-left:auto; }
.footer-nav a{ font-size:13.5px; color:var(--dim); transition:color .2s var(--ease); }
.footer-nav a:hover{ color:var(--signal); }
.footer-legal{
  width:100%; padding-top:26px; border-top:1px solid var(--line);
  font:400 11.5px/1 var(--f-mono); color:var(--dim-2); letter-spacing:.05em;
}

/* ---------- 11. Reveal on scroll ---------- */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.in-view{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
/* Stagger items inside a grid so rows cascade rather than pop as a block */
.js .feature-grid .reveal:nth-child(2),
.js .benefit-grid .reveal:nth-child(2){ transition-delay:.07s; }
.js .feature-grid .reveal:nth-child(3),
.js .benefit-grid .reveal:nth-child(3){ transition-delay:.14s; }
.js .feature-grid .reveal:nth-child(4),
.js .benefit-grid .reveal:nth-child(4){ transition-delay:.21s; }
.js .feature-grid .reveal:nth-child(5){ transition-delay:.28s; }
.js .feature-grid .reveal:nth-child(6){ transition-delay:.35s; }
.js .hero-copy.reveal{ transition-delay:.05s; }
.js .panel.reveal{ transition-delay:.2s; }

/* ---------- 12. Responsive ---------- */
@media (max-width:1020px){
  .hero-inner{ grid-template-columns:1fr; gap:48px; }
  .hero-sub{ max-width:60ch; }
  .panel{ max-width:520px; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:absolute; top:66px; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 18px;
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .35s var(--ease), opacity .25s var(--ease);
  }
  .site-nav.is-open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .site-nav a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .site-nav a:last-child{ border-bottom:none; }
  .header-actions{ margin-left:auto; }
}
@media (max-width:660px){
  .header-inner{ height:60px; gap:14px; }
  .site-nav{ top:60px; }
  .btn-sm{ display:none; }             /* keep only the small login link on mobile */
  .feature-grid{ grid-template-columns:1fr; }
  .benefit-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-title{ font-size:clamp(2.1rem,8.5vw,2.9rem); }
  .footer-nav{ margin-left:0; }
  .bar-name{ flex-basis:74px; }
  .feed-q{ display:none; }             /* engine + source stay legible at 375px */
}
@media (max-width:400px){
  .metric-value{ font-size:2.6rem; }
  .legend{ gap:10px; }
}

/* ---------- 13. Motion & print preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .panel-scan{ display:none; }
  .stack-seg{ width:var(--w); }
  .bar-fill{ width:var(--w); }
}