.page-hero { padding: calc(68px + clamp(60px,10vw,120px)) 0 clamp(60px,8vw,100px); background: var(--cream); text-align: center; }
.page-hero .label-tag { margin-bottom: 16px; }
.page-hero .headline { margin-bottom: 16px; }

.service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.service-detail-grid.reverse .service-detail-grid > *:first-child { order: 2; }

.detail-features { list-style: none; margin: 24px 0 32px; display: flex; flex-direction: column; gap: 12px; }
.detail-features li { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: var(--ink-soft); }

.seo-dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.metric-card { background: var(--white); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--bdr); }
.metric-label { font-size: .85rem; color: var(--ink-faint); }
.metric-value { font-size: 2rem; font-weight: 800; color: var(--acc); font-family: var(--serif); }

.code-preview { background: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.code-header { background: var(--navy); padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.code-header .filename { margin-left: auto; color: var(--ink-faint); font-size: .8rem; font-family: monospace; }
.code-content { padding: 24px; font-family: 'Fira Code', monospace; font-size: .85rem; line-height: 1.8; }
.code-content .tag { color: #EF4444; }
.code-content .attr { color: #F59E0B; }
.code-content .string { color: #10B981; }
.code-content .comment { color: #6B7280; }

@media (max-width: 1024px) {
    .service-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .seo-dashboard { grid-template-columns: 1fr; }
}