:root{--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}

.usecase {font-family:Inter,sans-serif}
.usecase h2,.usecase h3{font-family:Poppins,sans-serif}
.usecase.card{ width: 100%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 12px rgba(0,0,0,.08);margin:auto;border:1px solid #e5e5e5;transition:all .3s ease}
.usecase.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);transform:translateY(-2px)}
.usecase .card-left{flex:1 1 60%}
.usecase .card-left .title{display:flex;justify-content:space-between;gap:20px;align-items:start}
.usecase .card-left h2{margin:0 0 8px;font-size:22px;font-weight:600;color:#111}
.usecase .tag{display:inline-block;background:#fff;color:#111;font-weight:500;padding:4px 10px;border-radius:14px;margin-bottom:12px;font-size:.75rem;line-height:1rem;border:1px solid #e5e8eb}
.usecase .complexity{display:inline-block;font-size:12px;font-weight:600;padding:4px 10px;border-radius:14px}
.usecase .complexity.high {background:#fee2e2;color:#b91c1c;}
.usecase .complexity.medium {background:#fef9c3;color:#854d0e;}
.usecase .complexity.low {background:#dcfce7;color:#166534;}
.usecase .card-left p{margin:10px 0 16px;color:#4c5967;line-height:1.5}
.usecase .card-left h3{font-size:18px;margin:16px 0 8px;font-weight:500}
.usecase .card-left ul{margin:0;padding-left:18px;color:#16a34a;font-size:15px;display:flex;flex-direction:column;gap:4px}
.usecase .card-left ul li::marker{font-size:15px;color:#22c55e}
.usecase .card-left ul li{margin-bottom:6px;font-size:14px;color:#4c5967;margin:0}
.usecase .tags{margin-top:12px}
.usecase .tags span{display:inline-block;background:#f3f5f6;color:#111;font-size:12px;font-weight:600;border-radius:14px;padding:2px 10px}
.usecase .card-right {flex:1 1 35%;gap:1rem;border-radius:12px;display:flex;flex-direction:column;min-width:250px}
.usecase .metrics {font-size:14px;color:#333;background-color:#f3f4f6;padding:1rem;border-radius:12px;border:1px solid #c1c9d0;display:flex;flex-direction:column;gap:12px}
.usecase .metrics div{display:flex;justify-content:space-between}
.usecase .metrics div span:first-child{font-weight:500;display:flex;gap:10px;align-items:center}
.usecase .metrics div span:first-child span.icon.tov{color:#23405c}
.usecase .metrics div span:first-child span.icon.roi{color:#16a34a}
.usecase .metrics div span:first-child span.icon.tov svg{fill:transparent}
.usecase .metrics div span:first-child i{opacity:0;visibility:hidden}
.usecase .metrics div span:last-child{font-weight:600}
.usecase .green{color:#16a34a}
.usecase .buttons{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.usecase .btn-primary, .usecase a.btn-primary{background-image:linear-gradient(to right,#ee582b,#ed805e);color:#fff;padding:12px;border:none;border-radius:8px;box-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);font-size:15px;display:inline-flex;justify-content:center;gap:8px;align-items:center;font-weight:600;cursor:pointer;text-align:center;transition:.3s;text-decoration:none;}
.usecase .btn-primary:hover, .usecase a.btn-primary:hover{transform:scale(1.1);background-image:linear-gradient(to left,#ee582b,#ed805e)}
.usecase .btn-outline, .usecase a.btn-outline{background-color:#fff;color:#23405c;padding:10px;border:2px solid #23405c;border-radius:8px;font-size:15px;display:inline-flex;justify-content:center;gap:8px;align-items:center;font-weight:600;cursor:pointer;text-align:center;transition:.3;text-decoration:none;}
.usecase .btn-outline:hover, .usecase a.btn-outline:hover{background:#23405c;color:#fff;transform:scale(1.05)}
@media(max-width:768px){
  .usecase.card{flex-direction:column}
  .usecase .card-left h2{font-size:20px}
  .usecase .card-right{margin-top:20px}
}

/* ---------- Filter section ---------- */
.usecase-filters {display:flex;flex-direction:column;gap:12px;margin-bottom:18px;font-family:Inter,sans-serif}
.usecase-filters .filter-row {display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.usecase-filters .filter-left,.usecase-filters .filter-right {flex:1;display:flex;flex-direction:column;gap:8px}
.usecase-filters .filter-label {font-size:14px;font-weight:600;color:#111827;display:inline-flex;align-items:center;gap:8px}
.usecase-filters .filter-label .available {font-weight:500;color:#6b7280;font-size:13px;margin-left:6px}
.input-with-icon {position:relative;width:100%}
.input-with-icon .icon-search {position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none}
.usecase-search-input{width:100%;padding:12px 14px 12px 40px!important;border:1px solid #e5e7eb;border-radius:12px!important;font-size:14px!important;color:#111827}
.usecase-search-input::placeholder{color:#9ca3af}
.select-wrap{position:relative;width:100%}
.usecase-select{appearance:none;width:100%;padding:5px 44px 5px 16px;border:1px solid #e5e7eb;border-radius:12px;font-size:14px;color:#111827;background:#fff}
.select-wrap .select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#6b7280}
.filter-meta{color:#6b7280;font-size:14px;margin-top:4px}
.usecase-list{display:flex;flex-direction:column;gap:20px}

@media(max-width:768px){
  .usecase-filters .filter-row{flex-direction:column;gap:12px}
}

/* ---------- Pagination ---------- */
.usecase-pagination .pagination-bar{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:16px;flex-wrap:wrap}
.usecase-pagination .pagination-info{font-size:14px;color:#374151}
.usecase-pagination .pagination-total{font-size:14px;color:#6b7280}
.usecase-pagination .pagination-links ul.pagination{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.usecase-pagination .pagination-links ul.pagination li a{display:block;padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;font-size:14px;color:#111827;transition:.2s;text-decoration:none}
.usecase-pagination .pagination-links ul.pagination li.active a{background:#23405c;color:#fff;border-color:#23405c;text-decoration:none}
.usecase-pagination .pagination-links ul.pagination li a:hover{border-color:#23405c;color:#23405c}
.usecase-pagination .pagination-links ul.pagination li.active a:hover{border-color:#23405c;color:#fff}


.usecase-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;justify-content:center;align-items:center;z-index:9999}
.usecase-modal-content{background:#fff;padding:30px;border-radius:12px;width:90%;max-width:600px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:fadeIn .3s ease}
.usecase-close{position:absolute;top:10px;right:15px;font-size:24px;cursor:pointer;color:#333}
@keyframes fadeIn {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}