/* ============================================================
   川建通官网 · 与 sixu.work 同构
   1:1 对照 sixu.work：浅蓝渐变底 + 透明导航 + 左文右图 hero
   + 双入口横条 + 页脚 + 右侧悬浮工具条
   ============================================================ */
:root{
  --blue:#1a73e8;
  --blue-d:#0f56c3;
  --ink:#111418;
  --ink2:#3d4653;
  --sub:#7c8798;
  --line:#e6ecf5;
  --card:#fff;
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  color:var(--ink);
  background:#f7fbff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:none;background:none;cursor:pointer}

/* ---------------- 顶部导航（透明底 + 纯文字 logo） ---------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(247,251,255,0);
  transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.hdr.sc{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(20,45,90,.06);
}
.hdr-in{
  max-width:var(--max);margin:0 auto;height:74px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
}
.logo{
  font-size:23px;font-weight:800;letter-spacing:1px;color:var(--ink);
}
.nav{display:flex;align-items:center;gap:44px}
.nav a{
  font-size:16px;color:var(--ink2);position:relative;
  transition:color .2s;
}
.nav a:hover{color:var(--blue)}
.nav a.on{color:var(--blue);font-weight:500}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:clamp(600px,calc(100vh - 200px),720px);
  padding-top:74px;
  display:flex;align-items:center;
  overflow:hidden;
  background:linear-gradient(128deg,#fbfdff 0%,#eef5fe 34%,#e4eefc 64%,#dde9fb 100%);
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px)}
.b1{width:560px;height:560px;left:-140px;top:-180px;background:rgba(255,255,255,.85)}
.b2{width:620px;height:620px;right:-120px;bottom:-260px;background:rgba(163,199,247,.42)}
.grid-deco{
  position:absolute;right:4%;bottom:6%;width:280px;height:280px;
  background-image:radial-gradient(rgba(26,115,232,.16) 1px,transparent 1px);
  background-size:18px 18px;opacity:.5;
  mask-image:radial-gradient(circle at 50% 50%,#000 10%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 10%,transparent 70%);
}
.hero-in{
  position:relative;z-index:2;
  max-width:var(--max);width:100%;margin:0 auto;padding:40px 24px 56px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:40px;
}
.hero-tx{padding-right:10px}
.hero-tx h1{
  font-size:clamp(34px,4.1vw,52px);
  line-height:1.3;font-weight:800;letter-spacing:.5px;
  color:#0f1419;
}
.hero-sub{
  margin-top:22px;font-size:clamp(15px,1.35vw,18px);
  color:#3b4655;line-height:1.7;
}
.btn-main{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:32px;height:48px;padding:0 38px;border-radius:999px;
  background:linear-gradient(180deg,#2381f3,#1668d8);
  color:#fff;font-size:16px;font-weight:600;letter-spacing:.5px;
  box-shadow:0 10px 26px rgba(22,104,216,.32);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(22,104,216,.4);filter:brightness(1.04)}
.hero-mini{
  display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;
  font-size:13.5px;color:var(--sub);
}
.hero-mini b{
  font-size:17px;font-weight:800;color:var(--blue-d);
  font-variant-numeric:tabular-nums;margin-right:3px;
}

/* 右侧视觉：手机（移动端截图） + 浮动数据卡 */
.hero-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:600px;
}
.phone{
  position:relative;z-index:3;
  /* 用满右栏宽度：原来 286px 把 752px 的长截图缩了 2.6 倍，中文小字必然发虚 */
  width:clamp(300px,26vw,392px);
  height:clamp(560px,70vh,650px);
  border-radius:38px;overflow:hidden;
  box-shadow:0 34px 80px rgba(16,45,95,.26),0 0 0 1px rgba(20,50,100,.05);
  background:#fff;
  animation:floatY 6s ease-in-out infinite;
}
/* 只显示真机首屏（顶部对齐裁切），内容比整条长图放大 1.3 倍，字才看得清 */
.phone img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.phone img.zoomable{cursor:zoom-in}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.fc{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.96);
  border-radius:14px;padding:11px 16px 11px 12px;
  box-shadow:0 12px 32px rgba(18,48,95,.14),0 0 0 1px rgba(28,60,110,.05);
  backdrop-filter:blur(6px);
  animation:floatY 6s ease-in-out infinite;
}
.fc-ic{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;
}
.i1{background:linear-gradient(150deg,#4a9bff,#1a73e8)}
.i2{background:linear-gradient(150deg,#43d0c0,#0aa595)}
.i3{background:linear-gradient(150deg,#a684ff,#7c5cff)}
.i4{background:linear-gradient(150deg,#ffb75e,#f08a1d)}
.fc b{
  display:block;font-size:15.5px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.fc em{display:block;font-style:normal;font-size:11.5px;color:var(--sub);margin-top:1px}
/* 浮动卡移到手机框外侧，避免遮住截图内容 */
.fc1{left:-9%;top:12%;animation-delay:.4s}
.fc2{right:-9%;top:5%;animation-delay:1.1s}
.fc3{left:-7%;bottom:17%;animation-delay:.8s}
.fc4{right:-7%;bottom:7%;animation-delay:1.6s}

/* ---------------- 双入口横条 ---------------- */
.dock{background:#fff;border-top:1px solid rgba(24,55,105,.05)}
.dock-in{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
}
.dock-cell{
  display:flex;align-items:center;gap:16px;
  padding:30px 26px;position:relative;
  transition:background .2s;
}
.dock-cell:first-child::after{
  content:"";position:absolute;right:0;top:26px;bottom:26px;
  width:1px;background:var(--line);
}
.dock-cell:hover{background:#f8fbff}
.dock-ic{
  width:52px;height:52px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#2381f3,#1459c8);
  color:#fff;
  box-shadow:0 8px 20px rgba(22,104,216,.28);
}
.dock-ic svg{width:26px;height:26px}
.dock-tx h3{font-size:18.5px;font-weight:700;letter-spacing:.3px}
.dock-tx p{font-size:13.5px;color:var(--sub);margin-top:5px;line-height:1.55}

/* ---------------- 移动端界面展示 ---------------- */
.showcase{
  background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);
  padding:80px 24px 84px;
}
.sc-hd{text-align:center;max-width:var(--max);margin:0 auto 46px}
.sc-hd h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:.5px}
.sc-hd p{margin-top:12px;font-size:15px;color:var(--sub)}
.sc-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.sc-card{
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 10px 30px rgba(18,48,95,.07),0 0 0 1px rgba(28,60,110,.05);
  transition:transform .25s,box-shadow .25s;
  display:flex;flex-direction:column;
}
.sc-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(18,48,95,.13),0 0 0 1px rgba(28,60,110,.06)}
.sc-shot{
  background:linear-gradient(150deg,#eef5fe,#e3edfc);
  padding:20px 18px 0;overflow:hidden;
  display:flex;justify-content:center;
}
.sc-shot img{
  width:100%;max-width:100%;
  border-radius:22px 22px 0 0;
  outline:1px solid rgba(20,50,100,.06);
  transition:transform .35s;
  cursor:zoom-in;
}
.sc-card:hover .sc-shot img{transform:translateY(-6px)}
.sc-tx{padding:20px 22px 24px}
.sc-tx h3{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:16.5px;font-weight:700;
}
.sc-tx h3 span{
  font-size:12px;font-weight:600;color:var(--blue-d);
  background:#eaf2fe;border-radius:999px;padding:3px 10px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sc-tx p{margin-top:8px;font-size:13px;color:var(--sub);line-height:1.6}

/* ---------------- 合作伙伴 / 数据来源 ---------------- */
.partner{background:#fff;padding:70px 24px 76px}
.pt-hd{text-align:center;margin-bottom:38px}
.pt-hd h2{font-size:clamp(22px,2.3vw,28px);font-weight:800;letter-spacing:.4px}
.pt-hd p{margin-top:11px;font-size:14px;color:var(--sub)}
.pt-row{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.pt-item{
  display:block;padding:20px 18px;border-radius:14px;
  background:#f8fafd;border:1px solid #edf1f8;
  transition:.2s;
}
.pt-item:hover{background:#f2f7ff;border-color:#d8e6fb;transform:translateY(-2px)}
.pt-item b{display:block;font-size:14px;font-weight:700;line-height:1.45}
.pt-item em{
  display:block;font-style:normal;font-size:12px;color:var(--sub);
  margin-top:7px;font-variant-numeric:tabular-nums;
}

/* ---------------- 页脚 ---------------- */
.ft{
  background:#f7fbff;border-top:1px solid var(--line);
  text-align:center;padding:40px 24px 46px;color:var(--sub);
}
.ft-brand{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:1px}
.ft-line{font-size:13px;margin-top:9px;color:var(--sub)}
.ft-copy{font-size:12.5px;margin-top:14px;color:#98a2b3}
.ft-copy a{color:#98a2b3}
.ft-copy a:hover{color:var(--blue)}

/* ---------------- 右侧悬浮工具条 ---------------- */
.fab{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);
  z-index:90;
  display:flex;flex-direction:column;gap:10px;
  padding:10px 9px;border-radius:999px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(18,48,95,.16),0 0 0 1px rgba(28,60,110,.06);
}
.fab-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#2381f3,#1459c8);
  color:#fff;
  box-shadow:0 6px 16px rgba(22,104,216,.28);
  transition:transform .18s,filter .18s;
}
.fab-btn svg{width:22px;height:22px}
.fab-btn:hover{transform:scale(1.08);filter:brightness(1.06)}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;top:80px;transform:translate(-50%,-10px);
  background:rgba(17,26,40,.9);color:#fff;font-size:14px;
  padding:12px 24px;border-radius:12px;z-index:200;
  opacity:0;transition:.25s;pointer-events:none;max-width:80vw;text-align:center;
  box-shadow:0 12px 30px rgba(10,25,50,.25);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------- 原图查看层 ---------------- */
.lb{
  position:fixed;inset:0;z-index:300;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;padding:26px 20px 18px;
  background:rgba(8,15,26,.92);
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s;
}
.lb.on{display:flex;opacity:1}
.lb-img{
  max-width:min(94vw,760px);max-height:78vh;
  width:auto;height:auto;
  border-radius:16px;background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  cursor:zoom-out;
}
.lb-x{
  position:absolute;top:16px;right:20px;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-hint{
  margin-top:16px;color:rgba(255,255,255,.62);
  font-size:12.5px;text-align:center;line-height:1.7;
}
.lb-raw{color:#8ab8ff;text-decoration:underline}
.lb-raw:hover{color:#b9d5ff}

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .nav{gap:30px}
  .fc1{left:-12%}
  .fc2{right:-12%}
  .fc3{left:-10%}
  .fc4{right:-10%}
}
@media (max-width:960px){
  .hdr-in{height:66px}
  .nav{gap:22px}
  .nav a{font-size:14.5px}
  .nav a:nth-child(4),.nav a:nth-child(5){display:none}
  .hero{padding-top:66px;min-height:auto}
  .hero-in{
    grid-template-columns:1fr;gap:26px;
    padding:34px 22px 56px;text-align:center;
  }
  .hero-tx{padding-right:0}
  .hero-mini{justify-content:center}
  .hero-visual{min-height:620px;margin-top:6px}
  .fc1{left:2%;top:8%}
  .fc2{right:0;top:2%}
  .fc3{left:0;bottom:12%}
  .fc4{right:2%;bottom:6%}
  .dock-in{grid-template-columns:1fr}
  .dock-cell:first-child::after{left:26px;right:26px;top:auto;bottom:0;width:auto;height:1px}
  .sc-grid{grid-template-columns:1fr;max-width:420px}
  .pt-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .logo{font-size:20px}
  .nav{gap:16px}
  .nav a{font-size:13.5px}
  .hero{min-height:auto}
  .hero-in{padding:26px 18px 46px;gap:20px}
  .hero-mini{
    gap:8px 16px;font-size:11.5px;justify-content:center;
    flex-wrap:wrap;margin-top:26px;
  }
  .hero-mini b{font-size:13.5px}
  .hero-visual{min-height:490px;margin-top:4px}
  .phone{width:250px;height:470px;border-radius:30px}
  /* 移动端屏窄，浮动卡会盖住截图内容，整组隐藏（数据在 hero 统计行已展示） */
  .fc1,.fc2,.fc3,.fc4{display:none}
  .fc{padding:8px 11px 8px 8px;gap:7px;border-radius:11px}
  .fc-ic{width:26px;height:26px;border-radius:7px;font-size:11px}
  .fc b{font-size:12.5px}
  .fc em{font-size:10px}
  .partner{padding:52px 18px 58px}
  .pt-row{grid-template-columns:1fr;gap:10px}
  .fab{right:8px;padding:6px 5px;gap:6px}
  .fab-btn{width:34px;height:34px}
  .fab-btn svg{width:17px;height:17px}
  .toast{top:70px;font-size:13px;padding:10px 18px}
}