*,*::before,*::after{box-sizing:border-box}
:root{--blog-bg:#0f1112;--blog-bg-alt:#141718;--blog-card:#1b1e1f;--blog-line:rgba(255,255,255,.1);--blog-text:#fff;--blog-muted:rgba(255,255,255,.7);--blog-green:#607f5b;--blog-green-dark:#4b6747}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blog-bg);color:var(--blog-text);font-family:'Manrope',sans-serif;line-height:1.72;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.blog-cn{width:min(1080px,calc(100% - 48px));margin:0 auto}
.blog-hero{min-height:560px;display:flex;align-items:flex-end;position:relative;isolation:isolate;background:#111 center/cover no-repeat}
.blog-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,10,10,.9),rgba(8,10,10,.7) 52%,rgba(8,10,10,.26))}
.blog-hero__content{max-width:810px;padding:150px 0 78px}
.blog-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;color:rgba(255,255,255,.56);font-size:13px;margin-bottom:20px}
.blog-breadcrumbs a:hover{color:#fff}
.blog-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b8d2b4;margin-bottom:14px}
.blog-hero h1{font-family:'Playfair Display',serif;font-size:clamp(36px,5.8vw,66px);line-height:1.04;margin:0 0 20px;max-width:900px}
.blog-hero__lead{font-size:clamp(17px,2vw,21px);line-height:1.65;color:rgba(255,255,255,.82);max-width:780px;margin:0}
.blog-meta{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;font-size:13px;color:rgba(255,255,255,.58)}
.blog-section{padding:72px 0}
.blog-section--alt{background:var(--blog-bg-alt)}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:34px;align-items:start}
.blog-article{background:var(--blog-card);border:1px solid var(--blog-line);border-radius:16px;padding:clamp(24px,4vw,46px)}
.blog-article h2{font-family:'Playfair Display',serif;font-size:clamp(27px,3vw,36px);line-height:1.2;margin:48px 0 14px;scroll-margin-top:110px}
.blog-article h2:first-of-type{margin-top:0}
.blog-article p{font-size:16px;color:rgba(255,255,255,.78);margin:0 0 16px}
.blog-article ul{padding-left:22px;color:rgba(255,255,255,.78)}
.blog-article li{margin:8px 0}
.blog-intro{font-size:20px!important;color:rgba(255,255,255,.92)!important}
.blog-note{margin:24px 0;padding:18px 20px;border-radius:12px;background:rgba(96,127,91,.14);border:1px solid rgba(96,127,91,.38)}
.blog-note p{margin:0;color:rgba(255,255,255,.84)}
.blog-toc{position:sticky;top:104px;background:var(--blog-card);border:1px solid var(--blog-line);border-radius:14px;padding:20px}
.blog-toc strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#c5d8c1;margin-bottom:12px}
.blog-toc ol{margin:0;padding-left:20px;color:var(--blog-muted)}
.blog-toc li{margin:9px 0}
.blog-toc a:hover{color:#fff}
.blog-cta{margin-top:42px;padding:26px;border-radius:14px;background:linear-gradient(135deg,rgba(96,127,91,.27),rgba(255,255,255,.03));border:1px solid rgba(96,127,91,.44)}
.blog-cta h2{font-family:'Playfair Display',serif;font-size:29px;margin:0 0 8px}
.blog-cta p{margin-bottom:18px}
.blog-actions{display:flex;flex-wrap:wrap;gap:10px}
.blog-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border-radius:8px;font-weight:800;font-size:14px;border:1px solid transparent}
.blog-btn--main{background:var(--blog-green);color:#fff}
.blog-btn--main:hover{background:var(--blog-green-dark)}
.blog-btn--ghost{border-color:rgba(255,255,255,.28)}
.blog-btn--ghost:hover{background:rgba(255,255,255,.08)}
.blog-faq{display:grid;gap:10px}
.blog-faq details{border:1px solid var(--blog-line);border-radius:10px;padding:0 16px;background:rgba(255,255,255,.02)}
.blog-faq summary{cursor:pointer;list-style:none;position:relative;padding:16px 30px 16px 0;font-weight:750}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:24px;color:#a9c4a5}
.blog-faq details[open] summary::after{content:"−"}
.blog-faq p{padding:0 0 16px;margin:0}
.blog-related-title{font-family:'Playfair Display',serif;font-size:36px;margin:0 0 22px}
.blog-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.blog-related a{display:block;background:var(--blog-card);border:1px solid var(--blog-line);border-radius:14px;padding:20px;transition:.2s ease}
.blog-related a:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24)}
.blog-related h3{font-size:18px;line-height:1.35;margin:0 0 8px}
.blog-related p{font-size:14px;color:var(--blog-muted);margin:0}
.blog-footer{padding:42px 0;border-top:1px solid var(--blog-line);background:#0c0e0f;color:rgba(255,255,255,.58);font-size:13px}
.blog-footer__inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.blog-footer nav{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:900px){.blog-layout{grid-template-columns:1fr}.blog-toc{position:static;order:-1}.blog-related{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-cn{width:min(100% - 32px,1080px)}.blog-hero{min-height:520px}.blog-hero__content{padding:124px 0 58px}.blog-section{padding:52px 0}.blog-article{padding:22px 18px}.blog-related{grid-template-columns:1fr}.blog-meta{gap:8px 14px}}
