/* ==========================================================================
   GasFilterPro — Shared Design System
   NOTE: language visibility is handled by separate URLs (/ and /ru/).
   There is intentionally NO [lang="ru"]{display:none} rule, because hiding
   text behind CSS prevents Yandex/Google from indexing the Russian page.
   ========================================================================== */

:root{
  --primary:#1a3a5c;
  --primary-dark:#0d2137;
  --accent:#c0392b;
  --accent-light:#e74c3c;
  --bg:#f4f6f8;
  --card-bg:#fff;
  --text:#2c3e50;
  --text-light:#7f8c8d;
  --border:#dce1e6;
  --green:#27ae60;
  --orange:#e67e22;
  --purple:#8e44ad;
  --radius:8px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-hover:0 6px 24px rgba(0,0,0,.12);
  --maxw:1280px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Accessibility: visible keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent-light);outline-offset:2px;border-radius:3px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:12px 20px;z-index:1000;font-weight:600;
}
.skip-link:focus{left:0}

.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;
}

/* ===== Header ===== */
header{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.logo{font-size:22px;font-weight:700;letter-spacing:-.5px;color:#fff}
.logo span{color:var(--accent-light)}
.logo:hover{text-decoration:none;opacity:.9}
.lang-switch{display:flex;gap:8px;align-items:center}
.lang-switch a{
  padding:4px 14px;border-radius:20px;font-size:13px;border:1px solid rgba(255,255,255,.3);
  color:#ccc;transition:.2s;
}
.lang-switch a:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.5);text-decoration:none}
.lang-switch a.active{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.5)}

.hero{padding:50px 0 45px;text-align:center}
.hero h1{font-size:32px;font-weight:700;line-height:1.3;margin-bottom:16px;max-width:900px;margin-left:auto;margin-right:auto}
.hero p{font-size:17px;color:rgba(255,255,255,.8);max-width:750px;margin:0 auto 28px}
.hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-num{font-size:36px;font-weight:700;color:var(--accent-light)}
.stat-label{font-size:13px;color:rgba(255,255,255,.65);margin-top:2px}
.cta-row{margin-top:30px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.btn-primary{display:inline-block;padding:12px 32px;background:var(--accent-light);color:#fff;border-radius:var(--radius);font-weight:600;font-size:15px;transition:.2s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--accent);text-decoration:none;transform:translateY(-1px)}
.btn-outline{display:inline-block;padding:12px 32px;border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:var(--radius);font-weight:600;font-size:15px;transition:.2s}
.btn-outline:hover{border-color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn-solid-outline{display:inline-block;padding:12px 28px;border:2px solid var(--primary);color:var(--primary);border-radius:var(--radius);font-weight:600;font-size:15px;transition:.2s}
.btn-solid-outline:hover{background:var(--primary);color:#fff;text-decoration:none}
/* WhatsApp 品牌绿 + 即时联系方式行 */
.btn-wa{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;background:#25D366;color:#fff;border:2px solid #25D366;border-radius:var(--radius);font-weight:600;font-size:15px;transition:.2s}
.btn-wa:hover{background:#1EBE5A;border-color:#1EBE5A;color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn-wa svg{flex:none}
.contact-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}

/* ===== Nav ===== */
nav{background:var(--primary);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.nav-inner{display:flex;gap:4px;overflow-x:auto;padding:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.nav-inner a{color:rgba(255,255,255,.8);padding:14px 18px;font-size:14px;font-weight:500;white-space:nowrap;border-bottom:3px solid transparent;transition:.2s}
.nav-inner a:hover,.nav-inner a.active{color:#fff;border-bottom-color:var(--accent-light);text-decoration:none;background:rgba(255,255,255,.05)}

/* ===== Section ===== */
section{padding:55px 0}
.section-title{font-size:26px;font-weight:700;margin-bottom:8px;color:var(--primary)}
.section-subtitle{font-size:15px;color:var(--text-light);margin-bottom:32px;max-width:760px}
.section-alt{background:#fff}

/* ===== Breadcrumb ===== */
.breadcrumb{background:#fff;border-bottom:1px solid var(--border);padding:12px 0;font-size:13px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb li::after{content:'›';margin-left:6px;color:var(--text-light)}
.breadcrumb li:last-child::after{content:'';margin:0}
.breadcrumb a{color:var(--primary)}
.breadcrumb [aria-current]{color:var(--text-light)}

/* ===== Category cards ===== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:24px}
.cat-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.3s;border:1px solid var(--border);display:flex;flex-direction:column}
.cat-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.cat-header{padding:22px 24px 16px;display:flex;align-items:flex-start;gap:16px}
.cat-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.cat-info h3{font-size:19px;font-weight:700;margin-bottom:4px}
.cat-info p{font-size:13.5px;color:var(--text-light);line-height:1.5}
.cat-body{padding:0 24px 20px;flex:1;display:flex;flex-direction:column}
.cat-desc{font-size:14px;color:var(--text);margin-bottom:16px;line-height:1.7}

.brand-tag{display:inline-block;padding:3px 10px;border-radius:4px;font-size:12px;font-weight:600;margin:2px 3px 2px 0}
.tag-pall{background:#e8f0fe;color:#1967d2}
.tag-parker{background:#fce8e8;color:#c0392b}
.tag-donaldson{background:#e8f5e9;color:#27ae60}
.tag-mahle{background:#fff3e0;color:#e67e22}
.tag-hydac{background:#f3e5f5;color:#8e44ad}
.tag-peco{background:#e0f7fa;color:#00796b}
.tag-ru{background:#efebe9;color:#5d4037}
.tag-other{background:#f5f5f5;color:#666}

.model-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;display:block;overflow-x:auto}
.model-table th{background:#f8fafc;text-align:left;padding:8px 10px;font-weight:600;color:var(--primary);border-bottom:2px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.model-table td{padding:7px 10px;border-bottom:1px solid #f0f2f4;font-family:'SF Mono',Monaco,Consolas,'Courier New',monospace;font-size:12.5px}
.model-table tr:hover td{background:#fafbfc}
.model-table .brand-col{font-weight:600;color:var(--primary);font-family:inherit}

.app-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.app-tag{padding:4px 12px;background:#f0f4f8;border-radius:16px;font-size:12.5px;color:var(--primary);font-weight:500}

/* ===== Brand overview ===== */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.brand-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:.2s}
.brand-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.brand-card h4{font-size:16px;font-weight:700;margin-bottom:6px}
.brand-card p{font-size:13px;color:var(--text-light);line-height:1.6}

/* ===== Projects timeline ===== */
.project-timeline{position:relative;padding-left:30px}
.project-timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)}
.project-item{position:relative;margin-bottom:24px}
.project-item::before{content:'';position:absolute;left:-26px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff}
.project-item h4{font-size:16px;font-weight:700}
.project-item p{font-size:14px;color:var(--text-light);margin-top:4px}

/* ===== Blog components ===== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}

.post-card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.3s;
}
.post-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);border-color:var(--primary)}
.post-thumb{
  height:150px;display:flex;align-items:center;justify-content:center;
  font-size:44px;color:#fff;text-decoration:none;
}
.post-card:hover .post-thumb{filter:brightness(1.08)}
.post-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--text-light);margin-bottom:10px}
.post-cat{
  display:inline-block;padding:3px 10px;border-radius:4px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
}
.post-date{font-style:italic}
.post-card h3{font-size:18px;font-weight:700;line-height:1.35;margin-bottom:10px}
.post-card h3 a{color:var(--primary)}
.post-card h3 a:hover{color:var(--accent);text-decoration:none}
.post-excerpt{font-size:14px;color:var(--text-light);line-height:1.6;margin-bottom:16px}
.post-more{margin-top:auto;font-size:14px;font-weight:600}

/* category colour coding, reused on cards and post pages */
.cat-c1{background:linear-gradient(135deg,#3498db,#2980b9)}
.cat-c2{background:linear-gradient(135deg,#9b59b6,#8e44ad)}
.cat-c3{background:linear-gradient(135deg,#e67e22,#d35400)}
.cat-c4{background:linear-gradient(135deg,#1abc9c,#16a085)}
.cat-c5{background:linear-gradient(135deg,#c0392b,#96281b)}
.cat-c6{background:linear-gradient(135deg,#34495e,#2c3e50)}
.tagc1{background:#e8f0fe;color:#1967d2}
.tagc2{background:#f3e5f5;color:#8e44ad}
.tagc3{background:#fff3e0;color:#e67e22}
.tagc4{background:#e0f7fa;color:#00796b}
.tagc5{background:#fce8e8;color:#c0392b}
.tagc6{background:#eceff1;color:#455a64}

/* ===== Featured post (first card spans wide) ===== */
.post-featured{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin-bottom:32px;transition:.3s;
}
.post-featured:hover{box-shadow:var(--shadow-hover)}
.post-featured .post-thumb{height:100%;min-height:260px;font-size:60px}
.post-featured .post-body{padding:32px 34px}
.post-featured h2{font-size:24px;font-weight:700;line-height:1.3;margin-bottom:12px}
.post-featured h2 a{color:var(--primary)}
.post-featured h2 a:hover{color:var(--accent);text-decoration:none}
.post-featured .post-excerpt{font-size:15px}

/* ===== Article (blog post) layout ===== */
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.article{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:36px 40px}
.article h1{font-size:31px;font-weight:700;line-height:1.25;color:var(--primary);margin-bottom:14px}
.article .lead{font-size:17px;color:var(--text-light);line-height:1.65;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.article h2{font-size:23px;font-weight:700;color:var(--primary);margin:34px 0 14px;padding-top:6px}
.article h3{font-size:18px;font-weight:700;color:var(--primary);margin:26px 0 10px}
.article p{margin-bottom:16px;font-size:15.5px;line-height:1.75}
.article ul,.article ol{margin:0 0 18px 22px;font-size:15.5px;line-height:1.75}
.article li{margin-bottom:8px}
.article strong{color:var(--primary)}
.article figure{margin:24px 0}
.article figure img{border-radius:var(--radius)}
.article figcaption{font-size:13px;color:var(--text-light);text-align:center;margin-top:8px;font-style:italic}

/* data / spec table inside articles */
.spec-table{width:100%;border-collapse:collapse;margin:20px 0 24px;font-size:14px;display:block;overflow-x:auto}
.spec-table th{background:#f8fafc;text-align:left;padding:11px 13px;font-weight:700;color:var(--primary);border-bottom:2px solid var(--border);white-space:nowrap}
.spec-table td{padding:10px 13px;border-bottom:1px solid #f0f2f4}
.spec-table tbody tr:hover td{background:#fafbfc}
.spec-table code{background:#f4f6f8;padding:2px 6px;border-radius:3px;font-family:'SF Mono',Monaco,Consolas,'Courier New',monospace;font-size:13px;color:var(--accent)}

/* callout boxes */
.callout{border-left:4px solid var(--primary);background:#f4f8fb;padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin:22px 0}
.callout p{margin-bottom:10px;font-size:14.5px}
.callout p:last-child{margin-bottom:0}
.callout .callout-title{font-weight:700;color:var(--primary);font-size:15px;margin-bottom:8px}
.callout-warn{border-left-color:var(--accent);background:#fdf1f0}
.callout-warn .callout-title{color:var(--accent)}
.callout-tip{border-left-color:var(--green);background:#f0faf4}
.callout-tip .callout-title{color:var(--green)}

/* FAQ */
.faq{margin-top:14px}
.faq details{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;background:#fff}
.faq summary{padding:15px 20px;font-weight:600;cursor:pointer;color:var(--primary);font-size:15.5px;list-style:none;position:relative;padding-right:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent-light);font-weight:400;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq .faq-body{padding:16px 20px 18px;font-size:14.5px;line-height:1.7}
.faq .faq-body p:last-child{margin-bottom:0}

/* TOC */
.article-toc{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.article-toc.sticky{position:sticky;top:82px}
.article-toc h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--primary);margin-bottom:12px}
.article-toc ol{list-style:none;counter-reset:toc}
.article-toc li{counter-increment:toc;margin-bottom:9px;font-size:13.5px;line-height:1.45}
.article-toc li::before{content:counter(toc) '.';color:var(--accent);font-weight:700;margin-right:7px}
.article-toc a{color:var(--text)}

.article-meta-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px;color:var(--text-light);margin-bottom:22px}

/* CTA within article */
.article-cta{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
  border-radius:var(--radius);padding:30px 32px;margin:34px 0 10px;text-align:center;
}
.article-cta h3{color:#fff;font-size:21px;margin:0 0 10px}
.article-cta p{color:rgba(255,255,255,.82);font-size:15px;margin-bottom:20px;max-width:560px;margin-left:auto;margin-right:auto}

/* Roadmap (planned content, non-linked so no 404s) */
.roadmap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 30px;margin-top:40px}
.roadmap h3{font-size:19px;color:var(--primary);margin-bottom:8px}
.roadmap > p{font-size:14px;color:var(--text-light);margin-bottom:20px}
.rm-month{margin-bottom:22px}
.rm-month h4{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--accent);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.rm-month ul{list-style:none;margin:0}
.rm-month li{font-size:14px;padding:6px 0 6px 22px;position:relative;line-height:1.55;border-bottom:1px solid #f7f9fa}
.rm-month li:last-child{border-bottom:none}
.rm-month li::before{content:'○';position:absolute;left:2px;top:6px;color:var(--text-light);font-size:12px}
.rm-month li .rm-kw{color:var(--text-light);font-size:12.5px;display:block}

/* ===== CTA / contact ===== */
.cta-section{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;text-align:center;padding:60px 0}
.cta-section h2{font-size:28px;margin-bottom:12px}
.cta-section p{font-size:16px;color:rgba(255,255,255,.75);max-width:640px;margin:0 auto 28px}
.cta-input-group{display:flex;max-width:520px;margin:0 auto 16px;gap:8px}
.cta-input-group input{flex:1;padding:14px 18px;border-radius:var(--radius);border:none;font-size:15px;outline:none}
.cta-input-group button{padding:14px 28px;background:var(--accent-light);color:#fff;border:none;border-radius:var(--radius);font-weight:600;font-size:15px;cursor:pointer;transition:.2s}
.cta-input-group button:hover{background:var(--accent)}

/* ===== Footer ===== */
footer{background:#0d1520;color:rgba(255,255,255,.5);padding:40px 0 20px;font-size:13px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px}
.footer-col h5{color:#fff;font-size:14px;margin-bottom:12px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:6px}
.footer-col a{color:rgba(255,255,255,.5);transition:.2s}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;text-align:center;font-size:12px;line-height:1.7}

/* ===== OG banner (editorial hero image) ===== */
.og-banner{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.og-banner-wrap{
  margin:0 auto 8px;max-width:1200px;
}
.og-banner-frame{
  background:#0a1420;
  padding:0;overflow:hidden;
  border-radius:var(--radius);
}

/* ===== Responsive ===== */
@media(max-width:900px){
  .article-wrap{grid-template-columns:1fr;gap:28px}
  .article-toc.sticky{position:static}
  .post-featured{grid-template-columns:1fr}
  .post-featured .post-thumb{min-height:160px;height:160px}
  .post-featured .post-body{padding:24px}
}
@media(max-width:768px){
  .og-banner{border-radius:6px}
  .og-banner-wrap{margin-bottom:4px}
  .hero h1{font-size:24px}
  .hero-stats{gap:24px}
  .cat-grid{grid-template-columns:1fr}
  .nav-inner{padding:0 12px}
  .cta-input-group{flex-direction:column}
  section{padding:35px 0}
  .article{padding:24px 20px}
  .article h1{font-size:24px}
  .article h2{font-size:20px}
  .article-toc{padding:16px 18px}
}
@media print{
  nav,.cta-section,.article-toc,header .top-bar,.breadcrumb{display:none}
  .article{border:none;padding:0}
  body{background:#fff}
}