/* ============================================================
   花里云 官网首页  ·  全宽版
   品牌色：主 #FF9900 / 辅 #6600FF

   色彩纪律 · 全站只用三组色，除此之外不引入任何色相：
     ① 品牌橙  #FF9900（同色相内做深浅）
     ② 品牌紫  #6600FF（同色相内做深浅）
     ③ 中性灰  纯灰，不带色相
   禁止：绿 / 蓝 / 红 / 琥珀 / 青 等任何第三色相；
        自拟的橙色变体（#FF6A00 之类）与紫调深色（#171A21 之类）。
   ============================================================ */

:root{
  /* ① 品牌橙 #FF9900 */
  --orange:#FF9900;        /* 500 */
  --orange-l:#FFC46B;      /* 300 浅 */
  --orange-d:#D97F00;      /* 600 深 */
  --orange-050:#FFF7EB;    /* 50 底纹 */
  --orange-wash:#FFFCF7;   /* 页面暖洗 */

  /* ② 品牌紫 #6600FF */
  --purple:#6600FF;        /* 500 */
  --purple-l:#A97DFF;      /* 300 浅 */
  --purple-d:#4A00B8;      /* 700 深 */
  --purple-dd:#2E0078;     /* 900 最深（深色收尾块用） */
  --purple-xd:#2B2246;     /* 950 页脚：深紫偏黑 · 低饱和 */
  --purple-xdd:#181230;    /* 975 页脚收尾 */
  --purple-050:#F5F1FF;    /* 50 底纹 */
  --purple-wash:#FAF7FF;   /* 页面冷洗 */

  /* ③ 中性灰（无色相）—— 文字色阶按对比度校准，弱化文字也保证 ≥4.5:1 */
  --ink:#131519;           /* 900 正文 */
  --ink-2:#2C2F35;         /* 800 */
  --ink-3:#5A5E66;         /* 600 次要文字（白底 ≈7.0:1） */
  --ink-4:#7E838B;         /* 400 弱化（白底 ≈4.5:1，不再低于可读线） */
  --ink-0:#0D0F12;         /* 950 深底 */

  --line:#EBEBEE;          /* 100 分割线 */
  --line-2:#DCDDE2;        /* 200 描边（略加深，边界更清楚） */
  --bg:#F4F4F6;            /* 50 页面底 */
  --panel:#FFFFFF;
  --panel-2:#FBFBFC;       /* 25 面板底 */

  /* 字体：西文在前、中文在后（阿里云 B-Design 规范） */
  --font-sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
  --font-num:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;

  /* 字重四档。中文（Microsoft YaHei / PingFang SC）实际只有 400 与 700 两个真字重，
     超过 700 会触发浏览器「合成加粗」，笔画粘连、发糊 —— 全站禁止 800/900 */
  --w-r:400;               /* 正文 */
  --w-m:500;               /* 次级强调 */
  --w-sb:600;              /* 小标题 */
  --w-b:700;               /* 标题 / 强调（中文字重上限） */

  --r-panel:0px;           /* 板块直角，不做圆角 */
  --r-card:20px;
  --r-sm:14px;

  --gap:0px;               /* 板块间无缝，保留变量以免引用失效 */
  --gut:clamp(22px,4.2vw,80px);
  --band-y:clamp(58px,6.6vw,104px);
  --nav-h:76px;
  --nav-x:30px;

  /* 阴影：尺寸全局统一 = 按钮悬浮生长阴影的尺寸（0 28px 46px -10px），
     任何元素（默认带影的 / 悬浮出影的）都用这一个尺寸，只靠浓度分层次 */
  --sh-size:0 28px 46px -10px;
  --sh-s:var(--sh-size) rgba(19,21,25,.028);
  --sh-m:var(--sh-size) rgba(19,21,25,.062);

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;   /* 禁止浏览器合成加粗，只用字体自带的真字重 */
  overflow-x:hidden;
}
/* 页面级环境光 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 46vh at 10% 4%, rgba(102,0,255,.10), transparent 62%),
    radial-gradient(46vw 40vh at 92% 12%, rgba(255,153,0,.11), transparent 64%),
    radial-gradient(70vw 56vh at 50% 104%, rgba(102,0,255,.08), transparent 66%);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
i[data-count]{font-family:var(--font-num);font-style:normal;font-weight:inherit;font-size:inherit;letter-spacing:inherit;color:inherit;font-variant-numeric:tabular-nums}

/* ================= 结构 ================= */
/* 页面底与板块同色（白）：全局只有底部 CTA 有外边距，它的四周即透出这里，
   从而与上方通栏连成一片、不做区分 */
main{position:relative;z-index:1;padding:0 0 120px;background:var(--panel)}
.band{
  position:relative;overflow:hidden;
  background:var(--panel);
  border-radius:var(--r-panel);
  margin-bottom:0;
  padding:var(--band-y) var(--gut);
}
.band>.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.band>.inner{position:relative;z-index:1}
/* 板块改为无缝连续后，用极淡细线维持边界；深色块、橙色 CTA 自带强分隔，其上不画线 */
.band:not(.dark):not(.cta)+.band:not(.dark):not(.cta){border-top:1px solid var(--line)}
.band.hero+.band{border-top:0}

/* 板块内紫色/橙色模糊光斑 */
.g-pu{background:radial-gradient(circle,rgba(169,125,255,.34),rgba(169,125,255,0) 70%)}
.g-or{background:radial-gradient(circle,rgba(255,153,0,.32),rgba(255,153,0,0) 70%)}

/* ================= 顶部固定头 ================= */
.site-head{position:fixed;top:0;left:0;right:0;z-index:120}

/* 导航底色单独做成一层（.nav-bg），而不是直接挂在 .nav 上。
   ⚠️ 原因：带 backdrop-filter 的元素会成为其后代的「背景根（backdrop root）」，
   二级导航 .drop 是 .nav 的后代，一旦 .nav 带 backdrop-filter，.drop 自己的毛玻璃
   就只能从 .nav 内部取样 —— 而它落在导航条之外，取不到页面内容，
   结果就是「滚动吸顶后展开二级导航，看不到模糊」。拆成独立层后彻底解决。 */
.nav-bg{
  position:absolute;left:0;right:0;top:0;height:var(--nav-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 1px 0 rgba(19,21,25,.045), var(--sh-m);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s var(--ease), visibility .38s;
}
.site-head.scrolled .nav-bg{opacity:1;visibility:visible}

.nav{
  position:relative;z-index:2;
  height:var(--nav-h);display:flex;align-items:center;gap:6px;
  padding:0 var(--nav-x);
}
/* logo 与菜单之间的距离（PC 端加大 30px） */
.brand{display:flex;align-items:center;margin-right:46px;flex:none}
.brand img{height:36px;width:auto}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-item>a{
  display:flex;align-items:center;gap:5px;
  padding:9px 13px;border-radius:11px;font-size:16px;font-weight:500;color:var(--ink-2);
  transition:background .22s, color .22s;
}
.nav-item>a:hover{background:rgba(19,21,25,.055);color:var(--ink)}
.nav-item .car{width:10px;height:10px;opacity:.45;transition:transform .25s var(--ease)}
.nav-item:hover .car{transform:rotate(180deg)}

/* 二级导航（下拉面板）：下移到主导航之下并留出间距，毛玻璃背景。
   这一层的 backdrop-filter 需要能取到页面内容，所以 .nav 上不能带 backdrop-filter
   （见 .nav-bg 处的说明） */
.drop{
  position:absolute;top:calc(100% + 32px);left:-6px;min-width:236px;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  backdrop-filter:blur(30px) saturate(190%);
  border:1px solid rgba(19,21,25,.07);border-radius:18px;
  box-shadow:0 1px 0 rgba(19,21,25,.03), var(--sh-m);
  padding:9px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
/* 面板上方的透明桥接层：指针从菜单项滑到面板时，跨过间隙也不会收起 */
.drop::before{content:"";position:absolute;left:-12px;right:-12px;top:-32px;height:32px}
.nav-item:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;border-radius:11px;transition:background .18s}
.drop a:hover{background:var(--orange-050)}
.drop .ic{width:18px;height:18px;color:var(--orange);margin-top:2px;flex:none}
.drop b{display:block;font-size:14px;font-weight:600;line-height:1.4}
.drop span{display:block;font-size:12px;color:var(--ink-4);line-height:1.4}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.icon-btn{
  width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:background .2s,color .2s;
}
.icon-btn:hover{background:rgba(19,21,25,.06)}
.icon-btn .ic{width:19px;height:19px}
.nav-right .txt-link{font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 10px;border-radius:10px;transition:background .2s}
.nav-right .txt-link:hover{background:rgba(19,21,25,.06)}

/* 汉堡按钮（仅移动端显示） */
.menu-btn{
  display:none;width:40px;height:40px;border-radius:8px;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .2s;
}
.menu-btn:hover{background:rgba(19,21,25,.06)}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.menu-btn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.on span:nth-child(2){opacity:0}
.menu-btn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 移动端抽屉 */
.mnav{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:110;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  padding:calc(var(--nav-h) + 10px) var(--nav-x) 34px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mnav.on{opacity:1;visibility:visible;transform:none}
body.locked{overflow:hidden}
.mgroup{border-bottom:1px solid var(--line)}
.mhead{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:17px 2px;font-size:16px;font-weight:600;color:var(--ink);text-align:left;
}
.mhead .car{width:13px;height:13px;opacity:.5;transition:transform .3s var(--ease)}
.mgroup.on .mhead .car{transform:rotate(180deg)}
.msub{display:none;padding:0 0 14px}
.mgroup.on .msub{display:block;animation:fadeUp .3s var(--ease) both}
.msub a{display:block;padding:12px 15px;border-radius:12px;font-size:16px;color:var(--ink-3);background:var(--panel-2);margin-bottom:7px;transition:background .2s,color .2s}
.msub a:active{background:var(--orange-050);color:var(--ink)}
.mlink{display:block;padding:17px 2px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.mnav-foot .btn{width:100%}

/* 按钮 —— 按钮自身不位移、不改变尺寸；
   悬浮时：① 内部点亮一枚跟随鼠标的模糊光点 ② 从按钮下沿缓慢向下生长出一层阴影 */
.btn{
  position:relative;z-index:0;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:8px;font-weight:600;font-size:16px;letter-spacing:.2px;
  padding:11px 20px;
  --shc:19,21,25;          /* 阴影色（r,g,b） */
  --sha:.16;               /* 阴影浓度 */
  box-shadow:0 0 0 rgba(var(--shc),0);
  transition:background .26s var(--ease), border-color .26s var(--ease), color .26s var(--ease),
             box-shadow 1.05s cubic-bezier(.18,.8,.28,1);
  white-space:nowrap;
}
.btn>.ic,.btn>svg,.btn>span{position:relative;z-index:1}
.btn .ic{width:17px;height:17px}
/* 生长阴影：按钮自身不动，仅阴影由「0 偏移 / 0 模糊」缓慢（1.05s）过渡到统一尺寸
   —— 全站阴影共用同一尺寸（--sh-size），只靠浓度分层次 */
.btn:hover{box-shadow:var(--sh-size) rgba(var(--shc),var(--sha))}
/* 光点层：位于按钮底色之上、文字之下（负 z-index 由 isolation 关在按钮内） */
.btn::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:168px;height:168px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 42%,rgba(255,255,255,0) 72%);
  filter:blur(11px);
  opacity:0;transition:opacity .4s var(--ease);
}
.btn:hover::before{opacity:1}
/* 橙色按钮：文字统一白色；橙底同色相内加深，保证白字可读 */
.btn-pri{--shc:206,118,0;--sha:.28;
  background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff}
.btn-ink{--shc:102,0,255;--sha:.22;background:linear-gradient(135deg,var(--purple),var(--purple-d));color:#fff}
.btn-ink:hover{background:linear-gradient(135deg,var(--purple-d),var(--purple-dd))}
.btn-ghost{background:rgba(255,255,255,.7);border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:#fff;border-color:var(--line-2)}
.btn-glass{--shc:0,0,0;--sha:.26;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.15)}
.btn-light{--shc:19,21,25;--sha:.18;background:rgba(255,255,255,.92);color:var(--ink-0)}
.btn-light:hover{background:#fff}
/* 浅底按钮用品牌橙光点；深底按钮保持白色光点 */
.btn-ghost::before,.btn-light::before{
  background:radial-gradient(circle,rgba(255,153,0,.44) 0%,rgba(255,153,0,.13) 44%,rgba(255,153,0,0) 72%);
}
.btn-lg{padding:14px 26px;font-size:16px;border-radius:8px}
.btn-sm{padding:9px 15px;font-size:14px;border-radius:8px}

/* ================= 首屏 ================= */
.hero{
  padding:calc(var(--nav-h) + clamp(44px,5vw,74px)) var(--gut) clamp(52px,6vw,88px);
  background:linear-gradient(180deg,var(--panel) 0%, var(--orange-wash) 48%, var(--purple-wash) 100%);
}
.hero .g{position:absolute;border-radius:50%;pointer-events:none;filter:blur(100px);z-index:0}
.orb{will-change:transform}
.orb-1{width:520px;height:520px;left:-90px;top:-120px;background:radial-gradient(circle,rgba(102,0,255,.36),rgba(102,0,255,0) 68%);animation:fl1 26s ease-in-out infinite}
.orb-2{width:460px;height:460px;right:6%;top:-60px;background:radial-gradient(circle,rgba(255,153,0,.42),rgba(255,153,0,0) 68%);animation:fl2 31s ease-in-out infinite}
.orb-3{width:600px;height:600px;left:34%;bottom:-340px;background:radial-gradient(circle,rgba(102,0,255,.20),rgba(102,0,255,0) 70%);animation:fl3 36s ease-in-out infinite}
@keyframes fl1{0%,100%{translate:0 0}50%{translate:44px 30px}}
@keyframes fl2{0%,100%{translate:0 0}50%{translate:-38px 34px}}
@keyframes fl3{0%,100%{translate:0 0}50%{translate:26px -32px}}

/* 首屏氛围层：叠在底色与光斑之上的「质地」层。
   ① 极淡细网格 —— 数字平台该有的秩序底纹；
   ② 斜向橙 × 紫柔光束 —— 给右侧插画区安一个光源；
   ③ 左下角一枚极淡橙光 —— 收住左下角，避免整屏重量偏上。
   全部位于内容之下（z-index:0），纯装饰、不参与交互。 */
.hero-aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* 细网格：52px 坐标纸。遮罩中心压在右上方（插画区），
   左侧文案区被遮罩褪尽，不干扰阅读 */
.hero-aura .ha-mesh{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(19,21,25,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(19,21,25,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(92% 76% at 76% 4%,#000 0%,rgba(0,0,0,.46) 38%,transparent 70%);
  mask-image:radial-gradient(92% 76% at 76% 4%,#000 0%,rgba(0,0,0,.46) 38%,transparent 70%);
}
.hero-aura .ha-beam{
  position:absolute;width:76%;height:186%;right:-24%;top:-58%;
  transform:rotate(15deg);transform-origin:50% 0;filter:blur(58px);
  background:linear-gradient(98deg,rgba(255,153,0,0) 0%,rgba(255,153,0,.10) 22%,rgba(255,153,0,0) 44%,rgba(102,0,255,.15) 70%,rgba(102,0,255,0) 100%);
  animation:haBeam 30s cubic-bezier(.42,0,.58,1) infinite;
}
.hero-aura .ha-li{
  position:absolute;width:420px;height:420px;left:-8%;bottom:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,153,0,.16),rgba(255,153,0,0) 70%);
  filter:blur(90px);
  animation:haLi 34s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes haBeam{0%,100%{transform:rotate(15deg) translate3d(0,0,0)}50%{transform:rotate(15deg) translate3d(-52px,30px,0)}}
@keyframes haLi{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(34px,-22px,0)}}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,72px);align-items:center}

.hero h1{
  margin:0;
  font-size:clamp(34px,4.5vw,64px);line-height:1.12;letter-spacing:-.01em;font-weight:700;
  color:var(--ink);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--orange) 6%, var(--orange-d) 46%, var(--purple) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* 首屏导语：纯黑、常规字重（不加粗），与主标题拉开距离 */
.hero .lede{margin:32px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.85;color:var(--ink);max-width:640px;font-weight:400}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--ink-4)}
.hero-note span{display:flex;align-items:center;gap:6px}
.hero-note .ic{width:15px;height:15px;color:var(--orange)}

/* 首屏右侧：IP 插画位（图片透明底直出，不加卡片、不加边框）
   两层视差：插画本体随鼠标轻晃（transform 由脚本逐帧写入），
   底盘柔光朝反方向轻晃（--gx/--gy 变量），拉出前后景深；
   两者位移都极小（≤20px），只做「活」的感觉，不做位移表演 */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px;--gx:0px;--gy:0px}
/* 插画底盘柔光：让主体「浮」在氛围之上，而不是贴在一片平底上 */
.hero-visual::before{
  content:"";position:absolute;z-index:0;left:50%;top:52%;
  width:min(88%,540px);aspect-ratio:1;
  transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy)));
  background:radial-gradient(circle,rgba(102,0,255,.17),rgba(102,0,255,.05) 46%,rgba(102,0,255,0) 70%);
  filter:blur(42px);
}
.hero-ip{
  position:relative;z-index:1;display:block;width:100%;max-width:600px;height:auto;
  max-height:min(560px,68vh);object-fit:contain;
  transform:translate3d(0,0,0);will-change:transform;
}

/* 合作/能力条 */
.trust{
  position:relative;z-index:2;margin-top:clamp(46px,5vw,72px);padding-top:26px;
  border-top:1px solid rgba(19,21,25,.08);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;
}
.trust .tl{font-size:14px;color:var(--ink-4);flex:none;letter-spacing:.3px}
.trust .ti{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-2);opacity:.82;transition:opacity .25s}
.trust .ti:hover{opacity:1}
.trust .ti .ic{width:18px;height:18px;color:var(--ink-3)}

/* ================= 通用标题 ================= */
.sec-head{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:clamp(30px,3.4vw,52px)}
.sec-head .sh-l{max-width:760px}
/* 板块小标题：纯黑、常规字重（不加粗）、16px */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:400;letter-spacing:.6px;color:var(--ink)}
.kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--orange)}
.sec-head h2{margin:12px 0 0;font-size:clamp(24px,2.7vw,38px);line-height:1.24;letter-spacing:-.01em;font-weight:700;color:var(--ink)}
.sec-head p{margin:13px 0 0;font-size:16px;line-height:1.8;color:var(--ink-3);max-width:660px}
.sec-head .sh-r{margin-left:auto;flex:none;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px}
/* 带 tab 的板块：标题区收窄一点，给右侧 tab 组留出空间，保证宽屏能同排；
   h2 同步微调字号，避免 640px 宽度下出现单字孤行 */
.sec-head.has-tab .sh-l{max-width:640px}
.sec-head.has-tab h2{font-size:clamp(24px,2.5vw,36px)}
.sec-head.has-tab p{max-width:560px}

/* ================= 快捷入口（三栏服务目录） ================= */
/* 按「地基 → 建造 → 生长」三组归类，全部平铺不折叠：
   内容一次看全，结构高度稳定，不依赖交互展开 */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.svc-col{
  border-radius:var(--r-card);border:1px solid var(--line);background:var(--panel-2);
  padding:26px 24px 20px;display:flex;flex-direction:column;
  transition:background .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
/* 悬浮：底色转白，但描边保留（并略加深一档）——白底与白底之间靠边框划出边界 */
.svc-col:hover{background:#fff;border-color:var(--line-2);box-shadow:var(--sh-m)}
/* 组头：左＝组名 + 一句定位（与下方条目左边缘对齐），右＝大号粗体细长序号
   序号字体：Bahnschrift（Windows 自带 DIN 血统可变字体，带宽度轴）——
   700 字重让笔画够实，再用 condensed 宽度轴压回高瘦轮廓；
   依次回退 DIN Alternate / DIN Condensed（macOS）、Arial Narrow、无衬线 + 表格数字 */
.svc-head{display:flex;align-items:center;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.svc-head>div{flex:1;min-width:0}
.svc-head .sn{
  flex:none;line-height:1;white-space:nowrap;
  font-family:"Bahnschrift","DIN Alternate","DIN Condensed","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;font-stretch:condensed;letter-spacing:.02em;
  font-size:clamp(24px,2.1vw,32px);
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--orange);
  /* 悬浮动效基准：以右缘为原点，缩放时右边缘不动，右对齐不跑位 */
  transform-origin:100% 60%;
  transition:transform .46s var(--ease), text-shadow .46s var(--ease);
}
.svc-col:nth-child(2) .svc-head .sn,.svc-col:nth-child(3) .svc-head .sn{color:var(--purple)}
/* 鼠标进入该栏时：序号从下方浮起 + 轻微放大，每次进入重播一次；
   移出时由上面的 transition 平滑回落 */
.svc-col:hover .svc-head .sn{animation:snRise .52s var(--ease) both}
.svc-col:hover .svc-head .sn{text-shadow:0 10px 24px rgba(255,153,0,.30)}
.svc-col:nth-child(2):hover .svc-head .sn,
.svc-col:nth-child(3):hover .svc-head .sn{text-shadow:0 10px 24px rgba(102,0,255,.28)}
@keyframes snRise{
  from{transform:translateY(42%) scale(.94);opacity:0}
  to{transform:translateY(-4px) scale(1.07);opacity:1}
}
.svc-head b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.svc-head>div>span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-4)}
/* 条目行：图标 + 名称 + 一句话说明。负外边距让 hover 底色自然外扩 */
.svc-item{
  display:flex;align-items:flex-start;gap:12px;
  margin:0 -12px;padding:12px;border-radius:10px;
  transition:background .26s var(--ease), transform .26s var(--ease);
}
.svc-item:first-of-type{margin-top:10px}
.svc-item:hover{background:#fff;transform:translateX(3px)}
.svc-col:hover .svc-item:hover{background:var(--panel-2)}
.svc-item .si{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--orange);background:var(--orange-050);
  transition:transform .32s var(--ease);
}
.svc-item:hover .si{transform:scale(1.06)}
.svc-item .si .ic{width:18px;height:18px}
.svc-col:nth-child(2) .svc-item .si,
.svc-col:nth-child(3) .svc-item .si{color:var(--purple);background:var(--purple-050)}
.svc-item .sb{flex:1;min-width:0}
.svc-item .sb b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.svc-item .sb span{display:block;margin-top:3px;font-size:14px;line-height:1.55;color:var(--ink-3)}
/* 箭头：默认收起，hover 时滑入——静态干净，交互有回应 */
.svc-item .ar{
  flex:none;width:15px;height:15px;margin-top:10px;color:var(--orange);
  opacity:0;transform:translateX(-5px);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.svc-col:nth-child(2) .svc-item .ar,
.svc-col:nth-child(3) .svc-item .ar{color:var(--purple)}
.svc-item:hover .ar{opacity:1;transform:translateX(0)}
.svc-more{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--orange);
}
.svc-col:nth-child(2) .svc-more,.svc-col:nth-child(3) .svc-more{color:var(--purple)}
.svc-more .ic{width:14px;height:14px;transition:transform .3s var(--ease)}
.svc-more:hover .ic{transform:translateX(4px)}

/* ================= 产品矩阵 ================= */
/* Tab 组：激活态不再是「按钮自己换底色」，而是一枚渐变胶囊在按钮下方滑动。
   胶囊由 JS 定位（见脚本 #tab-pill），过渡交给 CSS。
   容器默认浅灰底 + 细描边；悬浮时底色转纯白，并像按钮一样从「0 偏移 / 0 模糊」
   缓慢生长出统一尺寸的阴影（1.05s），边界与层次都更清楚 */
.tabs{
  position:relative;display:flex;gap:8px;flex-wrap:wrap;padding:7px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:16px;
  width:fit-content;max-width:100%;
  --shc:19,21,25;--sha:.062;
  box-shadow:0 0 0 rgba(var(--shc),0);
  transition:background .34s var(--ease), border-color .34s var(--ease),
             box-shadow 1.05s cubic-bezier(.18,.8,.28,1);
}
.tabs:hover{background:#fff;border-color:var(--line-2);box-shadow:var(--sh-size) rgba(var(--shc),var(--sha))}
.tab{
  position:relative;z-index:1;
  padding:10px 17px;border-radius:11px;font-size:16px;font-weight:600;color:var(--ink-3);
  background:none;transition:color .3s var(--ease);white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.on{color:#fff}
/* 胶囊：品牌橙 → 紫的渐变，带同色系柔和投影 */
.tab-pill{
  position:absolute;top:0;left:0;z-index:0;
  width:0;height:0;border-radius:11px;opacity:0;pointer-events:none;
  background:linear-gradient(118deg,var(--orange) 0%,#F2760A 52%,#8B1FFF 100%);
  box-shadow:0 6px 14px -6px rgba(255,153,0,.55), 0 8px 20px -8px rgba(102,0,255,.45);
  transition:transform .46s var(--ease), width .46s var(--ease), height .46s var(--ease), opacity .3s;
  will-change:transform,width;
}
.panel{display:none;margin-top:32px}
.panel.on{display:block;animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 24px 24px;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--orange),var(--purple) 78%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-m)}
.card:hover::after{opacity:1}
/* 产品图标块：底色由 --ci-grad 决定（橙 / 紫），上面再叠一层「左上角镜像高光」——
   白色 80% 起、与底色同向（140deg）沿对角淡出，形成左上受光的镜面质感。
   用 background 分层而非伪元素，图标字形自然落在高光之上，不被盖住 */
.card .ci{
  width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;color:#fff;
  --ci-grad:linear-gradient(140deg,var(--orange),var(--orange-d));
  background-image:
    linear-gradient(140deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.22) 34%,rgba(255,255,255,0) 64%),
    var(--ci-grad);
  transition:transform .35s var(--ease);
}
.card.pu .ci{--ci-grad:linear-gradient(140deg,var(--purple),var(--purple-d))}
.card:hover .ci{transform:scale(1.07) rotate(-6deg)}
.card .ci .ic{width:23px;height:23px}
.card h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.card p{margin:10px 0 0;font-size:14px;line-height:1.72;color:var(--ink-3);min-height:74px}
.card .meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{font-size:12px;font-weight:600;color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.chip.hot{color:var(--orange-d);background:var(--orange-050);border-color:rgba(255,153,0,.32)}
.chip.soon{color:var(--ink-4);border-style:dashed}
.card .go{margin-left:auto;font-size:14px;font-weight:600;color:var(--orange-d);display:flex;align-items:center;gap:4px;opacity:0;transform:translateX(-5px);transition:opacity .3s,transform .3s}
.card:hover .go{opacity:1;transform:none}

/* ================= 解决方案 ================= */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sol{
  position:relative;overflow:hidden;border-radius:var(--r-card);
  border:1px solid var(--line);background:var(--panel-2);
  padding:28px 26px;min-height:196px;display:flex;flex-direction:column;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .32s;
}
.sol::before{
  content:"";position:absolute;width:230px;height:230px;right:-90px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,153,0,.22),transparent 68%);
  opacity:0;transition:opacity .4s;filter:blur(26px);
}
.sol:nth-child(even)::before{background:radial-gradient(circle,rgba(102,0,255,.24),transparent 68%)}
.sol:hover{transform:translateY(-6px);box-shadow:var(--sh-m);background:#fff}
.sol:hover::before{opacity:1}
.sol .si{position:relative;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--orange-d);background:var(--orange-050);margin-bottom:16px}
.sol:nth-child(even) .si{color:var(--purple);background:var(--purple-050)}
.sol:hover .si{transform:scale(1.05)}
.sol .si{transition:transform .3s var(--ease)}
.sol h3{position:relative;font-size:18px;font-weight:700;letter-spacing:-.01em}
.sol p{position:relative;margin:9px 0 14px;font-size:14px;line-height:1.7;color:var(--ink-3)}
.sol .scn{position:relative;margin-top:auto;font-size:12px;color:var(--ink-4);display:flex;align-items:center;gap:7px}
.sol .scn::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--purple);opacity:.55}

/* ================= 深色板块 ================= */
.band.dark{background:linear-gradient(158deg,var(--purple) 0%,var(--purple-d) 100%);color:#fff}
/* 深色板块上的小标题：改纯白（深紫底上纯黑不可读），字号与字重保持一致 */
.band.dark .kicker{color:#fff}
.band.dark .kicker::before{background:#fff}
.band.dark h2{color:#fff}
.band.dark p{color:rgba(255,255,255,.74)}

/* 数据条 */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.stat{
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);
  padding:24px 22px;transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.stat:hover{background:rgba(255,255,255,.09);border-color:rgba(255,153,0,.42);transform:translateY(-4px)}
.stat .sv{font-family:var(--font-num);font-size:clamp(28px,2.9vw,40px);font-weight:700;letter-spacing:-.012em;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,#FFFFFF 20%,var(--orange-l));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .su{font-size:14px;font-weight:700;color:var(--orange-l);margin-left:2px}
.stat .sl{margin-top:11px;font-size:14px;color:rgba(255,255,255,.74);font-weight:500}

/* 开放能力区背景：暗黑素材（数据网络主题，1536×901）压底，品牌紫渐变半透明叠加 ——
   透明度压到 .58/.74，既能透出网络纹理，又保证白字对比度（背景仍为深色） */
#dev{
  background:
    linear-gradient(158deg, rgba(102,0,255,.58) 0%, rgba(74,0,184,.74) 100%),
    url("https://oss.linggo.holypro.xin/cus-000100004/templates/20261012/806f2e9cdaf12ff6.jpg") center/cover no-repeat;
}

/* 开发者 */
.dev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dev{
  position:relative;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  padding:26px 24px;transition:transform .32s var(--ease), border-color .32s, background .32s;
}
.dev:hover{transform:translateY(-6px);border-color:rgba(255,153,0,.6);background:rgba(255,255,255,.14)}
.dev .di{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff;background:linear-gradient(140deg,var(--orange),var(--orange-d))}
.dev h3{font-size:16px;font-weight:700;color:#fff}
.dev p{margin:9px 0 0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.74)}
.dev .dgo{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--orange-l)}
.dev .dgo .ic{width:15px;height:15px;transition:transform .3s var(--ease)}
.dev:hover .dgo .ic{transform:translateX(4px)}

/* ================= 案例 =================
   卡片字段全部取自案例内容模型，不自造：
     coverImage / topic(首个分类) / location / shortTitle / summary / publishedAt
   空值不渲染（例：案例未填地点，则封面不出现地点片），不拿占位文案硬凑。 */
.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.case{
  display:flex;flex-direction:column;
  border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);
  background:#fff;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.case:hover{transform:translateY(-6px);box-shadow:var(--sh-m);border-color:var(--line-2)}
/* 封面：案例真实截图，比例对齐后台封面出图规格 720×420（12:7），不二次裁切、不做缩放动效 */
.case .cover{position:relative;aspect-ratio:12/7;background:var(--panel-2)}
.case .cover img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* 封面底部黑色渐变遮罩（cshade）：为左下角时间（cdate）压出可读的深色底，不遮挡上方画面 */
.case .cshade{
  position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.10) 38%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.58) 100%);
}
/* 发布时间（publishedAt）：封面左下角，压在遮罩之上 */
.case .cdate{
  position:absolute;left:14px;bottom:13px;z-index:2;
  font-size:12px;font-weight:600;letter-spacing:.03em;color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
/* 作者头像（authors）：骑在封面下边缘 —— 上半压在图上、下半落在信息区，靠右对齐。
   多作者时相互重叠 12px，左侧头像压住右侧，第一张始终完整可见。 */
.case .authors{position:absolute;right:20px;bottom:-20px;z-index:3;display:flex;align-items:center}
.case .authors img{
  position:relative;width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:2.5px solid #fff;background:var(--panel-2);
  box-shadow:0 2px 10px rgba(19,21,25,.10);
}
.case .authors img+img{margin-left:-12px}
.case .authors img:nth-child(1){z-index:3}
.case .authors img:nth-child(2){z-index:2}
.case .authors img:nth-child(3){z-index:1}
/* 分类（topic）：封面左上 */
.case .ctag{
  position:absolute;left:14px;top:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:999px;padding:4px 11px;
}
.case .ctag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}
/* 信息区 */
.case .info{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.case .info h3{font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.case .info p{
  margin:8px 0 0;font-size:14px;line-height:1.72;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* 底栏：左下角地址（location）+ 详情入口。无底色块、无分割线，靠留白分隔 */
.case .cbar{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-4)}
.case .cbar .loc{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.case .cbar .loc .ic{width:13px;height:13px;flex:none;color:var(--ink-4)}
.case .cbar .go{margin-left:auto;flex:none;display:flex;align-items:center;gap:5px;color:var(--orange);font-weight:600;font-size:14px}
.case .cbar .go .ic{width:14px;height:14px;transition:transform .3s var(--ease)}
.case:hover .cbar .go .ic{transform:translateX(4px)}

/* ================= 资源与方法（Tab） ================= */
/* 每个栏目下平铺真实文章：缩略图左、文案右，两列排布 */
.rarts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rart{
  display:flex;gap:18px;min-width:0;
  border-radius:var(--r-card);border:1px solid var(--line);background:#fff;
  padding:14px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rart:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:var(--line-2)}
.rart .thumb{flex:none;width:168px;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--panel-2)}
.rart .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rart .abody{display:flex;flex-direction:column;min-width:0;padding:4px 0 2px}
.rart h3{
  font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rart p{
  margin-top:7px;font-size:14px;line-height:1.7;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rart .ameta{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-4)}
.rart .ameta .ago{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--orange);font-weight:600;flex:none}
.rart .ameta .ago .ic{width:14px;height:14px;transition:transform .3s var(--ease)}
.rart:hover .ameta .ago .ic{transform:translateX(4px)}

/* ================= 合规条 ================= */
.comp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cmp{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-card);background:var(--panel-2);border:1px solid var(--line)}
.cmp .ic{width:22px;height:22px;color:var(--orange);flex:none;margin-top:2px}
.cmp b{display:block;font-size:14px;font-weight:700}
.cmp span{display:block;margin-top:5px;font-size:14px;line-height:1.6;color:var(--ink-3);word-break:break-all}

/* ================= 底部 CTA ================= */
/* 品牌紫底独立板块：圆角与全站卡片统一（--r-card），不再单独放大圆角 */
.cta{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  /* 左右边距与上方主体内容（--gut）对齐；上移 30px 更贴近上方内容；
     下方 120px 留白由 main 的 padding-bottom 承担（避免外边距折叠露出灰底） */
  margin:-30px var(--gut) 0;
  /* 底色 = 品牌紫同色相内三段渐变（500 → 700 → 900），平滑无跳阶；
     再叠两枚大范围柔光做纵深 —— 左上偏亮、右下收暗，
     与正下方「深紫偏黑」的页脚自然衔接，不出现色带断层 */
  background:
    radial-gradient(125% 140% at 14% -10%, rgba(169,125,255,.42) 0%, rgba(169,125,255,0) 58%),
    radial-gradient(120% 130% at 92% 112%, rgba(24,18,48,.58) 0%, rgba(24,18,48,0) 62%),
    linear-gradient(124deg, var(--purple) 0%, var(--purple-d) 58%, var(--purple-dd) 100%);
  padding:clamp(48px,5.5vw,84px) clamp(24px,3vw,48px);text-align:center;color:#fff;
}
/* 氛围层：纯 CSS 柔光。四枚光斑各走一条「闭环路径」（关键帧首尾同点），
   所以循环是无断点的；时长取互质数（19/27/33/41s）且各自带不同的透明度呼吸相位，
   叠加后长时间内不会出现肉眼可辨的重复节拍。光斑全部推向四角，中央留空给文案。 */
.cta .aura{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.cta .aura i{position:absolute;display:block;border-radius:50%;filter:blur(62px);will-change:transform,opacity}
.cta .aura .a1{width:540px;height:540px;left:-12%;top:-38%;opacity:.9;background:radial-gradient(circle,rgba(169,125,255,.40),rgba(169,125,255,0) 68%);animation:ctaA 19s cubic-bezier(.42,0,.58,1) infinite}
.cta .aura .a2{width:600px;height:600px;right:-16%;bottom:-42%;opacity:.85;background:radial-gradient(circle,rgba(255,255,255,.17),rgba(255,255,255,0) 70%);animation:ctaB 27s cubic-bezier(.42,0,.58,1) infinite}
.cta .aura .a3{width:460px;height:460px;left:2%;bottom:-30%;opacity:.72;background:radial-gradient(circle,rgba(255,153,0,.20),rgba(255,153,0,0) 70%);animation:ctaC 41s cubic-bezier(.42,0,.58,1) infinite}
.cta .aura .a4{width:520px;height:520px;right:10%;top:-32%;opacity:.8;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);animation:ctaD 33s cubic-bezier(.42,0,.58,1) infinite}
/* 缓慢扫过的光带：先淡入、再掠过、最后淡出归零，位移回起点发生在完全透明时，
   所以看不到"瞬时跳回"；周期较长（22s），大半时间是静的，只偶尔掠过一次 */
.cta .aura .sweep{
  width:52%;top:-40%;bottom:-40%;left:-58%;border-radius:0;filter:blur(26px);opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.04) 62%,rgba(255,255,255,0) 100%);
  animation:ctaSweep 22s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes ctaA{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}
  30%{transform:translate3d(46px,26px,0) scale(1.12);opacity:1}
  62%{transform:translate3d(14px,52px,0) scale(.96);opacity:.74}
  82%{transform:translate3d(-22px,20px,0) scale(1.06);opacity:.95}
}
@keyframes ctaB{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  26%{transform:translate3d(-40px,-30px,0) scale(1.1);opacity:1}
  58%{transform:translate3d(-64px,8px,0) scale(.94);opacity:.7}
  82%{transform:translate3d(-16px,-26px,0) scale(1.04);opacity:.94}
}
@keyframes ctaC{
  0%,100%{transform:translate3d(0,0,0) scale(.96);opacity:.72}
  34%{transform:translate3d(56px,-32px,0) scale(1.14);opacity:.98}
  66%{transform:translate3d(20px,-8px,0) scale(1);opacity:.8}
  86%{transform:translate3d(-18px,10px,0) scale(1.05);opacity:.9}
}
@keyframes ctaD{
  0%,100%{transform:translate3d(0,0,0) scale(1.04);opacity:.8}
  28%{transform:translate3d(-34px,34px,0) scale(.92);opacity:.98}
  60%{transform:translate3d(30px,14px,0) scale(1.12);opacity:.72}
  84%{transform:translate3d(40px,-16px,0) scale(1);opacity:.9}
}
@keyframes ctaSweep{
  0%{transform:translate3d(0,0,0) rotate(8deg);opacity:0}
  14%{opacity:.9}
  56%{opacity:.9}
  72%,100%{transform:translate3d(360%,0,0) rotate(8deg);opacity:0}
}

.cta .inner{position:relative;z-index:2}
.cta h2{font-size:clamp(26px,3.1vw,44px);font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#fff}
.cta p{margin:16px auto 0;max-width:640px;font-size:16px;line-height:1.8;color:rgba(255,255,255,.84)}
.cta .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
/* 紫底上的按钮：主 = 白底紫字（对比最强）；次 = 玻璃描边白字 */
.cta .btn-ink{--shc:24,0,72;--sha:.30;background:#fff;border:1px solid transparent;color:var(--purple-d)}
.cta .btn-ink:hover{background:#fff;color:var(--purple)}
.cta .btn-ink::before{background:radial-gradient(circle,rgba(102,0,255,.30) 0%,rgba(102,0,255,.10) 44%,rgba(102,0,255,0) 72%)}
.cta .btn-light{--shc:10,0,40;--sha:.24;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.44);color:#fff}
.cta .btn-light:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.62)}
.cta .btn-light::before{background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 44%,rgba(255,255,255,0) 72%)}

/* ================= 页脚 ================= */
.foot{
  border-radius:0;margin-bottom:0;
  background:linear-gradient(170deg,var(--purple-xd),var(--purple-xdd));
  color:rgba(255,255,255,.72);padding:clamp(48px,5vw,72px) var(--gut) 30px;
  position:relative;overflow:hidden;
}
.foot .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.foot .f1{width:460px;height:460px;left:-120px;top:-160px;background:radial-gradient(circle,rgba(169,125,255,.22),transparent 70%)}
.foot .f2{width:380px;height:380px;right:-80px;bottom:-180px;background:radial-gradient(circle,rgba(255,153,0,.16),transparent 70%)}
.foot .inner{position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand img{height:55px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.66);max-width:300px}
.foot-brand .fsoc{display:flex;gap:10px;margin-top:18px}
.foot-brand .fsoc a{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);transition:background .25s,color .25s}
.foot-brand .fsoc a:hover{background:var(--orange);color:#fff}
.fcol h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:15px}
.fcol a{display:block;font-size:14px;color:rgba(255,255,255,.68);padding:5px 0;transition:color .2s}
.fcol a:hover{color:var(--orange-l)}
.foot-bot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding-top:24px;font-size:14px;color:rgba(255,255,255,.6)}
.foot-bot .sep{opacity:.35}
.foot-bot .right{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}

/* ================= 动效 ================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease), transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ================= 响应式 ================= */
@media (max-width:1280px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .dev-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .foot-brand{grid-column:1/-1}
  /* 带 tab 的板块：窄屏时 tab 组落到标题下方、左对齐（宽屏则与标题同排） */
  .sec-head.has-tab .sh-l{max-width:none}
  .sec-head.has-tab .sh-r{width:100%;margin-left:0;margin-top:18px;justify-content:flex-start}
}
@media (max-width:1024px){
  :root{--nav-h:66px}
  .nav-links{display:none}
  .menu-btn{display:flex}
  .nav-right .txt-link{display:none}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{min-height:0}
  .hero-ip{max-width:460px;margin:0 auto}
  .sol-grid,.case-grid,.comp{grid-template-columns:repeat(2,1fr)}
  /* 服务目录：三栏转单栏，组内条目改排两列，避免单张卡片被拉得过长 */
  .svc{grid-template-columns:1fr}
  .svc-col{display:grid;grid-template-columns:repeat(2,1fr);column-gap:16px;align-items:start}
  .svc-head,.svc-more{grid-column:1/-1}
}
@media (max-width:680px){
  :root{--r-panel:0px;--r-card:16px;--nav-h:58px;--nav-x:20px}
  /* 小屏首屏氛围：网格范围收到顶部一小片，正文区保持干净 */
  .hero-aura .ha-mesh{
    -webkit-mask-image:radial-gradient(120% 34% at 68% 0%,#000 0%,rgba(0,0,0,.4) 46%,transparent 78%);
    mask-image:radial-gradient(120% 34% at 68% 0%,#000 0%,rgba(0,0,0,.4) 46%,transparent 78%);
  }
  .hero-aura .ha-beam{width:150%;right:-58%}
  .pgrid,.stats,.dev-grid,.sol-grid,.case-grid,.comp,.rarts{grid-template-columns:1fr}
  .rart{gap:14px;padding:12px}
  .rart .thumb{width:124px}
  /* 服务目录：小屏条目回到单列 */
  .svc-col{display:flex;flex-direction:column;padding:22px 18px 16px}
  .svc-item{padding:11px 10px;margin:0 -10px}
  .svc-head{gap:12px}
  .svc-head .sn{font-size:24px}
  .foot-top{grid-template-columns:1fr 1fr}
  .sec-head .sh-r{margin-left:0}
}
@media (max-width:560px){
  /* 搜索按钮保留（原先是隐藏的），只隐藏「免费咨询」由抽屉承接 */
  .nav-right .icon-btn{display:flex}
  .nav-right .btn{display:none}
  .brand img{height:28px}
}

/* 无障碍降级：只关闭「持续循环」与「大幅位移」这类可能引起不适的动效，
   保留一次性淡入与 UI 微过渡（按钮/卡片 hover），避免整页变得僵硬 */
@media (prefers-reduced-motion:reduce){
  .cta .aura i{animation:none}
  .hero .orb{display:none}
  .hero-aura .ha-beam,.hero-aura .ha-li{animation:none}
}