/* ==========================================================================
   宗大鹏 · 官方网站 设计系统
   opc01.cn  |  AI 增长咨询 × 生成式引擎优化（GEO）
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root {
  --bg:        #070b14;
  --bg-2:      #0b1120;
  --bg-3:      #0f1727;
  --card:      #101a2b;
  --card-2:    #142032;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --line-3:    rgba(255,255,255,.22);

  --ink:       #eef3f9;
  --ink-2:     #9dabbd;
  --ink-3:     #6a7b91;

  --brand:     #4d8dff;
  --brand-2:   #22d3b8;
  --brand-3:   #7c5cff;
  --accent:    #f0b354;
  --red:       #ff5c5c;

  --grad:      linear-gradient(135deg, #4d8dff 0%, #22d3b8 100%);
  --grad-soft: linear-gradient(135deg, rgba(77,141,255,.14) 0%, rgba(34,211,184,.10) 100%);

  --r:   12px;
  --r-s: 8px;
  --max: 1160px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------- 2. 重置 ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.72;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* 背景微光 */
body::before {
  content:'';
  position:fixed; top:-30vh; left:50%; transform:translateX(-50%);
  width:120vw; height:80vh;
  background: radial-gradient(ellipse at center, rgba(77,141,255,.13) 0%, rgba(34,211,184,.05) 40%, transparent 70%);
  pointer-events:none; z-index:0;
}

/* ---------- 3. 布局 ---------- */
.wrap { max-width: var(--max); margin:0 auto; padding:0 28px; position:relative; z-index:1; }
section { padding: 88px 0; position:relative; z-index:1; }
.sec-tight { padding: 60px 0; }

/* ---------- 4. 导航 ---------- */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(7,11,20,.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: var(--max); margin:0 auto; padding: 14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand { display:flex; align-items:baseline; gap:10px; }
.brand .n {
  font-size:19px; font-weight:700; letter-spacing:.04em;
  background: var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand .t {
  font-size:11px; color:var(--ink-3); font-family:var(--mono);
  letter-spacing:.06em; white-space:nowrap;
}
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a {
  font-size:14.5px; color:var(--ink-2); font-weight:500;
  transition: color .25s; position:relative; padding:4px 0;
}
.nav-links a:hover, .nav-links a.on { color:var(--ink); }
.nav-links a.on::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--grad); border-radius:2px;
}
.nav-cta {
  font-size:14px; padding:8px 18px; border-radius:var(--r-s);
  background: var(--grad); color:#04101f; font-weight:600;
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(77,141,255,.35); }
.burger { display:none; width:38px; height:38px; align-items:center; justify-content:center; }
.burger span { display:block; width:20px; height:1.6px; background:var(--ink); position:relative; }
.burger span::before, .burger span::after {
  content:''; position:absolute; left:0; width:20px; height:1.6px; background:var(--ink);
}
.burger span::before { top:-6px; } .burger span::after { top:6px; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:var(--r-s);
  font-size:15px; font-weight:600; transition: all .25s;
  border:1px solid transparent;
}
.btn-p { background:var(--grad); color:#04101f; }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(77,141,255,.32); }
.btn-g { border-color:var(--line-2); color:var(--ink); }
.btn-g:hover { border-color:var(--line-3); background:rgba(255,255,255,.04); }
.btn-row { display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- 6. 标签 / 徽章 ---------- */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-family:var(--mono); letter-spacing:.04em;
  padding:5px 12px; border-radius:100px;
  border:1px solid var(--line-2); color:var(--ink-2);
  background: rgba(255,255,255,.03);
}
.pill-b { border-color:rgba(77,141,255,.4); color:#8fb8ff; background:rgba(77,141,255,.09); }
.pill-t { border-color:rgba(34,211,184,.4); color:#6fe3d0; background:rgba(34,211,184,.09); }
.pill-a { border-color:rgba(240,179,84,.4); color:#f0c176; background:rgba(240,179,84,.09); }

/* ---------- 7. 标题 ---------- */
.eyebrow {
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand-2); margin-bottom:16px;
}
h1 { font-size:clamp(30px,4.4vw,50px); line-height:1.24; font-weight:700; letter-spacing:-.02em; }
h2 { font-size:clamp(24px,3vw,34px); line-height:1.3; font-weight:700; letter-spacing:-.015em; margin-bottom:16px; }
h3 { font-size:19px; font-weight:700; margin-bottom:10px; letter-spacing:-.005em; }
h4 { font-size:16px; font-weight:700; margin-bottom:8px; }
.sec-head { margin-bottom:48px; max-width:760px; }
.sec-head p { color:var(--ink-2); font-size:16.5px; }
.lead { font-size:17.5px; color:var(--ink-2); line-height:1.78; }
.grad-t {
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- 8. 卡片 ---------- */
.grid { display:grid; gap:20px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }

.card {
  background: var(--card); border:1px solid var(--line);
  border-radius: var(--r); padding:28px 26px;
  transition: border-color .3s, transform .3s, background .3s;
}
.card:hover { border-color:var(--line-2); transform:translateY(-3px); }
.card .ic {
  width:38px; height:38px; border-radius:9px; margin-bottom:16px;
  background: var(--grad-soft); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:15px; color:var(--brand-2); font-weight:700;
}
.card p { color:var(--ink-2); font-size:15px; line-height:1.75; }

/* 强调卡 */
.card-hl { background:var(--grad-soft); border-color:rgba(77,141,255,.28); }

/* ---------- 9. 数字 ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stat { background:var(--bg-2); padding:26px 22px; text-align:center; }
.stat .v { font-family:var(--mono); font-size:32px; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.stat .l { font-size:13px; color:var(--ink-3); margin-top:6px; }

/* ---------- 10. 表格 ---------- */
.tbl { width:100%; border-collapse:collapse; font-size:14.5px; margin:8px 0; }
.tbl caption { text-align:left; font-size:13px; color:var(--ink-3); padding-bottom:10px; font-family:var(--mono); }
.tbl th {
  text-align:left; font-weight:600; font-size:13px; color:var(--ink-2);
  padding:11px 14px; border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.025);
}
.tbl td { padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top; line-height:1.68; }
.tbl tr:last-child td { border-bottom:none; }
.tbl strong { color:var(--ink); font-weight:600; }

/* ---------- 11. 列表 ---------- */
.ul-dot { }
.ul-dot li {
  position:relative; padding-left:22px; margin-bottom:11px;
  color:var(--ink-2); font-size:15.5px; line-height:1.72;
}
.ul-dot li::before {
  content:''; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--brand-2);
}
.ul-dot li strong { color:var(--ink); }

.ul-num { counter-reset:n; }
.ul-num li {
  position:relative; padding-left:40px; margin-bottom:16px;
  color:var(--ink-2); font-size:15.5px; line-height:1.72;
}
.ul-num li::before {
  counter-increment:n; content:counter(n,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--brand-2);
}
.ul-num li strong { color:var(--ink); display:block; margin-bottom:3px; }

/* ---------- 12. 分栏 ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.split-wide { grid-template-columns:1.15fr 1fr; }

/* ---------- 13. 引用块 ---------- */
.quote {
  border-left:2px solid var(--brand-2); padding:4px 0 4px 22px;
  color:var(--ink-2); font-size:16px; line-height:1.85;
}
.side-note {
  background:var(--card); border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:var(--r-s); padding:20px 22px; font-size:14.5px; color:var(--ink-2); line-height:1.75;
}

/* ---------- 14. 流程 ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.step { background:var(--bg-2); padding:26px 22px; }
.step .n { font-family:var(--mono); font-size:11.5px; color:var(--brand-2); letter-spacing:.12em; margin-bottom:12px; }
.step h4 { font-size:15.5px; margin-bottom:8px; }
.step p { font-size:14px; color:var(--ink-2); line-height:1.7; }

/* ---------- 15. 分隔标题 ---------- */
.divider { height:1px; background:var(--line); margin:0; }

/* ---------- 16. 页脚 ---------- */
.foot { border-top:1px solid var(--line); padding:56px 0 34px; margin-top:20px; position:relative; z-index:1; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.foot h5 { font-size:13px; font-family:var(--mono); letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.foot a, .foot p { font-size:14px; color:var(--ink-2); line-height:1.9; display:block; }
.foot a:hover { color:var(--ink); }
.foot-bot {
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-3); font-family:var(--mono);
}

/* ---------- 17. CTA 区 ---------- */
.cta-band {
  background: var(--grad-soft); border:1px solid rgba(77,141,255,.24);
  border-radius:var(--r); padding:52px 48px; text-align:center;
}
.cta-band h2 { margin-bottom:14px; }
.cta-band p { color:var(--ink-2); max-width:600px; margin:0 auto 30px; font-size:16.5px; }
.cta-band .btn-row { justify-content:center; }

/* ---------- 18. 页面头 ---------- */
.page-head { padding: 152px 0 64px; border-bottom:1px solid var(--line); }
.page-head .lead { max-width:720px; margin-top:18px; }
.crumb { font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-bottom:18px; letter-spacing:.06em; }
.crumb a:hover { color:var(--brand-2); }

/* ---------- 19. 代码块 ---------- */
pre {
  font-family:var(--mono); font-size:12.5px; line-height:1.7;
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-s);
  padding:18px 20px; overflow-x:auto; color:#c2d4e8;
}
code {
  font-family:var(--mono); font-size:.9em;
  background:rgba(255,255,255,.06); padding:2px 6px; border-radius:4px; color:#a8c8ee;
}

/* ---------- 20. 时间线 ---------- */
.tl { border-left:1px solid var(--line-2); padding-left:30px; }
.tl-item { position:relative; padding-bottom:32px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before {
  content:''; position:absolute; left:-35px; top:8px;
  width:9px; height:9px; border-radius:50%; background:var(--brand-2);
  box-shadow:0 0 0 4px rgba(34,211,184,.14);
}
.tl-item .yr { font-family:var(--mono); font-size:12.5px; color:var(--brand-2); letter-spacing:.06em; margin-bottom:6px; }
.tl-item h4 { font-size:16px; margin-bottom:5px; }
.tl-item p { font-size:14.5px; color:var(--ink-2); }

/* ---------- 21. 响应式 ---------- */
@media (max-width: 980px) {
  .g4, .stats, .steps { grid-template-columns:repeat(2,1fr); }
  .g3 { grid-template-columns:repeat(2,1fr); }
  .split { grid-template-columns:1fr; gap:34px; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width: 720px) {
  body { font-size:15.5px; }
  .wrap { padding:0 20px; }
  section { padding:60px 0; }
  .page-head { padding:116px 0 44px; }
  .g2, .g3, .g4, .stats, .steps { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(7,11,20,.97); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line); padding:10px 0;
  }
  .nav-links.open a { padding:14px 28px; width:100%; }
  .nav-cta { display:none; }
  .burger { display:flex; }
  .cta-band { padding:36px 24px; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-bot { flex-direction:column; gap:8px; }
  .card { padding:22px 20px; }
}
@media (max-width: 420px) {
  h1 { font-size:27px; }
  .btn { padding:12px 22px; font-size:14.5px; }
}

/* ---------- 22. 双取悦模型：双闸门 ---------- */
.gates { display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; align-items:stretch; gap:0; }
.gate {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 20px; text-align:center; display:flex; flex-direction:column; justify-content:center;
}
.gate.g1 { border-color:rgba(240,179,84,.4); background:linear-gradient(160deg, rgba(240,179,84,.09), transparent 70%); }
.gate.g2 { border-color:rgba(34,211,184,.4); background:linear-gradient(160deg, rgba(34,211,184,.09), transparent 70%); }
.gate.g3 { border-color:rgba(77,141,255,.42); background:linear-gradient(160deg, rgba(77,141,255,.12), transparent 70%); }
.gate .gi { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:10px; }
.gate h4 { font-size:16px; margin-bottom:8px; }
.gate p { font-size:13.5px; color:var(--ink-2); line-height:1.68; }
.gate-arrow { display:flex; align-items:center; justify-content:center; }
.gate-arrow::before { content:''; flex:1; height:1px; background:var(--line-2); }
.gate-arrow::after {
  content:''; width:0; height:0; flex:none;
  border-left:7px solid var(--line-2);
  border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;
}

/* ---------- 23. 四象限矩阵 ---------- */
.matrix { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.mx { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px; }
.mx .tag { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); margin-bottom:9px; }
.mx h4 { font-size:16px; margin-bottom:7px; }
.mx p { font-size:14px; color:var(--ink-2); line-height:1.7; }
.mx-good { border-color:rgba(34,211,184,.45); background:linear-gradient(150deg, rgba(34,211,184,.10), transparent 72%); }
.mx-warn { border-color:rgba(240,179,84,.42); background:linear-gradient(150deg, rgba(240,179,84,.09), transparent 72%); }
.mx-tech { border-color:rgba(77,141,255,.40); background:linear-gradient(150deg, rgba(77,141,255,.10), transparent 72%); }
.mx-drop { border-color:rgba(255,92,92,.26); background:linear-gradient(150deg, rgba(255,92,92,.06), transparent 72%); }

/* ---------- 24. 图库 ---------- */
.gal { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gal figure { border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; background:var(--card); }
.gal img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.gal figcaption { font-size:12.5px; color:var(--ink-3); padding:10px 13px; font-family:var(--mono); letter-spacing:.03em; }

/* ---------- 25. 术语表 ---------- */
.dl { max-width:880px; }
.dl .row { border-bottom:1px solid var(--line); padding:20px 0; }
.dl .row:first-child { border-top:1px solid var(--line); }
.dl dt { font-weight:700; color:var(--ink); font-size:16px; margin-bottom:6px; }
.dl dt .en { font-family:var(--mono); font-size:12px; color:var(--ink-3); font-weight:400; margin-left:8px; letter-spacing:.03em; }
.dl dd { color:var(--ink-2); font-size:15px; line-height:1.75; }

/* ---------- 26. 提示块 ---------- */
.todo {
  border:1px dashed rgba(240,179,84,.5); background:rgba(240,179,84,.06);
  border-radius:var(--r-s); padding:14px 18px; font-size:13.5px; color:#e0bd83; line-height:1.7;
}
.chip {
  display:inline-block; font-size:11.5px; font-family:var(--mono); letter-spacing:.04em;
  padding:3px 9px; border-radius:5px; border:1px solid var(--line-2); color:var(--ink-2);
  background:rgba(255,255,255,.03); margin:0 6px 6px 0;
}
.chip-ok { border-color:rgba(34,211,184,.45); color:#6fe3d0; background:rgba(34,211,184,.08); }
.chip-warn { border-color:rgba(240,179,84,.45); color:#f0c176; background:rgba(240,179,84,.08); }

/* ---------- 27. 表单 ---------- */
.form { display:grid; gap:18px; max-width:660px; }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:8px; }
.field label { font-size:12.5px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.06em; }
.field input, .field select, .field textarea {
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r-s);
  padding:12px 14px; color:var(--ink); font-family:inherit; font-size:15px; width:100%;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:rgba(77,141,255,.62); }
.field textarea { min-height:130px; resize:vertical; line-height:1.7; }
.field .hint { font-size:12.5px; color:var(--ink-3); }

/* ---------- 28. 联系信息块 ---------- */
.cbox { display:grid; gap:16px; }
.cbox .it { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); padding:16px 18px; }
.cbox .it .k { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.1em; min-width:64px; padding-top:3px; }
.cbox .it .v { font-size:15px; color:var(--ink); word-break:break-all; }
.cbox .it .v small { display:block; color:var(--ink-3); font-size:12.5px; margin-top:3px; }

/* ---------- 29. 响应式补充 ---------- */
@media (max-width: 980px) {
  .gal { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
  .gates { grid-template-columns:1fr; gap:0; }
  .gate-arrow { height:34px; }
  .gate-arrow::before { width:1px; height:100%; }
  .gate-arrow::after {
    margin-left:0; margin-top:auto; transform:rotate(90deg); transform-origin:center;
    border-left:6px solid var(--line-2);
  }
  .matrix { grid-template-columns:1fr; }
  .f2 { grid-template-columns:1fr; }
  .gal { grid-template-columns:1fr; }
}

/* ---------- 30. 打印 ---------- */
@media print {
  body::before, .nav { display:none; }
  body { background:#fff; color:#111; }
  .card, .stat, .step, .gate, .mx, .cbox .it, .gal figure { border:1px solid #ddd; background:#fff; color:#111; }
  .card p, .step p, .tbl td, .gate p, .mx p { color:#333; }
}