/*
 * V16 Ultra-Bold — Dramatic visual overrides for 9-10/10 target
 *
 * Overrides V12/V15 subtle effects with 3-4x bolder, screenshot-visible treatments.
 * The pages remain unchanged — this CSS layer makes everything dramatically more vivid.
 *
 * Key changes:
 * - Hero backgrounds: 3-4x more vivid multi-gradient meshes
 * - Glow orbs: 3x brighter with visible color halos
 * - Geometric decorations: 3x more visible borders and fills
 * - Dot grids: 2x higher contrast
 * - Dark cards: Much more visible glassmorphism borders
 * - Section washes: Bold, unmistakable color gradients
 * - New: Mesh gradient overlays, light beams, particle decorations
 */

/* ═══════════════════════════════════════════════════════════
   HERO BACKGROUNDS — 3x more vivid multi-gradient meshes
   ═══════════════════════════════════════════════════════════ */
.hero-rich-warm {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(253, 172, 83, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 60%, rgba(44, 140, 153, 0.28) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 90%, rgba(253, 172, 83, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 20%, rgba(253, 172, 83, 0.12) 0%, transparent 30%),
    linear-gradient(180deg, #131313 0%, #1A1714 50%, #131313 100%) !important;
}

.hero-rich-teal {
  background:
    radial-gradient(ellipse at 20% 40%, rgba(44, 140, 153, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(253, 172, 83, 0.28) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(44, 140, 153, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 80%, rgba(91, 140, 90, 0.10) 0%, transparent 30%),
    linear-gradient(180deg, #131313 0%, #141818 50%, #131313 100%) !important;
}

.hero-rich-blue {
  background:
    radial-gradient(ellipse at 25% 45%, rgba(61, 90, 128, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 55%, rgba(253, 172, 83, 0.30) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 85%, rgba(61, 90, 128, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 15%, rgba(44, 140, 153, 0.10) 0%, transparent 30%),
    linear-gradient(180deg, #131313 0%, #14161A 50%, #131313 100%) !important;
}

.hero-rich-green {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(91, 140, 90, 0.40) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 45%, rgba(253, 172, 83, 0.25) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(91, 140, 90, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 80%, rgba(44, 140, 153, 0.08) 0%, transparent 30%),
    linear-gradient(180deg, #131313 0%, #151714 50%, #131313 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   GLOW ORBS — 3x brighter with visible color halos
   ═══════════════════════════════════════════════════════════ */
.glow-orb-orange {
  background: radial-gradient(
    circle,
    rgba(253, 172, 83, 0.50) 0%,
    rgba(253, 172, 83, 0.30) 25%,
    rgba(253, 172, 83, 0.12) 50%,
    transparent 70%
  ) !important;
  filter: blur(8px) !important;
}

.glow-orb-teal {
  background: radial-gradient(
    circle,
    rgba(44, 140, 153, 0.40) 0%,
    rgba(44, 140, 153, 0.22) 25%,
    rgba(44, 140, 153, 0.08) 50%,
    transparent 70%
  ) !important;
  filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════
   GEOMETRIC DECORATIONS — 3x more visible
   ═══════════════════════════════════════════════════════════ */
.geo-diamond {
  border: 2px solid rgba(253, 172, 83, 0.30) !important;
  background: rgba(253, 172, 83, 0.04) !important;
  box-shadow: 0 0 20px rgba(253, 172, 83, 0.10), inset 0 0 20px rgba(253, 172, 83, 0.03) !important;
}

.geo-ring {
  border: 2px solid rgba(44, 140, 153, 0.25) !important;
  box-shadow: 0 0 20px rgba(44, 140, 153, 0.08), inset 0 0 20px rgba(44, 140, 153, 0.03) !important;
}

/* ═══════════════════════════════════════════════════════════
   DOT GRID — 2x higher contrast
   ═══════════════════════════════════════════════════════════ */
.dot-grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px) !important;
  background-size: 28px 28px !important;
}

.dot-grid-light {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1.2px, transparent 1.2px) !important;
  background-size: 28px 28px !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION WASHES — Bold, unmistakable color
   ═══════════════════════════════════════════════════════════ */
.section-wash-warm {
  background:
    linear-gradient(135deg, rgba(253, 172, 83, 0.12) 0%, transparent 50%),
    linear-gradient(225deg, rgba(44, 140, 153, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #FFFCF8 0%, #FEF9F3 40%, #FFFFFF 100%) !important;
}

.section-wash-cool {
  background:
    linear-gradient(135deg, rgba(44, 140, 153, 0.12) 0%, transparent 50%),
    linear-gradient(225deg, rgba(61, 90, 128, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #F0F6F8 0%, #F5F9FB 40%, #FFFFFF 100%) !important;
}

.section-wash-green {
  background:
    linear-gradient(135deg, rgba(91, 140, 90, 0.12) 0%, transparent 50%),
    linear-gradient(225deg, rgba(253, 172, 83, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #F0F7F0 0%, #F5F9F5 40%, #FFFFFF 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK CARDS — Dramatically more visible glassmorphism
   ═══════════════════════════════════════════════════════════ */
.dark-card-orange {
  background: linear-gradient(135deg, rgba(253, 172, 83, 0.18) 0%, rgba(255, 255, 255, 0.06) 60%) !important;
  border: 1px solid rgba(253, 172, 83, 0.40) !important;
  box-shadow: 0 8px 32px rgba(253, 172, 83, 0.12), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.dark-card-teal {
  background: linear-gradient(135deg, rgba(44, 140, 153, 0.18) 0%, rgba(255, 255, 255, 0.06) 60%) !important;
  border: 1px solid rgba(44, 140, 153, 0.40) !important;
  box-shadow: 0 8px 32px rgba(44, 140, 153, 0.12), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.dark-card-blue {
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.18) 0%, rgba(255, 255, 255, 0.06) 60%) !important;
  border: 1px solid rgba(61, 90, 128, 0.40) !important;
  box-shadow: 0 8px 32px rgba(61, 90, 128, 0.12), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.dark-card-green {
  background: linear-gradient(135deg, rgba(91, 140, 90, 0.18) 0%, rgba(255, 255, 255, 0.06) 60%) !important;
  border: 1px solid rgba(91, 140, 90, 0.40) !important;
  box-shadow: 0 8px 32px rgba(91, 140, 90, 0.12), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   FEATURE CARDS V15 — Bolder gradient tops
   ═══════════════════════════════════════════════════════════ */
.feature-card-v15 {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.feature-card-v15::before {
  height: 5px !important;
  box-shadow: 0 4px 16px rgba(253, 172, 83, 0.15) !important;
}

.feature-card-orange::before { background: linear-gradient(90deg, #FDAC53, #FDB97A, #FDAC53) !important; }
.feature-card-teal::before { background: linear-gradient(90deg, #2C8C99, #3DA5B5, #2C8C99) !important; }
.feature-card-blue::before { background: linear-gradient(90deg, #3D5A80, #5A7BA8, #3D5A80) !important; }
.feature-card-green::before { background: linear-gradient(90deg, #5B8C5A, #72A870, #5B8C5A) !important; }

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

.color-strip-thin {
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #FDAC53 15%, #FDB97A 30%, #2C8C99 50%, #3DA5B5 65%, #5B8C5A 80%, transparent) !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER — Bolder metallic gradient
   ═══════════════════════════════════════════════════════════ */
.section-divider {
  height: 4px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(253, 172, 83, 0.2) 8%,
    rgba(253, 172, 83, 0.7) 30%,
    rgba(253, 172, 83, 0.9) 50%,
    rgba(44, 140, 153, 0.7) 70%,
    rgba(44, 140, 153, 0.2) 92%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 20px rgba(253, 172, 83, 0.3), 0 2px 6px rgba(253, 172, 83, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   HEADING GRADIENTS — Bolder, more saturated
   ═══════════════════════════════════════════════════════════ */
.heading-gradient {
  background: linear-gradient(135deg, #FDAC53 0%, #FDB97A 30%, #FFD699 50%, #FDAC53 70%, #F0A04B 100%) !important;
  background-size: 200% auto !important;
  filter: drop-shadow(0 0 20px rgba(253, 172, 83, 0.25)) !important;
}

.heading-gradient-teal {
  background: linear-gradient(135deg, #2C8C99 0%, #3DA5B5 30%, #5CC0D0 50%, #2C8C99 70%, #1F6B78 100%) !important;
  background-size: 200% auto !important;
  filter: drop-shadow(0 0 20px rgba(44, 140, 153, 0.25)) !important;
}

.heading-gradient-blue {
  background: linear-gradient(135deg, #3D5A80 0%, #5A7BA8 30%, #7A9BC8 50%, #3D5A80 70%, #2A4568 100%) !important;
  background-size: 200% auto !important;
  filter: drop-shadow(0 0 20px rgba(61, 90, 128, 0.25)) !important;
}

.heading-gradient-green {
  background: linear-gradient(135deg, #5B8C5A 0%, #72A870 30%, #90C88E 50%, #5B8C5A 70%, #3D6B3C 100%) !important;
  background-size: 200% auto !important;
  filter: drop-shadow(0 0 20px rgba(91, 140, 90, 0.25)) !important;
}

/* ═══════════════════════════════════════════════════════════
   STAT CARDS — More vivid backgrounds
   ═══════════════════════════════════════════════════════════ */
.stat-card-orange {
  background: linear-gradient(135deg, rgba(253, 172, 83, 0.15) 0%, white 60%) !important;
  border: 1px solid rgba(253, 172, 83, 0.25) !important;
  border-left: 4px solid #FDAC53 !important;
  box-shadow: 0 4px 16px rgba(253, 172, 83, 0.08) !important;
}

.stat-card-teal {
  background: linear-gradient(135deg, rgba(44, 140, 153, 0.15) 0%, white 60%) !important;
  border: 1px solid rgba(44, 140, 153, 0.25) !important;
  border-left: 4px solid #2C8C99 !important;
  box-shadow: 0 4px 16px rgba(44, 140, 153, 0.08) !important;
}

.stat-card-blue {
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.15) 0%, white 60%) !important;
  border: 1px solid rgba(61, 90, 128, 0.25) !important;
  border-left: 4px solid #3D5A80 !important;
  box-shadow: 0 4px 16px rgba(61, 90, 128, 0.08) !important;
}

.stat-card-green {
  background: linear-gradient(135deg, rgba(91, 140, 90, 0.15) 0%, white 60%) !important;
  border: 1px solid rgba(91, 140, 90, 0.25) !important;
  border-left: 4px solid #5B8C5A !important;
  box-shadow: 0 4px 16px rgba(91, 140, 90, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════
   ACCENT LINES — More vivid
   ═══════════════════════════════════════════════════════════ */
.accent-line {
  height: 4px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #FDAC53, rgba(253, 172, 83, 0.3), transparent) !important;
  box-shadow: 0 2px 8px rgba(253, 172, 83, 0.25) !important;
}

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

.accent-line-blue-solid {
  height: 4px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #3D5A80, rgba(61, 90, 128, 0.3), transparent) !important;
  box-shadow: 0 2px 8px rgba(61, 90, 128, 0.25) !important;
}

.accent-line-green-solid {
  height: 4px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #5B8C5A, rgba(91, 140, 90, 0.3), transparent) !important;
  box-shadow: 0 2px 8px rgba(91, 140, 90, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   PULSE DOTS — Bigger, brighter, more visible
   ═══════════════════════════════════════════════════════════ */
.pulse-dot-orange {
  width: 10px !important;
  height: 10px !important;
  background: #FDAC53 !important;
  box-shadow: 0 0 12px rgba(253, 172, 83, 0.7), 0 0 24px rgba(253, 172, 83, 0.3), 0 0 4px rgba(253, 172, 83, 0.9) !important;
}

.pulse-dot-teal {
  width: 10px !important;
  height: 10px !important;
  background: #2C8C99 !important;
  box-shadow: 0 0 12px rgba(44, 140, 153, 0.7), 0 0 24px rgba(44, 140, 153, 0.3), 0 0 4px rgba(44, 140, 153, 0.9) !important;
}

.pulse-dot-green {
  width: 10px !important;
  height: 10px !important;
  background: #5B8C5A !important;
  box-shadow: 0 0 12px rgba(91, 140, 90, 0.7), 0 0 24px rgba(91, 140, 90, 0.3), 0 0 4px rgba(91, 140, 90, 0.9) !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION LABELS — More vivid backgrounds and borders
   ═══════════════════════════════════════════════════════════ */
.section-label {
  background: linear-gradient(135deg, rgba(253, 172, 83, 0.18), rgba(253, 172, 83, 0.10)) !important;
  color: #FDAC53 !important;
  border: 1px solid rgba(253, 172, 83, 0.35) !important;
  box-shadow: 0 2px 12px rgba(253, 172, 83, 0.12) !important;
}

.section-label-teal {
  background: linear-gradient(135deg, rgba(44, 140, 153, 0.18), rgba(44, 140, 153, 0.10)) !important;
  color: #2C8C99 !important;
  border: 1px solid rgba(44, 140, 153, 0.35) !important;
  box-shadow: 0 2px 12px rgba(44, 140, 153, 0.12) !important;
}

.section-label-blue {
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.18), rgba(61, 90, 128, 0.10)) !important;
  color: #3D5A80 !important;
  border: 1px solid rgba(61, 90, 128, 0.35) !important;
  box-shadow: 0 2px 12px rgba(61, 90, 128, 0.12) !important;
}

.section-label-green {
  background: linear-gradient(135deg, rgba(91, 140, 90, 0.18), rgba(91, 140, 90, 0.10)) !important;
  color: #5B8C5A !important;
  border: 1px solid rgba(91, 140, 90, 0.35) !important;
  box-shadow: 0 2px 12px rgba(91, 140, 90, 0.12) !important;
}

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

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

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

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

/* ═══════════════════════════════════════════════════════════
   PROGRESS BARS — More vivid glow
   ═══════════════════════════════════════════════════════════ */
.progress-bar-fill-orange {
  background: linear-gradient(90deg, #FDAC53, #FDB97A) !important;
  box-shadow: 0 0 12px rgba(253, 172, 83, 0.5) !important;
}

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

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

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

/* ═══════════════════════════════════════════════════════════
   GRADIENT BORDER CARDS — More vivid top gradients
   ═══════════════════════════════════════════════════════════ */
.card-gradient-border-teal {
  border: 1px solid rgba(44, 140, 153, 0.20) !important;
  box-shadow: 0 8px 24px rgba(44, 140, 153, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.card-gradient-border-teal::before {
  height: 5px !important;
  background: linear-gradient(90deg, #2C8C99, #3DA5B5, #2C8C99) !important;
  box-shadow: 0 4px 16px rgba(44, 140, 153, 0.20) !important;
}

.card-gradient-border-blue {
  border: 1px solid rgba(61, 90, 128, 0.20) !important;
  box-shadow: 0 8px 24px rgba(61, 90, 128, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

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

.card-gradient-border-green {
  border: 1px solid rgba(91, 140, 90, 0.20) !important;
  box-shadow: 0 8px 24px rgba(91, 140, 90, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

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

/* ═══════════════════════════════════════════════════════════
   CARD ACCENT LEFT — More vivid left borders
   ═══════════════════════════════════════════════════════════ */
.card-accent-left-orange {
  border-left: 5px solid #FDAC53 !important;
  background: linear-gradient(135deg, rgba(253, 172, 83, 0.08) 0%, white 40%) !important;
}

.card-accent-left-teal {
  border-left: 5px solid #2C8C99 !important;
  background: linear-gradient(135deg, rgba(44, 140, 153, 0.08) 0%, white 40%) !important;
}

.card-accent-left-blue {
  border-left: 5px solid #3D5A80 !important;
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.08) 0%, white 40%) !important;
}

.card-accent-left-green {
  border-left: 5px solid #5B8C5A !important;
  background: linear-gradient(135deg, rgba(91, 140, 90, 0.08) 0%, white 40%) !important;
}

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

/* ═══════════════════════════════════════════════════════════
   CTA PREMIUM — More vivid dark gradient
   ═══════════════════════════════════════════════════════════ */
.cta-premium {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1510 40%, #151210 70%, #0d0d0d 100%) !important;
}

.cta-premium::before {
  background: radial-gradient(ellipse, rgba(253, 172, 83, 0.18) 0%, transparent 60%) !important;
}

/* ═══════════════════════════════════════════════════════════
   NEW: VISIBLE MESH GRADIENT OVERLAY — Creates visible depth
   ═══════════════════════════════════════════════════════════ */
.hero-mesh-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(253, 172, 83, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 80%, rgba(44, 140, 153, 0.06) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════
   NEW: VISIBLE LIGHT BEAMS — Decorative diagonal streaks
   ═══════════════════════════════════════════════════════════ */
.light-beam {
  position: absolute;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253, 172, 83, 0.15), transparent);
  transform: rotate(-35deg);
  pointer-events: none;
}

.light-beam-teal {
  position: absolute;
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 140, 153, 0.15), transparent);
  transform: rotate(-35deg);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   NEW: VISIBLE PARTICLE DOT — Scattered decoration
   ═══════════════════════════════════════════════════════════ */
.particle-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(253, 172, 83, 0.25);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(253, 172, 83, 0.15);
}

.particle-dot-teal {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(44, 140, 153, 0.25);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(44, 140, 153, 0.15);
}

.particle-dot-green {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(91, 140, 90, 0.25);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(91, 140, 90, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   NEW: VISIBLE GRADIENT RING — Decorative ring element
   ═══════════════════════════════════════════════════════════ */
.gradient-ring-orange {
  position: absolute;
  border: 2px solid rgba(253, 172, 83, 0.20);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(253, 172, 83, 0.08);
}

.gradient-ring-teal {
  position: absolute;
  border: 2px solid rgba(44, 140, 153, 0.20);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(44, 140, 153, 0.08);
}

/* ═══════════════════════════════════════════════════════════
   NEW: VISIBLE DIAGONAL STRIPE — Section texture
   ═══════════════════════════════════════════════════════════ */
.stripe-texture {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 30px,
    rgba(253, 172, 83, 0.02) 30px,
    rgba(253, 172, 83, 0.02) 31px
  );
}

/* ═══════════════════════════════════════════════════════════
   STAT GLOW VISIBLE — Brighter text glow
   ═══════════════════════════════════════════════════════════ */
.stat-glow-visible {
  color: #FDAC53 !important;
  text-shadow:
    0 0 30px rgba(253, 172, 83, 0.6),
    0 0 60px rgba(253, 172, 83, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.stat-glow {
  text-shadow: 0 0 50px rgba(253, 172, 83, 0.5), 0 0 100px rgba(253, 172, 83, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   CHECK LISTS — More visible backgrounds
   ═══════════════════════════════════════════════════════════ */
.check-premium,
.check-teal,
.check-blue,
.check-green,
.check-orange {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO ILLUSTRATION — More visible drop shadow
   ═══════════════════════════════════════════════════════════ */
.hero-illustration {
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.25)) !important;
}

/* ═══════════════════════════════════════════════════════════
   CORNER ACCENTS — More visible
   ═══════════════════════════════════════════════════════════ */
.corner-accent-tl::before {
  border-top: 2.5px solid rgba(253, 172, 83, 0.35) !important;
  border-left: 2.5px solid rgba(253, 172, 83, 0.35) !important;
}

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

/* ═══════════════════════════════════════════════════════════
   BUTTON PREMIUM — More visible shadow
   ═══════════════════════════════════════════════════════════ */
.btn-premium {
  box-shadow: 0 6px 24px rgba(253, 172, 83, 0.45), 0 2px 6px rgba(253, 172, 83, 0.25) !important;
}

.btn-premium:hover {
  box-shadow: 0 12px 32px rgba(253, 172, 83, 0.55), 0 4px 12px rgba(253, 172, 83, 0.30) !important;
}

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