.tb-wrap{--tb-primary:#22a6a1;--tb-secondary:#e8b33a;--tb-line:#7cc8c4;--tb-navy:#0e4a6b;--tb-hl:#22a6a1;--tb-sub:#6b7a8c;--tb-pill-bg:#d5eeee;--tb-pill-color:#0e4a6b;--tb-cardbg:#fff;--tb-stitle:#0e4a6b;--tb-sdesc:#6b7a8c;--tb-numcolor:#fff;--tb-badge-color:#0e4a6b;--tb-radius:22px;--tb-gap:28px;--tb-cols:4;position:relative;overflow:hidden;padding:56px 28px;background:#f7fbfb;font-family:inherit;box-sizing:border-box}
.tb-wrap *{box-sizing:border-box}
.tb-head{position:relative;z-index:1;text-align:center;margin-bottom:56px}
.tb-pill{display:inline-block;padding:6px 20px;border-radius:999px;background:var(--tb-pill-bg);color:var(--tb-pill-color);font-size:14px;margin-bottom:14px}
.tb-title{margin:0 0 12px;font-size:40px;font-weight:800;line-height:1.35;color:var(--tb-navy)}
.tb-title span{color:var(--tb-hl)}
.tb-sub{margin:0;font-size:17px;color:var(--tb-sub)}
.tb-steps{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--tb-gap) + 16px) var(--tb-gap)}
.tb-step{--acc:var(--tb-primary);position:relative;display:block;text-decoration:none;text-align:center;background:var(--tb-cardbg);border-radius:var(--tb-radius);padding:12px 12px 24px;flex:0 0 calc((100% - (var(--tb-cols) - 1) * var(--tb-gap)) / var(--tb-cols));max-width:calc((100% - (var(--tb-cols) - 1) * var(--tb-gap)) / var(--tb-cols))}
.tb-num{position:absolute;top:-16px;left:-8px;z-index:2;width:52px;height:52px;border-radius:50%;background:var(--acc);color:var(--tb-numcolor);border:4px solid #fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;line-height:1}
.tb-img{display:block;width:100%;height:150px;object-fit:cover;border-radius:16px}
.tb-badge{display:inline-block;margin:14px 0 8px;padding:3px 16px;border-radius:999px;font-size:12px;color:var(--tb-badge-color);background:color-mix(in srgb,var(--acc) 20%,#fff)}
.tb-stitle{margin:6px 0 8px;font-size:19px;font-weight:800;line-height:1.5;color:var(--tb-stitle)}
.tb-sdesc{margin:0;padding:0 8px;font-size:14px;line-height:1.9;color:var(--tb-sdesc)}

/* فلش بین کارت‌ها */
.tb-arrows .tb-step:not(.tb-row-end)::after{content:"";position:absolute;top:80px;width:26px;height:26px;right:calc(-1 * var(--tb-gap) / 2 - 13px);background:var(--tb-line);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.tb-rtl.tb-arrows .tb-step:not(.tb-row-end)::after{right:auto;left:calc(-1 * var(--tb-gap) / 2 - 13px);transform:scaleX(-1)}
.tb-rtl .tb-num{left:-8px;right:auto}

/* خط اتصال عمودی وقتی کارت‌ها تک‌ستونه‌اند */
.tb-single .tb-step:not(:last-child)::before{content:"";position:absolute;left:50%;top:100%;height:calc(var(--tb-gap) + 16px);border-left:2px dashed var(--tb-line)}

/* تزئینات */
.tb-decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.tb-sun{position:absolute;top:36px;left:7%;width:90px}
.tb-rainbow{position:absolute;top:24px;right:5%;width:170px}

@media (max-width:1024px){
	.tb-title{font-size:32px}
	.tb-arrows .tb-step::after{display:none!important}
	.tb-rainbow{width:120px}.tb-sun{width:64px}
}
@media (max-width:767px){
	.tb-wrap{padding:40px 16px}
	.tb-head{margin-bottom:40px}
	.tb-title{font-size:26px}
	.tb-sub{font-size:15px}
	.tb-sun{width:44px;left:4%;top:18px}
	.tb-rainbow{width:84px;right:4%;top:14px}
	.tb-num{width:44px;height:44px;font-size:17px}
}

/* موبایل با ۲ کارت در هر ردیف */
@media (max-width:767px){
	.tb-compact .tb-step{padding:8px 8px 16px}
	.tb-compact .tb-img{height:100px;border-radius:12px}
	.tb-compact .tb-num{width:34px;height:34px;font-size:14px;top:-12px;left:-6px;border-width:3px}
	.tb-compact .tb-badge{font-size:10px;padding:2px 10px;margin:10px 0 6px}
	.tb-compact .tb-stitle{font-size:14px;margin:4px 0 6px}
	.tb-compact .tb-sdesc{font-size:12px;line-height:1.7;padding:0 2px}
}
