:root {
    /* Color Palette */
    --color-primary: #10b981;
    --color-bg-main: #0a0a0a;
    --color-bg-secondary: #171717;
    --color-text: #e5e5e5;
    --color-text-muted: #a3a3a3;

    /* Fonts */
    --font-main: 'Inter', sans-serif;

    /* Spacing & Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Transitions */
    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-main);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: var(--font-main);
    line-height: 1.2;
    /* Ensure consistent height calculation */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg-main);
}


.btn-primary:hover {
    background-color: #0d9668;
    /* Slightly darker shade for hover */
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-primary);
    color: #000;
    margin-left: var(--spacing-sm);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    margin-left: auto;
    /* Push to right in header */
    padding: 8px 20px;
}

.btn-ghost:hover {
    background: var(--color-primary);
    color: #000;
}


.btn-sm {
    font-size: 0.8rem;
    padding: 6px 14px;
}

.download-cv {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
}


/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

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

.logo img {
    height: 55px;
    /* Increased from 40px */
    width: auto;
    object-fit: contain;
    transition: var(--transition);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;

    transition: var(--transition);
    opacity: 0.8;
}

.nav-links a:hover {
    color: var(--color-primary);
    opacity: 1;
}


/* Desktop Header Layout - Perfect Centering via Grid */
@media (min-width: 769px) {
    .nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .logo {
        justify-self: start;
    }

    .nav-links {
        justify-self: center;
        flex: unset;
        /* Remove flex constraints */
    }

    .header-btn {
        justify-self: end;
        margin-left: 0;

        display: inline-flex;
        align-items: center;

        /* Strict sizing */
        width: fit-content !important;
        min-width: unset !important;
        padding: 6px 16px !important;
        font-size: 0.8rem;
    }

    .header-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Hero Buttons Alignment */
.hero-btns {
    display: flex;
    gap: 15px;
    align-items: center;
    /* Ensure buttons wrap on very small screens if needed, 
       but user asked for strict flex line. 
       We'll keep it simple as requested. */
}

.hero-text .btn {
    height: 48px;
    width: 180px;
    min-width: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;

    /* Animation Properties */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-text .btn:hover {
    transform: scale(1.05);
}

/* Ensure secondary button has similar hover bg change logic if needed, 
   or just rely on scale. User asked for "exact same hover effect". 
   Primary turns dark green. 
   Let's make secondary also react. */
.btn-secondary:hover {
    background-color: #0d9668;
    /* Same dark green shade as primary hover for consistency, or generic filter */
    color: #fff;
    /* Optional: change text to white like ghost? Or keep dark? */
}

.hamburger {
    display: none;
    cursor: pointer;
}

/* Projects Page Specifics */
.text-center {
    text-align: center;
}

.category-section {
    margin-bottom: var(--spacing-xl);
}

.category-title {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    border-left: 4px solid var(--color-primary);
    padding-left: 1rem;
}

.target-title {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    font-weight: 800;
}

/* Filter Tabs */
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 30px;
    font-family: var(--font-main);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--color-primary);
    color: var(--color-bg-main);
    border-color: var(--color-primary);
}

/* Masonry Grid */
.masonry-grid {
    column-count: 3;
    column-gap: 1.5rem;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.full-image {
    width: 100%;
    height: auto !important;
    /* Override fixed height if any */
    background-color: #222;
    overflow: hidden;
}

.full-image .placeholder-image {
    width: 100%;
    /* Height is set inline for placeholder simulation, or by img tag content */
    background: linear-gradient(45deg, #1f1f1f, #2a2a2a);
}

.category-tag {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Animations & Filtering */
.masonry-item.hidden {
    display: none;
}

.fade-in-anim {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Responsive Masonry */
@media (max-width: 968px) {
    .masonry-grid {
        column-count: 2;
    }
}


@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    animation: zoomIn 0.3s ease;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 2001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background: transparent;
    border: none;
    z-index: 2001;
}

.lightbox-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--color-primary);
}

/* Make images inside masonry grid clickable */
.project-img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.project-img:hover {
    transform: scale(1.02);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(16, 185, 129, 0.05) 100%);
    padding-top: var(--header-height);
    overflow: hidden;
    /* Prevent blob overflow */
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-lg);
}

.hero-text {
    flex: 1;
    max-width: 600px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.image-blob {
    position: relative;
    z-index: 1;
}

.image-blob::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: var(--color-primary);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    opacity: 0.1;
    z-index: -1;
    animation: morph 8s ease-in-out infinite;
}

.profile-img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    /* Updated drop shadow/glow effect using accent color */
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4),
        0 0 60px rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.subtitle {
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: var(--spacing-sm);
}

.hero .title {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.03em;
    background: linear-gradient(to right, #fff, #999);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .role {
    font-size: 2.5rem;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: var(--spacing-md);
}

.hero .description {
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-muted);
}

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

.fade-in {
    animation: fadeIn 1.5s ease-out forwards;
}

.floating {
    animation: float 6s ease-in-out infinite;
}


/* Scroll Animation Classes */
.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

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

/* Success Partners Section */
.partners {
    background-color: #171717;
    padding: var(--spacing-md) 0;
}

.partners-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

.partner-logo {
    max-height: 80px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    cursor: pointer;
}

.partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* Portfolio */
.portfolio {
    background-color: var(--color-bg-secondary);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-md);
}

.project-card {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;

    /* Centering Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 220px;
    /* Ensure consistent height */
    cursor: default;
    /* Non-interactive cursor */
}

/* Hover Effect: Scale & Green Glow */
.project-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
}

.project-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    color: var(--color-text);
}

.project-card p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}


/* Ensure no object-fit interferes and height is natural */
.image-wrapper img,
.project-img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    /* Safe default, though natural height usually overrides */
    display: block;
    /* Removes bottom spacing */
}

.placeholder-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #1f1f1f, #2a2a2a);
}

.project-card .content {
    padding: var(--spacing-md);
}

.project-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.project-card p {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.link-arrow {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}

.link-arrow:hover {
    color: #fff;
}

/* About */
.about-content {
    max-width: 800px;
    font-size: 1.25rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}


/* Contact */
.contact {
    padding: var(--spacing-xl) 0;
    /* Already XL but ensuring breathing room */
    text-align: center;
}

.contact-text {
    margin-bottom: 3rem;
    /* Extra space before buttons */
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.social-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    /* Increased gap */
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--color-primary);
    color: #000;
    padding: 14px 24px;
    /* Slightly larger for emphasis */
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.3s ease;
    min-width: 160px;
    /* Ensure uniform minimum width */
}

.social-btn:hover {
    transform: scale(1.05);
    background-color: var(--color-primary);
    /* Ensure consistency */
    color: #000;
}

/* Footer */
.footer {
    padding: var(--spacing-md) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 968px) {
    .hero-container {
        flex-direction: column-reverse;
        text-align: center;
        padding-top: 2rem;
    }

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

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

    .hero-image {
        width: 80%;
        margin-bottom: 2rem;
    }
}

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

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

    .hero .role {
        font-size: 1.5rem;
    }

    .nav-links {
        display: none;
        /* Todo: Add mobile menu toggle logic if needed, simplifed for now */
    }

    .hamburger {
        display: block;
    }

    .header-btn span {
        display: none;
    }

    .header-btn {
        padding: 8px;
        margin-left: 1rem;
    }

    .hero-btns {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 300px;
    }

    .hero-btns .btn {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}