/* ==========================================================================
   ProCharger Brand Kit — single source of truth for color, type & effects.
   Loaded site-wide (and mirrored in the CRM Brand Standards). Inline styles in
   the page still win unless a .pcc-* class marks an element !important, so the
   kit upgrades key surfaces (hero, headings) without a full rewrite.
   ========================================================================== */
:root {
  /* — Lane / brand colors — */
  --pcc-blue:      #16B6FF;  --pcc-blue-2:    #5AC8FF;   /* Carpet & Floor / primary */
  --pcc-pink:      #FF2D9B;  --pcc-pink-2:    #FF5FB0;   /* House Cleaning */
  --pcc-crimson:   #E5393C;  --pcc-crimson-2: #FF6A5A;   /* Restoration */
  --pcc-green:     #22C55E;                              /* profit / success */
  --pcc-amber:     #F59E0B;                              /* caution */

  /* — Surfaces & text — */
  --pcc-bg:    #0B0F1C;  --pcc-bg-2: #10182E;
  --pcc-hair:  rgba(255,255,255,.08);
  --pcc-ink:   #FFFFFF;  --pcc-sub: #C7D0E4;  --pcc-muted: #8693B3;

  /* — Gradients — */
  --pcc-grad-brand: linear-gradient(95deg, var(--pcc-blue), var(--pcc-pink));
  --pcc-grad-ground: radial-gradient(120% 90% at 50% 0%, var(--pcc-bg-2) 0%, var(--pcc-bg) 55%, #070A13 100%);

  /* — Typography — */
  --pcc-font-display: "Bebas Neue", "Saira Condensed", sans-serif; /* poster headlines */
  --pcc-font-head:    "Saira Condensed", sans-serif;               /* section heads, labels */
  --pcc-font-body:    "Barlow", sans-serif;                        /* body copy */

  /* — Effects — */
  --pcc-radius: 18px;  --pcc-radius-pill: 999px;
  --pcc-glow-blue:    0 0 26px rgba(22,182,255,.7);
  --pcc-glow-pink:    0 0 26px rgba(255,45,155,.7);
  --pcc-glow-crimson: 0 0 26px rgba(233,69,60,.7);
}

/* — Type utilities (marked important to upgrade inline-styled elements) — */
.pcc-display   { font-family: var(--pcc-font-display) !important; font-weight: 400 !important; }
.pcc-head      { font-family: var(--pcc-font-head) !important; }
.pcc-body      { font-family: var(--pcc-font-body) !important; }

/* Hero eyebrow — wide-tracked label */
.pcc-hero-eyebrow {
  font-family: var(--pcc-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .34em !important;
  text-transform: uppercase;
}

/* Hero mega-headline — Bebas poster face, tighter and larger than the old Saira */
.pcc-hero-title {
  font-family: var(--pcc-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  line-height: .88 !important;
  /* Sized to hold "CLEAN. RESTORE. RECOVER." on one line at desktop; wraps
     naturally on phones. */
  font-size: clamp(42px, 6.4vw, 74px) !important;
  white-space: nowrap;
}
/* On phones let it wrap instead of overflowing. */
@media (max-width: 640px) { .pcc-hero-title { white-space: normal; } }

/* Department label + chip */
.pcc-lane-name {
  font-family: var(--pcc-font-head) !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
}
.pcc-chip {
  font-family: var(--pcc-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
}

/* Buttons in the hero pick up the head font for a sportier feel */
.pcc-btn {
  font-family: var(--pcc-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}

/* ==========================================================================
   Hero arena (homepage) — depth, stage lighting & subtle motion.
   Turns the flat three-mech row into a lit "arena": ambient top light, faint
   automotive light streaks, per-mech spotlights that breathe, and mechs that
   gently hover (staggered). Respects prefers-reduced-motion.
   ========================================================================== */
[data-tri-hero] { position: relative; }
.pcc-arena {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 32% at 50% 0%, rgba(130,175,255,.13), transparent 70%),
    linear-gradient(116deg, transparent 43%, rgba(22,182,255,.055) 50%, transparent 57%),
    linear-gradient(64deg, transparent 45%, rgba(255,45,155,.05) 50%, transparent 55%),
    radial-gradient(120% 72% at 50% 130%, rgba(0,0,0,.55), transparent 60%);
}
[data-tri-inner] { position: relative; z-index: 2; }

[data-tri-mech] { animation: pccFloat 6s ease-in-out infinite; will-change: transform; }
[data-tri-col]:nth-child(2) [data-tri-mech] { animation-delay: -2s; }
[data-tri-col]:nth-child(3) [data-tri-mech] { animation-delay: -4s; }
.pcc-spot { animation: pccBreathe 5.5s ease-in-out infinite; }
[data-tri-col]:nth-child(2) .pcc-spot { animation-delay: -1.8s; }
[data-tri-col]:nth-child(3) .pcc-spot { animation-delay: -3.4s; }
@keyframes pccFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pccBreathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-tri-mech], .pcc-spot { animation: none !important; }
}