:root {
    --text-color: #1a1a1a;
    --text-muted: #555;
    --accent-color: #4f46e5; /* Indigo */
    --link-color: #0891b2;   /* The New Teal */
    --card-bg: rgba(255, 255, 255, 0.65); /* See-through white */
    --card-border: rgba(255, 255, 255, 0.8);
    --hover-bg: rgba(255, 255, 255, 0.85);
}

body {
    margin: 0;
    font-family: 'Outfit', sans-serif; /* A modern, creative font */
    color: var(--text-color);
    background: #f3f4f6;
    overflow-x: hidden;
}

/* 1. CREATIVE BACKGROUND (Mesh Gradient) */
.ambient-light {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background: 
        radial-gradient(circle at 15% 50%, rgba(235, 215, 255, 0.8), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(210, 245, 255, 0.8), transparent 25%);
    background-color: #f8fafc;
}

.main-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 2. GLASS CARDS UTILITY */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px); /* The "Frosted" effect */
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interactive:hover {
    transform: translateY(-5px);
    background: var(--hover-bg);
    box-shadow: 0 10px 40px rgba(79, 70, 229, 0.15); /* Colored shadow on hover */
    cursor: pointer;
}

/* 3. HERO SECTION */
header.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.hero h1 { margin: 0; font-size: 2.8rem; letter-spacing: -1px; }
.hero h2 { margin: 10px 0; color: var(--accent-color); font-size: 1.2rem; }
.hero p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.5; }

.tech-stack { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* 4. THE LAB & PROJECTS (Bento Grid) */
.section-title { margin-bottom: 20px; }
.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 50px;
}

.tool-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.tool-card .icon { font-size: 2rem; }
.tool-card h4 { margin: 0 0 5px 0; font-size: 1.1rem; }
.tool-card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.tool-card .arrow { font-size: 1.5rem; color: var(--accent-color); opacity: 0; transition: opacity 0.3s; }
.tool-card:hover .arrow { opacity: 1; }

/* 5. EXPERIENCE (Restored Detail) */
.timeline-section h3 { font-size: 1.8rem; margin-bottom: 30px; }

.experience-item {
    margin-bottom: 25px;
    padding: 35px; /* More breathing room */
}

.job-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 15px;
}

.job-header h4 { font-size: 1.4rem; margin: 0; color: #111; }
.job-header .role { color: var(--accent-color); font-weight: 600; display: block; margin-top: 5px; }
.job-header .date { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; }

.job-body ul { padding-left: 20px; margin: 0; }
.job-body li {
    margin-bottom: 12px;
    color: #444;
    line-height: 1.7; /* Better readability for long text */
}

/* Bold parts of resume need to pop */
strong { color: #000; font-weight: 700; background: rgba(79, 70, 229, 0.1); padding: 0 4px; border-radius: 4px; }

/* PROJECT STATS */
.project-card h4 { font-size: 1.3rem; margin: 0 0 10px 0; }
.project-card p { margin: 0 0 20px 0; color: var(--text-muted); }
.stats { display: flex; gap: 20px; font-weight: 700; font-size: 0.9rem; color: var(--accent-color); }

footer { text-align: center; color: #888; padding: 40px; font-size: 0.9rem; }
footer a { color: var(--accent-color); }

/* Update your generic 'a' tag selector */
a {
    text-decoration: none;
    color: var(--link-color); /* Uses the new Teal */
    font-weight: 600;         /* Makes links slightly bolder */
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-color); /* Turns Indigo on hover for a cool effect */
    text-decoration: underline; /* Standard usability best practice */
}

/* OPTIONAL: If you want the "Launch Tool" arrows to stay Indigo, keep them specific */
.tool-card, .project-card, .experience-item {
    color: inherit; /* Prevents whole card text turning teal */
}

/* SKILL CLOUD STYLES */

.skill-cloud-card {
    padding: 50px 30px; /* Generous padding to frame the cloud */
    text-align: center;
}

.skill-cloud {
    display: flex;
    flex-wrap: wrap; /* Allows items to flow to next line */
    justify-content: center; /* Centers them to create the "Cloud" shape */
    gap: 12px; /* Space between tags */
    max-width: 800px;
    margin: 0 auto;
}

.tag {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 50px; /* Pill shape */
    font-size: 0.9rem;
    color: #444;
    cursor: default;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Subtle gloss effect */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* Hover Effect: It floats up and glows */
.tag:hover {
    transform: translateY(-5px) scale(1.05);
    background: #fff;
    color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.15);
    z-index: 2;
}

/* Priority Tags (Make core skills pop) */
.tag.core {
    font-size: 1rem; /* Bigger font */
    font-weight: 700;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(79, 70, 229, 0.3);
}

.tag.highlight {
    font-weight: 600;
    color: #111;
    background: rgba(255, 255, 255, 0.6);
}
/* MOBILE */
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .job-header { flex-direction: column; gap: 5px; }
}