/* Iron Shore Roofing — Stat bar redesign
   --------------------------------------------------------------------------
   Replaces the flat solid-blue "500+ / 60+ / 100% / 30-Yr" strip with a
   more modern, dimensional treatment: a diagonal brand-blue gradient with a
   soft corner glow, individual glass-panel stat cards (instead of a plain
   row with hairline dividers), and a small icon per stat. Numerals are
   larger and tighter-tracked for more visual weight.

   The count-up animation itself lives in the React bundle and fires on
   scroll into view exactly as before — this file is presentation only, no
   markup or animation logic is touched.
   ========================================================================== */

.stat-bar {
  background: linear-gradient(135deg, var(--color-primary-light, #3b7ef5) 0%, var(--color-primary, #1a5fd4) 58%, #0e3a8f 100%);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

/* Soft glow in the top-left corner for depth, instead of a flat fill. */
.stat-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 140% at 12% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

/* Soft vignette so the bar meets the sections above/below gently instead of
   a hard flat-color cut. */
.stat-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 26px 22px -26px rgba(0,0,0,0.32), inset 0 -26px 22px -26px rgba(0,0,0,0.32);
  pointer-events: none;
}

.stat-bar-inner {
  position: relative;
  z-index: 1;
  align-items: stretch !important;
}

/* Individual glass cards replace the old hairline-divider row. */
.stat-bar .stat-item + .stat-item {
  border-left: none;
}

.stat-item {
  position: relative;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 26px 30px 22px;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .stat-item:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.34);
  }
}

/* One small icon per stat, matched to what it represents. Plain white
   glyphs at low-key opacity so they read as accents, not decoration. */
.stat-item::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.92;
}

/* Roofs Completed — house */
.stat-item:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10'/%3E%3C/svg%3E");
}

/* Towns Served — map pin */
.stat-item:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.4 7-12a7 7 0 1 0-14 0c0 4.6 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* Satisfaction Rate — star */
.stat-item:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* Max Warranty — shield check */
.stat-item:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.stat-bar .stat-value {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.22);
}

.stat-bar .stat-label {
  color: rgba(255,255,255,0.84);
  margin-top: 6px;
}

@media (max-width: 767px) {
  .stat-bar { padding: 24px 0; }
  .stat-bar-inner { gap: 8px !important; }
  .stat-item {
    width: 100%;
    padding: 12px 16px 10px;
  }
  .stat-item::before {
    width: 18px;
    height: 18px;
    margin: 0 auto 6px;
  }
  .stat-bar .stat-value { font-size: clamp(19px, 5.5vw, 22px) !important; }
  .stat-bar .stat-label { margin-top: 1px; }
}