body {
	height: 140vh;
	margin: 0;
	display: grid;
 font-family: 'Roboto', sans-serif;
	place-items: center;
	background: whitesmoke;
}

h1 {
	font-family: sans-serif;
	text-transform: uppercase;
	color: azure;
	font-size: 5rem;
	text-shadow: 7px 2px 2px black;
}

/* CSS */
:root {
	--bg-1: #0e0f12;
	--bg-2: #1a1d24;
	--ink: #e9eef6;
	--accent: #8ab4ff;
	--card: #11141a;
	--card-edge: #2a2f3a;
	--dx: 0;
	--dy: 8; /* shadow offsets (px) set by JS */
	--blur: 22; /* base blur radius */
	--depth: 30; /* shadow depth scale */
	--tilt: 10; /* card tilt scale (deg)  */
}

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	color: var(--ink);
	background: radial-gradient(200px 800px at 10% 15%, var(--bg-2), var(--bg-1));
	font: 500 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
		"Helvetica Neue", Arial;
}

.scene {
	min-height: 100%;
	padding: clamp(24px, 5vw, 24px);
	display: grid;
	place-items: center;
	gap: clamp(24px, 4vw, 40px);
 background-image: url('https://www.business-internet.fr/X-ALGOFLOWDESK/ALGORYTHM-UNITED/OFFICE/img/head.png '); 
background-repeat: no-repeat; 
background-size: 950px 550px; ; 
}

#title {
	margin: 0;
	font-weight: 900;
	letter-spacing: 0.06em;
	/*font-size: clamp(48px, 14vw, 160px);*/
  font-size: 78px;
	text-transform: uppercase;
	/* dynamic multilayer text-shadow injected by JS */
	will-change: text-shadow, transform;
}

.stage {
	position: relative;
	width: min(1100px, 90vw);
	height: clamp(260px, 45vw, 420px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
}

.ball {
	width: clamp(120px, 22vw, 200px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		120% 120% at 25% 20%,
		#ffffff 0 8%,
		#d9e1f7 12%,
		#8ab4ff 25%,
		#5d7fbf 45%,
		#283244 70%,
		#151924 100%
	);
	filter: saturate(1.1);
	position: relative;
	margin: auto;
	transform: translate3d(0, 0, 0);
	will-change: transform, filter;
}
.ball::after {
	/* contact shadow under the sphere */
	content: "";
	position: absolute;
	inset: auto 0 -12% 0;
	width: 140%;
	height: 30%;
	margin: auto;
	background: radial-gradient(
		50% 50% at 50% 50%,
		rgba(0, 0, 0, 0.45) 0,
		rgba(0, 0, 0, 0.18) 40%,
		transparent 70%
	);
	filter: blur(6px);
	transform: translate(calc(var(--dx) * 0.6px), calc(var(--dy) * 0.35px))
		scale(0.9, 0.75);
	pointer-events: none;
}

.card {
	background: linear-gradient(180deg, #121621, #0f131c);
	border: 1px solid var(--card-edge);
	border-radius: 20px;
	padding: clamp(18px, 2.8vw, 28px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
		/* dynamic soft shadow */ calc(var(--dx) * 1px) calc(var(--dy) * 1px)
			calc(var(--blur) * 1px) rgba(0, 0, 0, 0.45),
		calc(var(--dx) * 0.5px) calc(var(--dy) * 0.5px) calc(var(--blur) * 0.6px)
			rgba(0, 0, 0, 0.35),
		0 40px 70px rgba(0, 0, 0, 0.25);
	transform: perspective(900px) rotateX(calc(var(--dy) * -1deg / var(--tilt)))
		rotateY(calc(var(--dx) * 1deg / var(--tilt)));
	transform-style: preserve-3d;
	transition: box-shadow 0.15s linear;
	will-change: transform, box-shadow;
}
.card h2 {
	margin: 0.2rem 0 0;
	font-size: clamp(18px, 2.2vw, 26px);
}
.card p {
	opacity: 0.9;
	margin: 0.4rem 0 1rem;
}
.card button {
	border: 0;
	cursor: pointer;
	color: #0b1020;
	background: linear-gradient(180deg, #cfe0ff, #95b9ff);
	padding: 0.7rem 1rem;
	border-radius: 12px;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25),
		0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.hint {
	opacity: 0.7;
	font-size: 0.95rem;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.card,
	.ball,
	#title {
		transition: none;
		animation: none;
	}
}
/* Light grey background for stronger shadow contrast */
:root {
	--ink: #111;
} /* darker text for readability */
body {
	background: #e6e6e6;
} /* flat light grey */
body {
	background: linear-gradient(180deg, #e2e2e2, #f0f0f0);
}
.card {
	background: linear-gradient(180deg, #eaf4ff, #cfe6ff);
	border-color: #a6c8ff; /* optional: harmonize border */
}

/*.text shadow */

.textblock {
color: #FFFFFF;
background: #0e8dbc;
font-size: 24px;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}