.seo-page.blog-page{background:#111;color:#f8f8f4}
.blog-page .blog-hero{padding:90px 0 68px;background:radial-gradient(circle at 82% 8%,#36420e 0%,transparent 36%),#111}
.blog-page .blog-hero p{max-width:760px}
.blog-page .blog-hero h1{max-width:980px}
.blog-page .blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.blog-page .blog-card{display:flex;flex-direction:column;gap:12px;border:1px solid #ffffff30;border-radius:18px;padding:30px;background:#ffffff08}
.blog-page .blog-card .tag{color:#d6ff00;font-size:13px;font-weight:700;letter-spacing:.06em}
.blog-page .blog-card h2{font-size:clamp(24px,2.5vw,32px);margin:0}
.blog-page .blog-card p{margin:0}
.blog-page .blog-card a{margin-top:auto;padding-top:12px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.blog-page .blog-card a:hover,.blog-page .article-body a:hover,.blog-page .breadcrumbs a:hover{color:#d6ff00}
.blog-page .breadcrumbs{font-size:13px;color:#aaa;display:flex;gap:8px;flex-wrap:wrap}
.blog-page .breadcrumbs a{text-decoration:underline;text-underline-offset:3px}
.blog-page .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:70px;align-items:start}
.blog-page .article-body{max-width:770px}
.blog-page .article-body h2{font-size:clamp(27px,3vw,36px);margin:66px 0 18px;scroll-margin-top:24px}
.blog-page .article-body h3{font-size:22px;margin:35px 0 12px}
.blog-page .article-body p,.blog-page .article-body li,.blog-page .article-body dd{font-size:17px;line-height:1.9;color:#dededb}
.blog-page .article-body p{margin:0 0 20px}
.blog-page .article-body ul,.blog-page .article-body ol{padding-left:24px;margin:0 0 24px}
.blog-page .article-body li{padding-left:3px;margin:6px 0}
.blog-page .article-body strong{color:#fff}
.blog-page .article-body a{text-decoration:underline;text-underline-offset:4px}
.blog-page .article-body .sample{border-left:3px solid #d6ff00;background:#ffffff0b;padding:24px 28px;margin:28px 0}
.blog-page .article-body .sample p:last-child,.blog-page .article-body .sample ul:last-child{margin-bottom:0}
.blog-page .article-body .sample strong{display:block;margin-bottom:10px}
.blog-page .article-aside{position:sticky;top:28px;border:1px solid #ffffff30;border-radius:16px;padding:24px;background:#ffffff08}
.blog-page .article-aside h2{font-size:18px;margin:0 0 14px}
.blog-page .article-aside ul{list-style:none;margin:0;padding:0}
.blog-page .article-aside li{margin:9px 0;font-size:14px;line-height:1.5}
.blog-page .article-aside a:hover{color:#d6ff00}
.blog-page .article-related{display:flex;gap:12px;flex-wrap:wrap}
.blog-page .article-related a{display:inline-block;border:1px solid #ffffff40;padding:12px 16px;border-radius:10px}
.blog-page .article-related a:hover{border-color:#d6ff00;color:#d6ff00}
@media(max-width:760px){
  .blog-page .blog-hero{padding:70px 0 55px}
  .blog-page .blog-grid,.blog-page .article-layout{grid-template-columns:1fr}
  .blog-page .blog-card{padding:25px}
  .blog-page .article-layout{gap:30px}
  .blog-page .article-aside{position:static;order:-1}
  .blog-page .article-body h2{margin-top:48px}
}