:root{color-scheme:dark;--bg:#09090a;--panel:#141416;--line:#343438;--red:#f21e32;--white:#f7f7f8;--muted:#c4c4ca;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:700}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);line-height:1.45}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}.red{color:var(--red)}[hidden]{display:none!important}
.topbar{min-height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:12px clamp(18px,4vw,70px)}.brand{font-size:36px;font-weight:950;letter-spacing:-1.5px;white-space:nowrap;min-height:48px;display:inline-flex;align-items:center}.brand-four{color:var(--red)}.brand span:last-child{margin-left:7px}.header-link{margin-left:auto;min-height:48px;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900}.icon{background:none;color:inherit;border:0;font-size:28px;display:grid;place-items:center;padding:8px;min-width:48px;min-height:48px}.menu-button,.sidebar-close{display:none}
.hero{position:relative;min-height:0;background:radial-gradient(circle at 78% 50%,#272729,#121214 35%,#09090a 75%);display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:24px clamp(20px,5vw,80px);border-bottom:1px solid var(--line)}.hero-inner{position:relative;z-index:1;min-width:0}.eyebrow{font-size:18px;font-weight:900;letter-spacing:1.5px;margin:0 0 12px}.hero h1{font-size:clamp(42px,5vw,72px);line-height:.98;letter-spacing:-2px;margin:0;font-weight:950}.hero h1 em{color:var(--red);font-style:normal}.hero-sub{color:var(--muted);font-size:20px;margin:16px 0 0}.hero-art{position:absolute;right:8%;transform:rotate(-11deg);opacity:.45;pointer-events:none}.hero-art span{font-size:clamp(120px,18vw,240px);font-weight:1000;letter-spacing:-15px;line-height:1;text-shadow:10px 10px 0 #333}
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);max-width:1600px;margin:auto;min-height:600px}.sidebar{padding:30px 18px;border-right:1px solid var(--line);overscroll-behavior:contain}.sidebar h2{font-size:22px;letter-spacing:1px;margin:0 0 20px}.sidebar nav{display:grid;gap:12px}.category{width:100%;min-height:58px;text-align:left;border:1px solid #424249;background:linear-gradient(135deg,#242428,#171719);color:#fff;padding:15px 18px;font-size:20px;font-weight:900;border-radius:12px;box-shadow:0 4px 12px #0003;transition:background .15s,border-color .15s;overflow-wrap:anywhere}.category:hover{border-color:#f86d7b;background:#322027}.category.active{border-color:var(--red);background:linear-gradient(135deg,#f21e32,#bd1022);box-shadow:0 4px 18px #f21e3226}.sidebar-foot{color:var(--muted);font-size:18px;margin:30px 0 0;line-height:1.6}
.main{min-width:0;padding:30px clamp(18px,3vw,44px)}.catalog-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px}.catalog-head>div{min-width:0}.catalog-head .eyebrow{margin-bottom:10px}.catalog-head h1{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-1px;margin:0;font-weight:950;overflow-wrap:anywhere}.count{font-size:18px;color:var(--muted);white-space:nowrap}.toolbar{display:flex;margin:24px 0}.search{flex:1;min-width:0;border:1px solid #48484e;border-radius:12px;background:#17171a;display:flex;align-items:center;gap:10px;padding:0 16px;transition:box-shadow .15s,border-color .15s}.search span{font-size:30px;color:var(--muted)}.search input{background:none;border:0;outline:none;box-shadow:none;appearance:none;color:#fff;padding:17px 0;min-width:0;width:100%;font-size:18px;font-weight:700}.search input::placeholder{color:#b9b9c2;opacity:1}.search input:focus,.search input:focus-visible{outline:none;border:0;box-shadow:none}.search:focus-within{border-color:#d34b59;box-shadow:0 0 0 3px #f21e321c}
.chips{display:none;gap:10px;overflow-x:auto;scrollbar-width:thin;margin-bottom:22px;padding:4px 4px 10px;scroll-padding-inline:4px}.chip{flex:none;border:1px solid #45454a;background:#1c1c20;color:#e6e6eb;padding:12px 18px;min-height:50px;border-radius:10px;font-size:18px;font-weight:900}.chip.active{background:var(--red);border-color:var(--red);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-width:0}.card{min-width:0;background:#141416;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-align:left;padding:0;color:#fff;transition:border-color .15s}.card:hover{border-color:var(--red)}.card-art{aspect-ratio:1.15;display:grid;place-items:center;padding:14px;background:radial-gradient(circle,#252529,#101012);overflow:hidden;min-width:0;min-height:0}.card-art svg,.card-art img{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.card-bottom{border-top:1px solid #333338;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:100px}.card-bottom strong{font-size:18px;font-weight:900;background:#2b2b31;padding:5px 9px;border-radius:5px}.card-bottom span{font-size:18px;font-weight:800;color:#e0e0e5;white-space:normal;overflow-wrap:anywhere;line-height:1.4}.load-more{display:block;margin:28px auto 0;border:1px solid var(--red);border-radius:10px;background:#211217;color:#fff;padding:16px 28px;font-size:18px;font-weight:900;min-height:56px}.empty{padding:36px 12px;text-align:center;color:var(--muted);font-size:20px;overflow-wrap:anywhere}footer{font-size:18px;font-weight:800;color:var(--muted);margin-top:48px;padding:26px 0;border-top:1px solid var(--line);line-height:1.8}footer span{color:var(--red)}
.modal{position:fixed;inset:0;background:#000e;z-index:20;display:grid;place-items:center;padding:12px;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.modal-inner{background:#101012;border:1px solid #45454d;border-radius:12px;width:min(1000px,100%);height:min(820px,calc(100vh - 24px));height:min(820px,calc(100dvh - 24px));min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}.modal-top strong{font-size:22px;font-weight:900}.modal-art{width:100%;height:100%;min-width:0;min-height:0;padding:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}.modal-art img,.modal-art svg{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;flex:0 1 auto}.backdrop{display:none}
@media(max-width:1200px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:851px) and (max-width:1050px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.layout{grid-template-columns:minmax(0,1fr)}.menu-button,.sidebar-close{display:grid}.sidebar{position:fixed;inset:0 auto 0 0;width:min(340px,90vw);background:#101012;z-index:12;visibility:hidden;transform:translateX(-105%);transition:transform .2s;overflow-y:auto;padding-bottom:max(24px,env(safe-area-inset-bottom))}.sidebar.open{visibility:visible;transform:translateX(0)}.sidebar-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:20px}.sidebar h2{margin:0}.backdrop.open{display:block;position:fixed;inset:0;background:#000a;z-index:11}.chips{display:flex}.hero-art{right:0;opacity:.25}.topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}
@media(max-width:560px){.topbar{gap:10px;min-height:72px;padding-top:8px;padding-bottom:8px}.brand{font-size:32px}.header-link{display:none}.hero{padding:20px;min-height:0}.hero h1{font-size:clamp(40px,10vw,56px)}.hero-sub{font-size:18px;line-height:1.45;margin-top:12px}.hero-art span{font-size:160px}.eyebrow{letter-spacing:1px}.main{padding:24px 14px}.catalog-head{gap:12px}.catalog-head h1{font-size:28px}.toolbar{margin:20px 0}.search{padding:0 12px;gap:8px}.search input{font-size:18px;padding:16px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-art{padding:10px}.card-bottom{padding:12px 9px;min-height:112px}.load-more{width:100%}.modal-art{padding:10px}.modal-top{padding:6px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Centered desktop frame and category hierarchy. */
.topbar{padding:0;display:block}
.topbar-inner{width:100%;max-width:1600px;margin-inline:auto;min-height:80px;padding:12px clamp(12px,3vw,44px);display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center}
.topbar .brand{grid-column:2;grid-row:1;justify-self:center}
.topbar .menu-button{grid-column:1;grid-row:1}
.hero{padding:24px 0;justify-content:center}
.hero-inner{width:100%;max-width:1600px;margin-inline:auto;padding-inline:clamp(20px,3vw,44px);text-align:center}
.hero-art{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) rotate(-11deg);opacity:.13}
.sidebar-top{background:linear-gradient(135deg,#40141c,#211216);border:1px solid #79313c;border-radius:12px;padding:14px 12px;margin-bottom:18px}
.sidebar h2{font-size:28px;font-weight:950;letter-spacing:.5px;margin:0;color:#fff}
.category{font-size:18px}
@media(max-width:850px){.sidebar-top{margin-bottom:18px;padding:12px}.sidebar h2{font-size:24px;letter-spacing:0}.hero-art{right:auto;opacity:.1}}
@media(max-width:560px){.topbar-inner{min-height:72px;padding:8px 12px}.topbar .brand{font-size:clamp(28px,8.2vw,32px)}.hero{padding:20px 0}}

@media(max-width:360px){.sidebar h2{font-size:22px}}

/* Category navigation styled after the supplied reference. */
.sidebar-top{background:none;border:0;border-radius:0;padding:0 18px 20px;margin-bottom:12px}
.sidebar h2{position:relative;font-size:28px;font-weight:950;letter-spacing:.5px;padding-bottom:12px}
.sidebar h2::after{content:"";position:absolute;bottom:0;left:0;width:36px;height:3px;background:var(--red)}
.sidebar nav{gap:4px}
.category{min-height:54px;padding:14px 18px;border:0;border-radius:12px;background:transparent;box-shadow:none;font-size:18px;font-weight:900;text-transform:uppercase}
.category:hover{background:#202023;border-color:transparent}
.category.active{background:#ed102b;border-color:transparent;box-shadow:none}
@media(max-width:850px){.sidebar-top{padding:0 18px 18px}.sidebar h2{font-size:26px}.sidebar-close{align-self:flex-start}}
@media(max-width:360px){.sidebar-top{padding-inline:8px}.sidebar h2{font-size:23px}}

/* Catalog-first two-column layout. */
.topbar{display:none}
.layout{min-height:100vh}
.sidebar{min-height:100vh;padding-top:26px}
.sidebar-brand{display:flex;justify-content:center;font-size:34px;margin:0 0 36px;min-height:54px}
.main{padding-top:30px}
@media(max-width:850px){.topbar{display:block}.layout{min-height:calc(100vh - 80px)}.sidebar{min-height:0;padding-top:24px}.sidebar-brand{display:none}.main{padding-top:24px}}

/* Item-specific sharing from the design preview. */
.modal-inner{grid-template-rows:auto minmax(0,1fr) auto}
.preview-actions{display:flex;align-items:center;gap:10px}
.share-button{border:1px solid #5b3c43;border-radius:9px;background:#29151b;color:#fff;font-size:18px;font-weight:800;min-height:48px;padding:10px 15px;cursor:pointer}
.share-button:hover{background:#481923;border-color:var(--red)}
.share-panel{padding:12px 16px;border-top:1px solid var(--line);min-width:0;max-height:40vh;overflow:auto}
.share-panel label{display:block;font-size:18px;font-weight:800;margin-bottom:8px}
.share-link-row{display:flex;gap:10px;align-items:center}
.share-link-row input{width:100%;min-width:0;padding:12px;background:#19191d;border:1px solid #53535a;border-radius:8px;color:#fff;font-size:18px}
.share-link-row button{flex:none}
#shareStatus{font-size:18px;line-height:1.4;margin:10px 0 0;color:var(--muted)}
@media(max-width:560px){.preview-actions{gap:5px}.share-button{padding:10px}.share-panel{padding:10px}.share-link-row{flex-wrap:wrap}}

.preview-actions{min-width:0;flex-wrap:wrap;gap:12px}.modal-top>#closeModal{flex:none;margin-left:auto;align-self:flex-start}

/* Full-width brand and catalog banner, above the browsing columns. */
.topbar{display:block;padding:0;background:radial-gradient(ellipse at 65% 20%,#18181b,#080809 72%);border-bottom:1px solid var(--line)}
.banner-inner{position:relative;isolation:isolate;max-width:1600px;margin:auto;min-height:194px;padding:28px 32px;display:grid;grid-template-columns:1.05fr 1.25fr .85fr;align-items:center;gap:30px;overflow:hidden}
.banner-inner::after{content:"";position:absolute;z-index:-1;top:-40px;bottom:-40px;right:24%;width:70px;transform:skewX(-30deg);background:linear-gradient(90deg,#710c1c 0 46%,#09090a 47% 50%,#ee0b2a 51%);opacity:.85;pointer-events:none}
.banner-brand{min-width:0}.topbar .brand{display:inline-flex;font-size:clamp(38px,4.3vw,68px);font-weight:950;letter-spacing:-3px;line-height:1.1;min-height:0}.topbar .brand span:last-child{margin-left:8px}
.banner-brand p{font-size:18px;letter-spacing:2px;font-weight:700;margin:12px 0 0;color:#dedee3}
.banner-title{border-left:1px solid #505056;padding-left:30px;min-width:0}.banner-title .eyebrow{font-size:24px;letter-spacing:1.5px;margin:0 0 4px}.banner-title h1{font-size:clamp(28px,3.25vw,50px);font-weight:950;letter-spacing:-1px;line-height:1.15;margin:0;overflow-wrap:anywhere}.banner-sub{font-size:18px;color:#d5d5dd;letter-spacing:2px;line-height:1.6;margin:12px 0 0}
.banner-uses{display:flex;justify-content:space-between;gap:12px;align-items:center}.banner-uses>div{flex:1;min-width:0;text-align:center}.banner-uses>div+div{border-left:1px solid #505056;padding-left:12px}.banner-uses svg{display:block;width:40px;height:40px;fill:#e4e4e8;margin:0 auto 10px}.banner-uses span{font-size:18px;display:block;line-height:1.3;font-weight:800}
.layout{min-height:calc(100vh - 194px)}.sidebar{padding-top:34px}.main{padding:28px 22px}.toolbar{margin:0 0 24px;gap:20px;align-items:stretch}.toolbar .search{min-height:68px}.count{min-width:180px;padding:16px 20px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#19191c,#101012);color:#f5f5f8;font-size:20px;font-weight:900}.count strong{color:var(--red);font-size:28px}.banner-inner>.menu-button{position:absolute;left:12px;top:14px}
@media(min-width:851px) and (max-width:1200px){.banner-inner{grid-template-columns:1fr 1.25fr;gap:24px}.banner-uses{display:none}.banner-inner::after{right:0;opacity:.3}}
@media(max-width:850px){.banner-inner{grid-template-columns:1fr;gap:22px;text-align:center;padding:24px 22px}.banner-brand{padding-inline:40px}.topbar .brand{font-size:44px;letter-spacing:-2px}.banner-title{border-left:0;padding-left:0}.banner-title h1{font-size:36px}.banner-title .eyebrow{font-size:20px}.banner-uses{max-width:420px;width:100%;margin:auto}.banner-inner::after{right:5%;opacity:.12}.sidebar{min-height:0;padding-top:24px}.main{padding:24px 16px}.toolbar{gap:12px}.count{min-width:150px;padding:12px}.banner-brand p,.banner-sub{letter-spacing:1px}}
@media(max-width:560px){.banner-inner{padding:20px 14px;gap:16px}.banner-brand{padding-inline:30px}.topbar .brand{font-size:clamp(30px,8.5vw,42px);letter-spacing:-1px}.banner-brand p{letter-spacing:0;font-size:18px}.banner-title h1{font-size:30px}.banner-sub{font-size:18px;letter-spacing:0;margin-top:6px}.banner-uses{display:none}.toolbar{flex-direction:column;align-items:stretch}.count{min-width:0;align-self:flex-end;min-height:52px;font-size:18px;padding:8px 16px}.count strong{font-size:24px}.toolbar .search{min-height:60px}}

/* Refined banner scale and a clipped accent lane clear of the use-case icons. */
.banner-inner{grid-template-columns:1.15fr 1.35fr 68px 1fr;gap:24px}
.banner-inner::after{content:none}
.topbar .brand{font-size:clamp(42px,4.65vw,74px)}
.banner-brand p{font-size:20px;font-weight:800;letter-spacing:1.5px}
.banner-accent{position:relative;align-self:stretch;overflow:hidden;min-height:120px;pointer-events:none}
.banner-accent::before{content:"";position:absolute;top:-45px;bottom:-45px;left:10px;width:48px;transform:skewX(-29deg);background:linear-gradient(90deg,#9b0920 0 45%,transparent 45% 50%,#ed102b 50%);mask-image:linear-gradient(to bottom,#000 5%,#0008 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 5%,#0008 60%,transparent 100%);opacity:.75}
.banner-uses{gap:8px}.banner-uses>div+div{padding-left:8px}
@media(min-width:851px) and (max-width:1200px){.banner-inner{grid-template-columns:1fr 1.25fr}.banner-accent{display:none}}
@media(max-width:850px){.banner-inner{grid-template-columns:1fr;gap:22px}.banner-accent{display:none}.topbar .brand{font-size:48px}.banner-brand p{font-size:20px;letter-spacing:1px}}
@media(max-width:560px){.banner-inner{gap:16px}.topbar .brand{font-size:clamp(32px,9vw,46px)}.banner-brand p{font-size:20px;letter-spacing:0}}

/* Full-height diagonal ribbons: gradients follow the banner, not a clipped skew. */
@media(min-width:1201px){.banner-inner{grid-template-columns:1.15fr 1.35fr clamp(140px,11.5vw,184px) 1fr;gap:18px}.banner-accent{margin-block:-28px;min-height:0;align-self:stretch;overflow:hidden}.banner-accent::before{content:none}.banner-accent svg{display:block;width:100%;height:100%;position:absolute;inset:0}}

/* Keep the catalog title on one line at every banner breakpoint. */
.banner-title{container-type:inline-size}
.banner-title h1{white-space:nowrap;overflow-wrap:normal;font-size:clamp(18px,5vw,50px);font-size:clamp(18px,9.2cqw,50px);letter-spacing:-.5px}

/* Lighter supporting banner text and single-line use-case labels. */
.banner-brand p,.banner-sub,.banner-uses span{font-weight:400}
.banner-uses span{white-space:nowrap}
@media(min-width:1201px){.banner-inner{grid-template-columns:1.15fr 1.35fr clamp(140px,11.5vw,184px) minmax(340px,1fr)}}

/* Custom-design text contact replaces the use-case icons. */
.banner-contact{display:flex;align-items:center;gap:14px;min-width:0;min-height:64px;padding-block:8px}
.banner-contact>svg{width:48px;height:60px;flex:none;color:#ff1037}
.contact-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.contact-heading{font-size:clamp(18px,1.3vw,21px);font-weight:950;color:#ff1037;line-height:1.25;white-space:nowrap}
.contact-number{font-size:clamp(24px,2.1vw,34px);font-weight:400;color:#fff;white-space:nowrap;line-height:1.2;letter-spacing:-.6px}
.contact-number strong{font-weight:900}
.banner-contact:hover .contact-number{text-decoration:underline;text-decoration-color:#ff1037;text-underline-offset:5px}
@media(min-width:1201px){.banner-inner{grid-template-columns:1.15fr 1.35fr clamp(130px,10vw,160px) minmax(365px,1fr)}}
@media(min-width:851px) and (max-width:1200px){.banner-inner{grid-template-columns:1fr 1.25fr}.banner-contact{grid-column:1/-1;justify-content:center;padding-top:16px;border-top:1px solid var(--line)}}
@media(max-width:850px){.banner-contact{justify-content:center;margin-inline:auto;text-align:left}.contact-heading{font-size:20px}.contact-number{font-size:30px}}
@media(max-width:560px){.banner-contact{gap:10px;width:100%;max-width:380px}.banner-contact>svg{width:34px;height:48px}.contact-heading{font-size:18px;white-space:normal}.contact-number{font-size:clamp(22px,6.2vw,30px);letter-spacing:-.5px}}