:root {
    --bg: #0e0d14;
    --card: #1a1824;
    --text: #e8e3f5;
    --muted: #a89bbd;
    --accent: #c277ff;
    --accent-alt: #ff88e8;
}

:root[data-theme="light"] {
    --bg: #faf5ff;
    --card: #ffffff;
    --text: #1a1133;
    --muted: #6c5a89;
    --accent: #a55bff;
    --accent-alt: #ff4ec9;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

img {
    max-width: 100%;
    display: block;
    border-radius: 10px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.logo {
    font-weight: 700;
    font-size: 20px;
    color: var(--accent);
}

nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

nav a {
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
}

nav a:hover {
    color: var(--accent-alt);
}

#theme-toggle {
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 18px;
}

.section {
    max-width: 1100px;
    margin: auto;
    padding: 90px 20px;
    text-align: center;
}

h2 {
    font-size: 32px;
    margin-bottom: 12px;
    color: var(--accent);
}

p {
    line-height: 1.6;
    color: var(--muted);
}

.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 50vh;
}

.hero-content {
    flex: 1;
}

.hero-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.btn {
    background: var(--accent);
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
    transition: 0.3s;
}

.btn:hover {
    background: var(--accent-alt);
}

.btn-outline {
    border: 1px solid var(--accent);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-outline:hover {
    border-color: var(--accent-alt);
    color: var(--accent-alt);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.skill-card {
    background: var(--card);
    padding: 20px;
    border-radius: 10px;
    text-align: left;
}

.skill-card h3 {
    margin: 0 0 10px;
}

.skill-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
}

.timeline {
    margin-top: 30px;
    border-left: 2px solid rgba(255,255,255,0.05);
    padding-left: 20px;
}

.timeline-item {
    margin-bottom: 20px;
}

.timeline-date {
    font-weight: bold;
    color: var(--accent-alt);
}

.timeline-content h3 {
    margin: 6px 0;
}

.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.project-card {
    background: var(--card);
    padding: 16px;
    border-radius: 10px;
    text-align: left;
}

.project-card h4 {
    margin: 10px 0 4px;
}

form {
    max-width: 600px;
    margin: 20px auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

form label {
    display: flex;
    flex-direction: column;
    color: var(--text);
}

input, textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text);
}

footer {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}

/* Contact Section Styling */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
    margin-bottom: 30px;
}

.contact-container form {
    flex: 1;
    min-width: 300px;
    margin: 0; /* Override previous margin */
}

.contact-container img {
    flex: 0.8;
    max-width: 400px;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.contact-link {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05); /* Subtle background */
    border: 1px solid var(--accent);
    color: var(--text);
    text-decoration: none;
    border-radius: 50px; /* Pill shape */
    transition: 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.contact-link:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column-reverse; /* Form on top on mobile? Standard is form top or bottom? Usually form is key. Let's stack naturally or reverse? Let's keep existing order in HTML (form first) but verify visual flow. HTML has form then image. On mobile, Image usually good to see first? Or form? Let's stick to column. */
        flex-direction: column;
        text-align: center;
    }
    
    .contact-container form {
        width: 100%;
    }
    
    .contact-container img {
        width: 100%;
        max-width: 100%;
    }
}