/* ---- Engineering Blue Theme (Arduino Motor Control) ---- */
:root {
  --page-bg: #F0F5FA;
  --page-bg-gradient: linear-gradient(170deg, #F0F5FA 0%, #E8F0F8 50%, #E0EAF5 100%);
  --pattern-image: linear-gradient(rgba(30,80,150,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(30,80,150,.2) 1px, transparent 1px);
  --pattern-size: 32px 32px;
  --pattern-opacity: 0.03;

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

  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'Rajdhani', sans-serif;

  --text-primary: #1E2A3A;
  --text-heading: #1E2A3A;
  --text-secondary: #4A5A6A;
  --text-muted: #7A8A9A;
  --text-secondary-dark: #3A4A5A;

  --accent-1: #1E64C8;
  --accent-1-dark: #1450A0;
  --accent-2: #00B4C8;
  --accent-2-dark: #008A9A;
  --accent-3: #27AE60;
  --accent-3-dark: #1E8449;
  --accent-4: #F59E0B;
  --accent-4-dark: #D97706;

  --card-bg: #fff;
  --card-border: 1px solid rgba(30,100,200,.08);
  --card-border-color: rgba(30,100,200,.08);
  --card-radius: 10px;
  --card-shadow: 0 2px 10px rgba(30,100,200,.06);
  --card-accent-dir: 180deg;

  --card-dark-bg: rgba(30,100,200,.06);
  --card-dark-text: #1E2A3A;
  --card-dark-title: #1E64C8;
  --card-dark-body: #4A5A6A;

  --highlight-bg: linear-gradient(135deg, rgba(30,100,200,.06), rgba(0,180,200,.06));
  --highlight-border-color: rgba(30,100,200,.2);
  --highlight-border-width: 1.5px;

  --badge-bg: rgba(30,100,200,.06);
  --badge-border-color: rgba(30,100,200,.2);
  --badge-border-width: 1.5px;
  --badge-text: #1E64C8;

  --dot-radius: 2px;

  --bullet-color: #1E64C8;
  --bullet-radius: 2px;
  --bullet-opacity: 0.6;

  --step-radius: 4px;
  --step-1-color: #1E64C8;
  --step-2-color: #00B4C8;
  --step-3-color: #27AE60;
  --step-4-color: #F59E0B;

  --tag-bg-1: rgba(30,100,200,.08); --tag-color-1: #1E64C8;
  --tag-bg-2: rgba(0,180,200,.08);  --tag-color-2: #008A9A;
  --tag-bg-3: rgba(39,174,96,.08);  --tag-color-3: #1E8449;
  --tag-bg-4: rgba(245,158,11,.08); --tag-color-4: #D97706;

  --chip-bg: rgba(30,100,200,.05);
  --chip-color: #4A5A6A;
  --chip-border: rgba(30,100,200,.1);

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

  --cta-border: rgba(30,100,200,.1);
  --btn-bg: linear-gradient(135deg, #1E64C8, #00B4C8);
  --btn-text: #fff;
  --btn-font-size: 18px;
  --btn-radius: 6px;
  --btn-shadow: 0 3px 12px rgba(30,100,200,.25);
  --btn-letter-spacing: 1px;

  --motor-col-bg: #F0F8FF;
  --motor-col-border: #D6EAF8;

  --title-size: 52px;
  --title-weight: 700;
  --title-letter-spacing: 1px;
  --tagline-size: 13px;
  --tagline-weight: 400;
  --card-title-size: 17px;
  --card-title-transform: none;
  --card-title-spacing: 0;
  --brand-weight: 700;
}

/* Engineering blue: dashed CTA border, rounded CTA button */
.flyer-cta { border-top-style: dashed; border-top-width: 2px; border-top-color: #D6EAF8; }

/* Square bullet marker with blue border (matches original) */
.card li::before {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 2px solid #0077B6;
  background: #E0F0FA;
  top: 5px;
  opacity: 1;
}