/* 营销转化型：面向服务型、代运营、B2B 获客类客户。
   特征来自站拓宝——
   深色头图、斜切标签、服务组合并排、数据条、明确的转化路径。
   克制的部分：不用渐变夜景图当背景（客户给不出素材就废），改用色块和几何形状。 */

.opc-style-marketing {
	--opc-ink: #17212e;
	--opc-muted: #66748a;
	--opc-paper: #fff;
	--opc-card: #fff;
	--opc-brand: #0d3563;
	--opc-dark: #08213f;
	--opc-accent: #f26a2e;
	--opc-line: #e3e9f1;
	--opc-gutter: max(20px, calc((100% - 1180px) / 2));
	line-height: 1.75;
}
.opc-style-marketing .opc-wrap { width: min(1180px, calc(100% - 40px)); }
.opc-style-marketing .opc-header { border-bottom: 0; }
.opc-style-marketing .opc-header__inner { padding: 18px 0; }
.opc-style-marketing .opc-brand__name { color: var(--opc-brand); font-size: 1.4rem; }
.opc-style-marketing .opc-navrow { background: var(--opc-brand); border-top: 0; }
.opc-style-marketing .opc-menu a { color: rgba(255,255,255,.9); font-size: 15px; }
.opc-style-marketing .opc-menu__en { display: none; }
.opc-style-marketing .opc-menu > li + li { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
.opc-style-marketing .opc-menu > li:hover { background: rgba(255,255,255,.1); }
.opc-style-marketing .opc-header__cta { border-radius: 4px; background: var(--opc-accent); }

/* hero：深色底 + 左侧文案 + 右侧斜切数据块 */
.opc-style-marketing .opc-hero {
	position: relative;
	padding: 92px var(--opc-gutter) 84px;
	color: #fff;
	background: linear-gradient(135deg, #08213f 0%, #0d3563 55%, #12457e 100%);
	overflow: hidden;
}
.opc-style-marketing .opc-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: -8%;
	width: 52%;
	height: 100%;
	background: linear-gradient(160deg, rgba(242,106,46,.24), rgba(242,106,46,0) 62%);
	clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
.opc-style-marketing .opc-hero > * { position: relative; z-index: 1; }
.opc-style-marketing .opc-hero__text { max-width: 780px; }
.opc-style-marketing .opc-kicker {
	display: inline-block;
	padding: 5px 12px;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 2px;
	color: #ffd8c4;
	font-size: 12.5px;
	letter-spacing: .1em;
}
.opc-style-marketing .opc-hero h1 { margin: 20px 0 18px; color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.25; }
.opc-style-marketing .opc-lead { max-width: 40em; color: rgba(255,255,255,.82); font-size: 1.05rem; }
.opc-style-marketing .opc-note { color: rgba(255,255,255,.5); }
.opc-style-marketing .opc-hero__media { display: none; }
.opc-style-marketing .opc-hero .wp-block-buttons { margin-top: 30px; }
.opc-style-marketing .opc-hero .wp-block-button__link { border-radius: 3px; background: var(--opc-accent); border-color: var(--opc-accent); padding: 14px 28px; }
.opc-style-marketing .opc-hero .wp-block-button:not(:first-child) .wp-block-button__link { background: transparent; border-color: rgba(255,255,255,.5); }

/* 数据条：四个数字，用来承接"多久见效 / 做了多少站"这类要问清楚的问题 */
.opc-style-marketing .opc-figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 36px;
}
.opc-style-marketing .opc-figures > div {
	padding: 18px 16px;
	background: rgba(255,255,255,.08);
	border-left: 3px solid var(--opc-accent);
}
.opc-style-marketing .opc-figures strong { display: block; font-size: 1.55rem; font-weight: 800; color: #fff; line-height: 1.2; }
.opc-style-marketing .opc-figures span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.68); }

/* 斜切标签条：把服务组合压成一条，比四个小方块醒目 */
.opc-style-marketing .opc-tags-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--opc-dark);
}
.opc-style-marketing .opc-tags-strip li {
	flex: 1 1 0;
	min-width: 200px;
	padding: 20px 24px;
	color: #fff;
	font-weight: 700;
	text-align: center;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
	background: var(--opc-brand);
}
.opc-style-marketing .opc-tags-strip li:nth-child(even) { background: #164b86; }
.opc-style-marketing .opc-tags-strip li:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.opc-style-marketing .opc-tags-strip li:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%); }

.opc-style-marketing .opc-section { padding: 76px var(--opc-gutter); }
.opc-style-marketing .opc-section.alt { background: #f4f7fb; }
.opc-style-marketing .opc-section h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.opc-style-marketing .opc-section h2 + p { max-width: 42em; color: var(--opc-muted); }
.opc-style-marketing .opc-card {
	padding: 28px 24px;
	border: 1px solid var(--opc-line);
	border-top: 3px solid var(--opc-brand);
	border-radius: 2px;
	box-shadow: 0 10px 26px rgba(13,53,99,.06);
}
.opc-style-marketing .opc-card h3 { color: var(--opc-brand); font-size: 1.08rem; }
.opc-style-marketing .wp-block-columns { gap: 20px; margin-bottom: 20px; }
.opc-style-marketing .wp-block-button__link { border-radius: 3px; }
.opc-style-marketing .wp-block-image img { border-radius: 2px; }

/* 结尾转化区：橙色底，逼一个动作 */
.opc-style-marketing .opc-cta-band {
	padding: 56px var(--opc-gutter);
	background: var(--opc-accent);
	color: #fff;
	text-align: center;
}
.opc-style-marketing .opc-cta-band h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.opc-style-marketing .opc-cta-band p { margin: 0 auto 24px; max-width: 40em; color: rgba(255,255,255,.92); }
.opc-style-marketing .opc-cta-band .wp-block-button__link { background: #fff; border-color: #fff; color: var(--opc-accent); }
.opc-style-marketing .opc-cta-band .wp-block-buttons { justify-content: center; }
/* 流程四步：一行四张，卡片压窄，字号和留白同步收一点 */
.opc-style-marketing .opc-section .wp-block-columns .opc-card { padding: 22px 18px; }
.opc-style-marketing .opc-section .wp-block-columns .opc-card h3 { font-size: 1rem; }

.opc-style-marketing .opc-footer { background: var(--opc-dark); color: rgba(255,255,255,.62); border-top: 0; }
.opc-style-marketing .opc-footer__brand { color: #fff; }
.opc-style-marketing .opc-footer__list a { color: rgba(255,255,255,.8); }
.opc-style-marketing .opc-beian a { color: rgba(255,255,255,.45); }

@media (max-width: 900px) {
	.opc-style-marketing .opc-hero { padding: 56px var(--opc-gutter) 48px; }
	.opc-style-marketing .opc-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.opc-style-marketing .opc-tags-strip li { min-width: 0; flex: 1 1 50%; clip-path: none; padding: 14px 12px; font-size: 14px; }
	.opc-style-marketing .opc-section { padding: 52px var(--opc-gutter); }
}