/* --- CSS VARIABLES & GLOBAL STYLES --- */
:root {
    --dark-space: #0A0A14;
    --surface-color: #1A1A2E; /* A slightly lighter dark blue for cards */
    --electric-magenta: #EE4B6A;
    --glow-cyan: #00F6FF;
    --light-text: #E0E5F3;
    --subtle-text: #8D94B0;
    --font-main: 'Inter', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--dark-space); color: var(--light-text); font-family: var(--font-main); overflow-x: hidden; cursor: none; }

/* --- BACKGROUND CANVAS & CURSOR --- */
#generative-art-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.custom-cursor { width: 25px; height: 25px; border: 1px solid var(--glow-cyan); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; transition: width 0.3s, height 0.3s, background-color 0.3s; z-index: 9999; }

/* --- HEADER & NAVIGATION --- */
.main-header { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 4rem; display: flex; justify-content: space-between; align-items: center; z-index: 100; }
.logo { font-weight: 700; font-size: 1.5rem; text-decoration: none; color: var(--light-text); }
.main-nav { display: flex; gap: 2rem; }
.main-nav a { color: var(--subtle-text); text-decoration: none; font-weight: 500; transition: color 0.3s; }
.main-nav a:hover, .main-nav a.active { color: var(--light-text); }

/* --- GENERAL SECTION & PAGE STYLING --- */
.fullscreen-section { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
.content-section { padding: 10rem 4rem; text-align: center; }
.page-content { padding-top: 10rem; }
.page-title { font-size: 4rem; margin-bottom: 5rem; text-align: center; }
.container { max-width: 900px; margin: 0 auto; }
h2 { font-size: 2.5rem; margin-bottom: 2rem; }
p { font-size: 1.1rem; line-height: 1.7; color: var(--subtle-text); }

/* --- HERO SECTION --- */
.hero-name { font-size: 6vw; font-weight: 700; line-height: 1.1; letter-spacing: -2px; }
.hero-subtitle { font-size: 1.5rem; color: var(--light-text); margin-top: 1rem; font-weight: 300; }

/* --- SKILLS SECTION --- */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 4rem; }
.skill-card { background: rgba(20, 20, 35, 0.5); backdrop-filter: blur(10px); padding: 2rem; border-radius: 12px; border: 1px solid var(--dark-space); transition: transform 0.3s, border-color 0.3s; }
.skill-card:hover { transform: translateY(-10px); border-color: var(--glow-cyan); }
.skill-card h3 { font-size: 1.2rem; font-weight: 500; }

/* --- PROJECTS SECTION (NEW LAYOUT) --- */
.projects-container { padding: 5rem 0; }
.projects-title { text-align: center; margin-bottom: 5rem; }
.project-card {
    display: flex; /* Key change for side-by-side layout */
    align-items: center; /* Vertically align image and content */
    gap: 3rem;
    width: 90%;
    max-width: 1100px;
    margin: 5rem auto;
    background: var(--surface-color); /* Solid dark background for readability */
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid #2a2a4a;
}
/* Alternate card layout for a dynamic feel */
.project-card:nth-child(even) {
    flex-direction: row-reverse;
}

.project-image {
    flex-basis: 50%; /* Image takes up half the space */
    border-radius: 8px;
    overflow: hidden;
}
.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-content {
    flex: 1; /* Content takes up the remaining space */
}
.project-number { font-size: 1.2rem; font-weight: 700; color: var(--electric-magenta); margin-bottom: 1rem; }
.project-content h3 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--light-text); }
.project-content p { color: var(--subtle-text); /* Improved contrast */ }
.project-tech { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.project-tech span { border: 1px solid var(--subtle-text); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 500; }

.project-links {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
}
.btn-secondary {
    color: var(--light-text);
    background-color: transparent;
    border: 1px solid var(--subtle-text);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background-color: var(--electric-magenta);
    border-color: var(--electric-magenta);
}

.view-all-projects-container { text-align: center; margin-top: 4rem; }
.btn-primary { background-color: var(--electric-magenta); color: var(--light-text); padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; font-weight: 700; transition: transform 0.3s, box-shadow 0.3s; display: inline-block; }
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(238, 75, 106, 0.5); }

/* --- CONTACT SECTION --- */
.contact-links { margin-top: 3rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; }
.contact-link { font-size: 1.2rem; font-weight: 500; color: var(--light-text); text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid var(--subtle-text); transition: border-color 0.3s; }
.contact-link:hover { border-color: var(--electric-magenta); }

/* --- RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    .project-card, .project-card:nth-child(even) {
        flex-direction: column;
    }
    .main-header {
        padding: 1.5rem;
    }
    .project-content h3 {
        font-size: 2rem;
    }
}