/* 42codes Landing Page - Complete Styling */
/* Extracted from original landing-page.html */

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

/* Enhanced smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-offset, 128px);
}

/* Note: scroll-margin-top on sections removed - scroll-padding-top on html handles offset */

/* VM Embed Mode: Hide chrome, reset spacing, and FORCE grid layout */
html[data-vm-embed="1"] .launch-banner,
html[data-vm-embed="1"] body>nav,
html[data-vm-embed="1"] footer {
    display: none !important;
}

html[data-vm-embed="1"] body {
    margin-top: 0 !important;
    /* allow padding-top to be set by static banner CSS (40px) or fall back to 0 via header-offset */
}

html[data-vm-embed="1"] main#main-content {
    padding-top: 0 !important;
}

/* CRITICAL: Force grid to full screen to override inline dependency on header-offset */
html[data-vm-embed="1"] #gridCanvas {
    top: 0 !important;
    height: 100% !important;
    inset: 0 !important;
}

/* Reset header offset variable to 0 in embed mode */
html[data-vm-embed="1"] {
    --header-offset: 0px !important;
    --launch-banner-height: 0px !important;
}

/* Default Theme (Spectrum - Clean Neutral) */
:root {
    --header-offset: 120px;
    /* Core spectrum colors */
    --spectrum-blue: #0066FF;
    --spectrum-green: #00D084;
    --spectrum-purple: #8B5CF6;
    --spectrum-orange: #FF6B35;
    --spectrum-gold: #F59E0B;
    --spectrum-teal: #00BFA5;

    /* Career Style Colors - 7 Styles (Light Mode) */
    --color-yellow: #F59E0B;
    /* Achiever / Leader */
    --color-red: #EF4444;
    /* Influencer */
    --color-green: #10B981;
    /* Connector / Analyst */
    --color-orange: #FF6B35;
    /* Adapter / Helper */
    --color-purple: #8B5CF6;
    /* Perfectionist / Artist */
    --color-teal: #14B8A6;
    /* Individualist / Organizer */
    --color-gray: #6B7280;
    /* Strategist */
    --color-blue: #0066FF;
    /* Maker */

    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFB;
    --bg-gradient-1: #FFFFFF;
    --bg-gradient-2: #F8FAFB;
    --dark-bg: #0F172A;

    /* Neutral base with rotating accents */
    --accent-primary: #2D3748;
    --accent-secondary: #4A5568;
    --accent-tertiary: #718096;

    --text-primary: #1A202C;
    --text-secondary: #4A5568;
    --text-on-dark: #FFFFFF;
    --text-on-dark-secondary: #CBD5E0;
    --text-on-accent: #FFFFFF;

    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: #E2E8F0;
    --card-bg: #FFFFFF;
    --card-border: #E2E8F0;
    --card-hover: #F7FAFC;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --hero-bg: #FFFFFF;
    --hero-text-primary: #1A202C;
    --hero-text-secondary: #4A5568;
    --section-alt-bg: #F8FAFB;
    --launch-banner-bg: #F8FAFB;
    --launch-banner-text: #1A202C;
    --success-color: #00D084;
    --btn-text-color: #FFFFFF;
    --btn-hover-bg: #2D3748;

    --theme-transition: all 0.3s ease;

    /* DNA connector color */
    --dna-connector-color: rgba(0, 0, 0, 0.3);

    /* Alternating background system for light mode */
    --section-lightest: #FFFFFF;
    --section-medium-light: #F8FAFB;
    --section-darker: #F3F4F6;
}

/* Theme 2: Luminous Blue (Foundation) */
[data-color-theme="luminous-blue"] {
    --accent-primary: #0066FF;
    --accent-secondary: #4D94FF;
    --accent-tertiary: #0052CC;

    --text-on-dark-secondary: #B3D1FF;
    --text-on-accent: #FFFFFF;

    --glass-bg: rgba(0, 102, 255, 0.1);
    --glass-border: rgba(0, 102, 255, 0.2);
    --card-bg: #FFFFFF;
    --card-border: rgba(0, 102, 255, 0.15);
    --card-hover: rgba(0, 102, 255, 0.05);

    --hero-bg: #0066FF;
    --hero-text-primary: #FFFFFF;
    --hero-text-secondary: #B3D1FF;
    --launch-banner-bg: #0066FF;
    --launch-banner-text: #FFFFFF;
    --success-color: #10B981;
    --btn-text-color: #FFFFFF;
    --btn-hover-bg: #0052CC;
}

/* Theme 2: Luminous Green (Supporter) */
[data-color-theme="luminous-green"] {
    --accent-primary: #00D084;
    --accent-secondary: #33DCAA;
    --accent-tertiary: #00A66C;

    --text-on-dark-secondary: #9FFFD9;
    --text-on-accent: #FFFFFF;

    --glass-bg: rgba(0, 208, 132, 0.1);
    --glass-border: rgba(0, 208, 132, 0.2);
    --card-border: rgba(0, 208, 132, 0.15);
    --card-hover: rgba(0, 208, 132, 0.05);

    --hero-bg: #00D084;
    --hero-text-primary: #FFFFFF;
    --hero-text-secondary: #9FFFD9;
    --launch-banner-bg: #00D084;
    --launch-banner-text: #FFFFFF;
    --success-color: #00D084;
    --btn-text-color: #FFFFFF;
    --btn-hover-bg: #00A66C;
}

/* Theme 3: Luminous Purple (Specialist) */
[data-color-theme="luminous-purple"] {
    --accent-primary: #8B5CF6;
    --accent-secondary: #A78BFA;
    --accent-tertiary: #7C3AED;

    --text-on-dark-secondary: #D4C5FC;
    --text-on-accent: #FFFFFF;

    --glass-bg: rgba(139, 92, 246, 0.1);
    --glass-border: rgba(139, 92, 246, 0.2);
    --card-border: rgba(139, 92, 246, 0.15);
    --card-hover: rgba(139, 92, 246, 0.05);

    --hero-bg: #8B5CF6;
    --hero-text-primary: #FFFFFF;
    --hero-text-secondary: #D4C5FC;
    --launch-banner-bg: #8B5CF6;
    --launch-banner-text: #FFFFFF;
    --success-color: #10B981;
    --btn-text-color: #FFFFFF;
    --btn-hover-bg: #6D28D9;
}

/* Theme 4: Luminous Orange (Pathfinder) */
[data-color-theme="luminous-orange"] {
    --accent-primary: #FF6B35;
    --accent-secondary: #FF8F66;
    --accent-tertiary: #E55100;

    --text-on-dark-secondary: #FFD4C4;
    --text-on-accent: #FFFFFF;

    --glass-bg: rgba(255, 107, 53, 0.1);
    --glass-border: rgba(255, 107, 53, 0.2);
    --card-border: rgba(255, 107, 53, 0.15);
    --card-hover: rgba(255, 107, 53, 0.05);

    --hero-bg: #FF6B35;
    --hero-text-primary: #FFFFFF;
    --hero-text-secondary: #FFD4C4;
    --launch-banner-bg: #FF6B35;
    --launch-banner-text: #FFFFFF;
    --success-color: #10B981;
    --btn-text-color: #FFFFFF;
    --btn-hover-bg: #CC4700;
}

/* Theme 5: Luminous Yellow (Achiever) */
[data-color-theme="luminous-yellow"] {
    --accent-primary: #F59E0B;
    --accent-secondary: #FCD34D;
    --accent-tertiary: #D97706;

    --text-on-dark-secondary: #FEF3C7;
    --text-on-accent: #FFFFFF;

    --glass-bg: rgba(245, 158, 11, 0.1);
    --glass-border: rgba(245, 158, 11, 0.2);
    --card-border: rgba(245, 158, 11, 0.15);
    --card-hover: rgba(245, 158, 11, 0.05);

    --hero-bg: #F59E0B;
    --hero-text-primary: #FFFFFF;
    --hero-text-secondary: #FEF3C7;
    --launch-banner-bg: #F59E0B;
    --launch-banner-text: #FFFFFF;
    --success-color: #10B981;
    --btn-text-color: #FFFFFF;
    --btn-hover-bg: #B45309;
}

/* Theme 6: Luminous Teal (Visionary) */
[data-color-theme="luminous-teal"] {
    --accent-primary: #00BFA5;
    --accent-secondary: #26D9C0;
    --accent-tertiary: #009984;

    --text-on-dark-secondary: #A7F3E8;
    --text-on-accent: #FFFFFF;

    --glass-bg: rgba(0, 191, 165, 0.1);
    --glass-border: rgba(0, 191, 165, 0.2);
    --card-border: rgba(0, 191, 165, 0.15);
    --card-hover: rgba(0, 191, 165, 0.05);

    --hero-bg: #00BFA5;
    --hero-text-primary: #FFFFFF;
    --hero-text-secondary: #A7F3E8;
    --launch-banner-bg: #00BFA5;
    --launch-banner-text: #FFFFFF;
    --success-color: #00BFA5;
    --btn-text-color: #FFFFFF;
    --btn-hover-bg: #00806D;
}

/* Spectrum Theme - Override default accent colors */
[data-color-theme="spectrum"] {
    --accent-primary: #1E293B;
    --accent-secondary: #475569;
    --accent-tertiary: #64748B;
    --launch-banner-bg: #1A202C;
    --launch-banner-text: #FFFFFF;
}

/* Spectrum Theme - Text Selection Colors */
/* Light mode - dark gray background with white text */
html[data-theme="light"][data-color-theme="spectrum"] ::selection,
body[data-theme="light"][data-color-theme="spectrum"] ::selection,
[data-theme="light"][data-color-theme="spectrum"] ::selection {
    background: #1E293B !important;
    color: white !important;
}

html[data-theme="light"][data-color-theme="spectrum"] ::-moz-selection,
body[data-theme="light"][data-color-theme="spectrum"] ::-moz-selection,
[data-theme="light"][data-color-theme="spectrum"] ::-moz-selection {
    background: #1E293B !important;
    color: white !important;
}

/* Dark mode - light gray background with dark text for readability */
html[data-theme="dark"][data-color-theme="spectrum"] ::selection,
body[data-theme="dark"][data-color-theme="spectrum"] ::selection,
[data-theme="dark"][data-color-theme="spectrum"] ::selection {
    background: #CBD5E0 !important;
    color: #111827 !important;
}

html[data-theme="dark"][data-color-theme="spectrum"] ::-moz-selection,
body[data-theme="dark"][data-color-theme="spectrum"] ::-moz-selection,
[data-theme="dark"][data-color-theme="spectrum"] ::-moz-selection {
    background: #CBD5E0 !important;
    color: #111827 !important;
}

/* Dark Mode - Fix button and text visibility */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1F2937;
    --bg-gradient-1: #1F2937;
    --bg-gradient-2: #374151;

    --text-primary: #FFFFFF;
    --text-secondary: #9CA3AF;

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(31, 41, 55, 0.9);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-hover: rgba(75, 85, 99, 0.6);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    --section-alt-bg: #1F2937;
    --hero-bg: #111827;
    --launch-banner-bg: #1F2937;
    --launch-banner-text: #FFFFFF;

    /* DNA connector color for dark mode */
    --dna-connector-color: rgba(255, 255, 255, 0.3);

    /* Alternating background system for dark mode */
    --section-darkest: #0F172A;
    --section-medium: #111827;
    --section-lighter: #1F2937;

    /* Career Style Colors - 7 Styles (Dark Mode - brighter for visibility) */
    --color-yellow: #FCD34D;
    /* Achiever / Leader */
    --color-red: #F87171;
    /* Influencer */
    --color-green: #34D399;
    /* Connector / Analyst */
    --color-orange: #FB923C;
    /* Adapter / Helper */
    --color-purple: #A78BFA;
    /* Perfectionist / Artist */
    --color-teal: #2DD4BF;
    /* Individualist / Organizer */
    --color-gray: #9CA3AF;
    /* Strategist */
    --color-blue: #60A5FA;
    /* Maker */
}

/* Alternating section backgrounds for dark mode */
[data-theme="dark"] .hero,
[data-theme="dark"] .model-section,
[data-theme="dark"] .problem-section,
[data-theme="dark"] .personas-section,
[data-theme="dark"] .solution-section,
[data-theme="dark"] .how-it-works,
[data-theme="dark"] .why-section,
[data-theme="dark"] .pricing-section,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .blueprints-section,
[data-theme="dark"] .footer-cta,
[data-theme="dark"][data-color-theme] .hero,
[data-theme="dark"][data-color-theme] .model-section,
[data-theme="dark"][data-color-theme] .problem-section,
[data-theme="dark"][data-color-theme] .personas-section,
[data-theme="dark"][data-color-theme] .solution-section,
[data-theme="dark"][data-color-theme] .how-it-works,
[data-theme="dark"][data-color-theme] .why-section,
[data-theme="dark"][data-color-theme] .pricing-section,
[data-theme="dark"][data-color-theme] .faq-section,
[data-theme="dark"][data-color-theme] .blueprints-section,
[data-theme="dark"][data-color-theme] .footer-cta {
    background: transparent !important;
}

[data-theme="dark"] footer {
    background: transparent !important;
}

/* Alternating section backgrounds for light mode */
/* Light mode - start with darker (like dark mode starts with darkest) */
[data-theme="light"] .hero,
[data-theme="light"][data-color-theme] .hero,
[data-theme="light"] .model-section,
[data-theme="light"][data-color-theme] .model-section,
[data-theme="light"] .problem-section,
[data-theme="light"][data-color-theme] .problem-section,
[data-theme="light"] .personas-section,
[data-theme="light"][data-color-theme] .personas-section,
[data-theme="light"] .solution-section,
[data-theme="light"][data-color-theme] .solution-section,
[data-theme="light"] .how-it-works,
[data-theme="light"][data-color-theme] .how-it-works,
[data-theme="light"] .why-section,
[data-theme="light"][data-color-theme] .why-section,
[data-theme="light"] .pricing-section,
[data-theme="light"][data-color-theme] .pricing-section,
[data-theme="light"] .faq-section,
[data-theme="light"][data-color-theme] .faq-section,
[data-theme="light"] .blueprints-section,
[data-theme="light"][data-color-theme] .blueprints-section,
[data-theme="light"] .footer-cta,
[data-theme="light"][data-color-theme] .footer-cta,
[data-theme="light"] footer {
    background: transparent !important;
}

/* Starfield canvas surfaces inherit translucent variables */
.landing-canvas {
    --bg-secondary: rgba(248, 250, 252, 1);
    --section-lightest: rgba(255, 255, 255, 0.82);
    --section-medium-light: rgba(248, 250, 252, 0.68);
    --section-darker: rgba(241, 245, 249, 0.6);
    --card-bg: rgba(255, 255, 255, 1);
    --card-border: rgba(148, 163, 184, 0.28);
}

[data-theme="dark"] .landing-canvas {
    --bg-secondary: rgba(15, 23, 42, 0.62);
    --section-darkest: rgba(2, 6, 23, 0.88);
    --section-medium: rgba(10, 15, 32, 0.72);
    --section-lighter: rgba(15, 23, 42, 0.66);
    --card-bg: rgba(15, 23, 42, 0.68);
    --card-border: rgba(148, 163, 184, 0.32);
}

[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .landing-canvas {
    --card-border: rgba(148, 163, 184, 0.22);
}

/* Fix nav and footer for dark mode ALL themes */
/* Dark mode nav - use solid background */
[data-theme="dark"] nav {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--card-border);
}

/* Light mode navigation text - explicit rules */
[data-theme="light"] .logo {
    color: #000000 !important;
}

[data-theme="light"] .nav-menu a {
    color: #000000 !important;
}

[data-theme="light"] .nav-menu a:hover {
    color: var(--accent-primary) !important;
}

/* Dark mode navigation text */
[data-theme="dark"] .logo {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-menu a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-menu a:hover {
    color: var(--accent-primary) !important;
}

[data-theme="dark"] .launch-tag {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}





[data-theme="dark"] .footer-cta h2,
[data-theme="dark"] .footer-cta p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .early-access-form {
    background: var(--bg-secondary) !important;
    border-color: var(--card-border) !important;
}

/* Fix white button text in dark mode */
[data-theme="dark"] .early-access-btn {
    background: #FFFFFF !important;
    color: #000000 !important;
}

[data-theme="dark"] .early-access-btn:hover {
    background: #F5F5F5 !important;
    color: #000000 !important;
}

[data-theme="dark"] .assessment-btn {
    background: #FFFFFF !important;
    color: #000000 !important;
}

[data-theme="dark"] .assessment-btn:hover {
    background: #F5F5F5 !important;
    color: #000000 !important;
}

[data-theme="dark"] .blueprints-btn {
    background: #FFFFFF !important;
    color: #000000 !important;
}

[data-theme="dark"] .blueprints-btn:hover {
    background: #F5F5F5 !important;
    color: #000000 !important;
}

[data-theme="dark"] .pricing-cta {
    background: #FFFFFF !important;
    color: #000000 !important;
}

[data-theme="dark"] .pricing-cta:hover {
    background: #F5F5F5 !important;
    color: #000000 !important;
}

/* Fix hover states in dark mode */
[data-theme="dark"] .card-hover {
    background: var(--card-hover) !important;
}


/* Removed heavy dark-mode hover overrides to allow base hovers */

[data-theme="dark"] .career-generator {
    background: var(--bg-secondary) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .generator-result {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .refresh-btn {
    background: var(--bg-primary) !important;
    border-color: var(--card-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .interactive-prompt {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .generator-header {
    margin-bottom: 20px;
}

/* Dark mode preserves the color theme's backgrounds */
[data-theme="dark"][data-color-theme="luminous-blue"] {
    --hero-bg: #00327F;
}

[data-theme="dark"][data-color-theme="luminous-green"] {
    --hero-bg: #00533A;
}

[data-theme="dark"][data-color-theme="luminous-purple"] {
    --hero-bg: #5B21B6;
}

[data-theme="dark"][data-color-theme="luminous-orange"] {
    --hero-bg: #9A3412;
}

[data-theme="dark"][data-color-theme="luminous-yellow"] {
    --hero-bg: #92400E;
}

[data-theme="dark"][data-color-theme="luminous-teal"] {
    --hero-bg: #065F46;
}

/* Light Mode Specific Fixes */
[data-theme="light"] .early-access-form {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--card-border) !important;
}

[data-theme="light"] .early-access-input {
    color: var(--text-primary) !important;
}

[data-theme="light"] .early-access-input::placeholder {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .early-access-btn {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
}

/* Removed - now using absolute white for all themes */

[data-theme="light"] .generator-result {
    background: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
}

[data-theme="light"] .refresh-btn {
    background: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .refresh-btn:hover {
    background: var(--bg-secondary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Comprehensive Dark Mode Text Readability Fixes */
[data-theme="dark"] {
    /* General text elements */
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] .section-subtitle {
    color: var(--text-primary) !important;
}

/* Dimension chips: ensure inner spans keep the chip's assigned color in dark mode */
[data-theme="dark"] .column-value[data-color] span {
    color: inherit !important;
}


[data-theme="dark"] .card,
[data-theme="dark"] .problem-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .why-card,
[data-theme="dark"] .u-card,
[data-theme="dark"] .blueprint-card {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .model-card {
    color: var(--text-primary) !important;
    background: rgba(15, 23, 42, 0.62) !important;
    /* match career-generator */
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .problem-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .why-card,
[data-theme="dark"] .u-card,
[data-theme="dark"] .blueprint-card {
    color: var(--text-primary) !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .persona-card {
    color: var(--text-primary) !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"]:not([data-color-theme="spectrum"]) .pricing-card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .pricing-card h3,
[data-theme="dark"] .pricing-card p,
[data-theme="dark"] .pricing-card ul,
[data-theme="dark"] .pricing-card li {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .faq-question,
[data-theme="dark"] .faq-answer {
    color: var(--text-primary) !important;
}

/* Dark mode career generator text fixes */
[data-theme="dark"] .result-label,
/* Dark mode generator column styling */
[data-theme="dark"] .generator-title,
[data-theme="dark"] .column-label {
    color: #CBD5E0 !important;
}

/* Removed - let column-values have their colored text in dark mode */

/* Add the missing light mode general rule to match dark mode */
[data-theme="light"] .column-value {
    color: var(--text-primary) !important;
}

/* Dark mode floating controls - Now handled by themes.css */

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-primary);
    background: #FFFFFF;
    overflow-x: hidden;
    transition: var(--theme-transition);
}

/* Dark mode body background override */
[data-theme="dark"] body {
    background: var(--bg-primary) !important;
}

/* Floating Controls - Now handled by themes.css */

/* Launch Banner */
.launch-banner {
    background: var(--launch-banner-bg);
    color: var(--launch-banner-text, var(--hero-bg));
    padding: 15px 20px;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
    /* Fixed height to prevent layout shifts */
    line-height: 1.4;
    /* Fixed line-height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Removed - all color themes now use spectrum approach for launch banner */

/* Light mode spectrum - solid launch banner (matches nav) */
html[data-theme="light"][data-color-theme="spectrum"] .launch-banner {
    background: var(--launch-banner-bg) !important;
    color: #FFFFFF !important;
}

/* Dark mode spectrum - solid launch banner (matches nav) */
html[data-theme="dark"][data-color-theme="spectrum"] .launch-banner {
    background: var(--launch-banner-bg) !important;
    color: #FFFFFF !important;
}

/* Dark mode luminous themes - launch banner with theme colors */
html[data-theme="dark"][data-color-theme="luminous-blue"] .launch-banner {
    background: #0066FF !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-green"] .launch-banner {
    background: #00D084 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-purple"] .launch-banner {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-orange"] .launch-banner {
    background: #FF6B35 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-yellow"] .launch-banner {
    background: #F59E0B !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-teal"] .launch-banner {
    background: #00BFA5 !important;
    color: #FFFFFF !important;
}

.launch-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 15px;
    border-radius: 20px;
    margin-left: 10px;
    font-size: 14px;
}

/* Navigation - Solid background directly below launch banner */
nav {
    background: var(--bg-primary) !important;
    backdrop-filter: none !important;
    padding: 15px 0;
    position: sticky;
    top: 64px;
    z-index: 110;
    border-bottom: 1px solid var(--card-border);
    width: 100%;
    margin: 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
}

.launch-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-menu a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
}

/* Desktop: keep nav item labels on one line */
@media (min-width: 1025px) {
    .nav-menu a {
        white-space: nowrap;
    }
}

.nav-menu a:hover {
    color: var(--accent-primary);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background: var(--accent-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Login/Logout button */
.nav-auth {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.auth-btn {
    padding: 8px 20px;
    background: var(--accent-primary);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Light mode auth button */
[data-theme="light"] .auth-btn {
    background: #1E293B;
    color: #FFFFFF;
}

[data-theme="light"] .auth-btn:hover {
    background: #0F172A;
}

/* Dark mode auth button */
[data-theme="dark"] .auth-btn {
    background: #FFFFFF;
    color: #1E293B;
}

[data-theme="dark"] .auth-btn:hover {
    background: #F8FAFC;
}

/* Icon buttons (profile, login, logout) */
.auth-btn.icon-btn {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    width: 40px;
    height: 40px;
}

.auth-btn.icon-btn svg {
    display: block;
}

.auth-btn.icon-btn:hover {
    transform: translateY(-2px) scale(1.05);
}

/* Spacing between multiple auth buttons */
.nav-auth>.auth-btn+.auth-btn {
    margin-left: 8px;
}

/* White text for glassmorphism navbar readability */
/* Light mode: Black text for readability */
nav .logo,
nav .nav-menu a {
    color: #000000 !important;
}

nav .nav-menu a:hover {
    color: #333333 !important;
}

/* Light mode launch tag - dark text for readability */
[data-theme="light"] nav .launch-tag {
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Dark mode launch tag - white text */
[data-theme="dark"] nav .launch-tag {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section - Clean white design */
.hero {
    background: var(--bg-secondary);
    padding: 75px 0 75px;
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}



/* Removed - all color themes now use spectrum approach for body background */

/* Removed - all color themes now use spectrum approach for launch banner */

/* Removed - forcing white background for all light themes */

/* Override hero-bg variable for light mode luminous themes */
/* Light mode color themes - use colored hero backgrounds (set in theme definitions above) */

/* Force white background for landing page body only - HTML element */
html[data-theme="light"][data-color-theme="luminous-blue"],
html[data-theme="light"][data-color-theme="luminous-green"],
html[data-theme="light"][data-color-theme="luminous-purple"],
html[data-theme="light"][data-color-theme="luminous-orange"],
html[data-theme="light"][data-color-theme="luminous-yellow"],
html[data-theme="light"][data-color-theme="luminous-teal"] {
    background: #fff !important;
}

/* Force white background for ALL light mode - BODY element */
[data-theme="light"] body {
    background: #FFFFFF !important;
}

/* Force white background for all light mode luminous themes - BODY element */
html[data-theme="light"][data-color-theme="luminous-blue"] body,
html[data-theme="light"][data-color-theme="luminous-green"] body,
html[data-theme="light"][data-color-theme="luminous-purple"] body,
html[data-theme="light"][data-color-theme="luminous-orange"] body,
html[data-theme="light"][data-color-theme="luminous-yellow"] body,
html[data-theme="light"][data-color-theme="luminous-teal"] body {
    background: #FFFFFF !important;
}

/* Removed - no longer needed with white background */



/* LIGHT MODE COLOR THEMES - White text ONLY in hero sections with colored backgrounds */
/* Hero sections get white text, alternating sections get dark text */


/* All other sections use dark text on light alternating backgrounds */
/* Color themes - landing page class-specific text colors */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .section-title,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .section-subtitle,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .challenge-text,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .persona-situation,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .persona-solution,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .card-description,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .layer-desc,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .step-description,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .why-description,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .blueprint-desc,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .problem-description,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .faq-answer-content {
    color: var(--text-primary) !important;
}

/* Spectrum theme - landing page class-specific text colors */
[data-theme="light"][data-color-theme="spectrum"] .section-title,
[data-theme="light"][data-color-theme="spectrum"] .section-subtitle {
    color: var(--text-primary) !important;
}

/* LIGHT MODE COLOR THEMES - Cards get semi-transparent white backgrounds */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .problem-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .model-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .step-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .why-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .u-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .persona-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .pricing-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .faq-question {
    background: #FFFFFF !important;
    border: 1px solid var(--card-border) !important;
    backdrop-filter: none !important;
}

/* LIGHT MODE COLOR THEMES - Fix remaining white elements */

/* Footer */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) footer {
    background: transparent !important;
}

/* Blueprint section glows */
[data-theme="light"][data-color-theme] .blueprints-carousel-container::before {
    background: linear-gradient(90deg, var(--section-darker) 0, transparent 100%) !important;
}

[data-theme="light"][data-color-theme] .blueprints-carousel-container::after {
    background: linear-gradient(90deg, transparent 0, var(--section-darker) 100%) !important;
}

/* Solution grid layers */
[data-theme="light"][data-color-theme] .layer {
    background: #FFFFFF !important;
    backdrop-filter: blur(10px) !important;
}

/* Formula box - glass morphism for color themes only */


/* Removed - now using absolute white for all themes */

[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .generator-result {
    background: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    backdrop-filter: none !important;
}

[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .refresh-btn {
    background: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .interactive-prompt {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Spectrum light mode needs a visible border too */
[data-theme="light"][data-color-theme="spectrum"] .interactive-prompt {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Removed - let column-values have their data-color attribute colors */

/* Fix ALL remaining white/light backgrounds for color themes */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .step-time,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .persona-avatar,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .early-bird-banner {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Fix text inside these elements to be dark */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .challenge-label,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .challenge-text,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .step-time,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .early-bird-text,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .early-bird-title {
    color: var(--text-primary) !important;
}

/* Make DNA container and strand backgrounds transparent to match career generator glass morphism */
[data-theme="light"][data-color-theme] .dna-container,
[data-theme="light"][data-color-theme] .dna-strand,
[data-theme="light"][data-color-theme] .dna-helix {
    background: transparent !important;
}

[data-theme="dark"] .dna-container,
[data-theme="dark"] .dna-strand,
[data-theme="dark"] .dna-helix {
    background: transparent !important;
}

/* Light mode hero text */


/* Dark mode hero text */
[data-theme="dark"] .hero .hero-text h1,
[data-theme="dark"] .hero .hero-text .subheadline,
[data-theme="dark"] .hero .hero-text .subheadline strong {
    color: #FFFFFF;
}

[data-theme="dark"] .hero .launch-benefits {
    color: rgba(255, 255, 255, 0.8);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-text h1 {
    font-size: 48px;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 25px;
    font-weight: 800;
}

/* Animated Career DNA text - works on all themes */
.career-dna {
    display: inline-block;
    background: linear-gradient(90deg,
            #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

@keyframes color-flow {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Dynamic career DNA colors based on theme selector */
[data-color-theme="spectrum"] .career-dna {
    background: linear-gradient(90deg,
            #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

[data-color-theme="luminous-blue"] .career-dna {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

[data-color-theme="luminous-green"] .career-dna {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

[data-color-theme="luminous-purple"] .career-dna {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

[data-color-theme="luminous-orange"] .career-dna {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

[data-color-theme="luminous-yellow"] .career-dna {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

[data-color-theme="luminous-teal"] .career-dna {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

.hero-text .subheadline {
    font-size: 22px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.5;
}

.hero-text .subheadline strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Interactive Career Generator */
.career-generator {
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* 3D DNA Animation */
.dna-container {
    position: relative;
    margin: 15px auto 15px;
    width: 100%;
    max-width: 400px;
    perspective: 1000px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dna-helix {
    width: 100%;
    max-width: 400px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateDNA 8s linear infinite;
}

@keyframes rotateDNA {
    from {
        transform: rotateX(0deg);
    }

    to {
        transform: rotateX(360deg);
    }
}

.dna-strand {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.dna-pair {
    position: absolute;
    width: 4px;
    height: 100%;
    transform-style: preserve-3d;
}

.dna-base {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background-color 0.5s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.dna-base.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: dnaPulse 3s ease-in-out infinite;
}

.dna-base.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: dnaPulse 3s ease-in-out infinite 1.5s;
}


.dna-connector {
    position: absolute;
    width: 1px;
    height: 70%;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    background: var(--dna-connector-color);
    transition: background-color 0.5s ease;
}

@keyframes dnaPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateX(-50%) scale(1.3);
        opacity: 1;
    }
}

/* DNA Color Classes - works for both dynamic and static DNA */
.dna-color-blue,
.static-dna-base.dna-color-blue {
    background: #0066FF !important;
}

.dna-color-green,
.static-dna-base.dna-color-green {
    background: #00D084 !important;
}

.dna-color-purple,
.static-dna-base.dna-color-purple {
    background: #8B5CF6 !important;
}

.dna-color-orange,
.static-dna-base.dna-color-orange {
    background: #FF6B35 !important;
}

.dna-color-yellow,
.static-dna-base.dna-color-yellow {
    background: #F59E0B !important;
}

.dna-color-teal,
.static-dna-base.dna-color-teal {
    background: #00BFA5 !important;
}

/* Strategist color - dynamic based on theme */
[data-theme="light"] .dna-color-black,
[data-theme="light"] .static-dna-base.dna-color-black {
    background: #1E293B !important;
}

[data-theme="dark"] .dna-color-black,
[data-theme="dark"] .static-dna-base.dna-color-black {
    background: #FFFFFF !important;
}

/* Gray color - dynamic based on theme (for Strategist) */
[data-theme="light"] .dna-color-gray,
[data-theme="light"] .static-dna-base.dna-color-gray {
    background: #1E293B !important;
}

[data-theme="dark"] .dna-color-gray,
[data-theme="dark"] .static-dna-base.dna-color-gray {
    background: #FFFFFF !important;
}

/* Static DNA base styling */
.static-dna-base {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
}

/* White DNA color for Strategist - high contrast in both modes */
/* Fallback for white when theme detection fails */
.dna-color-white,
.static-dna-base.dna-color-white {
    background: #808080 !important;
    /* Gray as fallback */
    border: 1px solid #808080 !important;
}

[data-theme="light"] .static-dna-base.dna-color-white,
[data-theme="light"] .dna-color-white {
    background: #000000 !important;
    border: 1px solid #000000 !important;
}

[data-theme="dark"] .static-dna-base.dna-color-white,
[data-theme="dark"] .dna-color-white {
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
}

.generator-title {
    font-size: 14px;
    /* no forced uppercase */
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-align: center;
    margin-top: 50px;
}

.generator-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.generator-column {
    text-align: center;
}

.column-label {
    font-size: 12px;
    /* no forced uppercase */
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 600;
}

.column-value {
    background: transparent;
    border-radius: 12px;
    padding: 15px 10px;
    border: 2px solid var(--card-border);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.5),
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5),
        1px 1px 0 rgba(0, 0, 0, 0.5),
        0 0 10px rgba(0, 0, 0, 0.8);
}

/* VM embed (demo iframe): keep column-value chips static inside VM results tab */
html[data-vm-embed="1"] .column-value {
    transition: none !important;
    transform: none !important;
}

/* Column value colors - ensure contrast with text shadow */
/* Spectrum theme (default) - Light mode with colored text and white backgrounds */
html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="blue"] {
    color: #0066FF !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="green"] {
    color: #00D084 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="purple"] {
    color: #8B5CF6 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="orange"] {
    color: #FF6B35 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="yellow"] {
    color: #F59E0B !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="teal"] {
    color: #00BFA5 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

/* Spectrum theme (default) - Dark mode with colored text and white outlines */
html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="blue"] {
    color: #4D94FF !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(77, 148, 255, 0.5) !important;
}

html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="green"] {
    color: #4AE3A6 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(74, 227, 166, 0.5) !important;
}

html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="purple"] {
    color: #A78BFA !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(167, 139, 250, 0.5) !important;
}

html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="orange"] {
    color: #FF8A66 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 138, 102, 0.5) !important;
}

html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="yellow"] {
    color: #FBBF24 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
}

html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="teal"] {
    color: #5EEAD4 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(94, 234, 212, 0.5) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="black"] {
    color: #1E293B !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="black"] {
    color: #FFFFFF !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .column-value[data-color="white"] {
    color: #1E293B !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    text-shadow: none !important;
}

html[data-color-theme="spectrum"] [data-theme="dark"] .column-value[data-color="white"] {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    text-shadow: none !important;
}

/* All color themes - Light mode with colored text */
[data-theme="light"][data-color-theme] .column-value[data-color="blue"] {
    color: #0066FF !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"][data-color-theme] .column-value[data-color="green"] {
    color: #00D084 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"][data-color-theme] .column-value[data-color="purple"] {
    color: #8B5CF6 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"][data-color-theme] .column-value[data-color="orange"] {
    color: #FF6B35 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"][data-color-theme] .column-value[data-color="yellow"] {
    color: #F59E0B !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"][data-color-theme] .column-value[data-color="teal"] {
    color: #00BFA5 !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

/* All color themes - Dark mode with colored text and subtle borders */
[data-theme="dark"][data-color-theme] .column-value[data-color="blue"] {
    color: #4D94FF !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(77, 148, 255, 0.5) !important;
}

[data-theme="dark"][data-color-theme] .column-value[data-color="green"] {
    color: #4AE3A6 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(74, 227, 166, 0.5) !important;
}

[data-theme="dark"][data-color-theme] .column-value[data-color="purple"] {
    color: #A78BFA !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(167, 139, 250, 0.5) !important;
}

[data-theme="dark"][data-color-theme] .column-value[data-color="orange"] {
    color: #FF8A66 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 138, 102, 0.5) !important;
}

[data-theme="dark"][data-color-theme] .column-value[data-color="yellow"] {
    color: #FBBF24 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
}

[data-theme="dark"][data-color-theme] .column-value[data-color="teal"] {
    color: #5EEAD4 !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(94, 234, 212, 0.5) !important;
}

[data-theme="light"][data-color-theme] .column-value[data-color="black"] {
    color: #1E293B !important;
    background: transparent !important;
    border: 2px solid #E2E8F0 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"][data-color-theme] .column-value[data-color="black"] {
    color: #FFFFFF !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"][data-color-theme] .column-value[data-color="white"] {
    color: #1E293B !important;
    background: transparent !important;
    border: 1px solid #E2E8F0 !important;
    text-shadow: none !important;
}

[data-theme="dark"][data-color-theme] .column-value[data-color="white"] {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    text-shadow: none !important;
}

.generator-result {
    text-align: center;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--card-border);
}

.result-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.result-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 0;
    transition: color 0.5s ease;
}

.generator-result .result-code {
    font-size: 14px;
    color: var(--text-secondary);
    font-family: monospace;
    /* Reserve space for up to two lines to prevent layout shifts */
    line-height: 1.35;
    min-height: calc(2 * 1.35em);
    /* Ensure long tokens wrap gracefully on small screens */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Result-code color mapping (used by results + blueprint pages) */
.result-code[data-color="blue"] { color: var(--color-blue) !important; }
.result-code[data-color="green"] { color: var(--color-green) !important; }
.result-code[data-color="purple"] { color: var(--color-purple) !important; }
.result-code[data-color="orange"] { color: var(--color-orange) !important; }
.result-code[data-color="yellow"] { color: var(--color-yellow) !important; }
.result-code[data-color="teal"] { color: var(--color-teal) !important; }
.result-code[data-color="gray"],
.result-code[data-color="black"],
.result-code[data-color="white"] { color: var(--color-gray) !important; }

/* Generator Header */
.generator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Generate button */
.refresh-btn {
    width: auto;
    min-width: 90px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    padding: 0 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.refresh-btn:hover {
    transform: translateY(-2px);
    background: var(--bg-secondary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.refresh-btn:hover .refresh-icon {
    transform: rotate(90deg);
}

.refresh-icon {
    font-size: 16px;
    transition: transform 0.3s;
}

.refresh-text {
    font-size: 14px;
    font-weight: 600;
}

/* Interactive prompt */
.interactive-prompt {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 200px;
}

.launch-countdown {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.countdown-label {
    color: var(--hero-text-secondary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.countdown-unit {
    text-align: center;
}

.countdown-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-primary);
    display: block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.countdown-unit-label {
    font-size: 12px;
    color: var(--hero-text-secondary);
    text-transform: uppercase;
}

.early-access-form {
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    padding: 8px;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 500px;
}

.early-access-input {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
}

.early-access-input::placeholder {
    color: var(--text-secondary);
}

.early-access-btn {
    padding: 16px 32px;
    background: var(--text-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.early-access-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background: #000000;
}

/* Assessment CTA */
.assessment-cta {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.assessment-btn {
    padding: 14px 28px;
    background: var(--text-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.3px;
    text-decoration: none;
}

.assessment-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    background: #000000;
}

/* Primary button for error pages */
.primary-btn {
    padding: 14px 28px;
    background: var(--text-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    display: inline-block;
}

.primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    background: #000000;
}

/* Waitlist Card Styling */
.waitlist-card {
    opacity: 0.7;
    border: 2px solid #ccc !important;
}

.feature-wait {
    color: #f59e0b;
    font-weight: bold;
}

.waitlist-btn {
    background: #6b7280 !important;
    color: #ffffff !important;
    opacity: 0.8;
}




.launch-benefits {
    display: flex;
    gap: 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.launch-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.launch-benefit span:first-child {
    color: var(--spectrum-green);
    font-weight: 700;
}

/* Hero Visual */
.hero-visual {
    position: relative;
    overflow: hidden;
}

.blueprint-preview {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 40px;
    border: 1px solid var(--glass-border);
    position: relative;
}

.color-code-demo {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

/* Spectrum theme - strategic color distribution */
:root .pricing-price {
    color: var(--spectrum-purple);
}

:root .pricing-card:nth-child(1) .pricing-price {
    color: var(--spectrum-green);
}

:root .blueprint-tag:nth-child(1) {
    background: rgba(0, 102, 255, 0.1);
    color: var(--spectrum-blue);
    border: 1px solid rgba(0, 102, 255, 0.2);
}

:root .blueprint-tag:nth-child(2) {
    background: rgba(139, 92, 246, 0.1);
    color: var(--spectrum-purple);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

:root .blueprint-tag:nth-child(3) {
    background: rgba(0, 191, 165, 0.1);
    color: var(--spectrum-teal);
    border: 1px solid rgba(0, 191, 165, 0.2);
}

/* Early bird banner uses orange */
:root .early-bird-banner {
    background: rgba(255, 107, 53, 0.05);
    border-color: var(--spectrum-orange);
}

:root .early-bird-title {
    color: var(--spectrum-orange);
}

/* Removed alternating .feature-check backgrounds - checkmark emoji is sufficient */

/* Single color themes override */
[data-color-theme] .pricing-price {
    color: var(--accent-primary);
}

[data-color-theme] .blueprint-tag {
    background: rgba(255, 255, 255, 0.15);
    color: var(--hero-text-primary);
    border: 1px solid transparent;
}

[data-color-theme] .early-bird-banner {
    background: var(--bg-gradient-1);
    border-color: var(--accent-primary);
}

[data-color-theme] .early-bird-title {
    color: var(--text-primary);
}

/* Removed .feature-check background - checkmark emoji is sufficient */

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Spectrum theme shows 6 cubes in 2x3 grid */
:root .color-code-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

:root .color-cube {
    width: 60px;
    height: 60px;
    animation: bounce 2s ease-in-out infinite;
}

:root .color-cube:nth-child(1) {
    background: var(--spectrum-blue);
    animation-delay: 0s;
}

:root .color-cube:nth-child(2) {
    background: var(--spectrum-purple);
    animation-delay: 0.2s;
}

:root .color-cube:nth-child(3) {
    background: var(--spectrum-teal);
    animation-delay: 0.4s;
}

:root .color-cube:nth-child(4) {
    background: var(--spectrum-green);
    animation-delay: 0.6s;
}

:root .color-cube:nth-child(5) {
    background: var(--spectrum-orange);
    animation-delay: 0.8s;
}

:root .color-cube:nth-child(6) {
    background: var(--spectrum-gold);
    animation-delay: 1s;
}

/* Single-color themes show 3 cubes */
[data-color-theme] .color-code-demo {
    display: flex;
    justify-content: center;
    gap: 20px;
}

[data-color-theme] .color-cube {
    width: 80px;
    height: 80px;
    animation: bounce 2s ease-in-out infinite;
}

[data-color-theme] .color-cube:nth-child(1) {
    background: var(--accent-primary);
    animation-delay: 0s;
}

[data-color-theme] .color-cube:nth-child(2) {
    background: var(--accent-secondary);
    animation-delay: 0.3s;
}

[data-color-theme] .color-cube:nth-child(3) {
    background: var(--accent-tertiary);
    animation-delay: 0.6s;
}

[data-color-theme] .color-cube:nth-child(n+4) {
    display: none;
}

/* Clean styles for Spectrum theme */

/* Each problem card gets a different accent color */
:root .problem-card:nth-child(1) .problem-icon {
    background: var(--spectrum-blue);
}

:root .problem-card:nth-child(2) .problem-icon {
    background: var(--spectrum-purple);
}

:root .problem-card:nth-child(3) .problem-icon {
    background: var(--spectrum-teal);
}

/* Each step gets a different color */
:root .step-card:nth-child(1) .step-number {
    background: var(--spectrum-blue);
}

:root .step-card:nth-child(2) .step-number {
    background: var(--spectrum-green);
}

:root .step-card:nth-child(3) .step-number {
    background: var(--spectrum-purple);
}

/* Layer stack uses different colors */
:root .layer:nth-child(1) {
    border-color: var(--spectrum-blue);
}

:root .layer:nth-child(2) {
    border-color: var(--spectrum-green);
}

:root .layer:nth-child(3) {
    border-color: var(--spectrum-purple);
}

/* Pricing accent colors */
:root .pricing-card.premium {
    border-color: var(--spectrum-green);
}

:root .pricing-card.premium::before {
    background: var(--spectrum-green);
}

:root .pricing-cta {
    background: var(--text-primary);
}

:root .pricing-cta:hover {
    background: #000000;
}

:root .pricing-price {
    color: var(--spectrum-green);
}

/* Success indicators use green */
:root .benefit-icon {
    background: var(--spectrum-green);
}

/* Removed .feature-check background - checkmark emoji is sufficient */

/* FAQ icons rotate through all 6 colors - extended for 9 items */
/* Light mode spectrum theme: FAQ icons with individual colors */
html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(1) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(2) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(3) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(4) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(5) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(6) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(7) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(8) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(9) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(10) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(11) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="spectrum"] [data-theme="light"] .faq-item:nth-child(12) .faq-icon {
    color: var(--spectrum-teal) !important;
}

/* Light mode ALL color themes: FAQ icons with paired colors */
html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(1) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(2) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(3) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(4) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(5) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(6) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(7) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(8) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(9) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(10) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(11) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-blue"] [data-theme="light"] .faq-item:nth-child(12) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(1) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(2) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(3) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(4) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(5) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(6) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(7) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(8) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(9) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(10) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(11) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-green"] [data-theme="light"] .faq-item:nth-child(12) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(1) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(2) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(3) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(4) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(5) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(6) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(7) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(8) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(9) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(10) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(11) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-purple"] [data-theme="light"] .faq-item:nth-child(12) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(1) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(2) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(3) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(4) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(5) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(6) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(7) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(8) .faq-icon {
    color: var(--spectrum-orange) !important;
}

/* Trust Bar */
.trust-bar {
    background: var(--bg-primary);
    padding: 30px 0;
    border-top: none;
    border-bottom: none;
    transition: var(--theme-transition);
    position: relative;
    z-index: 3;
    /* ensure above fixed cloud layers (z=1) */
    isolation: isolate;
    /* new stacking context to prevent blend bleed */
}

[data-theme="light"] .trust-bar {
    /* Make Trust Bar transparent in light mode */
    background: transparent !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

[data-theme="dark"] .trust-bar {
    background: var(--trustbar-bg);
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.trust-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 150px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.trust-icon {
    font-size: 32px;
    background: white;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trust-text {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(9) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(10) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(11) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-orange"] [data-theme="light"] .faq-item:nth-child(12) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(1) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(2) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(3) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(4) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(5) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(6) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(7) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(8) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(9) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(10) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(11) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="light"] .faq-item:nth-child(12) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(1) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(2) .faq-icon {
    color: var(--spectrum-blue) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(3) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(4) .faq-icon {
    color: var(--spectrum-green) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(5) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(6) .faq-icon {
    color: var(--spectrum-purple) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(7) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(8) .faq-icon {
    color: var(--spectrum-orange) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(9) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(10) .faq-icon {
    color: var(--spectrum-gold) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(11) .faq-icon {
    color: var(--spectrum-teal) !important;
}

html[data-color-theme="luminous-teal"] [data-theme="light"] .faq-item:nth-child(12) .faq-icon {
    color: var(--spectrum-teal) !important;
}

/* Time badges */
:root .step-time {
    color: var(--text-secondary);
    border-color: var(--card-border);
    background: var(--bg-secondary);
}

/* Spectrum button in selector */
.color-btn.spectrum {
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.color-btn.spectrum::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg,
            #0066FF 0deg,
            #00D084 60deg,
            #8B5CF6 120deg,
            #FF6B35 180deg,
            #F59E0B 240deg,
            #00BFA5 300deg,
            #0066FF 360deg);
    border-radius: 50%;
    transform: scale(0.7);
}

/* Section highlights use different colors */
/* All highlights follow the theme selector - no hardcoded section colors */
/* Spectrum theme uses accent-primary (blue), single-color themes use their accent-primary */

/* Footer highlight handled by separate footer rules */

/* Fix dark mode readability for ALL themes */
[data-theme="dark"] .model-section .section-title,
[data-theme="dark"] .why-section .section-title,
[data-theme="dark"] .blueprints-section .section-title {
    color: #FFFFFF !important;
}

/* COMMENTED OUT - Conflicting with gradient animation
[data-theme="dark"] .model-section .section-title .highlight,
[data-theme="dark"] .why-section .section-title .highlight,
[data-theme="dark"] .blueprints-section .section-title .highlight {
    color: var(--accent-primary) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}
*/

/* Override for single-color themes */
[data-color-theme] .problem-icon,
[data-color-theme] .step-number {
    background: var(--accent-primary);
}

[data-color-theme] .benefit-icon {
    background: var(--success-color);
}

/* Removed .feature-check background - checkmark emoji is sufficient */

[data-color-theme] .faq-icon {
    color: var(--accent-primary);
}

/* Ensure persona-badge text is white in both light and dark modes for all themes */
[data-theme="light"] .persona-badge,
[data-theme="light"][data-color-theme] .persona-badge,
[data-theme="dark"] .persona-badge,
[data-theme="dark"][data-color-theme] .persona-badge {
    color: #FFFFFF !important;
}

[data-color-theme] .pricing-card.premium {
    border-color: var(--accent-primary);
}

[data-color-theme] .pricing-card.premium::before {
    background: var(--accent-primary);
}

[data-color-theme] .pricing-cta {
    background: var(--accent-primary);
}

[data-color-theme] .pricing-cta:hover {
    background: var(--btn-hover-bg);
}

[data-color-theme] .section-title .highlight,
[data-color-theme] h2 .highlight {
    color: var(--accent-primary);
}

/* Ensure light mode color themes show accent colors in highlights */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .highlight {
    color: var(--accent-primary) !important;
}

/* Ensure dark mode also uses theme colors for all highlights */
[data-theme="dark"][data-color-theme] .section-title .highlight,
[data-theme="dark"][data-color-theme] h2 .highlight,
[data-theme="dark"][data-color-theme] .problem-section .section-title .highlight,
[data-theme="dark"][data-color-theme] .solution-text h2 .highlight,
[data-theme="dark"][data-color-theme] .how-it-works .section-title .highlight,
[data-theme="dark"][data-color-theme] .pricing-section .section-title .highlight,
[data-theme="dark"][data-color-theme] .faq-section .section-title .highlight,
[data-theme="dark"][data-color-theme] .personas-section .section-title .highlight {
    color: var(--accent-primary) !important;
}

/* Clean up unused styles - ensure Career DNA gradient works everywhere */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Fix Career DNA gradient for all themes */
[data-color-theme] .hero-text h1 .career-dna {
    display: inline-block;
    background: linear-gradient(90deg,
            #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

/* Single-color themes - use the same translucent nav as spectrum in light mode */
/* Single-color themes - uses base.html defaults (flat white) */

[data-theme="dark"][data-color-theme="luminous-blue"] nav,
[data-theme="dark"][data-color-theme="luminous-green"] nav,
[data-theme="dark"][data-color-theme="luminous-purple"] nav,
[data-theme="dark"][data-color-theme="luminous-orange"] nav,
[data-theme="dark"][data-color-theme="luminous-yellow"] nav,
[data-theme="dark"][data-color-theme="luminous-teal"] nav {
    background: var(--bg-primary) !important;
}

/* Nav text white for color themes - DARK MODE ONLY */
/* Removed - now handled by unified color theme rules above */

/* All color themes nav text - light mode black, dark mode white */
[data-theme="light"][data-color-theme] .logo,
[data-theme="light"][data-color-theme] .nav-menu a {
    color: #000000 !important;
}

[data-theme="dark"][data-color-theme] .logo,
[data-theme="dark"][data-color-theme] .nav-menu a {
    color: #FFFFFF !important;
}

[data-color-theme="luminous-blue"] .launch-tag,
[data-color-theme="luminous-green"] .launch-tag,
[data-color-theme="luminous-purple"] .launch-tag,
[data-color-theme="luminous-orange"] .launch-tag,
[data-color-theme="luminous-yellow"] .launch-tag,
[data-color-theme="luminous-teal"] .launch-tag {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--hero-text-primary);
    backdrop-filter: blur(5px);
}

/* Removed - all color themes now use spectrum approach for hero */

[data-theme="dark"][data-color-theme] .hero-text h1,
[data-theme="dark"][data-color-theme] .hero-text .subheadline {
    color: var(--hero-text-primary);
}

[data-theme="dark"][data-color-theme] .hero-text .subheadline {
    color: var(--hero-text-secondary);
}

[data-color-theme] .early-access-form {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-color-theme] .early-access-input {
    color: var(--hero-text-primary);
}

[data-color-theme] .early-access-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

[data-color-theme] .early-access-btn {
    background: var(--accent-primary);
    color: var(--btn-text-color);
}

[data-color-theme] .early-access-btn:hover {
    background: var(--btn-hover-bg);
}

[data-color-theme] .assessment-btn {
    background: var(--accent-primary);
    color: var(--btn-text-color);
}

[data-color-theme] .assessment-btn:hover {
    background: var(--btn-hover-bg);
}

/* Spectrum dark mode - neutral buttons */
[data-theme="dark"][data-color-theme="spectrum"] .early-access-btn,
[data-theme="dark"][data-color-theme="spectrum"] .assessment-btn,
[data-theme="dark"][data-color-theme="spectrum"] .blueprints-btn,
[data-theme="dark"][data-color-theme="spectrum"] .pricing-cta {
    background: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18) !important;
}

[data-theme="dark"][data-color-theme="spectrum"] .early-access-btn:hover,
[data-theme="dark"][data-color-theme="spectrum"] .assessment-btn:hover,
[data-theme="dark"][data-color-theme="spectrum"] .blueprints-btn:hover,
[data-theme="dark"][data-color-theme="spectrum"] .pricing-cta:hover {
    background: #F3F4F6 !important;
    color: #111827 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22) !important;
}

[data-theme="dark"][data-color-theme="spectrum"] .pricing-special-badge {
    background: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18) !important;
}

[data-theme="dark"][data-color-theme="spectrum"] .pricing-primary-cta {
    background: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18) !important;
}

[data-theme="dark"][data-color-theme="spectrum"] .pricing-primary-cta:hover {
    background: #F3F4F6 !important;
    color: #111827 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22) !important;
}

.pricing-special-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-special-badge:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.pricing-primary-cta {
    display: inline-flex;
    padding: 1rem 2rem;
    margin: 0 auto 0.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #FFFFFF;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-primary-cta[data-price-tier^="lifetime_"] {
    font-size: calc(1.1rem - 2px) !important;
}

.pricing-primary-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* Fix buttons in light mode color themes - ensure they use theme color */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .early-access-btn,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .assessment-btn,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .blueprints-btn {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .early-access-btn:hover,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .assessment-btn:hover,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .blueprints-btn:hover {
    background: var(--btn-hover-bg) !important;
    color: #FFFFFF !important;
}

/* Ensure all cards have visible borders in light mode */
[data-theme="light"] .problem-card,
[data-theme="light"] .model-card,
[data-theme="light"] .step-card,
[data-theme="light"] .why-card,
[data-theme="light"] .u-card,
[data-theme="light"] .persona-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .faq-question {
    border: 1px solid var(--card-border) !important;
}

/* Light mode: apply subtle glass blur to cards */
[data-theme="light"] .problem-card,
[data-theme="light"] .model-card,
[data-theme="light"] .step-card,
[data-theme="light"] .why-card,
[data-theme="light"] .u-card,
[data-theme="light"] .persona-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .faq-question,
[data-theme="light"] .blueprint-card,
[data-theme="light"] .pricing-gradient-card,
[data-theme="light"] .blueprint-preview,
[data-theme="light"] .generator-result {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Light mode COLOR THEMES: force card glass (override earlier white backgrounds) */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .problem-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .model-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .step-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .why-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .u-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .persona-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .faq-question,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .blueprint-card,
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .blueprint-preview {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Light mode: remove solid backgrounds on cards for glass effect */
[data-theme="light"] .problem-card,
[data-theme="light"] .model-card,
[data-theme="light"] .step-card,
[data-theme="light"] .why-card,
[data-theme="light"] .u-card,
[data-theme="light"] .persona-card,
[data-theme="light"] .faq-question,
[data-theme="light"] .blueprint-card,
[data-theme="light"] .blueprint-preview,
[data-theme="light"] .generator-result {
    background: transparent !important;
    background-image: none !important;
}

/* Make interactive prompt + generator result match column-value backgrounds */
[data-theme="light"] .interactive-prompt,
[data-theme="light"] .generator-result {
    background: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .interactive-prompt,
[data-theme="dark"] .generator-result {
    background: var(--card-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Light mode: keep pricing backgrounds intact */
[data-theme="light"] .pricing-card,
[data-theme="light"] .pricing-gradient-card {
    background: rgba(214, 243, 255, 0.9) !important;
    /* light sky blue like clouds */
}

/* Luminous Blue: make pricing-gradient-card semi-transparent like others */
html[data-color-theme="luminous-blue"] [data-theme="light"] .pricing-gradient-card {
    background: rgba(214, 243, 255, 0.9) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Light mode: remove background from layer blocks */
[data-theme="light"] .layer,
[data-theme="light"] .layer:nth-child(1),
[data-theme="light"] .layer:nth-child(2),
[data-theme="light"] .layer:nth-child(3) {
    background: transparent !important;
}

/* Light mode: step-time badges transparent but keep blur */
[data-theme="light"] .step-time {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Light mode: persona-avatar transparent but keep blur */
[data-theme="light"] .persona-avatar {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Override non-spectrum color themes to remove step-time background but keep blur */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .step-time {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Override non-spectrum color themes to remove persona-avatar background but keep blur */
[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .persona-avatar {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* MAXIMUM SPECIFICITY FIXES FOR LIGHT MODE COLOR THEMES */
html[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .pricing-card.premium {
    border: 3px solid var(--accent-primary) !important;
}

html[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .pricing-cta {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
}

html[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .early-access-btn {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

html[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .assessment-btn {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

html[data-theme="light"][data-color-theme]:not([data-color-theme="spectrum"]) .blueprints-btn {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* Removed - launch-benefits should not change with theme color */

/* Light mode - glass background to match other cards */
[data-theme="light"] .career-generator,
[data-theme="light"][data-color-theme] .career-generator {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Dark mode - proper dark background */
[data-theme="dark"] .career-generator,
[data-theme="dark"][data-color-theme] .career-generator {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--card-border) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Removed problematic color theme rules for generator elements */

[data-color-theme] .refresh-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--hero-text-primary);
}

[data-color-theme] .interactive-prompt {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #000000;
}

[data-color-theme] .generator-header {
    margin-bottom: 20px;
}

.blueprint-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blueprint-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.blueprint-tag {
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 20px;
    color: var(--hero-text-primary);
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

/* Career Personas Section */
.personas-section {
    padding: 80px 0;
    background: var(--bg-secondary);
    transition: var(--theme-transition);
}

.personas-section .container {
    max-width: 100%;
    padding: 0 40px;
}

.personas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.persona-card {
    background: var(--card-bg);
    border-radius: 25px;
    padding: 40px 30px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    position: relative;
}

.persona-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.persona-badge {
    position: absolute;
    top: -15px;
    left: 30px;
    background: var(--accent-primary);
    color: #FFFFFF;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

:root .persona-card:nth-child(1) .persona-badge {
    background: var(--spectrum-blue);
}

:root .persona-card:nth-child(2) .persona-badge {
    background: var(--spectrum-green);
}

:root .persona-card:nth-child(3) .persona-badge {
    background: var(--spectrum-purple);
}

.persona-avatar {
    width: 80px;
    height: 80px;
    background: transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 20px;
}

.persona-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.persona-situation {
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.5;
    font-weight: 500;
}

.persona-challenge {
    background: transparent;
    border-left: 3px solid var(--accent-primary);
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 0 10px 10px 0;
}

/* ALL themes use specific colors for each persona (like spectrum) */
.persona-card:nth-child(1) .persona-challenge {
    border-left-color: var(--spectrum-blue);
}

.persona-card:nth-child(2) .persona-challenge {
    border-left-color: var(--spectrum-green);
}

.persona-card:nth-child(3) .persona-challenge {
    border-left-color: var(--spectrum-purple);
}

.persona-card:nth-child(4) .persona-challenge {
    border-left-color: var(--spectrum-orange);
}

/* Dark mode: Make persona-challenge border white for readability */
[data-theme="dark"] .persona-challenge {
    border-left-color: #FFFFFF !important;
}

.challenge-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
}

.challenge-text {
    color: var(--text-primary);
    line-height: 1.5;
    font-weight: 500;
}

.persona-solution {
    color: var(--text-primary);
    line-height: 1.6;
}

.persona-solution strong {
    color: var(--accent-primary);
    font-weight: 700;
}

:root .persona-card:nth-child(1) .persona-solution strong {
    color: var(--spectrum-blue);
}

:root .persona-card:nth-child(2) .persona-solution strong {
    color: var(--spectrum-green);
}

:root .persona-card:nth-child(3) .persona-solution strong {
    color: var(--spectrum-purple);
}

/* Model Section Styles */
.model-section {
    padding: 80px 0;
    background: var(--bg-secondary);
    transition: var(--theme-transition);
}

.model-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.model-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid var(--card-border);
    position: relative;
    transition: all 0.3s;
    box-shadow: var(--shadow-sm);
}

.model-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-number {
    position: absolute;
    top: -15px;
    left: 30px;
    width: 30px;
    height: 30px;
    background: var(--accent-primary);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

:root .model-card:nth-child(1) .card-number {
    background: var(--spectrum-blue);
}

:root .model-card:nth-child(2) .card-number {
    background: var(--spectrum-green);
}

:root .model-card:nth-child(3) .card-number {
    background: var(--spectrum-purple);
}

[data-color-theme] .card-number {
    background: var(--accent-primary);
}

.card-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.card-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.card-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.example-tag {
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-radius: 15px;
    font-size: 12px;
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
}

/* Light mode colored example tags */
[data-theme="light"] .example-tag[data-color="blue"] {
    color: #0066FF;
    background: rgba(0, 102, 255, 0.1);
    border-color: rgba(0, 102, 255, 0.3);
}

[data-theme="light"] .example-tag[data-color="green"] {
    color: #00D084;
    background: rgba(0, 208, 132, 0.1);
    border-color: rgba(0, 208, 132, 0.3);
}

[data-theme="light"] .example-tag[data-color="purple"] {
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="light"] .example-tag[data-color="orange"] {
    color: #FF6B35;
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.3);
}

[data-theme="light"] .example-tag[data-color="yellow"] {
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="light"] .example-tag[data-color="teal"] {
    color: #00BFA5;
    background: rgba(0, 191, 165, 0.1);
    border-color: rgba(0, 191, 165, 0.3);
}

[data-theme="light"] .example-tag[data-color="black"] {
    color: #1E293B;
    background: rgba(30, 41, 59, 0.1);
    border-color: rgba(30, 41, 59, 0.3);
}

/* Dark mode colored example tags */
[data-theme="dark"] .example-tag[data-color="blue"] {
    color: #4D94FF;
    background: rgba(77, 148, 255, 0.15);
    border-color: rgba(77, 148, 255, 0.4);
}

[data-theme="dark"] .example-tag[data-color="green"] {
    color: #4AE3A6;
    background: rgba(74, 227, 166, 0.15);
    border-color: rgba(74, 227, 166, 0.4);
}

[data-theme="dark"] .example-tag[data-color="purple"] {
    color: #A78BFA;
    background: rgba(167, 139, 250, 0.15);
    border-color: rgba(167, 139, 250, 0.4);
}

[data-theme="dark"] .example-tag[data-color="orange"] {
    color: #FF8A66;
    background: rgba(255, 138, 102, 0.15);
    border-color: rgba(255, 138, 102, 0.4);
}

[data-theme="dark"] .example-tag[data-color="yellow"] {
    color: #FBBF24;
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
}

[data-theme="dark"] .example-tag[data-color="teal"] {
    color: #5EEAD4;
    background: rgba(94, 234, 212, 0.15);
    border-color: rgba(94, 234, 212, 0.4);
}

[data-theme="dark"] .example-tag[data-color="black"] {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.model-formula {
    text-align: center;
    margin-top: 60px;
}

.formula-box {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 30px 50px;
    border-radius: 30px;
    border: 3px solid transparent;
    background:
        linear-gradient(rgba(248, 250, 252, 0.9), rgba(248, 250, 252, 0.9)) padding-box,
        linear-gradient(135deg, #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF) border-box;
    background-size: 100% 100%, 400% 400%;
    background-repeat: no-repeat, no-repeat;
    background-position: 0% 50%, 0% 50%;
    background-clip: padding-box, border-box;
    will-change: background-position;
    animation: borderGradientShift 10s ease-in-out infinite;
}

/* Dark mode: solid interior (90% slate-900) with pricing-style gradient border */
[data-theme="dark"] .formula-box {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)),
        linear-gradient(135deg, #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF) !important;
    background-size: 100% 100%, 400% 400% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 0% 50%, 0% 50%;
    background-clip: padding-box, border-box !important;
    animation: borderGradientShift 10s ease-in-out infinite;
}

/* Ensure multi-layer background positions animate consistently (solid, gradient) */
@keyframes borderGradientShift {
    0% {
        background-position: 0% 50%, 0% 50%;
    }

    50% {
        background-position: 0% 50%, 100% 50%;
    }

    100% {
        background-position: 0% 50%, 0% 50%;
    }
}

.formula-part {
    padding: 10px 20px;
    border-radius: 20px;
    color: #FFFFFF;
    font-weight: 700;
}

/* Give formula parts colored backgrounds for ALL themes */
.formula-part:nth-child(1) {
    background: var(--spectrum-blue) !important;
    color: #FFFFFF !important;
}

.formula-part:nth-child(3) {
    background: var(--spectrum-green) !important;
    color: #FFFFFF !important;
}

.formula-part:nth-child(5) {
    background: var(--spectrum-purple) !important;
    color: #FFFFFF !important;
}

/* Ensure all formula parts have white text */
.formula-part {
    color: #FFFFFF !important;
}

/* Maximum specificity rules to prevent any override */
html[data-theme="light"] .formula-part {
    color: #FFFFFF !important;
}

html[data-theme="light"][data-color-theme] .formula-part {
    color: #FFFFFF !important;
}

html[data-theme="light"][data-color-theme="spectrum"] .formula-part {
    color: #FFFFFF !important;
}

html[data-theme="light"][data-color-theme="luminous-blue"] .formula-part,
html[data-theme="light"][data-color-theme="luminous-green"] .formula-part,
html[data-theme="light"][data-color-theme="luminous-purple"] .formula-part,
html[data-theme="light"][data-color-theme="luminous-orange"] .formula-part,
html[data-theme="light"][data-color-theme="luminous-yellow"] .formula-part,
html[data-theme="light"][data-color-theme="luminous-teal"] .formula-part {
    color: #FFFFFF !important;
}



.formula-plus,
.formula-equals {
    font-size: 24px;
    color: var(--text-secondary);
    font-weight: 300;
}

.formula-result {
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
}

.formula-result-text {
    background: linear-gradient(90deg,
            #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

.problem-section {
    padding: 80px 0;
    background: var(--bg-primary);
    transition: var(--theme-transition);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.section-title .highlight {
    color: var(--accent-primary);
    filter: brightness(1);
}

/* COMMENTED OUT - Spectrum theme text outlines (can be restored if needed) */
/*
[data-color-theme="spectrum"][data-theme="light"] .section-title .highlight,
[data-color-theme="spectrum"][data-theme="light"] h2 .highlight,
[data-color-theme="spectrum"][data-theme="light"] .model-section .section-title .highlight,
[data-color-theme="spectrum"][data-theme="light"] .why-section .section-title .highlight,
[data-color-theme="spectrum"][data-theme="light"] .blueprints-section .section-title .highlight {
    color: #FFFFFF !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        2px 2px 4px rgba(0,0,0,0.5) !important;
}

[data-color-theme="spectrum"][data-theme="dark"] .section-title .highlight,
[data-color-theme="spectrum"][data-theme="dark"] h2 .highlight,
[data-color-theme="spectrum"][data-theme="dark"] .model-section .section-title .highlight,
[data-color-theme="spectrum"][data-theme="dark"] .why-section .section-title .highlight,
[data-color-theme="spectrum"][data-theme="dark"] .blueprints-section .section-title .highlight {
    color: #2D3748 !important;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        2px 2px 4px rgba(255,255,255,0.5) !important;
}
*/

/* NEW - Spectrum theme colorful gradient highlights (exactly like .formula-result) */
[data-color-theme="spectrum"] .section-title .highlight,
[data-color-theme="spectrum"] h2 .highlight,
[data-color-theme="spectrum"] .model-section .section-title .highlight,
[data-color-theme="spectrum"] .why-section .section-title .highlight,
[data-color-theme="spectrum"] .blueprints-section .section-title .highlight {
    font-size: inherit;
    font-weight: inherit;
    display: inline-block;
    background: linear-gradient(90deg,
            #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: color-flow 5s linear infinite;
}

.section-subtitle {
    font-size: 20px;
    color: var(--text-secondary);
}

.problem-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.problem-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    text-align: center;
    border: 1px solid var(--card-border);
}

.problem-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: var(--card-hover);
}

.problem-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--accent-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.problem-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.problem-description {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Solution Section */
.solution-section {
    padding: 80px 0;
    background: var(--bg-primary);
    transition: var(--theme-transition);
}

.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.solution-visual {
    position: relative;
}

.layer-stack {
    position: relative;
    padding: 20px;
}

.layer {
    padding: 35px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 2px solid;
    box-shadow: var(--shadow-md);
    margin-bottom: 25px;
    transition: all 0.3s;
}

.layer:nth-child(1) {
    background: var(--bg-gradient-1);
    margin-left: 0;
    border-color: var(--spectrum-blue);
}

.layer:nth-child(2) {
    background: var(--bg-gradient-2);
    margin-left: 20px;
    border-color: var(--spectrum-green);
}

.layer:nth-child(3) {
    background: var(--bg-gradient-1);
    margin-left: 40px;
    border-color: var(--spectrum-purple);
}

/* Dark mode: semi-transparent layer backgrounds for glass effect */
[data-theme="dark"] .layer,
[data-theme="dark"] .layer:nth-child(1),
[data-theme="dark"] .layer:nth-child(2),
[data-theme="dark"] .layer:nth-child(3) {
    background: rgba(15, 23, 42, 0.62) !important;
    border-color: var(--card-border) !important;
}

.layer:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.layer-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

.layer-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.layer-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 600;
}

.layer-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 15px;
}

.solution-text h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--text-primary);
}

.solution-text p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.6;
}

.benefit-list {
    list-style: none;
}

.benefit-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--text-primary);
}

.benefit-icon {
    width: 30px;
    height: 30px;
    background: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

/* How It Works */
.how-it-works {
    padding: 80px 0;
    background: var(--bg-secondary);
    transition: var(--theme-transition);
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 60px;
    position: relative;
}

.step-card {
    background: var(--card-bg);
    border-radius: 25px;
    padding: 40px 30px;
    border: 1px solid var(--card-border);
    position: relative;
    transition: all 0.3s;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.step-number {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: var(--accent-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--btn-text-color);
}

/* Video styling for step cards */
.step-video-container {
    position: relative;
    overflow: hidden;
    background: transparent;
    width: 100% !important;
    /* Reserve space for lazy images using aspect-ratio to prevent layout shift during scroll */
    /* Average of 890x658, 890x665, 890x538 ≈ 890:620 ≈ 1.435 */
    aspect-ratio: 890 / 620;
    min-height: auto;
    height: auto !important;
    margin: 0 0 20px 0;
}

.step-video-container picture {
    display: block;
    width: 100%;
    height: 100%;
}

.step-video-container img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.step-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.step-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
    text-align: center;
}

.step-description {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.step-time {
    display: inline-block;
    background: var(--bg-gradient-1);
    color: var(--success-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--success-color);
}

/* Pricing Section */
.pricing-section {
    padding: 80px 0;
    background: var(--bg-secondary);
    transition: var(--theme-transition);
}

.early-bird-banner {
    max-width: 600px;
    margin: 0 auto 40px;
    padding: 20px 30px;
    background: var(--bg-gradient-1);
    border: 2px solid var(--accent-primary);
    border-radius: 20px;
    text-align: center;
}

.early-bird-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.early-bird-text {
    color: var(--text-secondary);
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--card-bg);
    border-radius: 30px;
    padding: 50px 40px;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: all 0.3s;
    border: 1px solid var(--card-border);
}

.pricing-card.premium {
    border: 3px solid var(--accent-primary);
    transform: scale(1.05);
}

/* Popular badge */
.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: var(--btn-text-color);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* COMPREHENSIVE FIX: Popular badge should have white text across ALL color schemes */
[data-color-theme] .popular-badge {
    color: #FFFFFF !important;
}

/* Spectrum theme specific - Light mode */
html[data-theme="light"][data-color-theme="spectrum"] .popular-badge {
    color: #FFFFFF !important;
}

/* Spectrum theme specific - Dark mode */
html[data-theme="dark"][data-color-theme="spectrum"] .popular-badge {
    background: #FFFFFF !important;
    color: #1F2937 !important;
}

/* Luminous themes specific - Light mode */
html[data-theme="light"][data-color-theme="luminous-blue"] .popular-badge,
html[data-theme="light"][data-color-theme="luminous-green"] .popular-badge,
html[data-theme="light"][data-color-theme="luminous-purple"] .popular-badge,
html[data-theme="light"][data-color-theme="luminous-orange"] .popular-badge,
html[data-theme="light"][data-color-theme="luminous-yellow"] .popular-badge,
html[data-theme="light"][data-color-theme="luminous-teal"] .popular-badge {
    color: #FFFFFF !important;
}

/* Luminous themes specific - Dark mode */
html[data-theme="dark"][data-color-theme="luminous-blue"] .popular-badge,
html[data-theme="dark"][data-color-theme="luminous-green"] .popular-badge,
html[data-theme="dark"][data-color-theme="luminous-purple"] .popular-badge,
html[data-theme="dark"][data-color-theme="luminous-orange"] .popular-badge,
html[data-theme="dark"][data-color-theme="luminous-yellow"] .popular-badge,
html[data-theme="dark"][data-color-theme="luminous-teal"] .popular-badge {
    color: #FFFFFF !important;
}

/* Price note */
.price-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 10px;
    font-weight: 500;
}

.pricing-card:hover {
    transform: scale(1.015);
    box-shadow: var(--shadow-lg);
}

.pricing-card.premium:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-lg);
}

.pricing-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.pricing-price-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
}

.pricing-price {
    font-size: 48px;
    font-weight: 800;
    color: var(--accent-primary);
}

.price-original {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-size: 32px;
    font-weight: 600;
    position: relative;
}


.pricing-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.4;
    text-align: center;
}

.lifetime-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-align: center;
}

.no-subscription-text {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 12px 0 8px 0;
    font-weight: 500;
}

.pricing-features {
    list-style: none;
    margin-bottom: 40px;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.feature-check {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success-color);
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.pricing-cta {
    width: 100%;
    padding: 18px;
    background: var(--accent-primary);
    color: #FFFFFF !important;
    border: 1px solid transparent;
    border-radius: 25px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: block;
    text-align: center;
}

.pricing-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    background: var(--btn-hover-bg);
}

/* Spectrum Theme Pricing Gradient Border Outlines Only */

/* 1. Make the card a positioning context, but remove its own background */
[data-color-theme="spectrum"] .pricing-card.premium {
    position: relative;
    border-radius: 30px;
    /* Background is now handled by the ::after pseudo-element */
}

/* 2. The ::before pseudo-element is the animated gradient border.
      It's larger than the parent and positioned behind everything */
[data-color-theme="spectrum"] .pricing-card.premium::before {
    content: '';
    position: absolute;
    z-index: -1;
    /* Position behind the ::after element and content */
    inset: -3px;
    /* Makes it 3px larger on all sides */
    border-radius: inherit;
    /* Match the parent's border-radius */
    background: linear-gradient(90deg, #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF);
    background-size: 200% 100%;
    animation: color-flow-border 5s linear infinite;
}

/* 3. The ::after pseudo-element creates the solid interior background.
      It sits on top of the ::before element, masking the gradient in the center */
[data-color-theme="spectrum"] .pricing-card.premium::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Same size as the parent card */
    border-radius: inherit;
    /* Match the parent's curve */
    z-index: -1;
    /* Behind content but above ::before */
}

/* 4. Apply the correct solid background color to the ::after element */
[data-theme="light"][data-color-theme="spectrum"] .pricing-card.premium::after {
    background: #FFFFFF;
}

[data-theme="dark"][data-color-theme="spectrum"] .pricing-card.premium::after {
    background: rgb(31, 41, 55);
}

/* 5. Ensure content stays on top (but exclude popular-badge to preserve its absolute positioning) */
[data-color-theme="spectrum"] .pricing-card.premium> :not(.popular-badge) {
    position: relative;
    z-index: 1;
}

/* 6. The keyframes for the animation remain unchanged */
@keyframes color-flow-border {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

[data-color-theme="spectrum"] .early-bird-banner {
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-gradient-1), var(--bg-gradient-1)) padding-box,
        linear-gradient(90deg, #0066FF, #00D084, #8B5CF6, #FF6B35, #F59E0B, #00BFA5, #0066FF) border-box;
    background-size: 100% 100%, 200% 100%;
    animation: color-flow-border 5s linear infinite;
}


/* FAQ Section */
.faq-section {
    padding: 80px 0;
    background: var(--bg-primary);
    transition: var(--theme-transition);
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Mobile: Stack FAQs in single column */
@media (max-width: 768px) {
    .faq-container {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 25px 30px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Dark mode: transparent FAQ background to match cards */
[data-theme="dark"] .faq-question {
    background: rgba(15, 23, 42, 0.62) !important;
    border-color: var(--card-border) !important;
}

/* Dark mode: pricing gradient card interior matches other cards */
[data-theme="dark"] .pricing-gradient-card {
    background: rgba(15, 23, 42, 0.9) !important;
}

.faq-question:hover {
    background: var(--card-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-primary);
}

/* Dark mode: use base hover elevation without forcing a solid fill */
[data-theme="dark"] .faq-question:hover {
    background: var(--card-hover) !important;
}

.faq-icon {
    transition: transform 0.3s;
    color: var(--accent-primary);
    font-size: 24px;
    font-weight: 600;
}

/* Ensure FAQ icon is visible in all themes */
/* Remove this general rule - let individual FAQ icons have their own colors */

/* Dark mode FAQ icons also rotate through all 6 colors - extended for 11 items */
/* Dark mode spectrum theme: FAQ icons with paired colors (blue blue green green purple purple orange orange yellow yellow teal teal) */
[data-theme="dark"] .faq-item:nth-child(1) .faq-icon {
    color: #4D94FF !important;
}

[data-theme="dark"] .faq-item:nth-child(2) .faq-icon {
    color: #4D94FF !important;
}

[data-theme="dark"] .faq-item:nth-child(3) .faq-icon {
    color: #33DCAA !important;
}

[data-theme="dark"] .faq-item:nth-child(4) .faq-icon {
    color: #33DCAA !important;
}

[data-theme="dark"] .faq-item:nth-child(5) .faq-icon {
    color: #A78BFA !important;
}

[data-theme="dark"] .faq-item:nth-child(6) .faq-icon {
    color: #A78BFA !important;
}

[data-theme="dark"] .faq-item:nth-child(7) .faq-icon {
    color: #FF8F66 !important;
}

[data-theme="dark"] .faq-item:nth-child(8) .faq-icon {
    color: #FF8F66 !important;
}

[data-theme="dark"] .faq-item:nth-child(9) .faq-icon {
    color: #FCD34D !important;
}

[data-theme="dark"] .faq-item:nth-child(10) .faq-icon {
    color: #FCD34D !important;
}

[data-theme="dark"] .faq-item:nth-child(11) .faq-icon {
    color: #26D9C0 !important;
}

[data-theme="dark"] .faq-item:nth-child(12) .faq-icon {
    color: #26D9C0 !important;
}

/* Dark mode ALL color themes: FAQ icons with paired colors */
html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(1) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(2) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(3) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(4) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(5) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(6) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(7) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(8) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(9) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(10) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(11) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-blue"] [data-theme="dark"] .faq-item:nth-child(12) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(1) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(2) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(3) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(4) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(5) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(6) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(7) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(8) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(9) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(10) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(11) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-green"] [data-theme="dark"] .faq-item:nth-child(12) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(1) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(2) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(3) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(4) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(5) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(6) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(7) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(8) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(9) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(10) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(11) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-purple"] [data-theme="dark"] .faq-item:nth-child(12) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(1) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(2) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(3) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(4) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(5) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(6) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(7) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(8) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(9) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(10) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(11) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-orange"] [data-theme="dark"] .faq-item:nth-child(12) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(1) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(2) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(3) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(4) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(5) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(6) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(7) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(8) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(9) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(10) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(11) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-yellow"] [data-theme="dark"] .faq-item:nth-child(12) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(1) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(2) .faq-icon {
    color: #4D94FF !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(3) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(4) .faq-icon {
    color: #33DCAA !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(5) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(6) .faq-icon {
    color: #A78BFA !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(7) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(8) .faq-icon {
    color: #FF8F66 !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(9) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(10) .faq-icon {
    color: #FCD34D !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(11) .faq-icon {
    color: #26D9C0 !important;
}

html[data-color-theme="luminous-teal"] [data-theme="dark"] .faq-item:nth-child(12) .faq-icon {
    color: #26D9C0 !important;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}

.faq-answer-content {
    padding: 20px 30px;
    color: var(--text-secondary);
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* Why 42codes Section - IMPROVED LAYOUT */
.why-section {
    padding: 80px 0;
    background: var(--bg-primary);
    transition: var(--theme-transition);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.why-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.why-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-primary);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    color: #FFFFFF;
}

.why-content {
    flex: 1;
}

.why-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.why-description {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Add breathing room between stacked why-description rows */
.why-description+.why-description {
    margin-top: 0.75rem;
}

/* Universal card style - transparent background like why-card */
.u-card {
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
}

.u-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: var(--card-hover);
}

/* Blueprints Section Styles - ANIMATED CAROUSEL */
.blueprints-section {
    padding: 80px 0;
    background: var(--bg-secondary);
    transition: var(--theme-transition);
    overflow: hidden;
}

.blueprints-carousel-container {
    position: relative;
}

.blueprint-row {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}

.blueprint-track {
    display: flex;
    gap: 30px;
}

/* First row scrolls left to right */
.blueprint-row:first-child .blueprint-track {
    animation: scrollLeft 40s linear infinite;
}

/* Second row scrolls right to left */
.blueprint-row:last-child .blueprint-track {
    animation: scrollRight 40s linear infinite;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Pause on hover */
.blueprint-row:hover .blueprint-track {
    animation-play-state: paused;
}

.blueprint-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 30px;
    border: 2px solid;
    transition: all 0.3s;
    flex-shrink: 0;
    width: 320px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Blueprint Card Colors - All 7 Career Styles */
.blueprint-card[data-color="yellow"],
.blueprint-card[data-group="gold"] {
    border-color: var(--color-yellow);
}

.blueprint-card[data-color="red"] {
    border-color: var(--color-red);
}

.blueprint-card[data-color="green"],
.blueprint-card[data-group="green"] {
    border-color: var(--color-green);
}

.blueprint-card[data-color="orange"],
.blueprint-card[data-group="orange"] {
    border-color: var(--color-orange);
}

.blueprint-card[data-color="purple"],
.blueprint-card[data-group="purple"] {
    border-color: var(--color-purple);
}

.blueprint-card[data-color="teal"],
.blueprint-card[data-group="teal"] {
    border-color: var(--color-teal);
}

.blueprint-card[data-color="gray"] {
    border-color: var(--color-gray);
}

.blueprint-card[data-color="blue"],
.blueprint-card[data-group="blue"] {
    border-color: var(--color-blue);
}

/* Hover effects with color glow */
.blueprint-card[data-color="yellow"]:hover {
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.25);
}

.blueprint-card[data-color="red"]:hover {
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.25);
}

.blueprint-card[data-color="green"]:hover {
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.25);
}

.blueprint-card[data-color="orange"]:hover {
    box-shadow: 0 10px 40px rgba(255, 107, 53, 0.25);
}

.blueprint-card[data-color="purple"]:hover {
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.25);
}

.blueprint-card[data-color="teal"]:hover {
    box-shadow: 0 10px 40px rgba(20, 184, 166, 0.25);
}

.blueprint-card[data-color="gray"]:hover {
    box-shadow: 0 10px 40px rgba(107, 114, 128, 0.25);
}

.blueprint-card[data-color="blue"]:hover {
    box-shadow: 0 10px 40px rgba(0, 102, 255, 0.25);
}

/* Color themes use accent primary for landing page carousel blueprint cards only */
/* Removed - blueprint cards should keep their individual style colors, not theme color */

.blueprint-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.blueprint-header {
    margin-bottom: 15px;
}

.blueprint-badge {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}

.blueprint-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.blueprint-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.blueprint-code .blueprint-plus {
    font-size: 11px;
    font-weight: 900;
    color: var(--text-secondary);
    line-height: 1;
}

.blueprint-code .blueprint-dim-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.blueprint-code .blueprint-dim-badge[data-color="blue"] { background-color: rgba(0, 102, 255, 0.1); color: #1E3A8A; }
.blueprint-code .blueprint-dim-badge[data-color="green"] { background-color: rgba(16, 185, 129, 0.1); color: #065F46; }
.blueprint-code .blueprint-dim-badge[data-color="purple"] { background-color: rgba(139, 92, 246, 0.1); color: #5B21B6; }
.blueprint-code .blueprint-dim-badge[data-color="orange"] { background-color: rgba(255, 107, 53, 0.1); color: #7C2D12; }
.blueprint-code .blueprint-dim-badge[data-color="yellow"] { background-color: rgba(245, 158, 11, 0.1); color: #92400E; }
.blueprint-code .blueprint-dim-badge[data-color="teal"] { background-color: rgba(0, 191, 165, 0.1); color: #065F46; }
.blueprint-code .blueprint-dim-badge[data-color="gray"],
.blueprint-code .blueprint-dim-badge[data-color="black"],
.blueprint-code .blueprint-dim-badge[data-color="white"] { background-color: rgba(156, 163, 175, 0.12); color: #374151; }

.blueprint-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

/* Blueprint Tags - Style and Passion */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    min-height: 22px;
}

.tag-style[data-style-color="yellow"],
.tag-passion[data-passion-color="yellow"] {
    background: var(--color-yellow);
    color: #111827;
}

.tag-style[data-style-color="red"],
.tag-passion[data-passion-color="red"] {
    background: var(--color-red);
    color: #FFFFFF;
}

.tag-style[data-style-color="green"],
.tag-passion[data-passion-color="green"] {
    background: var(--color-green);
    color: #FFFFFF;
}

.tag-style[data-style-color="orange"],
.tag-passion[data-passion-color="orange"] {
    background: var(--color-orange);
    color: #FFFFFF;
}

.tag-style[data-style-color="purple"],
.tag-passion[data-passion-color="purple"] {
    background: var(--color-purple);
    color: #FFFFFF;
}

.tag-style[data-style-color="teal"],
.tag-passion[data-passion-color="teal"] {
    background: var(--color-teal);
    color: #FFFFFF;
}

.tag-style[data-style-color="gray"],
.tag-passion[data-passion-color="gray"] {
    background: var(--color-gray);
    color: #FFFFFF;
}

.tag-style[data-style-color="blue"],
.tag-passion[data-passion-color="blue"] {
    background: var(--color-blue);
    color: #FFFFFF;
}

/* Light mode - ensure all tags have white text except yellow */
[data-theme="light"] .tag-style[data-style-color="blue"],
[data-theme="light"] .tag-passion[data-passion-color="blue"],
[data-theme="light"] .tag-style[data-style-color="green"],
[data-theme="light"] .tag-passion[data-passion-color="green"],
[data-theme="light"] .tag-style[data-style-color="purple"],
[data-theme="light"] .tag-passion[data-passion-color="purple"],
[data-theme="light"] .tag-style[data-style-color="orange"],
[data-theme="light"] .tag-passion[data-passion-color="orange"],
[data-theme="light"] .tag-style[data-style-color="teal"],
[data-theme="light"] .tag-passion[data-passion-color="teal"],
[data-theme="light"] .tag-style[data-style-color="gray"],
[data-theme="light"] .tag-passion[data-passion-color="gray"] {
    color: #FFFFFF !important;
}

/* Dark mode text color adjustments for brighter backgrounds */
[data-theme="dark"] .tag-style[data-style-color="yellow"],
[data-theme="dark"] .tag-passion[data-passion-color="yellow"] {
    color: #111827;
}

[data-theme="dark"] .tag-style[data-style-color="gray"],
[data-theme="dark"] .tag-passion[data-passion-color="gray"] {
    color: #111827;
}

.blueprints-cta {
    text-align: center;
    margin-top: 40px;
}

.blueprints-cta p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.blueprints-btn {
    padding: 16px 40px;
    background: var(--text-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.blueprints-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Gradient overlays for smooth edges */
.blueprints-carousel-container::before,
.blueprints-carousel-container::after {
    display: none;
}

.blueprints-carousel-container::before {}

.blueprints-carousel-container::after {}

/* Footer CTA - Clean neutral design */
.footer-cta {
    padding: 100px 0;
    background: var(--bg-primary);
    text-align: center;
    transition: var(--theme-transition);
    position: relative;
    overflow: hidden;
    transition: var(--theme-transition);
}

.footer-cta-content {
    position: relative;
    z-index: 1;
}

/* Light mode footer-cta text */
[data-theme="light"] .footer-cta h2 {
    font-size: 48px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 20px;
}

[data-theme="light"] .footer-cta h2 .highlight {
    color: #FFFFFF;
    filter: brightness(1.1);
}

[data-theme="light"] .footer-cta p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

/* Dark mode footer-cta text */
[data-theme="dark"] .footer-cta h2 {
    font-size: 48px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 20px;
}

/* Removed - now handled by color theme rules */

[data-theme="dark"] .footer-cta p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

/* Spectrum theme footer uses dark background */
:root .footer-cta {
    background: var(--accent-primary);
}

/* Light mode - removed hardcoded override, using section-lightest from line 420-422 */

/* Light mode footer-cta - black text */
[data-theme="light"] .footer-cta h2,
[data-theme="light"][data-color-theme] .footer-cta h2 {
    color: #000000 !important;
}

[data-theme="light"] .footer-cta p,
[data-theme="light"][data-color-theme] .footer-cta p {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Dynamic highlight based on theme selector */
[data-theme="light"][data-color-theme] .footer-cta h2 .highlight {
    color: var(--accent-primary) !important;
}

/* Dynamic button based on theme selector */
[data-theme="light"][data-color-theme] .footer-cta .cta-btn {
    background: var(--accent-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

[data-theme="light"][data-color-theme] .footer-cta .cta-btn:hover {
    background: var(--btn-hover-bg) !important;
    transform: translateY(-2px);
}

/* Dark mode - regular text white */
[data-theme="dark"][data-color-theme] .footer-cta h2 {
    color: #FFFFFF !important;
}

/* Dark mode - highlight uses theme color */
[data-theme="dark"][data-color-theme] .footer-cta h2 .highlight {
    color: var(--accent-primary) !important;
}

[data-theme="dark"][data-color-theme] .footer-cta p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Tablet breakpoint - maintain 3 columns */
@media (max-width: 1024px) {
    .pricing-cards {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1000px;
        gap: 20px;
    }

    .pricing-card.premium {
        transform: scale(1.02);
    }
}

/* Mobile Responsive - Enhanced */
@media (max-width: 768px) {

    .hero {
        padding: 40px 20px 40px;
    }

    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 40px;
    }

    .hero-text {
        order: 1;
    }

    .hero-text h1 {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .hero-text .subheadline {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 24px;
    }

    .hero-visual {
        width: 100%;
        max-width: 100%;
        display: block;
        order: 2;
    }

    .career-generator {
        padding: 20px;
    }

    .dna-container {
        width: 100%;
        max-width: 350px;
        margin: 20px auto;
        height: 95px;
    }

    .dna-helix {
        width: 100%;
        height: 70px;
    }

    .dna-base {
        width: 6px;
        height: 6px;
    }

    .generator-columns {
        gap: 20px;
        margin-bottom: 15px;
    }

    .generator-title {
        margin-top: 0;
    }

    .column-label {
        font-size: 10px;
    }

    .column-value {
        font-size: 11px;
        padding: 10px 5px;
        height: 44px;
    }

    .result-title {
        font-size: 20px;
    }

    .generator-result .result-code {
        font-size: 12px;
    }

    .generator-header {
        gap: 12px;
        margin-bottom: 15px;
        flex-direction: row;
        justify-content: space-between;
    }

    .refresh-btn {
        min-width: 80px;
        height: 32px;
        font-size: 13px;
        padding: 0 10px;
        gap: 4px;
    }

    .refresh-icon {
        font-size: 14px;
    }

    .refresh-text {
        font-size: 13px;
    }

    .interactive-prompt {
        font-size: 13px;
        padding: 6px 14px;
        min-width: auto;
    }

    .generator-result {
        padding: 15px;
    }

    .countdown-timer {
        gap: 10px;
    }

    .countdown-value {
        font-size: 24px;
    }

    /* Three-layer model mobile fix */
    .layer {
        margin-left: 0 !important;
        padding: 25px;
    }

    .layer-icon {
        font-size: 28px;
    }

    .layer-title {
        font-size: 20px;
    }

    .layer-subtitle {
        font-size: 12px;
    }

    .layer-desc {
        font-size: 14px;
    }

    .problem-cards,
    .steps-container,
    .why-grid,
    .model-cards,
    .personas-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blueprint-card {
        width: 280px;
    }

    .solution-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pricing-card.premium {
        transform: scale(1);
    }

    /* Pricing amount tweaks (mobile) */
    .price-block {
        margin-top: 1rem;
    }

    .price-amount {
        font-size: 5rem !important;
        line-height: 1 !important;
    }

    .price-original {
        font-size: 2.25rem !important;
    }

    .launch-benefits {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-size: 14px;
    }

    .launch-benefits li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 18px;
    }

    /* Reduce section padding for mobile */
    .problem-section,
    .solution-section,
    .model-section,
    .why-section,
    .blueprints-section,
    .pricing-section,
    .faq-section,
    .personas-section {
        padding: 60px 20px;
    }

    .personas-section .container {
        padding: 0;
    }

    .layer-stack {
        padding: 0;
    }

    .early-access-form {
        flex-direction: column;
        max-width: 100%;
        gap: 12px;
    }

    .early-access-input {
        width: 100%;
        padding: 16px;
        min-height: 44px;
        font-size: 16px;
        border-radius: 8px;
    }

    .early-access-btn {
        width: 100%;
        padding: 16px;
        min-height: 44px;
        font-size: 16px;
        border-radius: 8px;
        font-weight: 600;
    }

    .model-formula .formula-box {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }

    .formula-part {
        padding: 8px 16px;
        font-size: 14px;
    }

    .formula-plus,
    .formula-equals {
        font-size: 18px;
    }

    .formula-result {
        font-size: 16px;
    }

    .persona-badge {
        font-size: 10px;
        padding: 4px 12px;
        left: 20px;
    }

    .persona-avatar {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .trust-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 40px;
        max-width: 600px;
        margin: 0 auto;
    }

    .launch-banner {
        padding: 8px 10px;
        font-size: 12px;
        line-height: 1.3;
        height: auto;
        min-height: 64px;
        flex-direction: column;
        gap: 6px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    /* Fix nav sticky position to match taller launch banner on tablet/mobile */
    nav {
        top: 64px;
        max-width: 100%;
        margin: 0 auto;
    }

    .launch-badge {
        display: block;
        margin: 0 auto;
        width: fit-content;
        padding: 2px 8px;
        font-size: 10px;
        border-radius: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
    }

    .nav-container {
        justify-content: space-between;
        align-items: center;
        position: relative;
        /* anchor dropdown to nav container */
    }

    .nav-menu {
        display: none;
        position: absolute;
        /* sit under nav */
        top: calc(100% + 0px);
        /* directly below nav container */
        left: 0;
        right: 0;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-top: none;
        border-radius: 0 0 12px 12px;
        padding: 10px 20px;
        flex-direction: column;
        gap: 0;
        z-index: 1200;
        /* over page content, under banner(1300) */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    /* Dark mode: make mobile dropdown glassy + transparent with blur */
    [data-theme="dark"] .nav-menu {
        /* Slightly more opaque for readability */
        background: rgba(3, 7, 18, 0.6) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid var(--card-border) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        font-size: 15px;
        padding: 10px 0;
        border-bottom: 1px solid var(--card-border);
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-menu a:last-child {
        border-bottom: none;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
    }

    .mobile-menu-toggle span {
        width: 25px;
        height: 3px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Auth button on mobile - keep visible next to hamburger */
    .nav-auth {
        margin-left: auto;
        margin-right: 12px;
    }

    .auth-btn {
        padding: 6px 16px;
        font-size: 13px;
    }

    .logo {
        font-size: 32px;
    }

    .launch-tag {
        padding: 6px 12px;
        font-size: 12px;
        gap: 6px;
        border-radius: 16px;
        text-align: center;
        max-width: 280px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .launch-tag span:last-child {
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .faq-question {
        padding: 20px;
        font-size: 16px;
    }

    .why-card {
        flex-direction: column;
        text-align: center;
    }

    .why-icon {
        margin: 0 auto 20px;
    }

    .blueprints-carousel-container::before,
    .blueprints-carousel-container::after {
        width: 30px;
    }

    .footer-cta h2 {
        font-size: 32px;
    }

    .footer-cta p {
        font-size: 18px;
    }

    .footer-cta .early-access-form {
        padding: 6px;
    }

    /* Pricing Section - Tablet Optimization */
    .pricing-gradient-card {
        padding: 1.5rem !important;
    }

    /* Two-column grid → Single column stack on tablet */
    .pricing-gradient-card>div[style*="grid-template-columns: 1fr 1.5fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* Price Display - Smaller on tablet */
    .pricing-gradient-card>div:last-child>div:first-child>div:first-child {
        font-size: 3.5rem !important;
    }

    /* Benefits Grid - Single column on tablet */
    .pricing-gradient-card div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    /* Deep Analysis - Single column on tablet */
    .pricing-gradient-card>div:last-child>div:nth-child(2)>div:last-child>div {
        grid-template-columns: 1fr !important;
        gap: 0.35rem !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .launch-banner {
        padding: 8px 10px;
        font-size: 12px;
        line-height: 1.3;
        height: auto;
        min-height: 64px;
        flex-direction: column;
        gap: 6px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .launch-badge {
        font-size: 9px;
        padding: 1px 6px;
        max-width: 85%;
        border-radius: 10px;
    }

    .launch-tag {
        padding: 4px 8px;
        font-size: 10px;
        gap: 4px;
        border-radius: 12px;
        max-width: 240px;
    }

    .launch-tag span:last-child {
        max-width: 160px;
    }

    /* Fix nav sticky position to match taller launch banner on mobile */
    nav {
        top: 64px;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Remove hero top padding on mobile to prevent nav jump */
    .hero {
        padding-top: 40px;
    }

    .hero-text h1 {
        font-size: 32px;
    }

    .hero-text .subheadline {
        font-size: 18px;
    }

    .section-title {
        font-size: 26px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    /* Further reduce section padding for small mobile */
    .problem-section,
    .solution-section,
    .model-section,
    .why-section,
    .blueprints-section,
    .pricing-section,
    .faq-section,
    .personas-section {
        padding: 40px 15px;
    }

    .blueprint-card {
        width: 250px;
    }

    .early-bird-banner {
        padding: 15px 20px;
    }

    .early-bird-title {
        font-size: 18px;
    }

    .pricing-price {
        font-size: 36px;
    }

    .pricing-title {
        font-size: 24px;
    }

    /* Pricing Section - Simplified Mobile Stacking */
    .pricing-section {
        padding: 30px 10px !important;
    }

    .pricing-gradient-shell {
        padding: 3px !important;
    }

    .pricing-gradient-card {
        padding: 0.85rem !important;
    }

    /* Badge - Compact */
    .pricing-special-badge {
        font-size: 0.6rem !important;
        padding: 0.35rem 0.75rem !important;
        top: -8px !important;
    }

    /* Two-column grid → Stack everything vertically */
    .pricing-gradient-card>div[style*="grid-template-columns"],
    .pricing-gradient-card[style*="grid-template-columns"] {
        display: block !important;
    }

    /* All font sizes smaller across the board */
    .pricing-gradient-card * {
        font-size: 0.75rem !important;
    }

    /* Reset specific sizes */
    .pricing-gradient-card h2,
    .pricing-gradient-card h3 {
        font-size: 1.1rem !important;
    }

    /* Price - prominent but not huge */
    .pricing-gradient-card>div>div>div[style*="font-size: 4.5rem"],
    .pricing-gradient-card .price-block .price-amount {
        font-size: 2.5rem !important;
    }

    .pricing-gradient-card>div>div>div[style*="font-size: 4.5rem"] span,
    .pricing-gradient-card .price-block .price-original {
        font-size: 1.25rem !important;
    }

    /* Countdown cards */
    .flip-card {
        width: 18px !important;
        height: 26px !important;
        font-size: 0.85rem !important;
    }

    .countdown-label {
        font-size: 0.5rem !important;
    }

    /* Tier grid - 2 columns */
    .pricing-gradient-card div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .pricing-gradient-card div[style*="grid-template-columns: repeat(4, 1fr)"]>div {
        padding: 6px 4px !important;
    }

    /* Benefits grid - single column */
    .pricing-gradient-card div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Deep analysis - single column */
    .pricing-gradient-card>div>div>div>div[style*="grid-template-columns: repeat(2, 1fr)"]:last-child {
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
    }

    /* CTA button */
    .pricing-primary-cta {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.85rem !important;
    }

}

/* Extra small mobile screens (320px and below) */
@media (max-width: 320px) {
    .hero {
        padding: 30px 15px 50px;
    }

    .hero-text h1 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 16px;
    }

    .hero-text .subheadline {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .dna-container {
        max-width: 280px;
        height: 85px;
        margin: 15px auto;
    }

    .dna-helix {
        height: 60px;
    }

    .dna-base {
        width: 5px;
        height: 5px;
    }

    .career-generator {
        padding: 20px;
    }

    .generator-columns {
        gap: 20px;
    }

    .column-label {
        font-size: 9px;
    }

    .column-value {
        font-size: 10px;
        padding: 8px 4px;
        height: 40px;
    }

    .result-title {
        font-size: 18px;
    }

    .generator-result .result-code {
        font-size: 11px;
    }

    .generator-header {
        gap: 8px;
        margin-bottom: 12px;
        flex-direction: row;
        justify-content: space-between;
    }

    .refresh-btn {
        min-width: 75px;
        height: 28px;
        font-size: 12px;
        padding: 0 8px;
        gap: 3px;
    }

    .refresh-icon {
        font-size: 12px;
    }

    .refresh-text {
        font-size: 12px;
    }

    .interactive-prompt {
        font-size: 12px;
        padding: 5px 12px;
        min-width: auto;
    }

    .launch-benefits {
        font-size: 13px;
        gap: 10px;
        margin-bottom: 20px;
    }

    .early-access-input,
    .early-access-btn {
        padding: 14px;
        font-size: 15px;
    }

    .section-title {
        font-size: 22px;
    }

    .section-subtitle {
        font-size: 15px;
    }

    /* Minimal section padding for very small screens */
    .problem-section,
    .solution-section,
    .model-section,
    .why-section,
    .blueprints-section,
    .pricing-section,
    .faq-section,
    .personas-section {
        padding: 30px 10px;
    }

    /* Reduce inner content spacing */
    .section-header {
        margin-bottom: 30px;
    }

    .model-cards,
    .personas-grid,
    .problem-cards,
    .why-grid {
        margin-top: 30px;
        gap: 20px;
    }
}

/* Mobile overrides for pricing amount - ensure visibility and spacing */
@media (max-width: 768px) {

    /* Add top spacing to the price block when stacked */
    .price-block {
        margin-top: 1rem;
    }

    /* Unified mobile price sizing across landing + results */
    .pricing-gradient-card .price-block .price-amount,
    .price-amount {
        font-size: 2.5rem !important;
        line-height: 1 !important;
    }

    .pricing-gradient-card .price-block .price-original,
    .price-original {
        font-size: 1.25rem !important;
    }
}

/* ===== FOOTER STYLES - One Line Inline ===== */

footer {
    background: var(--bg-primary);
    padding: 25px 0;
    margin: 0;
    transition: var(--theme-transition);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.footer-logo {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    transition: var(--theme-transition);
}

.footer-separator {
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0.5;
}

.footer-tagline {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    opacity: 0.7;
}

.footer-link {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-link:hover {
    opacity: 1;
    color: var(--accent-primary);
    text-decoration: underline;
}

/* Dark Mode Footer */
[data-theme="dark"] footer {
    background: transparent;
}

[data-theme="dark"] .footer-logo {
    color: var(--text-primary);
}

[data-theme="dark"] .footer-separator {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer-tagline {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer-copyright {
    color: var(--text-secondary);
}

/* Mobile Footer */
@media (max-width: 768px) {
    footer {
        padding: 1rem 0.75rem;
    }

    .footer-content {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-logo {
        font-size: 1rem;
    }

    .footer-separator {
        font-size: 0.75rem;
    }

    .footer-tagline {
        font-size: 0.625rem;
    }

    .footer-copyright {
        font-size: 0.625rem;
    }

    .footer-link {
        font-size: 0.625rem;
        padding: 0.125rem 0.25rem;
    }
}

/* Career Compatibility Analyzer */
.career-compatibility-analyzer {
    transition: var(--theme-transition);
}

.career-compatibility-analyzer .container {
    max-width: 1200px;
    margin: 0 auto;
}

.career-compatibility-analyzer .header {
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 32px;
    position: relative;
}

.career-compatibility-analyzer .header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 0.5px;
    background: var(--text-primary);
    opacity: 0.3;
}

.career-compatibility-analyzer .title {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .subtitle {
    font-size: 10px;
    opacity: 0.5;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

/* Two Column Layout */
.career-compatibility-analyzer .main-content {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 32px;
    align-items: start;
}

/* Left Column - Current Position & Search */
.career-compatibility-analyzer .sidebar-column {
    /* Removed sticky positioning for cleaner scrolling */
}

/* Right Column - Results */
.career-compatibility-analyzer .results-column {
    min-height: 600px;
}

/* Current Position Summary Card */
.career-compatibility-analyzer .current-card {
    border: 2px solid var(--text-primary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .card-label {
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--bg-primary);
    padding: 0 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .job-name {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 20px;
    text-align: center;
    color: var(--text-primary);
}

.career-compatibility-analyzer .stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.career-compatibility-analyzer .stat {
    text-align: center;
    border: 1.5px solid var(--text-primary);
    border-radius: 8px;
    padding: 12px 8px;
    background: var(--bg-primary);
    transition: all 0.2s;
}

.career-compatibility-analyzer .stat:hover {
    background: var(--card-hover);
    transform: translateY(-1px);
}

.career-compatibility-analyzer .stat-value {
    font-size: 24px;
    font-weight: 200;
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .stat-label {
    font-size: 9px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

/* Visual Bar */
.career-compatibility-analyzer .position-bar {
    height: 30px;
    border: 0.5px solid var(--text-primary);
    border-radius: 6px;
    margin-bottom: 24px;
    position: relative;
    background: repeating-linear-gradient(90deg,
            transparent,
            transparent 9.9%,
            var(--border-color) 9.9%,
            var(--border-color) 10%);
    overflow: hidden;
}

.career-compatibility-analyzer .bar-marker {
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--text-primary);
    top: 0;
}

.career-compatibility-analyzer .bar-marker::after {
    content: attr(data-label);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    white-space: nowrap;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .marker-current {
    left: 12.3%;
}

.career-compatibility-analyzer .marker-search {
    background: var(--text-secondary);
    width: 1px;
}

/* Search Section */
.career-compatibility-analyzer .search-section {
    margin-bottom: 24px;
    position: relative;
    border: 1px solid var(--text-primary);
    border-radius: 10px;
    padding: 16px;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .search-label {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--bg-primary);
    padding: 0 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .search-container {
    position: relative;
    margin-top: 8px;
}

.career-compatibility-analyzer .search-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--text-primary);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.career-compatibility-analyzer .search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.career-compatibility-analyzer .search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Autocomplete Dropdown */
.career-compatibility-analyzer .autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 0.5px solid var(--text-primary);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 10;
    margin-top: -1px;
}

.career-compatibility-analyzer .autocomplete.active {
    display: block;
}

.career-compatibility-analyzer .autocomplete-item {
    display: grid;
    grid-template-columns: 60px 1fr 75px 50px;
    padding: 10px;
    border-bottom: 0.5px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    gap: 12px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .autocomplete-item:hover {
    background: var(--card-hover);
}

.career-compatibility-analyzer .autocomplete-item:last-child {
    border-bottom: none;
}

/* Search Result Section */
.career-compatibility-analyzer .search-result {
    border: 1px dashed var(--text-primary);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    position: relative;
    min-height: 200px;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .search-placeholder {
    height: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.4;
}

.career-compatibility-analyzer .search-placeholder-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.career-compatibility-analyzer .search-placeholder-text {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .search-result.active .search-placeholder {
    display: none;
}

.analyzer-search-result-content {
    display: none;
}

.analyzer-search-result.active .analyzer-search-result-content {
    display: block;
}

.analyzer-search-result .analyzer-career-row.searched {
    background: var(--card-hover);
    border: 1px solid var(--text-primary);
    border-radius: 6px;
    margin: 4px -8px;
    padding: 7px 8px;
}

.analyzer-search-comparison {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0.5px solid var(--text-primary);
    font-size: 10px;
    opacity: 0.6;
    border-radius: 4px;
    color: var(--text-secondary);
}

/* Grade Scale */
.analyzer-grade-scale {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--card-bg);
    border-radius: 8px;
    font-size: 9px;
    flex-wrap: wrap;
}

.analyzer-scale-item {
    opacity: 0.6;
    color: var(--text-secondary);
}

/* Position Context */
.analyzer-context-section,
.analyzer-reference-section {
    margin-bottom: 14px;
    border: 0.5px solid var(--text-primary);
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
    background: var(--bg-primary);
}

.analyzer-section-title,
.analyzer-reference-title {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--bg-primary);
    padding: 0 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.analyzer-career-row {
    display: grid;
    grid-template-columns: 60px 1fr 75px 50px;
    padding: 7px 0;
    border-bottom: 0.5px solid var(--border-color);
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
}

.analyzer-career-row:last-child {
    border-bottom: none;
}

.analyzer-career-row.analyzer-faded {
    opacity: 0.5;
}

.analyzer-career-row.analyzer-highlight {
    background: var(--card-hover);
    margin: 4px -8px;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid var(--text-primary);
    border-radius: 6px;
    opacity: 1;
}

.analyzer-rank {
    font-weight: 500;
    text-align: center;
    color: var(--text-primary);
}

.analyzer-career-name {
    padding: 0 12px;
    color: var(--text-primary);
}

.analyzer-match {
    text-align: right;
    font-weight: 500;
    padding-right: 8px;
    color: var(--text-primary);
}

.analyzer-grade {
    text-align: center;
    font-size: 10px;
    padding: 3px 10px;
    border: 0.5px solid var(--text-primary);
    border-radius: 4px;
    min-width: 45px;
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Special styling for S rank */
.analyzer-grade-s {
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 600;
    border-color: var(--text-primary);
}

.analyzer-gap-text {
    text-align: center;
    padding: 8px 0;
    font-size: 8px;
    opacity: 0.25;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .career-compatibility-analyzer .main-content {
        grid-template-columns: 1fr;
    }

    .career-compatibility-analyzer .sidebar-column {
        position: relative;
        top: 0;
    }

    .career-compatibility-analyzer .title {
        font-size: 11px;
    }

    .career-compatibility-analyzer .subtitle {
        font-size: 9px;
    }

    .career-compatibility-analyzer .current-card {
        padding: 16px;
    }

    .career-compatibility-analyzer .job-name {
        font-size: 16px;
    }

    .career-compatibility-analyzer .stat-value {
        font-size: 20px;
    }
}

/* Missing Career Analyzer Classes */

/* Grade Scale */
.career-compatibility-analyzer .grade-scale {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--card-bg, #f9f9f9);
    border-radius: 8px;
    font-size: 9px;
    flex-wrap: wrap;
}

.career-compatibility-analyzer .scale-item {
    opacity: 0.6;
    color: var(--text-secondary);
}

/* Position Context */
.career-compatibility-analyzer .context-section,
.career-compatibility-analyzer .reference-section {
    margin-bottom: 14px;
    border: 0.5px solid var(--text-primary, #000);
    border-radius: 10px;
    padding: 14px 16px;
    position: relative;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .reference-section {
    border: 0.5px solid var(--border-color, #e5e5e5);
}

.career-compatibility-analyzer .section-title,
.career-compatibility-analyzer .reference-title {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--bg-primary);
    padding: 0 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .reference-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
    margin-bottom: 10px;
    position: relative;
    top: auto;
    left: auto;
    background: none;
    padding: 0;
}

.career-compatibility-analyzer .career-row {
    display: grid;
    grid-template-columns: 60px 1fr 75px 50px;
    padding: 7px 0;
    border-bottom: 0.5px solid var(--border-color, #e5e5e5);
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .career-row:last-child {
    border-bottom: none;
}

.career-compatibility-analyzer .career-row.faded {
    opacity: 0.5;
}

.career-compatibility-analyzer .career-row.highlight {
    background: var(--card-hover, #f5f5f5);
    margin: 4px -8px;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid var(--text-primary, #000);
    border-radius: 6px;
    opacity: 1;
}

.career-compatibility-analyzer .career-row.searched {
    background: var(--card-hover, #f9f9f9);
    border: 1px solid var(--text-primary, #000);
    border-radius: 6px;
    margin: 4px -8px;
    padding: 7px 8px;
}

.career-compatibility-analyzer .rank {
    font-weight: 500;
    text-align: center;
    color: var(--text-primary);
}

.career-compatibility-analyzer .career-name {
    padding: 0 12px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .match {
    text-align: right;
    font-weight: 500;
    padding-right: 8px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .grade {
    text-align: center;
    font-size: 10px;
    padding: 3px 10px;
    border: 0.5px solid var(--text-primary, #000);
    border-radius: 4px;
    min-width: 45px;
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Special styling for S rank */
.career-compatibility-analyzer .grade-s {
    background: var(--text-primary, #000);
    color: var(--bg-primary, #fff);
    font-weight: 600;
    border-color: var(--text-primary, #000);
}

.career-compatibility-analyzer .gap-text {
    text-align: center;
    padding: 8px 0;
    font-size: 8px;
    opacity: 0.25;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
}

/* Search Result Content Missing Classes */
.career-compatibility-analyzer .search-result-content {
    display: none;
}

.career-compatibility-analyzer .search-result.active .search-result-content {
    display: block;
}

.career-compatibility-analyzer .search-comparison {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0.5px solid var(--text-primary, #000);
    font-size: 10px;
    opacity: 0.6;
    border-radius: 4px;
    color: var(--text-secondary);
}

/* Dark Mode Adjustments */
[data-theme="dark"] .career-compatibility-analyzer .reference-section {
    border-color: var(--border-color);
}

[data-theme="dark"] .career-compatibility-analyzer .grade-scale {
    background: var(--card-bg);
}

[data-theme="dark"] .career-compatibility-analyzer .career-row.highlight {
    background: var(--card-hover);
}

[data-theme="dark"] .career-compatibility-analyzer .career-row.searched {
    background: var(--card-hover);
}

/* Mobile Responsive for New Elements */
@media (max-width: 768px) {

    .career-compatibility-analyzer .reference-section,
    .career-compatibility-analyzer .context-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .career-compatibility-analyzer .career-row {
        grid-template-columns: 50px 1fr 60px 40px;
        gap: 8px;
        padding: 8px 0;
    }

    .career-compatibility-analyzer .career-name {
        padding: 0 8px;
        font-size: 11px;
    }

    .career-compatibility-analyzer .rank,
    .career-compatibility-analyzer .match,
    .career-compatibility-analyzer .grade {
        font-size: 10px;
    }

    .career-compatibility-analyzer .grade {
        padding: 2px 6px;
        min-width: 35px;
    }

    .career-compatibility-analyzer .gap-text {
        font-size: 7px;
        padding: 6px 0;
    }

    .career-compatibility-analyzer .grade-scale {
        font-size: 8px;
        gap: 4px;
        padding: 8px;
    }

    .career-compatibility-analyzer .section-title,
    .career-compatibility-analyzer .reference-title {
        font-size: 8px;
    }
}

/* Career Compatibility Analyzer - Unprefixed styles */
.career-compatibility-analyzer .header {
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 32px;
    position: relative;
}

.career-compatibility-analyzer .header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 0.5px;
    background: var(--text-primary);
    opacity: 0.3;
}

.career-compatibility-analyzer .title {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .subtitle {
    font-size: 10px;
    opacity: 0.5;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .main-content {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 32px;
    align-items: start;
}

.career-compatibility-analyzer .sidebar-column {
    /* Removed sticky positioning for cleaner scrolling */
}

.career-compatibility-analyzer .results-column {
    min-height: 600px;
}

.career-compatibility-analyzer .current-card {
    border: 2px solid var(--text-primary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .card-label {
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--bg-primary);
    padding: 0 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .job-name {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 20px;
    text-align: center;
    color: var(--text-primary);
}

.career-compatibility-analyzer .stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.career-compatibility-analyzer .stat {
    text-align: center;
    border: 1.5px solid var(--text-primary);
    border-radius: 8px;
    padding: 12px 8px;
    background: var(--bg-primary);
    transition: all 0.2s;
}

.career-compatibility-analyzer .stat:hover {
    background: var(--card-hover);
    transform: translateY(-1px);
}

.career-compatibility-analyzer .stat-value {
    font-size: 24px;
    font-weight: 200;
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .stat-label {
    font-size: 9px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .position-bar {
    height: 30px;
    border: 0.5px solid var(--text-primary);
    border-radius: 6px;
    margin-bottom: 24px;
    position: relative;
    background: repeating-linear-gradient(90deg,
            transparent,
            transparent 9.9%,
            var(--border-color) 9.9%,
            var(--border-color) 10%);
    overflow: hidden;
}

.career-compatibility-analyzer .bar-marker {
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--text-primary);
    top: 0;
}

.career-compatibility-analyzer .bar-marker::after {
    content: attr(data-label);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    white-space: nowrap;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .marker-current {
    left: 12.3%;
}

.career-compatibility-analyzer .marker-search {
    background: var(--text-secondary);
    width: 1px;
}

.career-compatibility-analyzer .search-section {
    margin-bottom: 24px;
    position: relative;
    border: 1px solid var(--text-primary);
    border-radius: 10px;
    padding: 16px;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .search-label {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--bg-primary);
    padding: 0 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .search-container {
    position: relative;
}

.career-compatibility-analyzer .search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
}

.career-compatibility-analyzer .search-input:focus {
    border-color: var(--text-primary);
}

.career-compatibility-analyzer .search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.career-compatibility-analyzer .autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.career-compatibility-analyzer .autocomplete.active {
    display: block;
}

.career-compatibility-analyzer .autocomplete-item {
    display: grid;
    grid-template-columns: 40px 1fr 60px 30px;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 9px;
    border-bottom: 1px solid var(--border-color);
}

.career-compatibility-analyzer .autocomplete-item:hover {
    background: var(--card-hover);
}

.career-compatibility-analyzer .autocomplete-item:last-child {
    border-bottom: none;
}

.career-compatibility-analyzer .search-result {
    margin-bottom: 24px;
    position: relative;
    border: 1px solid var(--text-primary);
    border-radius: 10px;
    padding: 16px;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .search-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .search-placeholder-icon {
    font-size: 24px;
    margin-bottom: 12px;
}

.career-compatibility-analyzer .search-placeholder-text {
    font-size: 9px;
    line-height: 1.4;
    opacity: 0.7;
}

.career-compatibility-analyzer .search-result.active .search-placeholder {
    display: none;
}

.career-compatibility-analyzer .grade-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 8px;
    opacity: 1;
    margin-top: 20px;
}

.career-compatibility-analyzer .scale-item {
    padding: 2px 6px;
    border: 0.5px solid var(--text-primary);
    border-radius: 3px;
    background: var(--bg-primary);
}

.career-compatibility-analyzer .context-section,
.career-compatibility-analyzer .reference-section {
    margin-bottom: 32px;
    padding: 16px;
    border: 1px solid var(--text-primary);
    border-radius: 10px;
    background: var(--bg-primary);
    position: relative;
}

.career-compatibility-analyzer .reference-section {
    margin-bottom: 16px;
}

.career-compatibility-analyzer .section-title,
.career-compatibility-analyzer .reference-title {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--bg-primary);
    padding: 0 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .reference-title {
    font-size: 10px;
    font-weight: 600;
    opacity: 1;
    color: var(--text-primary);
}

.career-compatibility-analyzer .career-row {
    display: grid;
    grid-template-columns: 40px 1fr 60px 30px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    font-size: 10px;
    border-bottom: 0.5px solid var(--border-color);
    transition: all 0.2s;
}

.career-compatibility-analyzer .career-row:last-child {
    border-bottom: none;
}

.career-compatibility-analyzer .career-row.faded {
    opacity: 0.6;
}

.career-compatibility-analyzer .career-row.highlight {
    background: var(--card-hover);
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 4px;
}

.career-compatibility-analyzer .career-row.searched {
    background: var(--accent-color);
    color: white;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 4px;
}

.career-compatibility-analyzer .rank {
    font-size: 9px;
    opacity: 0.7;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .career-name {
    font-size: 10px;
    color: var(--text-primary);
}

.career-compatibility-analyzer .match {
    font-size: 9px;
    text-align: right;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .grade {
    text-align: center;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border-color);
    color: var(--text-primary);
}

.career-compatibility-analyzer .grade-s {
    background: var(--accent-color);
    color: white;
    border: none;
}

.career-compatibility-analyzer .gap-text {
    text-align: center;
    padding: 16px 0;
    font-size: 8px;
    opacity: 0.4;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.career-compatibility-analyzer .search-result-content {
    display: none;
}

.career-compatibility-analyzer .search-result.active .search-result-content {
    display: block;
}

.career-compatibility-analyzer .search-comparison {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    margin-top: 8px;
}

/* Dark theme adjustments */
[data-theme="dark"] .career-compatibility-analyzer .reference-section {
    border-color: var(--text-primary);
}

[data-theme="dark"] .career-compatibility-analyzer .grade-scale {
    opacity: 0.5;
}

[data-theme="dark"] .career-compatibility-analyzer .career-row.highlight {
    background: var(--card-hover);
}

[data-theme="dark"] .career-compatibility-analyzer .career-row.searched {
    background: var(--accent-color);
}

/* Mobile responsive styles */
@media (max-width: 768px) {

    .career-compatibility-analyzer .reference-section,
    .career-compatibility-analyzer .context-section {
        padding: 12px;
    }

    .career-compatibility-analyzer .career-row {
        grid-template-columns: 35px 1fr 50px 25px;
        gap: 8px;
    }

    .career-compatibility-analyzer .career-name {
        font-size: 9px;
    }

    .career-compatibility-analyzer .rank,
    .career-compatibility-analyzer .match,
    .career-compatibility-analyzer .grade {
        font-size: 8px;
    }

    .career-compatibility-analyzer .grade {
        padding: 1px 4px;
    }

    .career-compatibility-analyzer .grade-scale {
        justify-content: center;
    }

    .career-compatibility-analyzer .section-title,
    .career-compatibility-analyzer .reference-title {
        font-size: 8px;
    }
}

/* Enhanced Position Search Dropdown Styles - Updated */
.position-dropdown {
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid var(--card-border) !important;
    border-radius: 16px !important;
    background: var(--card-bg) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    margin-top: 8px !important;
    animation: dropdownSlide 0.3s ease-out;
}

.position-option {
    padding: 20px !important;
    cursor: pointer;
    border-bottom: 1px solid var(--bg-secondary) !important;
    transition: all 0.2s ease !important;
}

.position-option:first-child {
    border-radius: 14px 14px 0 0 !important;
}

.position-option:last-child {
    border-bottom: none !important;
    border-radius: 0 0 14px 14px !important;
}

.position-option:hover {
    background: var(--bg-secondary) !important;
    transform: translateX(4px) !important;
}

/* Enhanced Selected Position Card */
.selected-position {
    margin-top: 1.5rem !important;
    padding: 24px !important;
    background: linear-gradient(135deg, var(--spectrum-green-10), var(--spectrum-blue-10)) !important;
    border-radius: 16px !important;
    border: 2px solid var(--spectrum-green) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gradient background utilities */
:root {
    --spectrum-green-10: rgba(34, 197, 94, 0.1);
    --spectrum-blue-10: rgba(59, 130, 246, 0.1);
}

/* Focus state for search input - simplified to prevent layout shifts */
.position-search-input:focus {
    border-color: var(--spectrum-blue) !important;
}

/* Position search styling override */
.position-search-input {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text-primary);
    outline: none;
    margin-bottom: 1rem;
}

/* 🚨 NUCLEAR GLASS LAUNCH BANNER - ULTIMATE FINAL OVERRIDE 🚨 */
/* TIMESTAMP: 2025-09-29 14:10 - SOLID LAUNCH BANNER (NO GLASS) */

/* Light mode spectrum - solid launch banner (EXACTLY MATCHES NAV) */
html[data-theme="light"][data-color-theme="spectrum"] body div .launch-banner,
html[data-theme="light"][data-color-theme="spectrum"] body .launch-banner,
html[data-theme="light"][data-color-theme="spectrum"] .launch-banner {
    background: var(--launch-banner-bg) !important;
    color: #FFFFFF !important;
}

/* Dark mode spectrum - solid launch banner (EXACTLY MATCHES NAV) */
html[data-theme="dark"][data-color-theme="spectrum"] body div .launch-banner,
html[data-theme="dark"][data-color-theme="spectrum"] body .launch-banner,
html[data-theme="dark"][data-color-theme="spectrum"] .launch-banner {
    background: var(--launch-banner-bg) !important;
    color: #FFFFFF !important;
}

/* Dark mode luminous themes - launch banner with theme colors (HIGHER SPECIFICITY) */
html[data-theme="dark"][data-color-theme="luminous-blue"] body div .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-blue"] body .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-blue"] .launch-banner {
    background: #0066FF !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-green"] body div .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-green"] body .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-green"] .launch-banner {
    background: #00D084 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-purple"] body div .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-purple"] body .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-purple"] .launch-banner {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-orange"] body div .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-orange"] body .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-orange"] .launch-banner {
    background: #FF6B35 !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-yellow"] body div .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-yellow"] body .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-yellow"] .launch-banner {
    background: #F59E0B !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"][data-color-theme="luminous-teal"] body div .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-teal"] body .launch-banner,
html[data-theme="dark"][data-color-theme="luminous-teal"] .launch-banner {
    background: #00BFA5 !important;
    color: #FFFFFF !important;
}

/* Animated gradient shell for pricing card */
.pricing-gradient-shell {
    position: relative;
    padding: 6px;
    border-radius: 12px;
    background: linear-gradient(135deg,
            #0066FF,
            #00D084,
            #8B5CF6,
            #FF6B35,
            #F59E0B,
            #00BFA5,
            #0066FF);
    background-size: 400% 400%;
    will-change: background-position;
    animation: pricingBorderShift 10s ease-in-out infinite;
}

.pricing-gradient-card {
    background: var(--card-bg);
    border-radius: 9px;
    padding: 2.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

@keyframes pricingBorderShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Performance: defer rendering of below-the-fold sections */
.problem-section,
.solution-section,
.why-section,
.pricing-section,
.faq-section,
.blueprints-section,
.personas-section,
.how-it-works {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}