/* ============================================
   MK体育在线官网 - 首页专用样式
   home.css
   ============================================ */

/* Hero Section */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.hero-canvas{position:absolute;inset:0;z-index:1}
.hero-canvas canvas{display:block;width:100%;height:100%}
.hero-overlay{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at center,transparent 0%,#000 70%)}
.hero-marquee-top{position:absolute;top:60px;left:0;right:0;z-index:3;overflow:hidden;background:#FF6600;padding:10px 0}
.hero-marquee-top .track{display:flex;width:max-content;animation:marquee-scroll 30s linear infinite}
.hero-marquee-top span{font-size:14px;font-weight:700;color:#000;white-space:nowrap;padding:0 40px;text-transform:uppercase;letter-spacing:1px}
.hero-marquee-bottom{position:absolute;bottom:0;left:0;right:0;z-index:3;overflow:hidden;border-top:1px solid rgba(255,102,0,.3);padding:10px 0;background:rgba(0,0,0,.5)}
.hero-marquee-bottom .track{display:flex;width:max-content;animation:marquee-scroll 20s linear infinite reverse}
.hero-marquee-bottom span{font-size:13px;font-weight:500;color:#FF6600;white-space:nowrap;padding:0 40px;letter-spacing:.5px}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.hero-content{position:relative;z-index:10;text-align:center;max-width:900px;padding:0 24px}
.hero-card{background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:48px;transform:perspective(1000px) rotateX(2deg);transition:transform .5s}
.hero-card:hover{transform:perspective(1000px) rotateX(0deg)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(255,102,0,.15);border:1px solid rgba(255,102,0,.3);border-radius:50px;font-size:13px;color:#FF6600;margin-bottom:24px;font-weight:500}
.hero-title{font-size:52px;font-weight:900;color:#FFF;line-height:1.1;margin-bottom:20px;letter-spacing:-1.5px}
.hero-desc{font-size:18px;color:#A0A0A0;margin-bottom:32px;line-height:1.7}
.hero-stats{display:flex;justify-content:center;gap:60px;margin-top:48px}
.hero-stat{text-align:center}
.hero-stat-num{font-size:40px;font-weight:900;color:#FF6600;line-height:1}
.hero-stat-label{font-size:14px;color:#808080;margin-top:8px;letter-spacing:1px;text-transform:uppercase}

/* Services Section */
.services{background:#111;padding:140px 0}
.services-header{text-align:center;margin-bottom:64px}
.services-header h2{font-size:40px;margin-bottom:16px}
.services-header p{color:#808080;font-size:16px}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.service-card{background:#141414;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:36px 28px;transition:all .3s;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#FF6600,transparent);opacity:0;transition:opacity .3s}
.service-card:hover{border-color:rgba(255,102,0,.2);transform:translateY(-6px)}
.service-card:hover::before{opacity:1}
.service-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(255,102,0,.1);border-radius:14px;margin-bottom:20px;color:#FF6600;font-size:24px}
.service-card h3{font-size:20px;color:#FFF;margin-bottom:12px}
.service-card p{font-size:14px;color:#808080;line-height:1.7}

/* Data Stats Section */
.data-section{background:linear-gradient(135deg,#1C2833 0%,#111 100%);padding:140px 0}
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;text-align:center}
.data-item{padding:36px;background:rgba(0,0,0,.2);border-radius:16px;border:1px solid rgba(255,255,255,.05)}
.data-num{font-size:48px;font-weight:900;color:#FF6600;line-height:1;margin-bottom:12px}
.data-label{font-size:14px;color:#A0A0A0;letter-spacing:1px;text-transform:uppercase}

/* Process Section */
.process{background:#000;padding:140px 0}
.process-header{text-align:center;margin-bottom:64px}
.process-header h2{font-size:40px;margin-bottom:16px}
.process-header p{color:#808080}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
.process-steps::before{content:'';position:absolute;top:40px;left:60px;right:60px;height:2px;background:linear-gradient(90deg,#FF6600,#5D6D7E);z-index:0}
.step{text-align:center;position:relative;z-index:1}
.step-num{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#141414;border:2px solid #FF6600;border-radius:50%;font-size:24px;font-weight:900;color:#FF6600;margin:0 auto 24px}
.step h3{font-size:20px;color:#FFF;margin-bottom:12px}
.step p{font-size:14px;color:#808080;line-height:1.7}

/* News Preview Section */
.news-preview{background:#111;padding:140px 0}
.news-preview-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px}
.news-preview-header h2{font-size:40px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* CTA Section */
.cta{background:linear-gradient(135deg,#1C2833,#000);padding:100px 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,102,0,.08) 0%,transparent 60%)}
.cta h2{font-size:36px;margin-bottom:16px;position:relative;z-index:1}
.cta p{color:#A0A0A0;margin-bottom:32px;position:relative;z-index:1}

/* Responsive */
@media(max-width:1024px){
.services-grid{grid-template-columns:repeat(2,1fr)}
.data-grid{grid-template-columns:repeat(2,1fr)}
.process-steps{grid-template-columns:repeat(2,1fr)}
.process-steps::before{display:none}
}
@media(max-width:768px){
.hero-title{font-size:32px}
.hero-card{padding:28px}
.hero-stats{gap:24px}
.hero-stat-num{font-size:28px}
.services-grid{grid-template-columns:1fr}
.data-grid{grid-template-columns:1fr;gap:24px}
.process-steps{grid-template-columns:1fr}
.news-grid{grid-template-columns:1fr}
.news-preview-header{flex-direction:column;align-items:flex-start;gap:16px}
}