.blog-page{background:#080b12}
.blog-list{padding:8px 0 88px;background:#080b12}
.blog-toolbar{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:14px;margin:0 0 28px}
.blog-field label{display:block;margin-bottom:8px;color:#9db5f8;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.blog-field input,.blog-field select{width:100%;min-height:48px;padding:0 14px;border:1px solid rgba(192,205,234,.2);border-radius:12px;background:#111725;color:#f4f6fb;font:inherit}
.blog-field input::placeholder{color:#78849b}
.blog-feature{margin:0 0 28px;overflow:hidden;border:1px solid rgba(144,166,227,.22);border-radius:22px;background:radial-gradient(ellipse at 12% 0,rgba(104,122,203,.17),transparent 43%),linear-gradient(140deg,#151d2c,#101622)}
.blog-feature-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch}
.blog-feature-copy{padding:32px}
.blog-feature-copy h2{margin:0 0 12px;font-size:clamp(28px,3.4vw,42px);line-height:1.12}
.blog-feature-copy p{margin:0 0 20px;color:#c0cadb;font-size:16px;line-height:1.7}
.blog-feature-image,.blog-card-image,.blog-featured{background:#0d111b}
.blog-feature-image{min-height:240px}
.blog-feature-image img,.blog-card-image img,.blog-featured img{width:100%;height:100%;object-fit:cover;display:block}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.blog-card{display:flex;flex-direction:column;min-height:100%;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(19,26,40,.88),rgba(12,17,27,.92));color:inherit;transition:transform .2s,border-color .2s}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(137,165,255,.32)}
.blog-card-image{aspect-ratio:16/9}
.blog-card-body{padding:20px 22px 22px}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;color:#8e99af;font-size:13px}
.blog-chip{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(129,167,255,.12);color:#b7c8ff;font-size:12px;font-weight:700}
.blog-card h2{margin:0 0 8px;font-size:22px;line-height:1.2;letter-spacing:-.03em}
.blog-card p{margin:0;color:#9da8bd;font-size:14px;line-height:1.65}
.blog-empty{padding:28px;border:1px dashed rgba(192,205,234,.25);border-radius:17px;background:#111725;color:#a7b1c4;text-align:center}
.blog-crumb{margin:0 0 18px;color:#8e99af;font-size:14px}
.blog-crumb a{color:#9db5ff}
.blog-post-hero{padding-bottom:36px}
.blog-post-hero h1{max-width:920px;font-size:clamp(36px,5vw,60px)}
.blog-featured{margin-top:26px;overflow:hidden;border:1px solid var(--line);border-radius:18px;aspect-ratio:16/8}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.blog-prose{padding:8px 8px 28px 0;color:#c5cedf;font-size:17px;line-height:1.75}
.blog-prose p,.blog-prose li{color:#c5cedf}
.blog-prose h2,.blog-prose h3{margin:1.4em 0 .45em;color:#f4f6fb;line-height:1.2}
.blog-prose h2{font-size:clamp(26px,3vw,34px)}
.blog-prose h3{font-size:22px}
.blog-prose a{color:#9db5ff;text-decoration:underline;text-underline-offset:3px}
.blog-prose ul,.blog-prose ol{margin:1em 0 1em 1.2em}
.blog-prose img{max-width:100%;border-radius:14px}
.blog-prose strong{color:#f4f6fb}
.blog-side{display:grid;gap:14px}
.blog-side-card{padding:18px;border:1px solid var(--line);border-radius:17px;background:#111725}
.blog-side-title{margin:0 0 12px;font-family:var(--display);font-size:16px;letter-spacing:-.03em}
.blog-side-card p,.blog-author-role{margin:0 0 14px;color:#9da8bd;font-size:14px;line-height:1.6}
.blog-side-card ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.blog-side-card a:not(.button){color:#9db5ff;font-size:14px}
.blog-faq{margin-top:28px;padding-top:8px}
.blog-faq-list{display:grid;gap:10px}
.blog-faq-item{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#111725}
.blog-faq-item h3{margin:0 0 6px;font-size:16px}
.blog-faq-item p{margin:0;color:#9da8bd;font-size:14px}
.blog-related{display:grid;gap:10px}
.blog-related a{display:block;padding:12px;border:1px solid var(--line);border-radius:12px;color:inherit}
.blog-related a:hover{border-color:rgba(137,165,255,.32)}
.blog-related h3{margin:0 0 6px;font-size:15px;letter-spacing:-.02em}
.blog-related p{margin:0;color:#9da8bd;font-size:13px}
.blog-author-name{font-family:var(--display);font-size:18px}
@media (max-width:1020px){
  .blog-grid,.blog-feature-grid,.blog-layout,.blog-toolbar{grid-template-columns:1fr}
  .blog-prose{padding-right:0}
}
@media (max-width:720px){
  .blog-feature-copy{padding:22px}
  .blog-card h2{font-size:20px}
}