@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500;600&display=swap');

:root{--sf:#FF6B35;--gd:#F7C948;--nv:#1A2744;--mu:#7A869A;}

.sc-wrap{max-width:1200px;margin:0 auto;padding:24px 0;font-family:'DM Sans',sans-serif;}
.sc-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.sc-btn{background:#fff;border:2px solid transparent;color:var(--mu);font-family:'DM Sans',sans-serif;font-weight:500;font-size:.82rem;padding:7px 18px;border-radius:100px;cursor:pointer;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.sc-btn:hover{border-color:var(--gd);color:var(--nv);}
.sc-btn.on{background:var(--nv);color:var(--gd);border-color:var(--nv);}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;}
.sc-card{background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(26,39,68,.10);overflow:hidden;transition:transform .22s,box-shadow .22s;animation:scUp .4s both;}
.sc-card.sc-hidden{display:none;}
.sc-card:hover{transform:translateY(-5px);box-shadow:0 14px 36px rgba(26,39,68,.16);}
@keyframes scUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.sc-img{position:relative;width:100%;padding-bottom:105%;background:#e8eaf2;overflow:hidden;}
.sc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}
.sc-cls{position:absolute;top:7px;left:7px;background:var(--nv);color:var(--gd);font-size:.58rem;font-weight:700;letter-spacing:.1em;padding:3px 8px;border-radius:100px;text-transform:uppercase;}
.sc-num{position:absolute;top:7px;right:7px;background:linear-gradient(135deg,var(--sf),var(--gd));color:var(--nv);font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(255,107,53,.4);}
.sc-body{padding:10px 12px 13px;}
.sc-name{font-family:'Playfair Display',serif;font-size:.88rem;font-weight:700;color:var(--nv);line-height:1.2;margin-bottom:3px;}
.sc-sub{font-size:.7rem;color:var(--mu);margin-bottom:7px;}
.sc-bg{background:#eef0f6;border-radius:100px;height:5px;overflow:hidden;}
.sc-bar{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--sf),var(--gd));}
.sc-pct{font-size:.67rem;color:var(--mu);margin-top:4px;text-align:right;}
.sc-pct b{color:var(--sf);}
@media(max-width:480px){.sc-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}}