/* ---------- Hero section (component: Hero) ---------- */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--color-bg);
}

.hero > .container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--s3);
}

.hero-inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--s8);
	align-items: center;
	padding: var(--s8) 0 var(--s12);
}

.hero-inner.no-image{
	grid-template-columns: 1fr;
}

.hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2.3rem, 5.5vw, 3.8rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 var(--s2);
	font-weight: 700;
	color: var(--color-text);
}

.hero h1 .accent { color: var(--orange); }

.hero .lead {
	font-size: 1.18rem;
	color: var(--color-text-muted);
	max-width: 34em;
	text-wrap: balance;
}

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin: var(--s4) 0;
}

.hero-stats {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: var(--s1);
}

/* ---------- STEAM layout variant ---------- */

.hero--steam .hero-inner {
	grid-template-columns: 1fr;
	text-align: center;
	padding: var(--s8) 0;
}

.hero--steam .lead {
	margin: 0 auto;
	max-width: 40em;
}

.hero--steam .hero-ctas,
.hero--steam .hero-stats {
	justify-content: center;
	align-items: center;
}

.steam-letters {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin: var(--s4) 0;
}

.steam-letter {
	width: 76px;
	height: 76px;
	border-radius: 24px;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--slate);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.steam-letter:hover { transform: translateY(-6px) rotate(-3deg); }

.steam-letter--yellow { background: var(--yellow); }
.steam-letter--mint { background: var(--mint); }
.steam-letter--pink { background: var(--pink); }
.steam-letter--orange { background: var(--orange); }
.steam-letter--gray { background: var(--gray); }

/* ---------- Decorations ---------- */

.hero .deco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

.hero .deco-right-yellow {
	width: 340px;
	height: 340px;
	background: var(--yellow-soft);
	top: -120px;
	right: -100px;
}
.hero .deco-right-pink{
	width: 300px;
	height: 300px;
	background: var(--pink-soft);
	top: -120px;
	right: -100px;
}
.hero .deco-right-mint{
	width: 300px;
	height: 300px;
	background: var(--mint-soft);
	top: -120px;
	right: -100px;
}

.hero .deco-right-orange{
	width: 300px;
	height: 300px;
	background: var(--orange-soft);
	top: -120px;
	right: -100px;
}

.hero .deco-left-mint {
	width: 120px;
	height: 120px;
	background: var(--yellow-soft);
	bottom: 20px;
	left: -60px;
}

.hero .deco-left-yellow {
	width: 120px;
	height: 120px;
	background: var(--mint-soft);
	bottom: -60px;
	left: -50px;
}

.hero .deco-left-pink {
	width: 120px;
	height: 120px;
	background: var(--yellow-soft);
	bottom: -10px;
	left: -75px;
}

.hero .deco-left-orange {
	width: 100px;
	height: 100px;
	background: var(--mint-soft);
	bottom: -10px;
	left: -75px;
}

.hero .bubble {
	position: absolute;
	border-radius: 50%;
	z-index: 2;
}

.hero .bubble--yellow {
	width: 84px;
	height: 84px;
	background: var(--yellow);
	top: -30px;
	left: -26px;
}

.hero .bubble--mint {
	width: 36px;
	height: 36px;
	background: var(--mint);
	top: 60px;
	right: -14px;
}

.hero .bubble--pink {
	width: 26px;
	height: 26px;
	background: var(--pink);
	bottom: 90px;
	left: -12px;
}

/* ---------- Pill ---------- */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: .85rem;
	font-weight: 700;
}

.pill--mint { background: var(--mint-soft); color: #2C7A52; }
.pill--yellow { background: var(--yellow-soft); color: #8a6d00; }
.pill--pink { background: var(--pink-soft); color: #B83D63; }
.pill--orange { background: var(--orange-soft); color: #B05E00; }
.pill--slate { background: #E8ECEF; color: var(--slate); }

/* Button styles live in buttons.css (shared with navigation) */

/* ---------- Stat chips (component: HeroStatChip) ---------- */

.stat-chip {
	background: #fff;
	border: 0;
	border-radius: var(--r-lg);
	padding: .2rem .7rem .2rem .2rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	gap: 10px;
}

.stat-chip .ico {
	width: 32px;
	height: 32px;
	border-radius: 2rem;
	display: grid;
	place-items: center;
	flex: none;
}

.stat-chip .ico i[class^="icon-"] {
	font-size: 18px;
	line-height: 1;
}

.float-card .ico i[class^="icon-"] {
	font-size: 20px;
	line-height: 1;
}

.stat-chip .ico--yellow { background: var(--yellow-soft); color: #C9A227; }
.stat-chip .ico--mint { background: var(--mint-soft); color: #2C7A52; }
.stat-chip .ico--pink { background: var(--pink-soft); color: #B83D63; }

.stat-chip b {
	font-family: var(--font-display);
	font-size: .92rem;
	line-height: 1.15;
}

.stat-chip span {
	font-size: .78rem;
	color: var(--color-text-muted);
}

/* ---------- Hero media ---------- */

.hero-media { position: relative; }

.hero-media .photo {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4/4.3;
}

.hero-media .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.float-card {
	position: absolute;
	bottom: 24px;
	left: -30px;
	background: #fff;
	border-radius: 18px;
	box-shadow: var(--shadow-lg);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
}

.float-card-text {
	line-height: 1.25;
}

.float-card-text p {
	font-family: var(--font-display);
}

.float-card-text p small{
	font-weight: 300;
}

.float-card .ico {
	width: 42px;
	height: 42px;
	font-weight: 300;
	border-radius: 50%;
	background: var(--mint-soft);
	color: #2C7A52;
	display: grid;
	place-items: center;
}

/* ---------- Mouse parallax (driven by --mx / --my from hero.js) ---------- */

.hero .deco {
	transform: translate3d(calc(var(--mx, 0) * 20px), calc(var(--my, 0) * 20px), 0);
	will-change: transform;
}

/* Depth parallax, three planes:
   1. foreground (moves the most, with the mouse): .bubble, .float-card
   2. middle (frame): .photo — 3D tilt + slight shift
   3. background (seen through the frame "window", moves opposite): .photo img */

/* plane 1 — foreground */
.hero .bubble {
	transform: translate3d(
		calc(var(--mx, 0) * 18px),
		calc(var(--my, 0) * 18px + var(--float-y, 0px)),
		0
	);
	will-change: transform;
}

.float-card {
	transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 18px), 0);
	will-change: transform;
}

/* plane 2 — the frame (Apple TV-style 3D tilt + subtle shift) */
.hero-media {
	perspective: 1000px;
}

.hero-media .photo {
	transform:
		translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 6px), 0)
		rotateY(calc(var(--mx, 0) * 4deg))
		rotateX(calc(var(--my, 0) * -4deg));
	transform-style: preserve-3d;
	will-change: transform;
}

/* plane 3 — the image behind the window: scaled up so it can slide
   opposite to the mouse without exposing edges (overflow is hidden) */
.hero-media .photo img {
	transform: scale(1.12)
		translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -9px), 0);
	will-change: transform;
}

@media (max-width: 920px) {
	.hero-inner {
		grid-template-columns: 1fr;
		padding: var(--s6) 0 var(--s8);
	}

	.hero-media .photo { aspect-ratio: 16/11; }
}