/* --- 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;
        }

        /* 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);
        }

        /* --- 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); }
        }

        /* --- 4. NAVBAR STYLING --- */
		
        .navbar-prestige {
            background: transparent; 
            padding: 1.5rem 0;
            transition: all 0.4s ease-in-out;
        }

        .navbar-prestige.scrolled {
            padding: 15px 0;
            background: var(--nav-bg-scrolled);
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 20px rgba(0,0,0, 0.1);
        }
        
        [data-theme="dark"] .navbar-brand .logo-text {
             background: linear-gradient(120deg, #f68f1d 40%, #ffffff 50%, #ea3b60 75%, #f68f1d 65%);
             background-size: 200% auto;
             -webkit-background-clip: text;
              background-clip: text; /* The standard property to satisfy VS Code */
             -webkit-text-fill-color: transparent;
        }

        /* --- Updated Nav Link Styling --- */
		.nav-link {
			font-family: var(--font-body); 
			font-weight: 700; /* Changed from 500 to 700 to make the text bold */
			color: var(--text-main) !important;
			margin: 0 10px; 
			position: relative; 
			transition: color 0.3s ease-in-out;
			padding-bottom: 5px; /* Adds breathing room between the text and the underline */
		}

		/* Orange text color when hovered or active */
			.nav-link:hover, .nav-link.active { 
			color: #f68f1d !important; 
		}

		/* Setup for the gradient underline */
		.nav-link::after {
			content: '';
			position: absolute;
			width: 0; /* Starts at 0 width (invisible) */
			height: 3px; /* Thickness of the underline */
			bottom: 0;
			left: 0;
    
			/* Using your specified gradient */
			background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange) 65%, var(--brand-pink) 100%);
			transition: width 0.3s ease-in-out;
			border-radius: 2px; /* Optional: rounds the edges of the underline */
			}

			/* Expand the underline to 100% width on hover and active states */
			.nav-link:hover::after, 
			.nav-link.active::after {
			width: 100%;
		}

        /* --- 5. NAVBAR CONTACT BUTTON (Smaller & Static) --- */
		.btn-nav-contact {
			background: var(--vf-grad); 
			color: white !important; 
			padding: 8px 22px; /* Decreased padding to make it smaller */
			border-radius: 50px; 
			text-decoration: none; 
			font-family: var(--font-body);
			font-weight: 700; /* Uses the bold rule */
			font-size: 0.8rem; /* Scaled down font size */
			letter-spacing: 1px;
			text-transform: uppercase; 
			display: inline-flex; 
			align-items: center; 
			border: none; 
			position: relative; 
			z-index: 1; 
			transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
			box-shadow: 0 4px 10px rgba(246, 143, 29, 0.2);
			margin-right: 15px; /* Spacing for the theme toggle */
		}

		.btn-nav-contact:hover { 
			transform: translateY(-2px); 
			color: white; 
			box-shadow: 0 8px 20px rgba(246, 143, 29, 0.4); 
		}

		@media (max-width: 991px) {
			.btn-nav-contact { 
				margin-right: 0; 
				margin-bottom: 15px; 
				width: 100%; 
				justify-content: center; 
			}
		}

        /* --- 6. CAPSULE TOGGLE (Ball holds Icon) --- */
        .theme-switch-wrapper {
            display: flex; align-items: center; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .theme-switch-track {
            width: 70px; height: 36px;
            background-color: #dbe4eb; 
            border-radius: 50px;
            position: relative;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
            transition: background-color 0.4s;
        }

        [data-theme="dark"] .theme-switch-track {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .theme-switch-ball {
            position: absolute;
            top: 3px; left: 3px;
            width: 30px; height: 30px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            
            /* Center the icon inside the ball */
            display: flex; align-items: center; justify-content: center;
        }

        [data-theme="dark"] .theme-switch-ball {
            transform: translateX(34px); /* Move to right */
            background-color: #022e47; /* Dark ball */
        }

        /* Icons inside the ball */
        .ball-icon {
            font-size: 14px;
            position: absolute;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .icon-sun { color: #f68f1d; opacity: 1; transform: scale(1); }
        .icon-moon { color: #fff; opacity: 0; transform: scale(0.5) rotate(-90deg); }

        /* Dark Mode State: Swap Opacity & Transform */
        [data-theme="dark"] .icon-sun { opacity: 0; transform: scale(0.5) rotate(90deg); }
        [data-theme="dark"] .icon-moon { opacity: 1; transform: scale(1) rotate(0); }

        /* Mobile Menu Adjustments */
        .navbar-toggler { border: none; padding: 0; }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(2, 46, 71, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        [data-theme="dark"] .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        @media (max-width: 991px) {
            .navbar-collapse {
                background: var(--nav-mobile-bg);
                padding: 20px;
                border-radius: 12px;
                box-shadow: 0 10px 40px var(--nav-mobile-shadow);
                margin-top: 15px;
                border: 1px solid rgba(255,255,255,0.05);
            }
            .nav-item { border-bottom: 1px solid rgba(128,128,128,0.1); padding: 8px 0; }
            .nav-item:last-child { border-bottom: none; }
            
            /* Center elements on mobile */
            .navbar-nav { align-items: center !important; }
            .btn-pulse { margin-right: 0; margin-bottom: 15px; width: 100%; justify-content: center; }
            .theme-switch-wrapper { margin-top: 10px; }
        }
		
		
		/* --- 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: 1.05;
			letter-spacing: -0.04em; 
			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.3;
		}

		.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);
		}

	

		/* --- 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%;
}

/* 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"] .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 */

	/* 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);
	}



	.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 */
}


.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%;
}

.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"] .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;
}

/* --- BRANDING SECTION STYLES --- */
.branding-subtitle {
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 600; 
    color: #e2e8f0; 
}

.branding-glass-card, 
.testimonial-card, 
.branding-cta-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card {
    padding: 30px;
    height: 100%;
}

.branding-cta-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(246, 143, 29, 0.1) 100%);
    border: 1px solid rgba(246, 143, 29, 0.3);
}

.branding-card-title {
    color: #ffffff; /* Dark mode default: light text */
}

.branding-card-text {
    color: #cbd5e1; /* Dark mode default: light text (muted) */
}

/* --- LIGHT THEME OVERRIDES --- */
[data-theme="light"] .branding-subtitle {
    color: #334155; /* Light mode override: dark text */
}

[data-theme="light"] .branding-glass-card,
[data-theme="light"] .testimonial-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

[data-theme="light"] .branding-cta-box {
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
    border: 1px solid #fed7aa;
    box-shadow: 0 15px 40px rgba(246, 143, 29, 0.15);
}

[data-theme="light"] .branding-card-title {
    color: #111827; /* Light mode override: dark text */
}

[data-theme="light"] .branding-card-text {
    color: #4b5563; /* Light mode override: dark text (muted) */
}

[data-theme="light"] .testimonial-card .stars span {
    color: #111827 !important; /* Light mode override: dark text */
}

[data-theme="light"] .border-secondary-subtle {
    border-color: #e2e8f0 !important;
}

/* --- PROJECT CARD SPECIFICS --- */
.project-hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-hover-card:hover {
    transform: translateY(-5px);
}

.project-img-wrap {
    overflow: hidden;
    border-radius: 12px;
}

.project-img-wrap img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-hover-card:hover .project-img-wrap img {
    transform: scale(1.08);
}

.glass-pill {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Light Mode overrides for the pill */
[data-theme="light"] .glass-pill {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111827;
}

/* --- BASE CARD (DARK MODE DEFAULT) --- */
.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;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #ffffff; /* Default text color */
}

/* Inner Mini-Card Styles (Dark Mode) */
.vf-mini-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}
.vf-card-text-muted {
    color: rgba(255, 255, 255, 0.7);
}

/* --- LIGHT MODE OVERRIDES --- */
[data-theme="light"] .vf-svc-card {
    background: rgba(255, 255, 255, 0.85); /* White frosted glass */
    border: 1px solid rgba(0, 0, 0, 0.1); 
    color: #212529; /* Dark text */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

/* Fix inner elements for Light Mode */
[data-theme="light"] .vf-svc-card .vf-mini-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .vf-svc-card .vf-card-text-muted {
    color: #495057; /* Dark gray text */
}
[data-theme="light"] .vf-svc-card .border-top {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* --- THEME IMAGE SWAPPER --- */
/* Dark Mode (Default): Hide the Light Image */
.vf-img-light {
    display: none !important;
}
.vf-img-dark {
    display: block !important;
}

/* Light Mode: Hide the Dark Image, Show the Light Image */
[data-theme="light"] .vf-img-dark {
    display: none !important;
}
[data-theme="light"] .vf-img-light {
    display: block !important;
}

/* --- PROJECT CARDS (Featured Works) --- */
.vf-project-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;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #ffffff; /* Default dark mode text */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vf-project-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); 
}

/* Light Mode Overrides for Project Cards */
[data-theme="light"] .vf-project-card {
    background: rgba(255, 255, 255, 0.85); 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    color: #212529; 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .vf-project-card:hover {
    background: rgba(255, 255, 255, 1); 
    border-color: rgba(246, 143, 29, 0.6);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Pill styling inside the image */
.vf-glass-pill {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- INNOVATIVE SOLUTIONS SECTION --- */

/* Feature Cards (Dark Mode Default) */
.vf-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #ffffff;
}

.vf-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(246, 143, 29, 0.5); /* Verafede Orange */
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.icon-circle-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(246, 143, 29, 0.15);
    color: #f68f1d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Testimonial Cards (Dark Mode Default) */
.vf-testimonial-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
}

.vf-testimonial-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* CTA Box (Dark Mode Default) */
.vf-cta-box {
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
    border: 1px solid rgba(246, 143, 29, 0.3);
    border-radius: 24px;
    backdrop-filter: blur(10px);
    color: #ffffff;
}

/* --- LIGHT MODE OVERRIDES --- */
[data-theme="light"] .vf-feature-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #212529;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .vf-feature-card:hover {
    background: #ffffff;
    border-color: rgba(246, 143, 29, 0.6);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .vf-feature-card p {
    color: #495057; /* Darker grey for better readability */
}

[data-theme="light"] .vf-testimonial-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #495057;
}

[data-theme="light"] .vf-testimonial-card:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .vf-cta-box {
    background: linear-gradient(135deg, rgba(246, 143, 29, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 1px solid rgba(246, 143, 29, 0.4);
    color: #212529;
    box-shadow: 0 10px 40px rgba(246, 143, 29, 0.08);
}

[data-theme="light"] .vf-cta-box .branding-subtitle {
    color: #495057;
}

/* Smooth image zoom on card hover */
.img-zoom {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vf-feature-card:hover .img-zoom {
    transform: scale(1.08);
}

/* --- BASE CARD WRAPPER --- */
.vf-svc-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vf-svc-card:hover {
    transform: translateY(-5px);
}

/* --- INNER CARD (Handles the glassmorphism and image clipping) --- */
.vf-svc-card-inner {
    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;
    /* This translateZ forces hardware acceleration and stops the image from breaking out of the rounded corners on hover */
    transform: translateZ(0); 
    transition: all 0.4s ease;
}

.vf-svc-card:hover .vf-svc-card-inner {
    border-color: rgba(246, 143, 29, 0.5); /* Verafede Orange */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- IMAGE ZOOM EFFECT --- */
.img-zoom {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Ensures the image fills the space without distorting */
    width: 100%;
    height: 100%;
}

.vf-svc-card:hover .img-zoom {
    transform: scale(1.08);
}

/* --- FLOATING ICON FIX --- */
.icon-circle-lg {
    background: #121212; /* Fallback dark background to match dark mode */
    border: 2px solid rgba(246, 143, 29, 0.5);
}

/* --- LIGHT MODE OVERRIDES --- */
[data-theme="light"] .vf-svc-card-inner {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .vf-svc-card:hover .vf-svc-card-inner {
    border-color: rgba(246, 143, 29, 0.6);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .vf-card-title {
    color: #212529 !important;
}

[data-theme="light"] .vf-card-text {
    color: #495057 !important;
}

[data-theme="light"] .icon-circle-lg {
    background: #ffffff !important;
}

/* --- PREMIUM CTA ARROW (Dark Mode Default) --- */
.vf-cta-arrow {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff !important; /* Light text for Dark Mode */
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    animation: smoothBounce 2.5s infinite ease-in-out;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vf-cta-arrow:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
    animation-play-state: paused; /* Pauses bounce on hover */
}

@keyframes smoothBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

/* --- LIGHT MODE OVERRIDES --- */
[data-theme="light"] .vf-cta-arrow {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.03);
    color: #212529 !important; /* Dark text for Light Mode */
}

[data-theme="light"] .vf-cta-arrow:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Ensure the subtitle text also adapts properly in light mode inside the card */
[data-theme="light"] .vf-svc-card-inner .branding-subtitle {
    color: #495057 !important; 
}

/* Enables smooth gliding when clicking anchor links */
html {
    scroll-behavior: smooth;
}

#avail-section {
    scroll-margin-top: 100px; /* Adjust this number to match your navbar height if needed */
}

/* --- 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;
    }
}

/* --- 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 */
}

* --- 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;
}
        
		/* --- 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;
}

.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;
}