@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2")}

:root{
  --brand:#446084;
  --brand-2:#2f4766;
  --brand-3:#5a7aa0;
  --brand-soft:#e8eef5;
  --accent:#e2b00b;
  --accent-2:#f0c53a;
  --accent-ink:#3a2e05;
  --ink:#243040;
  --ink-2:#334155;
  --muted:#5b6b7c;
  --muted-2:#8a97a6;
  --line:#dde3ea;
  --line-2:#c9d3de;
  --bg:#f5f7fa;
  --bg-2:#eef2f6;
  --paper:#ffffff;
  --ok:#1f7a4d;
  --shadow:0 8px 24px rgba(36,48,64,.08);
  --shadow-lg:0 16px 40px rgba(36,48,64,.14);
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --header-h:72px;
  --topbar-h:34px;
  --container:1200px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lh:1.62;
  --ease:cubic-bezier(.22,1,.36,1);
  --focus:#2b6cb0;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:var(--lh);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  width:100%;
  max-width:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2)}
button,input{font-family:inherit}
h1,h2,h3,h4{font-weight:650;line-height:1.22;color:var(--ink);margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(1.7rem,3vw,2.35rem)}
h2{font-size:clamp(1.35rem,2.2vw,1.75rem)}
h3{font-size:1.08rem}
p{margin:0 0 1em;color:var(--ink-2)}
.lead{font-size:1.05rem;color:var(--muted)}
.container{
  width:100%;
  max-width:var(--container);
  padding-inline:24px;
  margin-inline:auto;
  box-sizing:border-box;
}
.skip{position:absolute;left:12px;top:-48px;z-index:80}
.skip:focus{top:12px;background:#fff;padding:8px 12px}

.topbar{
  background:var(--brand-2);
  color:#d7e2ec;
  font-size:12px;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.topbar a{color:#e8eef4}
.topbar-cats{
  display:flex;gap:16px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;font-size:11px;
}
.topbar-contact{display:flex;gap:14px;white-space:nowrap;min-width:0}

.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  height:var(--header-h);
}
.header-inner{
  display:flex;align-items:center;gap:20px;
  height:var(--header-h);
  position:relative;
}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;height:100%}
.nav-link{
  display:flex;align-items:center;height:40px;padding:0 12px;
  color:var(--ink);font-weight:600;font-size:14px;border-radius:8px;
}
.nav-link:hover,.nav-item.is-open>.nav-link{background:var(--brand-soft);color:var(--brand)}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-item[data-mega]{position:static}
.nav-item::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;font-weight:650;cursor:pointer;
  padding:10px 18px;font-size:14px;
  transition:transform .2s var(--ease),background .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{background:var(--accent-2);color:var(--accent-ink)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-2);color:#fff}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-outline{background:#fff;color:var(--brand);border:1px solid var(--line-2)}
.header-cta{margin-left:8px;flex:0 0 auto}
.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--line);
  background:#fff;border-radius:10px;margin-left:auto;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  display:block;width:18px;height:2px;background:var(--ink);position:relative;margin:0 auto;
}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

.mega{
  display:none;
  position:absolute;
  top:calc(100% - 1px);
  left:24px;right:24px;
  width:auto;max-width:none;transform:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:20px;
  z-index:60;max-height:min(70vh,560px);overflow:auto;
}
.nav-item.is-open>.mega,.nav-item:hover>.mega{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.mega-col h4{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:8px 0 8px;
}
.mega-col img{
  width:100%;height:72px;object-fit:contain;background:var(--bg);
  border-radius:8px;margin-bottom:8px;
}
.mega-item{display:block;padding:4px 0;color:var(--ink);font-size:13px;font-weight:550}
.mega-item:hover{color:var(--brand)}
.mega-foot{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:13px;
}
.nav-drawer{display:none}

.hero{
  position:relative;
  height:min(42vw,420px);
  min-height:280px;
  background:var(--brand-2);
  color:#fff;
  overflow:hidden;
}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.hero-slide.is-active{opacity:1;z-index:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-mask{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,32,48,.55) 6%,rgba(20,32,48,.18) 55%,rgba(20,32,48,.08) 100%);
}
.hero-copy{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:40px max(24px,calc((100% - var(--container))/2 + 24px));
  pointer-events:none;
}
.hero-copy>*{max-width:560px;pointer-events:auto}
.hero h1{color:#fff;margin-bottom:10px}
.hero p{color:#e4ebf2;font-size:1rem;max-width:520px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-nav{
  position:absolute;z-index:3;bottom:18px;
  right:max(24px,calc((100% - var(--container))/2 + 24px));
  display:flex;gap:8px;
}
.hero-dot{
  width:28px;height:4px;border:0;border-radius:4px;
  background:rgba(255,255,255,.35);cursor:pointer;padding:0;
}
.hero-dot.is-active{background:var(--accent)}
.kicker{
  letter-spacing:.08em;text-transform:uppercase;font-size:12px;
  color:var(--accent-2);font-weight:700;margin-bottom:8px;
}

.section{padding:56px 0}
.section-muted{background:var(--bg)}
.section-head{margin-bottom:28px}
.section-head p{max-width:640px}
.grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

.cat-card,.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;color:inherit;display:block;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.cat-card:hover,.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}
.cat-card img,.card-media img{
  width:100%;height:140px;object-fit:contain;background:var(--bg);
}
.card-media img{height:180px}
.cat-card span,.card-body{display:block;padding:12px 14px 14px}
.cat-card strong,.card-body h3{display:block;font-size:14px;color:var(--ink)}
.card-body p{margin:6px 0 0;font-size:13px;color:var(--muted)}

.page-hero{background:var(--brand-2);color:#fff;padding:36px 0 32px}
.page-hero h1{color:#fff;margin:0 0 8px}
.page-hero p{color:#d5dee7;margin:0;max-width:640px}
.crumbs{font-size:13px;color:var(--muted);margin:0 0 16px}
.crumbs a{color:var(--muted)}

.product-hero{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
  padding:36px 0 20px;
}
.gallery{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;align-items:center;justify-content:center;min-height:360px;
}
.gallery img{max-height:420px;width:auto;max-width:100%;object-fit:contain}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img{
  width:72px;height:72px;object-fit:contain;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;
}
.buy h1{margin-bottom:10px}
.buy .lead{margin-bottom:16px}
.feature-list{margin:0 0 18px;padding:0;list-style:none}
.feature-list li{position:relative;padding:6px 0 6px 18px;color:var(--ink-2);font-size:15px}
.feature-list li::before{
  content:"";position:absolute;left:0;top:14px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);
}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}

.table-wrap{
  overflow-x:auto;max-width:100%;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
table.specs{width:100%;border-collapse:collapse;font-size:14px}
table.specs th,table.specs td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
table.specs th{width:34%;color:var(--muted);font-weight:600;background:var(--bg)}
table.specs tr:last-child th,table.specs tr:last-child td{border-bottom:0}

.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 18px}
.faq-item h3{margin:0 0 6px;font-size:16px}
.faq-item p{margin:0;color:var(--muted)}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}
.note{color:var(--muted);font-size:14px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.contact-card h3{margin:0 0 8px}
.contact-card a{display:block;font-weight:600}

.site-footer{background:#4d5560;color:#d7dde4;padding:48px 0 0;margin-top:24px}
.site-footer a{color:#e8edf2}
.site-footer a:hover{color:#fff}
.site-footer h3{color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px;padding-bottom:32px}
.foot-brand p{color:#c5ccd4;font-size:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 8px;font-size:14px}
.foot-note{
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 24px 18px;font-size:13px;color:#b7c0c9;
}

.float-contact{
  position:fixed;right:16px;bottom:20px;z-index:40;
  display:flex;flex-direction:column;gap:10px;
}
.float-btn{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);color:#fff;
}
.float-btn svg{width:22px;height:22px;fill:currentColor}
.float-tel{background:var(--brand)}
.float-mail{background:var(--brand-2)}
.float-btn:hover{color:#fff;filter:brightness(1.08)}

.badge{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700}
ul.plain{margin:0;padding:0 0 0 18px;color:var(--ink-2)}
.related{margin-top:8px}

@media (max-width:1200px){
  .grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .header-cta{display:none}
  .topbar-cats{display:none}
  .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:1024px){
  .nav{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-drawer{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);
    padding:12px 24px 20px;max-height:70vh;overflow:auto;
  }
  .nav-drawer.is-open{display:block}
  .nav-drawer a,.nav-drawer button{
    display:block;width:100%;text-align:left;background:none;border:0;
    padding:10px 0;font-weight:600;color:var(--ink);font-size:15px;
  }
  .acc-panel{padding:0 0 8px 12px}
  .acc-panel a{font-weight:500;color:var(--muted)}
  .product-hero,.split,.grid-2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero{height:280px}
}
@media (max-width:900px){
  .grid-4,.grid-3,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .topbar{display:none}
  :root{--header-h:64px}
  .hero{min-height:220px;height:220px}
  .hero-copy h1{font-size:1.35rem}
  .section{padding:40px 0}
  .grid-4,.grid-3,.grid-6{grid-template-columns:1fr 1fr}
  .float-contact{bottom:72px}
}
@media (max-width:480px){
  .grid-4,.grid-3,.grid-6{grid-template-columns:1fr}
  .container{padding-inline:16px}
}
@media (min-width:1440px){
  :root{--container:1240px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
body.nav-lock{overflow:hidden}

/* extra layout polish */
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat b{display:block;font-size:22px;color:var(--brand);margin-bottom:4px}
.stat span{color:var(--muted);font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;color:var(--ink-2)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.page-hero .container{position:relative}
.page-hero .kicker{color:var(--accent-2)}
.gallery-frame{width:100%}
.buy .meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.buy .meta a{color:var(--brand)}
.section h2{margin-bottom:8px}
.cta-band{background:var(--brand);color:#fff;padding:40px 0;margin-top:8px}
.cta-band h2,.cta-band p{color:#fff}
.cta-band p{color:#d7e2ec;max-width:560px}
.list-check{list-style:none;margin:0;padding:0}
.list-check li{padding:8px 0 8px 22px;position:relative;color:var(--ink-2)}
.list-check li::before{content:"•";position:absolute;left:6px;color:var(--accent);font-weight:700}
.download-list a{display:flex;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0 0 10px;color:var(--ink)}
.download-list a:hover{background:var(--bg)}
.knowledge-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff}
.knowledge-card h3{margin-bottom:8px}
.notfound{padding:80px 0;text-align:center}
.notfound h1{font-size:3rem}
.site-header.is-stuck{box-shadow:0 6px 18px rgba(36,48,64,.06)}
.mega-col a.mega-all{font-weight:700;color:var(--brand)}
.hero-slide[hidden]{display:none}
img[alt=""]{outline:none}
table.specs td:first-child{white-space:nowrap}
@media (max-width:640px){
  .stat-row{grid-template-columns:1fr 1fr}
  .cta-row .btn{width:100%}
}
@media (min-width:1600px){
  :root{--container:1280px}
}
@media (max-width:1280px){
  .mega{left:16px;right:16px}
}
@media (max-width:1440px){
  .mega-grid{gap:10px}
}
@media print{
  .float-contact,.nav-toggle,.hero-nav{display:none}
}

/* alignment + density helpers */
.section-tight{padding:36px 0}
.section-loose{padding:72px 0}
.center{text-align:center}
.muted{color:var(--muted)}
.ink{color:var(--ink)}
.small{font-size:13px}
.wide{max-width:none}
.narrow{max-width:720px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grow{flex:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.shadow-none{box-shadow:none}
.card-body h3{min-height:2.4em}
.page-hero + .section{padding-top:40px}
.product-hero + .section{padding-top:28px}
.mega-col img{border:1px solid var(--line)}
.topbar-contact a + a{margin-left:0}
.logo img{max-width:240px}
main{overflow-x:clip;max-width:100%}
.site-footer img{height:34px;width:auto;margin-bottom:12px;filter:brightness(10)}
@media (max-width:1360px){
  .hero-copy{padding-left:32px;padding-right:32px}
}
@media (max-width:1180px){
  .grid-4{gap:14px}
}
@media (max-width:980px){
  .header-inner{gap:12px}
}
@media (max-width:860px){
  .page-hero{padding:28px 0}
}
@media (max-width:600px){
  .hero-actions{flex-direction:column;align-items:flex-start}
}
@media (min-width:1100px) and (max-width:1300px){
  .nav-link{padding:0 10px}
}
@media (hover:none){
  .card:hover{transform:none}
}
/* layout tokens reserved for density alignment: grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid grid  */

/* density + token reserve xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */