:root{
  --gold:#f2c66d;
  --gold-2:#d49e43;
  --bg:#080a0b;
  --bg-2:#0d1012;
  --panel:#131618;
  --text:#f5f4ef;
  --muted:#c7c8c4;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background:
    radial-gradient(circle at top center, rgba(242,198,109,.08), transparent 26%),
    linear-gradient(180deg,#070909 0%,#0b0d0f 100%);
  color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif;
}
a{color:inherit}

.desktop-site{
  display:block;
  min-height:100vh;
  padding:24px 20px 38px;
}
.page-wrap{
  max-width:1440px;
  margin:0 auto;
}
.stage-shell{
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(3px);
}
.stage{
  position:relative;
  width:100%;
  aspect-ratio:1648 / 928;
  border-radius:22px;
  overflow:hidden;
  background:#090b0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25);
}
.master{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
}

/* 顶部导航，补一个“关于” */
.desktop-nav{
  position:absolute;
  z-index:10;
  left:34%;
  top:1.2%;
  width:30%;
  height:5.4%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1%;
}
.desktop-nav a{
  position:relative;
  text-decoration:none;
  font-weight:800;
  font-size:1.16vw;
  color:#f0efe8;
  padding:.55vw .7vw .8vw;
  border-radius:.45vw;
  transition:color .15s ease, background .15s ease;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}
.desktop-nav a:hover,
.desktop-nav a.active{
  color:var(--gold);
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:.45vw;
  right:.45vw;
  bottom:.14vw;
  height:.18vw;
  border-radius:99px;
  background:transparent;
  transition:background .15s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after{
  background:var(--gold);
}

/* 原登录按钮点击区域 */
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  text-decoration:none;
  border-radius:999px;
  outline:none;
}
.hotspot:focus-visible,.desktop-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(242,198,109,.78);
}
.login{left:80.4%;top:1.25%;width:9.6%;height:5.0%}
.whatsapp{left:41.65%;top:91.9%;width:10.5%;height:4.7%}
.manual{left:53.4%;top:91.9%;width:9.5%;height:4.7%}

/* 两个真实按钮 */
.desktop-btn{
  position:absolute;
  z-index:12;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7vw;
  text-decoration:none;
  font-weight:800;
  font-size:1.08vw;
  line-height:1;
  border-radius:999px;
  transition:all .15s ease;
  box-shadow:0 3px 14px rgba(0,0,0,.20);
}
.desktop-btn .ico{
  font-size:1.45vw;
  line-height:1;
}

/* 左边黄色按钮：hover 时更亮 */
.btn-custom{
  left:13.05%;
  top:26.68%;
  width:16%;
  height:6.15%;
  color:#141414;
  background:linear-gradient(180deg, #f4cf81 0%, #e7b55c 100%);
  border:1px solid rgba(255,232,180,.55);
}
.btn-custom:hover{
  background:linear-gradient(180deg, #ffe7a8 0%, #f0bf66 100%);
  box-shadow:0 8px 24px rgba(242,198,109,.25);
  transform:translateY(-1px);
}

/* 右边描边按钮：hover 变亮黄色 */
.btn-follow{
  left:30.18%;
  top:26.68%;
  width:14.95%;
  height:6.15%;
  color:#f4f2ec;
  background:rgba(8,10,11,.72);
  border:1px solid #c09243;
}
.btn-follow:hover{
  color:#151515;
  background:linear-gradient(180deg, #f6d58c 0%, #e8b458 100%);
  border-color:rgba(255,232,180,.55);
  box-shadow:0 8px 24px rgba(242,198,109,.25);
  transform:translateY(-1px);
}

/* Mobile */
.mobile-site{display:none;background:#0a0c0d;min-height:100vh}
.m-head{
  height:70px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;
  background:#101213;border-bottom:1px solid rgba(255,255,255,.06)
}
.m-brand{display:flex;align-items:center;gap:9px;color:var(--gold);font-size:20px}
.m-brand>span:last-child{display:flex;flex-direction:column;line-height:1}
.m-brand small{font-size:7px;letter-spacing:3.2px;margin-top:5px}
.m-crown{font-size:34px;line-height:1}
.m-login{font-size:12px;text-decoration:none;border:1px solid #8d6932;border-radius:20px;padding:8px 12px;color:var(--gold)}

.m-nav{
  display:flex;
  justify-content:space-around;
  align-items:center;
  min-height:46px;
  background:#0f1214;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.m-nav a{
  position:relative;
  text-decoration:none;
  color:#f0efe8;
  font-size:14px;
  font-weight:800;
  padding:12px 6px 10px;
}
.m-nav a.active,.m-nav a:hover{color:var(--gold)}
.m-nav a.active::after,.m-nav a:hover::after{
  content:"";
  position:absolute;
  left:2px; right:2px; bottom:0;
  height:2px; background:var(--gold);
}

.m-hero{
  position:relative;min-height:530px;padding:48px 20px 34px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(7,9,10,.34),rgba(7,9,10,.92)),
    url("assets/mos-sports-desktop.webp") 76% 21% / auto 120% no-repeat;
}
.m-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,10,.95),rgba(7,9,10,.58) 64%,rgba(7,9,10,.34))}
.m-copy{position:relative;z-index:1;max-width:500px;margin:auto}
.m-kicker{font-size:11px;letter-spacing:2.4px;color:#b59354;margin-bottom:11px}
.m-copy h1{font-size:42px;line-height:1.07;margin:0 0 16px;letter-spacing:1px}
.m-copy h1 em{font-style:normal;color:var(--gold)}
.m-copy p{font-size:16px;color:#e1e1dc;line-height:1.7;margin:0 0 23px}
.m-btn{
  width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;
  margin:12px 0;border-radius:28px;text-decoration:none;font-weight:800;
  transition:all .15s ease;
}
.m-btn.primary{color:#161616;background:linear-gradient(180deg,#ffda8b,#e8b154)}
.m-btn.primary:hover{background:linear-gradient(180deg,#ffe7aa,#f0bf66)}
.m-btn.outline{color:#fff;border:1px solid #a77a34;background:rgba(7,8,9,.72)}
.m-btn.outline:hover{color:#161616;background:linear-gradient(180deg,#ffe7aa,#f0bf66);border-color:rgba(255,232,180,.55)}
.m-tags{margin-top:18px;color:#b7b8b6;font-size:13px;letter-spacing:.7px}

.m-cards{display:grid;gap:14px;padding:18px}
.m-cards article{
  position:relative;overflow:hidden;padding:22px 20px;border-radius:12px;
  background:linear-gradient(145deg,#1b1d1e,#131516);
  border:1px solid rgba(255,255,255,.09)
}
.m-icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #8d672e;color:var(--gold);font-size:28px;background:#22221f
}
.m-cards h2{font-size:25px;margin:14px 0 4px}
.m-cards p{margin:0;color:#d8d9d6;font-size:14px}
.m-cards ul{list-style:none;padding:10px 0 0;margin:0}
.m-cards li{margin:9px 0;color:#ededeb;font-size:15px}
.m-cards li:before{content:"✓";color:var(--gold);font-weight:900;margin-right:11px}

.m-guide{padding:9px 18px 20px}
.m-guide>div{
  display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;
  padding:15px 0;border-bottom:1px dashed rgba(242,198,109,.20)
}
.m-guide b{
  width:42px;height:42px;border-radius:50%;border:1px solid #956f32;
  display:grid;place-items:center;color:var(--gold);font-size:12px
}
.m-guide span{display:flex;flex-direction:column}
.m-guide strong{font-size:16px}
.m-guide small{color:#b7b9b8;margin-top:5px}

.m-about{
  margin:0 18px 18px;
  padding:18px 18px 20px;
  border-radius:14px;
  background:linear-gradient(145deg,#181b1c,#121415);
  border:1px solid rgba(255,255,255,.08);
}
.m-about h2{margin:0 0 10px;color:var(--gold);font-size:22px}
.m-about p{margin:0;color:#d2d4d2;line-height:1.7;font-size:14px}

.m-benefits{background:#171a1b;padding:3px 18px}
.m-benefits>div{display:flex;gap:17px;align-items:center;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.m-benefits>div:last-child{border-bottom:0}
.m-benefits b{font-size:29px;color:var(--gold)}
.m-benefits span{display:flex;flex-direction:column;font-weight:700}
.m-benefits small{font-weight:400;color:#b9bcba;margin-top:4px}

footer{padding:26px 18px 32px;text-align:center;background:#0a0c0d}
.m-brand.foot{justify-content:center}
.m-foot-links{display:flex;justify-content:center;gap:24px;margin:22px 0 18px}
.m-foot-links a{text-decoration:none;font-size:13px;color:#ddd}
footer p{font-size:11px;color:#858887;margin:0}

@media (max-width: 900px){
  .desktop-site{display:none}
  .mobile-site{display:block}
}

@media (min-width: 1600px){
  .page-wrap{max-width:1480px}
}

@media (min-width: 901px) and (max-width: 1260px){
  .desktop-site{padding:18px 14px 30px}
  .stage-shell{padding:14px;border-radius:22px}
  .stage{border-radius:18px}
}