/* =============================================================
   ui-design.html 专属样式 —— 编辑式大标题 + 情绪板色块
   ============================================================= */

/* ---------- 首屏 ---------- */
.ui-hero{
  background:var(--paper);
  padding:calc(var(--topbar-h) + var(--header-h) + 80px) 0 100px;
  position:relative;overflow:hidden;
}
.ui-palette{
  position:absolute;right:6vw;top:calc(var(--topbar-h) + var(--header-h) + 30px);
  display:flex;gap:10px;transform:rotate(8deg);
}
.ui-palette span{width:34px;height:220px;display:block}
.ui-palette span:nth-child(1){background:var(--earth)}
.ui-palette span:nth-child(2){background:var(--brown);height:170px;margin-top:40px}
.ui-palette span:nth-child(3){background:var(--ash);height:240px}
.ui-palette span:nth-child(4){background:var(--paper-dark);height:150px;margin-top:60px}
.ui-palette span:nth-child(5){background:var(--dark);height:200px;margin-top:20px}
.ui-kicker{font-size:12.5px;letter-spacing:.45em;color:var(--earth-deep);margin-bottom:26px}
.ui-title{
  font-size:clamp(34px,5.4vw,60px);line-height:1.32;letter-spacing:.02em;margin-bottom:26px;
}
.ui-title span{
  color:var(--earth-deep);border-bottom:4px solid var(--earth);padding:0 6px;
}
.ui-sub{font-size:15.5px;line-height:2;color:var(--ink-soft);max-width:560px;margin-bottom:34px}

/* ---------- 四阶段 ---------- */
.ui-method-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--earth)}
.ui-method-item{padding:30px 24px;border-right:1px dashed var(--line)}
.ui-method-item:last-child{border-right:none}
.ui-method-no{font-size:11.5px;letter-spacing:.25em;color:var(--earth-light)}
.ui-method-item h3{font-size:19px;margin:12px 0 10px}
.ui-method-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

/* ---------- 对比（深色） ---------- */
.ui-compare{margin-top:0}
.ui-compare-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.ui-compare-wrap>img{width:100%;box-shadow:var(--shadow)}
.ui-table{width:100%;border-collapse:collapse;font-size:14px;color:#C3BBAB}
.ui-table th{
  text-align:left;color:#EFE9DC;font-family:var(--font-serif);font-size:14px;
  padding:12px 14px;border-bottom:1px solid rgba(201,193,178,.25);
}
.ui-table td{padding:12px 14px;border-bottom:1px dashed rgba(201,193,178,.15)}
.ui-table td:first-child{color:var(--earth-light)}
.ui-compare-note{margin-top:18px;font-size:14px;color:#8F8677;font-family:var(--font-serif)}

/* ---------- 设计规范 ---------- */
.ui-spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ui-spec-chip{display:block;width:100%;height:70px;margin-bottom:18px}
.ui-chip-1{background:linear-gradient(120deg,var(--earth) 60%,var(--brown))}
.ui-chip-2{background:linear-gradient(120deg,var(--paper-dark) 60%,var(--ash))}
.ui-chip-3{background:linear-gradient(120deg,var(--dark) 60%,var(--ash-dark))}
.ui-chip-4{background:linear-gradient(120deg,var(--earth-light) 50%,var(--paper))}
.ui-spec-grid h3{font-size:18px;margin-bottom:8px}
.ui-spec-grid p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

/* ---------- 方向案例 ---------- */
.ui-cases{margin-top:0}
.ui-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ui-case-grid>div{background:var(--paper);border:1px solid var(--line);overflow:hidden}
.ui-case-grid img{width:100%;height:210px;object-fit:cover}
.ui-case-grid h3{font-size:18px;margin:18px 24px 6px}
.ui-case-grid p{font-size:13.5px;color:var(--ink-soft);line-height:1.85;padding:0 24px 22px}

/* ---------- 为什么 ---------- */
.ui-why-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.ui-why-copy p{font-size:14.5px;color:var(--ink-soft);line-height:2;margin-bottom:14px}
.ui-why-copy a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}
.ui-why-photo img{width:100%;box-shadow:var(--shadow)}

/* ---------- 交付 ---------- */
.ui-deliver{margin-top:0}
.ui-deliver-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ui-deliver-grid>div{padding:26px;background:var(--paper);border:1px solid var(--line)}
.ui-deliver-grid h3{font-size:16px;color:var(--earth-deep);margin-bottom:8px}
.ui-deliver-grid p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- 设计周期 ---------- */
.ui-timeline{margin-top:0}
.ui-timeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ui-timeline-grid>div{padding:26px 24px;background:var(--paper);border:1px solid var(--line);border-bottom:3px solid var(--earth-light)}
.ui-timeline-grid span{font-family:var(--font-serif);font-size:20px;color:var(--earth-deep);display:block;margin-bottom:10px}
.ui-timeline-grid h3{font-size:16px;margin-bottom:8px}
.ui-timeline-grid p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* ---------- FAQ ---------- */
.ui-faq-wrap{max-width:860px}
.ui-faq .section-head{margin-bottom:34px}
.ui-faq .accordion-body a{color:var(--earth-deep);border-bottom:1px dashed var(--earth)}

/* ---------- CTA ---------- */
.ui-cta{background:var(--dark);color:#D8D2C6;padding:96px 0;text-align:center}
.ui-cta-inner h2{font-size:clamp(26px,3.4vw,38px);color:#EFE9DC;line-height:1.5;margin-bottom:30px}
.ui-cta-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.ui-cta-row a{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#E3DCCB}
.ui-cta-row svg{width:16px;height:16px;fill:var(--earth-light)}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .ui-palette{display:none}
  .ui-method-list{grid-template-columns:1fr 1fr}
  .ui-method-item{border-bottom:1px dashed var(--line)}
  .ui-compare-wrap,.ui-why-wrap{grid-template-columns:1fr;gap:30px}
  .ui-spec-grid,.ui-deliver-grid{grid-template-columns:1fr 1fr}
  .ui-case-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .ui-method-list,.ui-spec-grid,.ui-deliver-grid{grid-template-columns:1fr}
}