/**
Theme Name: Vader Mountain Capital
Author: Robert David Orr
Author URI: https://robertdavidorr.com
Description: Custom-designed, builder-based wordpress site for Vader Mountain Capital
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vader-mountain
Template: astra
*/

:root {
  /* Base palette */
  --vmc-dark-pine: #184C34;
  --vmc-slate-gray: #6D6F72;
  --vmc-soft-mint: #EFF4ED;
  --vmc-vibrant-green: #0EBD60;
  --vmc-fresh-forest: #2D9F55;
  --vmc-deep-evergreen: #106A39;

  /* Text and glass variables */
  --vmc-text-color: #ffffff;
  --vmc-glass-blur: blur(40px) saturate(180%);
  --vmc-transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* RGB components for colours (used to apply alpha) */
  --vmc-vibrant-green-rgb: 14, 189, 96;
  --vmc-fresh-forest-rgb: 45, 159, 85;
  --vmc-dark-pine-rgb: 24, 76, 52;
  --vmc-soft-mint-rgb: 239, 244, 237;
}

/* Force hide BB loading overlay */
.fl-builder-loading,
.fl-builder-loading-screen,
div[class*="loading-overlay"],
div[class*="fl-loading"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html {
  height: 100%;
}

body {
  background: #F8FBF9;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* POWERFUL GLASSMORPHIC BACKGROUND - Mountain Capital Energy */
body:not(.fl-builder-edit):not(.fl-builder-preview)::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    /* MOUNTAIN PEAK (top-left) */
    radial-gradient(
      circle 1200px at 10% 12%,
      rgba(24, 76, 52, 0.45) 0%,
      rgba(16, 106, 57, 0.35) 20%,
      rgba(45, 159, 85, 0.28) 35%,
      rgba(14, 189, 96, 0.18) 50%,
      rgba(0, 137, 123, 0.10) 65%,
      transparent 80%
    ),
    /* TEAL HARMONY (center) */
    radial-gradient(
      ellipse 1600px 1000px at 50% 35%,
      rgba(0, 188, 212, 0.28) 0%,
      rgba(0, 137, 123, 0.22) 25%,
      rgba(26, 188, 156, 0.16) 40%,
      rgba(0, 105, 92, 0.10) 55%,
      rgba(0, 77, 64, 0.05) 70%,
      transparent 85%
    ),
    /* FOREST DEPTH (mid-left) */
    radial-gradient(
      circle 1100px at 18% 50%,
      rgba(16, 106, 57, 0.30) 0%,
      rgba(14, 189, 96, 0.22) 30%,
      rgba(45, 159, 85, 0.15) 50%,
      rgba(0, 137, 123, 0.08) 70%,
      transparent 85%
    ),
    /* VALLEY FOUNDATION (bottom-center) */
    radial-gradient(
      circle 1200px at 50% 90%,
      rgba(0, 105, 92, 0.24) 0%,
      rgba(0, 137, 123, 0.18) 30%,
      rgba(16, 106, 57, 0.12) 50%,
      rgba(14, 189, 96, 0.06) 70%,
      transparent 85%
    );

  backdrop-filter: blur(70px) saturate(150%);
  -webkit-backdrop-filter: blur(70px) saturate(150%);
  animation: vmcGlassFloat 35s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}


/* BRANDED SVG TEXTURE OVERLAY - Mountain Capital signature pattern */
body:not(.fl-builder-edit):not(.fl-builder-preview)::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/themes/vader-mountain/texture-bg-04.svg');
  background-size: 30% auto;
  background-position: top center;
  background-repeat: repeat;
  opacity: 0.12;
  mix-blend-mode: overlay;
  /* Subtle enhancement of the branded green/teal tones */
  filter:
    saturate(1.3)
    brightness(1.08)
    contrast(1.1);
  pointer-events: none;
  z-index: 1;
}

#page > *,
.site > *,
#content,
.site-content,
header,
footer {
  position: relative;
  z-index: 2;
}

/* Fix scroll-to-top button positioning */
.ast-scroll-top {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
}

/*
  Alignment utilities
  These helpers allow buttons to be aligned left, centred
  or right within their container.
*/
.vmc-button-centered {
  display: flex;
  justify-content: center;
}
.vmc-button-left {
  display: flex;
  justify-content: flex-start;
}
.vmc-button-right {
  display: flex;
  justify-content: flex-end;
}

/*
  Base Button Style
  This class defines the core look and feel for all
  Vader Mountain buttons. It sets up the glass backdrop,
  multi‑layered shadows, subtle gradient motion and
  interactive transforms. Children such as icons inherit
  from this style.
*/
.vmc-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 14px 32px;
  min-width: 150px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--vmc-text-color);
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(var(--vmc-vibrant-green-rgb), 0.5);
  background: var(--vmc-glass-blur) rgba(255,255,255,0.08);
  /* Backdrop blur */
  backdrop-filter: var(--vmc-glass-blur);
  -webkit-backdrop-filter: var(--vmc-glass-blur);
  /* Multi‑layer shadows */
  box-shadow:
    0 10px 30px rgba(var(--vmc-vibrant-green-rgb), 0.35),
    0 5px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 60px rgba(var(--vmc-vibrant-green-rgb), 0.15);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  overflow: hidden;
  cursor: pointer;
  transition: var(--vmc-transition);
  /* Establish stacking context */
  z-index: 0;
}

/*
  Animated gradient layer
  This pseudo‑element sits behind the content and
  overlays a slow, continuous gradient that spans
  the Vader palette. The animation duration speeds up
  on hover via the hover selector below.
*/
.vmc-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(var(--vmc-vibrant-green-rgb), 0.25),
    rgba(var(--vmc-fresh-forest-rgb), 0.20),
    rgba(var(--vmc-dark-pine-rgb), 0.30),
    rgba(var(--vmc-soft-mint-rgb), 0.15),
    rgba(var(--vmc-vibrant-green-rgb), 0.20),
    rgba(var(--vmc-fresh-forest-rgb), 0.25),
    rgba(var(--vmc-vibrant-green-rgb), 0.25)
  );
  background-size: 400% 400%;
  animation: vmcGradientShift 18s ease infinite;
  pointer-events: none;
  opacity: 0.8;
  z-index: -1;
}

/*
  Highlight line
  A subtle reflective line across the top of the button
  adds depth and emphasises the glass surface. Its
  gradient picks up both the soft mint and vibrant green
  colours.
*/
.vmc-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--vmc-soft-mint-rgb), 0.6) 15%,
    rgba(var(--vmc-vibrant-green-rgb), 0.9) 50%,
    rgba(var(--vmc-soft-mint-rgb), 0.6) 85%,
    transparent
  );
  pointer-events: none;
  opacity: 0.9;
  z-index: -1;
}

/*
  Idle gradient animation
  The gradient shifts slowly when the button is at rest.
*/
@keyframes vmcGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/*
  Hover interaction
  Enhances the blur, deepens the border and intensifies
  the drop shadows. The gradient animation accelerates
  and the button lifts slightly off the page.
*/
.vmc-button:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(var(--vmc-vibrant-green-rgb), 0.7);
  box-shadow:
    0 15px 45px rgba(var(--vmc-vibrant-green-rgb), 0.45),
    0 8px 20px rgba(var(--vmc-vibrant-green-rgb), 0.3),
    0 5px 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 80px rgba(var(--vmc-vibrant-green-rgb), 0.25);
  transform: translateY(-3px) scale(1.03);
  text-decoration: none;
}

/*
  On hover, speed up the gradient shift and increase
  its opacity to heighten the glow effect.
*/
.vmc-button:hover::before {
  animation-duration: 6s;
  opacity: 1;
}

/*
  Animate icons on hover
  Moves icons slightly to the right on hover and applies
  a subtle glow. Assumes icons are within the button.
*/
.vmc-button i {
  margin-left: 10px;
  font-size: 12px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.vmc-button:hover i {
  transform: translateX(5px);
  filter: drop-shadow(0 0 5px rgba(var(--vmc-vibrant-green-rgb), 0.8));
}

/*
  Hero Variant
  A larger, more prominent version of the base button.
  Used for primary CTAs. Includes a richer background,
  thicker border and greater shadow depth.
*/
.vmc-button--hero {
  font-size: 16px;
  padding: 18px 48px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(var(--vmc-vibrant-green-rgb), 0.6);
  box-shadow:
    0 10px 30px rgba(var(--vmc-vibrant-green-rgb), 0.35),
    0 5px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 70px rgba(var(--vmc-vibrant-green-rgb), 0.2);
}
.vmc-button--hero::before {
  background: radial-gradient(
    circle at 30% 20%,
    rgba(var(--vmc-vibrant-green-rgb), 0.3) 0%,
    transparent 40%
  ),
  radial-gradient(
    circle at 70% 70%,
    rgba(var(--vmc-fresh-forest-rgb), 0.25) 0%,
    transparent 40%
  ),
  radial-gradient(
    circle at 50% 50%,
    rgba(var(--vmc-dark-pine-rgb), 0.28) 0%,
    transparent 45%
  );
  background-size: 300% 300%;
  animation: vmcGradientShift 12s ease infinite;
}
.vmc-button--hero:hover {
  border-color: rgba(var(--vmc-vibrant-green-rgb), 0.9);
  box-shadow:
    0 15px 45px rgba(var(--vmc-vibrant-green-rgb), 0.45),
    0 10px 25px rgba(var(--vmc-vibrant-green-rgb), 0.35),
    0 5px 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 0 100px rgba(var(--vmc-vibrant-green-rgb), 0.3);
}

/*
  Outline Variant
  Provides a translucent interior with a coloured ring.
*/
.vmc-button--outline {
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(var(--vmc-vibrant-green-rgb), 0.6);
  box-shadow:
    0 0 30px rgba(var(--vmc-vibrant-green-rgb), 0.2),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}
.vmc-button--outline::before {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(var(--vmc-vibrant-green-rgb), 0.15) 0%,
    transparent 50%
  );
}
.vmc-button--outline:hover {
  background: rgba(var(--vmc-vibrant-green-rgb), 0.1);
  border-color: rgba(var(--vmc-vibrant-green-rgb), 0.9);
  box-shadow:
    0 0 50px rgba(var(--vmc-vibrant-green-rgb), 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/*
  Secondary Variant
  Uses darker tones from the palette for a subdued
  appearance. Maintains the animated gradient on hover.
*/
.vmc-button--secondary {
  background: linear-gradient(
    145deg,
    rgba(var(--vmc-dark-pine-rgb), 0.85),
    rgba(var(--vmc-fresh-forest-rgb), 0.8)
  );
  border-color: rgba(var(--vmc-vibrant-green-rgb), 0.4);
  box-shadow:
    0 10px 30px rgba(var(--vmc-dark-pine-rgb), 0.4),
    0 5px 15px rgba(0, 0, 0, 0.3);
}
.vmc-button--secondary:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--vmc-fresh-forest-rgb), 0.9),
    rgba(var(--vmc-vibrant-green-rgb), 0.85)
  );
  border-color: rgba(var(--vmc-vibrant-green-rgb), 0.8);
  box-shadow: 0 0 25px rgba(var(--vmc-vibrant-green-rgb), 0.4);
}

/*
  Small Variant
  Reduces padding and font size for compact CTAs.
*/
.vmc-button--small {
  padding: 8px 20px;
  font-size: 12px;
  min-width: 120px;
  border-radius: 10px;
}

/*
  Disabled Variant
  Greys out the button and disables pointer events.
*/
.vmc-button--disabled,
.vmc-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.5);
  pointer-events: none;
}

/* ===================================
   GLOBAL GLASS BACKGROUND UTILITY
   Reusable glassmorphic effect for any container

   USAGE IN BEAVER BUILDER:
   FOR ROWS: In Row Settings > Advanced > Class, add: vmc-glass-bg
   - The effect automatically applies to .fl-row-content-wrap (respects margins)
   - Set your margins in Row Settings > Style > Margins

   FOR COLUMNS: In Column Settings > Advanced > Class, add: vmc-glass-bg
   FOR MODULES: In Module Settings > Advanced > Class, add: vmc-glass-bg

   FEATURES:
   - Premium frosted glass aesthetic with luminous borders
   - Multi-layer depth shadows for elevated appearance
   - Subtle hover lift effect
   - Top highlight accent line
   - Works with any content inside
   - Fully responsive and accessible

   IMPORTANT NOTES:
   - Does NOT include padding - add padding via Beaver Builder settings
   - Does NOT constrain layout - works with flex, grid, or block
   - Background uses border-box clipping for gradient border effect
   - Requires backdrop-filter support (modern browsers)
   - Content inside automatically appears above glass effect
   - Respects BB margins via box-sizing: border-box

   CUSTOMIZATION:
   - Override border-radius as needed
   - Add custom padding in Beaver Builder
   - Layer with other classes safely
   - Remove hover effect with .vmc-glass-bg--no-hover variant
   =================================== */

/* Base class - works on columns/modules, disabled in BB edit mode */
body:not(.fl-builder-edit) .vmc-glass-bg {
  /* Positioning context for pseudo-elements */
  position: relative;

  /* Glass aesthetic border radius */
  border-radius: 24px;

  /* Ensure border is included in total width - critical for BB margins */
  box-sizing: border-box;

  /* IMPORTANT: Let BB control display, width, padding and margin */
  /* Removed width, max-width, and display to respect BB settings */
  /* Inherit padding and margin from BB settings */
  padding: inherit;
  margin: inherit;

  /* Premium glassmorphic background (fallback for older browsers) */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.25) 100%);

  /* Modern glass blur effect */
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);

  /* Luminous gradient border technique */
  border: 1.5px solid transparent;
  background-image:
    /* Inner glass gradient fill */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.25) 100%),
    /* Outer luminous border gradient */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(200, 240, 255, 0.6) 15%,
      rgba(180, 255, 230, 0.4) 30%,
      rgba(160, 220, 255, 0.3) 50%,
      rgba(200, 255, 240, 0.4) 70%,
      rgba(220, 235, 255, 0.5) 85%,
      rgba(255, 255, 255, 0.7) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Multi-layer elegant depth shadows */
  box-shadow:
    /* Inner highlight for glass shine */
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    /* Primary depth shadow */
    0 20px 60px rgba(0, 0, 0, 0.08),
    /* Secondary depth layer */
    0 10px 30px rgba(0, 0, 0, 0.04),
    /* Subtle brand glow */
    0 0 80px rgba(14, 189, 96, 0.06);

  /* Smooth interactive transitions */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top luminous accent line */
body:not(.fl-builder-edit) .vmc-glass-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(14, 189, 96, 0.3) 50%,
    rgba(255, 255, 255, 0.5) 80%,
    transparent
  );
  pointer-events: none;
  opacity: 0.9;
}

/* Enhanced hover state with lift effect */
body:not(.fl-builder-edit) .vmc-glass-bg:hover {
  transform: translateY(-4px);
  box-shadow:
    /* Brighter inner highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    /* Deeper shadows on hover */
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 15px 40px rgba(0, 0, 0, 0.08),
    /* Stronger brand glow */
    0 0 100px rgba(14, 189, 96, 0.12);
}

/* Variant: Disable hover effect when not desired */
body:not(.fl-builder-edit) .vmc-glass-bg--no-hover:hover {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.04),
    0 0 80px rgba(14, 189, 96, 0.06);
}

/* Variant: Subtle border radius for less dramatic curves */
body:not(.fl-builder-edit) .vmc-glass-bg--subtle {
  border-radius: 16px;
}

/* Variant: Minimal border radius for near-square appearance */
body:not(.fl-builder-edit) .vmc-glass-bg--minimal {
  border-radius: 8px;
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  body:not(.fl-builder-edit) .vmc-glass-bg {
    transition: none;
  }

  body:not(.fl-builder-edit) .vmc-glass-bg:hover {
    transform: none;
  }
}

/* Responsive: Adjust for mobile devices */
@media (max-width: 768px) {
  body:not(.fl-builder-edit) .vmc-glass-bg {
    border-radius: 16px;
  }

  /* Reduce hover lift on mobile for better touch experience */
  body:not(.fl-builder-edit) .vmc-glass-bg:hover {
    transform: translateY(-2px);
  }
}

/* Browser fallback: For browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(40px)) {
  body:not(.fl-builder-edit) .vmc-glass-bg {
    /* Use more opaque background as fallback */
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.75) 100%);
  }
}

/* Beaver Builder Specific: Apply ONLY to content wrapper when class is on row */
/* Target the immediate child wrapper only - prevents doubled effect */
/* IMPORTANT: Only applies in frontend, disabled in BB edit mode */
body:not(.fl-builder-edit) .fl-row.vmc-glass-bg > .fl-row-content-wrap {
  position: relative;
  border-radius: 24px;
  box-sizing: border-box;
  /* Respect BB padding and margin settings */
  padding: inherit;
  margin: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.25) 100%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(200, 240, 255, 0.6) 15%,
      rgba(180, 255, 230, 0.4) 30%,
      rgba(160, 220, 255, 0.3) 50%,
      rgba(200, 255, 240, 0.4) 70%,
      rgba(220, 235, 255, 0.5) 85%,
      rgba(255, 255, 255, 0.7) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.04),
    0 0 80px rgba(14, 189, 96, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.fl-builder-edit) .fl-row.vmc-glass-bg > .fl-row-content-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(14, 189, 96, 0.3) 50%,
    rgba(255, 255, 255, 0.5) 80%,
    transparent
  );
  pointer-events: none;
  opacity: 0.9;
}

body:not(.fl-builder-edit) .fl-row.vmc-glass-bg > .fl-row-content-wrap:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 15px 40px rgba(0, 0, 0, 0.08),
    0 0 100px rgba(14, 189, 96, 0.12);
}

/* Prevent any glass effect on the row itself */
.fl-row.vmc-glass-bg {
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Prevent any glass effect on nested content elements */
.fl-row.vmc-glass-bg .fl-row-content,
.fl-row.vmc-glass-bg .fl-col-group,
.fl-row.vmc-glass-bg .fl-col {
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
}

/* ===================================
   VADER MOUNTAIN CAPITAL - HERO GRID
   =================================== */

.vmc-funding-grid {
  padding: 3rem 0;
  display: flex;
  justify-content: center;
}

.vmc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
 
  gap: 16px;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
}

.vmc-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: 16px;

  /* Luminous light-reflection border */
  border: 1.5px solid transparent;
  background-image: linear-gradient(135deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(200, 240, 255, 0.6) 15%,
    rgba(180, 255, 230, 0.4) 30%,
    rgba(160, 220, 255, 0.3) 50%,
    rgba(200, 255, 240, 0.4) 70%,
    rgba(220, 235, 255, 0.5) 85%,
    rgba(255, 255, 255, 0.7) 100%);
  background-origin: border-box;
  background-clip: border-box;
}

.vmc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14.5px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vmc-card:hover {
  /* Intensified light-reflection on hover */
  background-image: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(180, 235, 255, 0.75) 15%,
    rgba(160, 255, 220, 0.55) 30%,
    rgba(140, 210, 255, 0.45) 50%,
    rgba(180, 255, 230, 0.55) 70%,
    rgba(200, 230, 255, 0.65) 85%,
    rgba(255, 255, 255, 0.85) 100%);
}

.vmc-card:hover img {
  transform: scale(1.05);
}

/* CLEAN WHITE PILL - FINTECH STYLE */
.vmc-pill {
  position: absolute;
  bottom: 32px;
  left: 32px;
  display: inline-flex;
  flex-direction: column;
  padding: 8px 22px;
  color:#ffffff;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  background: linear-gradient(145deg, rgba(var(--vmc-dark-pine-rgb), 0.85), rgba(var(--vmc-fresh-forest-rgb), 0.8));
  border-radius: 100px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
  width: auto;
  max-width: calc(100% - 64px);
}

.vmc-pill strong {
  /*color: #0a273d;*/
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.vmc-pill span {
  /*color: #4a5568;*/
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 0.75rem;
}

/* ===================================
   FEATURE HIGHLIGHTS
   =================================== */
.vmc-features {
  padding: 2rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

.vmc-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 0 1rem;
}

.vmc-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: 16px;

  /* Subtle glassmorphic background */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);

  /* Luminous border like vmc-column */
  border: 1px solid transparent;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.25) 100%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(200, 240, 255, 0.45) 20%,
      rgba(180, 255, 230, 0.3) 40%,
      rgba(160, 220, 255, 0.25) 60%,
      rgba(200, 255, 240, 0.3) 80%,
      rgba(255, 255, 255, 0.5) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Subtle shadow for depth */
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vmc-feature-item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.06),
    0 6px 12px rgba(0, 0, 0, 0.04),
    0 0 40px rgba(14, 189, 96, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.vmc-feature-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;

  /* Gradient background for icon container */
  background: linear-gradient(135deg,
    rgba(14, 189, 96, 0.15) 0%,
    rgba(0, 137, 123, 0.12) 100%);

  /* Icon glow effect */
  box-shadow:
    0 4px 12px rgba(14, 189, 96, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);

  color: #0EBD60;
  transition: all 0.3s ease;
}

.vmc-feature-item:hover .vmc-feature-icon {
  background: linear-gradient(135deg,
    rgba(14, 189, 96, 0.25) 0%,
    rgba(0, 137, 123, 0.20) 100%);
  box-shadow:
    0 6px 16px rgba(14, 189, 96, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.vmc-feature-icon svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 4px rgba(14, 189, 96, 0.2));
}

.vmc-feature-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.vmc-feature-content p {
  font-size: 15px;
  font-weight: 400;
  color: #4a5568;
  margin: 0;
  line-height: 1.5;
}

.vmc-feature-text h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #0a273d;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.vmc-feature-text p {
  font-size: 0.9rem;
  font-weight: 400;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .vmc-features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .vmc-feature-icon {
    width: 44px;
    height: 44px;
  }

  .vmc-feature-text h4 {
    font-size: 0.95rem;
  }

  .vmc-feature-text p {
    font-size: 0.85rem;
  }
}

/* ===================================
   VMC COLUMN - GLASSMORPHIC CONTAINER
   Semi-transparent glassmorphic background
   =================================== */

.vmc-column {
  position: relative;
  padding: 35px;

  /* Luminous light-reflection border - premium glassmorphic */
  border: 1.5px solid transparent;
  background-image:
    /* Layer 1: Pure white glassmorphic background */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.15) 100%),
    /* Layer 2: Light-reflection border gradient */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(200, 240, 255, 0.6) 15%,
      rgba(180, 255, 230, 0.4) 30%,
      rgba(160, 220, 255, 0.3) 50%,
      rgba(200, 255, 240, 0.4) 70%,
      rgba(220, 235, 255, 0.5) 85%,
      rgba(255, 255, 255, 0.7) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 20px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.04),
    0 0 60px rgba(0, 0, 0, 0.03);

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Highlight line across top for depth */
.vmc-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.5) 80%,
    transparent
  );
  pointer-events: none;
  opacity: 0.8;
}

/* Enhanced luminous border on hover */
.vmc-column:hover {
  background-image:
    /* Slightly brighter glassmorphic on hover */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.2) 100%),
    /* Intensified light-reflection border on hover */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(180, 235, 255, 0.75) 15%,
      rgba(160, 255, 220, 0.55) 30%,
      rgba(140, 210, 255, 0.45) 50%,
      rgba(180, 255, 230, 0.55) 70%,
      rgba(200, 230, 255, 0.65) 85%,
      rgba(255, 255, 255, 0.85) 100%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 30px 60px rgba(0, 0, 0, 0.12),
    0 15px 30px rgba(0, 0, 0, 0.08),
    0 0 80px rgba(14, 189, 96, 0.08);

  transform: translateY(-6px);
}

/* ===================================
   GLASSMORPHIC ANIMATED BACKGROUND
   Animation for full-page gradient (applied to body)
   =================================== */

@keyframes vmcGlassFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: translate(10%, -8%) rotate(1.2deg) scale(1.06);
    opacity: 0.96;
  }
  50% {
    transform: translate(-8%, 12%) rotate(-0.8deg) scale(0.97);
    opacity: 0.94;
  }
  75% {
    transform: translate(12%, 6%) rotate(1.5deg) scale(1.04);
    opacity: 0.95;
  }
}

/* ===================================
   TEXTURE OVERLAY - SECTION 1 & HEADER
   Subtle SVG texture recolored to brand
   =================================== */

/* Section and header containers - removed individual backgrounds for unified approach */

/* Footer layout removed - causing issues */

/* ===================================
   DRAMATIC HERO HEADLINE TREATMENT
   Revenue-Based Financing emphasis
   =================================== */

.vmc-hero-headline {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 56px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 56px;
  margin: 0 0 10px 0;
  padding: 0;
  color: #000000;

  /* Text rendering optimization */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vmc-header-pt2 {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 80px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 90px;
  padding: 0;
  text-transform: uppercase;

  /* Vibrant gradient text - Green to Teal with energy */
  background: linear-gradient(
    135deg,
    #0EBD60 0%,
    #2D9F55 25%,
    #00897B 50%,
    #0288D1 75%,
    #0EBD60 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% 200% !important;
  animation: heroGradientShift 8s ease-in-out infinite;

  /* Dramatic text shadow for depth */
  filter: drop-shadow(0 4px 12px rgba(14, 189, 96, 0.25))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

  /* Text rendering optimization */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply gradient to any spans inside vmc-header-pt2 */
.vmc-header-pt2 span,
.vmc-header-pt2 * {
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.vmc-header {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 42px !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;

  /* Clean brand green - no fuzziness */
  color: #0EBD60 !important;

  /* NO text shadow - clean and crisp */
  text-shadow: none !important;

  /* Text rendering optimization */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 span.vmc-header-pt3 {
  font-size: 28px !important;
  line-height:28px;
  text-transform: uppercase;
}

/* Gradient animation for hero text */
@keyframes heroGradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vmc-hero-headline {
    font-size: clamp(2.5rem, 10vw, 4rem);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }

  .vmc-header {
    font-size: clamp(1.25rem, 5vw, 2rem);
    font-weight: 400;
  }
}

.vmc-slider {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  
  margin: 60px 0;
}

.vmc-slider .slider-main-title {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: white;
  text-align: center;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
  /* background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px); */
  padding: 20px 60px;
  /* border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4); */
}

.vmc-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 80px 40px;
  box-sizing: border-box;
}

.vmc-slider .slide.active {
  opacity: 1;
}

/* Glassmorphic overlay */
.vmc-slider .slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    rgba(14, 189, 96, 0.75) 0%,
    rgba(0, 137, 123, 0.65) 50%,
    rgba(45, 159, 85, 0.70) 100%);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  z-index: 1;
}

.vmc-slider .slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: 50px;
  width: 100%;
  box-sizing: border-box;

  /* Premium glassmorphic card */
  /* background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.10) 100%);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border-radius: 24px; */
  /* border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4); */
}

.vmc-slider .slide-eyebrow {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.vmc-slider .slide-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: white;
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 20px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.vmc-slider .slide-subtitle {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.95);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 30px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  line-height: 1.4;
}

.vmc-slider .slide-list {
  list-style: none;
  padding: 0;
  margin: 30px auto 0;
  max-width: 700px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  text-align: left;
}

.vmc-slider .slide-list li {
  color: white;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 16px 12px 40px;
  position: relative;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.vmc-slider .slide-list li:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.vmc-slider .slide-list li::before {
  content: '✓';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #0EBD60;
  font-weight: 700;
  font-size: 16px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Navigation dots */
.vmc-slider .nav-container {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.12);
  padding: 12px 24px;
  border-radius: 30px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.vmc-slider .nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.vmc-slider .nav-dot:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.2);
}

.vmc-slider .nav-dot.active {
  background: #0EBD60;
  border-color: white;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(14, 189, 96, 0.6);
}

/* Arrow navigation */
.vmc-slider .prev, .vmc-slider .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  font-size: 24px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.vmc-slider .prev {
  left: 30px;
}

.vmc-slider .next {
  right: 30px;
}

.vmc-slider .prev:hover, .vmc-slider .next:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Background images for each industry category */
.vmc-slider .slide-1 {
  background-image: url('https://images.unsplash.com/photo-1521017432531-fbd92d768814?w=1920&q=80');
}

.vmc-slider .slide-2 {
  background-image: url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1920&q=80');
}

.vmc-slider .slide-3 {
  background-image: url('https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=1920&q=80');
}

.vmc-slider .slide-4 {
  background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1920&q=80');
}

.vmc-slider .slide-5 {
  background-image: url('https://images.unsplash.com/photo-1556740749-887f6717d7e4?w=1920&q=80');
}

.vmc-slider .slide-6 {
  background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80');
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .vmc-slider {
    height: 700px;
  }
  .vmc-slider .slider-main-title {
    font-size: 40px;
    padding: 18px 50px;
  }
  .vmc-slider .slide-title {
    font-size: 48px;
  }
  .vmc-slider .slide-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .vmc-slider {
    height: 600px;
    border-radius: 16px;
  }
  .vmc-slider .slider-main-title {
    font-size: 32px;
    padding: 15px 40px;
    top: 30px;
  }
  .vmc-slider .slide {
    padding: 60px 20px;
  }
  .vmc-slider .slide-content {
    padding: 30px;
  }
  .vmc-slider .slide-title {
    font-size: 36px;
  }
  .vmc-slider .slide-subtitle {
    font-size: 20px;
  }
  .vmc-slider .prev, .vmc-slider .next {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  .vmc-slider .prev {
    left: 20px;
  }
  .vmc-slider .next {
    right: 20px;
  }
}

@media (max-width: 480px) {
  .vmc-slider {
    height: 550px;
  }
  .vmc-slider .slider-main-title {
    font-size: 24px;
    padding: 12px 30px;
    top: 20px;
  }
  .vmc-slider .slide {
    padding: 40px 15px;
  }
  .vmc-slider .slide-content {
    padding: 20px;
  }
  .vmc-slider .slide-title {
    font-size: 28px;
  }
  .vmc-slider .slide-subtitle {
    font-size: 18px;
  }
  .vmc-slider .slide-list li {
    font-size: 14px;
    padding: 10px 12px 10px 36px;
  }
}

/* ===================================
   THREE EASY STEPS SECTION
   =================================== */

.steps-section {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-2xl, 64px) var(--spacing-md, 24px);
  box-sizing: border-box;
  overflow: visible;
}

.steps-header {
  text-align: center;
  margin-bottom: 64px;
}

.steps-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--vmc-dark-pine);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.steps-subtitle {
  font-size: 1.125rem;
  color: var(--vmc-slate-gray);
  font-weight: 400;
}

.steps-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-auto-flow: row;
  overflow: visible;
  perspective: 2000px;
}

/* Ensure grid items don't break */
.steps-container > .step-card {
  grid-column: span 1;
  min-width: 0;
}

.step-card {
  position: relative;
  padding: 60px 48px 48px;
  border-radius: 20px;
  height: 100%;
  min-height: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
  box-sizing: border-box;
  transform-style: preserve-3d;
  isolation: isolate;

  /* Smooth transitions for ALL properties */
  transition:
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-image 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    backdrop-filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Luminous gradient border - financial premium look */
  border: 2px solid transparent;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.42) 15%,
      rgba(255, 255, 255, 0.48) 30%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.65) 70%,
      rgba(255, 255, 255, 0.75) 85%,
      rgba(255, 255, 255, 0.85) 100%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(200, 240, 255, 0.6) 15%,
      rgba(14, 189, 96, 0.24) 30%,
      rgba(0, 137, 123, 0.2) 50%,
      rgba(14, 189, 96, 0.4) 70%,
      rgba(220, 235, 255, 0.6) 85%,
      rgba(255, 255, 255, 0.8) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Enhanced glass effect */
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6) 20%,
    rgba(14, 189, 96, 0.14) 50%,
    rgba(255, 255, 255, 0.6) 80%,
    transparent
  );
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 3.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.step-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;

  /* Sophisticated multi-layer light diffusion - organic and elegant */
  background:
    /* Layer 1: Bright center bloom - offset for natural asymmetry */
    radial-gradient(
      ellipse 85% 95% at 48% 45%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.65) 15%,
      rgba(14, 189, 96, 0.4) 32%,
      transparent 58%
    ),
    /* Layer 2: Secondary glow - creates depth */
    radial-gradient(
      ellipse 110% 120% at 52% 55%,
      rgba(180, 235, 255, 0.45) 0%,
      rgba(0, 137, 123, 0.35) 25%,
      rgba(14, 189, 96, 0.28) 45%,
      transparent 68%
    ),
    /* Layer 3: Atmospheric wash - soft outer aura */
    radial-gradient(
      ellipse 130% 140% at 50% 50%,
      rgba(14, 189, 96, 0.18) 0%,
      rgba(180, 235, 255, 0.15) 35%,
      rgba(0, 137, 123, 0.12) 55%,
      rgba(14, 189, 96, 0.08) 72%,
      transparent 88%
    );

  background-size: 0% 0%, 0% 0%, 0% 0%;
  background-position: center center, center center, center center;
  background-repeat: no-repeat;

  /* Refined blur for soft-focus glass effect */
  filter: blur(22px);

  /* Luminous blend for premium glass-light interaction */
  mix-blend-mode: screen;

  /* Smooth transitions for elegant exit */
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-size 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.step-card:hover {
  transform: translateY(-8px) rotateX(3deg) scale(1.01);
  transform-origin: center center;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(240, 248, 255, 0.72) 15%,
      rgba(220, 242, 255, 0.68) 30%,
      rgba(180, 235, 255, 0.55) 50%,
      rgba(140, 220, 200, 0.42) 70%,
      rgba(100, 200, 150, 0.35) 85%,
      rgba(14, 189, 96, 0.28) 100%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(220, 245, 255, 0.82) 15%,
      rgba(180, 235, 255, 0.70) 30%,
      rgba(14, 189, 96, 0.45) 50%,
      rgba(180, 235, 255, 0.68) 70%,
      rgba(100, 190, 160, 0.52) 85%,
      rgba(0, 137, 123, 0.35) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Enhanced glass effect on hover */
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 24px 48px rgba(0, 0, 0, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.10),
    0 0 80px rgba(14, 189, 96, 0.2),
    0 0 40px rgba(180, 235, 255, 0.15);
}

.step-card:hover::after {
  animation: organicLightBloom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.step-number-badge {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 85px;
  height: 85px;
  background: linear-gradient(135deg, var(--vmc-vibrant-green) 0%, var(--vmc-deep-evergreen) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 8px 24px rgba(14, 189, 96, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 100;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.step-number-badge::before {
  content: 'Step';
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-bottom: 2px;
}

.step-card:hover .step-number-badge {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow:
    0 12px 32px rgba(14, 189, 96, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/*
   Organic Light Bloom Animation
   Three-layer orchestrated emergence - like natural light catching curved glass
   Each layer blooms at slightly different rates for organic depth
*/
@keyframes organicLightBloom {
  0% {
    opacity: 0;
    background-size: 0% 0%, 0% 0%, 0% 0%;
    filter: blur(30px);
  }

  /* Center bloom emerges first - bright and focused */
  35% {
    opacity: 0.75;
    background-size: 95% 95%, 75% 75%, 60% 60%;
    filter: blur(20px);
  }

  /* Secondary layer catches up - adds depth */
  60% {
    opacity: 0.92;
    background-size: 125% 125%, 115% 115%, 100% 100%;
    filter: blur(18px);
  }

  /* Full bloom - all layers at peak, stays here while hovering */
  100% {
    opacity: 1;
    background-size: 145% 145%, 140% 140%, 135% 135%;
    filter: blur(16px);
  }
}

.step-icon-wrapper {
  width: 120px;
  height: 120px;
  margin: 32px 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.step-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vmc-dark-pine);
  margin-bottom: 16px;
  position: relative;
  z-index: 10;
}

.step-description {
  font-size: 1rem;
  color: var(--vmc-slate-gray);
  line-height: 1.7;
  position: relative;
  z-index: 10;
}

@media (max-width: 900px) {
  .steps-container {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .steps-container > .step-card {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .steps-section {
    padding: 48px 16px;
  }

  .steps-title {
    font-size: 2rem;
  }

  .steps-subtitle {
    font-size: 1rem;
  }

  .step-card {
    padding: 32px 24px;
  }

  .step-icon-wrapper {
    width: 100px;
    height: 100px;
  }

  .step-title {
    font-size: 1.25rem;
  }

  .step-description {
    font-size: 0.9375rem;
  }
}

@media (max-width: 480px) {
  .steps-header {
    margin-bottom: 48px;
  }

  .step-number-badge {
    width: 70px;
    height: 70px;
    font-size: 1.25rem;
    border-width: 3px;
  }

  .step-number-badge::before {
    font-size: 0.5rem;
  }

  .step-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .step-card {
    padding: 50px 32px 32px;
  }
}

/* ===================================
   VMC FUNDING HERO BANNER - SPLIT DESIGN
   Premium glassmorphic hero with split emphasis
   =================================== */

.vmc-funding-hero {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.vmc-funding-hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 60px 56px;
  border-radius: 24px;
  position: relative;

  /* Premium glassmorphic background */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);

  /* Luminous border gradient */
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.25) 100%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(200, 240, 255, 0.6) 15%,
      rgba(180, 255, 230, 0.4) 30%,
      rgba(160, 220, 255, 0.3) 50%,
      rgba(200, 255, 240, 0.4) 70%,
      rgba(220, 235, 255, 0.5) 85%,
      rgba(255, 255, 255, 0.7) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* Elegant shadows */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.04),
    0 0 80px rgba(14, 189, 96, 0.06);

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top highlight line */
.vmc-funding-hero__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(14, 189, 96, 0.3) 50%,
    rgba(255, 255, 255, 0.5) 80%,
    transparent
  );
  pointer-events: none;
  opacity: 0.9;
}

.vmc-funding-hero__content:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 15px 40px rgba(0, 0, 0, 0.08),
    0 0 100px rgba(14, 189, 96, 0.12);
}

/* Left Column: Text Content */
.vmc-funding-hero__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vmc-funding-hero__headline {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--vmc-dark-pine);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;

  /* Subtle text shadow for depth */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vmc-funding-hero__body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--vmc-slate-gray);
  line-height: 1.6;
  margin: 0;
}

/* Right Column: Amount Card */
.vmc-funding-hero__amount-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  border-radius: 20px;
  position: relative;

  /* Elevated glassmorphic card */
  background: linear-gradient(135deg,
    rgba(14, 189, 96, 0.08) 0%,
    rgba(0, 137, 123, 0.05) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);

  /* Inner border gradient */
  border: 2px solid transparent;
  background-image:
    linear-gradient(135deg,
      rgba(14, 189, 96, 0.08) 0%,
      rgba(0, 137, 123, 0.05) 100%),
    linear-gradient(135deg,
      rgba(14, 189, 96, 0.4) 0%,
      rgba(0, 137, 123, 0.3) 50%,
      rgba(14, 189, 96, 0.4) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 30px rgba(14, 189, 96, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08);

  transition: all 0.3s ease;
}

.vmc-funding-hero__amount-card:hover {
  transform: scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 15px 40px rgba(14, 189, 96, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.12);
}

.vmc-funding-hero__amount-badge {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--vmc-vibrant-green);
  margin-bottom: 12px;
  opacity: 0.9;
}

.vmc-funding-hero__amount {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 8px 0;

  /* Animated gradient text */
  background: linear-gradient(
    135deg,
    /* #0EBD60 0%,
    #2D9F55 25%,
    #00897B 50%,
    #0288D1 75%,
    #0EBD60 100% */
    #090909 0%, #1a202c 25%, #4a5568 50%, #121212 75%, #303030 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: heroGradientShift 8s ease-in-out infinite;

  /* Dramatic shadow */
  filter: drop-shadow(0 4px 12px rgba(14, 189, 96, 0.25));
}

.vmc-funding-hero__amount-plus {
  font-size: 36px;
  font-weight: 600;
  opacity: 0.85;
}

.vmc-funding-hero__amount-subtext {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--vmc-slate-gray);
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-bottom: 24px;
}

/* CTA Button */
.vmc-funding-hero__cta {
  margin-top: 24px;
}

.vmc-funding-hero__cta-button {
  display: inline-block;
  padding: 16px 40px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  border-radius: 12px;
  position: relative;
  overflow: hidden;

  /* Primary gradient background */
  background: linear-gradient(
    135deg,
    var(--vmc-vibrant-green) 0%,
    #00897B 100%
  );

  /* Elevated shadow */
  box-shadow:
    0 4px 16px rgba(14, 189, 96, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shimmer effect overlay */
.vmc-funding-hero__cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.vmc-funding-hero__cta-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 8px 24px rgba(14, 189, 96, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.vmc-funding-hero__cta-button:hover::before {
  left: 100%;
}

.vmc-funding-hero__cta-button:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 2px 8px rgba(14, 189, 96, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 900px) {
  .vmc-funding-hero__content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 40px;
  }

  .vmc-funding-hero__text {
    text-align: center;
  }

  .vmc-funding-hero__headline {
    font-size: 28px;
  }

  .vmc-funding-hero__body {
    font-size: 16px;
  }

  .vmc-funding-hero__amount {
    font-size: 56px;
  }

  .vmc-funding-hero__amount-plus {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .vmc-funding-hero {
    padding: 0 16px;
  }

  .vmc-funding-hero__content {
    padding: 36px 28px;
    gap: 32px;
  }

  .vmc-funding-hero__headline {
    font-size: 24px;
  }

  .vmc-funding-hero__body {
    font-size: 15px;
  }

  .vmc-funding-hero__amount-card {
    padding: 32px 24px;
  }

  .vmc-funding-hero__amount {
    font-size: 48px;
  }

  .vmc-funding-hero__amount-plus {
    font-size: 28px;
  }

  .vmc-funding-hero__amount-badge {
    font-size: 12px;
  }

  .vmc-funding-hero__amount-subtext {
    font-size: 14px;
  }
}

/* ===================================
   VMC REQUIREMENTS SECTION - HORIZONTAL QUALIFICATION BAR
   Single premium bar with inline requirements and animated connectors
   =================================== */

.vmc-requirements {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 24px;
  position: relative;
}

.vmc-requirements__header {
  text-align: center;
  margin-bottom: 48px;
}

.vmc-requirements__title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--vmc-dark-pine);
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.vmc-requirements__subtitle {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--vmc-slate-gray);
  margin: 0;
  line-height: 1.5;
}

/* Horizontal Bar Container */
.vmc-requirements__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 48px;
  border-radius: 24px;
  position: relative;

  /* Premium WHITE glassmorphic background - much lighter */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.65) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);

  /* Luminous border - green is ACCENT only */
  border: 2px solid transparent;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.65) 100%),
    linear-gradient(90deg,
      rgba(14, 189, 96, 0.35) 0%,
      rgba(0, 137, 123, 0.25) 25%,
      rgba(14, 189, 96, 0.2) 50%,
      rgba(0, 137, 123, 0.25) 75%,
      rgba(14, 189, 96, 0.35) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0% 0%, 0% 0%;

  /* Multi-layer shadows - brighter highlights */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 10px 30px rgba(14, 189, 96, 0.04),
    0 0 80px rgba(14, 189, 96, 0.02);

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: barBorderFlow 12s ease-in-out infinite;
}

/* Animated border flow */
@keyframes barBorderFlow {
  0%, 100% {
    background-position: 0% 0%, 0% 0%;
  }
  50% {
    background-position: 0% 0%, 200% 0%;
  }
}

/* Top highlight line - brighter white center */
.vmc-requirements__bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.4) 80%,
    transparent
  );
  pointer-events: none;
  opacity: 0.95;
}

.vmc-requirements__bar:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 15px 40px rgba(14, 189, 96, 0.08),
    0 0 100px rgba(14, 189, 96, 0.05);
}

/* Individual Requirement Item */
.vmc-requirements__item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  position: relative;
  transition: all 0.4s ease;
}

.vmc-requirements__item:hover {
  transform: scale(1.02);
}

/* Icon Circle - WHITE glassmorphic with green accent border */
.vmc-requirements__icon-circle {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;

  /* Icon background - nearly WHITE */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.55) 100%);

  /* Icon border - green ACCENT only */
  border: 2px solid transparent;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.55) 100%),
    linear-gradient(135deg,
      rgba(14, 189, 96, 0.3) 0%,
      rgba(0, 137, 123, 0.25) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow:
    inset 0 1px 4px rgba(255, 255, 255, 0.8),
    0 4px 16px rgba(14, 189, 96, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);

  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vmc-requirements__item:hover .vmc-requirements__icon-circle {
  transform: scale(1.1);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.7) 100%);
  box-shadow:
    inset 0 1px 6px rgba(255, 255, 255, 1),
    0 6px 24px rgba(14, 189, 96, 0.15),
    0 3px 12px rgba(0, 0, 0, 0.06);
}

/* Icon SVG */
.vmc-requirements__icon {
  width: 42px;
  height: 42px;
  color: var(--vmc-vibrant-green);
  filter: drop-shadow(0 2px 6px rgba(14, 189, 96, 0.2));
  transition: all 0.4s ease;
}

.vmc-requirements__item:hover .vmc-requirements__icon {
  transform: scale(1.08);
  filter: drop-shadow(0 3px 10px rgba(14, 189, 96, 0.35));
}

/* Content Text */
.vmc-requirements__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmc-requirements__label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--vmc-dark-pine);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.vmc-requirements__item:hover .vmc-requirements__label {
  color: var(--vmc-vibrant-green);
}

.vmc-requirements__detail {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--vmc-slate-gray);
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

/* Check Badge - WHITE with subtle green tint */
.vmc-requirements__check-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.5) 100%);
  border: 1.5px solid rgba(14, 189, 96, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(14, 189, 96, 0.08);

  transition: all 0.3s ease;
}

.vmc-requirements__check-badge svg {
  width: 16px;
  height: 16px;
  color: var(--vmc-vibrant-green);
  filter: drop-shadow(0 1px 3px rgba(14, 189, 96, 0.2));
}

.vmc-requirements__item:hover .vmc-requirements__check-badge {
  transform: scale(1.15);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.65) 100%);
  border-color: rgba(14, 189, 96, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 12px rgba(14, 189, 96, 0.18);
}

/* Connector Arrows */
.vmc-requirements__connector {
  flex-shrink: 0;
  width: 60px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.vmc-requirements__bar:hover .vmc-requirements__connector {
  opacity: 0.9;
}

.vmc-requirements__connector svg {
  width: 100%;
  height: 100%;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .vmc-requirements__bar {
    padding: 36px 40px;
    gap: 20px;
  }

  .vmc-requirements__icon-circle {
    width: 70px;
    height: 70px;
  }

  .vmc-requirements__icon {
    width: 36px;
    height: 36px;
  }

  .vmc-requirements__label {
    font-size: 16px;
  }

  .vmc-requirements__detail {
    font-size: 13px;
  }

  .vmc-requirements__connector {
    width: 50px;
  }
}

@media (max-width: 1024px) {
  .vmc-requirements__bar {
    flex-direction: column;
    padding: 40px 36px;
    gap: 32px;
  }

  .vmc-requirements__item {
    width: 100%;
    max-width: 400px;
  }

  .vmc-requirements__connector {
    transform: rotate(90deg);
    width: 24px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .vmc-requirements {
    padding: 48px 16px;
  }

  .vmc-requirements__header {
    margin-bottom: 36px;
  }

  .vmc-requirements__title {
    font-size: 32px;
  }

  .vmc-requirements__subtitle {
    font-size: 16px;
  }

  .vmc-requirements__bar {
    padding: 32px 28px;
    gap: 28px;
  }

  .vmc-requirements__icon-circle {
    width: 64px;
    height: 64px;
  }

  .vmc-requirements__icon {
    width: 32px;
    height: 32px;
  }

  .vmc-requirements__label {
    font-size: 16px;
  }

  .vmc-requirements__detail {
    font-size: 13px;
  }

  .vmc-requirements__check-badge {
    width: 28px;
    height: 28px;
  }

  .vmc-requirements__check-badge svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .vmc-requirements {
    padding: 40px 12px;
  }

  .vmc-requirements__title {
    font-size: 26px;
  }

  .vmc-requirements__subtitle {
    font-size: 15px;
  }

  .vmc-requirements__bar {
    padding: 28px 20px;
    gap: 24px;
  }

  .vmc-requirements__item {
    gap: 12px;
  }

  .vmc-requirements__icon-circle {
    width: 56px;
    height: 56px;
  }

  .vmc-requirements__icon {
    width: 28px;
    height: 28px;
  }

  .vmc-requirements__label {
    font-size: 15px;
  }

  .vmc-requirements__detail {
    font-size: 12px;
  }
}
/* ===================================
   VADER MOUNTAIN CAPITAL - INDUSTRIES SECTION
   Fintech-inspired design system with VMC brand colors
   =================================== */

   .vmc-industries-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--vmc-soft-mint, #EFF4ED) 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.vmc-industries-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(14, 189, 96, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: pulse-subtle 8s ease-in-out infinite;
}

.vmc-industries-section::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(24, 76, 52, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: pulse-subtle 10s ease-in-out infinite reverse;
}

@keyframes pulse-subtle {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    50% { transform: scale(1.1) translate(20px, 20px); opacity: 0.8; }
}

/* ===================================
   INTRO SECTION
   =================================== */

.industries-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}

.industries-main-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--vmc-dark-pine, #184C34);
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--vmc-dark-pine, #184C34) 0%, var(--vmc-vibrant-green, #0EBD60) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.industries-subtitle {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--vmc-slate-gray, #6D6F72);
    margin: 0;
    font-weight: 400;
}

/* ===================================
   INDUSTRIES GRID
   =================================== */

.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ===================================
   INDUSTRY CARDS
   =================================== */

.industry-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 8px rgba(24, 76, 52, 0.08);
    border: 1px solid rgba(14, 189, 96, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--vmc-vibrant-green, #0EBD60) 0%, var(--vmc-fresh-forest, #2D9F55) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-card:hover::before {
    transform: scaleX(1);
}

.industry-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(24, 76, 52, 0.12), 0 4px 8px rgba(14, 189, 96, 0.08);
    border-color: rgba(14, 189, 96, 0.3);
}

/* ===================================
   INDUSTRY ICONS
   =================================== */

.industry-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(14, 189, 96, 0.1) 0%, rgba(45, 159, 85, 0.08) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.industry-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--vmc-vibrant-green, #0EBD60) 0%, var(--vmc-fresh-forest, #2D9F55) 100%);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.industry-card:hover .industry-icon {
    transform: scale(1.08) rotate(3deg);
}

.industry-card:hover .industry-icon::after {
    opacity: 1;
}

.industry-icon svg {
    width: 28px;
    height: 28px;
    color: var(--vmc-fresh-forest, #2D9F55);
    transition: color 0.4s ease;
    position: relative;
    z-index: 1;
}

.industry-card:hover .industry-icon svg {
    color: #ffffff;
}

/* ===================================
   TYPOGRAPHY
   =================================== */

.industry-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--vmc-dark-pine, #184C34);
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.industry-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vmc-slate-gray, #6D6F72);
    margin: 0;
    font-weight: 400;
}

/* ===================================
   CALL TO ACTION
   =================================== */

.industries-cta {
    text-align: center;
    margin-top: 60px;
    padding: 36px 30px;
    background: linear-gradient(135deg, #ffffff 0%, var(--vmc-soft-mint, #EFF4ED) 100%);
    border-radius: 14px;
    border: 2px solid rgba(14, 189, 96, 0.15);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(24, 76, 52, 0.08);
}

.industries-cta-text {
    font-size: 1.25rem;
    color: var(--vmc-slate-gray, #6D6F72);
    margin: 0 0 8px 0;
    line-height: 1.6;
}

.industries-cta-text strong {
    color: var(--vmc-dark-pine, #184C34);
    font-weight: 700;
    background: linear-gradient(135deg, var(--vmc-vibrant-green, #0EBD60) 0%, var(--vmc-fresh-forest, #2D9F55) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.industries-cta-subtext {
    font-size: 1rem;
    color: var(--vmc-slate-gray, #6D6F72);
    margin: 0 auto 30px auto;
    font-weight: 500;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 1024px) {
    .industries-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }

    .industries-main-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .vmc-industries-section {
        padding: 60px 16px;
    }

    .industries-intro {
        margin-bottom: 40px;
    }

    .industries-main-title {
        font-size: 2rem;
    }

    .industries-subtitle {
        font-size: 1.125rem;
    }

    .industries-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    .industry-card {
        padding: 24px 20px;
    }

    .industries-cta {
        padding: 30px 20px;
        margin-top: 40px;
    }

    .industries-cta-text {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .industries-main-title {
        font-size: 1.75rem;
    }

    .industries-subtitle {
        font-size: 1rem;
    }

    .industries-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .industry-icon {
        width: 48px;
        height: 48px;
    }

    .industry-icon svg {
        width: 24px;
        height: 24px;
    }

    .industry-title {
        font-size: 1rem;
    }

    .industry-description {
        font-size: 0.875rem;
    }
}

/* ===================================
   ACCESSIBILITY
   =================================== */

.industry-card:focus-visible {
    outline: 2px solid var(--vmc-vibrant-green, #0EBD60);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .industry-card,
    .industry-icon,
    .industry-card::before {
        transition: none;
        animation: none;
    }

    .vmc-industries-section::before,
    .vmc-industries-section::after {
        animation: none;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .vmc-industries-section {
        background: #ffffff;
        padding: 40px 20px;
    }

    .vmc-industries-section::before,
    .vmc-industries-section::after {
        display: none;
    }

    .industry-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .industry-icon svg {
        color: #000000;
    }
}