/**
 * Kaapia landing homepage — client mockup layout
 */

/* Announce bar */
.site-announce {
	background: #0b1228;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
}

.site-announce.is-hidden {
	display: none;
}

.site-announce__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.55rem 2.5rem 0.55rem 1rem;
	text-align: center;
}

.site-announce__text {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.55rem;
}

.site-announce__link {
	color: rgba(255, 255, 255, 0.94);
	text-decoration: none;
}

.site-announce__link:hover {
	color: var(--kaapia-teal);
}

.site-announce__sep {
	opacity: 0.4;
}

.site-announce__close {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
}

.site-announce__close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* Header — mockup layout: logo | nav | search | actions */
.site-header--landing {
	border-bottom: 1px solid #eef1f6;
	background: #fff;
	position: sticky;
}

.site-header--landing .site-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem 1.25rem;
	min-height: 72px;
}

.site-header--landing .site-branding {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
}

.site-header--landing .site-branding__tagline {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #6b7585;
	line-height: 1.2;
}

.site-header--landing .site-header__nav {
	display: flex;
	align-items: center;
	gap: 0.15rem 0.35rem;
	flex: 1 1 auto;
	min-width: 0;
}

.site-header--landing .header-explore__toggle {
	font-size: 0.88rem;
	font-weight: 500;
	color: #3d4656;
	padding: 0.4rem 0.55rem;
	white-space: nowrap;
}

.site-header--landing .header-explore__menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.site-header--landing .primary-nav--landing .primary-nav__list .header-explore__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.7rem 0.85rem;
	white-space: nowrap;
}

.site-header--landing .primary-nav--landing .primary-nav__list .header-explore__link:hover {
	background: #f4f7fb;
	color: var(--kaapia-navy);
}

.site-header--landing .primary-nav--landing {
	display: flex;
	align-items: center;
}

.site-header--landing .primary-nav--landing .nav-toggle {
	display: none;
}

.site-header--landing .primary-nav--landing .primary-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header--landing .primary-nav--landing .primary-nav__list a {
	padding: 0.4rem 0.55rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: #3d4656;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 6px;
}

.site-header--landing .primary-nav--landing .primary-nav__list a:hover {
	color: #0b1b48;
	background: rgba(13, 30, 108, 0.05);
}

.site-header--landing .site-header__search--landing {
	flex: 0 1 240px;
	max-width: 260px;
}

.landing-header-search {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.35rem 0.2rem 0.85rem;
	border: 1px solid #e4e9f0;
	border-radius: 999px;
	background: #fff;
}

.landing-header-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.82rem;
	color: #0b1b48;
	outline: none;
	padding: 0.4rem 0;
}

.landing-header-search__btn {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b7585;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.landing-header-search__btn:hover {
	color: var(--kaapia-purple);
	background: rgba(106, 45, 255, 0.08);
}

.site-header--landing .site-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.site-header--landing .header-wishlist {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.55rem 0.3rem 0.35rem;
	color: #3d4656;
	text-decoration: none;
	font-size: 0.84rem;
	font-weight: 500;
	border-radius: 999px;
}

.site-header--landing .header-wishlist:hover {
	color: var(--kaapia-purple);
	background: rgba(106, 45, 255, 0.07);
}

.site-header--landing .header-wishlist__label {
	display: inline;
	letter-spacing: -0.01em;
	line-height: 1;
}

.site-header--landing .header-action__badge,
.site-header--landing .header-cart__count,
.site-header--landing .header-wishlist__count {
	background: #1f6bff;
	color: #fff;
}

.site-header--landing .header-auth--login {
	border-color: var(--kaapia-purple) !important;
	color: var(--kaapia-purple) !important;
	border-radius: 8px !important;
}

.site-header--landing .header-auth--login:hover {
	background: var(--kaapia-btn-gradient, linear-gradient(135deg, #2f6bff 0%, #8b3dff 100%)) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.site-header--landing .header-auth--signup {
	background: var(--kaapia-purple) !important;
	border-color: var(--kaapia-purple) !important;
	color: #fff !important;
	border-radius: 8px !important;
}

.site-header--landing .header-auth--signup:hover {
	filter: brightness(1.06);
}

@media (max-width: 768px) {
	.site-header--landing .site-header__actions {
		gap: 0.38rem;
	}

	.site-header--landing .btn.header-auth,
	.site-header--landing .header-auth {
		min-height: 36px;
		padding: 0.42rem 0.9rem;
		border-radius: 999px !important;
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: -0.02em;
		line-height: 1;
		white-space: nowrap;
	}

	.site-header--landing .header-auth--login {
		border: 1.5px solid rgba(106, 45, 255, 0.28) !important;
		background: #fff !important;
		color: #5b22e6 !important;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 4px 10px rgba(15, 23, 42, 0.04) !important;
	}

	.site-header--landing .header-auth--login:hover {
		background: #f6f1ff !important;
		border-color: #6a2dff !important;
		color: #4c1d95 !important;
	}

	.site-header--landing .header-auth--signup {
		padding-inline: 1.05rem;
		border: 0 !important;
		background: var(--kaapia-btn-gradient, linear-gradient(135deg, #2f6bff 0%, #8b3dff 100%)) !important;
		color: #fff !important;
		box-shadow: 0 6px 16px rgba(47, 107, 255, 0.38) !important;
	}

	.site-header--landing .header-auth--signup:hover {
		filter: brightness(1.07);
	}
}

/* Section chrome */
.front-page--landing .section {
	padding: 3.25rem 0;
}

.landing-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.landing-section-head--stack {
	align-items: center;
}

.landing-section-head--center {
	justify-content: center;
	text-align: center;
	margin-bottom: 2rem;
}

.landing-section-head__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #0b1b48;
	line-height: 1.25;
}

.landing-section-head__star {
	color: #f6b800;
	font-size: 0.9em;
}

.landing-section-head__sub {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	color: #5a6478;
	max-width: 36rem;
}

.landing-section-head__link {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kaapia-blue);
	text-decoration: none;
	white-space: nowrap;
}

.landing-section-head__actions {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-shrink: 0;
	margin-left: auto;
}

.landing-courses__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.85rem;
}

.landing-courses__tab {
	appearance: none;
	border: 1px solid #e4e9f0;
	background: #fff;
	color: #334155;
	border-radius: 999px;
	padding: 0.38rem 0.9rem;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease;
}

.landing-courses__tab:hover {
	border-color: #c7d2fe;
	color: #1e3a8a;
}

.landing-courses__tab.is-active {
	background: var(--kaapia-btn-gradient, linear-gradient(135deg, #2f6bff 0%, #8b3dff 100%));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 16px rgba(47, 107, 255, 0.22);
}

.landing-courses__panel {
	position: relative;
}

.landing-courses__panel[hidden] {
	display: none !important;
}

.landing-courses__panel .landing-courses__arrows {
	justify-content: flex-end;
	margin: 0 0 0.85rem;
}

.landing-courses__arrows {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.landing-courses__arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #e4e9f0;
	background: #fff;
	color: #0b1b48;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(13, 30, 108, 0.08);
	transition:
		background 0.22s ease,
		color 0.22s ease,
		border-color 0.22s ease,
		box-shadow 0.22s ease,
		transform 0.22s ease;
}

.landing-courses__arrow:hover:not(:disabled) {
	background: var(--kaapia-btn-gradient, linear-gradient(135deg, #2f6bff 0%, #8b3dff 100%));
	border-color: transparent;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(47, 107, 255, 0.28);
}

.landing-courses__arrow:disabled {
	opacity: 0.38;
	cursor: default;
	box-shadow: none;
}

/* Hero */
.landing-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(560px, 68vh, 720px);
	padding: 0;
	background:
		radial-gradient(ellipse 58% 78% at 78% 48%, rgba(165, 148, 255, 0.34), transparent 64%),
		radial-gradient(ellipse 42% 52% at 92% 18%, rgba(129, 140, 248, 0.22), transparent 58%),
		radial-gradient(ellipse 38% 48% at 88% 78%, rgba(191, 219, 254, 0.4), transparent 62%),
		linear-gradient(105deg, #f9fafb 0%, #f7f6fc 38%, #eef0ff 70%, #e4e6ff 100%);
	overflow: hidden;
}

.landing-hero__inner {
	position: relative;
	z-index: 2;
	display: block;
	min-height: inherit;
	padding: 0;
}

.landing-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 5.75rem 0 3.25rem;
	max-width: min(38rem, 52%);
	min-height: 0;
}

.landing-hero__visual {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(50vw, 760px);
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
	overflow: hidden;
}

.landing-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.6rem, 5vw, 3.85rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.04em;
	color: #0f172a;
}

.landing-hero__title-lead {
	display: inline;
	color: #0f172a;
}

.landing-hero__title-grad {
	display: inline;
	margin-left: 0.18em;
	background: linear-gradient(90deg, #3b5bdb 0%, #6a2dff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.landing-hero__lead {
	margin: 0 0 2.35rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: #64748b;
	max-width: 32rem;
}

.landing-hero__search {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	width: 100%;
	max-width: 34rem;
	padding: 0.35rem 0.35rem 0.35rem 1.05rem;
	background: #fff;
	border: 1px solid #e6ebf2;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.landing-hero__search .search-form__results {
	top: calc(100% + 0.45rem);
	z-index: 6;
}

.landing-hero__search-icon {
	display: inline-flex;
	color: #94a3b8;
	flex: 0 0 auto;
}

.landing-hero__search-input {
	flex: 1;
	border: 0;
	padding: 0.8rem 0.25rem;
	font: inherit;
	font-size: 0.95rem;
	color: #0f172a;
	background: transparent;
	outline: none;
	min-width: 0;
}

.landing-hero__search-input::placeholder {
	color: #94a3b8;
}

.landing-hero__search-btn {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6 0%, #6a2dff 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(106, 45, 255, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.landing-hero__search-btn:hover {
	filter: brightness(1.05);
	transform: scale(1.03);
	box-shadow: 0 10px 22px rgba(106, 45, 255, 0.34);
}

.landing-hero__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 0.7rem;
	margin: 1.05rem 0 0;
}

.landing-hero__popular-label {
	font-size: 0.84rem;
	color: #64748b;
}

.landing-hero__popular-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.landing-hero__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.34rem 0.8rem;
	border-radius: 999px;
	border: 1px solid #e8edf4;
	background: #eef1f6;
	color: #2563eb;
	font-size: 0.78rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.landing-hero__tag:hover {
	background: #e4e9f2;
	border-color: #d9e0ea;
	color: #1d4ed8;
}

.landing-hero__photo-wrap {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

.landing-hero__photo {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom right;
	border-radius: 0;
	box-shadow: none;
}

.landing-hero__glow {
	position: absolute;
	inset: -8% -6% -4% 10%;
	border-radius: 0;
	background: radial-gradient(ellipse 68% 72% at 68% 46%, rgba(167, 139, 250, 0.42), rgba(129, 140, 248, 0.16) 42%, transparent 72%);
	filter: blur(18px);
	pointer-events: none;
	z-index: 0;
}

.landing-hero__float {
	position: absolute;
	z-index: 2;
	filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.12));
	animation: landingFloat 4.5s ease-in-out infinite;
	pointer-events: none;
}

.landing-hero__float--instructors {
	top: 14%;
	left: 6%;
}

.landing-hero__float--ai {
	top: 26%;
	right: 10%;
	animation-delay: 0.6s;
}

.landing-hero__float--chart {
	bottom: 28%;
	right: 8%;
	animation-delay: 1.2s;
}

.landing-hero__float--shield {
	bottom: 18%;
	left: 8%;
	animation-delay: 1.8s;
}

.landing-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.8rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #eef1f6;
}

.landing-hero__chip strong {
	font-size: 0.78rem;
	color: #0b1b48;
}

.landing-hero__avatars {
	display: inline-flex;
}

.landing-hero__avatars span {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-left: -6px;
	background: linear-gradient(135deg, var(--kaapia-blue), var(--kaapia-purple));
}

.landing-hero__avatars span:first-child {
	margin-left: 0;
	background: linear-gradient(135deg, var(--kaapia-teal), var(--kaapia-blue));
}

.landing-hero__avatars span:nth-child(2) {
	background: linear-gradient(135deg, var(--kaapia-purple), #db2777);
}

.landing-hero__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.55rem;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #eef1f6;
	color: var(--kaapia-purple);
	font-size: 0.85rem;
	font-weight: 700;
}

@keyframes landingFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* Categories */
.landing-categories {
	--kaapia-browse-cols: 5;
	--kaapia-browse-row: 5;
	--kaapia-browse-cols-tablet: 3;
	--kaapia-browse-cols-mobile: 2;
	--kaapia-browse-gap: 1.25rem;
	background: #fff;
}

.landing-categories .landing-section-head {
	align-items: center;
	margin-bottom: 1.35rem;
}

.landing-categories__rail {
	position: relative;
}

.landing-categories__rail.is-carousel .landing-categories__viewport {
	overflow: hidden;
	padding: 0.5rem 0.2rem 1.15rem;
	margin: -0.5rem -0.2rem -1.15rem;
}

.landing-categories__grid {
	display: grid;
	grid-template-columns: repeat(var(--kaapia-browse-row), minmax(0, 1fr));
	gap: var(--kaapia-browse-gap);
}

.landing-categories__track {
	display: flex;
	gap: var(--kaapia-browse-gap);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.landing-categories__rail.is-carousel .landing-categories__track .landing-cat-card {
	flex: 0 0 calc((100% - (var(--kaapia-browse-cols) - 1) * var(--kaapia-browse-gap)) / var(--kaapia-browse-cols));
	max-width: calc((100% - (var(--kaapia-browse-cols) - 1) * var(--kaapia-browse-gap)) / var(--kaapia-browse-cols));
	min-width: 0;
}

.landing-cat-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid #e6ebf2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.landing-cat-card:hover {
	transform: translateY(-4px);
	color: inherit;
	border-color: #dbe3ee;
	box-shadow: 0 14px 28px rgba(11, 22, 72, 0.12);
}

.landing-cat-card__media {
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 10;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 0;
	background:
		radial-gradient(circle at 50% 62%, rgba(56, 189, 248, 0.28), transparent 58%),
		#070d1f;
}

.landing-cat-card__media--photo {
	background: #eef2f7;
	padding: 0;
}

.landing-cat-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.landing-cat-card__media svg {
	width: 42%;
	height: 42%;
}

.landing-cat-card__media--ai {
	background:
		radial-gradient(circle at 50% 58%, rgba(56, 189, 248, 0.38), transparent 56%),
		#070d1f;
}

.landing-cat-card__media--cyber {
	background:
		radial-gradient(circle at 50% 55%, rgba(99, 102, 241, 0.4), transparent 58%),
		#080b1c;
}

.landing-cat-card__media--data {
	background:
		radial-gradient(circle at 50% 58%, rgba(45, 212, 191, 0.32), transparent 56%),
		#07141c;
}

.landing-cat-card__media--cloud {
	background:
		radial-gradient(circle at 50% 55%, rgba(96, 165, 250, 0.36), transparent 56%),
		#07101d;
}

.landing-cat-card__media--auto {
	background:
		radial-gradient(circle at 50% 55%, rgba(250, 204, 21, 0.28), transparent 56%),
		#10140a;
}

.landing-cat-card__media--biz {
	background:
		radial-gradient(circle at 50% 55%, rgba(129, 140, 248, 0.32), transparent 56%),
		#0a0d1c;
}

.landing-cat-card__media--lead {
	background:
		radial-gradient(circle at 50% 55%, rgba(251, 191, 36, 0.3), transparent 56%),
		#14100a;
}

.landing-cat-card__media--prompt {
	background:
		radial-gradient(circle at 50% 55%, rgba(167, 139, 250, 0.34), transparent 56%),
		#0c0a1a;
}

.landing-cat-card__media--mkt {
	background:
		radial-gradient(circle at 50% 55%, rgba(52, 211, 153, 0.3), transparent 56%),
		#071410;
}

.landing-cat-card:hover .landing-cat-card__media {
	box-shadow: none;
}

.landing-cat-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 0.9rem 1rem 1.05rem;
}

.landing-cat-card__name {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #0f172a;
}

.landing-cat-card__count {
	display: block;
	margin: 0;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.35;
	color: #64748b;
}

/* Course cards */
.landing-courses {
	background: #fafbfd;
}

.landing-courses__rail {
	position: relative;
}

.landing-courses__viewport {
	overflow: hidden;
}

.landing-courses__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.15rem;
}

.landing-courses__rail.is-carousel .landing-courses__track {
	display: flex;
	grid-template-columns: none;
	gap: 1rem;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.landing-courses__rail.is-carousel .landing-courses__track .landing-course-card {
	flex: 0 0 calc((100% - 3rem) / 4);
	max-width: calc((100% - 3rem) / 4);
}

@media (max-width: 1200px) {
	.landing-courses__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		padding-bottom: 0.35rem;
		-webkit-overflow-scrolling: touch;
	}

	.landing-courses__track .landing-course-card {
		flex: 0 0 min(280px, 78vw);
		scroll-snap-align: start;
	}

	.landing-courses__rail.is-carousel .landing-courses__track {
		overflow: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}

	.landing-courses__rail.is-carousel .landing-courses__track .landing-course-card {
		flex: 0 0 calc((100% - 1rem) / 2);
		max-width: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 640px) {
	.landing-courses__rail.is-carousel .landing-courses__track .landing-course-card {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.landing-courses__nav {
	position: absolute;
	top: 38%;
	right: -0.6rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid #e4e9f0;
	background: #fff;
	color: #0b1b48;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(13, 30, 108, 0.12);
}

.landing-courses__nav:hover {
	color: var(--kaapia-blue);
}

.landing-courses__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 2rem;
	text-align: center;
	color: #5a6478;
	background: #fff;
	border-radius: 14px;
	border: 1px dashed #e4e9f0;
}

.landing-course-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e8edf4;
	border-radius: 14px;
	overflow: visible;
	box-shadow: 0 2px 8px rgba(13, 30, 108, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.landing-course-card:hover {
	box-shadow: 0 12px 28px rgba(13, 30, 108, 0.1);
	transform: translateY(-2px);
}

.landing-course-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 14px 14px 0 0;
	background: #eef1f6;
}

.landing-course-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.landing-course-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--kaapia-navy), var(--kaapia-blue));
}

.landing-course-card__ribbon {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	padding: 0.22rem 0.5rem;
	border-radius: 4px;
	background: #f6b800;
	color: #0b1b48;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.landing-course-card__ribbon--best-seller {
	background: #ea580c;
	color: #fff;
}

.landing-course-card__ribbon--popular {
	background: #2563eb;
	color: #fff;
}

.landing-course-card__ribbon--new-release {
	background: #16a34a;
	color: #fff;
}

.landing-course-card__ribbon--editors-pick {
	background: #f6b800;
	color: #0b1b48;
}

.landing-course-card__chip {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: rgba(11, 27, 72, 0.78);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
}

.landing-course-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.95rem 1rem 1.05rem;
	flex: 1;
}

.landing-course-card__cat {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--kaapia-blue);
}

.landing-course-card__title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

.landing-course-card__title a {
	color: #0b1b48;
	text-decoration: none;
}

.landing-course-card__title a:hover {
	color: var(--kaapia-blue);
}

.landing-course-card__instructor {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	font-size: 0.78rem;
	color: #6b7585;
}

.landing-course-card__instructor-icon {
	display: inline-flex;
	color: #9aa3b5;
}

.landing-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 0.85rem;
	font-size: 0.78rem;
	color: #5a6478;
}

.landing-course-card__rating {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.28rem;
	white-space: nowrap;
	line-height: 1.2;
}

.landing-course-card__rating strong {
	color: #0b1b48;
	font-weight: 700;
}

.landing-course-card__star {
	display: inline-flex;
	align-items: center;
	color: #f4c150;
	font-size: 0.92em;
	line-height: 1;
}

.landing-course-card__reviews {
	color: #6b7585;
	font-weight: 500;
}

.landing-course-card__hours {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	white-space: nowrap;
}

.landing-course-card__price {
	margin: 0.15rem 0 0;
	font-size: 1rem;
	font-weight: 700;
	color: #0b1b48;
}

.landing-course-card__price del {
	margin-left: 0.35rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: #9aa3b5;
}

.landing-course-card__price ins {
	text-decoration: none;
}

.landing-course-card__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.65rem;
}

.landing-course-card__atc {
	flex: 1;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.55rem 0.75rem !important;
	border-radius: 10px !important;
	border: 1.5px solid var(--kaapia-blue) !important;
	background: #fff !important;
	color: var(--kaapia-blue) !important;
	font-size: 0.84rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.landing-course-card__atc:hover {
	background: #fff !important;
	border-color: var(--kaapia-blue) !important;
	color: var(--kaapia-blue) !important;
}

.landing-course-card__atc.added {
	background: var(--kaapia-btn-gradient, linear-gradient(135deg, #2f6bff 0%, #8b3dff 100%)) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.landing-course-card__cart-icon {
	flex: 0 0 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1.5px solid #e4e9f0;
	color: #0b1b48;
	background: #fff;
	text-decoration: none;
}

.landing-course-card__cart-icon:hover {
	border-color: #e4e9f0;
	color: #0b1b48;
	background: #fff;
}

/* Cert banner */
.landing-cert-banner {
	overflow: visible;
}

.landing-cert-banner .container {
	overflow: visible;
}

.landing-cert-banner__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) auto minmax(160px, 0.7fr);
	gap: 1.5rem 1.75rem;
	align-items: center;
	min-height: 132px;
	padding: 1.65rem 2rem 1.35rem 1.65rem;
	border-radius: 22px;
	color: #fff;
	background:
		radial-gradient(ellipse 46% 90% at 86% 28%, rgba(139, 61, 255, 0.55), transparent 62%),
		radial-gradient(ellipse 38% 80% at 78% 88%, rgba(31, 107, 255, 0.38), transparent 58%),
		linear-gradient(112deg, #07071a 0%, #12082e 38%, #1a0a3c 68%, #0b1236 100%);
	box-shadow: 0 18px 44px rgba(7, 7, 26, 0.28);
	overflow: visible;
}

.landing-cert-banner__glow {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(circle at 92% 18%, rgba(167, 139, 250, 0.28), transparent 26%),
		radial-gradient(circle at 74% 72%, rgba(47, 107, 255, 0.22), transparent 30%);
}

.landing-cert-banner__glow::after {
	content: "";
	position: absolute;
	right: -8%;
	top: -40%;
	width: 52%;
	height: 180%;
	background:
		repeating-linear-gradient(
			118deg,
			transparent 0 18px,
			rgba(167, 139, 250, 0.07) 18px 20px
		);
	transform: rotate(8deg);
	filter: blur(6px);
	opacity: 0.9;
}

.landing-cert-banner__copy,
.landing-cert-banner__btn,
.landing-cert-banner__art {
	position: relative;
	z-index: 1;
}

.landing-cert-banner__copy {
	display: flex;
	align-items: center;
	gap: 1.05rem;
	min-width: 0;
}

.landing-cert-banner__mark {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 0 0 8px rgba(255, 255, 255, 0.07),
		0 10px 28px rgba(139, 61, 255, 0.32);
}

.landing-cert-banner__copy-text {
	min-width: 0;
}

.landing-cert-banner__title {
	margin: 0 0 0.28rem;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: #fff;
}

.landing-cert-banner__text {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 400;
	opacity: 0.92;
	line-height: 1.5;
	max-width: 28rem;
	color: rgba(255, 255, 255, 0.92);
}

.landing-cert-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.72rem 1.2rem;
	border-radius: 8px;
	border: 1.5px solid rgba(255, 255, 255, 0.88);
	background: transparent;
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	justify-self: center;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.landing-cert-banner__btn:hover {
	background: var(--kaapia-btn-gradient, linear-gradient(135deg, #2f6bff 0%, #8b3dff 100%));
	border-color: transparent;
	color: #fff;
	transform: translateY(-1px);
}

.landing-cert-banner__art {
	justify-self: end;
	align-self: end;
	margin: 0 0.15rem -2.35rem 0;
	line-height: 0;
	pointer-events: none;
}

.landing-cert-banner__art svg {
	display: block;
	width: min(210px, 28vw);
	height: auto;
}

/* Learning paths */
.landing-paths__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.1rem;
}

.landing-path-card {
	display: flex;
	flex-direction: column;
	padding: 1.2rem 1.15rem 1.25rem;
	border-radius: 14px;
	border: 1px solid #e6ebf2;
	background: #fff;
	box-shadow: 0 2px 8px rgba(13, 30, 108, 0.03);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.landing-path-card:hover,
.landing-path-card:focus-visible {
	border-color: rgba(31, 107, 255, 0.35);
	box-shadow: 0 10px 24px rgba(13, 30, 108, 0.08);
	transform: translateY(-2px);
}

.landing-path-card:focus-visible {
	outline: 2px solid var(--kaapia-blue);
	outline-offset: 2px;
}

.landing-path-card__top {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.9rem;
}

.landing-path-card__icon {
	display: inline-flex;
	width: 2.35rem;
	height: 2.35rem;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(31, 107, 255, 0.1);
	color: var(--kaapia-blue);
}

.landing-path-card__icon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.landing-path-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #0b1b48;
	letter-spacing: -0.015em;
}

.landing-path-card__timeline {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 0.75rem;
}

.landing-path-card__dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--kaapia-blue);
	box-shadow: 0 0 0 3px rgba(31, 107, 255, 0.15);
	flex-shrink: 0;
}

.landing-path-card__dot.is-muted {
	background: #dce3ef;
	box-shadow: none;
}

.landing-path-card__line {
	flex: 1;
	height: 2px;
	background: #dce3ef;
}

.landing-path-card__meta {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #5a6478;
}

.landing-path-card__text {
	margin: 0 0 0.85rem;
	font-size: 0.84rem;
	line-height: 1.55;
	color: #5a6478;
}

.landing-path-card__link {
	margin-top: auto;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--kaapia-blue);
}

.landing-path-card:hover .landing-path-card__link,
.landing-path-card:focus-visible .landing-path-card__link {
	color: var(--kaapia-purple);
}

/* Partners landing */
.partners-strip--landing {
	padding: 2rem 0;
	background: #fff;
}

.partners-strip--landing .partners-strip__text {
	display: none;
}

.partners-strip--landing .partners-carousel__logo {
	filter: none;
	opacity: 1;
	max-height: 80px;
}

.partners-strip--landing .partners-carousel__nav {
	display: inline-flex;
	width: 40px;
	height: 40px;
	border: 1px solid #e6ebf2;
	background: #fff;
	color: #0b1648;
	box-shadow: 0 4px 12px rgba(11, 22, 72, 0.06);
}

.partners-strip--landing .partners-carousel__nav:hover {
	border-color: #6a2dff;
	color: #6a2dff;
	background: #f6f1ff;
}

/* Why Kaapia */
.landing-why {
	background: #fff;
}

.landing-why .landing-section-head {
	margin-bottom: 1.35rem;
}

.landing-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 1.35rem;
}

.landing-why__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-align: left;
	padding: 0;
	min-width: 0;
}

.landing-why__icon {
	display: inline-flex;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 3.75rem;
	height: 3.75rem;
	padding: 5px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid transparent;
	margin: 0;
}

.landing-why__icon svg {
	width: 100%;
	height: 100%;
}

.landing-why__icon--blue {
	background: #eaf2ff;
	border-color: #b7d0ff;
	color: #1f6bff;
}

.landing-why__icon--green {
	background: #e8f8ef;
	border-color: #b3e4c7;
	color: #16a34a;
}

.landing-why__icon--purple {
	background: #f1ebff;
	border-color: #d4c4ff;
	color: #6a2dff;
}

.landing-why__icon--violet {
	background: #f3eaff;
	border-color: #dcc7ff;
	color: #7c3aed;
}

.landing-why__body {
	min-width: 0;
}

.landing-why__title {
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: #0b1b48;
}

.landing-why__text {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: #6b7280;
}

/* App + newsletter styles live in assets/css/app-newsletter.css (sitewide). */
.front-page--landing .landing-app-news.section {
	padding: 1.75rem 0 2.25rem;
}

/* Responsive */
@media (max-width: 1200px) {
	.site-header--landing .header-wishlist__label {
		display: none;
	}

	.site-header--landing .site-header__search--landing {
		max-width: 200px;
		flex-basis: 180px;
	}

	.landing-categories__grid {
		grid-template-columns: repeat(var(--kaapia-browse-row), minmax(0, 1fr));
	}

	.landing-courses__track,
	.landing-paths__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.landing-courses__rail.is-carousel .landing-courses__track {
		grid-template-columns: none;
	}

	.landing-courses__nav {
		display: none;
	}
}

@media (max-width: 1100px) {
	.site-header--landing .site-header__inner {
		flex-wrap: wrap;
		min-height: auto;
		padding-top: 0.65rem;
		padding-bottom: 0.65rem;
	}

	.site-header--landing .site-header__nav {
		order: 3;
		flex: 1 1 100%;
		overflow-x: auto;
		padding-bottom: 0.15rem;
	}

	.site-header--landing .site-header__search--landing {
		margin-left: auto;
	}
}

@media (max-width: 900px) {
	.site-header--landing .primary-nav--landing .nav-toggle {
		display: inline-flex;
	}

	.site-header--landing .primary-nav--landing .primary-nav__list {
		display: none;
	}

	.site-header--landing .primary-nav--landing.is-open .primary-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 1200;
		padding: 0.75rem;
		background: #fff;
		border-bottom: 1px solid #eef1f6;
		box-shadow: 0 12px 28px rgba(13, 30, 108, 0.1);
	}

	.site-header--landing .site-header__nav {
		position: static;
	}

	.landing-hero {
		min-height: 0;
		padding: 1.5rem 0 0;
		display: flex;
		flex-direction: column;
	}

	.landing-hero__inner,
	.landing-cert-banner__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		align-items: stretch;
	}

	.landing-cert-banner__inner {
		padding: 1.4rem 1.25rem 2.4rem;
		text-align: left;
	}

	.landing-cert-banner__btn {
		justify-self: start;
	}

	.landing-cert-banner__art {
		justify-self: end;
		margin-bottom: -1.6rem;
	}

	.landing-hero__inner {
		order: 1;
		padding: 1.25rem 0 2rem;
	}

	.landing-hero__content {
		padding: 0;
		max-width: none;
		min-height: 0;
	}

	.landing-hero__visual {
		position: relative;
		inset: auto;
		order: 0;
		width: 100%;
		height: min(52vw, 360px);
		justify-content: center;
	}

	.landing-hero__photo-wrap {
		width: min(100%, 360px);
		height: 100%;
		margin: 0 auto;
	}

	.landing-hero__photo {
		object-position: bottom center;
	}

	.landing-hero__float--instructors {
		left: 0;
	}

	.landing-hero__float--chart {
		right: 0;
	}

	.landing-cert-banner__art {
		width: 140px;
	}

	.landing-cert-banner__art svg {
		width: 140px;
	}

	.landing-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.landing-categories {
		--kaapia-browse-cols: var(--kaapia-browse-cols-tablet);
		--kaapia-browse-gap: 1rem;
	}

	.landing-categories__grid {
		grid-template-columns: repeat(min(var(--kaapia-browse-cols-tablet), var(--kaapia-browse-row)), minmax(0, 1fr));
		gap: var(--kaapia-browse-gap);
	}

	.landing-categories__track {
		gap: var(--kaapia-browse-gap);
	}
}

@media (max-width: 640px) {
	.site-announce__text .site-announce__sep:nth-of-type(2),
	.site-announce__text .site-announce__link:nth-of-type(3) {
		display: none;
	}

	.site-header--landing .site-branding__tagline,
	.site-header--landing .site-header__search--landing {
		display: none;
	}

	.landing-section-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.landing-section-head__actions {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.landing-categories {
		--kaapia-browse-cols: var(--kaapia-browse-cols-mobile);
		--kaapia-browse-gap: 0.9rem;
	}

	.landing-categories__grid {
		grid-template-columns: repeat(min(var(--kaapia-browse-cols-mobile), var(--kaapia-browse-row)), minmax(0, 1fr));
		gap: var(--kaapia-browse-gap);
	}

	.landing-categories__track {
		gap: var(--kaapia-browse-gap);
	}

	.landing-courses__track,
	.landing-paths__grid,
	.landing-why__grid {
		grid-template-columns: 1fr;
	}

	.landing-courses__rail.is-carousel .landing-courses__track {
		grid-template-columns: none;
	}
}