/* Soul Studio hub / 灵魂工作室大页面 (细节问题.docx 五.2). */
.ei-hub {
	--hub-gold: #d8a743;
	--hub-purple: #8b5cf6;
	color: var(--ei-text, #f7ecd5);
	background: linear-gradient(180deg, #0b0817, #0a0714);
}
.ei-hub-container { width: min(100% - clamp(28px, 4vw, 64px), 1180px); margin-inline: auto; }
.ei-hub .ei-kicker { color: var(--hub-gold); }

.ei-hub-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	font-family: var(--ei-ui-font, sans-serif);
	font-weight: 700;
	border-radius: 999px;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.ei-hub-btn--primary { color: #1a1206; background: linear-gradient(135deg, #f2cf72, #d8a743); box-shadow: 0 14px 34px rgba(216, 167, 67, 0.3); }
.ei-hub-btn--primary:hover { transform: translateY(-2px); }
.ei-hub-btn--ghost { color: #fff2cf; border: 1px solid rgba(216, 167, 67, 0.4); }

/* Hero */
.ei-hub-hero {
	position: relative;
	padding-block: clamp(80px, 12vw, 180px);
	text-align: center;
	background: var(--ei-hub-hero) center/cover no-repeat;
	border-bottom: 1px solid rgba(216, 167, 67, 0.2);
}
.ei-hub-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 18, 0.62), rgba(8, 6, 18, 0.82)); }
.ei-hub-hero__inner { position: relative; }
.ei-hub-hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); color: #fff2cf; margin: 8px auto 16px; max-width: 16ch; line-height: 1.08; }
.ei-hub-hero__lead { max-width: 58ch; margin: 0 auto 26px; color: #e7d6b4; font-size: 1.08rem; }
.ei-hub-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Value band */
.ei-hub-values { padding-block: clamp(40px, 5vw, 72px); }
.ei-hub-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ei-hub-value {
	text-align: center;
	padding: 28px 22px;
	background: rgba(20, 16, 34, 0.6);
	border: 1px solid rgba(216, 167, 67, 0.18);
	border-radius: 18px;
}
.ei-hub-value__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; color: var(--hub-gold); border: 1px solid rgba(216, 167, 67, 0.4); border-radius: 50%; }
.ei-hub-value__icon svg { width: 26px; height: 26px; }
.ei-hub-value strong { display: block; color: #fff2cf; font-size: 1.14rem; margin-bottom: 6px; }
.ei-hub-value p { color: var(--ei-muted, #c7ac7a); font-size: 0.96rem; margin: 0; }

.ei-hub-heading { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }
.ei-hub-heading h2 { color: #fff2cf; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 6px 0 0; }

/* Two paths */
.ei-hub-paths { padding-block: clamp(40px, 5vw, 72px); }
.ei-hub-paths__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.ei-hub-path {
	display: flex;
	flex-direction: column;
	background: rgba(20, 16, 34, 0.62);
	border: 1px solid rgba(216, 167, 67, 0.22);
	border-radius: 22px;
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.ei-hub-path:hover { transform: translateY(-5px); border-color: var(--hub-gold); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5); }
.ei-hub-path__media { aspect-ratio: 16 / 10; overflow: hidden; }
.ei-hub-path__media img { width: 100%; height: 100%; object-fit: cover; }
.ei-hub-path__body { padding: 26px 26px 30px; }
.ei-hub-path__body h3 { color: #fff2cf; font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 4px 0 10px; }
.ei-hub-path__body p { color: var(--ei-muted, #c7ac7a); margin: 0 0 14px; }
.ei-hub-path__link { color: var(--hub-gold); font-weight: 700; font-family: var(--ei-ui-font, sans-serif); }

/* Process */
.ei-hub-process {
	position: relative;
	padding-block: clamp(50px, 6vw, 92px);
	background: var(--ei-hub-process) center/cover no-repeat;
}
.ei-hub-process::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 18, 0.8), rgba(8, 6, 18, 0.9)); }
.ei-hub-process > .ei-hub-container { position: relative; }
.ei-hub-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ei-hub-steps li { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: rgba(14, 11, 24, 0.72); border: 1px solid rgba(216, 167, 67, 0.2); border-radius: 16px; }
.ei-hub-steps__n { color: var(--hub-gold); font-family: var(--ei-ui-font, sans-serif); font-weight: 700; font-size: 1.2rem; }
.ei-hub-steps h3 { color: #fff2cf; font-size: 1.06rem; margin: 0 0 4px; }
.ei-hub-steps p { color: var(--ei-muted, #c7ac7a); font-size: 0.92rem; margin: 0; }

/* Final CTA */
.ei-hub-final {
	position: relative;
	padding-block: clamp(50px, 7vw, 100px);
	text-align: center;
	background: var(--ei-hub-final) center/cover no-repeat;
}
.ei-hub-final::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 18, 0.78), rgba(8, 6, 18, 0.9)); }
.ei-hub-final__inner { position: relative; }
.ei-hub-final h2 { color: #fff2cf; font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0 0 22px; }

@media (max-width: 860px) {
	.ei-hub-values__grid { grid-template-columns: 1fr; }
	.ei-hub-paths__grid { grid-template-columns: 1fr; }
	.ei-hub-steps { grid-template-columns: 1fr 1fr; }
}

/* "What is Soul Studio?" intro copy above the value trio (client mockup). */
.ei-hub-values .ei-hub-heading p {
	max-width: 640px;
	margin: 12px auto 0;
	color: rgba(240, 228, 210, 0.78);
	line-height: 1.7;
}