/* =====================================================
  Shared components / Header, buttons, cards, modal
===================================================== */
.site-header { position: sticky; z-index: 40; top: 0; height: var(--header-height); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 5px 23px rgba(21,50,102,.045); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 20px; font-weight: 860; letter-spacing: -.8px; }
.brand .brand__dot { width: 6px; height: 6px; margin: 0 0 1px 2px; border-radius: 50%; background: var(--blue); }
.brand--footer { color: white; }
.desktop-nav { display: flex; align-items: center; gap: clamp(14px,2.1vw,30px); margin-left: auto; }
.desktop-nav a { position: relative; color: var(--navy-light); font-size: 11.5px; font-weight: 760; padding: 29px 0; transition: color .2s; white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--blue); }
.desktop-nav a.is-active::after { position: absolute; content: ''; bottom: 21px; left: 0; right: 0; height: 2px; border-radius: 3px; background: var(--blue); }
.site-header__actions { display: flex; align-items: center; gap: 10px; }
.mobile-toggle { display: none; width: 42px; height: 42px; place-items: center; border-radius: 11px; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; }
.mobile-nav { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: white; padding: 8px max(20px, calc((100vw - var(--max-width)) / 2)) 18px; border-bottom: 1px solid var(--line); box-shadow: 0 18px 29px rgba(20,49,105,.11); }
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 50px; border-bottom: 1px solid #eef1f8; font-size: 13px; font-weight: 760; }
.mobile-nav a:last-child { border-bottom: 0; color: var(--blue); }
/* Fills use the original provided text/metrics, not an image-based dashboard */
.metric-card { position: relative; padding: 23px 21px 23px; overflow: hidden; background: white; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.metric-card::after { position: absolute; content: ''; width: 112px; height: 112px; right: -43px; top: -44px; border-radius: 50%; background: linear-gradient(145deg, rgba(225,236,255,.85),rgba(240,245,255,.25)); }
.metric-card__label { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 770; position: relative; z-index: 1; }
.metric-card__label .icon { color: var(--blue); }
.metric-card__eyebrow { margin-top: 16px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.metric-card__number { font-size: clamp(31px,3vw,44px); line-height: 1.18; letter-spacing: -1.9px; font-weight: 860; color: var(--blue); margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.metric-card__number small { font-size: 17px; letter-spacing: -.5px; }
.metric-card__foot { min-height: 35px; margin-top: 11px; font-size: 11px; color: #5f7298; line-height: 1.75; }
/* Project-card preview is deliberately built from native HTML/CSS instead of fake client screenshots. */
.project-card { border: 1px solid #e1e7f3; background: white; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #cbdaf6; }
.project-card__button { display: grid; grid-template-columns: 47% 53%; align-items: stretch; width: 100%; min-height: 249px; background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.project-card__content { padding: 26px 25px 22px; min-width: 0; display: flex; flex-direction: column; }
.project-card__heading { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.project-card__title { font-size: 15px; line-height: 1.45; margin: 0; font-weight: 830; letter-spacing: -.25px; }
.project-card__arrow { display: grid; place-items: center; background: #eff4ff; color: var(--blue); border-radius: 9px; width: 28px; height: 28px; flex: none; transition: transform .2s; }
.project-card:hover .project-card__arrow { transform: translate(2px,-2px); }
.project-card__type { margin-top: 7px; font-size: 10px; font-weight: 740; color: var(--blue); line-height: 1.5; }
.project-card__desc { margin: 12px 0 14px; font-size: 12px; line-height: 1.85; color: var(--muted); flex: 1; }
.project-card__visual { position: relative; background: radial-gradient(circle at 26% 20%,rgba(255,255,255,.98),transparent 34%),linear-gradient(145deg,#eef4ff,#dce9ff); overflow: hidden; padding: 17px 13px; display: grid; place-items: center; isolation: isolate; }
.project-card__visual::after { content: ''; position: absolute; inset: 0; opacity: .34; pointer-events: none; background-image: radial-gradient(#95b6f5 .7px,transparent .7px); background-size: 10px 10px; mask-image: linear-gradient(115deg,transparent,black); }
.project-card__visual--ai { background: linear-gradient(135deg,#f4f7ff,#e2e9ff); }
.project-card__visual--data { background: linear-gradient(135deg,#eff8ff,#dbeefe); }
.project-card__visual--social { background: linear-gradient(140deg,#eef3ff,#e1eafd); }
.preview-label { position: absolute; z-index: 4; top: 16px; left: 16px; background: rgba(255,255,255,.87); border: 1px solid #dfe8f7; color: #59729e; padding: 6px 8px; border-radius: 7px; font-size: 8px; font-weight: 850; letter-spacing: .6px; }
.preview-note { position: absolute; z-index: 4; bottom: 10px; left: 0; width: 100%; color: #6880a8; font-size: 8px; font-weight: 600; text-align: center; }
.mini-stage { position: relative; z-index: 2; width: 100%; max-width: 232px; margin-top: 15px; }
/* ERP preview */
.flow-chain { display: flex; align-items: center; justify-content: space-between; gap: 1px; }
.flow-chip { flex: 1; background: rgba(255,255,255,.97); border: 1px solid #d7e3fa; border-radius: 9px; min-width: 0; padding: 12px 4px 11px; box-shadow: 0 8px 16px rgba(29,66,132,.08); text-align: center; }
.flow-chip__icon { display: grid; place-items: center; margin: 0 auto 7px; height: 31px; width: 31px; border-radius: 9px; background: #edf3ff; color: var(--blue); }
.flow-chip__name { display: block; color: var(--navy); font-size: 9px; font-weight: 850; white-space: nowrap; }
.flow-chip__sub { display: block; font-size: 7px; color: #99a6bc; margin-top: 4px; white-space: nowrap; }
.flow-arrow { color: #6190f1; font-size: 14px; font-weight: 800; padding: 0 2px; }
.flow-progress { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 11px; margin-top: 10px; background: rgba(255,255,255,.9); border: 1px solid #dfE8f8; border-radius: 9px; }
.flow-progress__title { color: #6b7fa5; font-size: 9px; font-weight: 700; }
.flow-progress__bar { flex: 1; max-width: 84px; height: 5px; background: #e8effe; border-radius: 4px; overflow: hidden; }
.flow-progress__bar i { display:block; width: 80%; height: 100%; background: var(--blue); border-radius: 4px; }
.flow-progress strong { color: var(--blue); font-size: 10px; }
/* AI preview */
.review-mock { display:grid;grid-template-columns: 1.05fr .95fr; gap: 7px; transform: rotate(-3deg); }
.review-doc, .review-score { padding: 12px 10px; border-radius: 10px; background: #fff; border: 1px solid #dce5f7; box-shadow: 0 8px 20px rgba(44,66,147,.1); min-height: 126px; }
.mock-window-dots { display: flex; gap: 3px; margin-bottom: 13px; }
.mock-window-dots i { width: 4px; height: 4px; border-radius: 50%; background: #bdcef0; }
.mock-line { display:block; height: 5px; border-radius: 5px; margin: 8px 0; background: #e9effa; }
.mock-line:nth-child(3) { width: 79%; }.mock-line:nth-child(4) { width: 94%; }.mock-line:nth-child(5) { width: 61%; }
.review-doc__seal { display:inline-flex; padding: 4px 6px; margin-top: 5px; font-size: 8px; color: #3c6dee; background: #edf3ff; border-radius: 4px; font-weight: 800; }
.review-score__heading { display:flex;justify-content:space-between;align-items:center; font-size: 8px; font-weight: 900; margin-bottom: 14px; }
.review-score__heading .icon { color: var(--blue); width: 14px; height: 14px; }
.review-score__ring { width: 65px;height: 65px;display:grid;place-items:center;margin:0 auto 9px;border-radius: 50%;background: conic-gradient(var(--blue) 0 82%,#e7eefc 82% 100%); }
.review-score__ring::before { content: 'AI'; display:grid;place-items:center;background:white;color:var(--blue);font-weight:900;font-size:17px;border-radius:50%;width:52px;height:52px; }
.review-score__status { display: block; text-align: center; font-size:8px; color: #5680e9; font-weight:800; }
/* Data preview */
.data-mock { padding: 13px; border:1px solid #d9e7f5;border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 11px 20px rgba(28,75,138,.11);transform:rotate(2deg); }
.data-mock__top { display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:850;margin-bottom:13px; }
.data-mock__top span { color:var(--blue);font-size:8px;background:#eaf1ff;border-radius:5px;padding:4px 6px; }
.data-source { display:flex;gap:4px;align-items:center;justify-content:space-between;margin-bottom:12px; }
.data-source i { display:grid;place-items:center; flex:1; border-radius:5px; min-width:0; height:27px; border:1px solid #e2e9f7;background:#f5f8fe;color:#607cae;font-size:8px;font-weight:850;font-style:normal; }
.data-source b { color:#7a9de6;font-size:13px; }
.data-mock__chart { height:57px;position:relative;overflow:hidden;border-radius:4px;background:linear-gradient(to top,#f1f5ff,white); }
.data-mock__chart svg { width:100%;height:100%; }
/* Monitor preview */
.monitor-mock { border:1px solid #e0e8fa;border-radius:12px;background:#fff;padding:12px;box-shadow:0 10px 20px rgba(30,66,140,.1);transform:rotate(-2deg); }
.monitor-mock__title { display:flex;justify-content:space-between; font-size:10px;font-weight:850; margin-bottom:10px; }
.monitor-mock__live { color:#41846d;font-size:8px;font-weight:850;display:flex;align-items:center;gap:4px; }
.monitor-mock__live::before { content:'';width:5px;height:5px;border-radius:50%;background:#32b783; }
.monitor-bars { display:flex; align-items:end; justify-content:space-between; height:76px;gap:7px; padding:0 3px 2px; border-bottom:1px solid #e7ebf6; }
.monitor-bars i { flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#86b0ff,#2d64ed); }
.monitor-bars i:nth-child(1) { height:42%; }.monitor-bars i:nth-child(2) { height:66%; }.monitor-bars i:nth-child(3) { height:52%; }.monitor-bars i:nth-child(4) { height:81%; }.monitor-bars i:nth-child(5) { height:62%; }.monitor-bars i:nth-child(6) { height:94%; }.monitor-bars i:nth-child(7) { height:78%; }
.monitor-mock__caption { display:flex;justify-content:space-between;gap:6px;margin-top:8px;color:#8ba0c1;font-size:8px;font-weight:700; }
/* Detail panel */
.detail-overlay { position:fixed;z-index:100;inset:0;background:rgba(10,29,66,.58);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s; display:flex;justify-content:center;align-items:center;padding:22px; }
.detail-overlay.is-open { opacity:1;visibility:visible;transition:opacity .25s,visibility 0s; }
.detail-dialog { width:min(100%,600px);background:white;border-radius:22px;padding:28px;box-shadow:0 30px 70px rgba(8,22,55,.28);max-height:min(740px,calc(100dvh - 44px));overflow:auto;position:relative;transform:translateY(15px);transition:transform .2s; }
.detail-overlay.is-open .detail-dialog { transform:translateY(0); }
.detail-dialog__close { position:absolute;top:21px;right:21px;width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:white;color:var(--navy);cursor:pointer; }
.detail-dialog__badge { color:var(--blue);font-weight:850;letter-spacing:1.1px;font-size:10px; }
.detail-dialog h2 { font-size:25px;margin:13px 42px 8px 0;line-height:1.35; }
.detail-dialog__subtitle { color:var(--muted);font-size:12px; }
.detail-dialog__description { line-height:1.9;color:#3e527a;font-size:13px;margin:20px 0; }
.detail-dialog__metric { border-top:1px solid var(--line);padding-top:20px;margin:20px 0; }
.detail-dialog__metric-label { font-size:10px;color:var(--blue);font-weight:850;letter-spacing:1px;margin-bottom:10px; }
.detail-dialog__metric strong { display:block;font-size:20px;line-height:1.5; }
.detail-dialog__bottom { display:flex;gap:8px;margin-top:26px; }
/* 键盘焦点在卡片内可见，不被圆角裁切；触屏不保留悬停位移。 */
.project-card:focus-within { outline:3px solid #91b6ff;outline-offset:3px; }
.project-card__button:focus-visible { outline:none; }
.metric-card__number { font-variant-numeric:tabular-nums; }
@media (hover:none) {
  .project-card:hover,.btn:hover,.project-card:hover .project-card__arrow { transform:none; }
}