.cmp-catalog{--ink:#101828;--muted:#667085;--accent:#6c3cff;--soft:#f4f1ff;max-width:1180px;margin:0 auto;padding:64px 20px;font-family:inherit;color:var(--ink)}
.cmp-hero{max-width:760px;margin-bottom:34px}.cmp-eyebrow{display:inline-block;margin-bottom:12px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.16em}.cmp-hero h1{margin:0 0 14px;font-size:clamp(36px,6vw,66px);line-height:1.02;letter-spacing:-.045em}.cmp-hero p{margin:0;color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.55}
.cmp-filters{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0}.cmp-filters button{border:1px solid #e4e7ec;border-radius:999px;background:#fff;color:#344054;padding:9px 16px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:.2s}.cmp-filters button:hover,.cmp-filters button.is-active{border-color:var(--accent);background:var(--accent);color:#fff}
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.cmp-card{overflow:hidden;border:1px solid #e9e7f0;border-radius:22px;background:#fff;box-shadow:0 10px 34px rgba(16,24,40,.07);transition:transform .25s,box-shadow .25s}.cmp-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(16,24,40,.12)}.cmp-card[hidden]{display:none}.cmp-image{aspect-ratio:16/9;overflow:hidden;background:var(--soft)}.cmp-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.cmp-card:hover .cmp-image img{transform:scale(1.03)}.cmp-placeholder{display:grid;width:100%;height:100%;place-items:center;background:linear-gradient(135deg,#eee9ff,#dfeaff)}.cmp-placeholder span{font-size:72px;font-weight:900;color:var(--accent);opacity:.7}
.cmp-content{padding:25px}.cmp-category{display:inline-block;margin-bottom:10px;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.cmp-content h2{margin:0 0 10px;font-size:25px;line-height:1.2}.cmp-content p{min-height:52px;margin:0 0 20px;color:var(--muted);line-height:1.6}.cmp-content a{display:inline-flex;align-items:center;color:var(--ink);font-weight:750;text-decoration:none}.cmp-content a:hover{color:var(--accent)}.cmp-empty{grid-column:1/-1;padding:45px;border:2px dashed #d9d3ee;border-radius:20px;background:var(--soft);text-align:center}.cmp-empty h2{margin-top:0}
.cmp-clickable{cursor:pointer}.cmp-clickable:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:720px){.cmp-catalog{padding:42px 16px}.cmp-grid{grid-template-columns:1fr}.cmp-content p{min-height:0}}
@media(prefers-reduced-motion:reduce){.cmp-card,.cmp-image img{transition:none}}