/* UPMARKET PROFESSIONAL DESIGN - PREMIUM */
:root { --primary: #0f172a; --secondary: #1e293b; --accent: #3b82f6; --accent-light: #60a5fa; --accent-dark: #1e40af; --bg-light: #f8fafc; --bg-card: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-light); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; }
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%); pointer-events: none; z-index: -1; }
nav { background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); padding: 1rem 2rem; display: flex; align-items: center; gap: 2rem; }
.logo-container { display: flex; align-items: center; margin-right: auto; }
.logo { height: 50px; width: auto; transition: all 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }
.logo:hover { transform: scale(1.1); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); }
nav a { color: #e2e8f0; text-decoration: none; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; transition: all 0.3s ease; padding: 0.5rem 1rem; border-radius: 6px; }
nav a:hover { color: white; background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.hero-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%); animation: gradientShift 15s ease infinite; color: white; padding: 8rem 2rem; text-align: center; box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3); }
.hero-section h1 { font-size: 5rem; font-weight: 800; margin-bottom: 1.5rem; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); line-height: 1.1; animation: slideUp 0.8s ease-out; }
.hero-section p { font-size: 1.5rem; font-weight: 300; max-width: 800px; margin: 0 auto 2rem; line-height: 1.8; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.content-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 16px; padding: 2.5rem; margin: 2rem 0; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; animation: slideUp 0.6s ease-out; }
.content-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2); }
.content-card h2 { color: var(--primary); font-size: 2rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--accent-dark), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.skill-badge { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: white; padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; margin: 0.5rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.skill-badge:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5); }
.section-divider { height: 3px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-light), transparent); margin: 3rem 0; }
footer { background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #e2e8f0; padding: 3rem 2rem; text-align: center; margin-top: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
footer p { font-weight: 500; }
@media (max-width: 768px) { nav { flex-wrap: wrap; padding: 0.75rem 1rem; } .hero-section { padding: 4rem 1rem; } .content-card { padding: 1.5rem; } }
@media (max-width: 480px) { nav { flex-direction: column; } .hero-section h1 { font-size: 2rem; } .hero-section p { font-size: 1rem; } }