/* ============================================================
   SIGNATURE CONCEPT — built from ui-ux-pro-max's "Home Services
   (Plumber/Electrician)" design-system data: Trust Blue + Safety
   Orange + Professional Grey. Same dark-bookend / bright-body
   structure as the hybrid concept, new palette + type system:
   Poppins/Open Sans instead of Oswald/Inter, sentence-case
   headlines instead of all-caps, orange reserved for the
   water-damage emergency callout only.
   ============================================================ */

:root {
  --bg: #f8fafc;
  --bg-elevated: #ffffff;
  --surface-alt: #eef2f7;
  --border: rgba(30,41,59,0.10);

  --text: #0f1b2d;
  --text-muted: #55677a;

  --accent-red: #dc2626;
  --accent-red-deep: #b91c1c;
  --accent-red-shadow: rgba(220,38,38,0.35);

  --accent-blue: #1d4ed8;
  --accent-blue-deep: #1e3a8a;
  --accent-blue-wash: rgba(29,78,216,0.08);
  --accent-blue-wash-strong: rgba(29,78,216,0.25);

  --accent-orange: #ea580c;
  --accent-orange-deep: #c2410c;

  --header-bg: rgba(11,17,48,0.92);

  --baf-before-bg: radial-gradient(circle at 30% 20%, #a68e6d, transparent 55%), radial-gradient(circle at 70% 70%, #8f7a5e, transparent 60%), #b7a281;
  --baf-after-bg: radial-gradient(circle at 40% 30%, #ffffff, transparent 55%), #e7edf5;

  --media-placeholder-bg: linear-gradient(135deg, #eef2f7, #dde5ee);

  --cta-bg: linear-gradient(135deg, #0b1130, #16204a);
  --cta-text: #f5f7fb;
  --cta-text-muted: #a9b4c8;

  --footer-bg: #080b22;
  --footer-text: #8a96ab;
  --footer-heading: #f2f4f8;
  --footer-muted: #626f83;
  --footer-border: rgba(255,255,255,0.08);
}

body {
  position: relative;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

h1 { font-weight: 700; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 900px 500px at 100% 0%, rgba(29,78,216,0.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 45%, rgba(90,110,135,0.05), transparent 60%);
}

.section.alt {
  background-image: radial-gradient(circle, rgba(15,27,45,0.035) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-color: var(--surface-alt);
}

.btn-primary { box-shadow: 0 14px 28px -14px var(--accent-red-shadow); }

/* safety orange — reserved for the water-damage emergency callout only,
   so it keeps its hazard signal value instead of becoming a background color */
.specialty-pill.urgent {
  border-color: var(--accent-orange-deep);
  color: var(--accent-orange-deep);
  background: rgba(234,88,12,0.06);
}

/* ---------------- dark zone: header, hero, mobile menu ---------------- */

.site-header,
.hero,
.mobile-menu {
  --bg-elevated: #131a3a;
  --surface-alt: #182050;
  --border: rgba(255,255,255,0.10);
  --text: #f2f4f8;
  --text-muted: #a3aec2;
  --accent-blue: #5b8def;
  --accent-blue-deep: #3a63c9;
  --accent-blue-wash: rgba(91,141,239,0.16);
  --accent-blue-wash-strong: rgba(91,141,239,0.35);
  --baf-before-bg: radial-gradient(circle at 30% 20%, #4a3628, transparent 55%), radial-gradient(circle at 70% 70%, #3a2a20, transparent 60%), #2b2119;
  --baf-after-bg: radial-gradient(circle at 40% 30%, #ffffff, transparent 55%), #cdd8ea;
}

.site-header {
  background: var(--header-bg);
  color: var(--text);
}

.mobile-menu {
  background: #080b22;
  color: var(--text);
}

.hero {
  background: #0b1130;
  color: var(--text);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 800px 500px at 15% 0%, rgba(91,141,239,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 30%, rgba(234,88,12,0.08), transparent 60%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
}