/* Demo page color themes. These only apply to the sample/demo sites. */
.demo-theme {
  --demo-bg: #061827;
  --demo-bg-alt: #0b2035;
  --demo-bg-dark: #04111e;
  --demo-card: rgba(18, 50, 77, .98);
  --demo-card-2: rgba(10, 34, 56, .98);
  --demo-border: rgba(111, 159, 192, .24);
  --demo-accent: #e4a23a;
  --demo-accent-2: #55a8df;
  --demo-button-text: #061827;
}

.demo-theme .page-hero {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--demo-accent-2) 30%, transparent), transparent 34%), radial-gradient(circle at 20% 0, color-mix(in srgb, var(--demo-accent) 18%, transparent), transparent 28%), linear-gradient(135deg, var(--demo-bg), var(--demo-bg-alt) 52%, var(--demo-bg-dark));
}

.demo-theme .section { background: var(--demo-bg); }
.demo-theme .section.alt { background: linear-gradient(180deg, var(--demo-bg-alt), var(--demo-bg)); }
.demo-theme .section.dark { background: var(--demo-bg-dark); }

.demo-theme .card,
.demo-theme .hero-card {
  background: linear-gradient(180deg, var(--demo-card), var(--demo-card-2));
  border-color: var(--demo-border);
}

.demo-theme .cta-panel {
  background: linear-gradient(135deg, var(--demo-card), var(--demo-bg-dark));
  border-color: var(--demo-border);
}

.demo-theme .eyebrow,
.demo-theme .breadcrumb,
.demo-theme .nav-links a.active,
.demo-theme .site-footer a:hover { color: var(--demo-accent); }

.demo-theme .btn-primary,
.demo-theme .btn-dark,
.demo-theme .step:before {
  background: linear-gradient(135deg, var(--demo-accent), color-mix(in srgb, var(--demo-accent) 72%, #000 28%));
  color: var(--demo-button-text);
}

.demo-theme .btn-secondary {
  border-color: color-mix(in srgb, var(--demo-accent-2) 45%, transparent);
  background: color-mix(in srgb, var(--demo-accent-2) 12%, transparent);
}

.demo-theme .icon {
  color: var(--demo-accent);
  background: color-mix(in srgb, var(--demo-accent-2) 18%, transparent);
  border-color: color-mix(in srgb, var(--demo-accent-2) 35%, transparent);
}

.demo-theme .check-list li:before,
.demo-theme .feature-list li:before { color: var(--demo-accent); }

.demo-theme .case-image {
  background: linear-gradient(135deg, color-mix(in srgb, var(--demo-accent-2) 25%, transparent), color-mix(in srgb, var(--demo-accent) 14%, transparent)), var(--demo-bg-alt);
  border-color: var(--demo-border);
}

.demo-theme .site-header {
  background: color-mix(in srgb, var(--demo-bg-dark) 92%, transparent);
  border-bottom-color: var(--demo-border);
}

.demo-theme .site-footer {
  background: color-mix(in srgb, var(--demo-bg-dark) 88%, #000 12%);
  border-top-color: var(--demo-border);
}

.demo-contractor {
  --demo-bg: #151b22;
  --demo-bg-alt: #202b36;
  --demo-bg-dark: #0b1118;
  --demo-card: rgba(42, 51, 60, .98);
  --demo-card-2: rgba(26, 34, 43, .98);
  --demo-border: rgba(196, 151, 68, .28);
  --demo-accent: #f0a83a;
  --demo-accent-2: #6f8798;
  --demo-button-text: #111827;
}

.demo-food {
  --demo-bg: #24130f;
  --demo-bg-alt: #371c16;
  --demo-bg-dark: #120907;
  --demo-card: rgba(70, 33, 23, .98);
  --demo-card-2: rgba(43, 20, 15, .98);
  --demo-border: rgba(239, 125, 50, .30);
  --demo-accent: #ef7d32;
  --demo-accent-2: #f4c27a;
  --demo-button-text: #1f1209;
}

.demo-service {
  --demo-bg: #0f241d;
  --demo-bg-alt: #17362b;
  --demo-bg-dark: #071410;
  --demo-card: rgba(28, 68, 52, .98);
  --demo-card-2: rgba(16, 45, 35, .98);
  --demo-border: rgba(66, 197, 138, .28);
  --demo-accent: #42c58a;
  --demo-accent-2: #6fb4d4;
  --demo-button-text: #06140f;
}

.demo-author {
  --demo-bg: #170f24;
  --demo-bg-alt: #241735;
  --demo-bg-dark: #0d0914;
  --demo-card: rgba(57, 32, 74, .98);
  --demo-card-2: rgba(33, 20, 48, .98);
  --demo-border: rgba(181, 140, 255, .30);
  --demo-accent: #f0c36a;
  --demo-accent-2: #b58cff;
  --demo-button-text: #170f24;
}