/* --- Global Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { line-height: 1.6; color: #1e293b; scroll-behavior: smooth; background-color: #ffffff; }

/* --- Navigation --- */
header { background: #0f172a; color: white; padding: 1.2rem 10%; position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.6rem; font-weight: 800; color: #38bdf8; }
nav ul { display: flex; list-style: none; }
nav ul li a { color: #f1f5f9; text-decoration: none; margin-left: 25px; font-weight: 500; transition: 0.3s; }
nav ul li a:hover { color: #38bdf8; }

/* --- Hero Section --- */
section { padding: 100px 10%; text-align: center; }
.bg-light { background-color: #f8fafc; }

.hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white; padding: 150px 10%; }
.hero h1 { font-size: 3.5rem; margin: 10px 0; }
.tagline { font-size: 1.4rem; color: #94a3b8; margin-bottom: 20px; }
.bio { max-width: 600px; margin: 0 auto 30px; color: #cbd5e0; }

.btn { 
    display: inline-block; background: #38bdf8; color: white; padding: 12px 30px; 
    border-radius: 8px; text-decoration: none; font-weight: 600; margin: 10px; 
    transition: 0.3s; border: 2px solid #38bdf8; cursor: pointer; 
}
.btn-outline { background: transparent; color: #38bdf8; }
.btn:hover { background: #0ea5e9; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* --- Simplified Skills --- */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 40px; }
.skill-card { background: white; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; }
.skill-card h3 { color: #38bdf8; margin-bottom: 10px; }

/* --- Project Card --- */
.project-box { 
    max-width: 800px; margin: 50px auto; background: white; padding: 40px; 
    border-radius: 20px; border: 1px solid #e2e8f0; text-align: left; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}
.project-label { color: #38bdf8; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; }
.feature-list { list-style: none; margin: 20px 0; }
.feature-list li { margin-bottom: 10px; padding-left: 25px; position: relative; }
.feature-list li::before { content: '→'; position: absolute; left: 0; color: #38bdf8; font-weight: bold; }
.tags span { background: #e0f2fe; color: #0369a1; padding: 5px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; margin-right: 8px; }
.project-link { display: inline-block; margin-top: 25px; color: #38bdf8; text-decoration: none; font-weight: 700; }

/* --- Contact Form --- */
.contact-wrapper { max-width: 500px; margin: 40px auto; background: white; padding: 30px; border-radius: 15px; border: 1px solid #e2e8f0; }
.input-group { text-align: left; margin-bottom: 20px; }
.input-group label { display: block; font-weight: 600; margin-bottom: 5px; }
.input-group input, .input-group textarea { width: 100%; padding: 12px; border: 1px solid #cbd5e0; border-radius: 8px; }
.submit-btn { width: 100%; margin: 0; }
.social-links { margin-top: 30px; font-weight: 600; }
.social-links a { color: #38bdf8; text-decoration: none; }
.dot { margin: 0 10px; color: #cbd5e0; }

footer { padding: 50px; background: #0f172a; color: #94a3b8; text-align: center; }

@media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } nav { flex-direction: column; } .btn { width: 100%; } }