/* =========================================================================
   九个一战队 NINE ONES · 官方主页样式
   配色取自主队标 C「赤锋」：红黑 + 斜切带
   改色只需动下面的 :root 变量
   ========================================================================= */

:root{
  /* 品牌色 */
  --red:        #f0402e;
  --red-light:  #ff7a5c;
  --red-deep:   #7d0f0d;
  --red-dark:   #b81b16;

  /* 底色与面板 */
  --bg:         #08070a;
  --bg-2:       #0c0b10;
  --panel:      #121016;
  --panel-2:    #17141b;
  --line:       #2a2430;
  --line-red:   rgba(240,64,46,.38);

  /* 文字 */
  --txt:        #f3f5ff;
  --txt-2:      #c3c9dd;
  --dim:        #8b93a8;

  /* 尺寸 */
  --wrap:       1200px;
  --nav-h:      72px;
  --r:          14px;
  --r-sm:       9px;

  /* 字体 */
  --font: "Microsoft YaHei","PingFang SC","Noto Sans SC","Source Han Sans SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-disp: "Arial Black",Impact,"Bahnschrift SemiBold","Bahnschrift","Microsoft YaHei",sans-serif;

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --glow:   0 0 60px rgba(240,64,46,.35);
}

/* ------------------------------- 基础重置 ------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
h1,h2,h3,h4{ margin:0; line-height:1.25; font-weight:800; letter-spacing:.5px }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
button,input,select{ font:inherit; color:inherit }
code{ font-family:"Consolas","Cascadia Mono",ui-monospace,monospace; font-size:.92em }
em,i{ font-style:normal }
::selection{ background:var(--red); color:#fff }

:focus-visible{
  outline:2px solid var(--red-light);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--red); color:#fff; padding:10px 18px; border-radius:0 0 8px 8px;
  transition:top .2s;
}
.skip-link:focus{ top:0 }

.wrap{ width:min(var(--wrap), 100% - 44px); margin-inline:auto }

/* 滚动条 */
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:#0a0910 }
::-webkit-scrollbar-thumb{ background:#2c2531; border-radius:6px; border:2px solid #0a0910 }
::-webkit-scrollbar-thumb:hover{ background:var(--red-deep) }

/* ------------------------------- 通用按钮 ------------------------------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  border:0; border-radius:0;
  background:var(--btn-bg);
  font-size:15px; font-weight:700; letter-spacing:1px; color:var(--txt);
  cursor:pointer; white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:0; box-shadow:inset 0 0 0 2px var(--red-light) }

.btn--primary{
  background:linear-gradient(135deg,var(--red-light) 0%, var(--red) 45%, var(--red-dark) 100%);
  color:#fff;
  box-shadow:0 10px 28px rgba(240,64,46,.35);
}
.btn--primary:hover{ box-shadow:0 14px 36px rgba(240,64,46,.5) }

.btn--ghost{
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1.5px var(--line);
  color:var(--txt);
}
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--line-red); background:rgba(240,64,46,.1) }

.btn--sm{ padding:10px 18px; font-size:13.5px }
.btn--xs{ padding:7px 13px; font-size:12.5px; letter-spacing:.5px }

/* ------------------------------- 顶部导航 ------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.is-scrolled{
  background:rgba(8,7,10,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 12px 40px rgba(0,0,0,.45);
}
.nav__inner{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:18px }

.brand{ display:flex; align-items:center; gap:11px }
.brand__mark{
  width:44px; height:44px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(240,64,46,.45), 0 6px 18px rgba(240,64,46,.3);
  transition:transform .4s ease;
}
.brand:hover .brand__mark{ transform:rotate(24deg) scale(1.06) }
.brand__text{ display:flex; flex-direction:column; line-height:1.15 }
.brand__text b{ font-size:16.5px; letter-spacing:2px }
.brand__text i{ font-family:var(--font-disp); font-size:10.5px; letter-spacing:3px; color:var(--red) }

.nav__menu{ display:flex; align-items:center; gap:6px }
.nav__menu a{
  position:relative; padding:9px 14px; font-size:15px; color:var(--txt-2);
  transition:color .2s ease;
}
.nav__menu a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav__menu a:hover{ color:var(--txt) }
.nav__menu a:hover::after,
.nav__menu a.is-active::after{ transform:scaleX(1) }
.nav__menu a.is-active{ color:var(--txt) }
.nav__cta{
  margin-left:8px; color:#fff !important;
  background:linear-gradient(135deg,var(--red-light),var(--red));
  box-shadow:0 8px 22px rgba(240,64,46,.35);
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.nav__cta::after{ display:none }

.nav__toggle{
  display:none; width:44px; height:38px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); cursor:pointer; padding:10px 11px;
}
.nav__toggle span{
  display:block; height:2px; background:var(--txt); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav__toggle span + span{ margin-top:5px }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0 }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ------------------------------- 首屏 ------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 70px) 0 0;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(240,64,46,.22) 0%, transparent 62%),
    radial-gradient(700px 500px at 8% 0%, rgba(125,15,13,.28) 0%, transparent 60%),
    linear-gradient(180deg,#0d0709 0%, var(--bg) 62%);
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
}
.hero__glow{
  position:absolute; width:760px; height:760px; right:-160px; top:-220px;
  background:radial-gradient(circle, rgba(240,64,46,.30) 0%, rgba(240,64,46,.06) 45%, transparent 70%);
  filter:blur(10px);
}
.hero__slashes{
  position:absolute; inset:auto 0 0 0; height:340px;
  background:repeating-linear-gradient(115deg, rgba(240,64,46,.075) 0 3px, transparent 3px 22px);
  mask-image:linear-gradient(to top, #000, transparent);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
}
.hero__inner{
  position:relative; display:grid; grid-template-columns:1.06fr .94fr;
  gap:56px; align-items:center;
  padding-bottom:38px;
}
.hero__kicker{
  font-family:var(--font-disp); font-size:13px; letter-spacing:3.4px; color:var(--red-light);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.hero__kicker span{ color:var(--dim) }
.hero__kicker::before{ content:""; width:38px; height:2px; background:var(--red) }
.hero__title{
  font-size:clamp(40px, 7.4vw, 78px); font-weight:900; letter-spacing:4px;
  background:linear-gradient(180deg,#fff 30%, #ffd9d1 78%, #ffb3a5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 44px rgba(240,64,46,.28);
}
.hero__slogan{
  margin-top:12px; font-size:clamp(17px,2.3vw,23px); font-weight:700; color:var(--red-light);
  letter-spacing:1px;
}
.hero__slogan::after{
  content:""; display:inline-block; width:56px; height:3px; margin-left:14px; vertical-align:middle;
  background:linear-gradient(90deg,var(--red), transparent);
}
.hero__desc{ margin-top:22px; max-width:56ch; color:var(--txt-2); font-size:15.5px; line-height:1.95 }
.hero__btns{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px }

.hero__logo{ position:relative; justify-self:center; width:min(400px, 78vw) }
.hero__logo img{
  position:relative; z-index:2; width:100%; height:auto;
  filter:drop-shadow(0 26px 54px rgba(240,64,46,.42)) drop-shadow(0 6px 20px rgba(0,0,0,.7));
  animation:float 7s ease-in-out infinite;
}
.hero__ring{
  position:absolute; inset:-7%; z-index:1; border-radius:50%;
  border:1px dashed rgba(240,64,46,.45);
  animation:spin 34s linear infinite;
}
.hero__ring--2{
  inset:-15%; border-style:solid; border-color:rgba(255,122,92,.16);
  animation:spin 52s linear infinite reverse;
}
.hero__ring--2::after{
  content:""; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px;
  border-radius:50%; background:var(--red); box-shadow:0 0 16px 4px rgba(240,64,46,.75);
}
.hero__badge{
  position:absolute; z-index:3; left:50%; bottom:-6px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px;
  padding:7px 15px; font-family:var(--font-disp); font-size:11.5px; letter-spacing:2.6px;
  background:rgba(10,8,11,.86); border:1px solid var(--line-red); border-radius:999px;
  backdrop-filter:blur(6px); white-space:nowrap;
}
.hero__badge i{ color:var(--red); letter-spacing:1px; font-family:var(--font); font-size:11px; font-weight:700 }

@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* 数据条 */
.stats{
  position:relative; margin-top:34px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  border-top:1px solid var(--line);
}
.stat{
  padding:26px 22px 30px; border-left:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
}
.stat:first-child{ border-left:0 }
.stat b{ font-family:var(--font-disp); font-size:clamp(28px,3.6vw,40px); color:#fff; letter-spacing:1px }
/* 段位不是数字，字号收小一点，避免窄屏放不下 */
.stat .stat__rank{ font-size:clamp(21px,2.5vw,30px); letter-spacing:0 }
.stat i{ color:var(--red); font-weight:700; font-size:15px }
.stat span{ width:100%; color:var(--dim); font-size:13.5px; letter-spacing:1.5px }

/* ------------------------------- 区块通用 ------------------------------- */
.section{ position:relative; padding:96px 0; scroll-margin-top:var(--nav-h) }
.section--alt{
  background:linear-gradient(180deg, var(--bg-2) 0%, #0a0910 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section--alt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(240,64,46,.045) 0 2px, transparent 2px 26px);
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.section > .wrap{ position:relative }

.sec-head{ margin-bottom:52px; max-width:760px }
.sec-head__kicker{
  font-family:var(--font-disp); font-size:12.5px; letter-spacing:3.6px; color:var(--red);
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.sec-head__kicker::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-red), transparent) }
.sec-head h2{ font-size:clamp(26px, 3.9vw, 42px); letter-spacing:2px }
.sec-head h2::after{
  content:""; display:block; width:70px; height:4px; margin-top:16px;
  background:linear-gradient(90deg,var(--red), var(--red-deep));
}
.sec-head__sub{ margin-top:16px; color:var(--dim); font-size:15px }

/* ------------------------------- 战队简介 ------------------------------- */
.about{ display:grid; grid-template-columns:1.45fr .95fr; gap:44px; align-items:start }
.about__text p{ color:var(--txt-2); font-size:15.5px; line-height:2; margin-bottom:18px }
.about__text b{ color:#fff }
.about__quote{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, rgba(240,64,46,.14), rgba(20,16,22,.9) 45%);
  border:1px solid var(--line-red); border-left:4px solid var(--red);
  border-radius:var(--r); padding:34px 30px 30px;
  box-shadow:var(--shadow);
}
.about__quote blockquote{
  margin:0; font-size:clamp(19px,2.3vw,25px); font-weight:800; line-height:1.7; letter-spacing:1px;
}
.about__quote cite{ display:block; margin-top:14px; color:var(--red-light); font-size:13.5px; letter-spacing:2px }
.about__quote-mark{
  position:absolute; right:18px; top:-14px; font-family:var(--font-disp);
  font-size:110px; line-height:1; color:rgba(240,64,46,.22); pointer-events:none;
}
.about__quote-logo{
  position:absolute; right:-26px; bottom:-30px; width:150px; opacity:.16; pointer-events:none;
}

.values{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.value{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px 28px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.value:hover{ transform:translateY(-5px); border-color:var(--line-red); box-shadow:0 18px 40px rgba(0,0,0,.5) }
.value__no{
  font-family:var(--font-disp); font-size:52px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(240,64,46,.45);
}
.value h3{ margin:14px 0 10px; font-size:18px; letter-spacing:2px }
.value p{ color:var(--dim); font-size:14.5px; line-height:1.9 }
.value::after{
  content:""; position:absolute; right:-60px; top:-60px; width:130px; height:130px;
  background:radial-gradient(circle, rgba(240,64,46,.20), transparent 70%);
}

/* ------------------------------- 队员名单 ------------------------------- */
/* 五个人：桌面一行三个、第二行两个居中；平板一行两个；手机一行一个 */
.roster{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px }
.player{
  flex:1 1 300px; max-width:calc((100% - 36px) / 3);
  display:flex; gap:16px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.player:hover{ transform:translateY(-4px); border-color:var(--line-red); background:var(--panel-2) }
.player__ava{
  flex:0 0 auto; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  font-size:24px; font-weight:800; color:#fff;
  background:linear-gradient(150deg, rgba(255,122,92,.9), var(--red-deep));
  box-shadow:0 0 0 2px rgba(240,64,46,.35), inset 0 -6px 14px rgba(0,0,0,.35);
  transition:box-shadow .25s ease, transform .25s ease;
}
.player:hover .player__ava{ transform:scale(1.06); box-shadow:0 0 0 3px var(--red), 0 8px 22px rgba(240,64,46,.4) }
.player__ava--coach{ background:linear-gradient(150deg,#4a4550,#191721); box-shadow:0 0 0 2px rgba(255,255,255,.18) }
.player__info{ min-width:0 }
.player__info h3{ font-size:17px; letter-spacing:1.5px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.player__info h3 em{ font-family:var(--font-disp); font-size:11px; letter-spacing:1.6px; color:var(--red-light) }
.player__tags{ margin-top:9px; display:flex; gap:7px; flex-wrap:wrap }
.tag{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; letter-spacing:1px; color:var(--txt-2);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.tag--red{ color:#fff; background:linear-gradient(135deg,var(--red-light),var(--red)); border-color:transparent }
.player__meta{ margin-top:9px; color:var(--dim); font-size:13px }

/* ------------------------------- 荣誉战绩 ------------------------------- */
.timeline{ position:relative; padding-left:6px }
.timeline::before{
  content:""; position:absolute; left:99px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg, var(--red), rgba(240,64,46,.08));
}
.tl{ position:relative; display:grid; grid-template-columns:88px 1fr; gap:34px; padding:0 0 30px }
.tl:last-child{ padding-bottom:0 }
.tl__year{
  font-family:var(--font-disp); font-size:22px; color:var(--red); text-align:right; letter-spacing:1px;
}
.tl__body{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 24px;
  transition:transform .22s ease, border-color .22s ease;
}
.tl__body::before{
  content:""; position:absolute; left:-40px; top:26px; width:12px; height:12px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 4px rgba(240,64,46,.18), 0 0 16px rgba(240,64,46,.7);
}
.tl:hover .tl__body{ transform:translateX(6px); border-color:var(--line-red) }
.tl__body h3{ font-size:17px; letter-spacing:1px; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.tl__body p{ margin-top:9px; color:var(--dim); font-size:14px }
.tl__rank{
  padding:3px 12px; border-radius:999px; font-size:12px; letter-spacing:1.5px;
  color:var(--txt-2); background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.tl__rank--gold{ color:#241a05; background:linear-gradient(135deg,#ffe9a3,#d99a26); border-color:transparent; font-weight:800 }
.tl__rank--silver{ color:#1b1f2a; background:linear-gradient(135deg,#f2f5ff,#a9b4cc); border-color:transparent; font-weight:800 }

/* ------------------------------- 赛程 ------------------------------- */
.matches{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.match{
  display:flex; flex-direction:column; gap:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; position:relative; overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.match::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--red),transparent);
}
.match:hover{ transform:translateY(-5px); border-color:var(--line-red); box-shadow:0 20px 44px rgba(0,0,0,.5) }
.match__when{ display:flex; align-items:baseline; gap:10px; padding-bottom:14px; border-bottom:1px dashed var(--line) }
.match__when b{ font-family:var(--font-disp); font-size:26px; color:#fff; letter-spacing:1px }
.match__when span{ color:var(--dim); font-size:13px }
.match__league{ color:var(--red-light); font-size:12.5px; letter-spacing:1.6px }
.match__main h3{ margin-top:8px; font-size:17px; letter-spacing:1px; line-height:1.6 }
.match__main h3 em{ color:var(--red); font-family:var(--font-disp); font-size:13px; padding:0 6px }
.match__side{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:auto }
.match__live{ color:var(--dim); font-size:12.5px }

/* ------------------------------- 队标素材 ------------------------------- */
.logos{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.logo-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.logo-card:hover{ transform:translateY(-5px); border-color:var(--line-red); box-shadow:0 20px 44px rgba(0,0,0,.5) }
.logo-card--main{ border-color:var(--line-red); box-shadow:0 0 0 1px rgba(240,64,46,.15), 0 18px 44px rgba(0,0,0,.45) }
.logo-card__badge{
  position:absolute; right:18px; top:18px; z-index:2;
  padding:4px 12px; border-radius:999px; font-size:11.5px; letter-spacing:1.5px; font-weight:700;
  background:linear-gradient(135deg,var(--red-light),var(--red)); color:#fff;
}
.logo-card__badge--ghost{ background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--txt-2) }
.logo-card__pic{
  display:grid; place-items:center; padding:18px; margin-bottom:18px;
  background:radial-gradient(circle at 50% 40%, #191320, #0a080d 70%);
  border:1px solid var(--line); border-radius:var(--r-sm);
}
.logo-card__pic img{ width:min(210px, 62%); height:auto; border-radius:50%; transition:transform .5s ease }
.logo-card:hover .logo-card__pic img{ transform:scale(1.05) rotate(-3deg) }
.logo-card__body h3{ font-size:17px; letter-spacing:1.5px }
.logo-card__body h3 em{ display:block; margin-top:5px; font-family:var(--font-disp); font-size:10.5px; letter-spacing:2.4px; color:var(--red) }
.logo-card__body p{ margin-top:12px; color:var(--dim); font-size:13.5px; line-height:1.9; min-height:76px }
.logo-card__acts{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px }
.logo-card__acts .btn{ flex:1; min-width:112px }

.brand-extra{ margin-top:44px; display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start }
.swatches,.usage{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:26px 26px 24px;
}
.swatches h3,.usage h3{ font-size:16.5px; letter-spacing:1.5px; margin-bottom:18px }
.swatches h3 i{ font-size:12px; color:var(--dim); letter-spacing:1px; margin-left:8px }
.swatches ul{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px }
.swatch{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:9px 12px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:13px; color:var(--txt-2); transition:border-color .2s ease, background .2s ease, color .2s;
}
.swatch:hover{ border-color:var(--line-red); background:rgba(240,64,46,.1); color:#fff }
.swatch span{ width:20px; height:20px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) }
/* 色卡色块：用 class 而不是内联 style，这样 Cloudflare 那边可以开严格 CSP（style-src 'self'） */
.chip--red{ background:#f0402e }
.chip--red-light{ background:#ff7a5c }
.chip--red-deep{ background:#7d0f0d }
.chip--ink{ background:#0b0d12 }
.chip--white{ background:#f3f5ff }
.swatches__tip{
  margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);
  color:var(--dim); font-size:13.5px; line-height:1.9;
}
.usage ul{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px }
.usage li{ position:relative; padding-left:20px; color:var(--dim); font-size:14px; line-height:1.85 }
.usage li::before{
  content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  background:var(--red); transform:rotate(45deg);
}
.usage li b{ color:var(--txt) }

/* ------------------------------- 加入我们 ------------------------------- */
.join{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px }
.join__need,.join__contact{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px;
}
.join__need h3,.join__contact h3{ font-size:17px; letter-spacing:1.5px; margin-bottom:16px }
.join__need h3 + .need-list + h3{ margin-top:28px }
.need-list{ display:flex; flex-direction:column; gap:12px }
.need-list li{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  color:var(--txt-2); font-size:14.5px;
  padding-bottom:12px; border-bottom:1px dashed var(--line);
}
.need-list li:last-child{ border-bottom:0; padding-bottom:0 }
.check-list{ margin-top:36px; display:flex; flex-direction:column; gap:12px }
.check-list li{ position:relative; padding-left:30px; color:var(--txt-2); font-size:14.5px; line-height:1.85 }
.check-list li::before{
  content:""; position:absolute; left:2px; top:8px; width:14px; height:8px;
  border-left:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg);
}
.join__tip{ color:var(--dim); font-size:14px; line-height:1.9; margin-bottom:20px }
.contact{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px }
.contact li{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:var(--r-sm);
}
.contact__label{ flex:0 0 auto; min-width:66px; white-space:nowrap; color:var(--red-light); font-size:13px; letter-spacing:1px }
.contact code{ flex:1; min-width:140px; color:var(--txt); word-break:break-all }
.contact .btn{ margin-left:auto }

/* ------------------------------- 页脚 ------------------------------- */
.footer{
  background:#06050a; border-top:1px solid var(--line);
  padding:56px 0 30px; position:relative; overflow:hidden;
}
.footer::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
}
.footer__inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap }
.footer__brand{ display:flex; align-items:center; gap:16px }
.footer__brand img{ width:56px; height:56px; border-radius:50%; box-shadow:0 0 0 2px rgba(240,64,46,.35) }
.footer__brand b{ font-size:16.5px; letter-spacing:2px }
.footer__brand p{ color:var(--red-light); font-size:13.5px; letter-spacing:2px; margin-top:4px }
.footer__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; max-width:520px }
.footer__nav a{ color:var(--dim); font-size:14px; transition:color .2s ease }
.footer__nav a:hover{ color:var(--red-light) }
.footer__bottom{
  margin-top:38px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.footer__bottom p{ color:var(--dim); font-size:13px }
.footer__tip{ color:#6b7280 !important }

/* ------------------------------- 浮动件 ------------------------------- */
.totop{
  position:fixed; right:26px; bottom:26px; z-index:90;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:rgba(12,10,15,.86); color:var(--txt); font-size:19px;
  border:1px solid var(--line-red); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .25s, color .25s;
}
.totop.is-show{ opacity:1; visibility:visible; transform:none }
.totop:hover{ background:var(--red); color:#fff }

.toast{
  position:fixed; left:50%; bottom:34px; z-index:120;
  transform:translate(-50%, 20px);
  padding:12px 22px; border-radius:999px; font-size:14px;
  background:rgba(12,10,15,.94); border:1px solid var(--line-red); color:var(--txt);
  box-shadow:var(--shadow); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.toast.is-show{ opacity:1; visibility:visible; transform:translate(-50%,0) }

/* ------------------------------- 滚动出场 ------------------------------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1) }
.js .reveal.in{ opacity:1; transform:none }

/* ------------------------------- 响应式 ------------------------------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; text-align:left }
  .hero__logo{ order:-1; width:min(300px, 62vw) }
  .about,.brand-extra,.join{ grid-template-columns:1fr }
  .values,.matches,.logos{ grid-template-columns:repeat(2,1fr) }
  .player{ max-width:calc((100% - 18px) / 2) }
  .logos .logo-card--main{ grid-column:1 / -1 }
  .logos .logo-card--main .logo-card__body p{ min-height:0 }
  .logo-card__body p{ min-height:0 }
  .timeline::before{ left:auto; right:auto }
}
@media (max-width:860px){
  :root{ --nav-h:64px }
  .nav{ background:rgba(8,7,10,.9); backdrop-filter:blur(12px) }
  .nav__toggle{ display:block }
  .nav__menu{
    position:absolute; left:0; right:0; top:var(--nav-h);
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(9,8,12,.98); border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:10px 22px 22px;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    max-height:calc(100vh - var(--nav-h)); overflow:auto;
  }
  .nav.is-open .nav__menu{ opacity:1; visibility:visible; transform:none }
  .nav__menu a{ padding:15px 4px; font-size:16px; border-bottom:1px solid rgba(255,255,255,.05) }
  .nav__menu a::after{ left:4px; right:auto; width:34px; bottom:9px }
  .nav__cta{ margin:16px 0 0; text-align:center }
  .hero{ padding-top:calc(var(--nav-h) + 44px) }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .stat:nth-child(3){ border-left:0 }
  .stat{ border-top:1px solid var(--line) }
  .stat:nth-child(-n+2){ border-top:0 }
  .section{ padding:72px 0 }
  .sec-head{ margin-bottom:38px }
  .values,.matches,.logos{ grid-template-columns:1fr }
  .timeline::before{ left:5px }
  .tl{ grid-template-columns:1fr; gap:12px; padding-left:26px }
  .tl__year{ text-align:left }
  .tl__body::before{ left:-26px; top:24px; width:10px; height:10px }
  .footer__inner{ flex-direction:column }
}
@media (max-width:520px){
  .wrap{ width:calc(100% - 32px) }
  .hero__kicker{ font-size:11px; letter-spacing:2px; gap:8px }
  .hero__kicker::before{ width:22px }
  .hero__btns .btn{ flex:1; min-width:140px }
  .stat{ padding:20px 14px 24px }
  .logo-card__acts .btn{ min-width:0 }
  .contact__label{ flex:0 0 100% }
  .contact .btn{ margin-left:0 }
  .player{ max-width:100% }
}

/* ------------------------------- 无障碍 / 打印 ------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .js .reveal{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}
@media print{
  .nav,.totop,.toast,.hero__ring,.hero__slashes,.hero__grid{ display:none !important }
  body{ background:#fff; color:#000 }
}