/* ==========================================================================
   InteractiveBees Design System — Master Color, Contrast & Layout CSS
   Primary Tokens:
   - Light Primary: #FFFFFF (Pure White) & #FAFAF8 (Soft Off-White)
   - Dark Sections: #14141A (Pure Deep Black/Charcoal) & #0A0A0E (Black)
   - Accent Gradient: #FFC800 -> #F5A100 (Amber Yellow)
   - Text Dark: #14141A | Text Muted: #4A4A54 / #6B6B76
   - Text Light: #FFFFFF / #F5F5F0 | Text Muted Light: #B0B0BA
   ========================================================================== */

:root {
  --color-bg-white: #FFFFFF;
  --color-bg-offwhite: #FAFAF8;
  --color-bg-dark: #14141A;
  --color-bg-darker: #0A0A0E;
  
  --color-text-dark: #14141A;
  --color-text-body: #3A3A42;
  --color-text-muted: #6B6B76;
  --color-text-light: #FFFFFF;
  --color-text-light-sub: #D5D5DC;
  
  --color-accent-start: #FFC800;
  --color-accent-end: #F5A100;
  --gradient-accent: linear-gradient(135deg, #FFC800 0%, #F5A100 100%);

  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-accent: 0 10px 25px rgba(255, 200, 0, 0.3);
}

body {
  background-color: var(--color-bg-white);
  color: var(--color-text-body);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* ==========================================================================
   Section Spacing & Alternating Zebra Rhythm
   ========================================================================== */
.section-padding {
  padding: 90px 0;
}

@media (max-width: 991px) {
  .section-padding {
    padding: 60px 0;
  }
}

/* Zebra Background Tokens */
.bg-light-canvas {
  background-color: var(--color-bg-white) !important;
  color: var(--color-text-dark);
}

.bg-alt-canvas {
  background-color: var(--color-bg-offwhite) !important;
  color: var(--color-text-dark);
}

.bg-dark-section {
  background-color: var(--color-bg-dark) !important;
  color: var(--color-text-light) !important;
}

.bg-black-section {
  background-color: var(--color-bg-darker) !important;
  color: var(--color-text-light) !important;
}

/* Strict Text Contrast Rules */
.bg-dark-section h1, .bg-dark-section h2, .bg-dark-section h3, 
.bg-dark-section h4, .bg-dark-section h5, .bg-dark-section h6,
.bg-black-section h1, .bg-black-section h2, .bg-black-section h3,
.bg-black-section h4, .bg-black-section h5, .bg-black-section h6 {
  color: #FFFFFF !important;
}

.bg-dark-section p, .bg-black-section p,
.bg-dark-section .text-muted, .bg-black-section .text-muted {
  color: #D1D1D8 !important;
}

.bg-light-canvas h1, .bg-light-canvas h2, .bg-light-canvas h3, 
.bg-light-canvas h4, .bg-light-canvas h5, .bg-light-canvas h6,
.bg-alt-canvas h1, .bg-alt-canvas h2, .bg-alt-canvas h3,
.bg-alt-canvas h4, .bg-alt-canvas h5, .bg-alt-canvas h6 {
  color: #14141A !important;
}

.bg-light-canvas p, .bg-alt-canvas p {
  color: #3A3A44 !important;
}

.bg-light-canvas .text-muted, .bg-alt-canvas .text-muted {
  color: #6B6B76 !important;
}

/* ==========================================================================
   Buttons & Badges (Strict Dark Text on Yellow)
   ========================================================================== */
.btn-yellow-pill {
  background: var(--gradient-accent) !important;
  color: #14141A !important;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 50px;
  padding: 14px 32px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-accent);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-yellow-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(255, 200, 0, 0.45);
  color: #000000 !important;
}

.btn-yellow-outline {
  background: transparent;
  color: #14141A !important;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 50px;
  padding: 12px 28px;
  border: 2px solid #FFC800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-yellow-outline:hover {
  background: var(--gradient-accent);
  color: #14141A !important;
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}

.bg-dark-section .btn-yellow-outline,
.bg-black-section .btn-yellow-outline {
  color: #FFFFFF !important;
  border-color: #FFC800;
}

.bg-dark-section .btn-yellow-outline:hover,
.bg-black-section .btn-yellow-outline:hover {
  color: #14141A !important;
}

.badge-yellow {
  background: rgba(255, 200, 0, 0.18);
  color: #997300;
  border: 1px solid rgba(255, 200, 0, 0.4);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bg-dark-section .badge-yellow,
.bg-black-section .badge-yellow {
  background: rgba(255, 200, 0, 0.2);
  color: #FFD533;
  border-color: rgba(255, 200, 0, 0.5);
}

.text-accent {
  color: #D9A000 !important;
}

.bg-dark-section .text-accent,
.bg-black-section .text-accent {
  color: #FFC800 !important;
}

/* ==========================================================================
   Cards & Surfaces
   ========================================================================== */
.card-light-surface {
  background: #FFFFFF;
  border: 1px solid rgba(20, 20, 26, 0.08);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-light-surface:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 200, 0, 0.4);
}

.card-dark-surface {
  background: #1E1E26;
  border: 1px solid rgba(255, 250, 240, 0.1);
  border-radius: 20px;
  color: #F5F5F0;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.card-dark-surface:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 200, 0, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

/* Stat Number Highlights */
.stat-number-yellow {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 800;
  color: #14141A;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

/* ==========================================================================
   Marquee Animation
   ========================================================================== */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-white), transparent);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-white), transparent);
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  animation: marquee-scroll 30s linear infinite;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   Scroll-Snap & Masonry
   ========================================================================== */
.scroll-snap-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 1.5rem;
  padding-bottom: 1rem;
}

.scroll-snap-container::-webkit-scrollbar {
  height: 6px;
}

.scroll-snap-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.scroll-snap-container::-webkit-scrollbar-thumb {
  background: #FFC800;
  border-radius: 10px;
}

.scroll-snap-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Icon Alignment Utility */
.icon-align {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}