.article-hero {
  padding: 86px 0 72px;
  overflow: hidden;
  background: radial-gradient(circle at 78% 42%, rgba(217, 180, 86, .16), transparent 30%), linear-gradient(180deg, #07111f, #0b1828);
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { color: var(--gold-light); }
.article-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; }
.article-hero h1 { margin-bottom: 18px; font-size: clamp(42px, 5vw, 68px); line-height: 1.08; letter-spacing: -.05em; }
.article-hero .lead { max-width: 720px; color: #c4ccd5; font-size: 17px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 25px; color: var(--muted); font-size: 12px; }
.article-hero figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.article-hero figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-body { padding: 82px 0 110px; background: #07111f; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.article-content { max-width: 780px; }
.article-content h2 { margin: 58px 0 16px; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.25; }
.article-content h2:first-child { margin-top: 0; }
.article-content h3 { margin: 34px 0 12px; font-size: 22px; }
.article-content p, .article-content li { color: #b9c2cc; font-size: 16px; }
.article-content p { margin-bottom: 20px; }
.article-content ul, .article-content ol { padding-left: 24px; margin: 0 0 24px; }
.article-content li { margin-bottom: 10px; }
.article-content a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px; }
.article-note { margin: 30px 0; padding: 22px 24px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: #0d1b2b; color: #cbd2da; }
.article-note strong { display: block; margin-bottom: 5px; color: var(--gold-light); }
.article-aside { position: sticky; top: 110px; }
.article-toc, .article-cta { padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: #0b1725; }
.article-toc h2, .article-cta h2 { margin: 0 0 14px; font-size: 18px; }
.article-toc a { display: block; min-height: 34px; padding: 6px 0; color: #b8c1cb; font-size: 13px; }
.article-toc a:hover { color: var(--gold-light); }
.article-cta { margin-top: 18px; }
.article-cta p { color: var(--muted); font-size: 13px; }
.article-cta .button { width: 100%; }
.article-faq { margin-top: 58px; border-top: 1px solid var(--line); }
.related-section { padding: 76px 0; background: #0a1623; border-top: 1px solid var(--soft-line); }
.related-section h2 { margin-bottom: 28px; font-size: 34px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card { display: block; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #0b1725; }
.related-card span { color: var(--gold); font-size: 11px; font-weight: 850; }
.related-card h3 { margin: 8px 0; font-size: 20px; }
.related-card p { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .article-hero-grid, .article-layout { grid-template-columns: 1fr; }
  .article-hero-grid { gap: 34px; }
  .article-layout { gap: 48px; }
  .article-aside { position: static; }
  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .article-hero { padding: 56px 0 48px; }
  .article-hero h1 { font-size: 39px; }
  .article-body { padding: 60px 0 82px; }
  .article-content h2 { margin-top: 46px; }
}