/* ---------------------------------------------------------------------------
	 Hero / Intro section
	 Clean, single-definition stylesheet for fixed hero behavior.
	 ------------------------------------------------------------------------ */

.hero {
	position: fixed;
	inset: 0; /* top:0; right:0; bottom:0; left:0 */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 6rem 12px;
	background-color: var(--surface);
	z-index: 0; /* base layer */
	color: var(--accent-warm);
}

.hero-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
	padding: 0 12px;
	position: relative;
}

.hero-title {
	font-size: 8rem;
	margin: 0 0 10px;
	font-weight: 800;
	letter-spacing: 1px;
	font-family: "Aileron";
	border-bottom: var(--accent-warm) 1rem dotted;
}

.hero-title:hover{cursor:pointer}

/* Per-letter hover lift */
.hero-title .letter{display:inline-block;transition:transform .18s ease;will-change:transform}
.hero-title .letter:hover{transform:translateY(-1rem)}
.hero-title .letter.space{display:inline-block;width:.5rem}

@media (prefers-reduced-motion: reduce){.hero-title .letter{transition:none}.hero-title .letter:hover{transform:none}}

.hero-sub{margin:4rem 0 4rem;color:var(--accent-warm);font-size:2rem}
.hero-cta{display:flex;gap:18px;justify-content:center}

.main__action{
	position: relative;
	display: block;
	width: 100%;
	background: var(--surface);
	padding: 5rem 12px;
    background-color: var(--accent-peach);
    max-width: 10rem;
    max-height: 10rem;
    z-index: 1001;
    border-radius: 2rem;
    margin-bottom: -5rem;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.main__action .main__scroll {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}

.main__scroll-box{
	width:56px;
	height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--surface);
	font-size:2.6rem;
	animation:bounce-vertical 1.6s ease-in-out infinite;
	border-radius: 12px;
    margin-top: -4rem;
}

@keyframes bounce-vertical{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

@media (prefers-reduced-motion: reduce){.main__scroll-box{animation:none!important}}

.main__scroll-text{color:var(--surface);margin-top:6px;font-weight:600;font-size:2rem}

/* End of Hero styles */