/* Dark Premium Tech Theme - Navy Slate */
:root {
    /* Primary Brand - Electric Blue */
    --primary-blue: #3B82F6;
    --primary-blue-dark: #2563EB;
    --primary-blue-light: #60A5FA;
    
    /* Secondary - Dark Slate */
    --secondary-slate: #1E293B;
    --secondary-slate-dark: #0F172A;
    --secondary-slate-light: #334155;
    
    /* Accent - Cyan Glow */
    --accent-cyan: #38BDF8;
    --accent-cyan-dark: #0EA5E9;
    --accent-cyan-light: #7DD3FC;
    
    /* Neutral - Cool Gray */
    --neutral-gray: #94A3B8;
    --neutral-gray-dark: #64748B;
    --neutral-gray-light: #CBD5E1;
    
    /* Background - Navy Slate */
    --bg-light: #0F172A;
    --bg-white: #1E293B;
    --bg-gray-50: #0F172A;
    
    /* Text - Light Colors */
    --text-dark: #F1F5F9;
    --text-medium: #CBD5E1;
    --text-light: #94A3B8;
    
    /* Legacy support for compatibility */
    --primary-black: #1E293B;
    --primary-black-light: #334155;
    --primary-black-dark: #0F172A;
    --accent-gold: #3B82F6;
    --accent-gold-dark: #2563EB;
    --accent-gold-light: #60A5FA;
    --highlight-gold: #38BDF8;
    --highlight-gold-dark: #0EA5E9;
    --highlight-gold-light: #7DD3FC;
    --bg-black: #0F172A;
    --bg-black-light: #1E293B;
    --bg-black-dark: #020617;
    
    --primary-violet: #0F172A;
    --primary-violet-dark: #020617;
    --primary-violet-light: #1E293B;
    --secondary-lime: #3B82F6;
    --secondary-lime-dark: #2563EB;
    --secondary-lime-light: #60A5FA;
    --secondary-cyan: #3B82F6;
    --secondary-cyan-dark: #2563EB;
    --support-lavender: #F59E0B;
    --support-lavender-dark: #D97706;
    --support-lavender-light: #FBBF24;
    --bg-light-purple: #F8FAFC;
    --bg-almost-white: #FFFFFF;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --primary-coral: #0F172A;
    --primary-coral-hover: #1E293B;
    --brand-teal: #0F172A;
    --brand-teal-light: #1E293B;
    --brand-teal-dark: #020617;
    --bg-mint: #F8FAFC;
    --accent-blue: #3B82F6;
    --dark-navy: #0F172A;
    --light-background: #F8FAFC;
    --soft-gray: #64748B;
    --text-dark-gray: #0F172A;
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Navigation & Headings */
nav, h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Buttons & Links - Electric Blue & Cyan Accents */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
    color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    border-radius: 12px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
    color: #FFFFFF;
}

.btn-action {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-cyan-dark) 100%);
    color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
    border-radius: 12px;
}

.btn-action:hover {
    background: linear-gradient(135deg, var(--accent-cyan-light) 0%, var(--accent-cyan) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(56, 189, 248, 0.6);
    color: #FFFFFF;
}

.btn-outline {
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    background: transparent;
    transition: all 0.3s ease;
    border-radius: 12px;
}

.btn-outline:hover {
    background-color: var(--primary-blue);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(10, 102, 194, 0.3);
}

a {
    color: var(--primary-blue);
    transition: color 0.2s ease;
    text-decoration: none;
}

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

/* Cards & Sections */
.card, .bg-white {
    background-color: var(--bg-white);
    border-color: var(--neutral-gray);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    border: 1px solid var(--neutral-gray);
}

.bg-gray-50 {
    background-color: var(--bg-gray-50);
}

.border-gray-200 {
    border-color: var(--neutral-gray);
}

/* Gradient Primary - LinkedIn Blue Gradient */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 50%, var(--primary-blue-light) 100%);
}

.gradient-action {
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dark) 100%);
}

.gradient-cyan {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
}

/* Text Colors */
.text-primary {
    color: var(--primary-blue);
}

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

.text-dark-navy {
    color: var(--text-dark);
}

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

.border-primary {
    border-color: var(--primary-blue);
}

/* Custom utility classes */
.bg-navy {
    background-color: var(--bg-white);
}

.text-navy {
    color: var(--text-dark);
}

.bg-accent {
    background-color: var(--primary-blue);
}

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

.bg-support {
    background-color: var(--accent-red);
}

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

.bg-soft-gray {
    background-color: var(--secondary-gray);
}

.bg-light {
    background-color: var(--bg-light);
}

/* Premium/Highlight - LinkedIn Blue */
.premium-badge {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 8px;
}

.premium-highlight {
    background: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue) 100%);
    color: #FFFFFF;
    border-radius: 8px;
}

/* Hover effects with blue */
.hover-lavender:hover {
    background-color: var(--primary-blue);
    color: #FFFFFF;
    transition: all 0.3s ease;
}

/* Modern glass effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
}

/* Glow effects */
.glow-violet {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}

.glow-lime {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}

.glow-lavender {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}

/* Smooth animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes pulse-glow-violet {
    0%, 100% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 50px rgba(59, 130, 246, 0.7); }
}

@keyframes pulse-glow-lime {
    0%, 100% { box-shadow: 0 0 30px rgba(56, 189, 248, 0.5); }
    50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.8); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.float-animation { 
    animation: float 6s ease-in-out infinite; 
}

.pulse-glow-violet { 
    animation: pulse-glow-violet 3s ease-in-out infinite; 
}

.pulse-glow-lime { 
    animation: pulse-glow-lime 3s ease-in-out infinite; 
}

.shimmer-effect {
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

/* Modern number styling */
.stat-number {
    font-weight: 900;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile Responsive - Enhanced */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }
    
    h1 {
        font-size: 2rem;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    h3 {
        font-size: 1.5rem;
        line-height: 1.4;
    }
    
    h4 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
    
    .btn-primary, .btn-action, .btn-outline {
        padding: 14px 24px;
        font-size: 16px;
        min-height: 44px;
        width: 100%;
        max-width: 100%;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(10, 102, 194, 0.2);
    }
    
    .card {
        padding: 1.25rem;
        margin: 0.5rem;
    }
    
    /* Ensure inputs are readable on mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px;
        padding: 12px 16px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Better spacing for forms */
    form {
        padding: 1rem;
    }
    
    form > div {
        margin-bottom: 1.25rem;
    }
    
    /* Improve table responsiveness */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better image handling */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Improve navigation on mobile */
    nav {
        padding: 0.75rem 1rem;
    }
    
    nav a, nav button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 14px;
    }
    
    /* Better modal handling */
    .modal, [role="dialog"] {
        width: 95%;
        max-width: 95%;
        margin: 1rem auto;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Improve grid layouts */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /* Better text wrapping */
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Improve button groups */
    .flex.gap-2, .flex.gap-3, .flex.gap-4 {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .flex.gap-2 > *, .flex.gap-3 > *, .flex.gap-4 > * {
        width: 100%;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .card {
        padding: 1rem;
        margin: 0.25rem;
    }
    
    .btn-primary, .btn-action, .btn-outline {
        padding: 12px 20px;
        font-size: 15px;
    }
    
    /* Reduce padding on small screens */
    .px-4, .px-6, .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-4, .py-6, .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Improve touch targets */
a, button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

/* Better focus states for mobile */
*:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection color */
::selection {
    background-color: var(--primary-blue);
    color: #FFFFFF;
}

/* Accessibility: Prevent white text on white background */
.bg-white,
.bg-bg-white,
[class*="bg-white"] {
    color: var(--text-dark) !important;
}

.bg-white *,
.bg-bg-white *,
[class*="bg-white"] *:not(.text-white):not([class*="text-white"]) {
    color: inherit;
}

/* Ensure text-white is only used on dark backgrounds */
.text-white {
    color: #FFFFFF !important;
}

/* Ensure proper contrast for FAQ accordion and interactive elements */
details summary {
    color: var(--text-dark);
}

details[open] summary {
    color: var(--text-dark);
}

/* Better focus states for accessibility */
details summary:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Ensure buttons with white text have dark backgrounds */
.btn-primary,
.btn-action,
[class*="bg-gradient-to-r"][class*="text-white"] {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
    color: #FFFFFF !important;
}

/* Navigation - Ensure proper contrast */
nav.bg-white,
nav[class*="bg-white"] {
    background-color: var(--bg-white) !important;
    color: var(--text-dark) !important;
}

nav.bg-white *,
nav[class*="bg-white"] * {
    color: var(--text-dark) !important;
}

nav.bg-white a,
nav[class*="bg-white"] a {
    color: var(--text-dark) !important;
}

nav.bg-white a:hover,
nav[class*="bg-white"] a:hover {
    color: var(--primary-blue) !important;
}

nav.bg-white .text-text-dark,
nav[class*="bg-white"] .text-text-dark {
    color: var(--text-dark) !important;
}

/* Footer - Ensure proper contrast */
footer.bg-white,
footer[class*="bg-white"] {
    background-color: var(--bg-white) !important;
    color: var(--text-medium) !important;
}

footer.bg-white *,
footer[class*="bg-white"] * {
    color: var(--text-medium) !important;
}

footer.bg-white h3,
footer.bg-white .text-text-dark,
footer[class*="bg-white"] h3,
footer[class*="bg-white"] .text-text-dark {
    color: var(--text-dark) !important;
}

footer.bg-white a,
footer[class*="bg-white"] a {
    color: var(--text-medium) !important;
}

footer.bg-white a:hover,
footer[class*="bg-white"] a:hover {
    color: var(--primary-blue) !important;
}

/* Payment method logos - ensure they have proper background */
footer .bg-white[style*="width"] {
    background-color: #FFFFFF !important;
}

/* Prevent white text on white backgrounds - Global safety rule */
.bg-white .text-white,
.bg-white[class*="text-white"],
[class*="bg-white"] .text-white,
[class*="bg-white"][class*="text-white"] {
    color: var(--text-dark) !important;
}

/* Ensure all text on bg-white elements is visible */
.bg-white,
[class*="bg-white"] {
    color: var(--text-dark) !important;
}

.bg-white *:not(.text-white):not([class*="text-white"]):not(svg):not(path),
[class*="bg-white"] *:not(.text-white):not([class*="text-white"]):not(svg):not(path) {
    color: inherit;
}

/* But allow white text on gradient backgrounds (buttons) */
.bg-gradient-to-r .text-white,
[class*="bg-gradient-to-r"][class*="text-white"],
.bg-gradient-to-br .text-white,
[class*="bg-gradient-to-br"][class*="text-white"] {
    color: #FFFFFF !important;
}

/* Ensure badge and button text is visible */
.bg-white.rounded-full,
.bg-white.rounded-xl,
.bg-white.rounded-lg {
    color: var(--text-dark) !important;
}

.bg-white.rounded-full *,
.bg-white.rounded-xl *,
.bg-white.rounded-lg * {
    color: inherit;
}

/* Specific fix for badge on landing page */
.bg-white.rounded-full.text-primary-blue {
    color: var(--primary-blue) !important;
}

.bg-white.rounded-full.text-primary-blue * {
    color: var(--primary-blue) !important;
}

/* Fix for buttons with bg-white */
.bg-white.border-2 {
    color: var(--primary-blue) !important;
}

.bg-white.border-2 * {
    color: var(--primary-blue) !important;
}

/* Ensure step cards in How It Works section have proper text colors */
.bg-white.rounded-2xl .text-text-dark,
.bg-white.rounded-2xl .text-text-medium {
    color: var(--text-dark) !important;
}

.bg-white.rounded-2xl h3 {
    color: var(--text-dark) !important;
}

.bg-white.rounded-2xl p {
    color: var(--text-medium) !important;
}

/* Ensure white text only appears on dark gradient backgrounds */
.bg-gradient-to-br .text-white,
.bg-gradient-to-r .text-white {
    color: #FFFFFF !important;
}

/* Prevent any white text from appearing on bg-white elements (unless inside gradient) */
.bg-white .text-white:not(.bg-gradient-to-br *):not(.bg-gradient-to-r *),
section.bg-white .text-white:not([class*="bg-gradient"] *) {
    color: var(--text-dark) !important;
}

/* Ensure Benefits section cards have proper text colors */
#features .bg-white,
section#features .bg-white {
    background-color: var(--bg-white) !important;
    color: var(--text-dark) !important;
}

#features .bg-white *,
section#features .bg-white * {
    color: inherit;
}

#features .bg-white .text-text-dark,
section#features .bg-white .text-text-dark {
    color: var(--text-dark) !important;
}

#features .bg-white .text-text-medium,
section#features .bg-white .text-text-medium {
    color: var(--text-medium) !important;
}

#features .bg-white h3,
section#features .bg-white h3 {
    color: var(--text-dark) !important;
}

#features .bg-white p,
section#features .bg-white p {
    color: var(--text-medium) !important;
}

/* Ensure FAQ section has proper text colors */
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
    background-color: var(--bg-white) !important;
    color: var(--text-dark) !important;
}

.bg-white.rounded-xl *,
.bg-white.rounded-2xl * {
    color: inherit;
}

.bg-white.rounded-xl .text-text-dark,
.bg-white.rounded-2xl .text-text-dark,
.bg-white.rounded-xl summary,
.bg-white.rounded-2xl summary {
    color: var(--text-dark) !important;
}

.bg-white.rounded-xl .text-text-medium,
.bg-white.rounded-2xl .text-text-medium,
.bg-white.rounded-xl p,
.bg-white.rounded-2xl p {
    color: var(--text-medium) !important;
}

/* Ensure all cards with bg-white have visible text */
.bg-white.p-8,
.bg-white[class*="p-"] {
    background-color: var(--bg-white) !important;
}

.bg-white.p-8 *:not(.bg-gradient-to-br):not(.bg-gradient-to-r):not([class*="bg-gradient"]),
.bg-white[class*="p-"] *:not(.bg-gradient-to-br):not(.bg-gradient-to-r):not([class*="bg-gradient"]) {
    color: var(--text-dark) !important;
}

.bg-white.p-8 .text-text-medium,
.bg-white.p-8 p,
.bg-white[class*="p-"] .text-text-medium,
.bg-white[class*="p-"] p {
    color: var(--text-medium) !important;
}

.bg-white.p-8 .text-text-dark,
.bg-white.p-8 h3,
.bg-white[class*="p-"] .text-text-dark,
.bg-white[class*="p-"] h3 {
    color: var(--text-dark) !important;
}

/* Stats Bar Section - Ensure proper contrast */
section.bg-white.border-b .stat-number {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--primary-blue) !important; /* Fallback */
}

section.bg-white.border-b .text-text-medium {
    color: var(--text-medium) !important;
}

section.bg-white.border-b .text-primary-blue {
    color: var(--primary-blue) !important;
}

section.bg-white.border-b .text-accent-cyan {
    color: var(--accent-cyan) !important;
}

section.bg-white.border-b {
    background-color: var(--bg-white) !important;
    color: var(--text-dark) !important;
}

section.bg-white.border-b * {
    color: inherit;
}