.navbar{position:fixed;top:0;left:0;right:0;background:#1a1a1af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);z-index:1000;padding:1rem 0;transition:transform .2s ease}.navbar.visible{transform:translateY(0)}.navbar.hidden{transform:translateY(-100%)}.nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:1.8rem;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(120deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-menu{display:flex;gap:2rem}.nav-link{color:#ccc;text-decoration:none;font-weight:500;padding:.5rem 1rem;border-radius:8px;transition:all .3s ease;position:relative}.nav-link:hover,.nav-link.active{color:gold;background:#ffd7001a}@media (max-width: 768px){.nav-container{padding:0 1rem}.nav-logo{font-size:1.5rem}.nav-menu{gap:1rem}.nav-link{padding:.4rem .8rem;font-size:.9rem}}.home{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#0d1117);color:#e6e6e6}.function-selector{background:linear-gradient(135deg,#161b22,#0d1117);padding:3rem 0 2rem;border-bottom:1px solid #30363d}.container{max-width:1400px;margin:0 auto;padding:0 2rem}.main-title{text-align:center;font-size:3.5rem;font-weight:700;color:#fff;margin-bottom:1rem;background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-subtitle{text-align:center;font-size:1.3rem;color:#8b949e;margin-bottom:3rem;font-weight:300}.function-tabs{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.function-tab{background:linear-gradient(135deg,#21262d,#161b22);border:1px solid #30363d;color:#8b949e;padding:1rem 1.5rem;border-radius:12px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:120px;position:relative;overflow:hidden}.function-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(74,222,128,.1),transparent);transition:left .5s ease}.function-tab:hover:before{left:100%}.function-tab:hover{border-color:#4ade80;color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px #4ade8033}.function-tab.active{background:linear-gradient(135deg,#059669,#047857);border-color:#4ade80;color:#fff;box-shadow:0 8px 25px #4ade804d}.tab-icon{font-size:1.8rem}.tab-name{font-size:.9rem;font-weight:500}.step-showcase{padding:3rem 0;background:#0d1117}.watch-description-container{max-width:1400px;margin:0 auto;padding:0 2rem;margin-bottom:4rem}.step-container{display:flex;align-items:flex-start;gap:3rem}.watch-section{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem;position:relative;height:fit-content}.watch-sticky-container{position:sticky;top:50vh;transform:translateY(-50%);z-index:10;width:100%;display:flex;justify-content:center}.watch-device{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;position:relative;width:100%;height:100%}.watch-band{width:240px;height:80px;background:linear-gradient(135deg,#1a1a1a,#2c2c2c,#1a1a1a);border-radius:30px;position:relative;box-shadow:0 6px 12px #0009,inset 0 1px 3px #ffffff1a,inset 0 -1px 3px #0000004d;z-index:1;overflow:hidden}.top-band{border-bottom-left-radius:12px;border-bottom-right-radius:12px;margin-bottom:-12px;background:linear-gradient(180deg,#1a1a1a,#2c2c2c,#1a1a1a)}.bottom-band{border-top-left-radius:12px;border-top-right-radius:12px;margin-top:-12px;background:linear-gradient(0deg,#1a1a1a,#2c2c2c,#1a1a1a)}.watch-band:before{content:"";position:absolute;top:7px;left:18px;right:18px;height:36px;background:linear-gradient(135deg,#0d0d0d,#1a1a1a,#0d0d0d);border-radius:18px;box-shadow:inset 0 2px 4px #0006,inset 0 -1px 2px #ffffff0d}.watch-band:after{content:"";position:absolute;top:50%;left:25px;right:25px;height:1px;background:linear-gradient(90deg,transparent,rgba(74,222,128,.3),transparent);transform:translateY(-50%)}.watch-case{width:320px;height:400px;background:linear-gradient(145deg,#1c2128,#0d1117);border-radius:60px;position:relative;box-shadow:0 25px 50px #0009,inset 0 2px 4px #4ade801a,inset 0 0 20px #0000004d;border:3px solid #30363d;display:flex;align-items:center;justify-content:center;z-index:2;margin:0 auto}.digital-crown{position:absolute;right:-5px;top:30%;transform:translateY(-50%);width:12px;height:35px;background:linear-gradient(90deg,#ff6b35,#f7931e,#ff6b35);border-radius:4px;box-shadow:0 3px 6px #0006,inset 1px 0 2px #ffffff4d,inset -1px 0 2px #0003;border:1px solid #d35400;cursor:pointer;transition:all .3s ease}.digital-crown:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:12px;background:linear-gradient(90deg,#e67e22,#d35400,#e67e22);border-radius:2px;box-shadow:inset 1px 0 1px #0003}.digital-crown:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:6px;background:#c0392b;border-radius:1px}.digital-crown:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 4px 8px #00000080,inset 0 1px 2px #fff6,0 0 10px #ff6b354d}.side-button{position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:6px;height:0px;background:linear-gradient(90deg,#ff6b35,#f7931e,#ff6b35);border-radius:3px;box-shadow:0 2px 4px #0000004d,inset 1px 0 1px #fff3,inset -1px 0 1px #0003;border:1px solid #d35400;cursor:pointer;transition:all .3s ease}.side-button:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 3px 6px #0006,inset 0 1px 1px #ffffff4d,0 0 8px #ff6b3533}.watch-screen{width:calc(100% - 20px);height:calc(100% - 20px);border-radius:40px;background:linear-gradient(135deg,#000,#0a0a0a);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;overflow:visible;position:relative;border:2px solid #30363d;box-shadow:inset 0 2px 10px #000c,inset 0 0 20px #0006}.watch-screen:hover{box-shadow:0 0 30px #4ade804d,inset 0 0 20px #4ade801a}.step-image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:visible}.function-title-on-watch{text-align:center;margin-bottom:1rem}.function-icon-large{font-size:3rem;color:#4ade80;display:block;margin-bottom:.5rem}.function-name-large{font-size:1.2rem;font-weight:600;color:#fff;display:block}.step-info-on-watch{text-align:center;background:#4ade801a;padding:1rem;border-radius:12px;border:1px solid rgba(74,222,128,.3);width:100%}.step-number{font-size:.9rem;color:#4ade80;font-weight:600;margin-bottom:.3rem}.step-title-small{font-size:1rem;color:#fff;font-weight:500;line-height:1.3}.placeholder-icon{font-size:2.5rem;color:#58a6ff}.placeholder-text{font-size:.8rem;font-weight:500;text-align:center;line-height:1.4;color:#e6e6e6}.image-note{font-size:.7rem;color:#8b949e;background:#4ade801a;padding:.3rem .6rem;border-radius:12px;border:1px solid rgba(74,222,128,.2)}.voice-assistant-image{width:100%;height:100%;object-fit:cover;border-radius:35px;transition:all .3s ease;opacity:1;display:block;z-index:10}.image-loading-placeholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:1rem;background:#0000004d;border-radius:16px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(74,222,128,.3);border-top:3px solid #4ade80;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{color:#4ade80;font-size:.9rem;font-weight:500;margin-bottom:1rem;text-align:center}.step-controls{display:flex;flex-direction:row;align-items:center;gap:1rem;justify-content:center}.control-btn{background:linear-gradient(135deg,#059669,#047857);color:#fff;border:none;width:45px;height:45px;border-radius:50%;cursor:pointer;font-size:1.2rem;transition:all .3s ease;box-shadow:0 4px 15px #4ade804d}.control-btn:hover{background:linear-gradient(135deg,#047857,#065f46);transform:scale(1.1);box-shadow:0 6px 20px #4ade8066}.step-indicator{background:linear-gradient(135deg,#21262d,#161b22);padding:.5rem 1rem;border-radius:20px;color:#8b949e;font-size:.9rem;border:1px solid #30363d}.description-section{flex:2;padding:2rem}.step-info{max-width:650px}.function-brief{margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,#161b22,#21262d);border-radius:16px;border:1px solid #30363d}.function-brief h2{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:.8rem}.function-desc{font-size:1rem;color:#8b949e;line-height:1.6;margin:0}.current-step-detail{background:linear-gradient(135deg,#0d1117,#161b22);padding:2rem;border-radius:16px;border:1px solid #30363d;margin-bottom:2rem;position:relative;overflow:hidden}.current-step-detail:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#4ade80,#22d3ee)}.step-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.step-header h3{font-size:1.4rem;font-weight:600;color:#fff;margin:0;background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.step-indicator-small{background:#4ade8033;color:#4ade80;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:600}.step-description{font-size:1rem;color:#e6e6e6;line-height:1.7;margin-bottom:1.5rem}.step-features h4{font-size:1rem;color:#4ade80;margin-bottom:1rem;font-weight:500}.step-features ul{list-style:none;padding:0}.step-features li{color:#e6e6e6;font-size:.9rem;border-bottom:1px solid #30363d;position:relative;padding:.6rem 0 .6rem 1.5rem;line-height:1.5}.step-features li:last-child{border-bottom:none}.step-features li:before{content:"•";position:absolute;left:0;color:#4ade80;font-weight:700}.full-process{background:linear-gradient(135deg,#161b22,#0d1117);padding:2rem;border-radius:16px;border:1px solid #30363d;max-height:400px;overflow-y:auto}.full-process::-webkit-scrollbar{width:8px}.full-process::-webkit-scrollbar-track{background:#30363d4d;border-radius:4px}.full-process::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#4ade80,#22d3ee);border-radius:4px;transition:all .3s ease}.full-process::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#22d3ee,#a7f3d0);box-shadow:0 0 8px #4ade8066}.full-process h4{font-size:1.2rem;color:#fff;margin-bottom:1.5rem;font-weight:600}.process-timeline{position:relative}.process-timeline:before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#30363d,#4ade80,#30363d)}.timeline-step{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;cursor:pointer;transition:all .3s ease;position:relative}.timeline-step:last-child{margin-bottom:0}.timeline-step:hover{transform:translate(5px)}.timeline-marker{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#30363d,#21262d);border:2px solid #30363d;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;position:relative}.timeline-step.active .timeline-marker{background:linear-gradient(135deg,#059669,#047857);border-color:#4ade80;box-shadow:0 0 10px #4ade8080}.timeline-step.completed .timeline-marker{background:linear-gradient(135deg,#238636,#2da44e);border-color:#2da44e}.step-num{font-size:.8rem;font-weight:600;color:#fff}.timeline-content{flex:1;padding:.5rem 0}.timeline-content h5{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .5rem}.timeline-step.active .timeline-content h5{color:#4ade80}.timeline-desc{font-size:.9rem;color:#8b949e;line-height:1.5;margin:0}.timeline-step.active .timeline-desc{color:#e6e6e6}.watch-showcase-header{text-align:center;margin-bottom:2rem}.watch-showcase-title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:.5rem;background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.watch-showcase-subtitle{font-size:1.1rem;color:#94a3b8;font-weight:300;margin:0}.phone-showcase{padding:4rem 0;background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.phone-container{max-width:1400px;margin:0 auto;padding:3rem;background:linear-gradient(135deg,#161b22,#0d1117);border-radius:20px;border:1px solid #30363d;box-shadow:0 15px 40px #0006;display:flex;flex-direction:column;gap:2rem;min-height:600px}.phone-function-bar{flex:1;background:linear-gradient(135deg,#21262d,#161b22);border-radius:16px;border:1px solid #30363d;padding:1.5rem;display:flex;align-items:center;justify-content:center}.phone-function-tabs{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.phone-function-tab{background:linear-gradient(135deg,#30363d,#21262d);border:1px solid #30363d;border-radius:12px;padding:1rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;transition:all .3s ease;color:#8b949e;width:120px;flex-shrink:0}.phone-function-tab:hover{background:linear-gradient(135deg,#059669,#047857);border-color:#4ade80;color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px #4ade804d}.phone-function-tab.active{background:linear-gradient(135deg,#059669,#047857);border-color:#4ade80;color:#fff;box-shadow:0 5px 15px #4ade8066}.phone-tab-icon{font-size:1.5rem}.phone-tab-name{font-size:.9rem;font-weight:500;text-align:center;word-break:break-word;line-height:1.2;width:100%}.phone-main-content{flex:9;display:flex;gap:3rem;min-height:0}.phone-left-section{flex:1;display:flex;flex-direction:column;gap:0;background:linear-gradient(135deg,#21262d,#161b22);border-radius:16px;border:1px solid #30363d;overflow:hidden}.phone-title-section{flex:1;background:linear-gradient(135deg,#059669,#047857);padding:2rem;display:flex;align-items:center;justify-content:center}.phone-title-content{text-align:center;color:#fff}.phone-title-content h3{font-size:2.2rem;font-weight:700;margin-bottom:.8rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.phone-title-content p{font-size:1.2rem;color:#ffffffe6;line-height:1.5;margin:0}.phone-watch-section{flex:9;padding:2rem;display:flex;align-items:center;justify-content:center;background:#0d1117}.phone-watch-container{display:flex;flex-direction:column;align-items:center;gap:2rem}.phone-right-section{flex:2;background:linear-gradient(135deg,#21262d,#161b22);border-radius:16px;border:1px solid #30363d;padding:2rem;overflow-y:auto}.phone-step-info{height:100%;display:flex;flex-direction:column;gap:2rem}@media (max-width: 1200px){.step-container{flex-direction:column;gap:2rem}.watch-section,.description-section{flex:none;width:100%}.watch-section{align-items:center}.watch-sticky-container{position:relative;top:auto;transform:none}.step-info{max-width:100%}.phone-container{gap:1.5rem;padding:2rem;min-height:auto}.phone-main-content{flex-direction:column;gap:2rem}.phone-left-section{order:1}.phone-right-section{order:2;flex:none}.phone-function-tabs{gap:.6rem}.phone-function-tab{width:100px;padding:.8rem 1rem}.phone-title-content h3{font-size:1.8rem}.phone-title-content p{font-size:1rem}}@media (max-width: 768px){.main-title{font-size:2.5rem}.main-subtitle{font-size:1.1rem}.function-tabs{gap:.5rem}.function-tab{min-width:100px;padding:.8rem 1rem}.tab-icon{font-size:1.5rem}.tab-name{font-size:.8rem}.step-container{padding:0 1rem}.watch-case{width:240px;height:290px}.watch-band{width:220px;height:55px}.digital-crown{width:6px;height:20px;right:-10px}.digital-crown:before{width:3px;height:10px}.digital-crown:after{width:1px;height:5px}.side-button{width:5px;height:14px;right:-7px}.placeholder-icon{font-size:3rem}.placeholder-text{font-size:.9rem}.watch-sticky-container{position:relative;top:auto;transform:none}.function-header{padding:1.5rem}.function-header h2{font-size:1.8rem}.phone-showcase{padding:3rem 0}.phone-container,.phone-title-section{padding:1.5rem}.phone-title-content h3{font-size:1.6rem}.phone-title-content p{font-size:.9rem}.phone-watch-section,.phone-right-section{padding:1.5rem}.phone-function-bar{padding:1rem}.phone-function-tab{padding:.6rem .8rem}.phone-tab-icon{font-size:1.3rem}.phone-tab-name{font-size:.8rem}.current-step{padding:2rem}.current-step h3{font-size:1.4rem}.step-description{font-size:1rem}.progress-section{padding:1.5rem}.progress-steps{gap:.6rem}.progress-step{padding:.8rem}.step-title{font-size:.9rem}.voice-assistant-image{max-width:200px;max-height:220px}.voice-step-overlay{min-width:160px;padding:.6rem 1rem}}@media (max-width: 480px){.container{padding:0 1rem}.function-selector{padding:2rem 0 1.5rem}.main-title{font-size:2rem}.watch-case{width:220px;height:260px}.watch-band{width:200px;height:50px}.watch-sticky-container{position:relative;top:auto;transform:none}.digital-crown{width:5px;height:18px;right:-9px}.digital-crown:before{width:2px;height:9px}.digital-crown:after{width:1px;height:4px}.side-button{width:4px;height:12px;right:-6px}.placeholder-icon{font-size:2rem}.placeholder-text{font-size:.7rem}.step-image-placeholder{padding:1rem;gap:.5rem}.voice-assistant-image{max-width:160px;max-height:180px}.voice-step-overlay{min-width:140px;padding:.5rem .8rem;bottom:5px}.voice-step-overlay .step-number{font-size:.7rem}.voice-step-overlay .step-title-small{font-size:.8rem}.phone-showcase{padding:2rem 0}.phone-container{padding:1rem;gap:1.5rem}.phone-title-section{padding:1rem}.phone-title-content h3{font-size:1.4rem}.phone-title-content p{font-size:.8rem}.phone-watch-section,.phone-right-section{padding:1rem}.phone-function-bar{padding:.8rem}.phone-function-tabs{gap:.5rem}.phone-function-tab{padding:.5rem .6rem;width:80px}.phone-tab-icon{font-size:1.2rem}.phone-tab-name{font-size:.7rem}.function-header h2{font-size:1.5rem;flex-direction:column;gap:.5rem}.function-icon{font-size:2rem}}.gradient-divider{height:4px;width:100%;background:linear-gradient(90deg,transparent 0%,#4ade80 10%,#22d3ee 30%,#a7f3d0 50%,#22d3ee 70%,#4ade80 90%,transparent 100%)}.mobile-app-showcase{padding:4rem 0;background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.mobile-app-container{max-width:1400px;margin:0 auto;padding:3rem;background:linear-gradient(135deg,#161b22,#0d1117);border-radius:20px;border:1px solid #30363d;box-shadow:0 15px 40px #0006;display:flex;gap:4rem;align-items:center;min-height:500px}.mobile-phone-section{flex:1;display:flex;justify-content:center;align-items:center}.phone-frame{width:360px;height:500px;background:linear-gradient(145deg,#1c2128,#0d1117);border-radius:35px;padding:20px;box-shadow:0 20px 40px #0009,inset 0 2px 4px #4ade801a;border:3px solid #30363d;position:relative}.phone-frame:before{content:"";position:absolute;top:15px;left:50%;transform:translate(-50%);width:60px;height:6px;background:#30363d;border-radius:3px}.phone-screen{width:100%;height:100%;background:linear-gradient(135deg,#0d1117,#161b22);border-radius:25px;display:flex;align-items:center;justify-content:center;border:1px solid #30363d;box-shadow:inset 0 0 20px #4ade801a}.metro-app-interface{width:100%;height:100%;background:#000;color:#fff;padding:.5rem 1rem 1rem;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.status-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;margin-top:0;padding-top:0;padding-left:.5rem;padding-right:.5rem;font-size:.9rem}.time-info{display:flex;align-items:center;gap:.5rem}.metro-icon{font-size:1rem}.time{font-weight:600}.settings-btn{background:#fff3;padding:.3rem .8rem;border-radius:12px;font-size:.8rem}.route-info{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.station-display{display:flex;align-items:center;justify-content:space-around;width:100%;margin-bottom:1rem;padding:0 .5rem}.current-station,.next-station{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;min-width:0;max-width:110px;justify-content:flex-start}.station-label{font-size:.68rem;font-weight:500;color:#fff;text-align:center;line-height:1.1;width:100%;max-width:85px;min-height:3rem;padding:.2rem;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-break:keep-all;overflow-wrap:break-word;box-sizing:border-box;justify-content:center;align-items:center}.line-indicator{display:flex;flex-direction:column;align-items:center;padding:.5rem;border-radius:8px;border:2px solid #ff0000;background:#ff00001a;min-width:40px}.line-code{font-size:.7rem;font-weight:600;color:red}.station-number{font-size:1.1rem;font-weight:700;color:#fff}.route-progress{display:flex;align-items:center;gap:.2rem;margin:0 .5rem;flex-shrink:0}.progress-dot{width:6px;height:6px;border-radius:50%;background:#f80}.progress-line{width:15px;height:2px;background:#f80}.travel-info{background:#ffffff1a;padding:.8rem 1rem;border-radius:20px;width:calc(100% - 1rem);margin:0 .5rem;text-align:center}.travel-text{font-size:.8rem;color:#fff}.next-station-btn{background:#007aff;color:#fff;border:none;padding:1rem 2rem;border-radius:25px;font-size:.9rem;font-weight:600;width:calc(100% - 1rem);margin:0 .5rem;cursor:pointer;transition:all .2s ease}.next-station-btn:hover{background:#0056cc;transform:scale(.98)}.mobile-intro-section{flex:2;padding:2rem 0}.intro-content h3{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:.8rem;background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-subtitle{font-size:1.2rem;color:#8b949e;margin-bottom:3rem;line-height:1.5}.feature-list{display:flex;flex-direction:column;gap:2rem}.feature-item{display:flex;align-items:flex-start;gap:1.5rem;padding:1.5rem;background:linear-gradient(135deg,#21262d,#161b22);border-radius:16px;border:1px solid #30363d;transition:all .3s ease}.feature-item:hover{border-color:#4ade80;box-shadow:0 5px 20px #4ade8033;transform:translateY(-2px)}.feature-icon{font-size:2rem;flex-shrink:0}.feature-text h4{font-size:1.3rem;font-weight:600;color:#fff;margin-bottom:.5rem}.feature-text p{font-size:1rem;color:#8b949e;line-height:1.5;margin:0}@media (max-width: 1200px){.mobile-app-container{flex-direction:column;gap:3rem;padding:2rem;min-height:auto}.mobile-phone-section{order:1}.mobile-intro-section{order:2;padding:0}.intro-content h3{font-size:2rem}.phone-frame{width:320px;height:420px}}@media (max-width: 768px){.mobile-app-showcase{padding:3rem 0}.mobile-app-container{padding:1.5rem;gap:2rem}.gradient-divider{margin:3rem 0;height:3px}.intro-content h3{font-size:1.8rem}.intro-subtitle{font-size:1rem;margin-bottom:2rem}.phone-frame{width:280px;height:360px;padding:15px}.phone-frame:before{width:50px;height:5px}.feature-item{padding:1rem;gap:1rem}.feature-text h4{font-size:1.1rem}.feature-text p{font-size:.9rem}}@media (max-width: 480px){.mobile-app-showcase{padding:2rem 0}.mobile-app-container{padding:1rem;gap:1.5rem}.gradient-divider{margin:2rem 0}.intro-content h3{font-size:1.5rem}.phone-frame{width:260px;height:320px;padding:12px}.metro-app-interface{padding:.3rem .8rem .8rem}.status-bar{font-size:.8rem;margin-bottom:1.2rem;margin-top:0;padding-left:.4rem;padding-right:.4rem}.station-label{font-size:.65rem;max-width:75px;min-height:2.8rem;-webkit-line-clamp:3;line-clamp:3}.line-indicator{padding:.4rem;min-width:35px}.line-code{font-size:.6rem}.station-number{font-size:1rem}.travel-text{font-size:.7rem}.next-station-btn{font-size:.8rem;padding:.8rem 1.5rem;width:calc(100% - .8rem);margin:0 .4rem}.feature-item{flex-direction:column;text-align:center;padding:1rem}.feature-icon{font-size:1.5rem}}.mobile-showcase-redesigned{background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#0d1117);padding:6rem 0;position:relative;overflow:hidden}.mobile-showcase-redesigned:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(59,130,246,.1) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(16,185,129,.1) 0%,transparent 50%);pointer-events:none}.showcase-container{max-width:1400px;margin:0 auto;padding:2rem;position:relative;z-index:1}.showcase-header{text-align:center;margin-bottom:3rem}.showcase-title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:.5rem;background:linear-gradient(135deg,#3b82f6,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.showcase-subtitle{font-size:1.1rem;color:#94a3b8;font-weight:300;margin:0}.showcase-content{display:grid;grid-template-columns:280px 1fr 320px;gap:2rem;align-items:start}.function-navigation{background:#1e293b99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(59,130,246,.2);border-radius:16px;padding:1.5rem}.nav-title{font-size:1.2rem;font-weight:600;color:#f1f5f9;margin-bottom:1rem;text-align:center}.function-categories{display:flex;flex-direction:column;gap:1.5rem}.category-section{border-bottom:1px solid rgba(71,85,105,.3);padding-bottom:1rem}.category-section:last-child{border-bottom:none;padding-bottom:0}.category-title{font-size:1rem;font-weight:700;color:#e2e8f0;margin-bottom:.75rem;text-align:left;background:linear-gradient(135deg,#3b82f6,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.function-cards{display:flex;flex-direction:column;gap:.75rem}.function-card{background:#33415566;border:1px solid rgba(71,85,105,.5);border-radius:12px;padding:1rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.function-card:hover{background:#3b82f61a;border-color:#3b82f64d;transform:translateY(-2px)}.function-card.active{background:linear-gradient(135deg,#3b82f633,#10b98133);border-color:#3b82f680;box-shadow:0 4px 20px #3b82f633}.card-icon{font-size:1.5rem;margin-bottom:.5rem}.card-title{font-size:1rem;font-weight:600;color:#f1f5f9;margin-bottom:.25rem}.card-description{font-size:.85rem;color:#94a3b8;line-height:1.4}.card-indicator{position:absolute;top:1rem;right:1rem}.active-dot{width:8px;height:8px;background:#10b981;border-radius:50%;display:block;box-shadow:0 0 8px #10b98180}.phone-display{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 0}.iphone-frame{width:540px;height:860px;background:linear-gradient(135deg,#1c1c1e,#2c2c2e);border-radius:48px;padding:8px;box-shadow:0 25px 50px #0006,0 0 0 2px #ffffff1a,inset 0 2px 4px #ffffff1a;position:relative;overflow:hidden}.iphone-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.05) 0%,transparent 50%);border-radius:48px;pointer-events:none}.iphone-notch{position:absolute;top:0;left:50%;transform:translate(-50%);width:120px;height:28px;background:#000;border-radius:0 0 16px 16px;z-index:10}.iphone-notch:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:50px;height:4px;background:#333;border-radius:2px}.iphone-screen{width:100%;height:100%;background:#000;border-radius:40px;position:relative;overflow:hidden}.iphone-status-bar{display:flex;justify-content:space-between;align-items:center;padding:2.5rem 1.5rem .75rem;font-size:.85rem;font-weight:600;color:#fff;background:transparent;position:relative;z-index:5}.status-time{font-weight:700}.status-indicators{display:flex;align-items:center;gap:.25rem;font-size:.75rem}.app-content-area{width:100%;height:calc(100% - 120px);position:relative;overflow:hidden}.app-screenshot{width:100%;height:100%;object-fit:cover;display:block}.app-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;text-align:center;background:linear-gradient(135deg,#1f2937,#111827)}.app-placeholder .placeholder-icon{font-size:4rem;margin-bottom:1.5rem}.app-placeholder .placeholder-title{font-size:1.5rem;font-weight:600;color:#f9fafb;margin:0}.iphone-home-indicator{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:134px;height:5px;background:#ffffff4d;border-radius:3px}.external-controls-bottom{width:100%;max-width:540px}.navigation-controls{display:flex;align-items:center;justify-content:space-between;background:#1e293b66;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(59,130,246,.2);border-radius:12px;padding:1.5rem}.nav-button{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:10px;padding:.75rem 1rem;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:50px;width:50px;height:50px;display:flex;align-items:center;justify-content:center}.nav-button:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:translateY(-2px);box-shadow:0 8px 25px #3b82f64d}.nav-button:disabled{background:#4b556380;color:#9ca3afb3;cursor:not-allowed;transform:none;box-shadow:none}.step-progress{display:flex;flex-direction:column;align-items:center;gap:.75rem}.progress-dots{display:flex;gap:.75rem;align-items:center}.progress-dot{width:12px;height:12px;border-radius:50%;background:#9ca3af66;cursor:pointer;transition:all .3s ease;position:relative}.progress-dot.completed{background:#10b981}.progress-dot.active{background:#3b82f6;transform:scale(1.3);box-shadow:0 0 12px #3b82f699}.progress-dot:hover{transform:scale(1.1)}.step-counter-external{font-size:.9rem;color:#94a3b8;font-weight:600}.info-panel{background:#1e293b99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(59,130,246,.2);border-radius:16px;padding:1.5rem;height:fit-content}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.function-badge{display:flex;align-items:center;gap:.5rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:8px;padding:.5rem .75rem}.badge-icon{font-size:1rem}.badge-text{font-size:.9rem;font-weight:600;color:#f1f5f9}.step-badge{background:#10b9811a;border:1px solid rgba(16,185,129,.3);color:#10b981;border-radius:6px;padding:.25rem .5rem;font-size:.8rem;font-weight:600}.step-details{margin-bottom:2rem}.step-title{font-size:1.3rem;font-weight:700;color:#f1f5f9;margin-bottom:.75rem}.step-description{font-size:.95rem;color:#cbd5e1;line-height:1.6;margin-bottom:1.5rem}.features-section{background:#3341554d;border-radius:8px;padding:1rem}.features-title{font-size:1rem;font-weight:600;color:#f1f5f9;margin-bottom:.75rem}.features-list{list-style:none;padding:0;margin:0}.feature-item{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.5rem}.feature-bullet{color:#10b981;font-weight:700;margin-top:.1rem}.feature-text{color:#e2e8f0;font-size:.9rem;line-height:1.4}.progress-section{border-top:1px solid rgba(71,85,105,.5);padding-top:1.5rem}.progress-title{font-size:1rem;font-weight:600;color:#f1f5f9;margin-bottom:1rem}.progress-timeline{display:flex;flex-direction:column;gap:.75rem}.timeline-item{display:flex;align-items:center;gap:.75rem;cursor:pointer;transition:all .2s ease;padding:.5rem;border-radius:6px}.timeline-item:hover{background:#3b82f61a}.timeline-item.completed .timeline-marker{background:#10b981;color:#fff}.timeline-item.current .timeline-marker{background:#3b82f6;color:#fff;box-shadow:0 0 8px #3b82f680}.timeline-item.pending .timeline-marker{background:#9ca3af4d;color:#9ca3af}.timeline-marker{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;transition:all .2s ease}.timeline-content{flex:1}.timeline-title{font-size:.9rem;color:#e2e8f0;font-weight:500}@media (max-width: 1200px){.showcase-content{grid-template-columns:1fr;gap:2rem}.function-navigation{order:1}.phone-display{order:2}.info-panel{order:3;padding:1rem;overflow:hidden;word-wrap:break-word;box-sizing:border-box}.function-categories{gap:1rem}.category-section{border-bottom:1px solid rgba(71,85,105,.2);padding-bottom:.75rem}.function-cards{flex-direction:row;flex-wrap:wrap;gap:.5rem}.function-card{flex:1;min-width:180px}.card-title{font-size:.9rem}.card-description{font-size:.8rem}}@media (max-width: 768px){.mobile-showcase-redesigned{padding:4rem 0}.showcase-container{padding:0 .5rem;max-width:100%}.showcase-content{grid-template-columns:1fr;gap:1.5rem}.info-panel{margin:0 auto;max-width:100%;min-width:0}.iphone-frame{width:400px;height:720px}.external-controls-bottom{max-width:400px}.navigation-controls{flex-direction:row;justify-content:space-between;padding:1rem;gap:.5rem}.nav-button{min-width:45px;width:45px;height:45px;font-size:1.1rem}.function-cards{flex-direction:column}.features-section{padding:.75rem;margin-top:1rem}.features-title{font-size:.9rem;margin-bottom:.5rem}.feature-item{gap:.4rem;margin-bottom:.4rem;font-size:.85rem;line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:normal}.showcase-title{font-size:2rem}.watch-showcase-header{margin-bottom:1.5rem}.watch-showcase-title{font-size:2rem}.watch-showcase-subtitle,.showcase-subtitle{font-size:1rem}}@media (max-width: 480px){.info-panel{padding:.75rem;margin:0;border-radius:12px}.features-section{padding:.5rem;margin-top:.75rem}.features-title{font-size:.85rem;margin-bottom:.4rem}.feature-item{gap:.3rem;margin-bottom:.3rem;font-size:.8rem;line-height:1.3;flex-direction:column;align-items:flex-start}.feature-bullet{margin-bottom:.2rem}.showcase-container{padding:0 .25rem}}.team-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#fff;padding:40px 20px 0;display:flex;flex-direction:column;position:relative;overflow:hidden}.team-container:before,.team-container:after{content:"";position:fixed;width:110%;height:100vh;background-image:url(https://cdn.wming.space/background.jpg);background-size:cover;background-position:center;opacity:.15;pointer-events:none;z-index:0;filter:hue-rotate(45deg)}.team-container:before{left:0;top:0;transform:scaleX(-1)}.team-container:after{right:0;top:0}.team-content,.team-intro-section,.team-members-section,.contact-section{position:relative;z-index:1}.team-intro-section,.team-members-section{max-width:1000px;margin-left:auto;margin-right:auto}.team-intro-section{max-width:1200px;margin:0 auto 60px;padding:40px;background:#1a1a1ae6;border-radius:20px;box-shadow:0 10px 30px #0000004d;border:1px solid rgba(255,255,255,.1)}.team-intro-content{text-align:center}.team-intro-content h1{font-size:2.5rem;margin-bottom:30px;background:linear-gradient(120deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:0 20px}.team-description{font-size:1.2rem;line-height:1.8;color:#ccc;text-align:left;max-width:900px;margin:0 auto;padding:0 20px;white-space:pre-line}.divider{height:2px;background:linear-gradient(90deg,transparent,#FFD700,transparent);margin:40px 0}.team-members-section{max-width:1200px;margin:0 auto 60px}.team-members-section h2{text-align:center;font-size:2.5rem;margin-bottom:40px;background:linear-gradient(120deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;padding-bottom:15px}.team-members-section h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100px;height:3px;background:linear-gradient(90deg,gold,orange);border-radius:2px}.members-grid{display:flex;flex-direction:column;gap:30px;padding:20px;max-width:1200px;margin:0 auto}.member-card{display:flex;align-items:flex-start;background:#1a1a1ae6;border-radius:15px;overflow:hidden;transition:all .3s ease;box-shadow:0 5px 15px #0000004d;border:1px solid rgba(255,255,255,.1);padding:20px;gap:25px}.member-card:hover{transform:translate(10px);box-shadow:0 8px 25px #00000026}.member-image{width:180px;min-width:180px;height:180px;border-radius:15px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 3px 10px #0000001a}.member-image img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}.member-card:hover .member-image img{transform:scale(1.05)}.member-info{flex:1;display:flex;flex-direction:column;gap:15px;align-items:center}.member-info h3{font-size:2.2rem;color:#fff;margin:0;text-align:center}.member-grade{color:gold;font-size:1.2rem;text-align:center;margin:0}.member-intro{color:#ccc;line-height:1.8;font-size:1.3rem;white-space:pre-line;margin:10px auto 0;max-width:40em;text-align:left;align-self:flex-start;padding:0 20px}.contact-section{width:100vw;margin:30px 0 0;padding:40px 20px;background:linear-gradient(135deg,#0f3460,#1a1a2e);position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-bottom:0;min-height:20vh}.contact-section h2{text-align:center;font-size:2rem;margin-bottom:40px;color:#fff}.contact-info{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:1000px;margin:0 auto;padding:0 20px}.contact-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px;background:#ffffff1a;border-radius:15px;transition:all .3s ease;text-decoration:none}.contact-item:hover{transform:translateY(-5px);background:#fff3}.contact-item i{font-size:2rem;color:#fff;margin-bottom:15px;padding:15px;background:#ffffff26;border-radius:50%}.contact-item p{margin:0;color:#fff}.contact-item p:first-of-type{font-size:1.2rem;font-weight:500;margin-bottom:5px;opacity:.9}.contact-item p:last-of-type{font-size:1rem;opacity:.8}.team-content{flex:1;margin-bottom:60px}@media (max-width: 768px){.team-intro-content h1{font-size:2rem}.team-description{font-size:1.1rem}.members-grid{grid-template-columns:1fr}.contact-section{padding:20px}.member-card{flex-direction:column;align-items:center;padding:15px;gap:15px}.member-image{width:150px;height:150px}.member-info{width:100%}.member-info h3{font-size:1.8rem}.member-grade{font-size:.9rem}.member-intro{max-width:100%;padding:0 10px}.contact-info{grid-template-columns:1fr;gap:20px}.contact-item{padding:15px}.contact-item i,.contact-icon{font-size:1.8rem;padding:12px}.team-members-section h2{font-size:2rem}.team-members-section h2:after{width:80px}}.contact-icon{font-size:4rem;color:#fff;margin-bottom:15px;padding:15px;background:#ffffff26;border-radius:50%}.intro-image{max-width:500px;width:70%;margin:30px auto;text-align:center}.intro-image img{width:100%;max-height:600px;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 5px 15px #0000001a}@media (max-width: 768px){.intro-image{max-width:300px;margin:20px auto}.intro-image img{max-height:200px}}.App{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.main-content{padding-top:70px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}