:root{--navy:#0f2744;--ink:#142033;--muted:#5b6b7c;--line:#e3e8ef;--bg:#f5f7fa;--wa:#25d366;--wa-d:#1da851;--white:#fff;--accent:#1a4d8c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.55}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.topbar{background:var(--navy);color:#dce6f2;font-size:13px}.topbar-inner{display:flex;justify-content:space-between;gap:12px;padding:8px 20px;flex-wrap:wrap}.wa-link{color:#9dffc0;font-weight:600}
.site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:40}
.header-main{display:flex;align-items:center;gap:18px;padding:14px 20px;flex-wrap:wrap}
.logo{display:flex;flex-direction:column;min-width:200px;color:var(--navy);text-decoration:none}.logo strong{font-size:18px}.logo span{font-size:12px;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:14px;flex:1}.nav a{color:var(--ink);font-weight:600;font-size:14px}.nav a.active{color:var(--accent)}
.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cat-bar{padding:8px 20px 12px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;padding:10px 14px;font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-wa{background:var(--wa);color:#083b1e}.btn-wa:hover{background:var(--wa-d);text-decoration:none}
.btn-outline{background:#fff;border-color:var(--navy);color:var(--navy)}.btn-outline:hover{background:var(--bg);text-decoration:none}
.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:#16345a;text-decoration:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-quote-list{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-weight:700;cursor:pointer}
.hero{background:linear-gradient(135deg,#0f2744 0%,#1a4d8c 100%);color:#fff;padding:42px 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 12px}
.hero .lead{font-size:17px;color:#d7e4f5;margin:0 0 18px}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;list-style:none}
.trust li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:10px;font-size:13px;font-weight:600}
.hero-media video,.hero-media img{width:100%;border-radius:12px;background:#000;max-height:420px;object-fit:cover}
.section{padding:48px 0}.section h2{font-size:28px;margin:0 0 8px;color:var(--navy)}.section .sub{color:var(--muted);margin:0 0 22px}
.cat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:8px;min-height:170px;text-decoration:none;color:inherit}
.cat-card h3{margin:0;font-size:18px}.cat-card p{margin:0;color:var(--muted);font-size:14px;flex:1}.cat-card .count{font-size:12px;font-weight:700;color:var(--accent)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.product-card .thumb{display:block;background:var(--bg)}.product-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.product-card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card h3{margin:0;font-size:15px;line-height:1.3}.sku{margin:0;color:var(--muted);font-size:12px;font-weight:600}
.specs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.specs li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}.specs span{color:var(--muted)}.specs strong{text-align:right}
.card-actions{display:flex;flex-direction:column;gap:6px;margin-top:auto}.card-actions .btn{width:100%}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg)}.step .n{font-weight:800;color:var(--accent);font-size:13px}.step h3{margin:6px 0;font-size:16px}.step p{margin:0;font-size:14px;color:var(--muted)}
.video-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.video-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#111}.video-card video{width:100%;display:block;max-height:280px;object-fit:cover}.video-card p{margin:0;padding:8px 10px;background:#fff;font-size:13px;font-weight:600}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:600}
.filters button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.filters input{flex:1;min-width:180px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}.form-grid input,.form-grid select,.form-grid textarea{padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit}.form-grid .full{grid-column:1/-1}
.faq details{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px}.faq summary{font-weight:700;cursor:pointer}.prose{max-width:820px}.prose h2{margin-top:28px}.prose h3{margin-top:18px}.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px}.breadcrumb a{color:var(--muted)}
.site-footer{background:var(--navy);color:#d5e0ee;padding:40px 0 20px;margin-top:40px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}.site-footer a{color:#9ec0ea}.site-footer h3{margin:0 0 8px;color:#fff;font-size:14px}.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin:6px 0}.tiny{font-size:12px;color:#9ab3c7}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:14px;font-size:12px;color:#9ab0c7}
.float-wa{position:fixed;right:18px;bottom:18px;z-index:50;background:var(--wa);color:#083b1e;font-weight:800;padding:12px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.18);text-decoration:none}
.quote-drawer{position:fixed;inset:0;background:rgba(10,20,35,.45);z-index:60;display:none;justify-content:flex-end}.quote-drawer.open{display:flex}.quote-panel{width:min(420px,100%);background:#fff;height:100%;overflow:auto;padding:18px;box-shadow:-8px 0 30px rgba(0,0,0,.2)}.quote-head{display:flex;justify-content:space-between;align-items:center}.quote-head button{border:0;background:transparent;font-size:28px;cursor:pointer}.hint{font-size:13px;color:var(--muted)}.quote-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.quote-item input{width:72px;padding:6px;border:1px solid var(--line);border-radius:6px}.quote-form{display:grid;gap:8px;margin:12px 0}.quote-form label{display:grid;gap:4px;font-size:13px;font-weight:600}.quote-form input,.quote-form select,.quote-form textarea{padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}.quote-actions{display:grid;gap:8px}
.banner-note{background:#eef5ff;border:1px solid #c9dbf5;border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:14px}
@media(max-width:980px){.hero-grid,.cat-cards,.product-grid,.steps,.video-row,.footer-grid{grid-template-columns:1fr 1fr}.trust{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hero-grid,.cat-cards,.product-grid,.steps,.video-row,.footer-grid,.form-grid{grid-template-columns:1fr}.nav{display:none}.header-main{padding-bottom:8px}}