/* main.css — loaded async via <link rel="preload" + onload swap>.
   Everything below the fold + interactive states. */

:root {
    --c-bg:#fff;
    --c-fg:#333;
    --c-muted:#666;
    --c-primary:#2FC5FF;
    --c-primary-dark:#142850;
    --c-primary-light:#e5f6fe;
    --c-primary-hover:#1fb3ee;
    --c-border:#e5e7eb;
    --c-card:#fafbfc;
    --c-accent:#2FC5FF;
    --radius:4px;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:0 4px 12px rgba(0,0,0,0.10);
    --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;--space-6:80px;
}

input,textarea,select,button{font:inherit;color:inherit}

.section{padding:var(--space-6) 0}
.section-alt{background:#f6f8fa}
.section-title{font-size:32px;font-weight:700;margin-bottom:var(--space-4);text-align:center;color:var(--c-primary-dark)}
@media (max-width:700px){.section{padding:var(--space-5) 0}.section-title{font-size:24px}}

.grid{display:grid;gap:var(--space-3)}
.grid-cards-2{grid-template-columns:repeat(2,1fr)}
.grid-cards-3{grid-template-columns:repeat(3,1fr)}
.grid-cards-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid-cards-3,.grid-cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-cards-2,.grid-cards-3,.grid-cards-4{grid-template-columns:1fr}}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
@media (max-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.product-grid{grid-template-columns:1fr}}

.product-card{display:block;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,transform .2s;color:var(--c-fg)}
.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);color:var(--c-fg)}
.product-card-img{aspect-ratio:1/1;background:#f6f8fa;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-card-img img{max-width:90%;max-height:90%;object-fit:contain}
.product-card-body{padding:var(--space-2)}
.product-card-title{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:6px;color:var(--c-primary-dark)}
.product-card-model{display:inline-block;font-size:12px;color:var(--c-muted);background:var(--c-primary-light);padding:2px 8px;border-radius:3px;margin-bottom:8px}
.product-card-desc{font-size:13px;color:var(--c-muted);line-height:1.5;margin-bottom:8px;min-height:40px}
.product-card-link{font-size:13px;color:var(--c-primary);font-weight:600}

.category-card{display:block;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--space-3);transition:all .2s;color:var(--c-fg)}
.category-card:hover{border-color:var(--c-primary);box-shadow:var(--shadow-md);color:var(--c-fg)}
.category-card-title{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--c-primary-dark)}
.category-card-desc{font-size:14px;color:var(--c-muted);line-height:1.5;margin-bottom:12px}
.category-card-count{display:inline-block;font-size:12px;color:var(--c-muted);background:var(--c-primary-light);padding:3px 10px;border-radius:3px;margin-bottom:12px}
.category-card-link{font-size:13px;color:var(--c-primary);font-weight:600}

.industry-card{display:block;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--space-3);color:var(--c-fg)}
.industry-card:hover{border-color:var(--c-primary);box-shadow:var(--shadow-sm);color:var(--c-fg)}
.industry-card h3{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--c-primary-dark)}
.industry-card p{font-size:13px;color:var(--c-muted);line-height:1.5}

.page-header{background:var(--c-primary-light);padding:var(--space-5) 0 var(--space-4)}
.page-header-compact{padding:var(--space-3) 0}
.page-header h1{font-size:36px;font-weight:700;color:var(--c-primary-dark);margin-bottom:var(--space-1)}
.page-header-sub{font-size:17px;color:var(--c-muted);max-width:780px;line-height:1.55}
@media (max-width:700px){.page-header h1{font-size:26px}.page-header-sub{font-size:15px}}

.breadcrumb{font-size:13px;color:var(--c-muted);margin-bottom:var(--space-2)}
.breadcrumb a{color:var(--c-muted)}
.breadcrumb a:hover{color:var(--c-primary)}
.breadcrumb-sep{margin:0 6px;opacity:0.6}

.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-4)}
.filter-btn{padding:8px 16px;border:1px solid var(--c-border);border-radius:20px;font-size:13px;color:var(--c-muted);cursor:pointer;background:#fff;transition:all .15s;text-decoration:none}
.filter-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.filter-btn.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:start}
@media (max-width:900px){.product-detail-grid{grid-template-columns:1fr}}
.product-gallery{position:sticky;top:88px}
.product-main-image{aspect-ratio:1/1;background:#f6f8fa;border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2)}
.product-main-image img{max-width:90%;max-height:90%;object-fit:contain}
.product-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.product-thumb{width:64px;height:64px;background:#f6f8fa;border:2px solid transparent;border-radius:var(--radius);padding:0;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-thumb.active{border-color:var(--c-primary)}
.product-thumb img{max-width:80%;max-height:80%;object-fit:contain}
.product-info h1{font-size:32px;font-weight:700;line-height:1.2;color:var(--c-primary-dark);margin-bottom:var(--space-2)}
.product-model,.product-size{margin-bottom:8px}
.product-model .muted,.product-size .muted{color:var(--c-muted);font-size:14px}
.product-description{margin:var(--space-3) 0;line-height:1.7}
.features-list{margin:var(--space-2) 0 var(--space-3) var(--space-2)}
.features-list li{position:relative;padding-left:var(--space-2);margin-bottom:6px;font-size:15px}
.features-list li::before{content:'✓';position:absolute;left:0;color:var(--c-primary);font-weight:700}
.product-features h2,.product-specs h2{font-size:20px;margin-bottom:var(--space-2);color:var(--c-primary-dark)}
.product-cta{margin-top:var(--space-4)}
.specs-table{width:100%;border-collapse:collapse}
.specs-table th,.specs-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--c-border);font-size:14px}
.specs-table th{background:#f6f8fa;font-weight:600;color:var(--c-primary-dark);width:40%}

.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--c-border);padding:var(--space-2) 0}
.faq-item summary{cursor:pointer;list-style:none;padding:8px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font-size:17px;font-weight:600;color:var(--c-primary-dark);position:relative;padding-right:32px;display:inline}
.faq-item summary::after{content:'+';position:absolute;right:0;top:8px;font-size:24px;color:var(--c-muted);transition:transform .2s}
.faq-item[open] summary::after{content:'−'}
.faq-item summary{position:relative}
.faq-a{padding:8px 0 0 0;line-height:1.7;color:var(--c-fg)}
.faq-section{margin-bottom:var(--space-5)}
.faq-section h2{font-size:24px;color:var(--c-primary-dark);margin-bottom:var(--space-2);display:flex;align-items:baseline;gap:var(--space-2)}
.faq-cat-link{font-size:13px;font-weight:500;color:var(--c-primary)}

.contact-grid{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-5)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-info-list li{margin-bottom:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--c-border)}
.contact-info-list li strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted);margin-bottom:4px}
.contact-info-list li a,.contact-info-list li span{font-size:15px;color:var(--c-fg)}

.contact-form{display:flex;flex-direction:column;gap:var(--space-2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field span{font-size:13px;font-weight:600;color:var(--c-fg)}
.form-field input,.form-field textarea,.form-field select{padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--radius);font-size:15px;background:#fff;transition:border-color .15s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--c-primary)}
.form-status{margin-top:var(--space-2);padding:var(--space-2);border-radius:var(--radius);font-size:14px}
.form-status-ok{background:#d4edda;color:#155724}
.form-status-err{background:#f8d7da;color:#721c24}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:var(--space-4) 0}
@media (max-width:600px){.stats-grid{grid-template-columns:1fr 1fr}}
.stat{text-align:center;padding:var(--space-2);background:#fff;border-radius:var(--radius);border:1px solid var(--c-border)}
.stat-num{display:block;font-size:36px;font-weight:700;color:var(--c-primary)}
.stat-label{display:block;font-size:13px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}

.advantage-card{padding:var(--space-3);background:#fff;border:1px solid var(--c-border);border-radius:var(--radius)}
.advantage-card h3{font-size:18px;color:var(--c-primary-dark);margin-bottom:8px}
.advantage-card p{color:var(--c-muted);line-height:1.6}

.lead{font-size:18px;line-height:1.6;color:var(--c-fg);max-width:800px;margin-bottom:var(--space-2)}
.muted{color:var(--c-muted)}
.empty{padding:var(--space-5);text-align:center;color:var(--c-muted);font-style:italic}

.category-keywords{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2)}
.keyword-pill{display:inline-block;padding:4px 10px;background:#fff;border:1px solid var(--c-border);border-radius:12px;font-size:12px;color:var(--c-muted)}

.footer{background:#0f2440;color:#cfd5dc;padding:var(--space-5) 0 var(--space-3);font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}
@media (max-width:768px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-2)}
.footer-logo{color:#fff;font-size:24px;margin-bottom:var(--space-2)}
.footer-col ul li{margin-bottom:8px}
.footer-col a{color:#cfd5dc}
.footer-col a:hover{color:#fff}
.footer-address{font-style:normal;color:#cfd5dc;line-height:1.7}
.footer-bottom{padding-top:var(--space-2);border-top:1px solid rgba(255,255,255,0.1);font-size:13px;color:#8893a0}