:root{
  --bg:#0b0f19; --text:#e5e7eb; --text-strong:#ffffff; --muted:#cbd5e1;
  --card:#0f172a; --line:#1f2937; --brand:#22c55e; --brand2:#0ea5e9;
  --hero-url:url('./assets/hero.jpg');
  --spin-dur: 40s;        /* 八卦旋转时长 */
  --glow-dur: 3s;         /* 外环发光周期 */
  --bagua-opacity: .6;   /* 建议 0.10~0.18，过高会显得发糊 */
  --bagua-shift: -7vw;   /* 八卦水平偏移（负值向左，正值向右） */
}
*{box-sizing:border-box}

/* Font: TypeLand 康熙字典體（请将 woff2 放在 website/assets/fonts/kangxi.woff2）*/
@font-face{
  font-family:'KangXi';
  /* 优先使用 OTF/TTF，避免本地损坏的 WOFF2 导致解码失败 */
  src: url('./assets/fonts/kangxi.otf') format('opentype'),
       url('./assets/fonts/kangxi.ttf') format('truetype'),
       url('./assets/fonts/kangxi.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body{margin:0;color:var(--text);background:var(--bg);font-family:'KangXi','Noto Serif SC','STKaiti','Songti SC',serif;}
.container{max-width: 1080px; margin: 0 auto; padding: 0 20px;}
.site-header{position:sticky;top:0;background:rgba(11,15,25,.6);backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,.06);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:10px}
/* 圆形图标 + 中文字样组合 */
.brand-icon{height:56px;width:56px;border-radius:50%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.brand-title{font-size:20px;letter-spacing:.06em;color:#e5e7eb;font-weight:600;display:flex;align-items:baseline;gap:6px}
.brand-cn{font-family:'KangXi','Noto Serif SC',serif; font-weight:400; font-style:normal; font-synthesis: none}
/* Agent 采用和 logo_full 相近风格：全大写、等宽/无衬线感、字距更紧 */
.brand-agent{font-family: system-ui,Segoe UI,Roboto,Arial,sans-serif; text-transform: uppercase; font-weight:700; letter-spacing:.02em; background: linear-gradient(90deg,#22c55e,#0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent}
@media (max-width:640px){ .brand-icon{height:40px;width:40px} .brand-title{font-size:18px} }
/* 无障碍隐藏但保留 SEO 的文字 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
nav a{color:var(--muted);text-decoration:none;margin-left:16px}
nav a:hover{color:#fff}
.hero{position:relative;min-height:72vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(120deg, rgba(11,15,25,.85) 45%, rgba(11,15,25,.5) 55%),
  var(--hero-url);
  background-size:cover; background-position:center; z-index:0;}
.hero::after{content:"";position:absolute;inset:0; backdrop-filter: blur(2px);}
.bagua-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none}
.bagua-svg{width:min(70vh,70vw);opacity: var(--bagua-opacity);transform: translateX(var(--bagua-shift));}
.bagua-bg{justify-content:flex-start}

/* 自适应：不同屏宽的八卦水平偏移 */
@media (max-width: 1280px){ :root{ --bagua-shift: -14vw } }
@media (max-width: 1024px){ :root{ --bagua-shift: -10vw } }
@media (max-width: 768px){  :root{ --bagua-shift: -6vw } }
@media (max-width: 480px){  :root{ --bagua-shift: -4vw; --bagua-opacity: .10 } }
.bagua-rotate{animation: spin var(--spin-dur) linear infinite; transform-origin: 50% 50%; will-change: transform;}
.bagua-rotate-slow{animation: spin calc(var(--spin-dur) * 1.5) linear infinite; transform-origin: 50% 50%; will-change: transform;}
.bagua-rotate-rev{animation: spin-rev var(--spin-dur) linear infinite; transform-origin: 50% 50%; will-change: transform;}
.bagua-static{animation: none;}
/* 提升旋转线条锐利度，避免模糊 */
.bagua-rotate line{shape-rendering: crispEdges; vector-effect: non-scaling-stroke}
.bagua-core{opacity:1} /* 最中间不旋转部分透明度 0，但结构保留、抗锯齿 */
/* Outer glow pulse with brand green/teal */
.bagua-glow{ animation: glow var(--glow-dur) ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes glow{
  0%,100%{
    opacity:.38;
    filter:
      drop-shadow(0 0 12px rgba(34,197,94,.40))
      drop-shadow(0 0 10px rgba(14,165,233,.28));
  }
  50%{
    opacity:.9;
    filter:
      drop-shadow(0 0 28px rgba(34,197,94,.65))
      drop-shadow(0 0 20px rgba(14,165,233,.50));
  }
}
@keyframes spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes spin-rev{ from{ transform: rotate(0deg); } to{ transform: rotate(-360deg); } }
.hero-inner{position:relative;z-index:1;padding:96px 0;text-align:left}
.hero h1{margin:0 0 16px;font-size:44px;line-height:1.2;color:var(--text-strong);text-shadow:0 6px 24px rgba(0,0,0,.4)}
.subtitle{color:var(--muted);max-width:820px;margin:0 0 16px;font-size:18px;line-height:1.7}
.cta{display:flex;gap:12px;justify-content:flex-start;margin-top:16px}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);text-decoration:none;color:#fff;background:rgba(255,255,255,.06)}
.btn.primary{background:linear-gradient(90deg, var(--brand), var(--brand2)); color:#0b1220; border-color:transparent}
.section{padding:48px 0}
.muted{background:#0b1220}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px}
.cols{display:grid;grid-template-columns: repeat(auto-fit,minmax(320px,1fr));gap:24px;align-items:center}
.steps{padding-left:18px}
.illu{display:flex;justify-content:center}
.pipeline{display:flex;gap:10px;flex-wrap:wrap}
.pipeline span{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4);color:#d1fae5;padding:6px 10px;border-radius:999px}
.site-footer{border-top:1px solid rgba(255,255,255,.08);}
.foot{display:flex;justify-content:space-between;align-items:center;height:60px;color:var(--muted)}
.small{font-size:12px}
.link{color:#9ae6b4}