:root{
  --bg:#020718;
  --blue:#0a73ff;
  --blue2:#00c2ff;
  --deep:#071a55;
  --gold:#ffc96a;
  --gold2:#ffe1a3;
  --white:#f8fbff;
  --muted:#b7d8ff;
  --line:rgba(80,172,255,.75);
  --panel:rgba(5,22,73,.72);
  --panel2:rgba(3,13,46,.86);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 100%, rgba(0,86,255,.5) 0, transparent 32%),
    radial-gradient(circle at 80% 4%, rgba(0,178,255,.45) 0, transparent 25%),
    radial-gradient(circle at 10% 14%, rgba(0,77,255,.32) 0, transparent 34%),
    linear-gradient(180deg,#020716 0%,#06194a 48%,#020615 100%);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at center, black 0 48%, transparent 82%);
  z-index:1;
}
body:after{
  content:"";
  position:fixed;
  left:-10vw;
  right:-10vw;
  bottom:-12vh;
  height:46vh;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0,149,255,.72) 0, rgba(0,83,255,.26) 35%, transparent 64%),
    repeating-radial-gradient(ellipse at 50% 82%, rgba(82,180,255,.25) 0 2px, transparent 3px 42px),
    linear-gradient(0deg, rgba(6,21,61,.92), transparent 72%);
  transform:perspective(800px) rotateX(62deg);
  transform-origin:bottom center;
  z-index:0;
}
a{color:inherit;text-decoration:none}
#starCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page-shell{
  position:relative;
  z-index:2;
  width:min(1460px,94vw);
  margin:0 auto;
  padding:28px 0 42px;
}
.neon-panel{
  border:1px solid rgba(102,188,255,.72);
  background:linear-gradient(135deg,rgba(4,15,56,.9),rgba(6,32,94,.76) 55%,rgba(2,9,35,.9));
  box-shadow:0 0 0 1px rgba(0,158,255,.22) inset,0 0 28px rgba(0,110,255,.55),0 0 90px rgba(0,68,255,.22);
  backdrop-filter:blur(8px);
}
.hero-panel{
  position:relative;
  min-height:300px;
  border-radius:18px;
  overflow:hidden;
  padding:28px 46px;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr);
  gap:28px;
}
.hero-panel:before,.brand-card:before,.benefit-bar:before,.countdown:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.24) 42%,transparent 50% 100%);
  transform:translateX(-120%);
  animation:shine 6.5s ease-in-out infinite;
}
.hero-panel:after{
  content:"";
  position:absolute;
  left:-5%;right:-5%;bottom:0;height:112px;
  background:
    linear-gradient(90deg,transparent,rgba(0,168,255,.38),transparent),
    linear-gradient(0deg,rgba(0,0,0,.3),transparent),
    repeating-linear-gradient(90deg,rgba(112,190,255,.22) 0 2px,transparent 2px 98px);
  clip-path:polygon(0 72%,8% 54%,15% 66%,23% 39%,31% 70%,39% 48%,46% 68%,56% 34%,64% 68%,74% 45%,84% 70%,92% 52%,100% 68%,100% 100%,0 100%);
  opacity:.82;
}
.tagline{
  display:inline-flex;
  align-items:center;
  padding:8px 22px;
  margin-bottom:12px;
  color:#fff;
  font-weight:900;
  letter-spacing:.8px;
  font-size:24px;
  border-radius:12px;
  background:linear-gradient(180deg,#114bca,#071f6b);
  border:1px solid rgba(94,178,255,.75);
  box-shadow:0 0 18px rgba(25,132,255,.65), inset 0 0 18px rgba(255,255,255,.18);
  text-shadow:0 3px 0 rgba(0,0,0,.28);
}
h1{
  margin:0;
  font-size:clamp(44px,6.5vw,92px);
  line-height:1.02;
  letter-spacing:-2px;
  font-weight:1000;
  color:#fff;
  text-shadow:0 5px 0 rgba(0,20,90,.78),0 0 18px rgba(68,164,255,.7),0 0 44px rgba(14,98,255,.8);
}
h1 span{font-style:italic}
.host{
  margin:16px 0 22px;
  font-size:clamp(22px,2.6vw,34px);
  font-weight:900;
  color:var(--gold2);
  letter-spacing:1px;
  text-shadow:0 0 16px rgba(255,179,59,.45);
}
.flags{display:inline-block;margin-left:16px;letter-spacing:10px;font-size:.9em}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.date-pill{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 24px;
  min-width:290px;
  border-radius:15px;
  background:linear-gradient(180deg,rgba(0,0,0,.54),rgba(0,28,81,.72));
  border:1px solid rgba(70,158,255,.7);
  box-shadow:inset 0 0 16px rgba(0,98,255,.38),0 0 22px rgba(0,127,255,.3);
  font-size:26px;
}
.date-pill b{letter-spacing:1px}
.calendar-icon{color:#fff;font-size:24px;filter:drop-shadow(0 0 8px #5bc8ff)}
.primary-cta{
  position:relative;
  min-width:310px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:17px 34px;
  border-radius:20px;
  font-size:32px;
  font-weight:1000;
  color:#fff;
  background:linear-gradient(180deg,#42bdff,#075dff 56%,#0536a7);
  border:1px solid rgba(184,232,255,.9);
  box-shadow:0 0 24px rgba(0,156,255,.7),inset 0 0 20px rgba(255,255,255,.24);
  overflow:hidden;
  animation:pulseBtn 2.3s ease-in-out infinite;
}
.primary-cta:before,.btn:before{
  content:"";
  position:absolute;
  inset:-30% auto -30% -70%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-18deg);
  animation:btnSweep 3.1s ease-in-out infinite;
}
.primary-cta span{font-size:50px;line-height:.6}
.hero-visual{position:relative;min-height:230px;display:grid;place-items:center}
.globe-orbit{
  position:absolute;
  width:min(390px,38vw);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 35%,rgba(141,223,255,.95),rgba(0,97,255,.35) 32%,rgba(0,11,50,.75) 62%,rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(129,216,255,.3) 20px 22px),
    repeating-linear-gradient(90deg,transparent 0 24px,rgba(129,216,255,.22) 25px 27px);
  border:1px solid rgba(101,215,255,.95);
  box-shadow:0 0 28px rgba(40,188,255,.82),inset 0 0 34px rgba(0,20,77,.75),0 0 70px rgba(0,70,255,.52);
  animation:float 4.2s ease-in-out infinite, rotateGlow 16s linear infinite;
}
.globe-orbit:before,.globe-orbit:after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(115,207,255,.45);transform:rotate(18deg) scaleX(1.16);
}
.globe-orbit:after{transform:rotate(-24deg) scaleX(1.26);opacity:.55}
.trophy-wrap{position:relative;display:grid;place-items:center;z-index:2;filter:drop-shadow(0 0 28px rgba(255,198,90,.65))}
.trophy-cup{font-size:142px;animation:trophyFloat 3.2s ease-in-out infinite;text-shadow:0 0 18px rgba(255,214,111,.7)}
.football{position:absolute;right:-62px;bottom:-12px;font-size:76px;animation:ballSpin 5s linear infinite;filter:drop-shadow(0 0 18px rgba(0,166,255,.9))}
.benefit-bar{
  position:relative;
  margin:14px 0 12px;
  border-radius:12px;
  overflow:hidden;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:12px;
  padding:10px 18px;
  font-size:20px;
  font-weight:800;
}
.benefit-bar div{white-space:nowrap;text-shadow:0 0 8px rgba(0,162,255,.55)}
.benefit-bar span{font-size:24px;margin-right:8px;filter:drop-shadow(0 0 8px rgba(255,191,93,.7))}
.benefit-bar b{color:var(--gold);font-size:1.2em}
.benefit-bar i{height:30px;width:1px;background:linear-gradient(transparent,#7dbdff,transparent)}
.rank-section{display:grid;gap:14px}
.brand-card{
  position:relative;
  overflow:hidden;
  min-height:200px;
  border-radius:18px;
  padding:22px 28px;
  display:grid;
  grid-template-columns:280px 1fr 240px;
  align-items:center;
  gap:28px;
  transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.brand-card:hover{transform:translateY(-4px);border-color:#d4f4ff;box-shadow:0 0 0 1px rgba(141,222,255,.35) inset,0 0 42px rgba(0,158,255,.68),0 0 110px rgba(0,86,255,.36)}
.brand-card.featured{min-height:290px;grid-template-columns:330px 1fr 360px}
.rank-badge{
  position:relative;
  z-index:2;
  width:235px;
  height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(145deg,#0b1d45 0%,#06102d 55%,#12366f 100%);
  clip-path:polygon(50% 0,94% 16%,86% 82%,50% 100%,14% 82%,6% 16%);
  border:3px solid transparent;
  box-shadow:0 0 20px rgba(255,195,88,.35), inset 0 0 32px rgba(0,0,0,.4);
}
.rank-badge:before{content:"♛";position:absolute;top:-2px;font-size:42px;color:var(--gold);filter:drop-shadow(0 0 8px rgba(255,208,82,.9))}
.rank-badge:after{content:"";position:absolute;inset:7px;clip-path:inherit;border:2px solid rgba(255,201,89,.8);filter:drop-shadow(0 0 8px rgba(255,184,61,.6))}
.rank-badge span{
  margin-top:18px;
  font-size:84px;
  line-height:.86;
  font-weight:1000;
  color:var(--gold2);
  text-shadow:0 4px 0 #6c3d0f,0 0 16px rgba(255,207,95,.74);
}
.rank-badge em{font-style:normal;color:var(--gold);font-size:30px;font-weight:1000;letter-spacing:1px}
.rank-badge.small{width:132px;height:122px}
.rank-badge.small:before{font-size:28px}
.rank-badge.small span{font-size:46px;margin-top:12px}
.rank-badge.small em{font-size:18px}
.brand-content{position:relative;z-index:3;min-width:0}
.brand-logo{
  width:max-content;
  max-width:100%;
  height:62px;
  padding:8px 24px;
  margin-bottom:8px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(180deg,#fff,#e8f2ff);
  box-shadow:0 7px 20px rgba(0,0,0,.22),0 0 18px rgba(46,154,255,.38);
  color:#1040a1;
}
.brand-logo span{font-size:34px;font-weight:1000;font-style:italic;color:#1388ff;line-height:1;letter-spacing:-2px}
.brand-logo strong{font-size:28px;line-height:.82;letter-spacing:.6px}.brand-logo small{font-size:11px;letter-spacing:.5px}.brand-logo.xingkong span{font-size:42px;color:#266fe8}.brand-logo.haobo span{font-size:28px;color:#1c6dff;letter-spacing:-1px}
.brand-content h2{margin:4px 0 4px;font-size:clamp(36px,5vw,66px);line-height:1;font-weight:1000;letter-spacing:1px;text-shadow:0 4px 0 rgba(0,25,91,.8),0 0 18px rgba(55,153,255,.7)}
.small-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.small-cards .brand-card{grid-template-columns:140px 1fr 90px;min-height:215px;padding:18px 20px}.small-cards .brand-content h2{font-size:36px}.small-cards .brand-logo{height:60px;padding:8px 20px}.small-cards .brand-logo strong{font-size:22px}.brand-content p{margin:0 0 10px;color:#e7f3ff;font-size:17px;font-weight:700;line-height:1.45;text-shadow:0 0 9px rgba(0,141,255,.54)}
.rating{display:flex;align-items:center;gap:18px;margin-bottom:12px}.rating b{font-size:34px;color:var(--gold);font-weight:1000;text-shadow:0 0 14px rgba(255,202,98,.6)}.rating span{font-size:28px;color:var(--gold);letter-spacing:5px;text-shadow:0 0 12px rgba(255,198,95,.7)}
.btn-group{display:flex;gap:12px;flex-wrap:wrap}.btn{position:relative;overflow:hidden;min-width:210px;height:46px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;padding:0 26px;font-size:22px;font-weight:1000;border:1px solid rgba(183,226,255,.72);box-shadow:0 0 18px rgba(0,139,255,.36),inset 0 0 16px rgba(255,255,255,.14);transition:transform .2s ease,filter .2s ease}.btn:hover{transform:translateY(-2px);filter:brightness(1.14)}.btn-blue{background:linear-gradient(180deg,#29b7ff,#005dff 62%,#053aa7)}.btn-dark{background:linear-gradient(180deg,rgba(16,28,64,.94),rgba(3,10,34,.96));color:#fff}.card-ball{position:relative;z-index:2;justify-self:center;align-self:end;font-size:122px;filter:drop-shadow(0 0 23px rgba(0,166,255,.95));animation:ballPulse 3.8s ease-in-out infinite}.small-cards .card-ball{font-size:70px;opacity:.92}

.host-stats{position:relative;margin-top:14px;border-radius:22px;overflow:hidden;padding:24px 26px;display:grid;grid-template-columns:160px 1fr 180px;align-items:center;gap:16px;min-height:146px;background:linear-gradient(90deg,rgba(3,18,60,.96),rgba(5,28,88,.86) 48%,rgba(3,18,60,.98));}
.host-stats:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(0,195,255,.16),transparent 38%),linear-gradient(90deg,rgba(255,255,255,.02),transparent 18%,transparent 82%,rgba(255,255,255,.02));}
.host-stats-content{position:relative;z-index:2;text-align:center}
.host-stats-numbers{display:flex;align-items:baseline;justify-content:center;gap:18px;flex-wrap:wrap}
.host-stats-numbers div{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.host-stats-numbers b{font-size:62px;line-height:1;color:#66ddff;font-weight:1000;text-shadow:0 0 18px rgba(75,211,255,.5)}
.host-stats-numbers span{font-size:28px;font-weight:900;color:#eef8ff;text-shadow:0 0 12px rgba(0,154,255,.36)}
.host-stats-numbers i{font-style:normal;color:rgba(255,255,255,.45);font-size:32px;font-weight:700;transform:translateY(-3px)}
.host-stats-content p{margin:12px 0 0;color:#a9caff;font-size:24px;line-height:1.35;text-shadow:0 0 10px rgba(0,154,255,.22)}
.host-stats-art{position:relative;z-index:2;height:90px}
.host-stats-art.left:before,.host-stats-art.left:after{content:"";position:absolute;left:0;right:0;margin:auto;border:2px solid rgba(84,205,255,.46);border-radius:50%;}
.host-stats-art.left:before{bottom:12px;width:130px;height:42px;transform:perspective(180px) rotateX(62deg)}
.host-stats-art.left:after{bottom:6px;width:150px;height:2px;border-radius:0;border-left:none;border-right:none;border-bottom:none;box-shadow:0 0 16px rgba(80,205,255,.28)}
.host-stats-art.left{background:radial-gradient(circle at 22% 40%,rgba(104,212,255,.18),transparent 26%)}
.host-stats-art.left .dummy{display:none}
.host-stats-art.right{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;padding-right:8px}
.host-stats-art.right:before{content:"";position:absolute;bottom:12px;right:18px;width:140px;height:74px;background:linear-gradient(180deg,transparent 0 14%,rgba(84,205,255,.45) 14% 16%,transparent 16% 100%),linear-gradient(90deg,rgba(84,205,255,.46) 0 2px,transparent 2px 24px,rgba(84,205,255,.46) 24px 26px,transparent 26px 46px,rgba(84,205,255,.46) 46px 48px,transparent 48px 70px,rgba(84,205,255,.46) 70px 72px,transparent 72px 92px,rgba(84,205,255,.46) 92px 94px,transparent 94px 112px,rgba(84,205,255,.46) 112px 114px,transparent 114px 132px,rgba(84,205,255,.46) 132px 134px,transparent 134px),linear-gradient(0deg,rgba(84,205,255,.46) 0 2px,transparent 2px);
clip-path:polygon(0 100%,0 52%,16% 52%,16% 70%,32% 70%,32% 26%,48% 26%,48% 62%,64% 62%,64% 10%,80% 10%,80% 40%,96% 40%,96% 100%);opacity:.9;filter:drop-shadow(0 0 8px rgba(84,205,255,.28));}
.countdown{position:relative;margin-top:14px;border-radius:16px;overflow:hidden;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.countdown-title{font-size:22px;font-weight:900;color:#e9f7ff}.timer{display:flex;gap:10px}.timer div{min-width:72px;padding:10px 12px;text-align:center;border-radius:12px;background:linear-gradient(180deg,rgba(0,124,255,.34),rgba(0,11,43,.8));border:1px solid rgba(108,190,255,.58);box-shadow:inset 0 0 16px rgba(0,119,255,.32)}.timer b{display:block;color:#fff;font-size:24px}.timer span{color:var(--gold2);font-size:12px;font-weight:900}.countdown p{margin:0;color:#b7d8ff;font-size:14px}.meteor{position:fixed;z-index:1;width:180px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(0,178,255,.7),transparent);filter:drop-shadow(0 0 8px #7ccfff);opacity:.7;transform:rotate(-28deg);pointer-events:none}.meteor-a{top:10%;left:80%;animation:meteor 5.8s linear infinite}.meteor-b{top:19%;left:52%;animation:meteor 7.3s 1.2s linear infinite}.meteor-c{top:6%;left:30%;animation:meteor 8.8s 2.6s linear infinite}
@keyframes shine{0%,44%{transform:translateX(-125%)}64%,100%{transform:translateX(135%)}}
@keyframes btnSweep{0%,42%{left:-70%}72%,100%{left:130%}}
@keyframes pulseBtn{0%,100%{box-shadow:0 0 22px rgba(0,156,255,.72),inset 0 0 20px rgba(255,255,255,.22)}50%{box-shadow:0 0 38px rgba(0,194,255,.98),inset 0 0 32px rgba(255,255,255,.32)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes trophyFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes rotateGlow{to{filter:hue-rotate(18deg)}}
@keyframes ballSpin{to{transform:rotate(360deg)}}
@keyframes ballPulse{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.05) rotate(4deg)}}
@keyframes meteor{0%{transform:translate3d(0,0,0) rotate(-28deg);opacity:0}8%{opacity:.92}100%{transform:translate3d(-120vw,62vh,0) rotate(-28deg);opacity:0}}
.host-stats-placeholder{}
@media (max-width:1120px){.hero-panel{grid-template-columns:1fr;padding:25px}.hero-visual{min-height:220px}.globe-orbit{width:340px}.brand-card,.brand-card.featured{grid-template-columns:160px 1fr;gap:18px}.brand-card.featured .card-ball{position:absolute;right:26px;bottom:12px;font-size:92px;opacity:.7}.small-cards{grid-template-columns:1fr}.small-cards .brand-card{grid-template-columns:140px 1fr}.small-cards .card-ball{position:absolute;right:18px;bottom:10px;opacity:.45}.benefit-bar{overflow-x:auto;justify-content:flex-start}.benefit-bar::-webkit-scrollbar{display:none}.countdown{flex-direction:column;align-items:flex-start}.timer{width:100%;justify-content:space-between}.timer div{flex:1}.host-stats{grid-template-columns:120px 1fr 120px;padding:20px 18px}.host-stats-numbers{gap:10px}.host-stats-numbers b{font-size:46px}.host-stats-numbers span{font-size:22px}.host-stats-content p{font-size:18px}.host-stats-art.left:before{width:92px;height:28px}.host-stats-art.right:before{width:96px;height:58px;right:10px}}
@media (max-width:680px){.page-shell{width:min(94vw,520px);padding:16px 0 28px}.hero-panel{border-radius:15px;padding:18px 16px}.tagline{font-size:16px;padding:7px 14px}h1{font-size:38px;letter-spacing:-1px}.host{font-size:18px;line-height:1.4}.flags{display:block;margin:8px 0 0;letter-spacing:6px}.hero-actions{gap:12px}.date-pill,.primary-cta{width:100%;min-width:0}.date-pill{font-size:19px;padding:12px 14px}.primary-cta{font-size:24px;padding:14px 20px}.hero-visual{min-height:166px}.globe-orbit{width:230px}.trophy-cup{font-size:94px}.football{font-size:48px;right:-30px}.benefit-bar{font-size:16px;border-radius:10px}.brand-card,.brand-card.featured,.small-cards .brand-card{display:block;min-height:auto;padding:18px 16px 22px}.rank-badge,.rank-badge.small{width:112px;height:100px;float:left;margin:0 14px 8px 0}.rank-badge span,.rank-badge.small span{font-size:40px}.rank-badge em,.rank-badge.small em{font-size:16px}.rank-badge:before,.rank-badge.small:before{font-size:24px}.brand-logo{height:auto;min-height:56px;padding:8px 14px}.brand-logo strong{font-size:20px}.brand-logo span{font-size:28px}.brand-content h2,.small-cards .brand-content h2{font-size:34px;clear:none}.brand-content p{font-size:14px}.rating{gap:10px}.rating b{font-size:28px}.rating span{font-size:18px;letter-spacing:2px}.btn-group{display:grid;grid-template-columns:1fr 1fr;width:100%;clear:both}.btn{min-width:0;height:44px;font-size:17px;padding:0 10px}.brand-card.featured .card-ball,.small-cards .card-ball,.card-ball{display:none}.timer{gap:6px}.timer div{min-width:0;padding:8px 5px}.timer b{font-size:20px}.host-stats{grid-template-columns:1fr;padding:18px 14px;gap:10px;min-height:auto}.host-stats-art{display:none}.host-stats-numbers{gap:8px 10px}.host-stats-numbers div{gap:6px}.host-stats-numbers b{font-size:34px}.host-stats-numbers span{font-size:18px}.host-stats-numbers i{font-size:20px;transform:none}.host-stats-content p{font-size:15px;line-height:1.5}}


/* ===== Compact layout v3：整体模板缩小 ===== */
@media (min-width: 681px){
  .page-shell{
    width:min(1220px,92vw);
    padding:18px 0 30px;
  }

  .hero-panel{
    min-height:230px;
    padding:20px 34px;
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.86fr);
    gap:18px;
    border-radius:16px;
  }
  .tagline{
    font-size:19px;
    padding:6px 18px;
    margin-bottom:8px;
  }
  h1{
    font-size:clamp(36px,5vw,68px);
    letter-spacing:-1.2px;
  }
  .host{
    margin:10px 0 16px;
    font-size:clamp(20px,2vw,27px);
  }
  .date-pill{
    min-width:230px;
    padding:11px 18px;
    font-size:21px;
    border-radius:13px;
  }
  .primary-cta{
    min-width:245px;
    padding:12px 28px;
    font-size:26px;
    border-radius:16px;
  }
  .primary-cta span{font-size:38px}
  .hero-visual{min-height:185px}
  .globe-orbit{width:min(300px,30vw)}
  .trophy-cup{font-size:108px}
  .football{font-size:56px;right:-42px}

  .benefit-bar{
    min-height:46px;
    margin:10px 0;
    padding:8px 14px;
    font-size:17px;
    border-radius:10px;
  }
  .benefit-bar span{font-size:20px}

  .rank-section{gap:10px}
  .brand-card{
    min-height:166px;
    padding:16px 22px;
    grid-template-columns:220px 1fr 175px;
    gap:18px;
    border-radius:15px;
  }
  .brand-card.featured{
    min-height:230px;
    grid-template-columns:260px 1fr 260px;
  }
  .rank-badge{
    width:180px;
    height:145px;
  }
  .rank-badge span{font-size:64px}
  .rank-badge em{font-size:24px}
  .rank-badge:before{font-size:34px}
  .brand-logo{
    height:52px;
    padding:7px 18px;
    margin-bottom:6px;
  }
  .brand-logo span{font-size:29px}
  .brand-logo strong{font-size:23px}
  .brand-content h2{
    font-size:clamp(32px,4vw,52px);
  }
  .brand-content p{
    font-size:15px;
    margin-bottom:8px;
  }
  .rating{gap:13px;margin-bottom:9px}
  .rating b{font-size:28px}
  .rating span{font-size:23px;letter-spacing:4px}
  .btn{
    min-width:170px;
    height:40px;
    font-size:19px;
    border-radius:13px;
  }
  .card-ball{font-size:92px}
  .small-cards{gap:10px}
  .small-cards .brand-card{
    grid-template-columns:112px 1fr 70px;
    min-height:170px;
    padding:15px 17px;
  }
  .rank-badge.small{
    width:105px;
    height:96px;
  }
  .rank-badge.small span{font-size:36px}
  .rank-badge.small em{font-size:15px}
  .small-cards .brand-logo{
    height:50px;
    padding:7px 16px;
  }
  .small-cards .brand-logo strong{font-size:18px}
  .small-cards .brand-content h2{font-size:30px}
  .small-cards .card-ball{font-size:54px}

  .host-stats{
    margin-top:10px;
    min-height:118px;
    padding:18px 22px;
    grid-template-columns:135px 1fr 150px;
    border-radius:18px;
  }
  .host-stats-art{height:72px}
  .host-stats-numbers b{font-size:48px}
  .host-stats-numbers span{font-size:23px}
  .host-stats-numbers i{font-size:25px}
  .host-stats-content p{font-size:20px;margin-top:8px}
  .host-stats-art.left:before{width:110px;height:34px}
  .host-stats-art.left:after{width:128px}
  .host-stats-art.right:before{width:116px;height:62px;right:14px}
}


/* ===== Tidy layout v4：排版更整齐 ===== */
@media (min-width: 681px){
  .rank-section{gap:14px}

  .brand-card,
  .small-cards .brand-card,
  .brand-card.featured{
    align-items:center;
  }

  .brand-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-self:stretch;
    padding:2px 0;
  }

  .brand-content h2{
    margin:6px 0 6px;
    line-height:1.05;
  }

  .brand-content p{
    min-height:2.8em;
    display:flex;
    align-items:flex-start;
    margin-bottom:8px;
  }

  .rating{
    margin-bottom:10px;
    min-height:34px;
  }

  .btn-group{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    margin-top:auto;
  }

  .btn{
    min-width:156px;
    flex:0 0 auto;
  }

  .brand-card.featured .btn{
    min-width:172px;
  }

  .small-cards .brand-content p{
    min-height:2.8em;
    font-size:14px;
    line-height:1.4;
  }

  .small-cards .btn{
    min-width:148px;
    font-size:18px;
  }

  .small-cards .brand-card{
    min-height:184px;
  }

  .small-cards .card-ball,
  .brand-card.featured .card-ball{
    justify-self:center;
    align-self:center;
    opacity:.78;
  }

  .host-stats{
    grid-template-columns:110px 1fr 118px;
    gap:12px;
    padding:16px 20px;
    min-height:106px;
  }

  .host-stats-content{
    max-width:100%;
  }

  .host-stats-numbers{
    gap:12px;
    flex-wrap:nowrap;
  }

  .host-stats-numbers div{
    gap:6px;
  }

  .host-stats-numbers b{
    font-size:42px;
  }

  .host-stats-numbers span{
    font-size:18px;
  }

  .host-stats-numbers i{
    font-size:20px;
    opacity:.7;
    transform:translateY(-1px);
  }

  .host-stats-content p{
    margin-top:6px;
    font-size:16px;
    line-height:1.4;
    white-space:normal;
    word-break:keep-all;
  }

  .host-stats-art{
    height:58px;
  }

  .host-stats-art.left:before{
    width:88px;
    height:26px;
    bottom:12px;
  }

  .host-stats-art.left:after{
    width:106px;
    bottom:8px;
  }

  .host-stats-art.right:before{
    width:90px;
    height:48px;
    right:8px;
    bottom:10px;
  }
}


/* ===== Uniform cards v5：3个卡片统一按第一个排版 ===== */
@media (min-width: 681px){
  .small-cards{display:contents !important;}
  .rank-section{display:grid;gap:14px;}
  .rank-section > .brand-card.featured{
    min-height:210px;
    grid-template-columns:220px 1fr 180px;
    padding:16px 22px;
    gap:18px;
  }
  .rank-section > .brand-card.featured .rank-badge{
    width:180px;
    height:145px;
  }
  .rank-section > .brand-card.featured .rank-badge span{font-size:64px;}
  .rank-section > .brand-card.featured .rank-badge em{font-size:24px;}
  .rank-section > .brand-card.featured .brand-logo{height:52px;padding:7px 18px;margin-bottom:6px;}
  .rank-section > .brand-card.featured .brand-logo strong{font-size:23px;}
  .rank-section > .brand-card.featured .brand-logo span{font-size:29px;}
  .rank-section > .brand-card.featured .brand-content h2{font-size:48px;}
  .rank-section > .brand-card.featured .brand-content p{font-size:15px;min-height:auto;}
  .rank-section > .brand-card.featured .rating b{font-size:28px;}
  .rank-section > .brand-card.featured .rating span{font-size:23px;letter-spacing:4px;}
  .rank-section > .brand-card.featured .btn{min-width:170px;height:40px;font-size:19px;}
  .rank-section > .brand-card.featured .card-ball{font-size:84px;opacity:.82;align-self:center;justify-self:center;}
}