
/* V9: Card Overlay Custom CSS */
.v9-header-card { 
    position: fixed; top: 20px; left: 5%; width: 90%; 
    background: white; padding: 15px 40px; border-radius: 20px; 
    display: flex; justify-content: space-between; align-items: center; 
    color: #0f172a; z-index: 9999; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); 
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}
.v9-logo { font-weight: 800; font-size: 1.25rem; text-decoration: none; display:flex; align-items: center; gap: 8px; color: #0f172a;}
.v9-logo span { color: #f59e0b; font-weight: 800; }
.v9-logo-icon { background: linear-gradient(135deg, #f59e0b, #ea580c); color: white; padding: 6px; border-radius: 8px; display: inline-flex; }
.v9-logo-icon svg { width: 22px; height: 22px; }
.v9-nav-links { display: flex; gap: 2rem; align-items: center; }
.v9-nav-link { text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: 0.2s; color: #475569; }
.v9-nav-link:hover { color: #f59e0b; }
.v9-cta-btn { padding: 12px 24px; background: #f59e0b; color: white; border-radius: 8px; font-weight: 700; text-decoration: none; transition: 0.2s; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3); display: inline-block; }
.v9-cta-btn:hover { background: #d97706; transform: translateY(-2px); }
.v9-mobile-btn { display: none; background: none; border: none; cursor: pointer; color: #0f172a; }
.v9-mobile-btn svg { width: 32px; height: 32px; }

/* Mobile Menu logic */
@media (max-width: 900px) {
    .v9-header-card { padding: 15px 20px; width: 95%; left: 2.5%; top: 10px; }
    .v9-nav-links, .v9-cta-wrapper { display: none !important; }
    .v9-mobile-btn { display: block !important; }
}

/* When mobile is toggled open via JS class on body */
body.v9-mobile-open .v9-nav-links {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 80px; left: 0; width: 100%;
    background: white; border-radius: 20px;
    padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    gap: 15px;
}
body.v9-mobile-open .v9-cta-wrapper {
    display: block !important;
    position: absolute;
    top: 250px; left: 20px; right: 20px;
    text-align: center;
}
body.v9-mobile-open .v9-cta-btn { width: 100%; }
