/* =========================================
           3. Hero Banner
           ========================================= */
.hero { padding: 80px 0; background: linear-gradient(180deg, #FFFFFF 0%, #F5F9F7 100%); }
.hero-layout { display: flex; align-items: center; justify-content: space-between; }
.hero-left { width: 480px; }
.hero-title { font-size: 48px; line-height: 1.2; margin-bottom: 24px; color: #1a1a1a; }
.hero-title em { font-style: normal; color: var(--primary); }
.hero-desc { font-size: 16px; color: var(--text-sub); margin-bottom: 40px; line-height: 1.8; }

.role-entry { display: flex; gap: 20px; }
.role-card { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 24px; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }
.role-card:hover { border-color: var(--primary); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(74, 124, 89, 0.15); }
.role-card h3 { margin: 0 0 8px 0; font-size: 18px; }
.role-card p { margin: 0 0 16px 0; font-size: 13px; color: var(--text-sub); }
.role-card .arrow { font-weight: bold; color: var(--primary); font-size: 14px; }

.hero-right { width: 650px; height: 400px; position: relative; }
.mock-phone { width: 200px; height: 400px; background: #333; border-radius: 24px; position: absolute; right: 80px; top: 0; box-shadow: 20px 20px 50px rgba(0,0,0,0.2); z-index: 2; border: 8px solid #333; overflow: hidden; }
.mock-phone-screen { width: 100%; height: 100%; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.mock-square { width: 320px; height: 320px; background-size: cover; position: absolute; left: 0; bottom: 40px; border-radius: 4px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); z-index: 3; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; font-weight: bold; }
.mock-poster { width: 180px; height: 270px; background: #fff; position: absolute; right: -35px; top: 40px; z-index: 1; transform: rotate(5deg); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid #eee; }

/* =========================================
   4. 服务介绍
   ========================================= */
.section { padding: 80px 0; background: #fff; }
.section-gray { background: #F5F9F7; }
.section-head { text-align: center; margin-bottom: 50px; }
.section-head h2 { font-size: 32px; margin-bottom: 10px; }
.section-head p { color: var(--text-sub); font-size: 16px; }

.service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.service-item { background: var(--bg-body); border: 1px solid transparent; padding: 40px 30px; border-radius: 12px; text-align: center; transition: 0.3s; }
.service-item:hover { background: #fff; border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-5px); }
.s-icon { width: 60px; height: 60px; color: var(--primary); font-size: 24px; font-weight: bold; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.service-item h3 { font-size: 20px; margin-bottom: 10px; }
.service-item p { font-size: 14px; color: var(--text-sub); line-height: 1.6; }

/* =========================================
   5. 作品广场 (核心交互区)
   ========================================= */
.gallery-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; }
.tab-btn { padding: 10px 30px; background: #fff; border: 1px solid var(--border); border-radius: 30px; font-size: 15px; color: var(--text-sub); transition: 0.3s; }
.tab-btn:hover { border-color: var(--primary); color: var(--primary); }
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Grid 容器 */
.grid-container { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.grid-container.mode-vertical { grid-template-columns: repeat(5, 1fr); }

.work-card { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #eee; transition: 0.3s; position: relative; cursor: pointer; }
.work-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-color: transparent; }

.cover-box { position: relative; background: #f0f0f0; overflow: hidden; }
.hover-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 62, 48, 0.85); opacity: 0; transition: opacity 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; }
.work-card:hover .hover-mask { opacity: 1; }
.mask-btn { margin-top: 15px; padding: 6px 16px; border: 1px solid #fff; border-radius: 20px; font-size: 12px; color: #fff; background: transparent; }
.mask-btn:hover { background: #fff; color: var(--text-main); }

.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-9-16 { aspect-ratio: 9 / 16; }
.ratio-poster { aspect-ratio: 2 / 3; }

.mock-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: "Songti SC", serif; font-size: 18px; color: #fff; background-size: cover;}

.card-meta { padding: 12px 15px; }
.meta-title { font-size: 15px; font-weight: bold; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-sub { font-size: 12px; color: var(--text-sub); display: flex; justify-content: space-between; }
.price-tag { color: #d32f2f; font-weight: bold; }

/* =========================================
   6. 流程对比
   ========================================= */
.process-box { display: flex; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.process-side { flex: 1; padding: 50px; }
.side-client { background: #fff; }
.side-designer { background: #FAFCFB; border-left: 1px solid #eee; }
.side-head { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.role-badge { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.badge-green { background: var(--primary-light); color: var(--primary); }
.badge-gray { background: #eee; color: #555; }

.step-list li { display: flex; gap: 15px; margin-bottom: 25px; }
.step-num { width: 28px; height: 28px; background: var(--primary); color: #fff; border-radius: 50%; text-align: center; line-height: 28px; font-size: 14px; flex-shrink: 0; }
.step-content h4 { margin: 0 0 5px 0; font-size: 16px; }
.step-content p { margin: 0; font-size: 13px; color: var(--text-sub); }