@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{--purple:#7060c7;--purple-dark:#584cac;--blue:#5188e6;--purple-soft:#f3f1ff;--text:#282d48;--gray:#697287;--gray-light:#9299a9;--border:#e5e7f0;--bg:#fff;--bg-soft:#f7f8fd;--radius:18px}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{list-style:none}.container{max-width:1180px;margin:0 auto;padding:0 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:99px;font-size:14px;font-weight:700;border:1px solid transparent;transition:transform .18s,box-shadow .18s,background .18s,color .18s}.btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(79,74,144,.15)}.btn-sm{padding:9px 17px;font-size:13px}.btn-primary{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;box-shadow:0 8px 18px rgba(97,84,197,.2)}.btn-primary:hover{background:linear-gradient(135deg,#6254bd,#4580dc)}.btn-outline{background:#fff;border-color:#d8dbea;color:#555e85}.btn-outline:hover{border-color:#a69de5;color:var(--purple)}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(229,231,240,.85)}.header-inner{display:flex;align-items:center;gap:28px;height:72px}.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;letter-spacing:-.35px;white-space:nowrap}.brand img{width:37px;height:37px;object-fit:cover;border-radius:11px;box-shadow:0 5px 15px rgba(89,74,139,.22)}.brand i{font-style:normal;font-size:9px;font-weight:700;color:#6155b7;border:1px solid #dbd5fb;background:#f8f6ff;padding:3px 7px;border-radius:20px}.site-nav{display:flex;gap:26px;margin-left:auto}.site-nav a{font-size:13px;color:#626b7c;transition:color .15s}.site-nav a:hover{color:var(--purple)}.header-actions{display:flex;align-items:center;gap:18px}.download-link{font-size:13px;font-weight:700;color:#5e55a9}.download-link:hover{color:#423991}
.hero{position:relative;padding:108px 0 95px;overflow:hidden;background:linear-gradient(135deg,#f5f3ff 0%,#eef5ff 52%,#f9f9ff 100%)}.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 34%,rgba(157,123,217,.22),transparent 22%),radial-gradient(circle at 91% 25%,rgba(69,139,233,.18),transparent 24%),linear-gradient(rgba(102,91,180,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(102,91,180,.055) 1px,transparent 1px);background-size:auto,auto,55px 55px,55px 55px}.hero-inner{position:relative;display:grid;grid-template-columns:1fr 1.03fr;gap:70px;align-items:center}.hero-kicker{display:inline-flex;color:#6158b3;font-size:10px;font-weight:800;letter-spacing:1.4px;padding:7px 12px;background:rgba(255,255,255,.76);border:1px solid #dcd7f8;border-radius:99px}.hero-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#7766d4;box-shadow:0 0 11px #7766d4;margin:5px 8px 0 0}.hero h1{font-size:clamp(40px,4.3vw,59px);font-weight:800;line-height:1.12;letter-spacing:-2.7px;margin-top:22px}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#715fc3,#4488e9);color:transparent;-webkit-background-clip:text;background-clip:text}.hero-sub{margin-top:19px;font-size:15px;color:#697286;max-width:500px}.hero-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}.hero-points{margin-top:24px;display:flex;gap:19px;flex-wrap:wrap;font-size:11px;color:#737c8d}.hero-points li{display:flex;align-items:center;gap:6px}.hero-points li::before{content:"✓";display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#e8f8ef;color:#37a36d;font-size:9px;font-weight:800}.hero-shot{position:relative}.hero-shot::after{content:"官方服务工作台";position:absolute;right:-16px;top:35px;background:#fff;color:#5f56b2;border:1px solid #e0ddf5;border-radius:99px;padding:7px 12px;font-size:9px;font-weight:800;box-shadow:0 9px 22px rgba(73,77,133,.12)}.dashboard-preview{overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:18px;background:#f4f6fb;box-shadow:0 27px 58px rgba(72,77,130,.23);transform:perspective(1100px) rotateY(-2deg) rotateX(1deg);color:#26324a}.dashboard-cover{height:125px;display:flex;align-items:center;justify-content:space-between;padding:25px 31px;background:linear-gradient(110deg,#675ed1,#337fe8 70%,#66a9f4);position:relative;overflow:hidden}.dashboard-cover::after{content:"";position:absolute;width:190px;height:190px;right:27%;top:-115px;border:35px solid rgba(255,255,255,.08);border-radius:50%}.preview-user{display:flex;align-items:center;gap:10px;position:relative;z-index:2;color:#fff}.preview-user img{width:39px;height:39px;object-fit:cover;border:2px solid rgba(255,255,255,.72);border-radius:50%}.preview-user b,.preview-user small{display:block}.preview-user b{font-size:12px}.preview-user small{font-size:8px;opacity:.7}.preview-summary{position:relative;z-index:2;display:flex;gap:27px;color:#fff}.preview-summary span{padding-left:17px;border-left:1px solid rgba(255,255,255,.2)}.preview-summary small,.preview-summary b{display:block}.preview-summary small{font-size:8px;opacity:.72}.preview-summary b{font-size:14px;margin-top:1px}.dashboard-tabs{height:43px;background:#fff;display:flex;align-items:center;gap:20px;padding:0 19px;border-bottom:1px solid #edf0f5;font-size:8px;color:#768096}.dashboard-tabs b{align-self:stretch;display:flex;align-items:center;color:#467ee6;border-bottom:2px solid #467ee6}.dashboard-tabs i{margin-left:auto;font-style:normal;color:#fff;background:#467ee6;border-radius:5px;padding:5px 8px;font-size:7px}.dashboard-content{display:grid;grid-template-columns:1fr 134px;gap:12px;padding:15px}.dashboard-main{min-width:0}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.preview-metrics>div{min-height:76px;padding:12px;border-radius:10px;color:#fff;overflow:hidden;position:relative}.preview-metrics>div::after{content:"";position:absolute;right:-20px;top:-25px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.14)}.metric-violet{background:linear-gradient(135deg,#8271dc,#635dc1)}.metric-gold{background:linear-gradient(135deg,#f2a552,#ed7a58)}.metric-blue{background:linear-gradient(135deg,#5a9ae8,#4573d2)}.preview-metrics small,.preview-metrics b,.preview-metrics span{display:block;position:relative;z-index:1}.preview-metrics small{font-size:7px;opacity:.8}.preview-metrics b{font-size:24px;line-height:1.05;margin:5px 0}.preview-metrics span{font-size:7px;opacity:.78}.preview-panel{margin-top:11px;padding:12px;background:#fff;border-radius:10px}.panel-title{display:flex;justify-content:space-between;font-size:9px}.panel-title span{font-size:7px;color:#6284cf}.service-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.service-list>div{display:flex;align-items:center;gap:7px;padding:8px;background:#f7f8fc;border-radius:7px}.service-list i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#ebe9ff;color:#6659c7;font-size:7px;font-style:normal;font-weight:800}.service-list span{min-width:0;flex:1}.service-list b,.service-list small{display:block}.service-list b{font-size:7px}.service-list small{font-size:6px;color:#8991a1;white-space:nowrap}.service-list em{font-style:normal;color:#5f57b5;font-size:6px;font-weight:700}.order-preview{padding-bottom:8px}.mini-order{display:grid;grid-template-columns:1.5fr 1fr auto;gap:6px;align-items:center;padding:7px 0;border-top:1px solid #f0f2f6;margin-top:7px;font-size:7px}.mini-order small{color:#8991a1}.mini-order>b{font-size:6px;color:#4fa676;background:#ebf8ef;padding:3px 5px;border-radius:99px}.mini-order>b.done{color:#6f7a8d;background:#f0f2f6}.dashboard-side{background:#fff;border-radius:10px;padding:13px 10px;font-size:9px}.side-note{display:flex;gap:6px;padding:10px 0;border-bottom:1px solid #edf0f5;font-size:7px}.side-note i{font-style:normal;display:grid;place-items:center;width:16px;height:16px;border-radius:5px;background:#edf1ff;color:#5d69c7;font-size:8px}.side-note span{line-height:1.25}.side-note small{font-size:6px;color:#9199a8}.side-cta{margin-top:12px;padding:11px 8px;border-radius:7px;background:linear-gradient(135deg,#7565cf,#5486e0);color:#fff;font-size:13px;font-weight:800}.side-cta small{font-size:7px;font-weight:500;opacity:.75}.browser-frame,.browser-bar{display:none}
.section{padding:106px 0}.bg-soft{background:var(--bg-soft)}.section-head{max-width:630px;margin-bottom:45px}.section-head::before{content:"XIANGSHENG ESPORTS";display:block;font-size:9px;font-weight:800;letter-spacing:1.8px;color:#6b5dca;margin-bottom:9px}.section-head h2{font-size:34px;font-weight:800;letter-spacing:-1.5px;line-height:1.2}.section-head p{margin-top:11px;color:var(--gray);font-size:14px}.grid{display:grid;gap:18px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.card{border:1px solid var(--border);border-radius:var(--radius);padding:29px;background:#fff;box-shadow:0 6px 18px rgba(66,74,108,.035);transition:transform .18s,border-color .18s,box-shadow .18s}.card:hover{border-color:#bfb8eb;transform:translateY(-4px);box-shadow:0 16px 28px rgba(77,74,138,.09)}.card-icon{width:42px;height:42px;border-radius:12px;background:var(--purple-soft);display:flex;align-items:center;justify-content:center;margin-bottom:17px}.card-icon svg{stroke:#6659c5}.card h3{font-size:17px;font-weight:800}.card p{margin-top:8px;font-size:13px;color:var(--gray)}.card-link{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;color:#6358be}.card-link:hover{color:#44399a}.step{min-height:196px}.step-num{font-size:11px;font-weight:800;letter-spacing:1px;color:#6a5fca;margin-bottom:12px}
.shot-strip{margin-top:36px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 10px 25px rgba(70,77,110,.045)}.shot-strip img{width:100%}.shot-strip figcaption{padding:12px 16px;font-size:12px;color:var(--gray-light);border-top:1px solid var(--border)}.contact-inner{display:flex;align-items:center;gap:54px}.qr-card{flex:none;width:205px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 8px 20px rgba(66,74,108,.04)}.qr-card img{width:100%;border-radius:9px}.contact-text h2{font-size:31px;font-weight:800;letter-spacing:-1px}.contact-text p{margin-top:12px;color:var(--gray);font-size:14px}.contact-tip{font-size:13px!important;color:var(--gray-light)!important}.site-footer{border-top:1px solid var(--border);padding:30px 0;background:#fff;font-size:12px;color:var(--gray-light)}.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}.site-footer a:hover{color:var(--purple)}
@media(max-width:980px){.site-nav{gap:16px}.site-nav a{font-size:12px}.hero{padding:78px 0}.hero-inner{grid-template-columns:1fr;gap:45px}.hero-shot{max-width:680px}.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.container{padding:0 18px}.header-inner{height:64px;gap:14px}.brand{font-size:15px}.brand img{width:34px;height:34px}.brand i,.site-nav,.download-link{display:none}.header-actions{margin-left:auto}.btn-sm{padding:8px 14px;font-size:12px}.hero{padding:67px 0 58px}.hero-inner{gap:35px}.hero h1{font-size:37px;letter-spacing:-2px}.hero-sub{font-size:14px}.hero-actions{margin-top:25px}.hero-actions .btn{flex:1;min-width:140px;padding:12px 15px}.hero-points{gap:12px;font-size:10px}.hero-shot::after{right:5px;top:18px}.dashboard-preview{transform:none;border-radius:14px}.dashboard-cover{height:96px;padding:17px}.preview-summary{gap:10px}.preview-summary span{padding-left:9px}.dashboard-tabs{gap:11px;padding:0 12px;overflow:hidden}.dashboard-tabs span:nth-of-type(n+3){display:none}.dashboard-content{grid-template-columns:1fr;padding:10px}.dashboard-side{display:none}.preview-metrics>div{min-height:66px;padding:9px}.preview-metrics b{font-size:19px}.service-list{grid-template-columns:1fr}.service-list>div:nth-child(2){display:none}.order-preview{display:none}.section{padding:67px 0}.section-head{margin-bottom:30px}.section-head h2{font-size:29px}.section-head p{font-size:13px}.grid-3,.grid-4{grid-template-columns:1fr;gap:13px}.card{padding:24px}.step{min-height:0}.shot-strip{margin-top:25px}.contact-inner{flex-direction:column;align-items:flex-start;gap:27px}.qr-card{width:175px}.contact-text h2{font-size:28px}.footer-inner{display:block;line-height:2}.hero-shot{margin:0 -2px}}