:root {
    --color-bg: #0a0e1a;
    --color-bg-secondary: #111827;
    --color-bg-card: #1a1f35;
    --color-text-primary: #e5e7eb;
    --color-text-secondary: #9ca3af;
    --color-accent: #00f0ff;
    --color-accent-glow: rgba(0, 240, 255, 0.3);
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-border: #374151;
    --font-heading: 'Zen Dots', cursive;
    --font-body: 'Audiowide', cursive;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 20px var(--color-accent-glow);
    --color-bg-nav: rgba(10, 14, 26, 0.95);
    --color-grid: rgba(0, 240, 255, 0.05);
    --color-cyber-pink: #ff00ff;
    --color-cyber-cyan: #00ffff;
    --color-cyber-purple: #8000ff;
    --color-cyber-rose: #ff0080;
}

[data-theme="light"] {
    --color-bg: #f3f4f6;
    --color-bg-secondary: #e5e7eb;
    --color-bg-card: #ffffff;
    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-accent: #0077b6;
    /* Darker blue for better contrast on light bg */
    --color-accent-glow: rgba(0, 119, 182, 0.3);
    --color-success: #059669;
    --color-warning: #d97706;
    --color-border: #d1d5db;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 15px var(--color-accent-glow);
    --color-bg-nav: rgba(255, 255, 255, 0.95);
    --color-grid: rgba(0, 119, 182, 0.1);
    --color-cyber-pink: #c000c0;
    --color-cyber-cyan: #009999;
    --color-cyber-purple: #6000c0;
    --color-cyber-rose: #c00060;
}

/* Arabic Language Fonts */
[lang="ar"],
[dir="rtl"] {
    --font-heading: 'Almarai', sans-serif;
    --font-body: 'Almarai', sans-serif;
}

/* English and French Language Fonts */
[lang="en"],
[lang="fr"] {
    --font-heading: 'Zen Dots', cursive;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Heading Elements */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title,
.loading-text,
.project-title,
.step-title,
.contact-heading,
.category-title,
.spec-card h3 {
    font-family: var(--font-heading) !important;
}


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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.no-scroll {
    overflow: hidden;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    text-align: center;
}

.loading-logo {
    width: 120px;
    height: auto;
    margin-bottom: 2rem;
    animation: logoFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--color-accent-glow));
}

.loading-text {
    font-family: 'Zen Dots', cursive !important;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 2rem;
    letter-spacing: 0.5rem;
    animation: textGlow 1.5s ease-in-out infinite;
}

/* Quake Terminal Styles */
.quake-terminal {
    position: fixed;
    top: -50vh;
    left: 0;
    width: 100%;
    height: 50vh;
    background: rgba(10, 14, 26, 0.95);
    border-bottom: 2px solid var(--color-accent);
    z-index: 9999;
    transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 20px;
    font-family: 'Share Tech Mono', monospace;
    color: var(--color-accent);
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.2);
    backdrop-filter: blur(10px);
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #fff;
}

.terminal-output {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
}

.terminal-line {
    margin-bottom: 5px;
}

.terminal-line.error {
    color: #ff3366;
}

.terminal-line.cmd-line {
    color: #fff;
    opacity: 0.8;
}

.terminal-input-line {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 4px;
}

.prompt {
    color: var(--neon-pink);
    margin-right: 10px;
    font-weight: bold;
}

#terminal-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    width: 100%;
    outline: none;
}

/* Scrollbar for terminal */
.terminal-output::-webkit-scrollbar {
    width: 8px;
}

.terminal-output::-webkit-scrollbar-track {
    background: #050510;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 4px;
}

.loading-bar {
    width: 300px;
    height: 4px;
    background: var(--color-bg-secondary);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #00d4ff);
    width: 0%;
    animation: loadProgress 2s ease-in-out forwards;
    box-shadow: 0 0 10px var(--color-accent-glow);
}

@keyframes logoFloat {

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

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

@keyframes textGlow {

    0%,
    100% {
        text-shadow: 0 0 10px var(--color-accent-glow);
    }

    50% {
        text-shadow: 0 0 20px var(--color-accent-glow), 0 0 30px var(--color-accent-glow);
    }
}

@keyframes loadProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Desktop Navigation - Futuristic Floating Island */
@media (min-width: 993px) {
    .nav-main {
        position: fixed;
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: fit-content;
        min-width: 0;
        max-width: 95%;
        background: rgba(10, 14, 26, 0.4);
        /* Smoother transparency */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        border-radius: 100px;
        padding: 0.3rem 1.5rem;
        /* Balanced padding */
    }

    /* Ensure mobile toggle is hidden on desktop */
    .mobile-nav-toggle {
        display: none !important;
    }

    [data-theme="light"] .nav-main {
        background: rgba(255, 255, 255, 0.6);
        border-color: rgba(0, 0, 0, 0.05);
    }

    /* Scroll State: Shrink and Stick */
    .nav-main.scroll-down {
        top: 0.75rem;
        background: rgba(10, 14, 26, 0.8);
        padding: 0.2rem 1rem;
    }

    [data-theme="light"] .nav-main.scroll-down {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .nav-main.scroll-up {
        top: 1rem;
    }

    .nav-container {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        /* Center everything */
        align-items: center;
        gap: 0;
        /* Spacing handled by padding */
        width: auto;
        position: relative;
        padding-inline: 100px;
        /* Balance Logo space */
    }

    /* Logo Styling */
    .nav-logo {
        position: absolute;
        inset-inline-start: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .logo-image {
        height: 55px;
        /* Larger logo */
        width: auto;
        opacity: 0.9;
        transition: opacity 0.3s;
    }

    .logo-image:hover {
        opacity: 1;
    }

    .logo-code {
        /* Hidden on desktop for cleaner look, valid user preference? */
        /* Let's keep it but make it very subtle */
        font-family: 'Courier New', monospace;
        font-size: 0.6rem;
        color: var(--color-text-secondary);
        opacity: 0.5;
        border: none;
        background: none;
        padding: 0;
    }

    /* Links Styling */
    .nav-menu {
        display: flex;
        align-items: center;
        gap: 2rem;
        /* Clean spacing */
        list-style: none;
        margin: 0;
        padding: 0;
        background: transparent;
        justify-content: center;
        flex: 1;
    }

    .nav-menu li {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .nav-link {
        font-family: var(--font-heading);
        /* Futuristic Font */
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: all 0.3s ease;
        position: relative;
        padding: 0.5rem 0;
        /* Vertical padding only */
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    /* Hover & Active Effects - Smooth Glow */
    .nav-link:hover,
    .nav-link.active {
        color: transparent;
        -webkit-text-stroke: 1px var(--color-accent);
        text-shadow: 0 0 10px var(--color-accent-glow);
    }

    /* Underline Effect */
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        width: 0%;
        height: 2px;
        background: var(--color-accent);
        box-shadow: 0 0 10px var(--color-accent);
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        transform: translateX(-50%);
        opacity: 0;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 80%;
        opacity: 1;
    }

    /* Remove old before usage */
    .nav-link::before {
        content: none;
    }

    /* Language Switcher Desktop */
    .language-switcher {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-left: 0;
        border: none;
    }

    .lang-link {
        font-family: var(--font-heading);
        /* Match theme */
        font-size: 0.7rem;
        color: var(--color-text-secondary);
        opacity: 0.5;
        transition: all 0.3s;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
    }

    .lang-link:hover,
    .lang-link.active {
        color: var(--color-accent);
        opacity: 1;
        text-shadow: 0 0 5px var(--color-accent-glow);
    }
}

/* Base styles for Mobile (Default) to ensure no breakage when min-width not met */
.nav-main {
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: var(--color-accent);
}

.theme-btn {
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10;
}

/* Tech Ring Animation */
.theme-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid var(--color-accent);
    /* Removed transparent borders for full circle */
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

/* Remove inherited underline from nav-link */
.theme-btn::after {
    content: none !important;
    display: none !important;
}

.theme-btn:hover {
    color: var(--color-accent);
    background: rgba(255, 255, 255, 0.03);
    transform: rotate(180deg);
    text-shadow: 0 0 10px var(--color-accent);
    box-shadow: 0 0 20px var(--color-accent-glow), inset 0 0 10px rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.1);
}

.theme-btn:hover::before {
    opacity: 0.8;
    transform: scale(1) rotate(180deg);
}

.theme-btn:active {
    transform: rotate(180deg) scale(0.9);
    box-shadow: 0 0 10px var(--color-accent-glow);
}

.theme-icon-light,
.theme-icon-dark {
    font-size: 1.2rem;
    line-height: 1;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 5rem;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: 0;
    background-image:
        linear-gradient(var(--color-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: 50px 50px;
    background-size: 50px 50px;
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    padding: 2rem;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-accent);
    border-radius: 50px;
    margin-bottom: 2rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
}

.label-code {
    color: var(--color-text-secondary);
}

.label-value {
    color: var(--color-accent);
    font-weight: 600;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--color-text-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.5rem;
}

.subtitle-code {
    color: var(--color-accent);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 4rem;
}

.btn {
    padding: 1rem 2rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-primary {
    position: relative;
    background: rgba(255, 255, 255, 0.02) !important;
    /* Ultra-transparent glass base */
    color: var(--color-accent);
    border: none;
    z-index: 1;
    overflow: visible;
    backdrop-filter: blur(15px);
    /* Increased blur for frost effect */
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
    /* Slightly stronger glow to compensate for transparency */
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    padding: 1rem 2.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Border & Animated Rim Container */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--color-accent), var(--color-cyber-pink), var(--color-accent));
    background-size: 200% 100%;
    animation: borderFlow 3s linear infinite;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    padding: 2px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.8;
    /* Higher opacity for border visibility against transparent bg */
    transition: opacity 0.3s ease;
}

/* Inner Fill / Depth */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(10, 14, 26, 0.3);
    /* Very low opacity dark tint */
    z-index: -2;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    transition: background 0.3s ease;
}

/* Decorative Tech Elements */
.btn-primary .tech-deco {
    position: absolute;
    background: var(--color-accent);
    opacity: 0.3;
}

/* Glitch Text Effect on Hover */
.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px var(--color-accent-glow), 0 0 10px var(--color-accent);
    color: #fff;
    text-shadow: 2px 0 var(--color-cyber-purple), -2px 0 var(--color-cyber-pink);
}

.btn-primary:hover::before {
    opacity: 1;
    animation: borderFlow 1s linear infinite;
    /* Faster flow on hover */
    filter: drop-shadow(0 0 5px var(--color-accent));
}

.btn-primary:hover::after {
    background: rgba(10, 14, 26, 0.95);
}

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

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

/* Spin Keyframes - No Hue Rotate */
@keyframes rgb-spin {
    from {
        transform: rotate(0deg);
    }

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

@keyframes simple-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ensure keyframes are available globally if needed or correct nesting */
@keyframes hypnotic-spin {
    0% {
        --a: 0deg;
    }

    100% {
        --a: 360deg;
    }
}

/* Light Theme Overrides for Buttons */
[data-theme="light"] .btn-primary {
    color: var(--color-text-primary);
    /* Dark text for readability */
    text-shadow: none;
    font-weight: 700;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-primary::after {
    /* Milky White Glass for Light Mode */
    background: rgba(240, 240, 245, 0.85);
}

[data-theme="light"] .btn-primary:hover {
    color: var(--color-accent);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 15px var(--color-accent-glow);
    transform: translateY(-2px);
}

.hero-metrics {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-accent);
    font-family: var(--font-body);
}

.metric-symbol {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-accent);
    font-family: var(--font-body);
}

.metric-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

.section {
    padding: 6rem 0;
    position: relative;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.section-number {
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-accent);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 900;
}

.section-code {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.about-text {
    font-size: 1.125rem;
}

.text-large {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

.about-text p {
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
    line-height: 1.8;
    text-align: left;
}

[dir="rtl"] .about-text p {
    text-align: right;
}

.about-text p strong {
    color: var(--color-text-primary);
}

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.tag {
    padding: 0.5rem 1rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-accent);
}

.about-specs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.spec-card {
    position: relative;
    padding: 1.5rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.spec-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, var(--color-cyber-pink), var(--color-cyber-cyan), var(--color-cyber-rose), var(--color-cyber-purple));
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    background-size: 300% 300%;
    animation: cyberpunkGradient 4s ease infinite;
}

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

.spec-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-glow);
    transform: translateX(5px) rotateX(2deg);
}

.spec-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.spec-icon {
    font-size: 1.5rem;
}

.spec-card h3 {
    font-size: 1.25rem;
    color: var(--color-accent);
}

.spec-card p {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

/* Skills Section - Cyberpunk Enhanced Design */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1400px) {
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .skills-grid {
        grid-template-columns: 1fr;
    }
}


/* Reusing Project Card Styles for Skills */
.skill-card {
    position: relative;
    padding: 2rem;
    min-height: 350px;
    /* Background/Border handled globally */
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Box-shadow handled globally */
}

/* Light Mode override handled globally */

/* ::before scanline handled globally */

.skill-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.4), rgba(0, 255, 255, 0.2), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.skill-card:hover::after {
    width: 250px;
    height: 250px;
}

/* Transform/Shadow on hover handled globally */


/* Ensure inner content is above z-index overlays */
.skill-card .project-header,
.skill-card .project-title,
.skill-card .project-description,
.skill-card .skill-items {
    position: relative;
    z-index: 2;
}

.skill-items {
    width: 100%;
    margin-top: auto;
}

.skill-item {
    position: relative;
    margin-bottom: 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.skill-item:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.skill-name {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: space-between;
}

.skill-bar {
    height: 4px;
    background: rgba(128, 128, 128, 0.2);
    border-radius: 2px;
    border: none;
}

.skill-progress {
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--color-accent-glow);
}

.skill-item:hover .skill-progress::before {
    opacity: 1;
    animation: cyberpunkDotPulse 1s ease-in-out infinite;
}

@keyframes cyberpunkProgressGlow {

    0%,
    100% {
        background-position: 0% 50%;
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.8), 0 0 25px rgba(0, 255, 255, 0.5);
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 25px rgba(255, 0, 255, 1), 0 0 35px rgba(0, 255, 255, 0.8), 0 0 45px rgba(255, 0, 128, 0.6);
    }
}

@keyframes cyberpunkDotPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px var(--color-cyber-pink), 0 0 20px var(--color-cyber-pink);
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 15px var(--color-cyber-pink), 0 0 30px var(--color-cyber-pink), 0 0 40px var(--color-cyber-cyan);
    }
}

.skill-level {
    font-family: var(--font-body);
    font-size: 0.65rem;
    color: rgba(0, 255, 255, 0.7);
    text-align: right;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
}

/* Projects Section - Cyberpunk Enhanced */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1400px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

.project-card {
    position: relative;
    padding: 2rem;
    min-height: 350px;
    background: linear-gradient(135deg, rgba(15, 5, 30, 0.95), rgba(30, 10, 50, 0.9));
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 24px;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.05);
}

[data-theme="light"] .project-card {
    background: var(--color-bg-card);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);
}

.project-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, var(--color-cyber-pink), var(--color-cyber-cyan), var(--color-cyber-rose), var(--color-cyber-purple));
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    background-size: 300% 300%;
    animation: cyberpunkGradient 4s ease infinite;
}

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

.project-card::after,
.skill-card::after,
.spec-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.4), rgba(0, 255, 255, 0.2), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.project-card:hover::after,
.skill-card:hover::after,
.spec-card:hover::after {
    width: 250px;
    height: 250px;
}

.project-card:hover {
    transform: translateY(-8px) rotateX(3deg);
    box-shadow: 0 15px 50px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3);
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 1;
}

.project-id {
    font-family: var(--font-body);
    font-size: 0.65rem;
    color: var(--color-cyber-cyan);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
}

.project-status {
    font-family: var(--font-body);
    font-size: 0.6rem;
    color: var(--color-success);
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-success);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
}

[data-theme="light"] .project-status {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    text-shadow: none;
}

.project-title {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    color: var(--color-cyber-cyan);
    position: relative;
    z-index: 10;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.project-description {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

[data-theme="light"] .project-description {
    text-shadow: none;
    font-weight: 500;
}

.project-tech {
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.tech-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
}

[data-theme="light"] .tech-label {
    text-shadow: none;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tech-tag {
    font-family: var(--font-body);
    font-size: 0.65rem;
    padding: 0.2rem 0.6rem;
    background: rgba(0, 255, 255, 0.15);
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 10px;
    color: var(--color-cyber-cyan);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    transform: scale(1.05);
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-cyber-cyan);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
}

.project-link:hover {
    gap: 0.6rem;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.4);
}


/* Professional Cyberpunk Workflow Section */
.section-workflow {
    position: relative;
    overflow: hidden;
    padding: 8rem 0;
    background: radial-gradient(circle at center, var(--color-bg-card) 0%, var(--color-bg) 100%);
}

.workflow-container {
    position: relative;
    max-width: 1200px;
    margin: 4rem auto 0;
    height: 400px;
    /* Fixed height for the diagram */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align modules to bottom */
    padding-bottom: 2rem;
}

/* Background Grid & Effects */
.workflow-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(var(--color-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}

/* Connection Lines (SVG) */
.workflow-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.connection-line {
    stroke: var(--color-border);
    stroke-width: 1;
    fill: none;
    opacity: 0.3;
}

.connection-line.active {
    stroke: var(--color-accent);
    opacity: 0.8;
    filter: drop-shadow(0 0 5px var(--color-accent));
}

.data-packet {
    fill: var(--color-accent);
    filter: drop-shadow(0 0 8px var(--color-accent));
    opacity: 0;
    /* Hidden by default, animated by JS */
}

/* Modules Container */
.workflow-modules {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    position: relative;
    z-index: 2;
    gap: 2rem;
}

/* Individual Module Card */
/* Individual Module Card */
.workflow-module {
    position: relative;
    flex: 1;
    background: var(--color-bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smoother transition */
    clip-path: polygon(10px 0, 100% 0,
            100% calc(100% - 10px), calc(100% - 10px) 100%,
            0 100%, 0 10px);
    /* Chamfered corners */
}

/* Light Mode Override for Workflow Module */
[data-theme="light"] .workflow-module {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.workflow-module:hover {
    background: #1a1f35;
    /* Force dark background on hover */
    border-color: var(--color-cyber-cyan);
    transform: translateY(-5px);
    box-shadow:
        0 0 10px var(--color-cyber-cyan),
        0 0 20px var(--color-cyber-pink),
        0 0 30px var(--color-cyber-purple);
}

/* Force light text on hover for workflow modules */
.workflow-module:hover .module-title,
.workflow-module:hover .module-desc,
.workflow-module:hover .module-id,
.workflow-module:hover .tech-mono {
    color: #e5e7eb !important;
    text-shadow: none;
}

.workflow-module:hover .module-title {
    color: var(--color-cyber-cyan) !important;
    text-shadow: 0 0 5px var(--color-cyber-cyan);
}

.workflow-module:hover .module-icon {
    filter: drop-shadow(0 0 10px var(--color-cyber-cyan));
    color: var(--color-cyber-cyan);
}

/* Module Header */
.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.module-id {
    font-family: 'Courier New', monospace;
    /* Tech mono font */
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    letter-spacing: 1px;
}

.module-status {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: var(--color-success);
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 2px;
}

/* Module Content */
.module-content {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.module-icon-container {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

.module-icon {
    font-size: 2rem;
    z-index: 2;
    filter: drop-shadow(0 0 10px var(--color-accent-glow));
    color: var(--color-text-primary);
}

.icon-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed var(--color-accent);
    border-radius: 50%;
    opacity: 0.5;
    animation: spin 10s linear infinite;
}

.workflow-module:hover .icon-ring {
    border-color: var(--color-accent);
    opacity: 1;
    animation-duration: 4s;
}

.module-title {
    font-size: 1.1rem;
    color: var(--color-text-primary);
    margin: 0;
}

.module-desc {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Module Footer */
.module-footer {
    border-top: 1px solid var(--color-border);
    padding-top: 0.8rem;
    text-align: right;
}

.tech-mono {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: var(--color-accent);
    opacity: 0.7;
}

/* Decorative Corners */
.module-corner {
    position: absolute;
    width: 6px;
    height: 6px;
    border-color: var(--color-accent);
    border-style: solid;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.workflow-module:hover .module-corner {
    opacity: 1;
}

.corner-tl {
    top: 0;
    left: 0;
    border-width: 1px 0 0 1px;
}

.corner-tr {
    top: 0;
    right: 0;
    border-width: 1px 1px 0 0;
}

.corner-bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 1px 1px;
}

.corner-br {
    bottom: 0;
    right: 0;
    border-width: 0 1px 1px 0;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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

/* Responsive Adjustments */
@media (max-width: 900px) {
    .workflow-container {
        height: auto;
        flex-direction: column;
        align-items: center;
    }

    .workflow-modules {
        flex-direction: column;
        gap: 3rem;
        max-width: 400px;
    }

    .workflow-connections {
        display: none;
        /* Hide complex SVG lines on mobile, maybe replace with simple CSS lines */
    }

    /* Simple vertical connector for mobile */
    .workflow-module::after {
        content: '';
        position: absolute;
        bottom: -2rem;
        left: 50%;
        width: 1px;
        height: 2rem;
        background: var(--color-border);
        transform: translateX(-50%);
    }

    .workflow-module:last-child::after {
        display: none;
    }
}

/* --- Interactive Enhancements --- */

/* Scanline Effect */
.workflow-module::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 240, 255, 0.1) 50%,
            transparent 100%);
    background-size: 100% 200%;
    background-position: 0% 0%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.workflow-module:hover::before {
    opacity: 1;
    animation: scanline 1.5s linear infinite;
}

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

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

/* Active Connector Glow */
.connection-line.connector-active {
    stroke: var(--color-cyber-cyan);
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--color-cyber-cyan));
    stroke-width: 2;
    transition: all 0.3s ease;
}

/* Text Decrypt / Glitch Effect Class */
.text-decrypting {
    color: var(--color-cyber-pink);
    text-shadow: 2px 0 var(--color-cyber-cyan), -2px 0 var(--color-warning);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    padding: 2rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

.testimonial-quote {
    margin-bottom: 1.5rem;
}

.quote-icon {
    color: var(--color-accent);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.testimonial-quote p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.author-name {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.author-title {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-heading {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-accent);
}

.contact-text {
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    gap: 1rem;
}

.contact-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    min-width: 150px;
}

.contact-value {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-accent);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.contact-form-wrapper {
    position: relative;
}

.alert {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.label-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.form-input {
    padding: 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-error {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #ef4444;
}

.btn-submit {
    margin-top: 1rem;
}

.footer {
    padding: 2rem 0;
    border-top: 1px solid var(--color-border);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

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

/* Glitch Effect */
.glitch {
    position: relative;
    color: var(--color-text-primary);
}

.glitch::before,
.glitch::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

.glitch::before {
    content: attr(data-glitch-text);
    left: 4px;
    text-shadow: -3px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

.glitch::after {
    content: attr(data-text);
    left: -4px;
    text-shadow: -3px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% {
        clip: rect(30px, 9999px, 10px, 0);
        transform: skew(0.85deg);
    }

    5% {
        clip: rect(70px, 9999px, 90px, 0);
        transform: skew(0.85deg);
    }

    10% {
        clip: rect(50px, 9999px, 30px, 0);
        transform: skew(0.35deg);
    }

    15% {
        clip: rect(80px, 9999px, 20px, 0);
        transform: skew(0.1deg);
    }

    20% {
        clip: rect(10px, 9999px, 80px, 0);
        transform: skew(0.65deg);
    }

    25% {
        clip: rect(90px, 9999px, 60px, 0);
        transform: skew(0.2deg);
    }

    30% {
        clip: rect(40px, 9999px, 50px, 0);
        transform: skew(0.9deg);
    }

    35% {
        clip: rect(60px, 9999px, 10px, 0);
        transform: skew(0.05deg);
    }

    40% {
        clip: rect(20px, 9999px, 70px, 0);
        transform: skew(0.65deg);
    }

    45% {
        clip: rect(50px, 9999px, 90px, 0);
        transform: skew(0.3deg);
    }

    50% {
        clip: rect(10px, 9999px, 30px, 0);
        transform: skew(0.85deg);
    }

    55% {
        clip: rect(70px, 9999px, 50px, 0);
        transform: skew(0.15deg);
    }

    60% {
        clip: rect(30px, 9999px, 20px, 0);
        transform: skew(0.65deg);
    }

    65% {
        clip: rect(80px, 9999px, 60px, 0);
        transform: skew(0.25deg);
    }

    70% {
        clip: rect(40px, 9999px, 10px, 0);
        transform: skew(0.75deg);
    }

    75% {
        clip: rect(90px, 9999px, 40px, 0);
        transform: skew(0.45deg);
    }

    80% {
        clip: rect(20px, 9999px, 80px, 0);
        transform: skew(0.05deg);
    }

    85% {
        clip: rect(60px, 9999px, 30px, 0);
        transform: skew(0.95deg);
    }

    90% {
        clip: rect(50px, 9999px, 70px, 0);
        transform: skew(0.35deg);
    }

    95% {
        clip: rect(10px, 9999px, 50px, 0);
        transform: skew(0.65deg);
    }

    100% {
        clip: rect(30px, 9999px, 90px, 0);
        transform: skew(0.15deg);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(60px, 9999px, 30px, 0);
        transform: skew(0.1deg);
    }

    5% {
        clip: rect(20px, 9999px, 80px, 0);
        transform: skew(0.8deg);
    }

    10% {
        clip: rect(90px, 9999px, 10px, 0);
        transform: skew(0.3deg);
    }

    15% {
        clip: rect(40px, 9999px, 50px, 0);
        transform: skew(0.6deg);
    }

    20% {
        clip: rect(70px, 9999px, 20px, 0);
        transform: skew(0.9deg);
    }

    25% {
        clip: rect(10px, 9999px, 60px, 0);
        transform: skew(0.2deg);
    }

    30% {
        clip: rect(80px, 9999px, 40px, 0);
        transform: skew(0.5deg);
    }

    35% {
        clip: rect(30px, 9999px, 90px, 0);
        transform: skew(0.1deg);
    }

    40% {
        clip: rect(50px, 9999px, 10px, 0);
        transform: skew(0.7deg);
    }

    45% {
        clip: rect(20px, 9999px, 70px, 0);
        transform: skew(0.4deg);
    }

    50% {
        clip: rect(60px, 9999px, 30px, 0);
        transform: skew(0.9deg);
    }

    55% {
        clip: rect(90px, 9999px, 50px, 0);
        transform: skew(0.2deg);
    }

    60% {
        clip: rect(40px, 9999px, 20px, 0);
        transform: skew(0.6deg);
    }

    65% {
        clip: rect(10px, 9999px, 80px, 0);
        transform: skew(0.3deg);
    }

    70% {
        clip: rect(70px, 9999px, 40px, 0);
        transform: skew(0.8deg);
    }

    75% {
        clip: rect(30px, 9999px, 60px, 0);
        transform: skew(0.1deg);
    }

    80% {
        clip: rect(80px, 9999px, 10px, 0);
        transform: skew(0.5deg);
    }

    85% {
        clip: rect(50px, 9999px, 90px, 0);
        transform: skew(0.7deg);
    }

    90% {
        clip: rect(20px, 9999px, 30px, 0);
        transform: skew(0.2deg);
    }

    95% {
        clip: rect(60px, 9999px, 70px, 0);
        transform: skew(0.9deg);
    }

    100% {
        clip: rect(40px, 9999px, 20px, 0);
        transform: skew(0.4deg);
    }
}

/* Command Palette */
.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.command-palette.visible {
    opacity: 1;
    pointer-events: auto;
}

.palette-container {
    width: 600px;
    max-width: 90%;
    background: var(--color-bg-card);
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.2);
    overflow: hidden;
}

.palette-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(0, 240, 255, 0.05);
}

.palette-prompt {
    color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: bold;
    margin-right: 1rem;
}

#command-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 1.1rem;
    outline: none;
}

.palette-close {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.palette-results {
    max-height: 300px;
    overflow-y: auto;
}

.command-item {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.command-item:last-child {
    border-bottom: none;
}

.command-item:hover,
.command-item.selected {
    background: rgba(0, 240, 255, 0.1);
}

.command-icon {
    color: var(--color-accent);
    font-size: 1.2rem;
}

.command-info {
    flex: 1;
}

.command-title {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.command-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* Glassmorphism Enhancements */
/* Glassmorphism & Global Card Styles */
.project-card,
.testimonial-card,
.workflow-step,
.spec-card,
.skill-card,
.skill-category {
    position: relative;
    /* Needed for pseudo-elements */
    background: var(--color-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    overflow: hidden;
    /* Contain scanline */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Ultra-smooth transition */
}

/* ... (Light Mode Overrides) ... */

/* Scanline Effect for All Cards */
.project-card::before,
.testimonial-card::before,
.workflow-step::before,
.spec-card::before,
.skill-card::before,
.skill-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--color-cyber-cyan) 30%,
            var(--color-cyber-pink) 50%,
            var(--color-cyber-purple) 70%,
            transparent 100%);
    background-size: 100% 200%;
    background-position: 0% 0%;
    opacity: 0;
    transition: opacity 0.8s ease;
    /* Ultra-smooth opacity transition */
    pointer-events: none;
    z-index: 1;
}

.project-card:hover::before,
.testimonial-card:hover::before,
.workflow-step:hover::before,
.spec-card:hover::before,
.skill-card:hover::before,
.skill-category:hover::before {
    opacity: 1;
    animation: scanline 3.5s linear infinite;
    /* Very slow, liquid scanline */
}

/* Light Mode Overrides for Cards */
[data-theme="light"] .project-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .workflow-step,
[data-theme="light"] .spec-card,
[data-theme="light"] .skill-card,
[data-theme="light"] .skill-category {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Hover Effects: Glow & Border */
.project-card:hover,
.testimonial-card:hover,
.workflow-step:hover,
.spec-card:hover,
.skill-card:hover,
.skill-category:hover {
    background: #1a1f35;
    /* Force dark background on hover for contrast */
    border-color: var(--color-cyber-cyan);
    box-shadow:
        0 0 10px var(--color-cyber-cyan),
        0 0 20px var(--color-cyber-pink),
        0 0 30px var(--color-cyber-purple);
    transform: translateY(-5px);
}

/* Force text color to light on hover (for Light Mode compatibility) */
.project-card:hover *,
.testimonial-card:hover *,
.workflow-step:hover *,
.spec-card:hover *,
.skill-card:hover *,
.skill-category:hover * {
    color: #e5e7eb !important;
    /* Force light text */
    text-shadow: none;
}

.project-card:hover .project-title,
.skill-card:hover .project-title,
.skill-category:hover h3,
.spec-card:hover h3,
.spec-card:hover .spec-header h3,
.spec-card:hover .project-title {
    /* Ultra-premium professional gradient */
    background: linear-gradient(120deg,
            var(--color-cyber-cyan),
            #2d5af5,
            #7928ca,
            #ff0080,
            #7928ca,
            #2d5af5,
            var(--color-cyber-cyan));
    background-size: 600% 100%;
    /* Stretched for seamless blending */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: none;
    animation: textGradient 6s linear infinite;
    /* Professional flowing speed */
}

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

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

/* Scanline Effect for All Cards */
.project-card::before,
.testimonial-card::before,
.workflow-step::before,
.spec-card::before,
.skill-card::before,
.skill-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--color-cyber-cyan) 30%,
            var(--color-cyber-pink) 50%,
            var(--color-cyber-purple) 70%,
            transparent 100%);
    background-size: 100% 200%;
    background-position: 0% 0%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.project-card:hover::before,
.testimonial-card:hover::before,
.workflow-step:hover::before,
.spec-card:hover::before,
.skill-category:hover::before {
    opacity: 1;
    animation: scanline 1.5s linear infinite;
}

/* Mobile Navigation & Hamburger - Professional Cyberpunk Edition */
@media (max-width: 992px) {

    /* Hamburger Button - Pro Style */
    .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 2001;
        /* Above menu */
        background: rgba(10, 14, 26, 0.6);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .mobile-nav-toggle:hover {
        background: rgba(0, 240, 255, 0.1);
        border-color: var(--color-accent);
        box-shadow: 0 0 20px var(--color-accent-glow);
        transform: scale(1.1);
    }

    [data-theme="light"] .mobile-nav-toggle {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    /* RTL Position for Hamburger */
    [dir="rtl"] .mobile-nav-toggle {
        right: auto;
        left: 1.5rem;
    }

    /* Hamburger Lines */
    .hamburger-lines {
        position: relative;
        width: 24px;
        height: 20px;
    }

    .line {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: var(--color-text-primary);
        border-radius: 10px;
        transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity 0.3s;
    }

    .line1 {
        top: 0;
    }

    .line2 {
        top: 50%;
        transform: translateY(-50%);
    }

    .line3 {
        bottom: 0;
    }

    /* Active Animation */
    .mobile-nav-toggle.active .line1 {
        top: 9px;
        transform: rotate(45deg);
    }

    .mobile-nav-toggle.active .line2 {
        opacity: 0;
        transform: translateX(-10px);
    }

    .mobile-nav-toggle.active .line3 {
        bottom: 9px;
        transform: rotate(-45deg);
    }

    /* Resize Mobile Logo - Enhanced */
    .nav-logo {
        position: fixed;
        top: 1.5rem;
        left: 1.5rem;
        z-index: 2001;
    }

    [dir="rtl"] .nav-logo {
        left: auto;
        right: 1.5rem;
    }

    /* Resize Mobile Logo - Enhanced */
    .logo-image {
        height: 60px;
        width: auto;
        filter: drop-shadow(0 0 5px var(--color-accent-glow));
        transition: all 0.3s ease;
    }

    .logo-image:active {
        transform: scale(0.95);
        filter: drop-shadow(0 0 15px var(--color-accent));
    }

    /* Full Screen Overlay - Premium Glassmorphism */
    /* Full Screen Overlay - Premium Glassmorphism */
    .nav-menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        /* Lighter, more transparent glass for smoother feel */
        background: radial-gradient(circle at center, rgba(30, 35, 55, 0.5) 0%, rgba(10, 14, 26, 0.9) 100%);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        gap: 2rem;
        z-index: 998;
        /* Initial State managed by GSAP, but good to hide by default */
        visibility: hidden;
        overflow: hidden;
    }

    [data-theme="light"] .nav-menu {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.6) 0%, rgba(240, 240, 245, 0.9) 100%);
    }

    /* .active class only handles visibility backup, animation is JS */
    .nav-menu.active {
        visibility: visible;
    }

    /* Cinematic Noise Texture - Reduced opacity */
    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
        opacity: 0.03;
        pointer-events: none;
        z-index: -1;
    }

    /* Nav Items Layout - No CSS Transitions */
    .nav-menu li {
        width: 100%;
        display: flex;
        justify-content: center;
        opacity: 0;
        /* GSAP will handle this */
    }

    /* Removed .nav-menu.active li transitions and delays - GSAP handles stagger */

    /* Main Links Styling - Enhanced Typography */
    .nav-link {
        font-family: var(--font-heading);
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--color-text-primary);
        text-transform: uppercase;
        letter-spacing: 2px;
        text-decoration: none;
        position: relative;
        padding: 0.5rem 1rem;
        transition: all 0.4s ease;
        -webkit-text-stroke: 1px transparent;
    }

    /* Arabic Typography Tweak */
    [lang="ar"] .nav-link {
        font-weight: 900;
        letter-spacing: 0;
        /* Arabic connects letters */
        transform: translateY(-5px);
        /* Optical alignment */
    }

    /* Holographic Hover Effect */
    .nav-link:hover {
        color: transparent;
        -webkit-text-stroke: 1px var(--color-accent);
        text-shadow: 0 0 25px var(--color-accent-glow);
        transform: scale(1.05);
        letter-spacing: 4px;
    }

    [lang="ar"] .nav-link:hover {
        letter-spacing: 0;
        /* Don't spacing Arabic text */
    }

    .nav-link::before {
        content: attr(data-section);
        position: absolute;
        top: 50%;
        left: -30px;
        transform: translateY(-50%);
        font-size: 0.8rem;
        color: var(--color-accent);
        font-family: 'Courier New', monospace;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .nav-link:hover::before {
        opacity: 1;
        left: -50px;
    }

    /* Control Bar (Settings) - Unified Glass Container */
    .language-switcher,
    .theme-switcher {
        width: auto;
        margin: 0;
    }

    .language-switcher {
        margin-top: auto;
        padding: 1.5rem 2rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        /* Glass Control Bar Background */
        background: rgba(255, 255, 255, 0.02);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
    }

    /* Move Theme Switcher INSIDE the control bar visually by absolute positioning or flex tweaking.
       Since HTML structure separates them, we'll keep them stacked but style similarly or use flex order if possible.
       Actually, `nav-menu` is flex-col. So we can just style them nicely together.
    */

    /* Let's make the language switcher act as the bottom bar containing both if we could, 
       but HTML structure is <ul>... <li lang> <li theme> </ul>.
       So they are siblings.
    */

    /* We will make the last two items (Lang + Theme) sit together at the bottom */
    .nav-menu li.language-switcher {
        margin-top: auto;
        /* Push to bottom */
        padding: 2rem 0 1rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        width: 80%;
        /* Not full width for floating effect */
        justify-content: center;
        gap: 2rem;
        flex-direction: row;
        /* Ensure items are row */
        align-items: center;
    }

    .nav-menu li.theme-switcher {
        width: auto;
        position: absolute;
        bottom: 2.2rem;
        right: 2rem;
        /* Lock theme toggle to bottom right corner of menu */
        margin: 0;
        padding: 0;
        opacity: 1 !important;
        /* Always visible once menu active */
        transform: none !important;
    }

    [dir="rtl"] .nav-menu li.theme-switcher {
        right: auto;
        left: 2rem;
    }

    .lang-link {
        font-size: 0.85rem;
        font-weight: 700;
        padding: 0.6rem 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        /* Modern rounded rect */
        background: rgba(0, 0, 0, 0.2);
        color: var(--color-text-secondary);
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .lang-link.active,
    .lang-link:hover {
        background: var(--color-accent);
        color: #000;
        border-color: var(--color-accent);
        box-shadow: 0 0 20px var(--color-accent-glow);
        transform: translateY(-2px);
    }

    .lang-separator {
        display: none;
    }

    /* Hide section numbers on mobile default to keep clean, show on hover */
    .nav-link[data-section]::before {
        content: attr(data-section);
        /* Restore content for effect */
    }




    /* Mobile Layout Adjustments */
    @media (max-width: 992px) {

        .about-content,
        .contact-content {
            grid-template-columns: 1fr;
        }

        .hero-title {
            font-size: 2.5rem;
        }

        .hero-cta {
            flex-direction: column;
        }

        .projects-grid,
        .testimonials-grid {
            grid-template-columns: 1fr;
        }

        .workflow-step {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
    }

    /* Hide Hamburger on Desktop */
    /* Hide Hamburger on Desktop */
    @media (min-width: 993px) {
        .mobile-nav-toggle {
            display: none;
        }
    }

    /* RTL Support for Arabic */
    [dir="rtl"] {
        text-align: right;
    }

    [dir="rtl"] .nav-logo {
        flex-direction: row-reverse;
    }

    @media (min-width: 769px) {
        [dir="rtl"] .nav-menu {
            flex-direction: row-reverse;
        }
    }

    [dir="rtl"] .nav-link::before {
        margin-right: 0;
        margin-left: 0.5rem;
    }

    [dir="rtl"] .section-header {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .section-code {
        margin-left: 0;
        margin-right: auto;
    }

    [dir="rtl"] .about-tags,
    [dir="rtl"] .tech-tags {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .spec-card:hover {
        transform: translateX(-5px);
    }

    [dir="rtl"] .project-link:hover {
        gap: 0.75rem;
    }

    [dir="rtl"] .project-link svg {
        transform: scaleX(-1);
    }

    [dir="rtl"] .contact-item {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .contact-label {
        text-align: left;
    }

    [dir="rtl"] .social-links {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .footer-content {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .hero-cta {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .hero-metrics {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .skill-items,
    [dir="rtl"] .workflow-steps,
    [dir="rtl"] .contact-details {
        direction: rtl;
    }

    [dir="rtl"] .spec-header,
    [dir="rtl"] .category-title,
    [dir="rtl"] .project-header,
    [dir="rtl"] .contact-item {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .btn svg {
        transform: scaleX(-1);
    }

    [dir="rtl"] .lang-switcher {
        flex-direction: row-reverse;
    }

    /* Language Switcher Styles */
    .lang-switcher {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-left: 1rem;
    }

    .lang-link {
        font-family: var(--font-body);
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        text-decoration: none;
        padding: 0.25rem 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        transition: all 0.3s ease;
        background: transparent;
        cursor: pointer;
    }

    .lang-link.active {
        color: var(--color-accent);
        border-color: var(--color-accent);
        background: rgba(0, 240, 255, 0.1);
    }

    .lang-link:hover {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }



    @keyframes glitchFlash {

        0%,
        90%,
        100% {
            opacity: 0;
            clip-path: inset(50% 0 50% 0);
            transform: translate(-50%, -50%) scale(1);
        }

        91% {
            opacity: 1;
            clip-path: inset(0 0 0 0);
            transform: translate(-50%, -50%) scale(1.1) skew(10deg);
        }

        92% {
            opacity: 1;
            transform: translate(-52%, -48%) scale(1.1) skew(-10deg);
            filter: invert(1);
        }

        93% {
            opacity: 1;
            transform: translate(-48%, -52%) scale(1.2);
            filter: none;
        }

        94% {
            opacity: 0;
        }
    }

    /* 
=============================================================================
   RTL SUPPORT (ARABIC)
=============================================================================
*/

    [dir="rtl"] {
        direction: rtl;
        text-align: right;
    }

    /* Typography & Layout */
    [dir="rtl"] body {
        text-align: right;
    }

    [dir="rtl"] .about-text p {
        text-align: right;
    }

    [dir="rtl"] .hero-title,
    [dir="rtl"] .hero-subtitle,
    [dir="rtl"] .hero-tagline {
        text-align: center;
    }

    /* Navigation */
    [dir="rtl"] .nav-logo {
        margin-left: 2rem;
        margin-right: 0;
    }

    [dir="rtl"] .nav-menu {
        padding-right: 0;
    }

    [dir="rtl"] .nav-link::before {
        margin-right: 0;
        margin-left: 0.5rem;
        content: attr(data-section);
    }

    /* Icons & Buttons */
    [dir="rtl"] .btn {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .btn svg {
        margin-right: 0.5rem;
        margin-left: 0;
        transform: scaleX(-1);
    }

    /* Hero Section */
    [dir="rtl"] .hero-label {
        flex-direction: row;
    }

    /* Skill Cards */
    [dir="rtl"] .skill-level {
        text-align: left;
    }

    [dir="rtl"] .skill-name {
        flex-direction: row;
    }

    /* Footer coversions */
    [dir="rtl"] .footer-code {
        direction: ltr;
        display: inline-block;
    }

    /* Spec Cards */
    [dir="rtl"] .spec-card {
        text-align: right;
    }

    [dir="rtl"] .spec-header {
        flex-direction: row;
        gap: 1rem;
    }

    /* Project Cards */
    [dir="rtl"] .project-links {
        justify-content: flex-start;
    }
}