.timeline-container{--primary-color:#2a7ced;--text-main:#2b2c2c;--text-muted:#64748b;--border-light:#e2e8f0;--bg-warn-light:#fff5f5;--text-warn:#e53e3e;--bg-success-light:#f0fdf4;--text-success:#2a7ced}.timeline-container .timeline-row.hidden{opacity:0;transform:translateY(30px)}.timeline-container .timeline-row .node-dot{opacity:0;will-change:transform, opacity;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s;transform:scale(0)}.timeline-container .timeline-row.visible .node-dot{opacity:1;transform:scale(1)}.timeline-container .timeline-row .time-badge{opacity:0;will-change:transform, opacity;transition:transform .5s cubic-bezier(.25,1,.5,1) .1s,opacity .5s .1s;transform:translate(-15px)}.timeline-container .timeline-row.visible .time-badge{opacity:1;transform:translate(0)}.timeline-container .timeline-row .timeline-card{opacity:0;will-change:transform, opacity;transition:transform .7s cubic-bezier(.215,.61,.355,1) .15s,opacity .7s .15s,box-shadow .3s .15s;transform:translateY(40px)scale(.97)}.timeline-container .timeline-row.visible .timeline-card{opacity:1;transform:translateY(0)scale(1)}.timeline-container .timeline-row.visible .timeline-card:hover{transform:translateY(-4px)scale(1.005);box-shadow:0 12px 30px #0000001f}.timeline-container{color:var(--text-main);box-sizing:border-box;max-width:1200px;margin:0 auto;padding:40px 20px;font-family:Poppins,sans-serif}.timeline-container .timeline-header{text-align:center;margin-bottom:60px}.timeline-container .timeline-header .badge-container{justify-content:center;margin-bottom:16px;display:flex}.timeline-container .timeline-header .badge{color:var(--primary-color);letter-spacing:0;background-color:#edf4ff;border-radius:20px;align-items:center;gap:8px;padding:6px 16px;font-size:14px;font-weight:600;display:inline-flex}.timeline-container .status-dot{background-color:#10c45d;border-radius:50%;width:8px;height:8px;animation:2s infinite pulse-green;display:inline-block;position:relative}@keyframes pulse-green{0%{box-shadow:0 0 #10c45db3}70%{box-shadow:0 0 0 6px #10c45d00}to{box-shadow:0 0 #10c45d00}}.timeline-container .timeline-header h1{margin:0 0 12px;font-size:32px;font-weight:600}.timeline-container .timeline-header p{color:#64748b;margin:0;font-size:15px}.timeline-container .timeline-wrapper{padding-left:100px;position:relative}.timeline-container .timeline-line{background-color:#bee3f8;width:2px;position:absolute;top:0;bottom:0;left:40px}.timeline-container .cards-stack{flex-direction:column;gap:30px;display:flex}.timeline-container .timeline-row{align-items:flex-start;width:100%;display:flex;position:relative}.timeline-container .time-node-container{z-index:10;flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute;top:16px;left:-60px;transform:translate(-50%)}.timeline-container .time-badge{background-color:var(--primary-color);color:#fff;white-space:nowrap;border-radius:6px;margin:0;padding:5px 12px;font-size:11px;font-weight:600}.timeline-container .node-dot{border:2px solid var(--primary-color);background-color:#fff;border-radius:50%;width:12px;height:12px;margin:0;box-shadow:0 0 0 4px #fff}.timeline-container .timeline-card{border:1px solid var(--border-light);box-sizing:border-box;background:#fff;border-radius:12px;width:100%;padding:32px;box-shadow:0 4px 20px #00000005}.timeline-container .role-tag{background-color:var(--primary-color);color:#fff;border-radius:20px;margin-bottom:14px;padding:4px 12px;font-size:11px;font-weight:500;display:inline-block}.timeline-container .card-title{margin:0 0 12px;font-size:20px;font-weight:600}.timeline-container .card-description{color:var(--text-main);margin:0 0 20px;font-size:14px;line-height:1.6}.timeline-container .section-label{color:#64748b;letter-spacing:.5px;margin-bottom:12px;font-size:11px;font-weight:600;display:block}.timeline-container .points-list{margin:0 0 28px;padding:0;list-style:none}.timeline-container .points-list li{color:var(--text-main);margin-bottom:8px;padding-left:20px;font-size:14px;position:relative}.timeline-container .points-list li:before{content:"•";color:var(--primary-color);font-size:24px;position:absolute;top:-8px;left:0}.timeline-container .desktop-tabs-container{border:1px solid var(--border-light);border-radius:8px;display:block;overflow:hidden}.timeline-container .tab-header-row{border-bottom:1px solid var(--border-light);display:flex}.timeline-container .tab-title{text-align:center;cursor:pointer;border:none;flex:1;padding:12px;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;transition:all .2s;box-shadow:none!important;-webkit-tap-highlight-color:transparent!important;outline:0!important}.timeline-container .tab-inactive{color:#64748b;background-color:#fafafa}.timeline-container .tab-header-row button:first-child.tab-inactive:hover{background-color:var(--bg-warn-light);color:var(--text-warn)}.timeline-container .tab-header-row button:last-child.tab-inactive:hover{color:var(--primary-color);background-color:#edf4ff}.timeline-container .tab-active-without{background-color:var(--bg-warn-light);color:var(--text-warn)}.timeline-container .tab-header-row button:first-child.tab-active-without{border-right:1px solid var(--border-light)!important}.timeline-container .tab-active-with{color:var(--primary-color);background-color:#edf4ff;border-left:1px solid var(--border-light)!important}.timeline-container .tab-content{background-color:#fff;padding:16px}.timeline-container .mobile-stack-container{flex-direction:column;gap:16px;display:none}.timeline-container .mobile-scenario-card{box-sizing:border-box;border-radius:8px;padding:16px}.timeline-container .mobile-scenario-card.status-without{border:1px solid var(--text-warn);background-color:var(--bg-warn-light)}.timeline-container .mobile-scenario-card.status-with{border:1px solid var(--primary-color);background-color:#edf4ff}.timeline-container .mobile-scenario-header{margin-bottom:8px;font-size:13px;font-weight:600}.timeline-container .mobile-scenario-card.status-without .mobile-scenario-header{color:var(--text-warn)}.timeline-container .mobile-scenario-card.status-with .mobile-scenario-header{color:var(--primary-color)}.timeline-container .warning-box,.timeline-container .success-box{align-items:center;gap:10px;font-size:13px;font-weight:500;line-height:1.5;display:flex}.timeline-container .warning-box{color:var(--text-warn)}.timeline-container .success-box{color:var(--text-success)}.timeline-container .warning-icon,.timeline-container .success-icon{flex-shrink:0;width:16px;height:16px}.timeline-container .footer-actions{flex-direction:column;align-items:center;gap:24px;margin-top:40px;display:flex}.timeline-container .see-more-btn{border:1px solid var(--border-light);color:var(--text-main);cursor:pointer;background:#fff;border-radius:24px;align-items:center;gap:8px;padding:10px 24px;font-family:Poppins,sans-serif;font-size:13px;font-weight:600;display:flex;box-shadow:0 2px 8px #0000000d}.timeline-container .see-more-btn:hover{background:#f7fafc}.timeline-container .arrow-icon{width:14px;height:14px;transition:transform .3s}.timeline-container .arrow-icon.rotate{transform:rotate(180deg)}.timeline-container .sound-familiar{color:var(--text-main);font-weight:600}.timeline-container .footer-pitch{color:var(--text-main);margin:0;font-size:15px;font-weight:400}@media (max-width:768px){.timeline-container .timeline-wrapper{padding-left:80px}.timeline-container .timeline-line{left:30px}.timeline-container .time-node-container{top:12px;left:30px}.timeline-container .desktop-tabs-container{display:none}.timeline-container .mobile-stack-container{display:flex}}@media (max-width:480px){.timeline-container .timeline-header h1{padding:0 10px;font-size:20px}.timeline-container .timeline-wrapper{padding-left:55px}.timeline-container .timeline-line{display:block;left:20px}.timeline-container .time-node-container{top:16px;left:-34px}.timeline-container .time-badge{padding:4px 8px;font-size:9px}.timeline-container .node-dot{width:10px;height:10px;box-shadow:0 0 0 3px #fff}.timeline-container .timeline-card{padding:18px}.timeline-container .warning-box,.timeline-container .success-box{color:var(--text-main)}.timeline-container .warning-icon{color:var(--text-warn)}.timeline-container .success-icon{color:var(--text-success)}}