@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
	font-family: 'Inter', sans-serif;
	scroll-behavior: smooth;
}

.gradient-bg {
	background-image: linear-gradient( 60deg, #9d6543 0%, #b28448 50%, #ebc992 100%);
}

.card-hover {
	transition: all 0.3s ease;
}

.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.nav-link {
	position: relative;
}

.nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -2px;
	left: 0;
	background-color: #9d6543;
	transition: width 0.3s ease;
}

.nav-link:hover::after {
	width: 100%;
}

.feature-icon {
	transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
	transform: scale(1.1);
}

/* --- imported from index.css --- */

p { margin: 0.75em 0; }
p , li { line-height: 1.5em; }

.app [contenteditable] {
	outline-width: 0;
	min-height: 160px;
	padding: 0.75rem;
	box-sizing: border-box;
	background-color: white;
}

.app .fld .label {
	position: absolute;
	z-index: 1;
	top: -0.2rem;
	left: 0.75rem;
	font-size: small;
	color: rgba(0 0 0 / 40%);
	pointer-events: none;
}
