/* =========================================================
   Ombelo — home.css
   Hero (single-view, 96rem — Furnimart reference) · categories
   · testimonials · how band
   ========================================================= */

/* ---------- Hero ---------- */
.om-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1200px 720px at 78% -6%, rgba(87, 80, 253, 0.08), transparent 58%),
		linear-gradient(180deg, #f4f2fb 0%, var(--om-canvas) 62%);
}
.om-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	gap: clamp(20px, 3vw, 52px);
	align-items: stretch;
	min-height: calc(100svh - 108px);
	padding-block: clamp(16px, 2.6vh, 40px);
}

/* Left column: copy on top, mini-carousel pinned to the bottom */
.om-hero__left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(28px, 4vh, 56px);
	min-width: 0;
}
.om-hero__copy {
	max-width: 620px;
}
.om-hero__exts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(16px, 2.2vh, 26px);
}
.om-hero__title {
	font-size: clamp(2.7rem, 5.6vw, 4.75rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.035em;
	margin: 0 0 clamp(14px, 2vh, 22px);
}
.om-hero__title em {
	font-style: normal;
	color: var(--om-indigo);
}
.om-hero__sub {
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	color: var(--om-ink-60);
	max-width: 42ch;
	margin: 0 0 clamp(20px, 3vh, 34px);
}
.om-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.om-btn--primary {
	border-radius: 999px;
	padding-inline: 30px;
}
.om-btn--ghost {
	border-radius: 999px;
	padding-inline: 22px;
}
.om-btn__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--om-ink);
	color: var(--om-white);
	margin-right: 2px;
}

/* Left-bottom: mini product carousel */
.om-minis {
	min-width: 0;
}
.om-minis__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.om-minis__label {
	font-family: var(--om-mono);
	font-size: 0.76rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--om-ink-60);
	margin: 0;
}
.om-minis__arrows {
	display: flex;
	gap: 8px;
}
.om-minis__arrow {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--om-line);
	background: var(--om-white);
	color: var(--om-ink);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.om-minis__arrow:hover {
	border-color: var(--om-ink);
	background: var(--om-ink);
	color: var(--om-white);
}
.om-minis__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 24px;
}
.om-minis__track::-webkit-scrollbar {
	display: none;
}
.om-mini {
	position: relative;
	flex: 0 0 calc((100% - 32px) / 3);
	min-width: 0;
	scroll-snap-align: start;
	border-radius: 130px 130px 22px 22px;
	padding: 22px 14px 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.om-mini--0 { background: var(--om-cream); }
.om-mini--1 { background: var(--om-lav); }
.om-mini--2 { background: var(--om-mint); }
.om-mini__img {
	display: block;
	width: 100%;
}
.om-mini__img img {
	display: block;
	width: auto;
	max-width: 88%;
	max-height: clamp(96px, 14vh, 150px);
	margin-inline: auto;
	border-radius: 12px;
	transform: rotate(-4deg);
	box-shadow: var(--om-shadow);
	transition: transform 0.2s ease;
}
.om-mini__img:hover img {
	transform: rotate(-1deg) scale(1.03);
}
.om-mini__price {
	font-family: var(--om-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--om-ink);
}
.om-mini__price del {
	display: none;
}
.om-mini__price ins {
	text-decoration: none;
}
.om-mini__add {
	position: absolute;
	left: 50%;
	bottom: -17px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--om-white);
	color: var(--om-ink);
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: var(--om-shadow);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.om-mini__add:hover {
	background: var(--om-ink);
	color: var(--om-white);
	transform: translateX(-50%) scale(1.08);
}

/* Right column: product stage on top, proof block bottom-right */
.om-hero__right {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.om-hero__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}
.om-hero__fan {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.om-hero__fan span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(220px, 30vw, 400px);
	height: 46px;
	border-radius: 999px;
	background: #eae8f1;
}
.om-hero__fan span:nth-child(1) { transform: translate(-50%, -148px) rotate(-7deg); background: #efeef4; }
.om-hero__fan span:nth-child(2) { transform: translate(-50%, -74px) rotate(-3.5deg); background: #eae8f1; }
.om-hero__fan span:nth-child(3) { transform: translate(-50%, 0) rotate(0deg); background: #e6e4ef; }
.om-hero__fan span:nth-child(4) { transform: translate(-50%, 74px) rotate(3.5deg); background: #eae8f1; }
.om-hero__fan span:nth-child(5) { transform: translate(-50%, 148px) rotate(7deg); background: #efeef4; }

.om-hero__cover-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.om-hero__cover {
	display: block;
	line-height: 0;
}
.om-hero__cover img {
	width: auto;
	max-width: 100%;
	max-height: min(46vh, 430px);
	border-radius: 20px;
	transform: rotate(-5deg);
	box-shadow: var(--om-shadow-lift);
	transition: transform 0.25s ease;
}
.om-hero__cover:hover img {
	transform: rotate(-2.5deg) scale(1.02);
}
.om-hero__flash {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: var(--om-amber);
	color: var(--om-ink);
	font-family: var(--om-display);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	transform: rotate(10deg);
	box-shadow: var(--om-shadow);
}
.om-hero__float-chip {
	position: absolute;
	left: 2px;
	bottom: 24px;
	z-index: 2;
	box-shadow: var(--om-shadow);
}

/* Right-bottom: proof (price / dots / rating / avatars) */
.om-proof {
	flex: 0 0 auto;
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: clamp(10px, 1.6vh, 15px);
	padding-bottom: clamp(2px, 2vh, 16px);
}
.om-proof__price {
	font-family: var(--om-display);
	font-size: clamp(1.85rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--om-ink);
	margin: 0;
	line-height: 1;
}
.om-proof__price del {
	font-size: 0.5em;
	color: var(--om-ink-40);
	font-weight: 600;
	margin-right: 8px;
	vertical-align: middle;
}
.om-proof__once {
	font-family: var(--om-mono);
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--om-ink-40);
	margin-left: 6px;
	vertical-align: middle;
}
.om-proof__dots {
	display: inline-flex;
	gap: 10px;
}
.om-proof__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--om-line) inset;
}
.om-proof__dot--indigo { background: var(--om-indigo); }
.om-proof__dot--mint { background: #3f9d78; }
.om-proof__dot--amber { background: var(--om-amber); }
.om-proof__dot--ink { background: var(--om-ink); }
.om-proof__rating {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}
.om-proof__score {
	font-family: var(--om-display);
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--om-ink);
	margin: 0;
	line-height: 1;
}
.om-proof__score span {
	font-size: 0.55em;
	color: var(--om-ink-40);
	font-weight: 600;
}
.om-proof__note {
	margin: 0;
	max-width: 17ch;
	text-align: left;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--om-ink-60);
}
.om-avatar--num {
	font-family: var(--om-mono);
	font-size: 0.66rem;
}
/* Stands in for the avatar row while the store has no reviews to count: the
   formats are a fact about the catalogue, and the row keeps the same weight
   under the promise. */
.om-proof__formats {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}
.om-proof__formats .om-chip {
	background: var(--om-white);
	border: 1px solid var(--om-line);
}

/* ---------- Category rail ---------- */
.om-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.om-cat--webapp {
	grid-column: 1 / -1;
}
.om-cat {
	display: block;
	padding: 28px 28px 30px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.om-cat:hover {
	transform: translateY(-4px);
	box-shadow: var(--om-shadow-lift);
}
.om-cat--webapp { background: var(--om-indigo-wash); }
.om-cat--notion-templates { background: var(--om-lav); }
.om-cat--pdf-templates { background: var(--om-peach); }
.om-cat--excel-templates { background: var(--om-mint); }
.om-cat--2d-design-assets { background: var(--om-blush); }
.om-cat--3d-models { background: var(--om-ink); }
.om-cat--digital-goods { background: var(--om-cream); }
.om-cat__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.om-cat__name {
	font-family: var(--om-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--om-ink);
}
.om-cat__desc {
	color: var(--om-ink-60);
	font-size: 0.95rem;
	line-height: 1.5;
}
.om-cat--3d-models .om-cat__name {
	color: var(--om-canvas);
}
.om-cat--3d-models .om-cat__desc {
	color: rgba(250, 249, 247, 0.65);
}
.om-cat__count {
	margin-top: 12px;
	font-family: var(--om-mono);
	font-size: 0.78rem;
	color: var(--om-ink-60);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.om-cat--3d-models .om-cat__count {
	color: rgba(250, 249, 247, 0.6);
}
.om-cat__go {
	font-family: var(--om-body);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--om-ink);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.om-cat--3d-models .om-cat__go {
	color: var(--om-canvas);
}
.om-cat:hover .om-cat__go {
	opacity: 1;
	transform: translateX(0);
}

/* ---------- Testimonials ---------- */
.om-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.om-quote {
	margin: 0;
	padding: 30px;
	border-radius: var(--om-radius);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.om-quote--cream { background: var(--om-cream); }
.om-quote--lav { background: var(--om-lav); }
.om-quote--mint { background: var(--om-mint); }
.om-quote__stars {
	margin: 0;
	color: var(--om-amber);
	letter-spacing: 3px;
	font-size: 1rem;
}
.om-quote blockquote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--om-ink);
}
.om-quote figcaption {
	font-size: 0.9rem;
	color: var(--om-ink-60);
}
.om-quote figcaption strong {
	color: var(--om-ink);
	margin-right: 8px;
}

/* Promise variant — the band before the shop has real reviews. Same three
   cards; a white icon puck stands in for the star row, and the promise leads
   the paragraph in place of a name underneath it. */
.om-quote__ico {
	margin: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.72);
	color: var(--om-indigo);
}
.om-quote blockquote strong {
	display: block;
	font-family: var(--om-display);
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	margin-bottom: 6px;
}

/* ---------- How band ---------- */
.om-how {
	background: var(--om-ink);
	color: var(--om-canvas);
	padding-block: 96px;
}
.om-how .om-section__title {
	color: var(--om-canvas);
	max-width: 26ch;
}
.om-how__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.om-how__item svg {
	color: var(--om-indigo);
	background: rgba(87, 80, 253, 0.14);
	border-radius: 12px;
	padding: 10px;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
}
.om-how__item h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 8px;
}
.om-how__item p {
	color: rgba(250, 249, 247, 0.66);
	font-size: 0.98rem;
	margin: 0;
}

/* ---------- Responsive ---------- */

/* The hero is meant to be a single view, and its min-height is derived from the
   viewport — but a minimum only sets a floor. On a 1366x768 laptop the floor is
   660px while the column's natural height is 707px, so the content wins and the
   mini-carousel drops below the fold: the one thing the hero exists to show.
   Short screens get tighter vertical rhythm — padding, gaps and the margins
   between copy blocks — and nothing else. Type scale, card sizes and the
   carousel are the reference spec and are left exactly as they are.
   Scoped above 1040px so the stacked mobile hero, which scrolls by design, is
   untouched; 820px is the tallest viewport that still needs the trim. */
@media (min-width: 1041px) and (max-height: 820px) {
	.om-hero__inner {
		padding-block: 12px;
	}
	.om-hero__left {
		gap: 20px;
	}
	.om-hero__exts {
		margin-bottom: 10px;
	}
	.om-hero__title {
		margin-bottom: 10px;
	}
	.om-hero__sub {
		margin-bottom: 14px;
	}
	.om-minis__head {
		margin-bottom: 10px;
	}
}

@media (max-width: 1040px) {
	.om-hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 44px;
		padding-block: 40px 56px;
	}
	.om-hero__left {
		gap: 40px;
	}
	.om-hero__copy {
		max-width: none;
	}
	.om-hero__right {
		gap: 28px;
	}
	.om-hero__stage {
		min-height: 340px;
	}
	.om-proof {
		align-self: stretch;
		align-items: flex-start;
		text-align: left;
	}
	.om-proof__rating {
		justify-content: flex-start;
	}
	.om-cats {
		grid-template-columns: repeat(2, 1fr);
	}
	.om-quotes {
		grid-template-columns: 1fr;
	}
	.om-how__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}
@media (max-width: 560px) {
	.om-hero__title {
		font-size: clamp(2.4rem, 11vw, 3.1rem);
	}
	.om-mini {
		flex-basis: calc((100% - 16px) / 2);
	}
	.om-hero__stage {
		min-height: 280px;
	}
	.om-cats {
		grid-template-columns: 1fr;
	}
}