.tp-wrap {
    background: #f4f7fa;
    color: #1a2332;
    line-height: 1.5;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.tp-wrap *, .tp-wrap *::before, .tp-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Header ── */
.tp-header { text-align: center; margin-bottom: 48px; }
.tp-header h2 {
    font-size: clamp(28px, 4vw, 42px); font-weight: 800;
    color: #0b1a2e; letter-spacing: -0.5px; line-height: 1.15;
    margin-top: 2rem;
}
.tp-header h2 span {
    background: linear-gradient(135deg, #0d3b66 0%, #1a6ea8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tp-header p {
    margin-top: 12px; font-size: 18px; color: #4a5a72;
    max-width: 640px; margin-left: auto; margin-right: auto;
}
.tp-divider {
    width: 60px; height: 4px;
    background: linear-gradient(90deg, #0d3b66, #1a6ea8);
    border-radius: 2px; margin: 18px auto 0;
}

/* ── Tabs ── */
.tp-tabs {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin-bottom: 40px;
}
.tp-tabs button {
    padding: 10px 24px; border: 2px solid #d0d9e6;
    background: #fff; border-radius: 30px;
    font-size: 15px; font-weight: 600; color: #1a2332;
    cursor: pointer; transition: all .2s; font-family: inherit;
}
.tp-tabs button:hover { border-color: #1a6ea8; color: #1a6ea8; }
.tp-tabs button.active { background: #0d3b66; border-color: #0d3b66; color: #fff; }

/* ── Grid ── */
.tp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}

/* ── Card ── */
.tp-card {
    background: #fff; border-radius: 16px; padding: 32px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    transition: transform .25s, box-shadow .25s;
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.tp-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 5px; border-radius: 16px 16px 0 0;
}
.tp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.06);
}
.tp-card[data-cat="ces"]::before     { background: linear-gradient(90deg, #0d3b66, #1a6ea8); }
.tp-card[data-cat="cbt"]::before     { background: linear-gradient(90deg, #1a6ea8, #3b9bd6); }
.tp-card[data-cat="mintra"]::before  { background: linear-gradient(90deg, #1b7a4a, #34b776); }
.tp-card[data-cat="sets"]::before    { background: linear-gradient(90deg, #8a2b5b, #c4538a); }
.tp-card[data-cat="delta"]::before   { background: linear-gradient(90deg, #b45a1c, #e8883a); }

.tp-badge {
    display: inline-block; padding: 4px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 14px; align-self: flex-start;
}
.tp-card[data-cat="ces"] .tp-badge     { background: #e2edf8; color: #0d3b66; }
.tp-card[data-cat="cbt"] .tp-badge     { background: #dceefb; color: #1a6ea8; }
.tp-card[data-cat="mintra"] .tp-badge  { background: #def2e6; color: #1b7a4a; }
.tp-card[data-cat="sets"] .tp-badge    { background: #f3e3ec; color: #8a2b5b; }
.tp-card[data-cat="delta"] .tp-badge   { background: #f7e6d4; color: #b45a1c; }

.tp-card h3 {
    font-size: 20px; font-weight: 700; color: #0b1a2e;
    margin-bottom: 8px; line-height: 1.3;
}
.tp-count { font-size: 14px; color: #5a6b82; margin-bottom: 14px; }
.tp-count strong { color: #0d3b66; }

.tp-features {
    list-style: none; margin: 14px 0 20px; flex: 1;
}
.tp-features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: #2a3a4e; padding: 5px 0;
}
.tp-features li svg { flex-shrink: 0; margin-top: 2px; }

.tp-price-row {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px;
}
.tp-price-row .tp-price {
    font-size: 28px; font-weight: 800; color: #0b1a2e;
}
.tp-price-row .tp-old-price {
    font-size: 18px; color: #8a9bb0; text-decoration: line-through;
}

.tp-btn-buy {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 14px 20px;
    font-size: 16px; font-weight: 700; font-family: inherit;
    border: none; border-radius: 10px; color: #fff;
    cursor: pointer; transition: opacity .2s, transform .15s;
    text-decoration: none;
}
.tp-btn-buy:hover { opacity: .88; transform: scale(1.02); }
.tp-btn-buy:active { transform: scale(.97); }
.tp-card[data-cat="ces"] .tp-btn-buy     { background: #0d3b66; }
.tp-card[data-cat="cbt"] .tp-btn-buy     { background: #1a6ea8; }
.tp-card[data-cat="mintra"] .tp-btn-buy  { background: #1b7a4a; }
.tp-card[data-cat="sets"] .tp-btn-buy    { background: #8a2b5b; }
.tp-card[data-cat="delta"] .tp-btn-buy   { background: #b45a1c; }

.tp-payment-icons {
    display: flex; justify-content: center;
    gap: 12px; margin-top: 20px; opacity: .5;
}
.tp-payment-icons img { height: 22px; width: auto; }
.tp-payment-icons svg { height: 22px; width: auto; }

.tp-notice {
    text-align: center; margin-top: 48px; padding: 24px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
    color: #4a5a72; font-size: 15px;
    border: 1px dashed #d0d9e6;
}
.tp-notice strong { color: #0d3b66; }

@media (max-width: 768px) {
    .tp-wrap { padding: 24px 16px; }
    .tp-grid { grid-template-columns: 1fr; }
    .tp-tabs { gap: 8px; }
    .tp-tabs button { padding: 8px 18px; font-size: 14px; }
}
@media (max-width: 400px) {
    .tp-card { padding: 24px 18px; }
    .tp-price-row .tp-price { font-size: 24px; }
}