/* ==========================================================================
   帆星网络科技 品牌官网 · style.css
   Design System 依据《官网 UI/UX 改版设计方案》
   架构：tokens → base → utilities → header → hero → sections → skins → footer → motion → responsive
   ========================================================================== */

/* ==========================================================================
   Typography System · 2026-09
   中文标题 HarmonyOS Sans SC / 英文数字 Inter / 中文正文 Noto Sans SC / 数据 Geist Mono
   全部本地托管（子集化 woff2），字体栈四层分离，杜绝单字体通铺
   ========================================================================== */

/* ---------- HarmonyOS Sans SC · 中文标题（700 主力 / 500 辅助） ---------- */
@font-face{
  font-family:'HarmonyOS Sans SC';
  src:url('../fonts/HarmonyOS_Sans_SC_Bold.woff2') format('woff2');
  font-weight:600 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'HarmonyOS Sans SC';
  src:url('../fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');
  font-weight:400 550; font-style:normal; font-display:swap;
}

/* ---------- Noto Sans SC · 中文正文（400 / 500） ---------- */
@font-face{
  font-family:'Noto Sans SC';
  src:url('../fonts/NotoSansSC_Regular.woff2') format('woff2');
  font-weight:100 450; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Noto Sans SC';
  src:url('../fonts/NotoSansSC_Medium.woff2') format('woff2');
  font-weight:450 599; font-style:normal; font-display:swap;
}

/* ---------- Inter · 英文与数字（latin 子集 5 字重） ---------- */
@font-face{ font-family:'Inter'; src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/inter-latin-800-normal.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ---------- Geist Mono · 数据 / 编号 / 技术标签 ---------- */
@font-face { font-family:'Geist Mono'; src:url('../fonts/GeistMono-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }

/* ---------- Tokens ---------- */
/* 默认 = 亮色主题；data-theme="dark" = 暗夜模式 */
:root{
  /* 色彩（亮色） */
  --bg:#F5F8FE;
  --bg2:#FFFFFF;
  --bg3:#E9EFFA;
  --ink:#131B2E;
  --muted:#4E5A75;
  --faint:#8A94AC;
  --rule:rgba(19,27,46,.1);
  --rule-strong:rgba(19,27,46,.22);
  --accent:#3D63F5;
  --accent2:#7C4DE8;
  --accent3:#F0731F;
  --warm:#E8960F;
  --grad:linear-gradient(120deg,#3D63F5,#7C4DE8 55%,#9B6BF0);
  --grad-warm:linear-gradient(120deg,#FF8A3D,#F5A623);

  /* 主题相关细节色 */
  --header-bg:rgba(255,255,255,.82);
  --nav-mobile-bg:rgba(248,250,255,.97);
  --footer-bg:#F1F5FC;
  --about-end:#E7EEFA;
  --cta-bg:
    radial-gradient(760px 380px at 50% -18%, rgba(124,77,232,.12), transparent 62%),
    radial-gradient(560px 300px at 88% 112%, rgba(240,115,31,.07), transparent 60%),
    linear-gradient(165deg,#FFFFFF 0%,#F3F6FF 58%,#E9F0FF 100%);
  --cta-border:rgba(61,99,245,.2);
  --big-num:rgba(19,27,46,.13);
  --big-num-hover:rgba(61,99,245,.45);
  --grid-line:rgba(19,27,46,.05);
  --orbit-line:rgba(19,27,46,.1);
  --pad-line:rgba(19,27,46,.22);
  --pad-key:#E6ECF7;
  --pad-key2:#C9D4E8;
  --df1:rgba(61,99,245,.5);
  --df2:rgba(124,77,232,.4);
  --hero-sky:linear-gradient(180deg,#EFF4FF 0%,#F7FAFF 55%,#F5F8FE 100%);
  --glow-a:rgba(124,77,232,.32);
  --glow-b:rgba(61,99,245,.28);
  --glow-op:.5;
  --star-near:rgba(30,45,90,.4);
  --star-far:rgba(30,45,90,.28);
  --tag-bg:rgba(61,99,245,.06);
  --tag-ink:#3A4A70;
  --visual-bg:linear-gradient(160deg,#EEF3FF,#E2EAFB);
  --visual-ink:#3A4A70;

  /* 字体栈（四层分离：标题 / 正文 / 英数 / 等宽数据） */
  --font-display:'HarmonyOS Sans SC','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-latin:'Inter','HarmonyOS Sans SC','Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
  /* 兼容旧引用 */
  --sans:var(--font-body);
  --latin:var(--font-latin);
  --mono:var(--font-mono);

  /* ---------- Typography Scale（10 级 · PC 基准，clamp 流式 + 断点覆盖） ---------- */
  /* Display：页面级大标题（Hero / CTA），负字间距，HarmonyOS 700 */
  --fs-display-xl:clamp(38px,4.6vw + 18px,74px);
  --fs-display-l:clamp(30px,3.4vw + 12px,52px);
  --fs-display-m:clamp(26px,2.2vw + 12px,40px);
  /* Heading：区块与卡片标题，HarmonyOS 700 */
  --fs-heading-xl:clamp(24px,1.6vw + 10px,34px);
  --fs-heading-l:clamp(21px,1vw + 10px,27px);
  --fs-heading-m:clamp(16.5px,.4vw + 10px,19px);
  /* Body：正文，Noto Sans SC 400/500，舒适行高 */
  --fs-body-l:clamp(15px,.4vw + 9.6px,16.5px);
  --fs-body-m:15px;
  --fs-body-s:13px;
  /* Caption：注释 / 标签 / 版权 */
  --fs-caption:11.5px;

  /* 行高（中文正文放宽，标题收紧） */
  --lh-display:1.14;
  --lh-heading:1.34;
  --lh-body:1.85;

  /* 字间距（大标题收紧为负值，正文微放宽） */
  --ls-display:-.012em;
  --ls-heading:0;
  --ls-body:.012em;

  /* 圆角 */
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:24px; --r-full:999px;

  /* 阴影（亮色） */
  --sh-1:0 2px 10px rgba(19,27,46,.07);
  --sh-2:0 10px 32px rgba(19,27,46,.09);
  --sh-3:0 24px 64px rgba(19,27,46,.13);
  --glow:0 0 0 1px rgba(61,99,245,.16), 0 12px 40px rgba(61,99,245,.14);

  /* 动效 */
  --ease:cubic-bezier(.16,1,.3,1);
  --fast:.2s; --mid:.3s; --slow:.7s;

  /* 布局 */
  --maxw:1160px;
  --header-h:68px;
  --pad:6vw;
}

/* ---------- 暗夜模式覆盖 ---------- */
[data-theme="dark"]{
  --bg:#070B14;
  --bg2:#0D1424;
  --bg3:#121B31;
  --ink:#EDF1FA;
  --muted:#96A2BB;
  --faint:#5F6B85;
  --rule:rgba(150,162,187,.16);
  --rule-strong:rgba(150,162,187,.32);
  --accent:#5B7CFF;
  --accent2:#8B5CF6;
  --accent3:#FF8A3D;
  --warm:#F5A623;
  --grad:linear-gradient(120deg,#5B7CFF,#8B5CF6 55%,#A78BFA);

  --header-bg:rgba(7,11,20,.78);
  --nav-mobile-bg:rgba(7,11,20,.97);
  --footer-bg:#070B16;
  --about-end:#0A1122;
  --cta-bg:
    radial-gradient(760px 380px at 50% -18%, rgba(139,92,246,.28), transparent 62%),
    linear-gradient(180deg,#0F1936,#0A1226);
  --cta-border:rgba(91,124,255,.32);
  --big-num:rgba(150,162,187,.18);
  --big-num-hover:rgba(91,124,255,.4);
  --grid-line:rgba(150,162,187,.07);
  --orbit-line:rgba(150,162,187,.12);
  --df1:rgba(91,124,255,.4);
  --df2:rgba(139,92,246,.32);
  --hero-sky:none;
  --glow-a:rgba(139,92,246,.5);
  --glow-b:rgba(91,124,255,.45);
  --glow-op:.5;
  --star-near:rgba(237,241,250,.65);
  --star-far:rgba(237,241,250,.5);
  --tag-bg:rgba(255,255,255,.025);
  --tag-ink:#C6D2EC;
  --visual-bg:linear-gradient(160deg,#101A33,#0B1326);
  --visual-ink:#DCE5F8;

  --sh-1:0 2px 10px rgba(3,6,15,.35);
  --sh-2:0 10px 32px rgba(3,6,15,.45);
  --sh-3:0 24px 64px rgba(3,6,15,.55);
  --glow:0 0 0 1px rgba(91,124,255,.22), 0 12px 40px rgba(91,124,255,.18);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); -webkit-text-size-adjust:100% }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-body-m);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .35s ease, color .35s ease;
}
/* 全局标题：中文标题统一 HarmonyOS Sans 700 */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
}
b,strong{ font-weight:600 }
/* 英文与数字：数据位使用 Inter + 等宽数字对齐 */
.num{
  font-family:var(--font-latin);
  font-feature-settings:'tnum' 1,'lnum' 1;
  letter-spacing:-.01em;
}
.count,.cst b,.ad-proof b,.ph-score,.wc-no,.svc-num,.ac-idx{
  font-family:var(--font-latin);
  font-feature-settings:'tnum' 1,'lnum' 1;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:rgba(91,124,255,.35); color:#fff }

/* 细滚动条 */
::-webkit-scrollbar{ width:10px; height:8px }
::-webkit-scrollbar-track{ background:var(--bg3) }
::-webkit-scrollbar-thumb{ background:#B7C2DA; border-radius:8px }
::-webkit-scrollbar-thumb:hover{ background:#93A2C4 }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#23304F }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#31426E }

/* ---------- Utilities ---------- */
.container{ width:min(var(--maxw),100% - var(--pad)*2); margin-inline:auto }
.section{ padding:104px 0; position:relative }

.kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:.32em;
  color:var(--accent3);
  margin-bottom:14px;
}
.kicker.light{ color:#C25E0A }
[data-theme="dark"] .kicker.light{ color:rgba(245,166,35,.9) }
.kicker.warm{ color:#C25E0A }
.kicker.center{ text-align:center }

.sec-head{ max-width:640px; margin-bottom:56px }
.sec-head.center{ margin-inline:auto; text-align:center }
.sec-title{
  font-size:var(--fs-display-m);
  font-weight:700;
  line-height:var(--lh-heading);
  letter-spacing:-.006em;
}
.sec-title .grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.sec-lede{ color:var(--muted); margin-top:18px; font-size:var(--fs-body-l); line-height:var(--lh-body); max-width:56ch }

.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 26px;
  border-radius:var(--r-full);
  font-size:14px; font-weight:500; letter-spacing:.02em;
  border:1px solid transparent;
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease),
             background var(--mid) var(--ease), border-color var(--mid) var(--ease);
  will-change:transform;
}
.btn.lg{ height:52px; padding:0 32px; font-size:15px; font-weight:500 }
.btn-primary{
  background:var(--grad-warm);
  color:#241000;
  box-shadow:0 8px 26px rgba(255,138,61,.32);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(255,138,61,.42) }
.btn-ghost{ border-color:var(--rule-strong); color:var(--ink); background:rgba(255,255,255,.02) }
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(91,124,255,.6); box-shadow:var(--glow) }
.btn-ghost.light2{ border-color:rgba(23,69,107,.35); color:#17456B }
.btn-ghost.light2:hover{ border-color:#2E7CC4; box-shadow:0 8px 24px rgba(46,124,196,.25) }
[data-theme="dark"] .btn-ghost.light2{ border-color:rgba(233,244,255,.35); color:#EAF4FF }
[data-theme="dark"] .btn-ghost.light2:hover{ border-color:#9ECBEE; box-shadow:0 8px 24px rgba(20,60,110,.45) }
.btn-warm{ background:var(--warm); color:#241300; box-shadow:0 8px 26px rgba(245,166,35,.3) }
.btn-warm:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(245,166,35,.4) }
.btn:active{ transform:translateY(0) scale(.97) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* ---------- 顶部阅读进度 ---------- */
.progress{ position:fixed; inset:0 0 auto 0; height:2.5px; z-index:1200; pointer-events:none }
.progress i{
  display:block; height:100%; width:0;
  background:var(--grad);
  box-shadow:0 0 12px rgba(91,124,255,.7);
  transition:width .1s linear;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:background var(--mid) var(--ease), border-color var(--mid) var(--ease), backdrop-filter var(--mid);
}
.site-header.scrolled{
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-color:var(--rule);
}
.header-inner{
  width:min(var(--maxw),100% - var(--pad)*2);
  margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* 右侧按钮组：固定靠右，导航文字宽度变化时不再被挤动 */
.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0 }
.brand{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0 }
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:#fff;
  border:1px solid var(--rule);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.brand:hover .brand-mark{ transform:scale(1.06); box-shadow:var(--sh-2) }
.brand-mark img{ width:100%; height:100%; object-fit:contain; padding:3.5px; display:block }
.brand-name{
  font-family:var(--font-display);
  font-size:18px; font-weight:700; letter-spacing:.04em;
  display:flex; align-items:baseline; gap:8px;
}
.brand-name i{
  font-style:normal; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.28em; color:var(--faint);
}

.main-nav{ display:flex; align-items:center; gap:22px }
.main-nav a{
  position:relative;
  padding:8px 16px;
  white-space:nowrap;
  font-size:13.5px; font-weight:500; color:var(--muted);
  border-radius:var(--r-full);
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.main-nav a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  border-radius:2px; background:var(--grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.main-nav a:hover{ color:var(--ink) }
.main-nav a.active{ color:var(--ink) }
.main-nav a.active::after{ transform:scaleX(1) }
.nav-cta{
  margin-left:10px;
  border:1px solid rgba(240,115,31,.55)!important;
  color:var(--accent3)!important;
  padding:8px 20px!important;
  font-weight:600;
}
.nav-cta:hover{ background:rgba(255,138,61,.12)!important; box-shadow:0 0 20px rgba(255,138,61,.25)!important }
.nav-cta::after{ display:none }

.menu-toggle{ display:none; width:44px; height:44px; position:relative; z-index:1100 }
.menu-toggle span{
  position:absolute; left:11px; right:11px; height:2px; border-radius:2px;
  background:var(--ink);
  transition:transform var(--mid) var(--ease), top var(--mid) var(--ease);
}
.menu-toggle span:nth-child(1){ top:18px }
.menu-toggle span:nth-child(2){ top:26px }
.menu-toggle.open span:nth-child(1){ top:22px; transform:rotate(45deg) }
.menu-toggle.open span:nth-child(2){ top:22px; transform:rotate(-45deg) }

/* 主题切换按钮 */
.theme-toggle{
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--rule-strong);
  display:grid; place-items:center;
  color:var(--muted);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--glow) }
.theme-toggle svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.theme-toggle .ic-moon{ display:none }
[data-theme="dark"] .theme-toggle .ic-sun{ display:none }
[data-theme="dark"] .theme-toggle .ic-moon{ display:block }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 40px) 0 90px;
  overflow:hidden;
  isolation:isolate;
  background:var(--hero-sky);
}
.hero-stage{ position:absolute; inset:0; z-index:-1 }
.layer{ position:absolute; inset:0; will-change:transform }

/* 星野（双层视差星点） */
.starfield{ background-repeat:repeat }
.starfield.far{
  background-image:
    radial-gradient(1px 1px at 12% 22%, var(--star-far) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 12%, var(--star-far) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 64%, var(--df2) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 78%, var(--star-far) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 42%, var(--df1) 50%, transparent 51%);
  background-size:520px 520px;
  animation:drift 90s linear infinite reverse;
}
.starfield.near{
  background-image:
    radial-gradient(2px 2px at 22% 62%, var(--star-near) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 28%, var(--df1) 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 82%, var(--df2) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 88%, var(--star-near) 50%, transparent 51%);
  background-size:640px 640px;
  animation:drift 60s linear infinite;
  opacity:.9;
}
@keyframes drift{ to{ background-position:640px 320px, 320px 640px, 0 640px, 640px 0, 320px 320px } }

/* 网格底纹 */
.grid-texture{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, #000 30%, transparent 75%);
}

/* 光斑 */
.glow{ filter:blur(70px); opacity:var(--glow-op) }
.glow-a{ background:radial-gradient(circle at 70% 30%, var(--glow-a), transparent 60%); transform:translate(8%,-6%) }
.glow-b{ background:radial-gradient(circle at 22% 72%, var(--glow-b), transparent 62%); transform:translate(-6%,8%) }

/* 轨道节点 */
.orbit{ display:grid; place-items:center }
.orbit::before{
  content:""; position:absolute;
  width:min(46vw,560px); aspect-ratio:1;
  border:1px solid rgba(150,162,187,.12);
  border-radius:50%;
}
.orbit::after{
  content:""; position:absolute;
  width:min(30vw,360px); aspect-ratio:1;
  border:1px dashed rgba(150,162,187,.14);
  border-radius:50%;
  animation:spin 40s linear infinite;
}
.orbit i{
  position:absolute;
  width:min(40vw,500px); aspect-ratio:1;
  border-radius:50%;
  animation:spin 24s linear infinite;
}
.orbit i:nth-child(2){ animation-duration:38s; animation-direction:reverse; width:min(30vw,360px) }
.orbit i::before{
  content:""; position:absolute; top:4%; left:50%;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(91,124,255,.9);
}
.orbit i:nth-child(2)::before{ background:var(--accent2); box-shadow:0 0 12px rgba(139,92,246,.9) }
.orbit-l{ transform:translateX(-58%) }
.orbit-r{ transform:translateX(58%) }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* 数据流 */
.dataflow{ inset:auto 0 0 0; height:min(42vh,380px); opacity:.85 }
.df-line{
  fill:none; stroke:var(--df1); stroke-width:1.4;
  stroke-dasharray:6 14;
  animation:flow 5s linear infinite;
}
.df-line.df-2{ stroke:var(--df2); animation-duration:7s; animation-direction:reverse }
@keyframes flow{ to{ stroke-dashoffset:-100 } }
.df-nodes circle{ fill:#A78BFA; opacity:.85 }
.df-nodes circle:nth-child(2n){ fill:var(--accent) }
.df-nodes circle:nth-child(3n){ fill:var(--accent3) }
.dataflow .df-nodes circle{ animation:twinkle 3.2s ease-in-out infinite alternate }
@keyframes twinkle{ from{ opacity:.35 } to{ opacity:1 } }

/* Hero 内容 */
.hero-inner{ text-align:center; position:relative }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:.3em;
  color:#FFB37E;
  border:1px solid rgba(255,138,61,.4);
  border-radius:var(--r-full);
  padding:7px 18px;
  background:rgba(255,138,61,.06);
  animation:rise .8s var(--ease) both .05s;
}
.hero-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent3);
  box-shadow:0 0 10px var(--accent3);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.35 } }

.hero-title{
  margin-top:30px;
  font-family:var(--font-display);
  font-size:var(--fs-display-xl);
  font-weight:700;
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
}
.hero-title .line{ display:block }
.hero-title .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 30px rgba(139,92,246,.35)); }
.hero-title .line:nth-child(1){ animation:rise .9s var(--ease) both .18s }
.hero-title .line.grad{ animation:rise .9s var(--ease) both .32s }

.hero-sub{
  margin-top:26px;
  font-size:var(--fs-body-l);
  font-weight:400;
  color:var(--muted);
  letter-spacing:.34em;
  text-indent:.34em;
  animation:rise .9s var(--ease) both .5s;
}
.hero-cta{
  margin-top:40px;
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  animation:rise .9s var(--ease) both .66s;
}
.hero-trust{
  margin-top:44px;
  font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:.22em;
  color:var(--faint);
  animation:rise .9s var(--ease) both .82s;
}
@keyframes rise{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.4em; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-hint i{
  width:1px; height:44px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:hint 2s var(--ease) infinite;
}
@keyframes hint{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ---------- About（浅色主题精修版） ---------- */
.about{
  background:linear-gradient(180deg,var(--bg) 0%,var(--about-end) 100%);
  overflow:hidden;
}
.about .container{ position:relative; z-index:1 }

/* 低透明度几何 / 粒子氛围装饰（不遮挡阅读，边角虚化） */
.about-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.about-deco i{ position:absolute; display:block; pointer-events:none }
.ad-ring{
  width:360px; height:360px; top:-140px; right:-100px;
  border:1.5px dashed rgba(124,77,232,.18); border-radius:50%;
  animation:adFloat 18s ease-in-out infinite alternate;
}
.ad-ring.r2{
  width:200px; height:200px; top:auto; right:auto; bottom:-60px; left:-80px;
  border-color:rgba(61,99,245,.15);
  animation-duration:22s; animation-delay:-8s;
}
.ad-grid{
  width:190px; height:150px; top:34%; right:4.5%;
  background:
    linear-gradient(rgba(61,99,245,.1) 1px, transparent 1px) 0 0/100% 30px,
    linear-gradient(90deg, rgba(61,99,245,.1) 1px, transparent 1px) 0 0/30px 100%;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 100%);
  mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 100%);
  opacity:.8;
}
.ad-dot{ width:8px; height:8px; border-radius:50%; background:rgba(61,99,245,.22) }
.ad-dot.d1{ top:20%; left:7% }
.ad-dot.d2{ top:16%; right:16%; width:10px; height:10px; background:rgba(240,115,31,.24) }
.ad-dot.d3{ top:58%; left:12%; width:6px; height:6px; background:rgba(124,77,232,.24) }
.ad-dot.d4{ top:78%; right:9%; width:7px; height:7px; background:rgba(61,99,245,.18) }
@keyframes adFloat{ to{ transform:translateY(26px) rotate(10deg) } }

/* 头部文字区：kicker 精致化 + 双行大小标题 + 分割线 + 正文 */
.about-head{ max-width:720px; margin:0 auto 68px; text-align:center }
.about-kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:.42em; text-indent:.42em;
  color:var(--accent2);
  margin-bottom:20px;
}
.about-title{
  font-family:var(--font-display);
  font-size:clamp(32px,2.6vw + 13px,46px);
  font-weight:800; line-height:1.16; letter-spacing:-.014em;
  color:var(--ink);
}
.about-title .at-pre{ display:block; font-size:.58em; font-weight:700; letter-spacing:.05em; margin-bottom:8px }
.about-title .at-key{ display:block; font-size:1.16em }
.about-divider{ display:flex; align-items:center; justify-content:center; gap:9px; margin:26px auto 20px }
.about-divider i{
  width:52px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent2));
  opacity:.45;
}
.about-divider i:last-child{ transform:scaleX(-1) }
.about-divider b{ width:5px; height:5px; border-radius:50%; background:var(--accent2); opacity:.55 }
.about-head .sec-lede{
  max-width:64ch; margin:0 auto;
  color:var(--muted);
  line-height:2;
}
.about{ /* 区块上下加大留白 */
  padding-top:118px; padding-bottom:118px;
}

/* 4 卡片：极淡渐变底 + 柔和投影 + hover 悬浮 */
.about-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.about-card{
  --ac:#3D63F5; --ac-soft:rgba(61,99,245,.085); --ac-soft2:rgba(61,99,245,.16);
  --ac-line:rgba(61,99,245,.34); --ac-ink:#2E4FCB; --ac-glow:rgba(61,99,245,.2);
  position:relative; overflow:hidden;
  background:
    radial-gradient(130% 95% at 88% -10%, var(--ac-soft2), transparent 55%),
    linear-gradient(168deg, var(--ac-soft), transparent 48%),
    var(--bg2);
  border:1px solid var(--rule);
  border-radius:22px;
  padding:34px 28px 32px;
  box-shadow:0 1px 2px rgba(19,27,46,.04), 0 12px 30px rgba(19,27,46,.06);
  transition:transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.about-card::before{
  content:""; position:absolute; top:0; left:28px; width:56%; height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, var(--ac), transparent);
  opacity:.7;
}
.about-card:hover{
  transform:translateY(-7px);
  border-color:var(--ac-line);
  box-shadow:0 4px 10px rgba(19,27,46,.05), 0 24px 52px var(--ac-glow);
}
/* 四卡低饱和色彩倾向：产品浅蓝 / 技术浅紫 / 商业化浅橙 / 数据浅米黄 */
.ac-blue{ --ac:#3D63F5; --ac-soft:rgba(61,99,245,.085); --ac-soft2:rgba(61,99,245,.16); --ac-line:rgba(61,99,245,.34); --ac-ink:#2E4FCB; --ac-glow:rgba(61,99,245,.2) }
.ac-purple{ --ac:#7C4DE8; --ac-soft:rgba(124,77,232,.085); --ac-soft2:rgba(124,77,232,.17); --ac-line:rgba(124,77,232,.33); --ac-ink:#6438C9; --ac-glow:rgba(124,77,232,.19) }
.ac-orange{ --ac:#F0731F; --ac-soft:rgba(240,115,31,.085); --ac-soft2:rgba(240,115,31,.16); --ac-line:rgba(240,115,31,.32); --ac-ink:#D25A0B; --ac-glow:rgba(240,115,31,.17) }
.ac-amber{ --ac:#D99A12; --ac-soft:rgba(217,154,18,.09); --ac-soft2:rgba(217,154,18,.17); --ac-line:rgba(217,154,18,.32); --ac-ink:#A97808; --ac-glow:rgba(217,154,18,.17) }

/* 图标：轻质感 stroke SVG + 主题色淡底衬 */
.ac-idx{
  display:grid; place-items:center;
  width:48px; height:48px; margin-bottom:20px;
  border-radius:15px;
  color:var(--ac-ink);
  background:
    radial-gradient(130% 130% at 28% 18%, var(--ac-soft2), transparent 72%),
    var(--ac-soft);
  border:1px solid var(--ac-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform var(--mid) var(--ease);
}
.ac-idx svg{ width:23px; height:23px; display:block }
.about-card:hover .ac-idx{ transform:translateY(-3px) scale(1.05) }

/* 卡内排版：标题放大加粗，与描述拉开层级 */
.about-card h3{
  font-family:var(--font-display);
  font-size:19px; font-weight:700; letter-spacing:.01em;
  margin-bottom:10px;
}
.about-card p{ font-size:var(--fs-body-s); color:var(--muted); line-height:1.95 }

/* 暗色主题下卡片与装饰的柔和适配 */
[data-theme="dark"] .about-card{
  background:
    radial-gradient(130% 95% at 88% -10%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(168deg, rgba(255,255,255,.03), transparent 48%),
    var(--bg2);
  box-shadow:0 1px 2px rgba(3,6,15,.3), 0 12px 30px rgba(3,6,15,.35);
}
[data-theme="dark"] .about-card:hover{
  box-shadow:0 4px 10px rgba(3,6,15,.3), 0 24px 52px rgba(3,6,15,.5), 0 0 26px var(--ac-glow);
}
[data-theme="dark"] .ac-blue{ --ac-ink:#A9BEFF }
[data-theme="dark"] .ac-purple{ --ac-ink:#C9B2FF }
[data-theme="dark"] .ac-orange{ --ac-ink:#FFB584 }
[data-theme="dark"] .ac-amber{ --ac-ink:#F2CB75 }
[data-theme="dark"] .ac-idx{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08) }
[data-theme="dark"] .ad-ring{ border-color:rgba(139,92,246,.2) }
[data-theme="dark"] .ad-ring.r2{ border-color:rgba(91,124,255,.16) }
[data-theme="dark"] .ad-grid{ background:
    linear-gradient(rgba(150,162,187,.12) 1px, transparent 1px) 0 0/100% 30px,
    linear-gradient(90deg, rgba(150,162,187,.12) 1px, transparent 1px) 0 0/30px 100%; }
[data-theme="dark"] .ad-dot{ background:rgba(150,162,187,.28) }
[data-theme="dark"] .ad-dot.d2{ background:rgba(255,138,61,.3) }
[data-theme="dark"] .about-divider i{ opacity:.35 }
[data-theme="dark"] .about-divider b{ opacity:.4 }

/* ---------- Services ---------- */
.service{
  position:relative;
  display:grid; grid-template-columns:5fr 6fr; gap:64px; align-items:center;
  padding:72px 0;
}
.service + .service{ border-top:1px solid var(--rule) }
.svc-flip .svc-visual{ order:2 }

.svc-body{ position:relative }
.svc-num{
  position:absolute; top:-58px; left:-14px; z-index:0;
  font-family:var(--font-latin); font-size:clamp(88px,10vw,132px); font-weight:800; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--big-num);
  user-select:none; pointer-events:none;
  transition:-webkit-text-stroke-color var(--mid) var(--ease);
}
.service:hover .svc-num{ -webkit-text-stroke-color:var(--big-num-hover) }
.svc-body > *{ position:relative }
.svc-en{ font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:.34em; color:var(--faint) }
.svc-cn{ font-family:var(--font-display); font-size:var(--fs-heading-xl); font-weight:700; margin:10px 0 14px; letter-spacing:-.006em }
.svc-desc{ color:var(--muted); font-size:var(--fs-body-l); line-height:var(--lh-body); max-width:46ch }
.svc-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px }
.svc-tags li{
  font-size:var(--fs-caption); font-weight:500; color:var(--tag-ink);
  padding:6px 15px; border-radius:var(--r-full);
  border:1px solid var(--rule);
  background:var(--tag-bg);
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.svc-tags li:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
.svc-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:30px;
  font-size:14px; font-weight:600; color:var(--accent);
}
.svc-link i{ font-style:normal; transition:transform var(--mid) var(--ease) }
.svc-link:hover i{ transform:translateX(6px) }

.svc-visual{
  min-height:340px;
  border:1px solid var(--rule);
  border-radius:var(--r-xl);
  background:var(--visual-bg);
  display:grid; place-items:center;
  overflow:hidden; position:relative;
  box-shadow:var(--sh-1);
  transition:border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.service:hover .svc-visual{ border-color:var(--accent); box-shadow:var(--glow); transform:translateY(-4px) }

/* 01 投流漏斗 */
.sv-traffic{ width:min(78%,380px); display:grid; gap:26px; justify-items:center }
.funnel{ display:grid; gap:8px; width:100% }
.f-step{
  height:46px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:var(--w); margin-inline:auto;
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; color:#22334E;
  background:linear-gradient(120deg,rgba(61,99,245,.09),rgba(124,77,232,.09));
  border:1px solid rgba(61,99,245,.3);
  border-radius:10px;
  transform:translateX(var(--fx,0));
  opacity:1;
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
  transition-delay:calc(var(--i,0)*70ms);
}
.f-step:nth-child(2){ --i:1 } .f-step:nth-child(3){ --i:2 } .f-step:nth-child(4){ --i:3 }
.f-step.f-hot{
  background:linear-gradient(120deg,rgba(255,138,61,.16),rgba(245,166,35,.18));
  border-color:rgba(240,115,31,.45); color:#753C00;
}
.service:hover .f-step{ opacity:1; transform:translateX(6px) }
.sv-pulse{ width:100%; height:52px }
.sv-pulse path{
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-dasharray:8 6;
  animation:flow 4s linear infinite;
}

/* 暗夜模式 · 三个业务面板恢复深色形态 */
[data-theme="dark"] .f-step{
  color:#DCE5F8;
  background:linear-gradient(120deg,rgba(91,124,255,.32),rgba(139,92,246,.32));
  border-color:rgba(91,124,255,.4);
}
[data-theme="dark"] .f-step.f-hot{
  background:linear-gradient(120deg,rgba(255,138,61,.4),rgba(245,166,35,.4));
  border-color:rgba(255,138,61,.55); color:#FFE9C4;
}

/* 02 快应用 */
.sv-quickapp{ position:relative; width:100%; height:100%; display:grid; place-items:center; min-height:340px }
.qa-phone{
  position:relative; z-index:1;
  width:158px; height:300px;
  border:2px solid rgba(61,99,245,.35);
  border-radius:28px;
  background:linear-gradient(180deg,#FFFFFF,#E9F0FE);
  box-shadow:0 24px 60px rgba(19,27,46,.14), inset 0 0 24px rgba(61,99,245,.05);
  padding:20px 16px;
  display:flex; flex-direction:column; gap:12px;
}
.qa-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:56px; height:8px; border-radius:99px; background:#C9D6EE }
.qa-line{ height:9px; border-radius:5px; background:rgba(61,99,245,.16) }
.qa-line.w60{ width:60%; margin-top:22px }
.qa-line.w90{ width:90% } .qa-line.w75{ width:75% }
.qa-chip{ height:30px; border-radius:9px; background:rgba(61,99,245,.12); border:1px solid rgba(61,99,245,.35) }
.qa-chip.c2{ background:rgba(245,166,35,.16); border-color:rgba(245,166,35,.45) }
.qa-orbit{ position:absolute; inset:0; display:grid; place-items:center }
.qa-orbit::before{
  content:""; width:300px; aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(150,162,187,.2);
}
.qa-orbit i{ position:absolute; width:300px; aspect-ratio:1; border-radius:50%; animation:spin 20s linear infinite }
.qa-orbit i:nth-child(2){ width:220px; animation-duration:14s; animation-direction:reverse }
.qa-orbit i:nth-child(3){ width:380px; animation-duration:30s }
.qa-orbit i::before{
  content:""; position:absolute; top:6%; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent2); box-shadow:0 0 10px rgba(139,92,246,.9);
}
.qa-orbit i:nth-child(1)::before{ background:var(--accent); box-shadow:0 0 10px rgba(91,124,255,.9) }
.qa-orbit i:nth-child(3)::before{ background:var(--accent3); box-shadow:0 0 10px rgba(255,138,61,.9) }

[data-theme="dark"] .qa-phone{
  border-color:rgba(91,124,255,.5);
  background:linear-gradient(180deg,#0F1D3D,#0A1428);
  box-shadow:0 24px 60px rgba(3,10,30,.6), inset 0 0 24px rgba(91,124,255,.08);
}
[data-theme="dark"] .qa-notch{ background:#060D1C }
[data-theme="dark"] .qa-line{ background:rgba(255,255,255,.1) }
[data-theme="dark"] .qa-chip{ background:rgba(91,124,255,.28); border-color:rgba(91,124,255,.5) }
[data-theme="dark"] .qa-chip.c2{ background:rgba(245,166,35,.24); border-color:rgba(245,166,35,.5) }

/* 03 小游戏开发 · 经典黄色游戏手柄（厚描边卡通风：顶部插线 + 绿十字键 + 菱形四色键） */
.sv-game{ width:min(76%,320px) }
.pad{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 18px 30px rgba(61,99,245,.16));
  animation:padFloat 4.5s var(--ease) infinite;
  transition:filter var(--mid) var(--ease);
}
.service:hover .pad{ filter:drop-shadow(0 24px 40px rgba(61,99,245,.32)) }
.pad-cable{ fill:#222738 }
.pad-body{ fill:#FFCB3C; stroke:#222738; stroke-width:7; stroke-linejoin:round }
.pad-dpad{ fill:#43BC5E; stroke:#222738; stroke-width:6.5; stroke-linejoin:round }
.pad-key{ stroke:#222738; stroke-width:6 }
.key-a{ fill:#E8503A }
.key-b{ fill:#4D9DE0 }
.key-c{ fill:#3DBE5B }
.key-d{ fill:#F2764E }
.pad-key-ring{ fill:none; stroke:#FFF7EA; stroke-width:4.5 }
@keyframes padFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

/* ---------- Projects ---------- */
.projects{ background:linear-gradient(180deg,var(--bg),var(--about-end) 55%,var(--bg)) }

/* 代表作 logo 墙（单行均分展示 · 移动端自动换行） */
.logo-wall{
  display:flex; align-items:stretch; justify-content:center;
  gap:10px; flex-wrap:nowrap;
  width:min(var(--maxw),100% - var(--pad)*2);
  margin:6px auto 0;
}
.logo-card{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 8px;
  background:var(--bg2);
  border:1px solid var(--rule);
  border-radius:var(--r-full);
  transition:transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.logo-card:hover{ transform:translateY(-4px); border-color:rgba(91,124,255,.45); box-shadow:var(--sh-2) }
.logo-card img{ width:34px; height:34px; border-radius:10px; object-fit:cover; flex:none }
.logo-card b{ display:block; font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--ink); line-height:1.3; white-space:nowrap }
.logo-more{
  display:block; text-align:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  color:var(--faint); padding:14px 4px 0;
}
@media (max-width:880px){
  .logo-wall{ flex-wrap:wrap; gap:8px }
  .logo-card{ flex:0 1 auto; padding:8px 14px; gap:8px }
}

/* ---------- 案例通用 ---------- */
.case{ position:relative; padding:100px 0 }
.case-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center }
.case-title{ font-family:var(--font-display); font-size:var(--fs-display-m); font-weight:700; line-height:1.28; letter-spacing:-.006em }
.case-role{
  display:block; margin-top:10px;
  font-size:var(--fs-caption); font-weight:500; letter-spacing:.14em;
  font-family:var(--font-mono);
}
.case-quote{ font-family:var(--font-display); font-size:var(--fs-heading-m); font-weight:500; margin-top:18px; line-height:1.6 }
.case-desc{ margin-top:16px; font-size:var(--fs-body-m); line-height:1.9 }
.case-value{
  margin-top:64px; padding:20px 26px;
  border-left:3px solid var(--warm);
  background:rgba(245,166,35,.07);
  border-radius:0 var(--r-m) var(--r-m) 0;
  font-size:var(--fs-body-m); line-height:1.9;
}
.cp-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:.14em;
  padding:8px 16px; border-radius:var(--r-full);
  border:1px solid rgba(61,99,245,.35); color:#4A669F;
}
[data-theme="dark"] .cp-chip{ border-color:rgba(150,180,255,.4); color:#C9D8F6 }
.cp-chip.soon{ opacity:.55 }

/* 案例 01 · 星玩伴（浅色：晨蓝晴空 / 暗色：深蓝夜空） */
.skin-xwb{
  color:var(--ink);
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(124,77,232,.08), transparent 62%),
    linear-gradient(180deg,#EAF1FF 0%,#DEE9FF 46%,#E7EFFF 100%);
  border-block:1px solid var(--rule);
}
[data-theme="dark"] .skin-xwb{
  color:#E8F0FF;
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(91,124,255,.18), transparent 62%),
    linear-gradient(180deg,#0D2A54 0%,#16386B 46%,#0E2C58 100%);
  border-block:1px solid rgba(120,160,255,.18);
}
.skin-xwb .case-role{ color:#5E7BC5 }
.skin-xwb .case-quote{ color:#9A6B00 }
.skin-xwb .case-desc{ color:var(--muted) }
[data-theme="dark"] .skin-xwb .case-role{ color:#9FBCE8 }
[data-theme="dark"] .skin-xwb .case-quote{ color:#FFD98F }
[data-theme="dark"] .skin-xwb .case-desc{ color:#B9CCE8 }
.case-feats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin-top:26px }
.case-feats li b{ display:block; font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--ink) }
.case-feats li span{ font-size:var(--fs-caption); color:var(--muted); line-height:1.75 }
[data-theme="dark"] .case-feats li b{ color:#FFE9C4 }
[data-theme="dark"] .case-feats li span{ color:#9FB6DC }
.case-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:30px }
.cst{
  padding:16px 12px; text-align:center;
  border:1px solid var(--rule);
  background:rgba(255,255,255,.62);
  border-radius:var(--r-m);
}
[data-theme="dark"] .cst{
  border-color:rgba(160,190,255,.2);
  background:rgba(255,255,255,.04);
}
.cst b{
  display:block; font-family:var(--font-latin); font-size:28px; font-weight:800; color:#C77700;
  line-height:1.15; letter-spacing:-.015em;
  font-feature-settings:'tnum' 1,'lnum' 1;
}
[data-theme="dark"] .cst b{ color:#F5A623 }
.cst i{ display:block; font-style:normal; font-size:var(--fs-caption); color:var(--muted); margin-top:4px }
[data-theme="dark"] .cst i{ color:#9FB6DC }
.case-src{ margin-top:12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--faint) }
[data-theme="dark"] .case-src{ color:rgba(159,182,220,.6) }
.case-platform{ display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap }

.phone{
  position:relative; width:min(280px,72vw); margin-inline:auto;
  border-radius:42px; padding:13px;
  background:#F6F9FF;
  border:1px solid rgba(61,99,245,.3);
  box-shadow:0 40px 80px rgba(19,27,46,.16), 0 0 0 7px rgba(255,255,255,.7), 0 0 60px rgba(91,124,255,.14);
  animation:floaty 6.5s ease-in-out infinite;
}
[data-theme="dark"] .phone{
  background:#0A1E40;
  border-color:rgba(130,170,255,.4);
  box-shadow:0 40px 90px rgba(3,12,34,.7), 0 0 0 7px rgba(8,18,40,.9), 0 0 60px rgba(91,124,255,.18);
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.ph-notch{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:86px; height:20px; border-radius:99px; background:#D6E2F5; z-index:2;
}
[data-theme="dark"] .ph-notch{ background:#061226 }
.ph-screen{
  border-radius:32px; overflow:hidden;
  background:linear-gradient(180deg,#133062 0%,#0C2348 100%);
  padding:52px 16px 18px;
  display:flex; flex-direction:column; gap:12px;
  min-height:470px;
}
.ph-head{ display:flex; justify-content:space-between; align-items:center }
.ph-logo{ font-size:12.5px; font-weight:700; color:#FFD98F }
.ph-score{ font-family:var(--font-latin); font-size:19px; font-weight:800; color:#F5A623; letter-spacing:-.01em }
.ph-score small{ font-size:10px; font-weight:400; margin-left:2px; color:#C9A468 }
.ph-cats{ display:flex; gap:7px }
.ph-cats i{
  font-style:normal; font-size:11px; padding:4px 13px; border-radius:99px;
  background:rgba(255,255,255,.07); color:#AFC6EA;
}
.ph-cats i.on{ background:#F5A623; color:#241300; font-weight:700 }
.ph-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px; padding:16px 15px;
}
.ph-qno{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; color:#8FA9D6 }
.ph-q{ font-size:14px; font-weight:600; color:#fff; margin:8px 0 12px; line-height:1.6 }
.ph-opt{
  display:block; font-size:12px; color:#D7E3F7;
  padding:8px 13px; margin-top:7px;
  border-radius:11px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
.ph-opt.ok{
  border-color:rgba(245,166,35,.7);
  background:rgba(245,166,35,.16);
  color:#FFE1A0; font-weight:700;
  position:relative;
}
.ph-opt.ok::after{ content:"✓"; position:absolute; right:13px; color:#F5A623 }
.ph-bar{ margin-top:auto }
.ph-bar i{ display:block; height:8px; border-radius:99px; background:rgba(255,255,255,.12); position:relative; overflow:hidden }
.ph-bar i::before{
  content:""; position:absolute; inset:0 auto 0 0; width:62%;
  border-radius:99px; background:var(--grad-warm);
}
.ph-bar em{ display:block; font-style:normal; font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; color:#8FA9D6; margin-top:7px }

/* 案例 02 · 萌宠消消乐（浅色：糖果晴天 / 暗色：静谧夜园） */
.skin-mc{
  color:#17456B;
  background:linear-gradient(180deg,#C4ECFF 0%,#8ED1FF 52%,#9FE0F2 100%);
  border-block:1px solid rgba(255,255,255,.7);
  padding:84px 0 92px;
  overflow:hidden;
}
[data-theme="dark"] .skin-mc{
  color:#CBE2F5;
  background:linear-gradient(180deg,#0C1B36 0%,#0E2244 40%,#0D2038 78%,#0F2A2E 100%);
  border-block:1px solid rgba(140,180,255,.14);
}
/* 内容层级：文字容器置于装饰层之上，修复文字被背景遮挡 */
.skin-mc .container{ position:relative; z-index:2 }
.mc-sky{ position:absolute; inset:0 0 auto 0; height:100%; pointer-events:none; z-index:0 }
.cloud{
  position:absolute; width:130px; height:38px; border-radius:99px;
  background:rgba(255,255,255,.92);
  filter:blur(1px);
  box-shadow:38px -16px 0 6px rgba(255,255,255,.92), -34px -10px 0 2px rgba(255,255,255,.85);
  animation:cloudDrift 46s linear infinite;
}
.cloud.c1{ top:11%; left:7% }
.cloud.c2{ top:24%; right:9%; transform:scale(.75); animation-duration:60s; animation-direction:reverse }
.cloud.c3{ top:6%; left:44%; transform:scale(.6); animation-duration:38s }
@keyframes cloudDrift{ 0%{ translate:0 0 } 50%{ translate:44px 8px } 100%{ translate:0 0 } }
.mc-sun{
  position:absolute; top:7%; right:16%;
  width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFF3C8,#FFDD75 58%,#FFC53D);
  box-shadow:0 0 60px rgba(255,208,100,.85);
}
.mc-grid{ margin-bottom:20px }
.skin-mc .case-role{ color:#3E77A8 }
.skin-mc .case-desc{ color:#2E6390 }
.mc-points{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin-top:26px }
.mc-points li b{ display:block; font-family:var(--font-display); font-size:14px; font-weight:700; color:#123E66 }
.mc-points li span{ font-size:var(--fs-caption); color:#3B6B96; line-height:1.75 }
.mc-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px }
.mc-tags span{
  font-size:var(--fs-caption); font-weight:600; color:#fff;
  background:#FF9A3D; padding:7px 18px; border-radius:99px;
  box-shadow:0 6px 16px rgba(255,154,61,.42);
}
.mc-tags span.g2{ background:#5CB86C; box-shadow:0 6px 16px rgba(92,184,108,.42) }
.mc-tags span.g3{ background:#FFC53D; color:#6B4A00; box-shadow:0 6px 16px rgba(255,197,61,.45) }
.mc-shot{
  border:6px solid #fff; border-radius:24px;
  box-shadow:0 34px 70px rgba(23,69,107,.38);
  overflow:hidden;
  transform:rotate(-1.6deg);
  transition:transform .5s var(--ease);
}
.mc-shot:hover{ transform:rotate(0) scale(1.02) }
.mc-shot img{ width:100% }
.mc-logo-row{
  display:flex; align-items:center; gap:10px; margin-top:16px;
  justify-content:center;
}
.mc-logo-row img{
  width:44px; height:44px; border-radius:12px;
  border:2px solid #fff;
  box-shadow:0 8px 18px rgba(23,69,107,.28);
}
.mc-logo-row b{ display:block; font-family:var(--font-display); font-size:13.5px; font-weight:700; color:#123E66 }
.mc-logo-row span{ font-size:var(--fs-caption); color:#3B6B96 }
.mc-grass{
  position:absolute; left:0; right:0; bottom:0; height:30px;
  background:linear-gradient(180deg,#6FCF7C,#4FAF62);
}
.mc-grass::before{
  content:""; position:absolute; top:-9px; left:0; right:0; height:12px;
  background:radial-gradient(circle at 10px -2px, #6FCF7C 9px, transparent 10px);
  background-size:24px 12px; background-repeat:repeat-x;
}

/* ---------- Capabilities ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.cap{
  background:var(--bg2);
  border:1px solid var(--rule);
  border-radius:var(--r-l);
  padding:26px 24px;
  box-shadow:var(--sh-1);
  transition:transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.cap:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--glow) }
.cap svg{ width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--mid) var(--ease), transform var(--mid) var(--ease) }
.cap:hover svg{ stroke:var(--accent3); transform:translateY(-2px) scale(1.06) }
.cap b{ display:block; font-family:var(--font-display); font-size:var(--fs-heading-m); font-weight:700; margin:16px 0 4px }
.cap span{ font-size:var(--fs-caption); color:var(--muted); letter-spacing:.03em }
.cap-hl{
  background:linear-gradient(135deg,rgba(255,138,61,.1),rgba(139,92,246,.1));
  border-color:rgba(255,138,61,.4);
}
.cap-hl svg{ stroke:var(--accent3) }

/* ---------- Why ---------- */
.why{ background:linear-gradient(180deg,var(--bg),var(--bg3)) }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.why-card{
  position:relative;
  background:var(--bg2);
  border:1px solid var(--rule);
  border-radius:var(--r-xl);
  padding:30px 26px;
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
/* 科技感装饰：右上紫色光晕 + 网格纹理，向左下渐隐 */
.why-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(220px 160px at 100% 0%, rgba(124,77,232,.14), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:100% 100%, 28px 28px, 28px 28px;
  -webkit-mask-image:radial-gradient(320px 240px at 100% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(320px 240px at 100% 0%, #000 30%, transparent 78%);
}
.why-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.why-card:hover{ transform:translateY(-5px); border-color:var(--accent) }
.why-card:hover::after{ transform:scaleX(1) }
.wc-top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px }
.wc-ico{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(61,99,245,.14), rgba(124,77,232,.14));
  border:1px solid var(--rule);
}
.wc-ico svg{ display:block; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.wc-no{
  position:relative;
  font-family:var(--font-latin); font-size:15px; font-weight:800; letter-spacing:.1em;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.why-card h3{ position:relative; font-family:var(--font-display); font-size:var(--fs-heading-m); font-weight:700; margin:14px 0 10px }
.why-card p{ position:relative; font-size:var(--fs-body-s); color:var(--muted); line-height:1.8 }

/* ---------- CTA ---------- */
.cta-panel{
  position:relative; overflow:hidden;
  border:1px solid var(--cta-border);
  border-radius:28px;
  background:var(--cta-bg);
  text-align:center;
  padding:84px 30px 72px;
  box-shadow:0 18px 50px rgba(19,27,46,.07);
}
[data-theme="dark"] .cta-panel{ box-shadow:none }
.cta-glow{
  position:absolute; inset:-40%;
  background:
    radial-gradient(closest-side, rgba(91,124,255,.16), transparent 70%) 30% 40%/42% 42% no-repeat,
    radial-gradient(closest-side, rgba(255,138,61,.12), transparent 70%) 72% 62%/38% 38% no-repeat;
  animation:ctaGlow 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes ctaGlow{ to{ transform:rotate(8deg) scale(1.06) } }
.cta-panel > *{ position:relative }
.cta-title{ font-family:var(--font-display); font-size:var(--fs-display-l); font-weight:700; line-height:1.26; letter-spacing:-.008em }
.cta-sub{ color:var(--muted); margin-top:16px; font-size:var(--fs-body-l); line-height:var(--lh-body) }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px }
.cta-meta{
  display:flex; align-items:center; justify-content:center;
  gap:10px 28px; flex-wrap:wrap; margin-top:30px;
}
.cta-addr{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:.1em; color:var(--muted);
  transition:color var(--fast) var(--ease);
}
a.cta-addr:hover{ color:var(--accent) }
.cta-addr svg{ fill:none; stroke:currentColor; stroke-width:1.6 }

/* ---------- Footer ---------- */
.site-footer{ background:var(--footer-bg); border-top:1px solid var(--rule); padding-top:64px }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; gap:36px }
.f-brand p{ margin-top:16px; font-size:var(--fs-body-s); color:var(--muted); line-height:1.9 }
.f-col h4{
  position:relative;
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:15px; font-weight:700;
  letter-spacing:.12em; color:var(--ink); margin-bottom:16px;
}
.f-col h4::before{
  content:""; width:4px; height:15px; flex:none; border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.f-col a{ display:block; font-size:var(--fs-body-s); font-weight:400; color:var(--muted); padding:4.5px 0; transition:color var(--fast) var(--ease), transform var(--fast) var(--ease) }
.f-col a:hover{ color:var(--ink); transform:translateX(3px) }
.f-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:52px; padding:22px 0 26px;
  border-top:1px solid var(--rule);
  font-size:var(--fs-caption); color:var(--faint);
}
.f-bottom a{ color:var(--faint); transition:color var(--fast) }
.f-bottom a:hover{ color:var(--accent) }

/* ---------- 滚动显现 ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.no-js .reveal{ opacity:1; transform:none }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important }
  .reveal{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .service{ grid-template-columns:1fr 1fr; gap:36px }
  .case-grid{ gap:40px }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; }
}

@media (max-width:880px){
  .menu-toggle{ display:block }
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0; z-index:990;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--nav-mobile-bg);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--rule);
    padding:16px var(--pad) 26px;
    opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
    max-height:calc(100vh - var(--header-h)); overflow:auto;
  }
  .main-nav.open{ opacity:1; transform:none; pointer-events:auto }
  .main-nav a{ font-size:15.5px; padding:13px 6px }
  .main-nav a::after{ display:none }
  .main-nav a.active{ color:var(--accent3) }
  .nav-cta{ margin:12px 0 0; text-align:center; justify-content:center }
  body.no-scroll{ overflow:hidden }

  .section{ padding:76px 0 }
  .service{ grid-template-columns:1fr; gap:30px; padding:56px 0 }
  .svc-visual{ min-height:280px; order:-1 }
  .svc-flip .svc-visual{ order:-1 }
  .svc-num{ top:-46px }
  .case{ padding:76px 0 }
  .case-grid{ grid-template-columns:1fr; gap:44px }
  .case-visual{ max-width:420px; margin-inline:auto }
  .case-value{ margin-top:44px }
  .skin-mc .case-visual{ max-width:320px }
  .about-grid{ grid-template-columns:repeat(2,1fr); gap:16px }
  .about-head{ margin-bottom:48px }
  .about{ padding-top:88px; padding-bottom:88px }
  .cap-grid{ grid-template-columns:repeat(2,1fr) }
  .why-grid{ grid-template-columns:repeat(2,1fr) }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .f-brand{ grid-column:span 2 }
}

@media (max-width:520px){
  /* ---------- 手机字号方案：标题再降档、行高微松防裁切 ---------- */
  :root{
    --pad:5.5vw;
    --fs-display-xl:clamp(30px,10.4vw,40px);
    --fs-display-l:clamp(25px,8.6vw,31px);
    --fs-display-m:clamp(22px,7.2vw,26px);
    --fs-heading-xl:22px;
    --fs-heading-l:20px;
    --fs-heading-m:16.5px;
    --fs-body-m:14.5px;
    --fs-body-s:12.5px;
    --lh-display:1.22;
    --ls-display:-.008em;
  }
  .about-grid{ grid-template-columns:1fr; gap:14px }
  .about{ padding-top:76px; padding-bottom:76px }
  .about-head{ margin-bottom:40px }
  .about-kicker{ letter-spacing:.34em; text-indent:.34em; margin-bottom:16px }
  .about-card{ padding:26px 22px 24px; border-radius:18px }
  .about-card::before{ left:22px }
  .case-feats, .mc-points{ grid-template-columns:1fr }
  .case-stats{ grid-template-columns:repeat(2,1fr) }
  .cap-grid{ grid-template-columns:1fr }
  .cap{ display:grid; grid-template-columns:34px 1fr; gap:4px 16px; align-items:center }
  .cap svg{ grid-row:span 2 }
  .hero-sub{ letter-spacing:.2em; text-indent:.2em }
  .hero-cta{ flex-direction:column; align-items:stretch }
  .btn{ width:100% }
  .cta-actions{ flex-direction:column; align-items:stretch }
  .f-bottom{ justify-content:center; text-align:center }
}


/* ================= 追加组件 · 2026-09 改版增强 ================= */

/* ---------- 广告投流：核心盈利业务徽章 ---------- */
.svc-badge{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:14px;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  color:#8A3D00;
  background:linear-gradient(120deg,rgba(255,154,61,.18),rgba(245,166,35,.18));
  border:1px solid rgba(240,115,31,.4);
  padding:6px 15px; border-radius:var(--r-full);
}
.svc-badge i{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent3);
  box-shadow:0 0 8px var(--accent3);
  animation:pulse 2.2s ease-in-out infinite;
}

/* 月活证明条 */
.ad-proof{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-top:24px; padding:16px 20px;
  border-radius:var(--r-m);
  border:1px solid rgba(240,115,31,.35);
  background:linear-gradient(120deg,rgba(255,138,61,.08),rgba(245,166,35,.06));
}
.ad-proof b{
  font-family:var(--font-latin); font-size:28px; font-weight:800; line-height:1;
  letter-spacing:-.015em;
  font-feature-settings:'tnum' 1,'lnum' 1;
  background:var(--grad-warm);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ad-proof span{ font-size:var(--fs-caption); color:var(--muted); line-height:1.6 }

/* 广告形式芯片 */
.ad-formats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
.ad-formats li{
  font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:var(--r-full);
  color:#B85A00;
  background:rgba(255,154,61,.1);
  border:1px solid rgba(240,115,31,.35);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.ad-formats li:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(240,115,31,.25) }
[data-theme="dark"] .ad-formats li{ color:#FFC79B }

/* ---------- 合作伙伴墙（独立区块 · 页脚上方） ---------- */
.partners{ padding-bottom:88px }
.partners-head{ text-align:center; margin-bottom:26px }
.partners-head h3{ font-family:var(--font-display); font-size:var(--fs-heading-l); font-weight:700 }
.partners-head p{ font-size:var(--fs-body-s); color:var(--muted); margin-top:8px }
.partner-grid{
  max-width:1080px; margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.partner-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--r-l);
  min-height:104px;
  display:flex; align-items:center; justify-content:center;
  padding:24px 10px;
  box-shadow:var(--sh-1);
  transition:transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.partner-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2) }
.partner-card img{
  display:block;
  max-width:100%; max-height:38px;
  width:auto; height:auto;
  object-fit:contain;
  filter:saturate(.92);
  transition:filter var(--mid) var(--ease);
}
.partner-card:hover img{ filter:saturate(1.05) }
.partner-card img.lg{ max-height:46px }
[data-theme="dark"] .partner-card{
  background:#121B31;
  border-color:rgba(150,162,187,.28);
}
[data-theme="dark"] .partner-card img{ filter:saturate(1.05) brightness(1.12) drop-shadow(0 0 9px rgba(237,241,250,.38)) }
@media (max-width:560px){
  .partner-grid{ gap:12px }
  .partner-card{ min-height:76px; padding:18px 8px; border-radius:var(--r-m) }
  .partner-card img{ max-height:28px }
  .partner-card img.lg{ max-height:34px }
}

/* ---------- 萌宠消消乐 · 精修场景 ---------- */
.skin-mc{
  background:linear-gradient(180deg,#A5DBFF 0%,#8ED1FF 40%,#A8E3F5 78%,#BFEDD8 100%);
}
/* 太阳光晕 */
.mc-sun{
  width:96px; height:96px;
  background:radial-gradient(circle at 38% 34%,#FFF7D6,#FFE081 55%,#FFC53D);
  box-shadow:0 0 80px rgba(255,208,100,.95), 0 0 160px rgba(255,208,100,.5);
  animation:sunBreathe 7s ease-in-out infinite;
}
@keyframes sunBreathe{ 50%{ box-shadow:0 0 110px rgba(255,208,100,1), 0 0 200px rgba(255,208,100,.6) } }
/* 更蓬松的云 */
.cloud{ filter:none; opacity:.95 }
.cloud.c1{ width:150px; height:44px; box-shadow:44px -20px 0 8px rgba(255,255,255,.95), -40px -14px 0 4px rgba(255,255,255,.88) }
.cloud.c2{ width:120px; height:36px; box-shadow:36px -16px 0 6px rgba(255,255,255,.92), -30px -10px 0 3px rgba(255,255,255,.85) }
.cloud.c3{ width:96px; height:30px; box-shadow:28px -12px 0 5px rgba(255,255,255,.9), -24px -8px 0 2px rgba(255,255,255,.82) }
/* 漂浮的萌宠气泡 */
.mc-bubble{
  position:absolute; border-radius:50%;
  display:grid; place-items:center;
  animation:bubbleFloat 9s ease-in-out infinite;
  opacity:.9;
}
.mc-bubble.b1{ width:54px; height:54px; top:20%; left:10%; background:radial-gradient(circle at 32% 30%,#FFD3EC,#FF9FD0 70%); animation-delay:.4s }
.mc-bubble.b2{ width:40px; height:40px; top:34%; right:8%; background:radial-gradient(circle at 32% 30%,#C9F2CF,#7ED98B 70%); animation-delay:1.6s }
.mc-bubble.b3{ width:34px; height:34px; top:58%; left:5%; background:radial-gradient(circle at 32% 30%,#FFF0B8,#FFD654 70%); animation-delay:2.6s }
.mc-bubble::before{
  content:""; width:34%; height:26%;
  border-radius:50% 50% 46% 46%;
  background:rgba(255,255,255,.85);
  position:absolute; top:26%;
}
.mc-bubble::after{
  content:""; position:absolute; top:34%;
  width:44%; height:14%;
  background:
    radial-gradient(circle 2.6px at 20% 50%, #4A3222 98%, transparent),
    radial-gradient(circle 2.6px at 80% 50%, #4A3222 98%, transparent);
}
@keyframes bubbleFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
/* 底部起伏草地（SVG 曲线层 · 四层山丘含远山） */
.mc-hills{ position:absolute; left:0; right:0; bottom:0; height:160px; pointer-events:none; z-index:1 }
.mc-hills svg{ position:absolute; bottom:0; left:0; width:100%; height:100%; display:block }
.mc-grass{ display:none }
/* 实机演示设备框（缩小一半以上，降低页面占用） */
.mc-device{
  position:relative; width:min(268px,56vw); margin-inline:auto;
  border-radius:24px; padding:6px;
  background:#fff;
  box-shadow:0 18px 38px rgba(23,69,107,.3), 0 0 0 1px rgba(23,69,107,.08);
  transform:rotate(1.2deg);
  transition:transform .5s var(--ease);
}
.mc-device:hover{ transform:rotate(0) translateY(-3px) }
.mc-device img, .mc-device video{
  width:100%; height:324px; object-fit:cover; object-position:top center;
  border-radius:19px; display:block;
}
.mc-device-cap{
  margin-top:10px; text-align:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:#2F5E8C;
}

/* ---------- 萌宠场景 · 第三轮精修（彩虹 / 光束 / 星尘 / 山丘花草） ---------- */
/* 彩虹拱（radial 环带 · 右侧远景） */
.mc-rainbow{
  position:absolute; right:-7%; bottom:34%;
  width:min(560px,64vw); aspect-ratio:2/1;
  background:radial-gradient(circle at 50% 100%,
    transparent 0 57%,
    rgba(255,179,193,.55) 57% 63%,
    rgba(255,217,122,.6) 63% 69%,
    rgba(159,232,169,.55) 69% 75%,
    rgba(165,219,255,.6) 75% 81%,
    rgba(201,184,255,.5) 81% 87%,
    transparent 87%);
  filter:blur(1.5px);
  opacity:.7;
  pointer-events:none;
}
/* 太阳光束（右上斜射柔光） */
.mc-rays{
  position:absolute; top:0; right:4%;
  width:min(340px,44vw); height:64%;
  pointer-events:none; overflow:hidden; z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
}
.mc-rays i{
  position:absolute; top:-8%; bottom:-6%;
  background:linear-gradient(180deg, rgba(255,247,214,.55), rgba(255,247,214,0) 72%);
  filter:blur(7px);
  animation:rayShimmer 9s ease-in-out infinite;
}
.mc-rays i:nth-child(1){ left:0; width:34%; clip-path:polygon(30% 0, 78% 0, 100% 100%, 28% 100%) }
.mc-rays i:nth-child(2){ left:30%; width:40%; clip-path:polygon(34% 0, 72% 0, 100% 100%, 18% 100%); animation-delay:-3s; opacity:.75 }
.mc-rays i:nth-child(3){ left:62%; width:34%; clip-path:polygon(30% 0, 82% 0, 92% 100%, 10% 100%); animation-delay:-6s; opacity:.6 }
@keyframes rayShimmer{ 0%,100%{ opacity:.45 } 50%{ opacity:.8 } }
/* 飘落星星（四角星 · 缓落缓旋） */
.mc-star{
  position:absolute; top:-4%;
  width:14px; height:14px;
  background:#FFE081;
  clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter:drop-shadow(0 0 6px rgba(255,217,122,.9));
  animation:starFall linear infinite;
  pointer-events:none;
}
.mc-star.s1{ left:12%; width:15px; height:15px; animation-duration:13s }
.mc-star.s2{ left:26%; width:10px; height:10px; animation-duration:17s; animation-delay:-6s }
.mc-star.s3{ left:41%; width:12px; height:12px; animation-duration:15s; animation-delay:-3s }
.mc-star.s4{ left:58%; width:9px; height:9px; animation-duration:19s; animation-delay:-9s }
.mc-star.s5{ left:72%; width:13px; height:13px; animation-duration:14s; animation-delay:-5s }
.mc-star.s6{ left:86%; width:10px; height:10px; animation-duration:16s; animation-delay:-11s }
@keyframes starFall{
  0%{ transform:translate3d(0,-4vh,0) rotate(0deg); opacity:0 }
  8%{ opacity:1 }
  88%{ opacity:1 }
  100%{ transform:translate3d(-34px,108vh,0) rotate(300deg); opacity:0 }
}
/* 草地小花（四瓣白花 + 黄芯） */
.mc-flower{
  position:absolute; width:16px; height:16px;
  pointer-events:none;
}
.mc-flower::before{
  content:""; position:absolute; inset:0;
  background:#fff;
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter:drop-shadow(0 1px 3px rgba(23,69,107,.25));
}
.mc-flower::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; margin:-2.5px;
  border-radius:50%;
  background:#FFC53D;
}
.mc-flower.f1{ left:9%; bottom:52px; transform:scale(1.15) }
.mc-flower.f2{ left:23%; bottom:26px }
.mc-flower.f3{ left:71%; bottom:44px; transform:scale(.9) rotate(14deg) }
.mc-flower.f4{ left:88%; bottom:20px; transform:scale(1.05) rotate(-10deg) }
/* 萌宠标签行 chips 保持原有 */

/* ---------- 页脚双主题适配（浅色浅底 / 暗色深底，由 --footer-bg 驱动） ---------- */
.site-footer{ color:var(--muted) }
.site-footer .brand-name{ color:var(--ink); flex-wrap:wrap; row-gap:2px }
.site-footer .brand-name i{ color:var(--muted); opacity:.75 }
.site-footer .f-bottom{ border-color:var(--rule); color:var(--muted); opacity:.9 }
.site-footer .f-bottom a{ color:var(--muted) }
.site-footer .f-bottom a:hover{ color:var(--accent) }

/* ---------- 萌宠场景 · 暗色主题（静谧夜园：装饰降饱和、文字转夜色可读） ---------- */
[data-theme="dark"] .mc-sun{
  background:radial-gradient(circle at 38% 34%,#F6ECC8,#E4C56A 55%,#C99A35);
  box-shadow:0 0 54px rgba(238,206,120,.35), 0 0 120px rgba(238,206,120,.16);
  animation:none;
}
[data-theme="dark"] .cloud{ opacity:.18 }
[data-theme="dark"] .mc-rainbow{ opacity:.22 }
[data-theme="dark"] .mc-rays i{ background:linear-gradient(180deg,rgba(255,247,214,.14),rgba(255,247,214,0) 72%) }
[data-theme="dark"] .mc-bubble{ opacity:.5 }
[data-theme="dark"] .mc-flower{ opacity:.4 }
[data-theme="dark"] .mc-hills svg{ filter:brightness(.5) saturate(.85) }
[data-theme="dark"] .skin-mc .case-role{ color:#8FB4D8 }
[data-theme="dark"] .skin-mc .case-desc{ color:#A9C4DE }
[data-theme="dark"] .mc-points li b{ color:#EAF4FF }
[data-theme="dark"] .mc-points li span{ color:#9DBBDA }
[data-theme="dark"] .mc-logo-row b{ color:#EAF4FF }
[data-theme="dark"] .mc-logo-row span{ color:#9DBBDA }
[data-theme="dark"] .mc-logo-row img{ box-shadow:0 8px 18px rgba(0,0,0,.45) }
[data-theme="dark"] .mc-device{ box-shadow:0 18px 38px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12) }
[data-theme="dark"] .mc-device-cap{ color:#9DBBDA }

/* ---------- English 模式（html[lang="en"] · 企业站西文字体栈） ----------
   切换到英文后，标题与正文统一切换为 Inter（已内置 400/500/600/700/800 字重），
   字距与行高同步调整为西文排版习惯。 */
html[lang="en"]{
  --font-display:'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-latin:'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --ls-display:-.02em;
  --lh-body:1.7;
}
html[lang="en"] body{ letter-spacing:0 }
html[lang="en"] .hero-title, html[lang="en"] .sec-title, html[lang="en"] .case-title{ letter-spacing:-.02em }
html[lang="en"] .kicker{ letter-spacing:.28em }