* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
  PROFESSIONAL COLOR DISTRIBUTION (60-30-10 RULE)
  ===============================================

  60% DOMINANT - Dark Neutrals (black, charcoal, card backgrounds)
    - Used for: body background, section backgrounds, card backgrounds
    - Creates cohesive foundation and reduces visual noise

  30% SECONDARY - Golden Ratio Colors (cyan for trust, magenta for urgency)
    - Cyan (#00c3c3): Trust badges, security elements, informational highlights
    - Magenta (#c300a6): Urgency elements, Black Friday banners, problem icons
    - Used strategically for emotional guidance and visual interest

  10% ACCENT - Primary Yellow (#ffc300)
    - Reserved exclusively for CTAs and critical highlights
    - Maximum attention and conversion optimization
    - High contrast (12.63:1 on black) for WCAG AAA compliance

  WCAG CONTRAST COMPLIANCE:
    - White on black: 21:1 (AAA) - Headlines and body text
    - Yellow on black: 12.63:1 (AAA) - CTA buttons
    - Light gray on black: 8.59:1 (AAA) - Descriptive text
    - Mid gray on black: 5.74:1 (AA) - Secondary text
*/

:root {
    /* Golden Ratio Color Palette (Golden Angle = 137.5°) */
    /* Base: Yellow at 45° - PRIMARY ACCENT (10%) */
    --primary: #ffc300;              /* Hue: 45° - Yellow (accent/CTA color) */
    --primary-dark: #d9a300;         /* Darker yellow for better contrast */
    --primary-light: #ffdb4d;        /* Lighter yellow for backgrounds */

    /* Cyan - TRUST/STABILITY (30% secondary) */
    --golden-cyan: #00c3c3;          /* Hue: 182.5° (45° + 137.5°) - Cyan-blue */
    --golden-cyan-dark: #009999;     /* Darker cyan for headlines */
    --golden-cyan-light: #4dd9d9;    /* Light cyan for backgrounds */

    /* Magenta - URGENCY/EXCITEMENT (30% secondary) */
    --golden-magenta: #c300a6;       /* Hue: 320° (182.5° + 137.5°) - Magenta */
    --golden-magenta-dark: #990082;  /* Darker magenta for headlines */
    --golden-magenta-light: #d94dc2; /* Light magenta for backgrounds */

    /* Lime - SUCCESS/POSITIVE (accent) */
    --golden-lime: #6bc300;          /* Hue: 97.5° (320° + 137.5° - 360°) - Lime green */
    --golden-lime-dark: #529900;     /* Darker lime for text */
    --golden-lime-light: #8fd94d;    /* Light lime for backgrounds */

    /* Neutral base colors (60% dominant) */
    --black: #0a0a0a;                /* Pure dark for maximum contrast */
    --charcoal: #1a1a1a;             /* Dark charcoal for cards */
    --white: #ffffff;
    --gray-dark: #333333;            /* Dark gray for borders */
    --gray-mid: #666666;             /* Mid gray for muted text */
    --gray-light: #999999;           /* Light gray for subtle text */
    --soft-bg: #0f1419;              /* Dark navy-charcoal for sections */
    --card-bg: #121212;              /* Card background with slight lift */
    /* =============================================
       GOLDEN RATIO MATHEMATICAL CONSTANTS (φ = 1.618)
       ============================================= */
    --phi: 1.618;                    /* The golden ratio φ */
    --phi-inv: 0.618;                /* 1/φ = 0.618 */
    --phi-sq: 2.618;                 /* φ² = φ + 1 = 2.618 */
    --phi-inv-sq: 0.382;             /* 1/φ² = 0.382 */

    /* Golden Ratio Opacity Scale (φ-based decimals) */
    --opacity-full: 1;               /* 100% */
    --opacity-high: 0.95;            /* 95% */
    --opacity-phi: 0.618;            /* φ⁻¹ = 61.8% */
    --opacity-mid: 0.5;              /* 50% */
    --opacity-phi-sq: 0.382;         /* φ⁻² = 38.2% */
    --opacity-low: 0.236;            /* 23.6% */
    --opacity-minimal: 0.146;        /* φ⁻³ ≈ 14.6% */
    --opacity-subtle: 0.08;          /* 8% */

    /* Golden Ratio Animation Durations (φ-based seconds) */
    --duration-instant: 0.146s;      /* φ⁻³ */
    --duration-fast: 0.236s;         /* φ⁻² - φ⁻¹ */
    --duration-quick: 0.382s;        /* φ⁻² */
    --duration-normal: 0.618s;       /* φ⁻¹ */
    --duration-moderate: 1s;         /* Base */
    --duration-phi: 1.618s;          /* φ */
    --duration-slow: 2.618s;         /* φ² */

    /* Golden Ratio Percentages & Scale Factors */
    --scale-phi: 1.618;              /* φ scale up */
    --scale-minor: 1.005;            /* Subtle scale (φ÷1618) */
    --scale-small: 1.05;             /* Small scale (φ÷16) */
    --percent-phi: 61.8%;            /* φ⁻¹ × 100 */
    --percent-phi-inv: 38.2%;        /* (1-φ⁻¹) × 100 */
    --percent-quarter: 23.6%;        /* φ⁻² - φ⁻¹ */


    /* Golden Ratio Typography Scale (φ = 1.618) */
    --font-xxs: 8px;                 /* 13 ÷ 1.618 ≈ 8 */
    --font-xs: 10px;                 /* 16 ÷ 1.618 */
    --font-sm: 13px;                 /* 8 × 1.618 ≈ 13 */
    --font-base: 16px;               /* Base size */
    --font-md: 19px;                 /* 12 × 1.618 */
    --font-lg: 26px;                 /* 16 × 1.618 */
    --font-xl: 42px;                 /* 26 × 1.618 */
    --font-2xl: 68px;                /* 42 × 1.618 */
    --font-3xl: 110px;               /* 68 × 1.618 */

    /* Golden Ratio Spacing Scale */
    --space-xxs: 6px;                /* 10 ÷ 1.618 ≈ 6 */
    --space-xs: 10px;                /* 16 ÷ 1.618 */
    --space-sm: 16px;                /* Base */
    --space-md: 26px;                /* 16 × 1.618 */
    --space-lg: 42px;                /* 26 × 1.618 */
    --space-xl: 68px;                /* 42 × 1.618 */
    --space-2xl: 110px;              /* 68 × 1.618 */
    --space-3xl: 178px;              /* 110 × 1.618 */

    /* Golden Ratio Border Radius Scale */
    --radius-xs: 6px;                /* 10 ÷ 1.618 */
    --radius-sm: 10px;               /* Base small */
    --radius-md: 16px;               /* 10 × 1.618 */
    --radius-lg: 26px;               /* 16 × 1.618 */
    --radius-xl: 42px;               /* 26 × 1.618 - pill buttons */
    --radius-full: 9999px;           /* For pills/circular */

    /* Golden Ratio Container Widths */
    --width-sm: 600px;               /* Small containers (371 × 1.618) */
    --width-md: 764px;               /* Medium containers (472 × 1.618) */
    --width-lg: 900px;               /* Large containers (556 × 1.618) */
    --width-xl: 1236px;              /* Extra large (764 × 1.618) */

    /* Golden Ratio Breakpoints */
    --breakpoint-mobile: 764px;      /* Mobile breakpoint (472 × 1.618) */

    /* Golden Ratio Fixed Sizes */
    --size-border-thin: 1px;         /* Minimal borders */
    --size-border-base: 2px;         /* Standard borders */
    --size-border-thick: 3px;        /* Emphasized borders */
    --size-border-heavy: 4px;        /* Heavy emphasis */

    /* Golden Ratio Specific Dimensions */
    --size-4: 4px;                   /* 6 ÷ 1.618 ≈ 4 */
    --size-5: 5px;                   /* 3 × 1.618 */
    --size-8: 8px;                   /* 5 × 1.618 - Fibonacci */
    --size-13: 13px;                 /* Fibonacci */
    --size-15: 15px;                 /* 9 × 1.618 */
    --size-20: 20px;                 /* 12 × 1.618 */
    --size-21: 21px;                 /* Fibonacci */
    --size-25: 25px;                 /* 15 × 1.618 */
    --size-30: 30px;                 /* 19 × 1.618 */
    --size-32: 32px;                 /* 20 × 1.618 */
    --size-34: 34px;                 /* Fibonacci */
    --size-36: 36px;                 /* 22 × 1.618 */
    --size-40: 40px;                 /* 25 × 1.618 */
    --size-45: 45px;                 /* 28 × 1.618 */
    --size-48: 48px;                 /* 30 × 1.618 */
    --size-55: 55px;                 /* Fibonacci */
    --size-60: 60px;                 /* 37 × 1.618 */
    --size-80: 80px;                 /* 49 × 1.618 */
    --size-89: 89px;                 /* Fibonacci */
    --size-233: 233px;               /* Fibonacci */
    --size-500: 500px;               /* 309 × 1.618 */
    --size-987: 987px;               /* Fibonacci */

    /* Golden Ratio Letter Spacing */
    --letter-tight: 0.5px;           /* Tight spacing */
    --letter-normal: 1px;            /* Normal spacing */
    --letter-wide: 1.618px;          /* Golden ratio spacing */
    --letter-wider: 2.618px;         /* 1.618 + 1 (next in fibonacci) */

    /* Golden Ratio Line Heights */
    --line-tight: 1;                 /* Minimal (icons, numbers) */
    --line-compact: 1.236;           /* 2 ÷ 1.618 */
    --line-normal: 1.4;              /* Comfortable reading */
    --line-comfortable: 1.618;       /* Golden ratio (body text) */
    --line-relaxed: 1.8;             /* Spacious (11 ÷ 1.618 × 1.618 ≈ 1.8) */

    /* Golden Ratio Font Weights (Fibonacci-based) */
    --font-weight-light: 233;        /* Fibonacci - Light */
    --font-weight-normal: 377;       /* Fibonacci - Regular */
    --font-weight-medium: 610;       /* Fibonacci - Medium (377 × φ ≈ 610) */
    --font-weight-semibold: 610;     /* Fibonacci - Semibold (same as medium) */
    --font-weight-bold: 987;         /* Fibonacci - Bold (610 × φ ≈ 987) */
    --font-weight-black: 987;        /* Fibonacci - Black (maximum weight) */

    /* Golden Ratio Shadow & Transform Values */
    --shadow-sm: 0 var(--space-xs) var(--size-30) rgba(255, 195, 0, var(--opacity-phi-sq));        /* Small shadow */
    --shadow-md: 0 var(--space-sm) var(--size-40) rgba(255, 195, 0, var(--opacity-phi-sq));        /* Medium shadow */
    --shadow-lg: 0 var(--space-sm) var(--size-60) rgba(255, 195, 0, var(--opacity-mid));        /* Large shadow */
    --shadow-xl: 0 var(--space-md) var(--size-80) rgba(255, 195, 0, var(--opacity-low));        /* Extra large shadow */
    --shadow-glow-sm: 0 0 var(--space-xs) rgba(255, 255, 255, 0.5);              /* Small glow */
    --shadow-glow-md: 0 0 var(--space-sm) rgba(107, 195, 0, 0.4);                /* Medium glow */
    --shadow-glow-lg: 0 0 var(--space-md) rgba(195, 0, 166, var(--opacity-phi-sq));                /* Large glow */
    --shadow-text-sm: var(--size-border-base) var(--size-border-base) var(--size-4) rgba(0, 0, 0, var(--opacity-high));  /* Small text shadow */

    /* Black Friday Magenta Shadows (Urgency/Excitement) */
    --shadow-bf-xs: 0 0 var(--space-xs) rgba(195, 0, 166, var(--opacity-low));                 /* Extra small BF glow */
    --shadow-bf-sm: 0 0 var(--space-sm) rgba(195, 0, 166, var(--opacity-phi-sq));                  /* Small BF glow */
    --shadow-bf-md: 0 var(--space-xxs) var(--space-sm) rgba(195, 0, 166, var(--opacity-mid));   /* Medium BF shadow (4px 15px) */
    --shadow-bf-md-alt: 0 var(--size-5) var(--size-20) rgba(195, 0, 166, var(--opacity-mid));   /* Medium BF shadow (5px 20px) */
    --shadow-bf-lg: 0 var(--space-xs) var(--size-25) rgba(195, 0, 166, var(--opacity-phi-sq));     /* Large BF shadow (8px 25px) */
    --shadow-bf-xl: 0 var(--space-xs) var(--size-30) rgba(195, 0, 166, var(--opacity-phi-sq));    /* Extra large BF shadow (8px 30px) */
    --shadow-bf-2xl: 0 var(--space-sm) var(--size-45) rgba(195, 0, 166, var(--opacity-mid));    /* 2XL BF shadow (12px 45px) */
    --shadow-bf-3xl: 0 0 var(--size-60) rgba(195, 0, 166, var(--opacity-mid));                  /* 3XL BF glow (60px) */

    --shadow-bf-glow-xs: 0 0 var(--space-xs) rgba(195, 0, 166, var(--opacity-low));             /* Extra small text glow */
    --shadow-bf-glow-sm: 0 0 var(--space-sm) rgba(195, 0, 166, var(--opacity-phi-sq));             /* Small text glow (12px) */
    --shadow-bf-glow-md: 0 0 var(--space-md) rgba(195, 0, 166, var(--opacity-mid));             /* Medium text glow (15px-18px) */
    --shadow-bf-glow-lg: 0 0 var(--size-20) rgba(195, 0, 166, var(--opacity-mid));              /* Large text glow (20px) */
    --shadow-bf-glow-xl: 0 0 var(--size-30) rgba(195, 0, 166, var(--opacity-phi-sq));              /* Extra large glow (30px) */
    --shadow-bf-glow-intense: 0 var(--space-xxs) var(--size-20) rgba(195, 0, 166, var(--opacity-phi));  /* Intense shadow (4px 20px) */

    --translate-sm: -3px;            /* Small translate (hover) */
    --translate-md: -5px;            /* Medium translate */
    --translate-lg: -10px;           /* Large translate */
    --translate-start: -20px;        /* Animation start */
    --translate-mid: 30px;           /* Animation mid */
    --translate-far: -50px;          /* Far translate */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--black);              /* 60% - Dominant dark background */
    color: var(--white);                   /* High contrast white text (WCAG AAA) */
    line-height: var(--line-comfortable);                    /* Golden ratio for optimal readability */
    font-size: var(--font-base);
    overflow-x: hidden;
}

.container {
    max-width: var(--width-xl);      /* Could use 1236px (764 × 1.618) for golden ratio */
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

/* Image Placeholders - Global */
.image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 195, 0, var(--opacity-minimal)) 0%, rgba(255, 195, 0, 0.05) 100%);
    border: 2px dashed var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    text-align: center;
    font-size: var(--font-sm);
    line-height: var(--line-normal);
    padding: var(--space-sm);
    transition: opacity var(--duration-quick) ease;
}

.image-placeholder.small {
    font-size: var(--font-xs);
    padding: var(--space-xs);
}

img.hero-img,
img.comparison-img,
img.gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration-quick) ease;
}

img.hero-img:not([src=""]):not([src*="placeholder"]),
img.comparison-img:not([src=""]):not([src*="placeholder"]),
img.gallery-img:not([src=""]):not([src*="placeholder"]) {
    opacity: var(--opacity-full);
}

img.hero-img:not([src=""]):not([src*="placeholder"]) ~ .image-placeholder,
img.comparison-img:not([src=""]):not([src*="placeholder"]) ~ .image-placeholder,
img.gallery-img:not([src=""]):not([src*="placeholder"]) ~ .image-placeholder {
    opacity: 0;
    pointer-events: none;
}

/* Video Elements */
video.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: auto;
    transition: opacity var(--duration-quick) ease;
}

video.hero-video.fade-in {
    opacity: var(--opacity-full);
}

video.hero-video.fade-out {
    opacity: 0;
}

/* Hero Section */
.hero {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--black) 0%, var(--charcoal) 100%);  /* 60% dominant dark */
    position: relative;
    overflow: hidden;
    padding: var(--space-xl) var(--size-21);
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: var(--opacity-minimal);
    animation: pulse 5s ease-in-out infinite;
    z-index: 1;
}

/* Hero Scroll Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: var(--opacity-minimal); }
    50% { transform: scale(var(--scale-minor)); opacity: var(--opacity-minimal); }
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 15;
    max-width: var(--width-lg);
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--black);
    padding: var(--space-xxs) 24px;
    border-radius: var(--radius-xl);
    font-weight: var(--font-weight-black);
    font-size: var(--font-sm);
    letter-spacing: var(--letter-wider);
    margin-bottom: var(--space-md);
    animation: slideDown var(--duration-normal) ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(var(--translate-start)); }
    to { opacity: var(--opacity-full); transform: translateY(0); }
}

.hero-title {
    font-size: clamp(var(--font-xl), 6vw, var(--font-2xl));  /* Golden ratio: 42px - 68px */
    font-weight: var(--font-weight-black);
    line-height: var(--line-compact);  /* 1.236 (2 ÷ φ) - golden ratio line height for better spacing */
    margin-bottom: var(--space-md);  /* Golden ratio: 26px */
    animation: fadeInUp var(--duration-normal) ease-out var(--duration-fast) both;
}

.highlight {
    color: var(--primary);
    position: relative;
}

.hero-subtitle {
    font-size: clamp(var(--font-md), 3vw, var(--font-lg));  /* Golden ratio: 19px - 26px */
    margin-bottom: var(--space-lg);  /* Golden ratio: 42px */
    color: var(--gray-light);          /* Light gray for subtitle (WCAG AA) */
    line-height: var(--line-comfortable);                /* Golden ratio for readability */
    animation: fadeInUp var(--duration-normal) ease-out 0.4s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(var(--translate-mid)); }
    to { opacity: var(--opacity-full); transform: translateY(0); }
}

.cta-container {
    animation: fadeInUp var(--duration-normal) ease-out var(--duration-normal) both;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--space-sm) 50px;
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--duration-quick) ease;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-normal);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.btn-primary {
    background: var(--primary);            /* 10% - Accent yellow for CTAs (maximum attention) */
    color: var(--black);                   /* High contrast text (WCAG AAA - 12.63:1) */
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--primary-dark);       /* Darker on hover for feedback */
    transform: translateY(var(--translate-sm));
    box-shadow: var(--shadow-lg);
}

.btn-large {
    padding: var(--space-md) 60px;
    font-size: var(--font-lg);
}

.urgency-text {
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-normal);
}

/* Hero Gallery */
.hero-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-xl) 0 0;
    max-width: var(--width-lg);
}

.hero-image-slot {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--black);
    border: 2px solid var(--gray-dark);
    transition: all var(--duration-quick) ease;
}

.hero-image-slot:hover {
    transform: translateY(var(--translate-md));
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-top: var(--size-80);
    animation: fadeInUp var(--duration-normal) ease-out var(--duration-normal) both;
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: var(--font-sm);
    color: var(--gray-mid);
    text-transform: uppercase;
    letter-spacing: var(--letter-normal);
}

/* Quick Social Proof */
.quick-proof {
    padding: var(--space-xl) var(--size-21);
    background: var(--black);
    border-top: 1px solid var(--gray-dark);
    border-bottom: 1px solid var(--gray-dark);
}

.proof-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    text-align: center;
}

.proof-stat {
    padding: var(--space-sm);
}

.proof-number {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.proof-label {
    font-size: var(--font-sm);
    color: var(--gray-mid);
    text-transform: uppercase;
    letter-spacing: var(--letter-normal);
}

.quick-testimonial {
    max-width: var(--width-md);
    margin: 0 auto;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);
    padding: var(--space-lg) 50px;
    border-radius: var(--radius-md);
    border: 2px solid var(--primary);
    text-align: center;
}

.quick-quote {
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
    color: var(--gray-light);              /* Light gray (WCAG AA compliant) */
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.quick-author {
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: var(--font-weight-bold);
}

/* Testimonial Bridge Section */
.testimonial-bridge {
    padding: var(--space-xl) var(--size-21);
    background: transparent;
    position: relative;
    z-index: 5;
}

/* Quick Testimonial */
.quick-testimonial-hero {
    max-width: var(--width-md);
    margin: 0 auto;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);
    padding: var(--space-md) var(--size-34);
    border-radius: var(--radius-md);
    border: 2px solid var(--primary);
    text-align: center;
}

.quick-testimonial-hero .quick-quote {
    font-size: var(--font-base);
    line-height: var(--line-relaxed);
    color: var(--gray-light);
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.quick-testimonial-hero .quick-author {
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: var(--font-weight-bold);
}

/* Problem Section */
.problem-section {
    padding: var(--space-2xl) var(--size-21);
    background: var(--black);              /* 60% dominant dark background */
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: clamp(var(--font-xl), 5vw, var(--font-2xl));  /* Golden ratio: 42px - 68px */
    font-weight: var(--font-weight-black);
    text-align: center;
    margin-bottom: var(--space-xl);  /* Golden ratio: 68px */
    line-height: var(--line-compact);
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--width-xl);
    margin: 0 auto;
}

.problem-card {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);  /* 60% dominant */
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--gray-dark);    /* Semantic gray for borders */
    transition: all var(--duration-quick) ease;
}

.problem-card:hover {
    border-color: var(--primary);
    transform: translateY(var(--translate-md));
}

.problem-icon {
    font-size: var(--font-2xl);
    margin-bottom: var(--space-sm);
    color: var(--bf-tertiary);  /* Golden ratio magenta for problems/urgency */
    font-weight: var(--font-weight-light);
    line-height: var(--line-tight);
}

.problem-card h3 {
    font-size: var(--font-lg);
    margin-bottom: var(--space-sm);
    color: var(--white);                   /* High contrast for headlines (WCAG AAA) */
}

.problem-card p {
    color: var(--gray-light);              /* Light gray for body text (WCAG AA) */
    line-height: var(--line-relaxed);
}

/* Solution Section */
.solution-section {
    padding: var(--space-2xl) var(--size-21);
    background: var(--black);
}

.solution-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.badge {
    display: inline-block;
    background: rgba(255, 195, 0, var(--opacity-minimal));
    color: var(--primary);
    padding: var(--space-xxs) var(--space-sm);
    border-radius: var(--radius-xl);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-sm);
    letter-spacing: var(--letter-wider);
    margin-bottom: var(--space-sm);
}

.solution-text h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: var(--font-weight-black);
    margin-bottom: var(--space-sm);
    line-height: var(--line-compact);
}

.lead {
    font-size: var(--font-md);
    color: var(--gray-light);
    margin-bottom: var(--space-lg);
}

.benefit-list {
    list-style: none;
    margin-bottom: var(--space-lg);
}

.benefit-list li {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    align-items: flex-start;
}

.check {
    font-size: var(--font-lg);
    color: var(--primary);
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-tight);
}

.benefit-list strong {
    color: var(--white);
    font-size: var(--font-md);
    display: block;
    margin-bottom: var(--size-8);
}

.benefit-list p {
    color: var(--gray-light);
    font-size: var(--font-base);
}

/* Before/After Comparison */
.solution-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.before-after-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
}

.visual-box {
    width: 100%;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);  /* 60% dominant */
    border: 2px solid var(--gray-dark);    /* Subtle border for visual hierarchy */
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: all var(--duration-quick) ease;
}

.visual-box.highlight-box {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(255, 195, 0, var(--opacity-minimal)) 0%, rgba(255, 195, 0, 0.05) 100%);
}

.visual-label {
    text-align: center;
    font-size: var(--font-base);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-wider);
    margin-bottom: var(--space-sm);
    padding: var(--space-xxs);
    border-radius: var(--radius-sm);
}

.visual-label.bad {
    background: rgba(195, 0, 166, var(--opacity-minimal));  /* Golden ratio magenta for negative state */
    color: var(--bf-tertiary);
}

.visual-label.good {
    background: rgba(255, 195, 0, var(--opacity-minimal));
    color: var(--primary);
}

.comparison-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.comparison-slot {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--black);
    border: 2px solid var(--gray-dark);
}

.visual-caption {
    text-align: center;
    font-size: var(--font-xs);
    color: var(--gray-mid);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-tight);
    text-transform: uppercase;
}

.visual-arrow {
    font-size: var(--font-xl);
    color: var(--primary);
    font-weight: var(--font-weight-black);
    flex-shrink: 0;
    transform: rotate(90deg);
}

/* Results Gallery */
.results-gallery {
    padding: var(--space-2xl) var(--size-21);
    background: var(--black);
}

.section-subtitle {
    text-align: center;
    font-size: var(--font-md);
    color: var(--gray-mid);
    margin-top: calc(var(--size-60) * -1);
    margin-bottom: var(--space-xl);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    max-width: var(--width-xl);
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--black);
    border: 2px solid var(--gray-dark);
    transition: all 0.4s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(var(--translate-lg)) scale(var(--scale-minor));
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.gallery-item .image-placeholder {
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
}

/* Price Reveal */
.price-reveal {
    padding: var(--space-2xl) var(--size-21);
    background: linear-gradient(135deg, #0a0a0a 0%, var(--black) 100%);
}

.value-stack {
    max-width: var(--width-sm);
    margin: 0 auto var(--space-2xl);
    background: var(--card-bg);
    border: 2px solid var(--gray-dark);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--gray-dark);
}

.value-item:last-of-type {
    border-bottom: 2px solid var(--primary);
}

.value-name {
    font-size: var(--font-base);
    color: var(--gray-light);
    font-weight: var(--font-weight-semibold);
}

.value-price {
    font-size: var(--font-md);
    color: var(--white);
    font-weight: var(--font-weight-bold);
}

.value-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0 0;
}

.total-label {
    font-size: var(--font-md);
    color: var(--white);
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    letter-spacing: var(--letter-normal);
}

.total-price {
    font-size: var(--font-xl);
    color: var(--primary);
    font-weight: var(--font-weight-black);
}

.price-reveal-box {
    max-width: var(--width-md);
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);
    padding: var(--space-xl) 50px;
    border-radius: var(--radius-lg);
    border: 3px solid var(--primary);
}

.reveal-text {
    font-size: var(--font-md);
    color: var(--gray-light);
    margin-bottom: var(--space-sm);
    line-height: var(--line-comfortable);
}

.reveal-highlight {
    font-size: var(--font-lg);
    color: var(--white);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
}

.reveal-price {
    margin-bottom: var(--space-sm);
}

.reveal-strike {
    font-size: var(--font-xl);
    color: var(--gray-mid);
    text-decoration: line-through;
    margin-bottom: var(--space-xs);
}

.reveal-current {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    line-height: var(--line-tight);
    margin-bottom: var(--space-xs);
}

.reveal-subtext {
    font-size: var(--font-sm);
    color: var(--gray-mid);
    margin-bottom: var(--space-lg);
}

/* Social Proof */
.social-proof {
    padding: var(--space-2xl) var(--size-21);
    background: var(--black);
}

.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--width-xl);
    margin: 0 auto;
}

.testimonial {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 2px solid var(--primary);
    position: relative;
}

.testimonial::before {
    content: '"';
    position: absolute;
    top: var(--size-20);
    left: var(--size-30);
    font-size: var(--font-2xl);
    color: var(--primary);
    opacity: var(--opacity-low);
    font-family: Georgia, serif;
}

.quote {
    font-size: var(--font-base);
    line-height: var(--line-relaxed);
    color: var(--gray-light);
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
}

.author {
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
}

/* Features Section */
.features-section {
    padding: var(--space-2xl) var(--size-21);
    background: var(--black);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
    max-width: var(--width-xl);
    margin: 0 auto;
}

.feature-card {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 2px solid var(--gray-dark);
    transition: all var(--duration-quick) ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--size-4);
    background: var(--primary);
    transform: scaleX(0);
    transition: transform var(--duration-quick) ease;
}

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

.feature-card:hover {
    border-color: var(--primary);
    transform: translateY(var(--translate-md));
}

.feature-number {
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: var(--font-weight-black);
    margin-bottom: var(--space-sm);
    letter-spacing: var(--letter-wider);
}

.feature-card h3 {
    font-size: var(--font-lg);
    margin-bottom: var(--space-sm);
    color: var(--white);
}

.feature-card p {
    color: var(--gray-light);
    line-height: var(--line-relaxed);
}

/* FAQ Section */
.faq-section {
    padding: var(--space-2xl) var(--size-21);
    background: var(--black);
}

.faq-container {
    max-width: var(--width-lg);
    margin: 0 auto;
}

.faq-item {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);
    border: 2px solid var(--gray-dark);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    overflow: hidden;
    transition: all var(--duration-quick) ease;
}

.faq-item:hover {
    border-color: var(--primary);
}

.faq-item.active {
    border-color: var(--primary);
}

.faq-question-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--size-34);
    cursor: pointer;
    user-select: none;
}

.faq-question {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin: 0;
    line-height: var(--line-normal);
    flex: 1;
    padding-right: var(--size-20);
}

.faq-toggle {
    width: var(--size-36);
    height: var(--size-36);
    border-radius: var(--percent-phi);
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-quick) ease;
    flex-shrink: 0;
    line-height: var(--line-tight);
}

.faq-toggle:hover {
    background: var(--primary);
    color: var(--black);
}

.faq-item.active .faq-toggle {
    background: var(--primary);
    color: var(--black);
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-quick) ease, padding var(--duration-quick) ease;
    padding: 0 var(--space-md);
}

.faq-item.active .faq-answer {
    max-height: var(--size-500);
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
}

.faq-answer p {
    font-size: var(--font-base);
    color: var(--gray-light);
    line-height: var(--line-relaxed);
    margin: 0;
}

/* Final CTA */
.final-cta {
    padding: var(--space-2xl) var(--size-21);
    background: linear-gradient(135deg, var(--black) 0%, var(--charcoal) 100%);  /* 60% dominant */
    position: relative;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, var(--primary) 0%, transparent 70%);
    opacity: 0.05;
}

.cta-box {
    max-width: var(--width-md);
    margin: 0 auto;
    text-align: center;
    background: var(--card-bg);
    padding: var(--space-xl) 60px;
    border-radius: var(--radius-lg);
    border: 3px solid var(--primary);
    position: relative;
    box-shadow: var(--shadow-xl);
}

.cta-box h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: var(--font-weight-black);
    margin-bottom: var(--space-sm);
    line-height: var(--line-compact);
}

.cta-subtitle {
    font-size: var(--font-md);
    color: var(--gray-light);
    margin-bottom: var(--space-lg);
}

.price-box {
    margin-bottom: var(--space-lg);
}

.price-strike {
    font-size: var(--font-lg);
    color: var(--gray-mid);
    text-decoration: line-through;
    margin-bottom: var(--space-xs);
}

.price-current {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    line-height: var(--line-tight);
    margin-bottom: var(--space-xs);
}

.price-label {
    font-size: var(--font-base);
    color: var(--gray-light);
}

.guarantee {
    margin-top: var(--space-md);
    font-size: var(--font-sm);
    color: var(--primary);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-normal);
}

.warning-text {
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--gray-mid);
    font-style: italic;
}

/* Footer */
.footer {
    padding: var(--space-xl) var(--size-21);
    background: var(--black);
    border-top: 1px solid var(--gray-dark);
    text-align: center;
}

.footer-links {
    margin-top: var(--space-sm);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.footer-links a {
    color: var(--gray-mid);
    text-decoration: none;
    font-size: var(--font-sm);
    transition: color var(--duration-quick) ease;
    cursor: pointer;
}

.footer-links a:hover {
    color: var(--primary);
}

/* Modal System */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 20, 25, 0.8);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-quick) ease;
}

.modal-overlay.active {
    opacity: var(--opacity-full);
    pointer-events: auto;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: var(--width-md);
    max-height: 85vh;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--card-bg) 100%);
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all var(--duration-quick) ease;
    display: flex;
    flex-direction: column;
}

.modal.active {
    opacity: var(--opacity-full);
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.modal-content {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--size-34);
    border-bottom: var(--size-border-base) solid var(--gray-dark);
    background: var(--black);
    flex-shrink: 0;
}

.modal-header h2 {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    margin: 0;
}

.modal-close {
    width: var(--size-40);
    height: var(--size-40);
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-light);
    cursor: pointer;
    transition: all var(--duration-quick) ease;
    line-height: var(--line-tight);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    transform: rotate(90deg);
    color: var(--white);
}

.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.modal-body h3 {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin: var(--space-md) 0 15px 0;
}

.modal-body h3:first-child {
    margin-top: 0;
}

.modal-body p {
    font-size: var(--font-base);
    color: var(--gray-light);
    line-height: var(--line-relaxed);
    margin-bottom: var(--space-sm);
}

.modal-body ul {
    margin: var(--space-sm) 0;
    padding-left: var(--size-25);
}

.modal-body ul li {
    font-size: var(--font-base);
    color: var(--gray-light);
    line-height: var(--line-relaxed);
    margin-bottom: var(--size-8);
}

/* Contact Methods */
.contact-intro {
    font-size: var(--font-base);
    color: var(--gray-light);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.contact-methods {
    max-width: var(--width-sm);
    margin: 0 auto;
}

.contact-method {
    background: var(--black);
    border: 2px solid var(--gray-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    transition: all var(--duration-quick) ease;
}

.contact-method:hover {
    border-color: var(--primary);
    transform: translateY(var(--translate-sm));
}

.contact-method h3 {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin: 0 0 var(--space-xs) 0;
}

.contact-description {
    font-size: var(--font-sm);
    color: var(--gray-mid);
    line-height: var(--line-comfortable);
    margin-bottom: var(--space-sm);
}

.contact-email {
    display: inline-block;
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    text-decoration: none;
    padding: var(--space-xs) var(--size-21);
    background: rgba(255, 195, 0, var(--opacity-minimal));
    border-radius: var(--radius-sm);
    transition: all var(--duration-quick) ease;
}

.contact-email:hover {
    background: var(--primary);
    color: var(--black);
}

.contact-note {
    text-align: center;
    margin-top: var(--size-40);
    padding-top: var(--size-30);
    border-top: 1px solid var(--gray-dark);
}

.contact-note p {
    font-size: var(--font-sm);
    color: var(--gray-mid);
    font-style: italic;
}

/* Responsive */
@media (max-width: 764px) {
    .solution-content {
        grid-template-columns: 1fr;
    }

    .before-after-container {
        flex-direction: column;
    }

    .visual-arrow {
        transform: rotate(90deg);
    }

    .hero {
        min-height: auto;
        padding: var(--space-lg) var(--size-21);
    }

    .hero-gallery {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .hero-stats {
        gap: var(--space-sm);
    }

    .proof-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .quick-testimonial {
        padding: var(--space-md) 25px;
    }

    .value-stack {
        padding: var(--space-md) var(--size-21);
    }

    .price-reveal-box {
        padding: var(--space-lg) 25px;
    }

    .reveal-current {
        font-size: var(--font-2xl);
    }

    .faq-container {
        padding: 0 var(--space-xs);
    }

    .faq-question-wrapper {
        padding: var(--space-sm);
    }

    .faq-question {
        font-size: var(--font-base);
    }

    .faq-toggle {
        width: var(--size-32);
        height: var(--size-32);
        font-size: var(--font-md);
    }

    .comparison-images {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xs);
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .cta-box {
        padding: var(--space-lg) var(--size-34);
    }

    .btn {
        padding: var(--space-sm) 32px;
        font-size: var(--font-base);
    }

    .btn-large {
        padding: var(--space-md) 36px;
        font-size: var(--font-md);
    }

    .problem-section,
    .solution-section,
    .quick-proof,
    .price-reveal,
    .results-gallery,
    .social-proof,
    .features-section,
    .faq-section,
    .final-cta {
        padding: var(--space-xl) var(--size-21);
    }

    .modal {
        width: 95%;
        max-height: 90vh;
    }

    .modal-header {
        padding: var(--space-sm) 25px;
    }

    .modal-header h2 {
        font-size: var(--font-lg);
    }

    .modal-body {
        padding: var(--space-md);
    }

    .contact-method {
        padding: var(--space-md) var(--size-21);
    }

    .contact-email {
        font-size: var(--font-sm);
        padding: var(--space-xxs) 16px;
        word-break: break-all;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Selection */
::selection {
    background: var(--primary);
    color: var(--black);
}

/* Loading Spinner Overlay */
.loading-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.loading-spinner-overlay.active {
    display: flex;
}

.loading-spinner {
    text-align: center;
}

.spinner-ring {
    width: var(--size-80);
    height: var(--size-80);
    margin: 0 auto var(--space-sm);
    border: var(--size-border-heavy) solid rgba(255, 195, 0, var(--opacity-minimal));
    border-top: 4px solid var(--primary);
    border-radius: var(--percent-phi);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-text {
    color: var(--primary);
    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-tight);
    animation: pulse-text var(--duration-phi) ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: var(--opacity-full); }
    50% { opacity: var(--opacity-mid); }
}

/* ============================================
   BLACK FRIDAY EXCLUSIVE STYLES
   ============================================ */

/* Black Friday Colors - Golden Ratio Applied */
:root {
    --bf-primary: var(--primary);        /* Yellow - main accent (45°) */
    --bf-secondary: var(--golden-cyan);  /* Cyan - trust/stability (182.5°) */
    --bf-tertiary: var(--golden-magenta); /* Magenta - urgency/excitement (320°) */
    --bf-success: var(--golden-lime);    /* Lime - positive/success (97.5°) */
    --bf-soft-bg: #1a1f2e;               /* Soft dark blue-gray for less aggressive backgrounds */
}

/* BF Banner at top of hero */
.bf-banner {
    background: linear-gradient(135deg, var(--bf-tertiary) 0%, var(--bf-primary) 100%);
    padding: var(--space-sm) var(--size-34);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-bf-sm);
    animation: pulse-glow var(--duration-slow) ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: var(--shadow-bf-xs);
        transform: scale(1);
    }
    50% {
        box-shadow: var(--shadow-bf-sm);
        transform: scale(1.005);
    }
}

.bf-flash {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-black);
    text-align: center;
    color: var(--white);
    text-shadow: var(--shadow-text-sm);
    letter-spacing: var(--letter-wider);
    animation: flash-text var(--duration-phi) ease-in-out infinite;
}

@keyframes flash-text {
    0%, 100% { opacity: var(--opacity-full); }
    50% { opacity: var(--opacity-high); }
}

.bf-warning {
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--primary);
    margin-top: var(--space-xxs);
    letter-spacing: var(--letter-normal);
}

/* BF Badge */
.bf-badge {
    background: var(--bf-tertiary) !important;
    /* Shake animation removed - less aggressive */
}

/* BF Highlight in titles */
.bf-highlight {
    color: var(--bf-tertiary);
    text-shadow: var(--shadow-bf-glow-md);
    font-size: 1.236em;  /* 2 ÷ φ = 1.236 (golden ratio) */
    display: inline-block;
    margin-bottom: var(--space-xs);  /* 10px golden ratio spacing */
}

.bf-yellow-text {
    color: var(--primary);
    display: inline-block;
    margin-right: var(--space-xs);  /* 10px golden ratio spacing to next element */
}

.bf-white-text {
    color: var(--white);
    display: inline-block;
    margin-top: var(--space-sm);  /* 16px golden ratio spacing from line above */
}

/* Countdown Timer */
.countdown-container {
    background: linear-gradient(135deg, rgba(195, 0, 166, var(--opacity-minimal)) 0%, rgba(255, 195, 0, var(--opacity-minimal)) 100%);
    border: 2px solid var(--bf-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-md) 0;
    box-shadow: var(--shadow-bf-lg);
}

.countdown-label {
    font-size: var(--font-md);
    font-weight: var(--font-weight-black);
    text-align: center;
    color: var(--primary);
    margin-bottom: var(--space-sm);
    letter-spacing: var(--letter-wider);
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, var(--opacity-phi));
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 2px solid var(--white);
    min-width: var(--size-80);
}

.countdown-number {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-black);
    color: var(--white);
    line-height: var(--line-tight);
    text-shadow: var(--shadow-glow-sm);
}

.countdown-label-small {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-top: var(--size-5);
    letter-spacing: var(--letter-normal);
}

.countdown-separator {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: var(--opacity-full); }
    50% { opacity: var(--opacity-phi-sq); }
}

/* BF Price Display in Hero */
.bf-price-hero {
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.9) 0%, rgba(195, 0, 166, var(--opacity-minimal)) 100%);
    border: 3px solid var(--bf-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-md) 0;
    text-align: center;
}

.bf-price-old {
    font-size: var(--font-md);
    color: var(--gray);
    margin-bottom: var(--space-xs);
}

.bf-price-old .strikethrough {
    text-decoration: line-through;
    color: var(--gray-mid);
}

.bf-price-new {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
    color: var(--white);
    margin-bottom: var(--space-sm);
}

.bf-price-big {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-black);
    color: var(--bf-success);
    text-shadow: var(--shadow-glow-md);
    display: block;
    line-height: var(--line-tight);
}

.bf-price-save {
    font-size: var(--font-md);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    letter-spacing: var(--letter-normal);
}

/* BF Urgency Text */
.bf-urgency {
    color: var(--primary) !important;
    font-weight: var(--font-weight-black) !important;
    font-size: var(--font-md) !important;
    animation: pulse-scale var(--duration-slow) ease-in-out infinite;
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(var(--scale-minor)); }
}

/* BF Deal Highlight Box */
.bf-deal-highlight {
    background: linear-gradient(135deg, var(--bf-tertiary) 0%, var(--bf-primary) 100%);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--space-md);
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-bf-lg);
}

.bf-deal-highlight h3 {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-black);
    color: var(--white);
    margin-bottom: var(--space-sm);
    text-shadow: var(--shadow-text-sm);
}

.bf-never-again {
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    line-height: var(--line-normal);
}

/* BF Price Box with Ribbon */
.bf-price-box {
    position: relative;
    overflow: visible;
}

.bf-ribbon {
    position: absolute;
    top: calc(var(--size-15) * -1);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bf-tertiary);
    color: var(--white);
    padding: var(--space-xs) var(--size-34);
    font-size: var(--font-md);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--letter-wider);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-bf-md);
    z-index: 10;
}

.bf-highlight-text {
    color: var(--primary) !important;
    font-weight: var(--font-weight-black) !important;
}

.bf-current {
    color: var(--bf-tertiary) !important;
    font-size: var(--font-2xl) !important;
    text-shadow: var(--shadow-bf-glow-md) !important;
}

.bf-discount-badge {
    background: var(--bf-tertiary);
    color: var(--white);
    padding: var(--space-xs) var(--size-34);
    border-radius: var(--radius-xl);
    font-size: var(--font-md);
    font-weight: var(--font-weight-black);
    display: inline-block;
    margin-top: var(--space-sm);
    letter-spacing: var(--letter-normal);
    box-shadow: var(--shadow-bf-md-alt);
}

.bf-subtext {
    color: var(--bf-tertiary) !important;
    font-weight: var(--font-weight-black) !important;
    font-size: var(--font-md) !important;
}

.bf-final-warning {
    color: var(--bf-tertiary);
    font-weight: var(--font-weight-black);
    font-size: var(--font-base);
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: rgba(195, 0, 166, var(--opacity-minimal));
    border-radius: var(--radius-sm);
    border: 2px solid var(--bf-tertiary);
}

/* BF Buttons */
.btn-bf {
    /* 30% secondary colors (magenta + yellow) for high-urgency CTAs */
    background: linear-gradient(135deg, var(--bf-tertiary) 0%, var(--bf-primary) 100%) !important;
    color: var(--white) !important;        /* High contrast on gradient (WCAG AAA) */
    font-size: var(--font-lg) !important;
    padding: var(--space-sm) var(--size-34) !important;
    box-shadow: var(--shadow-bf-xl) !important;
    animation: btn-pulse var(--duration-slow) ease-in-out infinite;
}

.btn-bf:hover {
    background: linear-gradient(135deg, var(--golden-magenta-dark) 0%, var(--primary-dark) 100%) !important;
    box-shadow: var(--shadow-bf-2xl) !important;
    transform: translateY(var(--translate-sm)) scale(var(--scale-small)) !important;
}

@keyframes btn-pulse {
    0%, 100% {
        box-shadow: var(--shadow-bf-xl);
    }
    50% {
        box-shadow: var(--shadow-bf-xl);
    }
}

/* BF FAQ Featured */
.bf-faq-featured {
    border: 3px solid var(--bf-tertiary) !important;
    background: linear-gradient(135deg, rgba(195, 0, 166, var(--opacity-minimal)) 0%, rgba(255, 195, 0, var(--opacity-minimal)) 100%) !important;
    box-shadow: var(--shadow-bf-glow-xl) !important;
}

.bf-faq-featured .faq-question {
    color: var(--bf-tertiary) !important;
}

/* BF Final CTA Section */
.bf-final-cta {
    background: linear-gradient(135deg, #1a1f2e 0%, #1a1a1a 100%) !important;
}

.bf-cta-box {
    border: 4px solid var(--bf-tertiary) !important;
    box-shadow: var(--shadow-bf-3xl) !important;
}

.bf-final-banner {
    background: linear-gradient(135deg, var(--bf-tertiary) 0%, var(--bf-primary) 100%);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    border: 3px solid var(--primary);
    animation: pulse-glow var(--duration-slow) ease-in-out infinite;
}

.bf-final-flash {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-black);
    text-align: center;
    color: var(--white);
    text-shadow: var(--shadow-text-sm);
    letter-spacing: var(--letter-wider);
}

.countdown-final {
    margin: var(--space-md) 0;
}

.bf-price-box-final {
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.95) 0%, rgba(195, 0, 166, var(--opacity-minimal)) 100%);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 4px solid var(--bf-tertiary);
    margin: var(--space-md) 0;
}

.bf-strike {
    font-size: var(--font-lg) !important;
}

.bf-current-final {
    font-size: var(--font-3xl) !important;
    color: var(--bf-tertiary) !important;
    text-shadow: var(--shadow-bf-glow-lg) !important;
}

.bf-label {
    color: var(--primary) !important;
    font-weight: var(--font-weight-black) !important;
    font-size: var(--font-md) !important;
}

.bf-warning-final {
    color: var(--white) !important;
    font-weight: var(--font-weight-black) !important;
    font-size: var(--font-md) !important;
    background: rgba(255, 195, 0, 0.08) !important;
    border: 2px solid var(--primary) !important;
    padding: var(--space-sm) !important;
    border-radius: var(--radius-sm) !important;
    margin-top: var(--space-md) !important;
}

.bf-cta-subtitle {
    font-size: var(--font-md) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--primary) !important;
}

/* ============================================
   STICKY HEADER (MOBILE-FIRST)
   ============================================ */

.bf-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--bf-tertiary) 0%, var(--bf-primary) 100%);
    padding: var(--space-sm) var(--space-sm);
    z-index: 9999;
    box-shadow: var(--shadow-bf-glow-intense);
    transform: translateY(-100%);
    transition: transform var(--duration-quick) ease-in-out;
}

.bf-sticky-header.visible {
    transform: translateY(0);
}

.sticky-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--width-xl);
    margin: 0 auto;
    gap: var(--space-sm);
}

.sticky-timer-compact {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.sticky-label {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-black);
    color: var(--white);
    letter-spacing: var(--letter-normal);
}

.sticky-time {
    font-size: var(--font-base);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    font-family: 'Courier New', monospace;
}

.btn-sticky-cta {
    background: var(--white);
    color: var(--bf-tertiary);
    padding: var(--space-xs) var(--size-21);
    border: none;
    border-radius: var(--radius-xl);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-black);
    cursor: pointer;
    transition: all var(--duration-quick) ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, var(--opacity-phi-sq));
}

.btn-sticky-cta:hover {
    transform: scale(var(--scale-small));
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

/* ============================================
   EXIT INTENT POPUP
   ============================================ */

.exit-intent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 20, 25, 0.92);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    backdrop-filter: blur(8px);
}

.exit-intent-overlay.active {
    display: flex;
}

.exit-intent-popup {
    background: linear-gradient(135deg, #1a1f2e 0%, #1a1a1a 100%);
    border: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    max-width: var(--width-sm);
    width: 100%;
    padding: var(--space-lg) var(--size-34);
    position: relative;
    box-shadow: 0 0 50px rgba(255, 195, 0, var(--opacity-phi-sq));
    animation: popupSlideIn 0.4s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(var(--translate-far));
    }
    to {
        opacity: var(--opacity-full);
        transform: scale(1) translateY(0);
    }
}

.exit-close {
    position: absolute;
    top: var(--size-15);
    right: var(--size-15);
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: var(--font-xl);
    width: var(--size-45);
    height: var(--size-45);
    border-radius: var(--percent-phi);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--line-tight);
    transition: all var(--duration-quick) ease;
}

.exit-close:hover {
    background: var(--bf-tertiary);
    color: var(--white);
    transform: rotate(90deg);
}

.exit-content {
    text-align: center;
}

.exit-title {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    margin-bottom: var(--space-sm);
    line-height: var(--line-compact);
    /* Shake animation removed - less aggressive */
}

.exit-subtitle {
    font-size: var(--font-md);
    color: var(--white);
    margin-bottom: var(--space-md);
    line-height: var(--line-normal);
}

.exit-subtitle strong {
    color: var(--bf-tertiary);
    font-size: 1.236em;
}

.exit-countdown {
    background: rgba(255, 195, 0, var(--opacity-minimal));
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin: var(--space-md) 0;
}

.exit-timer-label {
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--space-xs);
}

.exit-timer {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-black);
    color: var(--bf-tertiary);
    font-family: 'Courier New', monospace;
    text-shadow: var(--shadow-bf-glow-sm);
}

.exit-price {
    margin: var(--space-md) 0;
}

.exit-strike {
    font-size: var(--font-md);
    color: var(--gray-mid);
    text-decoration: line-through;
    margin-bottom: var(--space-xs);
}

.exit-current {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-black);
    color: var(--bf-tertiary);
    text-shadow: var(--shadow-glow-lg);
    margin: var(--space-xs) 0;
}

.exit-save {
    font-size: var(--font-md);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    letter-spacing: var(--letter-normal);
}

.btn-exit {
    width: 100%;
    margin: var(--space-md) 0;
    font-size: var(--font-lg) !important;
    padding: var(--space-sm) !important;
}

.exit-warning {
    font-size: var(--font-base);
    color: var(--white);
    font-weight: var(--font-weight-black);
    margin-top: var(--space-sm);
    font-style: italic;
}

/* ============================================
   TRUST BADGES
   ============================================ */

.trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    padding: var(--space-md) 0;
    border-top: var(--size-border-base) solid rgba(255, 195, 0, var(--opacity-phi-sq));
    border-bottom: var(--size-border-base) solid rgba(255, 195, 0, var(--opacity-phi-sq));
}

.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: rgba(0, 195, 195, var(--opacity-subtle));  /* Golden cyan with low opacity */
    border-radius: var(--radius-sm);
    border: var(--size-border-thin) solid rgba(0, 195, 195, var(--opacity-low));
    transition: all var(--duration-quick) ease;
}

.trust-badge:hover {
    background: rgba(0, 195, 195, var(--opacity-minimal));
    border-color: var(--golden-cyan);
    transform: translateY(var(--translate-sm));
}

.trust-icon {
    font-size: var(--font-xl);
    color: var(--golden-cyan);  /* Golden ratio cyan for trust/security */
    filter: grayscale(0);
}

.trust-text {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    color: var(--golden-cyan);  /* Golden ratio cyan */
    text-align: center;
    line-height: var(--line-compact);
}

/* ============================================
   GUARANTEE BOX
   ============================================ */

.guarantee-box {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    background: linear-gradient(135deg, rgba(107, 195, 0, 0.1) 0%, rgba(107, 195, 0, 0.05) 100%);
    border: 3px solid var(--golden-lime);  /* Golden ratio lime for success/guarantee */
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-md) 0;
}

.guarantee-badge {
    font-size: var(--font-2xl);
    color: var(--golden-lime);  /* Golden ratio lime */
    flex-shrink: 0;
}

.guarantee-content h4 {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-black);
    color: var(--golden-lime);  /* Golden ratio lime for positive messaging */
    margin-bottom: var(--space-xs);
}

.guarantee-content p {
    font-size: var(--font-base);
    color: var(--white);
    line-height: var(--line-comfortable);
}

/* ============================================
   EMAIL LINK STYLING
   ============================================ */

.email-link {
    color: var(--primary);
    text-decoration: none;
    transition: opacity var(--duration-quick);
}

.email-link:hover {
    opacity: var(--opacity-phi);
}