/* ---- Cyber Green / Matrix Theme (Hexapod Walker) ---- */
:root {
  --page-bg: #060E08;
  --page-bg-gradient: linear-gradient(170deg, #060E08 0%, #0A1410 40%, #080E0A 100%);
  --pattern-image: repeating-linear-gradient(0deg, rgba(0,200,80,.3) 0, rgba(0,200,80,.3) 1px, transparent 1px, transparent 8px);
  --pattern-opacity: 0.03;

  --orb1-bg: radial-gradient(circle, rgba(0,200,80,.12) 0%, transparent 70%);
  --orb1-top: -60px; --orb1-right: 40px; --orb1-size: 280px;
  --orb2-bg: radial-gradient(circle, rgba(0,100,40,.1) 0%, transparent 70%);
  --orb2-bottom: 80px; --orb2-left: -50px; --orb2-size: 200px;

  --font-display: 'Orbitron', monospace;
  --font-body: 'Exo 2', sans-serif;
  --font-mono: 'Orbitron', monospace;

  --text-primary: #90C8A0;
  --text-heading: #C8F0D8;
  --text-secondary: #508860;
  --text-muted: #306040;
  --text-secondary-dark: #90C8A0;

  --accent-1: #00C850;
  --accent-1-dark: #009840;
  --accent-2: #00A840;
  --accent-2-dark: #007830;
  --accent-3: #60D890;
  --accent-3-dark: #40B870;
  --accent-4: #F59E0B;
  --accent-4-dark: #D97706;

  --card-bg: rgba(255,255,255,.02);
  --card-border: 1px solid rgba(0,200,80,.08);
  --card-border-color: rgba(0,200,80,.08);
  --card-radius: 6px;
  --card-shadow: none;
  --card-accent-dir: 180deg;

  --card-dark-bg: rgba(0,100,40,.15);
  --card-dark-text: #90C8A0;
  --card-dark-title: #00C850;
  --card-dark-body: #508860;

  --highlight-bg: linear-gradient(135deg, rgba(0,200,80,.06), rgba(0,100,40,.06));
  --highlight-border-color: rgba(0,200,80,.2);
  --highlight-border-width: 1px;

  --badge-bg: rgba(0,200,80,.06);
  --badge-border-color: rgba(0,200,80,.25);
  --badge-border-width: 1.5px;
  --badge-text: #60D890;

  --dot-radius: 2px;

  --bullet-color: #00C850;
  --bullet-radius: 50%;
  --bullet-opacity: 0.7;

  --step-radius: 4px;
  --step-1-color: #00C850;
  --step-2-color: #00A840;
  --step-3-color: #60D890;
  --step-4-color: #F59E0B;
  --step-5-color: #9B59B6;
  --step-6-color: #00C850;

  --tag-bg-1: rgba(0,200,80,.1);  --tag-color-1: #60D890;
  --tag-bg-2: rgba(0,168,64,.1);  --tag-color-2: #00C850;
  --tag-bg-3: rgba(96,216,144,.1);--tag-color-3: #60D890;
  --tag-bg-4: rgba(245,158,11,.1);--tag-color-4: #FBBF24;

  --chip-bg: rgba(0,200,80,.05);
  --chip-color: #508860;
  --chip-border: rgba(0,200,80,.1);

  --glow-bg-1: rgba(0,200,80,.06);
  --glow-bg-2: rgba(0,100,40,.06);
  --glow-border: rgba(0,200,80,.18);

  --cta-border: rgba(0,200,80,.1);
  --btn-bg: linear-gradient(135deg, #00C850, #00A840);
  --btn-text: #060E08;
  --btn-font-size: 13px;
  --btn-radius: 4px;
  --btn-shadow: 0 3px 12px rgba(0,200,80,.25);
  --btn-letter-spacing: 2px;
  --btn-transform: uppercase;

  /* Hexapod uses smaller, square-ish step numbers */
  --step-7-color: #00C850;
  --step-8-color: #00A840;

  --title-size: 42px;
  --title-weight: 900;
  --title-letter-spacing: 2px;
  --tagline-size: 11px;
  --tagline-weight: 400;
  --card-title-size: 10px;
  --card-title-transform: uppercase;
  --card-title-spacing: 2px;
  --brand-weight: 700;
}

/* Hexapod orbs: top-left and bottom-right */
.orb-1 { right: auto; left: 40px; }
.orb-2 { left: auto; right: -40px; }

/* Hexapod card titles use accent-1 color */
.card-title { color: var(--accent-1); }

/* Hexapod timeline numbers: smaller, 24px */
.timeline-num {
  min-width: 24px;
  height: 24px;
  font-size: 10px;
  border-radius: 5px;
}

/* Hexapod step 2 uses yellow, step 3 uses blue */
.timeline-num.n2 { background: #EAB308; }
.timeline-num.n3 { background: #3B82F6; }
.timeline-num.n4 { background: var(--step-4-color, #F59E0B); }
.timeline-num.n5 { background: var(--step-1-color); }
.timeline-num.n6 { background: #EAB308; }