/**
 * Habit Consulting Theme Stylesheet
 * Main CSS file with Tailwind-inspired utility classes
 */

/* ==========================================================================
   1. CSS Variables & Root Styles
   ========================================================================== */
/* HFLC visual sync */
.brand-card.hflc h3,
.brand-card.hflc .icon {
  color: var(--hflc-primary);
}

.brand-card.hflc {
  border-top: 4px solid var(--hflc-accent);
}

/* HGC visual sync */
.brand-card.hgc h3,
.brand-card.hgc .icon {
  color: var(--hgc-primary);
}

.brand-card.hgc {
  border-top: 4px solid var(--hgc-accent);
}

:root {
    /* Brand Colors - HFLC */
    --hflc-primary: #0F2A44;
    --hflc-accent: #C9A24D;

    
    /* Brand Colors - HGC */
    --hgc-primary: #2563EB;
    --hgc-accent: #14B8A6;

    
    /* Neutral Colors */
    --color-text: #1F2933;
    --color-text-light: #64748b;
    --color-bg: #FFFFFF;
    --color-bg-light: #F8FAFC;
    --color-border: #E2E8F0;
    
    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Spacing */
    --container-max-width: 1280px;
    --spacing-unit: 1rem;
}

/* ==========================================================================
   2. Base Styles & Reset
   ========================================================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

ul {
    list-style: none;
}

/* ==========================================================================
   3. Container & Layout
   ========================================================================== */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

/* ==========================================================================
   4. Header & Navigation
   ========================================================================== */
/* ================================
   FIX: SERVICES DROPDOWN MENU
   ================================ */

/* Parent item */
.main-navigation .nav-menu li.menu-item-has-children {
    position: relative;
}

/* Hide submenu by default */
.main-navigation .nav-menu li .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 0;
    display: none !important;
    z-index: 99999;
}

/* Show submenu on hover */
.main-navigation .nav-menu li.menu-item-has-children:hover > .sub-menu {
    display: block !important;
}

/* Submenu items */
.main-navigation .nav-menu .sub-menu li {
    width: 100%;
}

/* Submenu links */
.main-navigation .nav-menu .sub-menu li a {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1F2933;
    white-space: nowrap;
}

/* Hover effect */
.main-navigation .nav-menu .sub-menu li a:hover {
    background: #F1F5F9;
    color: var(--hflc-primary);
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.site-branding .site-title {
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
}

.brand-habit {
    color: var(--hflc-primary);
}

.brand-group {
    color: var(--hflc-accent);
}

/* ===== DROPDOWN MENU FIX ===== */

/* Parent menu item */
.main-navigation .menu-item-has-children {
    position: relative;
}

/* Hide submenu by default */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 0;
    display: none;
    z-index: 9999;
}

/* Show submenu on hover */
.main-navigation .menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* Submenu items */
.main-navigation .sub-menu li {
    padding: 0;
}

/* Submenu links */
.main-navigation .sub-menu li a {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: #1F2933;
    white-space: nowrap;
}

/* Submenu hover */
.main-navigation .sub-menu li a:hover {
    background: #F1F5F9;
    color: var(--hflc-primary);
}

.main-navigation .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
}

.main-navigation .nav-menu li a {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s;
}

.main-navigation .nav-menu li a:hover {
    color: var(--hflc-primary);
    background-color: rgba(15, 42, 68, 0.05);
}

.main-navigation .nav-menu li.current-menu-item a,
.main-navigation .nav-menu li.current_page_item a {
    color: var(--hflc-primary);
    background-color: rgba(15, 42, 68, 0.05);
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--hflc-primary);
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--hflc-primary);
    left: 0;
}

.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

.mobile-nav {
    display: none;
}

@media (max-width: 1023px) {
    .desktop-nav {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .mobile-nav {
        display: none;
        padding: 1rem 0;
        border-top: 1px solid var(--color-border);
    }
    
    .mobile-nav.active {
        display: block;
    }
    
    .mobile-nav .mobile-nav-menu {
        list-style: none;
    }
    
    .mobile-nav .mobile-nav-menu li a {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
        color: #64748b;
    }
    
    .mobile-nav .mobile-nav-menu li a:hover {
        background-color: #f1f5f9;
    }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--hflc-primary);
    color: white;
}

.btn-primary:hover {
    background: #1a3a5c;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: transparent;
    color: var(--hflc-primary);
    border: 2px solid var(--hflc-primary);
}

.btn-secondary:hover {
    background: rgba(15, 42, 68, 0.05);
}

.btn-white {
    background: white;
    color: var(--hflc-primary);
}

.btn-white:hover {
    background: #f1f5f9;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-icon {
    transition: transform 0.3s ease;
}

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

/* ==========================================================================
   6. Hero Section
   ========================================================================== */

.hero-section {
    padding: 160px 0 80px;
    background: linear-gradient(to bottom right, #F8FAFC, #FFFFFF, #F8FAFC);
    position: relative;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-highlight {
    color: var(--hflc-primary);
}

.hero-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

@media (max-width: 768px) {
    .hero-section {
        padding: 120px 0 60px;
    }
    
    .hero-title {
        font-size: 1.875rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
}

/* ==========================================================================
   7. Sections
   ========================================================================== */

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 768px;
    margin: 0 auto;
}

/* ==========================================================================
   8. Brand Cards
   ========================================================================== */



.brands-section {
    padding: 80px 0;
    background: white;
}

.brands-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.brand-card {
    background: white;
    border: 2px solid transparent;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.brand-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.hflc-card:hover {
    border-color: rgba(15, 42, 68, 0.2);
}

.hgc-card:hover {
    border-color: rgba(37, 99, 235, 0.2);
}

.brand-card-accent {
    height: 8px;
}

.hflc-card .brand-card-accent {
    background: linear-gradient(to right, var(--hflc-primary), var(--hflc-accent));
}

.hgc-card .brand-card-accent {
    background: linear-gradient(to right, var(--hgc-primary), var(--hgc-accent));
}

.brand-card-content {
    padding: 2rem;
}

.brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
}

.hflc-bg {
    background-color: #c5ced700;
    background-image: url("https://hflc.in/wp-content/themes/habit-consulting-FORENSIC/assets/images/Logo.png?_t=1769415427");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    color: transparent; /* hides any font icon */
    transition: all 0.3s ease;
}

.hgc-bg {
     background-color: #c5ced700;
    background-image: url("https://hflc.in/wp-content/themes/habit-consulting-FORENSIC/assets/images/HGClogo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    color: transparent; /* hides any font icon */
    transition: all 0.3s ease;
}

.brand-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Brand title hover transition */
.hflc-card .brand-title,
.hgc-card .brand-title {
    transition: color 0.25s ease-in-out;
}

/* HFLC title hover */
.hflc-card:hover .brand-title {
    color: var(--hflc-accent); /* Gold */
}

/* HGC title hover */
.hgc-card:hover .brand-title {
    color: #1d4ed8; /* Blue */
}

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

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

.brand-card.hflc h3:hover {
    color: var(--hflc-accent); /* Gold */
}




.brand-description {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.brand-text {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.brand-services {
    list-style: none;
    margin-bottom: 1.5rem;
}

.brand-services li {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #475569;
    display: flex;
    align-items: flex-start;
}

.brand-services li::before {
    content: '✓';
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.hflc-card .brand-services li::before {
    color: var(--hflc-accent);
}

.hgc-card .brand-services li::before {
    color: var(--hgc-accent);
}

.brand-countries {
    margin-bottom: 1rem;
}

.countries-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.countries-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.country-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(37, 99, 235, 0.05);
    color: var(--hgc-primary);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.brand-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    color: white;
}

.hflc-btn {
    background: var(--hflc-primary);
}

.hflc-btn:hover {
    background: #1a3a5c;
}

.hgc-btn {
    background: var(--hgc-primary);
}

.hgc-btn:hover {
    background: #1d4ed8;
}

/* ==========================================================================
   9. Features Grid
   ========================================================================== */

.why-choose-section {
    padding: 80px 0;
    background: var(--color-bg-light);
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.feature-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.feature-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--hflc-primary), var(--hgc-primary));
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

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

.feature-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.feature-text {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
}

/* ==========================================================================
   10. Software Section
   ========================================================================== */
.software-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.software-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: scroll-left 30s linear infinite;
}

.software-logo {
    min-width: 220px;
    padding: 28px 40px;
    border: 1px solid;
    border-radius: 14px;
    text-align: center;
    font-weight: 700;
    background-clip: padding-box;
    white-space: nowrap;
}

/* Pause on hover (UX win) */
.software-slider:hover .software-track {
    animation-play-state: paused;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.software-section {
    padding: 80px 0;
    background: white;
}

.software-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.software-logo {
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.software-logo:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.logo-text {
    font-size: 2rem;
    font-weight: 700;
}

.xero-logo {
    background: rgba(19, 181, 234, 0.05);
    border-color: rgba(19, 181, 234, 0.2);
}

.xero-logo .logo-text {
    color: #13B5EA;
}

.xero-logo:hover {
    border-color: rgba(19, 181, 234, 0.5);
}

.quickbooks-logo {
    background: rgba(44, 160, 28, 0.05);
    border-color: rgba(44, 160, 28, 0.2);
}

.quickbooks-logo .logo-text {
    color: #2CA01C;
}

.quickbooks-logo:hover {
    border-color: rgba(44, 160, 28, 0.5);
}

.zoho-logo {
    background: rgba(228, 37, 39, 0.05);
    border-color: rgba(228, 37, 39, 0.2);
}

.zoho-logo .logo-text {
    color: #E42527;
}

.zoho-logo:hover {
    border-color: rgba(228, 37, 39, 0.5);
}

.tally-logo {
    background: rgba(27, 79, 156, 0.05);
    border-color: rgba(27, 79, 156, 0.2);
}

.tally-logo .logo-text {
    color: #1B4F9C;
}

.tally-logo:hover {
    border-color: rgba(27, 79, 156, 0.5);
}
.busy-logo {
    background: rgba(245, 124, 0, 0.05);
    border-color: rgba(245, 124, 0, 0.2);
}

.busy-logo .logo-text {
    color: #F57C00;
}

.busy-logo:hover {
    border-color: rgba(245, 124, 0, 0.5);
}
.marg-logo {
    background: rgba(106, 27, 154, 0.05);
    border-color: rgba(106, 27, 154, 0.2);
}

.marg-logo .logo-text {
    color: #6A1B9A;
}

.marg-logo:hover {
    border-color: rgba(106, 27, 154, 0.5);
}
.appfolio-logo {
    background: rgba(10, 37, 64, 0.05);
    border-color: rgba(10, 37, 64, 0.2);
}

.appfolio-logo .logo-text {
    color: #0A2540;
}

.appfolio-logo:hover {
    border-color: rgba(10, 37, 64, 0.5);
}
.saral-logo {
    background: rgba(0, 137, 123, 0.05);
    border-color: rgba(0, 137, 123, 0.2);
}

.saral-logo .logo-text {
    color: #00897B;
}

.saral-logo:hover {
    border-color: rgba(0, 137, 123, 0.5);
}
.vyapar-logo {
    background: rgba(46, 125, 50, 0.05);
    border-color: rgba(46, 125, 50, 0.2);
}

.vyapar-logo .logo-text {
    color: #2E7D32;
}

.vyapar-logo:hover {
    border-color: rgba(46, 125, 50, 0.5);
}
.wave-logo {
    background: rgba(30, 136, 229, 0.05);
    border-color: rgba(30, 136, 229, 0.2);
}

.wave-logo .logo-text {
    color: #1E88E5;
}

.wave-logo:hover {
    border-color: rgba(30, 136, 229, 0.5);
}
.sage-logo {
    background: rgba(0, 166, 81, 0.05);
    border-color: rgba(0, 166, 81, 0.2);
}

.sage-logo .logo-text {
    color: #00A651;
}

.sage-logo:hover {
    border-color: rgba(0, 166, 81, 0.5);
}

/* ==========================================================================
   11. CTA Section
   ========================================================================== */

.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--hflc-primary), var(--hgc-primary));
}

.cta-content {
    max-width: 768px;
    margin: 0 auto;
    text-align: center;
}

.cta-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
}

.cta-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

/* ==========================================================================
   12. Page Header
   ========================================================================== */

.page-header {
    padding: 140px 0 60px;
    background: linear-gradient(to bottom right, #F8FAFC, #FFFFFF, #F8FAFC);
    text-align: center;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

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

.page-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================================================
   13. Team Page
   ========================================================================== */

.team-section {
    padding: 80px 0;
    background: white;
}

.team-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.team-tab {
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-tab.active,
.team-tab:hover {
    background: var(--hflc-primary);
    color: white;
}

.team-tab-content {
    display: none;
}

.team-tab-content.active {
    display: block;
}

.team-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.team-brand-title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.team-brand-subtitle {
    color: #64748b;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.team-card {
    background: white;
    border: 2px solid transparent;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.team-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(15, 42, 68, 0.2);
}

.team-card-header {
    padding: 2rem;
}

.team-avatar,
.team-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.team-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: 700;
}

.team-name {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.team-designation {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.team-role {
    font-size: 0.875rem;
    color: #64748b;
}

.team-card-body {
    padding: 0 2rem 2rem;
}

.team-bio {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.team-expertise {
    margin-top: 1.5rem;
}

.expertise-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.expertise-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.team-note {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--color-bg-light);
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    text-align: center;
}

.team-note p {
    color: #475569;
    line-height: 1.7;
}

.no-team-message {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

/* Team Values */
.team-values-section {
    padding: 80px 0;
    background: var(--color-bg-light);
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.value-card {
    background: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: none;
}

.value-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--hflc-primary), var(--hgc-primary));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1rem;
}

.value-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.value-text {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
}

/* ==========================================================================
   14. Contact Page
   ========================================================================== */

.contact-section {
    padding: 80px 0;
    background: white;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Contact Form */
.form-card {
    background: white;
    border: 2px solid var(--color-border);
    border-radius: 1rem;
    padding: 2rem;
}

.form-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-subtitle {
    color: #64748b;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--hflc-primary);
    box-shadow: 0 0 0 3px rgba(15, 42, 68, 0.1);
}

.form-textarea {
    resize: vertical;
    font-family: inherit;
}

.form-message {
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    display: none;
}

.form-message.success {
    display: block;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.form-message.error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Contact Info Cards */
.contact-info-card {
    background: white;
    border: 2px solid transparent;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.hflc-card {
    background: linear-gradient(135deg, rgba(15, 42, 68, 0.05), transparent);
    border-color: rgba(15, 42, 68, 0.1);
}

.hgc-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent);
    border-color: rgba(37, 99, 235, 0.1);
}

.info-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.info-subtitle {
    font-size: 0.875rem;
    color: #64748b;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.info-item-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
}

.info-link,
.info-text {
    font-size: 0.875rem;
    color: #64748b;
}

.info-link:hover {
    text-decoration: underline;
}

/* Business Hours */
.business-hours-card {
    background: white;
    border: 2px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.5rem;
}

.hours-title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.hours-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.hours-day {
    color: #64748b;
}

.hours-time {
    font-weight: 600;
    color: var(--color-text);
}

/* Stats Section */
.stats-section {
    padding: 80px 0;
    background: var(--color-bg-light);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.stat-card:nth-child(1) .stat-number {
    color: var(--hflc-primary);
}

.stat-card:nth-child(2) .stat-number {
    color: var(--hgc-primary);
}

.stat-card:nth-child(3) .stat-number {
    color: var(--hgc-accent);
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
    background: var(--hflc-primary);
    color: rgba(255, 255, 255, 0.9);
    padding: 4rem 0 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

.footer-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.hflc-color {
    color: #0F2A44 !important;
}

.hgc-color {
    color: #2563EB !important;
}

.footer-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.footer-contact,
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-contact p,
.footer-links p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact a,
.footer-links a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact a:hover,
.footer-links a:hover {
    color: white;
}

.icon {
    flex-shrink: 0;
}

.footer-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-menu li a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-menu li a:hover {
    color: white;
}

.footer-address {
    margin-top: 1.5rem;
}

.address-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.address-text {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
}

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

@media (min-width: 768px) {
    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

.copyright {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom-links a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-links a:hover {
    color: white;
}

/* ==========================================================================
   16. Content Spacing
   ========================================================================== */

.site-main {
    padding-top: 80px;
    min-height: calc(100vh - 80px);
}

.page-content {
    padding: 80px 0;
}

.entry-content {
    line-height: 1.8;
}

.entry-content > * + * {
    margin-top: 1.5rem;
}

/* ==========================================================================
   17. Responsive Utilities
   ========================================================================== */

@media (max-width: 767px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.875rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .cta-title {
        font-size: 1.875rem;
    }
}

/* ==========================================================================
   18. Animations
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brand-card,
.feature-card,
.team-card {
    animation: fadeIn 0.6s ease-out;
}

/* ==========================================================================
   19. Print Styles
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .btn,
    .mobile-menu-toggle {
        display: none;
    }
    
    .site-main {
        padding-top: 0;
    }
}

/* ==========================================================================
   PRODUCTION: Service Card Hover Effects (CRITICAL)
   ========================================================================== */

/* Service cards in HFLC page */
.services-page .brand-card,
.services-page [style*="background: white"][style*="border: 2px"],
.services-page div[style*="box-shadow: 0 4px 6px"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.services-page .brand-card:hover,
.services-page [style*="background: white"][style*="border: 2px"]:hover,
.services-page div[style*="box-shadow: 0 4px 6px"]:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(15, 42, 68, 0.3) !important;
}

/* Service card icons hover */
.services-page div[style*="width: 48px"][style*="height: 48px"] {
    transition: all 0.3s ease;
}

.services-page div[style*="box-shadow: 0 4px 6px"]:hover div[style*="width: 48px"][style*="height: 48px"] {
    transform: scale(1.1) rotate(5deg);
}

/* Brand cards hover on homepage */
.brands-section .brand-card:hover .brand-icon {
    transform: scale(1.1);
}

.brand-card:hover .brand-btn {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Feature cards hover */
.feature-card:hover {
    transform: translateY(-8px);
}

.feature-card:hover .feature-icon {
    transform: scale(1.15);
}

/* Team cards hover enhancement */
.team-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 42, 68, 0.25) !important;
}

/* Button hover effects */
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    transform: translateY(-2px);
}

/* Software logo hover */
.software-logo {
    transition: all 0.3s ease;
}

.software-logo:hover {
    transform: translateY(-4px) scale(1.05);
}

/* Navigation menu hover */
.main-navigation .nav-menu li a {
    transition: all 0.2s ease;
}

.main-navigation .nav-menu li a:hover {
    transform: translateX(2px);
}

/* Footer links hover */
.footer-contact a:hover,
.footer-links a:hover,
.footer-menu li a:hover {
    transform: translateX(4px);
    transition: all 0.2s ease;
}

/* Form input focus effects */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    transform: translateY(-1px);
}

/* Info card hover on contact page */
.contact-info-card {
    transition: all 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.15);
}

/* Stat card animation */
.stat-card {
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: scale(1.05);
}

/* Value card hover */
.value-card {
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.15);
}

.value-card:hover .value-icon {
    transform: scale(1.1) rotate(5deg);
}



/* === FINAL BRAND VARIABLES === */
:root {
  --brand-primary: #0F2A44;
  --brand-secondary: #1E6BD6;
  --brand-accent: #F4C430;
  --text-dark: #0B1F33;
  --text-light: #FFFFFF;
}

h1, h2, h3 { color: var(--text-dark); }
.hero h1, .hero h2 { color:#fff !important; }

.cta-global {
  background: linear-gradient(135deg, #1E6BD6, #0F2A44);
}