/* ════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN v6 — umangsaija.in  (cache ?v=6)
   
   TARGET: 90/100 look & feel
   
   FIXES IN THIS VERSION:
   • High contrast overrides for all LIGHT sections (#about, #journey, #impact, #industries, #contact)
   • Forces every possible text element (p, strong, em, h2, h3, spans, dates) to dark premium tones
   • Redefines base CSS custom properties inside light sections so components inherit dark colors
   • High contrast metallic bronze/gold gradient for stat numbers on light sections
   • Premium typography contrast and font sizes tuned for readability
   • Restores clean responsive profile card sizing and cropping
   ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   0. GLOBAL BASE
   ══════════════════════════════════════════ */
body {
  background: #060810 !important;
}

/* ALL canvas-based animated backgrounds → barely visible */
.rb-bg-layer {
  opacity: 0.04 !important;
  transition: opacity 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .rb-bg-layer { opacity: 0 !important; }
}

/* ── Premium eyebrow tags ── */
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 20px !important;
}

#about, #skills, #journey, #work, #impact,
#services, #certifications, #achievements,
#industries, #schedule, #contact {
  isolation: isolate;
}


/* ══════════════════════════════════════════
   1. HERO — DARK MIDNIGHT BLUE
   ══════════════════════════════════════════ */
#hero .rb-bg-layer { opacity: 0.28 !important; }
#hero {
  background:
    radial-gradient(ellipse 70% 55% at 68% 38%, rgba(100, 115, 210, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 12% 65%, rgba(233, 211, 145, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 85% 85%, rgba(94, 180, 160, 0.10) 0%, transparent 50%),
    #050810 !important;
}

.hero-eyebrow {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(230, 220, 200, 0.9) !important;
  box-shadow: 0 0 20px rgba(233,211,145,0.06), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.hero-image { position: relative; }
.hero-image::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 145%; height: 145%;
  background: radial-gradient(
    ellipse 55% 50% at 50% 50%,
    rgba(233, 211, 145, 0.26) 0%,
    rgba(168, 198, 185, 0.14) 42%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
  animation: heroOrb 9s ease-in-out infinite;
}
@keyframes heroOrb {
  0%,100% { opacity: 0.72; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.1); }
}
.hero-image .pc-card-wrapper,
.hero-image .scroll-badge { position: relative; z-index: 1; }

.hero-headline em {
  background: linear-gradient(135deg, #e9d391 0%, #bdd4c8 60%, #a8c6b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ══════════════════════════════════════════
   2. MARQUEE
   ══════════════════════════════════════════ */
.marquee-section .rb-content-scrim {
  background:
    radial-gradient(ellipse 50% 200% at 0% 50%, rgba(94, 196, 158, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 200% at 100% 50%, rgba(233, 211, 145, 0.04) 0%, transparent 50%),
    #050e09 !important;
}
.marquee-section { position: relative; }
.marquee-section::before,
.marquee-section::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(80px, 9vw, 160px);
  z-index: 5;
  pointer-events: none;
}
.marquee-section::before {
  left: 0;
  background: linear-gradient(to right, #050e09 0%, transparent 100%);
}
.marquee-section::after {
  right: 0;
  background: linear-gradient(to left, #050e09 0%, transparent 100%);
}


/* ══════════════════════════════════════════
   3. ABOUT — LIGHT WARM CREAM (HIGH CONTRAST)
   ══════════════════════════════════════════ */
#about {
  /* Scope CSS variables to force dark text and borders inside the section */
  --white: #120e0a !important;
  --gray-100: #1a1410 !important;
  --gray-300: #2d241e !important;
  --gray-500: #50443a !important;
  --accent-champagne: #7c5a1a !important;
  --accent: #2e5a40 !important;
  --border: rgba(18, 14, 10, 0.16) !important;
}

#about .rb-content-scrim {
  background:
    radial-gradient(circle, rgba(139, 104, 58, 0.09) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse 60% 50% at 88% 10%, rgba(233, 211, 145, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 8% 90%, rgba(168, 198, 185, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(246, 240, 226, 1) 0%, rgba(238, 230, 214, 1) 100%) !important;
}

/* Specific text overrides for About section to guarantee readability */
#about .big-heading,
#about h2,
#about h2 *,
#about p,
#about span,
#about strong,
#about em {
  color: #120e0a !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
}

#about h2 em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: #7c5a1a !important;
}

/* Shiny Glass Background for About Stats Row */
#about .stats-row {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  box-shadow: 
    0 12px 40px rgba(139, 104, 58, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px rgba(255, 255, 255, 0.3) !important;
  margin-top: 30px !important;
}

#about .stat-num {
  background: linear-gradient(135deg, #e9d391 0%, #bdd4c8 55%, #a8c6b9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)) !important;
}


/* Premium Glassmorphic Card for About Left */
#about .about-grid.rb-zone-scrim::before {
  display: none !important;
}

#about .about-left {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 28px !important;
  padding: 48px 40px !important;
  box-shadow: 
    0 28px 70px rgba(124, 90, 26, 0.12),
    inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(255, 255, 255, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.02) !important;
  position: relative;
  overflow: hidden;
}

#about .about-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 50.1%
  ) !important;
  pointer-events: none;
  z-index: 1;
}

#about .about-left > * {
  position: relative;
  z-index: 2;
}

#about .eyebrow {
  color: #7c5a1a !important;
  background: rgba(124, 90, 26, 0.1) !important;
  border: 1px solid rgba(124, 90, 26, 0.28) !important;
}
#about .eyebrow::before { background: #7c5a1a !important; }

/* Stats box styling inside About (Light Theme version) */
#about .stat-num {
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #e9d391 0%, #bdd4c8 55%, #a8c6b9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)) !important;
}

#about .stat-lbl {
  color: #50443a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
}

/* Call to actions */
#about .cta-primary {
  background: #120e0a !important;
  color: #f5f0e8 !important;
  border-color: #120e0a !important;
}
#about .cta-secondary {
  border-color: rgba(18, 14, 10, 0.3) !important;
  color: #120e0a !important;
}

#about [class*="proof-chip"],
#about [class*="stat-chip"] {
  background: rgba(18, 14, 10, 0.06) !important;
  border-color: rgba(18, 14, 10, 0.14) !important;
  color: #120e0a !important;
}


/* ══════════════════════════════════════════
   4. SKILLS — DARK FOREST TEAL
   ══════════════════════════════════════════ */
#skills .rb-content-scrim {
  background:
    linear-gradient(rgba(94, 196, 158, 0.055) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(94, 196, 158, 0.055) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(ellipse 55% 45% at 8% 12%, rgba(94, 196, 158, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 92% 88%, rgba(233, 211, 145, 0.12) 0%, transparent 50%),
    #030f0b !important;
}
.skills-col {
  background: linear-gradient(145deg,
    rgba(94, 196, 158, 0.09) 0%,
    rgba(3, 15, 11, 0.95) 100%) !important;
  border-color: rgba(94, 196, 158, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(94,196,158,0.08) !important;
}
.skills-col:hover {
  border-color: rgba(94, 196, 158, 0.42) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 30px rgba(94,196,158,0.12) !important;
  transform: translateY(-6px) !important;
}
.skill-meter::after {
  box-shadow: 0 0 14px rgba(189, 212, 200, 0.65) !important;
}
#skills .eyebrow {
  color: #5eead4 !important;
  background: rgba(94, 234, 212, 0.1) !important;
  border: 1px solid rgba(94, 234, 212, 0.22) !important;
}
#skills .eyebrow::before { background: #5eead4 !important; }


/* ══════════════════════════════════════════
   5. JOURNEY — LIGHT WARM SAND (HIGH CONTRAST)
   ══════════════════════════════════════════ */
#journey {
  --white: #1a1208 !important;
  --gray-100: #221a10 !important;
  --gray-300: #3e3224 !important;
  --gray-500: #5c4d3c !important;
  --accent-champagne: #7c5a1a !important;
  --accent: #2e5a40 !important;
  --border: rgba(26, 18, 8, 0.16) !important;
}

#journey .rb-content-scrim {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(196, 162, 101, 0.06) 0px, rgba(196, 162, 101, 0.06) 1px,
      transparent 1px, transparent 22px
    ),
    radial-gradient(ellipse 55% 45% at 10% 15%, rgba(233, 211, 145, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 90% 88%, rgba(196, 150, 130, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #f5efe2 0%, #ebe2cb 100%) !important;
}

/* Explicit journey text styling to avoid white inheritance */
#journey .big-heading,
#journey h2,
#journey h2 *,
#journey p,
#journey span,
#journey strong,
#journey em,
#journey h3,
#journey h3 * {
  color: #1a1208 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
}

#journey h2 em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: #7c5a1a !important;
}

#journey .eyebrow {
  color: #7c5a1a !important;
  background: rgba(124, 90, 26, 0.12) !important;
  border: 1px solid rgba(124, 90, 26, 0.3) !important;
}
#journey .eyebrow::before { background: #7c5a1a !important; }

#journey .section-sub { color: #5c4d3c !important; }
#journey .timeline-date { color: #6b5538 !important; font-weight: 700 !important; }
#journey .timeline-org  { color: #7c5a1a !important; font-weight: 700 !important; }

#journey .timeline-tag {
  background: rgba(26, 18, 8, 0.08) !important;
  border-color: rgba(26, 18, 8, 0.16) !important;
  color: #3d2e14 !important;
  font-weight: 600 !important;
}
#journey .timeline-tag.accent {
  background: rgba(124, 90, 26, 0.14) !important;
  border-color: rgba(124, 90, 26, 0.35) !important;
  color: #7c5a1a !important;
}
#journey .timeline-tag.live {
  background: #1a1208 !important;
  color: #f5efe2 !important;
  border-color: #1a1208 !important;
}

#journey .timeline-line {
  width: 2px !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(124, 90, 26, 0.7) 12%,
    rgba(124, 90, 26, 0.9) 50%,
    rgba(124, 90, 26, 0.7) 88%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 8px rgba(124, 90, 26, 0.35) !important;
}
#journey .timeline-dot {
  border-color: rgba(124, 90, 26, 0.4) !important;
  background: #f5efe2 !important;
}
#journey .timeline-item.visible .timeline-dot {
  background: #7c5a1a !important;
  border-color: #7c5a1a !important;
  box-shadow: 0 0 0 5px rgba(124, 90, 26, 0.2), 0 0 18px rgba(124, 90, 26, 0.5) !important;
}

#journey .timeline-item {
  height: auto !important;
  overflow: visible !important;
}

#journey .timeline-content {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(124, 90, 26, 0.2) !important;
  box-shadow: 0 4px 24px rgba(80, 50, 20, 0.08) !important;
  padding: 32px 36px !important;
  height: auto !important;
  overflow: visible !important;
}
#journey .timeline-item:hover .timeline-content {
  border-color: rgba(124, 90, 26, 0.45) !important;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 12px 40px rgba(80, 50, 20, 0.12), 0 0 30px rgba(124, 90, 26, 0.1) !important;
}


/* ══════════════════════════════════════════
   6. WORK — DARK DEEP NAVY
   ══════════════════════════════════════════ */
#work .rb-content-scrim {
  background:
    linear-gradient(rgba(107, 122, 196, 0.06) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(90deg, rgba(107, 122, 196, 0.06) 1px, transparent 1px) 0 0 / 50px 50px,
    radial-gradient(ellipse 55% 50% at 90% 8%, rgba(107, 122, 196, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 6% 92%, rgba(94, 196, 158, 0.12) 0%, transparent 50%),
    #04051a !important;
}
.work-card {
  background: linear-gradient(145deg, rgba(107,122,196,0.08) 0%, rgba(4,5,26,0.94) 100%) !important;
  border-color: rgba(107, 122, 196, 0.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}
.work-card:hover {
  border-color: rgba(107, 122, 196, 0.44) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.72), 0 0 42px rgba(107,122,196,0.14) !important;
}
.work-card-current {
  border-color: rgba(233, 211, 145, 0.32) !important;
  box-shadow: 0 0 0 1px rgba(233,211,145,0.18), 0 4px 24px rgba(0,0,0,0.6) !important;
}
.cinema-card { box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important; }
.cinema-card:hover,
.cinema-spread:hover .cinema-card {
  box-shadow: 0 24px 64px rgba(0,0,0,0.72), 0 0 35px rgba(189,212,200,0.09) !important;
}
#work .eyebrow {
  color: #818cf8 !important;
  background: rgba(129, 140, 248, 0.1) !important;
  border: 1px solid rgba(129, 140, 248, 0.22) !important;
}
#work .eyebrow::before { background: #818cf8 !important; }


/* ══════════════════════════════════════════
   7. IMPACT — LIGHT SILVER-BLUE (HIGH CONTRAST)
   ══════════════════════════════════════════ */
#impact {
  --white: #0a1020 !important;
  --gray-100: #121828 !important;
  --gray-300: #2d3548 !important;
  --gray-500: #4a5468 !important;
  --accent-champagne: #7c5a1a !important;
  --accent: #2c4c78 !important;
  --border: rgba(100, 120, 180, 0.2) !important;
}

#impact .rb-content-scrim {
  background:
    linear-gradient(rgba(100, 120, 180, 0.07) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(100, 120, 180, 0.07) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(ellipse 60% 50% at 92% 12%, rgba(143, 132, 196, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 6% 88%, rgba(107, 159, 196, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #edf1f8 0%, #e2e8f4 100%) !important;
}

#impact .big-heading,
#impact h2,
#impact h2 *,
#impact p,
#impact span,
#impact strong,
#impact em {
  color: #0a1020 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
}

#impact .eyebrow {
  color: #2c4c78 !important;
  background: rgba(44, 76, 120, 0.12) !important;
  border: 1px solid rgba(44, 76, 120, 0.28) !important;
}
#impact .eyebrow::before { background: #2c4c78 !important; }

#impact .section-sub { color: #4a5468 !important; }

/* "Let's talk" mix gradient numbers */
#impact .impact-num {
  background: linear-gradient(135deg, #e9d391 0%, #bdd4c8 55%, #a8c6b9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)) !important;
  font-size: clamp(3.8rem, 8vw, 6.4rem) !important;
  font-weight: 800 !important;
}

#impact .impact-lbl { color: #3d4a65 !important; font-weight: 600 !important; }
#impact .impact-grid { border-color: rgba(100, 120, 180, 0.24) !important; }


/* ══════════════════════════════════════════
   8. SERVICES — DARK WARM PLUM
   ══════════════════════════════════════════ */
#services .rb-content-scrim {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(180, 80, 120, 0.04) 0px, rgba(180, 80, 120, 0.04) 1px,
      transparent 1px, transparent 28px
    ),
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(184, 80, 120, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(233, 211, 145, 0.1) 0%, transparent 50%),
    #130408 !important;
}
.svc-row::before {
  background: linear-gradient(90deg, rgba(233,211,145,0.09) 0%, transparent 100%) !important;
}
.svc-row:hover .svc-arrow {
  box-shadow: 0 0 14px rgba(189,212,200,0.4) !important;
}
#services .eyebrow {
  color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.1) !important;
  border: 1px solid rgba(244, 114, 182, 0.22) !important;
}
#services .eyebrow::before { background: #f472b6 !important; }


/* ══════════════════════════════════════════
   9. CERTIFICATIONS — DARK DEEP SAPPHIRE
   ══════════════════════════════════════════ */
#certifications .rb-content-scrim--certs {
  background:
    radial-gradient(circle, rgba(107, 159, 196, 0.09) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(143, 132, 196, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(107, 159, 196, 0.2) 0%, transparent 50%),
    #030818 !important;
}
#certifications::before {
  content: '';
  position: absolute;
  inset: 0; z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse 65% 55% at 50% 50%,
    transparent 28%,
    rgba(3, 8, 24, 0.52) 65%,
    rgba(3, 8, 24, 0.88) 100%
  );
}
#certifications { position: relative; }
.cert-card,
.cert-item {
  background: linear-gradient(145deg, rgba(107,159,196,0.1) 0%, rgba(3,8,24,0.92) 100%) !important;
  border-color: rgba(107, 159, 196, 0.24) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
.cert-card:hover,
.cert-item:hover {
  border-color: rgba(107, 159, 196, 0.5) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.72), 0 0 42px rgba(107,159,196,0.16) !important;
}
.cert-card-new,
.cert-item-new {
  border-color: rgba(233, 211, 145, 0.35) !important;
  background: linear-gradient(145deg, rgba(233,211,145,0.12) 0%, rgba(3,8,24,0.92) 100%) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 22px rgba(233,211,145,0.1) !important;
}
.cert-card-new:hover,
.cert-item-new:hover {
  border-color: rgba(233, 211, 145, 0.55) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.72), 0 0 50px rgba(233,211,145,0.2) !important;
}
#certifications .eyebrow {
  color: #818cf8 !important;
  background: rgba(129, 140, 248, 0.1) !important;
  border: 1px solid rgba(129, 140, 248, 0.24) !important;
}
#certifications .eyebrow::before { background: #818cf8 !important; }


/* ══════════════════════════════════════════
   10. ACHIEVEMENTS — DARK OCEAN TEAL
   ══════════════════════════════════════════ */
#achievements .rb-content-scrim {
  background:
    radial-gradient(circle, rgba(94, 234, 212, 0.07) 1px, transparent 1px) 0 0 / 30px 30px,
    radial-gradient(circle, rgba(94, 234, 212, 0.07) 1px, transparent 1px) 15px 15px / 30px 30px,
    radial-gradient(ellipse 60% 50% at 88% 15%, rgba(94, 234, 212, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 8% 82%, rgba(200, 130, 255, 0.14) 0%, transparent 50%),
    #030c14 !important;
}
.agentblazer-card {
  background: linear-gradient(145deg, rgba(94,234,212,0.08) 0%, rgba(3,12,20,0.94) 100%) !important;
  border-color: rgba(94, 234, 212, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55) !important;
}
.agentblazer-card:hover {
  border-color: rgba(94, 234, 212, 0.42) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 42px rgba(94,234,212,0.12) !important;
}
#achievements .eyebrow {
  color: #5eead4 !important;
  background: rgba(94, 234, 212, 0.1) !important;
  border: 1px solid rgba(94, 234, 212, 0.24) !important;
}
#achievements .eyebrow::before { background: #5eead4 !important; }


/* ══════════════════════════════════════════
   11. RECOMMENDATIONS — Video bg
   ══════════════════════════════════════════ */
.rec-card.glass {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(233, 211, 145, 0.24) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
.rec-card.glass:hover {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(233, 211, 145, 0.48) !important;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 50px rgba(233, 211, 145, 0.1) !important;
}


/* ══════════════════════════════════════════
   12. INDUSTRIES — LIGHT SAGE GREEN (HIGH CONTRAST)
   ══════════════════════════════════════════ */
#industries {
  --white: #0a1d12 !important;
  --gray-100: #12281b !important;
  --gray-300: #2d4536 !important;
  --gray-500: #385842 !important;
  --accent-champagne: #1e6b3a !important;
  --accent: #1e6b3a !important;
  --border: rgba(42, 120, 80, 0.2) !important;
}

#industries .rb-content-scrim--industries {
  background:
    radial-gradient(circle, rgba(42, 120, 80, 0.08) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(ellipse 55% 48% at 92% 12%, rgba(94, 196, 158, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 48% 42% at 6% 88%, rgba(142, 196, 184, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #eaf5ee 0%, #daf0e2 100%) !important;
}

#industries .big-heading,
#industries h2,
#industries h2 *,
#industries p,
#industries span,
#industries strong,
#industries em {
  color: #0a1d12 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
}

#industries .eyebrow {
  color: #1e6b3a !important;
  background: rgba(30, 107, 58, 0.12) !important;
  border: 1px solid rgba(30, 107, 58, 0.28) !important;
}
#industries .eyebrow::before { background: #1e6b3a !important; }

#industries .section-sub { color: #385842 !important; }

.ind-card.rb-surface-solid {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(42, 120, 80, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.ind-card.rb-surface-solid h3 { color: #0a1d12 !important; text-shadow: none !important; }
.ind-card.rb-surface-solid p  { color: #2d4536 !important; }
.ind-card.rb-surface-solid .ind-num { color: #2e7a4a !important; font-weight: 700 !important; }
.ind-card.rb-surface-solid:hover {
  border-color: rgba(42, 120, 80, 0.45) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 28px rgba(42,120,80,0.12) !important;
}
.ind-card.rb-surface-solid .ind-arrow {
  border-color: rgba(42, 120, 80, 0.28) !important;
  color: #1e6b3a !important;
}
.ind-card.rb-surface-solid:hover .ind-arrow {
  background: #1e6b3a !important;
  border-color: #1e6b3a !important;
  color: white !important;
  box-shadow: 0 0 14px rgba(30, 107, 58, 0.4) !important;
}


/* ══════════════════════════════════════════
   13. SCHEDULE — DARK INDIGO
   ══════════════════════════════════════════ */
#schedule .rb-content-scrim {
  background:
    linear-gradient(rgba(100, 100, 220, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(100, 100, 220, 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(ellipse 58% 48% at 85% 18%, rgba(143, 132, 196, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 48% 42% at 10% 82%, rgba(107, 122, 196, 0.16) 0%, transparent 50%),
    #060819 !important;
}
#schedule .schedule-panel.rb-readability-glass--heavy {
  background: rgba(8, 10, 30, 0.85) !important;
  border-color: rgba(143, 132, 196, 0.24) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.62),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
#schedule .eyebrow {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, 0.1) !important;
  border: 1px solid rgba(167, 139, 250, 0.24) !important;
}
#schedule .eyebrow::before { background: #a78bfa !important; }


/* ══════════════════════════════════════════
   14. CONTACT — LIGHT WARM ROSE-PEACH (HIGH CONTRAST)
   ══════════════════════════════════════════ */
#contact {
  --white: #200810 !important;
  --gray-100: #2a1018 !important;
  --gray-300: #4a2832 !important;
  --gray-500: #6e4450 !important;
  --accent-champagne: #9b2c4a !important;
  --accent: #9b2c4a !important;
  --border: rgba(184, 100, 130, 0.22) !important;
}

#contact .rb-content-scrim {
  background:
    radial-gradient(circle, rgba(184, 80, 120, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(184, 80, 120, 0.07) 1px, transparent 1px) 12px 12px / 24px 24px,
    radial-gradient(ellipse 58% 48% at 90% 10%, rgba(244, 114, 182, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 48% 42% at 6% 90%, rgba(233, 211, 145, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #f6ece6 0%, #ebdcd2 100%) !important;
}

#contact .big-heading,
#contact h2,
#contact h2 *,
#contact p,
#contact span,
#contact strong,
#contact em,
#contact a {
  color: #200810 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: initial !important;
}

#contact .eyebrow {
  color: #9b2c4a !important;
  background: rgba(155, 44, 74, 0.12) !important;
  border: 1px solid rgba(155, 44, 74, 0.28) !important;
}
#contact .eyebrow::before { background: #9b2c4a !important; }

#contact .contact-intro { color: #4a2830 !important; }
#contact .contact-lbl { color: #8a5860 !important; font-weight: 700 !important; }
#contact .contact-details a:hover { color: #9b2c4a !important; }

#contact .contact-left.rb-readability-glass--heavy {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(184, 100, 130, 0.25) !important;
  box-shadow: 0 16px 48px rgba(80, 30, 40, 0.1), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
#contact #contact-form.rb-readability-glass--heavy {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(184, 100, 130, 0.22) !important;
  box-shadow: 0 16px 48px rgba(80, 30, 40, 0.1), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
#contact #contact-form input,
#contact #contact-form textarea {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(184, 100, 130, 0.28) !important;
  color: #200810 !important;
  border-radius: 10px !important;
}
#contact #contact-form input::placeholder,
#contact #contact-form textarea::placeholder { color: rgba(30, 14, 16, 0.45) !important; }
#contact #contact-form input:focus,
#contact #contact-form textarea:focus {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(184, 80, 120, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(184, 80, 120, 0.15) !important;
}
#contact #contact-form button.cta-primary {
  background: #200810 !important;
  color: #f6ece6 !important;
}
#contact #contact-form button.cta-primary:hover {
  background: #3e1220 !important;
  box-shadow: 0 0 24px rgba(155, 44, 74, 0.3) !important;
}


/* ══════════════════════════════════════════
   15. FOOTER — DARK with rainbow border glow
   ══════════════════════════════════════════ */
footer {
  background: #04040c !important;
  border-top: 1px solid rgba(100, 90, 180, 0.12) !important;
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(233, 211, 145, 0.55) 18%,
    rgba(94, 234, 212, 0.55) 38%,
    rgba(129, 140, 248, 0.55) 58%,
    rgba(244, 114, 182, 0.55) 78%,
    rgba(233, 211, 145, 0.55) 92%,
    transparent 100%
  );
  pointer-events: none;
}


/* ══════════════════════════════════════════
   16. PROOF RIBBON & PLATFORMS
   ══════════════════════════════════════════ */
.proof-ribbon { background: #050810 !important; }
.platforms-section { background: #060712 !important; }


/* ══════════════════════════════════════════
   17. GLOBAL — BIG HEADING em italic (dark sections)
   ══════════════════════════════════════════ */
#skills .big-heading em,
#work .big-heading em,
#certifications .big-heading em,
#achievements .big-heading em,
#services .big-heading em,
#schedule .big-heading em {
  background: linear-gradient(135deg, #e9d391 0%, #bdd4c8 55%, #a8c6b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ══════════════════════════════════════════
   18. GLOBAL — BUTTON GLOWS
   ══════════════════════════════════════════ */
.cta-primary:hover {
  box-shadow: 0 0 28px rgba(189,212,200,0.35), 0 0 60px rgba(189,212,200,0.15) !important;
}
.nav-cta:hover {
  box-shadow: 0 0 30px rgba(189,212,200,0.42), 0 0 60px rgba(189,212,200,0.18) !important;
}
.cta-secondary:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.3) !important;
}


/* ══════════════════════════════════════════
   19. SECTION BOTTOM SEPARATOR LINES
   ══════════════════════════════════════════ */
#hero::after {
  background: linear-gradient(
    180deg,
    rgba(5, 8, 16, 0.25) 0%,
    rgba(5, 8, 16, 0.1) 45%,
    rgba(5, 8, 16, 0.35) 100%
  ) !important;
}


/* ══════════════════════════════════════════
   20. MOBILE
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-image::before { width: 100%; height: 100%; }
  .marquee-section::before,
  .marquee-section::after { width: 48px; }
  #contact .contact-left.rb-readability-glass--heavy,
  #contact #contact-form.rb-readability-glass--heavy {
    background: rgba(255,255,255,0.78) !important;
  }
}
@media (max-width: 480px) {
  .marquee-section::before,
  .marquee-section::after { width: 28px; }
}


/* ══════════════════════════════════════════
   21. REDUCED MOTION SAFETY
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-image::before { animation: none !important; }
}