/* ============================================================
   FC2026 球迷社群 · 冠军夜金属感 · shared design system
   ============================================================ */
:root{
  --pitch-0:#04140c;
  --pitch-1:#0b3a26;
  --pitch-2:#072a1b;
  --pitch-card:#03110a;
  --gold:#e8b75d;
  --gold-hi:#fbe7a6;
  --gold-deep:#b8893a;
  --gold-line:rgba(232,183,93,.26);
  --gold-line-2:rgba(232,183,93,.14);
  --ink:#eafff2;
  --text:#e9f3ec;
  --muted:rgba(214,236,224,.62);
  --faint:rgba(214,236,224,.42);
  --ember:#ff7a52;
  --maxw:480px;
  --font-zh:"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Noto Sans SC",var(--font-zh);
  --font-num:"Bebas Neue",var(--font-zh);
  --font-en:"Oswald",var(--font-zh);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-zh);
  color:var(--text);
  background:var(--pitch-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ===== page bg : pitch + gold glow ===== */
.bg-field{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -6%,rgba(232,183,93,.16) 0%,transparent 52%),
    radial-gradient(100% 50% at 50% 4%,rgba(120,210,160,.07) 0%,transparent 58%),
    linear-gradient(180deg,#062013 0%,#04140c 42%,#020c07 100%);
}
.bg-field::after{ /* faint pitch stripes */
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 78px,rgba(255,255,255,.012) 78px 156px);
}
.dust{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.dust i{position:absolute;border-radius:50%;background:var(--gold-hi);}

/* ===== athletes (decorative silhouettes) ===== */
.decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ath{position:absolute;width:230px;height:300px;opacity:.16;
  filter:drop-shadow(0 0 16px rgba(232,183,93,.45));}
.ath svg{width:100%;height:100%;display:block;}
.ath.flip svg{transform:scaleX(-1);}
.ath.lg{width:300px;height:380px;}
.ath.sm{width:180px;height:240px;}

/* ===== shell ===== */
.wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 22px;z-index:2;}
section{position:relative;z-index:2;}

/* ===== type helpers ===== */
.gold-text{
  background:linear-gradient(176deg,#fff6db 0%,#fbe7a6 28%,#e8b75d 56%,#b8893a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.eyebrow{font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);}
.sec-label{display:flex;align-items:center;gap:10px;font-family:var(--font-en);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);}
.sec-label .ln{flex:1;height:1px;background:var(--gold-line);}
.sec-title{font-family:var(--font-display);font-size:23px;line-height:1.18;color:#fff;letter-spacing:.5px;margin-top:9px;}
.sec-sub{font-size:12.5px;line-height:1.65;color:var(--muted);margin-top:6px;}

/* ===== CTA ===== */
.cta-primary{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:14px;border-radius:12px;border:none;cursor:pointer;overflow:hidden;text-decoration:none;
  font-family:var(--font-zh);font-weight:800;font-size:15px;color:#1c1305;letter-spacing:.04em;
  background:linear-gradient(135deg,#fff2cf 0%,#fbe7a6 24%,#e8b75d 56%,#c79338 100%);
  box-shadow:0 10px 26px -8px rgba(232,183,93,.6),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cta-primary:active{transform:translateY(1px) scale(.995);}
.cta-primary .ar{font-family:var(--font-en);font-weight:600;}
.cta-primary::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);animation:sweep 3.8s ease-in-out infinite;}
@keyframes sweep{0%,55%{left:-60%}82%,100%{left:135%}}
.cta-second{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:9px;
  padding:11px;border-radius:11px;cursor:pointer;text-decoration:none;background:rgba(232,183,93,.04);
  border:1px solid var(--gold-line);color:var(--gold);
  font-family:var(--font-zh);font-weight:600;font-size:13px;transition:background .15s ease;
}
.cta-second:active{background:rgba(232,183,93,.1);}

/* ===== sticky dock ===== */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:flex;gap:10px;justify-content:center;
  background:linear-gradient(180deg,rgba(2,12,7,0) 0%,rgba(2,12,7,.86) 32%,rgba(2,12,7,.97) 100%);
  backdrop-filter:blur(6px);
}
.dock .inner{display:flex;gap:10px;width:100%;max-width:var(--maxw);}
.dock a{display:flex;align-items:center;justify-content:center;gap:7px;height:52px;border-radius:13px;text-decoration:none;
  font-family:var(--font-zh);font-weight:800;letter-spacing:.02em;}
.dock .d-primary{flex:1;color:#1c1305;font-size:16px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#fbe7a6,#e8b75d 56%,#c79338);
  box-shadow:0 8px 22px -8px rgba(232,183,93,.7);}
.dock .d-primary::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:sweep 3.8s ease-in-out infinite;}
.dock .d-second{flex:0 0 116px;color:var(--gold);font-size:14px;font-weight:700;
  background:rgba(8,26,17,.9);border:1px solid var(--gold-line);}

/* keep content clear of dock */
.dock-pad{height:96px;}

/* ===== compliance footer ===== */
.foot{position:relative;z-index:2;border-top:1px solid var(--gold-line-2);background:#020c07;margin-top:8px;}
.foot .fin{max-width:var(--maxw);margin:0 auto;padding:30px 22px 40px;}
.foot .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-line);padding:6px 12px;border-radius:8px;margin-bottom:18px;}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.foot li{position:relative;padding-left:16px;font-size:11.5px;line-height:1.65;color:var(--faint);}
.foot li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:1px;background:var(--gold-deep);transform:rotate(45deg);}
.foot .barline{margin-top:22px;padding-top:16px;border-top:1px solid var(--gold-line-2);
  font-family:var(--font-en);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;}

/* ===== utilities ===== */
.center{text-align:center;}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;
  border:1px solid var(--gold-line);background:rgba(232,183,93,.05);
  font-family:var(--font-en);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-hi);}
.pill b{font-weight:600;color:var(--gold);}
.urg{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;
  background:rgba(214,77,60,.13);border:1px solid rgba(232,120,90,.34);font-size:12px;color:#ffd9c9;font-weight:600;}
.urg .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);animation:pulse 1.4s infinite;}
@keyframes pulse{50%{opacity:.35}}

/* ===== reveal on scroll ===== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .cta-primary::after,.dock .d-primary::after{animation:none;}
}

/* ===== desktop: reveal side athletes in the margins ===== */
@media (max-width:1040px){
  .decor .side{display:none;}
}
@media (min-width:1041px){
  .decor .side.s-l{left:calc(50% - 560px);}
  .decor .side.s-r{right:calc(50% - 560px);}
}