/*
 * Homepage V2 — Almutaheda Pack
 * Purple conversion-led visual direction.
 *
 * Depends on: tokens.css, base.css, buttons.css, badges.css, cards.css, product-card.css
 *
 * Sections:
 *   1.  Shared helpers & motion arms
 *   2.  Hero
 *   3.  Trust Rail
 *   4.  Intent Router
 *   5.  Categories
 *   6.  Featured Products
 *   7.  Bundles
 *   8.  Why Us
 *   9.  Business Bridge
 *  10.  Delivery Areas
 *  11.  Guides
 *  12.  Final CTA
 *  13.  Responsive — 1024px tablet
 *  14.  Responsive — 768px tablet
 *  15.  Responsive — mobile (< 48rem)
 *  16.  Reduced motion
 */


/* ─────────────────────────────────────────────────────────────
   1. SHARED HELPERS & MOTION ARMS
   ───────────────────────────────────────────────────────────── */

.alm-home-main {
	overflow-x: hidden;
}

/* Container — 1240px max, generous padding */
.alm-home-main .alm-container {
	max-width: 1240px;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

@media (min-width: 90rem) {
	.alm-home-main .alm-container {
		max-width: 1280px;
	}
}

/* Section rhythm */
.alm-home-main section {
	padding-block: clamp(4rem, 8vw, 7rem);
}

/* Section label — purple */
.alm-section-label {
	display: block;
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--alm-color-primary, #7027B8);
	margin-block-end: 1rem;
}

.alm-section-label--light {
	color: var(--alm-color-yellow, #F3C93C);
}

/* Prices, dimensions, quantities — latin font */
.alm-price,
.woocommerce-Price-amount,
.alm-spec-value,
[data-alm-numeric] {
	font-family: var(--alm-font-latin, 'Inter', sans-serif);
}

/* Button and form label font */
.alm-btn,
button,
input,
select,
textarea,
label {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
}

/* Homepage button minimum sizes */
.alm-home-main .alm-btn {
	min-height: 2.875rem;
	padding-inline: clamp(1.25rem, 3vw, 1.75rem);
	font-size: 1rem;
}

.alm-home-main .alm-btn--lg {
	min-height: 3.25rem;
	padding-inline: clamp(1.5rem, 3.5vw, 2rem);
	font-size: 1.05rem;
}

/* Outline-light button (dark surfaces) */
.alm-btn--outline-light {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.42);
	color: #fff;
}

.alm-btn--outline-light:hover,
.alm-btn--outline-light:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
}

/* ── Motion arms ── */
.alm-motion-ready [data-alm-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--alm-motion-interface, 270ms) var(--alm-ease-standard, cubic-bezier(0.4,0,0.2,1)),
		transform var(--alm-motion-interface, 270ms) var(--alm-ease-emphasized, cubic-bezier(0.2,0,0,1));
}

.alm-motion-ready [data-alm-reveal="fade-in"] {
	opacity: 0;
	transform: none;
	transition: opacity var(--alm-motion-editorial, 540ms) var(--alm-ease-standard, cubic-bezier(0.4,0,0.2,1));
}

.alm-motion-ready [data-alm-reveal="scale"] {
	opacity: 0;
	transform: scale(0.97);
	transition:
		opacity var(--alm-motion-editorial, 540ms) var(--alm-ease-emphasized, cubic-bezier(0.2,0,0,1)),
		transform var(--alm-motion-editorial, 540ms) var(--alm-ease-reveal, cubic-bezier(0.16,1,0.3,1));
}

.alm-motion-ready [data-alm-reveal].alm-motion-entered,
.alm-motion-ready [data-alm-reveal="fade-in"].alm-motion-entered,
.alm-motion-ready [data-alm-reveal="scale"].alm-motion-entered {
	opacity: 1;
	transform: none;
}

.alm-motion-ready [data-alm-stagger] > * {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity var(--alm-motion-interface, 270ms) var(--alm-ease-standard, cubic-bezier(0.4,0,0.2,1)),
		transform var(--alm-motion-interface, 270ms) var(--alm-ease-emphasized, cubic-bezier(0.2,0,0,1));
}

.alm-motion-ready [data-alm-stagger].alm-motion-entered > * {
	opacity: 1;
	transform: none;
}


/* ─────────────────────────────────────────────────────────────
   2. HERO
   ───────────────────────────────────────────────────────────── */

/* ── Keyframes ── */
@keyframes alm-hero-float-0 {
	0%, 100% { transform: translateY(0);    }
	50%       { transform: translateY(-10px); }
}
@keyframes alm-hero-float-1 {
	0%, 100% { transform: translateY(0);    }
	50%       { transform: translateY(-14px); }
}
@keyframes alm-hero-float-2 {
	0%, 100% { transform: translateY(0);   }
	50%       { transform: translateY(-8px); }
}
@keyframes alm-hero-ring-spin {
	to { transform: rotate(360deg); }
}
@keyframes alm-hero-dot-pulse {
	0%, 100% { opacity: 0.25; transform: scale(1);    }
	50%       { opacity: 0.55; transform: scale(1.15); }
}
@keyframes alm-hero-swap-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0);   }
}
@keyframes alm-hero-swap-out {
	from { opacity: 1; transform: translateY(0);    }
	to   { opacity: 0; transform: translateY(-6px); }
}

/* ── Section shell — bright purple-lavender ── */
.alm-hero {
	position: relative;
	background:
		radial-gradient(circle at 92% 10%, rgba(201, 54, 184, 0.08), transparent 28rem),
		radial-gradient(circle at 8%  88%, rgba(40, 185, 211, 0.07), transparent 24rem),
		linear-gradient(170deg, #FAFAFE 0%, #F2EAFE 100%);
	color: var(--alm-color-ink, #20202A);
	padding-block: 0;
	min-height: 640px;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

/* Purple blob top-end */
.alm-hero::before {
	content: '';
	position: absolute;
	inset-block-start: -6rem;
	inset-inline-end: -4rem;
	inline-size: 36rem;
	block-size: 36rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(112, 39, 184, 0.10) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Magenta blob bottom-start */
.alm-hero::after {
	content: '';
	position: absolute;
	inset-block-end: -8rem;
	inset-inline-start: -6rem;
	inline-size: 28rem;
	block-size: 28rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 54, 184, 0.07) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Background shape container */
.alm-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Decorative shapes — yellow border square, magenta circle, cyan circle */
.alm-hero__bg-shape--1 {
	position: absolute;
	display: block;
	border: 2px solid rgba(243, 201, 60, 0.25);
	inline-size: clamp(8rem, 14vw, 16rem);
	block-size: clamp(8rem, 14vw, 16rem);
	border-radius: var(--alm-radius-2xl, 1.75rem);
	inset-block-start: 8%;
	inset-inline-end: 4%;
	transform: rotate(18deg);
}

.alm-hero__bg-shape--2 {
	position: absolute;
	display: block;
	background: rgba(201, 54, 184, 0.06);
	inline-size: clamp(5rem, 8vw, 10rem);
	block-size: clamp(5rem, 8vw, 10rem);
	border-radius: 50%;
	inset-block-end: 15%;
	inset-inline-start: 2%;
}

.alm-hero__bg-shape--3 {
	position: absolute;
	display: block;
	background: rgba(40, 185, 211, 0.08);
	inline-size: clamp(3rem, 5vw, 7rem);
	block-size: clamp(3rem, 5vw, 7rem);
	border-radius: 50%;
	inset-block-start: 60%;
	inset-inline-end: 30%;
}

/* ── Grid layout: 42% text / 58% visual ── */
.alm-hero .alm-container {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 42% 58%;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
	padding-block: clamp(5rem, 9vw, 7rem);
}

/* ── Content column ── */
.alm-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-6, 1.5rem);
}

.alm-hero__eyebrow {
	font-family: var(--alm-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--alm-color-primary, #7027B8);
	background: var(--alm-color-primary-soft, #F2EAFE);
	border-radius: var(--alm-radius-full, 9999px);
	padding: 0.38rem 1rem;
	display: inline-block;
	margin: 0;
}

.alm-hero__heading {
	font-family: var(--alm-font-display);
	font-size: clamp(2.8rem, 5vw, 4.8rem);
	font-weight: 700;
	line-height: 1.12;
	color: var(--alm-color-ink, #20202A);
	margin: 0;
	letter-spacing: -0.01em;
}

.alm-hero__swap-word {
	display: inline-block;
	color: var(--alm-color-primary, #7027B8);
	/* Reserve width for the longest swap word ("التخزين"/"الحماية",
	   7 chars) so shorter words swapping in never reflow the heading
	   and shift everything below it (CTA, content column height). */
	min-width: 7ch;
	white-space: nowrap;
	vertical-align: baseline;
}

.alm-hero__swap-word.is-leaving {
	animation: alm-hero-swap-out 220ms var(--alm-ease-reveal, ease) forwards;
}
.alm-hero__swap-word.is-entering {
	animation: alm-hero-swap-in 270ms var(--alm-ease-reveal, ease) forwards;
}

.alm-hero__sub {
	font-family: var(--alm-font-body);
	font-size: clamp(1rem, 1.15vw, 1.12rem);
	color: var(--alm-color-muted, #6E6C78);
	line-height: 1.9;
	max-width: 46ch;
	margin: 0;
}

.alm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alm-space-4, 1rem);
	align-items: center;
	margin-block-end: var(--alm-space-5, 1.25rem);
}

.alm-hero__primary-cta {
	position: relative;
	transition:
		background var(--alm-motion-functional, 190ms),
		box-shadow var(--alm-motion-functional, 190ms),
		transform var(--alm-motion-functional, 190ms);
}

.alm-hero__primary-cta:hover {
	box-shadow: 0 0 0 4px rgba(112, 39, 184, 0.22), 0 8px 28px rgba(112, 39, 184, 0.28);
	transform: translateY(-2px);
}

.alm-hero__primary-cta:active {
	transform: translateY(0);
}

.alm-hero__assist-cta {
	font-family: var(--alm-font-body);
	font-size: var(--alm-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--alm-color-primary, #7027B8);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: color var(--alm-motion-functional, 190ms);
}

.alm-hero__assist-cta:hover,
.alm-hero__assist-cta:focus-visible {
	color: var(--alm-color-primary-dark, #4F1785);
}

/* ── Visual column ── */
.alm-hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	margin-inline-end: -2%;
}

/* Positioning context for the slider (normal flow, self-sized via
   aspect-ratio) plus the absolutely-positioned stat cards/ring/dot
   layered on top. No fixed height and no overflow clipping here —
   the slider card and its own shadow/dots manage their own bounds. */
.alm-hero__cards {
	position: relative;
	width: 100%;
}

.alm-hero__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 11;
	height: auto;
	object-fit: cover;
	object-position: center center;
	border-radius: 1.5rem;
	z-index: 0;
	box-shadow: 0 32px 80px rgba(112, 39, 184, 0.18);
}

/* Smart product slider — premium floating card, replaces the static
   hero image. Sized by its own aspect-ratio (not the shared
   .alm-hero__cards box) so it never depends on late-loading content
   for its box size — this is what keeps CLS at zero. */
.alm-hero-slider {
	position: relative;
	width: 100%;
	outline: none;
}

.alm-hero-slider:focus-visible {
	box-shadow: 0 0 0 3px var(--alm-color-primary, #7027B8);
	border-radius: 1.75rem;
}

/* The clipping box — sized by aspect-ratio up front (zero CLS).
   Arrows/dots live outside this on .alm-hero-slider so they can sit
   at the box edges/below without being clipped themselves. */
.alm-hero-slider__viewport {
	width: 100%;
	aspect-ratio: 16 / 11;
	border-radius: 1.75rem;
	overflow: hidden;
}

.alm-hero-slider__track {
	display: flex;
	width: 100%;
	height: 100%;
	will-change: transform;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	touch-action: pan-y;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

.alm-hero-slider.is-dragging .alm-hero-slider__track {
	cursor: grabbing;
}

.alm-hero-slider__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	padding: 0.4rem;
}

/* The card itself: rounded, shadowed, cleanly separated media/body —
   a real product card rather than text floated over a photo. */
.alm-hero-slider__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 1.5rem;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 1px 2px rgba(32, 10, 64, 0.04),
		0 24px 48px -16px rgba(112, 39, 184, 0.28),
		0 0 0 1px rgba(112, 39, 184, 0.06);
	text-decoration: none;
	transition: box-shadow var(--alm-motion-functional, 190ms), transform var(--alm-motion-functional, 190ms);
}

.alm-hero-slider__card:hover,
.alm-hero-slider__card:focus-visible {
	box-shadow:
		0 1px 2px rgba(32, 10, 64, 0.04),
		0 28px 56px -14px rgba(112, 39, 184, 0.34),
		0 0 0 1px rgba(112, 39, 184, 0.10);
}

.alm-hero-slider__media {
	position: relative;
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: var(--alm-color-primary-soft, #F2EAFE);
}

.alm-hero-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.alm-hero-slider__card:hover .alm-hero-slider__image {
	transform: scale(1.04);
}

.alm-hero-slider__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--alm-color-primary, #7027B8);
}

/* Body: solid panel below the image, not text-over-photo — legible
   regardless of image content, and reads as a genuine product card. */
.alm-hero-slider__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex: 0 0 auto;
	padding: 0.9rem 1.15rem;
	border-block-start: 1px solid rgba(112, 39, 184, 0.08);
}

.alm-hero-slider__name {
	font-family: var(--alm-font-body);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alm-hero-slider__price {
	font-family: var(--alm-font-latin, 'Inter', sans-serif);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--alm-color-primary, #7027B8);
	white-space: nowrap;
	flex-shrink: 0;
}

/* CTA row — visible on hover/focus, adds the "premium" affordance
   without permanently taking body space. */
.alm-hero-slider__cta {
	position: absolute;
	inset-inline: 1.15rem;
	inset-block-end: 100%;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	margin-block-end: -1px;
	border-radius: 999px 999px 0 0;
	background: var(--alm-color-primary, #7027B8);
	color: #fff;
	font-family: var(--alm-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	width: fit-content;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--alm-motion-functional, 190ms), transform var(--alm-motion-functional, 190ms);
	pointer-events: none;
}

.alm-hero-slider__cta-arrow {
	transition: transform var(--alm-motion-functional, 190ms);
}

.alm-hero-slider__card:hover .alm-hero-slider__cta,
.alm-hero-slider__card:focus-visible .alm-hero-slider__cta {
	opacity: 1;
	transform: translateY(0);
}

.alm-hero-slider__card:hover .alm-hero-slider__cta-arrow {
	transform: translateX(-3px);
}

/* Arrows: top corners, clear of the mid-height stat card
   (data-alm-hero-card="1", inset-block-start: 44%). */
.alm-hero-slider__arrow {
	position: absolute;
	inset-block-start: 1.1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--alm-radius-full, 999px);
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(112, 39, 184, 0.12);
	color: var(--alm-color-primary, #7027B8);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(112, 39, 184, 0.14);
	transition: transform var(--alm-motion-functional, 190ms), box-shadow var(--alm-motion-functional, 190ms);
}

.alm-hero-slider__arrow:hover,
.alm-hero-slider__arrow:focus-visible {
	box-shadow: 0 6px 20px rgba(112, 39, 184, 0.20);
	transform: scale(1.06);
}

.alm-hero-slider__arrow--prev {
	inset-inline-start: 1.1rem;
}

.alm-hero-slider__arrow--next {
	inset-inline-end: 1.1rem;
}

/* Dots sit centered under the card, in the visual gap below it —
   not floating on top of the photo, so they never collide with
   the caption or stat cards. */
.alm-hero-slider__dots {
	position: absolute;
	inset-block-end: -0.35rem;
	inset-inline: 0;
	transform: translateY(100%);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	padding-block-start: 0.6rem;
}

.alm-hero-slider__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(112, 39, 184, 0.22);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background var(--alm-motion-functional, 190ms), transform var(--alm-motion-functional, 190ms), width var(--alm-motion-functional, 190ms);
}

.alm-hero-slider__dot[aria-selected="true"] {
	background: var(--alm-color-primary, #7027B8);
	width: 18px;
	border-radius: 999px;
}

/* Lower gradient — only needed behind the plain fallback <img>
   (no slider card body to provide contrast on its own). */
.alm-hero__cards:has(> .alm-hero__image)::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 55%;
	background: linear-gradient(
		to top,
		rgba(32, 32, 42, 0.70) 0%,
		rgba(32, 32, 42, 0.35) 32%,
		rgba(32, 32, 42, 0.10) 58%,
		transparent 100%
	);
	border-radius: 0 0 1.5rem 1.5rem;
	pointer-events: none;
	z-index: 1;
}

/* Stat cards — white glass, purple tint */
/* Decorative trust badges (aria-hidden, no interactive purpose) that
   float over the slider card on desktop — pointer-events: none so a
   drag/swipe starting under one still reaches the slider beneath it. */
.alm-hero__stat-card {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(112, 39, 184, 0.12);
	border-radius: 1rem;
	padding: 0.9rem 1.1rem;
	min-width: 136px;
	box-shadow: 0 6px 24px rgba(112, 39, 184, 0.12);
	will-change: transform, opacity;
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--alm-motion-interface, 270ms) var(--alm-ease-reveal, ease),
		transform var(--alm-motion-interface, 270ms) var(--alm-ease-reveal, ease),
		box-shadow var(--alm-motion-functional, 190ms);
}

.alm-hero__stat-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.alm-hero__stat-card:hover {
	box-shadow:
		0 12px 44px rgba(112, 39, 184, 0.18),
		0 0 0 1px rgba(112, 39, 184, 0.20);
	transform: translateY(-4px);
}

.alm-hero__stat-card[data-alm-hero-card="0"].is-visible {
	animation: alm-hero-float-0 4.5s ease-in-out 0s infinite;
}
.alm-hero__stat-card[data-alm-hero-card="1"].is-visible {
	animation: alm-hero-float-1 5.2s ease-in-out 0.8s infinite;
}
.alm-hero__stat-card[data-alm-hero-card="2"].is-visible {
	animation: alm-hero-float-2 4.8s ease-in-out 1.5s infinite;
}

.alm-hero__stat-card[data-alm-hero-card="0"] {
	inset-block-start: 8%;
	inset-inline-end: 5%;
}
.alm-hero__stat-card[data-alm-hero-card="1"] {
	inset-block-start: 44%;
	inset-inline-start: 3%;
}
.alm-hero__stat-card[data-alm-hero-card="2"] {
	inset-block-end: 8%;
	inset-inline-end: 12%;
}

.alm-hero__stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 0.5rem;
	background: rgba(112, 39, 184, 0.10);
	border: 1px solid rgba(112, 39, 184, 0.18);
	flex-shrink: 0;
	margin-block-end: 0;
}

.alm-hero__stat-icon svg {
	stroke: var(--alm-color-primary, #7027B8);
}

.alm-hero__stat-value {
	font-family: var(--alm-font-latin, 'Inter', sans-serif);
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	line-height: 1;
	letter-spacing: -0.01em;
}

.alm-hero__stat-label {
	font-family: var(--alm-font-body);
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--alm-color-muted, #6E6C78);
	line-height: 1.3;
}

/* Decorative ring */
.alm-hero__visual-ring {
	position: absolute;
	z-index: 1;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	border: 1px dashed rgba(112, 39, 184, 0.14);
	transform: translate(-50%, -50%);
	animation: alm-hero-ring-spin 40s linear infinite;
	pointer-events: none;
}

.alm-hero__visual-dot {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(112, 39, 184, 0.08) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	animation: alm-hero-dot-pulse 3.5s ease-in-out infinite;
	pointer-events: none;
}

/* Mobile overlay — hidden on desktop */
.alm-hero__mobile-overlay {
	display: none;
}


/* ─────────────────────────────────────────────────────────────
   3. TRUST RAIL
   ───────────────────────────────────────────────────────────── */

.alm-trust-rail {
	background: #FFFFFF;
	border-block: 1px solid var(--alm-color-border, #E7E4EC);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.alm-trust-rail__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.alm-trust-rail .alm-trust-signal {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--alm-space-2, 0.5rem);
	padding: 0;
	border: 0;
}

.alm-trust-signal {
	display: flex;
	align-items: flex-start;
	gap: var(--alm-space-3, 0.75rem);
}

.alm-trust-signal__icon {
	flex-shrink: 0;
	border: 1px solid rgba(112, 39, 184, 0.20);
	background: var(--alm-color-primary-soft, #F2EAFE);
	color: var(--alm-color-primary, #7027B8);
	border-radius: var(--alm-radius-lg, 0.875rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-start: 0.1rem;
}

.alm-trust-rail .alm-trust-signal__icon {
	border: 1px solid rgba(112, 39, 184, 0.20);
	background: var(--alm-color-primary-soft, #F2EAFE);
	color: var(--alm-color-primary, #7027B8);
}

.alm-trust-signal__copy {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.alm-trust-signal__copy strong {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--alm-color-ink, #20202A);
	line-height: 1.35;
}

.alm-trust-signal__copy small {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.78rem;
	color: var(--alm-color-muted, #6E6C78);
	line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
   4. PRODUCT SHOWCASE (real products, editorial tile grid —
   same idiom as .alm-cat-card in section 5, plus a price line)
   ───────────────────────────────────────────────────────────── */

.alm-intent {
	background:
		radial-gradient(circle at 96% 4%, rgba(243, 201, 60, 0.08), transparent 20rem),
		var(--alm-color-surface-soft, #F7F7FA);
}

.alm-intent__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.75rem, 2.6vw, 2.6rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin-block: 0 1.5rem;
	text-align: start;
	letter-spacing: 0;
	line-height: 1.2;
}

/* Desktop: one large tile (spans 2×2) + four small tiles */
.alm-intent__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 220px;
	gap: var(--alm-space-4, 1rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.alm-intent-card {
	position: relative;
	border-radius: var(--alm-radius-xl, 1.25rem);
	overflow: hidden;
	box-shadow: var(--alm-shadow-sm, 0 2px 8px rgba(112, 39, 184, 0.07));
	transition: box-shadow var(--alm-motion-interface, 270ms) var(--alm-ease-standard);
}

.alm-intent-card--large {
	grid-column: span 2;
	grid-row: span 2;
}

.alm-intent-card__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
}

.alm-intent-card__link:focus-visible {
	outline: 3px solid var(--alm-color-primary, #7027B8);
	outline-offset: 3px;
}

.alm-intent-card__link:hover,
.alm-intent-card__link:focus-visible {
	box-shadow: var(--alm-shadow-lg, 0 18px 44px rgba(112, 39, 184, 0.15));
}

/* Purple lavender placeholder — mirrors .alm-cat-card__media */
.alm-intent-card__media {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--alm-color-primary-soft, #F2EAFE) 0%, #EBE0F8 100%);
	transition: transform var(--alm-motion-interface, 270ms) var(--alm-ease-standard);
}

.alm-intent-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.alm-intent-card__placeholder-icon {
	color: rgba(112, 39, 184, 0.35);
}

.alm-intent-card__link:hover .alm-intent-card__media,
.alm-intent-card__link:focus-visible .alm-intent-card__media {
	transform: scale(1.02);
}

.alm-intent-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--alm-motion-editorial, 540ms) var(--alm-ease-standard);
}

.alm-intent-card__link:hover .alm-intent-card__image,
.alm-intent-card__link:focus-visible .alm-intent-card__image {
	transform: scale(1.06);
}

.alm-intent-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 14, 36, 0.85) 0%,
		rgba(20, 14, 36, 0.25) 48%,
		transparent 100%
	);
	pointer-events: none;
}

.alm-intent-card__content {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--alm-space-2, 0.5rem);
}

.alm-intent-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.alm-intent-card__name {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: clamp(0.92rem, 1.3vw, 1.05rem);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alm-intent-card--large .alm-intent-card__name {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	white-space: normal;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alm-intent-card__price {
	font-family: var(--alm-font-latin, 'Inter', sans-serif);
	font-size: clamp(0.8rem, 1vw, 0.9rem);
	font-weight: 600;
	color: var(--alm-color-yellow, #F3C93C);
}

.alm-intent-card__arrow {
	font-size: 1rem;
	color: var(--alm-color-yellow, #F3C93C);
	flex-shrink: 0;
	transition: transform var(--alm-motion-functional, 190ms);
}

[dir="rtl"] .alm-intent-card__link:hover .alm-intent-card__arrow,
[dir="rtl"] .alm-intent-card__link:focus-visible .alm-intent-card__arrow {
	transform: translateX(-4px);
}

[dir="ltr"] .alm-intent-card__link:hover .alm-intent-card__arrow,
[dir="ltr"] .alm-intent-card__link:focus-visible .alm-intent-card__arrow {
	transform: translateX(4px);
}


/* ─────────────────────────────────────────────────────────────
   5. CATEGORIES
   ───────────────────────────────────────────────────────────── */

.alm-categories {
	background: var(--alm-color-surface-soft, #F7F7FA);
}

.alm-categories__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.85rem, 2.8vw, 2.8rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin-block: 0 2rem;
	letter-spacing: 0;
	line-height: 1.2;
}

.alm-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 260px;
	gap: var(--alm-space-4, 1rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.alm-cat-card {
	position: relative;
	border-radius: var(--alm-radius-xl, 1.25rem);
	overflow: hidden;
	box-shadow: var(--alm-shadow-sm, 0 2px 8px rgba(112,39,184,0.07));
}

.alm-cat-card--large {
	grid-column: span 2;
	grid-row: span 2;
}

.alm-cat-card__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
}

.alm-cat-card__link:focus-visible {
	outline: 3px solid var(--alm-color-primary, #7027B8);
	outline-offset: 3px;
}

/* Purple lavender placeholder backgrounds */
.alm-cat-card__media {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--alm-color-primary-soft, #F2EAFE) 0%, #EBE0F8 100%);
	transition: transform var(--alm-motion-interface, 270ms) var(--alm-ease-standard);
}

.alm-cat-card:nth-child(1) .alm-cat-card__media--placeholder { background: linear-gradient(135deg, #EBE0F8 0%, #DDD0F2 100%); }
.alm-cat-card:nth-child(2) .alm-cat-card__media--placeholder { background: linear-gradient(135deg, #F2EAFE 0%, #E3D4F8 100%); }
.alm-cat-card:nth-child(3) .alm-cat-card__media--placeholder { background: linear-gradient(135deg, #E6D8F6 0%, #D8C6EE 100%); }
.alm-cat-card:nth-child(4) .alm-cat-card__media--placeholder { background: linear-gradient(135deg, #EDE5F8 0%, #DDD0F0 100%); }
.alm-cat-card:nth-child(5) .alm-cat-card__media--placeholder { background: linear-gradient(135deg, #E8DDFB 0%, #D5C4EE 100%); }
.alm-cat-card:nth-child(6) .alm-cat-card__media--placeholder { background: linear-gradient(135deg, #EAE0FA 0%, #DACBF0 100%); }

.alm-cat-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.alm-cat-card__placeholder-icon {
	color: rgba(112, 39, 184, 0.35);
}

.alm-cat-card__link:hover .alm-cat-card__media,
.alm-cat-card__link:focus-visible .alm-cat-card__media {
	transform: scale(1.02);
}

.alm-cat-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--alm-motion-editorial, 540ms) var(--alm-ease-standard);
}

.alm-cat-card__link:hover .alm-cat-card__image,
.alm-cat-card__link:focus-visible .alm-cat-card__image {
	transform: scale(1.02);
}

/* Lighter gradient — title still readable but image shows through */
.alm-cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 14, 36, 0.82) 0%,
		rgba(20, 14, 36, 0.22) 48%,
		transparent 100%
	);
	pointer-events: none;
}

.alm-cat-card__content {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--alm-space-2, 0.5rem);
}

.alm-cat-card__name {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.25;
}

.alm-cat-card--large .alm-cat-card__name {
	font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.alm-cat-card__arrow {
	font-size: 1rem;
	color: var(--alm-color-yellow, #F3C93C);
	flex-shrink: 0;
	transition: transform var(--alm-motion-functional, 190ms);
}

[dir="rtl"] .alm-cat-card__link:hover .alm-cat-card__arrow,
[dir="rtl"] .alm-cat-card__link:focus-visible .alm-cat-card__arrow {
	transform: translateX(-4px);
}

[dir="ltr"] .alm-cat-card__link:hover .alm-cat-card__arrow,
[dir="ltr"] .alm-cat-card__link:focus-visible .alm-cat-card__arrow {
	transform: translateX(4px);
}

.alm-categories__footer {
	margin-block-start: var(--alm-space-6, 1.5rem);
}


/* ─────────────────────────────────────────────────────────────
   6. FEATURED PRODUCTS
   ───────────────────────────────────────────────────────────── */

.alm-featured {
	background: #fff;
}

.alm-featured__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.85rem, 2.8vw, 2.8rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin-block: 0 2rem;
	letter-spacing: 0;
	line-height: 1.2;
}

.alm-featured__stage {
	display: grid;
	grid-template-columns: 58% 1fr;
	gap: var(--alm-space-6, 1.5rem);
	align-items: start;
}

/* Primary panel — lavender, spacious */
.alm-featured__primary {
	display: grid;
	grid-template-columns: 48% 1fr;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	border: 1.5px solid rgba(112, 39, 184, 0.12);
	border-radius: var(--alm-radius-xl, 1.25rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--alm-color-primary-soft, #F2EAFE);
	align-items: start;
}

.alm-featured__primary-media {
	border-radius: 1rem;
	overflow: hidden;
	background: #FAFAFD;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 28px rgba(112, 39, 184, 0.10);
}

.alm-featured__primary-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: var(--alm-space-2, 0.5rem);
	transition: transform var(--alm-motion-editorial, 540ms) var(--alm-ease-standard);
}

.alm-featured__primary-media:hover .alm-featured__primary-img {
	transform: scale(1.02);
}

.alm-featured__primary-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	aspect-ratio: 1;
	background: var(--alm-color-primary-soft, #F2EAFE);
	border-radius: 1rem;
}

.alm-featured__primary-placeholder-icon {
	color: var(--alm-color-primary, #7027B8);
	opacity: 0.45;
}

.alm-featured__primary-placeholder-text {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: var(--alm-text-sm, 0.875rem);
	color: var(--alm-color-muted, #6E6C78);
	font-weight: 500;
}

.alm-featured__primary-body {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-3, 0.75rem);
}

.alm-featured__primary-cat {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: var(--alm-text-xs, 0.75rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--alm-color-primary, #7027B8);
}

.alm-featured__primary-name {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.2rem, 1.9vw, 1.5rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin: 0;
	line-height: 1.25;
}

.alm-featured__primary-name a {
	text-decoration: none;
	color: inherit;
	transition: color var(--alm-motion-functional, 190ms);
}

.alm-featured__primary-name a:hover {
	color: var(--alm-color-primary, #7027B8);
}

.alm-featured__primary-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.alm-featured__primary-specs li {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.88rem;
	color: var(--alm-color-muted, #6E6C78);
	line-height: 1.5;
	padding-inline-start: 1rem;
	position: relative;
}

.alm-featured__primary-specs li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--alm-color-primary, #7027B8);
}

.alm-featured__primary-footer {
	margin-block-start: auto;
	padding-block-start: var(--alm-space-5, 1.25rem);
	border-block-start: 1px solid rgba(112, 39, 184, 0.14);
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-5, 1.25rem);
}

.alm-featured__primary-price {
	font-family: var(--alm-font-latin, 'Inter', sans-serif);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 700;
	color: var(--alm-color-primary, #7027B8);
}

.alm-featured__primary-price .woocommerce-Price-amount {
	font-family: var(--alm-font-latin, 'Inter', sans-serif);
	font-size: inherit;
	font-weight: inherit;
}

.alm-featured__primary-actions {
	display: flex;
	gap: var(--alm-space-2, 0.5rem);
	flex-wrap: wrap;
}

/* Selector cards */
.alm-featured__selectors {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-3, 0.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.alm-featured__selector-card {
	display: flex;
	align-items: center;
	gap: var(--alm-space-3, 0.75rem);
	padding: 0.875rem 1rem;
	border: 1.5px solid var(--alm-color-border, #E7E4EC);
	border-radius: var(--alm-radius-lg, 1rem);
	text-decoration: none;
	color: var(--alm-color-ink, #20202A);
	background: #fff;
	transition:
		border-color var(--alm-motion-functional, 190ms),
		background var(--alm-motion-functional, 190ms),
		box-shadow var(--alm-motion-interface, 270ms);
}

.alm-featured__selector-card:hover,
.alm-featured__selector-card:focus-visible {
	border-color: var(--alm-color-primary, #7027B8);
	background: var(--alm-color-primary-soft, #F2EAFE);
	box-shadow: 0 3px 14px rgba(112, 39, 184, 0.12);
}

.alm-featured__selector-card.is-active {
	border-color: var(--alm-color-primary, #7027B8);
	border-width: 2px;
	background: var(--alm-color-primary-soft, #F2EAFE);
	box-shadow: 0 0 0 3px rgba(112, 39, 184, 0.15), 0 3px 14px rgba(112, 39, 184, 0.12);
}

.alm-featured__selector-thumb {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: var(--alm-radius-md, 0.625rem);
	overflow: hidden;
	background: var(--alm-color-primary-soft, #F2EAFE);
	display: flex;
	align-items: center;
	justify-content: center;
}

.alm-featured__selector-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.alm-featured__selector-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: var(--alm-color-primary-soft, #F2EAFE);
	display: block;
}

.alm-featured__selector-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.alm-featured__selector-name {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alm-featured__selector-spec {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: var(--alm-text-xs, 0.75rem);
	color: var(--alm-color-muted, #6E6C78);
	display: block;
}

.alm-featured__selector-price {
	font-family: var(--alm-font-latin, 'Inter', sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--alm-color-primary, #7027B8);
	display: block;
}

.alm-featured__selector-arrow {
	font-size: 0.85rem;
	color: var(--alm-color-primary, #7027B8);
	flex-shrink: 0;
}

.alm-featured__footer {
	margin-block-start: var(--alm-space-6, 1.5rem);
}


/* ─────────────────────────────────────────────────────────────
   7. BUNDLES
   ───────────────────────────────────────────────────────────── */

.alm-bundles {
	background: var(--alm-color-surface-soft, #F7F7FA);
}

.alm-bundles__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.85rem, 2.8vw, 2.8rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin-block: 0 0.6rem;
	letter-spacing: 0;
	line-height: 1.2;
}

.alm-bundles__sub {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: clamp(1rem, 1.1vw, 1.12rem);
	color: var(--alm-color-muted, #6E6C78);
	margin-block: 0 2.25rem;
	line-height: 1.9;
}

.alm-bundles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--alm-space-5, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.alm-bundle-card {
	background: #fff;
	border: 1.5px solid rgba(112, 39, 184, 0.10);
	border-radius: var(--alm-radius-xl, 1.25rem);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--alm-motion-interface, 270ms), border-color var(--alm-motion-functional, 190ms);
}

.alm-bundle-card:hover {
	box-shadow: 0 10px 36px rgba(112, 39, 184, 0.12);
	border-color: rgba(112, 39, 184, 0.22);
}

/* Featured first card */
.alm-bundle-card:first-child {
	border-color: rgba(112, 39, 184, 0.22);
	box-shadow: 0 4px 20px rgba(112, 39, 184, 0.10);
}

/* Bundle visual — 4:3 ratio, purple lavender placeholder */
.alm-bundle-card__visual {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex-shrink: 0;
}

.alm-bundle-card:nth-child(1) .alm-bundle-card__visual { background: linear-gradient(135deg, #E8DDFB 0%, #D5C4EE 100%); }
.alm-bundle-card:nth-child(2) .alm-bundle-card__visual { background: linear-gradient(135deg, #F2EAFE 0%, #E3D4F8 100%); }
.alm-bundle-card:nth-child(3) .alm-bundle-card__visual { background: linear-gradient(135deg, #EDE5F8 0%, #DDD0F0 100%); }

.alm-bundle-card__visual-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--alm-motion-editorial, 540ms) var(--alm-ease-standard);
}

.alm-bundle-card:hover .alm-bundle-card__visual-img {
	transform: scale(1.02);
}

/* Purple accent line at top */
.alm-bundle-card__visual::after {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--alm-color-primary, #7027B8);
	opacity: 0.7;
}

.alm-bundle-card:first-child .alm-bundle-card__visual::after {
	opacity: 1;
	height: 4px;
}

.alm-bundle-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
	padding: 1.25rem 1.5rem 1rem;
}

/* Featured badge on first card */
.alm-bundle-card:first-child .alm-bundle-card__body::before {
	content: 'الأكثر طلبًا';
	display: inline-flex;
	align-items: center;
	background: var(--alm-color-yellow, #F3C93C);
	color: var(--alm-color-ink, #20202A);
	font-family: var(--alm-font-body, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.25rem 0.875rem;
	border-radius: 9999px;
	margin-block-end: 0.625rem;
}

.alm-bundle-card__icon {
	display: none;
}

.alm-bundle-card__title {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin: 0;
}

.alm-bundle-card__use {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: var(--alm-text-sm, 0.875rem);
	color: var(--alm-color-muted, #6E6C78);
	margin: 0;
}

.alm-bundle-card__items {
	list-style: none;
	margin: var(--alm-space-2, 0.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.alm-bundle-card__items li {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: var(--alm-text-sm, 0.875rem);
	color: var(--alm-color-muted, #6E6C78);
	padding-inline-start: 1.25rem;
	position: relative;
	line-height: 1.5;
}

.alm-bundle-card__items li::before {
	content: '✓';
	position: absolute;
	inset-inline-start: 0;
	color: var(--alm-color-primary, #7027B8);
	font-size: 0.7rem;
	line-height: 1.8;
	font-weight: 700;
}

.alm-bundle-card__link {
	align-self: flex-start;
	margin-block-start: var(--alm-space-3, 0.75rem);
	margin-inline-start: 1.5rem;
	margin-block-end: 1.5rem;
	min-height: 2.875rem;
}

.alm-bundles__footer {
	margin-block-start: var(--alm-space-6, 1.5rem);
}


/* ─────────────────────────────────────────────────────────────
   8. WHY US
   ───────────────────────────────────────────────────────────── */

.alm-why {
	background: #fff;
	padding-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

/* 2-row layout: intro full-width, then 2×2 proof cards */
.alm-why__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

.alm-why__intro {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-5, 1.25rem);
	grid-column: 1 / -1;
	max-width: 56ch;
	position: static;
}

.alm-why__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.85rem, 2.8vw, 2.8rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin: 0;
	line-height: 1.2;
}

.alm-why__lead {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: clamp(1.02rem, 1.1vw, 1.12rem);
	color: var(--alm-color-muted, #6E6C78);
	line-height: 1.9;
	margin: 0;
}

.alm-why__actions {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-2, 0.5rem);
	align-items: flex-start;
}

/* Proof cards — 2×2 grid */
.alm-why__proofs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-column: 1 / -1;
}

.alm-why__proofs::before {
	display: none;
}

/* Each proof as a card */
.alm-why__proof {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: #FFFFFF;
	border: 2px solid rgba(112, 39, 184, 0.14);
	border-radius: 1.25rem;
	box-shadow: 0 2px 12px rgba(112, 39, 184, 0.06);
	transition: box-shadow var(--alm-motion-functional, 190ms), border-color var(--alm-motion-functional, 190ms);
	align-items: flex-start;
}

.alm-why__proof:hover {
	border-color: rgba(112, 39, 184, 0.30);
	box-shadow: 0 8px 28px rgba(112, 39, 184, 0.12);
}

.alm-why__proof-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: var(--alm-color-primary-soft, #F2EAFE);
	border: 2px solid rgba(112, 39, 184, 0.20);
	border-radius: var(--alm-radius-full, 9999px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--alm-color-primary, #7027B8);
	transition: border-color var(--alm-motion-functional, 190ms), background var(--alm-motion-functional, 190ms);
}

.alm-why__proof:hover .alm-why__proof-icon {
	background: rgba(112, 39, 184, 0.12);
	border-color: rgba(112, 39, 184, 0.35);
}

.alm-why__proof-copy {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding-block-start: 0;
}

.alm-why__proof-copy strong {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--alm-color-ink, #20202A);
	line-height: 1.35;
	display: block;
}

.alm-why__proof-copy p {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.9rem;
	color: var(--alm-color-muted, #6E6C78);
	line-height: 1.75;
	margin: 0;
}


/* ─────────────────────────────────────────────────────────────
   9. BUSINESS BRIDGE
   ───────────────────────────────────────────────────────────── */

.alm-biz-bridge {
	background: var(--alm-color-primary-dark, #4F1785);
	color: #fff;
	padding-block: clamp(5rem, 10vw, 8rem);
}

.alm-biz-bridge__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.alm-biz-bridge__content {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-4, 1rem);
}

.alm-biz-bridge__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.85rem, 2.8vw, 2.8rem);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.18;
}

.alm-biz-bridge__desc {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: clamp(1rem, 1.1vw, 1.1rem);
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	max-width: 54ch;
	line-height: 1.9;
}

.alm-biz-bridge__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-block-start: 0.25rem;
}

/* Yellow as primary CTA inside the dark bridge section */
.alm-biz-bridge .alm-btn--accent {
	background-color: var(--alm-color-yellow, #F3C93C);
	color: var(--alm-color-ink, #20202A);
	box-shadow: 0 4px 16px rgba(243, 201, 60, 0.35);
}

.alm-biz-bridge .alm-btn--accent:hover,
.alm-biz-bridge .alm-btn--accent:focus-visible {
	background-color: var(--alm-color-yellow-dark, #C89B10);
	color: var(--alm-color-ink, #20202A);
	box-shadow: 0 6px 22px rgba(243, 201, 60, 0.45);
}

.alm-biz-bridge__wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	min-height: 2.875rem;
	background: var(--alm-color-whatsapp, #25D366);
	color: #fff;
	border-radius: var(--alm-radius-full, 9999px);
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--alm-motion-functional, 190ms);
}

.alm-biz-bridge__wa-btn:hover,
.alm-biz-bridge__wa-btn:focus-visible {
	background: var(--alm-color-whatsapp-hover, #1EB857);
	color: #fff;
}

.alm-biz-bridge__visual {
	flex-shrink: 0;
}

.alm-biz-bridge__visual-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--alm-space-3, 0.75rem);
}

.alm-biz-bridge__visual-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
}

.alm-biz-bridge__visual-item svg {
	color: var(--alm-color-yellow, #F3C93C);
}


/* ─────────────────────────────────────────────────────────────
   10. DELIVERY AREAS
   ───────────────────────────────────────────────────────────── */

.alm-delivery {
	background: var(--alm-color-surface-soft, #F7F7FA);
}

.alm-delivery__layout {
	display: grid;
	grid-template-columns: 36% 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.alm-delivery__info {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-4, 1rem);
}

.alm-delivery__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(1.85rem, 2.8vw, 2.8rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin: 0;
	line-height: 1.2;
}

.alm-delivery__note {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.95rem;
	color: var(--alm-color-muted, #6E6C78);
	margin: 0;
	line-height: 1.75;
	max-width: 40ch;
}

.alm-delivery__areas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.3rem var(--alm-space-3, 0.75rem);
}

.alm-delivery__areas li {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: 0.95rem;
	color: var(--alm-color-ink, #20202A);
	font-weight: 500;
	padding-inline-start: 1.1rem;
	position: relative;
}

.alm-delivery__areas li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.48em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--alm-color-cyan, #28B9D3);
}

.alm-delivery__info .alm-btn {
	margin-block-start: 0.5rem;
	min-height: 2.875rem;
	font-size: 1rem;
	padding-inline: 1.75rem;
}

.alm-delivery__map {
	border-radius: var(--alm-radius-xl, 1.25rem);
	overflow: hidden;
	background: var(--alm-color-primary-soft, #F2EAFE);
	min-height: 430px;
	max-height: 540px;
	border: 2px solid rgba(40, 185, 211, 0.18);
}

.alm-delivery__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 430px;
	border: none;
}

.alm-delivery__diagram {
	width: 100%;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--alm-space-6, 1.5rem);
}

.alm-delivery__diagram-svg {
	width: 100%;
	max-width: 420px;
	height: auto;
}


/* ─────────────────────────────────────────────────────────────
   11. GUIDES
   ───────────────────────────────────────────────────────────── */

.alm-guides-desk {
	background: #fff;
}

.alm-guides-desk__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--alm-space-6, 1.5rem);
	margin-block-end: var(--alm-space-8, 2rem);
}

.alm-guides-desk__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 700;
	color: var(--alm-color-ink, #20202A);
	margin: 0;
	line-height: 1.2;
}

.alm-guides-desk__header-note {
	display: flex;
	align-items: flex-start;
	gap: var(--alm-space-3, 0.75rem);
	max-width: 32ch;
	color: var(--alm-color-muted, #6E6C78);
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: var(--alm-text-sm, 0.875rem);
	line-height: 1.6;
	flex-shrink: 0;
}

.alm-guides-desk__header-note p {
	margin: 0;
}

.alm-guides-desk__header-note svg {
	flex-shrink: 0;
	color: var(--alm-color-primary, #7027B8);
	margin-block-start: 0.15rem;
}

.alm-guides-desk__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--alm-space-6, 1.5rem);
	align-items: stretch;
}

/* Post-card overrides — blog-archive.css isn't loaded on the front page,
   so the thumbnail/hover treatment needs to live here too. */
.alm-guides-desk__grid .alm-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.alm-guides-desk__grid .alm-post-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--alm-radius-xl, 1.25rem) var(--alm-radius-xl, 1.25rem) 0 0;
}

.alm-guides-desk__grid .alm-post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--alm-motion-editorial, 540ms) var(--alm-ease-standard);
}

.alm-guides-desk__grid .alm-post-card:hover .alm-post-card__img,
.alm-guides-desk__grid .alm-post-card:focus-within .alm-post-card__img {
	transform: scale(1.03);
}

.alm-guides-desk__grid .alm-post-card__meta-top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alm-space-1-5, 0.375rem);
	margin-block-end: var(--alm-space-3, 0.75rem);
}

.alm-guides-desk__grid .alm-post-card__title-link {
	color: inherit;
	text-decoration: none;
}

.alm-guides-desk__grid .alm-post-card__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.alm-guides-desk__grid .alm-post-card__footer {
	display: flex;
	align-items: center;
	gap: var(--alm-space-3, 0.75rem);
	flex-wrap: wrap;
	margin-block-start: auto;
}

.alm-guides-desk__grid .alm-post-card__readtime {
	display: inline-flex;
	align-items: center;
	gap: var(--alm-space-1, 0.25rem);
}

.alm-guides-desk__grid .alm-post-card__footer .alm-btn {
	position: relative;
	z-index: 1;
	margin-inline-start: auto;
}

.alm-guides-desk__all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: var(--alm-space-8, 2rem);
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: var(--alm-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--alm-color-primary, #7027B8);
	text-decoration: none;
	transition: color var(--alm-motion-functional, 190ms);
}

.alm-guides-desk__all:hover {
	color: var(--alm-color-primary-dark, #4F1785);
	text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────
   12. FINAL CTA
   ───────────────────────────────────────────────────────────── */

.alm-final-cta {
	background:
		radial-gradient(circle at 50% 120%, rgba(201, 54, 184, 0.12), transparent 50%),
		linear-gradient(135deg, var(--alm-color-primary, #7027B8), var(--alm-color-primary-dark, #4F1785));
	color: #fff;
	text-align: center;
	padding-block: clamp(6rem, 12vw, 10rem);
	position: relative;
	overflow: hidden;
}

.alm-final-cta::before {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(243, 201, 60, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.alm-final-cta .alm-container {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.alm-final-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--alm-space-6, 1.5rem);
}

.alm-final-cta__heading {
	font-family: var(--alm-font-display, 'Alexandria', sans-serif);
	font-size: clamp(2rem, 3.5vw, 3.25rem);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.15;
}

.alm-final-cta__desc {
	font-family: var(--alm-font-body, 'IBM Plex Sans Arabic', sans-serif);
	font-size: clamp(1rem, 1.1vw, 1.1rem);
	color: rgba(255, 255, 255, 0.80);
	margin: 0;
	line-height: 1.85;
	max-width: 46ch;
}

.alm-final-cta__actions {
	display: flex;
	justify-content: center;
	gap: var(--alm-space-5, 1.25rem);
	flex-wrap: wrap;
}

/* Yellow CTA on purple bg */
.alm-final-cta .alm-btn--accent {
	background-color: var(--alm-color-yellow, #F3C93C);
	border-color: var(--alm-color-yellow, #F3C93C);
	color: var(--alm-color-ink, #20202A);
	box-shadow: 0 8px 24px rgba(243, 201, 60, 0.40);
	font-size: 1.0625rem;
	padding-inline: 2rem;
	min-height: 3rem;
}

.alm-final-cta .alm-btn--accent:hover {
	background-color: var(--alm-color-yellow-dark, #C89B10);
	border-color: var(--alm-color-yellow-dark, #C89B10);
	box-shadow: 0 12px 32px rgba(243, 201, 60, 0.50);
}


/* ─────────────────────────────────────────────────────────────
   13. RESPONSIVE — 1024px (≤ 64rem)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 64rem) {

	/* Hero — keep two columns, reduce ratio */
	.alm-hero .alm-container {
		grid-template-columns: 48% 52%;
		padding-block: clamp(3.5rem, 7vw, 5rem);
	}

	.alm-hero__visual {
		min-height: 420px;
	}

	.alm-hero__cards {
		height: 420px;
	}

	/* Product showcase — same 3-col tile grid, shorter rows */
	.alm-intent__grid {
		grid-auto-rows: 200px;
	}

	.alm-categories__grid {
		grid-auto-rows: 200px;
	}

	.alm-featured__stage {
		grid-template-columns: 1fr;
	}

	.alm-featured__primary {
		grid-template-columns: 1fr 1fr;
	}

	.alm-featured__selectors {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	/* Why us — intro + 2×2 still works, just reduce gap */
	.alm-why__layout {
		gap: 2rem;
	}

	.alm-biz-bridge__inner {
		grid-template-columns: 1fr;
	}

	.alm-biz-bridge__actions {
		align-items: flex-start;
		flex-direction: row;
	}

	.alm-delivery__layout {
		grid-template-columns: 1fr;
	}

	.alm-delivery__map {
		max-height: 320px;
		min-height: 280px;
	}

	.alm-guides-desk__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ─────────────────────────────────────────────────────────────
   14. RESPONSIVE — 768px (≤ 47.99rem)
   Tablet: intent collapses to 2-col, why-us 2-col
   ───────────────────────────────────────────────────────────── */

@media (max-width: 47.99rem) and (min-width: 30rem) {

	.alm-home-main section {
		padding-block: clamp(3rem, 8vw, 4.5rem);
	}

	.alm-intent__grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 180px;
	}

	.alm-why__proofs {
		grid-template-columns: 1fr 1fr;
	}
}


/* ─────────────────────────────────────────────────────────────
   15. RESPONSIVE — mobile (< 30rem / 480px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 47.99rem) {

	/* ──────────────────────────────────────────────
	   MOBILE HERO — stacked, text above image
	   Light background, heading readable without overlay
	   ──────────────────────────────────────────────── */

	.alm-hero {
		min-height: 0;
		padding-block: 0;
		flex-direction: column;
		align-items: stretch;
	}

	/* Single column: content row, then image row */
	.alm-hero .alm-container {
		grid-template-columns: 1fr;
		gap: var(--alm-space-4, 1rem);
		padding-block: clamp(2rem, 6vw, 3rem) 0;
		display: flex;
		flex-direction: column;
	}

	/* Remove position absolute — image stacks below. Explicit width is
	   required here: the desktop layout sizes this via flex-grow in a
	   row container, but the mobile .alm-hero .alm-container switches
	   to a column flex container where flex items default to their
	   content's intrinsic width — without this the slider's slides
	   (each flex:0 0 100%) have nothing finite to size 100% against
	   and the whole column runs away wider than the viewport. */
	.alm-hero__visual {
		position: static;
		width: 100%;
		min-height: 0;
		margin-inline-end: 0;
		/* Bleed to edges — uses full viewport width */
		margin-inline: calc(-1 * clamp(1rem, 3vw, 2.5rem));
		padding-block-end: 0;
	}

	/* Cards container: normal-flow stack — slider/image first, then a
	   two-column stat-card row below. Nothing here clips or floats;
	   every box is sized by its own aspect-ratio up front so there is
	   no post-load resize (zero layout shift). */
	.alm-hero__cards {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: var(--alm-space-3, 0.75rem);
		border-radius: 0;
		overflow: visible;
		padding-inline: clamp(1rem, 3vw, 2.5rem);
	}

	.alm-hero__image {
		border-radius: 1.25rem;
		box-shadow: 0 20px 40px -12px rgba(112, 39, 184, 0.24);
		position: static;
		width: 100%;
		aspect-ratio: 4 / 3;
		height: auto;
		object-position: center top;
	}

	.alm-hero-slider {
		position: relative;
		width: 100%;
	}

	.alm-hero-slider__viewport {
		aspect-ratio: 4 / 3;
	}

	.alm-hero-slider__slide {
		padding: 0.25rem;
	}

	.alm-hero-slider__card {
		border-radius: 1.1rem;
	}

	.alm-hero-slider__body {
		padding: 0.75rem 0.9rem;
	}

	.alm-hero-slider__name {
		font-size: 0.85rem;
	}

	.alm-hero-slider__price {
		font-size: 0.8rem;
	}

	.alm-hero-slider__cta {
		display: none;
	}

	.alm-hero-slider__arrow {
		width: 30px;
		height: 30px;
		font-size: 1rem;
		inset-block-start: 0.6rem;
	}

	.alm-hero-slider__arrow--prev {
		inset-inline-start: 0.6rem;
	}

	.alm-hero-slider__arrow--next {
		inset-inline-end: 0.6rem;
	}

	.alm-hero-slider__dots {
		inset-block-end: -0.5rem;
	}

	/* Remove dark overlay — the slider card has its own solid body,
	   and the fallback image is a separate row with its own shadow. */
	.alm-hero__cards::after,
	.alm-hero__cards:has(> .alm-hero__image)::after {
		display: none;
	}

	/* Hide decorative ring and dot on mobile */
	.alm-hero__visual-ring,
	.alm-hero__visual-dot {
		display: none;
	}

	/* Stat-card row: two columns, normal flow, below the image */
	.alm-hero__stat-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--alm-space-3, 0.75rem);
		padding-block-start: 0.4rem;
	}

	/* Mobile overlay — not needed in stacked layout */
	.alm-hero__mobile-overlay {
		display: none;
	}

	/* Content — normal flow, dark text on light bg */
	.alm-hero__content {
		position: static;
		padding: 0;
		gap: var(--alm-space-5, 1.25rem);
		order: -1;
	}

	.alm-hero__heading {
		font-size: clamp(2rem, 9vw, 2.7rem);
		line-height: 1.15;
		color: var(--alm-color-ink, #20202A);
	}

	.alm-hero__sub {
		font-size: 0.95rem;
		color: var(--alm-color-muted, #6E6C78);
		max-width: 100%;
		line-height: 1.8;
	}

	.alm-hero__actions {
		flex-direction: column;
		gap: var(--alm-space-3, 0.75rem);
	}

	.alm-hero__actions .alm-btn {
		width: 100%;
		justify-content: center;
	}

	/* Show only 2 stat cards on mobile — clamp to visible badges,
	   laid out as a horizontal row below the image/slider. */
	.alm-hero__stat-card {
		position: static !important;
		display: none;
		min-width: 0;
		width: 100%;
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.alm-hero__stat-card[data-alm-hero-card="0"],
	.alm-hero__stat-card[data-alm-hero-card="1"] {
		display: flex;
	}

	/* Background shapes — hide on mobile */
	.alm-hero__bg-shape--1,
	.alm-hero__bg-shape--2,
	.alm-hero__bg-shape--3 {
		display: none;
	}

	/* ── Mobile section rhythm ── */
	.alm-home-main section {
		padding-block: clamp(2.75rem, 8vw, 4rem);
	}

	.alm-home-main .alm-container {
		padding-inline: 1rem;
	}

	/* ── Mobile headings ── */
	.alm-intent__heading,
	.alm-categories__heading,
	.alm-featured__heading,
	.alm-bundles__heading,
	.alm-why__heading,
	.alm-delivery__heading,
	.alm-guides-desk__heading,
	.alm-final-cta__heading {
		font-size: clamp(1.55rem, 7vw, 2rem);
		line-height: 1.2;
	}

	.alm-biz-bridge__heading {
		font-size: clamp(1.75rem, 8vw, 2.2rem);
		line-height: 1.18;
	}

	/* ── Trust rail ── */
	.alm-trust-rail__list {
		grid-template-columns: 1fr 1fr;
		gap: var(--alm-space-4, 1rem);
	}

	.alm-trust-rail .alm-trust-signal {
		flex-direction: row;
		text-align: start;
	}

	/* ── Product showcase — single column ── */
	.alm-intent__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 180px;
	}

	.alm-intent-card--large {
		grid-column: span 1;
		grid-row: span 1;
	}

	/* ── Categories ── */
	.alm-categories__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 180px;
	}

	.alm-cat-card--large {
		grid-column: span 1;
		grid-row: span 1;
	}

	/* ── Featured ── */
	.alm-featured__stage {
		grid-template-columns: 1fr;
	}

	.alm-featured__primary {
		grid-template-columns: 1fr;
	}

	.alm-featured__primary-media {
		aspect-ratio: 4 / 3;
	}

	.alm-featured__selectors {
		display: flex;
		flex-direction: column;
	}

	/* ── Bundles — single col, image not too tall ── */
	.alm-bundles__grid {
		grid-template-columns: 1fr;
		gap: var(--alm-space-4, 1rem);
	}

	.alm-bundle-card__visual {
		aspect-ratio: 16 / 9;
	}

	.alm-bundle-card__title {
		font-size: 1.05rem;
	}

	/* ── Why us — compact proof rows ── */
	.alm-why__layout {
		grid-template-columns: 1fr;
	}

	.alm-why__proofs {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Compact rows — not tall cards */
	.alm-why__proof {
		flex-direction: row;
		align-items: center;
		gap: var(--alm-space-4, 1rem);
		padding: 1rem 0;
		background: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
		border-block-end: 1px solid var(--alm-color-border, #E7E4EC);
	}

	.alm-why__proof:last-child {
		border-block-end: none;
	}

	.alm-why__proof:hover {
		border-color: var(--alm-color-border, #E7E4EC);
		box-shadow: none;
	}

	.alm-why__proof-icon {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}

	.alm-why__proof-copy strong {
		font-size: 0.95rem;
	}

	.alm-why__proof-copy p {
		font-size: 0.875rem;
	}

	/* ── Business Bridge ── */
	.alm-biz-bridge__inner {
		grid-template-columns: 1fr;
	}

	.alm-biz-bridge__actions {
		flex-direction: column;
	}

	.alm-biz-bridge__actions .alm-btn,
	.alm-biz-bridge__wa-btn {
		width: 100%;
		justify-content: center;
	}

	/* ── Delivery — heading, note, areas, CTA, then map ── */
	.alm-delivery__layout {
		grid-template-columns: 1fr;
	}

	.alm-delivery__map {
		min-height: 240px;
		max-height: 280px;
		border-radius: var(--alm-radius-lg, 0.875rem);
	}

	.alm-delivery__map iframe {
		min-height: 240px;
	}

	.alm-delivery__diagram {
		min-height: 240px;
	}

	/* ── Guides ── */
	.alm-guides-desk__grid {
		grid-template-columns: 1fr;
	}

	.alm-guides-desk__header {
		flex-direction: column;
		gap: var(--alm-space-4, 1rem);
	}

	.alm-guides-desk__header-note {
		max-width: none;
	}

	.alm-guides-desk__all {
		width: 100%;
	}

	/* ── Final CTA ── */
	.alm-final-cta .alm-container {
		max-width: 100%;
	}

	.alm-final-cta__actions {
		flex-direction: column;
		align-items: center;
		gap: var(--alm-space-4, 1rem);
	}

	.alm-final-cta__actions .alm-btn {
		width: 100%;
		max-width: 22rem;
	}
}


/* ─────────────────────────────────────────────────────────────
   16. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.alm-motion-ready [data-alm-reveal],
	.alm-motion-ready [data-alm-reveal="fade-in"],
	.alm-motion-ready [data-alm-reveal="scale"],
	.alm-motion-ready [data-alm-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.alm-hero__stat-card,
	.alm-hero__stat-card[data-alm-hero-card="0"].is-visible,
	.alm-hero__stat-card[data-alm-hero-card="1"].is-visible,
	.alm-hero__stat-card[data-alm-hero-card="2"].is-visible,
	.alm-hero__visual-ring,
	.alm-hero__visual-dot,
	.alm-hero__swap-word.is-leaving,
	.alm-hero__swap-word.is-entering {
		animation: none !important;
		transition: none !important;
	}

	.alm-hero__stat-card {
		opacity: 1 !important;
		transform: none !important;
	}

	.alm-hero-slider__viewport {
		scroll-behavior: auto;
	}

	.alm-cat-card__arrow,
	.alm-cat-card__image,
	.alm-cat-card__media,
	.alm-guides-desk__grid .alm-post-card__img,
	.alm-bundle-card__visual-img,
	.alm-featured__primary-img,
	.alm-featured__selector-card,
	.alm-intent-card,
	.alm-intent-card__media,
	.alm-intent-card__image,
	.alm-intent-card__arrow,
	.alm-bundle-card,
	.alm-hero__primary-cta,
	.alm-hero__assist-cta,
	.alm-why__proof,
	.alm-why__proof-icon {
		transition: none !important;
	}
}