/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
}

:root {
    /* "Google Nano Banana" Palette */
    --primary-bg: #000000;
    --secondary-bg: #111111;
    --card-bg: #1A1A1A;
    --glass-bg: rgba(255, 255, 255, 0.03);

    /* The "Banana" Pop */
    --accent-yellow: #E3F514;
    /* Nano Yellow */
    --accent-yellow-dim: #D1E300;
    --accent-dark: #0A0A0A;

    /* Scroll Story Variables */
    --scroll-reveal-distance: 50px;
    --scroll-transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #E3F514 0%, #B8CC00 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(227, 245, 20, 0.4) 0%, transparent 70%);

    /* Atmos & Transitions */
    --page-transition: 0.6s ease-in-out;

    --gradient-text: linear-gradient(180deg, #FFFFFF 0%, #E3F514 100%);

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-inverse: #000000;
    --text-secondary: #888888;
    --text-muted: #6b6b80;
    /* Kept for potential use, though not explicitly in new palette */

    /* Accent Colors - Removed old ones, keeping only yellow for now */
    /* --accent-purple: #8b5cf6; */
    /* --accent-pink: #ec4899; */
    /* --accent-blue: #3b82f6; */
    /* --accent-cyan: #06b6d4; */
    /* --accent-green: #10b981; */

    /* Spacing & Layout */
    --container-width: 1440px;
    --section-padding: 140px;
    --border-radius-lg: 32px;
    --border-radius-pill: 100px;

    /* Effects */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Kept for potential use */
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    /* Kept for potential use */
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* Kept for potential use */
    --shadow-glow: 0 0 60px rgba(227, 245, 20, 0.15);
    --shadow-3d: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* Kept for potential use */
    --border-light: 1px solid rgba(255, 255, 255, 0.1);
    --border-yellow: 1px solid var(--accent-yellow);

    /* Fonts */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', monospace;
}

:root[data-theme="light"] {
    --primary-bg: #FFFFFF;
    --secondary-bg: #F0F7FF;
    /* Very light blue */
    --card-bg: #F8FBFF;
    --glass-bg: rgba(0, 31, 63, 0.05);

    --text-primary: #002B5C;
    /* Deep Navy Blue */
    --text-inverse: #FFFFFF;
    --text-secondary: #334E68;
    --text-muted: #627D98;

    --accent-yellow: #0056D2;
    /* Changing primary accent to Blue as per request for "Blue White Yellow" theme prominence, or sticking to Yellow? 
                               Make it a strong Blue for buttons, and Yellow for highlights? 
                               The user said "light theme... containing blue white and yellow". 
                               If I keep yellow text on white it's bad. 
                               Let's use Blue for primary actions/text, Yellow for specific highlights. */
    --accent-yellow: #0044cc;
    /* Blue for primary calls to action in light mode */
    --accent-highlight: #FFD700;
    /* Yellow for highlights */

    --gradient-text: linear-gradient(180deg, #002B5C 0%, #0056D2 100%);
    --border-light: 1px solid rgba(0, 43, 92, 0.1);
    --border-yellow: 1px solid var(--accent-yellow);

    --shadow-glow: 0 0 60px rgba(0, 86, 210, 0.15);
}

/* View Transition Animation */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}


/* ==================== LIGHT THEME OVERRIDES (BLUE DOMINANT) ==================== */
:root[data-theme="light"] {
    --accent-yellow: #0044CC;
    /* Redefine accent to Blue globally for light mode */
    --accent-yellow-dim: #003399;
}

:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .tech-card,
:root[data-theme="light"] .showcase-item,
:root[data-theme="light"] .model-card,
:root[data-theme="light"] .stat-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 30px rgba(0, 43, 92, 0.05);
    color: var(--text-primary);
}

:root[data-theme="light"] .feature-description,
:root[data-theme="light"] .tech-card p,
:root[data-theme="light"] .showcase-item p {
    color: var(--text-secondary);
}

:root[data-theme="light"] .extension-section {
    background: #F0F7FF;
    color: var(--text-primary);
}

:root[data-theme="light"] .extension-description {
    color: var(--text-secondary);
}

:root[data-theme="light"] .hero-stats {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 40px rgba(0, 43, 92, 0.05);
}

:root[data-theme="light"] .hero-stats .stat-label {
    color: var(--text-secondary);
}

/* ANALYSIS PAGE BLUE THEME OVERRIDES */
:root[data-theme="light"] .verdict-card,
:root[data-theme="light"] .metric-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 68, 204, 0.15);
    /* Blue Border */
    box-shadow: 0 5px 20px rgba(0, 68, 204, 0.05);
    /* Blue Shadow */
    color: var(--text-primary);
}

:root[data-theme="light"] .queue-header,
:root[data-theme="light"] .file-queue-container,
:root[data-theme="light"] .upload-area {
    background: #F8FBFF;
    /* Very light blue bg */
    border-color: rgba(0, 68, 204, 0.2);
}

:root[data-theme="light"] .queue-count-badge {
    background: #0044CC;
    color: white;
}

:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-secondary-small {
    background: #0044CC;
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 68, 204, 0.3);
}

:root[data-theme="light"] .btn-primary:hover {
    background: #003399;
    transform: translateY(-2px);
}

:root[data-theme="light"] .meter-fill {
    background: #0044CC;
    /* Blue progress bar */
    box-shadow: 0 0 10px rgba(0, 68, 204, 0.5);
}

:root[data-theme="light"] .stat-value,
:root[data-theme="light"] .metric-value,
:root[data-theme="light"] .verdict-title {
    color: #0044CC;
    /* Blue Text */
    -webkit-text-fill-color: #0044CC;
}

:root[data-theme="light"] .metric-label,
:root[data-theme="light"] .stat-label,
:root[data-theme="light"] .verdict-label,
:root[data-theme="light"] .upload-description {
    color: var(--text-secondary);
}

:root[data-theme="light"] .section-title,
:root[data-theme="light"] .analysis-container h2,
:root[data-theme="light"] .analysis-container h3,
:root[data-theme="light"] .analysis-container h4 {
    color: #002B5C;
    /* Deep Navy */
}

/* Specific Fix for Icons */
:root[data-theme="light"] .feature-icon,
:root[data-theme="light"] .stat-icon,
:root[data-theme="light"] .metric-icon {
    background: rgba(0, 68, 204, 0.1);
    border: 1px solid rgba(0, 68, 204, 0.2);
    color: #0044CC;
}

/* Fix Chart Colors if possible (Canvas usually needs JS update, but CSS can help text) */
:root[data-theme="light"] .chart-container {
    filter: none;
    /* Ensure no dark mode filters */
}





/* Invert icons or change their background in light mode if they are images */
:root[data-theme="light"] .feature-icon {
    background: rgba(0, 68, 204, 0.05);
    /* Blue tint background */
    border: 1px solid rgba(0, 68, 204, 0.1);
}

:root[data-theme="light"] .feature-icon img,
:root[data-theme="light"] .tech-icon {
    /* If icons are yellow, rotating hue by ~180 might make them blue? Yellow is 60, Blue is 240. Delta 180. */
    filter: hue-rotate(180deg) brightness(0.8);
}

/* Specific fix for text visibility */
:root[data-theme="light"] .feature-title,
:root[data-theme="light"] .tech-card h3 {
    color: var(--text-primary);
}


/* Fix Result Section Box Background */
:root[data-theme="light"] .results-section {
    background: #FFFFFF;
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 40px rgba(0, 43, 92, 0.05);
    border-radius: 24px;
}

/* Fix "Back to upload" button invisibility */
:root[data-theme="light"] .btn-secondary-outline {
    color: #0044CC;
    border-color: rgba(0, 68, 204, 0.3);
    background: transparent;
}

:root[data-theme="light"] .btn-secondary-outline:hover {
    background: rgba(0, 68, 204, 0.05);
    border-color: #0044CC;
}

/* Fix Empty State Text */
:root[data-theme="light"] .empty-state h3 {
    color: var(--text-primary);
}

:root[data-theme="light"] .empty-state p {
    color: var(--text-secondary);
}

/* History Page Specific Overrides */
:root[data-theme="light"] .history-controls {
    background: #FFFFFF;
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 30px rgba(0, 43, 92, 0.05);
}

:root[data-theme="light"] .search-input,
:root[data-theme="light"] .filter-select {
    background: #F0F7FF;
    border: 1px solid rgba(0, 68, 204, 0.2);
    color: var(--text-primary);
}

:root[data-theme="light"] .search-input:focus,
:root[data-theme="light"] .filter-select:focus {
    border-color: #0044CC;
    background: #FFFFFF;
}

:root[data-theme="light"] .history-table-container {
    background: #FFFFFF;
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 30px rgba(0, 43, 92, 0.05);
}

:root[data-theme="light"] .history-table th {
    background: #F0F7FF;
    color: #002B5C;
    border-bottom: 2px solid rgba(0, 68, 204, 0.1);
}

:root[data-theme="light"] .history-table td {
    border-bottom: 1px solid rgba(0, 43, 92, 0.05);
    color: var(--text-secondary);
}

:root[data-theme="light"] .history-table tr:hover {
    background: #F8FBFF;
}

:root[data-theme="light"] .history-table td:first-child {
    color: var(--text-primary);
    /* Filename or primary col */
}

/* Fix Action Buttons in Table */
:root[data-theme="light"] .action-btn {
    background: rgba(0, 68, 204, 0.1);
    color: #0044CC;
}

:root[data-theme="light"] .action-btn:hover {
    background: #0044CC;
    color: #FFFFFF;
}

:root[data-theme="light"] .btn-export {
    background: #F0F7FF;
    color: #0044CC;
    border: 1px solid rgba(0, 68, 204, 0.2);
}

:root[data-theme="light"] .btn-export:hover {
    background: #0044CC;
    color: #FFFFFF;
}

:root[data-theme="light"] .btn-clear-all {
    background: rgba(255, 0, 0, 0.1);
    color: #FF0000;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

:root[data-theme="light"] .btn-clear-all:hover {
    background: #FF0000;
    color: #FFFFFF;
}

/* History Page Specific Overrides */
:root[data-theme="light"] .history-controls {
    background: #FFFFFF;
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 30px rgba(0, 43, 92, 0.05);
}

:root[data-theme="light"] .search-input,
:root[data-theme="light"] .filter-select {
    background: #F0F7FF;
    border: 1px solid rgba(0, 68, 204, 0.2);
    color: var(--text-primary);
}

:root[data-theme="light"] .filter-select option {
    background: #FFFFFF;
    color: var(--text-primary);
}

:root[data-theme="light"] .search-input:focus,
:root[data-theme="light"] .filter-select:focus {
    border-color: #0044CC;
    background: #FFFFFF;
}

:root[data-theme="light"] .history-table-container {
    background: #FFFFFF;
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 30px rgba(0, 43, 92, 0.05);
}

:root[data-theme="light"] .history-table th {
    background: #F0F7FF;
    color: #002B5C;
    border-bottom: 2px solid rgba(0, 68, 204, 0.1);
}

:root[data-theme="light"] .history-table td {
    border-bottom: 1px solid rgba(0, 43, 92, 0.05);
    color: var(--text-secondary);
}

:root[data-theme="light"] .history-table tr:hover {
    background: #F8FBFF;
}

:root[data-theme="light"] .history-table td:first-child {
    color: var(--text-primary);
}

:root[data-theme="light"] .table-badge.fake {
    background: rgba(0, 68, 204, 0.1);
    color: #0044CC;
    border: 1px solid rgba(0, 68, 204, 0.2);
}

:root[data-theme="light"] .table-badge.real {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

:root[data-theme="light"] .confidence-fill-small {
    background: #0044CC;
}

:root[data-theme="light"] .confidence-bar-small {
    background: rgba(0, 68, 204, 0.1);
}

/* Fix Action Buttons in Table */
:root[data-theme="light"] .btn-table-action {
    background: #F0F7FF;
    border: 1px solid rgba(0, 68, 204, 0.2);
    color: #0044CC;
}

:root[data-theme="light"] .btn-table-action:hover {
    background: #0044CC;
    color: #FFFFFF;
}

:root[data-theme="light"] .btn-table-delete {
    background: rgba(255, 59, 48, 0.05);
    border-color: rgba(255, 59, 48, 0.3);
    color: #ff3b30;
}

:root[data-theme="light"] .btn-table-delete:hover {
    background: #ff3b30;
    color: #FFFFFF;
}

:root[data-theme="light"] .btn-export {
    background: #F0F7FF;
    color: #0044CC;
    border: 1px solid rgba(0, 68, 204, 0.2);
}

:root[data-theme="light"] .btn-export:hover {
    background: #0044CC;
    color: #FFFFFF;
}

:root[data-theme="light"] .btn-clear-all {
    background: rgba(255, 0, 0, 0.05);
    color: #FF0000;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

:root[data-theme="light"] .btn-clear-all:hover {
    background: #FF0000;
    color: #FFFFFF;
}

:root[data-theme="light"] .results-count {
    color: var(--text-secondary);
}

:root[data-theme="light"] .results-count span {
    color: #0044CC;
}

/* Recent Analysis Cards Overrides */
:root[data-theme="light"] .recent-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 43, 92, 0.1);
    box-shadow: 0 10px 30px rgba(0, 43, 92, 0.05);
}

:root[data-theme="light"] .recent-card:hover {
    box-shadow: 0 15px 40px rgba(0, 68, 204, 0.1);
    border-color: #0044CC;
    transform: translateY(-5px);
}

:root[data-theme="light"] .recent-card-title {
    color: var(--text-primary);
}

:root[data-theme="light"] .recent-date,
:root[data-theme="light"] .recent-confidence-label {
    color: var(--text-secondary);
}

:root[data-theme="light"] .recent-confidence-bar {
    background: rgba(0, 68, 204, 0.1);
}

:root[data-theme="light"] .recent-confidence-fill {
    background: #0044CC;
}

:root[data-theme="light"] .recent-badge.fake {
    background: rgba(0, 68, 204, 0.1);
    color: #0044CC;
    border: 1px solid rgba(0, 68, 204, 0.2);
}

:root[data-theme="light"] .recent-badge.real {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

:root[data-theme="light"] .recent-grid-empty {
    background: #FFFFFF;
    border: 1px dashed rgba(0, 68, 204, 0.2);
    color: var(--text-secondary);
}

:root[data-theme="light"] .recent-grid-empty-icon {
    filter: grayscale(1) opacity(0.5);
}


body {
    font-family: var(--font-primary);
    background: var(--primary-bg);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    perspective: 1000px;
}

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1001;
    background: transparent;
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    background: var(--accent-yellow);
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--accent-yellow);
}

/* Scroll Text Reveal */
.scroll-reveal {
    opacity: 0.2;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

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

.scroll-dim {
    transition: opacity 0.5s ease;
}

/* Parallax Element Base */
.parallax-item {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Particle Background - Removed */
/* Analysis Page Specific Font Override Removed */

/* 3D Background Container */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary-bg);
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-yellow);
}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

/* Nano Grid Background */
.mesh-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);
}

:root[data-theme="light"] .mesh-background {
    background-image:
        linear-gradient(rgba(0, 174, 239, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 174, 239, 0.15) 1px, transparent 1px);
    /* Cyan Grid Lines */
    /* Light mode mask might need to be less aggressive or inverted if white bg? */
    /* Actually black mask works for transparency on white too. */
}

@keyframes meshMove {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

.floating-bg-icon {
    position: absolute;
    font-size: 24px;
    opacity: 0.2;
    color: var(--accent-yellow);
    animation: floatParticle 10s infinite linear;
}

/* .hero-lottie-container styles removed */

@keyframes floatParticle {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

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

/* ==================== NAVIGATION ==================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    padding: 20px 0;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    /* Optional: adds subtle rounding */
}

/* Old .logo-icon styles removed */

.logo-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--accent-yellow);
    /* Fallback */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
}

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

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--accent-yellow);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-yellow);
    transition: width 0.3s ease;
}

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

/* ==================== THEME TOGGLE ==================== */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.05);
    /* Transparent */
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    margin-left: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.theme-toggle-btn:hover {
    background: var(--text-primary);
    color: var(--primary-bg);
    transform: rotate(180deg);
    border-color: var(--text-primary);
}

/* ==================== BUTTONS ====================*/
/* Button Ripple Effect */
.btn-primary,
.btn-hero-primary,
.btn-hero-secondary {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    /* Fix for Safari border-radius clipping */
}

span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    background-color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 3D Card Tilt Base Styles */
.feature-card,
.tech-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    will-change: transform;
    /* Transition is handled by JS for smoothness, or CSS for reset */
    transition: transform 0.1s ease-out;
}

/* Input Focus Glow */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 15px rgba(227, 245, 20, 0.3);
    transition: all 0.3s ease;
}

/* Loaders & Skeletons */
.skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

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

.loading-dots:after {
    content: '.';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60% {
        content: '...';
    }

    80%,
    100% {
        content: '';
    }
}

/* Button Base Styles */
.btn-primary {
    background: var(--accent-yellow);
    color: var(--text-inverse);
    padding: 12px 32px;
    border: none;
    border-radius: var(--border-radius-pill);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: var(--font-display);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--accent-yellow);
}

.btn-hero-primary {
    background: var(--accent-yellow);
    color: var(--text-inverse);
    padding: 20px 48px;
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-hero-primary:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 40px rgba(227, 245, 20, 0.3);
}

.btn-hero-secondary {
    background: transparent;
    color: var(--text-primary);
    padding: 20px 48px;
    border: 1px solid var(--text-primary);
    border-radius: var(--border-radius-lg);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--accent-yellow);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 10px;
}

/* ==================== HERO SECTION ==================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
    transform-style: preserve-3d;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Orb styles removed, replaced by Nano Grid Background */
/* .gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: float3D 20s infinite ease-in-out;
    transform-style: preserve-3d;
} */

/* @keyframes float3D {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    33% {
        transform: translate3d(100px, -100px, 50px) rotate(120deg);
    }

    66% {
        transform: translate3d(-100px, 100px, -50px) rotate(240deg);
    }
} */

/* .orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #667eea, transparent);
    top: -200px;
    right: -200px;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #764ba2, transparent);
    bottom: -150px;
    left: -150px;
    animation-delay: 7s;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #f093fb, transparent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
} */

/* Section Dividers */
.section-divider {
    position: relative;
    top: -1px;
    /* Fix gap */
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.section-divider .shape-fill {
    fill: var(--primary-bg);
}

/* Banana Mode Specifics */
.orb-1,
.orb-2,
.orb-3 {
    background: radial-gradient(circle, var(--accent-yellow), transparent 70%);
    opacity: 0.15;
}

:root[data-theme="light"] .orb-1,
:root[data-theme="light"] .orb-2,
:root[data-theme="light"] .orb-3 {
    background: radial-gradient(circle, #00AEEF, transparent 70%);
    /* Cyan Orbs */
    opacity: 0.2;
}

/* ==================== FLOATING 3D OBJECTS ==================== */
/* Light Mode Overrides for 3D Objects */
:root[data-theme="light"] .cube-face {
    background: rgba(0, 174, 239, 0.08);
    /* Cyan tint */
    border: 1px solid rgba(0, 174, 239, 0.3);
}

:root[data-theme="light"] .pyramid-face {
    background: rgba(0, 68, 204, 0.1);
    /* Blue tint */
    border: 1px solid rgba(0, 68, 204, 0.4);
}

:root[data-theme="light"] .pyramid-front,
:root[data-theme="light"] .pyramid-back {
    border-bottom: 100px solid rgba(0, 68, 204, 0.1);
    border-bottom-color: rgba(0, 68, 204, 0.15);
}

:root[data-theme="light"] .pyramid-left {
    border-right: 100px solid rgba(0, 68, 204, 0.1);
    border-right-color: rgba(0, 68, 204, 0.15);
}

:root[data-theme="light"] .pyramid-right {
    border-left: 100px solid rgba(0, 68, 204, 0.1);
    border-left-color: rgba(0, 68, 204, 0.15);
}

:root[data-theme="light"] .pyramid-base {
    background: rgba(0, 68, 204, 0.08);
}

.floating-3d-object {
    position: absolute;
    transform-style: preserve-3d;
    animation: floatUpDown 6s ease-in-out infinite;
    transition: transform 0.3s ease-out;
    pointer-events: none;
}

.floating-cube {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 15%;
    animation-delay: 0s;
}

.floating-pyramid {
    width: 100px;
    height: 100px;
    bottom: 25%;
    left: 10%;
    animation-delay: -3s;
}

/* Cube Faces */
.cube-face {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(227, 245, 20, 0.08);
    border: 1px solid rgba(227, 245, 20, 0.3);
    backdrop-filter: blur(5px);
}

.cube-front {
    transform: rotateY(0deg) translateZ(60px);
}

.cube-back {
    transform: rotateY(180deg) translateZ(60px);
}

.cube-right {
    transform: rotateY(90deg) translateZ(60px);
}

.cube-left {
    transform: rotateY(-90deg) translateZ(60px);
}

.cube-top {
    transform: rotateX(90deg) translateZ(60px);
}

.cube-bottom {
    transform: rotateX(-90deg) translateZ(60px);
}

/* Pyramid Faces */
.pyramid-face {
    position: absolute;
    background: rgba(227, 245, 20, 0.1);
    border: 1px solid rgba(227, 245, 20, 0.4);
    backdrop-filter: blur(5px);
}

.pyramid-front {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgba(227, 245, 20, 0.1);
    transform: rotateY(0deg) translateZ(50px);
    background: none;
    border-bottom-color: rgba(227, 245, 20, 0.15);
}

.pyramid-back {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgba(227, 245, 20, 0.1);
    transform: rotateY(180deg) translateZ(50px);
    background: none;
    border-bottom-color: rgba(227, 245, 20, 0.15);
}

.pyramid-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid rgba(227, 245, 20, 0.1);
    transform: rotateY(-90deg) translateZ(0px);
    background: none;
    border-right-color: rgba(227, 245, 20, 0.15);
}

.pyramid-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid rgba(227, 245, 20, 0.1);
    transform: rotateY(90deg) translateZ(0px);
    background: none;
    border-left-color: rgba(227, 245, 20, 0.15);
}

.pyramid-base {
    width: 100px;
    height: 100px;
    background: rgba(227, 245, 20, 0.08);
    transform: rotateX(90deg) translateZ(0px);
}

/* Floating Animation */
@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0px) rotateX(15deg) rotateY(20deg);
    }

    50% {
        transform: translateY(-30px) rotateX(15deg) rotateY(20deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .floating-cube {
        width: 80px;
        height: 80px;
        right: 5%;
    }

    .cube-face {
        width: 80px;
        height: 80px;
    }

    .cube-front {
        transform: rotateY(0deg) translateZ(40px);
    }

    .cube-back {
        transform: rotateY(180deg) translateZ(40px);
    }

    .cube-right {
        transform: rotateY(90deg) translateZ(40px);
    }

    .cube-left {
        transform: rotateY(-90deg) translateZ(40px);
    }

    .cube-top {
        transform: rotateX(90deg) translateZ(40px);
    }

    .cube-bottom {
        transform: rotateX(-90deg) translateZ(40px);
    }

    .floating-pyramid {
        width: 70px;
        height: 70px;
        left: 5%;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(100px, -100px) scale(1.1);
    }

    66% {
        transform: translate(-100px, 100px) scale(0.9);
    }
}


/* ==================== MOTION DESIGN EXTENSIONS ==================== */

/* 1. LENIS SMOOTH SCROLL */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* 2. SPOTLIGHT CARD EFFECT */
/* Base styles for cards to support the effect */
.feature-card,
.showcase-item,
.tech-card {
    position: relative;
    background: rgba(26, 26, 26, 1);
    /* Fallback */
    background: linear-gradient(145deg, #1A1A1A, #111111);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    /* Ensure vars are initialized */
    --mouse-x: -100px;
    --mouse-y: -100px;
}

/* The spotlight glow overlay */
.feature-card::before,
.showcase-item::before,
.tech-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.5s ease;
    opacity: 0;
}

.feature-card:hover::before,
.showcase-item:hover::before,
.tech-card:hover::before {
    opacity: 1;
}

/* Specific border glow on hover using ::after */
.feature-card::after,
.showcase-item::after,
.tech-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(227, 245, 20, 0.3),
            transparent 40%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: overlay;
}

.feature-card:hover::after,
.showcase-item:hover::after,
.tech-card:hover::after {
    opacity: 1;
}


/* Light Mode Spotlight Adjustments */
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .showcase-item,
:root[data-theme="light"] .tech-card {
    background: #FFFFFF !important;
    /* Force override gradient */
}

:root[data-theme="light"] .feature-card::before,
:root[data-theme="light"] .showcase-item::before,
:root[data-theme="light"] .tech-card::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(0, 43, 92, 0.03),
            /* Subtle Blue Glow */
            transparent 40%);
}

:root[data-theme="light"] .feature-card::after,
:root[data-theme="light"] .showcase-item::after,
:root[data-theme="light"] .tech-card::after {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(0, 174, 239, 0.2),
            /* Cyan Border Glow */
            transparent 40%);
}

/* 3. MAGNETIC BUTTONS (Utility) */
/* Already handled in JS with transforms, but adding smooth reset */
.btn-primary,
.btn-hero-primary {
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
}


/* 4. TEXT REVEAL ANIMATIONS */
/* Basic Staggered Reveal for Titles */
.hero-title,
.section-title {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-title.in-view,
.section-title.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for section subtitle */
.section-subtitle {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.section-title.in-view+.section-subtitle,
.section-header:hover .section-subtitle {
    /* Approximate trigger or use JS to trigger parent */
    opacity: 1;
    transform: translateY(0);
}

/* Better: Let JS handle parent class or sibling trigger. 
   For simplicity, we'll let existing AOS handle the subtitle or use the observer on it too if desired.
   However, let's fix the implementation to be robust. 
*/
.hero-title {
    /* Hero is usually visible on load, so we might want to default it to visible or let JS trigger it quickly */
    animation: revealUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.2s;
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-reveal-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: auto;
    overflow: hidden;
}

.reveal-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.reveal-bottom {
    z-index: 1;
}

.reveal-top {
    z-index: 2;
}

.reveal-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 30;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
    /* animation: fadeInUp 0.6s ease; */
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-yellow);
    /* Changed from accent-green */
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: 96px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -3px;
    margin-bottom: 40px;
    margin-bottom: 40px;
    /* animation: fadeInUp 0.6s ease 0.2s backwards; */
}

.gradient-text-hero {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    color: var(--accent-yellow);
    /* Fallback */
}

.hero-description {
    font-size: 20px;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.8;
    margin: 0 auto 40px;
    line-height: 1.8;
    /* animation: fadeInUp 0.6s ease 0.4s backwards; */
}

.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 60px;
    justify-content: center;
    margin-bottom: 60px;
    /* animation: fadeInUp 0.6s ease 0.6s backwards; */
}

.hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(40px);
    border-radius: 24px;
    backdrop-filter: blur(40px);
    border-radius: 24px;
    /* animation: fadeInUp 0.6s ease 0.8s backwards; */
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--accent-yellow);
    font-family: var(--font-display);
    background: none;
    -webkit-text-fill-color: var(--accent-yellow);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== FEATURES SECTION ==================== */
.features-section {
    padding: var(--section-padding) 0;
    position: relative;
}

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

.section-title {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 20px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

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

.feature-card {
    background: #111111;
    backdrop-filter: blur(20px);
    border: 1px solid #222;
    border-radius: 24px;
    padding: 40px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(227, 245, 20, 0.2), transparent 70%);
    /* Updated gradient color */
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

.feature-card:hover {
    transform: translateY(-12px) rotateX(5deg) rotateY(-5deg) scale(1.02);
    border-color: var(--accent-yellow);
    box-shadow: 0 0 50px rgba(227, 245, 20, 0.1);
}

.card-glow:hover {
    box-shadow: 0 30px 80px rgba(102, 126, 234, 0.4), 0 0 100px rgba(102, 126, 234, 0.2);
}

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    position: relative;
    animation: iconFloat 3s ease-in-out infinite;
    transform-style: preserve-3d;
    background: transparent;
    color: var(--accent-yellow);
    border: 1px solid #333;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateZ(0) rotateY(0deg);
    }

    50% {
        transform: translateZ(20px) rotateY(10deg);
    }
}

.feature-card:hover .feature-icon {
    animation: iconSpin 1s ease;
}

@keyframes iconSpin {
    0% {
        transform: rotateY(0deg) scale(1);
    }

    50% {
        transform: rotateY(180deg) scale(1.1);
    }

    100% {
        transform: rotateY(360deg) scale(1);
    }
}

/* Specific icon styles removed for unified Nano theme */

.feature-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.feature-description {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 24px;
}

.feature-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ==================== TECHNOLOGY SECTION ==================== */
.tech-section {
    padding: var(--section-padding) 0;
    background: var(--secondary-bg);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.tech-card {
    background: #111111;
    backdrop-filter: blur(20px);
    border: 1px solid #222;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    transform-style: preserve-3d;
    overflow: hidden;
}

.tech-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.tech-card:hover::before {
    opacity: 1;
    animation: shimmer 1.5s ease infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.tech-card:hover {
    transform: translateY(-12px) scale(1.08) rotateX(5deg);
    border-color: var(--accent-yellow);
    box-shadow: 0 20px 60px rgba(227, 245, 20, 0.3), 0 0 60px rgba(227, 245, 20, 0.15);
}

.tech-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: inline-block;
    transition: all 0.4s ease;
    transform-style: preserve-3d;
}

.tech-card:hover .tech-icon {
    transform: scale(1.3) translateZ(30px) rotateY(360deg);
    filter: drop-shadow(0 0 20px rgba(227, 245, 20, 0.6));
}

.tech-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.tech-card p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==================== SHOWCASE SECTION ==================== */
.showcase-section {
    padding: var(--section-padding) 0;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.showcase-item {
    text-align: center;
}

.showcase-image-wrapper {
    position: relative;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
}

.showcase-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Kept original for now, could be updated */
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    transform-style: preserve-3d;
}

.showcase-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.showcase-item:hover .showcase-image {
    transform: scale(1.08) translateZ(20px) rotateY(5deg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.showcase-item:hover .showcase-image::after {
    opacity: 1;
}

.real-sample {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.fake-sample {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.deepfake-sample {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.ai-art-sample {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.showcase-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.badge-real {
    background: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
    color: #000;
}

.badge-fake {
    background: var(--accent-yellow);
    color: black;
    border: none;
}

.confidence-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.confidence-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--accent-yellow);
    color: black;
    opacity: 0.3;
    /* This opacity might need adjustment if color is black */
}

.real-confidence {
    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
}

.fake-confidence {
    background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

.confidence-text {
    position: relative;
    z-index: 10;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.showcase-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.showcase-description {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ==================== MODEL SECTION ==================== */
.model-section {
    padding: var(--section-padding) 0;
    background: var(--secondary-bg);
}

.model-card {
    background: #111111;
    backdrop-filter: blur(20px);
    border: 1px solid #222;
    border-radius: 32px;
    padding: 50px;
}

.model-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.model-icon {
    font-size: 64px;
}

.model-name {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}

.model-version {
    color: var(--text-secondary);
    font-size: 16px;
}

.model-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 24px;
}

.model-stat {
    text-align: center;
}

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

.model-stat-value {
    font-size: 28px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.capabilities-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.capabilities-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.capability-badge {
    padding: 10px 20px;
    background: rgba(227, 245, 20, 0.1);
    /* Updated from purple */
    border: 1px solid rgba(227, 245, 20, 0.3);
    /* Updated from purple */
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-yellow);
    /* Updated from purple */
}

/* ==================== HOW IT WORKS ==================== */
.how-it-works {
    padding: var(--section-padding) 0;
}

.pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
}

.pipeline-step {
    flex: 1;
    text-align: center;
    padding: 30px;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    position: relative;
    transition: all 0.3s ease;
}

.pipeline-step:hover {
    transform: translateY(-8px);
    border-color: var(--accent-yellow);
    /* Updated from rgba(255, 255, 255, 0.2) */
    box-shadow: 0 12px 40px rgba(227, 245, 20, 0.2);
    /* Updated from rgba(102, 126, 234, 0.2) */
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

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

.step-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.step-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pipeline-arrow {
    font-size: 32px;
    color: var(--accent-yellow);
    /* Updated from accent-purple */
    margin: 0 20px;
    opacity: 0.5;
}

/* ==================== DEMO SECTION ==================== */
.demo-section {
    padding: var(--section-padding) 0;
    background: var(--secondary-bg);
}

.demo-card {
    background: #111111;
    backdrop-filter: blur(20px);
    border: 1px solid #222;
    border-radius: 32px;
    padding: 60px;
}

.demo-header {
    text-align: center;
    margin-bottom: 50px;
}

.demo-title {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
}

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

/* Upload Area Nano Style */
.upload-area {
    border: 2px dashed #333;
    background: #0A0A0A;
    border-radius: 24px;
    padding: 80px 40px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    border-color: var(--accent-yellow);
    background: #0F0F0F;
}

.upload-icon {
    font-size: 64px;
    margin-bottom: 20px;
    color: var(--accent-yellow);
}

.upload-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

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

.btn-upload {
    background: var(--gradient-primary);
    color: white;
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(227, 245, 20, 0.4);
    /* Updated from rgba(102, 126, 234, 0.4) */
}

.demo-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.result-image-wrapper {
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.result-image-wrapper img {
    width: 100%;
    display: block;
}

.result-details {
    padding: 20px;
}

.result-verdict {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
}

.verdict-real {
    background: #111;
    color: white;
    border: 1px solid #333;
}

.verdict-fake {
    background: rgba(227, 245, 20, 0.1);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
    box-shadow: 0 0 40px rgba(227, 245, 20, 0.1);
}

.result-confidence {
    margin-bottom: 30px;
}

.confidence-label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 600;
}

.confidence-bar-large {
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.confidence-fill-large {
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent-yellow));
    color: black;
    border-radius: 20px;
    transition: width 1s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    font-weight: 700;
}

.confidence-value {
    font-size: 24px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--accent-yellow);
    background-clip: text;
}

.result-analysis {
    background: rgba(255, 255, 255, 0.03);
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.result-analysis h4 {
    font-size: 18px;
    margin-bottom: 12px;
}

.result-analysis p {
    color: var(--text-secondary);
    line-height: 1.8;
}

.btn-try-another {
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    color: white;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-try-another:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ==================== CTA SECTION ==================== */
.cta-section {
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0.1;
    border-radius: 40px;
}

.cta-content {
    position: relative;
    text-align: center;
    padding: 80px 40px;
}

.cta-title {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}

.cta-description {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-cta-primary {
    background: var(--gradient-primary);
    color: white;
    padding: 18px 40px;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.btn-cta-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    color: white;
    padding: 18px 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==================== FOOTER ==================== */
.footer {
    background: var(--secondary-bg);
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand {
    max-width: 350px;
}

.footer-description {
    color: var(--text-secondary);
    margin-top: 20px;
    line-height: 1.8;
}

.footer-column h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--text-primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 14px;
}

.footer-legal {
    display: flex;
    gap: 30px;
}

.footer-legal a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--text-primary);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pipeline {
        flex-direction: column;
        gap: 30px;
    }

    .pipeline-arrow {
        transform: rotate(90deg);
    }

    .demo-results {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 48px;
    }

    .section-title {
        font-size: 40px;
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .model-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Heatmap Toggle */
.heatmap-toggle-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.toggle-label {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--accent-yellow);
}

input:checked+.slider:before {
    transform: translateX(20px);
    background-color: black;
}

/* ==================== COMPARISON SLIDER ==================== */
.comparison-container {
    max-width: 800px;
    margin: 60px auto;
    position: relative;
    border-radius: 20px;
    padding: 20px;
    background: #111;
    border: 1px solid #333;
}

.comparison-header {
    text-align: center;
    margin-bottom: 30px;
}

.comparison-header h3 {
    font-family: var(--font-display);
    font-size: 32px;
}

.img-comp-container {
    position: relative;
    height: 450px;
    /* Should match image height */
    overflow: hidden;
    border-radius: 12px;
    cursor: ew-resize;
}

.img-comp-img {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
}

.img-comp-img img {
    display: block;
}

.slider-handle {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    width: 40px;
    height: 40px;
    background-color: var(--accent-yellow);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(227, 245, 20, 0.5);
    pointer-events: none;
    /* Let clicks pass through to container logic */
}

@media (max-width: 768px) {
    .img-comp-container {
        height: 250px;
    }

    .img-comp-img img {
        height: 250px;
        width: auto;
    }
}

/* ==================== ANALYSIS PAGE STYLES ==================== */
.analysis-page {
    min-height: 100vh;
    background: var(--primary-bg);
}

.analysis-container {
    padding: 120px 40px 40px;
    min-height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
}

.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* Removed fixed height to allow content to dictate size */
}

/* Upload Section (Left) */
.upload-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-header-small h2 {
    font-family: var(--font-display);
    font-size: 32px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.section-header-small p {
    color: var(--text-secondary);
}

.upload-area {
    flex: 1;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-height: 400px;
}

.upload-area:hover {
    border-color: var(--accent-yellow);
    background: rgba(227, 245, 20, 0.02);
}

.preview-area {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.btn-close-preview {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-close-preview:hover {
    background: var(--accent-yellow);
    color: black;
}

/* Results Section (Right) */
.results-section {
    background: #111;
    border: 1px solid #222;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.2;
}

/* Verdict Card */
.verdict-card {
    text-align: center;
    margin-bottom: 40px;
}

.verdict-label {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.verdict-title {
    font-family: var(--font-display);
    font-size: 64px;
    margin: 10px 0 30px;
    line-height: 1;
}

.verdict-fake {
    color: var(--accent-yellow);
}

.verdict-real {
    color: #10b981;
}

/* Accuracy Meter */
.confidence-meter {
    margin: 0 auto;
    max-width: 400px;
}

.meter-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 100px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.meter-fill {
    height: 100%;
    background: var(--accent-yellow);
    width: 0%;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 100px;
    box-shadow: 0 0 20px rgba(227, 245, 20, 0.6);
}

/* Animated shimmer effect */
.meter-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Confidence level colors */
.meter-fill.confidence-low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.meter-fill.confidence-medium {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
}

.meter-fill.confidence-high {
    background: linear-gradient(90deg, #E3F514, #B8CC00);
    box-shadow: 0 0 20px rgba(227, 245, 20, 0.6);
}

.meter-fill.confidence-very-high {
    background: linear-gradient(90deg, #10b981, #059669);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

.meter-value {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    font-weight: 700;
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.metric-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 16px;
    text-align: center;
}

.metric-label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.metric-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
}

.btn-secondary-nav {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.btn-secondary-nav:hover {
    color: var(--accent-yellow);
}

/* Floating Elements */
.floating-element {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: float 6s ease-in-out infinite;
    z-index: 5;
    opacity: 0.6;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.float-1 {
    top: 20%;
    right: 10%;
    width: 200px;
    background: #000;
    animation-delay: 0s;
}

.float-2 {
    bottom: 20%;
    left: 5%;
    width: 150px;
    background: #111;
    animation-delay: 2s;
}

.float-3 {
    top: 60%;
    right: 5%;
    width: 120px;
    background: #222;
    animation-delay: 4s;
}

/* Responsive Analysis */
@media (max-width: 1024px) {
    .analysis-container {
        height: auto;
        overflow-y: auto;
    }

    .analysis-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .upload-area {
        min-height: 300px;
    }
}

/* ==================== CHART STYLE ==================== */
#chartContainer {
    width: 60%;
    margin: 20px auto;
    position: relative;
}

/* DELETE HISTORY BUTTON */
.btn-delete-history {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.3);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 40px;
    display: block;
    width: 100%;
    text-align: center;
}

.btn-delete-history:hover {
    background: rgba(255, 59, 48, 0.2);
    box-shadow: 0 0 20px rgba(255, 59, 48, 0.2);
    transform: translateY(-2px);
}

/* ==================== DESIGN ENHANCEMENTS ==================== */

/* 1. Glitch Effect */
.glitch-hover {
    position: relative;
    display: inline-block;
}

.glitch-hover:hover::before,
.glitch-hover:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-hover:hover::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip-path: inset(44% 0 61% 0);
    animation: glitch-anim 0.3s infinite linear alternate-reverse;
}

.glitch-hover:hover::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9;
    clip-path: inset(58% 0 43% 0);
    animation: glitch-anim 0.3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip-path: inset(42% 0 10% 0);
        transform: skew(0.5deg);
    }

    10% {
        clip-path: inset(18% 0 88% 0);
        transform: skew(0.4deg);
    }

    20% {
        clip-path: inset(76% 0 11% 0);
        transform: skew(0.1deg);
    }

    30% {
        clip-path: inset(34% 0 29% 0);
        transform: skew(0.5deg);
    }

    40% {
        clip-path: inset(12% 0 71% 0);
        transform: skew(0.6deg);
    }

    50% {
        clip-path: inset(93% 0 3% 0);
        transform: skew(0.8deg);
    }

    60% {
        clip-path: inset(7% 0 54% 0);
        transform: skew(0.2deg);
    }

    70% {
        clip-path: inset(52% 0 17% 0);
        transform: skew(0.9deg);
    }

    80% {
        clip-path: inset(23% 0 38% 0);
        transform: skew(0.3deg);
    }

    90% {
        clip-path: inset(61% 0 6% 0);
        transform: skew(0.7deg);
    }

    100% {
        clip-path: inset(84% 0 69% 0);
        transform: skew(0.4deg);
    }
}

/* Glitch effect for showcase badges */
.badge-fake {
    transition: all 0.3s ease;
}

.badge-fake:hover {
    animation: glitch-badge 0.5s infinite;
}

@keyframes glitch-badge {

    0%,
    100% {
        transform: translate(0);
        text-shadow: none;
    }

    25% {
        transform: translate(-2px, 1px);
        text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9;
    }

    75% {
        transform: translate(2px, -1px);
        text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9;
    }
}

/* 2. Holographic Scanner */
.scan-container {
    position: relative;
    overflow: hidden;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-yellow);
    box-shadow: 0 0 15px var(--accent-yellow), 0 0 30px var(--accent-yellow);
    opacity: 0.6;
    animation: scanMove 3s linear infinite;
    z-index: 10;
}

/* Fake scanner is Red */
.scan-line.fake-scan {
    background: #ff4444;
    box-shadow: 0 0 15px #ff4444, 0 0 30px #ff4444;
}

@keyframes scanMove {
    0% {
        top: -10%;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

/* ==================== MULTI-FILE UPLOAD ENHANCEMENTS ==================== */
/* File Count Badge */
.file-count-badge {
    background: var(--accent-yellow);
    color: var(--text-inverse);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    margin-top: 10px;
    animation: bounceIn 0.3s ease;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Enhanced Drag-Over State */
.upload-area-active {
    border-color: var(--accent-yellow) !important;
    background: rgba(227, 245, 20, 0.1) !important;
    box-shadow: 0 0 30px rgba(227, 245, 20, 0.3) !important;
    transform: scale(1.02);
}

/* File Queue Container */
.file-queue-container {
    background: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 24px;
    margin-top: 20px;
    animation: fadeInUp 0.4s ease;
}

.file-queue-container .section-header-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.file-queue-container .section-header-small h3 {
    font-size: 18px;
    color: #fff;
    margin: 0;
}

/* File Queue Items */
.file-queue {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.file-queue::-webkit-scrollbar {
    width: 6px;
}

.file-queue::-webkit-scrollbar-thumb {
    background: rgba(227, 245, 20, 0.3);
    border-radius: 3px;
}

.file-queue-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.file-queue-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(227, 245, 20, 0.3);
}

.file-queue-item.uploading {
    border-color: var(--accent-yellow);
    background: rgba(227, 245, 20, 0.05);
}

.file-queue-item.completed {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.file-queue-item.error {
    border-color: #ff3b30;
    background: rgba(255, 59, 48, 0.05);
}

.file-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    color: #888;
    font-size: 12px;
    margin-top: 2px;
}

.file-status {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
}

.file-status.pending {
    color: #888;
}

.file-status.uploading {
    color: var(--accent-yellow);
}

.file-status.completed {
    color: #10b981;
}

.file-status.error {
    color: #ff3b30;
}

.file-remove {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.file-remove:hover {
    color: #ff3b30;
}

/* Progress Container */
.progress-container {
    width: 100%;
    margin-top: 8px;
}

.progress-bar-wrapper {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #E3F514, #B8CC00);
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

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

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

.progress-details {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    color: #888;
}

/* ==================== STATISTICS PANEL ==================== */
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.stat-card {
    background: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(227, 245, 20, 0.03), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.stat-card:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(227, 245, 20, 0.1);
}

.stat-card:hover::before {
    transform: translateX(100%);
}

.stat-icon {
    font-size: 48px;
    margin-bottom: 16px;
    filter: grayscale(0.3);
}

.stat-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--accent-yellow);
    font-family: var(--font-display);
    margin-bottom: 8px;
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==================== RECENT ANALYSES GRID ==================== */
.recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.recent-card {
    background: rgba(17, 17, 17, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    animation: fadeInUp 0.6s ease backwards;
}

.recent-card:nth-child(1) {
    animation-delay: 0.1s;
}

.recent-card:nth-child(2) {
    animation-delay: 0.2s;
}

.recent-card:nth-child(3) {
    animation-delay: 0.3s;
}

.recent-card:nth-child(4) {
    animation-delay: 0.4s;
}

.recent-card:nth-child(5) {
    animation-delay: 0.5s;
}

.recent-card:nth-child(6) {
    animation-delay: 0.6s;
}

.recent-card:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(227, 245, 20, 0.1);
}

.recent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(227, 245, 20, 0.03), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
    z-index: 1;
}

.recent-card:hover::before {
    transform: translateX(100%);
}

.recent-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.02);
}

.recent-card-content {
    padding: 20px;
    position: relative;
    z-index: 2;
}

.recent-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.recent-badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
}

.recent-badge.fake {
    background: rgba(227, 245, 20, 0.1);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
}

.recent-badge.real {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid #10b981;
}

.recent-date {
    color: #888;
    font-size: 12px;
}

.recent-card-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-confidence {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-confidence-label {
    font-size: 11px;
    color: #888;
}

.recent-confidence-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.recent-confidence-fill {
    height: 100%;
    background: var(--accent-yellow);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Empty state for recent grid */
.recent-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.recent-grid-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

/* Section header alignment for statistics and recent */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header .btn-secondary {
    background: transparent;
    color: var(--text-primary);
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.section-header .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .statistics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-card {
        padding: 24px 16px;
    }

    .stat-icon {
        font-size: 36px;
    }

    .stat-value {
        font-size: 36px;
    }

    .recent-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* ==================== ENHANCED FILE QUEUE UI ==================== */
.queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.queue-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.queue-title {
    font-size: 18px;
    color: #fff;
    margin: 0;
    font-weight: 700;
}

.queue-count-badge {
    background: var(--accent-yellow);
    color: #000;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    min-width: 30px;
    text-align: center;
}

.queue-actions {
    display: flex;
    gap: 8px;
}

.btn-secondary-small {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-secondary-small:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    transform: translateY(-1px);
}

.btn-secondary-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.queue-footer {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enhanced file queue items */
.file-queue-item .file-icon {
    background: rgba(227, 245, 20, 0.1);
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-queue-item.uploading .file-icon {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.file-queue-item.completed .file-icon {
    background: rgba(16, 185, 129, 0.1);
}

.file-queue-item.error .file-icon {
    background: rgba(255, 59, 48, 0.1);
}

/* Improved progress bar */
.progress-bar-wrapper {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-details {
    font-weight: 600;
}

/* Responsive queue */
@media (max-width: 768px) {
    .queue-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .queue-actions {
        width: 100%;
    }

    .btn-secondary-small {
        flex: 1;
    }

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

    .btn-secondary-outline,
    .queue-footer .btn-primary {
        flex: 1 !important;
        width: 100%;
    }
}