/* ==========================================================================
   Investi-gator — global styles

   Everything shared across the page lives here: design tokens, base
   elements, nav, hero, the section shell, and the footer. Anything used by
   a single section lives in its own file instead:

     features.css      → #features   (detector cards)
     how-it-works.css  → #passive    (highlight panel, mock feed) + steps
     demo.css          → #demo       (screenshot / video placeholders)
     updates.css       → #updates    (patch notes feed + popup)
     tech.css          → #tech       (brand-colored tech stack badges)

   Load order matters: main.css must come first, since the section files
   depend on the tokens defined below.
   ========================================================================== */

/* Design tokens ---------------------------------------------------------- */
:root {
  --bg: #0b0f0d;
  --bg-soft: #111714;
  --card: #141c18;
  --card-border: #22302a;
  --text: #e7efe9;
  --text-dim: #9db0a6;
  --accent: #34d399;
  --accent-deep: #10b981;
  --accent-glow: rgba(52, 211, 153, 0.15);
  --warn: #fbbf24;
  --danger: #f87171;
  /* AI-text detection. Same blue family as the AI Text badge in
     views/detection-styles.js, so the sentence heat map on the playground
     reads as the same signal as the badge it explains. */
  --ai: #60a5fa;
  --radius: 16px;
  --maxw: 1080px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6faf7;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-border: #dce7e0;
    --text: #0f1a15;
    --text-dim: #567064;
    --accent: #059669;
    --accent-deep: #047857;
    --accent-glow: rgba(5, 150, 105, 0.10);
    --ai: #2563eb;
  }
}

/* Base ------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible to screen readers, not on screen. Used for form labels whose
   purpose is already obvious from the surrounding layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Centered page gutter, used by every section */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Nav -------------------------------------------------------------------- */
nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--card-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}

/* Also used in the footer */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.brand .logo { font-size: 1.4rem; }

/* On playground.html the nav brand is a link home rather than plain text.
   These keep it looking identical to the <div> version on index.html. */
nav a.brand { color: var(--text); }
nav a.brand:hover { text-decoration: none; color: var(--accent); }

.nav-links { display: flex; gap: 22px; font-size: 0.92rem; }
.nav-links a { color: var(--text-dim); transition: color 0.15s ease; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

/* Applied by main.js as the matching section scrolls into view */
.nav-links a.is-active { color: var(--accent); }

@media (max-width: 640px) {
  .nav-links { display: none; }
}

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 0%, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}

.hero .logo-badge {
  font-size: 3.4rem;
  display: inline-block;
  margin-bottom: 18px;
  filter: drop-shadow(0 6px 20px var(--accent-glow));
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}

.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p.lede {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--text-dim);
  max-width: 660px;
  margin: 0 auto 28px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

/* Hero pill under the headline. The tech stack used to share this, but now
   renders as brand-colored badges instead (see tech.css). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text-dim);
}

/* Detection badge ---------------------------------------------------------
   Shared by the mock feed on index.html and by live model output on
   playground.html, so it lives here rather than in either page's file.

   Colors come from BADGE_STYLES (views/detection-styles.js) and are applied
   inline — by main.js on index.html, by IGShared.badgeMarkup on the
   playground. The rules below cover layout only, plus a neutral fallback
   appearance for when JavaScript is unavailable. */
.flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--card);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
}

.flag svg { display: block; flex-shrink: 0; }

/* Post avatar, shared by the same two pages. */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card-border);
  flex-shrink: 0;
}

/* Buttons ---------------------------------------------------------------- */
.cta {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary {
  background: var(--accent);
  color: #05130d;
  box-shadow: 0 8px 24px var(--accent-glow);
}

.btn-primary:hover { transform: translateY(-2px); text-decoration: none; }

.btn-ghost {
  border: 1px solid var(--card-border);
  color: var(--text);
  background: var(--card);
}

.btn-ghost:hover { border-color: var(--accent); text-decoration: none; }

/* Section shell ----------------------------------------------------------
   Wrapper and headings shared by every content section. */
section.block {
  padding: 68px 0;
  border-top: 1px solid var(--card-border);
}

.eyebrow {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.section-lede {
  color: var(--text-dim);
  max-width: 640px;
  font-size: 1.05rem;
  margin: 0 0 40px;
}


/* Footer ----------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--card-border);
  padding: 44px 0;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.footer-inner .brand { color: var(--text); }

.note { font-size: 0.82rem; opacity: 0.75; margin-top: 8px; }

/* Scroll reveal ----------------------------------------------------------
   main.js adds .reveal to eligible elements, then .is-visible as they enter
   the viewport. Targets live in several sections (.feat, .step, .media,
   .highlight), so these rules stay global. Without JS nothing is hidden, so
   the page still reads fine with scripts disabled. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}