/* =============================================
   04-components.css — Brand Color Standardization Patch
   Apply after all other stylesheets (orange #f19839 enforcement)
   ============================================= */
/* ============================================================
   BRAND COLOR STANDARDIZATION PATCH
   Rule: All left-column UI elements use #f19839 orange only.
   Diagram internals (layers, nodes, flow) keep contextual colors.
   Apply: paste at the very bottom of style.css
   ============================================================ */


/* ── 1. HOME PAGE ─────────────────────────────────────────── */
/* Already correct — no changes needed                         */


/* ── 2. ABOUT PAGE ────────────────────────────────────────── */
/* Already correct — no changes needed                         */


/* ── 3. INDUSTRIES PAGE ───────────────────────────────────── */
/* Already correct — no changes needed                         */


/* ── 4. SERVICE OVERVIEW PAGE ─────────────────────────────── */
/* Hero uses shared .hero-btn-primary — already orange ✓       */
/* services-icon div removed in favor of dashboard panel ✓     */


/* ── 5. BACKUP PAGE ───────────────────────────────────────── */
/* Already built correctly with orange — no changes needed     */


/* ── 6. CLOUD PAGE ────────────────────────────────────────── */

/* Eyebrow */
.cl-eyebrow {
  color: #f19839;
}
.cl-eyebrow-dot {
  background: #f19839;
  animation: clBlink 1.6s ease-in-out infinite;
}
@keyframes clBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* H1 accent span */
.cl-hero-title span {
  color: #f19839;
}

/* Stats values */
.cl-stat-val {
  color: #f19839;
}

/* Platform pills — orange toned, not multicolour */
.cl-plat-pill {
  background: rgba(241,152,57,0.12);
  border: 1px solid rgba(241,152,57,0.3);
  color: #f19839;
}

/* NOTE: Layer accent colors inside the diagram are intentionally
   kept as blue/purple/green — they encode architectural meaning,
   not brand identity. Do NOT change .cl-layer-* colors.        */


/* ── 7. CONTACT PAGE ──────────────────────────────────────── */
/* Eyebrow */
.ct-eyebrow {
  color: #f19839;
}
.ct-eyebrow-dot {
  background: #f19839;
}

/* Trust icons */
.ct-trust-icon {
  background: rgba(241,152,57,0.15);
  border: 1px solid rgba(241,152,57,0.35);
}

/* Submit button hover — ensure orange not teal */
.ct-submit:hover {
  background: linear-gradient(135deg, #f19839, #F58220);
}

/* Map tab active dot */
.ct-map-tab.active .ct-tab-dot {
  background: #f19839;
}

/* Location card left border */
.ct-loc-card::before {
  background: linear-gradient(180deg, #f19839, #F58220);
}

/* Form head dark — keep dark navy, already correct ✓ */


/* ── GLOBAL RULES — apply to ALL pages ────────────────────── */

/* Every eyebrow blinking dot must use orange */
.bs-eyebrow-dot,
.cl-eyebrow-dot,
.ct-eyebrow-dot,
.ind-eyebrow-dot,
.about-hero-text .hero-eyebrow .eyebrow-dot {
  background: #f19839;
}

/* Every eyebrow tag must use orange */
.bs-eyebrow,
.cl-eyebrow,
.ct-eyebrow,
.ind-eyebrow,
.about-hero-text .hero-eyebrow {
  color: #f19839;
}

/* Every H1 accent span must use orange */
.bs-hero-title span,
.cl-hero-title span,
.ind-hero-title span,
.about-hero-text .hero-title span,
.ct-hero-title span {
  color: #f19839;
}

/* Every stat/metric value must use orange */
.bs-stat-val,
.cl-stat-val,
.hstat-val,
.stat-number {
  color: #f19839;
  background: none;
  -webkit-text-fill-color: #f19839;
}

/* Exception: about page stat-number uses gradient — keep it */
.about-hero-text .stat-number {
  background: linear-gradient(135deg, #f19839, #F58220);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Every divider bar must use orange */
.about-hero-divider,
.ind-hero-divider,
.bs-hero-divider,
.ct-hero-divider {
  background: linear-gradient(90deg, #f19839, #F58220);
}

/* Every hero-btn-primary must be navy → orange on hover */
.hero-btn-primary {
  background: #0d3b88;
  border-color: #0d3b88;
  color: #fff;
}
.hero-btn-primary:hover {
  background: #f58220;
  border-color: #f58220;
  color: #fff;
}

/* Every hero-btn-secondary — white outline, white text */
.hero-btn-secondary {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
}
.hero-btn-secondary:hover {
  background: #fff;
  color: #0f1c3f;
}

/* ── VISUALIZATION INTERNALS — do NOT change ───────────────
   These encode meaning, not brand:
   - .cl-layer-cloud, .cl-layer-sec, .cl-layer-onp (blue/purple/green)
   - .bs-node-src (blue), .bs-node-cld (green)
   - .solar-node-accent (orange — already brand color ✓)
   - .ind-node-circle hover (orange — already brand color ✓)
   - .svc-dot in services dashboard (green = live status ✓)
   ─────────────────────────────────────────────────────────── */