*{box-sizing:border-box}
:root{
  --bg:#f4f6f8;
  --white:#ffffff;
  --ink:#0d1117;
  --ink2:#161b22;
  --muted:#6d7681;
  --line:#dde2e7;
  --blue:#1677ff;
  --blue2:#0d5ed7;
  --cyan:#5ad8ff;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
.wrap{width:min(1180px,calc(100% - 36px));margin:0 auto}

/* HEADER */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #e7ebef
}
.header-inner{
  height:72px;
  display:flex;
  align-items:center;
  gap:28px
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.logo{width:38px;height:38px;object-fit:contain}
.logo-fallback{
  display:none;
  width:38px;height:38px;
  align-items:center;justify-content:center;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  font-size:12px;
  font-weight:900
}
.nav{
  margin-left:auto;
  display:flex;
  gap:27px;
  font-size:13px;
  font-weight:700;
  color:#64707c
}
.nav a:hover{color:var(--blue)}
.header-cta{
  background:var(--ink);
  color:#fff;
  padding:11px 17px;
  font-size:12px;
  font-weight:900
}
.menu-btn{display:none;margin-left:auto;border:0;background:none;font-size:26px}
.mobile-nav{display:none}

/* HERO */
.hero{
  background:#fff;
  padding:46px 0 0;
  border-bottom:1px solid var(--line)
}
.hero-topline{
  display:flex;
  justify-content:space-between;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  color:#78828d;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em
}
.hero-title{padding:52px 0 36px}
.hero-title h1{
  margin:0;
  font-size:clamp(70px,10vw,132px);
  line-height:.82;
  letter-spacing:-.07em
}
.hero-title h1 span{
  display:block;
  max-width:780px;
  margin-top:20px;
  font-size:.27em;
  line-height:1.04;
  letter-spacing:-.04em;
  color:#222933
}
.hero-bottom{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:70px;
  align-items:end;
  padding-bottom:52px
}
.hero-bottom p{
  max-width:760px;
  color:var(--muted);
  line-height:1.9;
  font-size:15px;
  margin:0
}
.hero-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px
}
.btn{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:0 21px;
  font-size:12px;
  font-weight:900
}
.primary{background:var(--blue);color:#fff}
.primary:hover{background:var(--blue2)}
.secondary{border:1px solid #bfc7ce;background:#fff}

/* DEVICE */
.device-strip{
  padding:0 0 74px;
  background:var(--bg)
}
.device-grid{
  transform:translateY(-1px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line)
}
.device-grid article{
  padding:22px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.device-grid span{
  color:var(--blue);
  font-size:9px;
  font-weight:900
}
.device-grid strong{
  display:block;
  margin-top:28px;
  font-size:23px
}
.device-grid p{
  margin:4px 0 0;
  color:#89929c;
  font-size:11px
}

/* CHAPTERS */
.chapters{
  padding:92px 0;
  background:#fff
}
.chapter-grid{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:60px
}
.chapter-nav{
  position:sticky;
  top:100px;
  align-self:start;
  border-top:1px solid var(--line);
  padding-top:16px
}
.chapter-nav>span{
  display:block;
  color:#9aa2aa;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:18px
}
.chapter-nav a{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  color:#5f6973;
  font-size:12px;
  font-weight:700
}
.chapter-nav a b{
  color:var(--blue);
  font-size:9px
}
.chapter-block{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:28px;
  padding:0 0 70px;
  margin-bottom:70px;
  border-bottom:1px solid var(--line)
}
.chapter-number{
  color:var(--blue);
  font-size:58px;
  font-weight:900;
  line-height:1
}
.chapter-copy>span{
  color:var(--blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em
}
.chapter-copy h2{
  max-width:760px;
  margin:8px 0 16px;
  font-size:clamp(35px,4vw,50px);
  line-height:1.06;
  letter-spacing:-.045em
}
.chapter-copy>p{
  color:var(--muted);
  font-size:15px;
  line-height:1.85;
  max-width:800px
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:28px
}
.detail-grid>div{
  border:1px solid var(--line);
  padding:24px
}
.detail-grid b{font-size:20px}
.detail-grid span{
  display:block;
  color:#939ba4;
  font-size:10px;
  margin-top:4px
}
.detail-grid p{
  color:var(--muted);
  line-height:1.7;
  font-size:13px
}
.chapter-block.dark{
  background:var(--ink);
  color:#fff;
  padding:40px 34px 34px;
  border-bottom:0
}
.chapter-block.dark .chapter-number{color:var(--cyan)}
.chapter-block.dark .chapter-copy>span{color:var(--cyan)}
.chapter-block.dark .chapter-copy>p{color:#a7b0ba}
.desktop-board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:30px;
  border-top:1px solid #2e3640;
  border-left:1px solid #2e3640
}
.desktop-board>div{
  padding:22px;
  border-right:1px solid #2e3640;
  border-bottom:1px solid #2e3640
}
.desktop-board strong{
  display:block;
  color:#fff;
  font-size:14px
}
.desktop-board span{
  display:block;
  color:#66717d;
  font-size:8px;
  margin-top:5px;
  letter-spacing:.1em
}

/* MODES */
.modes{
  padding:96px 0;
  background:var(--bg)
}
.modes-head{
  max-width:780px;
  margin-bottom:36px
}
.modes-head>span,
.tourney-heading>span,
.start-grid>div>span,
.faq-heading>span{
  color:var(--blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em
}
.modes-head h2,
.tourney-heading h2,
.start-grid h2,
.faq-heading h2{
  margin:8px 0 0;
  font-size:clamp(36px,4.5vw,54px);
  line-height:1.05;
  letter-spacing:-.045em
}
.modes-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-areas:
    "a b c"
    "a d d";
  gap:12px
}
.modes-grid article{
  min-height:260px;
  padding:26px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff
}
.mode-a{grid-area:a;min-height:532px!important;background:var(--ink)!important;color:#fff}
.mode-b{grid-area:b}
.mode-c{grid-area:c}
.mode-d{grid-area:d}
.mode-meta{
  display:flex;
  justify-content:space-between;
  color:#89929c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em
}
.mode-a .mode-meta{color:#72808d}
.modes-grid h3{
  margin:60px 0 13px;
  font-size:28px
}
.mode-a h3{font-size:38px;margin-top:160px}
.modes-grid p{
  max-width:600px;
  color:var(--muted);
  line-height:1.75;
  font-size:14px
}
.mode-a p{color:#a8b1ba}
.modes-grid article>b{
  position:absolute;
  right:22px;
  bottom:10px;
  color:#e6ebef;
  font-size:76px;
  line-height:1
}
.mode-a>b{font-size:120px;color:#202833}

/* TOURNEYS */
.tourneys{
  padding:94px 0;
  background:#fff
}
.tourney-heading{
  max-width:800px;
  margin-bottom:34px
}
.tourney-heading p{
  color:var(--muted);
  line-height:1.8;
  font-size:14px
}
.tourney-band{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.tourney-band article{
  min-height:230px;
  padding:22px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.tourney-band b{
  color:var(--blue);
  font-size:9px
}
.tourney-band strong{
  display:block;
  margin:42px 0 10px;
  font-size:18px
}
.tourney-band p{
  color:var(--muted);
  line-height:1.7;
  font-size:13px
}

/* START */
.start-panel{
  padding:82px 0;
  background:#0d1117;
  color:#fff
}
.start-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:70px
}
.start-grid>div>span{color:var(--cyan)}
.start-steps{
  border-top:1px solid #29313a
}
.start-steps>div{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid #29313a
}
.start-steps b{
  color:var(--cyan);
  font-size:11px
}
.start-steps p{
  margin:0;
  color:#a7b0ba;
  font-size:14px;
  line-height:1.7
}

/* FAQ */
.faq{
  padding:92px 0;
  background:var(--bg)
}
.faq-grid{
  display:grid;
  grid-template-columns:.62fr 1.38fr;
  gap:80px
}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;
  padding:21px 0;
  border:0;
  background:none;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  text-align:left;
  color:var(--ink);
  font-size:16px;
  font-weight:900
}
.faq-q span{
  color:var(--blue);
  font-size:20px;
  transition:.2s
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:.3s
}
.faq-a p{
  margin:0;
  padding:0 40px 21px 0;
  color:var(--muted);
  line-height:1.8;
  font-size:14px
}
.faq-item.open .faq-a{max-height:220px}
.faq-item.open .faq-q span{transform:rotate(45deg)}

/* CTA */
.final-cta{
  padding:74px 0;
  background:var(--blue);
  color:#fff
}
.final-inner{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px
}
.final-inner span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em
}
.final-inner h2{
  max-width:800px;
  margin:8px 0 0;
  font-size:clamp(36px,5vw,58px);
  line-height:1;
  letter-spacing:-.05em
}
.final-inner>a{
  min-width:220px;
  padding:16px 20px;
  text-align:center;
  background:#fff;
  color:var(--ink);
  font-size:12px;
  font-weight:900
}

/* FOOTER */
.footer{
  padding:58px 0 24px;
  background:#090c10;
  color:#fff
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:55px
}
.footer-brand{display:flex;gap:8px}
.footer-grid>div:first-child>p{
  max-width:420px;
  color:#777f88;
  line-height:1.8;
  font-size:13px
}
.footer h3{
  margin:0 0 15px;
  color:#5f6871;
  font-size:9px;
  letter-spacing:.13em
}
.footer-grid>div:not(:first-child){
  display:flex;
  flex-direction:column;
  gap:9px
}
.footer a{
  color:#99a1aa;
  font-size:13px
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  border-top:1px solid #222830;
  margin-top:42px;
  padding-top:20px;
  color:#4f5861;
  font-size:10px
}

/* RESPONSIVE */
@media(max-width:980px){
  .hero-bottom{grid-template-columns:1fr;gap:25px}
  .hero-actions{justify-content:flex-start}
  .chapter-grid{grid-template-columns:1fr}
  .chapter-nav{position:static;display:none}
  .modes-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "a a"
      "b c"
      "d d"
  }
  .start-grid,.faq-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .wrap{width:min(100% - 24px,1180px)}
  .nav,.header-cta{display:none}
  .menu-btn{display:block}
  .mobile-nav{
    position:fixed;
    top:72px;left:0;right:0;
    display:none;
    flex-direction:column;
    gap:15px;
    padding:18px 20px 22px;
    background:#fff;
    border-bottom:1px solid var(--line)
  }
  .mobile-nav.open{display:flex}
  .mobile-nav a{font-size:14px;font-weight:700}
  .mobile-cta{background:var(--ink);color:#fff!important;padding:12px;text-align:center}
  .hero-topline{gap:15px;flex-direction:column}
  .hero-title{padding:42px 0 28px}
  .hero-title h1{font-size:74px}
  .hero-title h1 span{font-size:.33em}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .device-grid{grid-template-columns:repeat(2,1fr)}
  .chapter-block{grid-template-columns:1fr}
  .chapter-number{font-size:36px}
  .detail-grid,.desktop-board{grid-template-columns:1fr}
  .modes-grid{
    grid-template-columns:1fr;
    grid-template-areas:"a" "b" "c" "d"
  }
  .mode-a{min-height:420px!important}
  .mode-a h3{margin-top:100px}
  .tourney-band{grid-template-columns:1fr 1fr}
  .final-inner{flex-direction:column;align-items:flex-start}
  .final-inner>a{width:100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:7px}
}

@media(max-width:460px){
  .brand{font-size:15px}
  .hero-title h1{font-size:60px}
  .device-grid,.tourney-band{grid-template-columns:1fr}
}