:root{--primary:#3498db;--secondary:#2980b9;--accent:#e74c3c;--light:#f8f9fa;--dark:#1a1a2e;--text:#333;--text-light:#fff;--transition:all .3s ease;--shadow:0 4px 6px rgba(0,0,0,0.1);--border-radius:8px;--footer-height:80px}.dark-mode{--primary:#3498db;--secondary:#2c3e50;--light:#1a1a2e;--dark:#121212;--text:#f0f0f0;--text-light:#fff;--shadow:0 4px 6px rgba(0,0,0,0.3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Roboto',sans-serif;background-color:var(--light);color:var(--text);overflow-x:hidden;transition:var(--transition);min-height:100vh;display:flex;flex-direction:column;padding-bottom:var(--footer-height)}#app{flex:1;display:flex;flex-direction:column;position:relative}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}.btn{display:inline-block;padding:12px 24px;background:var(--primary);color:white;border:0;border-radius:var(--border-radius);font-weight:500;cursor:pointer;transition:var(--transition);text-decoration:none;box-shadow:var(--shadow)}.btn:hover{background:var(--secondary);transform:translateY(-2px)}.section{padding:80px 0}.section-title{text-align:center;margin-bottom:50px;font-size:2.5rem;color:var(--primary)}.top-center-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;width:100%}.zoom-effect{transition:transform .3s ease,filter .3s ease}.zoom-effect:hover{transform:scale(1.03);filter:brightness(1.05)}header{background:rgba(255,255,255,0.95);box-shadow:var(--shadow);position:fixed;top:0;left:0;width:100%;z-index:1000;transition:transform .3s ease,background .3s ease;transform:translateY(0)}.dark-mode header{background-image:linear-gradient(to right,#434343 0,black 100%)}.nav-hidden{transform:translateY(-100%)}.sticky{box-shadow:0 2px 10px rgba(0,0,0,0.1)}.header-container{display:flex;justify-content:space-between;align-items:center;padding:15px 20px}.logo{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:bold;color:var(--primary)}.logo img{height:40px}.desktop-nav{display:flex;gap:25px}.desktop-nav a{color:var(--text);text-decoration:none;font-weight:500;position:relative;padding:5px 0;transition:var(--transition);display:flex;align-items:center;gap:8px}.desktop-nav a.active,.desktop-nav a:hover{color:var(--primary)}.desktop-nav a.active::after,.desktop-nav a:hover::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--primary)}.desktop-nav a i{font-size:1.4rem;min-width:24px;text-align:center}.dropdown{position:relative}.dropdown-content{position:absolute;top:100%;left:0;background-image:linear-gradient(-225deg,#e3fdf5 0,#ffe6fa 100%);box-shadow:var(--shadow);border-radius:var(--border-radius);min-width:200px;padding:10px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--transition);z-index:10}.dark-mode .dropdown-content{background:var(--dark)}.dropdown:hover .dropdown-content{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-content a{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--text);text-decoration:none;transition:var(--transition)}.dropdown-content a i{font-size:1.2rem}.dropdown-content a:hover{background:rgba(52,152,219,0.1);color:var(--primary)}.mobile-menu-btn{display:none;font-size:1.5rem;cursor:pointer;color:var(--text);transition:transform .3s ease}.mobile-menu-btn.active{transform:rotate(90deg)}.mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1999;opacity:0;visibility:hidden;transition:var(--transition)}.mobile-menu-overlay.active{opacity:1;visibility:visible}.mobile-menu{position:fixed;top:0;left:-100%;width:80%;max-width:300px;height:100vh;background:white;box-shadow:2px 0 10px rgba(0,0,0,0.1);z-index:2000;transition:left .4s cubic-bezier(0.23,1,0.32,1)}.dark-mode .mobile-menu{background:var(--dark)}.mobile-menu.active{left:0;box-shadow:2px 0 20px rgba(0,0,0,0.2)}.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #eee}.dark-mode .mobile-menu-header{border-bottom:1px solid #333}.close-btn{font-size:1.5rem;cursor:pointer;color:var(--text);transition:transform .3s ease}.close-btn:hover{transform:rotate(90deg)}.mobile-nav{padding:20px;overflow-y:auto;max-height:calc(100vh - 70px)}.mobile-nav a{display:flex;align-items:center;padding:12px 0;color:var(--text);text-decoration:none;border-bottom:1px solid #eee;font-weight:500;transition:var(--transition);gap:12px}.dark-mode .mobile-nav a{border-bottom:1px solid #333}.mobile-nav a:hover{color:var(--primary);padding-left:10px}.mobile-nav a i{font-size:1.4rem;min-width:24px;text-align:center}.mobile-dropdown{position:relative}.mobile-dropdown-content{padding-left:15px;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(0.23,1,0.32,1)}.mobile-dropdown-content.active{max-height:500px}.mobile-dropdown-content a{font-size:.9rem;padding:8px 0;display:flex;align-items:center;gap:10px}
.mobile-dropdown-content a i{font-size:1.1rem}.hero{height:500px;margin-top:70px;position:relative;overflow:hidden}.swiper{width:100%;height:100%}.swiper-slide{background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;position:relative}.swiper-slide::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3)}.slide-content{position:relative;z-index:2;text-align:center;color:white;max-width:800px;padding:0 20px;transform:translateY(20px);opacity:0;transition:transform .6s ease,opacity .6s ease}.swiper-slide-active .slide-content{transform:translateY(0);opacity:1}.slide-content h2{font-size:3rem;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,0.5)}.slide-content p{font-size:1.5rem;margin-bottom:30px;text-shadow:1px 1px 2px rgba(0,0,0,0.5)}.swiper-button-prev,.swiper-button-next{color:white;opacity:0;transition:var(--transition);background:rgba(0,0,0,0.3);width:50px;height:50px;border-radius:50%}.swiper-button-prev::after,.swiper-button-next::after{font-size:1.5rem}.swiper:hover .swiper-button-prev,.swiper:hover .swiper-button-next{opacity:1}.swiper-pagination-bullet{width:12px;height:12px;background:rgba(255,255,255,0.5);opacity:1}.swiper-pagination-bullet-active{background:var(--primary)}.server-info-section{background:var(--light);padding-top:50px}.dark-mode .server-info-section{background:var(--dark)}.server-info-card{background:white;border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden;max-width:900px;width:100%;margin:0 auto;transition:transform .3s ease}.dark-mode .server-info-card{background:var(--dark)}.server-info-header{display:flex;justify-content:space-between;align-items:center;padding:20px;background:rgba(52,152,219,0.1);border-bottom:1px solid rgba(0,0,0,0.1)}.dark-mode .server-info-header{background:rgba(52,152,219,0.2);border-bottom:1px solid rgba(255,255,255,0.1)}.server-info-header h3{font-size:1.8rem;color:var(--primary)}.server-status{display:flex;align-items:center;gap:10px;padding:8px 15px;border-radius:20px;background:rgba(231,76,60,0.1);color:#e74c3c}.server-status.online{background:rgba(46,204,113,0.1);color:#2ecc71}.status-indicator{width:12px;height:12px;border-radius:50%;background:#e74c3c}.server-status.online .status-indicator{background:#2ecc71}.server-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:30px}@media(max-width:768px){.server-info-grid{grid-template-columns:1fr}}.server-info-item{display:flex;align-items:center;gap:15px;opacity:0;transform:translateY(20px);transition:transform .5s ease,opacity .5s ease}.server-info-item.visible{opacity:1;transform:translateY(0)}.server-info-item:nth-child(1){transition-delay:.1s}.server-info-item:nth-child(2){transition-delay:.2s}.server-info-item:nth-child(3){transition-delay:.3s}.server-info-item:nth-child(4){transition-delay:.4s}.server-info-item i{font-size:2rem;color:var(--primary);width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(52,152,219,0.1)}.info-content h4{font-size:1.2rem;margin-bottom:5px;color:var(--text)}.info-content p{color:var(--text);opacity:.9}.server-info-footer{display:flex;gap:15px;padding:20px 30px;border-top:1px solid rgba(0,0,0,0.1);justify-content:center}.dark-mode .server-info-footer{border-top:1px solid rgba(255,255,255,0.1)}.server-info-footer .btn{flex:1;text-align:center;max-width:200px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;width:100%;max-width:1200px}.feature-card{background:white;border-radius:var(--border-radius);padding:30px;box-shadow:var(--shadow);transition:var(--transition);text-align:center;opacity:0;transform:translateY(20px);transition:transform .5s ease,opacity .5s ease,box-shadow .3s ease}.dark-mode .feature-card{background:var(--dark)}.feature-card.visible{opacity:1;transform:translateY(0)}.feature-card:hover{transform:translateY(-10px);box-shadow:0 10px 20px rgba(0,0,0,0.1)}.feature-icon{width:80px;height:80px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:5rem;color:white}.feature-card h3{font-size:1.5rem;margin-bottom:15px;color:var(--primary)}.feature-card p{color:var(--text);line-height:1.6}.join-section{background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;padding:80px 0}.join-content{display:flex;align-items:center;gap:50px}@media(max-width:992px){.join-content{flex-direction:column}}.join-text{flex:1}.join-text h2{font-size:2.5rem;margin-bottom:20px}.join-text p{font-size:1.2rem;margin-bottom:15px;opacity:.9}.server-ip{display:inline-block;background:rgba(255,255,255,0.1);padding:15px 25px;border-radius:var(--border-radius);margin:20px 0;cursor:pointer;transition:var(--transition);position:relative}.server-ip:hover{background:rgba(255,255,255,0.2)}.server-ip code{font-size:1.5rem;font-weight:bold;letter-spacing:1px}
.copied{margin-left:10px;color:#2ecc71;font-weight:bold;animation:fadeInOut 2s ease}@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}.discord-btn{background-image:linear-gradient(to top,#b3ffab 0,#12fff7 100%);margin-top:30px}.discord-btn:hover{background-image:linear-gradient(-225deg,#d4ffec 0,#57f2cc 48%,#4596fb 100%)}.join-image{flex:1;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);transform:perspective(1000px) rotateY(0deg);transition:transform .6s cubic-bezier(0.23,1,0.32,1)}.join-image:hover{transform:perspective(1000px) rotateY(-10deg)}.join-image img{width:100%;height:auto;display:block}.fixed-footer{background:rgba(255,255,255,0.3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--text);padding:20px 0;position:fixed;bottom:0;left:0;right:0;z-index:1000;height:var(--footer-height);border-top:1px solid rgba(255,255,255,0.5);box-shadow:0 -2px 10px rgba(0,0,0,0.05);transition:var(--transition)}.dark-mode .fixed-footer{background:rgba(18,18,18,0.4);color:var(--text-light);border-top:1px solid rgba(0,0,0,0.5);box-shadow:0 -2px 10px rgba(0,0,0,0.2)}.footer-content{display:flex;justify-content:space-between;align-items:center;height:100%}@media(max-width:768px){.footer-content{flex-direction:column;gap:10px;text-align:center}}.footer-info{display:flex;flex-direction:column;gap:8px}.footer-links{text-align:right}@media(max-width:768px){.footer-links{text-align:center}}.footer-links p{margin-bottom:8px;opacity:.8}
.skeleton-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--light);z-index:1001;padding:20px;transition:opacity .5s ease;pointer-events:none}.dark-mode .skeleton-loader{background:var(--dark)}.skeleton-carousel{height:500px;background:#e0e0e0;margin-bottom:80px;border-radius:12px;position:relative}.dark-mode .skeleton-carousel{background:#2a2a40}.skeleton-server-info{max-width:900px;margin:0 auto 80px;padding:0 20px}.skeleton-section-title{height:50px;width:300px;background:#e0e0e0;margin:0 auto 40px;border-radius:8px;position:relative}.dark-mode .skeleton-section-title{background:#2a2a40}.skeleton-server-header{height:60px;background:#e0e0e0;margin-bottom:20px;border-radius:8px;position:relative}.dark-mode .skeleton-server-header{background:#2a2a40}.skeleton-server-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}@media(max-width:768px){.skeleton-server-grid{grid-template-columns:1fr}}.skeleton-server-item{height:80px;background:#e0e0e0;border-radius:8px;position:relative}.dark-mode .skeleton-server-item{background:#2a2a40}.skeleton-features{max-width:1200px;margin:0 auto 80px;padding:0 20px}.skeleton-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}@media(max-width:992px){.skeleton-features-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.skeleton-features-grid{grid-template-columns:1fr}}.skeleton-feature-card{background:#e0e0e0;border-radius:12px;padding:30px;position:relative}.dark-mode .skeleton-feature-card{background:#2a2a40}.skeleton-icon{width:80px;height:80px;background:#d0d0d0;border-radius:50%;margin:0 auto 20px}.dark-mode .skeleton-icon{background:#333}.skeleton-title{height:24px;background:#d0d0d0;margin-bottom:10px;border-radius:4px}.dark-mode .skeleton-title{background:#333}.skeleton-text{height:16px;background:#d0d0d0;border-radius:4px}.dark-mode .skeleton-text{background:#333}.skeleton-join{max-width:1200px;margin:0 auto;padding:0 20px}.skeleton-join-content{display:flex;gap:50px}@media(max-width:992px){.skeleton-join-content{flex-direction:column}}.skeleton-join-text{flex:1;display:flex;flex-direction:column;gap:15px}.skeleton-join-title{height:40px;background:#e0e0e0;border-radius:8px}.dark-mode .skeleton-join-title{background:#2a2a40}.skeleton-join-desc{height:20px;background:#e0e0e0;border-radius:4px;width:80%}.dark-mode .skeleton-join-desc{background:#2a2a40}.skeleton-ip-box{height:60px;background:#e0e0e0;border-radius:8px;margin:10px 0}.dark-mode .skeleton-ip-box{background:#2a2a40}.skeleton-btn{height:50px;background:#e0e0e0;border-radius:8px;width:200px;margin-top:20px}.dark-mode .skeleton-btn{background:#2a2a40}.skeleton-join-image{flex:1;height:300px;background:#e0e0e0;border-radius:12px;position:relative}.dark-mode .skeleton-join-image{background:#2a2a40}.skeleton-carousel::before,.skeleton-section-title::before,.skeleton-server-header::before,.skeleton-server-item::before,.skeleton-icon::before,.skeleton-title::before,.skeleton-text::before,.skeleton-join-title::before,.skeleton-join-desc::before,.skeleton-ip-box::before,.skeleton-btn::before,.skeleton-join-image::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:skeletonLoading 1.5s infinite}.dark-mode .skeleton-carousel::before,.dark-mode .skeleton-section-title::before,.dark-mode .skeleton-server-header::before,.dark-mode .skeleton-server-item::before,.dark-mode .skeleton-icon::before,.dark-mode .skeleton-title::before,.dark-mode .skeleton-text::before,.dark-mode .skeleton-join-title::before,.dark-mode .skeleton-join-desc::before,.dark-mode .skeleton-ip-box::before,.dark-mode .skeleton-btn::before,.dark-mode .skeleton-join-image::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent)}@keyframes skeletonLoading{100%{left:100%}}