/* HERO */

.hero {
	margin: 0;
	padding: 46px 0 64px;
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
	overflow: hidden;
}

/* motif points (comme ton mockup) */
.hero-dot {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(31, 42, 68, .12) 1px, transparent 1px);
	background-size: 16px 16px;
	opacity: .22;
	pointer-events: none;

	/* concentré derrière la photo */
	mask-image: radial-gradient(circle at 70% 35%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
	-webkit-mask-image: radial-gradient(circle at 70% 35%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
}

.hero-inner {
	position: relative;
	z-index: 1;
}

.hero-card {
	border: 1px solid rgba(16, 24, 40, .08);
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(6px);
	border-radius: 24px;
	box-shadow: 0 18px 45px rgba(16, 24, 40, .08);
	max-width: 560px;
}

.hero-title {
	color: #1f2a44;
	font-weight: 900;
	letter-spacing: -0.02em;
	font-size: clamp(30px, 3.4vw, 44px);
}

.hero-sub {
	color: #5b667a;
	font-size: 1.05rem;
	line-height: 1.5;
}

.btn-outline-ink {
	border: 1px solid rgba(31, 42, 68, .25);
	color: #1f2a44;
	font-weight: 700;
}

.btn-outline-ink:hover {
	background: rgba(31, 42, 68, .06);
	border-color: rgba(31, 42, 68, .25);
	color: #1f2a44;
}

.hero-social a {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(16, 24, 40, .08);
	background: #fff;
	color: #0f172a;
	text-decoration: none;
	box-shadow: 0 10px 25px rgba(16, 24, 40, .06);
}

.hero-social a:hover {
	transform: translateY(-1px);
	color: #f28c1b;
}

/* avatar ronde + bord blanc + ombre */
.hero-avatar {
	width: min(300px, 70vw);
	aspect-ratio: 1/1;
	border-radius: 999px;
	object-fit: cover;
	border: 10px solid rgba(255, 255, 255, .9);
	box-shadow: 0 22px 70px rgba(16, 24, 40, .16);
	background: #e5e7eb;
}

/* vague en bas */
.hero-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 90px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,64L60,64C120,64,240,64,360,90.7C480,117,600,171,720,181.3C840,192,960,160,1080,138.7C1200,117,1320,107,1380,101.3L1440,96L1440,200L1380,200C1320,200,1200,200,1080,200C960,200,840,200,720,200C600,200,480,200,360,200C240,200,120,200,60,200L0,200Z'%3E%3C/path%3E%3C/svg%3E") center / cover no-repeat;
}

/* mobile spacing */
@media (max-width: 991.98px) {
	.hero {
		padding: 34px 0 54px;
	}

	.hero-card {
		max-width: 100%;
	}
}