/* ============================================================
   SysMaster-Pro 介绍页 · 设计令牌（复用 docs/design/design_system.md）
   light/dark 双主题，HSL 三元组，8pt 间距，Fluent/Segoe 字体
   ============================================================ */
:root{
  --background:210 40% 98%;
  --foreground:222 47% 11%;
  --card:0 0% 100%;
  --card-foreground:222 47% 11%;
  --primary:221 83% 53%;
  --primary-foreground:210 40% 98%;
  --secondary:210 40% 96%;
  --secondary-foreground:222 47% 11%;
  --muted:210 40% 96%;
  --muted-foreground:215 16% 47%;
  --accent:210 40% 96%;
  --accent-foreground:222 47% 11%;
  --destructive:0 72% 51%;
  --success:142 71% 45%;
  --warning:38 92% 50%;
  --info:217 91% 60%;
  --border:214 32% 91%;
  --input:214 32% 91%;
  --ring:221 83% 53%;
  --brand:221 83% 53%;
  --brand-2:262 83% 58%;
  --brand-3:188 86% 53%;
  --radius:0.5rem;
  --font-ui:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --font-mono:"Cascadia Code","JetBrains Mono","Courier New",Consolas,monospace;
  --shadow-card:0 1px 0 rgba(15,23,42,.03),0 2px 8px -4px rgba(15,23,42,.06);
  --shadow-hover:0 2px 0 rgba(15,23,42,.03),0 10px 30px -10px rgba(15,23,42,.15);
}
[data-theme="dark"]{
  --background:222 47% 6%;
  --foreground:210 40% 98%;
  --card:222 47% 8%;
  --card-foreground:210 40% 98%;
  --primary:217 91% 60%;
  --primary-foreground:222 47% 11%;
  --secondary:217 32% 17%;
  --secondary-foreground:210 40% 98%;
  --muted:217 32% 17%;
  --muted-foreground:215 20% 65%;
  --accent:217 32% 17%;
  --accent-foreground:210 40% 98%;
  --destructive:0 62% 45%;
  --success:142 71% 45%;
  --warning:38 92% 50%;
  --info:217 91% 60%;
  --border:217 32% 20%;
  --input:217 32% 20%;
  --ring:224 76% 48%;
  --brand:221 83% 53%;
  --brand-2:262 83% 68%;
  --brand-3:188 86% 53%;
  --shadow-card:0 1px 0 rgba(0,0,0,.3),0 2px 10px -4px rgba(0,0,0,.5);
  --shadow-hover:0 2px 0 rgba(0,0,0,.3),0 14px 36px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.6;
  font-size:15px;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
/* data-icon 容器与生成 svg 的默认尺寸（避免 SVG 撑满父级导致图标过大） */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
[data-icon] svg{width:1em;height:1em;display:block;}
::selection{background:hsl(var(--primary)/.25)}
.bg-brand{background-image:linear-gradient(135deg,hsl(var(--brand)),hsl(var(--brand-2)) 55%,hsl(var(--brand-3)));}
.text-brand{background-image:linear-gradient(135deg,hsl(var(--brand)),hsl(var(--brand-2)));-webkit-background-clip:text;background-clip:text;color:transparent;}
.container{max-width:1120px;margin:0 auto;padding:0 20px;}
section{padding:72px 0;}
.section-head{max-width:680px;margin:0 auto 44px;text-align:center;}
.section-head .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--primary));background:hsl(var(--primary)/.1);padding:4px 12px;border-radius:999px;margin-bottom:14px;}
.section-head h2{font-size:30px;line-height:1.25;font-weight:700;letter-spacing:-.01em;}
.section-head p{margin-top:12px;color:hsl(var(--muted-foreground));font-size:15.5px;}

/* anchor 偏移：避免 sticky nav 遮挡标题 */
section[id]{scroll-margin-top:80px;}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;padding:11px 18px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;white-space:nowrap;}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:0 8px 20px -8px hsl(var(--primary)/.7);}
.btn-primary:hover{background:hsl(var(--primary)/.92);transform:translateY(-1px);}
.btn-outline{background:transparent;border-color:hsl(var(--border));color:hsl(var(--foreground));}
.btn-outline:hover{background:hsl(var(--accent));border-color:hsl(var(--muted-foreground)/.4);}
.btn-ghost{background:transparent;color:hsl(var(--foreground));}
.btn-ghost:hover{background:hsl(var(--accent));}
.btn-lg{padding:14px 24px;font-size:15px;}
.btn svg{width:18px;height:18px;}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn-sm svg{width:15px;height:15px;}

/* ===== navbar ===== */
.nav{position:sticky;top:0;z-index:50;background:hsl(var(--background)/.8);backdrop-filter:blur(10px);border-bottom:1px solid hsl(var(--border));}
.nav-inner{display:flex;align-items:center;gap:18px;height:62px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;}
.brand-mark{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px -6px hsl(var(--brand)/.5);}
.brand-mark svg{width:18px;height:18px;}
.brand b{color:hsl(var(--primary));}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px;}
.nav-links a{font-size:14px;font-weight:500;color:hsl(var(--muted-foreground));padding:8px 12px;border-radius:8px;transition:color .2s,background .2s;}
.nav-links a:hover,.nav-links a:focus-visible{color:hsl(var(--foreground));background:hsl(var(--accent));outline:none;}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.icon-btn{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;border:1px solid transparent;background:transparent;color:hsl(var(--foreground));cursor:pointer;transition:background .2s,border-color .2s;}
.icon-btn:hover{background:hsl(var(--accent));border-color:hsl(var(--border));}
.icon-btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;}
.icon-btn svg{width:18px;height:18px;}
.nav-toggle{display:none;}
.lang-toggle{font-size:13px;font-weight:700;letter-spacing:.02em;}
@media(max-width:860px){
  .nav-links{position:fixed;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));padding:10px 16px;box-shadow:var(--shadow-hover);display:none;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px;border-radius:8px;}
  .nav-toggle{display:grid;}
}

/* ===== hero ===== */
.hero{padding:80px 0 56px;text-align:center;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:-40% 0 auto 0;height:520px;background:radial-gradient(60% 60% at 50% 0%,hsl(var(--brand)/.14),transparent 70%);pointer-events:none;}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px;position:relative;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:hsl(var(--muted-foreground));background:hsl(var(--card));border:1px solid hsl(var(--border));padding:5px 12px;border-radius:999px;}
.chip svg{width:14px;height:14px;color:hsl(var(--primary));}
.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.1;font-weight:800;letter-spacing:-.02em;position:relative;}
.hero .sub{max-width:620px;margin:20px auto 0;font-size:17px;color:hsl(var(--muted-foreground));position:relative;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px;position:relative;}
.hero-note{margin-top:14px;font-size:13px;color:hsl(var(--muted-foreground));position:relative;}

/* dashboard mock */
.mock{position:relative;max-width:920px;margin:48px auto 0;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:16px;box-shadow:var(--shadow-hover);padding:18px;text-align:left;}
.mock-bar{display:flex;align-items:center;gap:8px;padding:4px 6px 14px;border-bottom:1px solid hsl(var(--border));margin-bottom:16px;}
.mock-dot{width:11px;height:11px;border-radius:50%;background:hsl(var(--border));}
.mock-dot.r{background:hsl(var(--destructive)/.7);}
.mock-dot.y{background:hsl(var(--warning)/.8);}
.mock-dot.g{background:hsl(var(--success)/.8);}
.mock-title{margin-left:6px;font-size:12.5px;font-weight:600;color:hsl(var(--muted-foreground));font-family:var(--font-mono);}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.metric{background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:12px;padding:14px;}
.metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.metric-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:hsl(var(--primary)/.1);color:hsl(var(--primary));}
.metric-ic svg{width:18px;height:18px;}
.metric-ic.warn{background:hsl(var(--warning)/.12);color:hsl(var(--warning));}
.metric-ic.danger{background:hsl(var(--destructive)/.12);color:hsl(var(--destructive));}
.metric-label{font-size:12px;color:hsl(var(--muted-foreground));}
.metric-val{font-size:21px;font-weight:700;margin-top:8px;font-family:var(--font-mono);letter-spacing:-.01em;}
.metric-val small{font-size:13px;font-weight:500;color:hsl(var(--muted-foreground));}
.badge-sm{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:hsl(var(--success)/.12);color:hsl(var(--success));}
.badge-sm.w{background:hsl(var(--warning)/.14);color:hsl(var(--warning));}
.badge-sm.d{background:hsl(var(--destructive)/.14);color:hsl(var(--destructive));}
.bar{height:7px;border-radius:999px;background:hsl(var(--muted));margin-top:12px;overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:999px;background:hsl(var(--primary));transition:width 1s ease;}
.metric-foot{font-size:10.5px;color:hsl(var(--muted-foreground));margin-top:8px;font-family:var(--font-mono);}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr);}.mock{margin-top:36px;}}

/* ===== features ===== */
.grid{display:grid;gap:18px;}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:14px;padding:22px;box-shadow:var(--shadow-card);transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:hsl(var(--muted-foreground)/.35);}
.feature-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:hsl(var(--primary)/.1);color:hsl(var(--primary));margin-bottom:14px;}
.feature-ic svg{width:22px;height:22px;}
.card h3{font-size:17px;font-weight:600;letter-spacing:-.01em;}
.card p{margin-top:8px;font-size:14px;color:hsl(var(--muted-foreground));}
@media(max-width:900px){.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.cols-3,.cols-2{grid-template-columns:1fr;}}

/* ===== highlights ===== */
.highlight{display:flex;gap:14px;align-items:flex-start;}
.highlight .feature-ic{margin-bottom:0;flex-shrink:0;}

/* ===== tech stack ===== */
.tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.tag{font-size:13.5px;font-weight:600;color:hsl(var(--foreground));background:hsl(var(--card));border:1px solid hsl(var(--border));padding:9px 16px;border-radius:10px;box-shadow:var(--shadow-card);}

/* ===== links / docs ===== */
.link-card{display:flex;align-items:center;gap:14px;}
.link-card .feature-ic{margin-bottom:0;background:hsl(var(--secondary));color:hsl(var(--foreground));}
.link-card .arrow{margin-left:auto;color:hsl(var(--muted-foreground));transition:transform .2s,color .2s;}
.link-card:hover .arrow{transform:translateX(4px);color:hsl(var(--primary));}
.link-card .meta{font-size:12.5px;color:hsl(var(--muted-foreground));}

/* ===== requirements ===== */
.req{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:760px;margin:0 auto;}
.req .card{display:flex;align-items:center;gap:12px;padding:16px 18px;}
.req .feature-ic{margin-bottom:0;width:38px;height:38px;}
.req .feature-ic svg{width:18px;height:18px;}
.req .k{font-size:13px;color:hsl(var(--muted-foreground));}
.req .v{font-size:15px;font-weight:600;}
@media(max-width:600px){.req{grid-template-columns:1fr;}}

/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
details{border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));overflow:hidden;}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;font-weight:600;font-size:15px;}
summary::-webkit-details-marker{display:none;}
summary:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px;}
summary .q-ic{color:hsl(var(--primary));flex-shrink:0;}
summary .q-ic svg{width:18px;height:18px;}
summary .chev{margin-left:auto;color:hsl(var(--muted-foreground));transition:transform .2s;}
details[open] summary .chev{transform:rotate(180deg);}
.faq-body{padding:0 18px 18px;color:hsl(var(--muted-foreground));font-size:14px;}

/* ===== CTA band ===== */
.cta-band{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:18px;padding:38px 28px;text-align:center;box-shadow:var(--shadow-card);position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% -20%,hsl(var(--brand)/.16),transparent 60%);pointer-events:none;}
.cta-band h2{font-size:26px;font-weight:700;position:relative;}
.cta-band p{margin-top:10px;color:hsl(var(--muted-foreground));position:relative;}
.cta-band .hero-cta{margin-top:24px;position:relative;}

/* ===== social proof ===== */
.proof{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:36px auto 0;max-width:880px;position:relative;}
.proof-item{display:inline-flex;align-items:center;gap:10px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:12px;padding:12px 18px;box-shadow:var(--shadow-card);}
.proof-item .pi-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:hsl(var(--brand)/.1);color:hsl(var(--brand));}
.proof-item .pi-ic svg{width:18px;height:18px;}
.proof-item .pi-txt{text-align:left;}
.proof-item .pi-val{font-size:15px;font-weight:700;line-height:1.2;}
.proof-item .pi-lab{font-size:12px;color:hsl(var(--muted-foreground));}

/* ===== footer ===== */
footer{border-top:1px solid hsl(var(--border));padding:44px 0 30px;margin-top:20px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
.foot-brand p{margin-top:12px;font-size:13.5px;color:hsl(var(--muted-foreground));max-width:280px;}
.foot-col h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground));margin-bottom:12px;}
.foot-col a{display:block;font-size:14px;color:hsl(var(--foreground));padding:6px 0;transition:color .2s;}
.foot-col a:hover{color:hsl(var(--primary));}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:34px;padding-top:22px;border-top:1px solid hsl(var(--border));font-size:13px;color:hsl(var(--muted-foreground));}
.foot-bottom .socials{display:flex;gap:8px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1/-1;}}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}