/* ================================================
   EXECUTIVE BENTO GRID - AI COMMAND CENTER
   C-Level Consulting Design System
   SCOPED to #bentoGridSection to avoid conflicts
   ================================================ */

/* Scoped Variables */
#bentoGridSection {
  /* Executive Dark Palette */
  --bento-bg-primary: #0a0a0b;
  --bento-bg-secondary: #111113;
  --bento-bg-card: #18181b;
  --bento-bg-card-hover: #1f1f23;
  --bento-bg-card-accent: #1c1c20;

  /* Text Hierarchy */
  --bento-text-primary: #fafafa;
  --bento-text-secondary: rgba(250, 250, 250, 0.72);
  --bento-text-tertiary: rgba(250, 250, 250, 0.48);
  --bento-text-muted: rgba(250, 250, 250, 0.32);

  /* Accent - Subtle Blue (Authority) */
  --bento-accent-primary: rgba(99, 132, 255, 0.12);
  --bento-accent-glow: rgba(99, 132, 255, 0.06);
  --bento-border-subtle: rgba(255, 255, 255, 0.06);
  --bento-border-card: rgba(255, 255, 255, 0.08);

  /* Spacing */
  --bento-gap: 12px;
  --bento-radius-sm: 42px;
  --bento-radius-md: 42px;
  --bento-radius-lg: 42px;

  background: var(--bento-bg-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   BENTO GRID CONTAINER
   Structure: LEFT (2) | CENTER (5) | RIGHT (2) = 9 cols
   Rows: TOP | 5x CONTENT | BOTTOM
   ================================================ */
#bentoGridSection .bento-grid {
  display: grid;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: auto repeat(5, minmax(85px, 1fr)) auto;
  gap: var(--bento-gap);
  padding: 2rem;
}

/* ================================================
   BASE CARD STYLES - Executive Design
   ================================================ */
#bentoGridSection .bento-card {
  background: var(--bento-bg-card);
  border-radius: var(--bento-radius-md);
  border: 1px solid var(--bento-border-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#bentoGridSection .bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 50%
  );
  pointer-events: none;
}

#bentoGridSection .bento-card:hover {
  background: var(--bento-bg-card-hover);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* Card Typography */
#bentoGridSection .bento-card-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bento-text-muted);
  margin-bottom: 0.5rem;
}

#bentoGridSection .bento-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bento-text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

#bentoGridSection .bento-card-subtitle {
  font-size: 0.85rem;
  color: var(--bento-text-tertiary);
  margin-top: 0.35rem;
  line-height: 1.4;
}

/* ================================================
   TOP ROW - HEADLINE CARDS
   Strategic positioning, key claims (50/50)
   ================================================ */
#bentoGridSection .bento-card--top-left {
  grid-column: 1 / 5;
  grid-row: 1;
  background: linear-gradient(
    145deg,
    var(--bento-bg-card) 0%,
    var(--bento-bg-card-accent) 100%
  );
  min-height: 140px;
}

#bentoGridSection .bento-card--top-right {
  grid-column: 5 / 10;
  grid-row: 1;
  background: var(--bento-bg-card);
  min-height: 140px;
}

/* ================================================
   LEFT COLUMN - BUSINESS COMPLEXITY
   Fragmented, irregular, operational chaos
   ================================================ */
#bentoGridSection .bento-card--left-tall {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  min-height: 170px;
}

#bentoGridSection .bento-card--left-combined-1 {
  grid-column: 1 / 3;
  grid-row: 4;
  min-height: 140px;
}

#bentoGridSection .bento-card--left-combined-2 {
  grid-column: 1 / 3;
  grid-row: 5;
  min-height: 140px;
}

#bentoGridSection .bento-card--left-wide {
  grid-column: 1 / 3;
  grid-row: 6;
  min-height: 140px;
}

/* Left column accent - subtle tension indicator */
#bentoGridSection .bento-card--left-tall::after,
#bentoGridSection .bento-card--left-combined-1::after,
#bentoGridSection .bento-card--left-combined-2::after,
#bentoGridSection .bento-card--left-wide::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 180, 120, 0.3) 0%,
    rgba(255, 120, 80, 0.1) 100%
  );
  opacity: 0.5;
}

/* ================================================
   CENTER - COMMAND CENTER / AUTHORITY
   Dominant, executive, system thinking
   ================================================ */
#bentoGridSection .bento-card--center {
  grid-column: 3 / 8;
  grid-row: 2 / 7;
  background: linear-gradient(
    165deg,
    #1a1a1f 0%,
    var(--bento-bg-card) 40%,
    #16161a 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  min-height: 450px;
  justify-content: flex-start;
  overflow: hidden;
  z-index: 10;
}

#bentoGridSection .bento-card--center::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(99, 132, 255, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
}

#bentoGridSection .bento-card--center .bento-card-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--bento-text-tertiary);
  margin-bottom: 1rem;
}

#bentoGridSection .bento-card--center .bento-card-title {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 20;
  margin: 0;
}

#bentoGridSection .bento-card--center .bento-card-subtitle {
  font-size: 0.95rem;
  color: var(--bento-text-secondary);
  max-width: 280px;
  margin: 0 auto;
}

/* Center card glow ring */
#bentoGridSection .bento-card--center::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 132, 255, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ================================================
   RIGHT COLUMN - AI SYSTEMS / CLARITY
   Clean, structured, technological precision
   ================================================ */
#bentoGridSection .bento-card--right-1 {
  grid-column: 8 / 10;
  grid-row: 2 / 4;
  min-height: 170px;
}

#bentoGridSection .bento-card--right-2 {
  grid-column: 8 / 10;
  grid-row: 4;
  min-height: 140px;
}

#bentoGridSection .bento-card--right-3 {
  grid-column: 8 / 10;
  grid-row: 5 / 7;
  min-height: 170px;
}

/* Right column accent - clean system indicator */
#bentoGridSection .bento-card--right-1::after,
#bentoGridSection .bento-card--right-2::after,
#bentoGridSection .bento-card--right-3::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(99, 180, 255, 0.4) 0%,
    rgba(99, 132, 255, 0.15) 100%
  );
  opacity: 0.6;
}

/* ================================================
   BOTTOM ROW - CTA / AUTHORITY
   Strategic positioning, call to action
   ================================================ */
#bentoGridSection .bento-card--bottom-left {
  grid-column: 1 / 4;
  grid-row: 7;
  min-height: 140px;
  background: var(--bento-bg-card);
}

#bentoGridSection .bento-card--bottom-center {
  grid-column: 4 / 7;
  grid-row: 7;
  min-height: 140px;
  background: linear-gradient(
    135deg,
    rgba(99, 132, 255, 0.08) 0%,
    var(--bento-bg-card) 100%
  );
  border-color: rgba(99, 132, 255, 0.15);
}

#bentoGridSection .bento-card--bottom-right {
  grid-column: 7 / 10;
  grid-row: 7;
  min-height: 140px;
}

/* ================================================
   METRIC DISPLAY - For data cards
   ================================================ */
#bentoGridSection .bento-card-metric {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bento-text-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

#bentoGridSection .bento-card-metric-label {
  font-size: 0.75rem;
  color: var(--bento-text-tertiary);
  letter-spacing: 0.05em;
}

/* Small metric variant */
#bentoGridSection .bento-card-metric--sm {
  font-size: 1.75rem;
}

/* ================================================
   VISUAL HIERARCHY MODIFIERS
   ================================================ */

/* Muted card - background elements */
#bentoGridSection .bento-card--muted {
  background: rgba(24, 24, 27, 0.6);
  border-color: rgba(255, 255, 255, 0.04);
}

/* Accent card - important elements */
#bentoGridSection .bento-card--accent {
  background: linear-gradient(
    145deg,
    rgba(99, 132, 255, 0.06) 0%,
    var(--bento-bg-card) 100%
  );
  border-color: rgba(99, 132, 255, 0.12);
}

/* ================================================
   RESPONSIVE - Tablet
   ================================================ */
@media (max-width: 1024px) {
  #bentoGridSection {
    --bento-gap: 10px;
  }

  #bentoGridSection .bento-grid {
    padding: 1.5rem;
  }

  #bentoGridSection .bento-card {
    padding: 1.25rem;
    border-radius: var(--bento-radius-sm);
  }

  #bentoGridSection .bento-card--center .bento-card-title {
    font-size: 1.5rem;
  }

  #bentoGridSection .bento-card-metric {
    font-size: 2rem;
  }
}

/* ================================================
   RESPONSIVE - Mobile
   ================================================ */
@media (max-width: 768px) {
  #bentoGridSection .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  #bentoGridSection .bento-card--top-left,
  #bentoGridSection .bento-card--top-right,
  #bentoGridSection .bento-card--bottom-left,
  #bentoGridSection .bento-card--bottom-center,
  #bentoGridSection .bento-card--bottom-right {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #bentoGridSection .bento-card--center {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 700px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #bentoGridSection .bento-card--left-tall,
  #bentoGridSection .bento-card--left-combined-1,
  #bentoGridSection .bento-card--left-combined-2,
  #bentoGridSection .bento-card--left-wide,
  #bentoGridSection .bento-card--right-1,
  #bentoGridSection .bento-card--right-2,
  #bentoGridSection .bento-card--right-3 {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: auto;
  }

  /* Mobile: green-gradient-bold, gradient-green und blue-gradient-bold gleiche Größe wie red-gradient-small */
  #bentoGridSection .green-gradient-bold,
  #bentoGridSection .gradient-green,
  #bentoGridSection .blue-gradient-bold {
    font-size: 2rem !important;
  }

  /* Mobile: right-column Cards 140px min-height */
  #bentoGridSection .bento-card--right-1,
  #bentoGridSection .bento-card--right-2,
  #bentoGridSection .bento-card--right-3 {
    min-height: 140px !important;
  }
}

/* ================================================
   GLOW EFFECT - MOBILE OPTIMIZED
   Desktop: Full box-shadow animation
   Mobile: Simple border-color + opacity (GPU accelerated)
   ================================================ */

/* MOBILE: Simple, performant glow using border + pseudo-element */
@media (max-width: 768px) {
  #bentoGridSection .bento-card {
    transition: border-color 0.3s ease, opacity 0.3s ease;
    will-change: border-color, opacity;
  }

  #bentoGridSection .bento-card.border-glow-green {
    border-color: rgba(0, 255, 136, 0.6);
    border-width: 2px;
  }

  #bentoGridSection .bento-card.border-glow-red {
    border-color: rgba(255, 68, 102, 0.6);
    border-width: 2px;
  }

  #bentoGridSection .bento-card.border-glow-blue {
    border-color: rgba(68, 136, 255, 0.6);
    border-width: 2px;
  }
}

/* DESKTOP: Full box-shadow animation */
@media (min-width: 769px) {
  /* Glow Animation - Sanftes Ein- und Ausblenden */
  @keyframes bentoGlowPulse {
    0% {
      box-shadow:
        0 0 0px var(--glow-color),
        inset 0 0 0px var(--glow-inner);
    }
    30% {
      box-shadow:
        0 0 30px var(--glow-color),
        0 0 60px var(--glow-soft),
        inset 0 0 20px var(--glow-inner);
    }
    100% {
      box-shadow:
        0 0 20px var(--glow-color),
        0 0 40px var(--glow-soft),
        inset 0 0 15px var(--glow-inner);
    }
  }

  /* Green Glow */
  #bentoGridSection .bento-card.border-glow-green {
    --glow-color: rgba(0, 255, 136, 0.4);
    --glow-soft: rgba(0, 255, 136, 0.15);
    --glow-inner: rgba(0, 255, 136, 0.08);
    animation: bentoGlowPulse 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    border-color: rgba(0, 255, 136, 0.5);
  }

  /* Red Glow */
  #bentoGridSection .bento-card.border-glow-red {
    --glow-color: rgba(255, 68, 102, 0.4);
    --glow-soft: rgba(255, 68, 102, 0.15);
    --glow-inner: rgba(255, 68, 102, 0.08);
    animation: bentoGlowPulse 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    border-color: rgba(255, 68, 102, 0.5);
  }

  /* Blue Glow - Center */
  #bentoGridSection .bento-card.border-glow-blue {
    --glow-color: rgba(68, 136, 255, 0.5);
    --glow-soft: rgba(68, 136, 255, 0.2);
    --glow-inner: rgba(68, 136, 255, 0.1);
    animation: bentoGlowPulse 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    border-color: rgba(68, 136, 255, 0.5);
  }

  /* Smooth transition for all cards */
  #bentoGridSection .bento-card {
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
  }
}

/* Green Gradient Text */
#bentoGridSection .gradient-green {
  font-weight: 700;
  font-size: 4rem;
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 50%, #00ff88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Red Gradient Text Bold */
#bentoGridSection .red-gradient-bold {
  font-weight: 700;
  font-size: 3rem;
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 50%, #ff6666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Red Gradient Text Small */
#bentoGridSection .red-gradient-small {
  font-weight: 700;
  font-size: 2rem;
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 50%, #ff6666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Green Gradient Text Bold */
#bentoGridSection .green-gradient-bold {
  font-weight: 700;
  font-size: 3rem;
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 50%, #00ff88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Blue Gradient Text Bold */
#bentoGridSection .blue-gradient-bold {
  font-weight: 700;
  font-size: 3rem;
  background: linear-gradient(135deg, #4488ff 0%, #2266dd 50%, #4488ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Badge Container */
#bentoGridSection .badge-container {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  max-width: 520px;
}

/* Badge Style */
#bentoGridSection .badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bento-text-secondary);
  white-space: nowrap;
}

/* Badge Green Text */
#bentoGridSection .badge.badge-green {
  color: #00ff88;
}

/* Badge Blue Text */
#bentoGridSection .badge.badge-blue {
  color: #4488ff;
}

/* ================================================
   FACE PARTICLE CANVAS - Inside Center Card
   Canvas is INSIDE center-card for correct positioning
   overflow: hidden keeps particles within card bounds
   ================================================ */

#bentoGridSection .face-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Center Header - Wrapper für Badges + Headline */
#bentoGridSection .center-header {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  align-self: flex-start;
  width: 100%;
  padding-top: 0.5rem;
}

#bentoGridSection .bento-card--center .badge-container {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 20;
}