/* ==========================================================================
   sarhux 管理平台 · 官网首页样式 (企业微信客户运营管理 · 企业官网风格)
   ========================================================================== */
:root{
  --brand:#146BFF;
  --brand-2:#0B49B8;
  --brand-3:#38A1FF;
  --ink:#12233F;
  --muted:#5C6B85;
  --line:#E6ECF6;
  --bg:#F5F8FF;
  --white:#fff;
  --navy:#0E1C3A;
  --shadow:0 18px 44px rgba(18,48,110,.12);
  --shadow-sm:0 8px 22px rgba(18,48,110,.08);
  --radius:16px;
  --w:1160px;
  --nav-h:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
svg{display:block}
::selection{background:rgba(20,107,255,.16)}

.wrap{width:min(var(--w),92%);margin:0 auto}
img{max-width:100%}

/* ---------- 顶部导航 ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:90;height:var(--nav-h);background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s, box-shadow .25s}
.hdr.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(18,48,110,.06)}
.hdr-in{height:var(--nav-h);display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;letter-spacing:-1px;background:linear-gradient(135deg,#146BFF 0%,#38A1FF 100%);box-shadow:0 6px 14px rgba(20,107,255,.34)}
.brand-mark.sm{width:34px;height:34px;font-size:18px}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:18px;letter-spacing:.4px}
.brand-txt i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:2px}
.nav{display:flex;gap:30px;margin:0 auto}
.nav a{font-size:15px;color:#3A4A66;padding:8px 2px;position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--brand);transition:right .25s}
.nav a:hover{color:var(--brand)}
.nav a:hover::after{right:0}
.hdr-cta{display:flex;gap:10px;flex:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;border-radius:2px;background:var(--ink);transition:.3s}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;font-weight:600;transition:.22s;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn.primary{background:linear-gradient(135deg,#146BFF,#0E5AE0);color:#fff;box-shadow:0 10px 22px rgba(20,107,255,.30)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(20,107,255,.38)}
.btn.ghost{background:#fff;color:var(--brand);border-color:#CFE0FF}
.btn.ghost:hover{border-color:var(--brand);background:rgba(20,107,255,.04)}
.btn.light{background:#fff;color:var(--brand-2)}
.btn.light:hover{transform:translateY(-2px)}
.btn.lightline{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45)}
.btn.lightline:hover{background:rgba(255,255,255,.16)}
.btn.sm{height:36px;padding:0 16px;font-size:13.5px}
.btn.lg{height:50px;padding:0 30px;font-size:16px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:calc(var(--nav-h) + 56px) 0 74px;background:
  radial-gradient(1100px 560px at 82% -8%,rgba(56,161,255,.22),transparent 58%),
  radial-gradient(900px 480px at 8% 12%,rgba(20,107,255,.12),transparent 55%),
  linear-gradient(180deg,#F1F7FF 0%,#FFFFFF 100%);overflow:hidden}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(20,107,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,107,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 78%)}
.hero-in{position:relative;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:#fff;border:1px solid #D9E6FF;color:var(--brand);font-size:13px;font-weight:600;box-shadow:var(--shadow-sm)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-3);box-shadow:0 0 0 4px rgba(56,161,255,.18)}
.hero-copy h1{font-size:50px;line-height:1.24;font-weight:800;letter-spacing:.5px;margin:20px auto 18px;max-width:820px}
.hero-copy h1 .hl{background:linear-gradient(100deg,#146BFF,#4E9CFF 55%,#38A1FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:17px;color:var(--muted);max-width:680px;margin:0 auto 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hint{margin-top:18px;font-size:13px;color:#8A98B1}
.hint::before{content:"↗ ";color:var(--brand)}
.hero-visual{position:relative;margin-top:52px}
.float-card{position:absolute;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);font-size:13px;font-weight:700;z-index:5;display:flex;align-items:center;gap:10px;line-height:1.35;border:1px solid #EDF2FB;animation:float 6s ease-in-out infinite}
.float-card span{font-size:11px;color:var(--muted);font-weight:400;display:block;line-height:1.4}
.float-card .fc-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800}
.fc1{left:3%;top:6%;transform:rotate(-3deg)}
.fc1 .fc-ic{background:linear-gradient(135deg,#38C08A,#0AA26B)}
.fc2{right:3%;bottom:8%;transform:rotate(2deg);animation-delay:1.1s}
.fc2 .fc-ic{background:linear-gradient(135deg,#38A1FF,#146BFF)}
.fc3{right:2%;bottom:-22px;transform:rotate(-2deg);animation-delay:.6s}
.fc3 .fc-ic{background:linear-gradient(135deg,#7C4DFF,#5A35D8)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- 后台界面 mock ---------- */
.mw{width:min(1040px,100%);margin:0 auto;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(14,38,90,.18);position:relative;z-index:2}
.mw-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;background:#0F1D3B}
.mw-bar .mw-dot{width:11px;height:11px;border-radius:50%;display:block}
.mw-dot.r{background:#FF5F57}.mw-dot.y{background:#FEBC2E}.mw-dot.g{background:#28C840}
.mw-bar i{font-style:normal;color:#7E91B8;font-size:11.5px;margin:0 auto}
.mw-body{display:flex;min-height:392px}
.mw-side{flex:none;width:168px;background:var(--navy);padding:14px 10px;color:#93A7CF}
.mw-logo{display:flex;align-items:center;gap:7px;font-weight:800;color:#fff;font-size:14px;padding:2px 8px 14px}
.mw-logo span{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,#146BFF,#38A1FF);font-size:13px;color:#fff}
.mw-side a{display:flex;align-items:center;gap:8px;font-size:12px;color:#93A7CF;padding:7px 9px;border-radius:8px;margin-bottom:3px}
.mw-side a i{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.55;flex:none}
.mw-side a.act{background:linear-gradient(90deg,rgba(20,107,255,.9),rgba(20,107,255,.55));color:#fff;box-shadow:0 6px 14px rgba(20,107,255,.25)}
.mw-main{flex:1;padding:16px 18px;background:#fff;min-width:0}
.mw-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mw-stat>div{background:#F4F8FF;border:1px solid #E9F0FF;border-radius:12px;padding:9px 14px}
.mw-stat b{display:block;font-size:19px;font-weight:800;line-height:1.2;background:linear-gradient(120deg,#12233F,#146BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.mw-stat span{font-size:11px;color:var(--muted)}
.mw-head{display:flex;align-items:center;gap:10px;margin:15px 0 6px}
.mw-title{font-size:14px;font-weight:800}
.mw-fake{flex:none;width:170px;margin-left:auto;font-size:11.5px;color:#9aa7bd;background:#F6F8FC;border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.mw-add{flex:none;font-size:11.5px;font-weight:600;color:#fff;background:linear-gradient(135deg,#146BFF,#0E5AE0);border-radius:7px;padding:5px 12px}
.mw-row{display:flex;align-items:center;gap:9px;padding:8px 2px;border-top:1px dashed #EEF2F9;font-size:12px}
.mw-row .av{flex:none;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}
.mw-row>div{min-width:0;width:150px}
.mw-row>div b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-row>div i{font-style:normal;display:block;font-size:10.5px;color:#9aa7bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-row em{font-style:normal;margin-left:auto;flex:none;font-size:10.5px;color:#9aa7bd}
.av.a1{background:linear-gradient(135deg,#146BFF,#63A5FF)}
.av.a2{background:linear-gradient(135deg,#0AA26B,#5ED6A2)}
.av.a3{background:linear-gradient(135deg,#7C4DFF,#C4B5FD)}
.av.a4{background:linear-gradient(135deg,#F08519,#FFB25E)}

/* ---------- 标签 chip ---------- */
.tg{display:inline-block;flex:none;font-size:10.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:999px}
.tg1{color:#146BFF;background:#E8F0FF}
.tg2{color:#0A8A5C;background:#E4F7EF}
.tg3{color:#D97B06;background:#FFF3E0}
.tg4{color:#7C4DFF;background:#F1EDFF}
.tg5{color:#D6457B;background:#FFECF2}

/* ---------- 信任条 ---------- */
.trustbar{position:relative;display:flex;justify-content:center;gap:0;margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:20px 12px;text-align:left}
.trust{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;border-right:1px solid var(--line);padding:2px 12px}
.trust:last-child{border-right:0}
.trust i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#38C08A,#0AA26B);color:#fff;font-style:normal;display:grid;place-items:center;font-size:12px;font-weight:800}
.trust b{display:block;font-size:14.5px;font-weight:700}
.trust small{font-size:11.5px;color:var(--muted)}

/* ---------- 通用区块 ---------- */
.sec{padding:108px 0 96px}
.sec.alt{background:var(--bg)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 52px}
.sec-head p{color:var(--muted);margin-top:12px;font-size:16px}
.sec-head.light h2{color:#fff}
.sec-head.light p{color:rgba(255,255,255,.7)}
.kicker{display:inline-block;color:var(--brand);background:rgba(20,107,255,.09);border:1px solid rgba(20,107,255,.2);font-size:13px;font-weight:700;letter-spacing:2px;padding:5px 14px;border-radius:999px;margin-bottom:16px}
.sec-head h2{font-size:34px;font-weight:800;letter-spacing:.3px}
.sec-head.light .kicker{color:#9CC3FF;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}

/* ---------- 左右分栏板块 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.flip .split-visual{order:1}
.flip .split-copy{order:2}
.split-copy h2{font-size:34px;font-weight:800;line-height:1.3;margin-bottom:14px}
.split-lead{color:var(--muted);font-size:16px;margin-bottom:26px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:20px}
.feat-list li{display:flex;gap:15px;align-items:flex-start}
.fl-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:800;margin-top:1px}
.fl-ic.i1{background:#EAF2FF;color:#146BFF}
.fl-ic.i2{background:#E8F8F1;color:#0AA26B}
.fl-ic.i3{background:#FFF3E0;color:#E58A0F}
.fl-ic.i4{background:#F1EDFF;color:#7C4DFF}
.feat-list b{font-size:15.5px;font-weight:700;display:block;margin-bottom:3px}
.feat-list p{color:var(--muted);font-size:13.5px;line-height:1.6}
.scene-more{display:inline-block;margin-top:26px;color:var(--brand);font-weight:600;font-size:14.5px}
.scene-more:hover{color:var(--brand-2)}
.split-visual{position:relative}

/* ---------- 侧卡视觉(mock) ---------- */
.side-card{width:min(440px,100%);margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px 26px;text-align:left}
.side-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.side-card-head b{font-size:16px;font-weight:800}
.side-card-head span{font-size:11.5px;color:var(--muted)}
.side-avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:25px;font-weight:800;margin:16px auto 12px;background:linear-gradient(135deg,#146BFF,#63A5FF);box-shadow:0 8px 18px rgba(20,107,255,.3)}
.side-tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.side-lines{border-top:1px dashed var(--line)}
.sl-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px dashed var(--line);font-size:13px}
.sl-row span{color:var(--muted);flex:none}
.sl-row b{font-weight:600;text-align:right}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.ok{background:#0AA26B;box-shadow:0 0 0 3px rgba(10,162,107,.15)}
.dot.ing{background:#146BFF;box-shadow:0 0 0 3px rgba(20,107,255,.15)}
.dot.dim{background:#B9C4D8}
.side-timeline{padding-top:14px}
.st-item{display:flex;gap:10px;margin-bottom:12px}
.st-item .dot{flex:none;margin-top:4px}
.st-item b{display:block;font-size:12px;font-weight:700;color:#33435F}
.st-item p{font-size:12px;color:var(--muted);line-height:1.55}
.tag-card .side-card-head{margin-bottom:14px}
.tag-group{margin-bottom:16px}
.tag-group-name{font-size:12px;font-weight:700;color:#33435F;margin-bottom:8px;padding-left:2px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.rule-tip{display:flex;gap:9px;align-items:flex-start;background:#F4F8FF;border:1px dashed #B7D2FF;border-radius:12px;padding:11px 13px;font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:6px}
.rule-tip i{font-style:normal;color:var(--brand);flex:none}

/* ---------- 功能全景卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:.28s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,transparent,#146BFF,transparent);opacity:0;transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#D5E4FF}
.card:hover::before{opacity:1}
.ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px}
.ic svg{width:26px;height:26px}
.i1{background:#EAF2FF;color:#146BFF}
.i2{background:#FFF4E0;color:#E58A0F}
.i3{background:#E8F8F1;color:#0AA26B}
.i4{background:#F2EDFF;color:#7C4DFF}
.i5{background:#E7F6FF;color:#0E9ADF}
.i6{background:#FFEEF4;color:#D6457B}
.card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.card p{color:var(--muted);font-size:14.5px}

/* ---------- 接入流程 ---------- */
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.how-step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;transition:.28s;position:relative}
.how-step:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#D5E4FF}
.how-no{font-size:46px;font-weight:800;line-height:1;background:linear-gradient(135deg,rgba(20,107,255,.3),rgba(20,107,255,.03));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px;display:block}
.how-step h3{font-size:18px;font-weight:700;margin-bottom:10px}
.how-step p{color:var(--muted);font-size:14px}
.how-cta{text-align:center;margin-top:44px}

/* ---------- 安全 ---------- */
.secure{background:radial-gradient(900px 460px at 80% -10%,rgba(56,161,255,.25),transparent 55%),linear-gradient(135deg,#0B1F45 0%,#10306b 60%,#146BFF 160%);position:relative;overflow:hidden}
.secure-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.secure-list li{list-style:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;display:flex;gap:13px;backdrop-filter:blur(4px);transition:.25s}
.secure-list li:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}
.secure-list i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#38C08A,#0AA26B);color:#fff;font-style:normal;display:grid;place-items:center;font-size:13px;font-weight:800}
.secure-list b{color:#fff;display:block;font-size:15px;margin-bottom:3px}
.secure-list span{color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.5}

/* ---------- 关于 ---------- */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.about-copy h2{font-size:34px;font-weight:800;margin-bottom:18px}
.about-copy p{color:var(--muted);font-size:16px;margin-bottom:14px}
.about-card{background:linear-gradient(160deg,#fff,#F3F8FF);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:8px 28px;overflow:hidden}
.ab-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.ab-item:last-child{border-bottom:0}
.ab-item span{color:var(--muted);flex:none}
.ab-item b{font-weight:700;text-align:right}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(120deg,#0B49B8,#146BFF 55%,#38A1FF);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.cta-in{position:relative;text-align:center;padding:78px 0;color:#fff}
.cta-in h2{font-size:32px;font-weight:800;margin-bottom:10px}
.cta-in p{color:rgba(255,255,255,.85);margin-bottom:28px}
.cta-in div{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 页脚 ---------- */
.foot{background:#0B1630;color:#8E9BB5;padding:54px 0 0}
.foot-in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px}
.foot-brand{display:flex;gap:12px;align-items:flex-start}
.foot-brand .brand-mark{box-shadow:none}
.foot-brand b{color:#fff;font-size:16px;display:block}
.foot-brand span{font-size:12px}
.foot-cols{display:flex;gap:70px}
.foot-cols h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:1px}
.foot-cols a{display:block;font-size:13.5px;padding:5px 0;transition:.2s}
.foot-cols a:hover{color:#fff}
.foot-bar{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;font-size:12.5px;color:#67748f}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ========== 响应式 ========== */
@media (max-width:1024px){
  .split{grid-template-columns:1fr;gap:44px}
  .flip .split-copy{order:0}
  .flip .split-visual{order:0}
  .cards,.how-steps{grid-template-columns:repeat(2,1fr)}
  .secure-list{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;gap:36px}
  .trustbar{flex-wrap:wrap;gap:8px}
  .trust{flex:1 1 45%;border:0}
  .hero-copy h1{font-size:42px}
}
@media (max-width:760px){
  :root{--nav-h:60px}
  .nav{position:fixed;top:var(--nav-h);left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 6%;box-shadow:0 18px 30px rgba(18,48,110,.12);display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 2px;border-bottom:1px solid var(--bg)}
  .hdr-cta{display:none}
  .burger{display:flex}
  .hdr-in{gap:14px}
  .hero{padding-top:calc(var(--nav-h) + 36px)}
  .hero-copy h1{font-size:31px}
  .lead{font-size:15px}
  .sec{padding:80px 0 66px}
  .sec-head h2,.split-copy h2,.about-copy h2,.cta-in h2{font-size:25px}
  .cards,.how-steps,.secure-list{grid-template-columns:1fr}
  .mw-body{min-height:0}
  .mw-side{display:none}
  .mw-stat{grid-template-columns:repeat(3,1fr);gap:6px}
  .mw-stat>div{padding:7px 8px}
  .mw-stat b{font-size:15px}
  .mw-fake{display:none}
  .mw-row>div{width:104px}
  .float-card{display:none}
  .side-card{padding:18px 16px}
  .foot-in{flex-direction:column}
  .foot-cols{gap:36px}
  .trust{flex:1 1 100%;border:0}
}