/* ============================================
   CSS VARIABLES - Premium Burgundy Theme
   ============================================ */
:root {
    /* Primary Burgundy/Maroon Colors */
    --primary-color: #8b1538;
    --primary-hover: #6d1129;
    --primary-light: #fef2f4;
    --primary-dark: #4a0d1f;
    
    /* Secondary & Accent Colors */
    --secondary-color: #c41e3a;
    --secondary-hover: #a01830;
    --accent-gold: #d4af37;
    --accent-gold-dark: #b8860b;
    
    /* Neutral Colors */
    --white: #ffffff;
    --cream: #fdfcfb;
    --black: #000000;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Accent Colors */
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    --gradient-gold: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
    --gradient-light: linear-gradient(135deg, #fef2f4 0%, #fce7ea 100%);
    --gradient-dark: linear-gradient(135deg, #4a0d1f 0%, #8b1538 100%);
    
    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --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);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* Container */
    --container-max-width: 1200px;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    /* Lenis overrides this to auto via html.lenis — keep smooth as base fallback */
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* When Lenis is active, hand scroll control entirely to it */
html.lenis {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--font-primary);
    line-height: var(--line-height-base);
    color: var(--gray-800);
    background: linear-gradient(135deg, #fdfcfb 0%, #fff5f7 50%, #fef8f3 100%);
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Red background for pages with page-header */
body:has(.page-header) {
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(139, 21, 56, 0.02) 35px, rgba(139, 21, 56, 0.02) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(212, 175, 55, 0.02) 35px, rgba(212, 175, 55, 0.02) 70px);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

body:has(.page-header)::before {
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.03) 35px, rgba(255, 255, 255, 0.03) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(212, 175, 55, 0.03) 35px, rgba(212, 175, 55, 0.03) 70px);
}

body::after {
    content: '';
    position: fixed;
    top: -250px;
    right: -150px;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.15), transparent 70%);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
    animation: float 20s ease-in-out infinite;
}

body:has(.page-header)::after {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2), transparent 70%);
    opacity: 0.4;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(40px, -40px) scale(1.15);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    position: relative;
    z-index: 1;
}

.center {
    text-align: center;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* 
 * Floating Pill Header Design
 * ---------------------------
 * The header floats ABOVE the hero section as an overlay.
 * Hero background extends to the very top of the page.
 * Header is positioned absolutely/fixed so it doesn't push content down.
 * 
 * Layering:
 * - Hero section: z-index 1 (background canvas)
 * - Header pill: z-index 1000 (floating overlay)
 */

.header {
    /* 
     * ABSOLUTE positioning - floats above hero
     * Scrolls with the page (not sticky)
     */
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    
    /* Header dimensions - centered horizontally */
    max-width: calc(var(--container-max-width) + 4rem);
    width: calc(100% - 4rem);
    
    /* 
     * Glassmorphism background - semi-transparent
     * Allows hero to show through slightly
     */
    background: linear-gradient(
        135deg,
        rgba(253, 252, 251, 0.85) 0%,
        rgba(255, 245, 247, 0.8) 50%,
        rgba(254, 248, 243, 0.85) 100%
    );
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    
    /* Rounded corners - matches form card style (20px) */
    border-radius: 20px;
    
    /* Subtle border - no hard edges */
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    /* Soft elevation shadow - premium floating effect */
    box-shadow: 
        0 4px 24px rgba(139, 21, 56, 0.06),
        0 1px 3px rgba(139, 21, 56, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Page-header sections (non-hero pages) - same floating style */
body:has(.page-header) .header {
    background: linear-gradient(
        135deg,
        rgba(253, 252, 251, 0.88) 0%,
        rgba(255, 245, 247, 0.85) 50%,
        rgba(254, 248, 243, 0.88) 100%
    );
}

body:has(.page-header) .logo a {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body:has(.page-header) .mobile-menu-toggle span {
    background-color: var(--gray-700);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Horizontal padding for pill shape - more on sides */
    padding: 0.875rem 2.5rem;
    max-width: var(--container-max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.logo a {
    display: flex;
    align-items: center;
    font-size: 1.75rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo a img {
    height: 65px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

.logo a:hover img {
    transform: scale(1.05);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.nav-link {
    color: var(--gray-700);
    font-weight: 500;
    padding: var(--spacing-xs) 0;
    position: relative;
    transition: color 0.2s ease;
    display: inline-block;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--primary-color);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--primary-color);
}

.nav-link.active::after {
    width: 100%;
}

/* Header Dropdown Menu Styles */
.has-dropdown {
    position: relative;
}

.has-dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
    margin-left: 2px;
}

.has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    min-width: 600px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.5rem;
    padding: 1rem;
    z-index: 1000;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 0.75rem;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu li:first-child {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    position: relative;
}

.dropdown-menu li:first-child .dropdown-link {
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 1rem;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(139, 21, 56, 0.15);
    border-radius: 8px;
}

.dropdown-menu li:first-child .dropdown-link::before {
    display: none;
}

.dropdown-link::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c41e3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.dropdown-link:hover::before {
    opacity: 1;
    transform: translateY(-2px);
}

.dropdown-link::after {
    display: none;
}

.dropdown-link:hover {
    background: rgba(196, 30, 58, 0.04);
    color: var(--primary-color);
}

.dropdown-divider {
    display: none;
}

/* Blog Dropdown Menu Styles */
.dropdown-menu-blogs {
    min-width: 420px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.blog-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    margin: 0 !important;
}

.blog-dropdown-header span {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.view-all-link {
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.9;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.view-all-link:hover {
    opacity: 1;
    transform: translateX(3px);
}

.blog-card-item {
    margin: 0 !important;
    border-bottom: 1px solid rgba(139, 21, 56, 0.08);
}

.blog-card-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.blog-card-link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    transition: all 0.25s ease;
    background: white;
}

.blog-card-link:hover {
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.03) 0%, rgba(196, 30, 58, 0.03) 100%);
    transform: translateX(4px);
}

.blog-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.1) 0%, rgba(196, 30, 58, 0.1) 100%);
    border-radius: 10px;
    transition: all 0.25s ease;
}

.blog-card-link:hover .blog-card-icon {
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    transform: scale(1.1) rotate(5deg);
}

.blog-card-icon svg {
    width: 22px;
    height: 22px;
    color: #8b1538;
    transition: color 0.25s ease;
}

.blog-card-link:hover .blog-card-icon svg {
    color: white;
}

.blog-card-content {
    flex: 1;
    min-width: 0;
}

.blog-card-content h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.blog-card-link:hover .blog-card-content h4 {
    color: #8b1538;
}

.blog-card-content p {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-cta {
    margin-left: var(--spacing-sm);
    background: linear-gradient(to right, #8B1538, #C41E3A);
    color: var(--white);
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 0.625rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(139, 21, 56, 0.25);
    position: relative;
    overflow: hidden;
    display: inline-block;
    z-index: 1;
}

.nav-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #C41E3A, #8B1538);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 21, 56, 0.35);
    color: var(--white);
}

.nav-cta:hover::before {
    left: 0;
}

.nav-cta svg {
    margin-left: 0.5rem;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cta:hover svg {
    transform: translateX(3px);
}

.nav-cta .mobile-text {
    display: none;
}

.nav-cta .desktop-text {
    display: inline;
}

.mobile-apply-item {
    display: none;
}

.desktop-apply {
    display: inline-block;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--spacing-xs);
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--gray-700);
    transition: all var(--transition-fast);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-align: center;
    border-radius: 0.625rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.btn-primary {
    background: linear-gradient(to right, #8B1538, #C41E3A);
    color: var(--white);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(139, 21, 56, 0.25);
    z-index: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #C41E3A, #8B1538);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 21, 56, 0.35);
    color: var(--white);
}

.btn-primary:hover::before {
    left: 0;
}

.btn-primary:active {
    transform: translateY(-1px);
}

.btn-primary:disabled {
    background-color: var(--gray-300);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.btn-secondary {
    background-color: var(--white);
    color: var(--gray-700);
    border: 2px solid var(--gray-300);
}

.btn-secondary:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* ============================================
   HERO SECTION - PREMIUM REDESIGN
   ============================================ */

/* 
 * Hero starts at top: 0
 * Background extends to very top of page
 * Header floats ABOVE this as an overlay
 * Extra top padding accounts for floating header space
 */
.hero {
    /* 
     * Top padding includes space for floating header
     * ~5rem for header height + 1rem top margin + breathing room
     */
    padding: 8rem 0 3rem;
    position: relative;
    overflow: hidden;
    /* Hero background - extends to top of viewport */
    background: linear-gradient(135deg, #fdfcfb 0%, #fff5f7 50%, #fef8f3 100%);
    min-height: auto;
    /* Ensure hero is behind the floating header */
    z-index: 1;
}

.hero-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* Hero Logo Watermark */
.hero-logo-watermark {
    position: absolute;
    top: 90%;
    left: 45%;
    transform: translate(-50%, -50%);
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
    animation: float-logo 8s ease-in-out infinite;
}

.hero-logo-watermark img {
    width: 250px;
    height: auto;
    filter: grayscale(100%) brightness(1.2);
    mix-blend-mode: multiply;
}

@keyframes float-logo {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(8deg) scale(1);
    }
    50% {
        transform: translate(-50%, -80%) rotate(-6deg) scale(1.05);
    }
}

/* Modern Mesh Gradient Background */
.mesh-gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(at 27% 37%, hsla(340, 75%, 95%, 1) 0px, transparent 50%),
        radial-gradient(at 97% 21%, hsla(45, 70%, 92%, 1) 0px, transparent 50%),
        radial-gradient(at 52% 99%, hsla(350, 80%, 93%, 1) 0px, transparent 50%),
        radial-gradient(at 10% 29%, hsla(340, 85%, 90%, 1) 0px, transparent 50%),
        radial-gradient(at 97% 96%, hsla(48, 75%, 95%, 1) 0px, transparent 50%),
        radial-gradient(at 33% 50%, hsla(355, 70%, 94%, 1) 0px, transparent 50%),
        radial-gradient(at 79% 53%, hsla(343, 75%, 96%, 1) 0px, transparent 50%);
    opacity: 0.8;
    animation: meshMove 20s ease-in-out infinite;
}

@keyframes meshMove {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* Family Silhouettes Background */
.family-silhouettes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.family-silhouette {
    position: absolute;
    opacity: 0.03;
    color: var(--primary-color);
    animation: floatFamily 40s ease-in-out infinite;
}

.family-silhouette svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.family-1 {
    width: 180px;
    height: 180px;
    top: 15%;
    left: 5%;
    animation-delay: 0s;
}

.family-2 {
    width: 280px;
    height: 200px;
    bottom: 20%;
    right: 8%;
    animation-delay: 15s;
}

.family-3 {
    width: 220px;
    height: 200px;
    top: 55%;
    left: 12%;
    animation-delay: 25s;
}

@keyframes floatFamily {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.03;
    }
    25% {
        transform: translate(20px, -25px) scale(1.05);
        opacity: 0.05;
    }
    50% {
        transform: translate(-15px, 15px) scale(0.95);
        opacity: 0.02;
    }
    75% {
        transform: translate(15px, 20px) scale(1.02);
        opacity: 0.04;
    }
}

/* Financial Icons Background */
.financial-icons {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.financial-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    opacity: 0.08;
    color: var(--primary-color);
    animation: floatIcon 35s ease-in-out infinite;
    will-change: transform;
}

.financial-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(139, 21, 56, 0.1));
}

.icon-1 { top: 8%; left: 10%; animation-delay: 0s; }
.icon-2 { top: 22%; right: 15%; animation-delay: 3s; }
.icon-3 { top: 65%; left: 18%; animation-delay: 6s; }
.icon-4 { bottom: 18%; right: 22%; animation-delay: 9s; }
.icon-5 { top: 40%; right: 10%; animation-delay: 12s; }
.icon-6 { bottom: 38%; left: 8%; animation-delay: 15s; }
.icon-7 { top: 78%; right: 28%; animation-delay: 18s; }
.icon-8 { top: 32%; left: 6%; animation-delay: 21s; }
.icon-9 { bottom: 28%; right: 12%; animation-delay: 24s; }
.icon-10 { top: 52%; right: 35%; animation-delay: 27s; }
.icon-11 { top: 18%; left: 35%; animation-delay: 30s; }
.icon-12 { bottom: 45%; right: 40%; animation-delay: 33s; }

@keyframes floatIcon {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.08;
    }
    25% {
        transform: translate(20px, -20px) rotate(8deg);
        opacity: 0.12;
    }
    50% {
        transform: translate(-15px, 15px) rotate(-8deg);
        opacity: 0.05;
    }
    75% {
        transform: translate(15px, 20px) rotate(5deg);
        opacity: 0.1;
    }
}

/* Floating Money Symbols */
.money-elements {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.money-symbol {
    position: absolute;
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-gold) 50%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.15;
    animation: floatMoney 30s ease-in-out infinite;
    will-change: transform;
    text-shadow: 0 2px 10px rgba(139, 21, 56, 0.1);
}

.money-1 {
    top: 12%;
    right: 20%;
    font-size: 4.5rem;
    animation-delay: 0s;
}

.money-2 {
    top: 58%;
    left: 15%;
    font-size: 3.8rem;
    animation-delay: 6s;
}

.money-3 {
    bottom: 25%;
    right: 8%;
    font-size: 3rem;
    animation-delay: 12s;
}

.money-4 {
    top: 75%;
    right: 38%;
    font-size: 3.5rem;
    animation-delay: 18s;
}

.money-5 {
    top: 28%;
    left: 28%;
    font-size: 3.2rem;
    animation-delay: 24s;
}

.money-6 {
    bottom: 42%;
    left: 5%;
    font-size: 2.8rem;
    animation-delay: 15s;
}

@keyframes floatMoney {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.15;
    }
    25% {
        transform: translate(30px, -40px) rotate(20deg) scale(1.15);
        opacity: 0.2;
    }
    50% {
        transform: translate(-20px, 25px) rotate(-15deg) scale(0.9);
        opacity: 0.1;
    }
    75% {
        transform: translate(20px, 35px) rotate(18deg) scale(1.08);
        opacity: 0.18;
    }
}

/* Floating Particles */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.6), transparent);
    border-radius: 50%;
    animation: particleFloat 15s ease-in-out infinite;
}

.particle:nth-child(1) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    animation-duration: 18s;
}

.particle:nth-child(2) {
    top: 40%;
    right: 25%;
    animation-delay: 3s;
    animation-duration: 20s;
}

.particle:nth-child(3) {
    bottom: 30%;
    left: 30%;
    animation-delay: 6s;
    animation-duration: 16s;
}

.particle:nth-child(4) {
    top: 60%;
    right: 15%;
    animation-delay: 9s;
    animation-duration: 22s;
}

.particle:nth-child(5) {
    top: 35%;
    left: 45%;
    animation-delay: 12s;
    animation-duration: 19s;
}

.particle:nth-child(6) {
    bottom: 45%;
    right: 35%;
    animation-delay: 15s;
    animation-duration: 17s;
}

.particle:nth-child(7) {
    top: 50%;
    left: 20%;
    animation-delay: 18s;
    animation-duration: 21s;
}

.particle:nth-child(8) {
    bottom: 25%;
    right: 40%;
    animation-delay: 21s;
    animation-duration: 23s;
}

@keyframes particleFloat {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(0, -100px) scale(0);
        opacity: 0;
    }
}

.hero-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    animation: float 25s ease-in-out infinite;
    will-change: transform;
}

.orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.25), transparent 70%);
    top: -300px;
    right: -200px;
    animation-delay: 0s;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2), transparent 70%);
    bottom: -250px;
    left: -200px;
    animation-delay: 8s;
}

.orb-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(196, 30, 58, 0.15), transparent 70%);
    top: 40%;
    right: 20%;
    animation-delay: 16s;
}

.orb-4 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(255, 182, 193, 0.18), transparent 70%);
    top: 60%;
    left: 30%;
    animation-delay: 12s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -50px) scale(1.2);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr minmax(480px, 540px);
    gap: 2rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 580px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.01em;
    /* Animation on load */
    animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.1s;
    will-change: opacity, transform;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.hero-badge svg {
    width: 16px;
    height: 16px;
    /* No filter needed for flat gold stars */
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
    /* Animation on load - smooth cubic-bezier easing */
    animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.25s;
    will-change: opacity, transform;
}

/* 
 * Rotating Text Animation
 * Cycles through: "Loan Match" → "Lender" → "Rate" → "Solution"
 */
.rotating-text-wrapper {
    position: relative;
    display: inline;
}

.rotating-text {
    display: inline-block;
    position: relative;
    color: var(--primary-color);
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Ultra-smooth transition for JS-controlled animation */
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure text stays inline */
    white-space: nowrap;
    /* Enable hardware acceleration for smoother animations */
    will-change: opacity, transform;
    transform: translateY(0);
}

/* Animated underline */
.rotating-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #8b1538, #c41e3a, #d4af37, #c41e3a, #8b1538);
    background-size: 300% 100%;
    border-radius: 4px;
    opacity: 0.85;
    animation: underlineShimmer 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: left center;
}

/* Underline shimmer animation - smoother with longer duration */
@keyframes underlineShimmer {
    0% {
        background-position: 0% 50%;
        transform: scaleX(1);
    }
    25% {
        transform: scaleX(1.02);
    }
    50% {
        background-position: 100% 50%;
        transform: scaleX(1);
    }
    75% {
        transform: scaleX(0.98);
    }
    100% {
        background-position: 0% 50%;
        transform: scaleX(1);
    }
}

/* Hover effect - subtle glow */
.rotating-text-wrapper:hover .rotating-text {
    filter: drop-shadow(0 0 15px rgba(139, 21, 56, 0.3));
}

.rotating-text-wrapper:hover .rotating-text::after {
    opacity: 1;
    animation-duration: 1.5s;
}

/* ============================================
   HERO TEXT ANIMATIONS
   ============================================ */

/* 
 * Fade and slide up animation
 * Used for staggered reveal of hero content
 * Enhanced with smoother easing and subtle blur effect
 */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        filter: blur(4px);
    }
    60% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ============================================
   GSAP OVERRIDE — Disable CSS animations on hero elements
   when GSAP is controlling them (.has-anim on <html>).
   Without this, CSS fadeSlideUp and GSAP fromTo() fight
   for opacity/transform on the same elements simultaneously.
   ============================================ */
.has-anim .hero-badge,
.has-anim .hero-title,
.has-anim .hero-subtitle,
.has-anim .hero-subheading,
.has-anim .hero-request-funds,
.has-anim .hero-checklist li,
.has-anim .hero-live-ribbon,
.has-anim .hero-stats-trio,
.has-anim .trust-pills,
.has-anim .form-card {
    animation: none !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-badge,
    .hero-title,
    .hero-subtitle,
    .trust-pills,
    .hero-request-funds,
    .form-card {
        animation: none;
    }
}

.gradient-text {
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 50%, #8b1538 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    position: relative;
    animation: gradientShift 3s ease-in-out infinite;
}

.gradient-text::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-gold);
    border-radius: 2px;
    opacity: 0.6;
    animation: underlinePulse 2s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes underlinePulse {
    0%, 100% {
        opacity: 0.6;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.9;
        transform: scaleX(1.05);
    }
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--gray-700);
    margin-bottom: 2.5rem;
    line-height: 1.8;
    font-weight: 400;
    max-width: 540px;
    /* Animation on load - smooth cubic-bezier easing */
    animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.45s;
    will-change: opacity, transform;
}

.trust-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-top: 2rem;
    /* Animation on load - smooth cubic-bezier easing */
    animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.6s;
    will-change: opacity, transform;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 1.5px solid rgba(139, 21, 56, 0.15);
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-800);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06),
                0 2px 4px rgba(139, 21, 56, 0.08);
    backdrop-filter: blur(10px);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle hover lift */
.trust-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
                0 4px 8px rgba(139, 21, 56, 0.12);
    border-color: rgba(139, 21, 56, 0.25);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.trust-pill svg {
    color: var(--primary-color);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 2px 4px rgba(139, 21, 56, 0.15));
}

/* Hero Checklist */
.hero-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-checklist li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    color: var(--gray-700);
    font-weight: 500;
}

.check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #27ae60;
    flex-shrink: 0;
}

.check-icon svg {
    width: 14px;
    height: 14px;
}

/* Glass Trust Pills */
.trust-pills-glass {
    display: flex;
    flex-wrap: nowrap; /* Force single row */
    gap: 1rem;
    max-width: 100%;
    overflow-x: auto; /* Allow scroll on very small screens if needed, though unlikely with 2 items */
    padding-bottom: 5px; /* Space for scrollbar if it appears */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.trust-pills-glass::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.trust-pill-glass {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.trust-pill-glass:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.trust-pill-glass span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-800);
}

/* Stars Wrapper */
.stars-wrapper {
    display: flex;
    gap: 2px;
}

@media (max-width: 768px) {
    .trust-pills-glass {
        justify-content: center;
        gap: 0.5rem;
    }

    .trust-pill-glass {
        padding: 0.5rem 0.85rem;
        gap: 0.5rem;
        border-radius: 12px;
    }

    .trust-pill-glass .pill-icon {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }

    .trust-pill-glass .pill-icon svg {
        width: 14px;
        height: 14px;
    }

    .trust-pill-glass span {
        font-size: 0.8rem;
    }
    
    .hero-checklist {
        max-width: fit-content;
        margin-left: auto;
        margin-right: auto;
        align-items: flex-start;
    }

    .hero-checklist li {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ============================================
   MODERN FORM CARD - SPLIT DESIGN
   ============================================ */
.form-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08),
                0 8px 24px rgba(139, 21, 56, 0.06);
    padding: 0;
    width: 100%;
    max-width: 540px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(139, 21, 56, 0.06);
    justify-self: end;
    /* Animation on load */
    animation: fadeSlideUp 0.8s ease-out both;
    animation-delay: 0.3s;
}

/* Aesthetic Watermark */
.form-bg-watermark {
    position: absolute;
    bottom: -40px;
    right: -40px;
    color: var(--primary-color);
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-15deg);
    transition: transform 0.5s ease;
}

.form-card:hover .form-bg-watermark {
    transform: rotate(-10deg) scale(1.05);
}

.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

/* Modern Form Header */
.form-header-modern {
    background: 
        radial-gradient(circle at 0% 0%, rgba(139, 21, 56, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(212, 175, 55, 0.08) 0%, transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 1.75rem 1.75rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.form-header-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(139, 21, 56, 0.02) 10px,
            rgba(139, 21, 56, 0.02) 20px
        );
    pointer-events: none;
}

/* Step Indicator - Removed */
/* Text Gradient */
.form-header-modern h2 .text-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Shimmer Effect for Badge */
.form-badge {
    position: relative;
    overflow: hidden;
}

.form-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

@media (max-width: 480px) {
    .form-step-indicator {
        position: static;
        margin-bottom: 0.75rem;
        justify-content: center;
    }
}

/* Range Mini Visual */
.stat-range-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-bottom: 0.25rem;
}

.range-bar-mini {
    width: 60px;
    height: 4px;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    position: relative;
    margin-bottom: 8px;
}

.range-fill-mini {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%;
    background: var(--primary-color);
    border-radius: 2px;
    animation: rangeSlide 3s infinite ease-in-out alternate;
}

.range-knob-mini {
    position: absolute;
    top: 50%;
    left: 60%;
    width: 8px;
    height: 8px;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rangeKnobSlide 3s infinite ease-in-out alternate;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.range-text-mini {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}

@keyframes rangeSlide {
    0% { width: 20%; }
    100% { width: 80%; }
}

@keyframes rangeKnobSlide {
    0% { left: 20%; }
    100% { left: 80%; }
}

/* Avatar Stack */
.avatar-stack-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 0.25rem;
    height: 28px; /* Match height of watch icon */
    align-items: center;
}

/* Watch Icon Animation */
.stat-watch-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.25rem;
    height: 28px;
    color: var(--primary-color);
}

.watch-circle {
    opacity: 0.2;
}

.watch-hand {
    transform-origin: 12px 12px;
    animation: watchTick 6s infinite linear;
}

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

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.avatar-circle:first-child {
    margin-left: 0;
}

.avatar-circle:hover {
    transform: translateY(-2px);
    z-index: 2;
}

.avatar-circle.count {
    background-color: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.6rem;
    z-index: 1;
}

/* Footer Ticker - Premium Design */
.footer-ticker-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    height: 36px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.footer-ticker-wrapper:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, 0.1);
}

.ticker-dot-small {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green-premium 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    flex-shrink: 0;
}

.footer-ticker-text {
    font-size: 0.85rem;
    color: #374151;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center bottom;
}

.footer-ticker-text.fade-out {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
    filter: blur(2px);
}

.footer-ticker-text.fade-in {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    filter: blur(2px);
}

@keyframes pulse-green-premium {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        transform: scale(0.95);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(0.95);
    }
}

/* Secure Status Indicator */
.form-secure-status {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(46, 204, 113, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(46, 204, 113, 0.25);
    transition: all 0.3s ease;
}

.form-secure-status:hover {
    background: rgba(46, 204, 113, 0.15);
    transform: translateY(-1px);
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    animation: pulse-green 2s infinite;
}

.status-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: #27ae60;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@media (max-width: 480px) {
    .form-secure-status {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 0;
        border-radius: 0 0 0 12px;
        border-top: none;
        border-right: none;
        padding: 8px 12px;
        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.08);
    }
}


.form-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--gradient-primary);
    color: white;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.form-badge svg {
    width: 12px;
    height: 12px;
}

.form-header-modern h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0;
    letter-spacing: -0.03em;
}

/* Trust Stats Below Button */
.form-stats-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.02) 0%, rgba(212, 175, 55, 0.02) 100%);
    border-radius: 12px;
    border: 1px solid rgba(139, 21, 56, 0.06);
}

.form-stats-bottom .stat-item {
    text-align: center;
}

.form-stats-bottom .stat-number {
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.125rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: block;
}

.form-stats-bottom .stat-label {
    font-size: 0.625rem;
    color: var(--gray-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.form-stats-bottom .stat-divider {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, transparent, rgba(139, 21, 56, 0.2), transparent);
}

.progress-indicator {
    margin-bottom: var(--spacing-lg);
}

.progress-text {
    display: block;
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--gray-100);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 999px;
    transition: width var(--transition-base);
    width: 20%;
    box-shadow: 0 2px 8px rgba(139, 21, 56, 0.3);
}

/* ============================================
   FORM STEPS
   ============================================ */
/* Modern Form Body */
.loan-form-modern {
    padding: 1.5rem 1.75rem 1.25rem;
}

.form-section {
    margin-bottom: 0.5rem;
}

.form-section:last-of-type {
    margin-bottom: 0;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
}

.label-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 800;
}

.label-text {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

/* ============================================
   SLIDER
   ============================================ */
.slider-container {
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.02) 0%, rgba(212, 175, 55, 0.02) 100%);
    border-radius: 1rem;
    border: 1px solid rgba(139, 21, 56, 0.06);
}

.slider-value {
    text-align: center;
    margin-bottom: 1.75rem;
    padding: 0.5rem 0;
}

.slider-value .currency {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--gray-500);
    margin-right: 0.25rem;
    vertical-align: super;
    font-size: 1.25rem;
}

.slider-value span:not(.currency) {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.04em;
}

.slider {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--primary-color) 0%, var(--gray-200) 0%);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
}

.slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    cursor: grab;
    box-shadow: 0 0 0 3px var(--primary-color),
                0 4px 12px rgba(139, 21, 56, 0.3);
    transition: all 0.2s ease;
    margin-top: -9px;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px var(--primary-color),
                0 6px 16px rgba(139, 21, 56, 0.4);
}

.slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1);
}

.slider::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--gray-200);
}

.slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    cursor: grab;
    border: none;
    box-shadow: 0 0 0 3px var(--primary-color),
                0 4px 12px rgba(139, 21, 56, 0.3);
    transition: all 0.2s ease;
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px var(--primary-color),
                0 6px 16px rgba(139, 21, 56, 0.4);
}

.slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
    font-weight: 600;
}

/* ============================================
   MODERN AMOUNT DISPLAY & SLIDER
   ============================================ */
.amount-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.03) 0%, rgba(212, 175, 55, 0.03) 100%);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    border: 1.5px solid rgba(139, 21, 56, 0.08);
}

.amount-currency {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amount-value {
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
}

/* Modern Slider */
.modern-slider {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, 
        var(--primary-color) 0%, 
        var(--primary-color) var(--slider-progress, 33%), 
        #e5e7eb var(--slider-progress, 33%), 
        #e5e7eb 100%);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    margin-bottom: 1.5rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.modern-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: transparent;
}

.modern-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    cursor: grab;
    border: 3px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: -8px;
}

.modern-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    border-width: 4px;
    box-shadow: 0 6px 16px rgba(139, 21, 56, 0.4),
                0 3px 6px rgba(0, 0, 0, 0.15),
                inset 0 1px 2px rgba(255, 255, 255, 1);
}

.modern-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(139, 21, 56, 0.35),
                0 1px 3px rgba(0, 0, 0, 0.12),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.modern-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, 
        var(--primary-color) 0%, 
        var(--primary-color) var(--slider-progress, 33%), 
        #e5e7eb var(--slider-progress, 33%), 
        #e5e7eb 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.modern-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    cursor: grab;
    border: 3px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    border-width: 4px;
    box-shadow: 0 6px 16px rgba(139, 21, 56, 0.4),
                0 3px 6px rgba(0, 0, 0, 0.15),
                inset 0 1px 2px rgba(255, 255, 255, 1);
}

.modern-slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(139, 21, 56, 0.35),
                0 1px 3px rgba(0, 0, 0, 0.12),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Quick Amount Buttons */
.amount-quick-select {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.quick-amount {
    flex: 1;
    padding: 0.5rem 0.5rem;
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-amount:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(139, 21, 56, 0.02);
    transform: translateY(-1px);
}

.quick-amount.active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 21, 56, 0.2);
}

/* ============================================
   OPTION CARDS
   ============================================ */
.option-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background-color: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 120px;
}

.option-card:hover {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(212, 175, 55, 0.05) 100%);
    transform: translateY(-2px);
}

.option-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(212, 175, 55, 0.08) 100%);
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.15);
    position: relative;
}

.option-card.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.3);
}

.option-card svg {
    color: var(--gray-600);
    transition: color var(--transition-fast);
}

.option-card:hover svg,
.option-card.selected svg {
    color: var(--primary-color);
}

.option-card span {
    font-weight: 600;
    color: var(--gray-700);
    text-align: center;
}

.income-label {
    font-size: 1rem;
}

/* ============================================
   FORM INPUTS
   ============================================ */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.625rem;
    font-size: 0.9375rem;
}

.form-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.2s ease;
    background-color: var(--gray-50);
    font-weight: 400;
}

.form-input:hover {
    border-color: var(--gray-300);
    background-color: white;
}

.form-input::placeholder {
    color: var(--gray-400);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(139, 21, 56, 0.1);
    background-color: white;
}

.form-input::placeholder {
    color: var(--gray-400);
}

.help-text {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: var(--spacing-xs);
}

.error-message {
    display: none !important;
}

/* ============================================
   MODERN INPUT WRAPPER
   ============================================ */
.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

.modern-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    background: white;
    font-weight: 500;
}

.modern-input:hover {
    border-color: var(--gray-300);
}

.modern-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(139, 21, 56, 0.08);
}

.modern-input.error {
    border-color: var(--error);
    animation: shake 0.3s ease;
}

.modern-input.error:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.modern-input.error::placeholder {
    color: var(--error);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.modern-input:focus ~ .input-icon {
    color: var(--primary-color);
}

.modern-input.error ~ .input-icon {
    color: var(--error);
}

.modern-input::placeholder {
    color: var(--gray-400);
    font-weight: 400;
}

/* ============================================
   CHECKBOX
   ============================================ */
.checkbox-group {
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}

.checkbox-label:hover {
    background: rgba(139, 21, 56, 0.02);
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-top: 2px;
    background: white;
}

.checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
}

.checkbox-text {
    font-size: 0.875rem;
    color: var(--gray-700);
    line-height: 1.6;
    font-weight: 400;
}

.checkbox-text a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.checkbox-text a:hover {
    color: var(--primary-hover);
    border-bottom-color: var(--primary-hover);
}

/* ============================================
   FORM ACTIONS
   ============================================ */
.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.form-actions .btn {
    flex: 1;
}

.form-actions.center {
    justify-content: center;
}

.form-actions.center .btn {
    flex: 0 0 auto;
}

.btn-submit-single {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-size: 1.0625rem;
    padding: 1.125rem 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: 0.875rem;
    transition: all 0.3s ease;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.btn-submit-single::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-submit-single:hover::before {
    transform: translateX(100%);
}

.btn-submit-single:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(139, 21, 56, 0.3);
}

.btn-submit-single:active {
    transform: translateY(0);
}

.btn-submit-single svg {
    transition: transform 0.3s ease;
    width: 18px;
    height: 18px;
}

.btn-submit-single:hover svg {
    transform: translateX(4px);
}

/* ============================================
   MODERN SUBMIT BUTTON
   ============================================ */
.modern-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.9375rem 1.75rem;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.25);
    position: relative;
    overflow: hidden;
}

.modern-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.modern-submit-btn:hover::before {
    transform: translateX(100%);
}

.modern-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.35);
}

.modern-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.25);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.modern-submit-btn:hover .btn-icon {
    transform: translateX(4px);
}

/* Success State Animation */
.modern-submit-btn.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4) !important;
    animation: btnSuccessPulse 0.6s ease-out;
    pointer-events: none;
}

.modern-submit-btn.btn-success::before {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: btnSuccessShine 0.6s ease-out;
}

@keyframes btnSuccessPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes btnSuccessShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.modern-submit-btn.btn-success .btn-icon {
    animation: btnCheckmark 0.4s ease-out 0.2s both;
}

@keyframes btnCheckmark {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Disabled state */
.modern-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.9;
}

/* Form Footer */
.form-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(139, 21, 56, 0.08);
    font-size: 0.75rem;
    color: var(--gray-600);
    text-align: center;
}

.form-footer svg {
    color: var(--accent-gold);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-step {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.loading-content h3 {
    font-size: 1.5rem;
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

.loading-content p {
    color: var(--gray-600);
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--spacing-lg);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   FEATURES SECTION - REDESIGNED
   ============================================ */
.features {
    padding: 6rem 0;
    background: linear-gradient(180deg, #fdfcfb 0%, #f8f5f2 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative background elements */
.features::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.features::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Section Header */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
    border: 1px solid rgba(139, 21, 56, 0.12);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}

.section-title {
    font-size: 2.75rem;
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--gray-600);
    line-height: 1.7;
    max-width: 550px;
    margin: 0 auto;
}

/* Features Grid - 2x2 on desktop */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

/* Feature Card - Modern Design */
.feature-card {
    position: relative;
    padding: 2.5rem;
    border-radius: 1.5rem;
    background: white;
    border: 1px solid rgba(139, 21, 56, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: left;
}

/* Feature number badge */
.feature-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(139, 21, 56, 0.06);
    line-height: 1;
    letter-spacing: -0.05em;
    transition: color 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(139, 21, 56, 0.12);
    border-color: rgba(139, 21, 56, 0.15);
}

.feature-card:hover .feature-number {
    color: rgba(139, 21, 56, 0.1);
}

/* Feature Icon */
.feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    position: relative;
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover .feature-icon {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(139, 21, 56, 0.3);
}

.feature-icon svg {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Feature Content */
.feature-card h3 {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.feature-card p {
    color: var(--gray-600);
    line-height: 1.65;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* Feature Stat */
.feature-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(139, 21, 56, 0.08);
}

.feature-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.02em;
}

.feature-stat .stat-desc {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* Trust Banner */
.trust-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-top: 4rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.04) 0%, rgba(212, 175, 55, 0.04) 100%);
    border-radius: 100px;
    border: 1px solid rgba(139, 21, 56, 0.08);
}

.trust-banner-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
}

.trust-banner-item svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

/* ============================================
   SEO CONTENT SECTION
   ============================================ */
.seo-content-section {
    padding: 5rem 0;
    background: white;
    position: relative;
}

.seo-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 4rem;
    align-items: start;
}

/* Main Content */
.seo-content-main {
    max-width: 100%;
}

.seo-content-main h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.seo-content-main p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: 1.25rem;
}

.seo-content-main p:last-child {
    margin-bottom: 0;
}

/* Sidebar Highlight Box */
.seo-highlight-box {
    background: linear-gradient(135deg, #fdfcfb 0%, #fff5f7 100%);
    border: 1px solid rgba(139, 21, 56, 0.1);
    border-radius: 1.25rem;
    padding: 2rem;
    position: sticky;
    top: 6rem;
}

.seo-highlight-box h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.seo-facts-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.seo-facts-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(139, 21, 56, 0.06);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-700);
}

.seo-facts-list li:last-child {
    border-bottom: none;
}

.seo-facts-list li svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.seo-cta-btn {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--gradient-primary);
    color: white;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 21, 56, 0.25);
}

.seo-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 21, 56, 0.35);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .seo-content-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .seo-highlight-box {
        position: static;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .seo-content-section {
        padding: 3.5rem 0;
    }
    
    .seo-content-main h2 {
        font-size: 1.625rem;
    }
    
    .seo-content-main p {
        font-size: 1rem;
    }
    
    .seo-highlight-box {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .seo-content-section {
        padding: 2.5rem 0;
    }
    
    .seo-content-main h2 {
        font-size: 1.5rem;
    }
    
    .seo-content-main p {
        font-size: 0.9375rem;
        line-height: 1.75;
    }
    
    .seo-highlight-box h3 {
        font-size: 1.125rem;
    }
    
    .seo-facts-list li {
        font-size: 0.875rem;
        padding: 0.625rem 0;
    }
}

/* ============================================
   CTA SECTION - ENHANCED
   ============================================ */
.cta-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #8b1538 0%, #6d1129 50%, #4a0d1f 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Animated Background Shapes */
.cta-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cta-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: ctaFloat 20s ease-in-out infinite;
}

.cta-shape-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent 70%);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.cta-shape-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
    bottom: -150px;
    left: -100px;
    animation-delay: 7s;
}

.cta-shape-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
}

@keyframes ctaFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: translate(30px, -30px) scale(1.1);
        opacity: 0.15;
    }
}

/* CTA Financial Icons Overlay */
.cta-icons {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cta-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.08;
    color: white;
    animation: ctaIconFloat 30s ease-in-out infinite;
}

.cta-icon svg {
    width: 100%;
    height: 100%;
}

.cta-icon-1 { top: 15%; left: 8%; animation-delay: 0s; }
.cta-icon-2 { top: 25%; right: 10%; animation-delay: 5s; }
.cta-icon-3 { bottom: 20%; left: 12%; animation-delay: 10s; }
.cta-icon-4 { bottom: 30%; right: 15%; animation-delay: 15s; }
.cta-icon-5 { top: 60%; left: 5%; animation-delay: 20s; }
.cta-icon-6 { top: 40%; right: 8%; animation-delay: 25s; }

@keyframes ctaIconFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.08;
    }
    25% {
        transform: translate(15px, -15px) rotate(5deg);
        opacity: 0.12;
    }
    50% {
        transform: translate(-10px, 10px) rotate(-5deg);
        opacity: 0.06;
    }
    75% {
        transform: translate(10px, 15px) rotate(3deg);
        opacity: 0.1;
    }
}

/* CTA Money Symbols */
.cta-money {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cta-money-symbol {
    position: absolute;
    font-size: 3rem;
    font-weight: 900;
    color: #d4af37;
    opacity: 0.1;
    animation: ctaMoneyFloat 25s ease-in-out infinite;
}

.cta-money-1 {
    top: 20%;
    right: 20%;
    font-size: 4rem;
    animation-delay: 0s;
}

.cta-money-2 {
    bottom: 25%;
    left: 15%;
    font-size: 3rem;
    animation-delay: 8s;
}

.cta-money-3 {
    top: 55%;
    right: 8%;
    font-size: 2.5rem;
    animation-delay: 16s;
}

.cta-money-4 {
    top: 35%;
    left: 8%;
    font-size: 3.5rem;
    animation-delay: 12s;
}

@keyframes ctaMoneyFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.1;
    }
    25% {
        transform: translate(20px, -25px) rotate(15deg) scale(1.1);
        opacity: 0.15;
    }
    50% {
        transform: translate(-15px, 15px) rotate(-10deg) scale(0.95);
        opacity: 0.08;
    }
    75% {
        transform: translate(15px, 20px) rotate(10deg) scale(1.05);
        opacity: 0.12;
    }
}

/* Hide CTA overlays on mobile for performance */
@media (max-width: 768px) {
    .cta-icons,
    .cta-money {
        opacity: 0.5;
    }
    
    .cta-icon {
        width: 40px;
        height: 40px;
    }
    
    .cta-money-symbol {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .cta-icons,
    .cta-money {
        display: none;
    }
}

/* CTA Content */
.cta-content {
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* CTA Badge */
.cta-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    letter-spacing: 0.03em;
}

.cta-content h2 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.cta-highlight {
    position: relative;
    display: inline-block;
}

.cta-highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.6), rgba(212, 175, 55, 0.3));
    border-radius: 4px;
    z-index: -1;
}

.cta-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Buttons */
.cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    background: white;
    color: var(--primary-color);
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.cta-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #fff 0%, #f8f5f2 100%);
}

.cta-btn-primary svg {
    transition: transform 0.3s ease;
}

.cta-btn-primary:hover svg {
    transform: translateX(4px);
}

.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 1.125rem 2rem;
    background: transparent;
    color: white;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Trust Row */
.cta-trust-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cta-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.cta-trust-item svg {
    color: #d4af37;
    flex-shrink: 0;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .cta-section {
        padding: 4rem 0;
    }
    
    .cta-content h2 {
        font-size: 2.25rem;
    }
    
    .cta-content p {
        font-size: 1.0625rem;
    }
    
    .cta-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    
    .cta-trust-row {
        gap: 1rem 1.5rem;
    }
    
    .cta-trust-item {
        font-size: 0.875rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .cta-section {
        padding: 3rem 0;
    }
    
    .cta-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
    
    .cta-content h2 {
        font-size: 1.75rem;
    }
    
    .cta-highlight::after {
        height: 6px;
        bottom: 2px;
    }
    
    .cta-content p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .cta-actions {
        margin-bottom: 2rem;
    }
    
    .cta-btn-primary,
    .cta-btn-secondary {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        max-width: 100%;
    }
    
    .cta-trust-row {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================================
   FOOTER - ENHANCED
   ============================================ */
.footer-enhanced {
    background: linear-gradient(180deg, #1a0a10 0%, #0d0507 100%);
    color: var(--gray-300);
    padding: var(--spacing-lg) 0;
    position: relative;
    overflow: hidden;
}

/* Footer Background Elements */
.footer-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.footer-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
}

.footer-shape-1 {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.15), transparent);
}

.footer-shape-2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent);
}

/* Footer CTA Banner */
.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.5rem;
    background: var(--gradient-primary);
    border-radius: 1.25rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 50px rgba(139, 21, 56, 0.3);
}

.footer-cta::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(212, 175, 55, 0.2), transparent);
    border-radius: 1.25rem;
}

.footer-cta-content {
    position: relative;
    z-index: 1;
}

.footer-cta-content h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.25rem;
}

.footer-cta-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--white);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50px;
    transition: all var(--transition-base);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.footer-cta-btn:hover {
    background: var(--gradient-gold);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.footer-cta-btn svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.footer-cta-btn:hover svg {
    transform: translateX(4px);
}

/* Footer Main */
.footer-main {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: 4rem;
    padding-bottom: 3rem;
    position: relative;
    z-index: 1;
}

/* Footer Brand */
.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-logo-img {
    height: 50px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.footer-logo:hover .footer-logo-img {
    transform: scale(1.05);
}

.footer-logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-icon svg {
    width: 24px;
    height: 24px;
    color: var(--white);
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-tagline {
    color: var(--gray-400);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* Footer Trust Badges */
.footer-trust-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-start;
    align-items: center;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
    font-size: 0.8rem;
}

.footer-badge svg {
    width: 15px;
    height: 15px;
    color: var(--accent-gold);
}

.footer-badge span {
    font-size: 0.85rem;
    color: var(--gray-300);
    font-weight: 500;
}

/* Footer Links Wrapper */
.footer-links-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-links-col h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-links-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--gradient-gold);
    border-radius: 1px;
}

.footer-links-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links-col a {
    color: var(--gray-400);
    font-size: 0.95rem;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
}

.footer-links-col a:hover {
    color: var(--accent-gold);
    transform: translateX(3px);
}

/* Footer Contact List */
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-contact-list svg {
    width: 18px;
    height: 18px;
    color: var(--accent-gold);
    flex-shrink: 0;
}

.footer-contact-list span,
.footer-contact-list a {
    color: var(--gray-400);
    font-size: 0.95rem;
}

.footer-contact-list a:hover {
    color: var(--accent-gold);
    transform: none;
}

/* Footer Bottom */
.footer-bottom-enhanced {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

.footer-bottom-left p {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
}

.footer-bottom-left p:first-child {
    margin-bottom: 0.25rem;
}

.footer-disclaimer {
    font-size: 0.8rem !important;
    color: var(--gray-600) !important;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-made {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.footer-made svg {
    width: 16px;
    height: 16px;
    color: #ef4444;
}

/* Legacy Footer Styles (for compatibility) */
.footer {
    background: linear-gradient(180deg, var(--gray-900) 0%, #0a0a0a 100%);
    color: var(--gray-300);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 21, 56, 0.3), transparent);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.footer-col h4 {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.footer-col p {
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-col a {
    color: var(--gray-300);
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: var(--accent-gold);
}

.footer-bottom {
    border-top: 1px solid var(--gray-700);
    padding-top: var(--spacing-lg);
    text-align: center;
    font-size: 0.875rem;
    color: var(--gray-400);
}

/* Footer Responsive */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-brand {
        text-align: center;
        align-items: center;
    }

    .footer-logo-img {
        height: 45px;
    }
    
    .footer-trust-badges {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .footer-links-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-cta {
        flex-direction: column;
        text-align: center;
        padding: 1.75rem;
        margin-top: 2rem;
    }
    
    .footer-cta-content h3 {
        font-size: 1.25rem;
    }
    
    .footer-cta-btn {
        width: 100%;
        justify-content: center;
        max-width: 250px;
    }
    
    .footer-links-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-links-col:last-child {
        grid-column: span 2;
    }
    
    .footer-bottom-enhanced {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer-col ul {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .footer-cta {
        padding: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .footer-cta-content h3 {
        font-size: 1.1rem;
    }
    
    .footer-cta-content p {
        font-size: 0.875rem;
    }
    
    .footer-logo-text {
        font-size: 1.25rem;
    }
    
    .footer-tagline {
        font-size: 0.9rem;
    }
    
    .footer-trust-badges {
        flex-direction: column;
    }
    
    .footer-links-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    
    .footer-links-col:last-child {
        grid-column: span 1;
    }
    
    .footer-links-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links-col ul {
        align-items: center;
    }
    
    .footer-contact-list li {
        justify-content: center;
    }
    
    .footer-bottom-left p {
        font-size: 0.8rem;
    }
    
    .footer-made {
        font-size: 0.8rem;
    }
}

/* ============================================
   PAGE HEADER
   ============================================ */

/*
 * Page header for non-hero pages (About, FAQs, Contact, etc.)
 * Header floats above this section, so we need top padding
 * to account for the floating pill header
 */
.page-header {
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    color: var(--white);
    /* Top padding: header height (~60px) + top margin (1rem) + breathing room */
    padding: 7rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.03) 35px, rgba(255, 255, 255, 0.03) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(212, 175, 55, 0.03) 35px, rgba(212, 175, 55, 0.03) 70px);
    opacity: 0.6;
    z-index: 0;
}

.page-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2), transparent 70%);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    z-index: 0;
    animation: float 20s ease-in-out infinite;
}

.page-header h1 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: var(--spacing-sm);
    /* Extra top margin for spacing from floating header */
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-header p {
    font-size: 1.25rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

/* Curved transition to overlapping section (types / about / compare) */
.header-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.header-curve::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 100%;
    background: #ffffff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: scaleX(1.5);
}

/* ============================================
   CONTENT SECTION
   ============================================ */
.content-section {
    padding: var(--spacing-2xl) 0;
    background: var(--cream);
    position: relative;
    z-index: 1;
}

body:has(.page-header) .content-section {
    background: var(--cream);
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.content-main h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.content-main h2:first-child {
    margin-top: 0;
}

.content-main p {
    margin-bottom: var(--spacing-md);
    color: var(--gray-700);
    line-height: 1.8;
}

.content-list {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.content-list li {
    list-style: disc;
    color: var(--gray-700);
    margin-bottom: var(--spacing-xs);
    line-height: 1.8;
}

.content-list li strong {
    color: var(--gray-900);
}

/* ============================================
   PROCESS STEPS
   ============================================ */
.process-steps {
    margin: var(--spacing-lg) 0;
}

.process-step {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.step-number {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--gradient-gold);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
}

.step-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.step-content p {
    color: var(--gray-600);
    margin: 0;
}

/* ============================================
   VALUES GRID
   ============================================ */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.value-card {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--white) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.08);
}

.value-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.value-card p {
    color: var(--gray-600);
    margin: 0;
}

/* ============================================
   CTA BOX
   ============================================ */
.cta-box {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(212, 175, 55, 0.08) 100%);
    padding: var(--spacing-xl);
    border-radius: 1.5rem;
    text-align: center;
    margin: var(--spacing-xl) 0;
    border: 2px solid rgba(139, 21, 56, 0.1);
}

.cta-box h3 {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.cta-note {
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* ============================================
   FAQ PAGE - ENHANCED
   ============================================ */

/* FAQ Page Header */
.faq-page-header {
    position: relative;
    overflow: hidden;
}

/* Quick Section */
.faq-quick-section {
    background: var(--white);
    padding: 0;
    margin-top: -2.5rem;
    position: relative;
    z-index: 10;
}

.faq-quick-inner {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(139, 21, 56, 0.1);
    padding: 1.25rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.faq-topics {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.faq-topics-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-600);
}

.faq-topic-pill {
    padding: 0.5rem 1rem;
    background: var(--gray-100);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    transition: all var(--transition-base);
}

.faq-topic-pill:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

/* FAQ Section Enhanced */
.faq-section-enhanced {
    padding: 4rem 0 5rem;
    background: var(--cream);
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

/* FAQ Main */
.faq-main {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* FAQ Category */
.faq-category {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(139, 21, 56, 0.05);
    border: 1px solid rgba(139, 21, 56, 0.05);
}

.faq-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-100);
}

.faq-category-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-category-icon svg {
    width: 24px;
    height: 24px;
    color: var(--white);
}

/* Icon Color Variants */
.faq-category-icon-credit {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.faq-category-icon-security {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.faq-category-icon-fees {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.faq-category-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0;
}

/* FAQ Items Enhanced */
.faq-items-enhanced {
    display: flex;
    flex-direction: column;
}

.faq-item-enhanced {
    border-bottom: 1px solid var(--gray-100);
}

.faq-item-enhanced:last-child {
    border-bottom: none;
}

.faq-question-enhanced {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-base);
}

.faq-q-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.faq-question-enhanced span:not(.faq-q-icon) {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-900);
    transition: color var(--transition-base);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    color: var(--gray-400);
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.faq-question-enhanced:hover span:not(.faq-q-icon) {
    color: var(--primary-color);
}

.faq-question-enhanced:hover .faq-q-icon {
    background: var(--gradient-primary);
    color: var(--white);
}

.faq-item-enhanced.active .faq-q-icon {
    background: var(--gradient-primary);
    color: var(--white);
}

.faq-item-enhanced.active .faq-chevron {
    transform: rotate(180deg);
    color: var(--primary-color);
}

/* FAQ Answer Enhanced */
.faq-answer-enhanced {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding-left: 3rem;
}

.faq-item-enhanced.active .faq-answer-enhanced {
    max-height: 1000px;
    padding-bottom: 1.25rem;
}

.faq-answer-enhanced p {
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.faq-answer-enhanced p:last-child {
    margin-bottom: 0;
}

.faq-answer-enhanced ul {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.faq-answer-enhanced li {
    list-style: disc;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.faq-answer-enhanced a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

.faq-answer-enhanced a:hover {
    text-decoration: none;
}

/* Highlight Boxes */
.faq-highlight-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-radius: var(--radius-md);
    border-left: 4px solid #22c55e;
    margin-bottom: 1rem;
}

.faq-highlight-box svg {
    width: 22px;
    height: 22px;
    color: #22c55e;
    flex-shrink: 0;
}

.faq-highlight-box span {
    font-size: 0.95rem;
    color: var(--gray-800);
}

.faq-highlight-security {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-left-color: #10b981;
}

.faq-highlight-security svg {
    color: #10b981;
}

.faq-highlight-free {
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.08) 0%, rgba(139, 21, 56, 0.03) 100%);
    border-left-color: var(--primary-color);
}

.faq-highlight-free svg {
    color: var(--primary-color);
}

/* FAQ Sidebar */
.faq-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
}

.faq-sidebar-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(139, 21, 56, 0.05);
    border: 1px solid rgba(139, 21, 56, 0.05);
}

/* Help Card */
.faq-help-card {
    text-align: center;
}

.faq-help-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 25px rgba(139, 21, 56, 0.25);
}

.faq-help-icon svg {
    width: 28px;
    height: 28px;
    color: var(--white);
}

.faq-help-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.faq-help-card > p {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.faq-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--gradient-primary);
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: all var(--transition-base);
    margin-bottom: 1.25rem;
}

.faq-help-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 21, 56, 0.3);
}

.faq-help-btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base);
}

.faq-help-btn:hover svg {
    transform: translateX(4px);
}

.faq-help-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-100);
}

.faq-help-info span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.faq-help-info svg {
    width: 16px;
    height: 16px;
    color: var(--gray-400);
}

/* Stats Card */
.faq-stats-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    text-align: center;
}

.faq-stat-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.faq-stat-number {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
}

.faq-stat-label {
    font-size: 0.85rem;
    color: var(--gray-600);
}

/* Apply Card */
.faq-apply-card {
    background: var(--gradient-primary);
    text-align: center;
}

.faq-apply-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.faq-apply-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.faq-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--white);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: all var(--transition-base);
}

.faq-apply-btn:hover {
    background: var(--gradient-gold);
    color: var(--white);
    transform: translateY(-2px);
}

.faq-apply-btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base);
}

.faq-apply-btn:hover svg {
    transform: translateX(4px);
}

/* Legacy FAQ Styles (keep for compatibility) */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--spacing-sm);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast);
}

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

.faq-icon {
    flex-shrink: 0;
    transition: transform var(--transition-base);
    color: var(--primary-color);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding-bottom: var(--spacing-md);
}

.faq-answer p {
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
}

.faq-answer ul {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.faq-answer li {
    list-style: disc;
    color: var(--gray-700);
    margin-bottom: var(--spacing-xs);
}

.faq-cta {
    text-align: center;
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(212, 175, 55, 0.08) 100%);
    border-radius: 1.5rem;
    border: 2px solid rgba(139, 21, 56, 0.1);
}

.faq-cta h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.faq-cta p {
    color: var(--gray-600);
    margin-bottom: var(--spacing-lg);
}

/* FAQ Page Responsive */
@media (max-width: 1024px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .faq-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .faq-sidebar-card {
        flex: 1;
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .faq-quick-section {
        margin-top: -2rem;
    }
    
    .faq-quick-inner {
        padding: 1rem 1.25rem;
    }
    
    .faq-topics-label {
        display: none;
    }
    
    .faq-topic-pill {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .faq-section-enhanced {
        padding: 3rem 0 4rem;
    }
    
    .faq-category {
        padding: 1.5rem;
    }
    
    .faq-category-header {
        gap: 0.75rem;
    }
    
    .faq-category-icon {
        width: 40px;
        height: 40px;
    }
    
    .faq-category-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .faq-category-header h2 {
        font-size: 1.15rem;
    }
    
    .faq-question-enhanced {
        padding: 1rem 0;
        gap: 0.75rem;
    }
    
    .faq-q-icon {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .faq-question-enhanced span:not(.faq-q-icon) {
        font-size: 0.95rem;
    }
    
    .faq-answer-enhanced {
        padding-left: 2.5rem;
    }
    
    .faq-sidebar {
        flex-direction: column;
    }
    
    .faq-sidebar-card {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .faq-quick-section {
        margin-top: -1.5rem;
    }
    
    .faq-topics {
        gap: 0.5rem;
    }
    
    .faq-topic-pill {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .faq-category {
        padding: 1.25rem;
    }
    
    .faq-answer-enhanced {
        padding-left: 0;
    }
    
    .faq-highlight-box {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .faq-stat-item {
        padding: 0.6rem 0.75rem;
    }
    
    .faq-stat-number {
        font-size: 1.1rem;
    }
}

/* ============================================
   ABOUT PAGE - ENHANCED
   ============================================ */

/* About Page Header — match types.html: room for curve + overlapping stats bar */
.about-page-header {
    position: relative;
    overflow: hidden;
    padding-bottom: 8rem !important;
    min-height: 380px;
}

.about-page-header .container {
    position: relative;
    z-index: 10;
}

.about-page-header h1 {
    margin-bottom: 1rem;
}

.about-page-header p {
    margin-bottom: 4rem;
    font-size: 1.125rem;
    opacity: 0.95;
}

/* Stats Bar — same overlap + white fill as types.html .smart-bar-section */
.about-stats-bar {
    position: relative;
    z-index: 20;
    margin-top: -10rem;
    padding-bottom: 4rem;
    background: transparent;
    isolation: isolate;
}

.about-stats-bar .container {
    position: relative;
    z-index: 1;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

.about-stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: transparent;
    pointer-events: none;
    z-index: -1;
}

.about-stats-bar::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    pointer-events: none;
    z-index: -1;
}

.about-stats-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: min(56rem, 100%);
    margin: 0 auto;
    padding: clamp(1.1rem, 2.2vw, 1.65rem) clamp(0.75rem, 2vw, 1.5rem);
    background: var(--white);
    border-radius: var(--radius-lg);
    /* Downward-only feel: large blur + negative spread avoids a dark band on the hero above the card */
    box-shadow: 0 14px 28px -12px rgba(139, 21, 56, 0.12),
        0 4px 12px -4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(139, 21, 56, 0.06);
    box-sizing: border-box;
}

.about-stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
}

.about-stat-number {
    font-size: clamp(1.2rem, 2.8vw, 1.75rem);
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.about-stat-label {
    font-size: clamp(0.68rem, 1.5vw, 0.8rem);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    line-height: 1.35;
    max-width: 11rem;
    hyphens: auto;
}

.about-stat-divider {
    flex: 0 0 1px;
    width: 1px;
    align-self: center;
    min-height: 2.75rem;
    height: 55%;
    max-height: 3.25rem;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--gray-200) 20%,
        var(--gray-200) 80%,
        transparent 100%
    );
}

@media (max-width: 900px) {
    .about-page-header {
        padding-bottom: 7rem !important;
        min-height: 340px;
    }

    .about-page-header p {
        font-size: 1rem;
        padding: 0 1rem;
        margin-bottom: 3.5rem;
    }

    .about-page-header .header-curve {
        height: 50px;
    }

    .about-stats-bar {
        margin-top: -8rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 600px) {
    .about-page-header {
        padding-bottom: 6rem !important;
        min-height: 300px;
    }

    .about-page-header h1 {
        font-size: 1.75rem;
    }

    .about-page-header p {
        font-size: 0.95rem;
        margin-bottom: 3rem;
    }

    .about-page-header .header-curve {
        height: 35px;
    }

    .about-stats-bar {
        margin-top: -6rem;
    }
}

/* About Section Enhanced */
.about-section-enhanced {
    padding: 4rem 0 5rem;
    background: var(--cream);
}

/* Section Badge */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-light);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.section-badge svg {
    width: 18px;
    height: 18px;
}

.section-badge-light {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.section-badge-dark {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

/* About Intro */
.about-intro {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
}

.about-intro-content h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.text-primary {
    color: var(--primary-color);
}

.about-lead {
    font-size: 1.15rem;
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.about-intro-content p {
    color: var(--gray-600);
    line-height: 1.8;
}

.about-intro-visual {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-visual-card {
    background: var(--white);
    padding: 1.35rem 1.25rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(139, 21, 56, 0.06);
    border: 1px solid rgba(139, 21, 56, 0.05);
    transition: all var(--transition-base);
}

.about-visual-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.about-visual-card:hover {
    transform: translateX(-5px);
    box-shadow: 0 8px 30px rgba(139, 21, 56, 0.1);
}

.visual-card-icon {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.visual-card-icon svg {
    width: 28px;
    height: 28px;
    color: var(--white);
}

.visual-card-icon-gold {
    background: var(--gradient-gold);
}

.about-visual-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.25;
}

.about-visual-card p {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.45;
}

/* Mission Section */
.about-mission {
    background: var(--gradient-primary);
    padding: 4rem;
    border-radius: 2rem;
    margin-bottom: 5rem;
    position: relative;
    overflow: hidden;
}

.about-mission::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent);
    border-radius: 50%;
}

.about-mission-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem;
    position: relative;
    z-index: 1;
}

.about-mission-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
}

.about-mission-header p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
}

.mission-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.mission-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all var(--transition-base);
}

.mission-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.mission-card-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.mission-card-icon svg {
    width: 26px;
    height: 26px;
    color: var(--white);
}

.mission-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.mission-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}

/* Process Section */
.about-process {
    margin-bottom: 5rem;
}

.about-process-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.about-process-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

.about-process-header p {
    color: var(--gray-600);
    font-size: 1.1rem;
}

.process-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.process-step-enhanced {
    flex: 1;
    max-width: 250px;
    text-align: center;
    position: relative;
}

.process-step-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--gray-100);
    line-height: 1;
    margin-bottom: 1rem;
}

.process-step-content {
    background: var(--white);
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(139, 21, 56, 0.06);
    border: 1px solid rgba(139, 21, 56, 0.05);
    transition: all var(--transition-base);
}

.process-step-enhanced:hover .process-step-content {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(139, 21, 56, 0.1);
}

.process-step-enhanced:hover .process-step-number {
    color: rgba(139, 21, 56, 0.15);
}

.process-step-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.process-step-icon svg {
    width: 24px;
    height: 24px;
    color: var(--white);
}

.process-step-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.process-step-content p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

.process-connector {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--gray-200), var(--gray-300), var(--gray-200));
    margin-top: 5rem;
    flex-shrink: 0;
}

/* Values Section */
.about-values {
    margin-bottom: 5rem;
}

.about-values-header {
    text-align: center;
    max-width: 500px;
    margin: 0 auto 3rem;
}

.about-values-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
}

.values-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.value-card-enhanced {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 4px 20px rgba(139, 21, 56, 0.05);
    border: 1px solid rgba(139, 21, 56, 0.05);
    position: relative;
    transition: all var(--transition-base);
}

.value-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(139, 21, 56, 0.1);
}

.value-card-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    font-weight: 900;
    color: var(--gray-100);
    line-height: 1;
}

.value-card-enhanced:hover .value-card-number {
    color: rgba(139, 21, 56, 0.1);
}

.value-card-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.2);
}

.value-card-icon svg {
    width: 28px;
    height: 28px;
    color: var(--white);
}

.value-card-enhanced h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.value-card-enhanced p {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

/* Transparency Section */
.about-transparency {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 3rem;
    align-items: center;
    background: linear-gradient(135deg, #1a0a10 0%, #3d1525 50%, #2d1018 100%);
    padding: 3rem;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
}

.about-transparency::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent);
    border-radius: 50%;
}

.transparency-content {
    position: relative;
    z-index: 1;
}

.transparency-content h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
}

.transparency-content > p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.transparency-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.transparency-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.transparency-list li svg {
    width: 20px;
    height: 20px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.transparency-list li span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

.transparency-list li strong {
    color: var(--white);
}

.transparency-visual {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.trust-badge-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.trust-badge-large svg {
    width: 80px;
    height: 80px;
    color: var(--accent-gold);
}

.trust-badge-large span {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
}

/* About CTA Section */
.about-cta-section {
    padding: 5rem 0;
    background: var(--white);
    position: relative;
    overflow: hidden;
}

.about-cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.about-cta-shape {
    position: absolute;
    border-radius: 50%;
    animation: ctaFloat 20s ease-in-out infinite;
}

.about-cta-shape-1 {
    width: 400px;
    height: 400px;
    top: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.08), transparent);
}

.about-cta-shape-2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -50px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent);
    animation-delay: 10s;
}

.about-cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.about-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--primary-light);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.about-cta-badge svg {
    width: 18px;
    height: 18px;
}

.about-cta-content h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.about-cta-content > p {
    font-size: 1.15rem;
    color: var(--gray-600);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.about-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-about-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--gradient-primary);
    color: var(--white);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 50px;
    transition: all var(--transition-base);
    box-shadow: 0 8px 25px rgba(139, 21, 56, 0.25);
}

.btn-about-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(139, 21, 56, 0.35);
}

.btn-about-primary svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.btn-about-primary:hover svg {
    transform: translateX(4px);
}

.btn-about-secondary {
    padding: 1rem 2rem;
    background: transparent;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 1.05rem;
    border: 2px solid var(--gray-300);
    border-radius: 50px;
    transition: all var(--transition-base);
}

.btn-about-secondary:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.about-cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.about-cta-trust span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.about-cta-trust svg {
    width: 18px;
    height: 18px;
    color: #22c55e;
}

/* About Page Responsive */
@media (max-width: 1024px) {
    .about-intro {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-intro-visual {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .about-visual-card {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: min(100%, 240px);
    }

    .mission-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-timeline {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    
    .process-connector {
        display: none;
    }
    
    .process-step-enhanced {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: none;
    }
    
    .values-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-transparency {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .transparency-list li {
        justify-content: center;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .about-stats-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 0.75rem;
        padding: 1.25rem 1rem;
        max-width: 100%;
    }

    .about-stat-divider {
        display: none;
    }

    .about-stat {
        flex: none;
        min-width: 0;
        padding: 0.85rem 0.65rem;
        background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 248, 250, 0.95) 100%);
        border: 1px solid rgba(139, 21, 56, 0.08);
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(139, 21, 56, 0.04);
    }

    .about-stat-number {
        font-size: 1.4rem;
    }

    .about-stat-label {
        max-width: none;
        font-size: 0.72rem;
        letter-spacing: 0.05em;
    }

    .about-section-enhanced {
        padding: 3rem 0 4rem;
    }
    
    .about-intro-content h2,
    .about-mission-header h2,
    .about-process-header h2,
    .about-values-header h2 {
        font-size: 1.75rem;
    }
    
    .about-intro-visual {
        flex-direction: column;
    }
    
    .about-mission {
        padding: 2.5rem 1.5rem;
    }
    
    .mission-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .mission-card {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .mission-card-icon {
        margin: 0;
    }
    
    .process-step-enhanced {
        flex: 0 0 100%;
    }
    
    .process-step-number {
        font-size: 2.5rem;
    }
    
    .values-grid-enhanced {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .value-card-enhanced {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .value-card-icon {
        margin: 0;
        flex-shrink: 0;
    }
    
    .value-card-number {
        display: none;
    }
    
    .about-transparency {
        padding: 2rem 1.5rem;
    }
    
    .transparency-content h2 {
        font-size: 1.5rem;
    }
    
    .trust-badge-large {
        padding: 1.5rem;
    }
    
    .trust-badge-large svg {
        width: 60px;
        height: 60px;
    }
    
    .about-cta-section {
        padding: 3rem 0;
    }
    
    .about-cta-content h2 {
        font-size: 1.75rem;
    }
    
    .about-cta-actions {
        flex-direction: column;
    }
    
    .btn-about-primary,
    .btn-about-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .about-cta-trust {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .about-stats-inner {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 0.5rem;
        padding: 1rem 0.75rem;
    }

    .about-stat {
        padding: 0.75rem 0.5rem;
        gap: 0.3rem;
    }

    .about-stat-number {
        font-size: 1.2rem;
    }

    .about-stat-label {
        font-size: 0.66rem;
        line-height: 1.3;
    }

    .about-visual-card {
        padding: 1.25rem;
    }
    
    .visual-card-icon {
        width: 48px;
        height: 48px;
    }
    
    .visual-card-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .about-mission {
        padding: 2rem 1.25rem;
        border-radius: 1.5rem;
    }
    
    .process-step-content {
        padding: 1.25rem;
    }
    
    .value-card-enhanced {
        padding: 1.25rem;
    }
    
    .value-card-icon {
        width: 50px;
        height: 50px;
    }
    
    .about-transparency {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }
    
    .transparency-list li span {
        font-size: 0.9rem;
    }
    
    .about-cta-content h2 {
        font-size: 1.5rem;
    }
    
    .about-cta-trust span {
        font-size: 0.8rem;
    }
}

/* ============================================
   LOAN TYPES PAGE - ENHANCED
   ============================================ */

/* Types Page Header */
.types-page-header {
    position: relative;
    overflow: hidden;
}

/* Stats Bar */
.types-stats-bar {
    background: var(--white);
    padding: 0;
    margin-top: -3rem;
    position: relative;
    z-index: 10;
}

.stats-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(139, 21, 56, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--gray-200);
}

/* Loan Types Section */
.loan-types-section {
    padding: 4rem 0 5rem;
    background: var(--cream);
}

.section-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.section-intro h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

.section-intro p {
    color: var(--gray-600);
    font-size: 1.1rem;
}

/* Enhanced Loan Cards Grid */
.loan-types-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Loan Card */
.loan-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    border: 1px solid rgba(139, 21, 56, 0.08);
    box-shadow: 0 4px 20px rgba(139, 21, 56, 0.05);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
}

.loan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(139, 21, 56, 0.12);
    border-color: rgba(139, 21, 56, 0.15);
}

/* Featured Card */
.loan-card-featured {
    grid-column: span 1;
    background: linear-gradient(135deg, var(--white) 0%, rgba(139, 21, 56, 0.02) 100%);
    border: 2px solid var(--primary-color);
}

.loan-card-badge {
    position: absolute;
    top: -12px;
    right: 1.5rem;
    background: var(--gradient-primary);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.3);
}

/* Card Header */
.loan-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.loan-card-icon {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(139, 21, 56, 0.25);
}

.loan-card-icon svg {
    width: 28px;
    height: 28px;
    color: var(--white);
}

/* Icon Color Variants */
.loan-card-icon-urgent {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

.loan-card-icon-consolidation {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

.loan-card-icon-medical {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.loan-card-icon-auto {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

.loan-card-icon-home {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.loan-card-title h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.loan-amount-tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* Card Description */
.loan-card-desc {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* Card Features */
.loan-card-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.loan-card-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.loan-card-features li svg {
    width: 18px;
    height: 18px;
    color: #22c55e;
    flex-shrink: 0;
}

/* Card Button */
.loan-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--gradient-primary);
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: all var(--transition-base);
    margin-top: auto;
}

.loan-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 21, 56, 0.3);
}

.loan-card-btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base);
}

.loan-card-btn:hover svg {
    transform: translateX(4px);
}

/* Choose Loan Section */
.choose-loan-section {
    padding: 5rem 0;
    background: var(--white);
}

.choose-loan-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-light);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.section-badge svg {
    width: 18px;
    height: 18px;
}

.choose-loan-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

.choose-loan-header p {
    color: var(--gray-600);
    font-size: 1.1rem;
}

/* Choose Loan Grid */
.choose-loan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.choose-card {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: relative;
    transition: all var(--transition-base);
    border: 1px solid transparent;
}

.choose-card:hover {
    background: var(--white);
    border-color: var(--gray-200);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.choose-card-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--gray-100);
    line-height: 1;
}

.choose-card:hover .choose-card-number {
    color: rgba(139, 21, 56, 0.1);
}

.choose-card-icon {
    width: 50px;
    height: 50px;
    background: var(--white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.choose-card:hover .choose-card-icon {
    background: var(--gradient-primary);
}

.choose-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
    transition: color var(--transition-base);
}

.choose-card:hover .choose-card-icon svg {
    color: var(--white);
}

.choose-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.choose-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Types CTA Section */
.types-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #1a0a10 0%, #3d1525 50%, #2d1018 100%);
    position: relative;
    overflow: hidden;
}

.types-cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.types-cta-shape {
    position: absolute;
    border-radius: 50%;
    animation: ctaFloat 20s ease-in-out infinite;
}

.types-cta-shape-1 {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent);
}

.types-cta-shape-2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.2), transparent);
    animation-delay: 10s;
}

.types-cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.types-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
    backdrop-filter: blur(10px);
    margin-bottom: var(--spacing-md);
}

.types-cta-badge svg {
    width: 18px;
    height: 18px;
    color: var(--accent-gold);
}

.types-cta-content h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--white);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.text-gold {
    color: var(--accent-gold);
}

.types-cta-content > p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.types-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--white);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 50px;
    transition: all var(--transition-base);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-cta-primary:hover {
    background: var(--gradient-gold);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.btn-cta-primary svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base);
}

.btn-cta-primary:hover svg {
    transform: translateX(4px);
}

.btn-cta-secondary {
    padding: 1rem 2rem;
    background: transparent;
    color: var(--white);
    font-weight: 600;
    font-size: 1.05rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    transition: all var(--transition-base);
}

.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.types-cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.types-cta-trust span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.types-cta-trust svg {
    width: 18px;
    height: 18px;
    color: #22c55e;
}

/* Responsive Styles for Loan Types */
@media (max-width: 1024px) {
    .loan-types-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .choose-loan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-bar-inner {
        gap: 1.5rem;
        padding: 1.25rem 1.5rem;
    }
    
    .stat-number {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .types-stats-bar {
        margin-top: -2rem;
    }
    
    .stats-bar-inner {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
    }
    
    .stat-item {
        flex: 1;
        min-width: 80px;
    }
    
    .stat-divider {
        display: none;
    }
    
    .stat-number {
        font-size: 1.1rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
    
    .loan-types-section {
        padding: 3rem 0 4rem;
    }
    
    .section-intro h2,
    .choose-loan-header h2 {
        font-size: 1.75rem;
    }
    
    .loan-types-grid-enhanced {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .loan-card {
        padding: 1.5rem;
    }
    
    .loan-card-featured {
        grid-column: span 1;
    }
    
    .choose-loan-section {
        padding: 3rem 0;
    }
    
    .choose-loan-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .choose-card {
        padding: 1.5rem;
    }
    
    .types-cta-section {
        padding: 3rem 0;
    }
    
    .types-cta-content h2 {
        font-size: 1.75rem;
    }
    
    .types-cta-actions {
        flex-direction: column;
    }
    
    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .types-cta-trust {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .types-stats-bar {
        margin-top: -1.5rem;
    }
    
    .stats-bar-inner {
        padding: 0.875rem;
    }
    
    .stat-item {
        min-width: 70px;
    }
    
    .stat-number {
        font-size: 1rem;
    }
    
    .loan-card {
        padding: 1.25rem;
    }
    
    .loan-card-icon {
        width: 48px;
        height: 48px;
    }
    
    .loan-card-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .loan-card-title h3 {
        font-size: 1.1rem;
    }
    
    .loan-card-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    .choose-card-number {
        font-size: 2rem;
    }
    
    .types-cta-content h2 {
        font-size: 1.5rem;
    }
    
    .types-cta-content > p {
        font-size: 1rem;
    }
    
    .types-cta-trust span {
        font-size: 0.8rem;
    }
}

/* ============================================
   APPLICATION PAGE
   ============================================ */

/*
 * Application page doesn't have a page-header,
 * so it needs top padding for the floating header
 */
.application-section {
    /* Top padding: header height + top margin + breathing room */
    padding: 7rem 0 var(--spacing-2xl);
    background-color: var(--gray-50);
    min-height: 100vh;
}

.application-container {
    max-width: 800px;
    margin: 0 auto;
}

.application-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.application-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

.application-header p {
    font-size: 1.125rem;
    color: var(--gray-600);
}

.summary-box {
    background: linear-gradient(135deg, var(--white) 0%, var(--primary-light) 100%);
    border: 2px solid var(--primary-color);
    border-radius: 1.25rem;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.12);
}

.summary-box h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.summary-item {
    padding: var(--spacing-sm);
}

.summary-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
}

.summary-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
}

.complete-application-form {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

.form-section {
    margin-bottom: var(--spacing-lg);
}

.form-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--gray-200);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.disclaimer-box {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-left: 4px solid var(--primary-color);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.disclaimer-box h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.disclaimer-box ul {
    padding-left: var(--spacing-lg);
}

.disclaimer-box li {
    list-style: disc;
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

/* ============================================
   SUCCESS STATE
   ============================================ */
.success-container {
    max-width: 700px;
    margin: 0 auto;
}

.success-content {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.success-icon {
    width: 110px;
    height: 110px;
    margin: 0 auto var(--spacing-lg);
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.success-icon svg {
    color: var(--white);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.success-content h1 {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.success-message {
    font-size: 1.125rem;
    color: var(--gray-600);
    margin-bottom: var(--spacing-xl);
}

.next-steps {
    margin: var(--spacing-xl) 0;
    text-align: left;
}

.next-steps h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.steps-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.step-item {
    display: flex;
    gap: var(--spacing-md);
}

.success-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.success-note {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background-color: var(--gray-50);
    border-radius: var(--radius-md);
}

.success-note p {
    font-size: 0.875rem;
    color: var(--gray-700);
    margin: 0;
}

/* ============================================
   CONTACT PAGE - ENHANCED
   ============================================ */

/* Page Header Enhancements for Contact */
.contact-page-header {
    position: relative;
    overflow: hidden;
}

.page-header-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Animated Shapes */
.page-header-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: pageHeaderFloat 20s ease-in-out infinite;
}

.page-header-shape-1 {
    width: 400px;
    height: 400px;
    top: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent);
    animation-delay: 0s;
}

.page-header-shape-2 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -50px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
    animation-delay: 7s;
}

.page-header-shape-3 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 60%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);
    animation-delay: 14s;
}

@keyframes pageHeaderFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -20px) scale(1.1);
    }
}

/* Floating Icons in Header */
.page-header-icons {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ph-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    color: rgba(255, 255, 255, 0.12);
    animation: phIconFloat 25s ease-in-out infinite;
}

.ph-icon svg {
    width: 100%;
    height: 100%;
}

.ph-icon-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.ph-icon-2 {
    top: 60%;
    right: 15%;
    animation-delay: 8s;
}

.ph-icon-3 {
    bottom: 20%;
    left: 25%;
    animation-delay: 16s;
}

@keyframes phIconFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.12;
    }
    25% {
        transform: translate(10px, -15px) rotate(5deg);
        opacity: 0.18;
    }
    50% {
        transform: translate(-10px, 10px) rotate(-5deg);
        opacity: 0.1;
    }
    75% {
        transform: translate(15px, 5px) rotate(3deg);
        opacity: 0.15;
    }
}

/* Page Header Badge */
.page-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--white);
    backdrop-filter: blur(10px);
    margin-bottom: 2rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.page-header-badge svg {
    width: 16px;
    height: 16px;
    color: var(--accent-gold);
}

/* Text Highlight */
.text-highlight {
    position: relative;
    color: var(--accent-gold);
}

.text-highlight::after {
    content: '';
    position: absolute;
    bottom: 0.1em;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-gold);
    border-radius: 2px;
    opacity: 0.4;
}

/* Contact Section Enhanced */
.contact-section-enhanced {
    padding: 4rem 0 6rem;
    background: var(--cream);
}

/* Contact page — info cards (NOT mega-menu; those use .mega-menu-contact .contact-card) */
.contact-cards-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    margin-bottom: 4rem;
    margin-top: -5rem;
    position: relative;
    z-index: 10;
    padding: 0;
}

.contact-cards-row .contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--white);
    padding: 1.75rem 1.35rem 1.6rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(139, 21, 56, 0.08);
    border: 1px solid rgba(139, 21, 56, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 0;
}

.contact-cards-row .contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(139, 21, 56, 0.12);
}

.contact-cards-row .contact-card-icon {
    width: 56px;
    height: 56px;
    margin: 0 0 1rem 0;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.1) 0%, rgba(196, 30, 58, 0.08) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(139, 21, 56, 0.12);
    border: 1px solid rgba(139, 21, 56, 0.08);
}

.contact-cards-row .contact-card-icon svg {
    width: 26px;
    height: 26px;
    color: var(--primary-color);
    stroke: var(--primary-color);
}

.contact-cards-row .contact-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
}

.contact-cards-row .contact-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.contact-cards-row .contact-card-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.45;
    word-break: break-word;
}

.contact-cards-row .contact-card-note {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    margin: 0.15rem 0 0;
    line-height: 1.45;
    max-width: 18rem;
}

/* Main Contact Wrapper */
.contact-main-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Enhanced Contact Form */
.contact-form-enhanced {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(139, 21, 56, 0.08);
    border: 1px solid rgba(139, 21, 56, 0.05);
}

.form-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.form-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-xs);
}

.form-header p {
    color: var(--gray-600);
    font-size: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.contact-form .form-group {
    margin-bottom: var(--spacing-md);
}

.contact-form .form-input {
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-size: 1rem;
    transition: all var(--transition-base);
}

.contact-form .form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(139, 21, 56, 0.1);
}

.contact-form .form-input::placeholder {
    color: var(--gray-400);
}

.contact-form .form-actions {
    margin-top: var(--spacing-lg);
}

.contact-form .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: 50px;
    width: 100%;
    justify-content: center;
}

.contact-form .btn-primary svg {
    transition: transform var(--transition-base);
}

.contact-form .btn-primary:hover svg {
    transform: translateX(5px);
}

/* Contact Success */
.contact-success {
    text-align: center;
    padding: 3rem;
}

.contact-success .success-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--spacing-lg);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3);
}

.contact-success .success-icon svg {
    color: var(--white);
    width: 50px;
    height: 50px;
}

.contact-success h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

.contact-success p {
    color: var(--gray-600);
    margin-bottom: var(--spacing-lg);
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.sidebar-card {
    background: var(--white);
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 25px rgba(139, 21, 56, 0.06);
    border: 1px solid rgba(139, 21, 56, 0.05);
}

.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--gray-100);
}

.sidebar-card-header svg {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}

.sidebar-card-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

/* FAQ Preview Card */
.faq-preview-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.faq-preview-list li a {
    display: block;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    font-size: 0.9rem;
    transition: all var(--transition-base);
    border-left: 3px solid transparent;
}

.faq-preview-list li a:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    transform: translateX(3px);
}

.sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-base);
}

.sidebar-link:hover {
    gap: 0.75rem;
}

.sidebar-link svg {
    transition: transform var(--transition-base);
}

.sidebar-link:hover svg {
    transform: translateX(3px);
}

/* Trust Card */
.trust-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.trust-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.trust-list li svg {
    width: 20px;
    height: 20px;
    color: #22c55e;
    flex-shrink: 0;
}

.trust-list li span {
    color: var(--gray-700);
    font-size: 0.95rem;
}

/* Quick Links Card */
.quick-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.quick-links-list li a {
    display: block;
    padding: 0.6rem 0;
    color: var(--gray-600);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--gray-100);
    transition: all var(--transition-base);
}

.quick-links-list li:last-child a {
    border-bottom: none;
}

.quick-links-list li a:hover {
    color: var(--primary-color);
    padding-left: 0.5rem;
}

/* Responsive Styles for Contact Page */
@media (max-width: 1024px) {
    .contact-cards-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: -3.5rem;
        margin-bottom: 3rem;
    }

    .contact-cards-row .contact-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 1.35rem 1.25rem;
        gap: 1.1rem;
    }

    .contact-cards-row .contact-card-icon {
        margin: 0;
    }

    .contact-cards-row .contact-card-body {
        align-items: flex-start;
        text-align: left;
        max-width: none;
        flex: 1;
        min-width: 0;
    }

    .contact-main-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-card {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .contact-cards-row {
        margin-top: -3rem;
        gap: 0.85rem;
        padding: 0 0.25rem;
    }

    .contact-cards-row .contact-card {
        flex-direction: row;
        align-items: center;
        padding: 1.2rem 1.1rem;
        gap: 1rem;
    }

    .contact-cards-row .contact-card-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .contact-cards-row .contact-card-icon svg {
        width: 24px;
        height: 24px;
    }

    .contact-cards-row .contact-card-body {
        gap: 0.35rem;
    }

    .contact-cards-row .contact-card h3 {
        font-size: 1rem;
    }

    .contact-cards-row .contact-card-value {
        font-size: 0.92rem;
    }

    .contact-cards-row .contact-card-note {
        font-size: 0.78rem;
        max-width: none;
        margin-top: 0.1rem;
    }

    .contact-form-enhanced {
        padding: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        flex-direction: column;
    }

    .sidebar-card {
        min-width: 100%;
    }

    .page-header-icons {
        display: none;
    }

    .page-header-shape-1 {
        width: 250px;
        height: 250px;
    }

    .page-header-shape-2 {
        width: 200px;
        height: 200px;
    }

    .page-header-shape-3 {
        display: none;
    }
}

@media (max-width: 480px) {
    .contact-section-enhanced {
        padding: 2rem 0 4rem;
    }

    .contact-section-enhanced .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .contact-cards-row {
        margin-top: -2.25rem;
        gap: 0.75rem;
        padding: 0;
    }

    .contact-cards-row .contact-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.35rem 1rem 1.25rem;
        gap: 0.65rem;
    }

    .contact-cards-row .contact-card-icon {
        width: 50px;
        height: 50px;
        margin: 0 0 0.15rem 0;
    }

    .contact-cards-row .contact-card-icon svg {
        width: 22px;
        height: 22px;
    }

    .contact-cards-row .contact-card-body {
        align-items: center;
        text-align: center;
    }

    .contact-cards-row .contact-card h3 {
        font-size: 0.98rem;
    }

    .contact-cards-row .contact-card-value {
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .contact-cards-row .contact-card-note {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .contact-form-enhanced {
        padding: 1.25rem;
    }

    .form-header h2 {
        font-size: 1.5rem;
    }

    .contact-form .btn-primary {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-summary {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-left: 4px solid var(--primary-color);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 4px 12px rgba(139, 21, 56, 0.08);
}

.legal-summary h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.legal-summary p {
    color: var(--gray-700);
    margin-bottom: var(--spacing-md);
}

.legal-summary ul {
    padding-left: var(--spacing-lg);
}

.legal-summary li {
    list-style: disc;
    color: var(--gray-700);
    margin-bottom: var(--spacing-xs);
    line-height: 1.8;
}

.legal-section {
    margin-bottom: var(--spacing-xl);
}

.legal-section h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.legal-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.legal-section p {
    color: var(--gray-700);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.legal-section ul,
.legal-section ol {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.legal-section li {
    list-style: disc;
    color: var(--gray-700);
    margin-bottom: var(--spacing-xs);
    line-height: 1.8;
}

.legal-section ol li {
    list-style: decimal;
}

.legal-acknowledgment {
    background-color: var(--gray-50);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-xl);
}

.legal-acknowledgment p {
    color: var(--gray-900);
    margin: 0;
    text-align: center;
}

.example-box {
    background-color: var(--gray-50);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

.example-box p {
    margin-bottom: var(--spacing-xs);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .header {
        width: calc(100% - 2rem);
        top: 0.75rem;
    }

    .hero {
        /* Adjusted for tablet - header + spacing */
        padding: 7rem 0 4rem;
    }

    .hero-logo-watermark {
        left: 25%;
        opacity: 0.06;
    }

    .hero-logo-watermark img {
        width: 280px;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-content {
        text-align: center;
        max-width: 100%;
    }
    
    .hero-badge {
        justify-content: center;
    }
    
    .form-card {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        justify-self: center;
    }
    
}

@media (max-width: 768px) {
    :root {
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
    }

    html {
        scroll-behavior: auto !important;
    }

    .header,
    .header.scrolled {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(253, 252, 251, 0.97) !important;
    }

    .header-glow {
        display: none !important;
    }

    .hero-background .hero-gradient-orb,
    .hero-background .particles,
    .hero-background .family-silhouettes,
    .hero-background .financial-icons,
    .hero-background .money-elements {
        display: none !important;
    }

    .hero-background .mesh-gradient {
        animation: none !important;
        transform: none !important;
        opacity: 0.65;
    }

    .hero-badge,
    .hero-title,
    .hero-subheading,
    .hero-stats-trio,
    .form-card,
    .rotating-text {
        will-change: auto;
    }

    .hero-checklist.hero-checklist-v2 {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.94);
    }

    .hero-badge.hero-badge-v2 {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .header {
        /*
         * CRITICAL FIX: Remove transform on mobile.
         * The desktop header uses left:50% + transform:translateX(-50%) to centre.
         * Any element with a CSS transform becomes the containing block for
         * position:fixed descendants (CSS spec §9.3).  That breaks the mobile
         * nav-menu (position:fixed; top:70px; left:0; right:0) — it ends up
         * anchored to the header pill instead of the viewport.
         * On mobile the header is full-width minus margins, so we can centre it
         * with left/right instead of transform, keeping identical visuals while
         * restoring viewport-relative fixed positioning for the nav-menu.
         */
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        transform: none;
        top: 0.5rem;
        border-radius: 16px;
    }

    .hero {
        /* Adjusted for mobile - smaller header */
        padding: 6rem 0 3rem;
    }

    .nav-container {
        padding: 0.75rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .logo {
        flex: 0 0 auto;
    }

    .logo a {
        font-size: 1.5rem;
    }

    .logo a img {
        height: 45px;
    }

    .nav-menu {
        position: fixed;
        /* Sit just below the tallest possible header pill on mobile.
           Header is ~0.5rem from top + ~65px tall = ~73px.
           74px gives a 1px breathing gap. */
        top: 74px;
        left: 0.75rem;
        right: 0.75rem;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(253, 252, 251, 0.97) 0%, rgba(255, 245, 247, 0.97) 50%, rgba(254, 248, 243, 0.97) 100%);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(139, 21, 56, 0.1);
        flex-direction: column;
        padding: var(--spacing-lg);
        box-shadow: 0 8px 32px rgba(139, 21, 56, 0.15);
        /* Slide down from above and fade — no translateX needed here */
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.3s;
        gap: var(--spacing-sm);
        z-index: 999;
        display: flex;
        max-height: calc(100dvh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0s;
    }
    
    .nav-menu li {
        width: 100%;
    }

    .nav-link {
        width: 100%;
        padding: 0.75rem 0;
        text-align: center;
    }

    /* Dropdown Menu Mobile Styles */
    .has-dropdown > .nav-link {
        justify-content: center;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        margin-top: 0.5rem;
        box-shadow: none;
        background: rgba(139, 21, 56, 0.05);
        border: 1px solid rgba(139, 21, 56, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0;
        min-width: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /*
     * Mobile dropdown open state — driven by .active class only.
     * IMPORTANT: do NOT include :hover on mobile. Touch devices trigger a
     * sticky :hover on tap that persists until the user taps elsewhere.
     * Combined with our toggle JS, that made the dropdown impossible to
     * collapse — the .active class would correctly toggle off, but :hover
     * kept the max-height open. Class-only rule below is the fix.
     */
    .has-dropdown.active .dropdown-menu:not(.mega-menu) {
        max-height: 900px;
        padding: 0.75rem 0;
    }

    .has-dropdown.active .mega-menu {
        max-height: 900px;
        padding: 0 !important;
    }

    /* Only apply first-child link styles to non-mega dropdowns */
    .dropdown-menu:not(.mega-menu) li:first-child {
        grid-column: auto;
        margin-bottom: 0;
    }

    .dropdown-menu:not(.mega-menu) li:first-child .dropdown-link {
        background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
        color: white;
        margin-bottom: 0.5rem;
    }

    .dropdown-link {
        color: #374151;
        text-align: center;
        justify-content: center;
        transform: none !important;
        padding: 0.75rem 1rem;
    }

    .dropdown-link::before {
        display: none;
    }

    .dropdown-link::after {
        display: none;
    }

    .dropdown-link:hover {
        background: rgba(139, 21, 56, 0.08);
        color: var(--primary-color);
        transform: none !important;
    }

    .dropdown-divider {
        display: none;
    }

    /* Blog Dropdown Mobile Styles */
    .dropdown-menu-blogs {
        min-width: auto;
        max-width: none;
    }

    .blog-dropdown-header {
        border-radius: 8px;
        margin-bottom: 0.5rem !important;
        padding: 0.75rem 1rem;
    }

    .blog-dropdown-header span {
        font-size: 0.85rem;
    }

    .view-all-link {
        font-size: 0.75rem;
    }

    .blog-card-link {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }

    .blog-card-link:hover {
        transform: none;
    }

    .blog-card-icon {
        width: 40px;
        height: 40px;
    }

    .blog-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .blog-card-content h4 {
        font-size: 0.9rem;
    }

    .blog-card-content p {
        font-size: 0.75rem;
    }

    .mobile-menu-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
    }

    .desktop-apply {
        display: none;
    }

    .mobile-apply-item {
        display: block;
        width: 100%;
        margin-top: var(--spacing-sm);
    }

    .mobile-apply-item .nav-cta {
        margin: 0;
        width: 100%;
    }

    .nav-cta {
        margin-left: 0;
        width: 100%;
        margin-top: var(--spacing-sm);
        text-align: center;
        justify-content: center;
    }

    .nav-cta svg {
        display: none;
    }

    .nav-cta .mobile-text {
        display: inline;
    }

    .nav-cta .desktop-text {
        display: none;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .page-header {
        /* Adjusted for tablet floating header */
        padding: 6rem 0 3rem;
    }

    .page-header-badge {
        margin-bottom: 1.75rem;
        margin-top: 0.85rem;
    }

    .page-header h1 {
        font-size: 2.25rem;
        margin-top: 0;
    }

    .page-header p {
        font-size: 1.125rem;
    }
    
    .application-section {
        padding-top: 6rem;
    }

    body.apply-page .header-glow {
        display: none;
    }

    body.apply-page .header {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
    }

    body.apply-page .nav-container {
        justify-content: center;
        padding: 0.5rem 1rem;
    }

    body.apply-page .nav-menu,
    body.apply-page .desktop-apply,
    body.apply-page .mobile-quick-apply,
    body.apply-page .mobile-menu-toggle,
    body.apply-page .mobile-menu-backdrop {
        display: none !important;
    }

    body.apply-page .logo a {
        background: none;
        -webkit-text-fill-color: inherit;
        -webkit-background-clip: border-box;
        background-clip: border-box;
    }
    
    .hero-title {
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
    }
    
    .hero-subtitle {
        font-size: 1.0625rem;
        margin-bottom: 2rem;
    }
    
    .trust-pills {
        justify-content: center;
        margin-top: 1.5rem;
    }
    
    /* Features Section - Tablet */
    .section-header {
        margin-bottom: 3rem;
    }
    
    .section-title {
        font-size: 2.25rem;
        margin-bottom: var(--spacing-lg);
    }
    
    .section-subtitle {
        font-size: 1rem;
    }

    .features {
        padding: 4rem 0;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 2rem;
        transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .feature-number {
        font-size: 2.5rem;
        top: 1.25rem;
        right: 1.25rem;
    }
    
    .trust-banner {
        flex-direction: column;
        gap: 1rem;
        border-radius: 1.5rem;
        padding: 1.5rem;
    }
    
    .option-cards {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .loan-types-grid {
        grid-template-columns: 1fr;
    }
    
    .success-actions {
        flex-direction: column;
    }
    
    .success-actions .btn {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .footer-col ul {
        align-items: center;
    }

    /* Hide decorative elements on mobile for better focus */
    .financial-icons, .money-elements {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .header {
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        transform: none;
        top: 0.5rem;
        border-radius: 15px;
    }

    .nav-menu {
        left: 0.5rem;
        right: 0.5rem;
        top: 68px;
        border-radius: 14px;
    }

    .nav-container {
        padding: 0.6rem 1rem;
    }

    .logo a {
        font-size: 1.35rem;
    }

    .logo a img {
        height: 45px;
    }

    .hero {
        /* Smaller header on mobile */
        padding-top: 5.5rem;
    }

    .hero-logo-watermark {
        display: none; /* Hide on mobile for cleaner look */
    }
    
    /* Page header spacing for mobile */
    .page-header {
        padding: 5.5rem 0 2.5rem;
    }
    
    .page-header-badge {
        margin-bottom: 1.5rem;
        margin-top: 0.75rem;
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }
    
    .page-header h1 {
        font-size: 1.75rem;
        margin-top: 0;
    }
    
    .page-header p {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    /* Application page mobile */
    .application-section {
        padding-top: 5.5rem;
    }

    .hero-title {
        font-size: 2rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-bottom: 1rem;
        line-height: 1.25;
    }
    
    /* Adjust underline for mobile */
    .rotating-text::after {
        bottom: -1px;
        height: 3px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        line-height: 1.7;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    .trust-pills {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1.5rem;
    }
    
    .trust-pill {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
        gap: 0.5rem;
    }

    .trust-pill svg {
        width: 18px;
        height: 18px;
    }

    /* Features Section - Mobile */
    .section-header {
        margin-bottom: 2rem;
    }
    
    .section-badge {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-subtitle {
        font-size: 0.9375rem;
    }
    
    .features {
        padding: 3rem 0;
    }
    
    .feature-card {
        padding: 1.5rem;
    }
    
    .feature-number {
        font-size: 2rem;
        top: 1rem;
        right: 1rem;
    }
    
    .feature-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 1.25rem;
    }
    
    .feature-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .feature-card h3 {
        font-size: 1.25rem;
    }
    
    .feature-card p {
        font-size: 0.9375rem;
        margin-bottom: 1.25rem;
    }
    
    .feature-stat {
        padding-top: 1rem;
    }
    
    .feature-stat .stat-value {
        font-size: 1.25rem;
    }
    
    .feature-stat .stat-desc {
        font-size: 0.8125rem;
    }
    
    .trust-banner {
        margin-top: 2.5rem;
        padding: 1.25rem;
        gap: 0.75rem;
    }
    
    .trust-banner-item {
        font-size: 0.875rem;
    }
    
    .trust-banner-item svg {
        width: 20px;
        height: 20px;
    }

    .trust-pill:nth-child(3) {
        display: none;
    }
    
    .form-card {
        border-radius: 1.25rem;
    }
    
    .form-header-modern {
        padding: 1.5rem 1rem 1rem;
    }
    
    .form-header-modern h2 {
        font-size: 1.25rem;
    }
    
    .form-stats-bottom {
        padding: 1rem 0;
        gap: 0.5rem;
    }

    .form-stats-bottom .stat-divider {
        display: none;
    }

    .form-stats-bottom .stat-item {
        flex: 1;
        text-align: center;
    }
    
    .form-stats-bottom .stat-number {
        font-size: 0.875rem;
    }
    
    .form-stats-bottom .stat-label {
        font-size: 0.625rem;
    }
    
    .loan-form-modern {
        padding: 1.25rem 1rem;
    }
    
    .amount-display {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .amount-value {
        font-size: 2.25rem;
    }
    
    .amount-quick-select {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .quick-amount {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
        flex: 1 1 calc(33.333% - 0.5rem);
        min-width: 60px;
    }
    
    .modern-submit-btn {
        padding: 1rem;
        font-size: 1rem;
    }

    .form-footer {
        font-size: 0.75rem;
    }

    .steps-grid, .process-steps {
        gap: var(--spacing-md);
    }

    .step-item, .process-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-number {
        margin-bottom: 0.5rem;
    }

    .complete-application-form {
        padding: 1.5rem 1rem;
    }

    .info-grid, .values-grid {
        grid-template-columns: 1fr;
    }

    .types-cta {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .types-cta h2 {
        font-size: 1.5rem;
    }
}


/* ============================================
   MODERN SELECT
   ============================================ */
.purpose-select-wrapper {
    position: relative;
    width: 100%;
}

.modern-select {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    background: white;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    color: var(--text-dark);
}

.modern-select:hover {
    border-color: var(--gray-300);
}

.modern-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(139, 21, 56, 0.08);
}

.purpose-select-wrapper .select-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.purpose-select-wrapper::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url('data:image/svg+xml,%3Csvg width=\'10\' height=\'6\' viewBox=\'0 0 10 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'1 1L5 5L9 1\' stroke=\'%236B7280\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.modern-select:focus ~ .select-icon {
    color: var(--primary-color);
}

.modern-select:focus + .select-icon {
    color: var(--primary-color);
}



/* === ENHANCED HEADER & SHARED STYLES (auto-appended) === */

    /* ============================================
       HEADER REDESIGN — "Command Bar" Floating Pill
       ============================================
       A premium dual-layer floating header:
       - Animated shimmer line along the top edge
       - Soft gradient glow halo behind the pill
       - Logo with subtle ping/halo animation
       - Refined nav-link hover (gradient underline reveal)
       - Live "X lenders online" trust indicator
       - Apply CTA with sweeping spark + animated arrow
       - .scrolled compact state on scroll
    */

    /* Pill container - overflow visible so glow can spill */
    .header {
        overflow: visible;
        transition:
            top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animated rainbow-burgundy gradient glow halo BEHIND the header */
    .header-glow {
        position: absolute;
        inset: -2px;
        border-radius: 22px;
        padding: 2px;
        background: linear-gradient(
            120deg,
            rgba(139, 21, 56, 0)   0%,
            rgba(139, 21, 56, 0.35) 20%,
            rgba(212, 175, 55, 0.5) 50%,
            rgba(196, 30, 58, 0.35) 80%,
            rgba(139, 21, 56, 0)   100%
        );
        background-size: 200% 200%;
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
                mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        opacity: 0.55;
        animation: headerGlowSlide 8s linear infinite;
        pointer-events: none;
        z-index: 0;
    }

    @keyframes headerGlowSlide {
        0%   { background-position:   0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position:   0% 50%; }
    }

    /* Tighter, no-wrap nav so items never break to two lines */
    .nav-container {
        padding: 0.75rem 1.75rem !important;
        gap: 1.25rem;
    }

    .nav-menu {
        flex: 1;
        justify-content: center;
        gap: 0.45rem !important;
    }

    .logo a img {
        height: 55px !important;
    }

    .logo {
        flex-shrink: 0;
    }

    .nav-link {
        display: inline-flex !important;
        align-items: center;
        gap: 0.45rem;
        font-weight: 700 !important;
        letter-spacing: -0.01em;
        font-size: 1rem !important;
        line-height: 1.2;
        white-space: nowrap;
        color: var(--gray-800) !important;
        padding: 0.62rem 1.2rem !important;
        border-radius: 12px;
        border: 1px solid transparent;
        transition:
            color 0.22s ease,
            background 0.22s ease,
            border-color 0.22s ease,
            box-shadow 0.22s ease,
            transform 0.22s ease;
    }

    .nav-link-icon {
        display: block !important;
        width: 17px;
        height: 17px;
        flex-shrink: 0;
        opacity: 0.72;
        transition: opacity 0.22s ease;
    }

    .nav-link-text {
        font-weight: 700;
    }

    .nav-link::after {
        display: none !important;
    }

    .nav-link:hover {
        color: var(--primary-color) !important;
        background: rgba(139, 21, 56, 0.07);
        border-color: rgba(139, 21, 56, 0.1);
    }

    .nav-link:hover .nav-link-icon {
        opacity: 1;
    }

    .nav-link.active {
        color: var(--primary-color) !important;
        -webkit-text-fill-color: currentColor;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(252, 250, 247, 0.96) 100%
        );
        border-color: rgba(0, 0, 0, 0.07);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .nav-link.active .nav-link-icon {
        opacity: 1;
        color: var(--primary-color);
    }

    .has-dropdown > .nav-link {
        gap: 0.35rem !important;
        padding-right: 1rem !important;
    }

    .has-dropdown > .nav-link .dropdown-arrow {
        width: 13px;
        height: 13px;
        opacity: 0.65;
        margin-left: 0;
    }

    .has-dropdown:hover > .nav-link .dropdown-arrow {
        opacity: 1;
    }

    .desktop-apply {
        flex-shrink: 0;
        margin-left: 0.25rem;
    }

    /* Refined Apply CTA with sweeping spark */
    .nav-cta {
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        padding: 0.72rem 1.45rem !important;
        border-radius: 999px !important;
        letter-spacing: -0.01em;
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        white-space: nowrap;
        box-shadow:
            0 4px 14px rgba(139, 21, 56, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    .nav-cta .desktop-text,
    .nav-cta .mobile-text {
        white-space: nowrap;
    }

    .nav-cta .cta-spark {
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
            115deg,
            transparent 0%,
            transparent 35%,
            rgba(255, 255, 255, 0.45) 50%,
            transparent 65%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 1;
        transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-cta:hover .cta-spark {
        left: 130%;
    }

    .nav-cta .desktop-text,
    .nav-cta .mobile-text,
    .nav-cta svg {
        position: relative;
        z-index: 2;
    }

    .nav-cta:hover {
        box-shadow:
            0 10px 28px rgba(139, 21, 56, 0.4),
            0 0 0 4px rgba(212, 175, 55, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }

    /* Scrolled state - compact, crisper, more opaque */
    .header.scrolled {
        top: 0.5rem !important;
        background: linear-gradient(
            135deg,
            rgba(253, 252, 251, 0.96) 0%,
            rgba(255, 245, 247, 0.94) 50%,
            rgba(254, 248, 243, 0.96) 100%
        ) !important;
        backdrop-filter: blur(22px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(200%) !important;
        box-shadow:
            0 8px 32px rgba(139, 21, 56, 0.1),
            0 2px 6px rgba(139, 21, 56, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;
    }

    .header.scrolled .nav-container {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }

    .header.scrolled .nav-link {
        padding-top: 0.52rem !important;
        padding-bottom: 0.52rem !important;
        font-size: 0.94rem !important;
    }

    .header.scrolled .logo a img {
        height: 48px !important;
    }

    .header.scrolled .header-glow {
        opacity: 0.4;
    }

    /* ── Tablet (≤1024px) ── */
    @media (max-width: 1024px) {
        .header.scrolled .logo a img {
            height: 45px !important;
        }
        .nav-container {
            padding: 0.75rem 1.25rem !important;
        }
        .nav-menu {
            gap: 0.35rem !important;
        }
        .nav-link {
            font-size: 0.94rem !important;
            padding: 0.55rem 1rem !important;
        }
        .nav-link-icon {
            width: 16px;
            height: 16px;
        }
        /* Mega menus can still be wide on tablet but cap at viewport */
        .mega-menu-locations {
            width: min(720px, calc(100vw - 2rem));
            min-width: 0 !important;
        }
        .mega-menu-contact {
            width: min(540px, calc(100vw - 2rem));
            min-width: 0 !important;
        }
    }

    /* ────────────────────────────────────────────────────
       Mobile Quick-Apply pill + premium hamburger
       (visible only ≤768px — hidden on tablet/desktop)
       ──────────────────────────────────────────────────── */
    .mobile-quick-apply {
        display: none;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem 0.45rem 0.7rem;
        background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
        color: #fff !important;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        text-decoration: none;
        border-radius: 999px;
        box-shadow:
            0 4px 12px rgba(139, 21, 56, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        flex-shrink: 0;
        margin-left: auto;
    }

    .mobile-quick-apply::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            115deg,
            transparent 0%,
            transparent 35%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 65%,
            transparent 100%
        );
        transform: translateX(-100%);
        transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .mobile-quick-apply:active::before,
    .mobile-quick-apply:hover::before {
        transform: translateX(100%);
    }

    .mobile-quick-apply:active {
        transform: scale(0.96);
        box-shadow: 0 2px 8px rgba(139, 21, 56, 0.4);
    }

    .mqa-bolt {
        flex-shrink: 0;
        color: #ffd166;
        filter: drop-shadow(0 0 4px rgba(255, 209, 102, 0.6));
        animation: mqaBoltPulse 2.4s ease-in-out infinite;
    }

    .mqa-text {
        position: relative;
        z-index: 1;
    }

    @keyframes mqaBoltPulse {
        0%, 100% { transform: scale(1);    opacity: 1;   }
        50%      { transform: scale(1.18); opacity: 0.85; }
    }

    /* Hide the new mobile-only menu elements on desktop */
    .mobile-menu-divider,
    .mobile-menu-trust,
    .mobile-cta-content {
        display: none;
    }

    /* Backdrop only visible on mobile when menu is open */
    .mobile-menu-backdrop {
        display: none;
    }

    /* ── Mobile (≤768px) — full mobile nav overrides ── */
    @media (max-width: 768px) {
        .header-glow {
            border-radius: 18px;
            opacity: 0.35;
        }
        .nav-cta .cta-spark {
            display: none;
        }

        /* Show the mobile mini-CTA, push hamburger right */
        .mobile-quick-apply {
            display: inline-flex;
        }

        /* Premium hamburger - rounded button with subtle background */
        .mobile-menu-toggle {
            position: relative;
            width: 42px;
            height: 42px;
            padding: 0 !important;
            border-radius: 12px !important;
            background: linear-gradient(135deg, rgba(139, 21, 56, 0.06) 0%, rgba(196, 30, 58, 0.06) 100%) !important;
            border: 1px solid rgba(139, 21, 56, 0.12) !important;
            display: inline-flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 5px !important;
            margin-left: 0.5rem !important;
            transition: all 0.2s ease;
        }

        .mobile-menu-toggle:active {
            transform: scale(0.94);
            background: linear-gradient(135deg, rgba(139, 21, 56, 0.12) 0%, rgba(196, 30, 58, 0.12) 100%) !important;
        }

        .mobile-menu-toggle span {
            width: 18px !important;
            height: 2.5px !important;
            background-color: #8b1538 !important;
            border-radius: 2px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            transform-origin: center;
        }

        .mobile-menu-toggle span:nth-child(2) {
            width: 14px !important;
        }

        .mobile-menu-toggle.active {
            background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%) !important;
            border-color: transparent !important;
            box-shadow: 0 4px 12px rgba(139, 21, 56, 0.3);
        }

        .mobile-menu-toggle.active span {
            background-color: #fff !important;
            width: 18px !important;
        }

        .mobile-menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px) !important;
        }

        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px) !important;
        }

        /* Tighter logo + nav-container so the new elements fit cleanly */
        .nav-container {
            padding: 0.55rem 0.85rem !important;
            gap: 0.55rem !important;
        }
        .logo a img {
            height: 52px !important;
        }
        /* Wider mini-cta when nav is short */
        .mobile-quick-apply {
            font-size: 0.8rem;
            padding: 0.42rem 0.8rem 0.42rem 0.65rem;
        }

        /* ═══════════════════════════════════════════════════
           MOBILE MENU — Premium redesign
           ═══════════════════════════════════════════════════ */

        /* Backdrop overlay - appears behind menu, blurs page below */
        .mobile-menu-backdrop {
            display: block;
            position: fixed;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(74, 13, 31, 0.0) 0%,
                rgba(74, 13, 31, 0.35) 100%
            );
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0s linear 0.3s;
            z-index: 998;
        }

        .mobile-menu-backdrop.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity 0.3s ease, visibility 0s linear 0s;
        }

        /* The menu panel itself - more polished card */
        .nav-menu {
            flex: none;
            justify-content: flex-start;
            padding: 0.75rem !important;
            gap: 0.15rem !important;
            border-radius: 18px !important;
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 248, 250, 0.98) 100%
            ) !important;
            border: 1px solid rgba(139, 21, 56, 0.12) !important;
            box-shadow:
                0 24px 60px -8px rgba(139, 21, 56, 0.25),
                0 8px 16px -4px rgba(139, 21, 56, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        }

        /* Each nav item: full-width tile with icon + text + chevron */
        .nav-menu li {
            width: 100% !important;
            opacity: 0;
            transform: translateY(8px);
            transition:
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Stagger entrance for each item when menu opens */
        .nav-menu.active li:nth-child(1)  { transition-delay: 0.05s; }
        .nav-menu.active li:nth-child(2)  { transition-delay: 0.09s; }
        .nav-menu.active li:nth-child(3)  { transition-delay: 0.13s; }
        .nav-menu.active li:nth-child(4)  { transition-delay: 0.17s; }
        .nav-menu.active li:nth-child(5)  { transition-delay: 0.21s; }
        .nav-menu.active li:nth-child(6)  { transition-delay: 0.25s; }
        .nav-menu.active li:nth-child(7)  { transition-delay: 0.29s; }
        .nav-menu.active li:nth-child(8)  { transition-delay: 0.33s; }
        .nav-menu.active li:nth-child(9)  { transition-delay: 0.37s; }
        .nav-menu.active li:nth-child(10) { transition-delay: 0.41s; }
        .nav-menu.active li:nth-child(11) { transition-delay: 0.45s; }

        .nav-menu.active li {
            opacity: 1;
            transform: translateY(0);
        }

        /* Each nav-link becomes a full-width tile - icon left, text middle, chevron right */
        .nav-menu .nav-link {
            display: flex !important;
            align-items: center;
            gap: 0.85rem !important;
            width: 100%;
            padding: 0.85rem 0.95rem !important;
            border-radius: 12px;
            text-align: left !important;
            font-size: 0.95rem !important;
            font-weight: 600 !important;
            color: #374151 !important;
            position: relative;
            background: transparent;
            transition: all 0.2s ease;
        }

        /* Underline removed on mobile - replaced by left accent border on active */
        .nav-menu .nav-link::after {
            display: none !important;
        }

        /* Icon styling */
        .nav-menu .nav-link-icon {
            display: block;
            width: 20px;
            height: 20px;
            color: #8b1538;
            opacity: 0.85;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }

        /* Text takes up remaining space */
        .nav-menu .nav-link-text {
            flex: 1;
            line-height: 1.3;
        }

        /* Dropdown chevron rotates when expanded */
        .nav-menu .has-dropdown > .nav-link .dropdown-arrow {
            margin-left: auto;
            color: #8b1538;
            opacity: 0.55;
            flex-shrink: 0;
            transition: transform 0.3s ease, opacity 0.2s ease;
        }
        .nav-menu .has-dropdown.active > .nav-link .dropdown-arrow {
            transform: rotate(180deg);
            opacity: 1;
        }

        /* Active page link - left accent border + gradient bg */
        .nav-menu .nav-link.active {
            background: linear-gradient(135deg,
                rgba(139, 21, 56, 0.06) 0%,
                rgba(212, 175, 55, 0.05) 100%
            ) !important;
            color: #8b1538 !important;
            -webkit-text-fill-color: #8b1538 !important;
            position: relative;
        }
        .nav-menu .nav-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 20%;
            bottom: 20%;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: linear-gradient(180deg, #8b1538 0%, #c41e3a 100%);
        }
        .nav-menu .nav-link.active .nav-link-icon {
            opacity: 1;
        }

        /* Tap feedback — class-based for expanded dropdown, :active for press */
        .nav-menu .nav-link:active,
        .nav-menu .nav-link:focus-visible,
        .nav-menu .has-dropdown.active > .nav-link {
            background: linear-gradient(135deg,
                rgba(139, 21, 56, 0.05) 0%,
                rgba(212, 175, 55, 0.04) 100%
            ) !important;
            color: #8b1538 !important;
        }
        .nav-menu .nav-link:active .nav-link-icon,
        .nav-menu .has-dropdown.active > .nav-link .nav-link-icon {
            opacity: 1;
            transform: scale(1.06);
        }

        /* Subtle divider between main nav items and bottom CTA section */
        .mobile-menu-divider {
            display: block !important;
            opacity: 1 !important;
            transform: none !important;
            height: 1px !important;
            margin: 0.65rem 0.5rem !important;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(139, 21, 56, 0.18) 50%,
                transparent 100%
            ) !important;
            list-style: none;
        }

        /* Bottom CTA item - upgrade with subtitle */
        .mobile-apply-item {
            margin-top: 0.35rem !important;
            padding: 0 0.25rem !important;
        }

        .mobile-menu-cta {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 0.75rem !important;
            width: 100% !important;
            padding: 0.85rem 1rem !important;
            border-radius: 14px !important;
            font-size: 0.95rem !important;
            text-align: left !important;
            position: relative;
            overflow: hidden;
            box-shadow:
                0 8px 22px rgba(139, 21, 56, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
        }
        /* Hide the legacy text spans on mobile menu CTA */
        .mobile-menu-cta .mobile-text,
        .mobile-menu-cta .desktop-text {
            display: none !important;
        }
        .mobile-menu-cta .mobile-cta-content {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
            line-height: 1.2;
            flex: 1;
        }
        .mobile-cta-title {
            font-weight: 800;
            font-size: 1rem;
            color: #fff;
            letter-spacing: -0.01em;
        }
        .mobile-cta-subtitle {
            font-weight: 500;
            font-size: 0.74rem;
            color: rgba(255, 255, 255, 0.85);
            letter-spacing: -0.005em;
        }
        .mobile-menu-cta .mobile-cta-arrow {
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            width: 32px;
            height: 32px;
            padding: 7px;
            transition: transform 0.2s ease;
        }
        .mobile-menu-cta:active .mobile-cta-arrow {
            transform: translateX(3px);
        }

        /* Trust footer at the very bottom of the menu */
        .mobile-menu-trust {
            display: flex !important;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            padding: 0.85rem 0.75rem 0.45rem !important;
            font-size: 0.78rem;
            color: #6b7280;
            list-style: none;
            opacity: 1 !important;
            transform: none !important;
        }
        .mmt-stars {
            display: inline-flex;
            gap: 1px;
            align-items: center;
        }
        .mmt-stars svg {
            width: 12px;
            height: 12px;
        }
        .mmt-text strong {
            color: #1f2937;
            font-weight: 700;
        }

        /* ─── Sub-menu (mega menus) animation polish on mobile ─── */
        .has-dropdown .dropdown-menu {
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, margin-top 0.3s ease !important;
            margin-top: 0 !important;
        }
        .has-dropdown.active .dropdown-menu {
            margin-top: 0.5rem !important;
        }

        /* Kill gradient text-fill on active link inside mobile accordion
           (webkit-text-fill-color can't be overridden by color) */
        .nav-link.active {
            background: none !important;
            -webkit-background-clip: unset !important;
            background-clip: unset !important;
            -webkit-text-fill-color: #8b1538 !important;
            color: #8b1538 !important;
        }

        /* Reset center-reveal underline to left-aligned on mobile */
        .nav-link::after {
            left: 0 !important;
            transform: none !important;
        }

        /* Ensure the mobile accordion has enough room for mega-menu content
           (the actual mega-menu visual mobile overrides live in a later
           @media block to win the source-order cascade — see bottom of file) */
        .has-dropdown.active .mega-menu {
            max-height: 900px !important;
            overflow-y: auto !important;
        }
    }

    /* ── Small phones (≤480px) — header sizing ── */
    @media (max-width: 480px) {
        .nav-container {
            padding: 0.5rem 0.7rem !important;
            gap: 0.4rem !important;
        }
        .logo a img {
            height: 46px !important;
        }
        .mobile-quick-apply {
            padding: 0.4rem 0.7rem 0.4rem 0.55rem;
            font-size: 0.78rem;
            gap: 0.3rem;
        }
        .mobile-menu-toggle {
            width: 38px !important;
            height: 38px !important;
        }
    }

    /* ── Tiny phones (≤360px) — hide bolt icon to save space ── */
    @media (max-width: 360px) {
        .mqa-bolt {
            display: none;
        }
        .mobile-quick-apply {
            padding: 0.4rem 0.7rem;
        }
    }

    /* Respect reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .header-glow,
        .nav-cta .cta-spark {
            animation: none !important;
        }
    }

    /* ============================================
       MEGA MENUS — Locations & Contact
       ============================================
       Replaces the flat dropdown lists with rich, organized
       multi-column panels. Both override the base
       .dropdown-menu grid with their own layouts.
    */

    .mega-menu {
        display: block !important;
        padding: 0 !important;
        min-width: auto !important;
        max-width: none !important;
        overflow: hidden;
        border-radius: 16px !important;
        box-shadow:
            0 24px 48px -12px rgba(139, 21, 56, 0.18),
            0 8px 16px -4px rgba(139, 21, 56, 0.08),
            0 0 0 1px rgba(139, 21, 56, 0.06) !important;
    }

    .mega-menu li {
        margin: 0 !important;
        list-style: none;
    }

    /* Mega header strip - gradient burgundy bar at top */
    .mega-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        padding: 1rem 1.5rem !important;
        background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
        color: #fff;
        grid-column: auto !important;
    }

    .mega-header-text h5 {
        margin: 0 0 0.15rem 0;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #fff;
    }

    .mega-header-text p {
        margin: 0;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.78);
        font-weight: 500;
    }

    .mega-header-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.9rem;
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .mega-header-cta:hover {
        background: rgba(255, 255, 255, 0.28);
        color: #fff;
        transform: translateX(2px);
    }

    .mega-header-cta svg {
        transition: transform 0.2s ease;
    }

    .mega-header-cta:hover svg {
        transform: translateX(2px);
    }

    /* ===== Locations Mega Menu ===== */
    .mega-menu-locations {
        width: 720px;
        min-width: 720px !important;
    }

    .mega-body-locations {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        padding: 1.25rem !important;
        background: #fff;
    }

    .loc-region {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .loc-region-title {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0 0 0.5rem 0 !important;
        padding: 0 0.55rem 0.5rem;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #8b1538;
        border-bottom: 1px solid rgba(139, 21, 56, 0.12);
    }

    .loc-region-title svg {
        color: #c41e3a;
    }

    .loc-link {
        display: block;
        padding: 0.45rem 0.55rem !important;
        color: #374151 !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        text-decoration: none;
        border-radius: 6px;
        transition: all 0.18s ease;
        position: relative;
    }

    .loc-link::before,
    .loc-link::after {
        display: none !important;
    }

    .loc-link:hover {
        background: linear-gradient(135deg, rgba(139, 21, 56, 0.04) 0%, rgba(212, 175, 55, 0.05) 100%) !important;
        color: #8b1538 !important;
        padding-left: 0.85rem !important;
    }

    /* ===== Contact Mega Menu ===== */
    .mega-menu-contact {
        width: 540px;
        min-width: 540px !important;
    }

    .mega-body-contact {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr;
        gap: 0;
        background: #fff;
    }

    .contact-quick {
        padding: 1.25rem 1.25rem 1.25rem 1.5rem;
        border-right: 1px solid rgba(139, 21, 56, 0.08);
    }

    .contact-legal {
        padding: 1.25rem 1.5rem 1.25rem 1.25rem;
        background: linear-gradient(135deg, rgba(139, 21, 56, 0.025) 0%, rgba(212, 175, 55, 0.03) 100%);
    }

    .contact-section-title {
        margin: 0 0 0.85rem 0 !important;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #8b1538;
    }

    /* Scoped to mega menu only — unscoped .contact-card broke contact.html page cards */
    .mega-menu-contact .contact-card {
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem !important;
        margin: 0 -0.35rem 0.35rem !important;
        border-radius: 10px;
        text-decoration: none;
        transition: all 0.2s ease;
        background: transparent;
    }

    .mega-menu-contact .contact-card::before,
    .mega-menu-contact .contact-card::after {
        display: none !important;
    }

    .mega-menu-contact a.contact-card:hover {
        background: linear-gradient(135deg, rgba(139, 21, 56, 0.05) 0%, rgba(212, 175, 55, 0.06) 100%);
        transform: translateX(2px);
    }

    .mega-menu-contact .contact-card-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(139, 21, 56, 0.1) 0%, rgba(196, 30, 58, 0.1) 100%);
        border-radius: 9px;
        transition: all 0.25s ease;
    }

    .mega-menu-contact .contact-card-icon svg {
        width: 17px;
        height: 17px;
        color: #8b1538;
    }

    .mega-menu-contact a.contact-card:hover .contact-card-icon {
        background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    }

    .mega-menu-contact a.contact-card:hover .contact-card-icon svg {
        color: #fff;
    }

    .mega-menu-contact .contact-card-text {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
        min-width: 0;
    }

    .mega-menu-contact .contact-card-text strong {
        font-size: 0.85rem;
        font-weight: 700;
        color: #1f2937;
        letter-spacing: -0.01em;
    }

    .mega-menu-contact .contact-card-text span {
        font-size: 0.74rem;
        color: #6b7280;
        font-weight: 500;
    }

    .contact-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin-top: 0.85rem;
        padding: 0.6rem 1rem;
        background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
        color: #fff !important;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.25s ease;
        box-shadow: 0 4px 10px rgba(139, 21, 56, 0.2);
    }

    .contact-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(139, 21, 56, 0.32);
    }

    .contact-cta svg {
        transition: transform 0.2s ease;
    }

    .contact-cta:hover svg {
        transform: translateX(2px);
    }

    .legal-link {
        display: flex !important;
        align-items: center;
        gap: 0.6rem;
        padding: 0.55rem 0.6rem !important;
        margin: 0 -0.4rem 0.2rem !important;
        color: #374151 !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.18s ease;
    }

    .legal-link::before,
    .legal-link::after {
        display: none !important;
    }

    .legal-link svg {
        width: 15px;
        height: 15px;
        color: #c41e3a;
        opacity: 0.65;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .legal-link:hover {
        background: rgba(255, 255, 255, 0.7) !important;
        color: #8b1538 !important;
        transform: translateX(3px);
    }

    .legal-link:hover svg {
        opacity: 1;
    }

    /* ───────────────────────────────────────────────────────
       Mega-menu mobile overrides — MUST come after the desktop
       .mega-menu-locations / .mega-menu-contact base rules
       above (lines ~913 / ~974) so the cascade wins. Both rules
       use !important; with equal specificity the later one wins.
       Earlier we placed these inside the higher-up @media block
       which lost the cascade and let the 720px / 540px desktop
       widths apply on phones — the bug the user saw.
    ─────────────────────────────────────────────────────── */
    @media (max-width: 1024px) {
        /* Tablet: cap mega-menu width to viewport */
        .mega-menu-locations {
            width: min(720px, calc(100vw - 2rem)) !important;
            min-width: 0 !important;
        }
        .mega-menu-contact {
            width: min(540px, calc(100vw - 2rem)) !important;
            min-width: 0 !important;
        }
    }

    @media (max-width: 768px) {
        /* Mega-menu becomes a full-width vertical block inside the mobile accordion */
        .mega-menu,
        .mega-menu-locations,
        .mega-menu-contact {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            border-radius: 10px !important;
            box-shadow: none !important;
            overflow: hidden !important;
        }

        /* Mega header — tighter padding, no decoration overflow */
        .mega-header {
            padding: 0.75rem 0.85rem !important;
            border-radius: 10px 10px 0 0 !important;
            gap: 0.6rem !important;
        }
        .mega-header-text h5 {
            font-size: 0.88rem !important;
        }
        .mega-header-text p {
            font-size: 0.7rem !important;
        }
        .mega-header-cta {
            font-size: 0.72rem !important;
            padding: 0.35rem 0.65rem !important;
        }

        /* Locations: 2-column grid on phones (was 4) */
        .mega-body-locations {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.65rem !important;
            padding: 0.75rem !important;
        }
        .loc-region-title {
            font-size: 0.66rem !important;
            padding: 0 0.4rem 0.35rem !important;
            margin-bottom: 0.35rem !important;
        }
        .loc-link {
            font-size: 0.8rem !important;
            padding: 0.42rem 0.5rem !important;
        }
        .loc-link:hover,
        .loc-link:active {
            padding-left: 0.7rem !important;
        }

        /* Contact: stack into one column on phones (was 2) */
        .mega-body-contact {
            grid-template-columns: 1fr !important;
        }
        .contact-quick {
            padding: 0.85rem !important;
            border-right: none !important;
            border-bottom: 1px solid rgba(139, 21, 56, 0.08);
        }
        .contact-legal {
            padding: 0.85rem !important;
        }
        .contact-section-title {
            font-size: 0.66rem !important;
            margin-bottom: 0.55rem !important;
        }
        .mega-menu-contact .contact-card {
            padding: 0.5rem !important;
            margin: 0 -0.25rem 0.25rem !important;
        }
        .mega-menu-contact .contact-card-icon {
            width: 32px !important;
            height: 32px !important;
        }
        .mega-menu-contact .contact-card-icon svg {
            width: 15px !important;
            height: 15px !important;
        }
        .mega-menu-contact .contact-card-text strong {
            font-size: 0.82rem !important;
        }
        .mega-menu-contact .contact-card-text span {
            font-size: 0.7rem !important;
        }
        .contact-cta {
            width: 100% !important;
            justify-content: center !important;
            padding: 0.65rem 1rem !important;
            margin-top: 0.65rem !important;
        }
        .legal-link {
            padding: 0.5rem 0.55rem !important;
            font-size: 0.82rem !important;
        }

        /* Blog dropdown — keep full width and tidy */
        .dropdown-menu-blogs {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
    }

    /* ── Tiny phones (≤480px) ── */
    @media (max-width: 480px) {
        /* Locations collapses to single column on small phones */
        .mega-body-locations {
            grid-template-columns: 1fr !important;
            gap: 0.5rem !important;
        }
        /* Mega header stacks vertically when space is very tight */
        .mega-header {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0.4rem !important;
            padding: 0.7rem 0.85rem !important;
        }
        .mega-header-cta {
            align-self: flex-start;
        }
    }

    /* ============================================
       SMOOTH SCROLL + ENTRANCE/REVEAL ANIMATIONS
       ============================================ */
    /* Disable native smooth scroll when Lenis is active (Lenis handles it) */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-scrolling iframe { pointer-events: none; }

    /* will-change hint for GPU compositing — opacity/transform set by gsap.set() not CSS */
    .has-anim .hero-badge,
    .has-anim .hero-title,
    .has-anim .hero-request-funds,
    .has-anim .hero-checklist li,
    .has-anim .trust-pills-glass .trust-pill-glass,
    .has-anim .form-card {
        will-change: transform, opacity;
    }

    /* 3D tilt support for feature cards */
    .feature-card {
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }

    @media (max-width: 768px), (pointer: coarse) {
        .feature-card {
            transform-style: flat;
        }

        .has-anim .hero-badge,
        .has-anim .hero-title,
        .has-anim .hero-subheading,
        .has-anim .hero-request-funds,
        .has-anim .hero-checklist li,
        .has-anim .hero-stats-trio,
        .has-anim .form-card,
        .has-anim .feature-card,
        .has-anim .features .section-header > * {
            transition: none !important;
        }

        .has-anim .rotating-text {
            transition: opacity 0.35s ease !important;
        }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .has-anim .hero-badge,
        .has-anim .hero-title,
        .has-anim .hero-request-funds,
        .has-anim .hero-checklist li,
        .has-anim .trust-pills-glass .trust-pill-glass,
        .has-anim .form-card,
        .has-anim .reveal-up,
        .has-anim .reveal-fade,
        .has-anim .reveal-scale,
        .has-anim .reveal-stagger > * {
            opacity: 1 !important;
            transform: none !important;
        }
    }

    /* ============================================
       FOOTER TRUST BADGES - ONE ROW
       ============================================ */
    .footer-trust-badges {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.65rem;
        justify-content: flex-start;
        align-items: center;
    }

    .footer-badge {
        flex: 0 1 auto;
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.4rem 0.65rem;
        gap: 0.4rem;
    }

    .footer-badge svg {
        width: 15px;
        height: 15px;
    }

    /* ============================================
       FOOTER LINKS WITH ICONS
       ============================================ */
    .footer-links-col ul li a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
    }

    .footer-links-col ul li a svg {
        width: 14px;
        height: 14px;
        opacity: 0.7;
        transition: all 0.3s ease;
    }

    .footer-links-col ul li a:hover svg {
        opacity: 1;
        transform: translateX(3px);
    }

    .footer-links-col ul li a span {
        transition: color 0.3s ease;
    }

    /* ============================================
       ENHANCED SUB-FOOTER WITH SOCIAL ICONS
       ============================================ */
    .footer-bottom-enhanced {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 2.5rem 0 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 3rem;
        gap: 2rem;
    }

    .footer-bottom-left {
        text-align: left;
    }

    .footer-copyright {
        font-size: 0.9rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        margin: 0 0 0.4rem 0;
    }

    .footer-disclaimer {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.55);
        margin: 0;
        line-height: 1.5;
    }

    .footer-bottom-center {
        display: flex;
        justify-content: center;
    }

    .footer-social-icons {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }

    .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .social-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .social-icon:hover::before {
        opacity: 1;
    }

    .social-icon svg {
        width: 16px;
        height: 16px;
        color: rgba(255, 255, 255, 0.75);
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }

    .social-icon:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .social-icon:hover svg {
        color: #ffffff;
        transform: scale(1.05);
    }

    /* Individual social icon colors on hover */
    .social-icon:nth-child(1):hover {
        background: #1877f2;
        border-color: #1877f2;
    }

    .social-icon:nth-child(2):hover {
        background: #1da1f2;
        border-color: #1da1f2;
    }

    .social-icon:nth-child(3):hover {
        background: #0077b5;
        border-color: #0077b5;
    }

    .social-icon:nth-child(4):hover {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        border-color: #dc2743;
    }

    .social-icon:nth-child(5):hover {
        background: #ff0000;
        border-color: #ff0000;
    }

    .footer-bottom-right {
        display: flex;
        justify-content: flex-end;
    }

    .footer-made-wrapper {
        display: flex;
        align-items: center;
    }

    .footer-made {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.65);
        font-weight: 400;
    }

    .footer-made svg {
        width: 14px;
        height: 14px;
        color: #ff6b6b;
        animation: heartbeat 1.5s ease-in-out infinite;
    }

    @keyframes heartbeat {
        0%, 100% {
            transform: scale(1);
        }
        10%, 30% {
            transform: scale(1.15);
        }
        20%, 40% {
            transform: scale(1);
        }
    }

    /* Responsive Design */
    @media (max-width: 992px) {
        .footer-bottom-enhanced {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 1.75rem;
            padding: 2rem 0 1.5rem;
        }

        .footer-bottom-left {
            text-align: center;
            order: 1;
        }

        .footer-bottom-center {
            order: 2;
        }

        .footer-bottom-right {
            justify-content: center;
            order: 3;
        }
    }

    @media (max-width: 576px) {
        .footer-social-icons {
            gap: 0.5rem;
        }

        .social-icon {
            width: 34px;
            height: 34px;
        }

        .social-icon svg {
            width: 15px;
            height: 15px;
        }

        .footer-copyright {
            font-size: 0.85rem;
        }

        .footer-disclaimer {
            font-size: 0.75rem;
        }

        .footer-made {
            font-size: 0.8rem;
        }
    }

    /* ============================================
       FOOTER COLLAPSIBLE HEADINGS
       ============================================ */
    .footer-heading-toggle {
        cursor: default;
        user-select: none;
    }

    .footer-toggle-icon {
        display: none;
        width: 18px;
        height: 18px;
        transition: transform 0.3s ease;
    }

    .footer-collapsible-content {
        max-height: none;
        overflow: visible;
        transition: none;
    }

    /* ============================================
       FOOTER MAIN RESPONSIVE
       ============================================ */
    @media (max-width: 992px) {
        .footer-main {
            padding: 3rem 0 2rem;
        }

        .footer-brand {
            margin-bottom: 2.5rem;
            text-align: center;
        }

        .footer-logo {
            justify-content: center;
        }

        .footer-tagline {
            text-align: center;
        }

        .footer-trust-badges {
            justify-content: center;
        }

        .footer-links-wrapper {
            grid-template-columns: 1fr;
            gap: 0;
            text-align: center;
        }

        .footer-links-col {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0;
        }

        .footer-links-col:last-child {
            border-bottom: none;
        }

        .footer-heading-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: left;
            cursor: pointer;
            padding: 1.25rem 1rem;
            margin: 0;
            background: rgba(255, 255, 255, 0.02);
            transition: background 0.3s ease;
        }

        .footer-heading-toggle:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .footer-heading-toggle.active {
            background: rgba(255, 255, 255, 0.05);
        }

        .footer-toggle-icon {
            display: block;
        }

        .footer-heading-toggle.active .footer-toggle-icon {
            transform: rotate(180deg);
        }

        .footer-collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
            padding: 0 1rem;
        }

        .footer-collapsible-content.active {
            max-height: 500px;
            padding: 1rem 1rem 1.5rem;
        }

        .footer-links-col ul {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .footer-links-col ul li {
            width: 100%;
            max-width: none;
        }

        .footer-links-col ul li a {
            justify-content: flex-start;
            padding: 0.6rem 0;
        }

        .footer-contact-list li {
            justify-content: flex-start;
            padding: 0.6rem 0;
        }
    }

    @media (max-width: 576px) {
        .footer-brand {
            margin-bottom: 2rem;
        }

        .footer-logo {
            font-size: 1.3rem;
        }

        .footer-logo-img {
            height: 40px;
        }

        .footer-logo-icon svg {
            width: 28px;
            height: 28px;
        }

        .footer-tagline {
            font-size: 0.85rem;
            line-height: 1.5;
        }

        .footer-trust-badges {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: center;
        }

        .footer-badge {
            flex: 1;
            min-width: 140px;
            max-width: 180px;
            padding: 0.6rem 0.75rem;
        }

        .footer-badge svg {
            width: 16px;
            height: 16px;
        }

        .footer-badge span {
            font-size: 0.8rem;
        }

        .footer-links-wrapper {
            gap: 1.75rem;
        }

        .footer-links-col h4 {
            font-size: 1rem;
            margin-bottom: 0.75rem;
        }

        .footer-links-col ul li {
            margin-bottom: 0.5rem;
        }

        .footer-links-col ul li a {
            font-size: 0.85rem;
            padding: 0.4rem 0;
        }

        .footer-contact-list li {
            font-size: 0.85rem;
            padding: 0.4rem 0;
        }

        .footer-contact-list li svg {
            width: 16px;
            height: 16px;
        }
    }

    /* ============================================
       FOOTER CTA COMPACT WITH INPUT
       ============================================ */
    .footer-cta-compact {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding: 1.5rem 2rem !important;
        position: relative;
        overflow: hidden;
    }

    .footer-cta-compact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            repeating-linear-gradient(
                45deg,
                transparent,
                transparent 40px,
                rgba(255, 255, 255, 0.04) 40px,
                rgba(255, 255, 255, 0.04) 80px
            );
        pointer-events: none;
        opacity: 0.6;
    }

    .footer-cta-compact::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 30%),
            radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.2) 0%, transparent 30%);
        pointer-events: none;
    }

    /* Floating decorative circles - Enhanced visibility */
    .footer-decoration-circles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .footer-deco-circle {
        position: absolute;
        border-radius: 50%;
    }

    .footer-deco-1 {
        width: 180px;
        height: 180px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 70%);
        top: -60px;
        left: 15%;
        animation: floatCircle1 8s ease-in-out infinite;
        box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1);
    }

    .footer-deco-2 {
        width: 140px;
        height: 140px;
        background: radial-gradient(circle, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 70%);
        bottom: -50px;
        right: 25%;
        animation: floatCircle2 10s ease-in-out infinite;
        box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.15);
    }

    .footer-deco-3 {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 70%);
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        animation: floatCircle3 12s ease-in-out infinite;
        box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.08);
    }

    @keyframes floatCircle1 {
        0%, 100% { 
            transform: translate(0, 0) scale(1);
            opacity: 0.7;
        }
        50% { 
            transform: translate(20px, 15px) scale(1.15);
            opacity: 0.9;
        }
    }

    @keyframes floatCircle2 {
        0%, 100% { 
            transform: translate(0, 0) scale(1);
            opacity: 0.8;
        }
        50% { 
            transform: translate(-18px, -12px) scale(1.2);
            opacity: 1;
        }
    }

    @keyframes floatCircle3 {
        0%, 100% { 
            transform: translate(0, -50%) scale(1);
            opacity: 0.6;
        }
        50% { 
            transform: translate(-15px, -50%) scale(1.12);
            opacity: 0.85;
        }
    }

    /* Additional decorative elements */
    .footer-cta-left {
        position: relative;
        z-index: 1;
    }

    .footer-cta-left::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -50px;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
        border-radius: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        filter: blur(20px);
    }

    .footer-cta-right {
        position: relative;
        z-index: 1;
    }

    .footer-cta-right::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -40px;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 70%);
        border-radius: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        filter: blur(15px);
    }

    .footer-cta-left h3 {
        font-size: 1.35rem;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 0.25rem 0;
        position: relative;
        z-index: 1;
    }

    .footer-cta-left p {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
    }

    .footer-cta-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .footer-amount-input-wrapper {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        padding: 0 1rem;
        transition: all 0.2s ease;
    }

    .footer-amount-input-wrapper:focus-within {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    }

    .footer-input-currency {
        font-size: 1.1rem;
        font-weight: 700;
        color: #ffffff;
    }

    .footer-amount-input {
        width: 90px;
        background: transparent;
        border: none;
        outline: none;
        font-size: 1.25rem;
        font-weight: 700;
        color: #ffffff;
        padding: 0.75rem 0.5rem;
        font-family: inherit;
    }

    .footer-amount-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .footer-cta-btn-compact {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #ffffff;
        color: #8b1538;
        padding: 0.85rem 1.5rem;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        white-space: nowrap;
    }

    .footer-cta-btn-compact:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .footer-cta-btn-compact:hover svg {
        transform: translateX(3px);
    }

    .footer-cta-btn-compact svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    @media (max-width: 768px) {
        .footer-cta-compact {
            flex-direction: column;
            text-align: center;
            gap: 1.25rem;
            padding: 1.5rem !important;
        }

        .footer-cta-left h3 {
            font-size: 1.2rem;
        }

        .footer-cta-right {
            width: 100%;
            justify-content: center;
        }

        .footer-cta-btn-compact {
            flex: 1;
            justify-content: center;
            max-width: 160px;
        }
    }

    @media (max-width: 768px) {
        .footer-cta-compact {
            flex-direction: column;
            text-align: center;
            gap: 1.5rem;
            padding: 2rem 1.5rem !important;
        }

        .footer-cta-left h3 {
            font-size: 1.3rem;
        }

        .footer-cta-left p {
            font-size: 0.85rem;
        }

        .footer-cta-right {
            width: 100%;
            justify-content: center;
            flex-wrap: wrap;
        }

        .footer-amount-input-wrapper {
            flex: 1;
            min-width: 140px;
            max-width: 180px;
        }

        .footer-cta-btn-compact {
            flex: 1;
            min-width: 140px;
            max-width: 180px;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .footer-cta-compact {
            padding: 1.5rem 1rem !important;
        }

        .footer-cta-left h3 {
            font-size: 1.1rem;
        }

        .footer-cta-right {
            flex-direction: column;
            gap: 1rem;
            width: 100%;
        }

        .footer-amount-input-wrapper {
            width: 100%;
            max-width: 100%;
            justify-content: center;
        }

        .footer-amount-input {
            width: 100px;
        }

        .footer-cta-btn-compact {
            width: 100%;
            max-width: 100%;
        }
    }


/* ============================================================================
   HERO LEFT-COLUMN — premium upgrades
   - Avatar-stack trust badge
   - Sub-headline
   - Polished checklist with varied accent colors
   - Live activity ribbon (pulsing dot + auto-rotating match)
   - Stats trio (hard credibility numbers)
   ============================================================================ */

/* ── 1. Trust badge — glass pill, avatars + rating stack ────────────────── */
.hero-badge.hero-badge-v2 {
    padding: 0.35rem 0.72rem 0.35rem 0.38rem;
    gap: 0.52rem;
    align-items: center;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(255, 248, 250, 0.82) 100%);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
    border: 1px solid rgba(139, 21, 56, 0.11);
    border-radius: 100px;
    box-shadow:
        0 2px 14px rgba(139, 21, 56, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    margin-bottom: 1.1rem;
    max-width: 100%;
    box-sizing: border-box;
}
.hero-badge.hero-badge-v2:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 18px rgba(139, 21, 56, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hero-badge-avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
}

.hb-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.09);
    margin-left: -7px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.hb-avatar:first-child { margin-left: 0; }

.hero-badge.hero-badge-v2:hover .hb-avatar {
    transform: translateY(-2px);
}
.hero-badge.hero-badge-v2:hover .hb-avatar:nth-child(2) { transition-delay: 0.04s; }
.hero-badge.hero-badge-v2:hover .hb-avatar:nth-child(3) { transition-delay: 0.08s; }
.hero-badge.hero-badge-v2:hover .hb-avatar:nth-child(4) { transition-delay: 0.12s; }

.hb-av-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.hero-badge-vline {
    width: 1px;
    align-self: stretch;
    min-height: 1.75rem;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(139, 21, 56, 0.14) 22%,
        rgba(139, 21, 56, 0.14) 78%,
        transparent 100%);
    flex-shrink: 0;
}

.hero-badge-body {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.hb-rating-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.32rem;
    line-height: 1;
}

.hero-badge-v2 .hb-stars {
    gap: 1px;
}

.hero-badge-v2 .hb-stars svg {
    display: block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
}

.hb-score {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.hb-score-num {
    font-size: 0.97rem;
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hb-score-den {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gray-500, #6b7280);
    margin-left: 0.06em;
}

.hb-trust-line {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gray-600, #4b5563);
    letter-spacing: 0.01em;
}

.hb-trust-line strong {
    color: var(--gray-800, #1f2937);
    font-weight: 700;
}

/* ── 2. Sub-headline below the title ────────────────────────────────────── */
.hero-subheading {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--gray-700, #4b5563);
    max-width: 560px;
    margin: -0.25rem 0 1.75rem 0;
    font-weight: 400;
    animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.4s;
    will-change: opacity, transform;
}
.hero-subheading strong {
    color: var(--gray-900, #1f2937);
    font-weight: 700;
    background: linear-gradient(90deg, transparent 0%, transparent 100%);
}
.has-anim .hero-subheading {
    animation: none !important;
}

.hero-request-funds {
    display: none;
}

@media (max-width: 768px) {
    .hero-request-funds {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 560px;
        margin: 0 0 1.25rem 0;
        padding: 0.9rem 1.25rem;
        box-sizing: border-box;
        background: var(--gradient-primary);
        color: var(--white);
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        text-decoration: none;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(139, 21, 56, 0.28);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        animation: fadeSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.48s;
        will-change: opacity, transform;
    }

    .hero-request-funds:active {
        transform: scale(0.98);
    }
}

#lead-form {
    scroll-margin-top: 6.5rem;
}

/* ── 3. Premium checklist — tight, cohesive, single visual block ────────── */
.hero-checklist.hero-checklist-v2 {
    gap: 0;
    margin: 0 0 1.5rem 0;
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 248, 250, 0.65) 100%);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(139, 21, 56, 0.08);
    border-radius: 14px;
    box-shadow:
        0 4px 18px rgba(139, 21, 56, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    max-width: 560px;
}

.hero-checklist-v2 .hcl-item {
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    font-size: 0.95rem;
    color: var(--gray-800, #374151);
    line-height: 1.4;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hairline divider between rows — last row has none */
.hero-checklist-v2 .hcl-item + .hcl-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(139, 21, 56, 0.10) 18%,
        rgba(139, 21, 56, 0.10) 82%,
        transparent 100%);
}

.hero-checklist-v2 .hcl-item:hover {
    transform: translateX(2px);
}

.hero-checklist-v2 .hcl-item strong {
    color: var(--gray-900, #1f2937);
    font-weight: 700;
}

.hero-checklist-v2 .check-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

.hero-checklist-v2 .check-icon svg {
    width: 12px;
    height: 12px;
}

.hero-checklist-v2 .hcl-item:hover .check-icon {
    transform: scale(1.1);
}

/* Per-row accent coloring — green, blue, gold */
.hcl-secure .check-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
}
.hcl-fast .check-icon {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
}
.hcl-free .check-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
}

/* ── 4. Live activity ribbon ────────────────────────────────────────────── */
.hero-live-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.95rem 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: 100px;
    font-size: 0.82rem;
    color: var(--gray-700, #4b5563);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08);
    margin-bottom: 1.5rem;
    max-width: 100%;
    animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.55s;
    will-change: opacity, transform;
}
.has-anim .hero-live-ribbon { animation: none !important; }

.hlr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: hlrPulse 2s ease-in-out infinite;
}

@keyframes hlrPulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}

.hlr-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    line-height: 1.3;
    transition: opacity 0.4s ease;
}
.hlr-text.swap-out { opacity: 0; }

.hlr-text strong {
    color: var(--gray-900, #1f2937);
    font-weight: 700;
}

.hlr-sep {
    color: rgba(0, 0, 0, 0.25);
    margin: 0 0.1rem;
}

.hlr-time {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-left: 0.35rem;
}

/* ── 5. Stats trio (hard credibility numbers) ───────────────────────────── */
.hero-stats-trio {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 248, 250, 0.75) 100%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(139, 21, 56, 0.10);
    border-radius: 16px;
    box-shadow:
        0 8px 28px rgba(139, 21, 56, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    max-width: 520px;
    animation: fadeSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.6s;
    will-change: opacity, transform;
}
.has-anim .hero-stats-trio { animation: none !important; }

.hst-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
}

.hst-value {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--gray-900, #1f2937);
    letter-spacing: -0.03em;
    line-height: 1.1;
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.hst-unit {
    font-size: 1.05rem;
    font-weight: 800;
    margin-left: 1px;
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hst-label {
    font-size: 0.74rem;
    color: var(--gray-600, #6b7280);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 0.2rem;
    line-height: 1.2;
}

.hst-divider {
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(139, 21, 56, 0.18) 50%,
        transparent 100%);
    flex-shrink: 0;
}

/* ── 6. Responsive tweaks ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-badge.hero-badge-v2 {
        display: none;
    }

    .hero-subheading {
        font-size: 0.98rem;
        margin-bottom: 1.5rem;
    }

    .hero-checklist.hero-checklist-v2 {
        padding: 0.25rem 0.75rem;
    }
    .hero-checklist-v2 .hcl-item {
        font-size: 0.9rem;
        padding: 0.5rem 0;
        gap: 0.6rem;
    }
    .hero-checklist-v2 .check-icon {
        width: 20px;
        height: 20px;
    }
    .hero-checklist-v2 .check-icon svg {
        width: 11px;
        height: 11px;
    }

    .hero-live-ribbon {
        font-size: 0.78rem;
        padding: 0.5rem 0.85rem 0.5rem 0.7rem;
    }
    .hlr-time { display: none; }

    .hero-stats-trio {
        gap: 0.5rem;
        padding: 0.85rem 0.75rem;
    }
    .hst-value { font-size: 1.3rem; }
    .hst-unit  { font-size: 0.9rem; }
    .hst-label { font-size: 0.68rem; }
}

@media (max-width: 480px) {
    .hero-stats-trio {
        padding: 0.75rem 0.5rem;
        gap: 0.35rem;
    }
    .hst-value { font-size: 1.15rem; }
    .hst-label { font-size: 0.62rem; }
}

/* ── 7. Reduce-motion respect ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hlr-dot,
    .hero-checklist-v2 .hcl-item:hover,
    .hero-checklist-v2 .hcl-item:hover .check-icon {
        animation: none !important;
        transform: none !important;
    }

    html.site-loader-active {
        overflow: visible;
    }

    .site-loader,
    .site-loader-logo,
    .site-loader-bar-fill {
        animation: none !important;
    }
}

html.site-loader-active {
    overflow: hidden;
}

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, #fdfcfb 0%, #fff5f7 50%, #fef8f3 100%);
    box-sizing: border-box;
}

.site-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    width: min(18rem, 88vw);
}

.site-loader-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    filter: drop-shadow(0 12px 28px rgba(139, 21, 56, 0.12));
}

.site-loader-logo {
    width: min(200px, 70vw);
    height: auto;
    display: block;
    animation: siteLoaderLogoIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
        siteLoaderLogoPulse 2.2s ease-in-out 0.85s infinite;
}

.site-loader-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: rgba(139, 21, 56, 0.12);
    overflow: hidden;
}

.site-loader-bar-fill {
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b1538, #c41e3a, #d4af37);
    transform-origin: left center;
    animation: siteLoaderBar 1.35s ease-in-out infinite;
}

.site-loader-exit {
    opacity: 0;
    transition: opacity 0.48s ease;
}

.site-loader-exit .site-loader-mark {
    transform: scale(1.05);
    transition: transform 0.45s ease, opacity 0.45s ease;
    opacity: 0;
}

@keyframes siteLoaderLogoIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.88);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes siteLoaderLogoPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
}

@keyframes siteLoaderBar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

.scroll-to-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
    box-shadow:
        0 4px 14px rgba(139, 21, 56, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s,
        box-shadow 0.2s ease;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-to-top:hover {
    box-shadow:
        0 6px 20px rgba(139, 21, 56, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.scroll-to-top:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 3px;
}

.scroll-to-top-icon {
    display: block;
    margin-top: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-to-top {
        transition: opacity 0.15s ease, visibility 0.15s;
    }
    .scroll-to-top.is-visible {
        transform: translateY(0);
    }
}