:root{--primary-gold:#d4af37;--glow-color:#ffd700;--light-gold:#f0d070;--dark-bg:#0c0c14;--card-bg:rgba(25,25,35,.85);--text-light:#fff;--text-gray:#b0b0c0;--text-gold:#f0d070;--border-glow:rgba(217,199,166,.4);--transition-smooth:all .4s cubic-bezier(0.25,0.46,0.45,0.94);--shadow-heavy:0 15px 35px rgba(0,0,0,.5);--shadow-gold:0 0 30px rgba(255,215,0,.2)}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:linear-gradient(135deg,#0c0c14 0%,#141420 50%,#1c1c28 100%);color:var(--text-light);position:relative;overflow-x:hidden;line-height:1.6}
.tech-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden}
.grid-lines{position:absolute;width:100%;height:100%;background:linear-gradient(90deg,rgba(212,175,55,.07) 1px,transparent 1px)0 0/60px 60px,linear-gradient(rgba(212,175,55,.07) 1px,transparent 1px)0 0/60px 60px;opacity:.4;animation:gridMove 120s linear infinite}
@keyframes gridMove{0%{background-position:0 0}100%{background-position:120px 120px}}
.glow-spot-1{position:absolute;width:400px;height:400px;top:15%;right:10%;border-radius:50%;background:radial-gradient(circle,rgba(217,199,166,.15) 0%,transparent 70%);filter:blur(80px)}
.glow-spot-2{position:absolute;width:350px;height:350px;bottom:15%;left:10%;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.12) 0%,transparent 70%);filter:blur(80px)}
.floating-elegance{position:absolute;width:100%;height:100%}
.main-group{flex:1;padding:30px 20px 140px;display:flex;flex-wrap:wrap;justify-content:center;gap:35px;position:relative;z-index:1;max-width:1600px;margin:0 auto}
.page-header{text-align:center;padding:60px 20px 40px;position:relative;z-index:2}
.page-title{font-size:3rem;color:var(--text-light);margin-bottom:20px;font-weight:300;position:relative;display:inline-block;letter-spacing:2px;text-shadow:0 5px 15px rgba(0,0,0,.3)}
.page-title:before,.page-title:after{content:'';position:absolute;top:50%;width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--glow-color))}
.page-title:before{left:-60px}.page-title:after{right:-60px;background:linear-gradient(90deg,var(--glow-color),transparent)}
.page-title:after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--glow-color),transparent)}
.title-highlight{background:linear-gradient(135deg,var(--glow-color),var(--primary-gold),#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:400;text-shadow:0 0 20px rgba(255,215,0,.3)}
.page-subtitle{color:var(--text-gray);font-size:1.2rem;max-width:700px;margin:0 auto;font-weight:300;letter-spacing:1.5px;padding:0 20px;line-height:1.8}
.scene-card{width:100%;max-width:300px;background:var(--card-bg);border:1px solid var(--border-glow);border-radius:15px;overflow:hidden;box-shadow:var(--shadow-heavy),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 30px rgba(255,215,0,.08);transition:var(--transition-smooth);backdrop-filter:blur(15px);position:relative;z-index:1;cursor:pointer}
.scene-card:before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,transparent 30%,rgba(255,215,0,.1) 45%,rgba(212,175,55,.2) 50%,rgba(255,215,0,.1) 55%,transparent 70%);border-radius:17px;z-index:-1;opacity:0;transition:opacity .6s ease}
.scene-card:hover{transform:translateY(-12px) scale(1.02);border-color:var(--glow-color);box-shadow:0 25px 50px rgba(138,109,59,.3),inset 0 0 0 1px rgba(255,215,0,.1),inset 0 0 40px rgba(255,215,0,.15),var(--shadow-gold);background:rgba(30,30,40,.9)}
.scene-card:hover:before{opacity:1;animation:borderGlow 2s linear infinite}
@keyframes borderGlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.scene-card.updating:before{background:linear-gradient(45deg,transparent 30%,rgba(128,128,128,.1) 45%,rgba(128,128,128,.2) 50%,rgba(128,128,128,.1) 55%,transparent 70%)}
.card-image{height:220px;overflow:hidden;position:relative;border-bottom:1px solid var(--border-glow)}
.card-image:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 40%,rgba(12,12,20,.2) 70%,rgba(12,12,20,.85) 100%);pointer-events:none;z-index:2}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(0.4,0,0.2,1);filter:brightness(.9) contrast(1.1)}
.scene-card:hover .card-image img{transform:scale(1.12);filter:brightness(1) contrast(1.2)}
.card-content{padding:25px;position:relative;z-index:3}
.card-title{font-size:1.4rem;color:var(--text-light);margin-bottom:12px;font-weight:400;position:relative;padding-bottom:12px;letter-spacing:1px}
.card-title:after{content:'';position:absolute;bottom:0;left:0;width:50px;height:2px;background:linear-gradient(90deg,var(--glow-color),transparent);transition:width .5s ease}
.scene-card:hover .card-title:after{width:80px;background:linear-gradient(90deg,var(--glow-color),var(--primary-gold),transparent)}
.card-desc{color:var(--text-gray);line-height:1.6;margin-bottom:25px;font-size:.95rem;font-weight:300;min-height:80px}
.card-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 25px;background:linear-gradient(135deg,rgba(35,35,50,.9) 0%,rgba(25,25,35,.9) 100%);color:var(--text-light);text-decoration:none;border-radius:30px;font-weight:400;transition:var(--transition-smooth);border:1px solid var(--border-glow);box-shadow:3px 3px 10px rgba(0,0,0,.6),-3px -3px 10px rgba(255,255,255,.05),inset 0 0 20px rgba(255,215,0,.05);position:relative;overflow:hidden;letter-spacing:1px}
.card-button:hover{color:var(--text-gold);border-color:var(--glow-color);transform:translateY(-5px);box-shadow:5px 5px 20px rgba(0,0,0,.8),-5px -5px 20px rgba(255,255,255,.1),inset 0 0 30px rgba(255,215,0,.1),var(--shadow-gold)}
.card-button:active{transform:translateY(-2px)}
.card-button i{margin-left:8px;transition:transform .3s ease}
.card-button:hover i{transform:translateX(5px);color:var(--glow-color)}
.card-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,.15),transparent);transition:left .8s ease}
.card-button:hover::before{left:100%}
.updating-tag{position:absolute;top:15px;right:15px;background:linear-gradient(135deg,rgba(100,100,120,.9) 0%,rgba(80,80,100,.9) 100%);color:var(--text-gray);padding:8px 15px;border-radius:20px;font-size:.85rem;font-weight:400;border:1px solid rgba(128,128,128,.3);box-shadow:0 0 20px rgba(128,128,128,.2);z-index:4;backdrop-filter:blur(10px)}
.scene-card.updating .card-button{background:linear-gradient(135deg,rgba(80,80,100,.9) 0%,rgba(60,60,80,.9) 100%);color:var(--text-gray);border-color:rgba(128,128,128,.3)}
.scene-card.updating .card-button:hover{color:#a0a0c0;border-color:rgba(160,160,180,.5)}
.scene-card.updating .card-title:after{background:linear-gradient(90deg,#808080,transparent)}
.scene-card.updating:hover .card-title:after{background:linear-gradient(90deg,#a0a0a0,#808080,transparent)}
.footer-nav{position:fixed;bottom:0;left:0;width:100%;padding:25px;background:rgba(15,15,25,.95);box-shadow:0 -10px 30px rgba(0,0,0,.5);backdrop-filter:blur(15px) saturate(180%);border-top:1px solid var(--border-glow);z-index:100}
.footer-nav:before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--glow-color),transparent)}
.footer-nav table{width:100%}
.home-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 35px;background:linear-gradient(135deg,rgba(25,25,40,.95) 0%,rgba(15,15,25,.95) 100%);color:var(--text-light);text-decoration:none;border-radius:30px;font-size:16px;transition:var(--transition-smooth);border:1px solid var(--border-glow);box-shadow:4px 4px 15px rgba(0,0,0,.7),-4px -4px 15px rgba(255,255,255,.05),inset 0 0 25px rgba(255,215,0,.05);font-weight:400;position:relative;overflow:hidden;letter-spacing:1px}
.home-btn:hover{color:var(--text-gold);border-color:var(--glow-color);transform:translateY(-5px);box-shadow:6px 6px 25px rgba(0,0,0,.9),-6px -6px 25px rgba(255,255,255,.1),inset 0 0 35px rgba(255,215,0,.1),var(--shadow-gold)}
.home-btn:active{transform:translateY(-2px)}
.home-btn i{margin-right:12px;color:var(--glow-color);font-size:18px;transition:transform .3s ease}
.home-btn:hover i{transform:translateX(-5px)}
.home-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,.15),transparent);transition:left .8s ease}
.home-btn:hover::before{left:100%}
@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:768px){.main-group{padding:20px 15px 120px;gap:25px}.scene-card{max-width:100%;border-radius:15px}.page-header{padding:40px 15px 30px}.page-title{font-size:2.2rem}.page-title:before,.page-title:after{width:20px}.page-title:before{left:-35px}.page-title:after{right:-35px}.page-subtitle{font-size:1.05rem;padding:0 15px;letter-spacing:1px}.footer-nav{padding:20px 15px}.home-btn{width:100%;max-width:320px;padding:12px 25px;font-size:15px}.card-content{padding:25px 20px}.updating-tag{top:10px;right:10px;padding:6px 12px;font-size:.8rem}}
@media (min-width:769px) and (max-width:1024px){.main-group{padding:40px 25px 130px}.scene-card{max-width:300px}.page-title{font-size:2.8rem}}
@media (min-width:1200px){.main-group{padding:50px 40px 140px;gap:40px}.scene-card{max-width:300px}.page-title{font-size:3.5rem}}
@media (max-width:480px){.page-title{font-size:1.8rem;letter-spacing:1px}.page-subtitle{font-size:1rem;line-height:1.6}.card-image{height:200px}.card-content{padding:20px 18px}.card-title{font-size:1.3rem}.card-desc{font-size:.95rem;min-height:auto}}