/* SEO landing pages and article enhancements */
.seo-page { padding-top: 120px; }
.seo-hero { padding: clamp(4rem, 8vw, 7rem) 0 var(--space-16); }
.seo-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.seo-hero h1 { color: var(--color-white); font-size: clamp(2.35rem, 5vw, 4.5rem); line-height: 1.04; max-width: 760px; margin-bottom: var(--space-5); }
.seo-hero p { color: var(--color-white-60); font-size: var(--text-lg); line-height: 1.75; max-width: 700px; }
.seo-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.seo-hero__context { margin-top: var(--space-5); color: var(--color-white-40); font-size: var(--text-sm); line-height: 1.7; max-width: 620px; }
.seo-proof { padding: var(--space-8); }
.seo-proof h2 { font-family: var(--font-body); font-size: var(--text-2xl); margin-bottom: var(--space-5); }
.seo-proof ul { display: grid; gap: var(--space-4); }
.seo-proof li { color: var(--color-white-80); padding-left: 1.5rem; position: relative; line-height: 1.65; }
.seo-proof li::before { content: ''; position: absolute; left: 0; top: 0.68rem; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-light); box-shadow: 0 0 16px rgba(82, 170, 183, 0.45); }
.seo-section { padding: var(--space-16) 0; background: rgba(3, 18, 43, 0.55); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); }
.seo-content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.seo-panel { padding: var(--space-6); }
.seo-panel h2 { font-family: var(--font-body); color: var(--color-white); font-size: var(--text-xl); margin-bottom: var(--space-3); }
.seo-panel p { color: var(--color-white-60); line-height: 1.75; font-size: var(--text-sm); }
.operator-needs { padding: var(--space-16) 0; }
.operator-needs__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.operator-needs h2 { color: var(--color-white); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-4); }
.operator-needs__intro { color: var(--color-white-60); line-height: 1.75; }
.operator-needs__list { display: grid; gap: var(--space-4); }
.operator-need { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: rgba(255,255,255,0.035); border: 1px solid var(--glass-border); }
.operator-need__num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(82, 170, 183, 0.14); border: 1px solid rgba(82, 170, 183, 0.26); color: var(--color-primary-light); font-weight: 800; font-size: var(--text-xs); }
.operator-need h3 { font-family: var(--font-body); color: var(--color-white); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.operator-need p { color: var(--color-white-60); font-size: var(--text-sm); line-height: 1.7; }
.proof-strip { padding: var(--space-12) 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); background: rgba(3, 18, 43, 0.52); }
.proof-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.proof-tile { padding: var(--space-5); border-radius: var(--radius-lg); background: rgba(255,255,255,0.035); border: 1px solid var(--glass-border); }
.proof-tile strong { display: block; color: var(--color-white); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.proof-tile span { color: var(--color-white-60); font-size: var(--text-sm); line-height: 1.6; }
.placeholder-proof { padding: var(--space-5); border-style: dashed; }
.placeholder-proof span { display: block; color: var(--color-primary-light); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); }
.seo-cta { padding: var(--space-16) 0 var(--space-24); }
.seo-cta__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.seo-cta h2 { color: var(--color-white); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-4); }
.seo-cta p { color: var(--color-white-60); line-height: 1.75; margin-bottom: var(--space-6); }
.post-page { padding-top: 132px; padding-bottom: var(--space-24); }
.post-shell { max-width: 900px; margin: 0 auto; }
.post-back { color: var(--color-primary-light); font-size: var(--text-sm); font-weight: 600; text-decoration: none; display: inline-flex; margin-bottom: var(--space-8); }
.post-hero { margin-bottom: var(--space-10); }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; color: var(--color-white-40); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.post-title { color: var(--color-white); font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.05; margin-bottom: var(--space-5); }
.post-excerpt { color: var(--color-white-60); font-size: var(--text-lg); line-height: 1.75; max-width: 760px; }
.post-cover { width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); margin: var(--space-10) 0; display: block; }
.post-content { color: var(--color-white-80); font-size: var(--text-base); line-height: 1.85; padding: clamp(1.5rem, 4vw, 3rem); }
.post-content h2, .post-content h3 { color: var(--color-white); font-family: var(--font-body); line-height: 1.25; margin: var(--space-10) 0 var(--space-4); }
.post-content h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.post-content h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.post-content p, .post-content ul, .post-content ol { margin-bottom: var(--space-5); }
.post-content ul, .post-content ol { padding-left: 1.4rem; }
.post-content li { margin-bottom: var(--space-2); }
.post-content a { color: var(--color-primary-light); font-weight: 700; }
.operator-takeaway { padding: var(--space-5); margin-bottom: var(--space-8); border-radius: var(--radius-md); background: rgba(62, 131, 141, 0.12); border: 1px solid rgba(82, 170, 183, 0.22); color: var(--color-white-80); }
.operator-takeaway strong { color: var(--color-white); }
.article-cta { padding: var(--space-6); margin: var(--space-10) 0; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(62, 131, 141, 0.18), rgba(7, 26, 58, 0.88)); border: 1px solid rgba(82, 170, 183, 0.24); }
.article-cta h2 { margin-top: 0; }
.article-cta .btn, .seo-cta .btn { margin-top: var(--space-2); }
.related-posts { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--glass-border); }
.related-posts h2 { margin-top: 0; }
.related-posts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.related-posts__grid a { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); }
.related-posts__grid span { color: var(--color-white-60); font-size: var(--text-xs); line-height: 1.55; font-weight: 400; }
.seo-visual { padding: var(--space-10) 0 var(--space-20); position: relative; overflow: hidden; }
.seo-visual::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 100%; background: radial-gradient(ellipse at center, rgba(62, 131, 141, 0.14), transparent 65%); pointer-events: none; filter: blur(48px); }
.seo-visual__frame { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; text-align: center; }
.seo-visual__frame--wide { max-width: 820px; }
.seo-visual__frame img { max-width: 100%; height: auto; display: inline-block; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.45)); }
@media (max-width: 900px) {
  .seo-hero__grid, .seo-content-grid, .related-posts__grid, .operator-needs__grid, .proof-strip__grid { grid-template-columns: 1fr; }
  .seo-proof { padding: var(--space-6); }
}
@media (max-width: 560px) {
  .seo-page, .post-page { padding-top: 104px; }
  .seo-hero__actions { flex-direction: column; }
  .seo-hero__actions .btn { width: 100%; }
}