/* --- CUSTOM COLORFUL HIGH-CONTRAST PALETTE AND CUSTOM VARIABLES --- */
:root {
  /* Colorful design - Deep Indigo palette with Coral Red, Neon Mint and Cyan highlights */
  --mm-canvas: #0a0b10;
  --mm-plate: #131625;
  --mm-plate-darker: #0d0f1a;
  
  --mm-spark: #00F5D4;        /* Radiant mint green */
  --mm-glow: #3b82f6;         /* Vivid electric blue */
  --mm-sunset: #FF5A5F;       /* Saturated coral pink/red */
  --mm-gold: #FFB800;         /* Energetic soft gold */
  
  --mm-ink-head: #ffffff;
  --mm-ink-body: #94a3b8;
  --mm-ink-bright: #38bdf8;
  
  /* Vibrant linear action gradient for primary triggers */
  --mm-color-gradient-action: linear-gradient(135deg, var(--mm-sunset) 0%, #d9383e 100%);
  
  /* Fonts */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Container Constraints */
  --mm-shell-width: 1180px;
  
  /* Style variables */
  --mm-curve: 16px;           /* Soft border-radius style */
  
  /* Raised Shadow Concept */
  --mm-raised-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- REUSABLE SHELL CONTAINER --- */
.mm-inner-shell {
  max-width: var(--mm-shell-width);
  width: 100%;
}

/* --- OVERRIDES & RESPONSIVE BEHAVIORS --- */
@media (min-width: 1024px) {
  .mm-sticky-cta {
    position: -webkit-sticky;
    position: sticky;
    bottom: 24px;
    z-index: 30;
  }
}

/* --- CUSTOM UTILITIES AND HOVER GRAPHICS --- */
.mm-interactive {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.mm-interactive::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: 0.75s;
  opacity: 0;
}

.mm-interactive:hover::after {
  opacity: 1;
  left: 125%;
}

.mm-deck-item {
  box-shadow: var(--mm-raised-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mm-deck-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}