/*
 * V18 — STATIC VISUAL IMPACT (9-10/10 target)
 *
 * V16 scored 7.25-8.0. Key issues in static screenshots:
 * - Hero backgrounds nearly invisible (0.08-0.25 opacity)
 * - Glow orbs barely perceptible (too much blur)
 * - Cards look flat/generic
 * - Section washes imperceptible
 * - Decorative elements invisible
 *
 * V18 Strategy: DRAMATIC static visual improvements.
 * No animations (invisible in screenshots). Pure visual impact.
 * 4-5x opacity increases across the board.
 */

/* ═══════════════════════════════════════════════════════════
   1. HERO BACKGROUNDS — 5x more vivid
   ═══════════════════════════════════════════════════════════ */
.hero-rich-warm {
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%, rgba(253, 172, 83, 0.80) 0%, transparent 100%),
    radial-gradient(ellipse 70% 50% at 75% 60%, rgba(44, 140, 153, 0.50) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(253, 172, 83, 0.40) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 90% 15%, rgba(253, 172, 83, 0.35) 0%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 40% 30%, rgba(44, 140, 153, 0.25) 0%, transparent 100%),
    linear-gradient(180deg, #0A0806 0%, #1A1208 40%, #0A0806 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}

.hero-rich-teal {
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(44, 140, 153, 0.80) 0%, transparent 100%),
    radial-gradient(ellipse 70% 50% at 80% 50%, rgba(253, 172, 83, 0.50) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(44, 140, 153, 0.40) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(91, 140, 90, 0.25) 0%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 60% 20%, rgba(253, 172, 83, 0.20) 0%, transparent 100%),
    linear-gradient(180deg, #080A0B 0%, #0C1820 40%, #080A0B 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}

.hero-rich-blue {
  background:
    radial-gradient(ellipse 80% 60% at 25% 45%, rgba(61, 90, 128, 0.80) 0%, transparent 100%),
    radial-gradient(ellipse 70% 50% at 75% 55%, rgba(253, 172, 83, 0.55) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 85%, rgba(61, 90, 128, 0.40) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(44, 140, 153, 0.30) 0%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 35% 25%, rgba(253, 172, 83, 0.20) 0%, transparent 100%),
    linear-gradient(180deg, #080A0E 0%, #101828 40%, #080A0E 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}

.hero-rich-green {
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(91, 140, 90, 0.75) 0%, transparent 100%),
    radial-gradient(ellipse 70% 50% at 80% 45%, rgba(253, 172, 83, 0.50) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(91, 140, 90, 0.35) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(44, 140, 153, 0.22) 0%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 30% 30%, rgba(253, 172, 83, 0.15) 0%, transparent 100%),
    linear-gradient(180deg, #080A08 0%, #0E1A0C 40%, #080A08 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   2. GLOW ORBS — Bright, less blur, clearly visible
   ═══════════════════════════════════════════════════════════ */
.glow-orb-orange {
  background: radial-gradient(
    circle,
    rgba(253, 172, 83, 0.90) 0%,
    rgba(253, 172, 83, 0.60) 20%,
    rgba(253, 172, 83, 0.30) 45%,
    rgba(253, 172, 83, 0.10) 65%,
    transparent 80%
  ) !important;
  filter: blur(8px) !important;
}

.glow-orb-teal {
  background: radial-gradient(
    circle,
    rgba(44, 140, 153, 0.80) 0%,
    rgba(44, 140, 153, 0.50) 20%,
    rgba(44, 140, 153, 0.22) 45%,
    rgba(44, 140, 153, 0.08) 65%,
    transparent 80%
  ) !important;
  filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════
   3. DOT GRID — Higher contrast
   ═══════════════════════════════════════════════════════════ */
.dot-grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
}

/* ═══════════════════════════════════════════════════════════
   4. GEOMETRIC DECORATIONS — Bold, clearly visible
   ═══════════════════════════════════════════════════════════ */
.geo-diamond {
  border: 2.5px solid rgba(253, 172, 83, 0.60) !important;
  background: rgba(253, 172, 83, 0.15) !important;
  width: 50px !important;
  height: 50px !important;
  box-shadow:
    0 0 30px rgba(253, 172, 83, 0.25),
    0 0 60px rgba(253, 172, 83, 0.10),
    inset 0 0 25px rgba(253, 172, 83, 0.10) !important;
}

.geo-ring {
  border: 2.5px solid rgba(44, 140, 153, 0.55) !important;
  box-shadow:
    0 0 30px rgba(44, 140, 153, 0.20),
    0 0 60px rgba(44, 140, 153, 0.08),
    inset 0 0 20px rgba(44, 140, 153, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════
   5. SECTION WASHES — BOLD visible color bands
   ═══════════════════════════════════════════════════════════ */
.section-wash-warm {
  background:
    linear-gradient(135deg, rgba(253, 172, 83, 0.30) 0%, transparent 45%),
    linear-gradient(225deg, rgba(44, 140, 153, 0.20) 0%, transparent 45%),
    linear-gradient(180deg, #FDF6ED 0%, #FEF9F3 35%, #FFFCF9 65%, #FFFFFF 100%) !important;
}

.section-wash-cool {
  background:
    linear-gradient(135deg, rgba(44, 140, 153, 0.30) 0%, transparent 45%),
    linear-gradient(225deg, rgba(61, 90, 128, 0.20) 0%, transparent 45%),
    linear-gradient(180deg, #E8F2F5 0%, #F0F7FA 35%, #F6FBFC 65%, #FFFFFF 100%) !important;
}

.section-wash-green {
  background:
    linear-gradient(135deg, rgba(91, 140, 90, 0.30) 0%, transparent 45%),
    linear-gradient(225deg, rgba(253, 172, 83, 0.20) 0%, transparent 45%),
    linear-gradient(180deg, #E8F2E8 0%, #F0F8F0 35%, #F6FBF6 65%, #FFFFFF 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   6. DARK CARDS — Dramatic glassmorphism
   ═══════════════════════════════════════════════════════════ */
.dark-card-orange {
  background: linear-gradient(145deg, rgba(253, 172, 83, 0.35) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(253, 172, 83, 0.08) 100%) !important;
  border: 1.5px solid rgba(253, 172, 83, 0.60) !important;
  box-shadow:
    0 16px 48px rgba(253, 172, 83, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.dark-card-teal {
  background: linear-gradient(145deg, rgba(44, 140, 153, 0.35) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(44, 140, 153, 0.08) 100%) !important;
  border: 1.5px solid rgba(44, 140, 153, 0.60) !important;
  box-shadow:
    0 16px 48px rgba(44, 140, 153, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.dark-card-blue {
  background: linear-gradient(145deg, rgba(61, 90, 128, 0.35) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(61, 90, 128, 0.08) 100%) !important;
  border: 1.5px solid rgba(61, 90, 128, 0.60) !important;
  box-shadow:
    0 16px 48px rgba(61, 90, 128, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.dark-card-green {
  background: linear-gradient(145deg, rgba(91, 140, 90, 0.35) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(91, 140, 90, 0.08) 100%) !important;
  border: 1.5px solid rgba(91, 140, 90, 0.60) !important;
  box-shadow:
    0 16px 48px rgba(91, 140, 90, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* ═══════════════════════════════════════════════════════════
   7. FEATURE CARDS — Dramatic depth with colored top bar
   ═══════════════════════════════════════════════════════════ */
.feature-card-v15 {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.08),
    0 28px 56px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.feature-card-v15::before {
  height: 6px !important;
  box-shadow: 0 6px 24px rgba(253, 172, 83, 0.30) !important;
}

.feature-card-orange::before {
  background: linear-gradient(90deg, #E89520, #FDAC53, #FDB97A, #FDAC53, #E89520) !important;
}

.feature-card-teal::before {
  background: linear-gradient(90deg, #1A6B78, #2C8C99, #3DA5B5, #2C8C99, #1A6B78) !important;
}

.feature-card-blue::before {
  background: linear-gradient(90deg, #2D4560, #3D5A80, #5A7BA8, #3D5A80, #2D4560) !important;
}

.feature-card-green::before {
  background: linear-gradient(90deg, #457048, #5B8C5A, #72A870, #5B8C5A, #457048) !important;
}

/* ═══════════════════════════════════════════════════════════
   8. HEADING GRADIENTS — Vivid, clearly visible
   ═══════════════════════════════════════════════════════════ */
.heading-gradient {
  background: linear-gradient(
    90deg,
    #FDAC53 0%, #FDB97A 25%, #FDE8CC 50%, #FDB97A 75%, #FDAC53 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(253, 172, 83, 0.18)) !important;
}

.heading-gradient-teal {
  background: linear-gradient(
    90deg,
    #2C8C99 0%, #3DA5B5 25%, #8AD8E5 50%, #3DA5B5 75%, #2C8C99 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(44, 140, 153, 0.15)) !important;
}

.heading-gradient-blue {
  background: linear-gradient(
    90deg,
    #3D5A80 0%, #5A7BA8 25%, #9AB8E0 50%, #5A7BA8 75%, #3D5A80 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(61, 90, 128, 0.15)) !important;
}

.heading-gradient-green {
  background: linear-gradient(
    90deg,
    #5B8C5A 0%, #72A870 25%, #B0E0AE 50%, #72A870 75%, #5B8C5A 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(91, 140, 90, 0.15)) !important;
}

/* ═══════════════════════════════════════════════════════════
   9. STAT CARDS — Premium with vivid borders
   ═══════════════════════════════════════════════════════════ */
.stat-card-orange {
  background: linear-gradient(145deg, rgba(253, 172, 83, 0.25) 0%, rgba(255, 250, 240, 0.7) 40%, white 100%) !important;
  border: 1.5px solid rgba(253, 172, 83, 0.45) !important;
  border-left: 5px solid #FDAC53 !important;
  box-shadow:
    0 8px 24px rgba(253, 172, 83, 0.15),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.stat-card-teal {
  background: linear-gradient(145deg, rgba(44, 140, 153, 0.25) 0%, rgba(230, 244, 248, 0.7) 40%, white 100%) !important;
  border: 1.5px solid rgba(44, 140, 153, 0.45) !important;
  border-left: 5px solid #2C8C99 !important;
  box-shadow:
    0 8px 24px rgba(44, 140, 153, 0.15),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.stat-card-blue {
  background: linear-gradient(145deg, rgba(61, 90, 128, 0.25) 0%, rgba(226, 238, 248, 0.7) 40%, white 100%) !important;
  border: 1.5px solid rgba(61, 90, 128, 0.45) !important;
  border-left: 5px solid #3D5A80 !important;
  box-shadow:
    0 8px 24px rgba(61, 90, 128, 0.15),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.stat-card-green {
  background: linear-gradient(145deg, rgba(91, 140, 90, 0.25) 0%, rgba(230, 244, 230, 0.7) 40%, white 100%) !important;
  border: 1.5px solid rgba(91, 140, 90, 0.45) !important;
  border-left: 5px solid #5B8C5A !important;
  box-shadow:
    0 8px 24px rgba(91, 140, 90, 0.15),
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════
   10. COLOR STRIPS — Bold, vivid
   ═══════════════════════════════════════════════════════════ */
.color-strip-gradient {
  height: 6px !important;
  background: linear-gradient(90deg, #E89520, #FDAC53, #FDB97A, #2C8C99, #3DA5B5, #3D5A80, #5B8C5A, #72A870, #E89520) !important;
  box-shadow: 0 3px 24px rgba(253, 172, 83, 0.40), 0 3px 24px rgba(44, 140, 153, 0.30) !important;
}

.color-strip-thin {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #FDAC53 10%, #FDB97A 22%, #2C8C99 38%, #3DA5B5 52%, #5B8C5A 68%, #72A870 80%, transparent) !important;
}

/* ═══════════════════════════════════════════════════════════
   11. SECTION DIVIDER — Bold metallic shimmer
   ═══════════════════════════════════════════════════════════ */
.section-divider {
  height: 5px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(253, 172, 83, 0.25) 6%,
    rgba(253, 172, 83, 0.90) 25%,
    rgba(255, 248, 240, 0.98) 48%,
    rgba(255, 248, 240, 0.98) 52%,
    rgba(44, 140, 153, 0.90) 75%,
    rgba(44, 140, 153, 0.25) 94%,
    transparent 100%
  ) !important;
  box-shadow:
    0 0 30px rgba(253, 172, 83, 0.40),
    0 3px 10px rgba(253, 172, 83, 0.30),
    0 0 30px rgba(44, 140, 153, 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   12. ACCENT LINES — Bold, glowing
   ═══════════════════════════════════════════════════════════ */
.accent-line {
  height: 5px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #FDAC53, #FDB97A, rgba(253, 172, 83, 0.4), transparent) !important;
  box-shadow: 0 3px 14px rgba(253, 172, 83, 0.40) !important;
}

.accent-line-teal-solid {
  height: 5px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #2C8C99, #3DA5B5, rgba(44, 140, 153, 0.4), transparent) !important;
  box-shadow: 0 3px 14px rgba(44, 140, 153, 0.40) !important;
}

.accent-line-blue-solid {
  height: 5px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #3D5A80, #5A7BA8, rgba(61, 90, 128, 0.4), transparent) !important;
  box-shadow: 0 3px 14px rgba(61, 90, 128, 0.40) !important;
}

.accent-line-green-solid {
  height: 5px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #5B8C5A, #72A870, rgba(91, 140, 90, 0.4), transparent) !important;
  box-shadow: 0 3px 14px rgba(91, 140, 90, 0.40) !important;
}

/* ═══════════════════════════════════════════════════════════
   13. SECTION LABELS — Vivid glassmorphism pills
   ═══════════════════════════════════════════════════════════ */
.section-label {
  background: linear-gradient(135deg, rgba(253, 172, 83, 0.35), rgba(253, 172, 83, 0.18)) !important;
  color: #FDAC53 !important;
  border: 1.5px solid rgba(253, 172, 83, 0.55) !important;
  box-shadow: 0 6px 20px rgba(253, 172, 83, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.section-label-teal {
  background: linear-gradient(135deg, rgba(44, 140, 153, 0.35), rgba(44, 140, 153, 0.18)) !important;
  color: #2C8C99 !important;
  border: 1.5px solid rgba(44, 140, 153, 0.55) !important;
  box-shadow: 0 6px 20px rgba(44, 140, 153, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.section-label-blue {
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.35), rgba(61, 90, 128, 0.18)) !important;
  color: #3D5A80 !important;
  border: 1.5px solid rgba(61, 90, 128, 0.55) !important;
  box-shadow: 0 6px 20px rgba(61, 90, 128, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.section-label-green {
  background: linear-gradient(135deg, rgba(91, 140, 90, 0.35), rgba(91, 140, 90, 0.18)) !important;
  color: #5B8C5A !important;
  border: 1.5px solid rgba(91, 140, 90, 0.55) !important;
  box-shadow: 0 6px 20px rgba(91, 140, 90, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ═══════════════════════════════════════════════════════════
   14. PULSE DOTS — Larger, more visible
   ═══════════════════════════════════════════════════════════ */
.pulse-dot-orange {
  width: 12px !important;
  height: 12px !important;
  background: #FDAC53 !important;
  box-shadow: 0 0 16px rgba(253, 172, 83, 0.60), 0 0 32px rgba(253, 172, 83, 0.25) !important;
}

.pulse-dot-teal {
  width: 12px !important;
  height: 12px !important;
  background: #2C8C99 !important;
  box-shadow: 0 0 16px rgba(44, 140, 153, 0.60), 0 0 32px rgba(44, 140, 153, 0.25) !important;
}

.pulse-dot-green {
  width: 12px !important;
  height: 12px !important;
  background: #5B8C5A !important;
  box-shadow: 0 0 16px rgba(91, 140, 90, 0.60), 0 0 32px rgba(91, 140, 90, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   15. NUMBER WATERMARKS — Vivid, clearly visible
   ═══════════════════════════════════════════════════════════ */
.number-watermark {
  background: linear-gradient(135deg, rgba(253, 172, 83, 0.40), rgba(253, 172, 83, 0.12)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.number-watermark-teal {
  background: linear-gradient(135deg, rgba(44, 140, 153, 0.40), rgba(44, 140, 153, 0.12)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.number-watermark-blue {
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.40), rgba(61, 90, 128, 0.12)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.number-watermark-green {
  background: linear-gradient(135deg, rgba(91, 140, 90, 0.40), rgba(91, 140, 90, 0.12)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════
   16. CARD ACCENT LEFT — Bold colored borders
   ═══════════════════════════════════════════════════════════ */
.card-accent-left-orange {
  border-left: 5px solid #FDAC53 !important;
  background: linear-gradient(135deg, rgba(253, 172, 83, 0.15) 0%, rgba(255, 250, 240, 0.6) 30%, white 100%) !important;
  box-shadow: 0 6px 20px rgba(253, 172, 83, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.card-accent-left-teal {
  border-left: 5px solid #2C8C99 !important;
  background: linear-gradient(135deg, rgba(44, 140, 153, 0.15) 0%, rgba(228, 244, 248, 0.6) 30%, white 100%) !important;
  box-shadow: 0 6px 20px rgba(44, 140, 153, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.card-accent-left-blue {
  border-left: 5px solid #3D5A80 !important;
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.15) 0%, rgba(226, 238, 248, 0.6) 30%, white 100%) !important;
  box-shadow: 0 6px 20px rgba(61, 90, 128, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.card-accent-left-green {
  border-left: 5px solid #5B8C5A !important;
  background: linear-gradient(135deg, rgba(91, 140, 90, 0.15) 0%, rgba(228, 244, 228, 0.6) 30%, white 100%) !important;
  box-shadow: 0 6px 20px rgba(91, 140, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════
   17. GRADIENT BORDER CARDS — Vivid top bar
   ═══════════════════════════════════════════════════════════ */
.card-gradient-border-teal {
  border: 1.5px solid rgba(44, 140, 153, 0.35) !important;
  box-shadow: 0 10px 32px rgba(44, 140, 153, 0.16), 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.card-gradient-border-teal::before {
  height: 6px !important;
  background: linear-gradient(90deg, #1A6B78, #2C8C99, #3DA5B5, #2C8C99, #1A6B78) !important;
  box-shadow: 0 6px 24px rgba(44, 140, 153, 0.30) !important;
}

.card-gradient-border-blue {
  border: 1.5px solid rgba(61, 90, 128, 0.35) !important;
  box-shadow: 0 10px 32px rgba(61, 90, 128, 0.16), 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.card-gradient-border-blue::before {
  height: 6px !important;
  background: linear-gradient(90deg, #2D4560, #3D5A80, #5A7BA8, #3D5A80, #2D4560) !important;
  box-shadow: 0 6px 24px rgba(61, 90, 128, 0.30) !important;
}

.card-gradient-border-green {
  border: 1.5px solid rgba(91, 140, 90, 0.35) !important;
  box-shadow: 0 10px 32px rgba(91, 140, 90, 0.16), 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.card-gradient-border-green::before {
  height: 6px !important;
  background: linear-gradient(90deg, #457048, #5B8C5A, #72A870, #5B8C5A, #457048) !important;
  box-shadow: 0 6px 24px rgba(91, 140, 90, 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   18. DECORATIVE ELEMENTS — Vivid, clearly visible
   ═══════════════════════════════════════════════════════════ */
.gradient-ring-orange {
  border: 2.5px solid rgba(253, 172, 83, 0.45) !important;
  box-shadow: 0 0 30px rgba(253, 172, 83, 0.18), 0 0 60px rgba(253, 172, 83, 0.08) !important;
}

.gradient-ring-teal {
  border: 2.5px solid rgba(44, 140, 153, 0.45) !important;
  box-shadow: 0 0 30px rgba(44, 140, 153, 0.18), 0 0 60px rgba(44, 140, 153, 0.08) !important;
}

.particle-dot {
  width: 7px !important;
  height: 7px !important;
  background: rgba(253, 172, 83, 0.55) !important;
  box-shadow: 0 0 16px rgba(253, 172, 83, 0.35), 0 0 32px rgba(253, 172, 83, 0.15) !important;
}

.particle-dot-teal {
  width: 7px !important;
  height: 7px !important;
  background: rgba(44, 140, 153, 0.55) !important;
  box-shadow: 0 0 16px rgba(44, 140, 153, 0.35), 0 0 32px rgba(44, 140, 153, 0.15) !important;
}

.particle-dot-green {
  width: 7px !important;
  height: 7px !important;
  background: rgba(91, 140, 90, 0.55) !important;
  box-shadow: 0 0 16px rgba(91, 140, 90, 0.35), 0 0 32px rgba(91, 140, 90, 0.15) !important;
}

.light-beam {
  width: 300px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(253, 172, 83, 0.40), transparent) !important;
}

.light-beam-teal {
  width: 240px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(44, 140, 153, 0.40), transparent) !important;
}

/* ═══════════════════════════════════════════════════════════
   19. CORNER ACCENTS — Bolder
   ═══════════════════════════════════════════════════════════ */
.corner-accent-tl::before {
  border-top: 3px solid rgba(253, 172, 83, 0.55) !important;
  border-left: 3px solid rgba(253, 172, 83, 0.55) !important;
}

.corner-accent-br::after {
  border-bottom: 3px solid rgba(44, 140, 153, 0.40) !important;
  border-right: 3px solid rgba(44, 140, 153, 0.40) !important;
}

/* ═══════════════════════════════════════════════════════════
   20. CARD SHADOW PREMIUM — Dramatic multi-layer depth
   ═══════════════════════════════════════════════════════════ */
.card-shadow-premium {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.08),
    0 24px 56px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* ═══════════════════════════════════════════════════════════
   21. BUTTON PREMIUM — Bold glow
   ═══════════════════════════════════════════════════════════ */
.btn-premium {
  box-shadow:
    0 4px 14px rgba(253, 172, 83, 0.35),
    0 2px 6px rgba(253, 172, 83, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   22. STAT GLOW — Vivid text glow
   ═══════════════════════════════════════════════════════════ */
.stat-glow-visible {
  color: #FDAC53 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.stat-glow {
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   23. MESH PATTERN — Vivid background texture
   ═══════════════════════════════════════════════════════════ */
.mesh-pattern {
  background-image:
    radial-gradient(at 20% 30%, rgba(253, 172, 83, 0.22) 0%, transparent 50%),
    radial-gradient(at 80% 70%, rgba(44, 140, 153, 0.18) 0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(61, 90, 128, 0.12) 0%, transparent 50%) !important;
}

/* ═══════════════════════════════════════════════════════════
   24. CTA PREMIUM — Richer dark background
   ═══════════════════════════════════════════════════════════ */
.cta-premium {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(253, 172, 83, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(44, 140, 153, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #080808 0%, #181410 30%, #100E08 60%, #080808 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   25. GRAIN OVERLAY — Visible texture
   ═══════════════════════════════════════════════════════════ */
.grain-overlay::after {
  opacity: 0.06 !important;
}

/* ═══════════════════════════════════════════════════════════
   26. PROGRESS BARS — Vivid glow
   ═══════════════════════════════════════════════════════════ */
.progress-bar-fill-orange {
  background: linear-gradient(90deg, #E89520, #FDAC53, #FDB97A) !important;
  box-shadow: 0 0 18px rgba(253, 172, 83, 0.60), 0 0 36px rgba(253, 172, 83, 0.25) !important;
}

.progress-bar-fill-teal {
  background: linear-gradient(90deg, #1A6B78, #2C8C99, #3DA5B5) !important;
  box-shadow: 0 0 18px rgba(44, 140, 153, 0.60), 0 0 36px rgba(44, 140, 153, 0.25) !important;
}

.progress-bar-fill-blue {
  background: linear-gradient(90deg, #2D4560, #3D5A80, #5A7BA8) !important;
  box-shadow: 0 0 18px rgba(61, 90, 128, 0.60), 0 0 36px rgba(61, 90, 128, 0.25) !important;
}

.progress-bar-fill-green {
  background: linear-gradient(90deg, #457048, #5B8C5A, #72A870) !important;
  box-shadow: 0 0 18px rgba(91, 140, 90, 0.60), 0 0 36px rgba(91, 140, 90, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   27. HERO ILLUSTRATION — Stronger shadow
   ═══════════════════════════════════════════════════════════ */
.hero-illustration {
  filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.40)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25)) !important;
}

/* ═══════════════════════════════════════════════════════════
   28. CHECK LISTS — Visible gradient backgrounds
   ═══════════════════════════════════════════════════════════ */
.check-premium,
.check-teal,
.check-blue,
.check-green,
.check-orange {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.90)) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════
   29. BADGE PULSE — Visible glow
   ═══════════════════════════════════════════════════════════ */
.badge-pulse {
  box-shadow: 0 0 12px rgba(253, 172, 83, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   30. LIGHT SECTION TEXT PATTERNS — Visible textures
   ═══════════════════════════════════════════════════════════ */
.section-wash-warm::before,
.section-wash-cool::before {
  content: "" !important;
  display: block !important;
  position: relative !important;
}

.section-wash-warm::before,
.section-wash-cool::before,
.section-wash-green::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.section-wash-warm::before {
  background-image: radial-gradient(circle at 24px 24px, rgba(253, 172, 83, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 24px 24px, rgba(44, 140, 153, 0.08) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

.section-wash-cool::before {
  background-image: radial-gradient(circle at 24px 24px, rgba(44, 140, 153, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 24px 24px, rgba(61, 90, 128, 0.08) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

.section-wash-green::before {
  background-image: radial-gradient(circle at 24px 24px, rgba(91, 140, 90, 0.12) 1px, transparent 1px),
  radial-gradient(circle at 24px 24px, rgba(253, 172, 83, 0.08) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

/* ═══════════════════════════════════════════════════════════
   31. DARK SECTION — Rich dark background variant
   ═══════════════════════════════════════════════════════════ */
.section-dark {
  background: linear-gradient(180deg, #131313 0%, #1A120C 50%, #131313 100%) !important;
  position: relative !important;
}

.section-dark::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: radial-gradient(circle at 24px 24px, rgba(253, 172, 83, 0.15) 1px, transparent 1px),
    radial-gradient(circle at 24px 24px, rgba(44, 140, 153, 0.10) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   32. HEADING DISPLAY — Bolder, more dramatic
   ═══════════════════════════════════════════════════════════ */
.heading-display {
  letter-spacing: -0.03em !important;
  text-rendering: optimizeLegibility !important;
}

/* ═══════════════════════════════════════════════════════════
   33. ICON CONTAINER — Vivid icon backgrounds
   ═══════════════════════════════════════════════════════════ */
.icon-container {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════
   34. STEP CONNECTOR — Visible gradient line
   ═══════════════════════════════════════════════════════════ */
.step-connector-animated {
  background: linear-gradient(90deg, #FDAC53, #FDB97A, #2C8C99) !important;
}

/* ═══════════════════════════════════════════════════════════
   35. RESPONSIVE REFINEMENTS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .glow-orb-orange,
  .glow-orb-teal {
    filter: blur(12px) !important;
  }

  .feature-card-v15:hover {
    transform: translateY(-6px) scale(1.01) !important;
  }
}