/* ==========================================================================
   Visual Redesign - CSS Custom Properties & Base Overrides
   Loaded after style.css to extend/override base styles.
   ========================================================================== */

:root {
    /* Warm-Shift Background */
    --bg-primary-warm: #0c0a12;

    /* Gradient Tokens */
    --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-accent: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
    --gradient-bg-animated: linear-gradient(-45deg, #0c0a12, #1a1033, #0c1a2e, #0c0a12);
    --gradient-text-hero: linear-gradient(135deg, #ffffff, #a5b4fc);

    /* Glow Tokens */
    --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
    --glow-severity-critical: 0 0 20px rgba(239, 68, 68, 0.15);
    --glow-severity-high: 0 0 20px rgba(249, 115, 22, 0.15);
    --glow-severity-medium: 0 0 20px rgba(245, 158, 11, 0.15);
    --glow-severity-low: 0 0 20px rgba(16, 185, 129, 0.15);
    --glow-severity-info: 0 0 20px rgba(59, 130, 246, 0.15);

    /* Severity Gradients */
    --gradient-severity-critical: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-severity-high: linear-gradient(135deg, #f97316, #ea580c);
    --gradient-severity-medium: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-severity-low: linear-gradient(135deg, #10b981, #059669);
    --gradient-severity-info: linear-gradient(135deg, #3b82f6, #2563eb);

    /* Feature Card Gradients */
    --gradient-feature-scan: linear-gradient(135deg, #3b82f6, #2563eb);
    --gradient-feature-reports: linear-gradient(135deg, #8b5cf6, #7c3aed);
    --gradient-feature-alerts: linear-gradient(135deg, #f97316, #ea580c);
    --gradient-feature-compliance: linear-gradient(135deg, #10b981, #059669);
}

/* Warm-shift background override */
body {
    background-color: var(--bg-primary-warm);
}

/* ==========================================================================
   Typography Refinements (Requirement 2)
   ========================================================================== */

/* 2.1 - Heading overrides: tighter letter-spacing, extra bold */
h1,
h2 {
    letter-spacing: -0.03em;
    font-weight: 800;
}

/* 2.2 - Monospace metric class for numbers/scores/stats */
.mono-metric {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 600;
    font-feature-settings: 'tnum' 1, 'liga' 1;
}

/* 2.3 - Body text readability: line-height 1.6, min font-size 0.875rem */
body {
    line-height: 1.6;
    font-size: max(0.875rem, 1em);
}

p,
li,
td,
th,
label,
.body-text {
    line-height: 1.6;
    font-size: max(0.875rem, 1em);
}

/* 2.4 - Badge text styles: min 0.6875rem, letter-spacing 0.05em */
.badge,
.severity-badge .severity-label,
.status-badge,
.source-badge,
.hero-badge,
.feature-badge,
.feature-card-badge,
.plan-badge,
.cvss-version-badge,
.cvss-badge,
.reviewed-badge {
    font-size: max(0.6875rem, 1em);
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Micro-Interactions (Requirement 3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 - CVE Card Hover Effects
   scale(1.02), enhanced box-shadow, severity-glow, 300ms cubic-bezier
   Targets both .cve-card (legacy) and .modern-cve-card (current template)
   -------------------------------------------------------------------------- */

.cve-card,
.modern-cve-card {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cve-card:hover,
.modern-cve-card:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-primary);
}

/* Severity-specific glow on hover */
.modern-cve-card.cvss-critical:hover,
.cve-card.severity-critical:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-critical);
}

.modern-cve-card.cvss-high:hover,
.cve-card.severity-high:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-high);
}

.modern-cve-card.cvss-medium:hover,
.cve-card.severity-medium:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-medium);
}

.modern-cve-card.cvss-low:hover,
.cve-card.severity-low:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-low);
}

.modern-cve-card.cvss-info:hover,
.cve-card.severity-info:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-info);
}

/* --------------------------------------------------------------------------
   3.2 - Button Hover & Click Effects
   Hover: scale(1.02) + glow, 200ms
   Click: scale(0.97), 100ms
   -------------------------------------------------------------------------- */

.btn {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
                background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    transform: scale(1.02);
    box-shadow: var(--glow-primary);
}

.btn:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}

/* Primary button glow in its own color */
.btn-primary:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

/* Success button glow */
.btn-success:hover {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* Danger button glow */
.btn-danger:hover,
.btn-manage-danger:hover {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* --------------------------------------------------------------------------
   3.3 - Input Focus Effects
   Animated gradient border Indigo→Violet, subtle glow
   Uses a pseudo-element approach for the gradient border
   -------------------------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.search-input-modern,
.filter-select-modern,
.form-input,
.form-select {
    transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus,
.search-input-modern:focus,
.filter-select-modern:focus,
.form-input:focus,
.form-select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 16px rgba(139, 92, 246, 0.1);
    outline: none;
}

/* Animated gradient border via background-image on a wrapper approach.
   For direct inputs, we use a shifting border-color animation. */
@keyframes gradientBorderShift {
    0% {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 16px rgba(99, 102, 241, 0.1);
    }
    50% {
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 0 16px rgba(139, 92, 246, 0.1);
    }
    100% {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 16px rgba(99, 102, 241, 0.1);
    }
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus,
.search-input-modern:focus,
.filter-select-modern:focus,
.form-input:focus,
.form-select:focus {
    animation: gradientBorderShift 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   3.4 - Reduced Motion: Disable ALL micro-interactions and animations
   Comprehensive coverage for current and future tasks
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    /* --- Global: disable all transitions and animations --- */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* --- Task 3: Micro-Interactions --- */

    /* 3.1 CVE card hover: instant state, no transform */
    .cve-card,
    .modern-cve-card {
        transition: none !important;
    }

    .cve-card:hover,
    .modern-cve-card:hover {
        transform: none !important;
    }

    /* 3.2 Button hover/click: no scale, no glow transition */
    .btn {
        transition: none !important;
    }

    .btn:hover,
    .btn:active {
        transform: none !important;
    }

    /* 3.3 Input focus: no animated gradient border */
    input:not([type="checkbox"]):not([type="radio"]):focus,
    textarea:focus,
    select:focus,
    .search-input-modern:focus,
    .filter-select-modern:focus,
    .form-input:focus,
    .form-select:focus {
        animation: none !important;
        transition: none !important;
    }

    /* --- Task 4: Header --- */

    /* Nav link hover underline animation */
    .nav-link::after,
    .nav-link::before {
        transition: none !important;
    }

    /* Logo hover glow */
    .logo a:hover {
        transition: none !important;
    }

    /* --- Task 5: CVE Card Enhancements --- */

    .cve-card::before,
    .modern-cve-card::before {
        transition: none !important;
    }

    /* --- Task 6: Hero Section --- */

    /* Animated gradient background */
    .hero-section,
    .hero,
    .hero-modern {
        animation: none !important;
        background-size: 100% 100% !important;
    }

    /* Shimmer effect on CTA */
    .btn-primary::before,
    .hero .btn::before,
    .hero-modern .btn::before {
        animation: none !important;
    }

    /* Text gradient animation */
    .hero h1,
    .hero-modern h1 {
        animation: none !important;
    }

    /* Stat cards hover lift */
    .stat-card:hover,
    .hero-stat:hover {
        transform: none !important;
    }

    /* --- Task 7: Feature Cards --- */

    .feature-card:hover,
    .feature-card-modern:hover,
    .feature-card-enhanced:hover {
        transform: none !important;
    }

    .feature-card:hover .feature-icon,
    .feature-card-modern:hover .feature-icon,
    .feature-card-enhanced:hover .feature-icon {
        transform: none !important;
        animation: none !important;
    }

    /* --- Task 8: Filter Bar --- */

    .filter-select-modern,
    .search-input-modern {
        transition: none !important;
    }

    /* --- Task 9: Count-Up / Stats Bar --- */

    .stats-bar-modern .stat-icon,
    .severity-stat .stat-icon {
        animation: none !important;
    }

    /* --- Task 10: Footer --- */

    .footer a::after,
    .footer a::before {
        transition: none !important;
    }

    /* --- Task 11: Scroll Progress --- */

    .scroll-progress {
        transition: none !important;
    }

    /* --- Task 12: Skeleton Loading --- */

    .skeleton,
    .skeleton-shimmer,
    .skeleton-cve-card,
    [class*="skeleton-"] {
        animation: none !important;
    }

    /* --- Task 13: HTMX Swap Animations --- */

    .fade-in-up,
    .htmx-swapping,
    .htmx-settling,
    [class*="fadeIn"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* --- Task 14: Pricing Table --- */

    .comparison-table *,
    .pricing-card:hover,
    .plan-column:hover {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Header Modernization (Requirement 4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 - 2px Gradient Line at Bottom of Header
   Indigo (#6366f1) → Violet (#8b5cf6) → Cyan (#06b6d4), full width
   Uses ::after pseudo-element on .header
   -------------------------------------------------------------------------- */

.header {
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
    z-index: 1;
}

/* --------------------------------------------------------------------------
   4.2 - Nav Link Hover Underline Animation (left to right, 250ms)
   Uses ::before pseudo-element for the animated underline so it doesn't
   conflict with the existing ::after on .nav-link.active
   -------------------------------------------------------------------------- */

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.nav-link:hover::before {
    width: 100%;
}

/* --------------------------------------------------------------------------
   4.3 - Active Nav Link: Gradient Underline (Indigo→Violet) + Brighter Text
   Override the existing .nav-link.active::after from style.css
   -------------------------------------------------------------------------- */

.nav-link.active {
    color: #a5b4fc;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
    transform: none;
}

/* Prevent hover underline from doubling on active link */
.nav-link.active::before {
    display: none;
}

/* --------------------------------------------------------------------------
   4.4 - Logo Hover Glow Effect in Primary Accent Color
   -------------------------------------------------------------------------- */

.logo a {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.logo a:hover {
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.5));
}

/* ==========================================================================
   CVE Card Enhancement (Requirement 5)
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 - Top Accent Stripe as Severity Gradient
   Override the solid-color ::before from vulnerabilities_list.css with
   severity-specific gradients using --gradient-severity-* tokens.
   -------------------------------------------------------------------------- */

.modern-cve-card.cvss-critical::before {
    background: var(--gradient-severity-critical);
}

.modern-cve-card.cvss-high::before {
    background: var(--gradient-severity-high);
}

.modern-cve-card.cvss-medium::before {
    background: var(--gradient-severity-medium);
}

.modern-cve-card.cvss-low::before {
    background: var(--gradient-severity-low);
}

.modern-cve-card.cvss-info::before {
    background: var(--gradient-severity-info);
}

/* Legacy .cve-card accent stripe gradients */
.cve-card.severity-critical::before {
    background: var(--gradient-severity-critical);
}

.cve-card.severity-high::before {
    background: var(--gradient-severity-high);
}

.cve-card.severity-medium::before {
    background: var(--gradient-severity-medium);
}

.cve-card.severity-low::before {
    background: var(--gradient-severity-low);
}

.cve-card.severity-info::before {
    background: var(--gradient-severity-info);
}

/* --------------------------------------------------------------------------
   5.2 - Increased Border-Radius to 16px (var(--radius-xl))
   -------------------------------------------------------------------------- */

.modern-cve-card,
.cve-card {
    border-radius: var(--radius-xl);
}

/* --------------------------------------------------------------------------
   5.3 - Severity Badge Inner Glow Effect
   Subtle inset box-shadow in the severity color for visual emphasis.
   -------------------------------------------------------------------------- */

.severity-badge.severity-critical {
    box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.2);
}

.severity-badge.severity-high {
    box-shadow: inset 0 0 12px rgba(249, 115, 22, 0.2);
}

.severity-badge.severity-medium {
    box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.2);
}

.severity-badge.severity-low {
    box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.2);
}

.severity-badge.severity-info {
    box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.2);
}

/* --------------------------------------------------------------------------
   5.4 - Hover State: Colored Border-Glow in Severity Color
   Enhances the existing Task 3.1 hover effects with border-color change
   and --glow-severity-* box-shadow for a colored border-glow effect.
   The base hover box-shadow from 3.1 is extended here.
   -------------------------------------------------------------------------- */

.modern-cve-card.cvss-critical:hover,
.cve-card.severity-critical:hover {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-critical);
}

.modern-cve-card.cvss-high:hover,
.cve-card.severity-high:hover {
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-high);
}

.modern-cve-card.cvss-medium:hover,
.cve-card.severity-medium:hover {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-medium);
}

.modern-cve-card.cvss-low:hover,
.cve-card.severity-low:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-low);
}

.modern-cve-card.cvss-info:hover,
.cve-card.severity-info:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-severity-info);
}

/* --------------------------------------------------------------------------
   5.5 - Transition: cubic-bezier(0.4, 0, 0.2, 1) over 300ms
   Already set in Task 3.1 for transform/box-shadow/border-color.
   Extend to cover background and opacity for the accent stripe ::before.
   -------------------------------------------------------------------------- */

.modern-cve-card::before,
.cve-card::before {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
                height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Hero Section Modernization (Requirement 6)
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 - Animated Gradient Background
   Dark violet → Dark indigo → Dark cyan, 15s infinite loop
   Uses --gradient-bg-animated token, background-size 400% 400%
   -------------------------------------------------------------------------- */

@keyframes heroGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hero-section-redesigned {
    background: var(--gradient-bg-animated);
    background-size: 400% 400%;
    animation: heroGradientShift 15s ease infinite;
}

/* --------------------------------------------------------------------------
   6.2 - Main Heading Text Gradient (White → Light Indigo #a5b4fc)
   Uses --gradient-text-hero token with background-clip: text
   -------------------------------------------------------------------------- */

.hero-section-redesigned .hero-main-heading {
    background: var(--gradient-text-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 0.15em;
    line-height: 1.15;
    overflow: visible;
}

/* --------------------------------------------------------------------------
   6.3 - Stat Cards Glassmorphism + Hover-Lift
   backdrop-filter: blur(12px), semi-transparent background, hover translateY
   -------------------------------------------------------------------------- */

.hero-section-redesigned .stat-card-new {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-section-redesigned .stat-card-new:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), var(--glow-primary);
}

/* --------------------------------------------------------------------------
   6.4 - Primary CTA Button Shimmer Effect (every 3 seconds)
   ::before pseudo-element with diagonal white gradient that slides across
   -------------------------------------------------------------------------- */

@keyframes ctaShimmer {
    0% {
        transform: translateX(-100%);
    }
    15% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.hero-section-redesigned .btn-hero-primary-new {
    position: relative;
    overflow: hidden;
}

.hero-section-redesigned .btn-hero-primary-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 60%
    );
    animation: ctaShimmer 3s ease-in-out infinite;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   6.5 - Reduced-Motion Fallbacks for Hero Animations
   Static gradient, no shimmer, no hover-lift transitions
   These supplement the comprehensive block in Task 3.4
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    /* Static gradient background — no animation */
    .hero-section-redesigned {
        animation: none !important;
        background-size: 100% 100% !important;
    }

    /* No shimmer on CTA */
    .hero-section-redesigned .btn-hero-primary-new::before {
        animation: none !important;
        display: none;
    }

    /* No hover-lift on stat cards */
    .hero-section-redesigned .stat-card-new {
        transition: none !important;
    }

    .hero-section-redesigned .stat-card-new:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   Feature Card Enhancement (Requirement 7)
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 - Icon Hover Animation: translateY(-4px) over 400ms
   Overrides the existing scale+rotate hover from style.css with a
   smoother vertical lift for the feature icon.
   -------------------------------------------------------------------------- */

.feature-card-enhanced .feature-icon-enhanced {
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card-enhanced:hover .feature-icon-enhanced {
    transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   7.2 - Individual Gradient Accents at Top of Each Feature Card
   Uses ::before pseudo-element with --gradient-feature-* tokens.
   Scanning=Blue, Reports=Violet, Alerts=Orange, Compliance=Green
   -------------------------------------------------------------------------- */

.feature-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

.feature-card-scan::before {
    background: var(--gradient-feature-scan);
}

.feature-card-reports::before {
    background: var(--gradient-feature-reports);
}

.feature-card-alerts::before {
    background: var(--gradient-feature-alerts);
}

.feature-card-compliance::before {
    background: var(--gradient-feature-compliance);
}

/* --------------------------------------------------------------------------
   7.3 - Border-Radius 16px and Border rgba(255, 255, 255, 0.08)
   -------------------------------------------------------------------------- */

.feature-card-enhanced {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   7.4 - Border Hover Animation: Transition to Accent Color, 300ms
   Each card transitions its border-color to its feature accent on hover.
   -------------------------------------------------------------------------- */

.feature-card-enhanced {
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
                background 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card-scan:hover {
    border-color: rgba(59, 130, 246, 0.4);
}

.feature-card-reports:hover {
    border-color: rgba(139, 92, 246, 0.4);
}

.feature-card-alerts:hover {
    border-color: rgba(249, 115, 22, 0.4);
}

.feature-card-compliance:hover {
    border-color: rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   Filter Bar Modernization (Requirement 8)
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 - Filter Selects with Pill Design
   Border-radius: 12px, subtle inner shadow for depth
   -------------------------------------------------------------------------- */

.filter-select-modern {
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   8.2 - Focused Filter Select: Gradient Border (Indigo→Violet) and Glow
   Overrides the base focus from vulnerabilities_list.css with the redesign
   gradient border animation and outer glow. The gradientBorderShift keyframe
   from Task 3.3 is reused here for consistency.
   -------------------------------------------------------------------------- */

.filter-select-modern:focus {
    border-color: #8b5cf6;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
                0 0 0 3px rgba(99, 102, 241, 0.15),
                0 0 16px rgba(139, 92, 246, 0.15);
    animation: gradientBorderShift 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   8.3 - Search Field: Larger Padding (1rem vertical) and Prominent Search Icon
   Increases vertical padding to 1rem and enlarges the search icon for
   visual prominence as the primary interaction element.
   -------------------------------------------------------------------------- */

.search-input-modern {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.search-box-modern .search-icon {
    width: 22px;
    height: 22px;
}

/* --------------------------------------------------------------------------
   8.4 - Filter Labels: Uppercase, letter-spacing 0.08em, 0.6875rem
   Reinforces the label styling from vulnerabilities_list.css via the
   redesign layer for consistency with the modernized design tokens.
   -------------------------------------------------------------------------- */

.filter-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
}

/* ==========================================================================
   Stats Bar Count-Up Animation (Requirement 9)
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.4 - Stat Icon Pulse Effect (one-time on appearance)
   @keyframes statIconPulse: scales up then back with opacity shift.
   .stat-icon-pulse class is added via JS when stats bar becomes visible.
   -------------------------------------------------------------------------- */

@keyframes statIconPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.stat-icon-pulse {
    animation: statIconPulse 600ms ease-out forwards;
}

/* Severity-colored pulse glow per stat type */
.stat-critical .stat-icon-pulse {
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
}

.stat-high .stat-icon-pulse {
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.5));
}

.stat-medium .stat-icon-pulse {
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
}

.stat-low .stat-icon-pulse {
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

.stat-total .stat-icon-pulse {
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
}

/* ==========================================================================
   Footer Modernization (Requirement 10)
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1 - 1px Gradient Line at Top of Footer
   Indigo (#6366f1) → Violet (#8b5cf6) → Cyan (#06b6d4), full width
   Uses ::before pseudo-element on .footer
   -------------------------------------------------------------------------- */

.footer {
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
    z-index: 1;
}

/* --------------------------------------------------------------------------
   10.2 - Link Hover Effects: Color Change + Underline Animation (200ms)
   Uses ::after pseudo-element for left-to-right underline animation.
   Color changes to primary accent on hover.
   -------------------------------------------------------------------------- */

.footer-section ul li a {
    position: relative;
    display: inline-block;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-section ul li a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gradient-primary);
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-section ul li a:hover {
    color: #6366f1;
}

.footer-section ul li a:hover::after {
    width: 100%;
}

/* --------------------------------------------------------------------------
   10.3 - Section Headings: 0.875rem, font-weight 700, primary text color
   Targets h4 headings (Quick Links, Legal, Contact)
   -------------------------------------------------------------------------- */

.footer-section h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   10.4 - Copyright Area: Top Border + Padding 1.5rem
   Subtle top border (1px solid rgba(255, 255, 255, 0.06)) to visually
   separate the copyright area from the rest of the footer.
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   Scroll Progress Indicator (Requirement 11)
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.2 - 3px Gradient Bar (Indigo → Violet → Cyan)
   Overrides the base style.css gradient with the redesign accent gradient.
   -------------------------------------------------------------------------- */

.scroll-progress {
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
}

/* --------------------------------------------------------------------------
   11.3 - z-index: Above header content (1020-1030), below modals (1040+)
   Set to 1035 to sit between --z-fixed (1030) and --z-modal-backdrop (1040)
   -------------------------------------------------------------------------- */

.scroll-progress {
    z-index: 1035;
}

/* ==========================================================================
   Skeleton Loading Improvements (Requirement 12)
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 - Updated Shimmer Effect with Gradient
   transparent → rgba(255, 255, 255, 0.08) → transparent
   Overrides the base skeleton-loading keyframe with the redesign shimmer.
   -------------------------------------------------------------------------- */

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton,
.skeleton-shimmer,
.skeleton-cve-card .skeleton,
.skeleton-cve-badge,
.skeleton-severity-badge,
.skeleton-cve-title,
.skeleton-cve-description,
.skeleton-cve-meta,
.skeleton-cve-button,
.skeleton-text,
.skeleton-stat-number,
[class*="skeleton-"]:not(.skeleton-cve-card):not(.skeleton-cve-header):not(.skeleton-cve-actions) {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   12.2 - Border-Radius Matching Target Elements
   16px for cards, 12px for badges, 8px for text lines
   -------------------------------------------------------------------------- */

/* Cards: 16px */
.skeleton-cve-card {
    border-radius: 16px;
}

/* Badges: 12px */
.skeleton-cve-badge,
.skeleton-severity-badge {
    border-radius: 12px;
}

/* Text lines: 8px */
.skeleton-cve-title,
.skeleton-cve-description,
.skeleton-cve-meta,
.skeleton-text,
.skeleton-stat-number {
    border-radius: 8px;
}

/* Buttons: 8px */
.skeleton-cve-button {
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   12.3 - Animation Duration 1.8s, ease-in-out
   Already set in the animation shorthand above (skeletonShimmer 1.8s
   ease-in-out infinite). This block ensures the skeleton-cve-card container
   itself does not animate (only its child skeleton elements do).
   -------------------------------------------------------------------------- */

.skeleton-cve-card {
    animation: none;
}

/* --------------------------------------------------------------------------
   12.4 - Reduced-Motion Fallback
   Static slightly lightened background instead of shimmer animation.
   Supplements the comprehensive reduced-motion block from Task 3.4.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .skeleton,
    .skeleton-shimmer,
    .skeleton-cve-badge,
    .skeleton-severity-badge,
    .skeleton-cve-title,
    .skeleton-cve-description,
    .skeleton-cve-meta,
    .skeleton-cve-button,
    .skeleton-text,
    .skeleton-stat-number,
    [class*="skeleton-"]:not(.skeleton-cve-card):not(.skeleton-cve-header):not(.skeleton-cve-actions) {
        animation: none !important;
        background: rgba(255, 255, 255, 0.06) !important;
        background-size: 100% 100% !important;
    }

    .skeleton-cve-card {
        animation: none !important;
    }
}

/* ==========================================================================
   HTMX Swap Animations (Requirement 13)
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.2 - fadeInUp Keyframe
   opacity 0→1, translateY(20px)→0, 400ms cubic-bezier(0.4, 0, 0.2, 1)
   Applied via JS to new CVE cards after HTMX swap.
   -------------------------------------------------------------------------- */

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

.fade-in-up {
    animation: fadeInUp 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ==========================================================================
   Pricing Table Enhancement (Requirement 14)
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 - Professional Column: Gradient Border (Indigo→Violet) + Glow
   Uses a pseudo-element approach for the gradient border effect on the
   .plan-highlighted column. The glow is applied via box-shadow.
   -------------------------------------------------------------------------- */

.plan-highlighted {
    position: relative;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.06) 100%);
    border: none;
    box-shadow: 0 0 24px rgba(99, 102, 241, 0.15), 0 0 48px rgba(139, 92, 246, 0.08);
}

/* Gradient border via border-image on th and td within the highlighted column */
th.plan-highlighted,
td.plan-highlighted {
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(180deg, #6366f1, #8b5cf6) 1;
}

th.plan-highlighted {
    border-top: 2px solid transparent;
    border-image: linear-gradient(180deg, #6366f1, #8b5cf6) 1;
}

/* Last row gets bottom border too */
.comparison-table tbody tr:last-child td.plan-highlighted {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(180deg, #6366f1, #8b5cf6) 1;
}

/* --------------------------------------------------------------------------
   14.2 - Plan Headers: Gradient Background + Larger Padding
   Dark to slightly lightened gradient background for visual separation.
   Increased padding for more breathing room.
   -------------------------------------------------------------------------- */

.plan-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    padding: 1.5rem 1rem;
    border-radius: 8px;
}

/* Highlighted plan header gets a stronger gradient */
.plan-highlighted .plan-header {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.05));
    padding: 1.75rem 1rem;
}

/* --------------------------------------------------------------------------
   14.3 - SVG Icon Styles for Check/Cross Replacements
   Green checkmark icon and muted gray cross icon styling.
   -------------------------------------------------------------------------- */

.feature-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-success, #10b981);
}

.feature-cross-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
}

/* --------------------------------------------------------------------------
   14.4 - Column Hover: Background Highlight + translateY(-2px)
   Applies to all plan columns on hover. Uses a subtle background shift
   and slight upward movement for interactivity feedback.
   -------------------------------------------------------------------------- */

.comparison-table th.plan-column,
.comparison-table td.plan-column {
    transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Column hover via CSS: highlight cells in the same column using nth-child */
.comparison-table th.plan-column:hover,
.comparison-table td.plan-column:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
}

/* Highlighted column hover gets a stronger effect */
.comparison-table th.plan-highlighted:hover,
.comparison-table td.plan-highlighted:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.1) 100%);
    transform: translateY(-2px);
}

/* ==========================================================================
   Geometric Network Canvas — Hero Background Override
   Raise canvas above background but below content, allow mouse interaction
   ========================================================================== */

.hero-particles {
    z-index: 1;
    pointer-events: auto;
    background: transparent !important;
    opacity: 1 !important;
    animation: none !important;
}

.hero-section-redesigned .container {
    position: relative;
    z-index: 2;
}

#hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Fix text-gradient clipping on descenders (g, y, p, q) */
.hero-section-redesigned .heading-line-1,
.hero-section-redesigned .heading-line-2 {
    overflow: visible;
    padding-bottom: 0.1em;
    -webkit-text-fill-color: transparent;
    background: var(--gradient-text-hero);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ==========================================================================
   Startup Animations: Typewriter, Glow Orbs, Scroll Reveal
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typewriter Cursor — blinking vertical bar after the typed word
   -------------------------------------------------------------------------- */

.typewriter-cursor {
    display: inline-block;
    color: var(--accent-purple, #8b5cf6);
    font-weight: 300;
    animation: blinkCursor 0.7s step-end infinite;
    margin-left: 2px;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Floating Glow Orbs — ambient background blobs for hero section
   -------------------------------------------------------------------------- */

.hero-glow-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    will-change: transform;
}

.glow-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 70%);
    top: 10%;
    left: -5%;
    animation: orbFloat1 18s ease-in-out infinite;
}

.glow-orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, transparent 70%);
    top: 50%;
    right: -5%;
    animation: orbFloat2 22s ease-in-out infinite;
}

.glow-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, transparent 70%);
    bottom: 5%;
    left: 30%;
    animation: orbFloat3 20s ease-in-out infinite;
}

.glow-orb-4 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 70%);
    top: 30%;
    left: 50%;
    animation: orbFloat4 25s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(60px, -40px) scale(1.1); }
    50% { transform: translate(30px, 50px) scale(0.95); }
    75% { transform: translate(-40px, 20px) scale(1.05); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-50px, 30px) scale(1.08); }
    50% { transform: translate(40px, -60px) scale(0.9); }
    75% { transform: translate(20px, 40px) scale(1.12); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(70px, -30px) scale(1.15); }
    66% { transform: translate(-50px, 40px) scale(0.92); }
}

@keyframes orbFloat4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-30px, -50px) scale(1.1); }
    40% { transform: translate(50px, 20px) scale(0.88); }
    60% { transform: translate(30px, 60px) scale(1.06); }
    80% { transform: translate(-60px, -20px) scale(0.94); }
}

/* --------------------------------------------------------------------------
   Scroll Reveal Animations — sections fade in and slide up on viewport entry
   -------------------------------------------------------------------------- */

.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children of a revealed section */
.scroll-reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.scroll-reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }

/* Reduced-motion: disable all startup animations */
@media (prefers-reduced-motion: reduce) {
    .typewriter-cursor {
        animation: none !important;
        opacity: 1 !important;
    }

    .glow-orb {
        animation: none !important;
    }

    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .scroll-reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}