body{background-color:var(--bg-body);color:var(--text-main);font-family:'Inter',sans-serif;transition:background-color 0.3s ease,color 0.3s ease}.roadmap-container{max-width:900px;margin:60px auto;padding:0 20px;text-align:center}.roadmap-header h1{font-size:48px;font-weight:800;margin-bottom:15px}.roadmap-header .highlight{background:var(--logo-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.roadmap-header p{color:var(--text-dim);font-size:18px;margin-bottom:40px}.roadmap-tabs{display:flex;overflow-x:auto;padding:10px 5px 25px;gap:12px;margin-bottom:40px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.roadmap-tabs::-webkit-scrollbar{display:none}@media (min-width:768px){.roadmap-tabs{display:grid;grid-template-columns:repeat(5,1fr);padding:0;overflow-x:visible;margin-bottom:60px}}.tab-btn{background:var(--bg-card);border:1px solid var(--glass-border);color:var(--text-main);padding:16px 12px;border-radius:18px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);flex:0 0 130px;scroll-snap-align:center}@media (min-width:768px){.tab-btn{padding:20px 15px;border-radius:20px;font-size:14px;gap:10px;flex:1}}.tab-btn i{font-size:24px;transition:transform 0.3s ease}.tab-btn[onclick*="'c'"] i{color:#6366f1}.tab-btn[onclick*="'java'"] i{color:#f59e0b}.tab-btn[onclick*="'python'"] i{color:#10b981}.tab-btn[onclick*="'htmlcss'"] i{color:#ef4444}.tab-btn[onclick*="'javascript'"] i{color:#fbbf24}.tab-btn:hover{background:#ffffff;border-color:var(--primary-color);transform:translateY(-8px);box-shadow:0 15px 30px -10px rgba(0,0,0,0.1)}.tab-btn:hover i{transform:scale(1.2)}.tab-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:white !important;box-shadow:0 10px 25px -5px rgba(79,70,229,0.4)}.tab-btn.active i{color:white !important}.roadmap-content{display:none;animation:fadeIn 0.5s ease}.roadmap-content.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.roadmap-container{max-width:1000px;margin:80px auto;padding:0 20px;position:relative}.roadmap-header{margin-bottom:80px;text-align:center}.roadmap-header h1{font-size:64px;font-weight:900;letter-spacing:-3px;line-height:1;margin-bottom:20px}.timeline{position:relative;padding:40px 0}.timeline::before{content:'';position:absolute;top:0;bottom:0;left:25px;width:6px;background:rgba(99,102,241,0.05);border-radius:10px}@media (min-width:768px){.timeline::before{left:50%;transform:translateX(-50%)}}.timeline-item{margin-bottom:100px}.timeline-dot{width:24px;height:24px;background:white;border:6px solid var(--primary-color);box-shadow:0 0 20px rgba(99,102,241,0.4);z-index:10}.timeline-content{background:#ffffff;padding:40px;border-radius:32px;border:1px solid rgba(0,0,0,0.03);box-shadow:0 20px 50px rgba(0,0,0,0.05);transition:all 0.4s cubic-bezier(0.165,0.84,0.44,1);position:relative;overflow:hidden;z-index:5;cursor:pointer}.step-number{position:absolute;top:-20px;right:20px;font-size:100px;font-weight:900;color:var(--primary-color);opacity:0.04;user-select:none;pointer-events:none}.card-icon{width:60px;height:60px;background:var(--subtitle-bg);color:var(--primary-color);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px;transition:all 0.3s ease}.timeline-item:hover .timeline-content{transform:translateY(-15px) scale(1.02);box-shadow:0 40px 80px rgba(99,102,241,0.15);border-color:rgba(99,102,241,0.2)}.timeline-item:hover .card-icon{background:var(--primary-color);color:white;transform:rotate(-10deg) scale(1.1)}.timeline-content h3{font-size:26px;font-weight:800;margin-bottom:12px;color:#0f172a}.timeline-content p{font-size:17px;color:#64748b;line-height:1.6}@media (min-width:768px){.timeline-item:nth-child(odd) .timeline-content{margin-right:60px;text-align:right}.timeline-item:nth-child(odd) .card-icon{margin-left:auto}.timeline-item:nth-child(odd) .step-number{right:auto;left:20px}.timeline-item:nth-child(even) .timeline-content{margin-left:60px}}.roadmap-container::before{content:'{}';position:fixed;top:20%;left:5%;font-size:120px;font-weight:900;color:var(--primary-color);opacity:0.03;z-index:-1}.roadmap-container::after{content:'</>';position:fixed;bottom:20%;right:5%;font-size:120px;font-weight:900;color:var(--primary-color);opacity:0.03;z-index:-1}.cta-box{margin-top:60px}.cta-btn{display:inline-block;background:var(--logo-gradient);color:white;padding:18px 45px;border-radius:16px;text-decoration:none;font-weight:800;font-size:18px;box-shadow:0 10px 25px -5px rgba(99,102,241,0.4);transition:all 0.3s ease}.cta-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 20px 35px -10px rgba(99,102,241,0.5)}@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(99,102,241,0.7)}70%{box-shadow:0 0 0 15px rgba(99,102,241,0)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}.roadmap-content.active .timeline-item{opacity:0;animation:slideInUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards}.roadmap-content.active .timeline-item:nth-child(1){animation-delay:0.1s}.roadmap-content.active .timeline-item:nth-child(2){animation-delay:0.2s}.roadmap-content.active .timeline-item:nth-child(3){animation-delay:0.3s}.roadmap-content.active .timeline-item:nth-child(4){animation-delay:0.4s}.roadmap-content.active .timeline-item:nth-child(5){animation-delay:0.5s}.roadmap-content.active .timeline-item:nth-child(6){animation-delay:0.6s}.roadmap-content.active .timeline-item:nth-child(7){animation-delay:0.7s}.roadmap-content.active .timeline-dot{animation:pulse 2s infinite}.scroll-rocket{position:absolute;left:25px;width:44px;height:44px;background:var(--primary-color);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:0;transform:translate(-50%,-50%);transition:transform 0.2s cubic-bezier(0.175,0.885,0.32,1.275);box-shadow:0 0 20px rgba(99,102,241,0.6);pointer-events:none;opacity:0;visibility:hidden}@media (min-width:768px){.scroll-rocket{left:50%}}.scroll-rocket.visible{opacity:1;visibility:visible}.scroll-rocket i{transform:rotate(135deg)}.rocket-flame{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(180deg);width:12px;height:18px;background:linear-gradient(to bottom,#fbbf24,#ef4444);border-radius:50% 50% 20% 20%;filter:blur(2px);animation:flamePulse 0.15s infinite alternate;opacity:0.9}@keyframes flamePulse{from{height:14px;opacity:0.7;transform:translateX(-50%) scaleX(0.8)}to{height:22px;opacity:1;transform:translateX(-50%) scaleX(1.2)}}