:root{ --green: #2e7d4f; --green-dark: #1c5435; --green-light: #eaf5ef; --poly: #ddeef7; --poly-border: #b0d4e8; --sun: #e8970f; --sun-light: #fdf3dc; --text: #1a1a1a; --text-muted: #5a6b61; --bg: #ffffff; --border: #ccddd4; --radius: 8px; --shadow-sm: 0 1px 4px rgba(0,0,0,.07); --shadow: 0 2px 10px rgba(0,0,0,.09); --max-read: 740px; --max-wide: 1100px;}
*,
*::before,
*::after{box-sizing: border-box;margin: 0;padding: 0}
a,button,[role="button"],summary{-webkit-tap-highlight-color: transparent}
html{scroll-behavior: smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior: auto}
 *,
 *::before,
 *::after{animation-duration: .01ms !important;transition-duration: .01ms !important}}
body{ font: 1rem/1.75 Georgia,"Times New Roman",Times,serif; color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-wrap: break-word;}
img{max-width: 100%;height: auto;display: block}
a{color: var(--green);text-underline-offset: 3px}
a:hover{color: var(--green-dark)}
a:focus-visible{ outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 2px;}
h1,h2,h3,h4,h5{ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; line-height: 1.25; color: var(--text); overflow-wrap: break-word; word-break: break-word;}
h1{font-size: clamp(1.45rem,4.5vw,2.15rem);margin-bottom: .75rem}
h2{font-size: clamp(1.15rem,3.5vw,1.55rem);margin: 2.25rem 0 .7rem}
h3{font-size: clamp(1rem,3vw,1.2rem);margin: 1.75rem 0 .5rem}
h4{font-size: 1rem;margin: 1.25rem 0 .4rem}
p{margin-bottom: 1rem}
ul,
ol{margin: 0 0 1rem 1.5rem}
li{margin-bottom: .35rem}
strong{font-weight: 700}
.container{ width: 100%; max-width: var(--max-wide); margin: 0 auto; padding: 0 1rem;}
.content{ 
 max-width: min(100%,var(--max-read)); margin: 0 auto;}
.article-wrap{ padding: 1.75rem 1rem 3.5rem; max-width: var(--max-wide); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem;}
@media (min-width: 900px){ .article-wrap{ grid-template-columns: 1fr 260px;}}
.article-wrap .content{ min-width: 0;}
.sidebar{ align-self: start;}
.sidebar-block{ background: #f4f8f0; border-left: 3px solid var(--green); border-radius: 0 6px 6px 0; padding: 1rem 1.1rem; margin-bottom: 1.2rem;}
.sidebar-block h3{ font-size: .95rem; margin: 0 0 .7rem; color: var(--green-dark);}
.sidebar-block ul{ list-style: none; padding: 0; margin: 0;}
.sidebar-block ul li{ margin-bottom: .4rem;}
.sidebar-block ul li a{ font-size: .88rem; color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px;}
.site-header{ background: var(--green); color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.2);}
.header-inner{ display: flex; align-items: center; justify-content: flex-start; gap: .4rem 1.5rem; padding: .65rem 1rem; max-width: var(--max-wide); margin: 0 auto;}
.site-logo{ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: #fff; text-decoration: none; white-space: nowrap; flex-shrink: 0;}
.site-logo span{color: var(--sun)}
.site-nav{ display: flex; gap: .35rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;}
.site-nav a{ display: inline-block; color: rgba(255,255,255,.92); text-decoration: none; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .86rem; font-weight: 600; padding: .42rem .85rem; border-radius: 999px; white-space: nowrap; transition: background .15s,color .15s;}
.site-nav a:hover{background: rgba(255,255,255,.16);color: #fff;text-decoration: none}
.site-nav a[aria-current="page"]{background: #fff;color: var(--green-dark)}
.site-nav a:focus-visible{outline-color: var(--sun)}
@media (max-width: 580px){ .header-inner{flex-direction: column;align-items: stretch;gap: .55rem}
 
 .header-inner > nav{min-width: 0;max-width: 100%}
 .site-logo{font-size: 1.15rem}
 
 .site-nav{ min-width: 0; flex-wrap: wrap; gap: .4rem;}
 .site-nav a{font-size: .84rem;padding: .4rem .8rem;background: rgba(255,255,255,.14)}
 .site-nav a[aria-current="page"]{background: #fff}}
.breadcrumbs{ background: var(--green-light); border-bottom: 1px solid var(--border);}
.breadcrumbs ol{ display: flex; flex-wrap: wrap; gap: .2rem .4rem; list-style: none; margin: 0 auto; padding: .5rem 1rem; max-width: var(--max-wide); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .8rem; color: var(--text-muted);}
.breadcrumbs li + li::before{content: "›";margin-right: .4rem}
.breadcrumbs a{color: var(--green-dark)}
.breadcrumbs [aria-current="page"]{color: var(--text-muted);overflow-wrap: break-word;word-break: break-word}
.tldr{ background: var(--poly); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 1rem 1.25rem 1rem 1.25rem; margin-bottom: 2rem;}
.tldr-label{ display: block; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green); margin-bottom: .45rem;}
.tldr p{margin: 0;font-size: .95rem}
.tldr p + p{margin-top: .5rem}
.img-placeholder{ background: var(--green-light); border: 1px dashed var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--text-muted); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .82rem; text-align: center; min-height: 180px; padding: 1.5rem; margin: 1.5rem 0;}
.img-placeholder svg{opacity: .35}
.note-box{ border: 1px solid var(--poly-border); background: var(--poly); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1.25rem 0; font-size: .93rem;}
.warn-box{ border: 1px solid #e0b84a; background: var(--sun-light); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1.25rem 0; font-size: .93rem;}
.warn-box strong{color: #8a5c00}
.note-box p:last-child,
.warn-box p:last-child{margin: 0}
.howto-steps{ counter-reset: step-counter; display: flex; flex-direction: column; gap: .9rem; margin: 1.5rem 0 2rem;}
.step-card{ display: grid; grid-template-columns: 2.8rem 1fr; gap: .9rem 1rem; align-items: start; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow-sm);}
.step-num{ counter-increment: step-counter; width: 2.2rem; height: 2.2rem; background: var(--green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-weight: 700; font-size: 1rem; flex-shrink: 0;}
.step-body h3{margin: 0 0 .35rem;font-size: 1rem}
.step-body p{margin: 0;font-size: .92rem;color: var(--text)}
.cta-block{ position: relative; background: linear-gradient(180deg,#ffffff 0%,#f3faf5 100%); border: 2px solid var(--green); border-radius: 12px; margin: 2.5rem 0; padding: 1.4rem; overflow: hidden; box-shadow: 0 6px 22px rgba(46,125,79,.16);}
.cta-block::after{ content: ""; position: absolute; top: -28px; right: -28px; width: 70px; height: 70px; background: var(--sun); opacity: .14; border-radius: 50%;}
.cta-block > h2,
.cta-block > h3,
.cta-block__title{ display: flex; align-items: center; gap: .55rem; margin: -1.4rem -1.4rem 1.1rem; padding: .9rem 1.4rem; color: #fff !important; background: linear-gradient(90deg,var(--green) 0%,var(--green-dark) 100%); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.3;}
.cta-block > h2::before,
.cta-block > h3::before,
.cta-block__title::before{ content: ""; flex-shrink: 0; width: 22px; height: 22px; background-color: #fff; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");}
.cta-block > p,
.cta-block__intro{ font-size: .94rem; color: var(--text-muted); margin-bottom: 1rem; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
.cta-block > p strong{color: var(--text)}
.cta-grid{ display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: .7rem;}
.cta-block > .cta-btn{margin-bottom: .6rem}
.cta-block > .cta-btn:last-child{margin-bottom: 0}
.cta-btn{ position: relative; display: flex; align-items: center; justify-content: center; gap: .45rem; background: var(--green); color: #fff !important; text-decoration: none; text-align: center; padding: .85rem 1.15rem; border-radius: 9px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .94rem; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 6px rgba(46,125,79,.28); transition: background .18s,transform .15s,box-shadow .18s; border: none; cursor: pointer;}
.cta-btn::after{ content: "→"; font-weight: 700; transition: transform .15s;}
.cta-btn:hover{ background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(46,125,79,.34);}
.cta-btn:hover::after{transform: translateX(3px)}
.cta-btn:focus-visible{outline: 3px solid var(--sun);outline-offset: 2px}
.cta-btn-secondary{ background: #fff; color: var(--green) !important; border: 2px solid var(--green); box-shadow: none;}
.cta-btn-secondary:hover{background: var(--green-light);color: var(--green-dark) !important}
.cta-card{ display: flex; flex-direction: column; background: #fff; border: 1px solid #dbe7e0; border-radius: 12px; padding: .95rem 1rem; box-shadow: 0 2px 8px rgba(46,125,79,.07);}
.cta-card__title{ font-weight: 700; color: #23402f; font-size: .96rem; line-height: 1.3; margin-bottom: .35rem;}
.cta-card__desc{ font-size: .85rem; color: #5a6b61; line-height: 1.45; margin-bottom: .9rem; flex: 1 1 auto;}
.cta-card .cta-btn{ margin-top: auto; width: 100%; padding: .72rem .7rem; font-size: .88rem; white-space: nowrap;}
.cta-note{ margin: .9rem 0 0; font-size: .78rem; color: var(--text-muted); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; opacity: .8;}
.faq-section{margin: 2rem 0}
.faq-section details{ border-bottom: 1px solid var(--border);}
.faq-section details:first-of-type{ border-top: 1px solid var(--border);}
.faq-section summary{ cursor: pointer; padding: .9rem 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-weight: 600; font-size: .97rem; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; gap: .75rem; user-select: none;}
.faq-section summary::-webkit-details-marker{display: none}
.faq-summary-icon,
.faq-icon{ width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: var(--green); margin-top: .05rem;}
.faq-section details[open] summary{color: var(--green)}
.faq-body{ padding: 0 0 1.1rem; font-size: .93rem;}
.faq-body p:last-child{margin-bottom: 0}
.catalog-cat{margin: 2rem 0}
.catalog-cat h2{margin-bottom: .3rem}
.catalog-cat > p{color: var(--text-muted);margin: 0 0 1rem;font-size: .95rem}
.read-also{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border);}
.read-also__label{ font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-right: .15rem;}
.read-also a{ display: inline-block; font-size: .84rem; font-weight: 600; line-height: 1.2; padding: .4rem .85rem; border-radius: 999px; background: var(--green-light); color: var(--green-dark); text-decoration: none; border: 1px solid transparent; transition: background .15s,color .15s,border-color .15s;}
.read-also a:hover{background: var(--green);color: #fff}
.read-also a:focus-visible{outline: 2px solid var(--sun);outline-offset: 2px}
@media (max-width: 580px){ .read-also{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x;}
 .read-also::-webkit-scrollbar{display: none}
 .read-also__label{white-space: nowrap}
 .read-also a{white-space: nowrap}}
.faq-item{border-bottom: 1px solid var(--border)}
.faq-item:first-of-type{border-top: 1px solid var(--border)}
.faq-summary{ cursor: pointer; padding: .9rem 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-weight: 600; font-size: .97rem; list-style: none; display: flex; align-items: flex-start; gap: .75rem; user-select: none;}
.faq-summary::-webkit-details-marker{display: none}
.faq-summary::marker{content: ""}
.faq-item[open] .faq-summary{color: var(--green)}
span.faq-icon{display: inline-flex;align-items: center;justify-content: center}
span.faq-icon > svg{width: 100%;height: 100%;display: block}
.related-links{ margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border);}
.related-links h2{ font-size: 1.05rem; margin: 0 0 .75rem; color: var(--text-muted); font-weight: 600;}
.related-links ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem;}
.related-links li{display: flex;align-items: flex-start;gap: .5rem}
.related-links li::before{ content: "→"; color: var(--green); flex-shrink: 0; font-style: normal;}
.related-links a{ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .93rem;}
.site-footer{ background: #192a1e; color: #8dab97; margin-top: 4rem;}
.footer-inner{ max-width: var(--max-wide); margin: 0 auto; padding: 2.5rem 1rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 1.75rem;}
.footer-col h3{ color: #d4ead9; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem;}
.footer-col ul{list-style: none;margin: 0;padding: 0}
.footer-col li{margin-bottom: .45rem}
.footer-col a{ color: #8dab97; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .85rem; text-decoration: none;}
.footer-col a:hover{color: #d4ead9}
.footer-col a:focus-visible{outline-color: var(--sun)}
.footer-bottom{ border-top: 1px solid #253d2c; padding: 1rem; text-align: center; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .78rem; color: #4e6e57; max-width: var(--max-wide); margin: 0 auto;}
.footer-bottom a{color: #5d8068}
.hero{ background: linear-gradient(140deg,var(--green) 0%,#1a4d30 100%); color: #fff; padding: 3.5rem 1rem 3rem; text-align: center;}
.hero h1{ color: #fff; font-size: clamp(1.75rem,5vw,2.75rem); margin-bottom: .75rem; text-shadow: 0 1px 3px rgba(0,0,0,.25);}
.hero-lead{ max-width: 560px; margin: 0 auto 1.75rem; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: 1.05rem; line-height: 1.6; opacity: .88;}
.hero-cta{ display: inline-block; background: var(--sun); color: #1a1a1a !important; text-decoration: none; padding: .75rem 1.75rem; border-radius: var(--radius); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-weight: 700; font-size: 1rem;}
.hero-cta:hover{background: #d4870a}
.hubs-section{padding: 2.5rem 1rem}
.hubs-section h2{ text-align: center; font-size: 1.35rem; margin-bottom: 1.5rem;}
.hub-grid{ display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1.1rem; max-width: var(--max-wide); margin: 0 auto;}
.hub-card{ display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: box-shadow .2s,border-color .2s,transform .2s;}
@media (prefers-reduced-motion: no-preference){ .hub-card:hover{transform: translateY(-2px)}}
.hub-card:hover{ box-shadow: var(--shadow); border-color: var(--green);}
.hub-card:focus-visible{outline: 3px solid var(--sun);outline-offset: 2px}
.hub-icon{color: var(--green);margin-bottom: .6rem}
.hub-card h3{ font-size: 1.02rem; margin: 0 0 .4rem; color: var(--green-dark);}
.hub-card p{ font-size: .86rem; color: var(--text-muted); margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
.page-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem;}
.page-list a{ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: 1rem; display: flex; align-items: center; gap: .5rem;}
.page-list a::before{content: "→";color: var(--green)}
.svg-figure{ margin: 2rem 0; padding: 1.5rem 1.1rem 1rem; background: linear-gradient(180deg,#ffffff 0%,#f1f7f4 100%); border: 1px solid #d4e4dc; border-radius: 14px; text-align: center; overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 3px 14px rgba(46,125,79,.07);}
.svg-figure svg{ display: block; margin: 0 auto; 
 width: 100%; max-width: 100%; height: auto;}
.svg-figure figcaption{ margin-top: 1rem; font-size: .92rem; color: #3a4f44; font-weight: 500; line-height: 1.55; max-width: 520px; margin-left: auto; margin-right: auto;}
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: 8px;}
table{ border-collapse: collapse; width: 100%; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size: .93rem; line-height: 1.45;}
.table-wrap > table{border: 0}
th,
td{ padding: .6rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); 
 word-break: normal; overflow-wrap: normal; hyphens: none;}
th{ background: var(--green-light); color: var(--green-dark); font-weight: 700; white-space: nowrap;}
tbody tr:last-child td{border-bottom: 0}
tbody tr:nth-child(even){background: rgba(0,0,0,.025)}
@media (max-width: 620px){ .table-wrap > table{min-width: 30rem}}
.page-list--annotated{gap: 1.25rem}
.page-list--annotated li{ padding-left: 1.4rem; border-left: 2px solid var(--green);}
.page-list--annotated a{align-items: baseline;font-weight: 600}
.page-list--annotated a::before{margin-left: -1.4rem}
.page-list__desc{ display: block; margin-top: .3rem; color: var(--text-muted); font-size: .92rem; line-height: 1.5;}
.article-meta{ display: flex; flex-wrap: wrap; gap: .3rem .75rem; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size: .83rem; color: var(--text-muted); margin-bottom: 1.5rem;}
@media (max-width: 480px){ .site-nav a{font-size: .82rem;padding: .38rem .72rem}
 h1{font-size: 1.45rem}
 h2{font-size: 1.15rem}
 .hero{padding: 2.25rem 1rem 2rem}
 .hero h1{font-size: 1.65rem}
 .cta-grid{grid-template-columns: 1fr}
 .cta-btn{font-size: .9rem;padding: .8rem 1rem}
 .step-card{ grid-template-columns: 2rem 1fr; gap: .6rem .75rem; padding: .85rem 1rem;}
 .step-num{width: 2rem;height: 2rem;font-size: .9rem}
 .tldr{padding: .85rem 1rem}
 .article-wrap{padding: 1.25rem .75rem 2.5rem}}
.visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.text-muted{color: var(--text-muted)}
.mt-0{margin-top: 0 !important}
/* === АНИМАЦИИ И ИНТЕРАКТИВ (v2026-06-25) ====================
   .js-anim ставится inline-скриптом в <head> до отрисовки.
   Если JS выключен — класса нет, контент виден всегда. */

/* Полоса прогресса чтения (создаётся в main.js) */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--green),var(--sun));z-index:200;box-shadow:0 0 8px rgba(46,125,79,.5);border-radius:0 2px 2px 0;transition:width .08s linear;pointer-events:none}

/* Кнопка «наверх» (создаётся в main.js) */
.to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:46px;height:46px;border:none;cursor:pointer;background:var(--green);color:#fff;border-radius:50%;font-size:1.25rem;line-height:1;box-shadow:0 4px 16px rgba(46,125,79,.45);opacity:0;visibility:hidden;transform:translateY(10px) scale(.85);transition:opacity .3s,transform .3s,visibility .3s,background .2s;z-index:150}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--green-dark);transform:translateY(-3px) scale(1.05)}
.to-top:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* Появление блоков при скролле */
.js-anim :is(.tldr,.svg-figure,.table-wrap,.step-card,.cta-block,.faq-section,.note-box,.warn-box,.related-links,.hub-card,.catalog-cat,.sidebar-block){transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-anim :is(.tldr,.svg-figure,.table-wrap,.step-card,.cta-block,.faq-section,.note-box,.warn-box,.related-links,.hub-card,.catalog-cat,.sidebar-block):not(.visible){opacity:0;transform:translateY(28px)}

/* Каскад карточек-хабов */
.js-anim .hub-grid .hub-card:nth-child(1){transition-delay:0s}
.js-anim .hub-grid .hub-card:nth-child(2){transition-delay:.08s}
.js-anim .hub-grid .hub-card:nth-child(3){transition-delay:.16s}
.js-anim .hub-grid .hub-card:nth-child(4){transition-delay:.24s}
.js-anim .hub-grid .hub-card:nth-child(5){transition-delay:.32s}
.js-anim .hub-grid .hub-card:nth-child(6){transition-delay:.4s}

/* Усиленный hover карточек + поворот иконки */
@media (prefers-reduced-motion:no-preference){
  .hub-card{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s}
  .hub-card:hover{transform:translateY(-7px);box-shadow:0 16px 32px rgba(46,125,79,.2)}
  .hub-icon{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
  .hub-card:hover .hub-icon{transform:scale(1.1) rotate(-6deg)}
}

/* Живой сетчатый фон героя */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;animation:heroGridDrift 25s linear infinite;pointer-events:none}
.hero > *{position:relative;z-index:1}
@keyframes heroGridDrift{from{background-position:0 0}to{background-position:0 40px}}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .js-anim :is(.tldr,.svg-figure,.table-wrap,.step-card,.cta-block,.faq-section,.note-box,.warn-box,.related-links,.hub-card,.catalog-cat,.sidebar-block):not(.visible){opacity:1;transform:none;transition:none}
}

/* === ФОТО В СТАТЬЯХ ===================================== */
.article-photo{margin:1.75rem 0}
.article-photo img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--border)}
.article-photo figcaption{margin-top:.6rem;font-size:.88rem;color:var(--text-muted);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.5;text-align:center}


/* ── Схемы во всю ширину на мобильных ───────────────────── */
@media (max-width:580px){
.svg-figure{margin-left:-1rem;margin-right:-1rem;border-radius:0;border-left:none;border-right:none;padding-left:.6rem;padding-right:.6rem}
.svg-figure svg{width:100%;height:auto}
}

/* ── Калькуляторы ───────────────────────────────────────── */
.calc{background:linear-gradient(180deg,#fff,#f1f7f4);border:1px solid #d4e4dc;border-radius:14px;padding:1.4rem 1.2rem;margin:1.8rem 0;box-shadow:0 3px 14px rgba(46,125,79,.07)}
.calc-row{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.calc-field{flex:1;min-width:140px}
.calc-field label{display:block;font-size:.85rem;font-weight:600;color:#3a4f44;margin-bottom:.35rem}
.calc-field input,.calc-field select{width:100%;box-sizing:border-box;padding:.6rem .7rem;border:1.5px solid #cdd9e1;border-radius:9px;font-size:1rem;background:#fff;color:#1a1a1a}
.calc-field input:focus,.calc-field select:focus{outline:none;border-color:#2e7d4f}
.calc-result{background:#eaf5ef;border:1.5px solid #b7ddc6;border-radius:11px;padding:1rem 1.1rem;margin-top:.4rem}
.calc-result .big{font-size:1.5rem;font-weight:800;color:#1c5435}
.calc-result ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.92rem;color:#3a4f44}
.calc-note{font-size:.8rem;color:#5a6b61;margin-top:.7rem}

/* ── Ссылка на пиллар ───────────────────────────────────── */
.pillar-link{margin:.2rem 0 1.2rem;padding:.6rem .9rem;background:#eef6f1;border-left:3px solid #2e7d4f;border-radius:0 8px 8px 0;font-size:.92rem;color:#3a4f44}
.pillar-link a{font-weight:600}

/* ── Оглавление ─────────────────────────────────────────── */
.toc{background:#f4f8fb;border:1px solid #d0e4ee;border-radius:11px;padding:1rem 1.2rem;margin:1.4rem 0}
.toc__title{font-weight:700;color:#1c5435;margin:0 0 .7rem;font-size:1rem}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;counter-reset:toc}
.toc li{counter-increment:toc;margin:0;break-inside:avoid}
.toc a{display:inline-flex;gap:.45rem;align-items:flex-start;background:#fff;border:1px solid #cfe2ec;color:#27506a;text-decoration:none;padding:.5rem .85rem;border-radius:14px;font-size:.9rem;line-height:1.3;transition:border-color .15s,color .15s}
.toc a::before{content:counter(toc);flex:0 0 auto;color:#2e7d4f;font-weight:700;font-size:.82rem;line-height:1.45}
.toc a:hover{border-color:#2e7d4f;color:#1c5435}

/* ── CTA: редизайн под конверсию ───────────────────────── */
.cta-block{box-shadow:0 8px 28px rgba(46,125,79,.18)}
.cta-trust{margin:1.1rem -1.4rem -1.4rem;padding:.72rem 1.2rem;background:#edf5f0;border-top:1px solid #d4e9dc;font-size:.79rem;color:#3a4f44;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.45}
.cta-trust__lock{opacity:.85;margin-right:.15rem}
.cta-btn{background:linear-gradient(180deg,#3a9e63 0%,#2e7d4f 100%);padding:.95rem 1.2rem;font-size:.98rem;box-shadow:0 3px 8px rgba(46,125,79,.32)}
.cta-btn:hover{background:linear-gradient(180deg,#2e7d4f 0%,#1c5435 100%)}
.cta-btn-secondary{background:#fff !important;color:var(--green) !important}
.cta-btn-secondary:hover{background:var(--green-light) !important;color:var(--green-dark) !important}
.cta-block--shop .cta-grid>.cta-btn:first-child:not(.cta-btn-secondary)::before{content:"★ хит";position:absolute;top:-9px;left:10px;background:linear-gradient(180deg,#ffd23f,#f5b800);color:#5a4500;font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:9px;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 2px 5px rgba(0,0,0,.18);z-index:1}