:root{
  --xb-primary:#ef201d;
  --xb-primary-hover:#d81815;
  --xb-text:#0b1220;
  --xb-muted:rgba(11,18,32,.64);
  --xb-bg:#ffffff;
  --xb-surface:#f6f7f9;
  --xb-surface-2:#f1f2f4;
  --xb-card:#ffffff;
  --xb-border:rgba(11,18,32,.12);
  --xb-border-2:rgba(11,18,32,.08);
  --xb-radius:14px;
  --xb-radius-sm:12px;
  --xb-max:1320px;
  --xb-header-h:80px;
  --xb-speed:.18s;
  --xb-ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Alibaba PuHuiTi",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--xb-text);
  background:var(--xb-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
::selection{background:rgba(239,32,29,.18)}

.container{
  width:min(var(--xb-max), calc(100% - 64px));
  margin-inline:auto;
}
@media (max-width: 640px){
  .container{width:calc(100% - 32px)}
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;
  padding:10px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--xb-border);
  z-index:9999;
}

.muted{color:var(--xb-muted)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.06);
  color:var(--xb-primary);
  font-weight:600;
  letter-spacing:.2px;
}

.h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
.h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
.h3{font-size:18px;line-height:1.4;margin:0 0 10px;font-weight:750;letter-spacing:.1px}
.p{margin:0;color:var(--xb-muted)}
.lead{font-size:18px;color:rgba(15,23,42,.78);margin:0;max-width:58ch}

.section{padding:88px 0}
.section.sm{padding:72px 0}
.section .head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:22px;
}
.section .head .desc{max-width:720px}

.row{display:flex;gap:18px;align-items:stretch}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.col{flex:1 1 0}
.col.auto{flex:0 0 auto}
@media (max-width: 980px){
  .h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
  .h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
  .row.stack{flex-direction:column}
}
@media (max-width: 560px){
  :root{ --xb-header-h: 58px; }
  .header-inner{gap:10px}
  .brand{gap:10px}
  .brand-mark{width:30px;height:30px;border-radius:9px}
  .brand-title b{font-size:15px}
  .brand-title span{font-size:11px;margin-top:1px}
  .header-cta{gap:8px;flex-wrap:nowrap}
  .header-cta .btn{padding:10px 12px;border-radius:10px;font-size:14px;white-space:nowrap}
  .header-cta .btn,.menu-btn{height:40px}
  .menu-btn{width:40px}
}
@media (max-width: 420px){
  .brand-title span{display:none}
  .header-cta .btn{padding:10px 10px}
}

.card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.card.flat{background:transparent;border-color:transparent;padding:0}
.card:hover{border-color:rgba(11,18,32,.22);background:rgba(11,18,32,.02)}
.card .meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}

.cards{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
.cards .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.cards > .card{height:100%}
.cards > .card{display:flex;flex-direction:column}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);color:rgba(15,23,42,.74);background:rgba(15,23,42,.03)}

.list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.dot{
  width:6px;height:6px;border-radius:99px;background:var(--xb-primary);
  margin-top:9px;flex:0 0 6px;
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:12px 18px;border:1px solid transparent;cursor:pointer;transition:transform var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease), border-color var(--xb-speed) var(--xb-ease), color var(--xb-speed) var(--xb-ease), box-shadow var(--xb-speed) var(--xb-ease);user-select:none;font-weight:800;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--xb-primary);
  color:#fff;
}
.btn-primary:hover{background:var(--xb-primary-hover)}
.btn-outline{
  background:#fff;
  color:var(--xb-text);
  border-color:var(--xb-border);
}
.btn-outline:hover{border-color:rgba(239,32,29,.35); color:var(--xb-primary)}
.btn-link{
  padding:0;border:none;background:transparent;color:var(--xb-primary);font-weight:700;
}
.btn-sm{padding:10px 14px;border-radius:10px;font-size:14px}

.hr{height:1px;background:var(--xb-border-2);border:0;margin:0}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid var(--xb-border);
}
.header-inner{
  height:var(--xb-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  min-width:190px;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--xb-primary);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:18px;height:18px}
.brand-title{display:flex;flex-direction:column;line-height:1.05}
.brand-title b{font-size:16px}
.brand-title span{font-size:12px;color:var(--xb-muted);font-weight:600;margin-top:2px}

.nav{
  display:flex;align-items:center;gap:22px;
}
.nav a{
  font-size:16px;
  padding:10px 6px;
  color:rgba(17,24,39,.88);
  font-weight:600;
  position:relative;
}
.nav a:hover{color:var(--xb-primary)}
.nav a.active{color:var(--xb-primary)}
.nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--xb-primary);
}

.header-cta{display:flex;gap:10px;align-items:center}
.menu-btn{
  display:none;
  width:42px;height:42px;border-radius:10px;
  border:1px solid var(--xb-border);
  background:#fff;
  align-items:center;justify-content:center;
}
.menu-btn svg{width:18px;height:18px}

@media (max-width: 980px){
  .nav{display:none}
  .menu-btn{display:flex}
  .brand{min-width:auto}
}

/* Mega dropdown */
.mega{
  position:fixed;
  left:0;right:0;
  top:var(--xb-header-h);
  background:#fff;
  border-bottom:1px solid var(--xb-border);
  z-index:99;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s linear .18s;
}
.mega.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s;
}
.mega-inner{padding:22px 0 26px}
.mega-cols{display:flex;gap:30px;flex-wrap:wrap}
.mega-col{flex:1 1 200px;min-width:190px}
.mega-title{
  font-size:13px;
  font-weight:800;
  color:var(--xb-primary);
  margin:0 0 10px;
}
.mega-link{
  display:block;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.mega-link:hover{color:var(--xb-primary)}
.mega-foot{
  margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--xb-border-2);
}
.mega-foot .hint{font-size:12px;color:var(--xb-muted)}
@media (max-width:980px){ .mega{display:none !important} }

/* Mobile drawer */
.mobile{
  position:fixed;inset:0;
  background:rgba(0,0,0,.38);
  display:none;
  z-index:120;
}
.mobile.open{display:block}
.mobile .panel{
  width:min(92vw, 420px);
  height:100%;
  background:#fff;
  border-right:1px solid var(--xb-border);
  padding:14px 16px 18px;
}
.mobile-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0 14px;
}
.mobile a{display:block;padding:10px 4px;font-weight:700}
.mobile .sub a{padding:8px 4px;font-weight:600;color:rgba(17,24,39,.82)}
.mobile details{
  border-top:1px solid var(--xb-border-2);
  padding:8px 0;
}
.mobile summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;
  padding:10px 4px;
}
.mobile summary::-webkit-details-marker{display:none}
.mobile .actions{display:flex;gap:10px;margin-top:14px}

/* Page chrome */
.hero{
  position:relative;
  padding:96px 0 72px;
  background:#fff;
  border-bottom:1px solid var(--xb-border-2);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:560px;height:560px;
  right:-260px;top:-280px;
  border:1px solid rgba(239,32,29,.18);
  border-radius:999px;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:-280px;bottom:-300px;
  border:1px solid rgba(11,18,32,.10);
  border-radius:999px;
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;display:flex;gap:56px;align-items:center;justify-content:space-between}
.hero .copy{flex:1 1 520px}
.hero .panel{flex:0 0 380px}
.hero .panel .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.hero .panel .mini{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:12px
}
.hero .panel .mini .chip{
  flex:1 1 150px;
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}
.hero .panel .chip b{display:block;font-size:14px}
.hero .panel .chip span{display:block;font-size:12px;color:var(--xb-muted);margin-top:3px}
@media (max-width: 980px){
  .hero{padding:72px 0 56px}
  .hero .wrap{flex-direction:column;align-items:stretch;gap:24px}
  .hero .panel{flex:1 1 auto}
}

.logo-strip{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:14px 0 0;
}
.logo-strip .logo{padding:10px 14px;border:1px solid rgba(15,23,42,.10);border-radius:999px;color:rgba(15,23,42,.70);background:rgba(15,23,42,.02);font-weight:700;font-size:12px}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--xb-border-2);margin-bottom:18px}
.tab{padding:12px 14px;border-radius:12px 12px 0 0;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:900;color:rgba(15,23,42,.72)}
.tab[aria-selected="true"]{color:var(--xb-primary);border-color:var(--xb-border-2);background:#fff}
.tab-panels .panel{display:none}
.tab-panels .panel.active{display:block}

/* Footer */
.footer{
  background:var(--xb-surface);
  border-top:1px solid var(--xb-border-2);
  padding:48px 0 28px;
}
.footer-top{
  display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
}
.footer .cols{display:flex;gap:36px;flex-wrap:wrap}
.footer .col h4{margin:0 0 10px;font-size:14px}
.footer .col a{display:block;padding:6px 0;color:rgba(11,18,32,.72)}
.footer .col a:hover{color:var(--xb-primary)}
.footer-bottom{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--xb-border-2);
  display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;
  color:rgba(11,18,32,.58);
  font-size:12px;
}

.footer-bottom .footer-legal,
.footer-bottom .footer-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.footer-bottom .sep{opacity:.45; padding:0 2px;}
.footer-bottom a:hover{text-decoration:underline;color:var(--xb-text);}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.input, textarea{
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  outline:none;
}
.input:focus, textarea:focus{border-color:rgba(239,32,29,.40)}
textarea{min-height:110px;resize:vertical}

.notice{
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.05);
  border-radius:var(--xb-radius);
  padding:14px 16px;
  color:rgba(17,24,39,.82);
}

.small{font-size:12px;color:var(--xb-muted)}

[id]{scroll-margin-top: calc(var(--xb-header-h) + 18px);}

/* Tone sections (Feishu-like alternation) */
.section.tone{background:var(--xb-surface)}


/* Home components */
.hero-home .wrap{align-items:stretch}
.hero-home .copy{padding-top:6px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-highlights{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
.hero-highlights .hl{flex:1 1 160px;min-width:160px;padding:12px 14px;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:rgba(15,23,42,.02)}
.hero-highlights .hl b{display:block;font-size:13px;letter-spacing:.1px}
.hero-highlights .hl span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}
.hero-visual{position:relative;flex:1 1 520px;min-width:360px}
.mockup{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  overflow:hidden;
}
.mockup-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.mockup-dots{display:flex;gap:8px;align-items:center}
.mockup-dots i{width:10px;height:10px;border-radius:999px;background:rgba(15,23,42,.18);display:block}
.mockup-title{font-weight:900;font-size:12px;color:rgba(15,23,42,.72)}
.mockup-body{padding:16px}
.mock-row{display:flex;gap:12px;flex-wrap:wrap}
.mock-card{
  flex:1 1 140px;
  min-width:140px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  padding:12px;
}
.mock-card b{display:block;font-size:12px}
.mock-card span{display:block;margin-top:6px;height:8px;border-radius:999px;background:rgba(15,23,42,.06)}
.mock-chart{margin-top:14px;border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,.08);padding:14px}
.bars{display:flex;gap:10px;align-items:flex-end;height:90px}
.bars i{flex:1 1 0;border-radius:10px;background:rgba(239,32,29,.14)}
.bars i:nth-child(2){height:72%}
.bars i:nth-child(3){height:46%}
.bars i:nth-child(4){height:86%}
.bars i:nth-child(5){height:58%}
.bars i:nth-child(1){height:64%}
.float-tag{
  position:absolute;
  padding:10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.82);
}
.float-1{top:18px;right:-8px}
.float-2{bottom:72px;left:-10px}
.float-3{bottom:18px;right:20px}
@media (max-width:980px){
  .hero-visual{min-width:auto}
  .float-1{right:12px}
  .float-2{left:12px}
}

.trust{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:8px 0;
}
.trust b{font-size:14px}
.trust .logos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.trust .logos span{
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;color:rgba(15,23,42,.72)
}

.feature-grid{display:flex;gap:18px;flex-wrap:wrap}
.feature-grid .card{flex:1 1 260px;min-width:240px}
.icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(239,32,29,.10);
  border:1px solid rgba(239,32,29,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.icon svg{width:20px;height:20px}
.mini-list{margin:10px 0 0;padding:0;list-style:none}
.mini-list li{padding:6px 0;color:rgba(15,23,42,.76)}
.mini-list li::before{content:"· ";color:rgba(15,23,42,.32);font-weight:900}

.split{display:flex;gap:56px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.split.reverse{flex-direction:row-reverse}
.split .copy{flex:1 1 480px;min-width:320px}
.split .visual{flex:1 1 480px;min-width:320px}
.split .visual .mockup{box-shadow:none}

.steps{display:flex;gap:16px;flex-wrap:wrap}
.step{flex:1 1 220px;min-width:220px;border-radius:16px;border:1px solid rgba(15,23,42,.10);background:#fff;padding:18px}
.step .no{font-weight:950;color:rgba(239,32,29,.86);font-size:12px;letter-spacing:.24px}
.step h3{margin:10px 0 8px;font-size:16px}
.step p{margin:0;color:rgba(15,23,42,.72)}

.case-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
/* Featured cases: keep thumbnails fully filled */
.case-grid .thumb{aspect-ratio:16/9}
.case-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block}

.case-main{flex:1 1 520px;min-width:320px}
.case-side{flex:1 1 320px;min-width:280px;display:flex;flex-direction:column;gap:18px}
.case-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.kpi{flex:1 1 160px;min-width:160px;border-radius:14px;border:1px solid rgba(15,23,42,.10);padding:12px;background:rgba(15,23,42,.02)}
.kpi b{display:block;font-size:13px}
.kpi span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}


  

/* Motion & reveal (comfortable, respects reduced-motion) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--xb-ease), transform .55s var(--xb-ease);
  transition-delay:var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@keyframes xb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float-tag{animation:xb-float 6s ease-in-out infinite}
.float-1{animation-delay:-0.5s}
.float-2{animation-delay:-2.2s}
.float-3{animation-delay:-1.2s}
@keyframes xb-bar{from{transform:scaleY(.35);opacity:.65}to{transform:scaleY(1);opacity:1}}
.bars i{transform-origin:bottom;animation:xb-bar .8s var(--xb-ease) both}
.bars i:nth-child(1){animation-delay:.02s}
.bars i:nth-child(2){animation-delay:.06s}
.bars i:nth-child(3){animation-delay:.10s}
.bars i:nth-child(4){animation-delay:.14s}
.bars i:nth-child(5){animation-delay:.18s}

/* Pills (short, Feishu-like) */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.02);
  font-size:12px;font-weight:700;
  color:rgba(15,23,42,.72);
}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tag{
  display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;
  color:rgba(15,23,42,.72);
}

  
  
/* --- Image components (flat) --- */
.hero-media{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);}
.hero-media img{display:block;width:100%;height:220px;object-fit:cover;}
@media (max-width: 960px){.hero-media img{height:180px;}}

.hero-home .hero-visual{display:flex;justify-content:flex-end;align-items:flex-end}
.hero-home .hero-img{width:100%;max-width:680px;height:auto;display:block;border:1px solid var(--xb-border);border-radius:24px;background:var(--xb-bg);}

.industry-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.industry-card{flex:1 1 220px;min-width:210px;border:1px solid var(--xb-border-2);border-radius:var(--xb-radius);background:var(--xb-bg);padding:14px;display:flex;flex-direction:column;gap:10px}
.industry-card img{width:100%;height:120px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);}
.industry-name{font-weight:700;color:var(--xb-text);line-height:1.3}

.card-illus{width:100%;height:140px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);margin:12px 0 10px;display:block}

.thumb{border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface);margin:0 0 14px}
.auth-illus{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);margin-bottom:14px}
.auth-illus img{width:100%;height:200px;object-fit:cover;display:block}

:root{
  --xb-primary:#ef201d;
  --xb-primary-hover:#d81815;
  --xb-text:#0b1220;
  --xb-muted:rgba(11,18,32,.64);
  --xb-bg:#ffffff;
  --xb-surface:#f6f7f9;
  --xb-surface-2:#f1f2f4;
  --xb-card:#ffffff;
  --xb-border:rgba(11,18,32,.12);
  --xb-border-2:rgba(11,18,32,.08);
  --xb-radius:14px;
  --xb-radius-sm:12px;
  --xb-max:1320px;
  --xb-header-h:80px;
  --xb-speed:.18s;
  --xb-ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Alibaba PuHuiTi",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--xb-text);
  background:var(--xb-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
::selection{background:rgba(239,32,29,.18)}

.container{
  width:min(var(--xb-max), calc(100% - 64px));
  margin-inline:auto;
}
@media (max-width: 640px){
  .container{width:calc(100% - 32px)}
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;
  padding:10px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--xb-border);
  z-index:9999;
}

.muted{color:var(--xb-muted)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.06);
  color:var(--xb-primary);
  font-weight:600;
  letter-spacing:.2px;
}

.h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
.h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
.h3{font-size:18px;line-height:1.4;margin:0 0 10px;font-weight:750;letter-spacing:.1px}
.p{margin:0;color:var(--xb-muted)}
.lead{font-size:18px;color:rgba(15,23,42,.78);margin:0;max-width:58ch}

.section{padding:88px 0}
.section.sm{padding:72px 0}
.section .head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:22px;
}
.section .head .desc{max-width:720px}

.row{display:flex;gap:18px;align-items:stretch}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.col{flex:1 1 0}
.col.auto{flex:0 0 auto}
@media (max-width: 980px){
  .h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
  .h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
  .row.stack{flex-direction:column}
}
@media (max-width: 560px){
  :root{ --xb-header-h: 58px; }
  .header-inner{gap:10px}
  .brand{gap:10px}
  .brand-mark{width:30px;height:30px;border-radius:9px}
  .brand-title b{font-size:15px}
  .brand-title span{font-size:11px;margin-top:1px}
  .header-cta{gap:8px;flex-wrap:nowrap}
  .header-cta .btn{padding:10px 12px;border-radius:10px;font-size:14px;white-space:nowrap}
  .header-cta .btn,.menu-btn{height:40px}
  .menu-btn{width:40px}
}
@media (max-width: 420px){
  .brand-title span{display:none}
  .header-cta .btn{padding:10px 10px}
}

.card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.card.flat{background:transparent;border-color:transparent;padding:0}
.card:hover{border-color:rgba(11,18,32,.22);background:rgba(11,18,32,.02)}
.card .meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}

.cards{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}

.cards .card{flex:0 0 calc(50% - 9px);max-width:calc(50% - 9px);display:flex;flex-direction:column}
.cards .card .thumb{border-radius:16px;overflow:hidden}
@media (max-width: 900px){
  .cards .card{flex-basis:100%;max-width:100%}
}

.cards .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.cards > .card{height:100%}
.cards > .card{display:flex;flex-direction:column}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);color:rgba(15,23,42,.74);background:rgba(15,23,42,.03)}

.list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.dot{
  width:6px;height:6px;border-radius:99px;background:var(--xb-primary);
  margin-top:9px;flex:0 0 6px;
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:12px 18px;border:1px solid transparent;cursor:pointer;transition:transform var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease), border-color var(--xb-speed) var(--xb-ease), color var(--xb-speed) var(--xb-ease), box-shadow var(--xb-speed) var(--xb-ease);user-select:none;font-weight:800;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--xb-primary);
  color:#fff;
}
.btn-primary:hover{background:var(--xb-primary-hover)}
.btn-outline{
  background:#fff;
  color:var(--xb-text);
  border-color:var(--xb-border);
}
.btn-outline:hover{border-color:rgba(239,32,29,.35); color:var(--xb-primary)}
.btn-link{
  padding:0;border:none;background:transparent;color:var(--xb-primary);font-weight:700;
}
.btn-sm{padding:10px 14px;border-radius:10px;font-size:14px}

.hr{height:1px;background:var(--xb-border-2);border:0;margin:0}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid var(--xb-border);
}
.header-inner{
  height:var(--xb-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  min-width:190px;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--xb-primary);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:18px;height:18px}
.brand-title{display:flex;flex-direction:column;line-height:1.05}
.brand-title b{font-size:16px}
.brand-title span{font-size:12px;color:var(--xb-muted);font-weight:600;margin-top:2px}

.nav{
  display:flex;align-items:center;gap:22px;
}
.nav a{
  font-size:16px;
  padding:10px 6px;
  color:rgba(17,24,39,.88);
  font-weight:600;
  position:relative;
}
.nav a:hover{color:var(--xb-primary)}
.nav a.active{color:var(--xb-primary)}
.nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--xb-primary);
}

.header-cta{display:flex;gap:10px;align-items:center}
.menu-btn{
  display:none;
  width:42px;height:42px;border-radius:10px;
  border:1px solid var(--xb-border);
  background:#fff;
  align-items:center;justify-content:center;
}
.menu-btn svg{width:18px;height:18px}

@media (max-width: 980px){
  .nav{display:none}
  .menu-btn{display:flex}
  .brand{min-width:auto}
}

/* Mega dropdown */
.mega{
  position:fixed;
  left:0;right:0;
  top:var(--xb-header-h);
  background:#fff;
  border-bottom:1px solid var(--xb-border);
  z-index:99;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s linear .18s;
}
.mega.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s;
}
.mega-inner{padding:22px 0 26px}
.mega-cols{display:flex;gap:30px;flex-wrap:wrap}
.mega-col{flex:1 1 200px;min-width:190px}
.mega-title{
  font-size:13px;
  font-weight:800;
  color:var(--xb-primary);
  margin:0 0 10px;
}
.mega-link{
  display:block;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.mega-link:hover{color:var(--xb-primary)}
.mega-foot{
  margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--xb-border-2);
}
.mega-foot .hint{font-size:12px;color:var(--xb-muted)}
@media (max-width:980px){ .mega{display:none !important} }

/* Mobile drawer */
.mobile{
  position:fixed;inset:0;
  background:rgba(0,0,0,.38);
  display:none;
  z-index:120;
}
.mobile.open{display:block}
.mobile .panel{
  width:min(92vw, 420px);
  height:100%;
  background:#fff;
  border-right:1px solid var(--xb-border);
  padding:14px 16px 18px;
}
.mobile-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0 14px;
}
.mobile a{display:block;padding:10px 4px;font-weight:700}
.mobile .sub a{padding:8px 4px;font-weight:600;color:rgba(17,24,39,.82)}
.mobile details{
  border-top:1px solid var(--xb-border-2);
  padding:8px 0;
}
.mobile summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;
  padding:10px 4px;
}
.mobile summary::-webkit-details-marker{display:none}
.mobile .actions{display:flex;gap:10px;margin-top:14px}

/* Page chrome */
.hero{
  position:relative;
  padding:96px 0 72px;
  background:#fff;
  border-bottom:1px solid var(--xb-border-2);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:560px;height:560px;
  right:-260px;top:-280px;
  border:1px solid rgba(239,32,29,.18);
  border-radius:999px;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:-280px;bottom:-300px;
  border:1px solid rgba(11,18,32,.10);
  border-radius:999px;
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;display:flex;gap:56px;align-items:center;justify-content:space-between}
.hero .copy{flex:1 1 520px}
.hero .panel{flex:0 0 380px}
.hero .panel .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.hero .panel .mini{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:12px
}
.hero .panel .mini .chip{
  flex:1 1 150px;
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}
.hero .panel .chip b{display:block;font-size:14px}
.hero .panel .chip span{display:block;font-size:12px;color:var(--xb-muted);margin-top:3px}
@media (max-width: 980px){
  .hero{padding:72px 0 56px}
  .hero .wrap{flex-direction:column;align-items:stretch;gap:24px}
  .hero .panel{flex:1 1 auto}
}

.logo-strip{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:14px 0 0;
}
.logo-strip .logo{padding:10px 14px;border:1px solid rgba(15,23,42,.10);border-radius:999px;color:rgba(15,23,42,.70);background:rgba(15,23,42,.02);font-weight:700;font-size:12px}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--xb-border-2);margin-bottom:18px}
.tab{padding:12px 14px;border-radius:12px 12px 0 0;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:900;color:rgba(15,23,42,.72)}
.tab[aria-selected="true"]{color:var(--xb-primary);border-color:var(--xb-border-2);background:#fff}
.tab-panels .panel{display:none}
.tab-panels .panel.active{display:block}

/* Footer */
.footer{
  background:var(--xb-surface);
  border-top:1px solid var(--xb-border-2);
  padding:48px 0 28px;
}
.footer-top{
  display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
}
.footer .cols{display:flex;gap:36px;flex-wrap:wrap}
.footer .col h4{margin:0 0 10px;font-size:14px}
.footer .col a{display:block;padding:6px 0;color:rgba(11,18,32,.72)}
.footer .col a:hover{color:var(--xb-primary)}
.footer-bottom{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--xb-border-2);
  display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;
  color:rgba(11,18,32,.58);
  font-size:12px;
}

.footer-bottom .footer-legal,
.footer-bottom .footer-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.footer-bottom .sep{opacity:.45; padding:0 2px;}
.footer-bottom a:hover{text-decoration:underline;color:var(--xb-text);}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.input, textarea{
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  outline:none;
}
.input:focus, textarea:focus{border-color:rgba(239,32,29,.40)}
textarea{min-height:110px;resize:vertical}

.notice{
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.05);
  border-radius:var(--xb-radius);
  padding:14px 16px;
  color:rgba(17,24,39,.82);
}

.small{font-size:12px;color:var(--xb-muted)}

[id]{scroll-margin-top: calc(var(--xb-header-h) + 18px);}

/* Tone sections (Feishu-like alternation) */
.section.tone{background:var(--xb-surface)}


/* Home components */
.hero-home .wrap{align-items:stretch}
.hero-home .copy{padding-top:6px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-highlights{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
.hero-highlights .hl{flex:1 1 160px;min-width:160px;padding:12px 14px;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:rgba(15,23,42,.02)}
.hero-highlights .hl b{display:block;font-size:13px;letter-spacing:.1px}
.hero-highlights .hl span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}
.hero-visual{position:relative;flex:1 1 520px;min-width:360px}
.mockup{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  overflow:hidden;
}
.mockup-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.mockup-dots{display:flex;gap:8px;align-items:center}
.mockup-dots i{width:10px;height:10px;border-radius:999px;background:rgba(15,23,42,.18);display:block}
.mockup-title{font-weight:900;font-size:12px;color:rgba(15,23,42,.72)}
.mockup-body{padding:16px}
.mock-row{display:flex;gap:12px;flex-wrap:wrap}
.mock-card{
  flex:1 1 140px;
  min-width:140px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  padding:12px;
}
.mock-card b{display:block;font-size:12px}
.mock-card span{display:block;margin-top:6px;height:8px;border-radius:999px;background:rgba(15,23,42,.06)}
.mock-chart{margin-top:14px;border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,.08);padding:14px}
.bars{display:flex;gap:10px;align-items:flex-end;height:90px}
.bars i{flex:1 1 0;border-radius:10px;background:rgba(239,32,29,.14)}
.bars i:nth-child(2){height:72%}
.bars i:nth-child(3){height:46%}
.bars i:nth-child(4){height:86%}
.bars i:nth-child(5){height:58%}
.bars i:nth-child(1){height:64%}
.float-tag{
  position:absolute;
  padding:10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.82);
}
.float-1{top:18px;right:-8px}
.float-2{bottom:72px;left:-10px}
.float-3{bottom:18px;right:20px}
@media (max-width:980px){
  .hero-visual{min-width:auto}
  .float-1{right:12px}
  .float-2{left:12px}
}

.trust{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:8px 0;
}
.trust b{font-size:14px}
.trust .logos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.trust .logos span{
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;color:rgba(15,23,42,.72)
}

.feature-grid{display:flex;gap:18px;flex-wrap:wrap}
.feature-grid .card{flex:1 1 260px;min-width:240px}
.icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(239,32,29,.10);
  border:1px solid rgba(239,32,29,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.icon svg{width:20px;height:20px}
.mini-list{margin:10px 0 0;padding:0;list-style:none}
.mini-list li{padding:6px 0;color:rgba(15,23,42,.76)}
.mini-list li::before{content:"· ";color:rgba(15,23,42,.32);font-weight:900}

.split{display:flex;gap:56px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.split.reverse{flex-direction:row-reverse}
.split .copy{flex:1 1 480px;min-width:320px}
.split .visual{flex:1 1 480px;min-width:320px}
.split .visual .mockup{box-shadow:none}

.steps{display:flex;gap:16px;flex-wrap:wrap}
.step{flex:1 1 220px;min-width:220px;border-radius:16px;border:1px solid rgba(15,23,42,.10);background:#fff;padding:18px}
.step .no{font-weight:950;color:rgba(239,32,29,.86);font-size:12px;letter-spacing:.24px}
.step h3{margin:10px 0 8px;font-size:16px}
.step p{margin:0;color:rgba(15,23,42,.72)}

.case-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
/* Featured cases: keep thumbnails fully filled */
.case-grid .thumb{aspect-ratio:16/9}
.case-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block}

.case-main{flex:1 1 520px;min-width:320px}
.case-side{flex:1 1 320px;min-width:280px;display:flex;flex-direction:column;gap:18px}
.case-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.kpi{flex:1 1 160px;min-width:160px;border-radius:14px;border:1px solid rgba(15,23,42,.10);padding:12px;background:rgba(15,23,42,.02)}
.kpi b{display:block;font-size:13px}
.kpi span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}


  

/* Motion & reveal (comfortable, respects reduced-motion) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--xb-ease), transform .55s var(--xb-ease);
  transition-delay:var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@keyframes xb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float-tag{animation:xb-float 6s ease-in-out infinite}
.float-1{animation-delay:-0.5s}
.float-2{animation-delay:-2.2s}
.float-3{animation-delay:-1.2s}
@keyframes xb-bar{from{transform:scaleY(.35);opacity:.65}to{transform:scaleY(1);opacity:1}}
.bars i{transform-origin:bottom;animation:xb-bar .8s var(--xb-ease) both}
.bars i:nth-child(1){animation-delay:.02s}
.bars i:nth-child(2){animation-delay:.06s}
.bars i:nth-child(3){animation-delay:.10s}
.bars i:nth-child(4){animation-delay:.14s}
.bars i:nth-child(5){animation-delay:.18s}

/* Pills (short, Feishu-like) */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.02);
  font-size:12px;font-weight:700;
  color:rgba(15,23,42,.72);
}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tag{
  display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;
  color:rgba(15,23,42,.72);
}

  
  
/* --- Image components (flat) --- */
.hero-media{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);}
.hero-media img{display:block;width:100%;height:220px;object-fit:cover;}
@media (max-width: 960px){.hero-media img{height:180px;}}

.hero-home .hero-visual{display:flex;justify-content:flex-end;align-items:flex-end}
.hero-home .hero-img{width:100%;max-width:680px;height:auto;display:block;border:1px solid var(--xb-border);border-radius:24px;background:var(--xb-bg);}

.industry-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.industry-card{flex:1 1 220px;min-width:210px;border:1px solid var(--xb-border-2);border-radius:var(--xb-radius);background:var(--xb-bg);padding:14px;display:flex;flex-direction:column;gap:10px}
.industry-card img{width:100%;height:120px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);}
.industry-name{font-weight:700;color:var(--xb-text);line-height:1.3}

.card-illus{width:100%;height:140px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);margin:12px 0 10px;display:block}

.thumb{border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface);margin:0 0 14px}
.auth-illus{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);margin-bottom:14px}
.auth-illus img{width:100%;height:200px;object-fit:cover;display:block}

:root{
  --xb-primary:#ef201d;
  --xb-primary-hover:#d81815;
  --xb-text:#0b1220;
  --xb-muted:rgba(11,18,32,.64);
  --xb-bg:#ffffff;
  --xb-surface:#f6f7f9;
  --xb-surface-2:#f1f2f4;
  --xb-card:#ffffff;
  --xb-border:rgba(11,18,32,.12);
  --xb-border-2:rgba(11,18,32,.08);
  --xb-radius:14px;
  --xb-radius-sm:12px;
  --xb-max:1320px;
  --xb-header-h:80px;
  --xb-speed:.18s;
  --xb-ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Alibaba PuHuiTi",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--xb-text);
  background:var(--xb-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
::selection{background:rgba(239,32,29,.18)}

.container{
  width:min(var(--xb-max), calc(100% - 64px));
  margin-inline:auto;
}

@media (max-width: 900px){
  .container{width:calc(100% - 32px)}
}
@media (max-width: 640px){
  .container{width:calc(100% - 24px)}
}
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;
  padding:10px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--xb-border);
  z-index:9999;
}

.muted{color:var(--xb-muted)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.06);
  color:var(--xb-primary);
  font-weight:600;
  letter-spacing:.2px;
}

.h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
.h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
.h3{font-size:18px;line-height:1.4;margin:0 0 10px;font-weight:750;letter-spacing:.1px}
.p{margin:0;color:var(--xb-muted)}
.lead{font-size:18px;color:rgba(15,23,42,.78);margin:0;max-width:58ch}

.section{padding:88px 0}
.section.sm{padding:56px 0}
.section.after-hero{padding-top:28px}
.section .head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:22px;
}
.section .head .desc{max-width:720px}

.row{display:flex;gap:18px;align-items:stretch}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.col{flex:1 1 0}
.col.auto{flex:0 0 auto}
@media (max-width: 980px){
  .h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
  .h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
  .row.stack{flex-direction:column}
}
@media (max-width: 560px){
  :root{ --xb-header-h: 58px; }
  .header-inner{gap:10px}
  .brand{gap:10px}
  .brand-mark{width:30px;height:30px;border-radius:9px}
  .brand-title b{font-size:15px}
  .brand-title span{font-size:11px;margin-top:1px}
  .header-cta{gap:8px;flex-wrap:nowrap}
  .header-cta .btn{padding:10px 12px;border-radius:10px;font-size:14px;white-space:nowrap}
  .header-cta .btn,.menu-btn{height:40px}
  .menu-btn{width:40px}
}
@media (max-width: 420px){
  .brand-title span{display:none}
  .header-cta .btn{padding:10px 10px}
}

.card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.card.flat{background:transparent;border-color:transparent;padding:0}
.card:hover{border-color:rgba(11,18,32,.22);background:rgba(11,18,32,.02)}
.card .meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}

.cards{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
.cards .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.cards > .card{height:100%}
.cards > .card{display:flex;flex-direction:column}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);color:rgba(15,23,42,.74);background:rgba(15,23,42,.03)}

.list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.dot{
  width:6px;height:6px;border-radius:99px;background:var(--xb-primary);
  margin-top:9px;flex:0 0 6px;
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:12px 18px;border:1px solid transparent;cursor:pointer;transition:transform var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease), border-color var(--xb-speed) var(--xb-ease), color var(--xb-speed) var(--xb-ease), box-shadow var(--xb-speed) var(--xb-ease);user-select:none;font-weight:800;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--xb-primary);
  color:#fff;
}
.btn-primary:hover{background:var(--xb-primary-hover)}
.btn-outline{
  background:#fff;
  color:var(--xb-text);
  border-color:var(--xb-border);
}
.btn-outline:hover{border-color:rgba(239,32,29,.35); color:var(--xb-primary)}
.btn-link{
  padding:0;border:none;background:transparent;color:var(--xb-primary);font-weight:700;
}
.btn-sm{padding:10px 14px;border-radius:10px;font-size:14px}

.hr{height:1px;background:var(--xb-border-2);border:0;margin:0}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid var(--xb-border);
}
.header-inner{
  height:var(--xb-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  min-width:190px;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--xb-primary);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:18px;height:18px}
.brand-title{display:flex;flex-direction:column;line-height:1.05}
.brand-title b{font-size:16px}
.brand-title span{font-size:12px;color:var(--xb-muted);font-weight:600;margin-top:2px}

.nav{
  display:flex;align-items:center;gap:22px;
}
.nav a{
  font-size:16px;
  padding:10px 6px;
  color:rgba(17,24,39,.88);
  font-weight:600;
  position:relative;
}
.nav a:hover{color:var(--xb-primary)}
.nav a.active{color:var(--xb-primary)}
.nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--xb-primary);
}

.header-cta{display:flex;gap:10px;align-items:center}
.menu-btn{
  display:none;
  width:42px;height:42px;border-radius:10px;
  border:1px solid var(--xb-border);
  background:#fff;
  align-items:center;justify-content:center;
}
.menu-btn svg{width:18px;height:18px}

@media (max-width: 980px){
  .nav{display:none}
  .menu-btn{display:flex}
  .brand{min-width:auto}
}

/* Mega dropdown */
.mega{
  position:fixed;
  left:0;right:0;
  top:var(--xb-header-h);
  background:#fff;
  border-bottom:1px solid var(--xb-border);
  z-index:99;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s linear .18s;
}
.mega.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s;
}
.mega-inner{padding:22px 0 26px}
.mega-cols{display:flex;gap:30px;flex-wrap:wrap}
.mega-col{flex:1 1 200px;min-width:190px}
.mega-title{
  font-size:13px;
  font-weight:800;
  color:var(--xb-primary);
  margin:0 0 10px;
}
.mega-link{
  display:block;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.mega-link:hover{color:var(--xb-primary)}
.mega-foot{
  margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--xb-border-2);
}
.mega-foot .hint{font-size:12px;color:var(--xb-muted)}
@media (max-width:980px){ .mega{display:none !important} }

/* Mobile drawer */
.mobile{
  position:fixed;inset:0;
  background:rgba(0,0,0,.38);
  display:none;
  z-index:120;
}
.mobile.open{display:block}
.mobile .panel{
  width:min(92vw, 420px);
  height:100%;
  background:#fff;
  border-right:1px solid var(--xb-border);
  padding:14px 16px 18px;
}
.mobile-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0 14px;
}
.mobile a{display:block;padding:10px 4px;font-weight:700}
.mobile .sub a{padding:8px 4px;font-weight:600;color:rgba(17,24,39,.82)}
.mobile details{
  border-top:1px solid var(--xb-border-2);
  padding:8px 0;
}
.mobile summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;
  padding:10px 4px;
}
.mobile summary::-webkit-details-marker{display:none}
.mobile .actions{display:flex;gap:10px;margin-top:14px}

/* Page chrome */
.hero{
  position:relative;
  padding:96px 0 72px;
  background:#fff;
  border-bottom:1px solid var(--xb-border-2);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:560px;height:560px;
  right:-260px;top:-280px;
  border:1px solid rgba(239,32,29,.18);
  border-radius:999px;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:-280px;bottom:-300px;
  border:1px solid rgba(11,18,32,.10);
  border-radius:999px;
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;display:flex;gap:56px;align-items:center;justify-content:space-between}
.hero .copy{flex:1 1 520px}
.hero .panel{flex:0 0 380px}
.hero .panel .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.hero .panel .mini{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:12px
}
.hero .panel .mini .chip{
  flex:1 1 150px;
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}
.hero .panel .chip b{display:block;font-size:14px}
.hero .panel .chip span{display:block;font-size:12px;color:var(--xb-muted);margin-top:3px}
@media (max-width: 980px){
  .hero{padding:72px 0 56px}
  .hero .wrap{flex-direction:column;align-items:stretch;gap:24px}
  .hero .panel{flex:1 1 auto}
}

.logo-strip{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:14px 0 0;
}
.logo-strip .logo{padding:10px 14px;border:1px solid rgba(15,23,42,.10);border-radius:999px;color:rgba(15,23,42,.70);background:rgba(15,23,42,.02);font-weight:700;font-size:12px}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--xb-border-2);margin-bottom:18px}
.tab{padding:12px 14px;border-radius:12px 12px 0 0;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:900;color:rgba(15,23,42,.72)}
.tab[aria-selected="true"]{color:var(--xb-primary);border-color:var(--xb-border-2);background:#fff}
.tab-panels .panel{display:none}
.tab-panels .panel.active{display:block}


/* Footer */
.footer{
  background:var(--xb-surface);
  border-top:1px solid var(--xb-border-2);
  padding:48px 0 28px;
}
.footer-top{
  display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
}
.footer .cols{display:flex;gap:36px;flex-wrap:wrap}
.footer .col h4{margin:0 0 10px;font-size:14px}
.footer .col a{display:block;padding:6px 0;color:rgba(11,18,32,.72)}
.footer .col a:hover{color:var(--xb-primary)}
.footer-bottom{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--xb-border-2);
  display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;
  color:rgba(11,18,32,.58);
  font-size:12px;
}

.footer-bottom .footer-legal,
.footer-bottom .footer-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.footer-bottom .sep{opacity:.45; padding:0 2px;}
.footer-bottom a:hover{text-decoration:underline;color:var(--xb-text);}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.input, textarea{
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  outline:none;
}
.input:focus, textarea:focus{border-color:rgba(239,32,29,.40)}
textarea{min-height:110px;resize:vertical}

.notice{
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.05);
  border-radius:var(--xb-radius);
  padding:14px 16px;
  color:rgba(17,24,39,.82);
}

.small{font-size:12px;color:var(--xb-muted)}

[id]{scroll-margin-top: calc(var(--xb-header-h) + 18px);}

/* Tone sections (Feishu-like alternation) */
.section.tone{background:var(--xb-surface)}


/* Home components */
.hero-home .wrap{align-items:stretch}
.hero-home .copy{padding-top:6px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-highlights{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
.hero-highlights .hl{flex:1 1 160px;min-width:160px;padding:12px 14px;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:rgba(15,23,42,.02)}
.hero-highlights .hl b{display:block;font-size:13px;letter-spacing:.1px}
.hero-highlights .hl span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}


/* Home big banner (Alibaba-style, flat) */

.hero-banner{padding:0;border-bottom:1px solid var(--xb-border-2);}
.hero-banner::before,.hero-banner::after{display:none}
.hero-banner .banner{
  position:relative;
  min-height:clamp(520px, 74vh, 760px);
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:#0b1220;
}
.hero-banner .banner-media{position:absolute;inset:0;overflow:hidden;}
.hero-banner .banner-media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.06);
  transform:scale(1.03);
  animation:bannerZoom 1.6s var(--xb-ease) both;
}
.hero-banner .banner-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(820px 520px at 14% 42%, rgba(11,18,32,.92) 0%, rgba(11,18,32,.62) 48%, rgba(11,18,32,.28) 72%, rgba(11,18,32,0) 100%),
    linear-gradient(90deg, rgba(11,18,32,.72) 0%, rgba(11,18,32,.34) 40%, rgba(11,18,32,.10) 66%, rgba(11,18,32,0) 100%),
    linear-gradient(180deg, rgba(11,18,32,.48) 0%, rgba(11,18,32,.18) 44%, rgba(11,18,32,0) 100%);
}
.hero-banner .banner-inner{
  position:relative;z-index:1;
  /* Keep banner copy aligned with the global content canvas (.container) */
  width:min(var(--xb-max), calc(100% - 64px));
  margin-inline:auto;
  display:flex;align-items:center;
  justify-content:flex-start;
  padding:clamp(88px, 9vw, 128px) 0 clamp(56px, 7vw, 88px);
}
@media (max-width: 720px){
  .hero-banner .banner-inner{
    width:min(var(--xb-max), calc(100% - 32px));
  }
}
.hero-banner .banner-content{
  max-width:720px;
  /* Lift copy a bit so it doesn't sit too low on large banners */
  transform:translateY(-28px);
}
.hero-banner .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-weight:600;font-size:12px;letter-spacing:.2px;
}
.hero-banner .h1{
  margin-top:14px;
  color:#fff;
  letter-spacing:-.8px;
  line-height:1.05;
  font-size:clamp(38px, 5vw, 58px);
  text-shadow:0 10px 40px rgba(0,0,0,.28);
}
.hero-banner .lead{
  margin-top:14px;
  color:rgba(255,255,255,.86);
  max-width:56ch;
  font-size:16px;
  line-height:1.65;
}
.hero-banner .hero-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.hero-banner .btn-outline{
  color:#fff;border-color:rgba(255,255,255,.48);
  background:rgba(255,255,255,.06);
}
.hero-banner .btn-outline:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.64);}
.hero-banner .scroll-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.74);
  font-size:12px;letter-spacing:.2px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(11,18,32,.22);
}
.hero-banner .scroll-cue .dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.8);
  box-shadow:0 0 0 6px rgba(255,255,255,.12);
  animation:pulse 2.2s var(--xb-ease) infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.75);opacity:.55}}


/* Compact highlight bar under hero */
.hero-bar{
  background:transparent;
  border-bottom:0;
  /* Pull the bar upward to visually connect with banner without leaving a big blank strip */
  position:relative;
  z-index:6;
  margin-top:-26px;
  padding:0 0 6px;
}
.hero-bar .bar{
  display:flex;
  gap:18px;
  align-items:stretch;
  justify-content:space-between;
  padding:18px;
  background:#fff;
  border:1px solid var(--xb-border-2);
  border-radius:16px;
  /* Keep layout stable; the section handles the overlap */
  margin-top:0;
  position:relative;
  z-index:7;
}
.hero-bar .item{
  flex:1 1 0;
  min-width:200px;
  padding:12px 14px;
  border-left:2px solid rgba(239,32,29,.22);
}
.hero-bar .item b{
  display:block;
  font-size:14px;
  line-height:1.3;
  margin-bottom:4px;
}
.hero-bar .item span{
  display:block;
  font-size:13px;
  color:var(--xb-muted);
  line-height:1.45;
}

@keyframes bannerZoom{from{transform:scale(1.08)}to{transform:scale(1.02)}}
@media (max-width: 980px){
  .hero-banner .banner-inner{padding:76px 16px}
  .hero-banner .banner-content{padding:18px 16px;border-radius:16px}
  .hero-bar .bar{flex-direction:column;gap:10px;padding:14px 0}
  .hero-bar .item{border-left:none;border-top:1px solid var(--xb-border-2);padding:12px 0}
  .hero-bar .item:first-child{border-top:none}
}

.hero-visual{position:relative;flex:1 1 520px;min-width:360px}
.mockup{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  overflow:hidden;
}
.mockup-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.mockup-dots{display:flex;gap:8px;align-items:center}
.mockup-dots i{width:10px;height:10px;border-radius:999px;background:rgba(15,23,42,.18);display:block}
.mockup-title{font-weight:900;font-size:12px;color:rgba(15,23,42,.72)}
.mockup-body{padding:16px}
.photo-frame{
  width:100%;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
}
.photo-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 16 / 10;
}
 (max-width: 720px){
  .photo-img{aspect-ratio: 16 / 11;}
}

.mock-row{display:flex;gap:12px;flex-wrap:wrap}
.mock-card{
  flex:1 1 140px;
  min-width:140px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  padding:12px;
}
.mock-card b{display:block;font-size:12px}
.mock-card span{display:block;margin-top:6px;height:8px;border-radius:999px;background:rgba(15,23,42,.06)}
.mock-chart{margin-top:14px;border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,.08);padding:14px}
.bars{display:flex;gap:10px;align-items:flex-end;height:90px}
.bars i{flex:1 1 0;border-radius:10px;background:rgba(239,32,29,.14)}
.bars i:nth-child(2){height:72%}
.bars i:nth-child(3){height:46%}
.bars i:nth-child(4){height:86%}
.bars i:nth-child(5){height:58%}
.bars i:nth-child(1){height:64%}
.float-tag{
  position:absolute;
  padding:10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.82);
}
.float-1{top:18px;right:-8px}
.float-2{bottom:72px;left:-10px}
.float-3{bottom:18px;right:20px}
@media (max-width:980px){
  .hero-visual{min-width:auto}
  .float-1{right:12px}
  .float-2{left:12px}
}

.trust{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:8px 0;
}
.trust b{font-size:14px}
.trust .logos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.trust .logos span{
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;color:rgba(15,23,42,.72)
}

.feature-grid{display:flex;gap:18px;flex-wrap:wrap}
.feature-grid .card{flex:1 1 260px;min-width:240px}
.icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(239,32,29,.10);
  border:1px solid rgba(239,32,29,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.icon svg{width:20px;height:20px}
.mini-list{margin:10px 0 0;padding:0;list-style:none}
.mini-list li{padding:6px 0;color:rgba(15,23,42,.76)}
.mini-list li::before{content:"· ";color:rgba(15,23,42,.32);font-weight:900}

.split{display:flex;gap:56px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.split.reverse{flex-direction:row-reverse}
.split .copy{flex:1 1 480px;min-width:320px}
.split .visual{flex:1 1 480px;min-width:320px}
.split .visual .mockup{box-shadow:none}

.steps{display:flex;gap:16px;flex-wrap:wrap}
.step{flex:1 1 220px;min-width:220px;border-radius:16px;border:1px solid rgba(15,23,42,.10);background:#fff;padding:18px}
.step .no{font-weight:950;color:rgba(239,32,29,.86);font-size:12px;letter-spacing:.24px}
.step h3{margin:10px 0 8px;font-size:16px}
.step p{margin:0;color:rgba(15,23,42,.72)}

.case-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
/* Featured cases: keep thumbnails fully filled */
.case-grid .thumb{aspect-ratio:16/9}
.case-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block}

.case-main{flex:1 1 520px;min-width:320px}
.case-side{flex:1 1 320px;min-width:280px;display:flex;flex-direction:column;gap:18px}
.case-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.kpi{flex:1 1 160px;min-width:160px;border-radius:14px;border:1px solid rgba(15,23,42,.10);padding:12px;background:rgba(15,23,42,.02)}
.kpi b{display:block;font-size:13px}
.kpi span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}


  

/* Motion & reveal (comfortable, respects reduced-motion) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--xb-ease), transform .55s var(--xb-ease);
  transition-delay:var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@keyframes xb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float-tag{animation:xb-float 6s ease-in-out infinite}
.float-1{animation-delay:-0.5s}
.float-2{animation-delay:-2.2s}
.float-3{animation-delay:-1.2s}
@keyframes xb-bar{from{transform:scaleY(.35);opacity:.65}to{transform:scaleY(1);opacity:1}}
.bars i{transform-origin:bottom;animation:xb-bar .8s var(--xb-ease) both}
.bars i:nth-child(1){animation-delay:.02s}
.bars i:nth-child(2){animation-delay:.06s}
.bars i:nth-child(3){animation-delay:.10s}
.bars i:nth-child(4){animation-delay:.14s}
.bars i:nth-child(5){animation-delay:.18s}

/* Pills (short, Feishu-like) */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.02);
  font-size:12px;font-weight:700;
  color:rgba(15,23,42,.72);
}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tag{
  display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;
  color:rgba(15,23,42,.72);
}

  
  
/* --- Image components (flat) --- */
.hero-media{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);}
.hero-media img{display:block;width:100%;height:220px;object-fit:cover;}
@media (max-width: 960px){.hero-media img{height:180px;}}

.hero-home .hero-visual{display:flex;justify-content:flex-end;align-items:flex-end}
.hero-home .hero-img{width:100%;max-width:680px;height:auto;display:block;border:1px solid var(--xb-border);border-radius:24px;background:var(--xb-bg);}

.industry-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.industry-card{flex:1 1 220px;min-width:210px;border:1px solid var(--xb-border-2);border-radius:var(--xb-radius);background:var(--xb-bg);padding:14px;display:flex;flex-direction:column;gap:10px}
.industry-card img{width:100%;height:120px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);}
.industry-name{font-weight:700;color:var(--xb-text);line-height:1.3}

.card-illus{width:100%;height:140px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);margin:12px 0 10px;display:block}

.thumb{border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface);margin:0 0 14px}
.auth-illus{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);margin-bottom:14px}
.auth-illus img{width:100%;height:200px;object-fit:cover;display:block}

@media (max-width: 900px){.hero-bar{margin-top:-22px}}
@media (max-width: 560px){.hero-bar{margin-top:-14px}.hero-bar .bar{padding:14px;border-radius:14px;gap:12px}.section.after-hero{padding-top:22px}}

/* Fine tune banner copy lift on small screens */
@media (max-width: 520px){
  .hero-banner .banner-content{transform:translateY(-10px)}
}

/* --- Patch: Banner copy aligns to container left edge (desktop) --- */
.hero-banner .banner-inner{justify-content:flex-start !important;}
.hero-banner .hero-copy{margin-left:0 !important;margin-right:auto !important;text-align:left !important;}
/* keep safe horizontal padding OFF for desktop; use container padding only */
.hero-banner .banner-inner .container{padding-left:0 !important;padding-right:0 !important;}
@media (max-width: 900px){
  .hero-banner .banner-inner{justify-content:flex-start !important;}
  .hero-banner .banner-inner .container{padding-left:16px !important;padding-right:16px !important;}
}

:root{
  --xb-primary:#ef201d;
  --xb-primary-hover:#d81815;
  --xb-text:#0b1220;
  --xb-muted:rgba(11,18,32,.64);
  --xb-bg:#ffffff;
  --xb-surface:#f6f7f9;
  --xb-surface-2:#f1f2f4;
  --xb-card:#ffffff;
  --xb-border:rgba(11,18,32,.12);
  --xb-border-2:rgba(11,18,32,.08);
  --xb-radius:14px;
  --xb-radius-sm:12px;
  --xb-max:1320px;
  --xb-header-h:80px;
  --xb-speed:.18s;
  --xb-ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Alibaba PuHuiTi",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--xb-text);
  background:var(--xb-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}

.thumb{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface)}
.thumb img{width:100%;height:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
::selection{background:rgba(239,32,29,.18)}

.container{
  width:min(var(--xb-max), calc(100% - 64px));
  margin-inline:auto;
}
@media (max-width: 640px){
  .container{width:calc(100% - 32px)}
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;
  padding:10px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--xb-border);
  z-index:9999;
}

.muted{color:var(--xb-muted)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.06);
  color:var(--xb-primary);
  font-weight:600;
  letter-spacing:.2px;
}

.h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
.h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
.h3{font-size:18px;line-height:1.4;margin:0 0 10px;font-weight:750;letter-spacing:.1px}
.p{margin:0;color:var(--xb-muted)}
.lead{font-size:18px;color:rgba(15,23,42,.78);margin:0;max-width:58ch}

.section{padding:88px 0}
.section.sm{padding:72px 0}
.section .head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:22px;
}
.section .head .desc{max-width:720px}

.row{display:flex;gap:18px;align-items:stretch}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.col{flex:1 1 0}
.col.auto{flex:0 0 auto}
@media (max-width: 980px){
  .h1{font-size:clamp(34px, 4.6vw, 56px);line-height:1.08;margin:16px 0 16px;font-weight:800;letter-spacing:.15px}
  .h2{font-size:clamp(24px, 3.2vw, 40px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:.1px}
  .row.stack{flex-direction:column}
}
@media (max-width: 560px){
  :root{ --xb-header-h: 58px; }
  .header-inner{gap:10px}
  .brand{gap:10px}
  .brand-mark{width:30px;height:30px;border-radius:9px}
  .brand-title b{font-size:15px}
  .brand-title span{font-size:11px;margin-top:1px}
  .header-cta{gap:8px;flex-wrap:nowrap}
  .header-cta .btn{padding:10px 12px;border-radius:10px;font-size:14px;white-space:nowrap}
  .header-cta .btn,.menu-btn{height:40px}
  .menu-btn{width:40px}
}
@media (max-width: 420px){
  .brand-title span{display:none}
  .header-cta .btn{padding:10px 10px}
}

.card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.card.flat{background:transparent;border-color:transparent;padding:0}
.card:hover{border-color:rgba(11,18,32,.22);background:rgba(11,18,32,.02)}
.card .meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}

.cards{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
.cards .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.cards > .card{height:100%}
.cards > .card{display:flex;flex-direction:column}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);color:rgba(15,23,42,.74);background:rgba(15,23,42,.03)}

.list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.dot{
  width:6px;height:6px;border-radius:99px;background:var(--xb-primary);
  margin-top:9px;flex:0 0 6px;
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:12px 18px;border:1px solid transparent;cursor:pointer;transition:transform var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease), border-color var(--xb-speed) var(--xb-ease), color var(--xb-speed) var(--xb-ease), box-shadow var(--xb-speed) var(--xb-ease);user-select:none;font-weight:800;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--xb-primary);
  color:#fff;
}
.btn-primary:hover{background:var(--xb-primary-hover)}
.btn-outline{
  background:#fff;
  color:var(--xb-text);
  border-color:var(--xb-border);
}
.btn-outline:hover{border-color:rgba(239,32,29,.35); color:var(--xb-primary)}
.btn-link{
  padding:0;border:none;background:transparent;color:var(--xb-primary);font-weight:700;
}
.btn-sm{padding:10px 14px;border-radius:10px;font-size:14px}

.hr{height:1px;background:var(--xb-border-2);border:0;margin:0}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid var(--xb-border);
}
.header-inner{
  height:var(--xb-header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  min-width:190px;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--xb-primary);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:18px;height:18px}
.brand-title{display:flex;flex-direction:column;line-height:1.05}
.brand-title b{font-size:16px}
.brand-title span{font-size:12px;color:var(--xb-muted);font-weight:600;margin-top:2px}

.nav{
  display:flex;align-items:center;gap:22px;
}
.nav a{
  font-size:16px;
  padding:10px 6px;
  color:rgba(17,24,39,.88);
  font-weight:600;
  position:relative;
}
.nav a:hover{color:var(--xb-primary)}
.nav a.active{color:var(--xb-primary)}
.nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--xb-primary);
}

.header-cta{display:flex;gap:10px;align-items:center}
.menu-btn{
  display:none;
  width:42px;height:42px;border-radius:10px;
  border:1px solid var(--xb-border);
  background:#fff;
  align-items:center;justify-content:center;
}
.menu-btn svg{width:18px;height:18px}

@media (max-width: 980px){
  .nav{display:none}
  .menu-btn{display:flex}
  .brand{min-width:auto}
}

/* Mega dropdown */
.mega{
  position:fixed;
  left:0;right:0;
  top:var(--xb-header-h);
  background:#fff;
  border-bottom:1px solid var(--xb-border);
  z-index:99;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s linear .18s;
}
.mega.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .18s var(--xb-ease), transform .18s var(--xb-ease), visibility 0s;
}
.mega-inner{padding:22px 0 26px}
.mega-cols{display:flex;gap:30px;flex-wrap:wrap}
.mega-col{flex:1 1 200px;min-width:190px}
.mega-title{
  font-size:13px;
  font-weight:800;
  color:var(--xb-primary);
  margin:0 0 10px;
}
.mega-link{
  display:block;
  padding:6px 0;
  color:rgba(17,24,39,.82);
}
.mega-link:hover{color:var(--xb-primary)}
.mega-foot{
  margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--xb-border-2);
}
.mega-foot .hint{font-size:12px;color:var(--xb-muted)}
@media (max-width:980px){ .mega{display:none !important} }

/* Mobile drawer */
.mobile{
  position:fixed;inset:0;
  background:rgba(0,0,0,.38);
  display:none;
  z-index:120;
}
.mobile.open{display:block}
.mobile .panel{
  width:min(92vw, 420px);
  height:100%;
  background:#fff;
  border-right:1px solid var(--xb-border);
  padding:14px 16px 18px;
}
.mobile-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0 14px;
}
.mobile a{display:block;padding:10px 4px;font-weight:700}
.mobile .sub a{padding:8px 4px;font-weight:600;color:rgba(17,24,39,.82)}
.mobile details{
  border-top:1px solid var(--xb-border-2);
  padding:8px 0;
}
.mobile summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;
  padding:10px 4px;
}
.mobile summary::-webkit-details-marker{display:none}
.mobile .actions{display:flex;gap:10px;margin-top:14px}

/* Page chrome */
.hero{
  position:relative;
  padding:96px 0 72px;
  background:#fff;
  border-bottom:1px solid var(--xb-border-2);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:560px;height:560px;
  right:-260px;top:-280px;
  border:1px solid rgba(239,32,29,.18);
  border-radius:999px;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:-280px;bottom:-300px;
  border:1px solid rgba(11,18,32,.10);
  border-radius:999px;
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;display:flex;gap:56px;align-items:center;justify-content:space-between}
.hero .copy{flex:1 1 520px}
.hero .panel{flex:0 0 380px}
.hero .panel .card{background:var(--xb-card);border:1px solid var(--xb-border);border-radius:var(--xb-radius);padding:22px;transition:border-color var(--xb-speed) var(--xb-ease), background var(--xb-speed) var(--xb-ease)}
.hero .panel .mini{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:12px
}
.hero .panel .mini .chip{
  flex:1 1 150px;
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}
.hero .panel .chip b{display:block;font-size:14px}
.hero .panel .chip span{display:block;font-size:12px;color:var(--xb-muted);margin-top:3px}
@media (max-width: 980px){
  .hero{padding:72px 0 56px}
  .hero .wrap{flex-direction:column;align-items:stretch;gap:24px}
  .hero .panel{flex:1 1 auto}
}

.logo-strip{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:14px 0 0;
}
.logo-strip .logo{padding:10px 14px;border:1px solid rgba(15,23,42,.10);border-radius:999px;color:rgba(15,23,42,.70);background:rgba(15,23,42,.02);font-weight:700;font-size:12px}



/* Auth (Login) */
.auth{
  padding:44px 0 72px;
  background:var(--xb-surface);
  border-bottom:1px solid var(--xb-border-2);
}
.auth-wrap{display:flex;gap:44px;align-items:flex-start;justify-content:center}
.auth-card{flex:0 0 480px;max-width:520px;width:100%}
.auth-aside{flex:0 0 360px;max-width:380px;width:100%;display:flex;flex-direction:column;gap:14px}
.auth-card-inner{padding:24px}
.auth-head{margin-bottom:14px}
.auth-title{margin:10px 0 8px;font-size:28px;line-height:1.2;font-weight:900;letter-spacing:.2px}
.auth-sub{margin:0;color:var(--xb-muted);max-width:40em}
.auth-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.auth .card:hover{transform:none;border-color:var(--xb-border)}
@media (max-width: 980px){
  .auth{padding:28px 0 56px}
  .auth-wrap{flex-direction:column;gap:16px;align-items:stretch}
  .auth-card{max-width:none}
  .auth-aside{max-width:none}
}
/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--xb-border-2);margin-bottom:18px}
.tab{padding:12px 14px;border-radius:12px 12px 0 0;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:900;color:rgba(15,23,42,.72)}
.tab[aria-selected="true"]{color:var(--xb-primary);border-color:var(--xb-border-2);background:#fff}
.tab-panels .panel{display:none}
.tab-panels .panel.active{display:block}

/* Footer */
.footer{
  background:var(--xb-surface);
  border-top:1px solid var(--xb-border-2);
  padding:48px 0 28px;
}
.footer-top{
  display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
}
.footer .cols{display:flex;gap:36px;flex-wrap:wrap}
.footer .col h4{margin:0 0 10px;font-size:14px}
.footer .col a{display:block;padding:6px 0;color:rgba(11,18,32,.72)}
.footer .col a:hover{color:var(--xb-primary)}
.footer-bottom{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--xb-border-2);
  display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;
  color:rgba(11,18,32,.58);
  font-size:12px;
}

.footer-bottom .footer-legal,
.footer-bottom .footer-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.footer-bottom .sep{opacity:.45; padding:0 2px;}
.footer-bottom a:hover{text-decoration:underline;color:var(--xb-text);}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.input, textarea{
  border:1px solid var(--xb-border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  outline:none;
}
.input:focus, textarea:focus{border-color:rgba(239,32,29,.40)}
textarea{min-height:110px;resize:vertical}

.notice{
  border:1px solid rgba(239,32,29,.18);
  background:rgba(239,32,29,.05);
  border-radius:var(--xb-radius);
  padding:14px 16px;
  color:rgba(17,24,39,.82);
}

.small{font-size:12px;color:var(--xb-muted)}

[id]{scroll-margin-top: calc(var(--xb-header-h) + 18px);}

/* Tone sections (Feishu-like alternation) */
.section.tone{background:var(--xb-surface)}


/* Home components */
.hero-home .wrap{align-items:stretch}
.hero-home .copy{padding-top:6px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-highlights{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
.hero-highlights .hl{flex:1 1 160px;min-width:160px;padding:12px 14px;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:rgba(15,23,42,.02)}
.hero-highlights .hl b{display:block;font-size:13px;letter-spacing:.1px}
.hero-highlights .hl span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}
.hero-visual{position:relative;flex:1 1 520px;min-width:360px}
.mockup{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  overflow:hidden;
}
.mockup-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.mockup-dots{display:flex;gap:8px;align-items:center}
.mockup-dots i{width:10px;height:10px;border-radius:999px;background:rgba(15,23,42,.18);display:block}
.mockup-title{font-weight:900;font-size:12px;color:rgba(15,23,42,.72)}
.mockup-body{padding:16px}
.mock-row{display:flex;gap:12px;flex-wrap:wrap}
.mock-card{
  flex:1 1 140px;
  min-width:140px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  padding:12px;
}
.mock-card b{display:block;font-size:12px}
.mock-card span{display:block;margin-top:6px;height:8px;border-radius:999px;background:rgba(15,23,42,.06)}
.mock-chart{margin-top:14px;border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,.08);padding:14px}
.bars{display:flex;gap:10px;align-items:flex-end;height:90px}
.bars i{flex:1 1 0;border-radius:10px;background:rgba(239,32,29,.14)}
.bars i:nth-child(2){height:72%}
.bars i:nth-child(3){height:46%}
.bars i:nth-child(4){height:86%}
.bars i:nth-child(5){height:58%}
.bars i:nth-child(1){height:64%}
.float-tag{
  position:absolute;
  padding:10px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.82);
}
.float-1{top:18px;right:-8px}
.float-2{bottom:72px;left:-10px}
.float-3{bottom:18px;right:20px}
@media (max-width:980px){
  .hero-visual{min-width:auto}
  .float-1{right:12px}
  .float-2{left:12px}
}

.trust{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:8px 0;
}
.trust b{font-size:14px}
.trust .logos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.trust .logos span{
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;color:rgba(15,23,42,.72)
}

.feature-grid{display:flex;gap:18px;flex-wrap:wrap}
.feature-grid .card{flex:1 1 260px;min-width:240px}
.icon{
  width:40px;height:40px;border-radius:10px;
  background:rgba(239,32,29,.10);
  border:1px solid rgba(239,32,29,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.icon svg{width:20px;height:20px}
.mini-list{margin:10px 0 0;padding:0;list-style:none}
.mini-list li{padding:6px 0;color:rgba(15,23,42,.76)}
.mini-list li::before{content:"· ";color:rgba(15,23,42,.32);font-weight:900}

.split{display:flex;gap:56px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.split.reverse{flex-direction:row-reverse}
.split .copy{flex:1 1 480px;min-width:320px}
.split .visual{flex:1 1 480px;min-width:320px}
.split .visual .mockup{box-shadow:none}

.steps{display:flex;gap:16px;flex-wrap:wrap}
.step{flex:1 1 220px;min-width:220px;border-radius:16px;border:1px solid rgba(15,23,42,.10);background:#fff;padding:18px}
.step .no{font-weight:950;color:rgba(239,32,29,.86);font-size:12px;letter-spacing:.24px}
.step h3{margin:10px 0 8px;font-size:16px}
.step p{margin:0;color:rgba(15,23,42,.72)}

.case-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
/* Featured cases: keep thumbnails fully filled */
.case-grid .thumb{aspect-ratio:16/9}
.case-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block}

.case-main{flex:1 1 520px;min-width:320px}
.case-side{flex:1 1 320px;min-width:280px;display:flex;flex-direction:column;gap:18px}
.case-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.kpi{flex:1 1 160px;min-width:160px;border-radius:14px;border:1px solid rgba(15,23,42,.10);padding:12px;background:rgba(15,23,42,.02)}
.kpi b{display:block;font-size:13px}
.kpi span{display:block;margin-top:4px;font-size:12px;color:rgba(15,23,42,.66)}


  

/* Motion & reveal (comfortable, respects reduced-motion) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--xb-ease), transform .55s var(--xb-ease);
  transition-delay:var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@keyframes xb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float-tag{animation:xb-float 6s ease-in-out infinite}
.float-1{animation-delay:-0.5s}
.float-2{animation-delay:-2.2s}
.float-3{animation-delay:-1.2s}
@keyframes xb-bar{from{transform:scaleY(.35);opacity:.65}to{transform:scaleY(1);opacity:1}}
.bars i{transform-origin:bottom;animation:xb-bar .8s var(--xb-ease) both}
.bars i:nth-child(1){animation-delay:.02s}
.bars i:nth-child(2){animation-delay:.06s}
.bars i:nth-child(3){animation-delay:.10s}
.bars i:nth-child(4){animation-delay:.14s}
.bars i:nth-child(5){animation-delay:.18s}

/* Pills (short, Feishu-like) */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.02);
  font-size:12px;font-weight:700;
  color:rgba(15,23,42,.72);
}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tag{
  display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:12px;font-weight:800;
  color:rgba(15,23,42,.72);
}

  
  
/* --- Image components (flat) --- */
.hero-media{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);}
.hero-media img{display:block;width:100%;height:220px;object-fit:cover;}
@media (max-width: 960px){.hero-media img{height:180px;}}

.hero-home .hero-visual{display:flex;justify-content:flex-end;align-items:flex-end}
.hero-home .hero-img{width:100%;max-width:680px;height:auto;display:block;border:1px solid var(--xb-border);border-radius:24px;background:var(--xb-bg);}

.industry-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.industry-card{flex:1 1 220px;min-width:210px;border:1px solid var(--xb-border-2);border-radius:var(--xb-radius);background:var(--xb-bg);padding:14px;display:flex;flex-direction:column;gap:10px}
.industry-card img{width:100%;height:120px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);}
.industry-name{font-weight:700;color:var(--xb-text);line-height:1.3}

.card-illus{width:100%;height:140px;object-fit:cover;border-radius:12px;background:var(--xb-surface);border:1px solid var(--xb-border-2);margin:12px 0 10px;display:block}

.thumb{border-radius:16px;overflow:hidden;border:1px solid var(--xb-border-2);background:var(--xb-surface);margin:0 0 14px}
.auth-illus{border:1px solid var(--xb-border);border-radius:var(--xb-radius);overflow:hidden;background:var(--xb-card);margin-bottom:14px}
.auth-illus img{width:100%;height:200px;object-fit:cover;display:block}

/* ===== Visual refresh layer ===== */
:root{
  --xb-primary:#ff7a1a;
  --xb-primary-hover:#ea6200;
  --xb-text:#0f172a;
  --xb-muted:rgba(15,23,42,.68);
  --xb-bg:#ffffff;
  --xb-surface:#f7f9fc;
  --xb-surface-2:#f1f5f9;
  --xb-card:rgba(255,255,255,.96);
  --xb-border:rgba(15,23,42,.10);
  --xb-border-2:rgba(15,23,42,.07);
  --xb-radius:22px;
  --xb-radius-sm:16px;
  --xb-max:1240px;
  --xb-header-h:76px;
  --xb-speed:.18s;
  --xb-ease:cubic-bezier(.2,.8,.2,1);
}

html{background:#fbfcfe}
body{
  background:
    radial-gradient(1200px 520px at 100% -10%, rgba(255,122,26,.08) 0%, rgba(255,122,26,0) 60%),
    radial-gradient(900px 460px at -12% 18%, rgba(59,130,246,.06) 0%, rgba(59,130,246,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  color:var(--xb-text);
  letter-spacing:.01em;
}

.container{
  width:min(var(--xb-max), calc(100% - 80px));
}

@media (max-width: 900px){
  .container{width:calc(100% - 36px)}
}
@media (max-width: 640px){
  .container{width:calc(100% - 24px)}
}

.h1{
  font-size:clamp(38px, 5vw, 64px);
  line-height:1.04;
  margin:16px 0 18px;
  letter-spacing:-.02em;
}
.h2{
  font-size:clamp(28px, 3.6vw, 44px);
  line-height:1.14;
  margin:0 0 16px;
  letter-spacing:-.01em;
}
.h3{
  font-size:20px;
  margin:0 0 12px;
}
.lead{
  font-size:18px;
  line-height:1.85;
  max-width:60ch;
  color:rgba(15,23,42,.78);
}
.p{line-height:1.85}

.section{padding:104px 0}
.section.sm{padding:76px 0}
.section.after-hero{padding-top:42px}
.section .head{
  gap:20px;
  margin-bottom:28px;
}
.section.tone{
  background:linear-gradient(180deg, rgba(247,249,252,.92) 0%, rgba(255,255,255,.86) 100%);
  border-block:1px solid rgba(15,23,42,.04);
}

.row,.cards,.feature-grid,.steps,.case-grid,.hero-actions,.hero-highlights,.industry-grid,.case-kpis{
  gap:24px;
}
.cards,.feature-grid,.case-grid,.steps{
  align-items:stretch;
}
.cards > .card,
.feature-grid > .card,
.steps > .step{
  flex:1 1 280px;
  min-width:260px;
}

.card,
.cards .card,
.hero .panel .card{
  background:var(--xb-card);
  border:1px solid var(--xb-border);
  border-radius:var(--xb-radius);
  padding:28px;
  box-shadow:0 18px 48px rgba(15,23,42,.05);
  transition:
    transform var(--xb-speed) var(--xb-ease),
    border-color var(--xb-speed) var(--xb-ease),
    background var(--xb-speed) var(--xb-ease),
    box-shadow var(--xb-speed) var(--xb-ease);
}
.card:hover,
.cards .card:hover{
  transform:translateY(-2px);
  border-color:rgba(15,23,42,.14);
  background:#fff;
  box-shadow:0 22px 54px rgba(15,23,42,.08);
}
.card.flat{
  box-shadow:none;
}

.badge,.pill{
  background:rgba(255,122,26,.08);
  border-color:rgba(255,122,26,.16);
  color:rgba(15,23,42,.78);
}

.list{
  margin-top:12px;
}
.list li{
  padding:8px 0;
}
.dot{
  margin-top:11px;
}

.btn{
  border-radius:14px;
  padding:14px 20px;
  font-weight:800;
}
.btn-primary{
  box-shadow:0 12px 24px rgba(255,122,26,.18);
}
.btn-outline{
  background:rgba(255,255,255,.92);
}
.btn-sm{
  padding:11px 16px;
  border-radius:12px;
}

.site-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.header-inner{
  height:var(--xb-header-h);
}
.brand-mark{
  width:38px;
  height:38px;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(255,122,26,.20);
}
.nav{
  gap:28px;
}
.nav a{
  font-weight:700;
}
.nav a.active::after{
  bottom:-2px;
}

.mega{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
}
.mega-inner{
  padding:28px 0 30px;
}
.mega-cols{
  gap:32px;
}
.mega-link{
  padding:8px 0;
}
.mobile .panel{
  box-shadow:18px 0 54px rgba(15,23,42,.12);
}

.hero{
  padding:112px 0 88px;
}
.hero .wrap{
  gap:72px;
}
.hero .copy{
  flex:1 1 560px;
}
.hero .panel{
  flex:0 0 400px;
}
.hero::before,
.hero::after{
  opacity:.45;
}

.hero-banner{
  border-bottom:none;
}
.hero-banner .banner{
  min-height:clamp(560px, 75vh, 800px);
  background:#0d1628;
}
.hero-banner .banner-media img{
  object-position:center;
  transform:scale(1);
  filter:none;
}
.hero-banner .banner-media::after{
  background:
    radial-gradient(920px 560px at 12% 44%, rgba(10,15,28,.90) 0%, rgba(10,15,28,.62) 44%, rgba(10,15,28,.18) 72%, rgba(10,15,28,0) 100%),
    linear-gradient(90deg, rgba(10,15,28,.74) 0%, rgba(10,15,28,.34) 38%, rgba(10,15,28,.08) 64%, rgba(10,15,28,0) 100%),
    linear-gradient(180deg, rgba(10,15,28,.30) 0%, rgba(10,15,28,.04) 100%);
}
.hero-banner .banner-inner{
  position:relative;
  width:min(var(--xb-max), calc(100% - 80px));
  padding:clamp(96px, 10vw, 136px) 0 clamp(72px, 8vw, 104px);
}
.hero-banner .banner-content{
  max-width:760px;
  transform:translateY(-16px);
}
.hero-banner .lead{
  max-width:58ch;
}
.hero-banner .h1{
  margin-top:18px;
  margin-bottom:18px;
}
.hero-banner .scroll-cue{
  bottom:22px;
  backdrop-filter:blur(8px);
}

.hero-bar{
  margin-top:-38px;
  padding:0 0 8px;
}
.hero-bar .bar{
  gap:22px;
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 22px 54px rgba(15,23,42,.08);
}
.hero-bar .item{
  padding:14px 16px;
  border-left:2px solid rgba(255,122,26,.18);
}
.hero-bar .item b{
  font-size:15px;
}
.hero-bar .item span{
  font-size:13px;
  line-height:1.55;
}

.hero-highlights .hl,
.hero .panel .mini .chip,
.kpi,
.step{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(247,249,252,.82) 0%, rgba(255,255,255,.98) 100%);
}
.hero-highlights .hl,
.kpi{
  padding:14px 16px;
}
.step{
  padding:24px;
}
.num{
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,122,26,.10);
  color:var(--xb-primary);
  font-weight:900;
  margin-bottom:14px;
}

.split{
  display:flex;
  gap:72px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.split .copy,
.split .visual{
  flex:1 1 460px;
  min-width:320px;
}

.case-grid{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.case-main{
  flex:1.25 1 620px;
}
.case-side{
  flex:1 1 360px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.case-side > .card{
  flex:1 1 auto;
}

.trust{
  display:flex;
  gap:26px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.trust .logos{
  gap:12px;
}
.trust .logos span,
.logo-strip .logo{
  padding:11px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
}

.industry-card{
  padding:16px;
  border-radius:20px;
  box-shadow:0 16px 42px rgba(15,23,42,.05);
}
.industry-card img{
  height:144px;
  border-radius:16px;
}
.industry-name{
  font-size:15px;
}

.thumb,
.hero-media,
.photo-frame,
.auth-illus{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(247,249,252,.95) 0%, rgba(255,255,255,.98) 100%);
  box-shadow:0 18px 46px rgba(15,23,42,.05);
}
.thumb{
  aspect-ratio:16/10;
}
.thumb img,
.hero-media img,
.photo-img,
.auth-illus img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.hero-media img{
  height:260px;
}
.photo-frame{
  border-radius:24px;
}
.photo-img{
  aspect-ratio:16/10;
}

.notice{
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,122,26,.05);
  border-color:rgba(255,122,26,.16);
}

.auth{
  padding:104px 0;
}
.auth-wrap{
  display:flex;
  gap:32px;
  align-items:stretch;
  flex-wrap:wrap;
}
.auth-card{
  flex:1 1 520px;
}
.auth-aside{
  flex:1 1 400px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.auth-card-inner{
  height:100%;
}
.auth-illus{
  min-height:280px;
}
.auth-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
}

.footer{
  margin-top:18px;
  padding:64px 0 34px;
  background:linear-gradient(180deg, rgba(247,249,252,.92) 0%, rgba(240,245,250,.96) 100%);
}
.footer-top{
  gap:32px;
}
.footer .cols{
  gap:46px;
}
.footer .col a{
  padding:7px 0;
}
.footer-bottom{
  margin-top:28px;
  padding-top:22px;
}

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .52s var(--xb-ease),
    transform .52s var(--xb-ease);
  transition-delay:var(--d,0s);
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

.error-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 0;
}
.error-card{
  max-width:720px;
  text-align:left;
}
.error-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:92px;
  height:92px;
  border-radius:28px;
  background:rgba(255,122,26,.10);
  color:var(--xb-primary);
  font-size:36px;
  font-weight:900;
  margin-bottom:18px;
}

@media (max-width: 1080px){
  .hero .wrap,
  .split{
    gap:40px;
  }
  .hero .panel{
    flex:1 1 auto;
  }
}

@media (max-width: 980px){
  .section{padding:82px 0}
  .section.sm{padding:60px 0}
  .hero{padding:86px 0 68px}
  .hero .wrap{gap:28px;flex-direction:column;align-items:stretch}
  .hero .panel,
  .hero .copy,
  .split .copy,
  .split .visual,
  .case-main,
  .case-side,
  .auth-card,
  .auth-aside{
    flex:1 1 100%;
    min-width:0;
  }
  .hero-banner .banner-inner{
    width:min(var(--xb-max), calc(100% - 36px));
    padding:92px 0 88px;
  }
  .hero-banner .banner-content{
    transform:none;
    max-width:680px;
  }
  .hero-bar{
    margin-top:-24px;
  }
  .hero-bar .bar{
    flex-direction:column;
    gap:10px;
    padding:18px;
  }
  .hero-bar .item{
    min-width:0;
    padding:12px 0;
    border-left:none;
    border-top:1px solid var(--xb-border-2);
  }
  .hero-bar .item:first-child{
    border-top:none;
  }
  .industry-card img{
    height:132px;
  }
}

@media (max-width: 720px){
  .container{
    width:calc(100% - 28px);
  }
  .h1{
    font-size:34px;
  }
  .h2{
    font-size:28px;
  }
  .lead,
  .p{
    line-height:1.78;
  }
  .card,
  .cards .card,
  .hero .panel .card{
    padding:22px;
    border-radius:20px;
  }
  .hero-banner .banner{
    min-height:500px;
  }
  .hero-banner .lead{
    font-size:16px;
  }
  .thumb,
  .photo-frame,
  .auth-illus{
    border-radius:20px;
  }
  .thumb{
    aspect-ratio:4/3;
  }
  .industry-card{
    min-width:calc(50% - 12px);
  }
  .footer .cols{
    gap:28px;
  }
}

@media (max-width: 560px){
  :root{ --xb-header-h: 60px; }
  .container{
    width:calc(100% - 24px);
  }
  .site-header{
    backdrop-filter:blur(10px);
  }
  .header-inner{gap:10px}
  .brand{gap:10px}
  .brand-mark{
    width:32px;
    height:32px;
    border-radius:10px;
  }
  .brand-title b{font-size:15px}
  .brand-title span{font-size:11px;margin-top:1px}
  .header-cta{gap:8px;flex-wrap:nowrap}
  .header-cta .btn{
    padding:10px 12px;
    border-radius:10px;
    font-size:14px;
    white-space:nowrap;
  }
  .header-cta .btn,.menu-btn{height:40px}
  .menu-btn{width:40px}
  .section{padding:72px 0}
  .section.sm{padding:52px 0}
  .hero{padding:74px 0 58px}
  .hero-banner .banner{
    min-height:460px;
  }
  .hero-banner .banner-inner{
    width:calc(100% - 24px);
    padding:86px 0 72px;
  }
  .hero-banner .h1{
    font-size:32px;
  }
  .hero-media img{
    height:220px;
  }
  .industry-card{
    min-width:100%;
  }
  .mobile .panel{
    width:100%;
  }
}

@media (max-width: 420px){
  .brand-title span{display:none}
  .header-cta .btn{padding:10px 10px}
}

/* ===== V2 布局与留白再平衡 ===== */
:root{
  --xb-max:1280px;
}

.container{
  width:min(var(--xb-max), calc(100% - 72px));
}

.section{
  padding:76px 0;
}

.section.sm{
  padding:56px 0;
}

.section .head{
  margin-bottom:20px;
}

.hero{
  padding:94px 0 68px;
}

.hero .wrap,
.split{
  gap:56px;
}

.case-grid,
.feature-grid,
.steps,
.cards{
  gap:20px;
}

.card,
.cards .card{
  padding:20px;
}

.auth{
  padding:88px 0;
}

.auth-wrap{
  gap:28px;
}

.footer{
  margin-top:10px;
  padding:58px 0 30px;
}

.footer-top{
  gap:28px;
}

.footer .cols{
  gap:38px;
}

.xb-page-index .hero-banner{
  padding:0 !important;
  margin:0;
}

.xb-page-index .hero-banner .banner{
  min-height:clamp(480px, 66vh, 680px);
}

.xb-page-index .hero-banner .banner-inner{
  width:min(var(--xb-max), calc(100% - 72px));
  padding:clamp(60px, 7vw, 88px) 0 clamp(42px, 5vw, 64px);
}

.xb-page-index .hero-banner .banner-content{
  max-width:720px;
  transform:none;
}

.xb-page-index .hero-banner .h1{
  margin-top:16px;
  margin-bottom:16px;
}

.xb-page-index .hero-banner .lead{
  max-width:54ch;
}

.xb-page-index .hero-banner .hero-actions{
  margin-top:20px;
}

.xb-page-index .hero-banner .scroll-cue{
  bottom:18px;
}

.xb-page-index .hero-bar{
  margin-top:-30px;
  padding:0;
}

.xb-page-index .hero-bar .container{
  position:relative;
  z-index:2;
}

.xb-page-index .hero-bar .bar{
  gap:18px;
  padding:18px 20px;
  border-radius:20px;
  box-shadow:0 18px 42px rgba(15,23,42,.07);
}

.xb-page-index .hero-bar .item{
  padding:12px 14px;
}

.xb-page-index .hero-bar + .section.after-hero{
  padding-top:30px;
}

.xb-page-index .section{
  padding:68px 0;
}

.xb-page-index .section.sm{
  padding:48px 0;
}

.xb-page-index .section.tone{
  padding-top:64px;
  padding-bottom:64px;
}

.xb-page-index .trust{
  gap:18px;
}

.xb-page-index .industry-grid{
  margin-top:18px;
  gap:18px;
}

.xb-page-index .industry-card{
  padding:14px;
  border-radius:18px;
}

.xb-page-index .split{
  gap:48px;
}

.xb-page-index .footer{
  margin-top:4px;
}

@media (max-width: 980px){
  .container{
    width:min(var(--xb-max), calc(100% - 40px));
  }

  .section{
    padding:68px 0;
  }

  .section.sm{
    padding:50px 0;
  }

  .hero{
    padding:82px 0 60px;
  }

  .hero .wrap,
  .split{
    gap:32px;
  }

  .xb-page-index .hero-banner .banner{
    min-height:520px;
  }

  .xb-page-index .hero-banner .banner-inner{
    width:calc(100% - 40px);
    padding:68px 0 60px;
  }

  .xb-page-index .hero-bar{
    margin-top:-22px;
  }

  .xb-page-index .hero-bar .bar{
    padding:16px;
  }

  .xb-page-index .hero-bar + .section.after-hero{
    padding-top:26px;
  }

  .xb-page-index .section{
    padding:60px 0;
  }

  .xb-page-index .section.sm{
    padding:44px 0;
  }
}

@media (max-width: 560px){
  .container{
    width:calc(100% - 24px);
  }

  .hero{
    padding:72px 0 52px;
  }

  .section{
    padding:56px 0;
  }

  .section.sm{
    padding:40px 0;
  }

  .xb-page-index .hero-banner .banner{
    min-height:460px;
  }

  .xb-page-index .hero-banner .banner-inner{
    width:calc(100% - 24px);
    padding:56px 0 50px;
  }

  .xb-page-index .hero-banner .h1{
    font-size:30px;
  }

  .xb-page-index .hero-banner .hero-actions{
    gap:10px;
  }

  .xb-page-index .hero-bar{
    margin-top:-16px;
  }

  .xb-page-index .hero-bar .bar{
    padding:14px;
    gap:8px;
    border-radius:16px;
  }

  .xb-page-index .hero-bar .item{
    padding:10px 0;
  }

  .xb-page-index .hero-bar + .section.after-hero{
    padding-top:20px;
  }

  .xb-page-index .industry-grid{
    gap:14px;
  }
}

/* ===== V3 全站纵向留白再压缩：保留呼吸感，去掉过度空白 ===== */
:root{
  --xb-max:1260px;
}

/* 非首页：首屏与正文统一更紧凑，并且顶部对齐，避免内容被居中后出现大块空白 */
.xb-page:not(.xb-page-index) .hero{
  padding:72px 0 44px;
}

.xb-page:not(.xb-page-index) .hero .wrap{
  align-items:flex-start;
  gap:40px;
}

.xb-page:not(.xb-page-index) .hero .copy{
  padding-top:4px;
}

.xb-page:not(.xb-page-index) .section{
  padding:52px 0;
}

.xb-page:not(.xb-page-index) .section.sm{
  padding:36px 0;
}

.xb-page:not(.xb-page-index) .section .head{
  margin-bottom:16px;
}

.xb-page:not(.xb-page-index) .split{
  align-items:flex-start;
  gap:40px;
}

.xb-page:not(.xb-page-index) .row,
.xb-page:not(.xb-page-index) .cards,
.xb-page:not(.xb-page-index) .feature-grid,
.xb-page:not(.xb-page-index) .case-grid,
.xb-page:not(.xb-page-index) .steps,
.xb-page:not(.xb-page-index) .industry-grid{
  gap:18px;
}

.xb-page:not(.xb-page-index) .card,
.xb-page:not(.xb-page-index) .cards .card,
.xb-page:not(.xb-page-index) .hero .panel .card{
  padding:18px;
}

.xb-page:not(.xb-page-index) .footer{
  margin-top:0;
  padding:46px 0 24px;
}

.xb-page:not(.xb-page-index) .footer-top{
  gap:20px;
}

/* 关于页再额外收一档：这页之前最明显 */
.xb-page-about .hero{
  padding:64px 0 36px;
}

.xb-page-about .section{
  padding:46px 0;
}

.xb-page-about .section.sm{
  padding:30px 0;
}

.xb-page-about .hero .wrap,
.xb-page-about .split{
  gap:36px;
}

/* 首页：首屏、能力条、首个内容区整体收紧，消除两段过大的空白 */
.xb-page-index .hero-banner .banner{
  min-height:clamp(420px, 56vh, 560px);
}

.xb-page-index .hero-banner .banner-inner{
  width:min(var(--xb-max), calc(100% - 72px));
  padding:48px 0 38px;
}

.xb-page-index .hero-banner .banner-content{
  max-width:680px;
}

.xb-page-index .hero-banner .hero-actions{
  margin-top:18px;
}

.xb-page-index .hero-banner .scroll-cue{
  bottom:14px;
}

.xb-page-index .hero-bar{
  margin-top:-24px;
}

.xb-page-index .hero-bar .bar{
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
}

.xb-page-index .hero-bar .item{
  padding:10px 12px;
}

.xb-page-index .hero-bar + .section.after-hero{
  padding-top:16px;
}

.xb-page-index .section{
  padding:50px 0;
}

.xb-page-index .section.sm{
  padding:34px 0;
}

.xb-page-index .section.tone{
  padding-top:48px;
  padding-bottom:48px;
}

.xb-page-index .section .head{
  margin-bottom:16px;
}

.xb-page-index .split{
  gap:40px;
}

.xb-page-index .case-grid,
.xb-page-index .feature-grid,
.xb-page-index .steps,
.xb-page-index .cards,
.xb-page-index .industry-grid{
  gap:18px;
}

/* 平板 */
@media (max-width:980px){
  .container{
    width:min(var(--xb-max), calc(100% - 40px));
  }

  .xb-page:not(.xb-page-index) .hero{
    padding:58px 0 34px;
  }

  .xb-page:not(.xb-page-index) .hero .wrap,
  .xb-page:not(.xb-page-index) .split{
    gap:24px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:44px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:30px 0;
  }

  .xb-page-index .hero-banner .banner{
    min-height:480px;
  }

  .xb-page-index .hero-banner .banner-inner{
    width:calc(100% - 40px);
    padding:52px 0 44px;
  }

  .xb-page-index .hero-bar{
    margin-top:-18px;
  }

  .xb-page-index .hero-bar .bar{
    padding:14px 16px;
    gap:12px;
  }

  .xb-page-index .hero-bar + .section.after-hero{
    padding-top:14px;
  }

  .xb-page-index .section{
    padding:42px 0;
  }

  .xb-page-index .section.sm{
    padding:28px 0;
  }
}

/* 手机 */
@media (max-width:560px){
  .xb-page:not(.xb-page-index) .hero{
    padding:46px 0 26px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:36px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:24px 0;
  }

  .xb-page:not(.xb-page-index) .hero .wrap,
  .xb-page:not(.xb-page-index) .split{
    gap:18px;
  }

  .xb-page-index .hero-banner .banner{
    min-height:420px;
  }

  .xb-page-index .hero-banner .banner-inner{
    width:calc(100% - 24px);
    padding:40px 0 34px;
  }

  .xb-page-index .hero-banner .h1{
    font-size:30px;
  }

  .xb-page-index .hero-bar{
    margin-top:-12px;
  }

  .xb-page-index .hero-bar .bar{
    padding:12px 14px;
    gap:8px;
    border-radius:16px;
  }

  .xb-page-index .hero-bar .item{
    padding:8px 0;
  }

  .xb-page-index .hero-bar + .section.after-hero{
    padding-top:12px;
  }

  .xb-page-index .section{
    padding:34px 0;
  }

  .xb-page-index .section.sm{
    padding:22px 0;
  }
}

/* V3 继续收紧：首屏与紧随其后的正文不要断层 */
.xb-page:not(.xb-page-index) .hero + .section{
  padding-top:40px;
}

.xb-page-about .hero + .section{
  padding-top:34px;
}

.auth{
  padding:72px 0;
}

.auth-wrap{
  gap:22px;
}

@media (max-width:980px){
  .xb-page:not(.xb-page-index) .hero + .section{
    padding-top:34px;
  }

  .xb-page-about .hero + .section{
    padding-top:30px;
  }

  .auth{
    padding:56px 0;
  }
}

@media (max-width:560px){
  .xb-page:not(.xb-page-index) .hero + .section{
    padding-top:28px;
  }

  .xb-page-about .hero + .section{
    padding-top:24px;
  }

  .auth{
    padding:42px 0 30px;
  }
}


/* V4: 企业官网正式版视觉与版式收口 */
:root{
  --xb-max:1280px;
  --xb-radius:18px;
  --xb-radius-sm:14px;
}

.site-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.15) blur(12px);
}

.card,
.cards .card,
.hero-media,
.thumb,
.auth-illus,
.hero-home .hero-img{
  border-color:rgba(11,18,32,.10);
  box-shadow:0 18px 36px rgba(11,18,32,.06);
}

.thumb,
.hero-media,
.auth-illus,
.hero-home .hero-img{
  overflow:hidden;
}

.thumb img,
.hero-media img,
.auth-illus img,
.hero-home .hero-img{
  transform:translateZ(0);
}

.h1{letter-spacing:-.02em}
.h2{letter-spacing:-.02em}
.lead{max-width:60ch}

.section{padding:64px 0}
.section.sm{padding:48px 0}
.section .head{margin-bottom:18px}
.cards,
.feature-grid,
.case-grid,
.steps,
.industry-grid{gap:16px}
.card,
.cards .card{padding:20px}

.xb-page:not(.xb-page-index) .hero{
  min-height:auto;
  padding:44px 0 28px;
}

.xb-page:not(.xb-page-index) .hero .wrap{
  align-items:flex-start;
  gap:30px;
}

.xb-page:not(.xb-page-index) .hero .copy{
  padding-top:2px;
}

.xb-page:not(.xb-page-index) .hero .panel{
  flex:0 0 396px;
}

.xb-page:not(.xb-page-index) .hero-media img{height:248px}
.xb-page:not(.xb-page-index) .hero + .section{padding-top:30px}
.xb-page:not(.xb-page-index) .section + .section{padding-top:42px}
.xb-page:not(.xb-page-index) .section.sm + .section,
.xb-page:not(.xb-page-index) .section + .section.sm{padding-top:34px}

.split{gap:34px}
.split .copy,.split .visual{min-width:0}

.xb-page-index .hero-banner .banner{
  min-height:520px;
  border-radius:0;
}

.xb-page-index .hero-banner .banner-inner{
  width:calc(100% - 24px);
  padding:58px 0 46px;
}

.xb-page-index .hero-banner .banner-content{
  max-width:640px;
}

.xb-page-index .hero-banner .lead{
  max-width:44ch;
}

.xb-page-index .hero-bar{
  margin-top:-22px;
}

.xb-page-index .hero-bar .bar{
  padding:16px 18px;
  gap:14px;
}

.xb-page-index .hero-bar + .section.after-hero{padding-top:12px}
.xb-page-index .section{padding:52px 0}
.xb-page-index .section.sm{padding:38px 0}
.xb-page-index .section + .section{padding-top:40px}

.auth{padding:56px 0 42px}
.auth-wrap{gap:24px}

@media (max-width: 1180px){
  .section{padding:58px 0}
  .section.sm{padding:42px 0}
  .xb-page:not(.xb-page-index) .hero{padding:38px 0 24px}
  .xb-page:not(.xb-page-index) .hero .wrap{gap:24px}
  .xb-page:not(.xb-page-index) .hero .panel{flex-basis:360px}
  .xb-page:not(.xb-page-index) .hero-media img{height:224px}
  .split{gap:26px}
  .xb-page-index .hero-banner .banner{min-height:486px}
  .xb-page-index .hero-banner .banner-inner{padding:52px 0 40px}
  .xb-page-index .section{padding:46px 0}
  .xb-page-index .section.sm{padding:34px 0}
}

@media (max-width: 980px){
  .section{padding:48px 0}
  .section.sm{padding:34px 0}
  .xb-page:not(.xb-page-index) .hero{padding:34px 0 22px}
  .xb-page:not(.xb-page-index) .hero .panel{flex:1 1 auto}
  .xb-page:not(.xb-page-index) .hero + .section{padding-top:26px}
  .xb-page:not(.xb-page-index) .section + .section{padding-top:32px}
  .xb-page-index .hero-banner .banner{min-height:450px}
  .xb-page-index .hero-banner .banner-inner{width:calc(100% - 32px);padding:44px 0 36px}
  .xb-page-index .hero-bar{margin-top:-16px}
  .xb-page-index .hero-bar .bar{padding:14px 16px}
  .xb-page-index .hero-bar + .section.after-hero{padding-top:10px}
  .xb-page-index .section{padding:40px 0}
  .xb-page-index .section.sm{padding:30px 0}
  .auth{padding:44px 0 32px}
}

@media (max-width: 560px){
  .section{padding:36px 0}
  .section.sm{padding:26px 0}
  .section .head{margin-bottom:14px}
  .card,.cards .card{padding:16px}
  .xb-page:not(.xb-page-index) .hero{padding:28px 0 18px}
  .xb-page:not(.xb-page-index) .hero .wrap{gap:18px}
  .xb-page:not(.xb-page-index) .hero + .section{padding-top:20px}
  .xb-page:not(.xb-page-index) .section + .section{padding-top:24px}
  .xb-page:not(.xb-page-index) .hero-media img{height:192px}
  .xb-page-index .hero-banner .banner{min-height:400px}
  .xb-page-index .hero-banner .banner-inner{width:calc(100% - 20px);padding:36px 0 30px}
  .xb-page-index .hero-banner .banner-content{padding:16px 14px;border-radius:16px}
  .xb-page-index .hero-banner .h1{font-size:30px}
  .xb-page-index .hero-bar{margin-top:-10px}
  .xb-page-index .hero-bar .bar{padding:12px 14px;gap:10px;border-radius:16px}
  .xb-page-index .hero-bar + .section.after-hero{padding-top:8px}
  .xb-page-index .section{padding:32px 0}
  .xb-page-index .section.sm{padding:22px 0}
  .auth{padding:34px 0 24px}
}

/* ===== V6: 首页能力条与后续区块视觉融合 + 全站再微调 ===== */
.xb-page-index .hero-banner{
  border-bottom:none;
}

.xb-page-index .hero-bar{
  position:relative;
  z-index:3;
  margin-top:-30px;
  padding:0 0 10px;
  background:linear-gradient(180deg, rgba(246,247,249,0) 0 38%, var(--xb-surface) 38% 100%);
}

.xb-page-index .hero-bar .container{
  position:relative;
  z-index:2;
}

.xb-page-index .hero-bar .bar{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(11,18,32,.08);
  box-shadow:0 16px 36px rgba(15,23,42,.08);
}

.xb-page-index .hero-bar + .section.after-hero{
  margin-top:-2px;
  padding-top:18px;
}

.xb-page-index .section.tone.after-hero{
  border-top:none;
}

.xb-page-index .trust{
  gap:14px;
}

.xb-page-index .industry-grid{
  margin-top:12px;
}

.xb-page:not(.xb-page-index) .hero{
  padding:36px 0 22px;
}

.xb-page:not(.xb-page-index) .hero + .section{
  padding-top:24px;
}

.xb-page:not(.xb-page-index) .section{
  padding:42px 0;
}

.xb-page:not(.xb-page-index) .section.sm{
  padding:30px 0;
}

.xb-page:not(.xb-page-index) .section + .section{
  padding-top:30px;
}

.xb-page:not(.xb-page-index) .section.sm + .section,
.xb-page:not(.xb-page-index) .section + .section.sm{
  padding-top:24px;
}

.xb-page:not(.xb-page-index) .section .head{
  margin-bottom:14px;
}

.xb-page-about .hero{
  padding:32px 0 18px;
}

.xb-page-about .hero + .section{
  padding-top:20px;
}

.xb-page-about .section{
  padding:38px 0;
}

@media (max-width: 1180px){
  .xb-page-index .hero-bar{
    margin-top:-24px;
    padding-bottom:8px;
  }

  .xb-page-index .hero-bar + .section.after-hero{
    padding-top:16px;
  }

  .xb-page:not(.xb-page-index) .hero{
    padding:32px 0 20px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:38px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:28px 0;
  }
}

@media (max-width: 980px){
  .xb-page-index .hero-bar{
    margin-top:-18px;
    padding-bottom:6px;
    background:linear-gradient(180deg, rgba(246,247,249,0) 0 34%, var(--xb-surface) 34% 100%);
  }

  .xb-page-index .hero-bar .bar{
    box-shadow:0 12px 26px rgba(15,23,42,.07);
  }

  .xb-page-index .hero-bar + .section.after-hero{
    padding-top:14px;
  }

  .xb-page:not(.xb-page-index) .hero{
    padding:28px 0 18px;
  }

  .xb-page:not(.xb-page-index) .hero + .section{
    padding-top:22px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:34px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:24px 0;
  }

  .xb-page:not(.xb-page-index) .section + .section{
    padding-top:24px;
  }
}

@media (max-width: 560px){
  .xb-page-index .hero-bar{
    margin-top:-12px;
    padding-bottom:4px;
  }

  .xb-page-index .hero-bar + .section.after-hero{
    padding-top:12px;
  }

  .xb-page:not(.xb-page-index) .hero{
    padding:24px 0 16px;
  }

  .xb-page:not(.xb-page-index) .hero + .section{
    padding-top:18px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:30px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:22px 0;
  }

  .xb-page:not(.xb-page-index) .section + .section{
    padding-top:18px;
  }

  .xb-page-about .section{
    padding:28px 0;
  }
}

/* ===== V7: 首页能力条并入同一灰底区块，彻底消除上下分层 ===== */
.xb-page-index .section.after-hero{
  position:relative;
  margin-top:0;
  padding-top:0;
  border-top:none;
  background:var(--xb-surface);
}

.xb-page-index .section.after-hero > .container{
  position:relative;
}

.xb-page-index .hero-bar-inline{
  position:relative;
  z-index:4;
  margin-top:-28px;
  padding:0;
  background:none !important;
}

.xb-page-index .hero-bar-inline .bar{
  background:rgba(255,255,255,.98);
  border:1px solid rgba(11,18,32,.08);
  border-radius:20px;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}

.xb-page-index .section.after-hero .trust{
  margin-top:14px;
}

.xb-page-index .section.after-hero .industry-grid{
  margin-top:14px;
}

/* 其他内页再统一收一档，避免首屏到底部正文过松 */
.xb-page:not(.xb-page-index) .hero{
  padding:30px 0 18px;
}

.xb-page:not(.xb-page-index) .hero + .section{
  padding-top:18px;
}

.xb-page:not(.xb-page-index) .section{
  padding:36px 0;
}

.xb-page:not(.xb-page-index) .section.sm{
  padding:24px 0;
}

.xb-page:not(.xb-page-index) .section + .section{
  padding-top:22px;
}

.xb-page-about .section{
  padding:32px 0;
}

@media (max-width: 1180px){
  .xb-page-index .hero-bar-inline{
    margin-top:-24px;
  }

  .xb-page-index .section.after-hero .trust{
    margin-top:12px;
  }

  .xb-page:not(.xb-page-index) .hero{
    padding:28px 0 18px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:34px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:22px 0;
  }
}

@media (max-width: 980px){
  .xb-page-index .hero-bar-inline{
    margin-top:-18px;
  }

  .xb-page-index .hero-bar-inline .bar{
    border-radius:18px;
    box-shadow:0 10px 22px rgba(15,23,42,.07);
  }

  .xb-page-index .section.after-hero .trust{
    margin-top:10px;
  }

  .xb-page:not(.xb-page-index) .hero{
    padding:24px 0 16px;
  }

  .xb-page:not(.xb-page-index) .hero + .section{
    padding-top:16px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:30px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:20px 0;
  }

  .xb-page:not(.xb-page-index) .section + .section{
    padding-top:18px;
  }
}

@media (max-width: 560px){
  .xb-page-index .hero-bar-inline{
    margin-top:-12px;
  }

  .xb-page-index .section.after-hero .trust{
    margin-top:8px;
  }

  .xb-page:not(.xb-page-index) .hero{
    padding:22px 0 14px;
  }

  .xb-page:not(.xb-page-index) .hero + .section{
    padding-top:14px;
  }

  .xb-page:not(.xb-page-index) .section{
    padding:26px 0;
  }

  .xb-page:not(.xb-page-index) .section.sm{
    padding:18px 0;
  }

  .xb-page:not(.xb-page-index) .section + .section{
    padding-top:14px;
  }

  .xb-page-about .section{
    padding:24px 0;
  }
}

/* ===== V8: 首页 banner 文案左边界与 header logo 左边界严格对齐 ===== */
.xb-page-index .hero-banner .banner-inner{
  width:min(var(--xb-max), calc(100% - 64px)) !important;
  margin-inline:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

@media (max-width: 980px){
  .xb-page-index .hero-banner .banner-inner{
    width:min(var(--xb-max), calc(100% - 40px)) !important;
  }
}

@media (max-width: 560px){
  .xb-page-index .hero-banner .banner-inner{
    width:calc(100% - 24px) !important;
  }
}

/* ===== V9: 图文 split 区块文字与图片间距统一收口，避免被 space-between 拉开分层 ===== */
.split{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:34px !important;
}

.split .copy,
.split .visual{
  min-width:0 !important;
}

.split .copy{
  flex:1 1 560px !important;
}

.split .visual{
  flex:1 1 520px !important;
}

.split .copy .kicker{
  margin-bottom:12px;
  line-height:1;
}

.split .copy .h2{
  font-size:clamp(26px, 3.05vw, 40px);
  line-height:1.14;
  margin-bottom:14px;
}

.xb-page-index .split,
.xb-page:not(.xb-page-index) .split{
  gap:32px !important;
}

@media (max-width: 1180px){
  .split{
    gap:26px !important;
  }
}

@media (max-width: 980px){
  .split{
    gap:22px !important;
  }

  .split .copy,
  .split .visual{
    flex:1 1 100% !important;
    max-width:none !important;
  }
}

@media (max-width: 560px){
  .split{
    gap:18px !important;
  }

  .split .copy .kicker{
    margin-bottom:10px;
  }

  .split .copy .h2{
    font-size:clamp(24px, 7vw, 32px);
  }
}

/* ===== V10: 图文 split 双栏结构稳定化，避免图片与文字互相侵占 ===== */
.split{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items:center !important;
  column-gap:48px !important;
  row-gap:22px !important;
  justify-content:unset !important;
}

.split .copy,
.split .visual{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

.split .copy{
  justify-self:stretch;
}

.split .visual{
  justify-self:stretch;
}

.split.reverse .copy{
  order:2;
}

.split.reverse .visual{
  order:1;
}

.split .copy .kicker,
.split .copy .h2,
.split .copy .lead,
.split .copy .p,
.split .copy .list{
  max-width:100% !important;
}

.split .copy .h2{
  margin-right:0 !important;
}

.split .visual .thumb,
.split .visual .photo-frame,
.split .visual .hero-media,
.split .visual .mockup{
  width:100% !important;
  max-width:none !important;
}

.xb-page-index .split,
.xb-page:not(.xb-page-index) .split{
  column-gap:44px !important;
}

@media (max-width: 1180px){
  .split{
    column-gap:36px !important;
  }
}

@media (max-width: 980px){
  .split{
    grid-template-columns:minmax(0, 1fr) !important;
    column-gap:0 !important;
    row-gap:22px !important;
    align-items:flex-start !important;
  }

  .split.reverse .copy,
  .split.reverse .visual{
    order:initial;
  }
}

@media (max-width: 560px){
  .split{
    row-gap:18px !important;
  }
}

/* ===== V11: 图文双栏增加安全呼吸间距，避免文字区贴近图片区 ===== */
.split{
  column-gap:68px !important;
}

.xb-page-index .split,
.xb-page:not(.xb-page-index) .split{
  column-gap:72px !important;
}

.split .copy{
  padding-inline:4px 0 !important;
}

.split:not(.reverse) .copy{
  padding-right:8px !important;
}

.split.reverse .copy{
  padding-left:20px !important;
}

.split .visual{
  padding-inline:0 !important;
}

@media (max-width: 1280px){
  .split{
    column-gap:56px !important;
  }

  .xb-page-index .split,
  .xb-page:not(.xb-page-index) .split{
    column-gap:60px !important;
  }

  .split.reverse .copy{
    padding-left:14px !important;
  }
}

@media (max-width: 980px){
  .split .copy,
  .split.reverse .copy{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* --- Patch V12: give stacked hero media + card a cleaner vertical rhythm --- */
.hero:not(.hero-banner) .panel{
  display:flex !important;
  flex-direction:column;
  gap:18px;
  align-content:flex-start;
}
.hero:not(.hero-banner) .panel .hero-media,
.hero:not(.hero-banner) .panel .card{
  margin:0;
}
@media (max-width: 960px){
  .hero:not(.hero-banner) .panel{
    gap:14px;
  }
}

/* --- Patch V13: 使命与愿景卡片统一高度，和最高卡片保持一致 --- */
.xb-page-about .hero + .section .cards{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:20px !important;
  align-items:stretch !important;
}

.xb-page-about .hero + .section .cards > .card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

@media (max-width: 1100px){
  .xb-page-about .hero + .section .cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px){
  .xb-page-about .hero + .section .cards{
    grid-template-columns:minmax(0, 1fr) !important;
  }
}


/* --- Patch V14: 全站类似卡片布局统一等高，以同组最高卡片为基准 --- */
.cards,
.feature-grid,
.industry-grid,
.steps,
.hero-highlights,
.case-kpis,
.hero .panel .mini{
  align-items:stretch !important;
}

.cards{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap:18px !important;
}

.cards > .card,
.cards > a.card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  flex:none !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.feature-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap:18px !important;
}

.feature-grid > .card{
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.industry-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap:16px !important;
}

.industry-grid > .industry-card{
  min-width:0 !important;
  height:100% !important;
}

.steps{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:16px !important;
}

.steps > .step{
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.hero-highlights{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap:16px !important;
}

.hero-highlights .hl{
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.case-kpis{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap:12px !important;
}

.case-kpis > .kpi{
  min-width:0 !important;
  height:100% !important;
}

.hero .panel .mini{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap:12px !important;
}

.hero .panel .mini .chip{
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

@media (max-width: 720px){
  .cards,
  .feature-grid,
  .steps,
  .industry-grid,
  .hero-highlights,
  .case-kpis,
  .hero .panel .mini{
    grid-template-columns:minmax(0, 1fr) !important;
  }
}

/* --- Patch V15: 修复首页行业卡片区被全局等高规则影响后出现单列右侧堆叠的问题 --- */
.xb-page-index .trust{
  display:block !important;
  padding:8px 0 !important;
}

.xb-page-index .trust > div:first-child{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
}

.xb-page-index .trust .industry-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:16px !important;
  margin-top:14px !important;
}

.xb-page-index .trust .industry-card{
  min-width:0 !important;
  height:100% !important;
}

@media (max-width: 1320px){
  .xb-page-index .trust .industry-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1080px){
  .xb-page-index .trust .industry-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px){
  .xb-page-index .trust .industry-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  .xb-page-index .trust .industry-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }
}


/* --- Patch V16: 服务与支持页「实施与交付」重做为更整齐的 3+2 栅格布局 --- */
.xb-page-service .delivery-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

.xb-page-service .delivery-grid > .delivery-card{
  grid-column:span 4;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
}

.xb-page-service .delivery-grid > .delivery-card--wide{
  grid-column:span 6;
}

.xb-page-service .delivery-grid .list{
  margin-top:16px;
}

.xb-page-service .delivery-grid .list li + li{
  margin-top:10px;
}

@media (max-width: 1120px){
  .xb-page-service .delivery-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }

  .xb-page-service .delivery-grid > .delivery-card{
    grid-column:span 3;
  }

  .xb-page-service .delivery-grid > .delivery-card--wide{
    grid-column:span 3;
  }
}

@media (max-width: 860px){
  .xb-page-service .delivery-grid{
    grid-template-columns:minmax(0, 1fr);
    gap:16px;
  }

  .xb-page-service .delivery-grid > .delivery-card,
  .xb-page-service .delivery-grid > .delivery-card--wide{
    grid-column:auto;
  }
}

/* V17: cases hero heading relayout after removing prefix */
.xb-page-cases .hero .wrap{align-items:flex-start;}
.xb-page-cases .hero .copy{max-width:720px;padding-top:6px;}
.xb-page-cases .hero .h1{max-width:12.5ch;letter-spacing:.02em;}
.xb-page-cases .hero .lead{max-width:680px;}
@media (max-width: 1180px){
  .xb-page-cases .hero .h1{max-width:13.5ch;}
}
@media (max-width: 960px){
  .xb-page-cases .hero .copy{max-width:none;padding-top:0;}
  .xb-page-cases .hero .h1,.xb-page-cases .hero .lead{max-width:none;}
}

/* V19: success cases hero tightened after title simplification */
.xb-page-cases .hero .wrap{
  display:grid;
  grid-template-columns:minmax(0, 1.14fr) minmax(360px, 400px);
  align-items:flex-start;
  gap:40px;
}

.xb-page-cases .hero .copy{
  max-width:none;
  padding-top:6px;
}

.xb-page-cases .hero .h1{
  max-width:14.6ch;
  letter-spacing:.01em;
}

.xb-page-cases .hero .lead{
  max-width:40ch;
}

@media (max-width: 1180px){
  .xb-page-cases .hero .wrap{
    grid-template-columns:minmax(0, 1fr) minmax(340px, 380px);
    gap:32px;
  }

  .xb-page-cases .hero .h1{
    max-width:13.8ch;
  }
}

@media (max-width: 960px){
  .xb-page-cases .hero .wrap{
    display:flex;
    gap:24px;
  }

  .xb-page-cases .hero .copy{
    max-width:none;
    padding-top:0;
  }

  .xb-page-cases .hero .h1,
  .xb-page-cases .hero .lead{
    max-width:none;
  }
}

/* V19.1: reduce visual void in cases hero text column */
.xb-page-cases .hero .wrap{
  grid-template-columns:minmax(0, 1fr) minmax(340px, 376px);
  gap:32px;
}

.xb-page-cases .hero .h1{
  max-width:16.8ch;
}

.xb-page-cases .hero .lead{
  max-width:43ch;
}

@media (max-width: 1180px){
  .xb-page-cases .hero .wrap{
    grid-template-columns:minmax(0, 1fr) minmax(320px, 360px);
    gap:24px;
  }

  .xb-page-cases .hero .h1{
    max-width:15.6ch;
  }
}


/* V20: xianboss brand system */
:root{
  --xb-primary:#ef201d;
  --xb-primary-hover:#d81815;
  --xb-brand-soft:#f8efed;
  --xb-brand-line:rgba(239,32,29,.18);
}

::selection{background:rgba(239,32,29,.18)}

.kicker{
  border-color:rgba(239,32,29,.2);
  background:rgba(239,32,29,.07);
  color:var(--xb-primary);
}

.brand{
  gap:12px;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:50%;
  background:transparent !important;
  background-image:url("logo-xianboss.png") !important;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  box-shadow:none;
  flex:0 0 42px;
}

.brand-mark svg{
  display:none !important;
}

.brand-title b{
  font-weight:800;
  letter-spacing:.02em;
}

.brand-title span{
  color:rgba(11,18,32,.6);
  font-weight:700;
  letter-spacing:.02em;
}

.site-header .brand-title span{
  color:rgba(11,18,32,.58);
}

.footer .brand-mark,
.site-footer .brand-mark{
  width:44px;
  height:44px;
  flex-basis:44px;
}

@media (max-width: 640px){
  .brand-mark{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
}


/* V21: render xianboss logo with explicit img to avoid CSS background fallback issues */
.brand-mark{
  background:none !important;
  overflow:hidden;
}
.brand-logo-img{
  display:block !important;
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand-mark svg{
  display:none !important;
}

/* V22: refine xianboss logo alignment and brand block rhythm */
.site-header .brand,
.mobile .brand,
.footer .brand,
.site-footer .brand{
  align-items:center;
  gap:10px;
}

.site-header .brand-mark{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:0;
  transform:translateY(-1px);
}

.mobile .brand-mark{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:0;
}

.footer .brand-mark,
.site-footer .brand-mark{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:0;
}

.brand-logo-img{
  object-fit:contain;
  object-position:center center;
}

.site-header .brand-title,
.mobile .brand-title,
.footer .brand-title,
.site-footer .brand-title{
  justify-content:center;
}

.site-header .brand-title b,
.mobile .brand-title b{
  font-size:15px;
  line-height:1;
}

.site-header .brand-title span,
.mobile .brand-title span{
  margin-top:4px;
  font-size:11px;
  line-height:1;
}

.footer .brand-title b,
.site-footer .brand-title b{
  font-size:15px;
  line-height:1;
}

.footer .brand-title span,
.site-footer .brand-title span{
  margin-top:4px;
  font-size:11px;
  line-height:1;
}

@media (max-width: 640px){
  .site-header .brand{
    gap:8px;
  }

  .site-header .brand-mark,
  .mobile .brand-mark{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .site-header .brand-title b{
    font-size:14px;
  }

  .site-header .brand-title span{
    font-size:10px;
    margin-top:3px;
  }
}

/* V23: enlarge xianboss brand block for clearer visual balance */
.site-header .brand,
.mobile .brand,
.footer .brand,
.site-footer .brand{
  gap:12px;
}

.site-header .brand{
  padding:2px 0;
}

.site-header .brand-mark{
  width:44px;
  height:44px;
  flex:0 0 44px;
  transform:translateY(0);
}

.mobile .brand-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
}

.footer .brand-mark,
.site-footer .brand-mark{
  width:46px;
  height:46px;
  flex:0 0 46px;
}

.site-header .brand-title b,
.mobile .brand-title b{
  font-size:16.5px;
  line-height:1.02;
  letter-spacing:.01em;
}

.site-header .brand-title span,
.mobile .brand-title span{
  margin-top:5px;
  font-size:11.5px;
  line-height:1.05;
}

.footer .brand-title b,
.site-footer .brand-title b{
  font-size:16px;
  line-height:1.02;
}

.footer .brand-title span,
.site-footer .brand-title span{
  margin-top:5px;
  font-size:11.5px;
  line-height:1.05;
}

@media (max-width: 640px){
  .site-header .brand,
  .mobile .brand{
    gap:9px;
  }

  .site-header .brand-mark,
  .mobile .brand-mark{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .site-header .brand-title b,
  .mobile .brand-title b{
    font-size:14.5px;
  }

  .site-header .brand-title span,
  .mobile .brand-title span{
    font-size:10.5px;
    margin-top:3px;
  }
}

/* V24: nudge header brand text block slightly downward for better optical alignment */
.site-header .brand-title{
  transform:translateY(2px);
}

@media (max-width: 640px){
  .site-header .brand-title{
    transform:translateY(1px);
  }
}

/* V25: loosen multiline typography rhythm across hero/section headings and similar text blocks */
.h1{
  line-height:1.11;
  margin:16px 0 20px;
}

.h2{
  line-height:1.20;
  margin:0 0 16px;
}

.h3{
  line-height:1.34;
}

.hero-banner .h1,
.xb-page:not(.xb-page-index) .hero .h1,
.split .copy .h1,
.split .copy .h2{
  line-height:1.12;
}

.lead{
  line-height:1.82;
}

.p,
.card p,
.card .p,
.list li,
.hero-bar .item span,
.split .copy p,
.xb-page:not(.xb-page-index) .hero .lead,
.xb-page:not(.xb-page-index) .hero .panel .card,
.xb-page:not(.xb-page-index) .hero .panel .list li{
  line-height:1.78;
}

@media (max-width: 980px){
  .h1,
  .hero-banner .h1,
  .xb-page:not(.xb-page-index) .hero .h1,
  .split .copy .h1{
    line-height:1.14;
  }

  .lead,
  .p,
  .card p,
  .card .p,
  .list li,
  .split .copy p{
    line-height:1.74;
  }
}

@media (max-width: 560px){
  .h1,
  .hero-banner .h1,
  .xb-page:not(.xb-page-index) .hero .h1,
  .split .copy .h1{
    line-height:1.16;
  }
}

/* ===== V26: 首页向下了解更多提示避免被能力条遮挡 ===== */
.xb-page-index .hero-banner .banner{
  isolation:isolate;
}

.xb-page-index .hero-banner .scroll-cue{
  z-index:12;
  bottom:42px;
}

.xb-page-index .hero-banner .banner-inner{
  padding-bottom:88px;
}

@media (max-width: 980px){
  .xb-page-index .hero-banner .scroll-cue{
    bottom:34px;
  }

  .xb-page-index .hero-banner .banner-inner{
    padding-bottom:74px;
  }
}

@media (max-width: 560px){
  .xb-page-index .hero-banner .scroll-cue{
    bottom:26px;
    padding:7px 11px;
  }

  .xb-page-index .hero-banner .banner-inner{
    padding-bottom:62px;
  }
}

/* --- Patch V27: 成功案例页补齐第二行空缺，增加快捷操作按钮卡片 --- */
.xb-page-cases .case-list-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}

.xb-page-cases .case-list-grid > .case-action-card{
  justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,247,246,.98) 100%);
}

.xb-page-cases .case-action-card .case-action-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.xb-page-cases .case-action-card .case-action-footer{
  margin-top:auto;
  padding-top:16px;
}

.xb-page-cases .case-action-card .btn{
  width:100%;
}

@media (max-width: 1400px){
  .xb-page-cases .case-list-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px){
  .xb-page-cases .case-list-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px){
  .xb-page-cases .case-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  .xb-page-cases .case-list-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }
}