/* ===== БАРЬЕР — общие стили посадочных страниц и статей блога ===== */

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1!important;transform:none!important;transition:none} }

section.seo{padding:84px 0;position:relative;z-index:1}
@media(max-width:640px){ section.seo{padding:56px 0} }

.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Хлебные крошки */
.crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-family:var(--mono);font-size:13px;color:var(--text-mute);letter-spacing:.03em;text-transform:uppercase}
.crumbs a{color:var(--text-dim)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.45}

.seo-lead{max-width:840px;font-size:19px;line-height:1.65;color:var(--text-dim)}
.seo-lead strong{color:var(--text);font-weight:500}
@media(max-width:640px){ .seo-lead{font-size:17px} }

/* Галерея фото из каталога */
.cat-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.cat-shot{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-card);aspect-ratio:4/3;margin:0}
.cat-shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat-shot:hover img{transform:scale(1.06)}
.cat-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(transparent,rgba(10,15,26,.92));font-size:14px;color:var(--text);font-family:var(--mono);letter-spacing:.02em}

/* Спек-карточки */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.spec-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--bg-card);transition:border-color .3s,transform .3s}
.spec-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.spec-card .big{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--accent);margin-bottom:8px;line-height:1}
.spec-card .big.fire{color:var(--fire)}
.spec-card h4{font-size:17px;margin-bottom:8px;color:var(--text)}
.spec-card p{color:var(--text-dim);font-size:15px;line-height:1.55}

/* FAQ */
.faq{max-width:880px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:19px;font-weight:400;list-style:none;display:flex;justify-content:space-between;gap:18px;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-size:26px;line-height:1;transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details .a{margin-top:14px;color:var(--text-dim);font-size:16px;line-height:1.65;max-width:780px}

/* Проза статей */
.prose{max-width:760px;font-size:17px;line-height:1.75;color:var(--text-dim)}
.prose h2{font-family:var(--serif);font-weight:400;color:var(--text);font-size:28px;margin:46px 0 16px;letter-spacing:-.01em;scroll-margin-top:100px}
.prose h3{color:var(--text);font-size:21px;margin:32px 0 12px}
.prose p{margin-bottom:18px}
.prose strong{color:var(--text)}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:10px}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--bg-card);color:var(--text);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.prose .note{border-left:2px solid var(--accent);background:var(--accent-soft);padding:16px 20px;border-radius:0 12px 12px 0;margin:24px 0;color:var(--text);font-size:16px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){ .prose{font-size:16px} .prose h2{font-size:24px} }

/* Оглавление */
.toc{border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;background:var(--bg-card);margin:0 0 36px;max-width:760px}
.toc h4{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);margin-bottom:14px}
.toc ol{margin-left:18px;color:var(--text-dim);display:flex;flex-direction:column;gap:8px}
.toc a{color:var(--text-dim)}
.toc a:hover{color:var(--accent)}

/* Сетка блога */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-card);transition:border-color .3s,transform .3s}
.blog-card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.blog-card .ph{aspect-ratio:16/9;overflow:hidden}
.blog-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.blog-card:hover .ph img{transform:scale(1.05)}
.blog-card .bd{padding:24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.blog-card .tag{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.blog-card h3{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--text);line-height:1.3}
.blog-card p{color:var(--text-dim);font-size:15px;flex:1;line-height:1.55}
.blog-card .more{font-family:var(--mono);font-size:13px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.blog-card.soon{opacity:.5;pointer-events:none}

/* CTA-полоса */
.cta-band{border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:56px;text-align:center;background:radial-gradient(ellipse 60% 100% at 50% 0%,var(--accent-soft),transparent),var(--bg-card)}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,40px);margin-bottom:14px}
.cta-band p{color:var(--text-dim);max-width:580px;margin:0 auto 28px;font-size:17px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){ .cta-band{padding:36px 24px} }

/* Связанные материалы */
.rel-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.rel-list a{display:block;border:1px solid var(--line);border-radius:14px;padding:22px 24px;color:var(--text);transition:border-color .3s,transform .3s}
.rel-list a:hover{border-color:var(--accent);transform:translateY(-3px)}
.rel-list a .k{font-family:var(--mono);font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.rel-list a .t{display:block;margin-top:9px;font-size:16px;line-height:1.4}

/* мета-строка статьи */
.art-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.03em;margin-top:18px}
.art-meta .dotm{width:4px;height:4px;border-radius:50%;background:var(--accent);align-self:center}

/* Fix: CTA-кнопки внутри статей не должны краситься как prose-ссылки (иначе текст btn-primary синий на синем = невидим) */
.prose a.btn{ text-decoration:none; }
.prose a.btn-primary, .prose a.btn-primary:hover{ color:#0A0F1A; text-decoration:none; }
.prose a.btn-ghost, .prose a.btn-ghost:hover{ color:var(--text); text-decoration:none; }