:root {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --primary-color: #3b82f6;
    --accent-color: #10b981;
    --inactive-color: #334155;
    --card-bg: rgba(30, 41, 59, 0.7);
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background-color: var(--bg-color); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; flex: 1; }

.bg-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.shape { position: absolute; filter: blur(80px); opacity: 0.5; animation: float 20s infinite alternate ease-in-out; }
.shape-1 { width: 400px; height: 400px; background: var(--primary-color); top: -10%; left: -10%; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
.shape-2 { width: 500px; height: 500px; background: var(--accent-color); bottom: -20%; right: -10%; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation-delay: -5s; }
@keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(100px, 50px) rotate(45deg); } }

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.1); }
.logo a { color: var(--primary-color); text-decoration: none; font-size: 1.5rem; font-weight: bold; }
.nav-links { list-style: none; display: flex; gap: 30px; }
.nav-links li { position: relative; }
.nav-links a { color: var(--text-color); text-decoration: none; font-weight: 500; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--primary-color); }

.dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: var(--card-bg); backdrop-filter: blur(10px); min-width: 150px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); border-radius: 8px; padding: 10px 0; z-index: 10; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content li { padding: 10px 20px; }
.dropdown-content a { display: block; }

.intro-section { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; }
.intro-text { flex: 1; }
.intro-text h1 { margin-bottom: 20px; font-size: 2.5rem; }
.intro-text p { line-height: 1.6; color: #cbd5e1; }
.img-placeholder { width: 200px; height: 200px; background: var(--inactive-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 4px solid var(--primary-color); color: #94a3b8; overflow: hidden; position: relative;}

.vertical-timeline { position: relative; margin-top: 40px; padding-left: 30px; border-left: 4px solid var(--inactive-color); }
.timeline-item { position: relative; margin-bottom: 40px; padding-left: 30px; }
.timeline-node { position: absolute; left: -39px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--inactive-color); border: 4px solid var(--bg-color); transition: background 0.5s ease; }
.timeline-item.completed .timeline-node { background: var(--accent-color); box-shadow: 0 0 10px var(--accent-color); }
.timeline-year { font-weight: bold; color: var(--primary-color); margin-bottom: 5px; }
.timeline-content { background: var(--card-bg); padding: 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }

.horizontal-timeline { display: flex; justify-content: space-between; align-items: center; margin: 60px 0; position: relative; }
.horizontal-timeline::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 4px; background: var(--inactive-color); z-index: 1; }
.h-timeline-item { position: relative; z-index: 2; text-align: center; flex: 1; }
.h-node { width: 34px; height: 34px; border-radius: 50%; background: var(--inactive-color); border: 4px solid var(--bg-color); margin: 0 auto 10px auto; }
.h-timeline-item.completed .h-node { background: var(--accent-color); box-shadow: 0 0 10px var(--accent-color); }
.h-timeline-item.completed ~ .h-timeline-item .h-node { background: var(--inactive-color); }

.content-box { background: var(--card-bg); padding: 30px; border-radius: 8px; margin-bottom: 20px; }
.site-footer { text-align: center; padding: 20px; background: rgba(15, 23, 42, 0.9); border-top: 1px solid rgba(255,255,255,0.1); color: #94a3b8; }