@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Theme Variables - Modern Tech (Blue/Purple) */
    --primary-color: #667eea;
    --secondary-color: #764ba2;

    --logo-color: var(--primary-color);
    --header-color: #1e293b;
    /* Slate 800 */
    --text-color: #334155;
    /* Slate 700 */

    --gradient-start: #667eea;
    --gradient-end: #764ba2;

    --bg-light: #f8fafc;
    /* Slate 50 */
    --white: #ffffff;

    /* Toggle colors */
    --toggle-bg: #e2e8f0;
    --toggle-icon: #64748b;
}

[data-theme="dark"] {
    --header-color: #f1f5f9;
    /* Slate 100 */
    --text-color: #cbd5e1;
    /* Slate 300 */
    --bg-light: #0f172a;
    /* Slate 900 */
    --white: #1e293b;
    /* Slate 800 */
    --logo-color: #818cf8;
    /* Indigo 400 - lighter for dark mode */

    --toggle-bg: #334155;
    --toggle-icon: #94a3b8;
}

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

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-light);
}

/* Navigation */
.theme-toggle {
    background: var(--toggle-bg);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--toggle-icon);
    padding: 0;
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
}

.theme-toggle:hover {
    transform: rotate(15deg);
    color: var(--primary-color);
}

/* Dark mode header background adjustment needs a bit more specificity or JS, 
   but for now we'll stick to the glassmorphism logic which uses white with opacity.
   Let's make sure it looks good in dark mode too by using a variable for the border */

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.85);
    /* Semi-transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--logo-color);
}

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

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

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

/* Main Content */
.main-content {
    margin-top: 0;
    /* Handled by hero padding */
}

/* Hero Section */
/* Hero Section */
.hero-section {
    position: relative;
    padding-top: 120px;
    padding-bottom: 3rem;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 90% 10%, rgba(102, 126, 234, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(118, 75, 162, 0.08) 0%, transparent 40%);
}

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

.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    /* Text left, Image right */
    align-items: center;
    max-width: 1200px;
    width: 100%;
    gap: 4rem;
    padding: 0 2rem;
    margin: 0 auto;
}

.hero-text {
    order: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--header-color);
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: 2.5rem;
    line-height: 1.7;
    max-width: 600px;
}

.hero-highlight {
    background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer */
.footer {
    background: var(--white);
    padding: 3rem 0;
    text-align: center;
    border-top: 1px solid #e2e8f0;
    margin-top: 0;
}

.footer-text {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.footer-social a {
    color: #64748b;
    transition: color 0.3s;
}

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

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

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

.hero-avatar-container {
    order: 2;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-avatar {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    border: 6px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.25);
}

.hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Reusing existing section styles for other sections */
.section {
    padding: 3rem 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--header-color);
    letter-spacing: -0.02em;
}

/* About Me Section */
.about-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.avatar-container {
    display: flex;
    justify-content: center;
}

.avatar {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--white);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

.about-text p {
    margin-bottom: 1.5rem;
}

.about-text h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--header-color);
}


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

/* Social and Contact Buttons */
.social-btn,
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    /* Fully rounded */
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    border: none;
}

.social-btn:hover,
.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

/* Technologies Section */
.skills-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 3rem;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.skill-tag {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: #f1f5f9;
    /* Slate 100 */
    color: var(--header-color);
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.skill-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.skill-tag:hover::before {
    left: 0;
}

.skill-tag:hover {
    transform: translateY(-3px);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Keep original sizes for compatibility */
.skill-tag.size-xl {
    font-size: 1.4rem;
    padding: 1rem 2rem;
}

.skill-tag.size-lg {
    font-size: 1.25rem;
    padding: 0.9rem 1.8rem;
}

.skill-tag.size-md {
    font-size: 1.1rem;
    padding: 0.8rem 1.5rem;
}

.skill-tag.size-sm {
    font-size: 0.95rem;
    padding: 0.7rem 1.3rem;
}

.skill-tag.size-xs {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
}

/* Keep category colors for now (or override them to match theme if desired, dealing with specifics later) */
.skill-tag.category-frontend {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.skill-tag.category-backend {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.skill-tag.category-cloud {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.skill-tag.category-data {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.skill-tag.category-ai {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: ai-pulse 3s infinite ease-in-out;
}

@keyframes ai-pulse {
    0% {
        box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
    }

    50% {
        box-shadow: 0 4px 25px rgba(250, 112, 154, 0.7);
    }

    100% {
        box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
    }
}

.skill-tag.category-other {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    color: white;
}


/* Talks & Texts Section */
.talks-text-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
}

.talks-column,
.text-column {
    background: transparent;
    /* Removed card background for container */
}

.column-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--header-color);
    margin-bottom: 2rem;
    text-align: center;
}

.link-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.link-item {
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .link-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle border for definition */
    border-left: 4px solid var(--primary-color);
    /* Keep the accent */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    /* Stronger shadow */
}

.link-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.link-item a {
    text-decoration: none;
    color: var(--header-color);
    font-weight: 600;
    display: block;
    font-size: 1.05rem;
}

.link-item a:hover {
    color: var(--primary-color);
}

.link-description {
    font-size: 0.9rem;
    color: #64748b;
    /* Slate 500 */
    margin-top: 0.5rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .talks-text-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Trusted Me Section */
.trusted-container {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Safety for small screens */
}

.trusted-item {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-align: center;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    transition: transform 0.3s ease;
}

[data-theme="dark"] .trusted-item {
    background: rgba(255, 255, 255, 0.03);
    /* Lighter than bg but not solid */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .trusted-logo {
    background: transparent;
    /* Remove solid card-bg from logo container */
}

/* Invert Iteratec logo in dark mode for visibility */
[data-theme="dark"] .trusted-logo img[src*="iteratec"] {
    filter: invert(1) brightness(2);
    /* Invert to white and boost brightness */
}

.trusted-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1);
}

.trusted-logo {
    width: 200px;
    height: 120px;
    background: var(--card-bg);
    /* Match card bg so it looks transparent */
    /* border-radius: 8px; Removed border radius on logo container as usage varies */
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--header-color);
}

.trusted-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.trusted-dates {
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 500;
}

/* Contact Section */
.contact-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

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

/* Responsive */
@media (max-width: 768px) {

    /* Mobile Navigation: Single Line, Always Visible */
    .navbar {
        padding: 0.5rem 0;
    }

    .hamburger {
        display: none !important;
        /* Force hide hamburger */
    }

    .nav-container {
        flex-direction: column;
        /* Logo top, Menu bottom */
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .logo {
        font-size: 1.25rem;
        /* Smaller logo */
    }

    .nav-menu {
        display: flex;
        /* Always visible */
        position: static;
        width: 100%;
        height: auto;
        background: transparent;
        box-shadow: none;
        padding: 0;
        flex-direction: row;
        justify-content: center;
        /* Center links */
        gap: 0.75rem;
        /* Tight spacing */
        flex-wrap: wrap;
        /* Allow wrapping if needed */
        border-bottom: none;
        transform: none;
        opacity: 1;
        pointer-events: all;
    }

    .nav-menu li {
        margin: 0;
    }

    .nav-link {
        font-size: 0.85rem;
        /* Smaller mobile font */
        padding: 0.2rem 0;
    }

    .nav-item {
        margin: 0;
    }

    /* Polished Mobile Spacing */
    .section-title {
        font-size: 1.5rem;
        /* Smaller */
        margin-bottom: 1rem;
        /* Tighter spacing */
    }

    /* Minimalist Grid Skills */
    .skills-cloud {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns */
        gap: 0.5rem 0.5rem;
        /* Tighter gap */
        padding: 0;
        background: transparent;
        /* Remove card look */
        box-shadow: none;
    }

    .skill-tag {
        font-size: 0.7rem !important;
        /* Smaller font requested */
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: var(--text-color) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: auto !important;
        word-break: break-word;
    }

    /* Disable hover effects on mobile */
    .skill-tag:hover {
        transform: none !important;
        box-shadow: none !important;
        color: var(--text-color) !important;
    }

    .skill-tag::before {
        content: "" !important;
        width: 6px !important;
        height: 6px !important;
        background: var(--primary-color) !important;
        /* Dot color */
        border-radius: 50% !important;
        margin-right: 6px !important;
        position: static !important;
        /* Reset absolute positioning */
        display: inline-block !important;
        flex-shrink: 0;
    }

    .trusted-container {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        /* Limit width */
        margin: 0 auto;
        /* Center */
    }

    .trusted-item {
        width: 100%;
        min-width: unset;
        /* Remove min-width constraint */
        padding: 1rem;
        /* Smaller padding */
        min-height: auto;
    }

    .trusted-logo {
        width: 140px;
        /* Smaller logo container */
        height: 80px;
        margin-bottom: 0.5rem;
    }

    /* Mobile Menu Items Spacing - Reset for single line */
    /* .nav-menu li and .nav-link handled above */



    .hero-section {
        padding-top: 100px;
        /* Reduced from 120px */
        min-height: auto;
        padding-bottom: 3rem;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        /* Tighter gap */
    }

    .hero-text {
        order: 2;
    }

    .hero-avatar-container {
        order: 1;
        margin-bottom: 1rem;
    }

    .hero-avatar {
        width: 200px;
        /* Slightly smaller avatar for mobile */
        height: 200px;
    }

    .hero-title {
        font-size: 2.25rem;
        /* Slightly smaller title */
    }

    .section {
        padding: 2rem 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .avatar {
        width: 220px;
        height: 220px;
    }

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

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

    .social-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .contact-links {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .contact-btn {
        width: 240px;
        justify-content: center;
    }

    .skills-cloud {
        padding: 1.5rem;
        gap: 0.8rem;
    }
}