/*
 * Sarbatra marketing homepage — enterprise SaaS treatment.
 *
 * Everything is scoped to `body.sb-home` so the rest of the site keeps the
 * light theme. Header, topbar (Nepali tools), footer and the shared social
 * icons are re-skinned rather than replaced, so their markup and behaviour
 * stay exactly as they are elsewhere.
 *
 * Sections alternate dark and light. Rather than duplicating component CSS
 * per theme, every section sets a small set of contextual custom properties
 * (--bg, --fg, --mut, --line, --card…) and the components read those, so one
 * card rule renders correctly on both backgrounds.
 */

.sb-home {
	/* palette */
	--sb-ink: #05060b;
	--sb-dark: #0a0b13;
	--sb-deep: #07080f;
	--sb-light: #f4f5f9;
	--sb-paper: #fff;

	/* accents */
	--sb-a1: #6366f1;
	--sb-a2: #a855f7;
	--sb-a3: #22d3ee;
	--sb-a4: #34d399;
	--sb-grad: linear-gradient(100deg, #818cf8 0%, #c084fc 38%, #22d3ee 100%);
	--sb-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(34, 211, 238, 0.1));

	/* type */
	--sb-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* rhythm */
	--sb-gut: clamp(20px, 5vw, 72px);
	--sb-max: 1240px;
	--sb-r: 18px;
	--sb-r-lg: 26px;

	/* contextual defaults (dark) */
	--bg: var(--sb-ink);
	--fg: #f5f6fa;
	--mut: #9aa1b1;
	--faint: #626a7c;
	--line: rgba(255, 255, 255, 0.09);
	--line-hi: rgba(255, 255, 255, 0.2);
	--card: rgba(255, 255, 255, 0.028);
	--card-hi: rgba(255, 255, 255, 0.055);

	background: var(--sb-ink);
	color: var(--fg);
	font-family: var(--sb-sans);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
	.sb-home {
		scroll-behavior: smooth;
	}
}

.sb-home .connection-web {
	display: none;
}

.sb-home h1,
.sb-home h2,
.sb-home h3,
.sb-home h4 {
	color: inherit;
	font-family: var(--sb-sans);
	letter-spacing: -0.028em;
}

.sb-home ::selection {
	background: rgba(129, 140, 248, 0.32);
	color: #fff;
}

/* ============================================================ site chrome */

.sb-home .topbar {
	position: relative;
	z-index: 120;
	background: var(--sb-ink);
	border-bottom: 1px solid var(--line);
}

.sb-home .topbar-label,
.sb-home .topbar-menu a {
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
}

.sb-home .topbar-menu a:hover,
.sb-home .topbar-menu a:focus-visible {
	color: #fff;
}

.sb-home .site-header {
	background: transparent;
	border-bottom: 1px solid transparent;
	box-shadow: none;
	backdrop-filter: none;
	transition: background 320ms ease, border-color 320ms ease, backdrop-filter 320ms ease;
}

.sb-home .site-header.is-scrolled {
	background: rgba(5, 6, 11, 0.72);
	border-bottom-color: var(--line);
	backdrop-filter: blur(18px) saturate(160%);
}

.sb-home .site-logo-text span {
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.sb-home .site-logo-text small {
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
}

.sb-home .primary-nav .menu > li > a {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: color 200ms ease;
}

.sb-home .primary-nav .menu > li > a:hover,
.sb-home .primary-nav .current-menu-item > a {
	color: #fff;
}

.sb-home .nav-cta {
	border-radius: 999px;
	background: #fff;
	color: #05060b;
	box-shadow: none;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: transform 200ms ease, box-shadow 260ms ease;
}

.sb-home .nav-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.5);
}

.sb-home .site-main {
	position: relative;
	z-index: 1;
	overflow-x: clip;
}

/* ========================================================= scroll progress */

.sb-progress {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 500;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

.sb-progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--sb-grad);
	transform: scaleX(0);
	transform-origin: 0 50%;
	box-shadow: 0 0 16px rgba(129, 140, 248, 0.7);
}

/* ============================================================ section rail */

.sb-rail {
	position: fixed;
	top: 50%;
	right: clamp(12px, 1.6vw, 26px);
	z-index: 400;
	display: none;
	flex-direction: column;
	gap: 4px;
	transform: translateY(-50%);
	mix-blend-mode: difference;
}

@media (min-width: 1180px) {
	.sb-rail {
		display: flex;
	}
}

.sb-rail a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 5px 2px;
	color: #fff;
	text-decoration: none;
}

.sb-rail a i {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.28);
	transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1), background 300ms ease;
}

.sb-rail a span {
	font-family: var(--sb-mono);
	font-size: 0.58rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 260ms ease, transform 260ms ease;
}

.sb-rail a:hover span,
.sb-rail a.is-current span {
	opacity: 0.75;
	transform: none;
}

.sb-rail a.is-current i {
	width: 30px;
	background: #fff;
}

/* ======================================================= section scaffold */

.sb-sec {
	position: relative;
	padding: clamp(88px, 13vh, 168px) var(--sb-gut);
	background: var(--bg);
	color: var(--fg);
	isolation: isolate;
}

.sb-sec--dark {
	--bg: var(--sb-ink);
	--fg: #f5f6fa;
	--mut: #9aa1b1;
	--faint: #626a7c;
	--line: rgba(255, 255, 255, 0.09);
	--line-hi: rgba(255, 255, 255, 0.22);
	--card: rgba(255, 255, 255, 0.028);
	--card-hi: rgba(255, 255, 255, 0.06);
}

.sb-sec--deep {
	--bg: var(--sb-deep);
	--fg: #f5f6fa;
	--mut: #9aa1b1;
	--faint: #626a7c;
	--line: rgba(255, 255, 255, 0.08);
	--line-hi: rgba(255, 255, 255, 0.2);
	--card: rgba(255, 255, 255, 0.025);
	--card-hi: rgba(255, 255, 255, 0.055);
}

.sb-sec--light {
	--bg: var(--sb-light);
	--fg: #0a0b13;
	--mut: #5b6273;
	--faint: #8b93a5;
	--line: rgba(10, 11, 19, 0.09);
	--line-hi: rgba(10, 11, 19, 0.2);
	--card: rgba(255, 255, 255, 0.86);
	--card-hi: #fff;
}

/* A hairline seam wherever the background flips. */
.sb-sec--light + .sb-sec--dark,
.sb-sec--light + .sb-sec--deep,
.sb-sec--dark + .sb-sec--light,
.sb-sec--deep + .sb-sec--light {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sb-sec--light::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.55;
	background-image:
		linear-gradient(rgba(10, 11, 19, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 11, 19, 0.045) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(115% 85% at 50% 0%, #000 15%, transparent 75%);
}

.sb-head {
	max-width: var(--sb-max);
	margin: 0 auto clamp(48px, 6vw, 78px);
}

.sb-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
}

.sb-head--split > div {
	max-width: 720px;
}

.sb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	color: var(--mut);
	font-family: var(--sb-mono);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sb-eyebrow span {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 20px;
	padding: 0 6px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--card);
	color: var(--fg);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
}

.sb-h2 {
	margin: 0;
	max-width: 20ch;
	font-size: clamp(2rem, 4.3vw, 3.5rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.sb-head--split .sb-h2 {
	max-width: 22ch;
}

.sb-sub {
	margin: 22px 0 0;
	max-width: 62ch;
	color: var(--mut);
	font-size: clamp(1rem, 1.15vw, 1.12rem);
	line-height: 1.6;
}

.sb-kicker {
	margin: 0 0 12px;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ================================================================ buttons */

.sb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.sb-btn[hidden],
.sb-showcase__panel[hidden] {
	display: none;
}

.sb-btn svg {
	width: 16px;
	height: 16px;
	transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-btn:hover svg {
	transform: translateX(3px);
}

.sb-btn--primary {
	background: #fff;
	color: #05060b;
}

.sb-btn--primary::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: var(--sb-grad);
	opacity: 0;
	filter: blur(14px);
	transition: opacity 320ms ease;
}

.sb-btn--primary:hover {
	box-shadow: 0 14px 40px -16px rgba(255, 255, 255, 0.55);
}

.sb-btn--primary:hover::after {
	opacity: 0.85;
}

.sb-btn--ghost {
	border-color: var(--line-hi);
	background: var(--card);
	color: var(--fg);
	backdrop-filter: blur(10px);
}

.sb-btn--ghost:hover {
	border-color: var(--fg);
	background: var(--card-hi);
}

.sb-btn--dark {
	background: #0a0b13;
	color: #fff;
}

.sb-btn--dark:hover {
	box-shadow: 0 16px 40px -18px rgba(10, 11, 19, 0.9);
}

.sb-sec--dark .sb-btn--dark,
.sb-sec--deep .sb-btn--dark {
	background: #fff;
	color: #05060b;
}

.sb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

/* ================================================================== chips */

.sb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sb-chips i {
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--mut);
	font-family: var(--sb-mono);
	font-size: 0.66rem;
	font-style: normal;
	letter-spacing: 0.04em;
}

.sb-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 7px 15px 7px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--mut);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	backdrop-filter: blur(10px);
}

.sb-pill__dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sb-a4);
}

.sb-pill__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--sb-a4);
	opacity: 0.5;
	animation: sb-ping 2.4s ease-out infinite;
}

@keyframes sb-ping {
	0% { transform: scale(0.6); opacity: 0.7; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ================================================================== 01 hero */

.sb-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(100vh, 900px);
	padding-top: clamp(60px, 9vh, 110px);
	padding-bottom: 0;
	overflow: hidden;
}

.sb-aurora {
	position: absolute;
	inset: -20% -10% auto -10%;
	z-index: -2;
	height: 130%;
	pointer-events: none;
}

.sb-aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(90px);
	will-change: transform;
}

.sb-aurora__a {
	top: -12%;
	left: 6%;
	width: 46vw;
	height: 46vw;
	background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 62%);
	animation: sb-float-a 22s ease-in-out infinite;
}

.sb-aurora__b {
	top: 4%;
	right: 2%;
	width: 42vw;
	height: 42vw;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.32), transparent 62%);
	animation: sb-float-b 26s ease-in-out infinite;
}

.sb-aurora__c {
	bottom: 6%;
	left: 32%;
	width: 38vw;
	height: 38vw;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 62%);
	animation: sb-float-a 30s ease-in-out infinite reverse;
}

@keyframes sb-float-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(6%, 8%, 0) scale(1.12); }
}

@keyframes sb-float-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
	50% { transform: translate3d(-7%, 5%, 0) scale(0.94); }
}

.sb-grid-floor {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(120% 78% at 50% 42%, #000 10%, transparent 72%);
	pointer-events: none;
}

.sb-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	width: 100%;
	max-width: var(--sb-max);
	margin: 0 auto;
	flex: 1;
}

@media (max-width: 1024px) {
	.sb-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-display {
	margin: 26px 0 0;
	font-size: clamp(2.6rem, 6vw, 4.9rem);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.sb-mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
}

.sb-mask > span {
	display: block;
}

.sb-grad {
	background: var(--sb-grad);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.sb-lede {
	margin: 26px 0 0;
	max-width: 54ch;
	color: var(--mut);
	font-size: clamp(1.02rem, 1.3vw, 1.18rem);
	line-height: 1.62;
}

.sb-hero__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 52px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
	.sb-hero__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
}

.sb-hero__stats dt {
	font-size: clamp(1.4rem, 2.4vw, 1.95rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.sb-hero__stats dd {
	margin: 5px 0 0;
	color: var(--faint);
	font-size: 0.78rem;
	line-height: 1.35;
}

/* ---------------------------------------------------- hero ecosystem stage */

.sb-hero__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(58vh, 520px);
}

.sb-eco {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	max-width: 540px;
}

.sb-eco canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sb-eco__core {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	gap: 2px;
	width: clamp(120px, 30%, 168px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.34), rgba(5, 6, 11, 0.9) 70%);
	box-shadow: 0 0 70px -12px rgba(129, 140, 248, 0.55), inset 0 0 40px rgba(129, 140, 248, 0.16);
	backdrop-filter: blur(6px);
	transform: translate(-50%, -50%);
	text-align: center;
}

.sb-eco__mark {
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.sb-eco__sub {
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sb-eco__ring {
	position: absolute;
	inset: -22%;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 50%;
	animation: sb-spin 26s linear infinite;
}

.sb-eco__ring::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sb-a3);
	box-shadow: 0 0 12px var(--sb-a3);
}

.sb-eco__ring--2 {
	inset: -48%;
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.07);
	animation-duration: 44s;
	animation-direction: reverse;
}

.sb-eco__ring--2::after {
	background: var(--sb-a2);
	box-shadow: 0 0 12px var(--sb-a2);
}

@keyframes sb-spin {
	to { transform: rotate(360deg); }
}

/* Legend is the no-canvas fallback: hidden once the canvas paints. */
.sb-eco__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	inset: auto 0 0 0;
}

.sb-eco.is-live .sb-eco__legend {
	display: none;
}

.sb-eco__legend li {
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--mut);
	font-family: var(--sb-mono);
	font-size: 0.68rem;
}

/* -------------------------------------------------------------- hero ticker */

.sb-ticker {
	position: relative;
	width: calc(100% + var(--sb-gut) * 2);
	margin: clamp(40px, 6vh, 76px) calc(var(--sb-gut) * -1) 0;
	padding: 20px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sb-ticker__track {
	display: flex;
	align-items: center;
	gap: 26px;
	width: max-content;
	animation: sb-slide 44s linear infinite;
}

.sb-ticker span {
	color: var(--mut);
	font-size: 0.86rem;
	font-weight: 500;
	white-space: nowrap;
}

.sb-ticker i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--line-hi);
}

@keyframes sb-slide {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================== 02 services */

.sb-svc {
	display: grid;
	/* Six services, so three columns keeps both rows full. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	max-width: var(--sb-max);
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: var(--sb-r-lg);
	background: var(--line);
	overflow: hidden;
}

@media (max-width: 1080px) {
	.sb-svc {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.sb-svc {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-svc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(26px, 2.6vw, 38px);
	background: var(--bg);
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	transition: background 320ms ease;
}

.sb-svc__card:hover {
	background: var(--card-hi);
}

/* Cursor-tracked spotlight; --mx/--my are written by home.js. */
.sb-svc__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(129, 140, 248, 0.18), transparent 68%);
	transition: opacity 340ms ease;
	pointer-events: none;
}

.sb-svc__card:hover .sb-svc__glow {
	opacity: 1;
}

.sb-svc__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sb-svc__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--card);
	color: var(--fg);
	transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease, background 320ms ease;
}

.sb-svc__icon svg {
	width: 21px;
	height: 21px;
}

.sb-svc__card:hover .sb-svc__icon {
	transform: translateY(-3px) rotate(-6deg);
	border-color: rgba(129, 140, 248, 0.55);
	background: rgba(129, 140, 248, 0.14);
}

.sb-svc__num {
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
}

.sb-svc__kicker {
	display: block;
	margin-bottom: 8px;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.64rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sb-svc__body h3 {
	margin: 0 0 10px;
	font-size: 1.28rem;
	font-weight: 600;
}

.sb-svc__body p {
	margin: 0;
	color: var(--mut);
	font-size: 0.92rem;
	line-height: 1.6;
}

.sb-svc__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	color: var(--fg);
	font-size: 0.82rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-svc__go svg {
	width: 15px;
	height: 15px;
}

.sb-svc__card:hover .sb-svc__go,
.sb-svc__card:focus-visible .sb-svc__go {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.sb-svc__go {
		opacity: 1;
		transform: none;
	}
}

/* ========================================================== 03 ecosystem */

.sb-orbit-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(70% 55% at 50% 12%, rgba(99, 102, 241, 0.14), transparent 62%),
		radial-gradient(50% 40% at 82% 78%, rgba(34, 211, 238, 0.09), transparent 62%);
	pointer-events: none;
}

.sb-orbit {
	position: relative;
	display: grid;
	place-items: center;
	width: min(560px, 82vw);
	aspect-ratio: 1;
	margin: 0 auto clamp(44px, 6vw, 72px);
}

.sb-orbit__core {
	display: grid;
	place-items: center;
	width: 116px;
	height: 116px;
	border: 1px solid var(--line-hi);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 26%, rgba(168, 85, 247, 0.3), rgba(7, 8, 15, 0.94) 72%);
	box-shadow: 0 0 60px -14px rgba(168, 85, 247, 0.7);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.sb-orbit__ring {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 50%;
	box-shadow: inset 0 0 60px -30px rgba(129, 140, 248, 0.9);
	animation: sb-spin 32s linear infinite;
}

.sb-orbit__ring i {
	position: absolute;
	top: -13px;
	left: 50%;
	display: block;
	padding: 5px 12px;
	border: 1px solid var(--line-hi);
	border-radius: 999px;
	background: rgba(7, 8, 15, 0.94);
	color: var(--fg);
	font-family: var(--sb-mono);
	font-size: 0.62rem;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
	animation: sb-counterspin 32s linear infinite;
}

/*
 * Ring 1 is the outermost. `inset` shrinks from both sides, so the last ring
 * still has to clear the 116px core badge in the middle.
 */
.sb-orbit__ring--1 { inset: 0; }
.sb-orbit__ring--2 { inset: 11%; animation-duration: 44s; animation-direction: reverse; }
.sb-orbit__ring--3 { inset: 22%; animation-duration: 56s; }
.sb-orbit__ring--4 { inset: 32%; animation-duration: 70s; animation-direction: reverse; }

.sb-orbit__ring--2 i { animation-duration: 44s; animation-direction: reverse; }
.sb-orbit__ring--3 i { animation-duration: 56s; }
.sb-orbit__ring--4 i { animation-duration: 70s; animation-direction: reverse; }

@keyframes sb-counterspin {
	from { transform: translateX(-50%) rotate(0deg); }
	to { transform: translateX(-50%) rotate(-360deg); }
}

@media (max-width: 720px) {
	.sb-orbit {
		display: none;
	}
}

.sb-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: var(--sb-max);
	margin: 0 auto 34px;
}

.sb-filters button {
	padding: 9px 17px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--mut);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}

.sb-filters button:hover {
	color: var(--fg);
	border-color: var(--line-hi);
}

.sb-filters button.is-active {
	border-color: transparent;
	background: #fff;
	color: #05060b;
}

.sb-eco-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	max-width: var(--sb-max);
	margin: 0 auto;
}

.sb-node {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--sb-r);
	background: var(--card);
	color: inherit;
	text-decoration: none;
	backdrop-filter: blur(10px);
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease, background 300ms ease, opacity 300ms ease;
}

.sb-node:hover {
	transform: translateY(-4px);
	border-color: var(--line-hi);
	background: var(--card-hi);
}

/*
 * The second selector outranks `.sb-motion .sb-reveal.is-in { opacity: 1 }`,
 * which every revealed card also matches.
 */
.sb-node.is-dimmed,
.sb-motion .sb-eco-grid .sb-node.is-dimmed {
	opacity: 0.22;
	filter: saturate(0.4);
}

.sb-node__top {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sb-node__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sb-a3);
	box-shadow: 0 0 10px var(--sb-a3);
}

.sb-node__cat {
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sb-node h3 {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 600;
}

.sb-node p {
	margin: 0;
	color: var(--mut);
	font-size: 0.86rem;
	line-height: 1.55;
}

.sb-node__go {
	position: absolute;
	top: 20px;
	right: 20px;
	color: var(--faint);
	opacity: 0;
	transform: translate(-3px, 3px);
	transition: opacity 260ms ease, transform 260ms ease;
}

.sb-node__go svg {
	width: 15px;
	height: 15px;
}

.sb-node:hover .sb-node__go {
	opacity: 1;
	transform: none;
}

/* ======================================================== 04 SaaS showcase */

.sb-showcase {
	max-width: var(--sb-max);
	margin: 0 auto;
}

.sb-showcase__tabs {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 40px;
	padding: 5px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	width: fit-content;
	backdrop-filter: blur(10px);
}

.sb-showcase__tab {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--mut);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 240ms ease;
}

.sb-showcase__tab.is-active {
	color: var(--bg);
}

.sb-showcase__ink {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 0;
	height: calc(100% - 10px);
	border-radius: 999px;
	background: var(--fg);
	transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1), width 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-showcase__panel {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(30px, 5vw, 68px);
}

.sb-showcase__panel[hidden] {
	display: none;
}

@media (max-width: 1024px) {
	.sb-showcase__panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-showcase__copy h3 {
	margin: 0 0 16px;
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 600;
	letter-spacing: -0.035em;
}

.sb-showcase__desc {
	margin: 0 0 26px;
	color: var(--mut);
	font-size: 1rem;
	line-height: 1.62;
}

.sb-ticks {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 11px;
}

.sb-ticks li {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--fg);
	font-size: 0.93rem;
}

.sb-ticks svg {
	flex: none;
	width: 18px;
	height: 18px;
	padding: 3px;
	border-radius: 50%;
	background: rgba(52, 211, 153, 0.16);
	color: #10b981;
}

.sb-mini-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 30px;
	padding: 22px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.sb-mini-stats strong {
	display: block;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

/* Direct child only — the counter itself is a <span> inside the <strong>. */
.sb-mini-stats > div > span {
	color: var(--faint);
	font-size: 0.78rem;
}

/* ------------------------------------------------------- 3D product mockup */

.sb-showcase__stage {
	perspective: 1600px;
}

.sb-mock {
	position: relative;
	transform-style: preserve-3d;
	/* --rx/--ry are written by the pointer-tilt handler in home.js. */
	transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -13deg)) rotateZ(1deg);
	transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-mock__glow {
	position: absolute;
	inset: 8% 4% -12% 4%;
	border-radius: 40px;
	background: var(--sb-grad);
	opacity: 0.4;
	filter: blur(58px);
	transform: translateZ(-60px);
}

.sb-mock__frame {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	background: #0b0d16;
	box-shadow: 0 60px 120px -40px rgba(4, 6, 16, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
	transform: translateZ(0);
}

.sb-mock__chrome {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(255, 255, 255, 0.03);
}

.sb-mock__dots {
	display: flex;
	gap: 6px;
}

.sb-mock__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.sb-mock__dots i:first-child { background: rgba(248, 113, 113, 0.6); }
.sb-mock__dots i:nth-child(2) { background: rgba(251, 191, 36, 0.6); }
.sb-mock__dots i:nth-child(3) { background: rgba(52, 211, 153, 0.6); }

.sb-mock__url {
	flex: 1;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.42);
	font-family: var(--sb-mono);
	font-size: 0.62rem;
	letter-spacing: 0.02em;
}

.sb-mock__app {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 14px;
	min-height: 316px;
	padding: 16px;
	background:
		radial-gradient(60% 60% at 80% 0%, rgba(99, 102, 241, 0.12), transparent 70%),
		#0b0d16;
}

.sb-mock__side {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-right: 12px;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sb-mock__logo {
	width: 22px;
	height: 22px;
	margin-bottom: 8px;
	border-radius: 7px;
	background: var(--sb-grad);
}

.sb-mock__navitem {
	height: 8px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
}

.sb-mock__navitem.is-on {
	background: rgba(129, 140, 248, 0.6);
}

.sb-mock__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sb-mock__kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.sb-mock__kpis--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sb-mock__kpis span {
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
}

.sb-mock__kpis b {
	display: block;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.sb-mock__kpis i {
	display: block;
	width: 62%;
	height: 5px;
	margin-top: 7px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.12);
}

.sb-mock__chart,
.sb-mock__spark {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	height: 108px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
}

.sb-mock__chart span,
.sb-mock__spark span {
	flex: 1;
	height: var(--h);
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, rgba(129, 140, 248, 0.95), rgba(34, 211, 238, 0.35));
	transform-origin: 50% 100%;
	animation: sb-bar 3.4s ease-in-out infinite;
}

.sb-mock__chart span:nth-child(2n) { animation-delay: 0.3s; }
.sb-mock__chart span:nth-child(3n) { animation-delay: 0.6s; }
.sb-mock__spark span:nth-child(2n) { animation-delay: 0.4s; }

@keyframes sb-bar {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(0.82); }
}

.sb-mock__rows,
.sb-mock__table {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sb-mock__row,
.sb-mock__trow {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.025);
}

.sb-mock__row i,
.sb-mock__trow i {
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.14);
	flex: 1;
}

.sb-mock__row i:first-child,
.sb-mock__trow i:first-of-type {
	max-width: 34%;
	background: rgba(255, 255, 255, 0.26);
}

.sb-mock__trow i.is-short {
	max-width: 22%;
}

.sb-mock__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(129, 140, 248, 0.8), rgba(34, 211, 238, 0.5));
}

.sb-mock__row em,
.sb-mock__trow b {
	width: 32px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
}

.sb-mock__row em.is-ok,
.sb-mock__trow b.is-ok {
	background: rgba(52, 211, 153, 0.55);
}

.sb-mock__row em.is-warn,
.sb-mock__trow b.is-warn {
	background: rgba(251, 191, 36, 0.55);
}

.sb-mock__cal {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
}

.sb-mock__cal span {
	aspect-ratio: 1;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.06);
}

.sb-mock__cal span.is-on {
	background: linear-gradient(140deg, rgba(129, 140, 248, 0.9), rgba(34, 211, 238, 0.5));
	box-shadow: 0 0 14px -4px rgba(129, 140, 248, 0.9);
}

.sb-mock__board {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.sb-mock__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
}

.sb-mock__col em {
	height: 6px;
	width: 52%;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.24);
}

.sb-mock__col b {
	height: 26px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.07);
}

.sb-mock__col b.is-lead {
	background: linear-gradient(135deg, rgba(129, 140, 248, 0.55), rgba(168, 85, 247, 0.3));
}

/* floating phone */
.sb-mock__phone {
	position: absolute;
	right: -4%;
	bottom: -12%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: clamp(96px, 17%, 132px);
	padding: 18px 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	background: #0e1019;
	box-shadow: 0 40px 70px -28px rgba(4, 6, 16, 0.9);
	transform: translateZ(70px) rotate(-4deg);
	animation: sb-hover 7s ease-in-out infinite;
}

@keyframes sb-hover {
	0%, 100% { transform: translateZ(70px) rotate(-4deg) translateY(0); }
	50% { transform: translateZ(70px) rotate(-4deg) translateY(-10px); }
}

.sb-mock__notch {
	width: 34%;
	height: 4px;
	margin: -8px auto 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}

.sb-mock__pline {
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.14);
}

.sb-mock__pline.is-short {
	width: 60%;
}

.sb-mock__pcard {
	height: 40px;
	border-radius: 9px;
	background: linear-gradient(135deg, rgba(129, 140, 248, 0.5), rgba(34, 211, 238, 0.22));
}

.sb-mock__pcard.is-small {
	height: 24px;
	background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
	.sb-mock__phone {
		display: none;
	}
}

/* ============================================================= 05 stack */

.sb-rails {
	display: grid;
	gap: 12px;
	width: calc(100% + var(--sb-gut) * 2);
	margin: 0 calc(var(--sb-gut) * -1) clamp(48px, 6vw, 76px);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.sb-rail-row {
	overflow: hidden;
}

.sb-rail-row__track {
	display: flex;
	gap: 12px;
	width: max-content;
	animation: sb-slide 52s linear infinite;
}

.sb-rail-row--rev .sb-rail-row__track {
	animation-direction: reverse;
	animation-duration: 64s;
}

.sb-tech {
	padding: 11px 20px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	color: var(--mut);
	font-family: var(--sb-mono);
	font-size: 0.82rem;
	white-space: nowrap;
	transition: color 240ms ease, border-color 240ms ease;
}

.sb-tech:hover {
	color: var(--fg);
	border-color: var(--line-hi);
}

.sb-layers {
	display: grid;
	gap: 1px;
	max-width: var(--sb-max);
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: var(--sb-r-lg);
	background: var(--line);
	overflow: hidden;
}

.sb-layer {
	display: grid;
	grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 44px);
	padding: clamp(24px, 2.6vw, 34px) clamp(24px, 3vw, 40px);
	background: var(--bg);
	transition: background 340ms ease;
}

.sb-layer:hover {
	background: var(--card-hi);
}

@media (max-width: 780px) {
	.sb-layer {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-layer__index {
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
}

.sb-layer__label h3 {
	margin: 8px 0 6px;
	font-size: 1.22rem;
	font-weight: 600;
}

.sb-layer__label p {
	margin: 0;
	color: var(--mut);
	font-size: 0.86rem;
	line-height: 1.55;
}

.sb-layer__items {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: 8px;
}

.sb-layer__items span {
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card);
	color: var(--fg);
	font-family: var(--sb-mono);
	font-size: 0.78rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 460ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease;
}

.sb-layer.is-in .sb-layer__items span {
	opacity: 1;
	transform: none;
}

.sb-layer__items span:nth-child(1) { transition-delay: 40ms; }
.sb-layer__items span:nth-child(2) { transition-delay: 80ms; }
.sb-layer__items span:nth-child(3) { transition-delay: 120ms; }
.sb-layer__items span:nth-child(4) { transition-delay: 160ms; }
.sb-layer__items span:nth-child(5) { transition-delay: 200ms; }
.sb-layer__items span:nth-child(6) { transition-delay: 240ms; }
.sb-layer__items span:nth-child(7) { transition-delay: 280ms; }
.sb-layer__items span:nth-child(8) { transition-delay: 320ms; }

.sb-layer__items span:hover {
	border-color: rgba(129, 140, 248, 0.6);
}

/* ============================================================== 06 cases */

.sb-cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: clamp(20px, 2.4vw, 30px);
	max-width: var(--sb-max);
	margin: 0 auto;
}

@media (max-width: 560px) {
	.sb-cases {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-case {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--sb-r-lg);
	background: var(--card);
	backdrop-filter: blur(14px);
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms ease, border-color 300ms ease;
}

.sb-case:hover {
	border-color: var(--line-hi);
	box-shadow: 0 34px 70px -40px rgba(10, 11, 19, 0.55);
}

.sb-case__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(140deg, #11131f, #1c1f33);
}

.sb-case__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-case:hover .sb-case__media img {
	transform: scale(1.05);
}

.sb-case__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(70% 70% at 30% 20%, rgba(129, 140, 248, 0.35), transparent 65%),
		linear-gradient(140deg, #11131f, #1c1f33);
	color: rgba(255, 255, 255, 0.28);
	font-size: 3.4rem;
	font-weight: 600;
	letter-spacing: -0.05em;
}

.sb-case__industry {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 13px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(5, 6, 11, 0.6);
	color: #fff;
	font-family: var(--sb-mono);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.sb-case__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(22px, 2.4vw, 32px);
}

.sb-case__body h3 {
	margin: 0;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	font-weight: 600;
	line-height: 1.24;
}

.sb-case__body h3 a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-case__body h3 a:hover {
	background-size: 100% 1px;
}

.sb-case__summary {
	margin: 0;
	color: var(--mut);
	font-size: 0.92rem;
	line-height: 1.6;
}

.sb-case__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.sb-case__metrics strong {
	display: block;
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.04em;
	background: var(--sb-grad);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.sb-case__metrics span {
	color: var(--faint);
	font-size: 0.75rem;
}

/* ========================================================== 07 industries */

.sb-inds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	max-width: var(--sb-max);
	margin: 0 auto;
}

.sb-ind {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--line);
	border-radius: var(--sb-r);
	background: var(--card);
	color: inherit;
	text-decoration: none;
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease;
}

.sb-ind:hover {
	transform: translateY(-5px);
	border-color: var(--line-hi);
}

.sb-ind__sweep {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(34, 211, 238, 0.08) 55%, transparent 78%);
	opacity: 0;
	transform: translate3d(-30%, 30%, 0);
	transition: opacity 460ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.sb-ind:hover .sb-ind__sweep {
	opacity: 1;
	transform: none;
}

.sb-ind__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card-hi);
	color: var(--fg);
}

.sb-ind__icon svg {
	width: 19px;
	height: 19px;
}

.sb-ind h3 {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
}

.sb-ind p {
	margin: 0;
	color: var(--mut);
	font-size: 0.85rem;
	line-height: 1.55;
}

.sb-ind__count {
	margin-top: auto;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ============================================================= 08 process */

.sb-flow {
	position: relative;
	display: grid;
	gap: clamp(18px, 2.4vw, 26px);
	max-width: 940px;
	margin: 0 auto;
	padding: 0 0 0 clamp(46px, 6vw, 78px);
	list-style: none;
	counter-reset: sb-step;
}

.sb-flow__spine {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: clamp(19px, 2.6vw, 33px);
	width: 2px;
	border-radius: 2px;
	background: var(--line);
	overflow: hidden;
}

.sb-flow__spine i {
	display: block;
	width: 100%;
	height: 0;
	background: var(--sb-grad);
	box-shadow: 0 0 14px rgba(129, 140, 248, 0.6);
}

.sb-step {
	position: relative;
}

.sb-step__marker {
	position: absolute;
	top: 22px;
	left: calc(clamp(46px, 6vw, 78px) * -1 + clamp(4px, 0.6vw, 8px));
	display: grid;
	place-items: center;
	width: clamp(32px, 4vw, 42px);
	height: clamp(32px, 4vw, 42px);
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--bg);
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.68rem;
	transition: color 340ms ease, border-color 340ms ease, background 340ms ease, box-shadow 340ms ease;
}

.sb-step.is-active .sb-step__marker {
	border-color: transparent;
	background: var(--sb-grad);
	color: #05060b;
	box-shadow: 0 0 26px -6px rgba(129, 140, 248, 0.9);
}

.sb-step__card {
	padding: clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--line);
	border-radius: var(--sb-r);
	background: var(--card);
	backdrop-filter: blur(10px);
	transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1), border-color 340ms ease, background 340ms ease;
}

.sb-step.is-active .sb-step__card {
	transform: translateX(4px);
	border-color: var(--line-hi);
	background: var(--card-hi);
}

.sb-step__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 10px;
}

.sb-step__head h3 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
}

.sb-step__time {
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sb-step__card p {
	margin: 0 0 16px;
	color: var(--mut);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* ======================================================== 09 testimonials */

.sb-quotes {
	max-width: var(--sb-max);
	margin: 0 auto;
	overflow: hidden;
}

.sb-quotes__track {
	display: flex;
	gap: 18px;
	transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-quote {
	flex: 0 0 min(430px, 84vw);
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: clamp(26px, 2.8vw, 36px);
	border: 1px solid var(--line);
	border-radius: var(--sb-r-lg);
	background: var(--card);
	backdrop-filter: blur(14px);
	transition: border-color 300ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-quote:hover {
	border-color: var(--line-hi);
	transform: translateY(-4px);
}

.sb-quote__glyph {
	width: 30px;
	height: 30px;
	color: var(--line-hi);
}

.sb-quote p {
	margin: 0;
	flex: 1;
	font-size: clamp(1rem, 1.35vw, 1.14rem);
	line-height: 1.58;
	letter-spacing: -0.014em;
}

.sb-quote footer {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.sb-quote__mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sb-grad);
	color: #05060b;
	font-weight: 700;
}

.sb-quote__name {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
}

.sb-quote__role {
	display: block;
	color: var(--faint);
	font-size: 0.78rem;
}

.sb-quote-nav {
	display: flex;
	gap: 8px;
}

.sb-quote-nav button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--card);
	color: var(--fg);
	cursor: pointer;
	transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.sb-quote-nav button svg {
	width: 16px;
	height: 16px;
}

.sb-quote-nav button:hover:not(:disabled) {
	border-color: var(--line-hi);
	background: var(--card-hi);
	transform: translateY(-2px);
}

.sb-quote-nav button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ================================================================= 10 AI */

.sb-ai {
	overflow: hidden;
}

.sb-aurora--ai {
	inset: -30% -20% auto -20%;
	height: 140%;
	opacity: 0.7;
}

.sb-aurora--ai .sb-aurora__a {
	top: 10%;
	left: 52%;
	width: 40vw;
	height: 40vw;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.34), transparent 62%);
}

.sb-aurora--ai .sb-aurora__b {
	top: 46%;
	left: 2%;
	right: auto;
	width: 34vw;
	height: 34vw;
	background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 62%);
}

.sb-ai__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	max-width: var(--sb-max);
	margin: 0 auto;
}

@media (max-width: 1024px) {
	.sb-ai__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-ai__caps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 36px;
}

@media (max-width: 520px) {
	.sb-ai__caps {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-ai__cap {
	position: relative;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--sb-r);
	background: var(--card);
	backdrop-filter: blur(10px);
	transition: border-color 300ms ease, background 300ms ease;
}

.sb-ai__cap:hover {
	border-color: rgba(168, 85, 247, 0.45);
	background: var(--card-hi);
}

.sb-ai__spark {
	display: block;
	width: 8px;
	height: 8px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--sb-grad);
	box-shadow: 0 0 14px rgba(168, 85, 247, 0.8);
	transform: rotate(45deg);
}

.sb-ai__cap h3 {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 600;
}

.sb-ai__cap p {
	margin: 0;
	color: var(--mut);
	font-size: 0.85rem;
	line-height: 1.55;
}

.sb-term {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--sb-r-lg);
	background: rgba(5, 6, 11, 0.72);
	box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(20px);
}

.sb-term__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
}

.sb-term__bar > span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
}

.sb-term__bar em {
	margin-left: 10px;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.66rem;
	font-style: normal;
	letter-spacing: 0.08em;
}

.sb-term__body {
	display: grid;
	gap: 14px;
	min-height: 300px;
	padding: 24px;
	font-family: var(--sb-mono);
	font-size: 0.82rem;
	line-height: 1.65;
	align-content: start;
}

.sb-term__line {
	display: flex;
	gap: 11px;
	margin: 0;
}

.sb-term__tag {
	flex: none;
	width: 14px;
	color: var(--faint);
}

.sb-term__line--user {
	color: var(--fg);
}

.sb-term__line--system {
	color: var(--faint);
}

.sb-term__line--ai {
	color: #c4b5fd;
}

.sb-term__line--ai .sb-term__tag {
	color: var(--sb-a2);
}

.sb-motion .sb-term__line {
	opacity: 0;
}

.sb-motion .sb-term__line.is-typed {
	opacity: 1;
}

.sb-term__line.is-typing [data-sb-term-text]::after {
	content: "▍";
	margin-left: 2px;
	color: var(--sb-a3);
	animation: sb-caret 1s steps(2) infinite;
}

@keyframes sb-caret {
	50% { opacity: 0; }
}

/* ============================================================== 11 blog */

.sb-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 18px;
	max-width: var(--sb-max);
	margin: 0 auto;
}

.sb-post {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 16px 24px;
	border: 1px solid var(--line);
	border-radius: var(--sb-r-lg);
	background: var(--card);
	color: inherit;
	text-decoration: none;
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease, box-shadow 420ms ease;
}

.sb-post:hover {
	transform: translateY(-6px);
	border-color: var(--line-hi);
	box-shadow: 0 30px 60px -36px rgba(10, 11, 19, 0.5);
}

.sb-post__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(140deg, #11131f, #1c1f33);
}

.sb-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-post:hover .sb-post__media img {
	transform: scale(1.06);
}

.sb-post__pattern {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(60% 60% at 25% 20%, rgba(129, 140, 248, 0.45), transparent 60%),
		radial-gradient(50% 50% at 80% 80%, rgba(34, 211, 238, 0.3), transparent 60%),
		linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: auto, auto, 26px 26px, 26px 26px;
}

.sb-post__topic {
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(5, 6, 11, 0.66);
	color: #fff;
	font-family: var(--sb-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.sb-post h3 {
	margin: 0;
	padding: 0 6px;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.32;
}

.sb-post p {
	margin: 0;
	padding: 0 6px;
	color: var(--mut);
	font-size: 0.88rem;
	line-height: 1.6;
}

.sb-post__meta {
	display: flex;
	gap: 14px;
	margin-top: auto;
	padding: 0 6px;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
}

/* ======================================================= 12 project wizard */

.sb-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(34px, 5vw, 76px);
	max-width: var(--sb-max);
	margin: 0 auto;
}

@media (max-width: 980px) {
	.sb-contact__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-facts {
	display: grid;
	gap: 22px;
	margin: 40px 0 0;
}

.sb-facts dt {
	margin-bottom: 6px;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sb-facts dd {
	margin: 0;
	color: var(--fg);
	font-size: 0.95rem;
}

.sb-facts dd a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--line-hi);
}

.sb-facts dd a:hover {
	border-bottom-color: currentColor;
}

.sb-wiz {
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--sb-r-lg);
	background: var(--card);
	box-shadow: 0 50px 100px -60px rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(20px);
}

.sb-wiz__head {
	margin-bottom: 26px;
}

.sb-wiz__count {
	margin: 0 0 10px;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sb-wiz__bar {
	height: 3px;
	border-radius: 3px;
	background: var(--line);
	overflow: hidden;
}

.sb-wiz__bar span {
	display: block;
	width: 25%;
	height: 100%;
	border-radius: 3px;
	background: var(--sb-grad);
	transition: width 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-wiz__step {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

/* Only one step at a time once JS takes over; without JS every step shows. */
.sb-wiz.is-stepped .sb-wiz__step {
	display: none;
	margin: 0;
}

.sb-wiz.is-stepped .sb-wiz__step.is-active {
	display: block;
	animation: sb-step-in 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sb-step-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.sb-wiz__step legend,
.sb-wiz__legend2 {
	padding: 0;
	margin: 0 0 18px;
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.sb-wiz__legend2 {
	margin-top: 26px;
}

.sb-wiz__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 560px) {
	.sb-wiz__options {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-opt input,
.sb-pillopt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sb-opt__box {
	display: flex;
	flex-direction: column;
	gap: 5px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--card);
	cursor: pointer;
	transition: border-color 240ms ease, background 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-opt__box:hover {
	border-color: var(--line-hi);
	transform: translateY(-2px);
}

.sb-opt__name {
	font-size: 0.93rem;
	font-weight: 600;
}

.sb-opt__desc {
	color: var(--faint);
	font-size: 0.78rem;
	line-height: 1.45;
}

.sb-opt input:checked + .sb-opt__box {
	border-color: rgba(129, 140, 248, 0.75);
	background: rgba(129, 140, 248, 0.12);
	box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.4);
}

.sb-opt input:focus-visible + .sb-opt__box,
.sb-pillopt input:focus-visible + span {
	outline: 2px solid var(--sb-a3);
	outline-offset: 2px;
}

.sb-wiz__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sb-pillopt span {
	display: inline-block;
	padding: 10px 17px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--mut);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.sb-pillopt span:hover {
	border-color: var(--line-hi);
	color: var(--fg);
}

.sb-pillopt input:checked + span {
	border-color: transparent;
	background: #fff;
	color: #05060b;
}

.sb-field {
	display: block;
	margin-bottom: 16px;
}

.sb-field > span {
	display: block;
	margin-bottom: 8px;
	color: var(--mut);
	font-size: 0.82rem;
	font-weight: 500;
}

.sb-field > span em {
	color: var(--faint);
	font-style: normal;
	font-size: 0.74rem;
}

.sb-field input,
.sb-field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--fg);
	font-family: inherit;
	font-size: 0.92rem;
	transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.sb-field input::placeholder,
.sb-field textarea::placeholder {
	color: var(--faint);
}

.sb-field input:focus,
.sb-field textarea:focus {
	outline: 0;
	border-color: rgba(129, 140, 248, 0.7);
	background: rgba(129, 140, 248, 0.07);
	box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16);
}

.sb-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 520px) {
	.sb-field-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-wiz__summary {
	margin: 22px 0 0;
	padding: 18px;
	border: 1px dashed var(--line-hi);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
}

.sb-wiz__summary-title {
	margin: 0 0 12px;
	color: var(--faint);
	font-family: var(--sb-mono);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sb-wiz__summary ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-wiz__summary li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.85rem;
}

.sb-wiz__summary span {
	color: var(--faint);
}

.sb-wiz__summary b {
	font-weight: 600;
	text-align: right;
}

.sb-wiz__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.sb-wiz__note {
	margin: 16px 0 0;
	color: var(--faint);
	font-size: 0.76rem;
}

/* ------------------------------------------------- shared form re-skinning */

.sb-home .sb-contact .social-links,
.sb-home .site-footer .social-links {
	display: flex;
	gap: 8px;
}

.sb-home .sb-contact .social-links a,
.sb-home .site-footer .social-links a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--mut);
	transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.sb-home .sb-contact .social-links a:hover,
.sb-home .sb-contact .social-links a:focus-visible,
.sb-home .site-footer .social-links a:hover,
.sb-home .site-footer .social-links a:focus-visible {
	color: #fff;
	border-color: var(--line-hi);
	transform: translateY(-2px);
}

.sb-home .fomo-panel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--card);
	color: var(--mut);
	font-size: 0.8rem;
	backdrop-filter: blur(10px);
}

.sb-home .fomo-panel strong {
	color: var(--fg);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sb-home .fomo-panel__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sb-a4);
	box-shadow: 0 0 10px var(--sb-a4);
}

.sb-home .form-notice {
	margin: 0 0 20px;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	color: var(--fg);
	font-size: 0.86rem;
}

.sb-home .form-notice--success {
	border-color: rgba(52, 211, 153, 0.5);
	background: rgba(52, 211, 153, 0.1);
}

.sb-home .form-notice--error {
	border-color: rgba(248, 113, 113, 0.5);
	background: rgba(248, 113, 113, 0.1);
}

/* ============================================================ site footer */

.sb-home .site-footer {
	position: relative;
	z-index: 1;
	background: var(--sb-ink);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	color: #9aa1b1;
}

.sb-home .footer-cta {
	display: none;
}

.sb-home .footer-brand p,
.sb-home .footer-menu a,
.sb-home .footer-bottom {
	color: #9aa1b1;
	font-size: 0.85rem;
}

.sb-home .footer-heading {
	color: #626a7c;
	font-family: var(--sb-mono);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sb-home .footer-menu a:hover {
	color: #fff;
}

.sb-home .footer-grid,
.sb-home .footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sb-home .footer-bottom a {
	color: #fff;
}

.sb-home .site-footer .lead-form input,
.sb-home .site-footer .lead-form select,
.sb-home .site-footer .lead-form textarea {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	color: #fff;
}

.sb-home .site-footer .lead-form label,
.sb-home .site-footer .lead-form__note {
	color: #9aa1b1;
}

.sb-home .site-footer .lead-form select option {
	background: #0a0b13;
	color: #fff;
}

.sb-home .site-footer .lead-form .button {
	border-radius: 999px;
	background: #fff;
	color: #05060b;
	box-shadow: none;
	font-weight: 600;
}

.sb-home .site-footer .lead-form .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px -14px rgba(255, 255, 255, 0.5);
}

/* ================================================================= motion */

.sb-home .reveal,
.sb-home.reveal-enabled .reveal {
	opacity: 1;
	transform: none;
}

.sb-motion .sb-mask > span {
	transform: translateY(108%);
	transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-motion .sb-mask.is-in > span {
	transform: none;
}

/*
 * Reveals animate the `translate` property rather than `transform`, so a
 * revealed element can still own its own transform — the case-card tilt and
 * every hover lift keep working instead of being overridden here.
 */
.sb-motion .sb-reveal {
	opacity: 0;
	translate: 0 20px;
	transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1), translate 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-motion .sb-reveal.is-in {
	opacity: 1;
	translate: none;
}

/* Grid children stagger by position rather than by a JS-assigned delay. */
.sb-motion .sb-svc .sb-reveal:nth-child(2),
.sb-motion .sb-eco-grid .sb-reveal:nth-child(2),
.sb-motion .sb-inds .sb-reveal:nth-child(2),
.sb-motion .sb-posts .sb-reveal:nth-child(2),
.sb-motion .sb-ai__caps .sb-reveal:nth-child(2) { transition-delay: 70ms; }

.sb-motion .sb-svc .sb-reveal:nth-child(3),
.sb-motion .sb-eco-grid .sb-reveal:nth-child(3),
.sb-motion .sb-inds .sb-reveal:nth-child(3),
.sb-motion .sb-posts .sb-reveal:nth-child(3),
.sb-motion .sb-ai__caps .sb-reveal:nth-child(3) { transition-delay: 140ms; }

.sb-motion .sb-svc .sb-reveal:nth-child(4),
.sb-motion .sb-eco-grid .sb-reveal:nth-child(4),
.sb-motion .sb-inds .sb-reveal:nth-child(4),
.sb-motion .sb-ai__caps .sb-reveal:nth-child(4) { transition-delay: 210ms; }

.sb-motion .sb-svc .sb-reveal:nth-child(5),
.sb-motion .sb-eco-grid .sb-reveal:nth-child(5),
.sb-motion .sb-inds .sb-reveal:nth-child(5) { transition-delay: 280ms; }

.sb-motion .sb-svc .sb-reveal:nth-child(6),
.sb-motion .sb-eco-grid .sb-reveal:nth-child(6),
.sb-motion .sb-inds .sb-reveal:nth-child(6) { transition-delay: 350ms; }

.sb-home :focus-visible {
	outline: 2px solid var(--sb-a3);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.sb-home *,
	.sb-home *::before,
	.sb-home *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.sb-mock {
		transform: none;
	}

	.sb-mock__phone {
		transform: rotate(-4deg);
	}
}

/* ============================================================= responsive */

@media (max-width: 780px) {
	.sb-hero {
		min-height: auto;
	}

	.sb-hero__stage {
		min-height: 340px;
	}

	.sb-head--split {
		align-items: flex-start;
	}

	.sb-showcase__tabs {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		border-radius: 16px;
		scrollbar-width: none;
	}

	.sb-showcase__tabs::-webkit-scrollbar {
		display: none;
	}

	.sb-showcase__ink {
		display: none;
	}

	.sb-showcase__tab.is-active {
		background: var(--fg);
		color: var(--bg);
	}
}

@media (max-width: 560px) {
	.sb-sec {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sb-mini-stats {
		gap: 20px;
	}

	.sb-wiz__nav .sb-btn {
		flex: 1;
		justify-content: center;
	}

	/* A pill only reads as a pill on one line. */
	.sb-home .fomo-panel {
		align-items: flex-start;
		border-radius: 18px;
	}
}