.cs-container{max-width:1600px;margin:0 auto;padding:0 20px;}

.cs-banner{background:linear-gradient(135deg,#0e1a3d,#1e3a8a);padding:90px 0;}
.cs-banner-inner{max-width:640px;}
.cs-banner-title{color:#fff;font-size:42px;font-weight:800;margin:0 0 16px;}
.cs-banner-sub{color:rgba(255,255,255,.85);font-size:15px;line-height:1.6;margin:0 0 28px;}
.cs-banner-cta{display:inline-block;padding:14px 38px;border-radius:12px;background:#fff;color:#0e1a3d !important;font-weight:600;text-decoration:none;transition:.2s;}
.cs-banner-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18);}

.cs-section{background:linear-gradient(160deg,#f4f5fb,#eceef9 60%,#fff);padding:40px 0 90px;}
.cs-eyebrow{text-align:center;color:#4f46e5;font-size:13px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;font-weight:700;}
.cs-title{text-align:center;font-size:36px;font-weight:800;margin:0 0 32px;color:#313168;}

.cs-toolbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}

.cs-search-field{position:relative;width:100%;max-width:380px;}
.cs-search-field input{width:100%;padding:13px 44px 13px 44px;border-radius:999px;border:1px solid transparent;font-size:14px;outline:none;background:#fff;color:#0e1a3d;box-shadow:0 6px 20px rgba(30,58,138,.14);transition:box-shadow .2s ease,border-color .2s ease; margin-bottom: 20px;}
.cs-search-field input:focus{border-color:#4f46e5;box-shadow:0 6px 22px rgba(79,70,229,.28);}
.cs-search-field svg{position:absolute;left:15px;top:35%;transform:translateY(-50%);width:17px;height:17px;stroke:#4f46e5;pointer-events:none;}
.cs-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:19px;line-height:1;color:#9aa1c7;cursor:pointer;padding:4px;}
.cs-search-clear:hover{color:#4f46e5;}

.cs-filter-field select{padding:13px 18px;border-radius:999px;border:none;font-size:14px;background:#fff;color:#0e1a3d;box-shadow:0 6px 20px rgba(30,58,138,.14);outline:none;cursor:pointer;min-width:180px;}
.cs-filter-field select:focus{box-shadow:0 6px 22px rgba(79,70,229,.28);}

.cs-filter-reset{padding:12px 20px;border-radius:999px;border:1px solid #c7cbee;background:transparent;color:#4f46e5;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;}
.cs-filter-reset:hover{background:#eef0ff;}

.cs-spinner{width:1.1rem;height:1.1rem;border:2px solid #c7cbee;border-top-color:#4f46e5;border-radius:50%;display:none;animation:cs-spin .6s linear infinite;}
.cs-spinner.is-active{display:inline-block;}
@keyframes cs-spin{to{transform:rotate(360deg);}}

.cs-count{text-align:center;font-size:13px;color:#6b7290;margin:0 0 32px;min-height:18px;}

.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;}

@keyframes cs-fade-up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

.cs-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(14,26,61,.08);animation:cs-fade-up .5s cubic-bezier(.2,.8,.3,1.2) both;transition:transform .35s cubic-bezier(.22,.9,.32,1),box-shadow .35s ease;}
.cs-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 14px 30px rgba(79,70,229,.20);}

.cs-card-img{aspect-ratio:20/10;overflow:hidden;position:relative;background:linear-gradient(135deg,#0a1030,#1e3a8a,#6366f1);}
.cs-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.cs-card:hover .cs-card-img img{transform:scale(1.06);}

.cs-card-body{padding:20px;}
.cs-card-tag{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:#eef0ff;color:#4f46e5;margin-bottom:12px;}
.cs-card-title{color:#313168;font-size:16.5px;margin:0 0 12px;line-height:1.35;font-weight:700;}
.cs-card-title a{color:inherit;text-decoration:none;}
.cs-card-title a:focus-visible{outline:2px solid #4f46e5;outline-offset:3px;}
.cs-card-excerpt{font-size:14px;color:#313131;line-height:1.5;margin:0 0 16px;}
.cs-card-cta{display:inline-block;padding:9px 18px;border-radius:999px;background:linear-gradient(193.06deg,#F5F1FF -59.37%,#4F39E0 106.12%);color:#fff !important;font-size:12.5px;font-weight:700;text-decoration:none;transition:.2s;}
.cs-card-cta:hover{filter:brightness(1.15);transform:scale(1.04);}
.cs-card-cta:focus-visible{outline:2px solid #0e1a3d;outline-offset:2px;}

.cs-empty{text-align:center;padding:70px 0;display:flex;flex-direction:column;align-items:center;gap:14px;}
.cs-empty p{margin:0;font-size:14px;color:#4b527a;}
.cs-empty-reset{padding:10px 22px;border-radius:999px;border:none;background:linear-gradient(193.06deg,#F5F1FF -59.37%,#4F39E0 106.12%);color:#fff;font-size:13px;font-weight:700;cursor:pointer;}

.cs-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:50px;}
.cs-page-num,.cs-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 14px;border-radius:10px;background:#fff;color:#4f46e5;font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 3px 10px rgba(79,70,229,.15);transition:.15s;}
.cs-page-num:hover,.cs-page-btn:hover{background:#eef0ff;}
.cs-page-current{background:linear-gradient(193.06deg,#F5F1FF -59.37%,#4F39E0 106.12%);color:#fff;pointer-events:none;}
.cs-page-disabled{opacity:.4;pointer-events:none;box-shadow:none;}
.cs-page-dots{display:inline-flex;align-items:center;justify-content:center;min-width:24px;color:#9aa1c7;}

.cs-loading{position:relative;min-height:200px;}
.cs-loading .cs-grid,.cs-loading .cs-pagination,.cs-loading .cs-empty{opacity:.35;pointer-events:none;filter:blur(1px);transition:opacity .2s ease;}

@media (max-width:1024px){
    .cs-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
    .cs-section .cs-title{font-size:26px;}
    .cs-banner-title{font-size:34px;}
    .cs-card-body .cs-card-title{font-size:18px;}
}
@media (max-width:768px){
    .cs-section{padding:50px 0 60px;}
    .cs-banner{padding:60px 0;}
    .cs-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
    .cs-title{font-size:28px;margin-bottom:24px;}
    .cs-card-body{padding:16px;}
    .cs-card-title{font-size:15px;margin-bottom:10px;}
    .cs-toolbar{gap:10px;}
    .cs-search-field,.cs-filter-field select{max-width:100%;width:100%;}
}
@media (max-width:560px){
    .cs-grid{grid-template-columns:1fr;gap:16px;}
    .cs-title{font-size:24px;}
    .cs-banner-title{font-size:26px;}
    .cs-search-field input{font-size:13px;padding:12px 40px 12px 40px;}
    .cs-card-cta{padding:8px 16px;font-size:12px;}
    .cs-page-num,.cs-page-btn{min-width:34px;height:34px;padding:0 10px;font-size:12px;}
    .cs-card:hover{transform:translateY(-4px) scale(1.01);}
}