/* ==========================================================
   KOKO Enterprise — Homepage Hero
   ========================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: clamp(9rem, 13vw, 12rem) 0 clamp(5rem, 8vw, 7.5rem);
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 28%),
		linear-gradient(135deg, #0b0b0b 0%, #121212 56%, #0a0a0a 100%);
}

.hero::before {
	position: absolute;
	inset: 0;
	content: "";
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
	pointer-events: none;
}

.hero-container {
	position: relative;
	z-index: 2;
}

.hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: center;
}

.hero-content {
	max-width: 800px;
}

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 clamp(1.8rem, 3vw, 2.5rem);
	color: var(--color-accent);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.hero-kicker-line {
	display: block;
	width: 3rem;
	height: 1px;
	background: currentColor;
}

.hero-title {
	max-width: 820px;
	margin: 0;
	color: #fff;
	font-family: var(--font-heading);
	font-size: clamp(4rem, 7.6vw, 7.8rem);
	font-weight: 500;
	line-height: .9;
	letter-spacing: -.055em;
	text-wrap: balance;
}

.hero-subtitle {
	max-width: 620px;
	margin: clamp(2rem, 3vw, 2.75rem) 0 0;
	color: rgba(255,255,255,.72);
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.8;
}

.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.hero-primary-action,
.hero-secondary-action {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 58px;
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .11em;
	text-decoration: none;
	text-transform: uppercase;
}

.hero-primary-action {
	min-width: 238px;
	padding: 1rem 1.4rem;
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	box-shadow: 0 18px 44px color-mix(in srgb, var(--color-accent) 22%, transparent);
	transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.hero-primary-action:hover {
	color: #fff;
	filter: brightness(.9);
	transform: translateY(-3px);
	box-shadow: 0 24px 52px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.hero-secondary-action {
	position: relative;
	padding: .8rem 0;
}

.hero-secondary-action::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	content: "";
	background: var(--color-accent);
	transform-origin: left;
	transition: transform .25s ease;
}

.hero-secondary-action:hover {
	color: var(--color-accent);
}

.hero-secondary-action:hover::after {
	transform: scaleX(.68);
}

.hero-action-arrow {
	font-size: 1.1rem;
	transition: transform .25s ease;
}

.hero-primary-action:hover .hero-action-arrow,
.hero-secondary-action:hover .hero-action-arrow {
	transform: translateX(5px);
}

.hero-visual {
	position: relative;
	width: min(36vw, 500px);
	aspect-ratio: 1;
	justify-self: end;
}

.hero-orbit {
	position: absolute;
	border: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
	border-radius: 50%;
}

.hero-orbit-large {
	inset: 0;
	animation: koko-orbit 24s linear infinite;
}

.hero-orbit-small {
	inset: 18%;
	border-color: rgba(255,255,255,.18);
	animation: koko-orbit 18s linear infinite reverse;
}

.hero-orbit-large::before,
.hero-orbit-small::before {
	position: absolute;
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	content: "";
	background: var(--color-accent);
	border-radius: 50%;
	box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.hero-visual-core {
	position: absolute;
	inset: 35%;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.18);
	transform: rotate(45deg);
}

.hero-core-mark {
	width: 30%;
	aspect-ratio: 1;
	background: var(--color-accent);
}

.hero-visual-index {
	position: absolute;
	right: 2%;
	bottom: 4%;
	color: rgba(255,255,255,.28);
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 5vw, 5rem);
	line-height: 1;
}

.hero-scroll-cue {
	position: absolute;
	right: clamp(1.25rem, 3vw, 3rem);
	bottom: 2.5rem;
	z-index: 2;
	width: 1px;
	height: 68px;
	overflow: hidden;
	background: rgba(255,255,255,.18);
}

.hero-scroll-cue span {
	display: block;
	width: 100%;
	height: 42%;
	background: var(--color-accent);
	animation: koko-scroll-cue 2s ease-in-out infinite;
}

.hero a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 5px;
}

@keyframes koko-orbit {
	to { transform: rotate(360deg); }
}

@keyframes koko-scroll-cue {
	0% { transform: translateY(-120%); }
	60%, 100% { transform: translateY(260%); }
}

@media (max-width: 1100px) {
	.hero-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 3rem;
	}

	.hero-visual {
		width: 320px;
	}
}

@media (max-width: 900px) {
	.hero {
		min-height: auto;
		padding-top: 9.5rem;
	}

	.hero-layout {
		grid-template-columns: 1fr;
	}

	.hero-content {
		max-width: 760px;
	}

	.hero-visual {
		position: absolute;
		right: -13rem;
		bottom: -15rem;
		width: 480px;
		opacity: .46;
		pointer-events: none;
	}

	.hero-scroll-cue {
		display: none;
	}
}

@media (max-width: 576px) {
	.hero {
		padding: 8rem 0 5rem;
	}

	.hero-title {
		font-size: clamp(3.25rem, 15vw, 4.8rem);
		line-height: .94;
	}

	.hero-subtitle {
		font-size: 1rem;
		line-height: 1.72;
	}

	.hero-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.hero-primary-action,
	.hero-secondary-action {
		width: 100%;
	}

	.hero-secondary-action {
		min-height: 54px;
	}

	.hero-visual {
		right: -16rem;
		bottom: -12rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-orbit,
	.hero-scroll-cue span {
		animation: none;
	}
}