/* ==========================================================================
   Big Skill Solutions - custom homepage
   Design system. Scoped under .bsx so nothing here touches other pages.
   ========================================================================== */

.bsx {
	/* Ink and grounds */
	--ink:        #060B24;
	--ink-2:      #0C1436;
	--ink-soft:   #1A2350;
	--paper:      #FFFFFF;
	--mist:       #F3F6FD;
	--mist-2:     #E7EDFA;

	/* Brand */
	--brand:      #2872FA;
	--brand-lift: #5B9BFF;
	--brand-deep: #1B4FC4;

	/* Accents: cyan reads "systems", gold reads "credential" */
	--cyan:       #5FD6D2;
	--gold:       #E4B35C;

	/* Type on dark / light */
	--on-dark:    #FFFFFF;
	--on-dark-2:  #A8B4D8;
	--on-light:   #060B24;
	--on-light-2: #515C7E;

	--edge:       rgba(255,255,255,.10);
	--edge-light: #DCE4F5;

	--rhythm:     clamp(4.5rem, 9vw, 8.5rem);
	--gut:        clamp(1.25rem, 5vw, 3rem);
	--maxw:       78rem;

	font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
	color: var(--on-light);
	background: var(--paper);
	overflow-x: hidden;
}

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

.bsx p { margin: 0; }
.bsx h1, .bsx h2, .bsx h3, .bsx h4 { margin: 0; text-wrap: balance; }

/* Blocksy sets heading colours globally with enough specificity to beat
   plain inheritance, which left dark headings on dark grounds. State the
   colour explicitly per ground instead of relying on inherit. */
.bsx .bsx__h1,
.bsx .bsx__h2,
.bsx .bsx__h3,
.bsx .bsx__step-t,
.bsx .bsx__feat-t { color: var(--on-light); }

.bsx .bsx__hero .bsx__h1,
.bsx .bsx__hero .bsx__h2,
.bsx .bsx__hero .bsx__h3,
.bsx .bsx__section--dark .bsx__h1,
.bsx .bsx__section--dark .bsx__h2,
.bsx .bsx__section--dark .bsx__h3,
.bsx .bsx__section--dark .bsx__feat-t,
.bsx .bsx__pillar--flag .bsx__h3,
.bsx .bsx__final .bsx__h2 { color: var(--on-dark); }

/* Layout ------------------------------------------------------------------ */
.bsx__wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.bsx__section { padding-block: var(--rhythm); position: relative; }

.bsx__section--dark  { background: var(--ink);  color: var(--on-dark); }
.bsx__section--mist  { background: var(--mist); }
.bsx__section--paper { background: var(--paper); }

/* Type scale -------------------------------------------------------------- */
.bsx__eyebrow {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: clamp(.66rem, 1.1vw, .74rem);
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 1.4rem;
}
.bsx__section--dark .bsx__eyebrow { color: var(--cyan); }
.bsx__section--mist .bsx__eyebrow,
.bsx__section--paper .bsx__eyebrow { color: var(--brand); }

.bsx__h1 {
	font-size: clamp(2.6rem, 7.2vw, 5.6rem);
	font-weight: 800;
	line-height: .98;
	letter-spacing: -.04em;
}

.bsx__h2 {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.032em;
	max-width: 20ch;
}

.bsx__h3 {
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.018em;
}

.bsx__lede {
	font-size: clamp(1.05rem, 1.9vw, 1.35rem);
	line-height: 1.55;
	font-weight: 400;
	max-width: 56ch;
	color: var(--on-light-2);
}
.bsx__section--dark .bsx__lede { color: var(--on-dark-2); }

.bsx__body {
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--on-light-2);
	max-width: 60ch;
}
.bsx__section--dark .bsx__body { color: var(--on-dark-2); }

/* Buttons ----------------------------------------------------------------- */
.bsx__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin-top: 2.4rem;
}

.bsx__btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: 1rem 1.7rem;
	border-radius: 100px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
	will-change: transform;
}
.bsx__btn:hover { transform: translateY(-2px); }
.bsx__btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.bsx__btn--primary { background: var(--brand); color: #fff; }
.bsx__btn--primary:hover { background: var(--brand-lift); color: #fff; }

.bsx__btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.28); }
.bsx__btn--ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }

.bsx__btn--light { background: transparent; color: var(--on-light); border-color: var(--edge-light); }
.bsx__btn--light:hover { border-color: var(--on-light); color: var(--on-light); }

.bsx__btn .bsx__arrow { transition: transform .2s ease; }
.bsx__btn:hover .bsx__arrow { transform: translateX(3px); }

/* HERO -------------------------------------------------------------------- */
.bsx__hero {
	background:
		radial-gradient(120% 95% at 78% 8%, rgba(95,214,210,.16) 0%, rgba(95,214,210,0) 52%),
		radial-gradient(110% 90% at 12% 92%, rgba(40,114,250,.30) 0%, rgba(40,114,250,0) 55%),
		var(--ink);
	color: var(--on-dark);
	padding-block: clamp(5rem, 12vw, 9.5rem) clamp(3.5rem, 7vw, 6rem);
	position: relative;
	overflow: hidden;
}

/* faint engineering grid - a nod to systems, kept very quiet */
.bsx__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(100% 70% at 50% 30%, #000 0%, transparent 78%);
	pointer-events: none;
}

.bsx__hero > * { position: relative; }

.bsx__hero-h1 { max-width: 15ch; }
.bsx__hero-h1 em {
	font-style: normal;
	background: linear-gradient(100deg, var(--cyan) 0%, var(--brand-lift) 60%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bsx__hero-lede { margin-top: 1.8rem; font-size: clamp(1.08rem, 2vw, 1.4rem); }

/* Credential strip -------------------------------------------------------- */
.bsx__creds {
	background: var(--ink-2);
	border-top: 1px solid var(--edge);
	border-bottom: 1px solid var(--edge);
	padding-block: 1.6rem;
}
.bsx__creds-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.1rem 2rem;
}
.bsx__cred {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--on-dark);
	line-height: 1.3;
}
.bsx__cred svg { flex: 0 0 auto; color: var(--gold); }
.bsx__cred--muted svg { color: var(--on-dark-2); }

/* Pillar cards ------------------------------------------------------------ */
.bsx__pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 1.1rem;
	margin-top: 3.2rem;
}

.bsx__pillar {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: 1.9rem 1.7rem 1.7rem;
	background: var(--paper);
	border: 1px solid var(--edge-light);
	border-radius: 18px;
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	min-height: 100%;
}
.bsx__pillar:hover {
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: 0 18px 44px -18px rgba(6,11,36,.30);
}
.bsx__pillar:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.bsx__pillar-num {
	font-family: "IBM Plex Mono", monospace;
	font-size: .7rem;
	letter-spacing: .16em;
	color: var(--brand);
	font-weight: 500;
}
.bsx__pillar--flag { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.bsx__pillar--flag .bsx__pillar-num { color: var(--cyan); }
.bsx__pillar--flag .bsx__pillar-desc { color: var(--on-dark-2); }
.bsx__pillar--flag .bsx__pillar-more { color: var(--cyan); }

.bsx__pillar-desc { font-size: .94rem; line-height: 1.55; color: var(--on-light-2); flex: 1; }
.bsx__pillar-more { font-size: .88rem; font-weight: 700; color: var(--brand); display: inline-flex; gap: .4rem; align-items: center; }

/* Split layout ------------------------------------------------------------ */
.bsx__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
@media (max-width: 880px) { .bsx__split { grid-template-columns: 1fr; } }

/* Feature list ------------------------------------------------------------ */
.bsx__feats { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.bsx__feat { display: grid; grid-template-columns: 1.55rem 1fr; gap: .9rem; align-items: start; }
.bsx__feat-dot {
	width: 1.55rem; height: 1.55rem; border-radius: 50%;
	display: grid; place-items: center; margin-top: .12rem;
	background: rgba(40,114,250,.12); color: var(--brand);
}
.bsx__section--dark .bsx__feat-dot { background: rgba(95,214,210,.14); color: var(--cyan); }
.bsx__feat-t { font-weight: 700; font-size: 1rem; display: block; margin-bottom: .15rem; }
.bsx__feat-d { font-size: .95rem; line-height: 1.55; color: var(--on-light-2); }
.bsx__section--dark .bsx__feat-d { color: var(--on-dark-2); }

/* Flow diagram ------------------------------------------------------------ */
.bsx__flow {
	background: var(--ink-2);
	border: 1px solid var(--edge);
	border-radius: 20px;
	padding: 1.8rem 1.6rem;
}
.bsx__flow-label {
	font-family: "IBM Plex Mono", monospace;
	font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--on-dark-2); margin-bottom: 1.3rem;
}
.bsx__flow-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.bsx__chip {
	font-family: "IBM Plex Mono", monospace;
	font-size: .72rem; padding: .5rem .8rem; border-radius: 8px;
	background: rgba(255,255,255,.06); border: 1px solid var(--edge); color: var(--on-dark);
	white-space: nowrap;
}
.bsx__chip--on { background: var(--brand); border-color: var(--brand); color: #fff; }
.bsx__chip--out { background: rgba(95,214,210,.12); border-color: rgba(95,214,210,.4); color: var(--cyan); }
.bsx__flow-arrow { color: var(--on-dark-2); font-size: .9rem; }
.bsx__flow-branch { margin-top: .7rem; padding-left: 1.8rem; }
.bsx__flow-foot {
	margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--edge);
	font-size: .84rem; color: var(--on-dark-2); line-height: 1.5;
}

/* Stats ------------------------------------------------------------------- */
.bsx__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}
.bsx__stat-n {
	font-size: clamp(2.8rem, 6vw, 4.4rem);
	font-weight: 800; line-height: 1; letter-spacing: -.045em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(150deg, var(--cyan), var(--brand-lift));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.bsx__stat-l { margin-top: .6rem; font-size: .9rem; font-weight: 600; color: var(--on-dark-2); }

/* Quote ------------------------------------------------------------------- */
.bsx__quote {
	margin-top: 3.4rem; padding-top: 2.6rem; border-top: 1px solid var(--edge);
	max-width: 44rem;
}
.bsx__quote-t {
	font-size: clamp(1.2rem, 2.4vw, 1.65rem); font-weight: 500;
	line-height: 1.45; letter-spacing: -.018em; color: var(--on-dark);
}
.bsx__quote-a { margin-top: 1.2rem; font-size: .88rem; color: var(--on-dark-2); }
.bsx__quote-a b { color: var(--on-dark); font-weight: 700; }

/* Method steps ------------------------------------------------------------ */
.bsx__steps {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.6rem; margin-top: 3.2rem; counter-reset: bsxstep;
}
.bsx__step { counter-increment: bsxstep; padding-top: 1.4rem; border-top: 2px solid var(--brand); }
.bsx__step::before {
	content: counter(bsxstep, decimal-leading-zero);
	font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .16em;
	color: var(--brand); display: block; margin-bottom: .8rem;
}
.bsx__step-t { font-size: 1.08rem; font-weight: 700; margin-bottom: .45rem; }
.bsx__step-d { font-size: .93rem; line-height: 1.55; color: var(--on-light-2); }

/* Final CTA --------------------------------------------------------------- */
.bsx__final {
	background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 45%, #3E88E8 100%);
	color: #fff; text-align: center;
}
.bsx__final .bsx__h2 { max-width: 22ch; margin-inline: auto; color: #fff; }
.bsx__final .bsx__lede { color: rgba(255,255,255,.86); margin-inline: auto; margin-top: 1.3rem; }
.bsx__final .bsx__cta-row { justify-content: center; }
.bsx__final .bsx__btn--primary { background: #fff; color: var(--brand-deep); }
.bsx__final .bsx__btn--primary:hover { background: #F0F5FF; color: var(--brand-deep); }
.bsx__final .bsx__btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.bsx__final .bsx__btn--ghost:hover { border-color: #fff; }

/* Scroll reveal ----------------------------------------------------------- */
.bsx__r { opacity: 0; transform: translateY(26px); }
.bsx.is-ready .bsx__r { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.bsx__r.is-in { opacity: 1; transform: none; }

/* Without JS, or with motion reduced, everything is simply visible. */
.bsx:not(.is-ready) .bsx__r { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.bsx__r,
	.bsx.is-ready .bsx__r { opacity: 1 !important; transform: none !important; transition: none !important; }
	.bsx__btn, .bsx__pillar { transition: none !important; }
	.bsx__btn:hover, .bsx__pillar:hover { transform: none !important; }
}

@media (max-width: 560px) {
	.bsx__cta-row { flex-direction: column; align-items: stretch; }
	.bsx__btn { justify-content: center; }
}