/* ===== Brutalism · 网页粗野主义 · br- ===== */
:root{
  --br-bg:#ffffff;
  --br-ink:#000000;
  --br-accent:#c6ff00;
  --br-surface:#ffffff;
  --br-line:#000000;
  --br-maxw:1120px;
  --br-font:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Courier New","PingFang SC","Microsoft YaHei",monospace;
  --br-body:"PingFang SC","Microsoft YaHei","Hiragano Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--br-body);background:var(--br-bg);color:var(--br-ink);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.br-wrap{max-width:var(--br-maxw);margin:0 auto;padding:0 22px}

/* marquee */
.br-marquee{background:var(--br-ink);color:var(--br-accent);font-family:var(--br-font);font-size:13px;font-weight:700;letter-spacing:1px;overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--br-ink)}
.br-marquee-track{display:inline-block;padding:8px 0;animation:brScroll 22s linear infinite}
.br-marquee-track span{margin:0 14px}
@keyframes brScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* header */
.br-head{position:sticky;top:0;z-index:50;background:var(--br-bg);border-bottom:3px solid var(--br-ink)}
.br-bar{max-width:var(--br-maxw);margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.br-brand{font-family:var(--br-font);font-weight:800;font-size:19px;letter-spacing:.5px}
.br-brand-ext{color:var(--br-accent);background:var(--br-ink);padding:1px 6px;margin-left:6px;font-size:12px}
.br-nav{display:flex;gap:22px;font-family:var(--br-font);font-weight:700}
.br-nav a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.br-nav a:hover{background:var(--br-ink);color:var(--br-accent);text-decoration:none}
.br-burger{display:none;flex-direction:column;gap:4px;background:none;border:2px solid var(--br-ink);padding:8px;cursor:pointer}
.br-burger span{width:22px;height:3px;background:var(--br-ink);display:block}

/* hero */
.br-hero{padding:70px 0 56px;border-bottom:3px solid var(--br-ink)}
.br-meta{font-family:var(--br-font);font-size:13px;color:#444;margin-bottom:18px}
.br-h1{font-family:var(--br-font);font-weight:800;font-size:clamp(36px,7vw,80px);line-height:1.02;letter-spacing:-2px}
.br-lead{margin-top:24px;font-size:clamp(15px,1.9vw,18px);max-width:620px;border-left:6px solid var(--br-accent);padding-left:16px}
.br-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.br-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--br-font);font-weight:700;border:3px solid var(--br-ink);padding:13px 24px;background:var(--br-bg);transition:background .15s,color .15s}
.br-btn:hover{background:var(--br-ink);color:var(--br-accent)}
.br-btn-accent{background:var(--br-accent);color:var(--br-ink)}
.br-btn-accent:hover{background:var(--br-ink);color:var(--br-accent)}

/* sections */
.br-sec{padding:64px 0;border-bottom:3px solid var(--br-ink)}
.br-sec-alt{background:var(--br-ink);color:var(--br-bg)}
.br-sec-alt .br-lead-c{color:#ddd}
.br-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.br-no{font-family:var(--br-font);font-size:15px;background:var(--br-accent);color:var(--br-ink);padding:4px 10px;font-weight:700}
.br-sec-head h2{font-family:var(--br-font);font-weight:800;font-size:clamp(24px,4vw,36px);letter-spacing:-1px}
.br-lead-c{font-size:17px;max-width:720px;margin-bottom:28px}

/* grid2 */
.br-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid var(--br-ink)}
.br-box{border:0;padding:24px;border-right:3px solid var(--br-ink);transition:background .15s,color .15s}
.br-box:last-child{border-right:none}
.br-box h3{font-family:var(--br-font);font-weight:800;font-size:20px;margin-bottom:10px}
.br-box p{font-size:15px}
.br-box:hover{background:var(--br-accent);color:var(--br-ink)}

/* list */
.br-list{display:flex;flex-direction:column;border:3px solid var(--br-accent)}
.br-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:3px solid var(--br-accent);transition:background .15s,color .15s}
.br-row:last-child{border-bottom:none}
.br-row:hover{background:var(--br-accent);color:var(--br-ink)}
.br-idx{font-family:var(--br-font);font-weight:800;font-size:18px;background:var(--br-ink);color:var(--br-accent);width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.br-tag{font-family:var(--br-font);font-weight:700;font-size:15px;border:2px solid currentColor;padding:4px 10px;white-space:nowrap;flex:none}
.br-row p{font-size:15px}

/* grid4 */
.br-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--br-ink)}
.br-grid4 .br-box{border-right:3px solid var(--br-ink)}

/* steps */
.br-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--br-accent)}
.br-step{padding:22px 18px;border-right:3px solid var(--br-accent);transition:background .15s,color .15s}
.br-step:last-child{border-right:none}
.br-step:hover{background:var(--br-accent);color:var(--br-ink)}
.br-step-no{font-family:var(--br-font);font-size:30px;font-weight:800;display:block;line-height:1}
.br-step b{font-family:var(--br-font);font-size:17px;display:block;margin:8px 0 4px}
.br-step span{font-size:14px}

/* faq */
.br-faq{display:flex;flex-direction:column;border:3px solid var(--br-accent)}
.br-item{border-bottom:3px solid var(--br-accent)}
.br-item:last-child{border-bottom:none}
.br-item summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--br-font);font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.br-item summary::-webkit-details-marker{display:none}
.br-chev{font-style:normal;font-size:22px;font-weight:800}
.br-item[open] .br-chev{transform:rotate(45deg)}
.br-item p{padding:0 20px 18px;font-size:15px;color:#ddd}

/* footer */
.br-foot{border-top:3px solid var(--br-ink);background:var(--br-ink);color:var(--br-bg)}
.br-foot-in{display:flex;justify-content:space-between;align-items:center;padding:24px 22px;flex-wrap:wrap;gap:10px;font-family:var(--br-font);font-weight:700}
.br-foot-r{color:var(--br-accent)}

/* top */
.br-top{position:fixed;right:20px;bottom:20px;z-index:60;font-family:var(--br-font);font-weight:800;font-size:13px;background:var(--br-accent);color:var(--br-ink);border:3px solid var(--br-ink);padding:10px 14px;opacity:0;pointer-events:none;transition:opacity .3s}
.br-top.show{opacity:1;pointer-events:auto}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .4s,transform .4s}
.reveal.in{opacity:1;transform:none}

@media(max-width:960px){
  .br-grid4{grid-template-columns:repeat(2,1fr)}
  .br-grid4 .br-box:nth-child(2){border-right:none}
  .br-grid4 .br-box:nth-child(1),.br-grid4 .br-box:nth-child(2){border-bottom:3px solid var(--br-ink)}
  .br-steps{grid-template-columns:repeat(2,1fr)}
  .br-step:nth-child(2){border-right:none}
  .br-step:nth-child(1),.br-step:nth-child(2){border-bottom:3px solid var(--br-accent)}
}
@media(max-width:680px){
  .br-nav{position:fixed;top:54px;right:0;flex-direction:column;background:var(--br-bg);border:3px solid var(--br-ink);padding:16px 24px;gap:14px;transform:translateX(120%);transition:transform .25s;z-index:49}
  .br-nav.open{transform:none}
  .br-burger{display:flex}
  .br-grid4{grid-template-columns:1fr}
  .br-grid4 .br-box{border-right:none!important;border-bottom:3px solid var(--br-ink)}
  .br-grid4 .br-box:last-child{border-bottom:none}
  .br-steps{grid-template-columns:1fr}
  .br-step{border-right:none!important;border-bottom:3px solid var(--br-accent)}
  .br-step:last-child{border-bottom:none}
  .br-grid2{grid-template-columns:1fr}
  .br-box{border-right:none!important;border-bottom:3px solid var(--br-ink)}
  .br-box:last-child{border-bottom:none}
  .br-row{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}