/* 页头 / 主导航 —— 从 style.css 原样抽出，只为首页（第 46 轮）
   ⚠️ 这份文件是脚本生成的（桌面 _hdr_extract.py），别手改；
      要改页头请改 style.css，再重跑一次。
   ⚠️ 加载顺序必须在 demo 那套 <style> **之后**：两套设计有几处同名
      选择器（.brand / .nav），页头要压得住。 */

/* style.css 的 :root 令牌，收进页头作用域 —— 不外泄到页面主体 */
header.site {--deep-900:#0A0C0E; --deep-800:#191E22; --deep-700:#22282D; --deep-600:#2B3238; --deep-500:#343B42; --deep-400:#525A61; --deep-200:#6A737B; --deep-100:#8D959D; --jade-600:#67DDA6; --jade-500:#3DBE87; --jade-400:#23955C; --jade-300:#7DE8B4; --jade-200:rgba(125,232,180,.30); --jade-100:rgba(35,149,92,.16); --tint-50:#1A1F23; --tint-100:#15191C; --tint-200:#1F252A; --green-700:#0A4A2E; --green-600:#0D6B4B; --green-500:#0F7A57; --enig:#C9A227; --red-600:#FF9380; --red-100:rgba(142,50,37,.20); --red-200:rgba(255,147,128,.36); color-scheme:dark; --bg:#0B0D0F; --band:var(--tint-100); --band-jade:#0F241D; --band-indigo:#101A30; --band-umber:#241A10; --card-jade:#142C23; --card-indigo:#16203A; --card-umber:#2E2216; --card-jade-h:#173128; --card-indigo-h:#19243F; --card-umber-h:#33261A; --paper:#171C20; --paper-2:#1B2126; --svc-page:#0F1316; --svc-card:#171C20; --ink:#F1F3F4; --ink-2:#A6AEB4; --mute:#8D959D; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --line-3:rgba(255,255,255,.28); --accent:var(--jade-400); --accent-strong:var(--jade-500); --accent-ink:var(--jade-600); --accent-soft:var(--jade-100); --accent-ring:rgba(35,149,92,.40); --on-dark:#FFFFFF; --on-dark-2:rgba(255,255,255,.88); --on-dark-3:rgba(255,255,255,.74); --on-dark-line:rgba(255,255,255,.16); --hero-scrim:rgba(8,9,11,.72); --font-sans:"Plex Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue", Arial,"Microsoft YaHei","微软雅黑",sans-serif; --font-mono:"Plex Mono",ui-monospace,"SF Mono",Consolas,"Courier New",monospace; --fs-2xs:11.5px; --fs-xs:13px; --fs-sm:14.5px; --fs-base:16px; --fs-md:18px; --fs-lg:22px; --fs-xl:30px; --fs-2xl:clamp(27px,2.9vw,38px); --fs-3xl:clamp(33px,4.0vw,48px); --fs-page:clamp(31px,4.2vw,50px); --lh-display:1.03; --lh-heading:1.18; --lh-snug:1.42; --lh-body:1.68; --ls-display:-.030em; --ls-heading:-.014em; --ls-body:0; --ls-label:.10em; --ls-wide:.16em; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:56px; --s-11:64px; --s-12:72px; --s-13:88px; --s-14:104px; --max:1140px; --measure:62ch; --header-h:84px; --nav-bridge:14px; --header-flip:491px; --r-xs:4px; --r-sm:7px; --r-md:11px; --r-lg:16px; --r-full:999px; --sh-1:0 1px 2px rgba(9,67,91,.05); --sh-2:0 2px 6px -1px rgba(9,67,91,.08), 0 1px 2px rgba(9,67,91,.05); --sh-3:0 14px 32px -10px rgba(9,67,91,.18), 0 2px 6px -1px rgba(9,67,91,.07); --ease:cubic-bezier(.2,.65,.3,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:110ms; --dur-2:190ms; --dur-3:340ms; --dur-xfade:12s; --routing-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%2309435B' stroke-width='1' stroke-opacity='.07'%3E%3Cpath d='M0 32h28l16 16h24l16-16h12'/%3E%3Cpath d='M44 0v20'/%3E%3Cpath d='M44 96v-18'/%3E%3Cpath d='M28 32V14'/%3E%3Cpath d='M68 48v18'/%3E%3C/g%3E%3Cg fill='%2309435B' fill-opacity='.07'%3E%3Ccircle cx='28' cy='14' r='2.4'/%3E%3Ccircle cx='44' cy='20' r='2.4'/%3E%3Ccircle cx='44' cy='78' r='2.4'/%3E%3Ccircle cx='68' cy='66' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); --ic-quote-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h7L18 7.5V21H6.5z'/%3E%3Cpath d='M13.5 3v4.5H18'/%3E%3Cpath d='M9.5 13h5'/%3E%3Cpath d='M9.5 16.5h5'/%3E%3C/svg%3E"); --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309435B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h18v11H3z'/%3E%3Cpath d='M3.4 7.2l7.8 5.6a1.6 1.6 0 0 0 1.6 0l7.8-5.6'/%3E%3C/svg%3E"); --ic-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309435B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 3.5h2.9l1.4 3.8-2 1.4a10.6 10.6 0 0 0 6.2 6.2l1.4-2 3.8 1.4v2.9a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.8 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E"); --ic-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309435B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4.5'/%3E%3Cpath d='M5.5 11L12 4.5 18.5 11'/%3E%3C/svg%3E"); --ic-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309435B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 5.7h15.2v10H10l-4.2 3.6v-3.6H4.4z'/%3E%3Ccircle cx='8.9' cy='10.7' r='1.05' fill='%2309435B' stroke='none'/%3E%3Ccircle cx='12' cy='10.7' r='1.05' fill='%2309435B' stroke='none'/%3E%3Ccircle cx='15.1' cy='10.7' r='1.05' fill='%2309435B' stroke='none'/%3E%3C/svg%3E"); --ic-wechat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309435B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 11.6h9.2v5.6H7.4l-2.6 2.2v-2.2H3.2z'/%3E%3Cpath d='M11.4 5.4h9.4v5.4h-1.5v2.1l-2.2-2.1h-5.7z'/%3E%3Ccircle cx='6.4' cy='14.4' r='1.05' fill='%2309435B' stroke='none'/%3E%3Ccircle cx='9.2' cy='14.4' r='1.05' fill='%2309435B' stroke='none'/%3E%3C/svg%3E");}

/* 字体 */
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}

/* 规则 */


header.site { position:sticky;top:0;z-index:50; background:rgba(11,13,15,.86); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }

header.site .wrap { display:flex;align-items:center;justify-content:space-between; height:var(--header-h);gap:var(--s-5); }

.brand { display:flex;align-items:center;gap:var(--s-3);color:var(--ink); font-weight:600;letter-spacing:-.01em;font-size:var(--fs-lg) }

.brand:hover { color:var(--jade-600) }

.brand .logo { height:46px;width:auto;flex:0 0 auto;display:block }

nav.main { display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap }

nav.main a { position:relative; color:var(--ink-2);font-size:var(--fs-base);font-weight:500; padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);white-space:nowrap; transition:background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }

nav.main a:hover { background:var(--tint-100);color:var(--ink) }

nav.main a.on { color:var(--ink);background:transparent }

nav.main a.on::after { content:"";position:absolute;left:var(--s-4);right:var(--s-4);bottom:1px; height:2px;border-radius:2px;background:var(--jade-400); }

nav.main a.cta { background:var(--green-500);color:#fff;font-weight:600; box-shadow:inset 0 -2px 0 var(--enig); margin-left:var(--s-2); transition:background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out); }

nav.main a.cta:hover { background:var(--green-600);color:#fff;transform:translateY(-1px) }

.nav-grp { position:relative;display:flex;align-items:center }

.nav-grp>a { display:inline-flex;align-items:center;gap:6px }

.nav-grp::after { content:"";position:absolute;top:100%;left:0;right:0;height:var(--nav-bridge); }

.chev { width:10px;height:10px;flex:0 0 auto;opacity:.55; transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease); }

.nav-grp:hover .chev,.nav-grp:focus-within .chev { transform:rotate(180deg);opacity:.9 }

.nav-panel { position:fixed; top:calc(var(--header-h) - var(--nav-bridge)); right:calc(max(0px,(100vw - var(--max)) / 2) + var(--s-6)); z-index:60; display:grid;grid-template-columns:224px minmax(0,1fr);gap:var(--s-6); width:max-content;max-width:min(760px,calc(100vw - 2 * var(--s-6))); padding:var(--s-5); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-3); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-6px); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }

.nav-grp:hover .nav-panel,
.nav-grp:focus-within .nav-panel { opacity:1;visibility:visible;pointer-events:auto; transform:translateY(0);transition-delay:0s; }

.nav-feat { display:block;border-radius:var(--r-md);overflow:hidden; border:1px solid var(--line);background:var(--tint-50);padding:0; align-self:start }

.nav-feat img { width:100%;aspect-ratio:4/3;object-fit:cover;display:block }

.nav-feat b { display:block;padding:var(--s-3) var(--s-4) 0; font-size:var(--fs-sm);font-weight:600;color:var(--ink) }

.nav-feat span { display:block;padding:2px var(--s-4) var(--s-4); font-size:var(--fs-xs);line-height:1.5;color:var(--mute) }

.nav-feat:hover { border-color:var(--jade-200);background:var(--jade-100) }

nav.main .nav-feat { white-space:normal }

.nav-cols { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2) var(--s-5);align-content:start }

.nav-cols.tri { grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2) var(--s-6) }

.nav-cols>div { display:flex;flex-direction:column;gap:1px;min-width:0 }

.nav-cols p { margin:0 0 var(--s-1);padding:0 var(--s-3); font-family:var(--font-mono);font-size:var(--fs-2xs); letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--mute); }

.nav-cols a { display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm); font-size:var(--fs-sm);font-weight:500;color:var(--ink);line-height:1.35 }

.nav-cols a:hover { background:var(--jade-100);color:var(--jade-600) }

.nav-cols a span { display:block;font-weight:400;font-size:var(--fs-2xs); color:var(--mute);margin-top:2px }

nav.main .nav-cols a { white-space:normal }

.nav-panel:has(.nav-cols.tri) { max-width:min(1060px,calc(100vw - 2 * var(--s-6))) }

header.site.is-top { background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:saturate(180%) blur(0px); backdrop-filter:blur(0px); }

header.site.is-top .brand .logo { filter:brightness(0) invert(1) }

header.site.is-top nav.main a.on::after { background:var(--jade-300) }

@media(max-width:1020px) {
  header.site.is-top { background:rgba(11,13,15,.94); border-bottom-color:var(--line); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:blur(14px); }
}

@media(max-width:1020px) {
  header.site.is-top .brand .logo { filter:none }
}

@media(max-width:1020px) {
  header.site.is-top nav.main a.on::after { background:var(--jade-400) }
}






































@media(max-width:1020px) {
  header.site .wrap { height:auto;padding-top:var(--s-3);padding-bottom:var(--s-3);flex-wrap:wrap }
}

@media(max-width:1020px) {
  .brand .logo { height:38px }
}

@media(max-width:1020px) {
  nav.main { width:100%;justify-content:flex-start;gap:2px;margin-top:var(--s-2) }
}

@media(max-width:1020px) {
  nav.main a { padding:var(--s-2) var(--s-3);font-size:var(--fs-sm) }
}

@media(max-width:1020px) {
  nav.main a.cta { margin-left:0 }
}

@media(max-width:1020px) {
  .nav-panel { display:none }
}

@media(max-width:1020px) {
  .chev { display:none }
}


@media(max-width:760px) {
  nav.main a { font-size:var(--fs-xs) }
}