/* --- 1. THEME VARIABLES --- */
        :root {
            /* Brand Identity Colors */
            --brand-navy: #022e47;
            --brand-cream: #FAF8F1;
            --brand-orange: #f68f1d;
            --brand-pink: #ea3b60;
            
            /* Default LIGHT Theme Mapping */
            --bg-body: var(--brand-cream);
            --text-main: var(--brand-navy);
            --text-muted: rgba(2, 46, 71, 0.6);
            --nav-bg-scrolled: rgba(250, 248, 241, 0.95);
            --nav-mobile-bg: #FAF8F1;
            --nav-mobile-shadow: rgba(0,0,0,0.1);
            
            /* Footer is always dark */
            --footer-bg: var(--brand-navy);
            
            --vf-grad: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange) 65%, var(--brand-pink) 100%);
            
            --font-display: 'Bakbak One', cursive;
            --font-body: 'Work Sans', sans-serif;

            --vf-glass-bg: rgba(255, 255, 255, 0.4);
            --vf-glass-border: rgba(255, 255, 255, 0.6);
            --vf-glass-shadow: rgba(0, 0, 0, 0.05);
        }

        /* DARK THEME OVERRIDES */
        [data-theme="dark"] {
            --bg-body: #011a2a; 
            --text-main: #e6e6e6;
            --text-muted: rgba(255, 255, 255, 0.6);
            --nav-bg-scrolled: rgba(1, 26, 42, 0.95);
            --nav-mobile-bg: #022e47;
            --nav-mobile-shadow: rgba(0,0,0,0.4);
            --vf-glass-bg: rgba(2, 46, 71, 0.3); /* Using Verafede Dark Blue */
            --vf-glass-border: rgba(255, 255, 255, 0.1);
            --vf-glass-shadow: rgba(0, 0, 0, 0.3);
        }

        /* --- 2. GLOBAL STYLES --- */
        body {
            background-color: var(--bg-body);
            font-family: var(--font-body);
            color: var(--text-main);
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            text-transform: uppercase;
            font-weight: 600; /* Semi-bold globally */
        }
        .text-gradient {
            background: var(--vf-grad);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* --- 3. AMBIENT BACKGROUND --- */
        .ambient-light {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            z-index: -1; pointer-events: none; overflow: hidden;
            background: var(--bg-body);
            transition: background-color 0.3s ease;
        }

        .orb {
            position: absolute; border-radius: 50%;
            filter: blur(80px); opacity: 0.5;
            animation: floatOrb 20s infinite ease-in-out;
        }

        .orb-1 { width: 100vw; height: 100vw; background: var(--brand-orange); top: -10%; left: -10%; opacity: 0.15;}
        .orb-2 { width: 30vw; height: 30vw; background: var(--brand-pink); bottom: 10%; right: -5%; animation-delay: -5s; opacity: 0.15;}
        .orb-3 { width: 60vw; height: 60vw; background: #ff5500; top: 40%; left: 40%; animation-delay: -10s; opacity: 0.1;}

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

		/* --- 7. HERO SECTION (RESTORED & STYLED) --- */
		.hero-section {
			min-height: 100vh;
			display: flex;
			align-items: center;
			position: relative;
			padding-top: 120px;
			padding-bottom: 80px;
			z-index: 1;
		}

		/* Typography Updates */
		.hero-title {
			font-family: var(--font-display);
			font-size: clamp(3rem, 6vw, 5.5rem); 
			line-height: 0.7;
			letter-spacing: -0.001em; 
			text-transform: uppercase;
			margin-bottom: 20px;
		}
		.ready-title {
			font-family: var(--font-display);
			font-size: clamp(3rem, 6vw, 5.5rem); 
			line-height: 0.9;
			letter-spacing: -0.001em; 
			text-transform: uppercase;
			margin-bottom: 20px;
		}

		/* Custom Navy Text Class */
		.text-navy {
			color: var(--brand-navy) !important;
		}

		/* Dark Mode Fallback for Navy Text */
		/* (Pure navy is invisible on dark backgrounds, so we map it to your off-white text variable in dark mode) */
		[data-theme="dark"] .text-navy {
			color: var(--text-main) !important;
		}

		.hero-subtitle {
			font-family: var(--font-body);
			font-size: clamp(1rem, 1.5vw, 1.25rem);
			font-weight: 500;
			max-width: 90%;
			margin-bottom: 40px;
			line-height: 1.1 !important;
			font-weight: 600;
		}

		.hero-tag {
			display: inline-block;
			padding: 8px 16px;
			border-radius: 50px;
			background: rgba(246, 143, 29, 0.1); 
			color: var(--brand-orange);
			font-family: var(--font-body);
			font-weight: 700;
			font-size: 0.85rem;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 20px;
			border: 1px solid rgba(246, 143, 29, 0.3);
		}

		[data-theme="dark"] .hero-tag {
			background: rgba(255, 255, 255, 0.05);
			color: #fff;
			border-color: rgba(255, 255, 255, 0.1);
		}

		/* Action Buttons */
		.hero-actions {
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
		}

		.btn-glow {
			background: var(--vf-grad);
			color: white !important;
			padding: 16px 32px;
			border-radius: 100px;
			font-family: var(--font-body);
			font-weight: 700;
			text-transform: uppercase;
			text-decoration: none;
			letter-spacing: 1px;
			transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
			border: none;
			box-shadow: 0 10px 20px rgba(246, 143, 29, 0.3);
		}

		.btn-glow:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px rgba(234, 59, 96, 0.4);
		}

		.btn-glass {
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: var(--text-main) !important;
			padding: 16px 32px;
			border-radius: 100px;
			font-family: var(--font-body);
			font-weight: 700;
			text-transform: uppercase;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.btn-glass:hover {
			background: rgba(255, 255, 255, 0.2);
			transform: translateY(-3px);
		}

		/* --- AESTHETIC MINIMALIST BENTO GRID --- */
		.aesthetic-bento {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 280px 220px;
			gap: 20px; /* Breathable, uniform spacing */
			width: 100%;
			position: relative;
		}

		.bento-card {
			border-radius: 24px; /* Uniform, smooth corners */
			overflow: hidden;
			position: relative;
			background: rgba(255, 255, 255, 0.02);
			border: 1px solid rgba(255, 255, 255, 0.08); /* Very subtle glass edge */
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04); /* Soft, expensive shadow */
			transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
		}

		/* Refined Hover State: Gentle lift and slight border highlight */
		.bento-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
			border-color: rgba(255, 255, 255, 0.15);
		}

		.bento-card img, 
		.bento-card video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		}

		/* Very subtle inner zoom on hover to keep it classy */
		.bento-card:hover img, 
		.bento-card:hover video {
			transform: scale(1.03); 
		}

		/* Card Placements */
		.bento-wide {
			grid-column: 1 / 3; /* Spans all the way across the top */
			grid-row: 1 / 2;
		}

		.bento-square-1 {
			grid-column: 1 / 2; /* Bottom left */
			grid-row: 2 / 3;
		}

		.bento-square-2 {
			grid-column: 2 / 3; /* Bottom right */
			grid-row: 2 / 3;
		}

		/* Mobile Adjustments - Stacks cleanly */
		@media (max-width: 991px) {
			.aesthetic-bento {
				grid-template-columns: 1fr;
				grid-template-rows: 240px 200px 200px;
				gap: 16px;
				margin-top: 40px;
			}
		.bento-wide { grid-column: 1; grid-row: 1; }
		.bento-square-1 { grid-column: 1; grid-row: 2; }
		.bento-square-2 { grid-column: 1; grid-row: 3; }
		}
		
		/* --- SERVICES GRID LAYOUT --- */
.vf-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Forces exactly 3 columns on desktop */
    gap: 30px;
}

/* Ensure the grid doesn't break on smaller screens */
@media (max-width: 991px) {
    .vf-services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 767px) {
    .vf-services-grid {
        grid-template-columns: 1fr; /* 1 column on mobile phones */
    }
}

/* --- SERVICE CARD BASE (Dark Theme) --- */
.vf-svc-card {
    background: rgba(0, 0, 0, 0.4); /* The sleek black mask */
    backdrop-filter: blur(12px); /* High-end glass blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle edge highlight */
    border-radius: 16px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hover State */
.vf-svc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(246, 143, 29, 0.4); /* Subtle orange glow */
    background: rgba(0, 0, 0, 0.7); /* Deepens the mask on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); /* Stronger shadow for depth */
}

/* Card Icon */
.svc-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.15), rgba(234, 59, 96, 0.15));
    color: var(--brand-orange, #f68f1d);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.vf-svc-card:hover .svc-icon {
    transform: scale(1.1);
}

/* Card Typography */
.svc-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 0.02em;
}

.svc-desc {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 400 !important; 
    line-height: 1.6;
    margin-bottom: 10px; /* Reduces the gap to exactly 10px before the tags */
    flex-grow: 1; 
    width: 100%; 
}

/* Card Tags (Pills) */
.svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.svc-tags span {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- LIGHT MODE ADAPTATIONS --- */
[data-theme="light"] .vf-svc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .vf-svc-card:hover {
    border-color: var(--brand-orange, #f68f1d);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .svc-title {
    color: #0f172a;
}

[data-theme="light"] .svc-desc {
    color: #475569;
}

[data-theme="light"] .svc-icon {
    background: rgba(246, 143, 29, 0.1);
}

[data-theme="light"] .svc-tags span {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}
		
		/* --- V4 SECTION TITLE --- */
.section-title-v4 {
    font-family: 'Bakbak One', sans-serif;
    text-transform: uppercase;
    font-size: 2.5rem;
    letter-spacing: 0.04em;
    position: relative;
    display: inline-block;
    padding-bottom: 16px; /* Space for the decorative line */
    margin-bottom: 0;
    
    /* Default Light Mode: Dark Text */
    color: var(--text-main, #111827); 
    transition: color 0.3s ease;
}

/* Dark Mode: Light Text */
[data-theme="dark"] .section-title-v4 {
    color: #ffffff; 
}

/* Decorative Glowing Accent Line */
.section-title-v4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 5px;
    background: linear-gradient(90deg, var(--brand-orange, #f68f1d), #ea3b60);
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(246, 143, 29, 0.4); /* Subtle glow matching the brand orange */
    transition: width 0.3s ease;
}

/* Optional: Line expands slightly when hovering over the title block */
.section-title-v4:hover::after {
    width: 120px;
}

.vf-services-wrapper-v4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Locks it into a clean 2x2 grid */
    gap: 40px; /* Margin/Spacing between the cards */
    margin: 50px auto 60px auto; /* Top margin, centered horizontally, bottom margin */
    padding: 15px; /* Adds padding so the drop-shadows and hover lifts don't get clipped */
    max-width: 1200px; /* Prevents the cards from stretching too wide on massive monitors */
}

/* Mobile Adjustments - Stacks the cards neatly with safe margins */
@media (max-width: 991px) {
    .vf-services-wrapper-v4 {
        grid-template-columns: 1fr; /* 1 column on tablets/phones */
        gap: 30px;
        margin-top: 30px;
        padding: 10px;
    }
}

.vf-svc-card-v4 {
    background: rgba(25, 25, 25, 0.4); /* Glass black */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px; /* Softer, highly modern corners */
    padding: 55px 40px 40px;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
    color: var(--text-main, #fff);
    min-height: 350px;
}

/* Light Mode Adaptation */
[data-theme="light"] .vf-svc-card-v4 {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    color: #111827;
}

.vf-svc-card-v4:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    border-color: rgba(246, 143, 29, 0.4); /* Brand orange subtle glow */
}

[data-theme="light"] .vf-svc-card-v4:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Internal Card Elements adapted for V4 */
.vf-svc-card-v4 .service-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.vf-svc-card-v4 .service-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.1), rgba(234, 59, 96, 0.1));
    color: var(--brand-orange, #f68f1d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 1px solid rgba(246, 143, 29, 0.2);
    flex-shrink: 0;
}

.vf-svc-card-v4 h4 {
    font-family: 'Bakbak One', sans-serif;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: normal; 
    margin-bottom: 0; 
    color: var(--brand-orange, #f68f1d); /* Orange for dark mode */
    line-height: 1.2;
    letter-spacing: 0.02em;
}

[data-theme="light"] .vf-svc-card-v4 h4 { 
    color: var(--text-main, #111827); /* Dark text for light mode */
}

.vf-svc-card-v4 h4,
[data-theme="light"] .vf-svc-card-v4 h4,
[data-theme="dark"] .vf-svc-card-v4 h4 {
    color: var(--brand-orange, #f68f1d);
}

.vf-svc-card-v4 p {
    color: #ffffff !important; 
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 30px; 
}

/* Light Theme = Dark Text */
[data-theme="light"] .vf-svc-card-v4 p {
    color: #111827 !important; 
}

.vf-svc-card-v4 h4 {
    color: #f68f1d !important; /* Using the exact hex code with !important to force it */
}

.vf-svc-card-v4 .service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto; 
}

.vf-svc-card-v4 .tag-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.85rem;
    padding: 8px 16px; 
    border-radius: 50px;
    font-weight: 600;
    transition: background 0.3s ease;
    white-space: nowrap; 
}

[data-theme="light"] .vf-svc-card-v4 .tag-pill {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #334155;
}

.vf-svc-card-v4 .tag-pill:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .vf-svc-card-v4 .tag-pill:hover {
    background: #e2e8f0;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto; 
}

.tag-pill {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.85rem;
    padding: 8px 16px; /* Slightly thicker for better touch targets */
    border-radius: 50px;
    font-weight: 600;
    transition: background 0.3s ease;
    white-space: nowrap; /* Prevents text inside the pill from breaking into two lines */
}

[data-theme="dark"] .tag-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tag-pill:hover {
    background: #e2e8f0;
}



/* --- 1. DARK THEME (Base / Default) --- */
.services-offered-section,
[data-theme="dark"] .services-offered-section {
    color: #f8fafc; /* Global light text for the section */
}

/* Section Title */
[data-theme="dark"] .section-title-v4 {
    color: #ffffff; 
}

/* Card Titles (Keeping your Brand Orange from the image) */
[data-theme="dark"] .vf-svc-card-v4 h4 {
    color: var(--brand-orange, #f68f1d);
}

/* Card Descriptions */
[data-theme="dark"] .vf-svc-card-v4 p {
    color: #cbd5e1; /* Soft light gray for easy reading */
}

/* Tag Pills */
[data-theme="dark"] .tag-pill {
    color: #ffffff;
}


/* --- 2. LIGHT THEME OVERRIDES --- */
[data-theme="light"] .services-offered-section {
    color: #0f172a; /* Global dark text for the section */
}

/* Section Title */
[data-theme="light"] .section-title-v4 {
    color: #111827; /* Solid dark text */
}

/* Card Titles */
[data-theme="light"] .vf-svc-card-v4 h4 {
    color: #111827; /* Solid dark text */
}

/* Card Descriptions */
[data-theme="light"] .vf-svc-card-v4 p {
    color: #4b5563; /* Medium-dark slate for easy reading */
}

/* Tag Pills */
[data-theme="light"] .tag-pill {
    color: #1e293b; /* Deep slate */
}

/* --- STRICT TEXT COLOR RULES --- */

/* 1. Titles (Always Orange) */
.vf-corp-card h4 {
    font-family: 'Bakbak One', sans-serif;
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    color: #f68f1d !important; 
}

/* 2. Descriptions (Dark Mode = Light Text | Light Mode = Dark Text) */
.vf-corp-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #f8fafc !important; /* Light text for dark mode */
}

[data-theme="light"] .vf-corp-card p {
    color: #4b5563 !important; /* Dark text for light mode */
}

/* 3. Corporate Tags (Outlined style, Theme-Aware) */
.vf-corp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.vf-corp-tags span {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px; /* Professional square-ish tags */
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #ffffff !important; /* Light text for dark mode */
}

[data-theme="light"] .vf-corp-tags span {
    border: 1px solid #cbd5e1;
    color: #1e293b !important; /* Dark text for light mode */
}

/* =========================================================
   AVAIL OUR SERVICES: CORPORATE SPLIT LAYOUT
========================================================= */
.vf-avail-section {
    padding: 100px 0;
    position: relative;
}

/* Typography & Colors (Theme Rules Applied) */
.vf-avail-title {
    font-family: 'Bakbak One', sans-serif;
    text-transform: uppercase;
    font-size: 2.8rem;
    line-height: 1.1;
    color: #ffffff; /* Dark Theme Default */
}

.text-orange {
    color: var(--brand-orange, #f68f1d) !important;
}

.vf-avail-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 600; /* Semi-bold */
    color: #e2e8f0; /* Crisp light text for dark mode */
}

.vf-contact-info span {
    color: #ffffff;
    font-weight: 600;
}

/* Form Card Styling */
.vf-form-card {
    background: rgba(25, 25, 25, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.vf-form-card .form-title {
    font-family: 'Bakbak One', sans-serif;
    color: var(--brand-orange, #f68f1d);
    text-transform: uppercase;
    font-size: 1.8rem;
    letter-spacing: 0.02em;
}

/* Input Fields */
.vf-input, .vf-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important; /* Dark Theme Default */
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.vf-input::placeholder {
    color: #64748b;
}

.vf-input:focus, .vf-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-orange, #f68f1d);
    box-shadow: 0 0 0 4px rgba(246, 143, 29, 0.15);
    outline: none;
}

/* Submit Button */
/* --- FILLING GRADIENT BUTTON --- */
.vf-btn-submit {
    position: relative;
    background: transparent; /* Start transparent to show the fill effect */
    color: #ffffff !important;
    border: 2px solid var(--brand-orange, #f68f1d);
    border-radius: 12px;
    padding: 18px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden; /* Essential to keep the fill inside the button */
    z-index: 1;
    transition: all 0.4s ease;
    cursor: pointer;
}

/* The Gradient Fill Layer */
.vf-btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Start at zero width */
    height: 100%;
    background: linear-gradient(90deg, var(--brand-orange, #f68f1d), #ea3b60);
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1; /* Place behind the text */
}

/* Hover State */
.vf-btn-submit:hover {
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(246, 143, 29, 0.4);
    transform: translateY(-3px);
}

.vf-btn-submit:hover::before {
    width: 100%; /* Fill the entire button */
}

/* Light Mode Adaptation for the Border/Text before hover */
[data-theme="light"] .vf-btn-submit {
    color: #111827 !important;
    border: 2px solid #111827;
}

[data-theme="light"] .vf-btn-submit:hover {
    color: #ffffff !important; /* Text turns white when the dark gradient fills in */
    border-color: transparent;
}

/* --- LIGHT THEME OVERRIDES --- */
[data-theme="light"] .vf-avail-title {
    color: #111827; 
}

/* --- SUBTITLE (Dark Theme Default: Light Text) --- */
.vf-avail-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 600; /* Semi-bold */
    color: #e2e8f0; /* Crisp light text for dark mode */
}

/* --- SUBTITLE (Light Theme Override: Dark Text) --- */
[data-theme="light"] .vf-avail-subtitle {
    color: #334155; /* Deep slate/dark text for light mode */
}

[data-theme="light"] .vf-contact-info span {
    color: #111827;
}

[data-theme="light"] .vf-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .vf-input, 
[data-theme="light"] .vf-select {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #111827 !important;
}

[data-theme="light"] .vf-input::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .vf-input:focus, 
[data-theme="light"] .vf-select:focus {
    background: #ffffff;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .vf-avail-section { padding: 60px 0; }
    .vf-form-card { padding: 30px 20px; }
    .vf-avail-title { font-size: 2.2rem; }
}

/* --- INPUT WRAPPER & HOVER TOOLTIP --- */
.vf-input-wrap {
    position: relative;
    width: 100%;
}

/* Add padding to the right so typing doesn't overlap the icon */
.vf-input-wrap .vf-input {
    padding-right: 45px; 
}

/* Info Icon Placement */
.vf-info-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8; /* Subtle gray */
    cursor: help;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.vf-info-icon:hover {
    color: var(--brand-orange, #f68f1d);
}

/* Custom CSS Tooltip Box */
.vf-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    right: -10px; /* Align to the icon */
    width: max-content;
    max-width: 220px; /* Keeps text nicely wrapped */
    background: #1e293b; /* Deep slate background */
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none; /* Prevents mouse flickering */
    line-height: 1.4;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tooltip Little Triangle Pointer */
.vf-info-icon::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    right: 5px;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Show tooltip on hover */
.vf-info-icon:hover::after,
.vf-info-icon:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Light Mode Overrides for the Icon */
[data-theme="light"] .vf-info-icon { color: #64748b; }
[data-theme="light"] .vf-info-icon:hover { color: var(--brand-orange, #f68f1d); }
/* Note: The tooltip box itself stays dark in light mode for maximum contrast and premium feel */

/* --- CONTACT BOX DESIGN --- */
.vf-contact-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
    display: block;      
    width: 100%;         
    max-width: 100%;    
    text-align: left;
}

.contact-box-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-orange);
    margin-bottom: 25px;
    font-weight: 700;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-item:last-child { margin-bottom: 0; }

.icon-circle {
    width: 45px;
    height: 45px;
    background: rgba(246, 143, 29, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-orange);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-text {
    display: flex;
    flex-direction: column;
}

.contact-text label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #64748b; /* Muted slate */
    margin-bottom: 2px;
    font-weight: 600;
}

.contact-text span {
    font-size: 1.05rem;
    font-weight: 500;
    color: #ffffff; /* Dark Mode default */
}

/* --- LIGHT MODE ADAPTATION --- */
[data-theme="light"] .vf-contact-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .contact-text span {
    color: #111827;
}

[data-theme="light"] .icon-circle {
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- DROPDOWN OPTION VISIBILITY --- */
/* Dark Mode Options (Default) */
.vf-select option {
    background-color: #1a1a1a; /* Solid dark background */
    color: #ffffff;
}

/* Light Mode Options */
[data-theme="light"] .vf-select option {
    background-color: #ffffff; /* Solid white background */
    color: #111827;
}

/* --- CAPTCHA PLACEHOLDER STYLING --- */
.vf-captcha-placeholder {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #cbd5e1; /* Dark mode default */
    font-size: 0.95rem;
    font-weight: 500;
}

.vf-captcha-checkbox {
    width: 28px;
    height: 28px;
    border: 2px solid #64748b;
    border-radius: 4px;
    background: #0f172a;
    margin-right: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vf-captcha-checkbox:hover {
    border-color: var(--brand-orange, #f68f1d);
}

.vf-captcha-logo {
    text-align: center;
    color: #64748b;
    line-height: 1;
}

.vf-captcha-logo i {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.vf-captcha-logo small {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- LIGHT MODE CAPTCHA --- */
[data-theme="light"] .vf-captcha-placeholder {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #4b5563;
}

[data-theme="light"] .vf-captcha-checkbox {
    background: #ffffff;
    border-color: #94a3b8;
}

[data-theme="light"] .vf-captcha-logo {
    color: #94a3b8;
}

/* --- FORM LABELS (OUTSIDE INPUTS) --- */
.vf-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    color: #e2e8f0; /* Dark Theme Default: Light Text */
}

/* Light Theme Override: Dark Text */
[data-theme="light"] .vf-form-label {
    color: #334155; 
}

/* --- HERO BUTTONS OVERRIDE --- */

/* 1. Decrease overall button height (desktop & mobile) */
.hero-actions .btn-glow,
.hero-actions .btn-glass {
    padding: 12px 24px; /* Reduced padding to lower the height */
    /* Add this if your buttons use flexbox for icon alignment: */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
}

/* 2. Mobile Friendly: Full Width Stack */
@media (max-width: 767px) {
    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 16px; /* Space between the buttons when stacked */
        width: 100%;
    }

    .hero-actions .btn-glow,
    .hero-actions .btn-glass {
        width: 100%; /* Spans left to right */
    }
}

/* --- DIGITAL MARKETING SERVICES SECTION --- */
.vf-dm-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.vf-dm-header {
    margin-bottom: 50px;
}

.vf-dm-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff; /* Dark mode default */
    margin-bottom: 20px;
}

.vf-dm-header p {
    color: #cbd5e1; /* Dark mode default */
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- SERVICE CARD BASE (Dark Theme) --- */
.vf-svc-card {
    background: rgba(0, 0, 0, 0.4); /* The sleek black mask */
    backdrop-filter: blur(12px); /* High-end glass blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle edge highlight */
    border-radius: 16px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hover State */
.vf-svc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(246, 143, 29, 0.4); /* Subtle orange glow */
    background: rgba(0, 0, 0, 0.7); /* Deepens the mask on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); /* Stronger shadow for depth */
}

/* Card Content Styling */
.vf-svc-card h4 {
    font-family: 'Bakbak One', sans-serif !important; /* Forces the Bakbak One font */
    color: #ffffff; /* Dark mode default */
    font-size: 1.25rem;
    margin-bottom: 15px;
    letter-spacing: 0.5px; /* Slight spacing helps Bakbak One breathe */
}

/* Card Sub-text (Updated to Weight 600 & Justified) */
.vf-svc-card p {
    color: #94a3b8; /* Dark mode default */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 600; /* Increased text weight */
    text-align: justify; /* Justifies the text block */
}

/* Banner Title (Updated to Bakbak One) */
.vf-dm-banner h4 {
    font-family: 'Bakbak One', sans-serif !important;
    letter-spacing: 0.5px;
}
/* --- LIGHT MODE OVERRIDES FOR NEW CARDS --- */
[data-theme="light"] .vf-svc-card h4 {
    color: #111827; 
}

[data-theme="light"] .vf-svc-card p {
    color: #4b5563; 
}

[data-theme="light"] .vf-svc-card {
    background: rgba(255, 255, 255, 0.7); /* Light glass */
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

[data-theme="light"] .vf-svc-card:hover {
    background: #ffffff; /* Solidifies on hover */
    border-color: var(--brand-orange, #f68f1d);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.vf-dm-icon {
    width: 60px;
    height: 60px;
    background: rgba(246, 143, 29, 0.1);
    color: var(--brand-orange);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 25px;
}

.vf-dm-card h4 {
    color: #ffffff; /* Dark mode default */
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.vf-dm-card p {
    color: #94a3b8; /* Dark mode default */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Testimonial Block */
.vf-dm-testimonial {
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(246, 143, 29, 0.2);
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vf-dm-stars {
    color: var(--brand-orange);
    font-size: 1.2rem;
    margin-bottom: 20px;
    letter-spacing: 5px;
}

.vf-dm-quote {
    font-size: 1.25rem;
    color: #ffffff; /* Dark mode default */
    font-style: italic;
    font-weight: 500;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Banner Inline Block */
.vf-dm-banner {
    background: rgba(0, 0, 0, 0.4); /* The sleek black mask */
    backdrop-filter: blur(12px); /* High-end glass blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle edge highlight */
    border-radius: 16px; /* Matched to the cards */
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

/* Light Mode Override for Banner (Matches Service Card Light Base, No Hover) */
[data-theme="light"] .vf-dm-banner {
    background: rgba(255, 255, 255, 0.7); /* Light glass */
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* --- LIGHT MODE OVERRIDES --- */
[data-theme="light"] .vf-dm-header h2,
[data-theme="light"] .vf-dm-card h4,
[data-theme="light"] .vf-dm-quote {
    color: #111827; /* Dark text for light mode */
}

[data-theme="light"] .vf-dm-header p,
[data-theme="light"] .vf-dm-card p {
    color: #4b5563; /* Slate text for light mode */
}

[data-theme="light"] .vf-dm-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

[data-theme="light"] .vf-dm-card:hover {
    background: #f8fafc;
    border-color: var(--brand-orange, #f68f1d);
}

[data-theme="light"] .vf-dm-testimonial {
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.05), #ffffff);
    border-color: rgba(246, 143, 29, 0.3);
}

[data-theme="light"] .vf-dm-banner {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* Ensure hardcoded white text flips to dark in Light Mode */
[data-theme="light"] [data-theme-target="title"] { color: #111827 !important; }
[data-theme="light"] [data-theme-target="text"] { color: #4b5563 !important; }

/* Custom Utility for Heading Theme Swapping */
.vf-title-navy-white {
    color: #ffffff !important; /* Default (forces white for dark mode) */
    transition: color 0.3s ease;
}

[data-theme="light"] .vf-title-navy-white {
    color: var(--brand-navy) !important; /* Forces Verafede Navy Blue for light mode */
}

/* --- BRAND SEPARATOR LINE --- */
.vf-brand-line {
    display: block;
    width: 250px;
    max-width: 80%;
    height: 5px;
    background: var(--vf-grad) !important;
    border-radius: 5px;
    /* The Glow (Dark Mode Default) */
    box-shadow: 0 0 15px rgba(246, 143, 29, 0.7), 0 0 5px rgba(234, 59, 96, 0.5);
    transition: box-shadow 0.3s ease;
}

/* Remove glow in Light Mode */
[data-theme="light"] .vf-brand-line {
    box-shadow: none !important;
}

/* --- SLIDING GRADIENT BUTTON --- */
.btn-vf-slide {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle glass border */
    color: #ffffff; 
    border-radius: 30px; /* Pill shape */
    text-decoration: none;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05); /* Slight glass fill */
}

/* Fix text color for Light Mode default state */
[data-theme="light"] .btn-vf-slide {
    color: #111827;
    border-color: rgba(0, 0, 0, 0.2);
}

/* The Sliding Gradient */
.btn-vf-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--vf-grad); /* Pulls your Verafede gradient */
    z-index: -1;
    transform: translateX(-101%); /* Hides it to the left initially */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* The Hover Action */
.btn-vf-slide:hover::before {
    transform: translateX(0); /* Slides it in */
}

.btn-vf-slide:hover {
    color: #ffffff !important; /* Forces text to white so it reads well over the gradient */
    border-color: transparent !important;
    box-shadow: 0 5px 15px rgba(246, 143, 29, 0.4); /* Adds a subtle glow */
}

/* --- BOOST SECTION CARDS (Completely Static in All Modes) --- */

/* 1. Kill the transition animation entirely */
.vf-boost-section .vf-svc-card {
    transition: none !important; 
}

/* 2. Force Dark Mode to stay exactly the same on hover */
.vf-boost-section .vf-svc-card:hover {
    transform: none !important; /* No lifting */
    box-shadow: none !important; /* Kills any dark mode glow */
    border-color: rgba(255, 255, 255, 0.08) !important; /* Locks the standard glass border */
    background: rgba(0, 0, 0, 0.4) !important; /* Locks the standard glass background */
}

/* 3. Force Light Mode to be solid white and stay exactly the same on hover */
[data-theme="light"] .vf-boost-section .vf-svc-card,
[data-theme="light"] .vf-boost-section .vf-svc-card:hover {
    transform: none !important;
    background: #ffffff !important; /* Solid white */
    border-color: #e2e8f0 !important; /* Clean light border */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important; /* Soft, static shadow */
}

.interactive-article-wrapper {
    perspective: 1000px; /* Required for the 3D transform effect */
}

.article-frame {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transition: transform 0.1s ease-out, box-shadow 0.3s ease; 
    transform-style: preserve-3d;
    will-change: transform;
}

.interactive-article-wrapper:hover .article-frame {
    box-shadow: 0 30px 50px rgba(0,0,0,0.15);
}

.frame-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.4), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.interactive-article-wrapper:hover .frame-glow { 
    opacity: 0.7; 
}

.frame-img-wrapper { 
    position: relative; 
    width: 100%; 
    height: 470px; 
    overflow: hidden; 
}

.frame-img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    transition: transform 0.6s ease;
}

.interactive-article-wrapper:hover .frame-img { 
    transform: scale(1.08); 
}

.frame-tag {
    position: absolute; 
    top: 15px; 
    left: 15px;
    background: rgba(0,0,0,0.6); 
    color: white;
    backdrop-filter: blur(5px); 
    font-size: 0.75rem;
    padding: 5px 12px; 
    border-radius: 50px; 
    text-transform: uppercase;
    font-weight: 600; 
    letter-spacing: 1px;
    z-index: 3;
}

.frame-content { 
    padding: 30px; 
    position: relative;
    z-index: 3;
}

.frame-title {
    font-size: 1.5rem; 
    letter-spacing: -0.04em;
    margin-bottom: 12px; 
    line-height: 1.2;
}

.frame-desc {
    font-size: 0.95rem; 
    color: var(--text-muted);
    line-height: 1.5; 
    margin-bottom: 20px;
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

/* Animations */
@keyframes pulse-glow { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
.fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }

/* DARK MODE OVERRIDES */
[data-theme="dark"] .search-box-modern { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .search-box-modern:focus-within { background: rgba(0, 0, 0, 0.6); border-color: var(--brand-orange); }
[data-theme="dark"] .cat-chip { border-color: rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.2); }
[data-theme="dark"] .article-frame { background: rgba(2, 46, 71, 0.4); border-color: rgba(255, 255, 255, 0.05); }


/* --- 1. THE CTA CARD - Default LIGHT (WHITE) Theme --- */
.vf-cta-card {
    background-color: #ffffff; /* FORCED SOLID WHITE IN LIGHT MODE */
    border-radius: 32px; /* Smooth, prominent corners */
    border: 1px solid #e2e8f0; /* Ultra-subtle light gray edge */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04); /* Soft, expansive shadow for premium feel */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure inner elements are colored correctly in light mode within the white card */
[data-theme="light"] .vf-cta-card .vf-title-navy-white {
    color: var(--brand-navy) !important; /* Forcing text to navy so it shows on white */
}

[data-theme="light"] .vf-cta-card .hero-subtitle {
    color: rgba(2, 46, 71, 0.7); /* Muted navy body text for readability */
}

/* Ensure existing hero section typography classes apply inside the card */
.vf-cta-card .hero-title {
    margin-bottom: 20px;
}
.vf-cta-card .hero-subtitle {
    max-width: 90%;
    margin-bottom: 40px;
}
.vf-cta-card .hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* --- 2. DARK THEME OVERRIDES --- */
[data-theme="dark"] .vf-cta-card {
    background-color: var(--brand-navy, #022e47); /* Switches to Verafede Dark Blue in Dark Mode */
    border-color: rgba(255, 255, 255, 0.05); /* Subtle white edge */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth on dark BG */
}

/* Inner element adjustments for Dark Mode */
[data-theme="dark"] .vf-cta-card .vf-title-navy-white {
    color: #ffffff !important; /* Forces title to white */
}

[data-theme="dark"] .vf-cta-card .hero-subtitle {
    color: rgba(255, 255, 255, 0.6); /* Muted white body text */
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .vf-cta-card {
        padding: 40px 20px !important;
    }
}

/* --- SERVICES GRID LAYOUT --- */
.vf-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important; /* Forces 3x2 grid layout */
    gap: 30px;
}

/* Ensure mobile responsiveness doesn't break */
@media (max-width: 991px) {
    .vf-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
    .vf-services-grid { grid-template-columns: 1fr !important; }
}

/* --- SERVICE CARD BASE (Dark Theme) --- */
.vf-svc-card {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 16px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* Strict Alignment Fixes */
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* Locks contents to the left */
    text-align: left !important; /* Overrides any global text-center classes */
    height: 100%;
}

.vf-svc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(246, 143, 29, 0.4); 
    background: rgba(0, 0, 0, 0.7); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); 
}

.svc-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.15), rgba(234, 59, 96, 0.15));
    color: var(--brand-orange, #f68f1d);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.vf-svc-card:hover .svc-icon {
    transform: scale(1.1);
}

.svc-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 0.02em;
    width: 100%;
}

.svc-desc {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 400 !important; /* Removes the semi-bold */
    margin-bottom: 10px !important; /* Exactly 10px gap before tags */
    flex-grow: 1; /* Pushes tags to the very bottom */
    width: 100%;
}

/* Card Tags (Pills) */
.svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%; /* Spans full card */
    justify-content: flex-start !important; /* Snaps left */
    margin-top: auto !important; /* Locks to the bottom baseline */
}

.svc-tags span {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- LIGHT MODE ADAPTATIONS --- */
[data-theme="light"] .vf-svc-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .vf-svc-card:hover {
    border-color: var(--brand-orange, #f68f1d);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .svc-title { color: var(--brand-orange, #f68f1d) !important; }
[data-theme="light"] .svc-desc { color: #475569; }
[data-theme="light"] .svc-icon { background: rgba(246, 143, 29, 0.1); }
[data-theme="light"] .svc-tags span {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}

		/* --- BRAND LOGO THEME ADAPTATION --- */
		/* Set a uniform height so it fits cleanly in the navbar */
		.brand-logo {
			height: 70px; /* Adjust this value if you want the logo bigger or smaller */
			width: auto;
		object-fit: contain;
		}

		/* Default (Light Theme) Settings */
		.logo-light {
			display: block;
		}
		.logo-dark {
			display: none;
		}

		/* Dark Theme Settings */
		/* Targets the images when your JS adds data-theme="dark" to the html tag */
		html[data-theme="dark"] .logo-light {
			display: none;
		}
		html[data-theme="dark"] .logo-dark {
			display: block;
		}
		
		/* --- DARK MODE OVERRIDE FOR SUBMIT BUTTON --- */
[data-theme="dark"] .vf-btn-submit {
    background: #0f172a; /* A deep, premium dark slate */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .vf-btn-submit:hover {
    background: #1e293b; /* Slightly lighter dark shade on hover for feedback */
    border-color: var(--brand-orange, #f68f1d); /* Subtle brand color pop on hover */
    box-shadow: 0 4px 20px rgba(246, 143, 29, 0.2);
}

/* --- 12. ALTERNATE MODAL STYLES (HERO HEADER & RECEIPT CARD) --- */

.vf-modal-alt {
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 25px 50px rgba(2, 46, 71, 0.15);
    overflow: hidden; /* Keeps the header neatly inside the rounded corners */
}

[data-theme="dark"] .vf-modal-alt {
    background: #0f172a; /* Deep slate to match your aesthetic map card */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hero Header Design */
.vf-modal-header-hero {
    position: relative;
    background: var(--vf-grad);
    padding: 30px 24px;
    overflow: hidden;
}

.hero-header-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%);
    z-index: 0;
}

.header-icon-circle {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Unified Receipt Card */
.vf-info-card {
    background: rgba(2, 46, 71, 0.02);
    border: 1px solid rgba(2, 46, 71, 0.06);
    border-radius: 20px;
    padding: 24px;
}

[data-theme="dark"] .vf-info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Rows inside the card */
.vf-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed rgba(2, 46, 71, 0.15);
}

[data-theme="dark"] .vf-info-row {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Text Styles */
.vf-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.vf-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

[data-theme="dark"] .vf-info-value {
    color: #ffffff;
}

/* Specific box for the long message */
.vf-message-box {
    background: #ffffff;
    border: 1px solid rgba(2, 46, 71, 0.05);
    border-radius: 12px;
    padding: 16px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

[data-theme="dark"] .vf-message-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Ghost Button for Editing */
.btn-edit-alt {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-edit-alt:hover {
    color: var(--text-main);
    background: rgba(2, 46, 71, 0.05);
}

[data-theme="dark"] .btn-edit-alt {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .btn-edit-alt:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

/* --- 13. SUCCESS MODAL SPECIFICS --- */
.vf-success-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.5;
}

[data-theme="dark"] .vf-success-text {
    color: rgba(255, 255, 255, 0.8);
}

.btn-submit {
    background: var(--vf-grad, linear-gradient(135deg, #f68f1d 0%, #ea3b60 100%));
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    font-size: 1rem; /* Makes the text a good readable size */
    padding: 14px 28px; /* Adds height and width */
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(234, 59, 96, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-submit:hover {
    color: #ffffff;
    transform: translateY(-2px); /* Slight lift effect on hover */
    box-shadow: 0 8px 25px rgba(234, 59, 96, 0.4); /* Stronger shadow on hover */
}

/* Optional: Adds a little slide animation to the arrow icon on hover */
.btn-submit i {
    transition: transform 0.3s ease;
}

.btn-submit:hover i.fa-arrow-right {
    transform: translateX(4px);
}

.btn-edit-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted, #64748b);
    border: 1px solid transparent;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    padding: 14px 24px; /* Matches the 14px top/bottom padding of the submit button */
}

.btn-edit-alt:hover {
    color: var(--text-main, #0f172a);
    background: rgba(2, 46, 71, 0.05);
}

/* Dark Mode Support for the Edit Button */
[data-theme="dark"] .btn-edit-alt {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .btn-edit-alt:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

/* --- Force Dark Blue for Submit Button in Dark Mode --- */

[data-theme="dark"] .vf-btn-submit {
    background: #022e47 !important; /* Forces your brand's deep blue */
    color: #ffffff !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(2, 46, 71, 0.5) !important;
}

[data-theme="dark"] .vf-btn-submit:hover {
    background: #034166 !important; /* Slightly lighter blue for the hover effect */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(2, 46, 71, 0.7) !important;
}

.video-showcase-full {
  width: 100%;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* remove background-color so it inherits the native page bg */
  background: transparent; 
}

.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border: 14px solid #1a1a1a;
  border-radius: 40px;
  background-color: #000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 0 2px #333;
  overflow: hidden;
}

.phone-frame .notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 25px;
  background-color: #1a1a1a;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  z-index: 10;
}

.phone-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  pointer-events: none;
}

.asterisk {
  color: #dc3545; /* Bootstrap danger red */
  font-weight: bold;
}

/* Wrapper to align with textboxes */
.vf-recaptcha-wrapper {
  width: 100%; /* same width as inputs */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--vf-grad);
  box-shadow: 0 6px 12px rgba(2, 46, 71, 0.25);
}

/* Scale the widget to match input width */
.vf-recaptcha-wrapper .g-recaptcha {
  transform: scale(1.05); /* adjust scale to match textbox height */
  transform-origin: center;
}

.iphonee-frame {
  position: relative;
  width: 360px;   /* wider */
  height: 720px;  /* taller */
  border: 14px solid #000;
  border-radius: 48px;
  background: #000;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.iphonee-frame::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 10px;
  background: #333;
  border-radius: 5px;
}

.vf-portfolio-section {
    background-color: var(--vf-dark-blue);
    color: #ffffff;
    padding: 100px 20px;
    font-family: var(--font-body);
    overflow: hidden;
}

.vf-container {
    max-width: 1200px;
    margin: 0 auto;
}

.vf-z-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px;
    gap: 60px;
}

/* Reverses the layout for alternating rows */
.vf-z-row.reverse-row {
    flex-direction: row-reverse;
}

.vf-z-row:last-child {
    margin-bottom: 0;
}


/* =========================================
   Typography & Strict Branding
   ========================================= */
.vf-display-heading {
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 0.7; /* Strict brand rule */
    letter-spacing: -0.04em; /* Prescribed -40 letter spacing */
    margin-bottom: 30px;
    text-transform: uppercase;
    background: var(--vf-grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vf-sub-text {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.3;
    font-size: 1.15rem;
    letter-spacing: -0.001em;
    color: #e0e6ed;
    margin-bottom: 40px;
}

/* =========================================
   Universal Button
   ========================================= */
.vf-btn {
    display: inline-block;
    background: var(--vf-grad);
    color: white !important;
    padding: 16px 32px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    box-shadow: 0 10px 20px rgba(246, 143, 29, 0.3);
}

.vf-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(234, 59, 96, 0.4);
}

/* =========================================
   Overlapping staggered iPhone Frames
   ========================================= */
.vf-phones-wrapper {
    flex: 1;
    position: relative;
    height: 600px;
    max-width: 550px;
    display: flex;
    justify-content: center;
}

.iphone-frame {
    position: absolute;
    width: 280px; /* Slightly scaled down for overlap */
    height: 560px;
    border: 12px solid #000;
    border-radius: 40px;
    background: #000;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

/* Staggering positioning */
.phone-back {
    top: 0;
    left: 20px;
    z-index: 1;
    transform: scale(0.95);
}

.phone-front {
    top: 60px;
    right: 20px;
    z-index: 2;
}

/* Hover Micro-interaction */
.iphone-frame:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(234, 59, 96, 0.3); /* Brand hot pink glow */
    z-index: 3; /* Brings hovered phone to front */
}
.phone-back:hover { transform: translateY(-15px) scale(0.98); }

.iphone-frame::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 8px;
    background: #222;
    border-radius: 5px;
    z-index: 10;
}

/* =========================================
   Facade Pattern (Performance Fix)
   ========================================= */
.vf-facade-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.iphone-frame:hover .vf-ig-overlay {
    opacity: 1;
}

.vf-ig-overlay span {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 20px;
    border: 2px solid #fff;
    border-radius: 50px;
    text-transform: uppercase;
}

/* =========================================
   Scroll Animations
   ========================================= */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   Mobile Accessibility & Responsiveness
   ========================================= */
@media (max-width: 992px) {
    .vf-z-row, .vf-z-row.reverse-row {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .vf-text-content {
        max-width: 100%;
    }

    .vf-display-heading {
        font-size: 2.8rem;
        /* ACCESSIBILITY FIX: Relax line-height to prevent wrapping overlap */
        line-height: 1.1; 
        margin-bottom: 20px;
    }

    .vf-phones-wrapper {
        height: 500px;
        width: 100%;
    }

    .iphone-frame {
        width: 240px;
        height: 480px;
    }

    .phone-back { left: 0; top: 0; }
    .phone-front { right: 0; top: 40px; }
}

/* 3. Dark Mode Handling */
@media (prefers-color-scheme: dark) {
    :root {
        --vf-text-primary: #ffffff;
        --vf-text-secondary: #f4f4f4; 
        --vf-bg-color: #121212; /* Ensure background is dark if text is white */
    }
}

/* 6. The Display Heading (Fixed Visibility) */
.vf-title-group .vf-display-heading {
    font-family: var(--font-display);
    color: var(--vf-text-primary);
    font-size: 3.5rem; 
    margin: 0;
    line-height: 0.7; 
    letter-spacing: -0.04em; 
    padding-bottom: 10px;
    
    /* Removed static opacity: 0; relying purely on keyframes now */
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

/* 7. The Accent Line */
.vf-accent-line {
    height: 4px;
    width: 100px;
    background: var(--vf-grad);
    animation: drawLine 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}


/* 9. Button & Wrapper */
.vf-btn-wrapper {
    margin-top: 0.5rem;
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.vf-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--vf-grad);
    color: white !important;
    padding: 16px 32px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    box-shadow: 0 10px 20px rgba(246, 143, 29, 0.3);
}

.vf-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px rgba(246, 143, 29, 0.45);
}

/* 10. Animations */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drawLine {
    0% {
        width: 0px;
    }
    100% {
        width: 80px; 
    }
}

/* Glassmorphism Container */
.vf-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem; 
    
    /* Spacing for the "Card" look */
    padding: 3rem; 
    max-width: 600px;
    
    /* The Glass Effect */
    background: var(--vf-glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); /* For Safari support */
    border: 1px solid var(--vf-glass-border);
    border-radius: 24px;
    box-shadow: 0 8px 32px 0 var(--vf-glass-shadow);
}

.vf-accent-line {
    height: 4px;
    background: var(--vf-grad);
    border-radius: 4px;
    /* Removed static width to let the animation handle it */
    animation: drawLine 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

/* Updated Keyframes for a longer line */
@keyframes drawLine {
    0% {
        width: 0px;
    }
    100% {
        width: 150px; /* Extended length */
    }
}

/* 1. Define Default (Light Mode = Dark Text) */
:root {
    /* Verafede Dark Blue for primary headers */
    --vf-text-primary: #022e47; 
    
    /* Verafede Dark Brown for sub-text */
    --vf-text-secondary: #350e19; 
    
    /* Verafede Pink for the eyebrow accent */
    --vf-pink: #ea3b60; 
}

/* 2. Define Dark Mode Overrides (Dark Mode = Light Text) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Crisp white for headers */
        --vf-text-primary: #ffffff; 
        
        /* Soft light gray for sub-text to reduce eye strain */
        --vf-text-secondary: #f4f4f4; 
    }
}

/* 3. Apply the Variables to Your HTML Elements */

.vf-eyebrow {
    color: var(--vf-pink); /* The accent color stays vibrant in both modes */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.vf-sub-text {
    color: var(--vf-text-secondary); /* Automatically switches dark/light */
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.001em;
}