:root{--navy:#10224E;--navy-d:#0B1836;--navy-l:#1C3D8F;--orange:#F07E1B;--orange-d:#D96C0E;
--ink:#1D2939;--muted:#667085;--bg:#fff;--soft:#F5F7FB;--line:#E4E7EC;--tile:#EDF1F8}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,'Segoe UI',Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}
img{max-width:100%}
/* ---------- utility bar ---------- */
.util{background:var(--navy-d);color:#B8C2D9;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.util a{color:#fff;font-weight:600}
.util .left span{margin-right:22px}
/* ---------- header ---------- */
.hdr{background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:32px;height:92px}
.logo svg{height:44px;display:block}
.search{flex:1;display:flex;max-width:560px}
.search input{flex:1;border:2px solid var(--navy);border-right:none;border-radius:8px 0 0 8px;padding:12px 16px;font-size:15px;outline:none}
.search button{background:var(--orange);border:none;color:#fff;font-weight:700;padding:0 26px;border-radius:0 8px 8px 0;font-size:15px;cursor:pointer}
.search button:hover{background:var(--orange-d)}
.hdr-right{display:flex;align-items:center;gap:26px;margin-left:auto}
.hdr-contact{font-size:13px;color:var(--muted);text-align:right;line-height:1.45}
.hdr-contact b{display:block;color:var(--navy);font-size:15px}
.btn{display:inline-block;background:var(--navy);color:#fff;font-weight:700;padding:12px 24px;border-radius:8px;font-size:15px;border:none;cursor:pointer}
.btn:hover{background:var(--navy-l)}
.btn.alt{background:var(--orange)}.btn.alt:hover{background:var(--orange-d)}
/* ---------- cat nav ---------- */
.catnav{background:var(--navy);position:relative;z-index:40}
.catnav .wrap{display:flex;align-items:stretch;padding:0 24px;overflow-x:auto;scrollbar-width:none}
.catnav a{color:#DCE3F1;font-size:14px;font-weight:600;padding:15px 13px;white-space:nowrap}
.catnav a:hover{background:var(--navy-l);color:#fff}
.catnav a.all{background:var(--orange);color:#fff;font-weight:700}
/* ---------- hero slider ---------- */
.hero{position:relative;overflow:hidden}
.slides{display:flex;transition:transform .5s ease}
.slide{min-width:100%;padding:84px 0 96px;color:#fff}
.s1{background:linear-gradient(120deg,#0B1836 0%,#10224E 50%,#1C3D8F 100%)}
.s2{background:linear-gradient(120deg,#7C3A02 0%,#C25E08 55%,#F07E1B 100%)}
.s3{background:linear-gradient(120deg,#0E3B38 0%,#11625C 55%,#159E95 100%)}
.slide .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.slide .kicker{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:5px 16px;font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:18px}
.slide h1{font-size:46px;line-height:1.12;margin-bottom:16px}
.slide h1 span{color:#FFC896}
.s2 h1 span,.s3 h1 span{color:#0B1836}
.slide p{font-size:18px;opacity:.92;margin-bottom:28px;max-width:520px}
.slide .icons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.slide .ic-tile{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:14px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:600}
.hero .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer;z-index:5}
.hero .arrow:hover{background:rgba(255,255,255,.32)}
.hero .prev{left:22px}.hero .next{right:22px}
.hero .dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:5}
.hero .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.hero .dot.on{background:#fff}
/* ---------- service strip ---------- */
.services{background:#fff;border-bottom:1px solid var(--line)}
.services .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.svc{padding:26px 14px;text-align:center;border-left:1px solid var(--line)}
.svc:first-child{border-left:none}
.svc .i{font-size:26px;margin-bottom:8px}
.svc b{display:block;font-size:14px;color:var(--navy)}
.svc span{font-size:12.5px;color:var(--muted)}
/* ---------- sections ---------- */
section{padding:72px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:34px}
.sec-head h2{font-size:30px;color:var(--navy)}
.sec-head p{color:var(--muted);margin-top:4px}
.sec-head .more{color:var(--orange);font-weight:700;font-size:15px;white-space:nowrap}
/* category grid */
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.catg{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 12px 18px;text-align:center;transition:.15s}
.catg:hover{border-color:var(--orange);box-shadow:0 8px 22px rgba(16,34,78,.10);transform:translateY(-3px)}
.catg .ph{background:var(--tile);border-radius:10px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.catg svg{width:58%;height:58%}
.catg b{font-size:14px;color:var(--navy)}
/* product cards */
.prodrow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.15s}
.pcard:hover{box-shadow:0 8px 22px rgba(16,34,78,.12);transform:translateY(-3px)}
.pcard .ph{background:var(--tile);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative}
.pcard .ph svg{width:56%;height:56%}
.pcard .tag{position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;border-radius:5px;padding:3px 8px}
.pcard .tag.new{background:var(--navy-l)}
.pcard .bd{padding:14px 16px 16px}
.pcard h3{font-size:14.5px;font-weight:600;margin-bottom:3px}
.pcard .sku{font-size:12px;color:var(--muted);margin-bottom:8px}
.pcard .moq{font-size:13px;font-weight:700;color:var(--navy)}
.pcard .moq em{font-style:normal;color:var(--orange)}
/* banners */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.banner{border-radius:16px;padding:44px 42px;color:#fff;position:relative;overflow:hidden;min-height:210px;display:flex;flex-direction:column;justify-content:center}
.banner.b1{background:linear-gradient(115deg,#0B1836,#1C3D8F)}
.banner.b2{background:linear-gradient(115deg,#8A4503,#F07E1B)}
.banner h3{font-size:26px;margin-bottom:8px}
.banner p{opacity:.92;margin-bottom:18px;max-width:380px}
.banner .btn{align-self:flex-start}
.banner .big-ic{position:absolute;right:-16px;bottom:-24px;font-size:150px;opacity:.16;transform:rotate(-12deg)}
/* stats */
.stats{background:var(--navy);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.stat b{display:block;font-size:34px;color:#FFC896}
.stat span{font-size:14px;opacity:.85}
/* quote cta */
.cta-band{background:var(--soft);border-top:1px solid var(--line)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-band h2{font-size:26px;color:var(--navy)}
.cta-band p{color:var(--muted)}
/* footer */
footer{background:#0C1424;color:#98A2B3;font-size:14px;padding:60px 0 26px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:34px;margin-bottom:40px}
footer h4{color:#fff;font-size:15px;margin-bottom:14px}
footer a{display:block;padding:4px 0}
footer a:hover{color:#fff}
.flogo svg{height:32px;margin-bottom:14px}
.badges{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.badge{border:1px solid #2A3548;border-radius:7px;padding:5px 11px;font-size:12px;color:#B8C2D9}
.copy{border-top:1px solid #1D2939;padding-top:20px;text-align:center;font-size:13px}
@media(max-width:1000px){
.slide .wrap{grid-template-columns:1fr}
.slide .icons{display:none}
.services .wrap{grid-template-columns:repeat(3,1fr)}
.catgrid{grid-template-columns:repeat(3,1fr)}
.prodrow{grid-template-columns:repeat(2,1fr)}
.banners{grid-template-columns:1fr}
.stats .wrap{grid-template-columns:repeat(2,1fr)}
.fgrid{grid-template-columns:1fr 1fr}
.catnav .wrap{overflow-x:auto}
.hdr .wrap{flex-wrap:wrap;height:auto;padding:14px 24px}
.search{order:3;max-width:none;width:100%}
}

/* v2 additions */
.catnav a.chosen{background:var(--navy-l);color:#fff}
.search{position:relative}
.sr{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:0 0 10px 10px;box-shadow:0 12px 28px rgba(16,34,78,.16);z-index:60;max-height:380px;overflow:auto;display:none}
.sr a{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:14px;border-top:1px solid var(--soft)}
.sr a:hover{background:var(--soft)}
.sr .s-sku{color:var(--muted);font-size:12.5px;white-space:nowrap}
.pcard .ph{flex-direction:column;gap:6px}
.pcard .ph .soon{font-size:11px;color:#8A94A6;letter-spacing:.4px}
.crumbs{font-size:13.5px;color:var(--muted);padding:18px 0}
.crumbs a{color:var(--navy);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.chip{border:1.5px solid var(--line);border-radius:99px;padding:6px 15px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;background:#fff}
.chip.on,.chip:hover{border-color:var(--orange);color:var(--orange-d)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
/* product detail */
.pd{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.pd-img{background:var(--tile);border:1px solid var(--line);border-radius:16px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pd-img svg{width:38%;height:38%}
.pd-img .soon{font-size:13px;color:#8A94A6}
.pd h1{font-size:28px;color:var(--navy);line-height:1.25;margin-bottom:8px}
.pd .sku{color:var(--muted);font-size:14px;margin-bottom:14px}
.pd .summary{font-size:15.5px;color:#344054;margin-bottom:20px}
.spec{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 22px}
.spec td{border:1px solid var(--line);padding:9px 13px;vertical-align:top}
.spec td:first-child{background:var(--soft);font-weight:700;color:var(--navy);width:34%;white-space:nowrap}
.price-t{width:100%;border-collapse:collapse;font-size:14px;text-align:center;margin:6px 0 8px}
.price-t th{background:var(--navy);color:#fff;padding:9px 8px;font-weight:700}
.price-t td{border:1px solid var(--line);padding:9px 8px}
.price-t tr td:first-child{font-weight:700;color:var(--navy)}
.pnote{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.pd .cta{display:flex;gap:12px;margin-top:6px}
.desc-sec{max-width:100%;margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.desc-sec h2{font-size:21px;color:var(--navy);margin-bottom:12px}
.desc-sec p{color:#344054;max-width:900px}
@media(max-width:1000px){.pd{grid-template-columns:1fr}}

.prose{max-width:860px;margin:0 auto;padding:50px 24px}
.prose h2{color:var(--navy);font-size:24px;margin:34px 0 12px}
.prose p,.prose li{color:#344054;margin-bottom:12px}
.prose ul{padding-left:22px}
.prose .updated{color:var(--muted);font-size:14px;margin-bottom:8px}
.prose a{color:var(--navy);text-decoration:underline}
.page-hero h1{color:#fff}