/* ============ Tokens ============ */
:root{
  --primary: #4D6BFE;
  --primary-700: #3A56E0;
  --primary-50: #EEF1FF;
  --primary-100: #DDE3FF;
  --ink: #0B0D17;
  --ink-2: #1F2333;
  --muted: #5A6275;
  --muted-2: #8A92A6;
  --line: #E6E8EE;
  --line-2: #EFF1F5;
  --bg: #FFFFFF;
  --bg-soft: #F7F8FB;
  --bg-tint: #F2F4FA;
  --bg-blue: #F2F4FE;
  --success: #16A06B;
  --warn: #E0A800;
  --shadow-sm: 0 1px 2px rgba(11,13,23,.04);
  --shadow-md: 0 6px 24px -8px rgba(11,13,23,.08), 0 2px 6px -4px rgba(11,13,23,.06);
  --shadow-lg: 0 24px 60px -24px rgba(40,55,140,.18), 0 8px 28px -12px rgba(11,13,23,.08);
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --font-zh: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-zh);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit;padding:0}
img{display:block;max-width:100%}

.container{max-width:1120px;margin:0 auto;padding:0 32px}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:10px;
  font-size:14.5px;font-weight:500;
  border:1px solid transparent;cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--primary);color:#fff;box-shadow: 0 6px 18px -8px rgba(77,107,254,.6), inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:var(--primary-700);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#C7CCDA;background:#FAFBFD}

/* ============ Nav ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(230,232,238,.6);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:38px;width:auto}
.nav-cta{display:flex;gap:6px;align-items:center}
.nav-cta a, .nav-cta button{
  padding:8px 14px;border-radius:8px;font-size:14px;color:var(--ink-2);
  transition: background .15s ease, color .15s ease;
}
.nav-cta a:hover, .nav-cta button:hover{background:var(--bg-soft);color:var(--ink)}

/* ============ Hero ============ */
.hero{
  position:relative; overflow:hidden;
  padding: 64px 0 96px;
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(77,107,254,.10), transparent 60%),
    radial-gradient(600px 380px at 10% 10%, rgba(77,107,254,.05), transparent 60%);
}
.hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(11,13,23,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,13,23,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 70%);
}
.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns: 1fr 1fr; gap:64px; align-items:center;
}
.eyebrow{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight:600;
  letter-spacing:.16em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-title{
  font-size: clamp(64px, 8.4vw, 116px);
  line-height: .95; letter-spacing:-.04em;
  font-weight: 800;
  margin: 0 0 22px;
  color: var(--ink);
}
.hero-slogan{
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25; letter-spacing:-.01em;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--ink);
  text-wrap: balance;
}
.hero-slogan .accent{color:var(--primary)}
.hero-sub{
  font-size:15.5px;color:var(--muted);max-width:440px;
  text-wrap: pretty;line-height:1.7;
  margin: 0 0 32px;
}
.hero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ============ Hero mock: Agent 调度台 ============ */
.mock{
  position:relative;
  background: #fff;
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
}
.mock-chrome{
  display:flex;align-items:center;gap:6px;
  padding:14px 18px;
  border-bottom:1px solid var(--line-2);
  background: linear-gradient(180deg, #FBFBFE, #fff);
}
.mock-chrome i{width:11px;height:11px;border-radius:50%;background:#E1E4EE}
.mock-chrome span{
  margin-left:auto;font-size:13px;color:var(--muted);font-weight:500;
}
.mock-body{padding: 22px 22px 24px}
.mock-task{
  padding: 18px 20px 18px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FBFCFF, #fff);
  margin-bottom: 16px;
}
.mock-task .k{font-size:12.5px;color:var(--muted-2);letter-spacing:.02em}
.mock-task .v{
  font-size: 20px;font-weight:600;color:var(--ink);margin-top: 6px;letter-spacing:-.005em;
}
.mock-progress{
  margin-top: 14px;
  height:8px;border-radius:999px;
  background: var(--bg-tint);overflow:hidden;
}
.mock-progress i{
  display:block;height:100%;
  width: 64%;
  background: linear-gradient(90deg, var(--primary), #8AA0FF);
  border-radius: 999px;
  animation: prog 3.4s ease-in-out infinite;
}
@keyframes prog{
  0%, 100% { width: 58%; }
  50% { width: 78%; }
}
.mock-agents{
  display:grid;grid-template-columns: 1fr 1fr; gap: 12px;
}
.mock-agent{
  padding: 14px 16px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  transition: border-color .2s ease, transform .25s ease;
}
.mock-agent:hover{border-color: #C9D1F2; transform: translateY(-1px)}
.mock-agent .name{font-size:14.5px;font-weight:600;color:var(--ink)}
.mock-agent .desc{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ============ Sections ============ */
.section{padding: 112px 0; position:relative}
.section.alt{background: var(--bg-blue)}
.section-head{max-width: 720px; margin: 0 auto 64px; text-align:center}
.section-head.left{text-align:left;margin:0 0 48px}
.section-eyebrow{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;font-weight:600;
  letter-spacing:.18em;color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.section-title{
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.15; letter-spacing:-.02em;
  font-weight: 700;
  margin: 0 0 18px;
  text-wrap: balance;
}
.section-sub{
  font-size: 16px; color: var(--muted); line-height:1.75;
  max-width: 580px; text-wrap: pretty;
}
.section-head.center .section-sub{margin: 0 auto}

/* ============ Features (3 pillars) ============ */
.pillars{
  display:grid;grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.pillar{
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  display:flex;flex-direction:column;gap:14px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.pillar:hover{
  border-color: #C9D1F2;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.pillar .ic-lg{
  width:48px;height:48px;border-radius:12px;
  background: var(--primary-50); color: var(--primary);
  display:grid;place-items:center;
}
.pillar .num{
  font-family: var(--font-mono);
  font-size:11.5px; color: var(--muted-2);
  letter-spacing:.14em; font-weight:600;
}
.pillar h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.005em}
.pillar p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7}
.pillar ul{margin: 4px 0 0; padding:0; list-style:none; display:flex;flex-direction:column;gap:9px}
.pillar ul li{
  display:flex;gap:8px;align-items:flex-start;
  font-size:13.5px;color:var(--ink-2);
}
.pillar ul li svg{flex:0 0 auto;color:var(--primary);margin-top:3px}

/* ============ Workflow (horizontal timeline) ============ */
.tl{
  position:relative;
  display:grid;grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 14px 36px 8px;
}
.tl::before{
  content:"";
  position:absolute;
  top: 26px; left: 8%; right: 8%;
  height: 0; border-top: 1.6px dashed #C7D1F2;
  z-index: 0;
}
.tl-step{
  position:relative; z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
}
.tl-step .dot{
  width: 52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  border:1.5px solid #C7D1F2;
  font-family: var(--font-mono);font-weight:600;
  color: var(--primary);
  font-size: 14.5px;
  box-shadow: 0 4px 14px -6px rgba(77,107,254,.25);
}
.tl-step.active .dot{background:var(--primary);color:#fff;border-color:var(--primary)}
.tl-step .label{font-size:16px;font-weight:600;color:var(--ink)}
.tl-step .desc{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.6;max-width:200px}

/* ============ Payments ============ */
.pay-split{
  display:grid;grid-template-columns: 1fr 1.2fr; gap: 56px; align-items:flex-start;
}
.pay-copy .section-eyebrow{margin-bottom:18px}
.pay-copy h2{
  font-size: clamp(32px, 3.6vw, 44px);
  line-height:1.15; letter-spacing:-.02em;
  font-weight: 700;
  margin: 0 0 18px;
  text-wrap: balance;
}
.pay-copy p{
  font-size: 15.5px; color: var(--muted); line-height: 1.75;
  margin: 0; max-width: 380px;
}
.pay-cards{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.pay-card{
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  display:flex;flex-direction:column;gap:10px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.pay-card:hover{
  border-color:#C9D1F2;transform:translateY(-2px);box-shadow:var(--shadow-md);
}
.pay-card .mark{
  display:inline-flex;align-items:center;justify-content:center;
  height:24px;padding: 0 9px;border-radius: 6px;
  background: var(--primary-50);color: var(--primary);
  font-family: var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.02em;
  align-self:flex-start;
}
.pay-card h4{
  margin: 4px 0 0; font-size: 24px; font-weight:700; letter-spacing:-.015em;
}
.pay-card p{
  margin:0;color:var(--muted);font-size:14px;line-height:1.7;
}

/* ============ Use cases ============ */
.cases{
  display:grid;grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.case{
  padding: 24px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  display:flex;flex-direction:column;gap:12px;
  min-height: 200px;
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.case:hover{border-color:#C9D1F2;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.case .ic{
  width:36px;height:36px;border-radius:10px;
  background: var(--primary-50);color:var(--primary);
  display:grid;place-items:center;
}
.case h4{margin:6px 0 0;font-size:17px;font-weight:650;letter-spacing:-.005em}
.case p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7}

/* ============ Footer ============ */
.footer{
  border-top:1px solid var(--line);
  padding: 20px 0;background:#fff;
}
.foot-inner{
  display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted-2);
}
.foot-inner a{color:var(--muted-2);display:inline-flex;align-items:center;gap:6px}
.foot-inner a:hover{color:var(--primary)}
.foot-inner .badge{
  width:16px;height:16px;flex:0 0 auto;
  object-fit: contain;
}

/* ============ Download Modal ============ */
.btn-sm{padding:8px 14px;font-size:13px;border-radius:8px}
.dl-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding: 24px;
}
.dl-modal[hidden]{display:none}
.dl-modal-backdrop{
  position:absolute;inset:0;
  background: rgba(11,13,23,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity:0; transition: opacity .2s ease;
}
.dl-modal.open .dl-modal-backdrop{opacity:1}
.dl-modal-card{
  position:relative;
  width:100%;max-width: 540px;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding: 28px;
  box-shadow: 0 32px 80px -20px rgba(11,13,23,.32);
  transform: translateY(12px) scale(.98);
  opacity:0; transition: transform .25s ease, opacity .2s ease;
}
.dl-modal.open .dl-modal-card{transform: translateY(0) scale(1);opacity:1}
.dl-modal-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;
  color:var(--muted);background:transparent;border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dl-modal-close:hover{background:var(--bg-soft);color:var(--ink);border-color:var(--line)}
.dl-modal-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.dl-modal-ic{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  background: var(--primary-50); color: var(--primary);
  display:grid;place-items:center;
}
.dl-modal-head h3{margin:0 0 4px;font-size:18px;font-weight:650}
.dl-modal-head p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.dl-modal-grid{display:flex;flex-direction:column;gap:10px}
.dl-modal-row{
  display:grid;grid-template-columns: 42px 1fr auto;gap:14px;align-items:center;
  padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;
  transition: border-color .2s ease, background .2s ease;
}
.dl-modal-row.focus{
  border-color: var(--primary);background: var(--primary-50);
  box-shadow: 0 0 0 4px rgba(77,107,254,.10);
}
.dl-modal-row:hover{border-color: #C9D1F2}
.dl-modal-row .os-ic{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background: var(--bg-soft);color: var(--ink);
}
.dl-modal-row[data-os="mac"] .os-ic{background:#0B0D17;color:#fff}
.dl-modal-row[data-os="win"] .os-ic{background:#EAF2FF;color:#0066CC}
.dl-modal-row[data-os="linux"] .os-ic{background:#FFF6E0;color:#B07700}
.os-name{font-size:15px;font-weight:600;color:var(--ink)}
.os-info{font-size:12.5px;color:var(--muted);margin-top:2px;font-family:var(--font-mono)}
.os-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.os-sub{font-size:11.5px;color:var(--muted-2);display:flex;gap:6px}
.os-sub a{color:var(--muted)}
.os-sub a:hover{color:var(--primary)}
.dl-modal-foot{
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:var(--muted);font-size:12px;flex-wrap:wrap;
}
.dl-modal-foot svg{color: var(--success); vertical-align:-2px; margin-right:4px}
.dl-modal-foot a{color:var(--primary);font-weight:500}
.btn-primary.btn-sm{box-shadow: 0 4px 12px -6px rgba(77,107,254,.55)}

/* ============ Responsive ============ */
@media (max-width: 960px){
  .hero{padding: 48px 0 64px}
  .hero-inner{grid-template-columns: 1fr; gap:40px}
  .pillars{grid-template-columns: 1fr}
  .cases{grid-template-columns: 1fr 1fr}
  .tl{grid-template-columns: 1fr 1fr; row-gap: 32px}
  .tl::before{display:none}
  .pay-split{grid-template-columns: 1fr; gap: 36px}
  .section{padding: 72px 0}
}
@media (max-width: 600px){
  .container{padding:0 20px}
  .pay-cards, .cases{grid-template-columns: 1fr}
  .tl{grid-template-columns: 1fr}
  .nav-cta a:not(.btn-primary){display:none}
  .dl-modal-row{grid-template-columns: 42px 1fr; row-gap:10px}
  .os-actions{grid-column: 1 / -1; flex-direction: row; align-items:center; justify-content:space-between}
}