:root {
    --bg-color: #030305;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;

    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-cyan: #06b6d4;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Custom Selection "Liquid" Effect */
::selection {
    background: rgba(6, 182, 212, 0.3);
    /* Accent Cyan with transparency */
    color: #ffffff;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
    /* Glow effect */
    -webkit-text-fill-color: white;
}

::-moz-selection {
    background: rgba(6, 182, 212, 0.3);
    color: #ffffff;
    text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

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

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
    /* Critical for mobile to prevent horizontal scroll */
    width: 100%;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    min-height: 100vh;
    width: 100%;
    position: relative;
    /* Establish stacking context */
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 10%;
    /* glass-heavy handles the background */
}

.nav-logo-container {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Refined spacing */
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Smoother, minimal transition */
    position: relative;
    opacity: 0.9;
}

.nav-logo-container:hover {
    transform: scale(1.02);
    /* Minimal scale for the whole block */
    opacity: 1;
}

.nav-logo-img {
    height: 45px;
    width: auto;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    transition: filter 0.3s ease;
}

.nav-logo-container:hover .nav-logo-img {
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4));
    /* Subtle unified glow, no rotation */
}

.nav-logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: white;
    /* Metallic effect */
    background: linear-gradient(to bottom, #ffffff 0%, #d1d5db 50%, #9ca3af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    transition: text-shadow 0.3s ease;
}

.nav-logo-container:hover .nav-logo-text {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    /* Subtle text glow */
}

.brand-dot {
    color: var(--accent-cyan);
    -webkit-text-fill-color: var(--accent-cyan);
    /* Override transparent fill */
    text-shadow: 0 0 10px var(--accent-cyan);
    transition: text-shadow 0.3s ease;
    display: inline-block;
}

.nav-logo-container:hover .brand-dot {
    /* Removed independent scale */
    text-shadow: 0 0 15px var(--accent-cyan);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

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

.nav-link:hover {
    color: white;
}

/* HAMBURGER MENU */
.menu-toggle {
    display: none;
    cursor: pointer;
    z-index: 1001;
}

.hamburger {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1002;
    /* Ensure above toggle container */
    pointer-events: none;
    /* Let clicks pass to parent .menu-toggle */
}

.hamburger .line {
    width: 100%;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* Hamburger Animation State */
.menu-toggle.active .hamburger .line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active .hamburger .line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .hamburger .line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 768px) {
    .navbar {
        padding: 1rem 5%;
        /* Align with section padding */
    }

    .menu-toggle {
        display: flex !important;
        /* Force display */
        visibility: visible !important;
        opacity: 1 !important;
        /* Ensure container is flex to center internal hamburger if needed, though mostly for alignment in navbar */
        align-items: center;
        width: 40px;
        /* larger touch target */
        height: 40px;
        justify-content: flex-end;
        /* Align to right */
        -webkit-tap-highlight-color: transparent;
        /* Remove blue highlight on tap */
    }

    .hamburger {
        /* Keep existing styles but ensure no margin interference */
        margin-left: auto;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 100%;
        background: rgba(3, 3, 5, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 999;
        /* Below toggle but above content */
        gap: 3rem;
    }

    .nav-links.nav-active {
        transform: translateX(0);
    }

    .nav-link {
        font-size: 1.5rem;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Stagger animation for links */
    .nav-links.nav-active .nav-link {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SCROLL ANIMATION */
.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

/* Noise Overlay */
.noise-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    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)'/%3E%3C/svg%3E");
}

/* Background Gradients */
.gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    background-image: url('src/bg.jpg');
    background-size: cover;
    background-position: center;
}

.gradient-orb {
    display: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Soft glow */
    opacity: 0.5;
    /* Combine float animation with mouse parallax */
    /* We use CSS variables set by JS for the parallax offset */
    --mouse-x: 0px;
    --mouse-y: 0px;
    transform: translate(var(--mouse-x), var(--mouse-y));
    will-change: transform;
    /* The float animation needs to apply on top or separately. 
       Since we can't easily compose transforms from different sources (keyframe vs inline style) without overwriting,
       we will apply the float animation to the keyframes but INCLUDE the variable? No, keyframes usually override.
       
       Better strategy: Leave .gradient-orb for the shape/blur. 
       Add the `animation` to it.
       Wrap it in a `.orb-wrapper` that handles the parallax.
       
       However, to avoid changing HTML structure too much, let's use the variable in the keyframe?
       No, that gets complex.
       
       Let's just use `margin` or `top/left` adjustment for parallax? 
       No, `transform` is more performant.
       
       Let's stick to the plan: I will wrap the orbs in the HTML in the NEXT step if needed, 
       BUT for now, I will try to apply the float animation to a `::after` pseudo-element?
       OR simpler: standard `transform`. I will change the keyframe to use `translate` and add the variables there.
    */
    animation: float 20s infinite alternate ease-in-out;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
    bottom: -150px;
    right: -50px;
    animation-delay: -5s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
    top: 40%;
    left: 60%;
    animation-delay: -10s;
}

@keyframes float {
    0% {
        transform: translate(var(--mouse-x), var(--mouse-y)) scale(1);
    }

    100% {
        transform: translate(calc(var(--mouse-x) + 30px), calc(var(--mouse-y) + 50px)) scale(1.1);
    }
}


/* BACKGROUND MARQUEE */
.bg-marquee {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-5deg);
    /* Slight tilt for dynamism */
    width: 120%;
    /* Increased for rotation coverage, but overflow hidden on parent/body must catch it */
    left: -10%;
    /* Center the wider element */
    overflow: hidden;
    z-index: 0;
    /* Behind main content (z-index 1) but above gradient (-1) */
    pointer-events: none;
    opacity: 0.03;
    /* Very subtle watermarl */
}

.marquee-content {
    display: flex;
    width: fit-content;
    white-space: nowrap;
    animation: marqueeScroll 40s linear infinite;
}

.marquee-content span {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 25vw;
    /* Massive responsive text */
    padding-right: 5vw;
    color: transparent;
    -webkit-text-stroke: 4px white;
    /* Outline style */
}

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

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

.app-container {
    position: relative;
    z-index: 1;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    /* Slightly lighter for cards */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 20px;

    /* 3D Tilt Support */
    transform-style: preserve-3d;
    will-change: transform;
    /* transition: transform 0.1s ease;  <-- Removed delay for instant tilt response, managed in JS or verify responsiveness */
    /* actually we want a very fast transition to smooth out jitter, but 'mousemove' fires fast.
       Common practice: use 'transition: transform 0.1s' or similar. 
       Let's keep the transition from the previous block but make it faster/smoother for tilt.
       The previous block had `transition: all 0.4s...`. 
       That's too slow for tilt. We should separate properties if possible, 
       or override it in the JS style application? No, CSS is cleaner.
    */
    transition: transform 0.1s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.4s ease;
    will-change: transform;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.4);
    transform: translateY(-5px);
}

.glass-heavy {
    background: rgba(3, 3, 5, 0.7);
    /* Darker for better text contrast if used on nav */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Typography Utilities for Glass */
h1,
h2,
h3 {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* HERO SECTION */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    /* Mobile column layout handled in media query later */
    gap: 4rem;
}

.hero-content {
    max-width: 600px;
}

/* Badge */
.badge-glow {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    color: var(--accent-cyan);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-cyan);
    border-radius: 50%;
    margin-right: 0.5rem;
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: pulse 2s infinite;
}

/* Typography */
.hero-title {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.gradient-text {
    background: linear-gradient(135deg, #fff 0%, var(--accent-blue) 50%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    max-width: 480px;
}

/* Buttons */
.hero-actions {
    display: flex;
    gap: 1.5rem;
}

.btn {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-glow {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    color: white;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

.btn-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.6);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Hero Visual & Artifact */
.hero-visual {
    position: relative;
    perspective: 1000px;
    /* width: 500px; height: 400px; */
}

.hero-card {
    padding: 0;
    /* Reset padding for internal structure */
    width: 450px;
    min-height: 300px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.card-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.window-controls {
    display: flex;
    gap: 8px;
    margin-right: 1rem;
}

.window-controls span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.window-title {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.card-body {
    padding: 2rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: #e2e8f0;
}

/* Code Highlighting */
.code-line {
    margin-bottom: 0.5rem;
}

.indent {
    margin-left: 1.5rem;
}

.c-pink {
    color: #ff79c6;
}

.c-blue {
    color: #8be9fd;
}

.c-purple {
    color: #bd93f9;
}

.c-yellow {
    color: #f1fa8c;
}

.c-green {
    color: #50fa7b;
}

.c-num {
    color: #ffb86c;
}

.code-runner {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    color: var(--accent-green);
    font-size: 0.8rem;
}

.cursor-blink {
    animation: blink 1s infinite step-end;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

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

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

/* Floating Elements */
.float-element {
    position: absolute;
    border-radius: 12px;
    z-index: 1;
    animation: float 6s infinite ease-in-out;
}

.float-1 {
    width: 60px;
    height: 60px;
    top: -20px;
    right: -20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    animation-delay: -1s;
}

.float-2 {
    width: 80px;
    height: 80px;
    bottom: -30px;
    left: -40px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
    animation-delay: -2s;
}

@media (max-width: 1024px) {
    .hero-section {
        flex-direction: column;
        justify-content: center;
        padding-top: 100px;
        /* Space for fixed nav later */
        text-align: center;
    }

    .hero-content {
        margin-bottom: 3rem;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

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

    .hero-card {
        width: 90vw;
        max-width: 450px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .btn {
        padding: 0.8rem 2rem;
        width: 100%;
        /* Stack buttons on very small screens */
        text-align: center;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
}

/* ABOUT SECTION */
.about-container {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.about-profile {
    flex: 1;
    min-width: 300px;
    padding: 3rem;
    text-align: center;
    position: sticky;
    top: 100px;
    /* Sticky scroll effect */
}

.profile-image-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 2rem;
    position: relative;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.profile-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.5;
    animation: rotateGlow 10s linear infinite;
    z-index: 1;
}

.profile-name {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(to right, white, #a1a1aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-role {
    color: var(--accent-cyan);
    font-weight: 500;
    margin-bottom: 1.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.profile-meta {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.about-content {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.story-block {
    padding: 2.5rem;
    border-radius: 20px;
}

.block-title {
    margin-bottom: 1rem;
    color: white;
    font-size: 1.3rem;
}

.highlight-text {
    color: var(--accent-purple);
    font-weight: 600;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.info-card {
    padding: 1.5rem;
}

.info-card h4 {
    color: white;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.full-width {
    grid-column: span 2;
}

.feature-list {
    list-style: none;
    margin-top: 0.5rem;
}

.feature-list li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.feature-list li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--accent-cyan);
}

.about-cta {
    margin-top: 1rem;
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 968px) {
    .about-container {
        flex-direction: column;
    }

    .about-profile {
        width: 100%;
        position: static;
        /* Remove sticky on mobile */
    }
}

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

    .full-width {
        grid-column: auto;
    }
}

/* PROJECTS SECTION */
.section-padding {
    padding: 8rem 10%;
}

.section-header {
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

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

.projects-grid {
    display: grid;
    /* Reduced min-width to 280px for better mobile support */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
}

.project-card {
    padding: 0;
    /* Override default padding */
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* transition is inherited from .glass-card */
}

.project-thumb {
    height: 220px;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.project-card:hover .project-thumb {
    transform: scale(1.05);
}

/* Placeholder Gradients for Thumbs */
.thumb-1 {
    background: url('src/momo-king.jpg');
    background-size: cover;
    background-position: center;
}

.thumb-2 {
    background: url('src/gourmet haven.png');
    background-size: cover;
    background-position: center;
}

.thumb-3 {
    background: linear-gradient(45deg, #141e30, #243b55);
}

.project-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-tags {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.project-tags span {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.project-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}

.project-actions {
    margin-top: auto;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-link {
    display: flex;
    align-items: center;
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.action-link:hover {
    color: white;
}

.arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.action-link:hover .arrow {
    transform: translate(3px, -3px);
}

.action-icon {
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.action-icon:hover {
    color: white;
    transform: rotate(10deg);
}

@media (max-width: 768px) {
    .section-padding {
        padding: 6rem 5%;
    }

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

@media (max-width: 480px) {
    .section-padding {
        padding: 4rem 5%;
    }

    .section-title {
        font-size: 2rem;
    }
}

/* SKILLS SECTION */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2rem;
}

.skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: default;
    /* transition inherited */
}

.skill-card:hover {
    border-color: var(--glow-color);
    box-shadow: 0 0 20px var(--glow-color);
    transform: translateY(-5px) scale(1.05);
}

.skill-icon {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.skill-card:hover .skill-icon {
    color: white;
    text-shadow: 0 0 10px var(--glow-color);
}

.skill-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.skill-card:hover .skill-name {
    color: white;
}

/* CONTACT SECTION */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

input,
textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    color: white;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: 4px 4px 0 0;
}



input:focus,
textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: var(--accent-cyan);
    box-shadow: 0 4px 20px -10px var(--accent-cyan);
}

/* FOOTER */
.footer {
    padding: 3rem 10%;
    margin-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

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

.footer-logo {
    font-family: var(--font-heading);
    font-weight: 700;
}

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

.social-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.copyright {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* CUSTOM CURSOR */
@media (hover: hover) and (pointer: fine) {

    .cursor-dot,
    .cursor-outline {
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: 9999;
        pointer-events: none;
    }

    .cursor-dot {
        width: 8px;
        height: 8px;
        background-color: var(--accent-cyan);
    }

    .cursor-outline {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        transition: width 0.2s, height 0.2s, background-color 0.2s;
    }

    /* Hide default cursor only if we have a custom one working? 
       For safety, let's just make the custom one an accent. 
       If we want "Elite", we hide default.
    */
    body,
    a,
    button,
    input,
    textarea,
    .btn,
    .glass-card {
        cursor: none !important;
        /* Force override of browser defaults */
    }

    a:hover~.cursor-outline,
    button:hover~.cursor-outline,
    .glass-card:hover~.cursor-outline {
        width: 60px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.1);
        border-color: transparent;
    }
}

/* LOADER */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-color);
    z-index: 99999;
    /* Top level */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loader-text {
    font-family: 'Courier New', monospace;
    color: var(--accent-cyan);
    letter-spacing: 0.2em;
    font-size: 1.2rem;
    animation: pulse 1.5s infinite;
}

.loader-subtext {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    animation-delay: 0.5s;
    margin-bottom: 0.5rem;
}

.loader-bar {
    width: 0%;
    height: 2px;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: loadBar 2.5s ease-in-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

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

    50% {
        width: 50%;
        opacity: 0.5;
    }

    100% {
        width: 150px;
        opacity: 1;
    }
}