* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Developer Loading Screen */
.dev-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease, transform 0.6s ease;
    overflow: hidden;
}

.dev-loading-screen::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse 3s ease-in-out infinite;
}

[data-theme="dark"] .dev-loading-screen {
    background: linear-gradient(135deg, #050a14 0%, #0f172a 50%, #1e1b4b 100%);
}

[data-theme="dark"] .dev-loading-screen::before {
    background: radial-gradient(circle at 50% 50%, rgba(0, 243, 255, 0.1) 0%, transparent 70%);
}

.dev-loading-screen.fade-out {
    opacity: 0;
    transform: scale(1.1);
    pointer-events: none;
}

.orbit-animation-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dev-brand-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    opacity: 0;
    animation: slideDown 0.8s ease-out forwards;
    background: rgba(0, 0, 0, 0.2);
    padding: 2rem 3rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .dev-brand-text {
    background: rgba(0, 0, 0, 0.4);
}

.dev-brand-name {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
    animation: slideDown 0.8s ease-out forwards, textGlow 2s ease-in-out infinite 1s;
}

[data-theme="dark"] .dev-brand-name {
    background: linear-gradient(135deg, #00f3ff 0%, #bc13fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(0, 243, 255, 0.6));
}

.dev-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    animation: fadeIn 0.8s ease-out 0.3s forwards;
    opacity: 0;
}

[data-theme="dark"] .dev-tagline {
    color: rgba(0, 243, 255, 0.8);
}

.orbit-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateOrbit 20s linear infinite;
}

.orbit-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    opacity: 0;
    animation: fadeInIcon 0.6s ease-out 0.5s forwards;
}

.orbit-icon i {
    font-size: 3.5rem;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.4));
    animation: counterRotate 20s linear infinite, iconFloat 3s ease-in-out infinite;
}

.orbit-icon.outer {
    animation: fadeInIcon 0.6s ease-out 0.7s forwards;
}

.orbit-icon.outer i {
    font-size: 3rem;
    animation: counterRotate 20s linear infinite, iconFloat 3s ease-in-out infinite 0.5s;
}

.orbit-icon.extra {
    animation: fadeInIcon 0.6s ease-out 0.9s forwards;
}

.orbit-icon.extra i {
    font-size: 2.5rem;
    animation: counterRotate 20s linear infinite, iconFloat 3s ease-in-out infinite 1s;
}

/* Position icons in orbit */
.orbit-icon {
    transform: rotate(var(--angle)) translateY(calc(var(--orbit-size) * -1));
}

.dev-loading-text {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    animation: fadeIn 0.8s ease-out 1.2s forwards;
    opacity: 0;
}

[data-theme="dark"] .dev-loading-text {
    color: #00f3ff;
}

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

@keyframes pulse {

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

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

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

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

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

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

@keyframes iconFloat {

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

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

@keyframes fadeInIcon {
    0% {
        opacity: 0;
        transform: rotate(var(--angle)) translateY(calc(var(--orbit-size) * -1)) scale(0);
    }

    100% {
        opacity: 1;
        transform: rotate(var(--angle)) translateY(calc(var(--orbit-size) * -1)) scale(1);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
}

@keyframes textGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.9));
    }
}

[data-theme="dark"] .dev-brand-name {
    animation: slideDown 0.8s ease-out forwards, textGlowDark 2s ease-in-out infinite 1s;
}

@keyframes textGlowDark {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(0, 243, 255, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(188, 19, 254, 0.9));
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes dots {

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

    40% {
        content: '.';
    }

    60% {
        content: '..';
    }

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

/* Mobile responsive */
@media (max-width: 768px) {
    .orbit-animation-container {
        width: 500px;
        height: 500px;
    }

    .dev-brand-name {
        font-size: 2.5rem;
    }

    .dev-tagline {
        font-size: 1rem;
    }

    .orbit-icon i {
        font-size: 2.5rem;
    }

    .orbit-icon.outer i {
        font-size: 2rem;
    }

    .orbit-icon.extra i {
        font-size: 1.8rem;
    }

    .dev-loading-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .orbit-animation-container {
        width: 350px;
        height: 350px;
    }

    .dev-brand-name {
        font-size: 2rem;
    }

    .dev-tagline {
        font-size: 0.9rem;
    }

    .orbit-icon i {
        font-size: 2rem;
    }

    .orbit-icon.outer i {
        font-size: 1.5rem;
    }

    .orbit-icon.extra i {
        font-size: 1.3rem;
    }
}

h1,
h2,
h3 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.01em;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
}

/* Background Asset */
/* Background Asset */
.background-asset {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 50%, rgba(76, 29, 149, 0.15), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(0, 243, 255, 0.1), transparent 25%);
    filter: blur(60px);
    animation: pulseBackground 10s ease-in-out infinite alternate;
}

/* Light mode background enhancement */
[data-theme="light"] .background-asset {
    background:
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.4), transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.3), transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(240, 147, 251, 0.25), transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(79, 172, 254, 0.35), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(0, 242, 254, 0.3), transparent 35%);
    filter: blur(80px);
    opacity: 0.8;
    animation: pulseBackgroundLight 15s ease-in-out infinite alternate;
}

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

    100% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

@keyframes pulseBackgroundLight {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.05) rotate(2deg);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.1) rotate(-2deg);
        opacity: 0.8;
    }
}

.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    background: var(--cursor-gradient);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    /* Behind content */
    transform: translate(-50%, -50%);
    filter: blur(80px);
    transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    mix-blend-mode: var(--cursor-blend-mode);
}

/* Fire Particle Styles */
.fire-particle {
    position: fixed;
    pointer-events: none;
    background: var(--particle-color);
    border-radius: 50%;
    mix-blend-mode: var(--cursor-blend-mode);
    z-index: 1;
    /* Above cursor glow, below content? Or above content? Above helps visibility */
    animation: riseAndFade 1s forwards;
    box-shadow: 0 0 10px var(--accent-glow);
}

@keyframes riseAndFade {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(var(--tx), -100px) scale(0);
        opacity: 0;
    }
}

.background-asset img {
    /* Optional: Keep image but blend it or remove if using pure CSS gradient above */
    display: none;
}

/* Navigation */
/* Navigation */
.sticky-nav {
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    z-index: 100;
    border-bottom: 1px solid var(--card-border);
    transition: padding 0.3s ease;
}

.nav-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    /* Space is managed by the image margin animation */
}

.nav-profile-img {
    width: 0;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0;
    margin-right: 0;
    transform: scale(0.5) rotate(-20deg);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid var(--accent-color);
}

.sticky-nav.scrolled .nav-profile-img {
    width: 40px;
    opacity: 1;
    margin-right: 1rem;
    transform: scale(1) rotate(0deg);
}

.logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--accent-color);
    text-shadow: 0 0 10px var(--accent-glow);
    letter-spacing: 1px;
    white-space: nowrap;
}

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

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    font-size: 0.95rem;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--accent-color);
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--accent-color);
}

.nav-links a:hover {
    color: var(--text-main);
    text-shadow: 0 0 5px var(--accent-glow);
}

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

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-glow);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Sections */
.section {
    padding: 8rem 0;
    position: relative;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 4rem;
    text-align: center;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.3));
}

/* Hero Section */
.hero {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: var(--gradient-glow);
    z-index: -1;
    pointer-events: none;
}

.badge {
    background: var(--badge-bg);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 0.5rem 1.2rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
    display: inline-block;
    box-shadow: 0 0 15px var(--badge-bg);
    letter-spacing: 0.5px;
}

.hero h1 {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.gradient-text {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback shadow for text fill */
    filter: drop-shadow(0 0 20px rgba(188, 19, 254, 0.4));
}

.hero .subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto 3rem auto;
    /* Center horizontally with auto margins */
    line-height: 1.8;
}

/* Updated Profile Image Style */
.profile-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2rem;
    border: 3px solid var(--accent-color);
    box-shadow: 0 0 30px var(--accent-glow), inset 0 0 20px var(--accent-glow);
    animation: floatProfile 6s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.profile-img:hover {
    transform: scale(1.05) rotate(2deg);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 40px var(--accent-glow-secondary);
}

@keyframes floatProfile {

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

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

/* Buttons */
.cta-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    /* Center buttons */
    flex-wrap: wrap;
}

.btn {
    padding: 1rem 2.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: 0.9rem;
}

.btn-primary {
    background: transparent;
    color: var(--btn-text-on-accent);
    position: relative;
    z-index: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent-color);
    z-index: -1;
    transition: transform 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px var(--accent-glow);
    letter-spacing: 2px;
}

.btn-secondary {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    background: transparent;
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1);
}

.btn-secondary:hover {
    background: var(--accent-color);
    color: var(--btn-text-on-accent);
    box-shadow: 0 0 20px var(--accent-glow);
}

/* Project Cards */
/* Project Cards */
.projects-grid {
    display: flex;
    /* Horizontal Layout */
    gap: 2rem;
    overflow-x: auto;
    /* Enable horizontal scroll */
    padding: 2rem 1rem;
    /* Padding for hover effects */
    scroll-snap-type: x mandatory;
    /* Snap effect */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--accent-color) transparent;
}

.projects-grid::-webkit-scrollbar {
    height: 8px;
}

.projects-grid::-webkit-scrollbar-track {
    background: transparent;
}

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

.project-card {
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    backdrop-filter: blur(10px);
    cursor: pointer;

    /* Horizontal Item Styles */
    flex: 0 0 auto;
    /* Don't shrink */
    width: 350px;
    /* Fixed width for consistent cards */
    scroll-snap-align: start;
    /* Snap to start */
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-color);
}

.project-image-container {
    height: 350px;
    /* Taller to fit phone aspect ratio better */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    overflow: visible;
    /* Allow shadow to show */
    background: transparent;
}

.project-image {
    width: 160px;
    /* Approve phone width */
    height: 320px;
    /* Approx phone height */
    object-fit: cover;
    object-position: top center;
    border-radius: 20px;
    border: 6px solid #2d3748;
    /* Phone Bezel */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
    background: #000;
}

.project-card:hover .project-image {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border-color: #4a5568;
}

.project-info {
    padding: 2.5rem;
}

.project-info h3 {
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
    color: var(--text-main);
}

.project-info p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

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

.tags span {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--accent-color);
    border: 1px solid var(--card-border);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#skills {
    overflow: hidden;
    position: relative;
    min-height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Orbiting Skills */
.skills-orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* perspective removed */
}

.orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 243, 255, 0.05);
    /* very subtle */
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.02), inset 0 0 20px rgba(0, 243, 255, 0.02);
}

/* Reduced ring sizes for tighter fit */
.orbit-ring.inner {
    width: 400px;
    height: 400px;
    animation: orbit-rotate 30s linear infinite;
    z-index: 1;
    border-color: var(--orbit-inner);
}

.orbit-ring.middle {
    width: 600px;
    height: 600px;
    animation: orbit-rotate-reverse 45s linear infinite;
    z-index: 2;
    border-color: var(--orbit-middle);
}

.orbit-ring.outer {
    width: 800px;
    height: 800px;
    animation: orbit-rotate 60s linear infinite;
    z-index: 3;
    border-color: var(--orbit-outer);
}

.orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Adjust translate to match new radii (half of width) */
.orbit-ring.inner .orbit-item {
    transform: rotate(var(--angle)) translateY(-200px);
}

.orbit-ring.middle .orbit-item {
    transform: rotate(var(--angle)) translateY(-300px);
}

.orbit-ring.outer .orbit-item {
    transform: rotate(var(--angle)) translateY(-400px);
}

.orbit-item i,
.orbit-item svg {
    /* Make icons slightly smaller or transparent to not distract */
    font-size: 2.5rem;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
    /* Counter rotation - must match ring duration */
}

/* Revert to simple counter-rotation logic if needed, or let them spin with ring?
   Previous steps usually had specific counter-rotation logic.
   Let's use the simplest one: rotate icons opposite to angle if we want them upright,
   BUT since the rings rotate, the 'angle' is fixed position, the RING rotates.
   So icons rotate WITH the ring. To keep them upright relative to screen,
   we need them to rotate opposite to the RING's rotation.
*/

.orbit-ring.inner .orbit-item i,
.orbit-ring.inner .orbit-item svg {
    animation: counter-rotate 30s linear infinite;
}

.orbit-ring.middle .orbit-item i,
.orbit-ring.middle .orbit-item svg {
    animation: counter-rotate-reverse 45s linear infinite;
}

.orbit-ring.outer .orbit-item i,
.orbit-ring.outer .orbit-item svg {
    animation: counter-rotate 60s linear infinite;
}

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

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

@keyframes orbit-rotate-reverse {
    0% {
        transform: rotate(360deg);
    }

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

@keyframes counter-rotate {
    0% {
        transform: rotate(360deg);
    }

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

@keyframes counter-rotate-reverse {
    0% {
        transform: rotate(0deg);
    }

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

.orbit-item:hover i,
.orbit-item:hover svg {
    transform: scale(1.5);
    z-index: 100;
}

/* Pause on hover? Optional */
.skills-orbit-container:hover .orbit-ring,
.skills-orbit-container:hover .orbit-ring i {
    animation-play-state: paused;
}


/* Responsive adjustments Orbit */
@media (max-width: 768px) {
    #skills {
        min-height: auto;
        padding: 4rem 0;
    }

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

    /* Hide orbit rings on mobile */
    .skills-orbit-container {
        position: relative;
        transform: none;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        padding: 2rem 1rem;
        margin-bottom: 3rem;
    }

    .orbit-ring {
        display: none;
    }

    /* Show icons in a floating grid */
    .orbit-item {
        position: relative;
        transform: none !important;
        margin: 0;
        width: auto;
        height: auto;
        background: var(--glass-bg);
        border: 1px solid var(--card-border);
        border-radius: 16px;
        padding: 1.5rem;
        backdrop-filter: blur(10px);
        animation: floatIcon 3s ease-in-out infinite;
        transition: all 0.3s ease;
    }

    .orbit-item:nth-child(2) {
        animation-delay: 0.5s;
    }

    .orbit-item:nth-child(3) {
        animation-delay: 1s;
    }

    .orbit-item:nth-child(4) {
        animation-delay: 1.5s;
    }

    .orbit-item i,
    .orbit-item svg {
        font-size: 2.5rem;
        width: 48px;
        height: 48px;
        animation: none !important;
        transform: none !important;
    }

    .orbit-item:hover {
        transform: translateY(-5px) !important;
        border-color: var(--accent-color);
        box-shadow: 0 10px 25px rgba(0, 243, 255, 0.2);
    }

    @keyframes floatIcon {

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

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

@media (max-width: 480px) {
    #skills {
        padding: 3rem 0;
    }

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

    .skills-orbit-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        padding: 1.5rem 0.5rem;
    }

    .orbit-item {
        padding: 1rem;
    }

    .orbit-item i,
    .orbit-item svg {
        font-size: 2rem;
        width: 36px;
        height: 36px;
    }
}

/* --- Restored Skills Grid Styles --- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 5;
}

.skill-category {
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    background: linear-gradient(145deg, var(--card-bg), transparent);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.skill-category:hover {
    transform: translateY(-5px);
    border-color: var(--accent-secondary);
    box-shadow: 0 5px 20px rgba(188, 19, 254, 0.15);
}

.skill-category h3 {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skill-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.skill-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(10px) scale(1.02);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
}

.skill-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px;
    transition: all 0.3s ease;
}

.skill-item:hover .skill-icon {
    background: var(--accent-color);
    color: #000;
    transform: rotate(360deg);
}

.skill-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
}

.skill-item span {
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

/* Why Your Business Needs an App Section */
#why-app {
    position: relative;
}

.section-subtitle {
    text-align: center;
    font-size: 1.25rem;
    color: var(--text-muted);
    margin: -2rem auto 4rem auto;
    max-width: 600px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.benefit-card {
    padding: 2.5rem;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.benefit-card:hover::before {
    transform: scaleX(1);
}

.benefit-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: 0 15px 40px rgba(0, 243, 255, 0.2);
}

.benefit-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 243, 255, 0.3);
}

.benefit-card:hover .benefit-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 30px rgba(0, 243, 255, 0.5);
}

.benefit-icon svg {
    width: 36px;
    height: 36px;
    color: #000;
    stroke-width: 2.5;
}

.benefit-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
    font-weight: 700;
}

.benefit-card p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
}

.cta-container {
    text-align: center;
    margin-top: 3rem;
}

/* Responsive for Benefits Grid */
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .section-subtitle {
        font-size: 1.1rem;
        margin: -1.5rem auto 3rem auto;
    }

    .benefit-card {
        padding: 2rem;
    }

    .benefit-icon {
        width: 60px;
        height: 60px;
    }

    .benefit-icon svg {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .section-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .benefit-card h3 {
        font-size: 1.25rem;
    }

    .benefit-card p {
        font-size: 0.9rem;
    }
}

.skill-item:hover span {
    color: var(--text-main);
}

/* ----------------------------------- */

/* Testimonials Section */
.testimonial-scroller {
    width: 100%;
    overflow: hidden;
    padding: 2rem 0;
    /* fade mask on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonial-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scroll-testimonials 40s linear infinite;
    /* Adjust speed here */
    padding-left: 2rem;
    /* Initial offset */
}

/* Pause on hover for readability */
.testimonial-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-testimonials {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Move by 50% because we duplicated content exactly once */
    }
}

.testimonial-card {
    width: 350px;
    padding: 2rem;
    border-radius: 16px;
    flex-shrink: 0;
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
    user-select: none;
}

.testimonial-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--accent-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.client-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.client-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
}

.client-info h4 {
    color: var(--text-main);
    margin-bottom: 0.2rem;
    font-size: 1rem;
}

.client-info span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.rating {
    color: #fbbf24;
    /* Amber-400 equivalent for stars */
    margin-bottom: 1rem;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.feedback {
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
    font-size: 0.95rem;
}

/* Social Buttons (Restored) */
.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.social-btn:hover {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-3px);
}

/* Contact Section Reform */
.contact-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-form-card,
.contact-info-card {
    padding: 2.5rem;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
    background: var(--glass-bg);
}

.contact-info-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.contact-info-card h3 {
    color: var(--text-main);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.contact-info-card p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.social-links.vertical {
    flex-direction: column;
    width: 100%;
    margin-top: 0;
}

.social-links.vertical .social-btn {
    width: 100%;
    justify-content: center;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
    background: rgba(255, 255, 255, 0.5);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus {
    background: rgba(255, 255, 255, 0.8);
}

.submit-btn {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1rem;
}

.btn-loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top: 2px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
    margin-left: 10px;
}

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

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

.submit-btn.loading .btn-loader {
    display: block;
}

.submit-btn.loading span {
    display: none;
}

.form-status {
    margin-top: 1rem;
    text-align: center;
    font-weight: 500;
    min-height: 1.5rem;
}

.form-status.success {
    color: #4ade80;
}

.form-status.error {
    color: #f87171;
}


@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
    }
}

/* Map Section */
.map-container {
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
    background: var(--glass-bg);
    overflow: hidden;
    margin: 0 auto;
    max-width: 1000px;
}

.map-frame iframe {
    width: 100%;
    display: block;
    /* Dark mode map filter */
    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

[data-theme="light"] .map-frame iframe {
    /* Normal map for light mode */
    filter: none;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.7);
    z-index: 1000;
    transition: all 0.3s ease;
    animation: floatWA 3s ease-in-out infinite, pulseGlow 2s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.6), 0 0 30px rgba(37, 211, 102, 0.8);
    animation: floatWA 3s ease-in-out infinite, pulseGlowHover 1s ease-in-out infinite;
}

.whatsapp-float svg {
    margin-top: 2px;
    /* optical adjustment */
}

@keyframes floatWA {

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

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

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    50% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 20px 8px rgba(37, 211, 102, 0);
    }
}

@keyframes pulseGlowHover {

    0%,
    100% {
        box-shadow: 0 6px 15px rgba(37, 211, 102, 0.6), 0 0 30px rgba(37, 211, 102, 0.8);
    }

    50% {
        box-shadow: 0 6px 15px rgba(37, 211, 102, 0.6), 0 0 40px 10px rgba(37, 211, 102, 0.4);
    }
}

@media (max-width: 480px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-float svg {
        width: 26px;
        height: 26px;
    }
}

/* Animations replaced with JS scroll reveal mostly, but keeping basic fades */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .nav-content {
        padding: 1rem;
    }

    .nav-links {
        gap: 1rem;
    }

    /* Hide some links on very small screens if needed, or scroll */
    .nav-links li:nth-child(1),
    /* About */
    .nav-links li:nth-child(2)

    /* Projects */
        {
        padding: 0 5px;
    }

    .logo {
        font-size: 1.2rem;
    }

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

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

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

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

    .section {
        padding: 4rem 0;
    }

    .cta-group {
        flex-direction: column;
        width: 100%;
        padding: 0 2rem;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .nav-links {
        display: none;
        /* For now, hiding links on very small screens to avoid breaking layout, 
                        IDEALLY we would add a burger menu but preserving button */
    }

    /* Keep theme toggle visible though? The toggle is inside nav-links. 
       Let's separate toggle or just hide text links */
    .nav-links li {
        display: none;
    }

    .nav-links li:last-child {
        display: block;
        /* Keep theme toggle */
    }
}

/* Case Study Modal - Premium Redesign */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Darker overlay for focus */
    backdrop-filter: blur(12px);
    /* Stronger blur */
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    width: 100%;
    max-width: 900px;
    /* Wider for better layout */
    max-height: 90vh;
    position: relative;
    transform: translateY(40px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bounce effect */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    z-index: 20;
}

.modal-close:hover {
    background: var(--accent-color);
    color: #000;
    transform: rotate(90deg);
}

.modal-body {
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 3px;
}

/* Header Area */
.modal-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    padding: 3rem 3rem 2rem 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-category {
    color: var(--accent-color);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 1rem;
    background: rgba(0, 243, 255, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    border: 1px solid rgba(0, 243, 255, 0.2);
}

.modal-header h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Content Area */
.modal-scroll-content {
    padding: 3rem;
    animation: fadeInContent 0.6s ease-out 0.2s backwards;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.case-section {
    margin-bottom: 3rem;
}

.case-section h3 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.case-section h3::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-color);
}

.case-section p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Outcome & Challenges Grid */
.case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.case-box {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.case-box:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.case-box.highlight {
    background: linear-gradient(145deg, rgba(0, 243, 255, 0.1), rgba(0, 243, 255, 0.02));
    border-color: rgba(0, 243, 255, 0.3);
}

.case-box h4 {
    color: var(--text-main);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.8rem;
}

[data-theme="light"] .modal-header h2 {
    background: linear-gradient(to right, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .modal-overlay {
        padding: 0;
    }

    .modal-content {
        max-height: 100%;
        border-radius: 0;
        transform: none;
    }

    .modal-header h2 {
        font-size: 2rem;
    }

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

    .modal-scroll-content,
    .modal-header {
        padding: 2rem;
    }
}

/* Dedicated Project Page Styles */
.project-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-border);
    transition: background 0.3s ease;
}

.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

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

.project-hero {
    padding: 4rem 0 2rem 0;
    text-align: center;
    background: radial-gradient(circle at top, rgba(0, 243, 255, 0.05), transparent 70%);
}

.project-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 1rem 0;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project-short-desc {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.project-category {
    color: var(--accent-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 700;
}

.project-meta-tags {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.project-meta-tags .tag {
    /* Reusing tag style from main but specific if needed */
    padding: 0.5rem 1rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: var(--text-muted);
}

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

/* Gallery Strip */
.gallery-section {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 2rem 0 4rem 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
    justify-content: center;
}

.gallery-item {
    flex: 0 0 auto;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: center;
    border: 1px solid var(--card-border);
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Details Grid */
.case-study-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    margin-bottom: 6rem;
}

.detail-block {
    margin-bottom: 3rem;
}

.detail-block h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.detail-block p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.8;
}

.info-card {
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.info-card.highlight {
    border-color: var(--accent-color);
    background: rgba(0, 243, 255, 0.03);
}

.info-card h3 {
    margin-bottom: 1rem;
    color: var(--text-main);
    font-size: 1.25rem;
}

.info-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Light Mode Overrides for Project Page */
[data-theme="light"] .project-title {
    background: linear-gradient(to right, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .project-title {
        font-size: 2.5rem;
    }

    .case-study-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gallery-item {
        height: 300px;
    }

    .project-hero {
        padding-top: 3rem;
    }

    .case-sidebar {
        order: -1;
        margin-bottom: 2rem;
    }

    /* Show sidebar highlights first on mobile? Or maybe keep order. */
}


/* Floating Back Button */
.floating-back-btn {
    position: fixed;
    top: 2rem;
    left: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.floating-back-btn:hover {
    transform: scale(1.1) rotate(-10deg);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-glow);
    color: var(--accent-color);
    background: rgba(var(--accent-rgb), 0.1);
}

.floating-back-btn svg {
    transition: transform 0.3s ease;
}

.floating-back-btn:hover svg {
    transform: translateX(-3px);
}

/* Store Buttons */
.project-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.store-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
}

.store-btn:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px var(--accent-glow);
    background: rgba(255, 255, 255, 0.05);
}

.store-btn svg {
    flex-shrink: 0;
}

.store-btn span {
    font-size: 0.9rem;
}