/* SharkPanda brand tokens: logo blue, private-browser feel. */
:root {
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --p: #1d6fe0;
  --p-deep: #0a2a66;
  --a: #22d3ee;
  --on-p: #ffffff;
  --p-text: #1d6fe0;
  --p-soft: rgba(29, 111, 224, 0.12);
  --p-line: rgba(29, 111, 224, 0.35);
  --p-shadow: rgba(29, 111, 224, 0.5);
  --grad: linear-gradient(135deg, #1d6fe0 0%, #0b3f94 100%);
  --grad-text: linear-gradient(100deg, #1d6fe0 10%, #22d3ee 90%);

  --bg: #f5f9ff;
  --bg-alt: #eaf3ff;
  --surface: #ffffff;
  --text: #14202f;
  --heading: #0c1c33;
  --muted: #4f5f78;
  --line: #dde8f6;
  --line-strong: #c2d4ec;
  --radius: 20px;
  --btn-radius: 999px;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.7);

  --hdr-bg: rgba(255, 255, 255, 0.62);
  --hdr-bg-solid: rgba(255, 255, 255, 0.98);
  --hdr-line: rgba(255, 255, 255, 0.8);
  --hdr-text: #0c1c33;
  --hdr-muted: #4f5f78;
  --hdr-hover: rgba(29, 111, 224, 0.08);

  --hero-bg: linear-gradient(135deg, #e8f1ff 0%, #e2f8fd 38%, #eaf2fd 72%, #e1ecfd 100%);
  --hero-text: #0c1c33;
  --hero-muted: #455671;
  --blob-1: rgba(29, 111, 224, 0.45);
  --blob-2: rgba(34, 211, 238, 0.4);
  --blob-3: rgba(11, 63, 148, 0.35);
  --grid-line: rgba(29, 111, 224, 0.11);
  --fx-1: #1d6fe0;
  --fx-2: #60a5fa;
  --fx-3: #22d3ee;
  --chip-bg: rgba(255, 255, 255, 0.7);
  --chip-text: #0c1c33;
  --chip-line: rgba(255, 255, 255, 0.9);

  --marquee-bg: #ffffff;

  --dark-bg: radial-gradient(120% 90% at 10% 0%, #0e3a80 0%, #0a2d66 45%, #061a3d 100%);
  --dark-text: #dbeafe;
  --dark-muted: #a9c3e6;
  --dark-card: rgba(255, 255, 255, 0.06);
  --dark-line: rgba(255, 255, 255, 0.12);

  --foot-bg: #061a3d;
  --foot-text: #d3e4fb;
  --foot-muted: #8fb0dc;
  --foot-line: rgba(255, 255, 255, 0.1);
}

/* SharkPanda touches */
.brand img { background: #fff; }
.sec-dark .eyebrow, .foot h4 { color: #9fb0ff; }
.step::before { color: var(--a); }