/* ============ 基础层：reset、排版、容器、通用原子类、按钮、占位样式 ============
   来源 design/site.css（数值逐个对齐），补充样式见文件下半部分。 */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{margin:0;font-family:var(--font);background:var(--bg);color:var(--t-1);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

ul,ol{padding:0;list-style:none}

a{color:inherit;text-decoration:none}

svg{display:block}

img{display:block;max-width:100%}

h1,h2,h3,h4,p,ul,ol,figure{margin:0}

button,input,select,textarea{font:inherit;color:inherit;border:0;background:0}

::selection{background:var(--brand-200);color:var(--ink-900)}

.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}

.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* 图标 */
.i{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

.i-f{fill:currentColor;stroke:none}

.i-sm{width:16px;height:16px}

.i-lg{width:24px;height:24px}

/* 通用 */
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;background:rgba(0,176,224,.08);border:1px solid rgba(0,176,224,.22);color:var(--brand-800);font-size:13px;font-weight:500;letter-spacing:.02em}

.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-500);box-shadow:0 0 0 3px rgba(0,176,224,.18)}

.eyebrow.dark{background:rgba(53,200,238,.1);border-color:rgba(53,200,238,.28);color:#7FDCF2}

.eyebrow.dark .dot{background:#35C8EE;box-shadow:0 0 0 3px rgba(53,200,238,.18)}

.h2{font-size:40px;line-height:1.22;font-weight:600;letter-spacing:-.01em;color:var(--t-1)}

.h2.dark{color:#fff}

.lead{font-size:17px;line-height:1.75;color:var(--t-2);max-width:62ch}

.small{font-size:13px;color:var(--t-3)}

.link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--action)}

.link-arrow:hover{gap:9px;transition:.2s}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.18s}

.btn-primary{background:var(--action);color:#fff;box-shadow:0 10px 24px var(--action-s)}

.btn-primary:hover{background:var(--action-h);transform:translateY(-1px)}

.btn-ghost{background:#fff;color:var(--t-1);border:1px solid var(--line-2)}

.btn-ghost:hover{border-color:var(--brand-300);color:var(--action)}

.btn-dark-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22)}

.btn-dark-ghost:hover{background:rgba(255,255,255,.12)}

.btn-sm{height:42px;padding:0 20px;font-size:14px;border-radius:8px}

.btn-lg{height:56px;padding:0 30px;font-size:17px}

.nowrap{white-space:nowrap}

/* ============ 响应式 ============ */
@media (max-width:1080px){
  .h1{font-size:50px}
  .console-wrap{width:calc(100% - 24px)}
  .c-float-1{left:8px}.c-float-2{right:8px}
}

@media (max-width:880px){
  .wrap{width:calc(100% - 32px)}
  .btn{height:48px;font-size:15px}
  .h2{font-size:27px}
  body{padding-bottom:70px}
}

/* ============ 公共层补充样式（设计稿没有、施工必需） ============
   只放跨页复用、且不在设计稿内的规则。页面独占样式一律进 styles/pages/*.css。 */

/* 占位素材统一形态：浅灰虚线框 + 「样例 · 待替换」角标。
   来源 placeholders.json，全站一份样式，页面不许自己写。
   state=ready 后构建输出真实值，这层样式自动失效。 */
.ph{
  position:relative;
  display:inline-block;
  padding:0 6px;   /* 不撑行高：占位只该在横向上明显，不能让页脚行高变化 */
  border:1px dashed var(--ph-line);
  border-radius:var(--r-sm);
  background:var(--ph-bg);
  color:var(--t-3);
  font-size:.92em;
  line-height:inherit;
}
a.ph{cursor:pointer}
.ph::after{
  content:"样例 · 待替换";
  margin-left:6px;
  padding:0 5px;
  border-radius:4px;
  background:rgba(0,119,168,.08);
  color:var(--brand-800);
  font-size:11px;
  white-space:nowrap;
}
/* 深底占位（深色区块里的联系方式） */
.ph.on-dark{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:rgba(255,255,255,.72)}
.ph.on-dark::after{background:rgba(255,255,255,.14);color:#fff}

/* 锚点定位：粘性导航会盖住标题，统一留出 --nav-h 的空隙。
   案例卡 → /solutions/rag#retail 这类跳转全靠这条 + filter 后的补滚。 */
:target,
[id]{scroll-margin-top:var(--nav-h)}

/* 跳转主内容：键盘用户第一个 Tab 位 */
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  padding:10px 16px;border-radius:var(--r-md);
  background:var(--action);color:#fff;font-weight:600;
  transition:top .18s ease;
}
.skip-link:focus{top:8px}

/* 全站统一聚焦可见：不允许裸写 outline:none */
:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:4px}
.cta-panel :focus-visible,.poc :focus-visible{outline-color:var(--brand-200)}

/* 减少动态偏好：全站生效 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* hidden 属性优先于组件自身的 display（筛选/抽屉靠它隐藏，别再被 display:grid/flex 顶掉） */
.case-card[hidden],.case-grid[hidden],.mfilter[hidden],.empty[hidden]{display:none !important}

/* 读屏专用 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.visually-hidden{position:absolute;left:-9999px}