/* ============================================================
   TBS Skill Jatra – Landing Page Styles  v1.2.6
   Scoped under .tbs-sj-wrap to prevent theme bleed-in/out.
   ============================================================ */

/* ---- CSS Variables (scoped so they don't pollute :root) ---- */
.tbs-sj-wrap {
	--sj-primary:        #16a34a;
	--sj-primary-dark:   #15803d;
	--sj-primary-light:  #dcfce7;
	--sj-accent:         #0ea5e9;
	--sj-text-dark:      #0f172a;
	--sj-text-mid:       #475569;
	--sj-text-muted:     #94a3b8;
	--sj-border:         #e2e8f0;
	--sj-card-bg:        #f8fafc;
	--sj-white:          #ffffff;
	--sj-shadow-sm:      0 1px 4px rgba(15, 23, 42, 0.07);
	--sj-shadow-md:      0 4px 20px rgba(15, 23, 42, 0.10);
	--sj-shadow-lg:      0 8px 32px rgba(15, 23, 42, 0.12);
	--sj-radius:         14px;
	--sj-radius-sm:      8px;
	--sj-radius-pill:    100px;
	--sj-header-h:       70px;
}

/* ---- Isolation reset — stop theme styles bleeding in ---- */
.tbs-sj-wrap,
.tbs-sj-wrap *,
.tbs-sj-wrap *::before,
.tbs-sj-wrap *::after {
	box-sizing:  border-box;
	font-family: inherit;
}

/* Reset common theme overrides on bare elements inside our scope */
.tbs-sj-wrap h1,
.tbs-sj-wrap h2,
.tbs-sj-wrap h3,
.tbs-sj-wrap h4,
.tbs-sj-wrap p,
.tbs-sj-wrap ul,
.tbs-sj-wrap ol,
.tbs-sj-wrap li,
.tbs-sj-wrap a,
.tbs-sj-wrap button,
.tbs-sj-wrap input,
.tbs-sj-wrap img,
.tbs-sj-wrap svg {
	margin:     0;
	padding:    0;
	border:     0;
	outline:    0;
	background: none;
	color:      inherit;
	font:       inherit;
	line-height: inherit;
	list-style: none;
	text-decoration: none;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}

/* Images shouldn't overflow their containers */
.tbs-sj-wrap img,
.tbs-sj-wrap svg {
	max-width:  100%;
	display:    block;
}

/* Buttons should not inherit UA / theme button styles */
.tbs-sj-wrap button {
	cursor:     pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* ============================================================
   SHARED: BUTTONS
   ============================================================ */

.tbs-sj-wrap .tbs-sj-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	padding:         12px 26px;
	border-radius:   var(--sj-radius-sm);
	font-size:       15px;
	font-weight:     600;
	line-height:     1;
	text-decoration: none;
	cursor:          pointer;
	border:          2px solid transparent;
	transition:      background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tbs-sj-wrap .tbs-sj-btn:focus-visible {
	outline:        3px solid var(--sj-primary-light);
	outline-offset: 2px;
}

.tbs-sj-wrap .tbs-sj-btn--primary {
	background:   var(--sj-primary);
	color:        var(--sj-white);
	border-color: var(--sj-primary);
}

.tbs-sj-wrap .tbs-sj-btn--primary:hover {
	background:   var(--sj-primary-dark);
	border-color: var(--sj-primary-dark);
	color:        var(--sj-white);
	box-shadow:   0 4px 14px rgba(22, 163, 74, 0.35);
	transform:    translateY(-1px);
}

.tbs-sj-wrap .tbs-sj-btn--outline {
	background:   transparent;
	color:        var(--sj-primary);
	border-color: var(--sj-primary);
}

.tbs-sj-wrap .tbs-sj-btn--outline:hover {
	background:  var(--sj-primary);
	color:       var(--sj-white);
	box-shadow:  0 4px 14px rgba(22, 163, 74, 0.25);
	transform:   translateY(-1px);
}

.tbs-sj-wrap .tbs-sj-btn--ghost {
	background:   transparent;
	color:        var(--sj-text-mid);
	border-color: var(--sj-border);
}

.tbs-sj-wrap .tbs-sj-btn--ghost:hover {
	border-color: var(--sj-primary);
	color:        var(--sj-primary);
	background:   var(--sj-primary-light);
}

/* ============================================================
   SHARED: SECTION HEADING
   ============================================================ */

.tbs-sj-wrap .tbs-sj-section-heading {
	text-align:    center;
	margin-bottom: 52px;
}

.tbs-sj-wrap .tbs-sj-section-title {
	font-size:      clamp(26px, 3.5vw, 34px);
	font-weight:    800;
	color:          var(--sj-text-dark);
	margin:         0 0 12px;
	line-height:    1.2;
	letter-spacing: -0.4px;
}

.tbs-sj-wrap .tbs-sj-section-sub {
	font-size:     16px;
	color:         var(--sj-text-mid);
	margin:        0 auto;
	max-width:     560px;
	line-height:   1.6;
}

/* ============================================================
   HEADER
   ============================================================ */

.tbs-sj-wrap .tbs-sj-header {
	background:    var(--sj-white);
	border-bottom: 1px solid var(--sj-border);
	position:      sticky;
	top:           0;
	z-index:       9999;
	box-shadow:    var(--sj-shadow-sm);
}

.tbs-sj-wrap .tbs-sj-header__inner {
	max-width:   1240px;
	margin:      0 auto;
	padding:     0 28px;
	height:      var(--sj-header-h);
	display:     flex;
	align-items: center;
	gap:         32px;
}

/* Logo */
.tbs-sj-wrap .tbs-sj-header__logo {
	flex-shrink: 0;
}

.tbs-sj-wrap .tbs-sj-header__logo a {
	text-decoration: none;
	display:         flex;
	align-items:     center;
}

.tbs-sj-wrap .tbs-sj-header__logo-img {
	height:  42px;
	width:   auto;
	display: block;
}

.tbs-sj-wrap .tbs-sj-header__logo-text {
	font-size:      22px;
	font-weight:    800;
	color:          var(--sj-primary);
	letter-spacing: -0.5px;
}

/* Nav */
.tbs-sj-wrap .tbs-sj-header__nav {
	flex: 1;
}

.tbs-sj-wrap .tbs-sj-header__nav-list {
	display:     flex;
	align-items: center;
	gap:         4px;
	list-style:  none;
	margin:      0;
	padding:     0;
}

.tbs-sj-wrap .tbs-sj-header__nav-list li a {
	display:         block;
	padding:         8px 14px;
	font-size:       14px;
	font-weight:     500;
	color:           var(--sj-text-mid);
	text-decoration: none;
	border-radius:   var(--sj-radius-sm);
	transition:      color 0.2s, background 0.2s;
}

.tbs-sj-wrap .tbs-sj-header__nav-list li a:hover {
	color:      var(--sj-primary);
	background: var(--sj-primary-light);
}

/* Header CTA */
.tbs-sj-wrap .tbs-sj-header__cta {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-shrink: 0;
}

.tbs-sj-wrap .tbs-sj-header__cta .tbs-sj-btn {
	padding:   9px 20px;
	font-size: 13.5px;
}

/* ---- Hamburger button ---- */
.tbs-sj-wrap .tbs-sj-hamburger {
	display:         none;
	flex-direction:  column;
	justify-content: center;
	align-items:     center;
	gap:             5px;
	width:           40px;
	height:          40px;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	padding:         6px;
	border-radius:   var(--sj-radius-sm);
	margin-left:     auto;
	transition:      background 0.2s;
	flex-shrink:     0;
}

.tbs-sj-wrap .tbs-sj-hamburger:hover {
	background: var(--sj-primary-light);
}

.tbs-sj-wrap .tbs-sj-hamburger__bar {
	display:         block;
	width:           22px;
	height:          2px;
	background:      var(--sj-text-dark);
	border-radius:   2px;
	transition:      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
	                 opacity   0.25s ease,
	                 width     0.25s ease;
	transform-origin: center;
}

.tbs-sj-wrap .tbs-sj-hamburger[aria-expanded="true"] .tbs-sj-hamburger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.tbs-sj-wrap .tbs-sj-hamburger[aria-expanded="true"] .tbs-sj-hamburger__bar:nth-child(2) {
	opacity:   0;
	transform: scaleX(0);
}
.tbs-sj-wrap .tbs-sj-hamburger[aria-expanded="true"] .tbs-sj-hamburger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Drawer (side panel) ---- */

/*
 * Drawer — scoped to work in two states:
 * 1. Normal: .tbs-sj-wrap .tbs-sj-drawer  (drawer is child of wrap)
 * 2. Teleported: .tbs-sj-drawer.tbs-sj-wrap  (JS moves drawer to <body> and adds .tbs-sj-wrap)
 * Using :is() collapses both into one rule set.
 */

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) {
	display:        none;
	position:       fixed;
	inset:          0;
	z-index:        99999;
	pointer-events: none;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap).is-open {
	pointer-events: auto;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__backdrop {
	position:   absolute;
	inset:      0;
	background: transparent;
	opacity:    0;
	transition: opacity 0.35s ease;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap).is-open .tbs-sj-drawer__backdrop {
	opacity: 1;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__panel {
	position:            absolute;
	top:                 0;
	right:               0;
	bottom:              0;
	width:               min(340px, 88vw);
	background:          var(--sj-white, #ffffff);
	box-shadow:          -8px 0 48px rgba(15, 23, 42, 0.16);
	display:             flex;
	flex-direction:      column;
	overflow-y:          auto;
	overscroll-behavior: contain;
	transform:           translateX(100%);
	transition:          transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius:       20px 0 0 20px;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap).is-open .tbs-sj-drawer__panel {
	transform: translateX(0);
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         20px 24px 16px;
	border-bottom:   1px solid var(--sj-border, #e2e8f0);
	flex-shrink:     0;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__logo a {
	text-decoration: none;
	display:         flex;
	align-items:     center;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	background:      var(--sj-card-bg, #f8fafc);
	border:          1px solid var(--sj-border, #e2e8f0);
	border-radius:   50%;
	cursor:          pointer;
	color:           var(--sj-text-mid, #475569);
	transition:      background 0.2s, color 0.2s, transform 0.2s;
	flex-shrink:     0;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__close:hover {
	background:   var(--sj-primary, #16a34a);
	color:        var(--sj-white, #ffffff);
	border-color: var(--sj-primary, #16a34a);
	transform:    rotate(90deg);
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__nav {
	flex:    1;
	padding: 12px 16px;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__nav-list {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__nav-item {
	opacity:    0;
	transform:  translateX(24px);
	transition: opacity   0.32s ease calc(var(--item-i, 0) * 55ms + 80ms),
	            transform 0.32s ease calc(var(--item-i, 0) * 55ms + 80ms);
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap).is-open .tbs-sj-drawer__nav-item {
	opacity:   1;
	transform: translateX(0);
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__nav-link {
	display:         flex;
	align-items:     center;
	padding:         13px 16px;
	font-size:       15px;
	font-weight:     500;
	color:           var(--sj-text-dark, #0f172a);
	text-decoration: none;
	border-radius:   var(--sj-radius-sm, 8px);
	transition:      background 0.2s, color 0.2s, padding-left 0.2s;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__nav-link:hover {
	background:   var(--sj-primary-light, #dcfce7);
	color:        var(--sj-primary, #16a34a);
	padding-left: 22px;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__cta {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	padding:        16px 20px 28px;
	border-top:     1px solid var(--sj-border, #e2e8f0);
	flex-shrink:    0;
}

:is(.tbs-sj-wrap .tbs-sj-drawer, .tbs-sj-drawer.tbs-sj-wrap) .tbs-sj-drawer__btn {
	width:           100%;
	justify-content: center;
	font-size:       14.5px;
	padding:         13px 20px;
}

/* ============================================================
   HERO  (two-column: text left, image right)
   ============================================================ */

.tbs-sj-wrap .tbs-sj-hero {
	background:      linear-gradient(155deg, #f0fdf4 0%, #f8fafc 45%, #ffffff 100%);
	min-height:      calc(100dvh - var(--sj-header-h));
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	position:        relative;
	overflow:        hidden;
}

.tbs-sj-wrap .tbs-sj-hero::before,
.tbs-sj-wrap .tbs-sj-hero::after {
	content:        '';
	position:       absolute;
	border-radius:  50%;
	pointer-events: none;
	z-index:        0;
}

.tbs-sj-wrap .tbs-sj-hero::before {
	width:      560px;
	height:     560px;
	background: radial-gradient(circle, rgba(22,163,74,0.09) 0%, transparent 70%);
	top:        -160px;
	right:      -120px;
}

.tbs-sj-wrap .tbs-sj-hero::after {
	width:      400px;
	height:     400px;
	background: radial-gradient(circle, rgba(14,165,233,0.07) 0%, transparent 70%);
	bottom:     -120px;
	left:       -100px;
}

.tbs-sj-wrap .tbs-sj-hero__body {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	gap:             52px;
	padding:         60px 28px 52px;
	width:           100%;
	max-width:       1240px;
	margin-inline:   auto;
	position:        relative;
	z-index:         2;
	justify-content: center;
}

.tbs-sj-wrap .tbs-sj-hero__columns {
	display:     flex;
	align-items: center;
	gap:         60px;
	width:       100%;
}

.tbs-sj-wrap .tbs-sj-hero__inner {
	flex:           1 1 0;
	min-width:      0;
	position:       relative;
	z-index:        2;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	text-align:     left;
}

.tbs-sj-wrap .tbs-sj-hero__side {
	flex:            0 0 45%;
	max-width:       45%;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.tbs-sj-wrap .tbs-sj-hero__side-img {
	width:      100%;
	height:     auto;
	max-height: 520px;
	object-fit: contain;
	display:    block;
}

.tbs-sj-wrap .tbs-sj-hero__badge {
	display:        inline-block;
	background:     var(--sj-primary-light);
	color:          var(--sj-primary);
	font-size:      13px;
	font-weight:    700;
	padding:        6px 16px;
	border-radius:  var(--sj-radius-pill);
	margin-bottom:  24px;
	letter-spacing: 0.2px;
	border:         1px solid rgba(22,163,74,0.2);
}

.tbs-sj-wrap .tbs-sj-hero__headline {
	font-size:      clamp(34px, 5.5vw, 60px);
	font-weight:    800;
	color:          var(--sj-text-dark);
	line-height:    1.1;
	margin:         0 0 22px;
	letter-spacing: -1.5px;
}

.tbs-sj-wrap .tbs-sj-hero__sub {
	font-size:   18px;
	color:       var(--sj-text-mid);
	line-height: 1.65;
	margin:      0 0 42px;
	max-width:   520px;
}

.tbs-sj-wrap .tbs-sj-hero__ctas {
	display:     flex;
	align-items: center;
	gap:         14px;
	flex-wrap:   wrap;
}

.tbs-sj-wrap .tbs-sj-hero__ctas .tbs-sj-btn--primary,
.tbs-sj-wrap .tbs-sj-hero__ctas .tbs-sj-btn--outline {
	padding:   14px 30px;
	font-size: 15.5px;
}

/* ---- Stats row ---- */
.tbs-sj-wrap .tbs-sj-hero__stats {
	width:    100%;
	position: relative;
	z-index:  2;
}

.tbs-sj-wrap .tbs-sj-hero__stats-grid {
	width:                 100%;
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   12px;
}

.tbs-sj-wrap .tbs-sj-hero__stat-card {
	background:              rgba(255,255,255,0.82);
	backdrop-filter:         blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border:                  1px solid rgba(255,255,255,0.9);
	box-shadow:              0 4px 24px rgba(15,23,42,0.08);
	border-radius:           var(--sj-radius);
	padding:                 22px 16px;
	text-align:              center;
	cursor:                  default;
	transition:              transform 0.25s, box-shadow 0.25s, background 0.25s;
}

.tbs-sj-wrap .tbs-sj-hero__stat-card:hover {
	transform:  translateY(-4px);
	box-shadow: 0 8px 32px rgba(22,163,74,0.15);
	background: rgba(255,255,255,0.96);
}

.tbs-sj-wrap .tbs-sj-hero__stat-value {
	display:       block;
	font-size:     clamp(28px, 3.5vw, 40px);
	font-weight:   800;
	color:         var(--sj-primary);
	line-height:   1;
	margin-bottom: 6px;
	transition:    transform 0.2s;
}

.tbs-sj-wrap .tbs-sj-hero__stat-card:hover .tbs-sj-hero__stat-value {
	transform: scale(1.06);
}

.tbs-sj-wrap .tbs-sj-hero__stat-label {
	display:        block;
	font-size:      11.5px;
	font-weight:    600;
	color:          var(--sj-text-mid);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.tbs-sj-wrap .tbs-sj-hero__stat-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      var(--sj-primary-light);
	margin:          0 auto 10px;
	color:           var(--sj-primary);
	transition:      background 0.25s, color 0.25s, transform 0.25s;
}

.tbs-sj-wrap .tbs-sj-hero__stat-icon svg,
.tbs-sj-wrap .tbs-sj-hero__stat-icon i {
	width:     16px;
	height:    16px;
	font-size: 15px;
}

.tbs-sj-wrap .tbs-sj-hero__stat-card:hover .tbs-sj-hero__stat-icon {
	background: var(--sj-primary);
	color:      var(--sj-white);
	transform:  scale(1.1);
}

.tbs-sj-wrap .tbs-sj-hero__stat-card:hover .tbs-sj-hero__stat-icon i,
.tbs-sj-wrap .tbs-sj-hero__stat-card:hover .tbs-sj-hero__stat-icon svg,
.tbs-sj-wrap .tbs-sj-hero__stat-card:hover .tbs-sj-hero__stat-icon svg path,
.tbs-sj-wrap .tbs-sj-hero__stat-card:hover .tbs-sj-hero__stat-icon svg *[fill]:not([fill="none"]) {
	color:  var(--sj-white);
	fill:   var(--sj-white);
	stroke: none;
}

/* ---- Hero modifiers ---- */
.tbs-sj-wrap .tbs-sj-hero--no-blobs::before,
.tbs-sj-wrap .tbs-sj-hero--no-blobs::after {
	display: none;
}

.tbs-sj-wrap .tbs-sj-hero__overlay {
	position:       absolute;
	inset:          0;
	z-index:        0;
	pointer-events: none;
	background:     transparent;
}

/* ---- Floating decorative items (only shown when no side image) ---- */
@keyframes sj-float-up {
	0%, 100% { transform: translateY(calc(-50% + 0px)); }
	50%      { transform: translateY(calc(-50% - 52px)); }
}

@keyframes sj-float-down {
	0%, 100% { transform: translateY(calc(-50% + 0px)); }
	50%      { transform: translateY(calc(-50% + 52px)); }
}

.tbs-sj-wrap .tbs-sj-hero__floater {
	position:       absolute;
	top:            50%;
	pointer-events: none;
	z-index:        0;
}

.tbs-sj-wrap .tbs-sj-hero__floater--left {
	left:      calc(50% - 620px + 28px);
	width:     120px;
	height:    120px;
	animation: sj-float-up 4s ease-in-out infinite;
}

.tbs-sj-wrap .tbs-sj-hero__floater--right {
	right:     calc(50% - 620px + 28px);
	width:     90px;
	height:    90px;
	animation: sj-float-down 4s ease-in-out infinite;
}

.tbs-sj-wrap .tbs-sj-floater__shape {
	width:         100%;
	height:        100%;
	border-radius: 50%;
	background:    rgba(22,163,74,0.12);
}

.tbs-sj-wrap .tbs-sj-hero__floater--right .tbs-sj-floater__shape {
	background:    rgba(14,165,233,0.10);
	border-radius: 40% 60% 55% 45% / 50% 50% 50% 50%;
}

.tbs-sj-wrap .tbs-sj-floater__img {
	width:         100%;
	height:        100%;
	object-fit:    contain;
	display:       block;
	border-radius: 50%;
}

/* ---- Hero responsive image visibility modifiers ---- */
.tbs-sj-wrap .tbs-sj-hero--hide-img-mobile .tbs-sj-hero__side { display: none; }
.tbs-sj-wrap .tbs-sj-hero--hide-img-tablet .tbs-sj-hero__side { display: none; }

/* ============================================================
   CLIENT LOGOS
   ============================================================ */

.tbs-sj-wrap .tbs-sj-clients {
	padding:    80px 28px;
	background: var(--sj-card-bg);
}

.tbs-sj-wrap .tbs-sj-clients__inner {
	max-width: 1200px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-clients .tbs-sj-section-heading {
	margin-bottom: 44px;
}

.tbs-sj-wrap .tbs-sj-clients .tbs-sj-section-title {
	color: var(--sj-text-dark);
}

.tbs-sj-wrap .tbs-sj-clients__grid {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             20px;
}

.tbs-sj-wrap .tbs-sj-client-card {
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.tbs-sj-wrap .tbs-sj-client-logo {
	width:           100px;
	height:          100px;
	border-radius:   50%;
	background:      var(--sj-white);
	border:          1.5px solid var(--sj-border);
	box-shadow:      var(--sj-shadow-sm);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	padding:         18px;
	transition:      box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.tbs-sj-wrap .tbs-sj-client-logo:hover {
	box-shadow:   0 6px 24px rgba(22,163,74,0.15);
	transform:    translateY(-4px) scale(1.06);
	border-color: rgba(22,163,74,0.3);
}

.tbs-sj-wrap .tbs-sj-client-logo img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	display:    block;
}

.tbs-sj-wrap .tbs-sj-client-logo--placeholder {
	font-size:   26px;
	font-weight: 800;
	color:       var(--sj-primary);
	background:  var(--sj-primary-light);
}

.tbs-sj-wrap .tbs-sj-client-name {
	display: none;
}

/* ============================================================
   FEATURED JOBS
   ============================================================ */

.tbs-sj-wrap .tbs-sj-featured-jobs {
	padding:    96px 28px;
	background: var(--sj-white);
}

.tbs-sj-wrap .tbs-sj-featured-jobs__inner {
	max-width: 1200px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-featured-jobs__grid {
	display:               grid;
	gap:                   20px;
	grid-template-columns: repeat(2, 1fr);
}

.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.tbs-sj-wrap .tbs-sj-job-card {
	background:     var(--sj-white);
	border:         1.5px solid var(--sj-border);
	border-radius:  var(--sj-radius);
	padding:        0;
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	transition:     box-shadow 0.3s, transform 0.3s, border-color 0.3s;
	box-shadow:     var(--sj-shadow-sm);
}

.tbs-sj-wrap .tbs-sj-job-card:hover {
	box-shadow:   0 12px 40px rgba(22, 163, 74, 0.12);
	transform:    translateY(-4px);
	border-color: rgba(22, 163, 74, 0.4);
}

.tbs-sj-wrap .tbs-sj-job-card::before {
	content:     '';
	display:     block;
	height:      3px;
	background:  linear-gradient(90deg, var(--sj-primary) 0%, var(--sj-accent) 100%);
	opacity:     0;
	transition:  opacity 0.3s;
	flex-shrink: 0;
}

.tbs-sj-wrap .tbs-sj-job-card:hover::before {
	opacity: 1;
}

.tbs-sj-wrap .tbs-sj-job-card__body {
	padding:        20px 20px 16px;
	display:        flex;
	flex-direction: column;
	gap:            14px;
	flex:           1;
}

.tbs-sj-wrap .tbs-sj-job-card__top {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
}

.tbs-sj-wrap .tbs-sj-job-card__logo {
	flex-shrink:     0;
	width:           52px;
	height:          52px;
	border-radius:   12px;
	overflow:        hidden;
	border:          1.5px solid var(--sj-border);
	background:      var(--sj-card-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         6px;
	transition:      border-color 0.2s;
}

.tbs-sj-wrap .tbs-sj-job-card:hover .tbs-sj-job-card__logo {
	border-color: rgba(22,163,74,0.35);
}

.tbs-sj-wrap .tbs-sj-job-card__logo img {
	width:      100%;
	height:     100%;
	object-fit: contain;
}

.tbs-sj-wrap .tbs-sj-job-card__logo--placeholder {
	background:    var(--sj-primary-light);
	font-size:     20px;
	font-weight:   800;
	color:         var(--sj-primary);
	border-radius: 12px;
}

.tbs-sj-wrap .tbs-sj-job-card__meta {
	flex:      1;
	min-width: 0;
}

.tbs-sj-wrap .tbs-sj-job-card__name {
	font-size:   14.5px;
	font-weight: 700;
	color:       var(--sj-text-dark);
	margin:      0 0 4px;
	line-height: 1.35;
	word-break:  break-word;
	transition:  color 0.2s;
}

.tbs-sj-wrap .tbs-sj-job-card:hover .tbs-sj-job-card__name {
	color: var(--sj-primary);
}

.tbs-sj-wrap .tbs-sj-job-card__dept {
	font-size:   12px;
	color:       var(--sj-text-muted);
	margin:      0;
	line-height: 1.4;
}

.tbs-sj-wrap .tbs-sj-job-card__badge-row {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.tbs-sj-wrap .tbs-sj-job-card__openings {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	font-size:     12px;
	font-weight:   600;
	color:         #92400e;
	background:    #fffbeb;
	border:        1.5px solid #fcd34d;
	padding:       4px 11px;
	border-radius: var(--sj-radius-pill);
	line-height:   1;
}

.tbs-sj-wrap .tbs-sj-job-card__openings-star {
	color:     #f59e0b;
	font-size: 10px;
}

.tbs-sj-wrap .tbs-sj-job-card__footer {
	padding:     0 20px 18px;
	flex-shrink: 0;
}

.tbs-sj-wrap .tbs-sj-job-card__see-btn {
	width:           100%;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	background:      transparent;
	border:          1.5px solid var(--sj-border);
	border-radius:   var(--sj-radius-sm);
	padding:         10px 14px;
	font-size:       13px;
	font-weight:     600;
	color:           var(--sj-text-mid);
	cursor:          pointer;
	transition:      border-color 0.2s, color 0.2s, background 0.2s;
	text-decoration: none;
	line-height:     1;
}

.tbs-sj-wrap .tbs-sj-job-card__see-btn:hover,
.tbs-sj-wrap .tbs-sj-job-card:hover .tbs-sj-job-card__see-btn {
	border-color: var(--sj-primary);
	color:        var(--sj-primary);
	background:   var(--sj-primary-light);
}

.tbs-sj-wrap .tbs-sj-job-card__see-btn svg {
	flex-shrink: 0;
	transition:  transform 0.2s;
}

.tbs-sj-wrap .tbs-sj-job-card__see-btn:hover svg {
	transform: translateX(3px);
}

/* ============================================================
   EMPOWERING (dark feature grid)
   ============================================================ */

.tbs-sj-wrap .tbs-sj-empowering {
	padding:    96px 28px;
	background: #0f172a;
}

.tbs-sj-wrap .tbs-sj-empowering__inner {
	max-width: 1200px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-empowering .tbs-sj-section-heading {
	margin-bottom: 56px;
}

.tbs-sj-wrap .tbs-sj-empowering__title {
	color:      var(--sj-white);
	max-width:  760px;
	margin-left:  auto;
	margin-right: auto;
}

.tbs-sj-wrap .tbs-sj-empowering__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}

.tbs-sj-wrap .tbs-sj-emp-card {
	background:     linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
	border:         1.5px solid rgba(255,255,255,0.14);
	border-radius:  var(--sj-radius);
	padding:        32px 28px;
	transition:     box-shadow 0.3s, transform 0.3s, border-color 0.3s, background 0.3s;
	position:       relative;
	overflow:       hidden;
	box-shadow:     0 4px 18px rgba(0,0,0,0.18);
}

.tbs-sj-wrap .tbs-sj-emp-card::after {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     linear-gradient(135deg, rgba(22,163,74,0.10) 0%, transparent 60%);
	pointer-events: none;
}

.tbs-sj-wrap .tbs-sj-emp-card:hover {
	background:   linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);
	box-shadow:   0 14px 40px rgba(0,0,0,0.3);
	transform:    translateY(-4px);
	border-color: rgba(22,163,74,0.55);
}

.tbs-sj-wrap .tbs-sj-emp-card__icon {
	width:           52px;
	height:          52px;
	border-radius:   12px;
	background:      rgba(22,163,74,0.22);
	border:          1px solid rgba(22,163,74,0.35);
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   20px;
	font-size:       22px;
	color:           var(--sj-white);
	transition:      background 0.2s, transform 0.2s, border-color 0.2s;
	position:        relative;
	z-index:         1;
}

.tbs-sj-wrap .tbs-sj-emp-card__icon i,
.tbs-sj-wrap .tbs-sj-emp-card__icon svg,
.tbs-sj-wrap .tbs-sj-emp-card__icon svg path,
.tbs-sj-wrap .tbs-sj-emp-card__icon svg *[fill]:not([fill="none"]) {
	color:  var(--sj-white);
	fill:   var(--sj-white);
	stroke: none;
}

.tbs-sj-wrap .tbs-sj-emp-card:hover .tbs-sj-emp-card__icon {
	background:   var(--sj-primary);
	border-color: var(--sj-primary);
	color:        var(--sj-white);
	transform:    scale(1.08);
}

.tbs-sj-wrap .tbs-sj-emp-card__icon i,
.tbs-sj-wrap .tbs-sj-emp-card__icon svg {
	width:  22px;
	height: 22px;
}

.tbs-sj-wrap .tbs-sj-emp-card__title {
	font-size:   17px;
	font-weight: 700;
	color:       var(--sj-white);
	margin:      0 0 10px;
	line-height: 1.3;
	position:    relative;
	z-index:     1;
}

.tbs-sj-wrap .tbs-sj-emp-card__desc {
	font-size:   14.5px;
	color:       rgba(255,255,255,0.7);
	line-height: 1.7;
	margin:      0;
	position:    relative;
	z-index:     1;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */

.tbs-sj-wrap .tbs-sj-how {
	padding:    96px 28px;
	background: var(--sj-card-bg);
}

.tbs-sj-wrap .tbs-sj-how__inner {
	max-width: 1140px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-how__content {
	display:     flex;
	align-items: center;
	gap:         60px;
}

.tbs-sj-wrap .tbs-sj-how__left {
	flex: 0 0 70%;
	max-width: 70%;
}

.tbs-sj-wrap .tbs-sj-how__right {
	flex: 0 0 calc(30% - 60px);
	max-width: calc(30% - 60px);
}

.tbs-sj-wrap .tbs-sj-how__content--no-image .tbs-sj-how__left {
	flex:       0 0 100%;
	max-width:  100%;
}

.tbs-sj-wrap .tbs-sj-how__image-wrap {
	border-radius: 16px;
	overflow:      hidden;
	box-shadow:    0 12px 40px rgba(0,0,0,0.10);
}

.tbs-sj-wrap .tbs-sj-how__image {
	display:    block;
	width:      100%;
	height:     auto;
	object-fit: cover;
}

.tbs-sj-wrap .tbs-sj-how .tbs-sj-section-heading {
	margin-bottom: 56px;
	text-align:    left;
}

.tbs-sj-wrap .tbs-sj-how__content--no-image .tbs-sj-section-heading {
	text-align: center;
}

.tbs-sj-wrap .tbs-sj-how__content--no-image .tbs-sj-how__steps {
	max-width: 640px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-how__steps {
	display:        flex;
	flex-direction: column;
}

.tbs-sj-wrap .tbs-sj-how__step {
	display:     flex;
	align-items: flex-start;
	gap:         28px;
}

.tbs-sj-wrap .tbs-sj-how__step-left {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	flex-shrink:    0;
	width:          52px;
	padding-top:    12px; /* matches .tbs-sj-how__step-title padding-top so dot aligns with text */
}

.tbs-sj-wrap .tbs-sj-how__step-dot {
	width:           52px;
	height:          52px;
	border-radius:   50%;
	background:      var(--sj-primary);
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 4px 16px rgba(22,163,74,0.28);
	flex-shrink:     0;
	position:        relative;
	z-index:         1;
}

.tbs-sj-wrap .tbs-sj-how__step-num {
	font-size:      14px;
	font-weight:    800;
	color:          var(--sj-white);
	letter-spacing: 0.5px;
}

.tbs-sj-wrap .tbs-sj-how__step-line {
	flex:       1;
	width:      2px;
	background: linear-gradient(to bottom, rgba(22,163,74,0.6), rgba(22,163,74,0.08));
	margin:     0;
	min-height: 60px;
}

.tbs-sj-wrap .tbs-sj-how__step-content {
	padding: 12px 0 56px;
	flex:    1;
}

.tbs-sj-wrap .tbs-sj-how__step:last-child .tbs-sj-how__step-content {
	padding-bottom: 0;
}

.tbs-sj-wrap .tbs-sj-how__step-title {
	font-size:   18px;
	font-weight: 700;
	color:       var(--sj-text-dark);
	margin:      0 0 8px;
	line-height: 1.35;
	padding-top: 12px;
}

.tbs-sj-wrap .tbs-sj-how__step-desc {
	font-size:   15px;
	color:       var(--sj-text-mid);
	line-height: 1.7;
	margin:      0;
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */

.tbs-sj-wrap .tbs-sj-why {
	padding:    96px 28px;
	background: var(--sj-white);
}

.tbs-sj-wrap .tbs-sj-why__inner {
	max-width: 1040px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-why__table {
	background:    var(--sj-card-bg);
	border:        1.5px solid var(--sj-border);
	border-radius: 20px;
	overflow:      hidden;
	box-shadow:    var(--sj-shadow-md);
}

.tbs-sj-wrap .tbs-sj-why__cols {
	display:               grid;
	grid-template-columns: 1fr 56px 1fr;
}

.tbs-sj-wrap .tbs-sj-why__col-head {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	padding:         22px 28px;
	font-size:       15.5px;
	font-weight:     700;
	color:           var(--sj-white);
	letter-spacing:  0.1px;
}

.tbs-sj-wrap .tbs-sj-why__col--seekers .tbs-sj-why__col-head {
	background: linear-gradient(135deg, var(--sj-primary) 0%, #059669 100%);
}

.tbs-sj-wrap .tbs-sj-why__col--employers .tbs-sj-why__col-head {
	background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.tbs-sj-wrap .tbs-sj-why__col-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	border-radius:   50%;
	background:      rgba(255,255,255,0.2);
	flex-shrink:     0;
}

.tbs-sj-wrap .tbs-sj-why__col {
	display:        flex;
	flex-direction: column;
}

.tbs-sj-wrap .tbs-sj-why__row {
	display:       flex;
	align-items:   flex-start;
	gap:           12px;
	padding:       18px 28px;
	font-size:     14.5px;
	color:         var(--sj-text-dark);
	line-height:   1.55;
	border-bottom: 1px solid var(--sj-border);
	transition:    background 0.2s;
}

.tbs-sj-wrap .tbs-sj-why__row:last-child {
	border-bottom: none;
}

.tbs-sj-wrap .tbs-sj-why__row:hover {
	background: rgba(22,163,74,0.04);
}

.tbs-sj-wrap .tbs-sj-why__col--employers .tbs-sj-why__row:hover {
	background: rgba(14,165,233,0.05);
}

.tbs-sj-wrap .tbs-sj-why__check {
	flex-shrink:     0;
	width:           24px;
	height:          24px;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-top:      1px;
}

.tbs-sj-wrap .tbs-sj-why__col--seekers .tbs-sj-why__check {
	background: var(--sj-primary-light);
	color:      var(--sj-primary);
}

.tbs-sj-wrap .tbs-sj-why__col--employers .tbs-sj-why__check {
	background: #e0f2fe;
	color:      #0ea5e9;
}

.tbs-sj-wrap .tbs-sj-why__divider {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	background:      var(--sj-white);
	border-left:     1px solid var(--sj-border);
	border-right:    1px solid var(--sj-border);
	position:        relative;
}

.tbs-sj-wrap .tbs-sj-why__divider-or {
	position:        sticky;
	top:             50%;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	border-radius:   50%;
	background:      var(--sj-white);
	border:          1.5px solid var(--sj-border);
	font-size:       11px;
	font-weight:     700;
	color:           var(--sj-text-muted);
	text-transform:  uppercase;
	letter-spacing:  0.5px;
	box-shadow:      var(--sj-shadow-sm);
}

/* ============================================================
   FEATURES
   ============================================================ */

.tbs-sj-wrap .tbs-sj-features {
	padding:    96px 28px;
	background: #f8fafc;
}

.tbs-sj-wrap .tbs-sj-features__inner {
	max-width: 1200px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-features__grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap:                   24px;
}

.tbs-sj-wrap .tbs-sj-feat-card {
	background:     var(--sj-card-bg);
	border:         1.5px solid var(--sj-border);
	border-radius:  var(--sj-radius);
	padding:        32px 28px;
	transition:     box-shadow 0.3s, transform 0.3s, border-color 0.3s;
	box-shadow:     var(--sj-shadow-sm);
	position:       relative;
	overflow:       hidden;
}

.tbs-sj-wrap .tbs-sj-feat-card::after {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     linear-gradient(135deg, rgba(22,163,74,0.04) 0%, transparent 60%);
	pointer-events: none;
}

.tbs-sj-wrap .tbs-sj-feat-card:hover {
	box-shadow:   0 12px 40px rgba(22,163,74,0.12);
	transform:    translateY(-4px);
	border-color: rgba(22,163,74,0.35);
}

.tbs-sj-wrap .tbs-sj-feat-card__icon {
	width:           52px;
	height:          52px;
	border-radius:   12px;
	background:      var(--sj-primary-light);
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   20px;
	font-size:       22px;
	color:           var(--sj-primary);
	transition:      background 0.2s, transform 0.2s;
}

.tbs-sj-wrap .tbs-sj-feat-card:hover .tbs-sj-feat-card__icon {
	background: var(--sj-primary);
	color:      var(--sj-white);
	transform:  scale(1.08);
}

.tbs-sj-wrap .tbs-sj-feat-card:hover .tbs-sj-feat-card__icon i,
.tbs-sj-wrap .tbs-sj-feat-card:hover .tbs-sj-feat-card__icon svg,
.tbs-sj-wrap .tbs-sj-feat-card:hover .tbs-sj-feat-card__icon svg path,
.tbs-sj-wrap .tbs-sj-feat-card:hover .tbs-sj-feat-card__icon svg *[fill]:not([fill="none"]) {
	color:  var(--sj-white);
	fill:   var(--sj-white);
	stroke: none;
}

.tbs-sj-wrap .tbs-sj-feat-card__icon i,
.tbs-sj-wrap .tbs-sj-feat-card__icon svg {
	width:  22px;
	height: 22px;
}

.tbs-sj-wrap .tbs-sj-feat-card__title {
	font-size:   17px;
	font-weight: 700;
	color:       var(--sj-text-dark);
	margin:      0 0 10px;
	line-height: 1.3;
}

.tbs-sj-wrap .tbs-sj-feat-card__desc {
	font-size:   14.5px;
	color:       var(--sj-text-mid);
	line-height: 1.7;
	margin:      0;
}

/* ============================================================
   TAG HIGHLIGHTS
   ============================================================ */

.tbs-sj-wrap .tbs-sj-tags {
	padding:    64px 28px;
	background: var(--sj-text-dark);
}

.tbs-sj-wrap .tbs-sj-tags__inner {
	max-width:  1200px;
	margin:     0 auto;
	text-align: center;
}

.tbs-sj-wrap .tbs-sj-tags__eyebrow {
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color:          rgba(255,255,255,0.45);
	margin:         0 0 24px;
}

.tbs-sj-wrap .tbs-sj-tags__cloud {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             12px;
}

.tbs-sj-wrap .tbs-sj-tag {
	display:         inline-flex;
	align-items:     center;
	padding:         10px 20px;
	border-radius:   var(--sj-radius-pill);
	border:          1.5px solid rgba(255,255,255,0.18);
	background:      rgba(255,255,255,0.06);
	color:           rgba(255,255,255,0.8);
	font-size:       14px;
	font-weight:     500;
	text-decoration: none;
	transition:      background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
	backdrop-filter: blur(4px);
}

.tbs-sj-wrap .tbs-sj-tag:hover {
	background:   var(--sj-primary);
	border-color: var(--sj-primary);
	color:        var(--sj-white);
	transform:    translateY(-2px);
}

/* ============================================================
   AI HIRING SOLUTIONS (zigzag list)
   ============================================================ */

.tbs-sj-wrap .tbs-sj-ai-hiring {
	padding:    96px 28px;
	background: var(--sj-white);
	position:   relative;
	overflow:   hidden;
}

.tbs-sj-wrap .tbs-sj-ai-hiring__inner {
	max-width: 980px;
	margin:    0 auto;
	position:  relative;
}

.tbs-sj-wrap .tbs-sj-ai-hiring__eyebrow {
	display:        inline-block;
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color:          var(--sj-primary);
	background:     var(--sj-primary-light);
	padding:        7px 16px;
	border-radius:  var(--sj-radius-pill);
	margin:         0 0 18px;
}

.tbs-sj-wrap .tbs-sj-ai-hiring .tbs-sj-section-heading {
	margin-bottom: 64px;
}

/* ---- zigzag list ---- */
.tbs-sj-wrap .tbs-sj-ai-hiring__list {
	position: relative;
}

.tbs-sj-wrap .tbs-sj-ai-hiring__spine {
	position:   absolute;
	left:       50%;
	top:        6px;
	bottom:     6px;
	width:      2px;
	background: repeating-linear-gradient(
		to bottom,
		var(--sj-border) 0,
		var(--sj-border) 8px,
		transparent 8px,
		transparent 16px
	);
	transform:  translateX(-50%);
}

.tbs-sj-wrap .tbs-sj-ai-row {
	position:        relative;
	display:         flex;
	justify-content: center;
	padding:         34px 0;
}

.tbs-sj-wrap .tbs-sj-ai-row__node {
	position:        absolute;
	left:            50%;
	top:             50%;
	width:           14px;
	height:          14px;
	border-radius:   50%;
	background:      var(--sj-white);
	border:          3px solid var(--sj-primary);
	transform:       translate(-50%, -50%);
	box-shadow:      0 0 0 6px var(--sj-primary-light);
	z-index:         2;
}

.tbs-sj-wrap .tbs-sj-ai-row__content {
	width:           calc(50% - 46px);
	display:         flex;
	align-items:     flex-start;
	gap:             16px;
	background:      var(--sj-card-bg);
	border:          1.5px solid var(--sj-border);
	border-radius:   var(--sj-radius);
	padding:         26px 26px;
	box-shadow:      var(--sj-shadow-sm);
	position:        relative;
	transition:      box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.tbs-sj-wrap .tbs-sj-ai-row:hover .tbs-sj-ai-row__content {
	box-shadow:   0 14px 40px rgba(22,163,74,0.14);
	transform:    translateY(-4px);
	border-color: rgba(22,163,74,0.35);
}

.tbs-sj-wrap .tbs-sj-ai-row--left {
	justify-content: flex-start;
}

.tbs-sj-wrap .tbs-sj-ai-row--right {
	justify-content: flex-end;
}

.tbs-sj-wrap .tbs-sj-ai-row--left .tbs-sj-ai-row__content {
	margin-right: auto;
}

.tbs-sj-wrap .tbs-sj-ai-row--right .tbs-sj-ai-row__content {
	margin-left:    auto;
	flex-direction: row-reverse;
	text-align:     right;
}

.tbs-sj-wrap .tbs-sj-ai-row__num {
	position:       absolute;
	top:            -14px;
	font-size:       12px;
	font-weight:    800;
	letter-spacing: 0.5px;
	color:          var(--sj-white);
	background:     var(--sj-primary);
	width:          26px;
	height:         26px;
	border-radius:  50%;
	display:        flex;
	align-items:    center;
	justify-content: center;
	box-shadow:     0 3px 10px rgba(22,163,74,0.35);
}

.tbs-sj-wrap .tbs-sj-ai-row--left .tbs-sj-ai-row__num {
	left: 26px;
}

.tbs-sj-wrap .tbs-sj-ai-row--right .tbs-sj-ai-row__num {
	right: 26px;
}

.tbs-sj-wrap .tbs-sj-ai-row__icon {
	flex:            0 0 auto;
	width:           50px;
	height:          50px;
	border-radius:   12px;
	background:      var(--sj-primary);
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       21px;
	color:           var(--sj-white);
	box-shadow:      0 6px 18px rgba(22,163,74,0.3);
}

.tbs-sj-wrap .tbs-sj-ai-row__icon i,
.tbs-sj-wrap .tbs-sj-ai-row__icon svg {
	width:  21px;
	height: 21px;
	color:  var(--sj-white);
}

.tbs-sj-wrap .tbs-sj-ai-row__icon svg,
.tbs-sj-wrap .tbs-sj-ai-row__icon svg path,
.tbs-sj-wrap .tbs-sj-ai-row__icon svg *[fill]:not([fill="none"]) {
	fill:   var(--sj-white);
	stroke: none;
}

.tbs-sj-wrap .tbs-sj-ai-row__text {
	flex: 1 1 auto;
}

.tbs-sj-wrap .tbs-sj-ai-row__title {
	font-size:   17px;
	font-weight: 700;
	color:       var(--sj-text-dark);
	margin:      0 0 8px;
	line-height: 1.3;
}

.tbs-sj-wrap .tbs-sj-ai-row__desc {
	font-size:   14.5px;
	color:       var(--sj-text-mid);
	line-height: 1.65;
	margin:      0;
}

/* ============================================================
   CTA BANNER
   ============================================================ */

.tbs-sj-wrap .tbs-sj-cta-banner {
	padding:    96px 28px;
	background: linear-gradient(135deg, var(--sj-primary) 0%, #059669 50%, #0d9488 100%);
	position:   relative;
	overflow:   hidden;
	text-align: center;
}

.tbs-sj-wrap .tbs-sj-cta-banner::before {
	content:        '';
	position:       absolute;
	width:          500px;
	height:         500px;
	border-radius:  50%;
	background:     rgba(255,255,255,0.06);
	top:            -200px;
	right:          -100px;
	pointer-events: none;
}

.tbs-sj-wrap .tbs-sj-cta-banner::after {
	content:        '';
	position:       absolute;
	width:          320px;
	height:         320px;
	border-radius:  50%;
	background:     rgba(255,255,255,0.05);
	bottom:         -120px;
	left:           -60px;
	pointer-events: none;
}

.tbs-sj-wrap .tbs-sj-cta-banner__inner {
	max-width: 760px;
	margin:    0 auto;
	position:  relative;
	z-index:   1;
}

.tbs-sj-wrap .tbs-sj-cta-banner__headline {
	font-size:      clamp(28px, 4.5vw, 46px);
	font-weight:    800;
	color:          var(--sj-white);
	margin:         0 0 18px;
	line-height:    1.15;
	letter-spacing: -0.8px;
}

.tbs-sj-wrap .tbs-sj-cta-banner__sub {
	font-size:   17px;
	color:       rgba(255,255,255,0.82);
	margin:      0 0 40px;
	line-height: 1.6;
}

.tbs-sj-wrap .tbs-sj-cta-banner__btn {
	background:      rgba(255,255,255,0.15);
	color:           var(--sj-white);
	border:          2px solid rgba(255,255,255,0.6);
	padding:         15px 36px;
	font-size:       16px;
	font-weight:     700;
	border-radius:   var(--sj-radius-sm);
	backdrop-filter: blur(6px);
	transition:      background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
	gap:             10px;
}

.tbs-sj-wrap .tbs-sj-cta-banner__btn:hover {
	background:   var(--sj-white);
	color:        var(--sj-primary);
	border-color: var(--sj-white);
	transform:    translateY(-2px);
	box-shadow:   0 8px 28px rgba(0,0,0,0.15);
}

/* ============================================================
   INTERVIEW QUESTIONS / FAQ
   ============================================================ */

.tbs-sj-wrap .tbs-sj-iq {
	padding:    96px 28px;
	background: #f1f5f9;
}

.tbs-sj-wrap .tbs-sj-iq__inner {
	max-width: 1100px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-iq__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   14px;
}

.tbs-sj-wrap .tbs-sj-iq__card {
	display:       flex;
	align-items:   center;
	gap:           18px;
	padding:       20px 24px;
	background:    var(--sj-white);
	border:        1px solid var(--sj-border);
	border-radius: var(--sj-radius);
	border-left:   3px solid var(--sj-primary);
}

.tbs-sj-wrap .tbs-sj-iq__num {
	font-size:            12px;
	font-weight:          700;
	color:                var(--sj-primary);
	background:           var(--sj-primary-light);
	border-radius:        var(--sj-radius-sm);
	padding:              5px 9px;
	flex-shrink:          0;
	letter-spacing:       0.4px;
	line-height:          1;
	font-variant-numeric: tabular-nums;
}

.tbs-sj-wrap .tbs-sj-iq__q {
	flex:        1;
	font-size:   15px;
	font-weight: 600;
	color:       var(--sj-text-dark);
	line-height: 1.45;
	margin:      0;
}

/* ============================================================
   FOOTER
   ============================================================ */

.tbs-sj-wrap .tbs-sj-footer {
	background: var(--sj-text-dark);
	padding:    72px 28px 0;
	color:      rgba(255,255,255,0.7);
}

.tbs-sj-wrap .tbs-sj-footer__inner {
	max-width: 1200px;
	margin:    0 auto;
}

.tbs-sj-wrap .tbs-sj-footer__top {
	display:               grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap:                   48px;
	padding-bottom:        64px;
}

.tbs-sj-wrap .tbs-sj-footer__logo-text {
	font-size:      22px;
	font-weight:    800;
	color:          var(--sj-white);
	letter-spacing: -0.5px;
	display:        block;
	margin-bottom:  12px;
}

.tbs-sj-wrap .tbs-sj-footer__logo-img {
	height:        40px;
	width:         auto;
	display:       block;
	margin-bottom: 12px;
}

.tbs-sj-wrap .tbs-sj-footer__tagline {
	font-size:   14px;
	color:       rgba(255,255,255,0.5);
	line-height: 1.65;
	margin:      0;
	max-width:   260px;
}

.tbs-sj-wrap .tbs-sj-footer__col-heading {
	font-size:      12px;
	font-weight:    700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          rgba(255,255,255,0.4);
	margin:         0 0 18px;
}

.tbs-sj-wrap .tbs-sj-footer__links {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.tbs-sj-wrap .tbs-sj-footer__links li a {
	font-size:       14px;
	color:           rgba(255,255,255,0.65);
	text-decoration: none;
	transition:      color 0.2s;
}

.tbs-sj-wrap .tbs-sj-footer__links li a:hover {
	color: var(--sj-white);
}

.tbs-sj-wrap .tbs-sj-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding:    24px 0;
	text-align: center;
}

.tbs-sj-wrap .tbs-sj-footer__copy {
	font-size: 13px;
	color:     rgba(255,255,255,0.35);
	margin:    0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="4"],
	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="3"] {
		grid-template-columns: repeat(2, 1fr);
	}

	.tbs-sj-wrap .tbs-sj-empowering__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.tbs-sj-wrap .tbs-sj-hero__stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tbs-sj-wrap .tbs-sj-hero__columns {
		flex-direction: column;
		gap:            40px;
	}

	.tbs-sj-wrap .tbs-sj-hero__inner {
		align-items: center;
		text-align:  center;
		width:       100%;
	}

	.tbs-sj-wrap .tbs-sj-hero__sub {
		margin-inline: auto;
	}

	.tbs-sj-wrap .tbs-sj-hero__ctas {
		justify-content: center;
	}

	.tbs-sj-wrap .tbs-sj-hero__side {
		flex:      0 0 auto;
		max-width: 50%;
		width:     50%;
	}

	.tbs-sj-wrap .tbs-sj-hero--img-first-mobile .tbs-sj-hero__side  { order: -1; }
	.tbs-sj-wrap .tbs-sj-hero--img-first-mobile .tbs-sj-hero__inner { order:  1; }

	.tbs-sj-wrap .tbs-sj-hero--hide-img-tablet .tbs-sj-hero__side { display: none; }
}

@media (max-width: 768px) {
	.tbs-sj-wrap .tbs-sj-header__nav { display: none; }
	.tbs-sj-wrap .tbs-sj-header__cta { display: none; }
	.tbs-sj-wrap .tbs-sj-hamburger   { display: flex; }
	.tbs-sj-wrap .tbs-sj-drawer      { display: block; }
	.tbs-sj-drawer.tbs-sj-wrap       { display: block; } /* teleported state */

	.tbs-sj-wrap .tbs-sj-hero__body        { padding: 64px 0 40px; }
	.tbs-sj-wrap .tbs-sj-hero__stats       { padding-bottom: 36px; }
	.tbs-sj-wrap .tbs-sj-hero__stats-grid  { gap: 10px; }

	.tbs-sj-wrap .tbs-sj-hero__floater--left,
	.tbs-sj-wrap .tbs-sj-hero__floater--right { display: none; }

	.tbs-sj-wrap .tbs-sj-iq__grid      { grid-template-columns: 1fr; }
	.tbs-sj-wrap .tbs-sj-clients__grid { gap: 14px; }

	.tbs-sj-wrap .tbs-sj-client-logo {
		width:   80px;
		height:  80px;
		padding: 14px;
	}

	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="2"],
	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="3"],
	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="4"] {
		grid-template-columns: repeat(2, 1fr);
	}

	.tbs-sj-wrap .tbs-sj-how__content {
		flex-direction: column;
	}

	.tbs-sj-wrap .tbs-sj-how__left,
	.tbs-sj-wrap .tbs-sj-how__right {
		flex:      unset;
		max-width: 100%;
		width:     100%;
	}

	.tbs-sj-wrap .tbs-sj-ai-hiring__spine,
	.tbs-sj-wrap .tbs-sj-ai-row__node {
		display: none;
	}

	.tbs-sj-wrap .tbs-sj-ai-row,
	.tbs-sj-wrap .tbs-sj-ai-row--left,
	.tbs-sj-wrap .tbs-sj-ai-row--right {
		justify-content: flex-start;
		padding:         14px 0;
	}

	.tbs-sj-wrap .tbs-sj-ai-row--left .tbs-sj-ai-row__content,
	.tbs-sj-wrap .tbs-sj-ai-row--right .tbs-sj-ai-row__content {
		width:          100%;
		margin:         0;
		flex-direction: row;
		text-align:     left;
	}

	.tbs-sj-wrap .tbs-sj-ai-row--left .tbs-sj-ai-row__num,
	.tbs-sj-wrap .tbs-sj-ai-row--right .tbs-sj-ai-row__num {
		left:  26px;
		right: auto;
	}

	.tbs-sj-wrap .tbs-sj-why__cols {
		grid-template-columns: 1fr;
	}

	.tbs-sj-wrap .tbs-sj-why__divider {
		display:        flex;
		flex-direction: row;
		border-left:    none;
		border-right:   none;
		border-top:     1px solid var(--sj-border);
		border-bottom:  1px solid var(--sj-border);
		padding:        12px 0;
		height:         auto;
	}

	.tbs-sj-wrap .tbs-sj-why__divider-or {
		position: static;
	}

	.tbs-sj-wrap .tbs-sj-features__grid {
		grid-template-columns: 1fr;
	}

	.tbs-sj-wrap .tbs-sj-empowering__grid {
		grid-template-columns: 1fr;
	}

	.tbs-sj-wrap .tbs-sj-footer__top {
		grid-template-columns: 1fr 1fr;
		gap:                   32px;
	}

	.tbs-sj-wrap .tbs-sj-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.tbs-sj-wrap .tbs-sj-header__inner { padding: 0 16px; }
	.tbs-sj-wrap .tbs-sj-footer__top   { grid-template-columns: 1fr; }

	.tbs-sj-wrap .tbs-sj-hero         { padding: 0 16px; }
	.tbs-sj-wrap .tbs-sj-hero__body   { padding: 52px 0 32px; }
	.tbs-sj-wrap .tbs-sj-hero__ctas   { flex-direction: column; align-items: stretch; }
	.tbs-sj-wrap .tbs-sj-hero__ctas .tbs-sj-btn { text-align: center; }

	.tbs-sj-wrap .tbs-sj-hero__side {
		max-width: 80%;
		width:     80%;
	}

	.tbs-sj-wrap .tbs-sj-hero__side-img       { max-height: 260px; }
	.tbs-sj-wrap .tbs-sj-hero__stats-grid     { grid-template-columns: repeat(2, 1fr); }

	.tbs-sj-wrap .tbs-sj-hero--hide-img-mobile .tbs-sj-hero__side { display: none; }

	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="2"],
	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="3"],
	.tbs-sj-wrap .tbs-sj-featured-jobs__grid[data-cols="4"] {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

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

@keyframes sj-fade-down {
	from { opacity: 0; transform: translateY(-28px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes sj-fade-left {
	from { opacity: 0; transform: translateX(48px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes sj-fade-right {
	from { opacity: 0; transform: translateX(-48px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes sj-scale-in {
	from { opacity: 0; transform: scale(0.88); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes sj-scale-up {
	from { opacity: 0; transform: scale(0.94) translateY(20px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes sj-line-grow {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

/* Hidden until JS adds .sj-animated */
.tbs-sj-wrap [data-sj-anim] {
	opacity:                   0;
	animation-fill-mode:       both;
	animation-duration:        var(--sj-dur, 0.65s);
	animation-delay:           var(--sj-delay, 0s);
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.tbs-sj-wrap [data-sj-anim].sj-animated {
	animation-name: var(--sj-anim-name);
}

.tbs-sj-wrap [data-sj-anim="fade-up"]    { --sj-anim-name: sj-fade-up; }
.tbs-sj-wrap [data-sj-anim="fade-down"]  { --sj-anim-name: sj-fade-down; }
.tbs-sj-wrap [data-sj-anim="fade-left"]  { --sj-anim-name: sj-fade-left; }
.tbs-sj-wrap [data-sj-anim="fade-right"] { --sj-anim-name: sj-fade-right; }
.tbs-sj-wrap [data-sj-anim="scale-in"]   { --sj-anim-name: sj-scale-in; }
.tbs-sj-wrap [data-sj-anim="scale-up"]   { --sj-anim-name: sj-scale-up; }

.tbs-sj-wrap .tbs-sj-hero__badge[data-sj-anim]    { --sj-anim-name: sj-fade-down; --sj-dur: 0.5s; }
.tbs-sj-wrap .tbs-sj-hero__headline[data-sj-anim]  { --sj-anim-name: sj-fade-up;   --sj-dur: 0.75s; }
.tbs-sj-wrap .tbs-sj-hero__sub[data-sj-anim]       { --sj-anim-name: sj-fade-up;   --sj-dur: 0.65s; }
.tbs-sj-wrap .tbs-sj-hero__ctas[data-sj-anim]      { --sj-anim-name: sj-fade-up;   --sj-dur: 0.6s; }
.tbs-sj-wrap .tbs-sj-hero__side[data-sj-anim]      { --sj-anim-name: sj-fade-left; --sj-dur: 0.8s; }
.tbs-sj-wrap .tbs-sj-hero__stat-card[data-sj-anim] { --sj-anim-name: sj-scale-up;  --sj-dur: 0.55s; }
.tbs-sj-wrap .tbs-sj-section-title[data-sj-anim]   { --sj-anim-name: sj-fade-up;   --sj-dur: 0.6s; }
.tbs-sj-wrap .tbs-sj-section-sub[data-sj-anim]     { --sj-anim-name: sj-fade-up;   --sj-dur: 0.6s; }

.tbs-sj-wrap .tbs-sj-how__step-line[data-sj-anim] {
	--sj-anim-name:   sj-line-grow;
	transform-origin: top center;
	opacity:          1;         /* line-grow only animates scaleY, not opacity */
	transform:        scaleY(0); /* collapsed until animation fires */
}

.tbs-sj-wrap .tbs-sj-how__step-line[data-sj-anim].sj-animated {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tbs-sj-wrap [data-sj-anim] {
		opacity:   1 !important;
		animation: none !important;
		transform: none !important;
	}
}