
/* ─── ROLES GRID ────────────────────────────────────────────────────── */
.cr-roles{padding:72px 0;background:var(--c-bg,#F5F7FA)}
.cr-roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.cr-role{background:var(--c-surface,#fff);border:1px solid var(--c-border,#E3E8EF);border-radius:16px;padding:28px 24px;transition:all .25s;display:flex;flex-direction:column}
.cr-role:hover{border-color:var(--c-accent,#2F80ED);box-shadow:0 12px 28px -10px rgba(15,36,61,.1);transform:translateY(-2px)}
.cr-role-icon{width:42px;height:42px;background:rgba(47,128,237,.07);border:1px solid rgba(47,128,237,.18);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.cr-role-icon svg{width:20px;height:20px;stroke:var(--c-accent,#2F80ED);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cr-role h3{font-size:16px;font-weight:700;color:var(--c-dark,#0F243D);margin:0 0 8px;letter-spacing:-.2px}
.cr-role p{font-size:13.5px;line-height:1.65;color:var(--c-text-secondary,#5A6B7F);margin:0;flex:1}
.cr-role-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;align-items:center}
.cr-role-tag{font-size:11px;font-weight:600;color:var(--c-text-muted,#8B97A8);background:var(--c-bg,#F5F7FA);border:1px solid var(--c-border,#E3E8EF);padding:3px 9px;border-radius:5px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.cr-role-tag.seniority{
	background:rgba(47,128,237,.08);
	border-color:rgba(47,128,237,.2);
	color:var(--c-accent,#2F80ED);
	font-weight:700;
	margin-left:auto;
}

/* ─── WHAT WE WORK ON ──────────────────────────────────────────────── */
.cr-work{padding:72px 0;background:var(--c-surface,#fff);border-top:1px solid var(--c-divider,#EEF1F6)}
.cr-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:36px}
.cr-work-text p{font-size:15.5px;line-height:1.75;color:var(--c-text-secondary,#5A6B7F);margin:0 0 16px}
.cr-work-text p:first-child{
	font-size:17px;line-height:1.65;
	color:var(--c-dark,#0F243D);
	padding-bottom:16px;
	border-bottom:1px solid var(--c-divider,#EEF1F6);
	margin-bottom:20px;
}
.cr-work-text p strong{color:var(--c-text,#1A1A1A);font-weight:600}
.cr-work-list{display:flex;flex-direction:column;gap:12px}
.cr-work-item{background:var(--c-bg,#F5F7FA);border:1px solid var(--c-border,#E3E8EF);border-radius:12px;padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;transition:all .2s}
.cr-work-item:hover{border-color:var(--c-accent,#2F80ED);transform:translateX(4px)}
.cr-work-mark{font-size:12px;font-weight:800;color:var(--c-accent,#2F80ED);letter-spacing:.5px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;min-width:28px;margin-top:1px}
.cr-work-item h4{font-size:14px;font-weight:700;color:var(--c-dark,#0F243D);margin:0 0 4px}
.cr-work-item p{font-size:13px;line-height:1.6;color:var(--c-text-muted,#8B97A8);margin:0}

/* ─── STACK ────────────────────────────────────────────────────────── */
.cr-stack{padding:72px 0;background:var(--c-bg,#F5F7FA)}
.cr-stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.cr-stack-group{background:var(--c-surface,#fff);border:1px solid var(--c-border,#E3E8EF);border-radius:12px;padding:20px 18px;transition:all .2s}
.cr-stack-group:hover{border-color:var(--c-accent,#2F80ED);transform:translateY(-2px)}
.cr-stack-group.primary{
	grid-column:span 2;
	background:linear-gradient(135deg,#0F243D 0%,#1F3A5F 100%);
	border-color:rgba(86,163,255,.3);
	position:relative;
	overflow:hidden;
}
.cr-stack-group.primary::before{
	content:'';
	position:absolute;
	inset:0;
	background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
	background-size:32px 32px;
	pointer-events:none;
}
.cr-stack-group.primary > *{position:relative;z-index:1}
.cr-stack-group.primary .cr-stack-label{color:#56A3FF}
.cr-stack-group.primary .cr-stack-item{
	background:rgba(86,163,255,.12);
	border-color:rgba(86,163,255,.3);
	color:#fff;
}
.cr-stack-label{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--c-accent,#2F80ED);text-transform:uppercase;margin-bottom:12px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.cr-stack-items{display:flex;flex-wrap:wrap;gap:6px}
.cr-stack-item{font-size:12.5px;font-weight:500;color:var(--c-text,#1A1A1A);background:var(--c-bg,#F5F7FA);border:1px solid var(--c-border,#E3E8EF);padding:4px 10px;border-radius:5px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.cr-stack-note{
	margin-top:24px;
	padding:22px 26px;
	background:rgba(47,128,237,.05);
	border:1px solid rgba(47,128,237,.18);
	border-left:3px solid var(--c-accent,#2F80ED);
	border-radius:0 10px 10px 0;
	font-size:14.5px;line-height:1.65;
	color:var(--c-text-secondary,#5A6B7F);
	display:flex;align-items:flex-start;gap:14px;
}
.cr-stack-note::before{
	content:'';
	width:22px;height:22px;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F80ED' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
	background-repeat:no-repeat;
	background-position:center;
	flex-shrink:0;
	margin-top:1px;
}
.cr-stack-note strong{color:var(--c-dark,#0F243D);font-weight:700}

/* ─── WHAT WE OFFER ────────────────────────────────────────────────── */
.cr-offer{padding:72px 0;background:var(--c-surface,#fff);border-top:1px solid var(--c-divider,#EEF1F6)}
.cr-offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:36px}
.cr-offer-card{background:var(--c-bg,#F5F7FA);border:1px solid var(--c-border,#E3E8EF);border-radius:12px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;transition:all .2s}
.cr-offer-card:hover{border-color:var(--c-accent,#2F80ED);transform:translateY(-2px)}
.cr-offer-icon{width:36px;height:36px;background:rgba(47,128,237,.08);border:1px solid rgba(47,128,237,.2);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cr-offer-icon svg{width:18px;height:18px;stroke:var(--c-accent,#2F80ED);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cr-offer-card h4{font-size:14.5px;font-weight:700;color:var(--c-dark,#0F243D);margin:0 0 6px}
.cr-offer-card p{font-size:13px;line-height:1.6;color:var(--c-text-secondary,#5A6B7F);margin:0}

/* ─── APPLY (email — instruction-first composition) ────────────────── */
.cr-apply{padding:80px 0;background:var(--c-surface,#fff);border-top:1px solid var(--c-divider,#EEF1F6)}
.cr-apply-inner{max-width:680px;margin:0 auto}

/* Single composite card: instruction → divider → action */
.cr-apply-card{
	background:var(--c-bg,#F5F7FA);
	border:1px solid var(--c-border,#E3E8EF);
	border-radius:14px;
	overflow:hidden;
}
.cr-apply-card-body{padding:28px 32px}
.cr-apply-card-label{
	font-size:11px;
	font-weight:700;
	letter-spacing:1.4px;
	color:var(--c-text-muted,#8B97A8);
	text-transform:uppercase;
	margin:0 0 18px;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.cr-apply-list{
	list-style:none;
	padding:0;margin:0;
	display:flex;flex-direction:column;gap:12px;
}
.cr-apply-list li{
	font-size:14.5px;
	line-height:1.55;
	color:var(--c-text,#1A1A1A);
	padding-left:26px;
	position:relative;
}
.cr-apply-list li::before{
	content:'';
	position:absolute;
	left:0;top:4px;
	width:16px;height:16px;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232F80ED' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 5'/></svg>");
	background-repeat:no-repeat;
	background-position:center;
}

/* Action footer of the card */
.cr-apply-action{
	display:flex;
	align-items:center;
	gap:16px;
	padding:20px 32px;
	background:var(--c-surface,#fff);
	border-top:1px solid var(--c-border,#E3E8EF);
	text-decoration:none;
	transition:background-color .2s;
}
.cr-apply-action:hover{background:rgba(47,128,237,.04)}
.cr-apply-action:hover .cr-apply-action-arrow{transform:translateX(4px)}
.cr-apply-action:hover .cr-apply-action-email{color:var(--c-accent,#2F80ED)}
.cr-apply-action-icon{
	width:38px;height:38px;
	background:rgba(47,128,237,.08);
	border:1px solid rgba(47,128,237,.18);
	border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	flex-shrink:0;
}
.cr-apply-action-icon svg{
	width:18px;height:18px;
	stroke:var(--c-accent,#2F80ED);
	fill:none;stroke-width:1.7;
	stroke-linecap:round;stroke-linejoin:round;
}
.cr-apply-action-text{
	display:flex;
	flex-direction:column;
	gap:1px;
	flex:1;
}
.cr-apply-action-label{
	font-size:12px;
	font-weight:600;
	color:var(--c-text-muted,#8B97A8);
	letter-spacing:.2px;
}
.cr-apply-action-email{
	font-size:16px;
	font-weight:600;
	color:var(--c-dark,#0F243D);
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	letter-spacing:-.2px;
	transition:color .2s;
}
.cr-apply-action-arrow{
	width:18px;height:18px;
	color:var(--c-text-muted,#8B97A8);
	flex-shrink:0;
	transition:transform .25s,color .2s;
}
.cr-apply-action:hover .cr-apply-action-arrow{color:var(--c-accent,#2F80ED)}

/* ─── RESPONSIVE ────────────────────────────────────────────────────── */
@media(max-width:1024px){
	.cr-roles-grid{grid-template-columns:repeat(2,1fr)}
	.cr-work-grid{grid-template-columns:1fr;gap:32px}
	.cr-stack-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
	.cr-roles{padding:56px 0}
	.cr-work{padding:56px 0}
	.cr-stack{padding:56px 0}
	.cr-offer{padding:56px 0}
	.cr-apply{padding:56px 0}
	.cr-roles-grid{grid-template-columns:1fr}
	.cr-offer-grid{grid-template-columns:1fr}
	.cr-stack-grid{grid-template-columns:1fr}
	.cr-apply-card-body{padding:24px}
	.cr-apply-action{padding:18px 24px;gap:14px}
	.cr-apply-action-email{font-size:14px}
}

