/* ==========================================================================
   JobersBD — main stylesheet
   Colours are semantic roles. A palette is just a block of role values below,
   chosen with <html data-palette="…">. Nothing else in this file names a colour.
   ========================================================================== */

:root,
html[data-palette="ink"] {
	/* Paper & Ink — warm paper, near-black ink; the logo teal only as a highlighter. */
	--page: #ffffff;
	--soft: #f5f2ec;
	--surface: #ffffff;
	--ink: #1c1b19;
	--ink-2: #3f3b35;
	--muted: #625d55;
	--line: #e6e1d8;
	--line-strong: #cdc6b9;
	--accent: #1c1b19;
	--mark: rgba(0, 183, 178, .32);
	--tint: #eef6f5;
	--tint-ink: #0d5552;
	--primary: #1c1b19;
	--primary-hover: #000000;
	--on-primary: #ffffff;
	--dark: #1c1b19;
	--dark-2: #2a2824;
	--on-dark: #f5f2ec;
	--on-dark-muted: #bcb5a8;
	--accent-on-dark: #e9e2d3;
	--line-on-dark: rgba(255, 255, 255, .16);
	--hero-bg: #f5f2ec;
	--hero-ink: #1c1b19;
	--hero-muted: #57524a;
	--hero-accent: #1c1b19;
	--hero-line: rgba(28, 27, 25, .14);
	--hero-dot: rgba(28, 27, 25, .07);
	--net: 28, 27, 25;
	--done: #0d6e6a;
}
html[data-palette="marigold"] {
	/* Marigold (গাঁদা) — warm black and cream, marigold buttons. */
	--page: #ffffff;
	--soft: #fbf5e9;
	--surface: #ffffff;
	--ink: #1f1a14;
	--ink-2: #433a2f;
	--muted: #685e50;
	--line: #ece3d1;
	--line-strong: #d5c8ae;
	--accent: #8a5a00;
	--mark: rgba(242, 169, 0, .38);
	--tint: #fdf1d3;
	--tint-ink: #6e4700;
	--primary: #f2a900;
	--primary-hover: #e29b00;
	--on-primary: #1f1a14;
	--dark: #1f1a14;
	--dark-2: #2c251d;
	--on-dark: #fbf5e9;
	--on-dark-muted: #c8bca6;
	--accent-on-dark: #f6c343;
	--line-on-dark: rgba(255, 255, 255, .16);
	--hero-bg: #1f1a14;
	--hero-ink: #fbf5e9;
	--hero-muted: #cfc4af;
	--hero-accent: #f6c343;
	--hero-line: rgba(255, 255, 255, .2);
	--hero-dot: rgba(255, 255, 255, .06);
	--net: 246, 195, 67;
	--done: #8a5a00;
}
html[data-palette="terracotta"] {
	/* Terracotta (পোড়ামাটি) — cream and clay, after Bengal's terracotta temples. */
	--page: #ffffff;
	--soft: #f7efe6;
	--surface: #ffffff;
	--ink: #2a1f1a;
	--ink-2: #4a3a31;
	--muted: #6d5c51;
	--line: #ecdfd2;
	--line-strong: #d6c3b1;
	--accent: #a3401f;
	--mark: rgba(181, 72, 42, .2);
	--tint: #f9e9e1;
	--tint-ink: #8a3519;
	--primary: #b5482a;
	--primary-hover: #9b3b21;
	--on-primary: #ffffff;
	--dark: #2a1f1a;
	--dark-2: #372821;
	--on-dark: #f7efe6;
	--on-dark-muted: #cdbcad;
	--accent-on-dark: #f0a07d;
	--line-on-dark: rgba(255, 255, 255, .16);
	--hero-bg: #f7efe6;
	--hero-ink: #2a1f1a;
	--hero-muted: #5e4d43;
	--hero-accent: #a3401f;
	--hero-line: rgba(42, 31, 26, .16);
	--hero-dot: rgba(42, 31, 26, .07);
	--net: 163, 64, 31;
	--done: #a3401f;
}

:root {
	--danger: #b42318;
	--rec: #e5484d;
	--font: "Schibsted Grotesk", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
	--radius: 16px;
	--radius-sm: 12px;
	--shadow-sm: 0 1px 2px rgba(20, 18, 15, .06), 0 2px 6px rgba(20, 18, 15, .04);
	--shadow: 0 12px 28px -14px rgba(20, 18, 15, .22);
	--shadow-lg: 0 28px 56px -24px rgba(20, 18, 15, .45);
	--ease: cubic-bezier(.22, .9, .3, 1);
	--header-h: 74px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--page);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
[hidden] { display: none !important; }
/* Short pages: footer still sits at the bottom of the screen (no white band under it). */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
::placeholder { color: var(--muted); opacity: .85; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.container { width: min(1200px, 100% - 40px); margin-inline: auto; }
.container--narrow { width: min(860px, 100% - 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--page); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.nowrap { white-space: nowrap; }

/* Highlighted words in headings: a highlighter mark, not coloured gradient text. */
.text-gradient {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-color: var(--mark);
	text-decoration-thickness: .3em;
	text-underline-offset: -.08em;
	text-decoration-skip-ink: none;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	padding: .72em 1.25em; border-radius: 12px; border: 1.5px solid transparent;
	font-weight: 600; font-size: .95rem; line-height: 1.2; cursor: pointer; white-space: nowrap;
	transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--lg { padding: .95em 1.5em; font-size: 1rem; border-radius: 14px; }
.btn--block { width: 100%; }
.btn--primary { color: var(--on-primary); background: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--soft); }
.btn--outline { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.btn--outline:hover { border-color: var(--ink); }
.btn--light { background: var(--on-dark); color: var(--dark); }
.btn--glass { color: var(--on-dark); background: transparent; border-color: var(--line-on-dark); }
.btn--glass:hover { border-color: var(--on-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--page) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow .3s, border-color .3s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -16px rgba(20, 18, 15, .35); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }

.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { width: auto; height: 54px; }
.logo--light img { height: 66px; }

.main-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
/* Current page = a soft terracotta pill (works without JS, and in the phone menu).
   Desktop with JS: a "lava lamp" — three wax blobs behind the links, melted together by one small
   SVG filter (#jbd-goo in header.php). One blob stays on the current page; the lead blob and a
   slower tail blob travel to the hovered link, stretching a liquid neck that snaps and re-merges.
   Cost: the filter only repaints while a blob moves (nav strip ~650×40px). See main.js "Nav wax". */
.main-nav ul { position: relative; display: flex; gap: 4px; }
.main-nav ul a {
	position: relative; z-index: 1; display: block; padding: 8px 13px; border-radius: 999px;
	font-weight: 500; color: var(--ink-2); transition: color .25s, background-color .25s;
}
.main-nav ul a:hover { color: var(--ink); background: var(--soft); }
.main-nav ul a[aria-current] { color: var(--tint-ink); font-weight: 600; background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.main-nav__goo { display: none; }
@media (min-width: 1241px) {
	.main-nav ul.has-goo a, .main-nav ul.has-goo a:hover, .main-nav ul.has-goo a[aria-current] { background: none; box-shadow: none; }
	.main-nav ul.has-goo a.is-wax { color: var(--tint-ink); }
	.main-nav ul.has-goo .main-nav__goo {
		display: block; position: absolute; z-index: 0; inset: -10px -14px; pointer-events: none;
		filter: url(#jbd-goo);
	}
	.main-nav__goo i {
		position: absolute; top: 10px; left: 14px; height: calc(100% - 20px); border-radius: 999px;
		background: color-mix(in srgb, var(--primary) 20%, var(--page));
		will-change: transform, width;
	}
	.goo-home { width: var(--hw, 0); transform: translateX(var(--hx, 0)); opacity: var(--ho, 0); transition: opacity .3s; }
	.goo-lead { width: var(--lw, 0); transform: translateX(var(--lx, 0)); opacity: var(--lo, 0); transition: transform .42s cubic-bezier(.3, .7, .2, 1), width .42s cubic-bezier(.3, .7, .2, 1), opacity .3s; }
	.goo-tail { width: var(--lw, 0); transform: translateX(var(--lx, 0)) scaleY(.82); opacity: var(--lo, 0); transition: transform .78s cubic-bezier(.45, .05, .2, 1), width .78s cubic-bezier(.45, .05, .2, 1), opacity .3s; }
}
.main-nav__actions { display: flex; gap: 8px; align-items: center; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.lang-switch a { padding: 5px 10px; border-radius: 8px; font-size: .82rem; font-weight: 700; color: var(--muted); transition: background-color .2s, color .2s; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.lang-switch--mobile { display: none; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }

/* ---------- Section heads ---------- */
.section { padding: 104px 0; position: relative; }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 48px; display: grid; justify-items: center; gap: 14px; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; }
.section-head p { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.section-head--split { max-width: none; display: flex; align-items: end; justify-content: space-between; text-align: left; gap: 20px; flex-wrap: wrap; }
.section-head--split > div { display: grid; gap: 14px; justify-items: start; }

/* ---------- Hero ---------- */
.hero {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--hero-bg);
	color: var(--hero-ink);
	padding: 72px 0 0;
}
.hero::before { /* dot texture */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(var(--hero-dot) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
}
.hero__network { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-bottom: 88px; }
.hero__copy { display: grid; gap: 22px; justify-items: start; }
.hero__title { display: grid; gap: 6px; }
.hero__title-en { font-size: clamp(2.3rem, 5vw, 3.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.hero__title-bn { font-size: clamp(1.7rem, 3.6vw, 2.65rem); font-weight: 700; line-height: 1.3; }
.hero .text-gradient { color: var(--hero-accent); }
.hero__lead { font-size: 1.1rem; color: var(--hero-muted); max-width: 52ch; }
.hero__lead strong { color: var(--hero-ink); }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 640px; }
.path {
	position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px;
	background: transparent; border: 1px solid var(--hero-line); color: var(--hero-ink);
	transition: transform .3s var(--ease), background-color .2s, border-color .2s;
}
.path:hover { transform: translateY(-2px); border-color: var(--hero-ink); }
.path--seeker { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.path--seeker:hover { background: var(--primary-hover); border-color: transparent; }
.path__icon { display: grid; place-items: center; flex: none; }
.path__icon .icon { width: 26px; height: 26px; }
.path--recruiter .path__icon { color: var(--hero-accent); }
.path__text { display: grid; line-height: 1.35; }
.path__text strong { font-size: 1.05rem; }
.path__text span { font-size: .85rem; opacity: .85; }
.path--seeker .path__text span { opacity: 1; }
.path__go { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; opacity: .7; transition: transform .3s var(--ease); }
.path__go .icon { width: 16px; height: 16px; }
.path:hover .path__go { transform: translateX(4px); }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: var(--hero-muted); }
.hero__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.hero__ticks .icon { width: 17px; height: 17px; color: var(--hero-accent); }

.field {
	display: flex; align-items: center; gap: 8px;
	padding: 0 12px; min-height: 52px; border-radius: 12px; background: var(--soft);
	border: 1.5px solid transparent; transition: border-color .2s, background-color .2s;
}
.field:focus-within { border-color: var(--ink); background: var(--surface); }
.field .icon { color: var(--muted); width: 19px; height: 19px; }
.field input, .field select { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; font-size: .95rem; padding: 12px 0; }
.field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625d55' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 16px; padding-right: 20px; }

/* Hero visual (illustrative UI cards) */
.hero__visual { position: relative; height: 560px; perspective: 1100px; }
.hero__visual > * { will-change: transform; }
.orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.orbit__ring { position: absolute; border-radius: 50%; border: 1px solid var(--hero-line); }
.orbit__ring--1 { width: 440px; height: 440px; }
.orbit__ring--2 { width: 300px; height: 300px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-12px); } }

.hv-card {
	position: absolute; border-radius: 20px; color: var(--ink);
	background: var(--surface); border: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	transition: transform .2s ease-out;
}
.hv-profile { width: 330px; padding: 20px; top: 40px; left: 4%; animation: rise .9s var(--ease) both .2s; }
.hv-profile__head { display: flex; align-items: center; gap: 12px; }
.hv-profile__head strong { display: block; font-size: 1rem; }
.hv-profile__head span { font-size: .8rem; color: var(--muted); }
.hv-avatar { position: relative; display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 16px; background: var(--dark); color: var(--on-dark); font-weight: 700; }
.hv-avatar__ok { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #1f8f4e; color: #fff; border: 2px solid var(--surface); }
.hv-avatar__ok .icon { width: 11px; height: 11px; stroke-width: 3; }
.hv-ring { width: 50px; height: 50px; margin-left: auto; transform: rotate(-90deg); }
.hv-ring circle { fill: none; stroke: var(--line); stroke-width: 5; }
.hv-ring .hv-ring__bar { stroke: var(--done); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ring 1.6s var(--ease) forwards .9s; }
.hv-ring text { transform: rotate(90deg); transform-origin: 22px 22px; font-size: 11px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
@keyframes ring { to { stroke-dashoffset: 8; } }
.hv-label { margin: 14px 0 8px; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hv-chips span { padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--tint-ink); background: var(--tint); }
.hv-lines { display: grid; gap: 7px; margin: 16px 0; }
.hv-lines span { height: 7px; border-radius: 6px; background: var(--soft); position: relative; overflow: hidden; }
.hv-lines span::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--line-strong); transform-origin: left; animation: grow 1.4s var(--ease) both 1s; }
@keyframes grow { from { transform: scaleX(0); } }
.hv-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--muted); }
.hv-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hv-meta .icon { width: 14px; height: 14px; color: var(--ink-2); }

.hv-video { width: 250px; overflow: hidden; right: 0; top: 326px; animation: rise .9s var(--ease) both .45s; }
.hv-video__screen { position: relative; height: 150px; background: var(--dark); display: grid; place-items: center; }
.hv-rec { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.hv-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }
.hv-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--on-dark); color: var(--dark); }
.hv-play .icon { width: 20px; height: 20px; margin-left: 3px; }
.hv-wave { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 22px; display: flex; align-items: center; gap: 3px; }
.hv-wave i { flex: 1; height: 100%; border-radius: 3px; background: var(--accent-on-dark); opacity: .85; transform-origin: center; animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.07s); }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.hv-video__foot { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: .85rem; }
.hv-video__foot .icon { color: var(--ink-2); }
.hv-video__foot span { margin-left: auto; color: var(--muted); font-size: .78rem; }

.hv-toast {
	position: absolute; left: 0; bottom: 34px; display: flex; align-items: center; gap: 12px;
	padding: 12px 16px; border-radius: 16px; max-width: 300px;
	background: var(--dark-2); border: 1px solid var(--line-on-dark); color: var(--on-dark);
	box-shadow: var(--shadow-lg);
	animation: toast 7s var(--ease) infinite 1.4s; opacity: 0;
}
.hv-toast strong { display: block; font-size: .88rem; }
.hv-toast span { font-size: .76rem; color: var(--on-dark-muted); }
.hv-toast__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; background: var(--primary); color: var(--on-primary); }
.hv-toast__icon .icon { width: 18px; height: 18px; animation: ring-bell 7s infinite 1.4s; }
@keyframes toast { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 8%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes ring-bell { 8%, 14% { transform: rotate(14deg); } 11%, 17% { transform: rotate(-14deg); } 20% { transform: none; } }

.hv-viewers {
	position: absolute; right: 6%; top: 10px; display: flex; align-items: center; gap: 10px;
	padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: .82rem; font-weight: 500;
	box-shadow: var(--shadow-lg); animation: rise .9s var(--ease) both .7s;
}
.hv-viewers strong { color: var(--ink); font-size: 1rem; }
.hv-viewers__stack { display: flex; }
.hv-viewers__stack i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); color: var(--on-dark); background: var(--dark); }
.hv-viewers__stack i + i { margin-left: -9px; background: var(--dark-2); }
.hv-viewers__stack i:last-child { background: var(--primary); color: var(--on-primary); }
.hv-viewers__stack .icon { width: 14px; height: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }

/* ---------- Stats ---------- */
.stats { position: relative; z-index: 2; background: var(--page); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { display: flex; align-items: center; gap: 16px; padding: 34px 24px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__icon { display: grid; flex: none; color: var(--ink-2); }
.stat__icon .icon { width: 28px; height: 28px; }
.stat strong { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.stat__main { display: block; font-weight: 600; color: var(--ink-2); }

/* ---------- Compare: usual vs JobersBD ---------- */
.race { position: relative; display: grid; gap: 18px; max-width: 920px; margin: 0 auto 44px; padding: 26px 28px; border-radius: 22px; background: var(--dark); color: var(--on-dark); }
.race__lane { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 16px; }
.race__label { font-weight: 700; font-size: .95rem; }
.race__lane--usual .race__label { color: var(--on-dark-muted); }
.race__track { position: relative; height: 10px; border-radius: 10px; background: var(--line-on-dark); }
.race__tick { position: absolute; top: 50%; left: var(--p); width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark-muted); opacity: .5; transform: translate(-50%, -50%); }
.race__runner { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; transform: translate(-50%, -50%); }
.race__runner .icon { width: 16px; height: 16px; }
.race__lane--usual .race__runner { background: var(--dark-2); color: var(--on-dark-muted); border: 1px solid var(--line-on-dark); }
.race__lane--ours .race__runner { background: var(--accent-on-dark); color: var(--dark); }
.race__track::before { content: ""; position: absolute; inset: 0; width: 0; border-radius: inherit; }
.race__lane--usual .race__track::before { background: var(--on-dark-muted); opacity: .4; }
.race__lane--ours .race__track::before { background: var(--accent-on-dark); }
.race__status { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; opacity: 0; transition: opacity .4s; }
.race__status .icon { width: 17px; height: 17px; }
.race__lane--usual .race__status { color: var(--on-dark-muted); }
.race__lane--ours .race__status { color: var(--accent-on-dark); }
.race.is-running .race__lane--usual .race__runner { animation: run-usual 6s cubic-bezier(.4,0,.6,1) forwards; }
.race.is-running .race__lane--usual .race__track::before { animation: fill-usual 6s cubic-bezier(.4,0,.6,1) forwards; }
.race.is-running .race__lane--ours .race__runner { animation: run-ours 2.2s var(--ease) forwards .3s; }
.race.is-running .race__lane--ours .race__track::before { animation: fill-ours 2.2s var(--ease) forwards .3s; }
.race.is-running .race__lane--ours .race__status { opacity: 1; transition-delay: 2.4s; }
.race.is-running .race__lane--usual .race__status { opacity: 1; transition-delay: 6s; }
@keyframes run-usual { 0% { left: 0; } 30% { left: 22%; } 45% { left: 26%; } 70% { left: 40%; } 85% { left: 43%; } 100% { left: 48%; } }
@keyframes fill-usual { 0% { width: 0; } 30% { width: 22%; } 45% { width: 26%; } 70% { width: 40%; } 85% { width: 43%; } 100% { width: 48%; } }
@keyframes run-ours { to { left: 100%; } }
@keyframes fill-ours { to { width: 100%; } }
.race__replay { justify-self: end; color: var(--on-dark-muted); }
.race__replay:hover { color: var(--on-dark); }

.compare__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; max-width: 980px; margin: 0 auto; }
.compare__card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.compare__card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.compare__card ol { display: grid; gap: 12px; }
.compare__card li { display: flex; align-items: center; gap: 12px; }
.compare__card li > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font-size: .82rem; font-weight: 700; }
.compare__card--usual { background: var(--soft); color: var(--muted); }
.compare__card--usual li > span { background: var(--line); color: var(--muted); }
.compare__card--ours { border: 1.5px solid var(--ink); }
.compare__card--ours h3 .icon { color: var(--accent); }
.compare__card--ours li { font-weight: 600; }
.compare__card--ours li > span { background: var(--primary); color: var(--on-primary); }
.compare__card--ours li > span .icon { width: 15px; height: 15px; stroke-width: 3; }
.compare__verdict { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .9rem; font-weight: 600; }
.compare__card--ours .compare__verdict { color: var(--ink); margin-top: 0; }
/* Fewer steps than the left card: centre them in the spare height so both cards line up. */
.compare__card--ours ol { margin-block: auto; }
.compare__vs { align-self: center; color: var(--muted); font-weight: 700; font-size: .9rem; letter-spacing: .1em; }

/* ---------- How it works ---------- */
.how { background: var(--soft); }
.switch {
	position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto 52px;
	padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
}
.switch button {
	position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px; border: 0; border-radius: 12px; background: none; cursor: pointer;
	font-weight: 600; color: var(--ink-2); transition: color .3s;
}
.switch button .icon { width: 18px; height: 18px; }
.switch button.is-active { color: var(--on-primary); }
.switch__thumb { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; border-radius: 12px; background: var(--primary); transition: transform .45s var(--ease), width .45s var(--ease); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.steps[hidden] { display: none; }
.step {
	position: relative; padding: 28px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
	transition: border-color .25s;
	animation: step-in .6s var(--ease) both; animation-delay: calc(var(--d) * .09s);
}
.step:hover { border-color: var(--line-strong); }
@keyframes step-in { from { opacity: 0; transform: translateY(20px); } }
.step__num { display: block; margin-bottom: 18px; font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--accent); }
.step h3 { margin-bottom: 8px; font-size: 1.12rem; font-weight: 700; }
.step p { color: var(--muted); font-size: .93rem; }
.how__cta { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- Categories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.cat-card {
	position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start;
	padding: 22px 18px 18px; min-height: 160px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
	transition: transform .35s var(--ease), border-color .35s;
}
.cat-card:hover { transform: translateY(-3px); border-color: var(--ink); }
.cat-card__icon { display: grid; margin-bottom: 14px; color: var(--accent); }
.cat-card__icon .icon { width: 28px; height: 28px; }
.cat-card__main { position: relative; font-weight: 700; font-size: .98rem; line-height: 1.35; }
.cat-card__sub { position: relative; font-size: .76rem; color: var(--muted); }
.cat-card__go { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease); }
.cat-card__go .icon { width: 15px; height: 15px; }
.cat-card:hover .cat-card__go { opacity: 1; transform: none; }

/* ---------- District dot map ---------- */
.bd-map { background: var(--soft); }
.bd-map__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.bd-map__copy { display: grid; gap: 20px; align-content: start; }
.bd-map__copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.bd-map__copy > p { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.bd-map__divs { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-map__divs button { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.bd-map__divs button small { font-weight: 500; color: var(--muted); }
.bd-map__divs button:hover { border-color: var(--ink); }
.bd-map__divs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); }
.bd-map__divs button[aria-pressed="true"] small { color: inherit; opacity: .75; }
.bd-map__panel { display: grid; gap: 14px; justify-items: start; padding-top: 8px; border-top: 1px solid var(--line); }
.bd-map__panel-title { font-weight: 700; }
.bd-map__list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bd-map__list a { color: var(--ink-2); font-size: .93rem; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.bd-map__list a:hover { color: var(--ink); text-decoration-color: currentColor; }
.bd-map__figure { position: relative; margin: 0; }
.bd-map__svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; padding: 12px; overflow: visible; }
.bd-div { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease), filter .45s var(--ease); cursor: pointer; }
.bd-div:hover, .bd-div.is-hover { transform: scale(1.12); filter: drop-shadow(0 14px 18px rgba(20, 18, 15, .22)); }
.bd-region { fill: var(--line); stroke: var(--line); stroke-width: 34; stroke-linejoin: round; transition: fill .3s, stroke .3s; }
.bd-div.is-on .bd-region { fill: color-mix(in srgb, var(--primary) 22%, var(--soft)); stroke: color-mix(in srgb, var(--primary) 22%, var(--soft)); }
.bd-div:hover .bd-region, .bd-div.is-hover .bd-region { fill: color-mix(in srgb, var(--primary) 34%, var(--soft)); stroke: color-mix(in srgb, var(--primary) 34%, var(--soft)); }
.bd-div:hover .bd-dot circle, .bd-div.is-hover .bd-dot circle { fill: var(--primary); }
.bd-div:hover .bd-dot:hover circle { fill: var(--ink); }
.bd-dot circle { fill: var(--line-strong); transition: fill .2s; }
.bd-dot.is-on circle { fill: var(--primary); }
.bd-dot:hover circle, .bd-dot:focus-visible circle { fill: var(--ink); }
.bd-dot:focus { outline: none; }
.bd-dot:focus-visible circle { stroke: var(--ink); stroke-width: 3; }
.bd-dot .bd-dot__ring { fill: none !important; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.bd-office line { stroke: var(--ink); stroke-width: 1; }
.bd-office text { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--soft); stroke-width: 4px; stroke-linejoin: round; }
.bd-map__tip { min-height: 1.6em; margin-top: 12px; text-align: center; color: var(--muted); font-size: .92rem; }
.bd-map__tip b { color: var(--ink); }

/* ---------- Skill match ---------- */
.skill-match { color: var(--on-dark); overflow: hidden; background: var(--dark); }
.skill-match__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.skill-match__pick { display: grid; gap: 18px; justify-items: start; }
.skill-match__pick h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.skill-match .text-gradient, .employers .text-gradient, .cta .text-gradient { color: var(--accent-on-dark); text-decoration: none; }
.skill-match__pick > p { color: var(--on-dark-muted); font-size: 1.05rem; max-width: 60ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px; border-radius: 999px; cursor: pointer;
	background: transparent; border: 1px solid var(--line-on-dark); color: var(--on-dark);
	font-weight: 500; font-size: .92rem; transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--on-dark); }
.chip__check { width: 0; height: 15px; stroke-width: 3; opacity: 0; transition: width .25s var(--ease), opacity .25s; }
.chip[aria-pressed="true"] { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--dark); font-weight: 600; }
.chip[aria-pressed="true"] .chip__check { width: 15px; opacity: 1; }
.skill-match .link-btn { color: var(--on-dark-muted); }

.match-panel { padding: 26px; border-radius: 24px; color: var(--ink); background: var(--surface); }
.match-panel__head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.match-panel__title { display: block; font-size: 1.15rem; }
.match-panel__sub { font-size: .82rem; color: var(--muted); }
.match-gauge { position: relative; width: 84px; height: 84px; flex: none; }
.match-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.match-gauge circle { fill: none; stroke-width: 10; }
.match-gauge__track { stroke: var(--soft); }
.match-gauge__bar { stroke: var(--done); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .7s var(--ease); }
.match-gauge__val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.match-gauge__val strong { font-size: 1.5rem; color: var(--ink); }
.match-gauge__val span { font-size: .7rem; color: var(--muted); }
.match-list { display: grid; gap: 10px; margin-bottom: 18px; min-height: 236px; }
.match-item {
	display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
	padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
	animation: match-in .45s var(--ease) both; animation-delay: calc(var(--d) * .06s);
	transition: border-color .2s;
}
.match-item:hover { border-color: var(--line-strong); }
@keyframes match-in { from { opacity: 0; transform: translateX(16px); } }
.match-item__name { font-weight: 700; font-size: .96rem; }
.match-item__name small { display: block; font-weight: 500; font-size: .76rem; color: var(--muted); }
.match-item__pct { font-weight: 700; color: var(--done); }
.match-item__bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.match-item__bar span { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--done); transform-origin: left; animation: grow .8s var(--ease) both .1s; }
.match-empty { padding: 30px 0; text-align: center; color: var(--muted); }

/* ---------- Video CV ---------- */
.video-cv__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.video-cv__copy { display: grid; gap: 20px; justify-items: start; }
.video-cv__copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.video-cv__copy > p { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.feature-list { display: grid; gap: 14px; }
.feature-list li { display: flex; align-items: center; gap: 14px; }
.feature-list li > span { display: grid; flex: none; color: var(--accent); }
.feature-list li > span .icon { width: 24px; height: 24px; }
.feature-list strong { display: block; }
.feature-list small { color: var(--muted); }

.phone {
	position: relative; justify-self: center; width: 290px; height: 580px; padding: 14px;
	border-radius: 46px; background: #141310;
	box-shadow: 0 0 0 2px #3a372f inset, var(--shadow-lg);
}
.phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; border-radius: 0 0 16px 16px; background: #141310; z-index: 2; }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 34px; background: var(--dark-2); display: flex; flex-direction: column; }
.phone__top { display: flex; justify-content: space-between; align-items: center; padding: 40px 18px 0; }
.phone__top .hv-rec { position: static; }
.phone__timer { font-family: ui-monospace, monospace; color: #fff; font-size: .9rem; }
.phone__face { position: relative; flex: 1; display: grid; place-items: end center; color: var(--accent-on-dark); }
.phone__person { width: 200px; height: 200px; opacity: .9; }
.phone__person circle, .phone__person path { fill: currentColor; }
.phone__focus { position: absolute; top: 18%; left: 50%; width: 130px; height: 130px; transform: translateX(-50%); border: 2px solid currentColor; opacity: .55; border-radius: 18px; }
.phone__caption { margin: 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); color: var(--on-dark); font-size: .78rem; line-height: 1.5; }
.hv-wave--light { position: static; margin: 14px 18px 4px; height: 26px; }
.phone__controls { display: flex; align-items: center; justify-content: space-around; padding: 10px 20px 22px; }
.phone__controls span { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.phone__controls .phone__rec-btn { width: 60px; height: 60px; border: 4px solid #fff; background: var(--rec); background-clip: content-box; padding: 4px; }

/* ---------- Employers ---------- */
.employers { color: var(--on-dark); overflow: hidden; background: var(--dark-2); }
.employers__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.employers__copy { display: grid; gap: 22px; justify-items: start; }
.employers__copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.employers__copy > p { color: var(--on-dark-muted); font-size: 1.05rem; max-width: 60ch; }
.employers__note { display: flex; align-items: center; gap: 10px; padding: 4px 0 4px 14px; border-left: 2px solid var(--accent-on-dark); color: var(--on-dark); font-size: .92rem; }
.employers__note .icon { color: var(--accent-on-dark); }
.tick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.tick-grid li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.tick-grid .icon { color: var(--accent-on-dark); }

.talent-panel { display: grid; gap: 16px; padding: 24px; border-radius: 24px; background: var(--surface); color: var(--ink); transform: rotate(1deg); transition: transform .5s var(--ease); }
.talent-panel:hover { transform: none; }
.talent-panel__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.talent-panel__dots { display: flex; gap: 6px; }
.talent-panel__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.tp-field { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.tp-field b { color: var(--ink); }
.tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.range { --fill: 0%; width: 100%; height: 28px; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--ink) var(--fill), var(--line) var(--fill)); }
.range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--line); }
.range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s; }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.toggle { display: flex; align-items: center; gap: 12px; font-size: .9rem; font-weight: 500; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle__track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background .25s; flex: none; }
.toggle__track span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); }
.toggle input:checked + .toggle__track { background: var(--ink); }
.toggle input:checked + .toggle__track span { transform: translateX(20px); }
.toggle input:focus-visible + .toggle__track { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- FAQ ---------- */
.faq { background: var(--soft); }
.faq__list { display: grid; gap: 12px; }
.faq__item { border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); transition: border-color .25s; }
.faq__item[open] { border-color: var(--line-strong); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--soft); color: var(--ink); transition: transform .35s var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__body { padding: 0 22px 20px; color: var(--muted); }
.faq__body p { max-width: 54ch; }

/* ---------- CTA ---------- */
.cta { padding-top: 0; background: var(--soft); }
.cta__box {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	padding: 56px; border-radius: 28px; color: var(--on-dark); background: var(--dark);
}
.cta__copy { position: relative; display: grid; gap: 10px; max-width: 560px; }
.cta__copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cta__copy p { color: var(--on-dark-muted); }
.cta__box .btn-row { position: relative; }
.cta__box .btn--primary { background: var(--primary); color: var(--on-primary); }
.cta__shapes { position: absolute; inset: 0; pointer-events: none; } /* decoration only: must not take a flex slot */
.cta__shapes span { position: absolute; border-radius: 50%; border: 1px solid var(--line-on-dark); }
.cta__shapes span:nth-child(1) { width: 320px; height: 320px; right: -80px; top: -140px; }
.cta__shapes span:nth-child(2) { width: 200px; height: 200px; left: 38%; bottom: -120px; }
.cta__shapes span:nth-child(3) { width: 90px; height: 90px; left: -30px; top: 20px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--dark); color: var(--on-dark-muted); padding-top: 72px; font-size: .93rem; }
/* Light decoration: the hero's dot texture fading in from the top-right, and a huge outlined wordmark at the bottom. */
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 55%); pointer-events: none; }
.site-footer__mark { position: absolute; left: 50%; bottom: -.46em; z-index: -1; transform: translateX(-50%); font-size: clamp(5rem, 17vw, 15rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .07); pointer-events: none; user-select: none; }

/* Alignment: two shared rows. Row 1 = logo + column headings (centred on one line);
   row 2 = description + link lists (all start at the same height). */
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 22px; padding-bottom: 56px; }
.site-footer__col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 22px; align-content: start; }
.site-footer__head { align-self: center; margin: 0; }
.site-footer__brand .site-footer__head .logo img { height: 58px; width: auto; }
.site-footer__body { display: grid; gap: 16px; align-content: start; }
.site-footer__body p { max-width: 38ch; }
.site-footer__quote { color: var(--on-dark); font-weight: 600; }
.site-footer h3 { position: relative; font-size: 1rem; color: var(--on-dark); padding-bottom: 12px; }
.site-footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--accent-on-dark); }
.site-footer ul:not(.social) { display: grid; gap: 10px; align-content: start; }
.site-footer a { transition: color .2s, transform .2s var(--ease); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer__col ul:not(.social):not(.site-footer__contact) a { display: inline-block; }
.site-footer__col ul:not(.social):not(.site-footer__contact) a:hover { transform: translateX(4px); }
.site-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.site-footer__contact .icon { color: var(--accent-on-dark); margin-top: 3px; width: 18px; height: 18px; flex: none; }
.social { display: flex; gap: 10px; margin-top: 4px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-on-dark); color: var(--on-dark); transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.social a:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); transform: translateY(-2px); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 22px 0 28px; border-top: 1px solid var(--line-on-dark); font-size: .85rem; }
.site-footer__bottom ul { display: flex !important; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__top { display: inline-flex; align-items: center; gap: 6px; color: var(--on-dark); }
.site-footer__top .icon { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.site-footer__top:hover .icon { transform: translateY(-2px); }

/* ---------- Generic page shell ---------- */
.page-shell { padding: 80px 0 100px; min-height: 50vh; }
.page-shell__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 20px; }
.page-shell__soon { display: flex; gap: 12px; align-items: center; margin-top: 32px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--tint); color: var(--tint-ink); }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * .07s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.cat-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1240px) {
	.nav-toggle { display: inline-flex; margin-left: 0; }
	.lang-switch--mobile { display: inline-flex; margin-left: auto; }
	.lang-switch--desktop { display: none; }
	.main-nav {
		position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 16px;
		padding: 20px; background: var(--page); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
		transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility .25s;
	}
	.main-nav ul { flex-direction: column; }
	.main-nav ul a { padding: 12px; font-size: 1.05rem; }
	.main-nav__actions .btn { flex: 1; }
	.nav-open .main-nav { opacity: 1; visibility: visible; transform: none; }
	.nav-open .nav-toggle__open { display: none; }
	.nav-open .nav-toggle__close { display: block; }
}
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { height: 470px; max-width: 560px; width: 100%; justify-self: center; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(3) { border-left: 0; }
	.stat:nth-child(n+3) { border-top: 1px solid var(--line); }
	.cat-grid { grid-template-columns: repeat(4, 1fr); }
	.skill-match__inner, .video-cv__inner, .employers__inner, .bd-map__inner { grid-template-columns: 1fr; gap: 48px; }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; row-gap: 40px; }
	.site-footer__col { grid-row: auto; grid-template-rows: none; }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.section { padding: 72px 0; }
	.container { width: calc(100% - 32px); }
	.logo img { height: 42px; }
	.hero { padding-top: 44px; }
	.hero__visual { height: 610px; transform: scale(.88); transform-origin: top center; margin-bottom: -60px; }
	.hv-toast { bottom: 0; } /* below the video card instead of over it */
	.hv-profile { left: 0; width: 300px; }
	.hv-video { right: 0; width: 220px; top: 312px; }
	.hv-viewers { right: 0; }
	.orbit__ring--1 { width: 340px; height: 340px; }
	.paths { grid-template-columns: 1fr; }
	.race { padding: 22px 18px; }
	.race__lane { grid-template-columns: 1fr; gap: 10px; }
	.compare__grid { grid-template-columns: 1fr; }
	.compare__vs { justify-self: center; }
	.stat { flex-direction: column; align-items: flex-start; padding: 22px 14px; gap: 10px; }
	.stat strong { font-size: 1.6rem; }
	.steps { grid-template-columns: 1fr; }
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.cat-card { min-height: 150px; }
	.switch button { padding: 10px 14px; font-size: .9rem; }
	.tick-grid, .tp-row { grid-template-columns: 1fr; }
	.talent-panel { transform: none; }
	.cta__box { padding: 36px 24px; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.section-head--split { align-items: start; }
}
@media (max-width: 380px) {
	.hero__visual { transform: scale(.78); margin-bottom: -120px; }
	.stats__grid { grid-template-columns: 1fr; }
	.stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.hv-toast { opacity: 1; }
	.bd-div:hover, .bd-div.is-hover { transform: none; }
	.js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Scroll motion (home page)
   The hero is pinned; the rest of the page is a "sheet" that slides up over it while the hero
   recedes (scale + fade, driven by --p from main.js). Sections enter with a springy overshoot.
   Where scroll-driven animations are supported (Chrome, Edge, Safari 26+) entrances are scrubbed
   by the scroll position itself; elsewhere they play once on entering the view.
   Everything is off under prefers-reduced-motion.
   ========================================================================== */
:root { --spring: cubic-bezier(.16, 1, .3, 1); } /* fast ease-out, no overshoot */

.hero { position: sticky; top: 0; z-index: 0; }
.hero .hero__inner { transform-origin: 50% 35%; transform: scale(calc(1 - .08 * var(--p, 0))) translateY(calc(var(--p, 0) * 40px)); opacity: calc(1 - .85 * var(--p, 0)); }
.hero::before, .hero .hero__network { opacity: calc(1 - var(--p, 0)); }
.home-sheet { position: relative; z-index: 2; margin-top: -40px; background: var(--page); border-radius: 40px 40px 0 0; box-shadow: 0 -30px 70px -36px rgba(20, 18, 15, .45); overflow: hidden; }

/* Springy entrance (one-shot fallback) */
.js .reveal { transform: translateY(48px) scale(.96); transition: opacity .7s var(--ease), transform 1s var(--spring); }
.js .reveal.is-visible { transform: none; }

/* Scroll-scrubbed entrance + parallax drift on the big set pieces */
@supports (animation-timeline: view()) {
	.js .reveal {
		opacity: 1; transform: none; transition: none;
		animation: jbd-reveal linear both;
		animation-timeline: view();
		animation-range: entry calc(var(--d, 0) * 5%) entry calc(60% + var(--d, 0) * 5%);
	}
	.js .section-head.reveal { animation-range: entry 0% entry 45%; }
	.race.reveal, .phone.reveal, .talent-panel.reveal, .cta__box.reveal {
		animation-name: jbd-reveal, jbd-drift; animation-timeline: view(), view();
		animation-range: entry 0% entry 60%, cover 0% cover 100%;
	}
	.bd-map__svg { animation: jbd-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes jbd-reveal {
	0%   { opacity: 0; transform: translateY(64px) scale(.94); }
	70%  { opacity: 1; transform: translateY(-8px) scale(1.012); }
	100% { opacity: 1; transform: none; }
}
@keyframes jbd-drift { from { translate: 0 36px; } to { translate: 0 -36px; } }

@media (max-width: 720px) {
	.hero .hero__inner { padding-bottom: 104px; } /* room for the floating cards + the sheet's 40px overlap */
	.home-sheet { border-radius: 28px 28px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hero { position: relative; }
	.hero .hero__inner { transform: none; opacity: 1; }
	.js .reveal { animation: none !important; opacity: 1; transform: none; }
	.bd-map__svg { animation: none !important; }
}

/* ---------- Help chat (footer.php + assets/js/chatbot.js) ---------- */
.help { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.help > * { pointer-events: auto; }
.help__launcher { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 17px; border: 0; border-radius: 999px; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 26px -8px rgba(20, 18, 15, .45); transition: background-color .2s, transform .25s var(--ease); }
.help__launcher:hover { background: var(--primary-hover); }
.help__launcher:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.help__launcher[aria-busy] { cursor: progress; }
.help__launcher .icon { width: 22px; height: 22px; flex: none; }
.help__close, .help.is-open .help__open, .help.is-open .help__label { display: none; }
.help.is-open .help__close { display: block; }
.help.is-open .help__launcher { width: 56px; padding: 0; justify-content: center; }
.nav-open .help { display: none; }

.help__panel { display: flex; flex-direction: column; width: min(380px, calc(100vw - 40px)); height: min(580px, calc(100dvh - 120px)); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--page); box-shadow: var(--shadow-lg); transform-origin: bottom right; animation: help-in .3s var(--ease); }
.help__panel[hidden] { display: none; }
@keyframes help-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.help__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 20px; background: var(--dark); color: var(--on-dark); }
.help__head h2 { font-size: 1.05rem; color: inherit; }
.help__head p { margin-top: 2px; font-size: .85rem; color: var(--on-dark-muted); }
.help__x { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.help__x:hover { background: var(--line-on-dark); }
.help__x .icon { width: 20px; height: 20px; }
.help__log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: var(--soft); }
.help__msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere; }
.help__msg p { white-space: pre-line; }
.help__msg p + p { margin-top: 8px; }
.help__msg--bot { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.help__msg--me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--primary); color: var(--on-primary); white-space: pre-line; }
.help__typing { display: flex; gap: 4px; padding: 14px 16px; }
.help__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: help-dot 1s infinite; }
.help__typing i:nth-child(2) { animation-delay: .15s; }
.help__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes help-dot { 50% { opacity: .25; transform: translateY(-2px); } }
.help__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.help__chip { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--page); color: var(--ink); font: inherit; font-size: .86rem; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.help__chip:hover { border-color: var(--ink); background: var(--tint); }
.help__links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.help__links a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .9rem; color: var(--accent); }
.help__links a .icon { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.help__links a:hover .icon { transform: translateX(3px); }
.help__input { display: flex; gap: 8px; padding: 12px 12px 8px; border-top: 1px solid var(--line); background: var(--page); }
.help__input input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.help__input input:focus { outline: none; border-color: var(--ink); }
.help__input button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); cursor: pointer; }
.help__input button:hover { background: var(--primary-hover); }
.help__input button .icon { width: 18px; height: 18px; }
.help__alt { display: flex; justify-content: center; gap: 6px; padding: 0 12px 12px; background: var(--page); }
.help__alt > * { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.help__alt > *:hover { background: var(--soft); color: var(--ink); }
.help__alt .icon { width: 16px; height: 16px; }
.help__team { display: grid; gap: 10px; margin-top: 12px; }
.help__team label { display: grid; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.help__team input, .help__team textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--page); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; }
.help__team textarea { resize: vertical; }
.help__team input:focus, .help__team textarea:focus { outline: none; border-color: var(--ink); }
.help__team .btn { justify-self: start; }
.help__hp { position: absolute; left: -9999px; }
.help__err { color: var(--danger); font-size: .85rem; font-weight: 600; }
.help__sent { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; color: var(--done, var(--ink)); }
.help__sent .icon { width: 20px; height: 20px; flex: none; }
@media (max-width: 600px) {
	.help { right: 16px; bottom: 16px; }
	.help__launcher { width: 52px; height: 52px; padding: 0; justify-content: center; }
	.help__label { display: none; }
	.help.is-open .help__launcher { width: 52px; }
	.help__panel { position: fixed; inset: 12px 12px 80px; width: auto; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .help__panel, .help__typing i { animation: none; } }
@media print { .help { display: none; } }

/* Site notice banner (set in /admin/ → Site notice) */
.site-notice { padding: 9px 0; background: var(--tint); color: var(--tint-ink); font-size: .92rem; font-weight: 500; text-align: center; }
.site-notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-notice--warn { background: var(--ink); color: var(--page); }