/* =========================================================
   恩遇文化 · 品牌与电商案例样式
   ========================================================= */
:root {
  --accent: #d84b32;
  --accent-2: #e9a15c;
  --ink: #171714;
  --ink-soft: #3e3b35;
  --muted: #7a7469;
  --paper: #f5f1e8;
  --paper-2: #ece6da;
  --white: #fffdf8;
  --line: rgba(23, 23, 20, .14);
  --line-strong: rgba(23, 23, 20, .28);
  --serif: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
::selection { background: var(--accent); color: #fff; }
.brand-mark { font-size: 12px; letter-spacing: -.03em; width: 38px; height: 38px; }
.brand-mark.small { width: 28px; height: 28px; font-size: 10.5px; }
.brand-text { font-size: 16px; }
.brand-text span { font-weight: 500; }

/* 首页 hero */
.hero-brand { padding-top: 80px; }
.hero-brand .hero-grid { gap: 34px; padding-bottom: 42px; }
.hero-brand h1 { font-size: clamp(48px, 6vw, 84px); }
.hero-brand .hero-lead { font-size: 17px; }
.hero-brand .hero-stats { max-width: 560px; }
.hero-brand .hero-stats dt { font-size: 23px; }
.hero-brand .hero-stats dd { max-width: 120px; }
.hero-stage {
  position: relative; min-height: 500px; display: block;
  perspective: 1200px;
}
.stage-phone {
  position: absolute; width: 194px; height: 394px; padding: 8px 7px;
  border-radius: 34px; background: #171714; border: 1px solid #32302a;
  box-shadow: 0 28px 60px rgba(23,23,20,.22); overflow: hidden;
  font-family: var(--sans); color: #171714;
}
.stage-a { left: 0; top: 38px; transform: rotate(-5deg); z-index: 3; }
.stage-b { right: 6px; top: 0; transform: rotate(4deg); z-index: 2; }
.stage-status { display: flex; justify-content: space-between; padding: 1px 8px 6px; color: #f7f1e6; font-size: 8px; letter-spacing: .04em; }
.stage-tabs { display: flex; gap: 14px; align-items: baseline; padding: 4px 8px 10px; font-size: 10px; color: rgba(255,255,255,.58); }
.stage-tabs b { font-weight: 500; }
.stage-tabs .on { color: #fff; font-size: 13px; font-weight: 700; position: relative; }
.stage-tabs .on::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 14px; height: 2px; background: var(--accent); transform: translateX(-50%); border-radius: 2px; }
.stage-waterfall { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 7px; }
.stage-tile { position: relative; border-radius: 9px; min-height: 86px; padding: 7px; overflow: hidden; }
.stage-tile.tall { min-height: 110px; }
.stage-tile span { position: absolute; left: 7px; top: 7px; color: #fff; font-size: 8px; text-shadow: 0 1px 4px rgba(0,0,0,.28); }
.stage-tile em { position: absolute; left: 7px; bottom: 6px; color: rgba(255,255,255,.88); font-style: normal; font-size: 7px; }
.stage-tile.coral { background: linear-gradient(145deg, #d7775e, #7d4037); }
.stage-tile.sage { background: linear-gradient(145deg, #9aab93, #4e5c4c); }
.stage-tile.cream { background: linear-gradient(145deg, #d8c29e, #8b6f50); }
.stage-tile.dark { background: linear-gradient(145deg, #4d4a41, #1f1d1a); }
.stage-nav { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: space-around; padding: 0 17px; }
.stage-nav i { width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 4px; opacity: .8; }
.stage-nav i:first-child { background: #fff; border-color: #fff; }
.stage-search { margin: 2px 8px 8px; padding: 7px 10px; border-radius: 999px; background: #f0ece3; color: #938c80; font-size: 8px; }
.stage-banner { margin: 0 8px 8px; padding: 13px 12px; border-radius: 10px; color: #fff; font-family: var(--serif); font-size: 15px; line-height: 1.2; background: linear-gradient(135deg, #b94a34, #e08a56); }
.stage-banner b { display: block; margin-top: 7px; font-family: var(--sans); font-size: 7px; font-weight: 400; letter-spacing: .02em; opacity: .85; }
.stage-products { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 8px; }
.stage-products div { display: flex; flex-direction: column; gap: 3px; }
.stage-products i { display: block; height: 64px; border-radius: 7px; }
.stage-products b { font-size: 7px; font-weight: 600; }
.stage-products em { font-style: normal; color: var(--accent); font-size: 8px; font-weight: 700; }
.stage-products .p1 { background: linear-gradient(145deg, #d1b19a, #87624d); }
.stage-products .p2 { background: linear-gradient(145deg, #a7a395, #565449); }
.stage-products .p3 { background: linear-gradient(145deg, #c5b9ab, #6d6257); }
.stage-products .p4 { background: linear-gradient(145deg, #b8a78c, #6f5c49); }
.stage-dashboard {
  position: absolute; right: 0; bottom: 0; width: 280px; padding: 14px;
  border-radius: 14px; background: #24231f; color: #f7f1e6;
  box-shadow: 0 22px 50px rgba(23,23,20,.3); z-index: 4;
}
.stage-dash-head { display: flex; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,.65); }
.stage-dash-head em { font-style: normal; color: #87d6a2; font-size: 7px; }
.stage-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 10px 0; }
.stage-kpis div { display: flex; flex-direction: column; gap: 1px; }
.stage-kpis b { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.stage-kpis span { color: rgba(255,255,255,.42); font-size: 7px; }
.stage-chart { height: 54px; display: flex; align-items: end; gap: 5px; padding: 7px; background: rgba(255,255,255,.05); border-radius: 7px; }
.stage-chart i { flex: 1; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .8; }
.stage-chart i:nth-child(1) { height: 32%; } .stage-chart i:nth-child(2) { height: 56%; } .stage-chart i:nth-child(3) { height: 43%; } .stage-chart i:nth-child(4) { height: 78%; background: #e6b276; } .stage-chart i:nth-child(5) { height: 63%; } .stage-chart i:nth-child(6) { height: 88%; } .stage-chart i:nth-child(7) { height: 71%; }
.stage-dash-row { display: flex; justify-content: space-between; margin-top: 9px; color: rgba(255,255,255,.5); font-size: 7px; }
.stage-dash-row b { color: #fff; font-size: 9px; }
.hero-stage .chip-a { top: 2px; left: 38%; right: auto; }
.hero-stage .chip-b { bottom: 8px; left: 4%; }
.hero-stage .chip-c { right: 24%; bottom: 6px; }
.hero-brand .tech-strip { padding-top: 12px; }

/* 案例卡片里的手机/商城/后台 */
.phone-stack { position: relative; min-height: 430px; display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 28px 16px 26px; background: #e7dfd2; overflow: hidden; }
.case-featured .phone-stack { min-height: 430px; }
.phone-stack::before { content: ""; position: absolute; inset: 0; background: radial-gradient(480px 280px at 50% 10%, rgba(255,255,255,.6), transparent 70%); }
.app-mini {
  position: relative; z-index: 1; width: 30%; max-width: 155px; height: 320px; flex: 0 0 auto;
  border: 5px solid #1c1b18; border-radius: 24px; background: #fffaf2;
  box-shadow: 0 16px 32px rgba(23,23,20,.18); overflow: hidden;
  transform: translateY(10px) rotate(-2deg); font-family: var(--sans);
}
.app-mini:nth-child(2) { transform: translateY(-8px); z-index: 2; }
.app-mini:nth-child(3) { transform: translateY(12px) rotate(2deg); }
.mini-status { display: flex; justify-content: space-between; padding: 6px 9px 4px; font-size: 6px; color: #4c483f; }
.mini-tabs { display: flex; gap: 10px; align-items: baseline; padding: 2px 9px 8px; color: #9a9184; font-size: 7px; }
.mini-tabs .on { color: #171714; font-size: 9px; font-weight: 700; }
.mini-waterfall { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 6px; }
.mini-post { position: relative; min-height: 64px; border-radius: 7px; overflow: hidden; }
.mini-post.tall { min-height: 86px; }
.mini-post span { position: absolute; left: 5px; top: 5px; color: #fff; font-size: 6px; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mini-post em { position: absolute; left: 5px; bottom: 4px; color: rgba(255,255,255,.9); font-style: normal; font-size: 5px; }
.mini-post.coral { background: linear-gradient(145deg, #cf7259, #7a3c32); }
.mini-post.sage { background: linear-gradient(145deg, #98a991, #4d5b4b); }
.mini-post.cream { background: linear-gradient(145deg, #d6c09c, #876c4e); }
.mini-post.dark { background: linear-gradient(145deg, #4c4941, #1d1b18); }
.note-cover { margin: 0 7px; height: 145px; border-radius: 9px; display: flex; align-items: end; padding: 10px; color: #fff; font-family: var(--serif); font-size: 16px; line-height: 1.3; background: linear-gradient(145deg, #b7a17e, #594a38); }
.note-author { display: flex; align-items: center; gap: 6px; padding: 8px 8px 5px; }
.note-author i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg,#d9b18d,#8d5f47); }
.note-author div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.note-author b { font-size: 7px; }
.note-author span { color: #948b7e; font-size: 5px; }
.note-author em { margin-left: auto; font-style: normal; border: 1px solid #d84b32; color: #d84b32; border-radius: 99px; padding: 2px 6px; font-size: 5px; }
.note-lines { display: grid; gap: 4px; padding: 5px 9px; }
.note-lines i { height: 4px; width: 86%; border-radius: 99px; background: #e6dfd4; }
.note-lines i:nth-child(2) { width: 68%; } .note-lines i:nth-child(3) { width: 76%; }
.note-actions { display: flex; justify-content: space-between; padding: 6px 9px 0; color: #8c8375; font-size: 5px; }
.profile-head { display: flex; align-items: center; gap: 7px; padding: 9px 8px; }
.profile-head i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#d9b18d,#8d5f47); }
.profile-head div { display: flex; flex-direction: column; gap: 2px; }
.profile-head b { font-size: 8px; }
.profile-head span { color: #968c7f; font-size: 5px; }
.profile-stats { display: flex; justify-content: space-between; padding: 4px 10px 9px; color: #8b8173; font-size: 5px; }
.profile-stats b { display: block; color: #171714; font-size: 8px; }
.profile-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 0 6px; }
.profile-grid i { aspect-ratio: 1; border-radius: 4px; background: linear-gradient(145deg,#d7c3a8,#9d8163); }
.profile-grid i:nth-child(2n) { background: linear-gradient(145deg,#b6b8a6,#6d715e); }
.profile-grid i:nth-child(3n) { background: linear-gradient(145deg,#d9b7ac,#916d62); }

.mall-preview { padding: 30px 20px 0; background: #e3dccd; display: block; }
.mall-browser { position: relative; margin: 0 auto; width: 100%; max-width: 470px; background: #fff; border-radius: 12px 12px 0 0; border: 1px solid rgba(23,23,20,.12); border-bottom: 0; box-shadow: 0 16px 40px rgba(23,23,20,.12); overflow: hidden; }
.mall-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eee7da; font-size: 7px; color: #80786b; }
.mall-top span { font-weight: 700; color: var(--accent); letter-spacing: .05em; font-size: 8px; }
.mall-top div { flex: 1; border: 1px solid #e5ddcf; border-radius: 99px; padding: 4px 9px; }
.mall-top em { font-style: normal; }
.mall-banner { margin: 10px 12px; padding: 16px; border-radius: 9px; color: #fff; font-family: var(--serif); font-size: 18px; line-height: 1.2; background: linear-gradient(120deg,#bd4c34,#dd8a58); }
.mall-banner b { display: block; margin-top: 5px; font-family: var(--sans); font-size: 7px; font-weight: 400; opacity: .85; }
.mall-cats { display: flex; gap: 6px; padding: 0 12px 10px; }
.mall-cats span { font-size: 6px; border: 1px solid #e3dacb; border-radius: 99px; padding: 3px 8px; color: #695f52; }
.mall-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 12px 14px; }
.mall-products div { display: flex; flex-direction: column; gap: 3px; }
.mall-products i { height: 72px; border-radius: 7px; }
.mall-products b { font-size: 7px; font-weight: 600; }
.mall-products em { font-style: normal; color: var(--accent); font-size: 8px; font-weight: 700; }
.mall-products .p1 { background: linear-gradient(145deg,#d1b19a,#87624d); }
.mall-products .p2 { background: linear-gradient(145deg,#a7a395,#565449); }
.mall-products .p3 { background: linear-gradient(145deg,#c5b9ab,#6d6257); }
.mall-preview .mock-label { color: rgba(23,23,20,.42); z-index: 2; }

.merchant-preview { min-height: 290px; background: #e6e1d7; padding: 26px 18px; display: block; }
.merchant-top { display: flex; justify-content: space-between; color: #615a4f; font-size: 7px; margin-bottom: 9px; }
.merchant-top em { font-style: normal; color: #9a9183; }
.merchant-body { display: flex; gap: 8px; height: 208px; background: #fdfaf4; border-radius: 10px; box-shadow: 0 10px 25px rgba(23,23,20,.08); overflow: hidden; }
.merchant-body aside { width: 30px; background: #26241f; padding: 12px 8px; display: flex; flex-direction: column; gap: 9px; }
.merchant-body aside i { width: 12px; height: 12px; border-radius: 4px; background: rgba(255,255,255,.16); }
.merchant-body aside i.on { background: var(--accent); }
.merchant-main { flex: 1; padding: 9px; }
.merchant-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.merchant-kpis div { padding: 7px; border-radius: 6px; background: #f3eee5; }
.merchant-kpis b { display: block; font-family: var(--serif); font-size: 12px; color: #171714; }
.merchant-kpis span { color: #968b7d; font-size: 5px; }
.merchant-chart { display: flex; align-items: end; gap: 5px; height: 76px; margin-top: 7px; padding: 7px; border-radius: 6px; background: #f3eee5; }
.merchant-chart i { flex: 1; border-radius: 2px 2px 0 0; background: #d4b18c; }
.merchant-chart i:nth-child(1) { height: 34%; } .merchant-chart i:nth-child(2) { height: 58%; } .merchant-chart i:nth-child(3) { height: 44%; } .merchant-chart i:nth-child(4) { height: 82%; background: var(--accent); } .merchant-chart i:nth-child(5) { height: 61%; } .merchant-chart i:nth-child(6) { height: 72%; }
.merchant-rows { display: grid; gap: 4px; margin-top: 7px; }
.merchant-rows span { height: 7px; border-radius: 99px; background: #efe8dc; }
.merchant-rows span:nth-child(2) { width: 82%; } .merchant-rows span:nth-child(3) { width: 67%; }

/* 案例页通用品牌覆盖 */
.case-page .brand-mark { font-size: 12px; }
.case-page .site-footer .brand-mark { font-size: 10.5px; }
.case-page .case-hero h1 { letter-spacing: -.05em; }
.case-page .case-hero-meta span { background: rgba(255,253,248,.6); }

/* 响应式 */
@media (max-width: 980px) {
  .hero-stage { min-height: 470px; max-width: 560px; margin: 0 auto; width: 100%; }
  .stage-a { left: 2%; } .stage-b { right: 2%; }
  .stage-dashboard { right: 4%; }
  .case-featured .phone-stack { min-height: 400px; }
  .phone-stack { min-height: 390px; }
}
@media (max-width: 700px) {
  .hero-brand { padding-top: 48px; }
  .hero-brand h1 { font-size: clamp(38px, 11vw, 48px); }
  .hero-stage { min-height: 420px; transform: scale(.9); transform-origin: top center; margin-bottom: -34px; }
  .stage-phone { width: 155px; height: 318px; }
  .stage-a { left: -4px; top: 28px; } .stage-b { right: -4px; }
  .stage-dashboard { width: 230px; padding: 10px; }
  .stage-kpis b { font-size: 12px; }
  .stage-chart { height: 42px; }
  .stage-tile { min-height: 65px; } .stage-tile.tall { min-height: 86px; }
  .hero-stage .chip-a { left: 34%; font-size: 10px; }
  .hero-stage .chip-b { bottom: 0; font-size: 10px; }
  .hero-stage .chip-c { display: none; }
  .phone-stack { min-height: 300px; gap: 3px; padding: 18px 8px 20px; }
  .app-mini { width: 31%; height: 225px; border-width: 3px; border-radius: 16px; }
  .note-cover { height: 96px; font-size: 11px; padding: 7px; }
  .note-lines, .note-actions { display: none; }
  .profile-grid i { border-radius: 3px; }
  .mall-preview { padding: 20px 10px 0; }
  .merchant-preview { min-height: 240px; padding: 18px 10px; }
  .merchant-body { height: 170px; }
  .case-featured .phone-stack { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage, .app-mini, .stage-phone { transform: none !important; }
}

/* 追加修正 */
.mall-products .p4 { background: linear-gradient(145deg, #b8a78c, #6f5c49); }
.case-page .brand-mark { font-family: var(--sans); font-weight: 700; }
.case-page .site-footer .brand-mark { font-family: var(--sans); font-weight: 700; }