/* ═══════════════════════════════════════════════════════
   PAIN BENTO — Bento grid section for pain points
   ═══════════════════════════════════════════════════════ */

/* ═══ SECTION ═══ */
.pb { padding: 6rem 1.25rem 7rem; position: relative; overflow: hidden; background: #f3f4f6; }
.pb::before {
    content:''; position:absolute; top:-15%; right:-10%; width:45%; height:55%;
    background: radial-gradient(ellipse at 50% 50%, rgba(196,181,253,0.25) 0%, rgba(147,197,253,0.12) 45%, transparent 70%);
    filter: blur(60px); pointer-events:none; z-index:0;
}
.pb::after {
    content:''; position:absolute; bottom:-10%; left:-10%; width:40%; height:45%;
    background: radial-gradient(ellipse at 50% 50%, rgba(147,197,253,0.1) 0%, transparent 65%);
    filter: blur(60px); pointer-events:none; z-index:0;
}
.pb__in { max-width:1200px; margin:0 auto; position:relative; z-index:1; }

/* ═══ HEADER ═══ */
.pb__hd { text-align:center; margin-bottom:3.5rem; }
.pb__pill {
    display:inline-flex; align-items:center; gap:6px;
    font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
    color:#6b7280; background:#fff; padding:6px 14px; border-radius:100px;
    border:1px solid #e5e7eb; margin-bottom:1.25rem;
}
.pb__pill svg { width:12px; height:12px; stroke-width:2.5; color:#9ca3af; }
.pb__h2 {
    font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.1;
    letter-spacing:-0.04em; color:#111;
}
.pb__h2 em {
    font-style:normal;
    background:linear-gradient(135deg,#2563EB,#7c3aed);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.pb__sub {
    margin-top:1rem; font-size:1rem; color:#6b7280;
    max-width:520px; margin-left:auto; margin-right:auto; line-height:1.6;
}

/* ═══ GRID ═══ */
.pb__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pb__grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }

/* ═══ CARD ═══ */
.pb__c {
    background:#fff; border-radius:20px; border:1px solid rgba(0,0,0,0.06);
    overflow:hidden; display:flex; flex-direction:column;
    transition: transform .35s cubic-bezier(.2,1,.2,1), box-shadow .35s ease;
}
.pb__c:hover {
    transform:translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.08);
}
.pb__c-top { padding:2rem 2rem 1.25rem; }
.pb__c-ic {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;
}
.pb__c-ic svg { width:20px; height:20px; stroke-width:1.75; }
.pb__c-ic--pur { background:#ede9fe; }
.pb__c-ic--pur svg { color:#7c3aed; }
.pb__c-ic--blu { background:#dbeafe; }
.pb__c-ic--blu svg { color:#2563eb; }
.pb__c-ic--grn { background:#d1fae5; }
.pb__c-ic--grn svg { color:#059669; }
.pb__c-ic--gry { background:#f3f4f6; }
.pb__c-ic--gry svg { color:#374151; }

.pb__c-t {
    font-size:1.3125rem; font-weight:700; line-height:1.2;
    letter-spacing:-0.02em; color:#111; margin-bottom:.5rem;
}
.pb__c-d { font-size:.8125rem; color:#6b7280; line-height:1.55; }

.pb__c-ui { margin-top:auto; padding:1rem 1.25rem 0; }
.pb__c-ui-in {
    background:#f9fafb; border-radius:16px 16px 0 0; border:1px solid #e5e7eb; border-bottom:none;
    padding:1rem; overflow:hidden; min-height:220px;
}

/* Wide card */
.pb__c--w { grid-column:1/-1; flex-direction:row; }
.pb__c--w .pb__c-top { flex:1; padding:2.5rem; display:flex; flex-direction:column; justify-content:center; }
.pb__c--w .pb__c-ui { flex:1.15; padding:1.25rem 1.25rem 0 0; margin-top:0; }
.pb__c--w .pb__c-ui-in { border-radius:16px; border-bottom:1px solid #e5e7eb; min-height:100%; padding:1.25rem; }
.pb__c--w .pb__c-t { font-size:1.375rem; }

/* Small card */
.pb__c--sm .pb__c-top { padding:1.75rem 1.75rem 1rem; }
.pb__c--sm .pb__c-t { font-size:1.0625rem; }
.pb__c--sm .pb__c-ui-in { min-height:180px; padding:.875rem; }

/* ═══ MOCKUP PRIMITIVES ═══ */
.mk-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 10px; background:#fff; border-radius:10px;
    border:1px solid #f0f0f0; margin-bottom:10px;
}
.mk-toolbar__left { display:flex; align-items:center; gap:6px; }
.mk-toolbar__title { font-size:.625rem; font-weight:700; color:#111; }
.mk-toolbar__sub { font-size:.5625rem; color:#9ca3af; font-weight:500; }
.mk-toolbar__btn {
    font-size:.5rem; font-weight:700; color:#fff; background:#2563eb;
    padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em;
}
.mk-toolbar__btn--outline {
    background:transparent; color:#6b7280; border:1px solid #e5e7eb;
}
.mk-thead {
    display:flex; align-items:center; justify-content:space-between;
    padding:5px 10px; margin-bottom:4px;
    font-size:.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#c4c4c4;
}
.mk-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:7px 10px; border-radius:8px; margin-bottom:4px;
    font-size:.6875rem; font-weight:500; color:#374151;
}
.mk-row:nth-child(even) { background:#fff; }
.mk-row__l { display:flex; align-items:center; gap:8px; }
.mk-row__dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.mk-row__val { font-weight:700; font-size:.75rem; white-space:nowrap; }
.mk-avatar {
    width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.4375rem; font-weight:800; color:#fff; flex-shrink:0;
}
.mk-stat {
    background:#fff; border-radius:10px; padding:10px 12px;
    border:1px solid #f0f0f0;
}
.mk-stat__lbl { font-size:.5rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#b0b0b0; margin-bottom:3px; }
.mk-stat__val { font-size:1.0625rem; font-weight:800; letter-spacing:-0.02em; color:#111; }
.mk-stat__sub { font-size:.5625rem; font-weight:600; margin-top:1px; }
.mk-badge {
    display:inline-flex; align-items:center; gap:3px;
    font-size:.5625rem; font-weight:700; padding:2px 7px; border-radius:5px;
}
.mk-badge--g { background:#dcfce7; color:#16a34a; }
.mk-badge--y { background:#fef3c7; color:#d97706; }
.mk-badge--r { background:#fee2e2; color:#dc2626; }
.mk-badge--b { background:#eff6ff; color:#2563EB; }
.mk-progress {
    height:4px; background:#f3f4f6; border-radius:2px; overflow:hidden; margin-top:4px;
}
.mk-progress__fill { height:100%; border-radius:2px; }
.mk-bars { display:flex; align-items:flex-end; gap:3px; }
.mk-bar { width:100%; border-radius:3px 3px 0 0; }
.mk-notif {
    background:#fff; border-radius:10px; padding:9px 12px;
    border:1px solid #f0f0f0;
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:6px;
}
.mk-notif:last-child { margin-bottom:0; }
.mk-notif__l { display:flex; align-items:center; gap:9px; }
.mk-notif__ic {
    width:26px; height:26px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mk-notif__ic svg { width:12px; height:12px; stroke-width:2; }
.mk-notif__name { font-size:.625rem; font-weight:700; color:#111; }
.mk-notif__sub { font-size:.5rem; color:#9ca3af; font-weight:500; margin-top:1px; }
.mk-notif__val { font-size:.6875rem; font-weight:700; white-space:nowrap; }
.mk-tabs { display:flex; gap:4px; margin-bottom:8px; }
.mk-tab {
    font-size:.4375rem; font-weight:700; padding:3px 8px; border-radius:6px;
    background:#f3f4f6; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em;
}
.mk-tab--active { background:#111; color:#fff; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:860px) {
    .pb { padding: 4rem 1.25rem; }
    .pb__h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .pb__grid, .pb__grid3 { grid-template-columns:1fr; }
    .pb__c--w { flex-direction:column; }
    .pb__c--w .pb__c-top { padding: 1.75rem 1.75rem 1rem; }
    .pb__c--w .pb__c-ui { padding:0 1.25rem; }
    .pb__c--w .pb__c-ui-in { border-radius:16px 16px 0 0; border-bottom:none; min-height: 200px;}
}