/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Centralized variables for the entire theme

   Organization:
   - Global Fonts & Base Styles
   - Journey Pages (Colors + Font Sizes)
   - Service Pages (Colors + Font Sizes)
   - Homepage & About Us (Colors + Font Sizes)
   - Shared Design System Variables
   ============================================ */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Oswald:wght@400;600;700;900&family=Share+Tech+Mono&display=swap');

:root {
    /* ============================================
       TYPOGRAPHY - FONT FAMILIES
       ============================================ */
    --font-family-primary: 'Inter', sans-serif;
    --font-family-heading: 'Oswald', sans-serif;
    --font-family-mono: 'Share Tech Mono', monospace;

    /* ============================================
       ⭐ JOURNEY PAGES ⭐
       ============================================ */

    /* --- JOURNEY COLORS --- */

    /* RED SECTION - Master Control */
    --red-main: #fca5a5;          /* HEX color - easier to read and edit */
    --red-secondary: #ffffff;     /* HEX color - easier to read and edit */
    --red-main-glow: 0 0 20px rgb(from var(--red-main) r g b / 0.5), 0 0 40px rgb(from var(--red-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --red-secondary-glow: 0 0 20px rgb(from var(--red-secondary) r g b / 0.5), 0 0 40px rgb(from var(--red-secondary) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --journey-red-gradient: linear-gradient(to bottom, rgb(127 29 29 / 0.6) 0%, rgb(153 27 27 / 0.4) 30%, transparent 60%);

    /* ORANGE SECTION - Master Control */
    --orange-main: #d4a574;       /* HEX color - easier to read and edit */
    --orange-secondary: #ffffff;  /* HEX color - easier to read and edit */
    --orange-main-glow: 0 0 20px rgb(from var(--orange-main) r g b / 0.5), 0 0 40px rgb(from var(--orange-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --orange-secondary-glow: 0 0 20px rgb(from var(--orange-secondary) r g b / 0.5), 0 0 40px rgb(from var(--orange-secondary) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --journey-orange-gradient: linear-gradient(to bottom, rgb(139 69 19 / 0.6) 0%, rgb(88 44 13 / 0.4) 30%, transparent 60%);

    /* GREEN SECTION - Master Control */
    --green-main: #6ee7b7;        /* HEX color - easier to read and edit */
    --green-secondary: #ffffff;   /* HEX color - easier to read and edit */
    --green-main-glow: 0 0 20px rgb(from var(--green-main) r g b / 0.5), 0 0 40px rgb(from var(--green-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --green-secondary-glow: 0 0 20px rgb(from var(--green-secondary) r g b / 0.5), 0 0 40px rgb(from var(--green-secondary) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --journey-green-gradient: linear-gradient(to bottom, rgb(21 94 117 / 0.6) 0%, rgb(13 148 136 / 0.4) 30%, transparent 60%);

    /* CYAN SECTION - Master Control */
    --cyan-main: #67e8f9;         /* HEX color - easier to read and edit */
    --cyan-secondary: #ffffff;    /* HEX color - easier to read and edit */
    --cyan-main-glow: 0 0 20px rgb(from var(--cyan-main) r g b / 0.5), 0 0 40px rgb(from var(--cyan-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --cyan-secondary-glow: 0 0 20px rgb(from var(--cyan-secondary) r g b / 0.5), 0 0 40px rgb(from var(--cyan-secondary) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --journey-cyan-gradient: linear-gradient(to bottom, rgb(6 95 115 / 0.6) 0%, rgb(4 73 95 / 0.4) 30%, transparent 60%);

    /* PURPLE SECTION - Master Control */
    --purple-main: #e9d5ff;       /* HEX color - easier to read and edit */
    --purple-secondary: #ffffff;  /* HEX color - easier to read and edit */
    --purple-main-glow: 0 0 20px rgb(from var(--purple-main) r g b / 0.5), 0 0 40px rgb(from var(--purple-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --purple-secondary-glow: 0 0 20px rgb(from var(--purple-secondary) r g b / 0.5), 0 0 40px rgb(from var(--purple-secondary) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --journey-purple-gradient: linear-gradient(to bottom, rgb(94 28 135 / 0.5) 0%, rgb(86 28 133 / 0.4) 30%, transparent 60%);

    /* Journey Section-Specific Color Gradients */
    --journey-gradient-red: var(--journey-red-gradient);
    --journey-gradient-orange: var(--journey-orange-gradient);
    --journey-gradient-green: var(--journey-green-gradient);
    --journey-gradient-cyan: var(--journey-cyan-gradient);
    --journey-gradient-purple: var(--journey-purple-gradient);

    /* Journey Glass Box Base Gradient */
    --journey-glass-base: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);

    /* --- JOURNEY FONT SIZES --- */
    /* Fluid responsive typography using clamp() for smooth scaling across all devices */

    /* Journey - Hero & Main Titles (H1) */
    --journey-h1-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);         /* 40px → 72px */
    --journey-h1-hero-lg: clamp(3rem, 6vw + 1rem, 5.5rem);        /* 48px → 88px */

    /* Journey - Section Titles (H2) */
    --journey-h2-section: clamp(2rem, 4vw + 1rem, 3.5rem);        /* 32px → 56px */
    --journey-h2-section-lg: clamp(2.5rem, 5vw + 1.5rem, 5rem);   /* 40px → 80px */

    /* Journey - Card Titles (H3) */
    --journey-h3-card: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);     /* 20px → 28px */
    --journey-h3-card-lg: clamp(1.75rem, 3vw + 1rem, 3rem);       /* 28px → 48px */

    /* Journey - Body & Description Text */
    --journey-text-body: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);     /* 18px → 22px */
    --journey-text-description: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);   /* 16px → 20px */

    /* Journey - Small UI Elements */
    --journey-text-label: clamp(0.8125rem, 0.5vw + 0.75rem, 0.875rem);  /* 13px → 14px */
    --journey-text-caption: clamp(0.6875rem, 0.5vw + 0.625rem, 0.75rem); /* 11px → 12px */

    /* ============================================
       ⭐ SERVICE PAGES ⭐
       (The Shield, The Core, The Gun)
       ============================================ */

    /* --- SERVICE PAGES COLORS --- */

    /* THE CORE (Green) - Service Page Colors */
    --service-core-main: #22C55E;
    --service-core-secondary: #ffffff;
    --service-core-main-glow: 0 0 20px rgb(from var(--service-core-main) r g b / 0.5), 0 0 40px rgb(from var(--service-core-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --service-core-page-gradient: linear-gradient(to bottom, rgb(from var(--service-core-main) r g b / 0.4) 0%, rgb(from var(--service-core-main) r g b / 0.16) 60%, transparent 100%);
    --service-core-border: rgb(from var(--service-core-main) r g b / 0.2);
    --service-core-button-bg: #22C55E;

    /* THE GUN (Red) - Service Page Colors */
    --service-gun-main: #ef4444;
    --service-gun-secondary: #ffffff;
    --service-gun-main-glow: 0 0 20px rgb(from var(--service-gun-main) r g b / 0.5), 0 0 40px rgb(from var(--service-gun-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --service-gun-page-gradient: linear-gradient(to bottom, rgb(185 28 28 / 0.4) 0%, rgb(185 28 28 / 0.16) 60%, transparent 100%);
    --service-gun-border: rgb(from var(--service-gun-main) r g b / 0.3);
    --service-gun-button-bg: #e4b183;

    /* THE SHIELD (Purple) - Service Page Colors */
    --service-shield-main: #8b5cf6;
    --service-shield-secondary: #ffffff;
    --service-shield-main-glow: 0 0 20px rgb(from var(--service-shield-main) r g b / 0.5), 0 0 40px rgb(from var(--service-shield-main) r g b / 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
    --service-shield-page-gradient: linear-gradient(to bottom, rgb(from var(--service-shield-main) r g b / 0.4) 0%, rgb(from var(--service-shield-main) r g b / 0.16) 60%, transparent 100%);
    --service-shield-border: rgb(from var(--service-shield-main) r g b / 0.2);
    --service-shield-button-bg: #d7d3ff;

    /* Cross-Sell Components - Unique gradient variables */
    --core-cross-sell-gradient: linear-gradient(to bottom, rgb(from var(--service-core-main) r g b / 0.4) 0%, rgb(from var(--service-core-main) r g b / 0.16) 60%, transparent 100%);
    --gun-cross-sell-gradient: linear-gradient(to bottom, rgb(255 107 0 / 0.4) 0%, rgb(255 107 0 / 0.16) 60%, transparent 100%);
    --shield-cross-sell-gradient: linear-gradient(to bottom, rgb(from var(--service-shield-main) r g b / 0.4) 0%, rgb(from var(--service-shield-main) r g b / 0.16) 60%, transparent 100%);

    /* --- SERVICE PAGES FONT SIZES --- */
    /* Fluid responsive typography using clamp() for smooth scaling across all devices */

    /* Service - Hero Titles (H1) */
    --service-h1-hero: clamp(4rem, 10vw + 2rem, 11rem);          /* 64px → 176px */

    /* Service - Section Titles (H2) */
    --service-h2-section: clamp(1.75rem, 3vw + 1rem, 2.5rem);      /* 28px → 40px */
    --service-h2-section-lg: clamp(3rem, 5vw + 2rem, 5.5rem);      /* 48px → 88px */

    /* Service - Headings (H3-H6) */
    --service-h3-card: clamp(1.5rem, 2vw + 0.75rem, 2rem);           /* 24px → 32px */
    --service-h4-subtitle: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);   /* 20px → 24px */
    --service-h5-small: clamp(1.125rem, 1vw + 0.5rem, 1.25rem);      /* 18px → 20px */
    --service-h6-smallest: clamp(1rem, 0.75vw + 0.5rem, 1.125rem);   /* 16px → 18px */

    /* Service - Hero Supporting Text */
    --service-text-hero-subtitle: clamp(1.375rem, 2vw + 0.5rem, 1.75rem);  /* 22px → 28px */
    --service-text-hero-desc: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);      /* 20px → 24px */
    --service-text-hero-tagline: clamp(0.9375rem, 0.5vw + 0.75rem, 1rem);  /* 15px → 16px */

    /* Service - Body Text */
    --service-text-body: clamp(1rem, 0.75vw + 0.75rem, 1.125rem);       /* 16px → 18px */
    --service-text-body-lg: clamp(1.125rem, 0.75vw + 0.875rem, 1.25rem); /* 18px → 20px */

    /* Service - Stats & Icons */
    --service-stat-number: clamp(3rem, 5vw + 1rem, 4rem);       /* 48px → 64px */
    --service-icon-size: clamp(2.5rem, 3vw + 1rem, 3rem);       /* 40px → 48px */

    /* Service - Button Text */
    --service-text-button: clamp(1rem, 0.75vw + 0.75rem, 1.125rem);   /* 16px → 18px */

    /* Service - Small UI Elements */
    --service-text-ui-md-plus: clamp(1rem, 0.5vw + 0.875rem, 1.0625rem); /* 16px → 17px */
    --service-text-ui-md: clamp(0.875rem, 0.5vw + 0.75rem, 0.9375rem);   /* 14px → 15px */
    --service-text-ui-sm: clamp(0.8125rem, 0.5vw + 0.6875rem, 0.875rem); /* 13px → 14px */

    /* Service - Responsive Headings (already using clamp) */
    --service-heading-responsive: clamp(2.5rem, 5vw, 3rem);           /* 40px → 48px */
    --service-heading-responsive-lg: clamp(2.5rem, 4vw, 3.5rem);      /* 40px → 56px */

    /* ============================================
       ⭐ HOMEPAGE & ABOUT US ⭐
       (Luxury pages: index and uber-uns)
       ============================================ */

    /* --- HOMEPAGE & ABOUT US COLORS --- */

    /* Main Theme Colors */
    --luxury-gold: #d4af37;
    --luxury-gold-light: #f0e68c;
    --luxury-white: #ffffff;
    --luxury-white-soft: rgba(255, 255, 255, 0.9);
    --luxury-white-muted: rgba(255, 255, 255, 0.7);
    --luxury-white-subtle: rgba(255, 255, 255, 0.5);

    /* Glass Morphism Effects */
    --luxury-glass-bg: rgba(255, 255, 255, 0.03);
    --luxury-glass-bg-hover: rgba(255, 255, 255, 0.05);
    --luxury-glass-border: rgba(255, 255, 255, 0.1);
    --luxury-glass-border-hover: rgba(255, 255, 255, 0.15);
    --luxury-glass-blur: blur(10px);
    --luxury-glass-blur-strong: blur(20px);

    /* Gradient Overlays */
    --luxury-gradient-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    --luxury-gradient-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    --luxury-gradient-gold: linear-gradient(135deg, var(--luxury-gold) 0%, var(--luxury-gold-light) 100%);

    /* Background Images */
    --luxury-parallax-bg-image: url("https://development.daily-marketing.de/wp-content/uploads/2025/11/upscalemedia-transformed-2-scaled.jpeg");

    /* --- CARD DESIGN SYSTEM --- */

    /* BACKUP: Original Glass Morphism Card Style (from luxury-homepage.css) */
    --card-bg-original: rgba(255, 255, 255, 0.03);
    --card-bg-hover-original: rgba(255, 255, 255, 0.06);
    --card-border-original: rgba(255, 255, 255, 0.1);
    --card-border-hover-original: rgba(255, 255, 255, 0.3);
    --card-padding-original: 3rem 2.5rem;
    --card-icon-size-original: 70px;
    --card-hover-transform-original: translateY(-12px) translateZ(50px);
    --card-hover-shadow-original: 0 25px 60px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* ACTIVE: Current Card Style Variables (Now using: Bento Card Style) */
    --card-bg: rgba(40, 40, 48, 0.6);
    --card-bg-hover: rgba(50, 50, 60, 0.7);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(255, 255, 255, 0.2);
    --card-padding: 2.5rem 2rem;
    --card-icon-size: 64px;
    --card-hover-transform: translateY(-8px);
    --card-hover-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(139, 92, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* --- HOMEPAGE & ABOUT US FONT SIZES --- */

    /* Homepage - Hero Headings */
    --homepage-h1-hero: clamp(3rem, 8vw, 6rem);        /* Hero title responsive */
    --homepage-h2-hero: clamp(2rem, 5vw, 4rem);        /* Hero subtitle responsive */
    --homepage-h2-section: 4rem;                        /* Section H2 */

    /* Homepage - Section Headings */
    --homepage-h3-section: clamp(3rem, 5vw, 5rem);     /* Section titles responsive */
    --homepage-h3-subtitle: clamp(1.8rem, 3.5vw, 3.5rem); /* Section subtitles responsive */
    --homepage-h3-fixed: 2.5rem;                        /* H3 headings fixed */
    --homepage-h4-fixed: 1.8rem;                        /* H4 headings fixed */

    /* Homepage - Body Text (Responsive) */
    --homepage-text-body: clamp(1.1rem, 1.5vw, 1.4rem);     /* Body text responsive */
    --homepage-text-body-md: clamp(1.2rem, 2vw, 1.8rem);    /* Medium body responsive */
    --homepage-text-body-xl: clamp(1.5rem, 2.5vw, 2.2rem);  /* XL body responsive */
    --homepage-text-description: clamp(1rem, 2vw, 1.5rem);  /* Descriptions responsive */
    --homepage-text-description-lg: clamp(1.1rem, 2vw, 1.5rem); /* Large desc responsive */
    --homepage-text-feature: clamp(1.1rem, 1.5vw, 1.3rem);  /* Feature text responsive */
    --homepage-text-hero-desc: clamp(1.5rem, 3vw, 2.5rem);  /* Hero description responsive */

    /* Homepage - Fixed Text Sizes */
    --homepage-text-card-title: 1.5rem;                 /* Card titles */
    --homepage-text-paragraph-md: 1.3rem;               /* Medium paragraphs */
    --homepage-text-paragraph: 1.2rem;                  /* Standard paragraphs */
    --homepage-text-card: 1.1rem;                       /* Card text */
    --homepage-text-small: 1rem;                        /* Small text */
    --homepage-text-caption: 0.95rem;                   /* Captions */
    --homepage-text-tiny: 0.9rem;                       /* Tiny text */
    --homepage-text-label: 0.75rem;                     /* Labels, badges */

    /* Homepage - Utility Classes */
    --homepage-util-6xl: 3.75rem;                       /* Tailwind md:text-6xl */
    --homepage-util-5xl: 3rem;                          /* Tailwind md:text-5xl */

    /* ============================================
       SHARED DESIGN SYSTEM VARIABLES
       Used across multiple page types
       ============================================ */

    /* --- SPACING & LAYOUT --- */

    /* Journey Spacing */
    --journey-section-padding: 5rem 0; /* 80px vertical */
    --journey-section-padding-mobile: 3.75rem 0; /* 60px vertical */
    --journey-container-max-width: 1280px;
    --journey-container-padding: 0 1.25rem; /* 0 20px */
    --journey-container-padding-mobile: 0 1rem; /* 0 16px */

    /* Service Page Component Spacing */
    --service-component-gap: 5rem; /* 80px - Gap between components/sections */
    --service-component-gap-mobile: 3.75rem; /* 60px - Mobile gap */

    /* Homepage Component Max Width */
    --luxury-homepage-max-width: 1200px;

    /* Container Widths */
    --luxury-container-sm: 640px;
    --luxury-container-md: 768px;
    --luxury-container-lg: 1024px;
    --luxury-container-xl: 1200px;
    --luxury-container-2xl: 1400px;

    /* Spacing System (8px base) */
    --luxury-space-xs: 0.5rem;    /* 8px */
    --luxury-space-sm: 1rem;      /* 16px */
    --luxury-space-md: 1.5rem;    /* 24px */
    --luxury-space-lg: 2rem;      /* 32px */
    --luxury-space-xl: 3rem;      /* 48px */
    --luxury-space-2xl: 4rem;     /* 64px */
    --luxury-space-3xl: 6rem;     /* 96px */
    --luxury-space-4xl: 8rem;     /* 128px */

    /* General Spacing Scale */
    --spacing-base: 4px;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */
    --spacing-20: 5rem; /* 80px */
    --spacing-24: 6rem; /* 96px */
    --spacing-32: 8rem; /* 128px */
    --spacing-40: 10rem; /* 160px */
    --spacing-48: 12rem; /* 192px */
    --spacing-64: 16rem; /* 256px */
    --spacing-80: 20rem; /* 320px */
    --spacing-96: 24rem; /* 384px */

    /* --- BORDER RADIUS --- */

    /* Apple Design Language */
    --luxury-border-radius: 11px;        /* Apple-style corners */
    --luxury-border-radius-large: 16px;  /* Large elements */
    --luxury-border-radius-small: 8px;   /* Small elements */

    /* Service Box Design System */
    --service-box-border-radius: 11px;   /* Apple-style rounded corners */

    /* Journey Glass Box Styling */
    --journey-glass-radius: 12px;

    /* General Border Radius */
    --border-radius-base: 8px;
    --border-radius-sm: 6px;
    --border-radius-md: 11px; /* Apple corners */
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* --- GLASS BOX & BACKDROP EFFECTS --- */

    /* Journey Glass Box */
    --journey-glass-blur: blur(20px);
    --journey-glass-border: 1px solid rgba(255, 255, 255, 0.2);
    --journey-glass-padding: 3rem; /* 48px */
    --journey-glass-padding-lg: 4rem; /* 64px */

    /* Service Box Design System */
    --service-box-border-width: 1px;
    --service-box-border-color: rgba(255, 255, 255, 0.2);
    --service-box-backdrop-blur: 20px;
    --service-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --service-box-padding: 3.125rem 2.5rem;    /* Standard (50px 40px) */
    --service-box-padding-large: 3.75rem 3rem; /* Large (60px 48px) */
    --service-box-padding-small: 2rem 1.5rem;  /* Small (32px 24px) */

    /* General Backdrop Blur */
    --backdrop-blur-sm: blur(4px);
    --backdrop-blur-base: blur(10px);
    --backdrop-blur-md: blur(12px);
    --backdrop-blur-lg: blur(16px);
    --backdrop-blur-xl: blur(20px);

    /* --- SHADOWS --- */

    /* Luxury Shadows */
    --luxury-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --luxury-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --luxury-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
    --luxury-shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1), 0 0 40px rgba(255, 255, 255, 0.05);
    --luxury-shadow-glow-strong: 0 0 30px rgba(255, 255, 255, 0.15), 0 0 60px rgba(255, 255, 255, 0.08);

    /* General Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Glow Shadows - Theme Specific */
    --glow-red: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.4), 0 0 60px rgba(239, 68, 68, 0.2);
    --glow-orange: 0 0 20px rgba(255, 140, 66, 0.6), 0 0 40px rgba(255, 140, 66, 0.4), 0 0 60px rgba(255, 140, 66, 0.2);
    --glow-green: 0 0 20px rgba(110, 231, 183, 0.6), 0 0 40px rgba(110, 231, 183, 0.4), 0 0 60px rgba(110, 231, 183, 0.2);
    --glow-cyan: 0 0 20px rgba(103, 232, 249, 0.6), 0 0 40px rgba(103, 232, 249, 0.4), 0 0 60px rgba(103, 232, 249, 0.2);
    --glow-purple: 0 0 20px rgba(168, 85, 247, 0.6), 0 0 40px rgba(168, 85, 247, 0.4), 0 0 60px rgba(168, 85, 247, 0.2);
    --glow-white: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 255, 255, 0.2);

    /* --- TRANSITIONS --- */

    /* Luxury Transitions */
    --luxury-transition-fast: 0.2s ease;
    --luxury-transition-base: 0.3s ease;
    --luxury-transition-slow: 0.5s ease;

    /* General Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    --transition-all: all 300ms ease-in-out;

    /* --- Z-INDEX --- */

    /* Luxury Z-Index Layers */
    --luxury-z-background: 0;
    --luxury-z-content: 1;
    --luxury-z-overlay: 10;
    --luxury-z-modal: 100;
    --luxury-z-fixed: 1000;

    /* General Z-Index Scale */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* --- COLORS (BASE) --- */

    /* Base Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Theme Colors - Journey Sections */
    --color-red: var(--red-main);
    --color-red-dark: #dc2626;
    --color-orange: var(--orange-main);
    --color-orange-dark: #d97706;
    --color-green: var(--green-main);
    --color-green-dark: #059669;
    --color-cyan: var(--cyan-main);
    --color-cyan-dark: #67e8f9;
    --color-purple: var(--purple-main);
    --color-purple-dark: #7c3aed;
    --color-purple-light: #c084fc;

    /* Accent Colors */
    --color-emerald-300: #6ee7b7;
    --color-emerald-400: #34d399;
    --color-cyan-300: #67e8f9;
    --color-cyan-400: #22d3ee;
    --color-orange-300: #fdba74;
    --color-orange-500: #f97316;
    --color-purple-300: #d8b4fe;
    --color-green-400: #4ade80;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;

    /* Success/Warning/Danger */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;

    /* Background Colors */
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #0a0a0a;

    /* Border Colors */
    --border-color-light: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.2);
    --border-color-medium: rgba(255, 255, 255, 0.3);
    --border-color-dark: rgba(255, 255, 255, 0.4);



    --content-width: 1200px;
    /* --- TYPOGRAPHY (GENERAL) --- */

    /* Font Sizes */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */
    --font-size-7xl: 4.5rem; /* 72px */
    --font-size-8xl: 6rem; /* 96px */
    --font-size-9xl: 8rem; /* 128px */

    /* Luxury Typography Scale (Legacy - kept for compatibility) */
    --luxury-font-hero: 4rem;            /* 64px */
    --luxury-font-h1: 3rem;              /* 48px */
    --luxury-font-h2: 2.25rem;           /* 36px */
    --luxury-font-h3: 1.875rem;          /* 30px */
    --luxury-font-h4: 1.5rem;            /* 24px */
    --luxury-font-body-large: 1.25rem;   /* 20px */
    --luxury-font-body: 1rem;            /* 16px */
    --luxury-font-small: 0.875rem;       /* 14px */
    --luxury-font-tiny: 0.75rem;         /* 12px */

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* --- MISCELLANEOUS --- */

    /* Heading Dividers */
    --divider-h1h2-height: 0.25rem; /* Large dividers for H1/H2 */
    --divider-h1h2-width: 12rem; /* 192px */
    --divider-h3plus-height: 2px; /* Small dividers for H3+ */
    --divider-h3plus-width: 4rem; /* 64px */
    --divider-to-heading-gap: 1rem;
    --divider-to-content-gap: 1rem;

    /* Opacity */
    --opacity-0: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-100: 1;

    /* Max Widths */
    --max-width-xs: 20rem;
    --max-width-sm: 24rem;
    --max-width-md: 28rem;
    --max-width-lg: 32rem;
    --max-width-xl: 36rem;
    --max-width-2xl: 42rem;
    --max-width-3xl: 48rem;
    --max-width-4xl: 56rem;
    --max-width-5xl: 64rem;
    --max-width-6xl: 72rem;
    --max-width-7xl: var(--luxury-homepage-max-width);
    --max-width-full: 100%;

    /* --- BACKWARD COMPATIBILITY ALIASES --- */
    /* DON'T EDIT THESE - They reference the master controls above */
    --red-accent: var(--red-main);
    --red-glow: var(--red-main-glow);
    --orange-accent: var(--orange-main);
    --orange-glow: var(--orange-main-glow);
    --green-accent: var(--green-main);
    --green-glow: var(--green-main-glow);
    --cyan-accent: var(--cyan-main);
    --cyan-glow: var(--cyan-main-glow);
    --purple-accent: var(--purple-main);
    --purple-glow: var(--purple-main-glow);
}

/* === GLOBAL RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    background: var(--bg-primary);
    color: var(--color-white);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

 


section > div {
  padding-left: 20px;
  padding-right: 20px;
  max-width: var(--content-width) !important;
}

/* ============================================
   BASE CARD CLASS - Bento Card Style
   Applied to all card components automatically
   Uses premium Bento card styling with larger radius and stronger blur
   ============================================ */
.card,
.luxury-stat-card,
.luxury-feature-card,
.luxury-program-card,
.luxury-journey-card,
.luxury-testimonial-card,
.luxury-featured-testimonial,
.luxury-philosophy-stat,
.luxury-form-container,
.bento-card,
.clarity-pillar,
.detailed-service-card,
.journey-stage-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: var(--card-padding);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card:hover,
.luxury-stat-card:hover,
.luxury-feature-card:hover,
.luxury-program-card:hover,
.luxury-journey-card:hover,
.luxury-testimonial-card:hover,
.luxury-featured-testimonial:hover,
.luxury-philosophy-stat:hover,
.luxury-form-container:hover,
.bento-card:hover,
.clarity-pillar:hover,
.detailed-service-card:hover,
.journey-stage-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--card-border-hover);
    transform: var(--card-hover-transform);
    box-shadow: var(--card-hover-shadow);
}