/* ==========================================================================
归浦AI 官网 V5.2 · 设计系统
参考钉钉官网（电脑端）设计语言 1:1 重构：
纯白通透 / 黑色胶囊主按钮 / 粉彩标签 / 大圆角卡片 / 浮动胶囊导航 / 克制动效
========================================================================== */
:root{
/* 品牌与中性色 */
--brand:#6D5AE6; /* 归浦蓝（用于高亮/链接/当前态，对标钉钉蓝的克制用法） */
--brand-deep:#5239D8;
--ink:#0A0A0A; /* 主标题黑 */
--body:#3D3D3D; /* 正文 */
--muted:#8A8A8A; /* 辅助灰 */
--line:#E7E9EE; /* 分割线 */
--bg:#F4F6F9; /* 全站统一背景：柔和浅灰白（非纯白，长时间浏览更舒适） */
--card:#FFFFFF; /* 卡片/内容面：在浅灰底上浮起 */
--soft:#EDF1F6; /* 略深分区底 */
--soft-2:#E8ECF2;
/* 案例卡数据图表配色（模板 SVG 引用，v7.css 深色主题会覆盖） */
--cc-bar-soft:#EDEFF5;
--cc-bar-soft-top:#EDEFF6;
--cc-ink:#6B707C;
--cc-ink-soft:#9AA0AE;
--cc-ink-mute:#9AA0AE;
--cc-ring-track:#E9EBF2;
--cc-badge-bg:#fff;
/* 粉彩辅助色（功能分类标签，占比<5%） */
--pk-mint:#E5F8F1; --pk-mint-t:#00A870;
--pk-blue:#E8F1FE; --pk-blue-t:#6D5AE6;
--pk-violet:#E8F1FE;--pk-violet-t:#6D5AE6;
--pk-orange:#FFF2E3;--pk-orange-t:#EB8A2F;
--pk-pink:#FDEEF6; --pk-pink-t:#E553A7;
--pk-yellow:#FEF9E0;--pk-yellow-t:#C8A100;
--pk-cyan:#E6F7FB; --pk-cyan-t:#0FA8C7;
--pk-lime:#F0F9E4; --pk-lime-t:#6FA816;
/* 形态 */
--r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
--pill:999px;
--sh-card:0 2px 10px rgba(10,10,10,.04);
--sh-hover:0 14px 40px rgba(10,10,10,.09);
--sh-nav:0 6px 28px rgba(10,10,10,.10);
--ease:cubic-bezier(.22,.61,.36,1);
--font:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* 移动端安全区（iOS 刘海屏 / 安卓状态栏） */
--sat:env(safe-area-inset-top,0px);
--sab:env(safe-area-inset-bottom,0px);
--nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
/* 页面完全顶到屏幕最顶端：消除默认边距，背景白铺满整个视口（含状态栏区域） */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-anchor:none;
margin:0;padding:0;background:var(--bg)}
body{margin:0;padding:0;overflow-x:hidden}
body{font-family:var(--font);color:var(--ink);background:var(--bg);
font-size:16px;line-height:1.7;letter-spacing:.01em;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit}
::selection{background:rgba(109,94,224,.16)}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.28;letter-spacing:.01em}
p{margin:0}
main{display:block;min-height:60vh}
.container{max-width:1240px;margin:0 auto;padding:0 32px}
.section{padding:76px 0;position:relative}
.section--soft{background:var(--soft)}
.center{text-align:center}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}
.small{font-size:13.5px;color:var(--muted);line-height:1.7}
.hr{height:1px;background:var(--line);border:0;margin:40px 0}
/* 标题体系 */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.display{font-size:clamp(40px,5.6vw,76px);font-weight:800;line-height:1.16;letter-spacing:.005em}
/* 标题体系：全站标题统一居中 */
h1,h2,h3,h4,h5,h6,.display,.section-title,.page-head .display,.trio h3,.gstep h4,.step-card h4,
.era,.gstat,.lab-card h4,.price-card .who{text-align:center}
.section-title{font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.22;text-align:center}
.sub-title{font-size:clamp(19px,2vw,24px);font-weight:700;text-align:center}
.lead{font-size:clamp(15.5px,1.4vw,18px);color:var(--muted);line-height:1.8;margin-top:16px}
/* 粉彩文字泡（钉钉 Hero 高亮词）—— v5.4 加入柔和的粉/紫/薄荷多彩变体 */
.bub{display:inline-block;background:#D8ECFF;border-radius:16px;padding:.02em .22em;
margin:0 .04em;position:relative;white-space:nowrap;color:#0A0A0A}
.bub::after{content:"";position:absolute;right:-.24em;bottom:.5em;width:.5em;height:.78em;
background:#D8ECFF;clip-path:polygon(0 0,0 100%,100% 20%)}
.bub.blue{background:#D8ECFF}.bub.blue::after{background:#D8ECFF}
.bub.green{background:#D9F5E6}.bub.green::after{background:#D9F5E6}
.bub.pink{background:#FFDCEA;color:#B23A70}.bub.pink::after{background:#FFDCEA}
.bub.violet{background:#E0EBFF;color:#5239D8}.bub.violet::after{background:#E0EBFF}
.bub.mint{background:#D3F5E8;color:#12785A}.bub.mint::after{background:#D3F5E8}
.bub.amber{background:#FFE9C7;color:#9A6412}.bub.amber::after{background:#FFE9C7}
.grad-text{color:var(--brand)}
/* 锚点滚动偏移：导航是 fixed 悬浮胶囊，直接跳锚点会被盖住 */
[id]{scroll-margin-top:96px}
/* ==========================================================================
按钮：三级体系（黑色实心胶囊 / 描边胶囊 / 文字链接）
========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-size:15px;font-weight:600;line-height:1;border-radius:var(--pill);
padding:14px 30px;transition:all .22s var(--ease);white-space:nowrap;cursor:pointer;
/* 统一盒模型 + 统一描边占位：实心按钮和描边按钮才能完全等宽等高。
否则 .btn-line 的 1.5px 边框会多撑出 3px，并排时被一眼看出「一高一矮」。 */
box-sizing:border-box;border:1.5px solid transparent;
/* 高度写死：带箭头的按钮里那个 16px SVG 比 15px 文字高，
会把这个按钮顶高 2.5px，并排时就成了「一高一矮」。 */
height:50px}
.btn .arw{transition:transform .22s var(--ease);flex:none}
.btn:hover .arw{transform:translateX(3px)}
/* V5.8.5 · G13：主按钮全站统一为品牌色（原为黑色 --ink），黑色按钮下线。
仅改主按钮的底色，尺寸/圆角/交互不变，消除「黑色主按钮 + 蓝色高亮」的混用。 */
.btn-primary,.btn-accent{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover,.btn-accent:hover{background:var(--brand-deep);border-color:var(--brand-deep);
color:#fff;transform:translateY(-2px);box-shadow:0 14px 34px rgba(109,94,224,.28)}
.btn-blue{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-blue:hover{background:var(--brand-deep);border-color:var(--brand-deep);transform:translateY(-1px);
box-shadow:0 8px 20px rgba(109,94,224,.28)}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid rgba(10,10,10,.85)}
.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-white:hover{transform:translateY(-1px);box-shadow:var(--sh-hover)}
.btn-ghost-light{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost-light:hover{background:rgba(255,255,255,.22)}
.btn-lg{padding:17px 38px;font-size:16px;height:56px}
.btn-sm{padding:10px 22px;font-size:13.5px;height:40px}
.btn-xs{padding:7px 14px;font-size:12.5px;height:34px}
.btn-block{width:100%}
.btn-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
/* 正好两个按钮时：等高 + 清除描边/图标带来的高度差，但**不加宽**。
等宽只在手机端生效（那里按钮本来就该铺满一行）——
桌面端铺满会被拉成两个 580px 的大长条，很难看。 */
.btn-row:has(> .btn:nth-child(2):last-child),
.btn-row.eq{align-items:center}
.btn-row.eq{gap:16px}
/* 三按钮等宽（如大 CTA 区） */
.btn-row.eq3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;
font-size:15px}
.link-arrow:hover{color:var(--brand-deep)}
.link-arrow svg{transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}
/* 黑色圆形箭头按钮（钉钉卡片标配） */
.dot-arw{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
border-radius:50%;background:var(--ink);color:#fff;transition:all .22s var(--ease);flex:none}
.dot-arw:hover{background:var(--brand);transform:translateX(4px)}
.dot-arw.lite{width:40px;height:40px}
/* ==========================================================================
标签 / 卡片 / 栅格
========================================================================== */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
padding:5px 13px;border-radius:var(--pill);background:var(--soft-2);color:var(--body)}
.tag.dark{background:var(--ink);color:#fff}
.tag.white{background:#fff;color:var(--ink);box-shadow:var(--sh-card)}
.tag.gray{background:var(--soft-2);color:var(--muted)}
.tag.geo,.tag.blue{background:var(--pk-blue);color:var(--pk-blue-t)}
.tag.mint{background:var(--pk-mint);color:var(--pk-mint-t)}
.tag.violet{background:var(--pk-violet);color:var(--pk-violet-t)}
.tag.orange{background:var(--pk-orange);color:var(--pk-orange-t)}
.tag.pink{background:var(--pk-pink);color:var(--pk-pink-t)}
.tag.yellow{background:var(--pk-yellow);color:var(--pk-yellow-t)}
.tag.cyan{background:var(--pk-cyan);color:var(--pk-cyan-t)}
.tag.lime{background:var(--pk-lime);color:var(--pk-lime-t)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:28px;transition:all .26s var(--ease);box-shadow:var(--sh-card)}
/* GEO 能力流水线卡：图标在左、标题+说明在右，两者顶边对齐
—— 之前是「图标在上、文字在下」，四张卡的高度全靠正文行数撑，视觉是散的 */
.cap-flow{display:flex;align-items:flex-start;gap:16px;padding:24px 22px}
.cap-flow .cf-ic{flex:none;width:52px;height:52px;border-radius:16px;
display:flex;align-items:center;justify-content:center;
/* 图标顶边与右侧标题首行的视觉中线对齐（图标 52 高、标题行高约 26） */
margin-top:1px}
.cap-flow .cf-txt{min-width:0;flex:1}
.cap-flow .cf-txt h3{font-size:18px;font-weight:700;margin:0;
/* 行高直接等于图标高度 52px：标题所在行盒与图标同高，
两者的中线天然重合，不需要靠 padding 去凑（凑出来的值换字号就废了） */
line-height:52px}
.cap-flow .cf-txt p{margin-top:10px;line-height:1.72;font-size:13px}
.grid.g4.flow-grid{gap:18px}
@media (max-width:980px){.grid.g4.flow-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
.grid.g4.flow-grid{grid-template-columns:1fr}
.cap-flow{padding:20px 18px}
.cap-flow .cf-txt h3{line-height:44px;font-size:17px}
.cap-flow .cf-ic{width:44px;height:44px}
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);border-color:#D9DEE7}
/* GEO 案例卡：数据（大数字）下方的指标标题统一左对齐。
站点默认 .lab-card h4 是居中的，跟上面的大数字不对齐，看起来像没排好版 */
.geo-cases .lab-card h4{text-align:left}
.geo-cases .lab-card .num{text-align:left}
.geo-cases .lab-card p{text-align:left}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.check-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.check-list li{position:relative;padding-left:28px;color:var(--body);font-size:15px;line-height:1.65}
.check-list li::before{content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;
border-radius:50%;background:var(--pk-blue);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%231B6BF5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-size:12px;background-position:center;background-repeat:no-repeat}
/* ==========================================================================
导航：首屏常规条 → 滚动后浮动胶囊（钉钉同款交互）
========================================================================== */
/* 固定导航：背景白铺满状态栏区域（含 iOS 刘海/安卓状态栏安全区） */
/* 过渡曲线单独抽出来：收起/展开全程共用一条缓动，避免前半段快后半段拖的顿挫感 */
.nav{--ease-nav:cubic-bezier(.32,.72,.24,1);
position:fixed;top:0;left:0;right:0;z-index:90;
height:calc(var(--nav-h) + var(--sat));
padding-top:var(--sat);
background:rgba(255,255,255,.9);
border-bottom:1px solid var(--line);
backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);
/* 只过渡真正可插值的属性；不要再写 transition:all（会连带 backdrop-filter 一起抽帧） */
transition:height .42s var(--ease-nav),top .42s var(--ease-nav),
background-color .32s linear,border-color .32s linear,box-shadow .32s linear}
.nav-inner{max-width:1320px;margin:0 auto;padding:0 28px;height:var(--nav-h);display:flex;
align-items:center;gap:30px;
/* 宽度交给 JS 量好的 --nav-w / --pill-w（px→px 才是可插值的）。
缺省为 auto，量不到时自动退回旧行为，不会比现在更差。 */
width:var(--nav-w,auto);
transition:width .42s var(--ease-nav),height .42s var(--ease-nav),
padding .42s var(--ease-nav),gap .42s var(--ease-nav),
background-color .32s linear,border-color .32s linear,
border-radius .42s var(--ease-nav),box-shadow .32s linear}
/* 测量态：按内容自然宽度撑开胶囊，供 JS 读取目标 px 值
—— 不能偷懒写 min(auto, xxx)：auto 在 min() 里是非法值，
会让整条 width 声明失效并回落成容器满宽，量出来的是错的 */
.nav.pill.measuring .nav-inner{width:max-content;max-width:calc(100vw - 32px)}
/* 测量/初始化期间禁止过渡，否则量出来的是动画中间值 */
.nav.no-anim,.nav.no-anim .nav-inner{transition:none!important}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:26px;width:auto;display:block}
.nav-menu{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.nav-menu>a,.nav-top{position:relative;display:inline-flex;align-items:center;gap:5px;
font-size:14.5px;font-weight:500;color:var(--ink);padding:9px 14px;border-radius:var(--pill);
transition:all .2s var(--ease);white-space:nowrap}
.nav-menu>a:hover,.nav-top:hover{background:rgba(10,10,10,.05)}
.nav-menu>a.active{font-weight:700}
.nav-menu>a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;
border-radius:2px;background:var(--brand)}
.nav-top .caret{transition:transform .25s var(--ease)}
.nav-item:hover .nav-top .caret,.nav-item.open .nav-top .caret{transform:rotate(180deg)}
.nav-acts{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
/* 滚动后的浮动胶囊态
—— 关键：容器自身必须完全「透明 + 无边框 + 无背景 + 无模糊」，
只有中间的 .nav-inner 胶囊是白色，左右两侧才能透出后面的页面内容 */
/* 注意：height 必须写成确定 px —— 历史上写 height:auto，
height 到 auto 不可插值，容器高度会瞬间从 72px 掉到 64px，动画等于白做 */
.nav.pill{top:calc(12px + var(--sat));height:var(--pill-h,64px);padding-top:0;
background:transparent!important;border-bottom-color:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
pointer-events:none}
.nav.pill .nav-inner{width:min(var(--pill-w,985px),calc(100vw - 32px));max-width:none;background:rgba(255,255,255,.96);
backdrop-filter:saturate(1.5) blur(20px);-webkit-backdrop-filter:saturate(1.5) blur(20px);
border-radius:var(--pill);box-shadow:var(--sh-nav);height:var(--pill-h,64px);padding:0 12px 0 24px;
pointer-events:auto;gap:10px;
border:1px solid rgba(255,255,255,.7)}
.nav.pill .brand img{height:24px}
.nav.pill .nav-menu>a,.nav.pill .nav-top{font-size:13.5px;padding:8px 13px}
.nav.pill .nav-menu>a.active{background:var(--soft-2);border-radius:var(--pill)}
.nav.pill .nav-menu>a.active::after{display:none}
/* scroll-spy 高亮：Mega Menu 顶部按钮（产品）同样支持 */
.nav-menu .nav-top.active{font-weight:700;color:var(--ink)}
.nav-menu .nav-top.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;
background:var(--ink);border-radius:2px}
.nav.pill .nav-menu .nav-top.active{background:var(--soft-2);border-radius:var(--pill)}
.nav.pill .nav-menu .nav-top.active::after{display:none}
.nav.pill .nav-acts .btn-line{display:none}
.nav.pill .btn-sm{padding:9px 20px}
/* Mega Menu */
.nav-item{position:relative}
.nav-drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
width:760px;background:#fff;border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(10,10,10,.14);
padding:26px;opacity:0;visibility:hidden;transition:all .26s var(--ease);z-index:99}
/* 「产品」下拉：从按钮左侧向右发散展开，不顶到屏幕最左边 */
.nav-drop.drop-right{left:-14px;transform:translate(0,10px);transform-origin:top left}
.nav-item:hover .nav-drop,.nav-item.open .nav-drop,.nav-item:focus-within .nav-drop{
opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-item:hover .nav-drop.drop-right,.nav-item.open .nav-drop.drop-right,
.nav-item:focus-within .nav-drop.drop-right{transform:translate(0,0)}
.nav-drop-in{display:grid;grid-template-columns:1fr 1fr 218px;gap:14px}
.mm-prod{display:block;border-radius:var(--r-md);padding:18px;background:var(--soft);
transition:all .22s var(--ease)}
.mm-prod:hover{background:#fff;box-shadow:var(--sh-hover);transform:translateY(-2px)}
.mm-art{position:relative;height:86px;border-radius:12px;margin-bottom:14px;overflow:hidden}
.mm-art.agent{background:linear-gradient(120deg,#E8F1FE,#E8F1FE)}
.mm-art.geo{background:linear-gradient(120deg,#E5F8F1,#E6F7FB)}
.mm-art .mm-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);
min-width:44px;height:44px;padding:0 10px;border-radius:13px;background:#fff;display:flex;align-items:center;
justify-content:center;font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--brand);
box-shadow:var(--sh-card)}
.mm-art i:not(.mm-b2){position:absolute;right:22px;top:16px;width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.55)}
.mm-art .mm-b2{position:absolute;right:44px;top:38px;width:52px;height:52px;border-radius:14px;
background:rgba(255,255,255,.35)}
.mm-prod h5{font-size:16.5px;font-weight:700}
.mm-prod p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6}
.mm-link{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:13px;
font-weight:600;color:var(--brand)}
.mm-tag{display:inline-block;font-size:10.5px;font-weight:700;color:#fff;background:var(--brand);
border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:middle;letter-spacing:.02em}
.mm-prod h5{display:flex;align-items:center}
.mm-quick{border-left:1px solid var(--line);padding-left:20px}
.mm-quick h6{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.08em;margin-bottom:8px}
.mm-quick a{display:block;padding:8px 0 8px 10px;font-size:14px;font-weight:600;border-radius:8px;
border-left:2.5px solid transparent;transition:all .2s var(--ease)}
.mm-quick a em{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:400;margin-top:1px}
.mm-quick a:hover{color:var(--brand);padding-left:14px}
.mm-quick a:nth-of-type(1){border-left-color:#6D5AE6}
.mm-quick a:nth-of-type(2){border-left-color:#00A870}
.mm-quick a:nth-of-type(3){border-left-color:#F5A524}
.mm-quick a:nth-of-type(4){border-left-color:#6D5AE6}
.mm-quick a:nth-of-type(5){border-left-color:#EC4899}
.mm-quick a:nth-of-type(6){border-left-color:#06B6D4}
/* 工作台下拉（导航右侧「工作台」→ AI Agent / GEO 两个入口） */
.ws-item .ws-btn{display:inline-flex;align-items:center;gap:6px}
.ws-item .ws-btn .caret{transition:transform .25s var(--ease)}
.ws-item:hover .ws-btn .caret,.ws-item.open .ws-btn .caret{transform:rotate(180deg)}
.ws-drop{width:352px;left:auto;right:0;transform:translate(0,10px);
transform-origin:top right;padding:14px}
.nav-item:hover .ws-drop,.nav-item.open .ws-drop,.nav-item:focus-within .ws-drop{transform:translate(0,0)}
.ws-drop-in{display:flex;flex-direction:column;gap:8px}
.ws-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);
background:var(--soft);transition:all .22s var(--ease)}
.ws-card:hover{background:#fff;box-shadow:var(--sh-hover);transform:translateY(-2px)}
.ws-card .ws-ic{flex:none;min-width:48px;height:42px;padding:0 11px;border-radius:13px;display:flex;align-items:center;
justify-content:center;font-weight:800;font-size:14.5px;letter-spacing:-.02em;color:#fff}
.ws-card.agent .ws-ic{background:linear-gradient(135deg,#6D5AE6,#5B8CFF)}
.ws-card.geo .ws-ic{background:linear-gradient(135deg,#00A870,#2ED39A)}
.ws-card .ws-txt{display:flex;flex-direction:column}
.ws-card .ws-txt b{font-size:15px;font-weight:700;color:var(--ink)}
.ws-card .ws-txt em{font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px}
/* 移动端 */
.burger{display:none;flex-direction:column;gap:5px;padding:10px}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:all .25s var(--ease)}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;top:calc(var(--nav-h) + var(--sat));background:#fff;z-index:89;padding:18px 26px 40px;
display:none;flex-direction:column;gap:2px;overflow-y:auto}
.mobile-menu.open{display:flex}
/* 折叠菜单：跟电脑端一样居中显示（此前是左对齐，视觉上偏一边） */
.mobile-menu a{padding:13px 6px;font-size:16.5px;font-weight:600;border-bottom:1px solid var(--line);
text-align:center;letter-spacing:.02em}
.mobile-menu a.mm-sub{padding:9px 6px 15px;font-size:13.5px;color:var(--brand);font-weight:500;
text-align:center}
.mobile-menu .btn{margin-top:18px;border-bottom:0;justify-content:center;text-align:center}
/* 菜单容器内收但整体居中，避免大屏手机上文字拉得太开 */
.mobile-menu>.mm-wrap{width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column}
/* ==========================================================================
Hero（钉钉首屏：超大标题 + 气泡高亮 + 双按钮 + Tab + 产品舞台）
========================================================================== */
.hero{position:relative;padding:calc(132px + var(--sat)) 0 0;overflow:hidden;
background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FC 62%,var(--bg) 100%)}
.hero-center{text-align:center;position:relative;z-index:2}
.hero-title{margin-top:26px;letter-spacing:.01em}
/* Hero 徽章
注意 margin-bottom：标题「AI 时代的新 [增长] 方式」里的高亮色块 .bub
是 inline-block + 上下 padding + ::after 小尾巴，它的**背景会向上溢出色块文字框**。
徽章原本没有下外边距、h1 也没有上外边距，两者边对边紧贴（实测间距 0px），
于是色块的上溢部分正好压在徽章下沿 —— 用户看到的就是「徽章和色块叠在一起」。
这里显式给 22px 呼吸位（手机端 26px，见下方 media query）。 */
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
color:var(--body);background:var(--soft);border-radius:var(--pill);padding:8px 18px;
margin-bottom:22px}
.hero-badge i{width:7px;height:7px;border-radius:50%;background:var(--brand);
box-shadow:0 0 0 4px rgba(109,94,224,.14)}
.hero-sub{font-size:clamp(15px,1.5vw,18px);color:var(--muted);margin-top:26px;line-height:1.85}
/* 副标题手机端换行控制：归浦 AI 提供两条产品线——（换行）后，产品线一行显示不折断 */
.hero-sub .hs-br{display:none}
.hero-sub .hs-l1{white-space:nowrap}
.hero-sub .hs-l2{display:inline}
/* ==========================================================================
Hero 主标题：逐字「弹出」动画（v5.3.5 无光标）
- 每个字从 0.42 缩放 + 模糊 → 弹出到正常，带轻微上浮
- 无光标；完成后「增长」高亮词脉冲 + 蓝色光晕扫过
- prefers-reduced-motion / 无 JS：静态完整显示（兜底）
========================================================================== */
.hero-type{position:relative;display:block;overflow:visible;padding:0 .1em}
.hero-type .ht-line{display:block}
.ht-char{display:inline-block;opacity:0;transform:translateY(.42em) scale(.4);
filter:blur(8px);transform-origin:50% 100%;
will-change:transform,opacity,filter;
transition:transform .68s cubic-bezier(.16,1.2,.32,1),opacity .44s var(--ease),filter .52s var(--ease)}
html.js .hero-type.typing .ht-char.on{opacity:1;transform:none;filter:none}
html.js .hero-type.typing .ht-char{opacity:0}
/* 静态兜底：无 JS 或未启动动画时完整可见 */
html:not(.js) .ht-char{opacity:1;transform:none;filter:none}
.hero-type.typed .ht-char{opacity:1;transform:none;filter:none}
/* 入场结束（typed）后不再需要合成层：撤销 will-change，
避免 iOS Safari 回收「已提升但已闲置」的层时把字绘制成空白。
JS 侧也会在 finish() 后清掉内联 will-change，这里做 CSS 兜底。 */
.hero-type.typed .ht-char{will-change:auto}
/* 光标已移除（v5.3.5） */
.hero-type .ht-caret{display:none!important}
/* 光晕扫过：用 background-position 动画，避免绝对定位元素撑大 scrollWidth */
html.js .hero-type.typed::after{content:"";position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(100deg,transparent 40%,rgba(109,94,224,.13) 50%,transparent 60%);
background-size:260% 100%;background-position:160% 0;pointer-events:none;
animation:htSweep 1.15s var(--ease) .05s 1 both}
@keyframes htSweep{from{background-position:160% 0}to{background-position:-60% 0}}
/* 高亮词「增长」脉冲 */
html.js .hero-type.typed .bub{animation:bubPulse 1.9s var(--ease) infinite}
@keyframes bubPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* ==========================================================================
Hero 轮播标语：固定居中「AI 时代」+ 逐字入场动画 + 圆点切换
========================================================================== */
.hero-rotator{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:20px}
.rot-stage{position:relative;display:grid;justify-items:center;perspective:620px;
min-height:1.5em;line-height:1.5;
font-size:clamp(19px,3.2vw,38px);font-weight:700;letter-spacing:.01em;color:var(--ink)}
.rot-item{grid-area:1/1;display:flex;align-items:center;justify-content:center;text-align:center;
max-width:18ch;opacity:0;pointer-events:none}
.rot-item.on{opacity:1;pointer-events:auto}
.rot-item i{font-style:normal;background:linear-gradient(118deg,#6D5AE6,#6D5AE6 70%);
-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;padding:0 .04em}
.rot-ch{display:inline-block;opacity:0;transform:translateY(108%) rotateX(-55deg);transform-origin:bottom;
filter:blur(7px);will-change:transform,opacity,filter;
transition:transform .62s var(--ease),opacity .5s var(--ease),filter .5s var(--ease)}
.rot-item.on .rot-ch{opacity:1;transform:none;filter:none;transition-delay:calc(var(--i,0)*34ms)}
.rot-item:not(.on) .rot-ch{transition-delay:calc((var(--n,1) - var(--i,0))*16ms)}
.rot-dots{display:flex;gap:9px}
.rot-dots button{width:8px;height:8px;border-radius:50%;background:rgba(10,10,10,.16);
padding:0;transition:all .3s var(--ease)}
.rot-dots button:hover{background:rgba(10,10,10,.34)}
.rot-dots button.on{width:26px;border-radius:4px;background:var(--ink)}
/* v5.5：指标改为「方框」——半透明白卡，随 Hero 渐变背景自适应，整体更整洁 */
.hero-stats{display:flex;justify-content:center;gap:clamp(12px,1.8vw,20px);margin-top:44px;flex-wrap:wrap}
/* V5.5.1 指标框：去掉"葬礼感"，改为有温度的品牌浅彩卡 + 左侧色条 + 数值渐变 */
.metric{position:relative;text-align:center;overflow:hidden;
background:linear-gradient(165deg,#FFFFFF 0%,#F7FAFF 100%);
border:1px solid rgba(109,94,224,.14);
border-radius:18px;padding:18px 28px 16px;min-width:142px;
box-shadow:0 4px 16px rgba(109,94,224,.07),0 1px 2px rgba(10,10,10,.03);
transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
/* 顶部一道品牌渐显高光，四个框各自错开色相，避免整排死板 */
.metric::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--brand),#A99CF5);
transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.metric:hover::before{transform:scaleX(1)}
.metric:nth-child(2){background:linear-gradient(165deg,#FFFFFF 0%,#F5FBF8 100%);border-color:rgba(0,168,112,.16);
box-shadow:0 4px 16px rgba(0,168,112,.08),0 1px 2px rgba(10,10,10,.03)}
.metric:nth-child(2)::before{background:linear-gradient(90deg,#00A870,#5BD6A8)}
.metric:nth-child(3){background:linear-gradient(165deg,#FFFFFF 0%,#F8FBFF 100%);border-color:rgba(91,137,216,.16);
box-shadow:0 4px 16px rgba(91,137,216,.08),0 1px 2px rgba(10,10,10,.03)}
.metric:nth-child(3)::before{background:linear-gradient(90deg,#2E7BF6,#A99CF5)}
.metric:nth-child(4){background:linear-gradient(165deg,#FFFFFF 0%,#FFF9F4 100%);border-color:rgba(230,120,20,.16);
box-shadow:0 4px 16px rgba(230,120,20,.08),0 1px 2px rgba(10,10,10,.03)}
.metric:nth-child(4)::before{background:linear-gradient(90deg,#E67814,#FFB35C)}
.metric:hover{transform:translateY(-3px);border-color:rgba(109,94,224,.3);
box-shadow:0 10px 26px rgba(109,94,224,.13),0 2px 4px rgba(10,10,10,.04)}
/* 关键修复：数字与单位必须整体成行，杜绝「17 换行 +」 */
.metric big{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:800;
white-space:nowrap;letter-spacing:-.02em;line-height:1.1;
font-variant-numeric:tabular-nums;
background:linear-gradient(135deg,#0A0A0A 30%,#6D5AE6 130%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metric:nth-child(2) big{background:linear-gradient(135deg,#0A0A0A 30%,#00A870 130%);
-webkit-background-clip:text;background-clip:text}
.metric:nth-child(3) big{background:linear-gradient(135deg,#0A0A0A 30%,#2E7BF6 130%);
-webkit-background-clip:text;background-clip:text}
.metric:nth-child(4) big{background:linear-gradient(135deg,#0A0A0A 30%,#E67814 130%);
-webkit-background-clip:text;background-clip:text}
.metric span{display:block;margin-top:5px;font-size:13px;color:var(--muted);white-space:nowrap}
/* 关键：big 内部的计数 span 必须回到 inline —— 否则会被上面的 .metric span{display:block}
命中，导致「17」与「+」被强行拆成两行 */
.metric big span{display:inline;font-size:inherit;color:inherit;font-weight:inherit;
margin:0;white-space:inherit}
/* Hero 下的产品 Tab（钉钉：钉钉9.0 / 千问办公 / AI听记…） */
.hero-tabs{display:flex;justify-content:center;gap:clamp(18px,3vw,42px);margin-top:52px;
position:relative;z-index:2;flex-wrap:wrap}
.hero-tabs button{font-size:14.5px;font-weight:600;color:var(--muted);padding:8px 4px;
position:relative;transition:color .2s var(--ease)}
.hero-tabs button:hover{color:var(--ink)}
.hero-tabs button.on{color:var(--ink);font-weight:700}
.hero-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
background:var(--ink);border-radius:2px}
/* 产品舞台：大白卡 + 真实界面截图 */
.hero-stage{position:relative;z-index:2;margin-top:34px;padding-bottom:0}
/* 四角全圆角（此前是「上圆角 + 下直角」，视觉上像被切掉一半）
v5.5：去投影，改为干净的描边卡片（用户反馈卡片要更干净、无阴影） */
.stage-shell{background:#fff;border-radius:var(--r-xl);
box-shadow:none;
border:1px solid var(--line);overflow:hidden;max-width:1120px;margin:0 auto}
.stage-head{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.stage-dots{display:flex;gap:7px}
.stage-dots i{width:11px;height:11px;border-radius:50%;background:var(--soft-2)}
.stage-dots i:first-child{background:#FFD9D3}.stage-dots i:nth-child(2){background:#FFEDC2}
.stage-dots i:nth-child(3){background:#D6F2DF}
.stage-url{flex:1;max-width:340px;margin:0 auto;background:var(--soft);border-radius:8px;
font-size:12px;color:var(--muted);text-align:center;padding:6px 14px}
.stage-view{position:relative;background:var(--soft);aspect-ratio:16/10;border-radius:0 0 var(--r-xl) var(--r-xl)}
.stage-pane{display:none;position:absolute;inset:0;animation:fadeUp .5s var(--ease)}
.stage-pane.on{display:block}
/* 从左上角开始铺，保证界面截图的主体（导航 / 指标 / 列表）完整可见 */
.stage-pane img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;border-radius:0 0 var(--r-xl) var(--r-xl)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ==========================================================================
AI 卡轨（钉钉「AI 落不落地，业务说了算」同款横向滑卡）
========================================================================== */
.rail-wrap{position:relative}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:none;padding:8px 4px 26px;
scrollbar-width:none;-ms-overflow-style:none;cursor:grab;overflow-anchor:none}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail>*{flex:0 0 clamp(300px,26vw,384px)}
.rail .ai-card.clone{box-shadow:none}
/* 卡轨左右切换按钮（常驻自动播放，按钮仅做手动切换） */
.rail-ctl{display:flex;gap:12px;justify-content:center;margin-top:6px}
.rail-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
transition:all .22s var(--ease)}
.rail-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-2px);
box-shadow:0 10px 26px rgba(109,94,224,.28)}
.rail-btn:active{transform:scale(.94)}
/* 钉钉风 AI 卡：粉彩小标签 + 大标题 + 副标 + UI 图 + 黑圆箭头
v5.5：卡片干净化——去投影，仅保留细描边；hover 仅微浮起 + 描边加深 */
.ai-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-lg);box-shadow:none;
padding:28px 28px 22px;min-height:440px;position:relative;transition:all .26s var(--ease)}
.ai-card:hover{border-color:#CFD6E2;transform:translateY(-4px)}
.ai-card .cat{font-size:13px;font-weight:600;letter-spacing:.02em}
.ai-card h3{font-size:clamp(22px,2vw,27px);font-weight:800;margin-top:12px}
.ai-card .sub{font-size:14.5px;color:var(--muted);margin-top:8px}
.ai-card .art{margin-top:auto;padding-top:26px}
.ai-card .art-frame{border-radius:var(--r-md);overflow:hidden;background:#fff;
border:1px solid var(--line);box-shadow:none}
.ai-card .art-frame img{width:100%;height:190px;object-fit:cover;object-position:top left}
/* 箭头移到卡片空白区居中，避免遮挡内容（不再绝对定位右下） */
.ai-card .go{position:static;margin:18px auto 0;align-self:center}
.ai-card:hover .go{background:var(--brand);transform:translateX(4px)}
/* 手机端：卡片收窄为可横向滚动的滑卡，避免整卡铺满导致无法滑动 */
@media (max-width:640px){
.rail{gap:14px;scroll-snap-type:x proximity}
.rail>*{flex:0 0 min(76vw,300px)}
.ai-card{padding:22px 22px 18px;min-height:360px}
.ai-card h3{font-size:20px}
.ai-card .sub{font-size:13.5px}
.ai-card .art{padding-top:18px}
.ai-card .art-frame img{height:150px}
}
a.ai-card{color:inherit}
/* 粉彩 UI 缩略件（无截图时的轻量 mockup）—— v5.5 去投影，改细描边 */
.mini-ui{border-radius:var(--r-md);padding:16px;display:grid;gap:10px;background:#fff;
border:1px solid var(--line);box-shadow:none}
.mini-ui .row{display:flex;gap:10px}
.mini-ui .chip{border-radius:10px;padding:9px 12px;font-size:12px;font-weight:600;flex:1;
text-align:center}
.mini-ui .bar{height:10px;border-radius:6px;background:var(--soft-2)}
.mini-ui .bar.w60{width:60%}.mini-ui .bar.w80{width:80%}
/* ==========================================================================
「每一项工作，都配一个会干活的 AI」粉彩宫格
========================================================================== */
.work-grid{display:grid;grid-template-columns:1.15fr 2fr;gap:22px;align-items:stretch}
.work-main{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-card);
border-radius:var(--r-lg);padding:32px;display:flex;
flex-direction:column;transition:all .26s var(--ease);position:relative}
.work-main:hover{box-shadow:var(--sh-hover);border-color:#D9DEE7}
.work-main h3{font-size:clamp(24px,2.4vw,32px);font-weight:800}
.work-main .art-frame{border-radius:var(--r-md);overflow:hidden;margin-top:auto;
box-shadow:var(--sh-card)}
.work-main .art-frame img{width:100%;height:300px;object-fit:cover;object-position:top left}
.work-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{border-radius:var(--r-md);padding:22px 18px;display:flex;flex-direction:column;gap:12px;
transition:all .24s var(--ease);min-height:128px;position:relative}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.tile .ic{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;
align-items:center;justify-content:center;box-shadow:var(--sh-card)}
.tile .ic svg{width:22px;height:22px}
.tile b{font-size:15.5px;font-weight:700}
.tile span{font-size:12.5px;color:rgba(10,10,10,.55);line-height:1.55}
.tile.mint{background:var(--pk-mint)}.tile.blue{background:var(--pk-blue)}
.tile.violet{background:var(--pk-violet)}.tile.orange{background:var(--pk-orange)}
.tile.pink{background:var(--pk-pink)}.tile.yellow{background:var(--pk-yellow)}
.tile.cyan{background:var(--pk-cyan)}.tile.lime{background:var(--pk-lime)}
.tile.soft{background:var(--soft)}
.speech-tag{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:#fff;
background:#00A870;border-radius:8px 16px 16px 16px;padding:7px 15px}
.speech-tag.blue{background:var(--brand)}
/* ==========================================================================
GEO 展示区（静态展示，不做滑动）
========================================================================== */
.geo-show{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(36px,5vw,80px);align-items:center}
.geo-show .plat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.geo-show .plat-row span{display:inline-flex;align-items:center;gap:7px;background:#fff;
border:1px solid var(--line);border-radius:var(--pill);padding:7px 15px;font-size:13px;
font-weight:600;color:var(--body)}
.geo-show .plat-row span img,.geo-show .plat-row span .pdot{width:18px;height:18px;border-radius:50%}
.geo-shot{position:relative}
.geo-shot .frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 70px rgba(10,10,10,.13);
border:1px solid var(--line)}
.geo-shot .frame img{width:100%;height:auto}
.geo-shot .float-chip{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--sh-hover);
padding:12px 18px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:9px}
.geo-shot .fc1{right:-18px;top:34px}
.geo-shot .fc2{left:-22px;bottom:40px}
.geo-shot .float-chip i{width:9px;height:9px;border-radius:50%;background:#00C16E}
.geo-show .feat-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:28px}
.geo-show .feat-list .fl{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;font-weight:600}
.geo-show .feat-list .fl i{flex:none;width:30px;height:30px;border-radius:9px;background:var(--pk-blue);
display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px}
.geo-show .feat-list .fl small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
/* 免费检测横幅 */
/* V5.8.5 · G12：底部 CTA 由深色块改为浅色渐变卡，与 .big-cta 全站统一，
避免「浅色页面 + 突然一块近黑」的视觉断裂 */
.diag-band{margin-top:clamp(48px,6vw,84px);
background:linear-gradient(135deg,#F4F8FF 0%,#F1F6FE 55%,#EFF6F4 100%);
border:1px solid var(--line);border-radius:var(--r-xl);
padding:clamp(36px,4.5vw,60px) clamp(28px,5vw,72px);color:var(--ink);position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.diag-band::before{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;
border-radius:50%;background:radial-gradient(circle,rgba(109,94,224,.14),transparent 65%)}
.diag-band h3{font-size:clamp(22px,2.6vw,34px);font-weight:800;position:relative;color:var(--ink)}
.diag-band p{color:var(--body);margin-top:12px;font-size:15px;position:relative}
.diag-band .btn{position:relative}
.diag-band .tag.white{background:var(--pk-blue);color:var(--pk-blue-t)}
/* 诊断台：桌面左右分栏，窄屏单列（避免 minmax(320px) 在手机端撑开视口） */
.diag-split{display:grid;grid-template-columns:minmax(320px,5fr) 7fr;gap:24px;align-items:start}
@media (max-width:860px){.diag-split{grid-template-columns:1fr}}
/* ==========================================================================
三白卡（AI 无处不在 / 开箱即用 / 安全可信）
========================================================================== */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trio .card{padding:40px 32px;text-align:center}
.trio .ic-box{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;
justify-content:center;margin:0 auto 24px}
.trio .ic-box svg{width:34px;height:34px}
.trio h3{font-size:22px;font-weight:800}
.trio p{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.75}
.trio .card .link-arrow{justify-content:center;display:inline-flex}
/* ==========================================================================
案例大图卡（钉钉：真实照片 + 大指标 + 黑圆箭头）
========================================================================== */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px);margin-top:40px}
/* 案例卡：白底 + 边框分割，卡片之间清晰分隔 */
.case-big{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-card);
transition:box-shadow .28s var(--ease),border-color .28s var(--ease)}
.case-big:hover{box-shadow:var(--sh-hover);border-color:#D7DBE3}
.case-big .ph{position:relative;height:clamp(200px,24vw,300px);overflow:hidden;
background:var(--soft);border-bottom:1px solid var(--line)}
/* 图片固定显示：悬停不再缩放/变色，避免“点了就变颜色” */
.case-big .ph img{width:100%;height:100%;object-fit:cover;display:block}
.case-big .ph .clogo{position:absolute;left:22px;top:20px;background:rgba(255,255,255,.94);
backdrop-filter:blur(8px);border-radius:10px;padding:7px 15px;font-size:13px;font-weight:700;
border:1px solid rgba(255,255,255,.6)}
.case-big .go{position:absolute;right:18px;bottom:18px;z-index:3;box-shadow:0 8px 22px rgba(10,10,10,.28)}
.case-big .bd{padding:22px 24px 26px;padding-right:76px}
.case-big .bd .row1{display:flex;gap:10px;margin-bottom:12px}
.case-big .num{font-size:clamp(28px,2.6vw,38px);font-weight:800;letter-spacing:.01em;line-height:1.1}
.case-big h3{font-size:16px;font-weight:700;margin-top:8px}
.case-big p{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.68}
/* Logo 墙 */
.case-logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,3vw,40px)}
.logo-chip{position:relative;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-md);padding:20px 20px 18px;text-align:center;
font-weight:700;font-size:15px;transition:all .24s var(--ease);overflow:hidden;box-shadow:var(--sh-card)}
.logo-chip::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
background:linear-gradient(90deg,#6D5AE6,#00A870);opacity:0;transition:opacity .24s var(--ease)}
.logo-chip .lc-ic{display:flex;width:36px;height:36px;border-radius:11px;margin:0 auto 11px;
background:linear-gradient(135deg,#EAF1FF,#F2F8FF);color:var(--brand);border:1px solid rgba(109,94,224,.14);
align-items:center;justify-content:center;transition:all .24s var(--ease)}
.logo-chip .lc-ic svg{width:18px;height:18px}
.logo-chip b{display:block;font-size:15px;color:var(--ink)}
.logo-chip small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:5px}
.logo-chip:hover{box-shadow:var(--sh-hover);transform:translateY(-4px);border-color:rgba(109,94,224,.25)}
.logo-chip:hover::before{opacity:1}
.logo-chip:hover .lc-ic{background:linear-gradient(135deg,#6D5AE6,#8B7BF0);color:#fff;border-color:transparent}
/* ==========================================================================
服务卡（钉钉：提供全方位服务 7×24）
========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.svc-card{border-radius:var(--r-lg);padding:28px 26px;min-height:210px;position:relative;
display:flex;flex-direction:column;transition:all .24s var(--ease);overflow:hidden}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.svc-card h4{font-size:19px;font-weight:800}
.svc-card p{font-size:13.5px;font-weight:600;color:rgba(10,10,10,.8);margin-top:10px;line-height:1.65}
.svc-card p b{font-weight:800;color:var(--brand)}
.svc-card .dot-arw{position:absolute;right:20px;bottom:20px;width:38px;height:38px}
.svc-card.mint{background:var(--pk-mint)}.svc-card.blue{background:var(--pk-blue)}
.svc-card.violet{background:var(--pk-violet)}.svc-card.yellow{background:var(--pk-yellow)}
.svc-card.dark{background:linear-gradient(150deg,#2E7BF6,#4C93FF);color:#fff}
.svc-card.dark p{color:rgba(255,255,255,.92)}
.svc-card.dark p b{color:#FFE9A8}
.svc-card.dark .dot-arw{background:#fff;color:#2E7BF6}
/* ==========================================================================
价格卡（钉钉：简单、透明的价格）
========================================================================== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.price-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-card);
border-radius:var(--r-lg);padding:32px 30px;position:relative;
display:flex;flex-direction:column;transition:all .26s var(--ease)}
.price-card:hover{box-shadow:var(--sh-hover);transform:translateY(-5px);border-color:#D9DEE7}
/* v5.5：专业版「背景墙」原为纯白，与页面白底重合看不出边界。
改为品牌浅色渐变 + 明确描边（不靠阴影区分，卡片更干净） */
.price-card.hot{background:linear-gradient(180deg,#F3F7FF 0%,#E8F1FE 100%);
border-color:rgba(109,94,224,.42);box-shadow:none;outline:none}
.price-card.hot:hover{border-color:var(--brand)}
.price-card .who{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px}
.price-card .plan{font-size:14px;color:var(--muted);margin-top:20px}
.price-card .price{font-size:clamp(34px,3.4vw,46px);font-weight:800;margin-top:4px;line-height:1.1}
.price-card .price small{font-size:14px;font-weight:500;color:var(--muted)}
.price-card .desc{font-size:13px;color:var(--muted);margin-top:10px;padding-bottom:20px;
border-bottom:1px solid var(--line)}
.price-card .feats{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:13px;flex:1}
.price-card .feats li{position:relative;padding-left:26px;font-size:14.5px;color:var(--body)}
.price-card .feats li::before{content:"";position:absolute;left:0;top:.4em;width:16px;height:16px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230A0A0A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* V5.5.4：积分小字从按钮右侧移到按钮上方。
原来 .foot 是 space-between，「1,000 分/月」被挤在按钮右边只剩窄条，
手机端直接折成两行。改成纵向排列：小字在上、按钮在下，按钮限宽不拉满。 */
.price-card .foot{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
.price-card .foot .credits{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.4}
.price-card .foot .btn-pick{align-self:center;width:auto;min-width:118px;max-width:100%;
padding:9px 20px;white-space:nowrap}
.price-card .foot .link-arrow{font-size:14px}
/* 手机上卡片单列，按钮可以稍微宽一点但仍不拉满整卡 */
@media (max-width:640px){
.price-card .foot{gap:9px;margin-top:22px}
.price-card .foot .credits{font-size:12px}
.price-card .foot .btn-pick{min-width:132px;padding:10px 22px;font-size:13.5px}
}
/* v5.5：「推荐」角标从左上角移到右上角 */
.p.badge,.price-card .pbadge{position:absolute;top:-14px;left:auto;right:26px;background:var(--brand);color:#fff;
font-size:12.5px;font-weight:700;border-radius:var(--pill);padding:5px 15px;
letter-spacing:.02em}
/* 版本对比（Apple 机型对比式） */
/* 外层负责横向滚动 + 竖向留白：把 overflow-y 交给外面，
内部滚动容器只做 x 方向，sticky 首列才能正确钉住 */
.compare-scroll{margin-top:40px;
border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-card);
overflow:hidden}
.compare-scroll .compare-in{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;scrollbar-width:thin}
.compare{border-collapse:separate;border-spacing:0;width:100%;min-width:680px}
.compare th,.compare td{padding:15px 14px;text-align:center;border-bottom:1px solid var(--line);font-size:13.5px}
/* 表头 sticky 到滚动容器顶部（在 .compare-in 内） */
.compare thead th{position:sticky;top:0;z-index:3;background:#fff;vertical-align:bottom}
/* 首列 sticky 到滚动容器左侧：z-index 必须高于表头才能压住滑过来的版本列。
实底 + 右侧投影 —— 滑过来的列必须被完全遮住。
关键坑：相邻列的「选择此版本」按钮是**在列内居中**的，
窄列时按钮左边缘会探到首列右边缘之后、右边缘又超出列宽，
于是钉住列右边会露出半截黑胶囊。
两道保险：
① 表头单元格 overflow:hidden 把按钮裁在本列内（首列除外）；
② 真滑起来时（.is-scrolled）才用 ::after 往右补 40px 白底兜住越界像素
—— 未滑动时绝不能画，否则会盖住第二列的文字（表现为「本验版」「个账号」）。 */
.compare .feat-col{position:sticky;left:0;z-index:4;background:#fff;text-align:left;font-weight:700;
color:var(--ink);min-width:132px;max-width:132px}
.compare .feat-col::after{content:"";position:absolute;top:0;bottom:-1px;left:100%;width:40px;
background:#fff;pointer-events:none;opacity:0;transition:opacity .18s linear}
.compare-in.is-scrolled .compare .feat-col::after{opacity:1;
box-shadow:8px 0 10px -9px rgba(16,17,26,.30)}
/* 表头里的首列同时命中 top+left，必须给最高层级，否则会被其它表头压住 */
.compare thead .feat-col{z-index:6;background:#fff;overflow:visible}
/* 表头非首列：把按钮裁在本列内，杜绝越界到钉住列右边 */
.compare thead th:not(.feat-col){overflow:hidden}
.compare thead th{font-weight:600;border-bottom:2px solid var(--line)}
.compare .c-name{display:block;font-size:15px;font-weight:800;color:var(--ink)}
.compare .c-price{display:block;margin:6px 0 12px;font-size:14px;font-weight:700;color:var(--brand)}
.compare .c-price small{font-size:11.5px;font-weight:500;color:var(--muted)}
/* 「选择此版本」按钮：统一样式、不拉满整列宽度，避免又长又胖。
用 nowrap + auto 宽度保证永远单行（历史问题：窄列里被挤成两行）。 */
.compare th .btn{width:auto;max-width:132px;margin:8px auto 0;padding:8px 14px;font-size:12.5px;
white-space:nowrap;height:auto;min-height:32px}
.compare tbody tr:hover td{background:var(--soft)}
.compare .feat-col,.compare td.feat-col{font-weight:600}
.compare td.yes{color:var(--brand)}
.compare td.yes svg{vertical-align:-4px}
.compare td.no{color:var(--muted)}
.compare td.no .dash{opacity:.4}
.compare td.val{font-weight:700;color:var(--ink)}
.compare th.recommended{background:#EDF3FF}
.compare tbody td.recommended{background:rgba(109,94,224,.055)}
/* v5.5：推荐列右上角角标 + 顶部强调线，避免与页面背景「重合」看不清 */
.compare thead th.recommended{position:relative;box-shadow:inset 0 -2px 0 rgba(109,94,224,.25),
inset 0 3px 0 var(--brand)}
.rec-badge{position:absolute;top:9px;right:10px;background:var(--brand);color:#fff;
font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:var(--pill);padding:3px 10px;
box-shadow:0 4px 12px rgba(109,94,224,.32);white-space:nowrap}
/* ==========================================================================
实验室 / 资源卡
========================================================================== */
.lab-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
display:flex;flex-direction:column;gap:12px;transition:all .24s var(--ease);min-height:200px;
box-shadow:var(--sh-card)}
.lab-card:hover{box-shadow:var(--sh-hover);transform:translateY(-4px);border-color:#D9DEE7}
.lab-card h4{font-size:17.5px;font-weight:700;line-height:1.5}
.lab-card h4 a:hover{color:var(--brand)}
.lab-card p{font-size:13.5px;color:var(--muted);line-height:1.7;flex:1}
.lab-card .foot{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.lab-card .foot .go{font-weight:600;color:var(--ink)}
.lab-card:hover .foot .go{color:var(--brand)}
/* ==========================================================================
底部大 CTA（钉钉：AI 时代的新工作方式 从这里开始）
========================================================================== */
/* v5.5：底部大 CTA 统一为浅色结构 + 柔和品牌色氛围（全站少黑白、多颜色） */
.big-cta{position:relative;overflow:hidden;padding:clamp(64px,7vw,96px) 0;text-align:center;
background:linear-gradient(180deg,#FFFFFF 0%,#F6F9FF 100%);border-top:1px solid var(--line)}
.big-cta::before{content:"";position:absolute;left:50%;top:-170px;transform:translateX(-50%);
width:min(720px,90vw);height:340px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(109,94,224,.12),transparent 68%)}
.big-cta::after{content:"";position:absolute;right:-90px;bottom:-120px;width:320px;height:320px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(0,168,112,.10),transparent 68%)}
.big-cta .container{position:relative;z-index:1}
.big-cta .display{font-size:clamp(34px,4.6vw,58px)}
.big-cta .lead{margin-top:16px}
.big-cta .btn-row{justify-content:center;margin-top:32px}
.underline-scribble{position:relative;white-space:nowrap}
.underline-scribble::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.14em;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7C30 2 60 9 118 4' fill='none' stroke='%231B6BF5' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* ==========================================================================
页脚（钉钉 6 列）
========================================================================== */
.footer{background:var(--soft);padding:0 0 40px;margin-top:0}
.footer-cta{text-align:center;padding:96px 32px 80px;border-bottom:1px solid var(--line)}
/* v5.3.4：品牌 + 导航紧凑排布，导航紧随「公司介绍」右侧，不留大空白（对齐 v5.2） */
.footer-grid{max-width:1280px;margin:0 auto;padding:56px 32px 40px;display:grid;
grid-template-columns:minmax(220px,300px) 1fr;gap:44px 40px;align-items:start}
.footer-grid .foot-brand{grid-column:auto;max-width:340px}
.footer-grid .foot-nav{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px 18px}
.footer-grid .brand img{height:24px}
.footer-grid p{font-size:13.5px;color:var(--muted);line-height:1.8}
.footer-grid .col h4{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:16px;
letter-spacing:.04em}
.footer-grid .col a{display:block;font-size:13.5px;color:var(--muted);padding:5px 0;transition:color .18s}
.footer-grid .col a:hover{color:var(--ink)}
.copyright{max-width:1240px;margin:0 auto;padding:26px 32px 0;border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.copyright a{color:var(--muted)}
.copyright a:hover{color:var(--ink)}
/* v5.5：后台「链接管理」填充的友情链接条 */
.foot-links{max-width:1280px;margin:0 auto;padding:20px 32px 0;display:flex;align-items:center;
gap:10px 18px;flex-wrap:wrap;font-size:13px;border-top:1px solid var(--line);margin-top:22px}
.foot-links .fl-t{font-size:12px;font-weight:700;color:var(--muted-2);letter-spacing:.08em}
.foot-links a{color:var(--muted);transition:color .18s}
.foot-links a:hover{color:var(--brand)}
/* ==========================================================================
子页面页头（钉钉风：大标题居中）
========================================================================== */
.page-head{padding:126px 0 52px;text-align:center;background:#fff;border-bottom:1px solid var(--line)}
.page-head.soft{background:var(--soft)}
.page-head .display{font-size:clamp(32px,4.2vw,54px)}
.page-head .lead{max-width:720px;margin-left:auto;margin-right:auto}
.page-head .btn-row{justify-content:center;margin-top:26px}
.page-head .crumb{font-size:13px;color:var(--muted);margin-bottom:16px}
.page-head .crumb a:hover{color:var(--brand)}
/* 截图卡（子页面产品展示通用）：统一浅色浏览器边框，弱化截图内主题色冲突 */
.shot-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
box-shadow:0 18px 60px rgba(10,10,10,.10);background:#fff}
.shot-frame img{width:100%;height:auto;display:block}
.shot-cap{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);
background:#fff}
.shot-cap .u{flex:1;max-width:300px;margin:0 auto;background:var(--soft);border-radius:7px;
font-size:11.5px;color:var(--muted);text-align:center;padding:5px 12px;
display:flex;align-items:center;justify-content:center;gap:6px}
.shot-cap .u::before{content:"";width:9px;height:9px;flex:0 0 auto;
background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
/* 截图区域统一加极淡品牌色描边，进一步弱化截图内部的异色主题 */
.shot-frame{outline:1px solid rgba(109,94,224,.10);outline-offset:-1px}
/* 双产品大卡 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo-card{position:relative;border-radius:var(--r-xl);padding:clamp(32px,3.6vw,52px);overflow:hidden;
color:#fff;min-height:420px;display:flex;flex-direction:column}
.duo-card.agent{background:linear-gradient(135deg,#101828,#1B3A75)}
.duo-card.geo{background:linear-gradient(135deg,#0B3B2E,#5239D8)}
.duo-card h3{font-size:clamp(24px,2.6vw,34px);font-weight:800;margin-top:18px}
.duo-card .sub{color:rgba(255,255,255,.72);margin-top:14px;font-size:15.5px;line-height:1.75}
.duo-skill{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.duo-skill span{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.16);border-radius:var(--pill);padding:6px 14px}
.duo-card .foot{margin-top:auto;padding-top:30px}
.duo-orb{position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
/* 深色段落 */
.section--dark{background:#0D1117;color:#fff}
.section--dark .section-title{color:#fff}
.section--dark .lead{color:rgba(255,255,255,.62)}
/* GEO 浅蓝段 */
.section--geo{background:linear-gradient(180deg,#F4F9FF, #FFFFFF 80%)}
/* 问答演示（GEO 页面用） */
.answer-demo{display:grid;grid-template-columns:1fr 220px 1fr;gap:26px;align-items:center;margin-top:60px}
.answer-col .lab{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.q-box{background:var(--soft);border-radius:var(--r-md);padding:18px 22px;font-size:15.5px;
font-weight:600;line-height:1.6}
.ai-panel-card{background:#101828;border-radius:var(--r-lg);padding:24px;color:#fff}
.answer-item{display:flex;gap:14px;align-items:flex-start}
.answer-item .rank{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.answer-item b{font-size:14.5px}
.answer-item p{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:3px;line-height:1.55}
.demo-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.demo-metric{background:rgba(255,255,255,.06);border-radius:12px;padding:12px;text-align:center}
.demo-metric big{display:block;font-size:22px;font-weight:800}
.demo-metric.up big{color:#4ADE80}
.demo-metric span{font-size:11px;color:rgba(255,255,255,.5)}
.flow-line{display:flex;flex-direction:column;gap:12px}
.flow-step{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted);
opacity:.45;transform:translateX(8px);transition:all .5s var(--ease)}
.flow-step i{width:30px;height:30px;flex:none;border-radius:50%;background:#fff;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px}
.flow-step.done{opacity:1;transform:none;color:var(--ink)}
.flow-step.done i{background:var(--brand);border-color:var(--brand);color:#fff}
/* 行业 Tab */
.ind-tabs{display:flex;justify-content:center;gap:10px;margin-top:44px;flex-wrap:wrap}
.ind-tabs button{padding:11px 24px;border-radius:var(--pill);font-size:14.5px;font-weight:600;
color:var(--body);background:var(--soft);transition:all .2s var(--ease)}
.ind-tabs button:hover{background:var(--soft-2)}
.ind-tabs button.on{background:var(--ink);color:#fff}
.ind-panel{display:none;grid-template-columns:1.2fr 1fr;gap:26px;margin-top:36px}
.ind-panel.on{display:grid;animation:fadeUp .45s var(--ease)}
.ind-main{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,3vw,44px)}
.ind-main h3{font-size:clamp(20px,2.2vw,27px);font-weight:800}
.ind-main p{color:rgba(255,255,255,.66);margin-top:14px;line-height:1.75;font-size:15px}
.ind-side{display:grid;gap:14px}
.ind-point{background:var(--soft);border-radius:var(--r-md);padding:20px 22px;display:flex;gap:16px}
.ind-point i{font-style:normal;font-weight:800;color:var(--brand);font-size:15px}
.ind-point b{display:block;font-size:15px}
.ind-point span{font-size:13px;color:var(--muted);margin-top:3px;display:block}
/* 管线步骤 */
.pipeline{display:flex;justify-content:center;gap:clamp(8px,1.6vw,20px);flex-wrap:wrap}
.pipe-step{text-align:center;opacity:.32;transform:translateY(10px);transition:all .5s var(--ease)}
.pipe-step .bulb{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:15px;margin:0 auto 10px;transition:all .4s var(--ease)}
.pipe-step .cap{font-size:13px;font-weight:600;color:rgba(255,255,255,.75)}
.pipe-step.done{opacity:1;transform:none}
.pipe-step.done .bulb{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 6px rgba(109,94,224,.18)}
/* 数据带 */
.stats-band{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;background:var(--soft);
border-radius:var(--r-xl);padding:clamp(30px,4vw,52px)}
.stat-cell{text-align:center}
.stat-cell big{display:block;font-size:clamp(30px,3.4vw,46px);font-weight:800;
font-variant-numeric:tabular-nums}
.stat-cell span{font-size:13px;color:var(--muted)}
/* 诊断面板 */
.diag-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
padding:clamp(28px,3.6vw,48px);box-shadow:var(--sh-card)}
.diag-panel .field{margin-bottom:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px}
.field .input,.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);
border-radius:12px;padding:13px 16px;font-size:15px;background:#fff;transition:all .2s var(--ease);
color:var(--ink)}
.field .input:focus,.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,94,224,.12)}
.field textarea{min-height:110px;resize:vertical}
.form-msg{margin-top:14px;font-size:14px;font-weight:600;min-height:20px}
.form-msg.ok{color:#00A870}.form-msg.err{color:#E5534B}
/* 企业微信添加卡（联系页） */
.wecom-card{background:linear-gradient(140deg,#F4F9FF,#FFFFFF);border-color:rgba(109,94,224,.22)}
.wecom-qr{display:flex;align-items:center;gap:18px;margin-top:18px}
.wecom-qr img{width:120px;height:120px;border-radius:14px;background:#fff;padding:8px;
border:1px solid var(--line);box-shadow:var(--sh-card);flex:none;object-fit:contain}
.wecom-qr-side p{font-size:14px;color:var(--ink);font-weight:700}
.wecom-qr-side p+p{margin-top:8px}
@media (max-width:640px){.wecom-qr{flex-direction:column;align-items:flex-start}}
/* AI 助手球（常驻入口）—— v5.4 可爱风：柔和糖果渐变 + 有机 blob 造型 + 笑脸图标
位置整体下移，去掉黑色与标准正圆
V5.8.4：整体缩小（68→54px），阴影与渐变同步收敛，降低对内容的遮挡 */
.ai-ball{position:fixed;right:24px;bottom:calc(44px + var(--sab));z-index:92;width:54px;height:54px;
/* 正圆（去掉原先的 blob 变形）+ 上宽下窄的水滴收口：
用 border-radius 的四角差异做轻微收窄，顶角更圆、底角略收 */
border-radius:50% 50% 46% 46% / 52% 52% 50% 50%;
/* 去掉 2.5px 白描边：它正是用户看到的「白边留白」 */
border:0;
background:linear-gradient(160deg,#FFD9E8 0%,#D9E7FD 45%,#C8E4FF 100%);
box-shadow:0 8px 20px rgba(120,153,210,.26);
display:flex;align-items:center;justify-content:center;
/* 头像要撑满圆，所以不能再裁掉溢出 */
overflow:hidden;
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
animation:aiFloat 4.6s ease-in-out infinite}
.ai-ball::before{content:"";position:absolute;inset:0;z-index:0;
border-radius:inherit;
background:linear-gradient(160deg,rgba(255,255,255,.45),rgba(255,255,255,0) 62%);
pointer-events:none}
.ai-ball::after{display:none}
.ai-ball:hover{transform:scale(1.08) translateY(-3px);
box-shadow:0 12px 28px rgba(120,153,210,.36)}
/* 默认：可爱笑脸 —— 放大到几乎撑满整圆 */
.ai-ball .ai-face{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
transition:opacity .22s var(--ease),transform .22s var(--ease)}
.ai-ball .ai-face svg{width:100%;height:100%;display:block}
.ai-ball:hover .ai-face{opacity:0;transform:scale(.7)}
.ai-ball .ai-ball-ic{position:absolute;width:24px;height:24px;z-index:1;opacity:0;transform:scale(.7);
color:#2E7BF6;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.ai-ball .ai-ball-ic svg{width:24px;height:24px}
/* 去掉压在头像上的「AI」小字（用户要求头像填充满、不留白） */
.ai-ball .ai-ball-txt{display:none}
.ai-ball:hover .ai-ball-ic{opacity:1;transform:scale(1)}
.ai-ball .tip{position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(8px);
background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;padding:9px 15px;
border-radius:12px;white-space:nowrap;opacity:0;pointer-events:none;
border:1px solid var(--line);box-shadow:0 10px 26px rgba(16,17,26,.12);
transition:all .25s var(--ease)}
.ai-ball .tip::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
width:10px;height:10px;background:#fff;border-right:1px solid var(--line);border-top:1px solid var(--line);border-radius:2px}
.ai-ball:hover .tip{opacity:1;transform:translateY(-50%)}
@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes aiBlob{
0%,100%{border-radius:48% 52% 46% 54% / 54% 46% 54% 46%}
33%{border-radius:54% 46% 52% 48% / 46% 54% 46% 52%}
66%{border-radius:46% 54% 48% 52% / 52% 48% 54% 46%}}
@keyframes aiRing{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.45);opacity:0}100%{transform:scale(1.45);opacity:0}}
.ai-panel{position:fixed;right:26px;bottom:calc(128px + var(--sab));z-index:92;width:392px;max-width:calc(100vw - 40px);
height:560px;max-height:calc(100vh - 140px);background:#fff;border-radius:22px;
box-shadow:0 24px 80px rgba(10,10,10,.22);display:flex;flex-direction:column;overflow:hidden;
opacity:0;visibility:hidden;transform:translateY(18px);transition:all .3s var(--ease)}
.ai-panel.open{opacity:1;visibility:visible;transform:none}
.ai-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);
background:linear-gradient(120deg,#FFF1F7,#F0F6FF 55%,#EAF6FF)}
.ai-head .av{width:38px;height:38px;border-radius:14px;
background:linear-gradient(145deg,#FFD2E4,#E6E1FB 55%,#BFE2FF);color:#2E7BF6;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none;
border:2px solid #fff;box-shadow:0 6px 16px rgba(120,153,210,.3)}
.ai-head b{display:block;font-size:15px}
.ai-head span:not(.av){font-size:12px;color:var(--muted)}
.ai-head .cls{margin-left:auto;font-size:15px;color:var(--muted);padding:6px}
.ai-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--soft)}
.ai-body .msg{max-width:100%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.7;align-self:stretch}
.ai-body .msg.ai{background:#fff;border:1px solid var(--line);border-radius:4px 16px 16px 16px;align-self:stretch}
/* 用户自己的气泡 —— 原来是 var(--ink) 纯黑，整屏观感像"深色聊天框"，
现在换成跟悬浮球同一套粉紫渐变，正文用深紫保证对比度仍达 WCAG AA */
.ai-body .msg.me{
background:linear-gradient(135deg,#FFE1EE 0%,#E6F0FE 55%,#E4F2FF 100%);
color:#0B3F94;border:1px solid rgba(120,153,210,.24);
border-radius:16px 4px 16px 16px;align-self:flex-end;max-width:100%;
box-shadow:0 6px 16px rgba(120,153,210,.16)}
.ai-body .msg.me a{color:#6D5AE6;font-weight:600}
/* AI 回复保持白底可读性，只加一点紫调描边跟用户气泡呼应 */
.ai-body .msg.ai{background:#fff;border:1px solid rgba(120,153,210,.2);
border-radius:4px 16px 16px 16px;align-self:stretch;
box-shadow:0 2px 8px rgba(120,153,210,.06)}
.ai-body{background:linear-gradient(180deg,#F9FBFF 0%,#F7FAFF 100%)}
.ai-body .msg.ai a{color:var(--brand);font-weight:600}
.ai-quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 10px;background:transparent}
.ai-quick button{font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:var(--pill);
padding:7px 14px;transition:all .18s}
.ai-quick button:hover{border-color:var(--brand);color:var(--brand)}
.ai-in{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:#fff}
.ai-in input{flex:1;border:1.5px solid var(--line);border-radius:var(--pill);padding:11px 18px;font-size:14px}
.ai-in input:focus{outline:none;border-color:var(--brand)}
.ai-in button{width:44px;height:44px;border-radius:50%;
background:linear-gradient(145deg,#FFD2E4,#E6E1FB 55%,#BFE2FF);color:#2E7BF6;flex:none;
border:2px solid #fff;
display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease)}
.ai-in button:hover{box-shadow:0 6px 16px rgba(120,153,210,.38);transform:translateY(-1px)}
/* ==========================================================================
帮助与反馈（/help）：左问答 + 右留言
========================================================================== */
.help-layout{grid-template-columns:minmax(0,7fr) minmax(320px,5fr);gap:28px;align-items:start}
.help-side{position:sticky;top:96px}
@media (max-width:980px){
.help-layout{grid-template-columns:1fr}
.help-side{position:static}
}
.help-search{position:relative;display:flex;align-items:center;gap:10px;
background:#fff;border:1.5px solid var(--line);border-radius:var(--pill);padding:0 18px;height:52px;
transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.help-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,94,224,.1)}
.help-search svg{flex:none}
.help-search .input{flex:1;min-width:0;border:0;padding:0;background:transparent;box-shadow:none}
.help-search .input:focus{outline:none;box-shadow:none;border:0}
.help-count{flex:none;font-size:12.5px;color:var(--muted)}
.help-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 16px}
.help-tabs button{font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:var(--pill);
border:1px solid var(--line);background:#fff;color:var(--body);transition:all .18s var(--ease)}
.help-tabs button:hover{border-color:var(--brand);color:var(--brand)}
.help-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.help-list{display:grid;gap:12px}
.help-item{padding:0;overflow:hidden}
.help-item:hover{box-shadow:var(--sh-card);border-color:#D9DEE7}
.help-q{width:100%;display:flex;align-items:center;gap:14px;padding:20px 22px;text-align:left;
background:none;border:0;cursor:pointer;font:inherit;color:var(--ink)}
.help-q-cat{flex:none;font-size:11.5px;font-weight:700;color:var(--brand);
background:var(--pk-blue);border-radius:6px;padding:4px 8px}
.help-q-txt{flex:1;min-width:0;font-size:16px;font-weight:700;line-height:1.55}
.help-arw{flex:none;color:var(--muted);transition:transform .26s var(--ease)}
.help-item.on .help-arw{transform:rotate(180deg)}
.help-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.help-item.on .help-a{max-height:420px}
.help-a p{padding:0 22px 22px;margin:0;font-size:14.5px;color:var(--body);line-height:1.85}
.help-empty{text-align:center;padding:46px 24px;background:var(--soft);border-radius:var(--r-lg);
border:1px dashed var(--line)}
.help-empty b{font-size:17px;font-weight:800}
.help-empty p{margin-top:8px}
.help-empty .btn{margin-top:16px}
.help-chips{display:flex;gap:8px;flex-wrap:wrap}
.help-chips button{font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--pill);
border:1px solid var(--line);background:#fff;color:var(--body);transition:all .18s var(--ease)}
.help-chips button:hover{border-color:var(--brand);color:var(--brand)}
.help-chips button.on{background:var(--pk-blue);border-color:transparent;color:var(--brand)}
.help-counter{text-align:right;font-size:12px;color:var(--muted);margin-top:6px}
/* Toast */
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--ink);
color:#fff;font-size:14px;font-weight:600;padding:13px 24px;border-radius:var(--pill);z-index:96;
opacity:0;visibility:hidden;transition:all .3s var(--ease);max-width:80vw;text-align:center}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* ==========================================================================
通用排版：孤字收紧（第二行只剩少量字时缩排一行）+ 文本渲染优化
========================================================================== */
.lead,.hero-sub,.section-title,.big-cta .display,.aiera-take{text-wrap:pretty}
[data-fitline].tighten{letter-spacing:-.02em;transform:scale(.965);transform-origin:center}
[data-fitline]{transition:transform .2s var(--ease),letter-spacing .2s var(--ease)}
/* 3D 视差舞台（鼠标轻微倾斜，仅精确指针设备由 JS 启用） */
.tilt-box{perspective:1100px}
.tilt-box .stage-shell,.tilt-box .geo-stage{transform-style:preserve-3d;
transition:transform .35s var(--ease);will-change:transform}
@media (prefers-reduced-motion:reduce){.tilt-box .stage-shell,.tilt-box .geo-stage{transform:none!important}}
/* ==========================================================================
揭示动画（克制：淡入 + 26px 上移）
========================================================================== */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal[data-d]{transition-delay:var(--d,0ms)}
html.js .reveal[data-d="60ms"]{--d:60ms}html.js .reveal[data-d="80ms"]{--d:80ms}
html.js .reveal[data-d="100ms"]{--d:100ms}html.js .reveal[data-d="120ms"]{--d:120ms}
html.js .reveal[data-d="140ms"]{--d:140ms}html.js .reveal[data-d="160ms"]{--d:160ms}
html.js .reveal[data-d="180ms"]{--d:180ms}html.js .reveal[data-d="200ms"]{--d:200ms}
html.js .reveal[data-d="240ms"]{--d:240ms}html.js .reveal[data-d="300ms"]{--d:300ms}
/* ==========================================================================
平台标签（全局复用：钉钉/DeepSeek/豆包…）
========================================================================== */
.plat-row{display:flex;gap:10px;flex-wrap:wrap}
.plat-row span{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
border-radius:var(--pill);padding:7px 14px;font-size:13px;font-weight:600;color:var(--body)}
.plat-row .pdot{width:9px;height:9px;border-radius:50%;flex:none}
/* ==========================================================================
AI 搜索时代（教育：为什么需要 GEO）
========================================================================== */
.aiera-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;text-align:left}
.aiera-col{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);
border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-card)}
.aiera-col > .col-head{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--muted);
text-transform:uppercase;text-align:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.aiera-compare{display:flex;flex-direction:column;gap:14px;flex:1}
.era{border-radius:var(--r-lg);padding:20px 22px;border:1px solid var(--line);background:var(--soft);
text-align:left;position:relative;overflow:hidden}
.era.new{background:linear-gradient(135deg,#EAF1FF,#F4F9FF);border-color:rgba(109,94,224,.28)}
.era::before{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
background:radial-gradient(circle,rgba(109,94,224,.10),transparent 70%);pointer-events:none}
.era.old::before{background:radial-gradient(circle,rgba(120,120,120,.10),transparent 70%)}
.era-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.era-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--muted);
background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:3px 14px}
.era-tag.accent{color:#fff;background:var(--brand);border-color:var(--brand)}
.era-share{font-size:11.5px;font-weight:700;color:var(--muted)}
.era-share b{font-size:13px;margin-right:2px}
.era-share.up{color:var(--brand)}
.era-body{display:flex;flex-direction:column;gap:12px;margin:16px 0 14px}
/* 过去：搜索引擎图标 */
.era-icons{display:flex;align-items:center;gap:8px}
.era-ic{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.era-ic svg{width:20px;height:20px}
.era-ic.sub{width:auto;padding:0 12px;height:40px;font-size:12.5px;font-weight:700;color:var(--muted)}
/* 现在：AI 平台矩阵 */
.era-plats{display:flex;flex-wrap:wrap;gap:6px}
.era-plats .ep{font-size:11.5px;font-weight:700;color:var(--brand);background:rgba(109,94,224,.08);
border:1px solid rgba(109,94,224,.18);border-radius:var(--pill);padding:4px 10px}
.era-plats .ep.more{color:var(--muted);background:#fff;border-color:var(--line)}
/* 转换路径进度条 */
.era-meter{display:flex;align-items:center;gap:10px}
.era-meter .m-l{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.era-meter .m-bar{flex:1;height:7px;border-radius:6px;background:#fff;border:1px solid var(--line);overflow:hidden}
.era-meter .m-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#C9CBD1,#9AA0A8)}
.era-meter .m-bar.new i{background:linear-gradient(90deg,#8B7BF0,#00A870)}
.era-meter .m-v{font-size:11.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.era-flow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.era-flow i{font-style:normal;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 13px;font-size:13px;font-weight:700;color:var(--ink)}
.era.new .era-flow i{background:#fff;border-color:rgba(109,94,224,.3)}
.era-flow em{font-style:normal;color:var(--brand);font-weight:800}
.era p{font-size:13px;color:var(--muted);line-height:1.7;text-align:center}
/* era-flow 逐级点亮动画 */
.era-flow i,.era-flow em{opacity:.34;transform:translateY(4px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.era-flow i.done,.era-flow em.done{opacity:1;transform:none}
.era.new .era-flow i.done{box-shadow:0 6px 16px rgba(109,94,224,.16)}
.aiera-take{font-size:13.5px;color:var(--muted);line-height:1.75;background:var(--soft);border:1px solid var(--line);
border-radius:var(--r-md);padding:14px 18px;text-align:center;margin-top:auto}
.aiera-take b{color:var(--ink)}
.aiera-take-key{display:block;margin-top:4px;color:var(--ink);font-weight:700;
background:linear-gradient(120deg,#E8F1FE,#E8F1FE);border-radius:8px;padding:4px 10px}
.aiera-demo{display:flex;flex-direction:column;gap:14px}
/* aiera：AI 答案演示 —— 浅色对话框 + 检索动效 + 来源徽标（非深色） */
.aiera-demo .chat{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);
padding:18px;text-align:left;display:flex;flex-direction:column;gap:12px;flex:1}
.chat-row{display:flex;gap:10px;align-items:flex-start}
.chat-row.me{justify-content:flex-end}
.chat-row.ai .av{flex:none;width:34px;height:34px;border-radius:11px;
background:linear-gradient(150deg,#8B7BF0,#5239D8);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.bubble{font-size:13.5px;line-height:1.6;padding:11px 15px;border-radius:16px;max-width:88%}
.bubble.me{background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.bubble.ai{background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px;flex:1;padding:8px 10px}
.bubble.ai.brief{padding:11px 15px}
.bubble.ai .ans{display:flex;gap:10px;padding:9px 4px;border-bottom:1px dashed var(--line)}
.bubble.ai .ans:last-of-type{border-bottom:0}
/* 检索动效行 */
.scan-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
padding:8px 6px 10px;border-bottom:1px dashed var(--line);font-weight:600}
.scan-line .scan-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;
box-shadow:0 0 0 0 rgba(109,94,224,.5);animation:scanPulse 1.2s ease-out infinite}
.scan-line b{color:var(--brand);font-variant-numeric:tabular-nums}
@keyframes scanPulse{0%{box-shadow:0 0 0 0 rgba(109,94,224,.5)}100%{box-shadow:0 0 0 9px rgba(109,94,224,0)}}
/* 答案逐条错峰淡入 */
.bubble.ai .ans{opacity:0;transform:translateY(8px);
transition:opacity .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);
transition-delay:var(--d,0ms)}
.aiera-demo.revealed .bubble.ai .ans{opacity:1;transform:none}
.ans .n{flex:none;width:22px;height:22px;border-radius:7px;background:var(--brand);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.ans.you .n{background:#00A870}
.ans b{font-size:14px;font-weight:700}
.ans p{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.ans .ok{color:#00A870;font-weight:800;margin-left:3px}
.ans.you{background:linear-gradient(120deg,#E9FBF1,#F2FCF7);border-radius:10px;
border:1px solid rgba(0,168,112,.28);animation:youGlow 2.6s ease-in-out infinite}
@keyframes youGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,168,112,0)}
50%{box-shadow:0 0 0 5px rgba(0,168,112,.1)}}
/* 来源徽标 */
.chat-src{display:flex;gap:6px;flex-wrap:wrap;padding:12px 4px 2px;margin-top:8px;
border-top:1px dashed var(--line)}
.src-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:var(--pill);
padding:4px 10px}
.src-chip i{width:6px;height:6px;border-radius:50%;background:#00A870;flex:none}
.src-chip.more{color:var(--brand);border-color:rgba(109,94,224,.3);background:var(--pk-blue)}
/* 真实 AI 平台 logo 滚动墙 */
.plat-marquee{margin-top:40px;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.plat-track{display:flex;gap:16px;width:max-content;animation:platScroll 34s linear infinite}
.plat-marquee:hover .plat-track{animation-play-state:paused}
.plat-logo{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
border-radius:14px;padding:11px 18px;font-style:normal;font-weight:600;font-size:14.5px;color:var(--ink);
white-space:nowrap;box-shadow:0 4px 14px rgba(10,10,10,.04)}
.plat-logo img{height:24px;width:24px;object-fit:contain;border-radius:6px;flex:none}
.plat-logo i{font-style:normal}
@keyframes platScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ai-panel-card .answer-item.you p .ok{color:#52E09A;font-weight:800;margin-left:3px}
.ai-panel-card .answer-item.you{animation:youPulse 2.6s ease-in-out infinite}
@keyframes youPulse{0%,100%{box-shadow:0 0 0 0 rgba(109,94,224,0)}
50%{box-shadow:0 0 0 5px rgba(109,94,224,.12)}}
.ai-panel-card .answer-item.me{margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65)}
.ai-panel-card .answer-item.you{background:rgba(109,94,224,.18);border:1px solid rgba(109,94,224,.45);border-radius:12px;padding:10px 12px;margin-top:2px}
.ai-panel-card .answer-item.you .rank{background:var(--brand);color:#fff}
.ai-panel-card .answer-item.you b{color:#fff}
.ai-panel-card .answer-item.you p{color:rgba(255,255,255,.82)}
/* ==========================================================================
GEO 核心产品：实时数字 + 展示舞台
========================================================================== */
.geo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:54px auto 0;max-width:920px}
.gstat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 18px;text-align:center;box-shadow:var(--sh-card)}
.gstat big{display:block;font-size:clamp(30px,3.4vw,46px);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.gstat-l{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.gdelta{display:inline-block;margin-top:8px;font-size:13px;font-weight:700}
.gdelta.up{color:#00A870}.gdelta.down{color:var(--brand)}
.geo-showcase{margin:54px auto 0;max-width:1120px}
.geo-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.geo-tabs button{font-size:14px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);
border-radius:var(--pill);padding:9px 18px;cursor:pointer;transition:all .2s var(--ease)}
.geo-tabs button:hover{color:var(--ink);border-color:rgba(109,94,224,.4)}
.geo-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.geo-stage{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
box-shadow:0 24px 70px rgba(10,10,10,.10);background:#fff;aspect-ratio:157/100}
.geo-pane{display:none;position:absolute;inset:0}
.geo-pane.on{display:block;animation:geoFade .5s var(--ease)}
.geo-pane img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes geoFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.geo-cta{display:flex;justify-content:center;gap:16px;margin-top:40px;flex-wrap:wrap}
/* 「了解 GEO 系统」与「免费检测品牌 AI 可见度」必须等宽等高。
桌面端用 grid 等分但**限宽**（不然两个大按钮会占满整行 580px）；
手机端在 media query 里放开宽度铺满一行。 */
.geo-cta.eq{align-items:center;display:grid;grid-template-columns:1fr 1fr;gap:16px;
width:fit-content;max-width:640px;margin-left:auto;margin-right:auto}
.geo-cta.eq > .btn{min-width:0;white-space:nowrap}
/* ==========================================================================
GEO 工作原理（四步）· v5.3.7 重设计：横向时间轴 + 编号徽标 + 图标 + 关键词
========================================================================== */
.geo-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:26px;position:relative}
.only-mobile{display:none}
/* 贯穿的横向轨道 */
.geo-flow::before{content:"";position:absolute;left:7%;right:7%;top:44px;height:2px;
background:linear-gradient(90deg,rgba(109,94,224,.06),rgba(109,94,224,.34) 12%,rgba(0,168,112,.34) 88%,rgba(0,168,112,.06));
z-index:0}
.gstep{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
text-align:center;padding:0 16px;transition:transform .3s var(--ease)}
/* 顶部圆形徽标 + 步骤号 */
.gstep .gstep-badge{position:relative;width:88px;height:88px;border-radius:50%;background:var(--card);
border:1px solid var(--line);box-shadow:var(--sh-card);display:flex;align-items:center;justify-content:center;
transition:all .3s var(--ease)}
.gstep .gstep-badge::after{content:"";position:absolute;inset:-6px;border-radius:50%;
border:1px dashed rgba(109,94,224,.24);opacity:0;transition:opacity .3s var(--ease)}
.gstep .gstep-no{position:absolute;top:-6px;right:-6px;width:30px;height:30px;border-radius:50%;
background:linear-gradient(135deg,#6D5AE6,#00A870);color:#fff;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 12px rgba(109,94,224,.35);
font-weight:800;font-size:12.5px;letter-spacing:.02em;box-shadow:0 4px 12px rgba(10,10,10,.2);z-index:2}
.gstep .gstep-ic{display:flex;align-items:center;justify-content:center;color:var(--brand);
transition:all .3s var(--ease)}
.gstep .gstep-ic svg{width:56px;height:56px}
.gstep h4{font-size:17.5px;font-weight:800;margin:18px 0 0}
.gstep p{font-size:13px;color:var(--muted);margin:9px 0 0;line-height:1.66}
.gstep .gstep-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.gstep .gstep-tags i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--body);
background:var(--soft);border-radius:var(--pill);padding:4px 10px;border:1px solid var(--line)}
/* V5.8.1 · GEO 四步卡 hover：只浮起 4px，颜色与边框完全保持不变 */
.gstep:hover{transform:translateY(-4px)}
.gstep:hover .gstep-badge{border-color:var(--lens-line,var(--line));box-shadow:0 4px 18px rgba(10,12,15,.05)}
.gstep:hover .gstep-badge::after{opacity:1}
.gstep:hover .gstep-ic{color:inherit}
.gstep:hover .gstep-badge{background:initial;border-color:initial}
.gstep:hover .gstep-no{background:initial;color:inherit}
/* ==========================================================================
案例：优化前 → 优化后
========================================================================== */
.case-ba{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 14px;
background:var(--soft);border-radius:var(--pill);padding:8px 14px;width:fit-content}
.ba-l{font-size:12px;color:var(--muted);font-weight:600}
.ba-from{font-size:15px;font-weight:700;color:var(--muted)}
.ba-arw{color:var(--brand);font-weight:800;margin:0 2px}
.ba-to{font-size:16px;font-weight:800;color:var(--brand)}
/* ==========================================================================
响应式
========================================================================== */
@media (max-width:1180px){
.footer-grid{grid-template-columns:1fr;gap:34px}
.footer-grid .foot-brand{max-width:560px}
.footer-grid .foot-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}
.work-grid{grid-template-columns:1fr}
.work-main .art-frame img{height:240px}
}
@media (max-width:1024px){
.nav-menu{display:none}
.burger{display:flex}
.geo-show{grid-template-columns:1fr;gap:44px}
.answer-demo{grid-template-columns:1fr;gap:22px}
.flow-line{flex-direction:row;flex-wrap:wrap;justify-content:center}
.trio{grid-template-columns:1fr}
.svc-grid{grid-template-columns:1fr 1fr}
.price-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
.duo{grid-template-columns:1fr}
.stats-band{grid-template-columns:repeat(3,1fr)}
.case-logo-wall{grid-template-columns:repeat(2,1fr)}
.case-grid{grid-template-columns:1fr}
.g3,.g4{grid-template-columns:1fr 1fr}
.form-grid{grid-template-columns:1fr}
.ind-panel{grid-template-columns:1fr}
.rail>*{flex-basis:min(78vw,360px)}
.aiera-grid{grid-template-columns:1fr}
.desk-only{display:none!important}
}
@media (max-width:640px){
html{scroll-behavior:auto;overflow-anchor:none}
.container{padding:0 18px}
.section{padding:52px 0}
/* 手机端 Hero 顶部留白：
导航为 fixed 悬浮胶囊（未收缩态高 72px，滚动后收缩态 top:10px + 高 54px），
徽章必须整体落在导航下沿之下才有「不遮挡」的观感。
96px 只够贴住未收缩态导航，滚动后胶囊虽变矮、但视觉焦点上移，
徽章仍显拥挤（用户反馈「遮盖悬浮的字体」）。
这里改为「导航未收缩高度 72px + 呼吸留白 44px」= 116px，
保证两种导航状态下徽章与其下方标题都不被压住。 */
.hero{padding-top:calc(116px + var(--sat));overflow:visible}
/* 手机端滚动后的胶囊态：只留 logo + 汉堡，去掉过宽的「联系我们」，
并把胶囊整体居右收窄，保证左右两侧仍能透出页面内容
—— --pill-h / --pill-w 由 JS 量好后写入，保证 px→px 可插值，帧帧平滑 */
/* 手机端收缩后的胶囊 → 靠右停靠
需求：滚动收起成小菜单时贴右边，不要居中。
容器是全宽 flex，把胶囊 margin-left:auto 即靠右；右留 12px 呼吸位。 */
.nav.pill{top:calc(10px + var(--sat));--pill-h:54px}
.nav.pill .nav-inner{height:var(--pill-h);padding:0 8px 0 16px;gap:6px;
margin-left:auto;margin-right:12px;
width:min(var(--pill-w,208px),calc(100vw - 28px));max-width:none}
.nav.pill .brand img{height:21px}
.nav.pill .nav-acts{gap:6px}
.nav.pill .nav-acts>a.btn{display:none}
.nav.pill .btn-sm{padding:8px 14px;font-size:12.5px}
.nav.pill .burger{width:36px;height:36px}
/* Hero 打字机标题（手机端）
原则：绝不裁切 —— 允许自然换行，容器不 overflow:hidden，字号随屏宽缩放，
再由 JS fitTitle() 按「实际行数」收缩字号，保证任何真机字体下都完整可见 */
.hero{overflow:visible}
.hero-type{font-size:clamp(22px,6.6vw,30px);line-height:1.28;
word-break:normal;overflow-wrap:break-word;overflow:visible}
.hero-type .ht-line{display:block;white-space:normal}
.hero-type .ht-l1,.hero-type .ht-l2{white-space:normal;text-wrap:pretty}
.hero-type .ht-char{display:inline}
/* 末字结构性保险：把每行最后一个语法单元标成不可断行。
真机上字体偏宽时，浏览器可能把末尾 2 个字整体折到下一行，
折下去的那半行若被父级裁切就表现为「方式 / 开始 没显示」。
给末段加 nowrap 后，浏览器只能在它之前断行，不会把它单独挤到行外。 */
.hero-type .ht-l1 .ht-plain:last-child,
.hero-type .ht-l2 .ht-plain:last-child{white-space:nowrap}
/* 副标题手机端：产品线换行单独成行，并强制一行不折断 */
.hero-sub{font-size:13.5px;line-height:1.75;margin-top:18px}
.hero-sub .hs-br{display:inline}
.hero-sub .hs-l1{display:block}
.hero-sub .hs-l2{display:block;white-space:normal;font-size:12.5px;letter-spacing:.005em;
margin-top:2px}
.hero-badge{font-size:12px;padding:7px 14px;
/* 极窄屏（<340px，低于任何主流机型）下徽章容易被压成两行、显得散乱，
这里让它保持单行并允许内部轻微收字距，观感比换行更稳 */
max-width:100%;text-align:left;line-height:1.5;
/* 手机端色块字号更小但相对上溢比例不变，呼吸位给足 26px */
margin-bottom:26px}
/* 手机版 Hero 指标：2×2 方框 —— 17+/8维 一行，8大/30s 一行 */
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.metric{padding:14px 8px;min-width:0;border-radius:16px}
.metric big{font-size:24px}
.metric span{font-size:11.5px;margin-top:2px}
/* 手机版双按钮：等宽、同排，字号收紧防溢出。
用 grid 1fr 1fr 而不是 flex:1 —— 子像素分配在 flex 下会把 1px 的零头
只给其中一个（实测 579/581），grid 轨道等分后两个完全一致。 */
.btn-row.eq,.btn-row:has(> .btn:nth-child(2):last-child){
display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.btn-row.eq > .btn,.btn-row:has(> .btn:nth-child(2):last-child) > .btn{
min-width:0;padding-left:10px;padding-right:10px;font-size:13.5px}
/* 手机端大按钮高度统一收到 44px（56px 在手机上太占纵向空间） */
.btn-lg{height:44px;padding:0 26px;font-size:14.5px}
/* GEO 段双按钮：手机端同样等宽平分 */
.geo-cta.eq{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.geo-cta.eq > .btn{min-width:0;padding-left:10px;padding-right:10px;font-size:13.5px;
padding-top:0;padding-bottom:0;height:44px}
.btn-row.eq > .btn-lg,.btn-row:has(> .btn:nth-child(2):last-child) > .btn-lg{
font-size:13.5px;padding-top:0;padding-bottom:0;height:44px}
.hero .btn-row{margin-top:26px!important}
/* 手机版产品 Tab：缩小字号、强制单行不换行 */
.hero-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:center;gap:7px;
margin-top:30px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hero-tabs::-webkit-scrollbar{display:none}
.hero-stage{margin-top:26px}
.stage-view{aspect-ratio:4/3}
.hero-tabs button{font-size:11px;white-space:nowrap;padding:6px 2px;flex:none;letter-spacing:-.01em}
.rot-stage{font-size:clamp(19px,5.2vw,28px)}
.rot-item{max-width:14ch}
.hero-rotator{gap:16px}
.page-head{padding:104px 0 40px}
/* 手机端才出现的换行（如 GEO 段「沉淀成 / AI 能理解…」） */
.only-mobile{display:inline}
/* 页头主标题：手机端缩放字号但保持横版不折断 */
.page-head .display{white-space:normal;font-size:clamp(24px,7vw,38px)}
.g3,.g4,.g2{grid-template-columns:1fr}
.svc-grid{grid-template-columns:1fr}
.work-tiles{grid-template-columns:1fr 1fr}
.case-logo-wall{grid-template-columns:1fr 1fr}
.stats-band{grid-template-columns:1fr 1fr;padding:28px}
.footer-grid{grid-template-columns:1fr;padding:40px 18px 26px;gap:26px}
.footer-grid .foot-brand{grid-column:auto}
.footer-grid .foot-nav{grid-template-columns:1fr 1fr;gap:24px 16px}
.ai-panel{right:10px;left:10px;bottom:calc(112px + var(--sab));width:auto;max-width:none;height:auto;
max-height:calc(100vh - 174px);border-radius:20px}
.ai-ball{right:14px;bottom:calc(34px + var(--sab));width:44px;height:44px}
.ai-ball .ai-ball-txt{bottom:7px;font-size:9px}
.ai-ball .tip{display:none}
.geo-shot .float-chip{display:none}
.aiera-grid{grid-template-columns:1fr;gap:22px}
.geo-stats{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:34px}
.gstat{padding:18px 8px}
.geo-flow{grid-template-columns:1fr 1fr;gap:30px 8px}
.geo-flow::before{display:none}
.gstep{padding:0 4px}
.gstep .gstep-badge{width:72px;height:72px}
.gstep .gstep-ic svg{width:28px;height:28px}
.gstep h4{font-size:16px;margin-top:14px}
.gstep p{font-size:12.5px}
.gstep .gstep-tags{margin-top:10px}
.geo-tabs button{padding:8px 13px;font-size:13px}
.case-ba{width:auto}
.rail-ctl{margin-top:2px}
.rail-btn{width:44px;height:44px}
.logo-chip{padding:18px 14px 16px}
.logo-chip .lc-ic{width:34px;height:34px;margin-bottom:10px}
.logo-chip b{font-size:14.5px}
.logo-chip small{font-size:12px}
.era-meter{flex-wrap:wrap;gap:6px 10px}
.era-meter .m-bar{min-width:80px}
/* ---------- 版本对比（手机端）：首列固定、其余列横向滑动 ----------
需求：往左滑动时「能力」这一列必须钉住不动，只有版本列跟着滑。
做法：滚动容器是内层 .compare-in，.feat-col 用 position:sticky;left:0
钉在它左侧；宽度收窄到确定值，避免占掉大半个屏把数据列挤没。 */
.compare-scroll{margin-top:24px;border-radius:14px}
.compare{min-width:560px} /* 保证确实可横向滚动 */
.compare th,.compare td{padding:11px 10px;font-size:12.5px}
.compare .feat-col{min-width:92px;max-width:92px;
/* 钉住的那一列必须有实底，否则滚过去的版本列会从它下面透出来 */
background:#fff;box-shadow:1px 0 0 var(--line),6px 0 10px -6px rgba(16,17,26,.10)}
.compare thead .feat-col{background:#fff}
.compare thead th{background:#fff}
.compare th.recommended,.compare thead th.recommended{background:#EDF3FF}
.compare .c-name{font-size:13px}
.compare .c-price{font-size:12px;margin:4px 0 8px}
.compare .rec-badge{position:static;display:inline-block;margin-bottom:6px;font-size:10px;padding:2px 8px}
/* 「选择此版本」按钮：手机端统一成小胶囊，不拉满整列，也不再两行 */
.compare th .btn{width:auto;max-width:none;padding:7px 12px;font-size:12px;margin-top:8px}
.compare .btn-pick{margin-top:8px}
}
/* ==========================================================================
诊断页：步骤状态 + 环形分数
========================================================================== */
.diag-status{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.diag-status li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--muted);
transition:color .3s var(--ease)}
.diag-status li i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
position:relative;transition:all .3s var(--ease)}
.diag-status li.on{color:var(--ink);font-weight:600}
.diag-status li.on i{border-color:var(--brand);background:var(--brand)}
.diag-status li.on i::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;
border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.score-ring{width:190px;height:190px;flex:none}
.score-ring .bg{fill:none;stroke:var(--soft-2);stroke-width:12}
.score-ring .fg{fill:none;stroke:url(#gpGrad);stroke-width:12;stroke-linecap:round;
transition:stroke-dashoffset 1.1s var(--ease)}
.privacy{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);
line-height:1.6;cursor:pointer}
.privacy input{margin-top:2px;accent-color:var(--brand)}
.privacy a{color:var(--brand)}
/* ==========================================================================
文章正文 / 步骤 / FAQ
========================================================================== */
.prose{max-width:780px;margin:0 auto;font-size:16px;line-height:1.9;color:var(--body)}
.prose h2{font-size:26px;font-weight:800;margin:44px 0 16px;line-height:1.35}
.prose h3{font-size:20px;font-weight:700;margin:34px 0 12px;line-height:1.4}
.prose p{margin:16px 0}
.prose ul,.prose ol{margin:16px 0;padding-left:24px;display:grid;gap:8px}
.prose li{line-height:1.8}
.prose strong{color:var(--ink)}
.prose img{max-width:100%;border-radius:var(--r-md);margin:20px 0}
.prose blockquote{border-left:3px solid var(--brand);background:var(--soft);
padding:16px 22px;border-radius:0 var(--r-md) var(--r-md) 0;margin:22px 0;color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.prose th{background:var(--soft);font-weight:700}
.prose code{background:var(--soft-2);border-radius:6px;padding:2px 7px;font-size:14px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;counter-reset:step}
.step-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-card);
border-radius:var(--r-lg);padding:28px 26px;position:relative;
transition:all .26s var(--ease)}
.step-card:hover{box-shadow:var(--sh-hover);transform:translateY(-4px);border-color:#D9DEE7}
.step-card .no{width:44px;height:44px;border-radius:14px;background:var(--ink);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
.step-card h4{font-size:18px;font-weight:800;margin-top:20px}
.step-card p{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.7}
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:var(--soft);border-radius:var(--r-md);padding:0;overflow:hidden;
transition:background .22s var(--ease)}
.faq-item[open]{background:#fff;box-shadow:var(--sh-card)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:16px;font-weight:700;
display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--muted);
transition:transform .25s var(--ease);flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 24px 22px;font-size:14.5px;color:var(--muted);line-height:1.8}
/* 行业面板切换（JS 只切 .on 类） */
[data-ind-panel]{display:none}
[data-ind-panel].on{display:block;animation:fadeUp .45s var(--ease)}
/* 认证徽章行 */
.cert-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cert-chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
border-radius:var(--pill);padding:12px 22px;font-size:13.5px;font-weight:700;box-shadow:var(--sh-card)}
.cert-chip svg{flex:none}
@media (max-width:1024px){
.steps{grid-template-columns:1fr}
.prose{font-size:15px}
}
/* 无障碍与降级 */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
html{scroll-behavior:auto}
html.js .reveal{opacity:1;transform:none}
.ht-char{opacity:1!important;transform:none!important;filter:none!important}
.hero-type .ht-caret{display:none!important}
.ai-ball{animation:none!important}
.ai-ball::before{display:none}
.bubble.ai .ans{opacity:1!important;transform:none!important}
.era-flow i,.era-flow em{opacity:1!important;transform:none!important}
[data-fitline].tighten{transform:none}
}
@media print{
.nav,.ai-ball,.ai-panel,.float-bar,.notice-bar,.rail-nav{display:none!important}
html.js .reveal{opacity:1;transform:none}
}
/* 诊断报告内的指标磁贴：浅色底覆盖（.demo-metric 默认深色场景） */
#diagMetrics .demo-metric{background:var(--soft);border:1px solid var(--line)}
#diagMetrics .demo-metric big{color:var(--ink)}
#diagMetrics .demo-metric span{color:var(--muted)}
#diagResult.in{animation:fadeUp .5s var(--ease)}
/* ==========================================================================
登录页（v5.4 重做：参考主流控制台登录——卡片式、图标输入框、记住我、显示密码）
========================================================================== */
.auth-wrap{padding:calc(132px + var(--sat)) 20px 72px;background:linear-gradient(180deg,var(--bg),#EEF0F8)}
.auth-card{max-width:432px;margin:0 auto;background:#fff;border:1px solid var(--line);
border-radius:22px;padding:34px 32px 28px;box-shadow:0 26px 60px -34px rgba(16,17,26,.28)}
.auth-brand{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.auth-brand .ab-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:18px;color:#fff;flex:none;
background:linear-gradient(140deg,#6D5AE6,#6D5AE6 60%,#00A870);box-shadow:0 8px 20px -10px rgba(109,94,224,.9)}
.auth-brand b{display:block;font-size:15.5px;font-weight:700}
.auth-brand em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.auth-card h1{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:22px 0 0}
.auth-sub{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.7}
.auth-card form{margin-top:20px}
.auth-card .field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.auth-in{position:relative;display:flex;align-items:center}
.auth-in>svg{position:absolute;left:14px;width:16px;height:16px;color:var(--muted-2);pointer-events:none}
.auth-in .input{padding-left:40px;height:46px;border-radius:12px;font-size:14.5px;background:var(--soft)}
.auth-in .input:focus{background:#fff}
.auth-in .eye{position:absolute;right:8px;width:34px;height:34px;border-radius:9px;display:flex;
align-items:center;justify-content:center;color:var(--muted-2);cursor:pointer;transition:all .2s var(--ease)}
.auth-in .eye svg{width:17px;height:17px}
.auth-in .eye:hover{background:var(--soft-2);color:var(--ink)}
.auth-in .eye.on{color:var(--brand);background:var(--pk-blue)}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:13px}
.chk{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;user-select:none}
.chk input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.auth-link{color:var(--brand);font-weight:600}
.auth-link:hover{text-decoration:underline}
.auth-or{position:relative;text-align:center;margin:22px 0 16px}
.auth-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.auth-or span{position:relative;display:inline-block;padding:0 12px;background:#fff;font-size:12.5px;color:var(--muted-2)}
.auth-quick{display:grid;gap:10px}
.auth-quick .btn{justify-content:flex-start;gap:12px;height:50px;padding:0 16px;font-weight:600}
.aq-ic{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;padding:0 9px;
border-radius:9px;font-size:12.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.aq-ic.blue{background:linear-gradient(135deg,#6D5AE6,#5B8CFF)}
.aq-ic.green{background:linear-gradient(135deg,#00A870,#2ED39A)}
.auth-foot{text-align:center;font-size:12.5px;color:var(--muted-2);margin-top:20px;line-height:1.7}
.auth-foot a{color:var(--brand)}
@media (max-width:640px){
.auth-wrap{padding:calc(104px + var(--sat)) 16px 56px}
.auth-card{padding:26px 20px 22px;border-radius:18px}
.auth-card h1{font-size:22px}
}
/* ==========================================================================
V5.5 · 密保找回弹窗（/login 客户版登录页，static/js/forgot.js 配套）
沿用站点既有设计变量，不新增色值；弱环境下的默认色均来自 :root
========================================================================== */
.fg-mask{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
padding:20px;background:rgba(10,14,24,.44);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.fg-mask.on{display:flex}
.fg-box{width:100%;max-width:420px;max-height:88vh;overflow:auto;padding:22px;
background:var(--card,#fff);border:1px solid var(--line,#E7E9EE);border-radius:16px;
box-shadow:0 18px 50px rgba(10,14,24,.18)}
.fg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fg-head b{font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.fg-x{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:8px;background:transparent;
font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.fg-x:hover{background:var(--soft,#EDF1F6);color:var(--ink)}
.fg-tip{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.fg-step{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--brand)}
.fg-box .field{margin-top:12px}
.fg-box .field label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--body)}
.fg-box .btn{margin-top:16px}
.fg-msg{min-height:18px;margin:10px 0 0;font-size:13px;line-height:1.6}
.fg-msg.fg-err{color:#D93A3A}
.fg-msg.fg-ok{color:#0E9F6E}
.fg-help{margin:12px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.fg-help a{color:var(--brand);font-weight:600}
@media (max-width:480px){
.fg-mask{padding:14px;align-items:flex-start}
.fg-box{padding:18px;border-radius:14px}
}
/* ==========================================================================
V5.5.1 · 首屏标题增强
① 「AI」底部手绘艺术画线（SVG 描边动画，非 CSS 色块）
② 「增长/经营/获客/管理」四词轮播（入场动画沿用逐字弹出节奏）
③ 静止停留时每个字上下微微跳动（呼吸感，振幅 ~1.6px，不喧宾夺主）
========================================================================== */
/* ---- ① AI 底部艺术画线：笔触从左到右"画"出来 ---- */
.hero-type .ai-art{
font-style:normal;position:relative;display:inline-block;
/* 为下方的艺术线留出空间，避免与下一行文字重叠 */
padding-bottom:.06em;
}
.hero-type .ai-art::after{
content:"";position:absolute;left:-.06em;right:-.06em;bottom:-.02em;height:.30em;
/* 手绘双笔触：用两层不同透明度渐变模拟抬笔压力变化 */
background:
linear-gradient(90deg,rgba(109,94,224,0) 0%,rgba(109,94,224,.95) 9%,rgba(109,94,224,.95) 82%,rgba(109,94,224,0) 100%),
repeating-linear-gradient(90deg,rgba(109,94,224,.28) 0 6px,rgba(109,94,224,.05) 6px 11px);
-webkit-mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;
transform-origin:0% 60%;transform:scaleX(0);opacity:0;
transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .3s linear;
pointer-events:none;
}
/* Hero 标题进入"完整展示"态时，画线从左到右画出（比文字稍晚，先识字再落笔） */
html.js .hero-type.typed .ai-art::after{transform:scaleX(1);opacity:1;transition-delay:.34s}
html:not(.js) .hero-type .ai-art::after{transform:scaleX(1);opacity:1}
/* ---- ② 轮播词容器：保证切换时宽度平滑、基线稳定 ---- */
#htWord{position:relative;display:inline-block;will-change:transform,opacity}
/* 切换瞬间的出场/入场（JS 在切换前加 .swap-out） */
.hero-type #htWord.swap-out{
opacity:0;transform:translateY(-.34em) scale(.94);filter:blur(4px);
transition:all .26s cubic-bezier(.4,0,.7,.2);
}
.hero-type #htWord.swap-in{
opacity:0;transform:translateY(.36em) scale(.92);filter:blur(5px);
}
.hero-type #htWord.swap-in.on{
opacity:1;transform:none;filter:none;
transition:all .5s cubic-bezier(.16,1.2,.32,1);
}
/* ---- ③ 静止停留：每个字上下微微跳动 ----
用独立 keyframes + 逐字 delay，形成波浪式"呼吸"，不是整齐划一地跳 */
@keyframes htBob{
/* 每一帧都显式声明 opacity:1 / filter:none。
为什么必须写：htBob 只该动 transform，但一旦某个字被提升为合成层
并在 iOS 上被回收，浏览器会拿「基础样式」补全该层 —— 而 .ht-char
的基础样式恰恰是 opacity:0（入场起点）。于是字会在动画进行中凭空消失。
把 opacity 写进每一帧，等于给动画自带上色，任何补全都补不出透明。 */
0%,100%{transform:translateY(0);opacity:1;filter:none}
42%{transform:translateY(-.055em);opacity:1;filter:none}
70%{transform:translateY(.022em);opacity:1;filter:none}
}
html.js .hero-type.typed.bobbing .ht-char{
animation:htBob 2.6s cubic-bezier(.45,0,.55,1) infinite;
/* 每个字错开 0.09s，约 13 个字刚好形成一个完整波长 */
animation-delay:calc(var(--i) * .09s);
/* 跳动只需 transform，不要再宣告 opacity/filter 的 will-change，
否则又在申请一个可能被回收的合成层 */
will-change:transform;
}
/* 轮播词自身不跟随跳动，避免与切换动画打架 */
html.js .hero-type.typed.bobbing #htWord .ht-char{animation:none}
@media (prefers-reduced-motion:reduce){
.hero-type .ai-art::after{transform:scaleX(1)!important;opacity:1!important;transition:none!important}
html.js .hero-type.typed.bobbing .ht-char{animation:none!important}
.hero-type #htWord.swap-out,.hero-type #htWord.swap-in{opacity:1!important;transform:none!important;filter:none!important}
}
/* ==========================================================================
V5.5.1 · 价格表与版本对比
① Agent 线固定 4 列（体验/基础/专业/企业），任何宽度下都一行不换行
② GEO 线 6 个版本 → 上三下三（3 列网格自然折行）
③ 「选择此版本」按钮统一黑底白字
========================================================================== */
/* Agent：4 列固定，不换行 —— 用 minmax(0,1fr) 允许卡片内部收缩，
并靠 .price-card 的 min-width:0 防止内容把网格撑爆导致换行 */
.price-grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.price-grid[data-cols="4"]>.price-card{min-width:0}
.price-grid[data-cols="4"] .price-card{padding:26px 20px}
.price-grid[data-cols="4"] .who{font-size:16px}
.price-grid[data-cols="4"] .price{font-size:27px}
.price-grid[data-cols="4"] .desc{font-size:12.5px;line-height:1.6}
.price-grid[data-cols="4"] .feats li{font-size:12.5px;line-height:1.55;padding-left:18px}
.price-grid[data-cols="4"] .foot{margin-top:auto}
.price-grid[data-cols="4"] .foot .btn{width:100%;justify-content:center}
/* V5.8.5 · G13：「选择此版本」统一为品牌色（原黑底），与全站主按钮一致 */
.btn-pick{background:var(--brand);color:#fff;border:1px solid var(--brand);
font-weight:700;border-radius:var(--pill,999px);transition:all .22s var(--ease)}
.btn-pick:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;transform:translateY(-1px);
box-shadow:0 8px 20px rgba(109,94,224,.26)}
.btn-pick:active{transform:translateY(0)}
/* 表格内的「选择此版本」也统一黑底白字，但不拉满整列 ——
拉满会让按钮又长又胖，且窄列里文字被挤成两行 */
.compare .btn-pick{justify-content:center;margin-top:10px}
/* 平板：4 列过窄则降到 2 列（仍不出现 3+1 的尴尬折行） */
@media (max-width:980px){
.price-grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
/* 手机：单列，卡片恢复宽松内边距 */
@media (max-width:640px){
.price-grid[data-cols="4"]{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
.price-grid[data-cols="4"] .price-card{padding:24px 22px}
.price-grid[data-cols="4"] .price{font-size:30px}
}
/* ==========================================================================
V5.7 · 首页 AI 问答 Hero + 手机号验证弹层
（取长补短：透镜首页「描述 → 免费分析」输入框形态；
标题文案与 hero-stats 卡片保持 V5.6 原样不动）
========================================================================== */
/* V5.8 · 立体 3D：透视父级 + 卡片微倾 + 紫调悬浮投影 */
.qa-hero{max-width:880px;margin:36px auto 0;text-align:left;perspective:1600px}
.qa-box{
position:relative;background:#fff;border:1px solid var(--line);
border-radius:24px;padding:6px 6px 6px 20px;
transform:translateZ(0) rotateX(1.8deg);transform-origin:center bottom;
box-shadow:
0 2px 6px rgba(16,24,40,.05),
0 18px 40px rgba(16,24,40,.10),
0 44px 84px rgba(109,94,224,.14);
transition:border-color .25s,box-shadow .35s,transform .4s var(--ease);
}
.qa-box::after{ /* 立体底部承托投影 */
content:"";position:absolute;left:8%;right:8%;bottom:-22px;height:30px;border-radius:50%;
background:rgba(109,94,224,.18);filter:blur(22px);z-index:-1;transition:all .4s var(--ease);
}
.qa-box:focus-within{
border-color:rgba(109,94,224,.5);
transform:translateY(-4px) rotateX(0deg);
box-shadow:
0 4px 12px rgba(109,94,224,.12),
0 26px 60px rgba(109,94,224,.20),
0 54px 100px rgba(109,94,224,.16);
}
.qa-box:focus-within::after{bottom:-26px;background:rgba(109,94,224,.24);filter:blur(26px)}
/* 顶部一条极淡的渐变描边，呼应透镜紫意象 */
.qa-box::before{
content:"";position:absolute;left:20px;right:20px;top:-1px;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,rgba(109,94,224,.55),rgba(78,137,240,.6),transparent);
opacity:0;transition:opacity .3s;
}
.qa-box:focus-within::before{opacity:1}
.qa-input{
width:100%;border:0;outline:none;resize:none;background:transparent;
font-family:inherit;font-size:16px;line-height:1.7;color:var(--ink);
padding:16px 12px 8px 0;min-height:76px;
}
.qa-input::placeholder{color:#9AA1AE}
.qa-foot{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:0 6px 8px 0}
.qa-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.qa-chip{
border:1px solid var(--line);background:#fff;color:var(--muted);
font-size:12.5px;font-weight:600;font-family:inherit;
border-radius:999px;padding:7px 14px;cursor:pointer;white-space:nowrap;
transition:all .22s var(--ease);
}
.qa-chip:hover{border-color:rgba(109,94,224,.45);color:var(--brand);background:#F5F9FF}
.qa-submit{flex:none;padding:12px 24px;font-size:14.5px}
.qa-tip{
display:flex;align-items:center;justify-content:center;gap:7px;
margin:14px 0 0;font-size:12.5px;color:var(--muted);text-align:center;
}
.qa-tip svg{color:#F5A623;flex:none}
/* ---------- 对话结果区 ---------- */
.qa-panel{
margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:22px;
padding:18px;box-shadow:0 18px 50px rgba(16,24,40,.10);
transform:translateZ(0);animation:qaIn .4s var(--ease);
}
@keyframes qaIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
/* ---------- 进度条（V5.8 · 模拟 AI 分析过渡） ---------- */
.qa-progress{margin:4px 0 14px;padding:14px 16px;border-radius:14px;
background:linear-gradient(180deg,#F8FBFF,#ffffff);border:1px solid #E7F0FF;
box-shadow:0 6px 18px rgba(109,94,224,.05)}
.qa-prog-bar{height:5px;border-radius:999px;background:#EAF1FD;overflow:hidden;position:relative}
.qa-prog-fill{display:block;height:100%;width:0;border-radius:999px;
background:linear-gradient(90deg,#6D5AE6 0%,#8B7BF0 50%,#A8C9FF 100%);
background-size:200% 100%;animation:qaShine 1.4s linear infinite;
transition:width .25s linear}
@keyframes qaShine{0%{background-position:0 0}100%{background-position:200% 0}}
.qa-prog-stages{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:#8b8b96}
.qa-prog-stage{position:relative;padding-left:16px;opacity:.55;transition:opacity .3s}
.qa-prog-stage::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:8px;height:8px;border-radius:50%;background:#D2DDF0}
.qa-prog-stage.done{color:#6D5AE6;font-weight:600;opacity:1}
.qa-prog-stage.done::before{background:#6D5AE6;box-shadow:0 0 0 3px rgba(109,94,224,.18)}
.qa-thread{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}
.qa-msg{
position:relative;max-width:90%;font-size:14.5px;line-height:1.85;padding:13px 16px;border-radius:16px;
white-space:pre-wrap;word-break:break-word;
}
.qa-msg.me{align-self:flex-end;background:linear-gradient(135deg,#6D5AE6,#8B7BF0);color:#fff;
border-bottom-right-radius:5px;box-shadow:0 8px 20px rgba(61,128,245,.28)}
.qa-msg.ai{align-self:flex-start;background:linear-gradient(180deg,#F5F9FF,#FAFCFF);color:var(--body);
border:1px solid #E7F0FF;border-bottom-left-radius:5px;
box-shadow:0 6px 16px rgba(109,94,224,.06)}
/* AI 头像 */
.qa-msg.ai .av{position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:8px;
background:linear-gradient(135deg,#6D5AE6,#8B7BF0);color:#fff;font-size:11px;font-weight:800;
/* 打字机：闪烁光标 */
.qa-msg.tw .tw-cur{
display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
background:linear-gradient(180deg,#6D5AE6,#8B7BF0);border-radius:1px;
animation:twBlink .9s steps(2) infinite;
}
@keyframes twBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* 骨架占位（等待回答时） */
.qa-msg.ai.typing{padding:16px 18px;min-width:120px}
.qa-skel{display:inline-flex;align-items:center;gap:6px}
.qa-skel i{
display:block;width:7px;height:7px;border-radius:50%;background:#6D5AE6;
animation:qaBounce 1.2s infinite ease-in-out;
}
.qa-skel i:nth-child(2){animation-delay:.15s;opacity:.7}
.qa-skel i:nth-child(3){animation-delay:.3s;opacity:.45}
@keyframes qaBounce{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-6px);opacity:1}}
display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(61,128,245,.35)}
/* 打字机光标 */
.qa-caret{display:inline-block;width:2px;height:1.05em;vertical-align:-2px;margin-left:2px;
background:#6D5AE6;animation:qaCaret .9s steps(1) infinite;border-radius:2px}
@keyframes qaCaret{50%{opacity:0}}
/* 思考中三点指示 */
.qa-typing{display:inline-flex;gap:5px;align-items:center;padding:3px 2px}
.qa-typing i{width:7px;height:7px;border-radius:50%;background:#9CC0FF;display:inline-block;
animation:qaDot 1.1s infinite ease-in-out}
.qa-typing i:nth-child(2){animation-delay:.18s}.qa-typing i:nth-child(3){animation-delay:.36s}
@keyframes qaDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.qa-act{
align-self:flex-start;font-size:13.5px;font-weight:700;color:#6D5AE6;
text-decoration:none;padding:4px 0;display:inline-flex;align-items:center;gap:4px;
}
.qa-act::after{content:"→"}
.qa-act:hover{text-decoration:underline}
.qa-ask{display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.qa-ask .input{flex:1}
.qa-ask .btn{flex:none}
/* ---------- 登录弹层 ---------- */
.qa-mask{
position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
padding:20px;background:rgba(10,14,24,.5);backdrop-filter:blur(4px);
opacity:0;transition:opacity .22s;
}
/* 关键：display:flex 会覆盖 [hidden]，必须显式让隐藏态彻底不参与布局与命中测试 */
.qa-mask[hidden]{display:none}
.qa-mask.on{opacity:1}
.qa-modal{
position:relative;width:100%;max-width:420px;background:#fff;border-radius:24px;
padding:30px 28px 24px;border:1px solid rgba(109,94,224,.12);
box-shadow:0 40px 90px rgba(18,40,77,.30),0 0 0 1px rgba(109,94,224,.05);
transform:translateY(14px) scale(.97);transition:transform .3s var(--ease);
}
.qa-mask.on .qa-modal{transform:none}
.qa-close{
position:absolute;right:16px;top:16px;width:30px;height:30px;border:0;border-radius:50%;
background:#F2F5FB;color:#8396B8;font-size:14px;cursor:pointer;line-height:1;
transition:background .2s,color .2s;
}
.qa-close:hover{background:#E7F0FF;color:#6D5AE6}
.qa-modal-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.qa-modal-ic{
flex:none;width:44px;height:44px;border-radius:14px;
display:flex;align-items:center;justify-content:center;overflow:hidden;
background:linear-gradient(160deg,#FFD2E4 0%,#E6E1FB 45%,#BFE2FF 100%);
box-shadow:0 10px 22px rgba(120,153,210,.34);
}
.qa-modal-ic svg{width:100%;height:100%;display:block}
.qa-modal-head b{display:block;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.qa-modal-head span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.6}
.qa-field{margin-bottom:14px}
.qa-field > label{display:block;font-size:13px;font-weight:700;color:#0A3480;margin-bottom:7px}
.qa-code-row{display:flex;gap:10px}
.qa-code-row .input{flex:1;min-width:0}
.qa-code-row .btn{flex:none;white-space:nowrap}
.qa-err{
font-size:13px;color:#D64545;background:#FEF2F2;border:1px solid #FDD8D8;
border-radius:10px;padding:9px 12px;margin:0 0 14px;
}
.qa-modal .btn-block{margin-top:6px}
/* V5.8 · 弹层按钮同色系（透镜紫），覆盖 gp-home 黑胶囊 */
.qa-modal .btn-primary{
background:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%);border-color:transparent;color:#fff;
box-shadow:0 12px 26px rgba(61,128,245,.32);
}
.qa-modal .btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px);
box-shadow:0 16px 32px rgba(61,128,245,.4)}
.qa-modal .btn-line{background:#fff;border-color:#E0EBFF;color:#6D5AE6}
.qa-modal .btn-line:hover{border-color:#6D5AE6;background:#F3F7FF}
.qa-priv{font-size:11.5px;color:#93A5C4;line-height:1.7;margin:12px 0 0;text-align:center}
@media (max-width:640px){
.qa-hero{margin-top:26px}
.qa-box{padding:4px 4px 4px 16px;border-radius:18px}
.qa-input{font-size:15px;min-height:64px;padding:14px 10px 6px 0}
.qa-foot{flex-direction:column;align-items:stretch;padding:0 10px 10px 0}
.qa-chips{gap:6px}
.qa-chip{font-size:12px;padding:6px 12px}
.qa-submit{width:100%;justify-content:center;margin-top:4px}
.qa-thread{max-height:280px}
.qa-msg{max-width:94%;font-size:14px}
.qa-modal{padding:24px 20px 18px;border-radius:18px}
}
@media (hover:none){
.qa-chip:hover{border-color:var(--line);color:var(--muted);background:#fff}
}
/* ==========================================================================
V5.7 首页透镜化设计系统（body.gp-home 作用域，不影响内页）
参考 geo.timus.cn 设计语言：胶囊徽章、渐变高亮标题、大圆角卡片、
紫色渐变产品舞台、深紫诊断 CTA、黑胶囊按钮、spring 悬浮
========================================================================== */
/* -- 0. 设计变量 -------------------------------------------------------- */
body.gp-home{
--lens-purple:#6D5AE6;
--lens-purple-2:#6D5AE6;
--lens-grad:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%);
--lens-card-r:20px;
--lens-sh:0 14px 36px rgba(10,12,15,.08);
--lens-sh-hover:0 22px 48px rgba(30,63,120,.16);
--lens-line:#ECEDF0;
--lens-spring:cubic-bezier(.34,1.5,.64,1);
}
/* -- 1. 区块节奏 -------------------------------------------------------- */
body.gp-home .section{padding:84px 0}
body.gp-home .section--soft{background:#F7F7F8}
body.gp-home .section--geo{background:#FBFCFD}
/* -- 2. 徽章 pill（透镜式） --------------------------------------------- */
body.gp-home .eyebrow{
display:inline-flex;align-items:center;gap:7px;
padding:7px 16px;border:1px solid #E1EBFB;border-radius:999px;
background:#fff;color:#6D5AE6;font-size:13px;font-weight:600;
letter-spacing:.02em;box-shadow:0 2px 10px rgba(109,94,224,.06);
}
body.gp-home .eyebrow::before{
content:"";width:6px;height:6px;border-radius:50%;
background:var(--lens-grad);flex:none;
}
/* -- 3. 标题：渐变高亮关键词 -------------------------------------------- */
body.gp-home .section-title{font-weight:900;letter-spacing:-.022em}
body.gp-home .hl-grad{
background:var(--lens-grad);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* -- 4. 按钮胶囊化（透镜黑胶囊主按钮） ---------------------------------- */
body.gp-home .btn{border-radius:999px;font-weight:600}
body.gp-home .btn-primary:not(.qa-submit){
background:#111214;color:#fff;border-color:#111214;
}
body.gp-home .btn-primary:not(.qa-submit):hover{
background:#26282C;border-color:#26282C;
transform:translateY(-2px);box-shadow:0 12px 26px rgba(17,18,20,.22);
transition:all .35s var(--lens-spring);
}
body.gp-home .btn-line{
background:#fff;color:var(--ink);border-color:#E3E5E8;
}
body.gp-home .btn-line:hover{
border-color:#111214;transform:translateY(-2px);
box-shadow:0 10px 22px rgba(10,12,15,.1);
transition:all .35s var(--lens-spring);
}
/* -- 5. AI 卡轨卡片 ------------------------------------------------------ */
body.gp-home .ai-card{
border-radius:var(--lens-card-r);border-color:var(--lens-line);
box-shadow:0 4px 18px rgba(10,12,15,.05);
}
body.gp-home .ai-card:hover{
transform:translateY(-6px);
box-shadow:var(--lens-sh-hover);
border-color:#D8E6FF;
transition:all .45s var(--lens-spring);
}
body.gp-home .ai-card h3{font-weight:800;letter-spacing:-.01em}
/* -- 6. AI 搜索时代：era 卡与对话气泡浅紫化 ------------------------------ */
body.gp-home .aiera-col{
border-radius:22px;border-color:var(--lens-line);
box-shadow:var(--lens-sh);
}
body.gp-home .col-head{
background:linear-gradient(180deg,#F4F8FF,#FAFCFF);
color:#6D5AE6;font-weight:700;
}
body.gp-home .era{border-radius:16px}
body.gp-home .era.new{
background:linear-gradient(135deg,#F0F6FF 0%,#F8FBFF 100%);
border-color:#DBE8FF;
}
body.gp-home .chat .bubble.ai{background:#F3F7FF;border-color:#E4EEFF}
body.gp-home .chat .bubble.me{background:#111214;color:#fff}
body.gp-home .aiera-take{
background:linear-gradient(92deg,#EAF2FF,#F6F9FF);
border-color:#DCE9FF;color:#0A3480;
}
body.gp-home .aiera-take-key{
background:var(--lens-grad);color:#fff;border-radius:999px;padding:3px 12px;
}
/* -- 7. GEO 产品舞台：浅色大容器（透镜 mock 风格，V5.8 去紫改浅） --------- */
body.gp-home .geo-showcase{
background:#fff;border:1px solid var(--lens-line);border-radius:28px;padding:18px;
box-shadow:0 24px 60px rgba(10,12,15,.08);
position:relative;overflow:hidden;
}
body.gp-home .geo-showcase::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(620px 320px at 10% -10%,rgba(109,94,224,.08),transparent 60%),
radial-gradient(520px 260px at 92% 8%,rgba(78,137,240,.10),transparent 65%);
}
body.gp-home .geo-tabs{
position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
background:transparent;border:0;padding:0 0 16px;
}
body.gp-home .geo-tabs button{
background:#F1F6FF;color:#5239D8;border:1px solid #E0EBFF;
border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:600;
transition:all .3s var(--lens-spring);
}
body.gp-home .geo-tabs button:hover{background:#E4EEFF;transform:translateY(-1px)}
body.gp-home .geo-tabs button.on{
background:linear-gradient(92deg,#6D5AE6,#8B7BF0);color:#fff;border-color:transparent;
box-shadow:0 8px 20px rgba(61,128,245,.32);
}
body.gp-home .geo-stage{
position:relative;z-index:1;border-radius:18px;overflow:hidden;
border:1px solid var(--lens-line);box-shadow:0 14px 40px rgba(10,12,15,.06);
}
body.gp-home .geo-cta{gap:14px}
/* GEO 增长数字 */
body.gp-home .gstat{
border-radius:18px;border-color:var(--lens-line);
box-shadow:0 4px 18px rgba(10,12,15,.05);
}
body.gp-home .gdelta.up{color:#6D5AE6}
body.gp-home .gdelta.down{color:#e11d48}
/* -- 8. GEO 四步：编号卡（透镜 01-05 流程卡风格） ------------------------ */
body.gp-home .geo-flow{gap:14px}
body.gp-home .gstep{
background:#fff;border:1px solid var(--lens-line);border-radius:18px;
box-shadow:0 4px 16px rgba(10,12,15,.04);padding:26px 22px 22px;
transition:all .45s var(--lens-spring);
}
body.gp-home .gstep:hover{
transform:translateY(-6px);box-shadow:var(--lens-sh-hover);border-color:#D8E6FF;
}
body.gp-home .gstep-badge{
background:linear-gradient(135deg,#EDF4FF,#F8FBFF);
border:1px solid #E0EBFF;border-radius:14px;
}
body.gp-home .gstep-ic{color:#6D5AE6}
body.gp-home .gstep-no{
color:#9CC0FF;font-weight:800;font-variant-numeric:tabular-nums;
}
body.gp-home .gstep h4{font-weight:800;letter-spacing:-.01em}
body.gp-home .gstep-tags i{
background:#F2F7FF;color:#5239D8;border-radius:999px;padding:3px 10px;font-style:normal;
}
/* -- 9. 三白卡 ----------------------------------------------------------- */
body.gp-home .trio .card{
border-radius:22px;border-color:var(--lens-line);
box-shadow:0 4px 18px rgba(10,12,15,.05);
transition:all .45s var(--lens-spring);
}
body.gp-home .trio .card:hover{
transform:translateY(-6px);box-shadow:var(--lens-sh-hover);
}
body.gp-home .trio .ic-box{border-radius:14px}
/* -- 10. 案例区 ----------------------------------------------------------- */
body.gp-home .case-big{
border-radius:22px;overflow:hidden;border-color:var(--lens-line);
box-shadow:0 4px 18px rgba(10,12,15,.05);
transition:all .45s var(--lens-spring);
}
body.gp-home .case-big:hover{transform:translateY(-6px);box-shadow:var(--lens-sh-hover)}
body.gp-home .logo-chip{
background:#fff;border:1px solid var(--lens-line);border-radius:16px;
box-shadow:0 3px 12px rgba(10,12,15,.04);
transition:all .4s var(--lens-spring);
}
body.gp-home .logo-chip:hover{
transform:translateY(-4px);box-shadow:var(--lens-sh);border-color:#D8E6FF;
}
/* -- 11. 服务卡（V5.8：去深底卡，统一浅色，隐藏右下箭头避免遮挡） ---------- */
body.gp-home .svc-card{
border-radius:22px;border:1px solid var(--lens-line);
box-shadow:0 4px 18px rgba(10,12,15,.05);
transition:all .45s var(--lens-spring);
}
body.gp-home .svc-card:hover{
transform:translateY(-6px);box-shadow:var(--lens-sh-hover);
}
/* V5.8.1 · 第 4 张陪跑服务卡（专属服务群·浅紫底）：文字色修正，黑字+蓝字保证可读 */
body.gp-home .svc-card.dark{background:#F8FBFF;border-color:#E0EBFF;color:var(--ink)}
body.gp-home .svc-card.dark h4{color:var(--ink)}
body.gp-home .svc-card.dark p{color:#5b5b66}
body.gp-home .svc-card.dark p b{color:#6D5AE6;font-weight:700}
body.gp-home .svc-card .dot-arw{display:none}
/* -- 12. 定价卡：hot 黑金强调 -------------------------------------------- */
body.gp-home .price-card{
border-radius:22px;border-color:var(--lens-line);
box-shadow:0 4px 18px rgba(10,12,15,.05);
transition:all .45s var(--lens-spring);
}
body.gp-home .price-card:hover{transform:translateY(-6px);box-shadow:var(--lens-sh-hover)}
body.gp-home .price-card.hot{
background:#111214;border-color:#111214;color:#fff;
box-shadow:0 24px 56px rgba(17,18,20,.3);
}
body.gp-home .price-card.hot .who{color:#fff}
body.gp-home .price-card.hot .price{color:#fff}
body.gp-home .price-card.hot .desc{color:rgba(255,255,255,.72)}
body.gp-home .price-card.hot .feats li{color:rgba(255,255,255,.86)}
body.gp-home .price-card.hot .feats li::before{
background:#5C9DFF;border-color:transparent;
}
body.gp-home .price-card.hot .link-arrow{color:rgba(255,255,255,.75)}
body.gp-home .price-card.hot .btn-primary{
background:#fff;color:#111214;border-color:#fff;
}
body.gp-home .price-card.hot .btn-primary:hover{background:#ECEDF0}
body.gp-home .pbadge{
background:var(--lens-grad);color:#fff;border-radius:999px;
}
/* 价格切换 tabs：去掉长条容器，仅两个胶囊按钮（V5.8） */
body.gp-home .price-switch{
background:transparent;border:0;box-shadow:none;padding:0;width:fit-content;margin:0 auto;
}
body.gp-home .price-switch button{
border-radius:999px;font-weight:600;color:#5b5b66;background:#fff;border:1px solid var(--lens-line);
padding:10px 22px;
}
body.gp-home .price-switch button:hover{border-color:#6D5AE6;color:#0A3480}
body.gp-home .price-switch button.on{
background:#111214;color:#fff;border-color:#111214;box-shadow:0 4px 14px rgba(17,18,20,.24);
}
/* -- 13. AI 实验室：news-card 风格 ---------------------------------------- */
body.gp-home .lab-card{
background:#fff;border:1px solid var(--lens-line);border-radius:20px;
box-shadow:0 4px 18px rgba(10,12,15,.05);
transition:all .45s var(--lens-spring);
}
body.gp-home .lab-card:hover{
transform:translateY(-6px);box-shadow:var(--lens-sh-hover);border-color:#D8E6FF;
}
body.gp-home .lab-card h4 a{letter-spacing:-.01em}
body.gp-home .lab-card .tag.geo{background:#EAF2FF;color:#5239D8}
body.gp-home .lab-card .go{color:#6D5AE6;font-weight:600}
/* -- 14. 底部大 CTA：浅色诊断区（V5.8 与全站浅色一致） ----------------- */
body.gp-home .big-cta{
background:linear-gradient(140deg,#F2F7FF 0%,#F9FBFF 55%,#ffffff 100%);
padding:clamp(80px,9vw,120px) 0;
border:1px solid var(--lens-line);
}
body.gp-home .big-cta::before{
content:"";left:-120px;top:-140px;transform:none;
width:420px;height:420px;
background:radial-gradient(circle,rgba(109,94,224,.16),transparent 68%);
}
body.gp-home .big-cta::after{
content:"";right:-100px;bottom:-160px;
width:460px;height:460px;
background:radial-gradient(circle,rgba(58,124,237,.2),transparent 66%);
}
body.gp-home .big-cta .display{color:#111214;font-weight:900;letter-spacing:-.025em}
body.gp-home .big-cta .display .underline-scribble{
color:#6D5AE6;background:none;
}
body.gp-home .big-cta .lead{color:#5b5b66}
body.gp-home .big-cta .btn-accent{
background:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%);
color:#fff;border-color:transparent;
}
body.gp-home .big-cta .btn-accent:hover{
background:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%);
transform:translateY(-2px);
box-shadow:0 14px 32px rgba(61,128,245,.42);
transition:all .35s var(--lens-spring);
}
body.gp-home .big-cta .btn-line{
background:#fff;color:#111214;border-color:#E3E5E8;
}
body.gp-home .big-cta .btn-line:hover{
border-color:#6D5AE6;color:#6D5AE6;background:#fff;box-shadow:0 10px 24px rgba(109,94,224,.16);
}
/* -- 15. Hero 背景增强：网格纹理 + 彩色小方块（透镜 hero 质感） ---------- */
body.gp-home .hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(17,18,20,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(17,18,20,.028) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(900px 480px at 50% 0%,#000 30%,transparent 78%);
mask-image:radial-gradient(900px 480px at 50% 0%,#000 30%,transparent 78%);
}
body.gp-home .hero .deco-sq{
position:absolute;border-radius:10px;pointer-events:none;opacity:.85;z-index:0;
}
/* -- 16. 响应式 ----------------------------------------------------------- */
@media (max-width:960px){
body.gp-home .geo-showcase{padding:16px 16px 0;border-radius:22px}
body.gp-home .geo-tabs button{padding:7px 14px;font-size:12.5px}
}
@media (max-width:640px){
body.gp-home .section{padding:60px 0}
body.gp-home .eyebrow{font-size:12px;padding:6px 13px}
body.gp-home .geo-showcase{padding:12px 12px 0}
body.gp-home .big-cta{padding:64px 0}
}
/* V5.7.1 · 问答框主按钮：透镜紫色渐变（hero 唯一彩色主按钮，与黑色胶囊体系区分） */
body.gp-home .qa-submit{
background:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%);
border-color:transparent;color:#fff;
box-shadow:0 10px 24px rgba(61,128,245,.35);
}
body.gp-home .qa-submit:hover{
background:linear-gradient(92deg,#6D5AE6 0%,#8B7BF0 100%);
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(61,128,245,.45);
transition:all .35s cubic-bezier(.34,1.5,.64,1);
}
/* V5.8 · 案例卡片 2×2 饱满排版（点 7） ----------------------------------- */
.case-grid-4{
display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:42px;
}
.case-card{
display:flex;flex-direction:column;background:#fff;
border:1px solid var(--lens-line);border-radius:22px;overflow:hidden;
box-shadow:0 6px 22px rgba(10,12,15,.05);
transition:all .45s var(--lens-spring);
text-decoration:none;color:inherit;position:relative;
}
.case-card:hover{
transform:translateY(-8px);box-shadow:0 24px 50px rgba(109,94,224,.18);border-color:#D8E6FF;
}
.case-photo{
position:relative;aspect-ratio:16/9;overflow:hidden;
background:linear-gradient(135deg,#EDF4FF,#F8FBFF);
}
.case-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--lens-spring)}
.case-card:hover .case-photo img{transform:scale(1.06)}
.case-photo::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.16) 100%);
}
.case-tag{
position:absolute;top:14px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.case-tag.dark{
left:14px;background:rgba(17,18,20,.78);color:#fff;
}
.case-tag.geo{
right:14px;background:rgba(255,255,255,.92);color:#6D5AE6;border:1px solid rgba(109,94,224,.2);
}
.case-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.case-head{display:flex;justify-content:space-between;align-items:center}
.case-logo{font-size:13px;font-weight:700;color:#6D5AE6;letter-spacing:.02em}
.case-go{
width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#EDF4FF,#F8FBFF);
display:flex;align-items:center;justify-content:center;color:#6D5AE6;
transition:all .35s var(--lens-spring);
}
.case-card:hover .case-go{
background:linear-gradient(135deg,#6D5AE6,#8B7BF0);color:#fff;
transform:rotate(-45deg) scale(1.06);
}
.case-title{
font-size:22px;font-weight:800;color:#111214;line-height:1.35;margin:0;letter-spacing:-.01em;
}
.case-ba{
display:flex;align-items:center;gap:10px;
background:linear-gradient(135deg,#F8FBFF,#F2F7FF);
border:1px solid #E7F0FF;border-radius:14px;padding:12px 14px;
}
.case-ba-item{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.case-ba-item span{font-size:11.5px;color:#8b8b96;font-weight:500}
.case-ba-item b{font-size:18px;font-weight:800;color:#111214;letter-spacing:-.01em;line-height:1.1}
.case-ba-item b.ba-from{color:#8b8b96;text-decoration:line-through;text-decoration-color:rgba(139,139,150,.4)}
.case-ba-item b.ba-to{color:#6D5AE6}
.case-ba-arrow{color:#6D5AE6;font-weight:800;font-size:16px;flex:none}
.case-summary{
font-size:13.5px;color:#5b5b66;line-height:1.65;margin:0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:860px){
.case-grid-4{grid-template-columns:1fr;gap:16px}
}
/* ==========================================================================
V5.8 · 点 18 · 全站 3D 立体 + 微交互动画增强
========================================================================== */
/* -- 全站可交互卡：3D 透视 + 鼠标跟随高光（已启用 .gp-page 与 .gp-home） --- */
body.gp-home .qa-box,
body.gp-page .card,
body.gp-page .lab-card,
body.gp-page .svc-card,
body.gp-page .price-card,
body.gp-page .gstep,
body.gp-page .step-card,
body.gp-page .duo-card,
body.gp-page .tile,
body.gp-page .case-card{
transform-style:preserve-3d;
will-change:transform;
}
/* -- 鼠标悬浮时，标题/图标 3D 上浮 --------------------------------------- */
body.gp-home .card:hover h3,
body.gp-home .card:hover .ic-box,
body.gp-home .gstep:hover .gstep-ic,
body.gp-page .card:hover h3,
body.gp-page .card:hover h4,
body.gp-page .step-card:hover .no,
body.gp-page .duo-card:hover .duo-orb,
body.gp-page .price-card:hover .who{
transform:translateZ(14px);
transition:transform .4s cubic-bezier(.34,1.5,.64,1);
}
/* -- 主按钮按下：3D 按压反馈 ---------------------------------------------- */
body.gp-home .btn:active,
body.gp-page .btn:active{
transform:translateY(1px) scale(.985);
transition:transform .12s ease;
}
/* -- 关键标题：subtle 入场 3D 翻入（仅作用于已 in 的元素，避免覆盖 .reveal 初始态） */
body.gp-home .reveal.in,
body.gp-page .reveal.in{
animation:gpTiltIn .65s cubic-bezier(.34,1.5,.64,1) both;
}
@keyframes gpTiltIn{
0% {opacity:0;transform:perspective(900px) rotateX(8deg) translateY(24px)}
100% {opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}
}
/* -- 关键图像：悬浮 3D 倾斜 + 缩放 ---------------------------------------- */
body.gp-home .ai-card:hover .ph img,
body.gp-page .card:hover .ph img,
body.gp-page .case-card:hover .case-photo img{
transform:scale(1.06) translateZ(8px);
}
/* -- 链接箭头：进入时滑动 ------------------------------------------------- */
body.gp-home a.btn-primary .arw,
body.gp-page a.btn-primary .arw,
body.gp-home a.btn-line .arw,
body.gp-page a.btn-line .arw{
transition:transform .35s cubic-bezier(.34,1.5,.64,1);
}
body.gp-home a.btn:hover .arw,
body.gp-page a.btn:hover .arw{
transform:translateX(4px);
}
/* -- 减少动画偏好：尊重系统设置 ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
body.gp-home *, body.gp-page *{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
}
/* ==========================================================================
V5.8.1 · 弹层输入框 + 追问框：圆润卡通风格
· input 圆角 18px + 浅紫底 + 紫色聚焦光晕，去除"长方形棱角"
· 追问框与主输入框视觉对齐，圆润胶囊
========================================================================== */
.qa-field > label{
font-size:12.5px;font-weight:700;color:#6D5AE6;margin-bottom:8px;letter-spacing:.02em;
}
.qa-field .input{
height:48px;padding:0 18px;border-radius:18px;border:2px solid #E7F0FF;background:#F8FBFF;
font-size:14.5px;color:var(--ink);font-weight:500;
transition:all .25s var(--ease);outline:none;
box-shadow:inset 0 2px 4px rgba(109,94,224,.04);
}
.qa-field .input::placeholder{color:#A8AEB8;font-weight:400}
.qa-field .input:hover{border-color:#D2DDF0;background:#fff}
.qa-field .input:focus{
border-color:#6D5AE6;background:#fff;
box-shadow:0 0 0 4px rgba(109,94,224,.12),inset 0 2px 4px rgba(109,94,224,.04);
}
/* 验证码行按钮：圆形胶囊 */
.qa-code-row .btn{border-radius:18px;height:48px;padding:0 18px;font-weight:600}
/* 弹层主按钮：圆润大胶囊 */
.qa-modal .btn-block{
height:50px;border-radius:18px;font-size:15px;font-weight:700;
margin-top:4px;letter-spacing:.02em;
}
/* 追问输入框：与上方同款圆润卡通 */
.qa-ask{
display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #E7F0FF;
align-items:center;
}
.qa-ask .input{
flex:1;height:46px;padding:0 18px;border-radius:18px;border:2px solid #E7F0FF;
background:#F8FBFF;font-size:14px;color:var(--ink);font-weight:500;outline:none;
transition:all .25s var(--ease);
box-shadow:inset 0 2px 4px rgba(109,94,224,.04);
}
.qa-ask .input::placeholder{color:#A8AEB8;font-weight:400}
.qa-ask .input:hover{border-color:#D2DDF0;background:#fff}
.qa-ask .input:focus{
border-color:#6D5AE6;background:#fff;
box-shadow:0 0 0 4px rgba(109,94,224,.12);
}
.qa-ask .btn{
flex:none;height:46px;padding:0 22px;border-radius:18px;font-weight:700;font-size:14px;
}
/* ==========================================================================
V5.8.2 · 整站视觉升级层
① 一体式背景（去掉区块断层拼接与直线分割线，改用连续底色 + 卡通色块）
② GEO 四步：2.5D 等轴测立体矢量插画卡 + 挤出式 3D 编号
③ 案例卡：柱状图 / 环形图 / 条形榜单替代表现素材图
④ 「选择此版本」按钮与同表其它按钮统一水平基线
⑤ 步骤数字 1/2/3 立体化、不再压住卡片内容
========================================================================== */
/* -- ① 一体式背景 ------------------------------------------------------- */
/* 连续底色：整页一个渐变，不再由每个 section 各自刷底色造成「横条断层」 */
html{background:linear-gradient(180deg,#FAFBFF 0%,#F6F8FE 22%,#F5F9FF 45%,#FDF8F4 68%,#F4F8FF 100%)}
body{background:transparent}
body.gp-home,body.gp-page{
background:linear-gradient(180deg,#FAFBFF 0%,#F6F8FE 22%,#F5F9FF 45%,#FDF8F4 68%,#F4F8FF 100%);
background-attachment:fixed;
}
/* 全站分区统一透明：底色只由上面那一层连续渐变提供 */
.section,.section--soft,.section--geo,.page-head,.footer{background:transparent}
/* 去掉硬分割线：改用柔和阴影/留白区分区块 */
.section--soft,.section--geo,.page-head{border:0}
.big-cta{border-top:0;background:transparent}
.big-cta::before,.big-cta::after{opacity:.55}
.footer{position:relative;z-index:1}
.footer-cta{border-bottom:0}
.copyright{border-top:0;position:relative}
.copyright::before{content:"";position:absolute;left:32px;right:32px;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(120,131,150,.18) 18%,rgba(120,131,150,.18) 82%,transparent)}
.nav{border-bottom:0;box-shadow:0 2px 20px rgba(20,24,60,.05)}
main{position:relative;z-index:1}
/* GEO 四步之间的贯穿直线轨道 → 去掉（用户要求页面不要直线分割感） */
.geo-flow::before{display:none}
/* 卡片/表格的直线：弱化到几乎看不见的雾面 */
.compare th,.compare td{border-bottom:1px solid rgba(140,145,170,.13)}
.compare thead th{border-bottom:0}
/* 卡通色块装饰层（fixed：随滚动始终铺满视口，保证背景「一体成型」）
V5.8.4：整体透明度下调（.55/.42 → .38/.46），配合模板里的低饱和淡彩，
呈现钉钉式「浅底 + 一点点颜色」的克制企业观感 */
.bg-deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-deco i{position:absolute;display:block;opacity:.38;will-change:transform}
.bg-deco .bl{filter:blur(58px);opacity:.5;border-radius:50%}
.bg-deco .sq{border-radius:14px}
.bg-deco .ci{border-radius:50%}
.bg-deco .rg{border-radius:999px;height:14px}
@media (max-width:900px){.bg-deco i{opacity:.26}.bg-deco .bl{opacity:.34}}
/* -- ② GEO 四步 · 2.5D 立体插画卡 --------------------------------------- */
.geo-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.gstep{
position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
padding:0 0 24px;border-radius:24px;overflow:hidden;
background:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.9);
box-shadow:0 10px 30px rgba(28,32,74,.07);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:transform .45s cubic-bezier(.34,1.4,.64,1),box-shadow .45s var(--ease);
}
.gstep:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(28,32,74,.13)}
.gstep[data-tone="violet"]{--t1:#EBF2FF;--t2:#F9FBFF;--tc:#6D5AE6}
.gstep[data-tone="blue"]{--t1:#E9F0FF;--t2:#F8FAFF;--tc:#3D6BF0}
.gstep[data-tone="mint"]{--t1:#E4F8F0;--t2:#F6FCFA;--tc:#12A87E}
.gstep[data-tone="amber"]{--t1:#FFF3E2;--t2:#FFFCF7;--tc:#E0842A}
/* 插画舞台：柔和色块 + 圆角，卡通感 */
.gstep-stage{
position:relative;width:100%;padding:16px 12px 8px;
display:flex;flex-direction:column;align-items:flex-start;
background:linear-gradient(160deg,var(--t1),var(--t2));
border-bottom-left-radius:38% 26px;border-bottom-right-radius:38% 26px;
}
/* 插画在本级里单独居中，编号留在左上角 */
.gstep-stage .g3d{align-self:center;margin-top:2px}
.gstep-stage::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
width:64%;height:14px;border-radius:50%;background:var(--tc);opacity:.13;filter:blur(6px)}
.g3d{width:100%;max-width:186px;height:auto;display:block;margin:0 auto;position:relative;z-index:1}
.g3d-float{animation:g3dFloat 3.6s ease-in-out infinite;transform-origin:50% 50%}
.gstep:nth-child(2) .g3d-float{animation-delay:.5s}
.gstep:nth-child(3) .g3d-float{animation-delay:1s}
.gstep:nth-child(4) .g3d-float{animation-delay:1.5s}
@keyframes g3dFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.g3d-float{animation:none}}
/* V5.8.3 · 编号统一为「入流立体胶囊」——占据正常文档流，永远不会压住任何文字。
选择器带 body 前缀，压过旧版 .gstep .gstep-no(0,2,0) 与 body.gp-home .gstep-no(0,2,1)。 */
body .gstep .gstep-no{
position:static;left:auto;top:auto;right:auto;z-index:auto;
display:flex;width:max-content;min-width:44px;height:38px;padding:0 12px;
align-items:center;justify-content:center;
border-radius:13px;font-size:14.5px;font-weight:900;letter-spacing:.08em;
line-height:1;color:#fff;
background:linear-gradient(165deg,#A99CF5,#5239D8);
box-shadow:0 4px 0 0 #0B3F94, 0 10px 18px rgba(44,89,166,.24),
inset 0 2px 0 rgba(255,255,255,.34);
font-variant-numeric:tabular-nums;
}
body .gstep:hover .gstep-no{
background:linear-gradient(165deg,#A99CF5,#5239D8);color:#fff;
}
.gstep[data-tone="blue"] .gstep-no{background:linear-gradient(165deg,#6FA0FF,#2F5FE0);
box-shadow:0 4px 0 0 #1E3FA8,0 10px 18px rgba(30,63,168,.22),inset 0 2px 0 rgba(255,255,255,.34)}
.gstep[data-tone="mint"] .gstep-no{background:linear-gradient(165deg,#5FD9B4,#12A87E);
box-shadow:0 4px 0 0 #0B7A5B,0 10px 18px rgba(11,122,91,.20),inset 0 2px 0 rgba(255,255,255,.34)}
.gstep[data-tone="amber"] .gstep-no{background:linear-gradient(165deg,#FFC46B,#EE8A22);
box-shadow:0 4px 0 0 #B4620F,0 10px 18px rgba(180,98,15,.20),inset 0 2px 0 rgba(255,255,255,.4)}
.gstep h4{font-size:17.5px;font-weight:800;margin:18px 0 0;padding:0 18px}
.gstep p{font-size:13px;color:var(--muted);margin:9px 0 0;padding:0 18px;line-height:1.66}
.gstep .gstep-tags{padding:0 16px}
.gstep .gstep-tags i{background:rgba(255,255,255,.9);border-color:rgba(150,161,180,.16)}
/* 兼容旧结构：老模板里若仍有 .gstep-badge 也不炸样式 */
.gstep .gstep-badge{display:none}
body.gp-home .gstep{background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.9)}
body.gp-home .gstep:hover{border-color:rgba(109,94,224,.22)}
@media (max-width:1080px){.geo-flow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.geo-flow{grid-template-columns:1fr}}
/* -- ③ 案例卡 · 数据图表 ------------------------------------------------- */
.case-chart{
position:relative;border-radius:20px;padding:26px 10px 10px;overflow:hidden;
background:linear-gradient(150deg,var(--c1,#EEF2FF),var(--c2,#E3E8FF));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.case-chart .case-tag{position:absolute;top:12px;z-index:3}
.case-chart .case-tag.dark{left:12px}
.case-chart .case-tag.geo{left:auto;right:12px}
.cchart{width:100%;height:auto;display:block}
.case-card .case-photo{display:none}
.case-card:hover .cchart{transform:translateY(-2px)}
.cchart{transition:transform .5s var(--ease)}
@media (max-width:520px){.case-chart{padding:30px 8px 8px}}
/* -- ④ 「选择此版本」按钮水平对齐 --------------------------------------- */
/* 推荐列多了一个 .rec-badge，把这一行顶高，导致按钮基线比其它列低。
做法：徽章绝对定位脱离文档流 + 表头预留等高空白 → 所有列按钮同一水平线。 */
.compare thead th{position:relative;vertical-align:bottom;padding-top:54px}
.compare thead th .rec-badge{
position:absolute;top:12px;left:50%;transform:translateX(-50%);
white-space:nowrap;z-index:2;
}
.compare thead th .btn,
.compare thead th .btn-pick{
display:flex;width:auto;max-width:150px;margin:10px auto 0;
padding:9px 16px;font-size:12.5px;height:auto;min-height:36px;
align-items:center;justify-content:center;
}
.compare .btn-pick{margin-top:10px}
body.gp-page .compare thead th{vertical-align:bottom}
/* -- ⑤ 步骤编号：入流立体胶囊（「不管什么行业，都从这三步开始」等 1/2/3/4 卡） -- */
.steps{gap:26px}
.step-card{
position:relative;padding:26px 26px 28px;border-radius:24px;overflow:visible;
background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
box-shadow:0 10px 30px rgba(28,32,74,.07);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.step-card:hover{box-shadow:0 22px 46px rgba(28,32,74,.12);transform:translateY(-6px)}
/* V5.8.3 · 编号走正常文档流（display:flex + width:max-content 不受 text-align 影响），
与标题之间由 margin-bottom 撑开固定间距——结构上不可能再压到文字。 */
body .step-card .no{
position:static;left:auto;top:auto;z-index:auto;margin:0 0 14px;
display:flex;width:max-content;min-width:46px;height:40px;padding:0 13px;
align-items:center;justify-content:center;
border-radius:13px;font-size:15px;font-weight:900;letter-spacing:.08em;
line-height:1;color:#fff;font-variant-numeric:tabular-nums;
background:linear-gradient(165deg,#A99CF5,#5239D8);
box-shadow:0 4px 0 0 #0B3F94, 0 10px 18px rgba(44,89,166,.22),
inset 0 2px 0 rgba(255,255,255,.34);
transform:none;
}
.step-card:nth-child(2) .no{background:linear-gradient(165deg,#6FA0FF,#2F5FE0);
box-shadow:0 4px 0 0 #1E3FA8,0 10px 18px rgba(30,63,168,.22),inset 0 2px 0 rgba(255,255,255,.34)}
.step-card:nth-child(3) .no{background:linear-gradient(165deg,#5FD9B4,#12A87E);
box-shadow:0 4px 0 0 #0B7A5B,0 10px 18px rgba(11,122,91,.20),inset 0 2px 0 rgba(255,255,255,.34)}
.step-card:nth-child(4) .no{background:linear-gradient(165deg,#FFC46B,#EE8A22);
box-shadow:0 4px 0 0 #B4620F,0 10px 18px rgba(180,98,15,.20),inset 0 2px 0 rgba(255,255,255,.4)}
.step-card h4{margin-top:0}
/* -- ⑥ Hero 徽章「归浦 AI · 企业级 AI 产品与品牌增长平台」整体上移 -------- */
body.gp-home .hero{padding-top:calc(106px + var(--sat))}
body.gp-home .hero-badge{
margin-bottom:16px;padding:8px 20px;font-size:13px;
background:rgba(255,255,255,.86);border:1px solid rgba(109,94,224,.16);
color:#5239D8;box-shadow:0 6px 18px rgba(109,94,224,.10);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
body.gp-home .hero-badge i{background:#6D5AE6;box-shadow:0 0 0 4px rgba(109,94,224,.16)}
@media (max-width:640px){
body.gp-home .hero{padding-top:calc(96px + var(--sat))}
body.gp-home .hero-badge{margin-bottom:14px}
}
/* -- ⑦ V5.8.2 · 高优先级覆盖（解决旧规则特异性更高导致的「底色没换掉」） -- */
/* Hero 原本自带 白→灰 渐变，会和整页连续背景形成明显断层，这里统一透明 */
body.gp-home .hero{background:transparent}
body.gp-home .section--soft{background:transparent}
body.gp-home .section--geo{background:transparent}
body.gp-home .big-cta{
background:transparent;border:0;
box-shadow:none;
}
body.gp-home .hero-stage .stage-shell{box-shadow:0 24px 60px rgba(28,32,74,.12)}
/* 底部 CTA 用一块「漂浮卡片」表达，而不是整段刷底色 —— 既不断层又有层次 */
body.gp-home .big-cta .container{
max-width:980px;padding:clamp(36px,4vw,54px) 32px;border-radius:30px;
background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);
box-shadow:0 18px 44px rgba(28,32,74,.09);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.gp-page .big-cta .container{
max-width:980px;padding:clamp(36px,4vw,54px) 32px;border-radius:30px;
background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);
box-shadow:0 18px 44px rgba(28,32,74,.09);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
/* GEO 四步卡：覆盖 V5.7 遗留的旧内边距 / 旧编号色 */
body.gp-home .gstep{padding:0 0 24px;overflow:hidden}
body.gp-home .gstep-no{color:#fff}
body.gp-home .gstep-stage{background:linear-gradient(160deg,var(--t1),var(--t2))}
body.gp-home .gstep h4{padding:0 18px}
body.gp-home .gstep p{padding:0 18px}
/* ==========================================================================
V5.8.3 · 导航栏溢出修复（全站 P0）
--------------------------------------------------------------------------
问题：桌面导航在 1025~1300px 区间内容宽 831px，而 .nav-menu 被 flex 压到
只有约 739px，overflow:visible 让最后一项「帮助与反馈」溢出菜单盒子，
又被右侧 .nav-acts 里的「工作台」按钮盖住（重叠约 2489px²，实测几何）。
修复：① 折叠阈值由 1024px 上移到 1240px，保证桌面导航永不溢出；
② 1241~1400px 走「紧凑档」，压缩间距、字号与按钮内边距。
========================================================================== */
@media (max-width:1240px){
body .nav .nav-menu{display:none!important}
body .nav .burger{display:flex!important}
}
@media (min-width:1241px){
body .nav .nav-inner{gap:clamp(12px,1.1vw,30px)}
body .nav .nav-menu{gap:2px}
/* 内边距/字号随视口平滑缩放：既保证不溢出，又避免出现硬断点导致的跳变 */
body .nav .nav-menu>a,body .nav .nav-top{
padding:8px clamp(9px,.75vw,14px);
font-size:clamp(13.4px,.95vw,14.5px);
}
body .nav .nav-acts{gap:8px}
}
/* ==========================================================================
V5.8.5 · G8：产品截图点击放大（轻量灯箱）
文档要求「所有产品截图支持点击放大查看」，与统一浏览器边框配套。
========================================================================== */
.gp-zoomable{cursor:zoom-in;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.gp-zoomable:hover{transform:scale(1.012)}
.gp-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
padding:clamp(16px,4vw,56px);background:rgba(8,10,18,.82);backdrop-filter:blur(6px);
opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease}
.gp-lightbox.on{opacity:1;visibility:visible}
.gp-lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-lg);background:#fff;
box-shadow:0 32px 90px rgba(0,0,0,.5);transform:scale(.97);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.gp-lightbox.on img{transform:scale(1)}
.gp-lightbox .gpl-close{position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);
width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:.2s}
.gp-lightbox .gpl-close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){
.gp-zoomable,.gp-lightbox,.gp-lightbox img{transition:none!important}
.gp-zoomable:hover{transform:none}
}
/* ==========================================================================
V5.8.5 · G10：案例卡「优化前 → 优化后」指标行
原实现用删除线 + baseline 对齐，「未进入」紧贴大数字易误读为负数。
改为：前置小字标签（浅灰胶囊）+ 数字，行内纵向居中，语义清晰。
========================================================================== */
.case-metric-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.case-metric-row .num{margin-top:0}
.case-from{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;
background:var(--soft);color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.01em;
white-space:nowrap}
.case-from::after{content:"→";margin-left:8px;color:var(--line);font-weight:700}
@media (max-width:560px){
.case-metric-row{gap:9px}
.case-from{height:24px;font-size:12px;padding:0 9px}
}
/* V5.8.5 · 案例卡：指标行后的标题/正文明确左对齐，避免被 flex 行影响偏移 */
.case-big .bd .case-metric-row + h3{text-align:left}
.case-big .bd h3,.case-big .bd p{text-align:left}
/* ==========================================================================
V5.8.5 · 首页数据带口径说明（文档 5.1：数据带建议标注口径，避免访客误解）
========================================================================== */
.hero-stats-note{max-width:760px;margin:16px auto 0;text-align:center;
font-size:12.5px;line-height:1.7;color:var(--muted);text-wrap:pretty}
@media (max-width:560px){.hero-stats-note{font-size:12px;margin-top:12px;padding:0 4px}}