/* SkillBeings – Job Assistance (Horizontal Scroll) v3.1 */

.sb-section *, .sb-section *::before, .sb-section *::after { box-sizing: border-box; }

.sb-section {
	background: #f7f2eb;
	width: 100%;
	padding: 90px 0 110px;
}

/* ════════════════════════
   HEADER
════════════════════════ */
.sb-header-wrap {
	max-width: 1140px;
	margin: 0 auto 52px;
	padding: 0 52px;
}
.sb-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.sb-badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(61,153,112,.08);
	border: 1.5px solid rgba(61,153,112,.25);
	color: #3d9970;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	padding: 5px 14px; border-radius: 100px;
	margin-bottom: 18px;
	display: inline-flex;
}
.sb-badge::before {
	content: ''; width: 5px; height: 5px;
	background: currentColor; border-radius: 50%;
	animation: sbPulse 2s infinite; flex-shrink: 0;
}
.sb-headline {
	font-family: 'Playfair Display', serif;
	font-size: clamp(32px, 3.5vw, 52px);
	font-weight: 900; color: #0f2320; line-height: 1.1;
	margin: 0;
}
.sb-headline em { font-style: italic; color: #3d9970; }

/* Right side — sub + nav inline */
.sb-header-right {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.sb-sub {
	font-family: 'DM Sans', sans-serif;
	font-size: 15px; color: #6b8c85;
	line-height: 1.72; margin: 0;
}

/* Nav row */
.sb-nav-row {
	display: flex; align-items: center; gap: 12px;
}
.sb-nav-btn {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1.5px solid rgba(15,35,32,.18);
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: all .25s ease; flex-shrink: 0;
	line-height: 1;
}
.sb-nav-btn:hover {
	background: #0f2320; border-color: #0f2320;
}
.sb-nav-btn:hover svg { stroke: #fff !important; }
.sb-nav-btn svg { stroke: #0f2320; display: block; transition: stroke .25s ease; }
.sb-nav-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(61,153,112,.3); }

.sb-progress-track {
	flex: 1; height: 2px;
	background: rgba(15,35,32,.1); border-radius: 10px; overflow: hidden;
}
.sb-progress-fill {
	height: 100%; width: 20%;
	background: #3d9970; border-radius: 10px;
	transition: width .4s ease;
}

/* ════════════════════════
   SCROLL AREA
════════════════════════ */
.sb-scroll-outer {
	overflow: hidden;
	padding: 16px 0 40px;
}
.sb-scroll-track {
	display: flex;
	gap: 20px;
	padding: 0 52px;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
	will-change: transform;
	align-items: stretch;
}

/* ════════════════════════
   PROMISE CARD (dark)
════════════════════════ */
.sb-promise-card {
	flex-shrink: 0;
	width: 280px;
	min-width: 280px;
	background: #0f2320;
	border-radius: 20px;
	padding: 30px 28px;
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 24px;
}
.sb-promise-card::before {
	content: '';
	position: absolute; width: 220px; height: 220px;
	background: radial-gradient(circle, rgba(61,153,112,.22), transparent 65%);
	top: -60px; right: -50px; pointer-events: none;
}
.sb-promise-icon {
	width: 44px; height: 44px; border-radius: 12px;
	background: rgba(61,153,112,.18); border: 1px solid rgba(61,153,112,.3);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; margin-bottom: 16px;
	position: relative; z-index: 1;
}
.sb-promise-title {
	font-family: 'Playfair Display', serif;
	font-size: 20px; font-weight: 700;
	color: #fff; line-height: 1.3; margin-bottom: 10px;
	position: relative; z-index: 1;
}
.sb-promise-title span { color: #e8b96a; font-style: italic; }
.sb-promise-desc {
	font-family: 'DM Sans', sans-serif;
	font-size: 12.5px; color: rgba(255,255,255,.48);
	line-height: 1.7; margin-bottom: 0;
	position: relative; z-index: 1;
}
.sb-stats-stack {
	display: flex; flex-direction: column; gap: 8px;
	position: relative; z-index: 1;
}
.sb-stat-row-item {
	display: flex; align-items: center; justify-content: space-between;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px; padding: 10px 14px;
}
.sb-s-num {
	font-family: 'Playfair Display', serif;
	font-size: 20px; font-weight: 900; color: #5dbf8e;
}
.sb-s-lbl {
	font-family: 'DM Sans', sans-serif;
	font-size: 10px; font-weight: 600;
	color: rgba(255,255,255,.4);
	letter-spacing: .08em; text-transform: uppercase;
}

/* ════════════════════════
   STEP CARD
════════════════════════ */
.sb-step-card {
	flex-shrink: 0;
	width: 300px;
	min-width: 300px;
	background: #fff;
	border: 1px solid rgba(15,35,32,.07);
	border-radius: 20px;
	padding: 26px 26px 22px;
	box-shadow: 0 2px 20px rgba(15,35,32,.05);
	position: relative; overflow: hidden;
	transition: all .3s ease;
	display: flex; flex-direction: column;
}

/* Green top line on hover */
.sb-step-card::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, #3d9970, #5dbf8e);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s ease;
}
.sb-step-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 44px rgba(15,35,32,.1);
	border-color: rgba(61,153,112,.18);
}
.sb-step-card:hover::before { transform: scaleX(1); }

.sb-card-top {
	display: flex; align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.sb-icon-wrap {
	width: 46px; height: 46px; border-radius: 13px;
	background: rgba(61,153,112,.1);
	border: 1px solid rgba(61,153,112,.18);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; flex-shrink: 0;
	transition: background .3s ease;
}
.sb-step-card:hover .sb-icon-wrap { background: #3d9970; }

.sb-step-num-badge {
	font-family: 'DM Sans', sans-serif;
	font-size: 9.5px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: rgba(15,35,32,.3);
	background: rgba(15,35,32,.05);
	padding: 4px 10px; border-radius: 100px;
}

.sb-step-title {
	font-family: 'Playfair Display', serif;
	font-size: 17px; font-weight: 700;
	color: #0f2320; line-height: 1.3;
	margin-bottom: 10px;
}
.sb-step-desc {
	font-family: 'DM Sans', sans-serif;
	font-size: 12.5px; color: #7a9990;
	line-height: 1.7; margin-bottom: 14px;
	flex: 1;
}

.sb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.sb-tag {
	font-family: 'DM Sans', sans-serif;
	font-size: 10.5px; font-weight: 600;
	padding: 3px 10px; border-radius: 100px;
	border: 1px solid transparent; letter-spacing: .03em;
}
.sb-tag-green { background: rgba(61,153,112,.1);  color: #3d9970; border-color: rgba(61,153,112,.2); }
.sb-tag-amber { background: rgba(184,133,42,.1);  color: #b8852a; border-color: rgba(184,133,42,.22); }
.sb-tag-dark  { background: rgba(15,35,32,.06);   color: #6b8c85; border-color: rgba(15,35,32,.09); }

.sb-card-footer {
	margin-top: 16px; padding-top: 14px;
	border-top: 1px solid rgba(15,35,32,.06);
	display: flex; align-items: center; justify-content: space-between;
}
.sb-card-footer-step {
	font-family: 'DM Sans', sans-serif;
	font-size: 10.5px; font-weight: 600;
	color: #3d9970; letter-spacing: .04em;
}
.sb-footer-arrow {
	width: 28px; height: 28px; border-radius: 50%;
	background: rgba(61,153,112,.1);
	display: flex; align-items: center; justify-content: center;
	transition: all .3s ease;
}
.sb-step-card:hover .sb-footer-arrow { background: #3d9970; }
.sb-step-card:hover .sb-footer-arrow svg { stroke: #fff !important; }
.sb-footer-arrow svg { stroke: #3d9970; display: block; transition: stroke .3s ease; }

/* ════════════════════════
   CTA
════════════════════════ */
.sb-cta-wrap {
	max-width: 1140px; margin: 52px auto 0;
	padding: 0 52px;
	opacity: 0; transform: translateY(20px);
	transition: opacity .7s ease, transform .7s ease;
}
.sb-cta-wrap.sb-visible { opacity: 1; transform: translateY(0); }

.sb-cta-inner {
	background: #0f2320; border-radius: 24px;
	padding: 48px 60px;
	display: grid; grid-template-columns: 1fr auto;
	gap: 48px; align-items: center;
	position: relative; overflow: hidden;
}
.sb-cta-inner::before {
	content: '';
	position: absolute; width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(61,153,112,.13), transparent 65%);
	top: -80px; right: 80px; pointer-events: none;
}
.sb-cta-eyebrow {
	display: block; font-family: 'DM Sans', sans-serif;
	font-size: 10px; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: #5dbf8e; margin-bottom: 10px;
}
.sb-cta-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 900; color: #fff;
	line-height: 1.15; margin-bottom: 10px;
}
.sb-cta-title em { color: #e8b96a; font-style: italic; }
.sb-cta-sub {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px; color: rgba(255,255,255,.48);
	line-height: 1.7; max-width: 380px; margin: 0;
}
.sb-cta-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: #3d9970; color: #0f2320;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700; font-size: 14.5px;
	padding: 16px 32px; border-radius: 100px;
	text-decoration: none; white-space: nowrap; flex-shrink: 0;
	position: relative; z-index: 1;
	transition: all .3s ease; border: none; cursor: pointer;
}
.sb-cta-btn:hover {
	background: #48b07e; transform: translateY(-3px);
	box-shadow: 0 14px 40px rgba(61,153,112,.38);
	color: #0f2320; text-decoration: none;
}
.sb-cta-btn svg { display: block; transition: transform .3s ease; }
.sb-cta-btn:hover svg { transform: translateX(4px); }

/* ════════════════════════
   ANIMATIONS
════════════════════════ */
@keyframes sbPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media (max-width: 900px) {
	.sb-header-wrap { padding: 0 24px; }
	.sb-header { grid-template-columns: 1fr; gap: 20px; }
	.sb-scroll-track { padding: 0 24px; }
	.sb-step-card { width: 270px; min-width: 270px; }
	.sb-promise-card { width: 250px; min-width: 250px; }
	.sb-cta-wrap { padding: 0 24px; }
}

@media (max-width: 600px) {
	.sb-section { padding: 40px 0 60px; }

	.sb-header-wrap { padding: 0 18px; margin-bottom: 28px; }

	/* Stack header — headline left, nav below */
	.sb-header {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	/* Headline — compact on mobile */
	.sb-headline {
		font-size: clamp(22px, 7vw, 30px) !important;
		line-height: 1.15 !important;
	}

	/* Nav row — move below headline, left aligned */
	.sb-header-right {
		align-items: flex-start !important;
		flex-direction: row !important;
		align-items: center !important;
	}
	.sb-nav-row {
		justify-content: flex-start !important;
	}

	/* Smaller nav buttons */
	.sb-nav-btn { width: 38px !important; height: 38px !important; }

	/* Cards narrower to show peek of next */
	.sb-step-card   { width: calc(80vw - 18px) !important; min-width: 240px !important; }
	.sb-promise-card { width: calc(80vw - 18px) !important; min-width: 240px !important; }

	/* Track padding */
	.sb-scroll-track { padding: 0 18px !important; gap: 14px !important; }

	/* Sub text */
	.sb-sub { font-size: 13.5px !important; }

	/* CTA */
	.sb-cta-wrap { padding: 0 18px; margin-top: 36px; }
	.sb-cta-inner {
		grid-template-columns: 1fr !important;
		padding: 28px 22px !important;
		gap: 18px !important;
		border-radius: 18px !important;
	}
	.sb-cta-btn { width: 100% !important; justify-content: center !important; }
	.sb-cta-title { font-size: clamp(20px, 5.5vw, 28px) !important; }
}

@media (max-width: 380px) {
	.sb-headline { font-size: 20px !important; }
	.sb-step-card, .sb-promise-card {
		width: calc(88vw - 14px) !important;
	}
	.sb-scroll-track { padding: 0 14px !important; }
	.sb-header-wrap  { padding: 0 14px !important; }
}