/* ==========================================================================
   high5 – homepage sekcie
   ========================================================================== */

/* Hero --------------------------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(34rem, 75svh, 64rem);
	padding: calc(var(--header-h) + 3rem) 0 clamp(3rem, 2rem + 3vw, 5rem);
	background: var(--c-ink-900);
	overflow: hidden;
	isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -1; }

.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.38;
}

.hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(94deg, rgb(6 22 32 / 0.28) 24%, rgb(6 22 32 / 0.22) 70%, rgb(6 22 32 / 0.1) 100%),
		linear-gradient(0deg, var(--c-ink-900) 12.6%, rgb(6 22 32 / 0) 81%);
}

.hero__glow {
	position: absolute;
	left: 12.9%;
	bottom: clamp(6rem, 13.75vw, 12.4rem);
	width: max(62.7vw, 28rem);
	aspect-ratio: 903 / 641;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(107 206 187 / 0.5), rgb(107 206 187 / 0) 100%);
	opacity: 0.3;
	mix-blend-mode: screen;
	animation: hero-glow 12s var(--ease-in-out) infinite alternate;
}

@keyframes hero-glow {
	from { transform: translate3d(-3%, 2%, 0) scale(0.96); }
	to { transform: translate3d(4%, -3%, 0) scale(1.06); }
}

.hero__title { max-width: 11.5em; }

.hero__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.hero__sub {
	max-width: 36em;
	color: var(--c-muted);
	line-height: var(--lh-text);
	padding-left: 0.3rem;
}

.hero__social .social { gap: clamp(0.9rem, 1.4vw, 1.1rem); }

/* Klienti ------------------------------------------------------------------ */
.clients {
	background: var(--c-ink-900);
	padding: clamp(1rem, 0.5rem + 2vw, 2.25rem) 0 clamp(4rem, 3rem + 4vw, 6.5rem);
}

.clients__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

.clients__title {
	font-family: var(--f-display);
	font-size: var(--fs-subhead);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.clients__eyebrow { color: var(--c-mint); letter-spacing: 0.18em; }

.clients__marquee { --gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.6rem); }

.clients__logo img {
	width: auto;
	height: calc(var(--h) * clamp(0.6px, 0.45px + 0.0385vw, 1.25px));
	opacity: 0.92;
	transition: opacity 0.3s;
}

.clients__logo img:hover { opacity: 1; }

/* O nás -------------------------------------------------------------------- */
.about {
	--head-line: var(--c-ink-800);
	--head-color: var(--c-ink-800);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #03141a;
	color: var(--c-ink-800);
}

.about__media img { max-width: none; }

.about__title { color: var(--c-paper); }
.about__title strong { color: var(--c-ink-800); }

.about__text { max-width: 27.5rem; line-height: var(--lh-text); }

.stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid rgb(241 246 244 / 0.33);
	border-radius: var(--radius);
	background: linear-gradient(0deg, rgb(6 22 32 / 0.87), rgb(6 22 32 / 0.91));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--c-paper);
	text-align: center;
}

.stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2rem) clamp(0.75rem, 2vw, 1.9rem);
	border-color: rgb(241 246 244 / 0.15);
	border-style: solid;
	border-width: 0;
}

.stats__item:nth-child(odd) { border-right-width: 1px; }
.stats__item:nth-child(-n + 2) { border-bottom-width: 1px; }

.stats__value {
	order: -1;
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--fs-stat);
	font-weight: 900;
	line-height: 0.94;
	letter-spacing: -0.045em;
	color: var(--c-mint);
	font-variant-numeric: tabular-nums;
}

.stats__label {
	margin-top: 0.9rem;
	font-family: var(--f-display);
	font-size: clamp(0.75rem, 0.4rem + 0.6vw, 1.1rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-amber);
}

.stats__text {
	margin: 0.9rem 0 0;
	max-width: 15.5rem;
	font-size: var(--fs-small);
	line-height: var(--lh-tight);
}

.about__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 2.4rem);
}

.badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem clamp(1.75rem, 1rem + 3.2vw, 4.4rem);
}

.badges img {
	width: auto;
	max-height: clamp(2.75rem, 2rem + 2.5vw, 6rem);
	filter: grayscale(1) contrast(1.05);
	opacity: 0.9;
	transition: filter 0.4s, opacity 0.4s;
}

.badges img:hover { filter: none; opacity: 1; }
.badges img[src*="cert-meta"] { padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); background: var(--c-white); }

.about__cta { min-width: min(100%, 16.1rem); }

/* Mobil / tablet: text na tyrkysovej → fotka (čo najväčšia) → čísla → odznaky */
@media (max-width: 1023px) {
	.about {
		padding-block: var(--section-y);
		background: #03141a;
	}

	/* Tyrkysové pozadie len pod textom – farby nadväzujú na stenu na fotke */
	.about__top { position: relative; padding-bottom: 0; }
	.about__top::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: calc(-1 * var(--section-y)) calc(50% - 50vw) -2px;
		background: linear-gradient(90deg, #478d77, #579a87 50%, #63ab9b);
	}

	.about__intro { margin-top: 2.25rem; }

	.about__media {
		position: relative;
		margin-inline: calc(50% - 50vw);
		aspect-ratio: 1 / 0.78;
		overflow: hidden;
	}

	/* Fotka cez celú šírku (+8 %), spodok so sediacimi ľuďmi, stena hore sa prelína s pozadím */
	.about__media img {
		position: absolute;
		left: -4%;
		bottom: 0;
		width: 108%;
		height: auto;
	}

	.about__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(180deg, #579a87 0%, rgb(87 154 135 / 0) 12%),
			linear-gradient(0deg, #03141a 4%, rgb(3 20 26 / 0) 38%);
	}

	.about .stats { margin-top: -2.5rem; z-index: 1; }
}

@media (min-width: 1024px) {
	.about {
		min-height: min(98.5vw, 94rem);
		padding: clamp(5rem, 7.7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
	}

	.about__media { position: absolute; inset: 0; z-index: -1; }
	.about__media::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 30%;
		background: linear-gradient(to bottom, rgb(3 20 26 / 0), #03141a 85%);
	}
	.about__media img {
		position: absolute;
		left: 50%;
		top: max(-11.3vw, -163px);
		width: max(100%, min(138.3vw, 1991px)); /* do 1440 „zoom“ ako vo Figme, nad 1440 sa odkrýva viac fotky */
		translate: -50% 0;
	}

	.about__inner {
		display: flex;
		flex-direction: column;
		min-height: calc(min(98.5vw, 94rem) - clamp(5rem, 7.7vw, 7rem) - clamp(3rem, 4vw, 4rem));
	}

	.about__intro { margin-top: clamp(2.5rem, 3.9vw, 3.5rem); align-items: start; }
	.about__text { justify-self: end; margin-top: 0.5rem; }
	.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: auto; }
	.stats__item { border-bottom-width: 0 !important; border-right-width: 1px; }
	.stats__item:last-child { border-right-width: 0; }
}

/* Štyri oblasti ------------------------------------------------------------ */
.areas { background: var(--c-ink-950); overflow: hidden; }

.areas__intro { margin-top: clamp(2.5rem, 2rem + 2vw, 3.6rem); }
.areas__lead { color: var(--c-mint); line-height: var(--lh-text); }
@media (min-width: 900px) { .areas__lead { justify-self: end; text-align: right; } }

.areas__list {
	position: relative;
	margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	border-top: 1px solid rgb(241 246 244 / 0.07);
}

.areas__horizon {
	position: absolute;
	z-index: -1;
	left: 40%;
	top: clamp(16rem, 12rem + 12vw, 22rem);
	width: max(220%, 70rem);
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: 50%;
	border-top: 1px solid rgb(107 206 187 / 0.4);
	background: radial-gradient(circle at 50% 0, rgb(10 53 60 / 0.55), transparent 25%);
	box-shadow: 0 -18px 70px -30px rgb(107 206 187 / 0.55), inset 0 40px 80px -50px rgb(107 206 187 / 0.35);
	pointer-events: none;
}

.areas__horizon::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: min(60vw, 46rem);
	aspect-ratio: 1.6;
	translate: -50% -55%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(107 206 187 / 0.32), rgb(107 206 187 / 0.08) 55%, transparent);
	filter: blur(10px);
}

.area { border-bottom: 1px solid rgb(241 246 244 / 0.07); }

.area__heading { margin: 0; }

.area__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	min-height: clamp(5.5rem, 4.6rem + 3vw, 7.65rem);
	text-align: left;
}

.area__name {
	color: var(--c-slate-700);
	transition: color 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

.area__name i {
	display: inline-block;
	font-style: normal;
	color: var(--c-slate-600);
	transform-origin: 50% 70%;
	transition: color 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}

.area__toggle:hover .area__name { color: #7a95a1; }
.area__toggle:hover .area__name i { color: var(--c-mint); }

.area.is-open .area__name { color: var(--c-white); }
.area.is-open .area__name i { color: var(--c-mint); transform: rotate(-6deg) scale(1.18); margin-right: 0.04em; }

.area__count {
	flex-shrink: 0;
	font-family: var(--f-display);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.14em;
	color: var(--c-slate-600);
	transition: color 0.4s;
}

.area.is-open .area__count { color: var(--c-amber); }

.area__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.7s var(--ease-out);
}

.area.is-open .area__panel { grid-template-rows: 1fr; }

.area__body {
	display: grid;
	gap: 1.75rem clamp(2rem, 4vw, 3rem);
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.5s, transform 0.7s var(--ease-out);
}

.area.is-open .area__body {
	padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	opacity: 1;
	transform: none;
	transition-delay: 0.15s;
}

@media (min-width: 900px) {
	.area__body { grid-template-columns: minmax(0, 543fr) minmax(0, 603fr); gap: 0; }
}

.area__tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.65rem 0.75rem; max-width: 24rem; }

.area__content p {
	font-size: var(--fs-body);
	line-height: var(--lh-text);
	color: var(--c-white);
}

.area__content .btn { margin-top: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }

/* Case studies ------------------------------------------------------------- */
.cases { background: var(--c-ink-950); overflow: hidden; }
.cases__rings { --rings-size: 78rem; --rings-gap: 3.6rem; top: 0; right: -40rem; }

.cases__title { margin-top: clamp(2.5rem, 2rem + 2vw, 3.25rem); }

.cases__tabs {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 4.1rem);
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.1rem);
	border-top: 1px solid var(--c-line-dark);
}

.cases__counter {
	flex-shrink: 0;
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.16em;
	color: var(--c-mint);
}

.cases__counter span + span { color: var(--c-slate-400); }

.cases__tablist {
	display: flex;
	gap: clamp(1.5rem, 3.4vw, 3.4rem);
	overflow-x: auto;
	scrollbar-width: none;
}

.cases__tablist::-webkit-scrollbar { display: none; }

.cases__tab {
	position: relative;
	flex-shrink: 0;
	padding: 1.25rem 0.6rem;
	font-family: var(--f-display);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(241 246 244 / 0.4);
	transition: color 0.3s;
}

.cases__tab::before {
	content: "";
	position: absolute;
	inset: -1px 0 auto;
	height: 2px;
	background: var(--c-mint);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ease-out);
}

.cases__tab:hover { color: var(--c-paper); }
.cases__tab.is-active { color: var(--c-paper); font-weight: 700; }
.cases__tab.is-active::before { transform: scaleX(1); }
.cases__tab--all { margin-left: auto; }

.cases__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(82%, 22.5rem);
	gap: clamp(1rem, 1.8vw, 1.625rem);
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cases__track::-webkit-scrollbar { display: none; }

@media (min-width: 700px) { .cases__track { grid-auto-columns: calc((100% - var(--g, 1.625rem)) / 2); } }
@media (min-width: 1024px) { .cases__track { grid-auto-columns: calc((100% - 2 * clamp(1rem, 1.8vw, 1.625rem)) / 3); } }

.case { scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; }

.case__media {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 362.66 / 271.98;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-ink-800);
	isolation: isolate;
}

.case__media img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease-out);
}

.case__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgb(6 22 32 / 0.55), rgb(6 22 32 / 0) 52%);
}

.case:hover .case__media img { transform: scale(1.05); }
.case:hover .play { transform: scale(1.1); background: rgb(107 206 187 / 0.35); }

.case__client { margin-top: 1.6rem; color: var(--c-amber); letter-spacing: 0.18em; }

.case__title {
	margin-top: 0.5rem;
	min-height: 2.24em;
	font-family: var(--f-display);
	font-size: var(--fs-title);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: var(--c-mint);
}

.case__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.case__title a:hover { background-size: 100% 1px; }

.case__metrics { display: flex; gap: clamp(1.25rem, 2.5vw, 1.6rem); margin: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0 0; }
.case__metrics div { display: flex; flex-direction: column; }
.case__metrics dd {
	order: -1;
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--fs-metric);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: -0.045em;
	color: var(--c-white);
	white-space: nowrap;
}
.case__metrics dt {
	margin-top: 0.75rem;
	font-family: var(--f-display);
	font-size: var(--fs-micro);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--c-sky);
}

.case .btn { margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); }

/* Know-how ----------------------------------------------------------------- */
.knowhow {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(44rem, 73vw, 90rem); /* fotka 1440×1053 vo Figme – sekcia rastie s monitorom */
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(3rem, 2rem + 2vw, 5rem);
	background: var(--c-ink-900);
}

.knowhow__inner { flex: 1; display: flex; flex-direction: column; }

.knowhow__bg { position: absolute; inset: 0; z-index: -1; }
.knowhow__bg img,
.knowhow__bg video { width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%; }
.knowhow__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgb(6 22 32 / 0.85) 4%, rgb(6 22 32 / 0) 34%),
		linear-gradient(178deg, #05121a 4%, rgb(6 22 32 / 0.66) 26%, rgb(6 22 32 / 0.28) 45%);
}

.knowhow__intro { margin-top: clamp(2rem, 1.5rem + 2vw, 2.8rem); align-items: start; }
.knowhow__intro .lead { color: var(--c-white); }

.talks {
	display: grid;
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	margin-top: auto;
	padding-top: clamp(14rem, 55vw, 22rem);
}

@media (min-width: 900px) { .talks { padding-top: 6rem; } }

.talk {
	--play-size: 52px;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: 100%;
	min-height: 7.9rem;
	padding: 1.5rem;
	border: 1px solid rgb(241 246 244 / 0.12);
	border-top-color: rgb(241 246 244 / 0.28);
	border-radius: var(--radius);
	background: rgb(10 35 49 / 0.32);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	transition: transform 0.5s var(--ease-out), background-color 0.3s, opacity 0.9s var(--ease-out) calc(var(--d, 0) * 1s);
}

/* Reveal: rodič (li) sa len posúva, priehľadnosť animuje samotný box – opacity na rodičovi by
   v prehliadači oneskorila backdrop-filter (blur by nabehol až po dobehnutí animácie). */
.js .talks li[data-reveal] { opacity: 1; }
.js .talks li[data-reveal] .talk { opacity: 0; }
.js .talks li[data-reveal].is-in .talk { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .talks li[data-reveal] .talk { opacity: 1; } }

.talk .play { flex-shrink: 0; }
.talk .play::before { border-width: 8px 0 8px 12px; }

a.talk:hover { transform: translateY(-4px); background: rgb(10 35 49 / 0.55); }
a.talk:hover .play { background: var(--c-mint); }

.talk__text { display: grid; gap: 0.6rem; }

.talk__title {
	font-family: var(--f-display);
	font-size: clamp(1.25rem, 0.8rem + 0.8vw, 1.75rem);
	line-height: 1.17;
	color: var(--c-white);
}

.talk__where { font-size: var(--fs-micro); letter-spacing: 0.15em; color: var(--c-amber); }

.knowhow__venues {
	margin-top: clamp(2rem, 1.5rem + 2vw, 2.7rem);
	padding-block: 1.9rem;
	border-top: 1px solid var(--c-line-dark);
	background: rgb(6 22 32 / 0.55);
}

.knowhow__venues .marquee { --gap: clamp(2rem, 3vw, 3rem); }
.knowhow__venues li {
	flex-shrink: 0;
	font-family: var(--f-display);
	font-size: var(--fs-subhead);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: rgb(241 246 244 / 0.6);
	white-space: nowrap;
}

.knowhow__venues .knowhow__star { font-family: var(--f-body); font-size: 1rem; color: var(--c-amber); opacity: 0.55; }

/* Komunity ----------------------------------------------------------------- */
.communities { background: var(--c-mist); overflow: hidden; }
.communities__rings { --rings-size: 64rem; --rings-gap: 3.3rem; --rings-color: rgb(15 50 70 / 0.07); left: -26rem; top: 22rem; }

.communities .h2 strong,
.platforms .h2 strong,
.reviews .h2 strong { color: var(--c-mint); }

.communities__grid {
	display: grid;
	gap: 3rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 2.4rem);
}

@media (min-width: 1024px) {
	.communities__grid { grid-template-columns: minmax(0, 482fr) minmax(0, 614fr); gap: clamp(2rem, 3.5vw, 3.1rem); }
}

.communities__lead { margin-top: clamp(1.25rem, 1rem + 1vw, 1.6rem); color: var(--c-slate-600); }

.communities__photo {
	margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.2rem);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 482 / 608;
	background: #cfe2dc;
}

.communities__photo img { width: 100%; height: 100%; object-fit: cover; }

.communities__brand {
	display: grid;
	align-items: center;
	height: clamp(6rem, 5rem + 3vw, 8.6rem);
	padding-left: clamp(0rem, 6vw, 5.5rem);
}

.communities__brand-item {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.45s, transform 0.6s var(--ease-out);
}

.communities__brand-item.is-active { opacity: 1; transform: none; }
.communities__brand-item img { width: auto; max-height: clamp(5rem, 4rem + 3vw, 8.6rem); mix-blend-mode: multiply; }

.communities__brand-name {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	color: var(--c-ink-700);
}

.communities__list { margin-top: clamp(1rem, 2vw, 2.25rem); border-top: 1px solid var(--c-line-light); }

.community {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	padding: clamp(1.25rem, 1rem + 0.8vw, 1.6rem) 1.25rem clamp(1.25rem, 1rem + 0.8vw, 1.6rem) 1rem;
	border-bottom: 1px solid var(--c-line-light);
	cursor: default;
	outline-offset: -2px;
	transition: background-color 0.4s, padding 0.5s var(--ease-out);
}

.community::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--c-mint);
	transform: scaleY(0);
	transition: transform 0.5s var(--ease-out);
}

.community.is-active { background: var(--c-mint-soft); padding-left: 1.6rem; }
.community.is-active::before { transform: scaleY(1); }

.community__num { grid-row: span 2; padding-top: 0.55rem; font-size: calc(var(--fs-micro) * 1.1); color: var(--c-slate-600); }
.community.is-active .community__num { color: var(--c-ink-700); }

.community__name {
	font-family: var(--f-display);
	font-size: clamp(1.25rem, 0.8rem + 0.8vw, 1.85rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.028em;
	color: var(--c-ink-700);
	/* Archivo je variabilné písmo (wght 100–900) – hrúbka prechádza plynulo */
	transition: font-weight 0.45s var(--ease-out);
}

.community.is-active .community__name { font-weight: 900; }

.community__text { margin-top: 0.6rem; max-width: 30rem; font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--c-slate-600); }

/* Platformy ---------------------------------------------------------------- */
.platforms { background: var(--c-mist); padding-top: clamp(2rem, 1rem + 4vw, 4.5rem); padding-bottom: clamp(5rem, 4rem + 4vw, 8rem); }

.platforms__title { margin-top: clamp(1.25rem, 1rem + 1vw, 1.9rem); }

.platforms__grid {
	display: grid;
	gap: 3rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

@media (min-width: 1024px) { .platforms__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.platform { padding-inline: 1.25rem; }

.platform__logo { display: flex; align-items: flex-end; height: clamp(7rem, 6rem + 3vw, 9.25rem); }
.platform__logo img { width: auto; max-height: 100%; transition: transform 0.6s var(--ease-out); }
.platform:hover .platform__logo img { transform: translateY(-4px) rotate(-2deg); }

.platform__name {
	margin-top: 1.25rem;
	font-family: var(--f-display);
	font-size: calc(var(--fs-body) * 1.02);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-ink-700);
}

.platform__text { margin-top: 0.6rem; font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--c-slate-600); max-width: 16rem; }

/* Ocenenie ----------------------------------------------------------------- */
.award {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 45.5vw, 56rem);
	padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.6rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--c-ink-800);
}

.award__bg { position: absolute; inset: 0; z-index: -1; }
.award__bg img { position: absolute; top: -4%; width: 100%; height: 108%; object-fit: cover; object-position: 50% 0; }
.award__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--c-ink-800) 8.6%, rgb(10 35 49 / 0) 66%);
}

.award__inner {
	display: grid;
	gap: 1.5rem 2rem;
	align-items: center;
}

@media (min-width: 900px) { .award__inner { grid-template-columns: 1fr 1fr; } }

.award__logo { width: auto; height: clamp(3rem, 2.4rem + 2.6vw, 4.5rem); }

.award__results { display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 4.5vw, 4rem); }

.award__results li {
	font-family: var(--f-display);
	font-size: clamp(1.625rem, 1.317rem + 1.315vw, 3rem);
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--c-white);
}

.award__results strong {
	margin-right: 0.45em;
	font-size: 1.2em;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--c-mint);
}

/* Naše práce --------------------------------------------------------------- */
.work {
	overflow: hidden;
	background:
		radial-gradient(60rem 40rem at 70% 55%, rgb(14 60 72 / 0.55), transparent 65%),
		linear-gradient(110deg, var(--c-ink-900) 35%, #0a2a36);
}

.work__grid {
	display: grid;
	gap: clamp(2.5rem, 2rem + 3vw, 4rem);
	align-items: center;
	margin-top: clamp(2.5rem, 2rem + 2vw, 3.9rem);
}

@media (min-width: 1024px) {
	.work__grid { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
	.work .h2 .ln__in { white-space: nowrap; }
}

@media (min-width: 1600px) {
	.work__grid { grid-template-columns: minmax(0, 31rem) minmax(0, 1fr); }
}

.work .h2 strong { display: inline-block; }

.work__tabs { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid rgb(241 246 244 / 0.14); }

.work__tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 4.2rem;
	padding: 0 0.75rem;
	border-bottom: 1px solid rgb(241 246 244 / 0.14);
	font-family: var(--f-display);
	font-size: clamp(1.1rem, 0.6rem + 0.8vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -0.026em;
	text-align: left;
	color: rgb(241 246 244 / 0.62);
	transition: color 0.3s, background-color 0.4s, padding 0.5s var(--ease-out);
}

.work__tab::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--c-mint);
	transform: scaleY(0);
	transition: transform 0.5s var(--ease-out);
}

.work__tab:hover { color: var(--c-paper); }
.work__tab.is-active { padding-left: 1.4rem; background: rgb(107 206 187 / 0.1); color: var(--c-paper); }
.work__tab.is-active::before { transform: scaleY(1); }

.work__count { font-size: calc(var(--fs-micro) * 1.1); color: var(--c-slate-600); }
.work__tab.is-active .work__count { color: var(--c-mint); }

.work__cta { margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.6rem); }

/* Koláž – pozície podľa Figmy (sekcia 1440: hlavná 364×261, bočné 284×231) */
.work__stage {
	position: relative;
	aspect-ratio: 643 / 503;
	isolation: isolate;
}

.work__rings { --rings-size: 115%; --rings-gap: 2.6rem; --rings-color: rgb(107 206 187 / 0.09); left: 50%; top: 50%; translate: -50% -50%; }

.work__panel { position: absolute; inset: 0; visibility: hidden; }
.work__panel.is-active { visibility: visible; }

.work__shot {
	position: absolute;
	display: block;
	overflow: hidden;
	border-radius: clamp(12px, 1.4vw, 20px);
	background: var(--c-ink-800);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
	cursor: zoom-in;
	opacity: 0;
	transform: translate3d(0, 18px, 0) scale(0.96);
	transition: opacity 0.5s, transform 0.8s var(--ease-out), box-shadow 0.4s;
}

.work__panel.is-active .work__shot {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--n) * 0.08s);
}

.work__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.work__shot:hover { box-shadow: 0 30px 60px -24px rgb(107 206 187 / 0.35); }
.work__shot:hover img { transform: scale(1.06); }
.work__shot .play { position: absolute; inset: 0; margin: auto; --play-size: 56px; }

.work__shot--0 { left: 20.2%; top: 21.1%; width: 56.6%; height: 51.9%; z-index: 2; }
.work__shot--1 { right: 0; top: 0; width: 44.2%; height: 45.9%; z-index: 1; }
.work__shot--2 { left: 0; bottom: 0; width: 44.2%; height: 45.9%; z-index: 1; }

/* Mobil: koláž ako jedna veľká + dve menšie pod ňou (bez prekrývania) */
@media (max-width: 599px) {
	.work__stage { aspect-ratio: auto; }
	.work__panel { position: relative; inset: auto; display: none; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
	.work__panel.is-active { display: grid; }
	.work__shot { position: relative; inset: auto !important; width: auto !important; height: auto !important; aspect-ratio: 4 / 3; }
	.work__shot--0 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
	.work__rings { display: none; }
	.work__tab { min-height: 3.4rem; }
}

/* Recenzie ----------------------------------------------------------------- */
.reviews { background: var(--c-mist-2); overflow: hidden; }

.reviews__intro { margin-top: clamp(2rem, 1.5rem + 2vw, 2.5rem); }
.reviews__lead { color: var(--c-slate-600); max-width: 33rem; justify-self: end; }

.reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(23.125rem, 86%);
	gap: 1.25rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 2.9rem);
	margin-right: calc(50% - 50vw);
	padding: 0 calc(50vw - 50%) 6px 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar { display: none; }

.review { scroll-snap-align: start; }

.review figure {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 18.3rem;
	padding: 1.75rem;
	border: 1px solid rgb(15 50 70 / 0.14);
	border-radius: var(--radius);
	background: var(--c-paper);
	transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}

.review figure:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgb(15 50 70 / 0.35); }

.review__stars { display: flex; gap: 3px; color: var(--c-mint); }
.review__stars .icon { width: 16px; height: 16px; padding: 2px; }

.review__text { flex: 1; margin-top: 1rem; line-height: var(--lh-text); color: var(--c-ink-700); }

.review__author {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgb(15 50 70 / 0.14);
}

.review__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--c-slate-600);
	color: var(--c-paper);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 0.95rem;
}

.review__name { display: block; font-weight: 600; font-size: var(--fs-small); color: var(--c-ink-700); }
.review__company { display: block; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-slate-600); }

.review__source { margin-top: 0.9rem; font-size: var(--fs-micro); letter-spacing: 0.11em; text-transform: uppercase; color: var(--c-slate-600); }
.review__source strong { font-weight: 500; color: var(--c-ink-700); }

.reviews__nav { display: flex; align-items: center; gap: 0.9rem; margin-top: 2rem; }

.reviews__arrow {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border: 1px solid rgb(15 50 70 / 0.22);
	border-radius: 50%;
	color: var(--c-ink-700);
	transition: background-color 0.3s, color 0.3s, opacity 0.3s;
}

.reviews__arrow:hover:not(:disabled) { background: var(--c-ink-700); color: var(--c-paper); }
.reviews__arrow:disabled { opacity: 0.32; cursor: default; }

.reviews__progress {
	flex: 1;
	height: 2px;
	margin-left: 0.6rem;
	background: rgb(15 50 70 / 0.14);
	overflow: hidden;
}

.reviews__progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--c-ink-700);
	transform-origin: left;
	transform: scaleX(var(--p, 0.3));
	transition: transform 0.4s var(--ease-out);
}

/* Kontakt ------------------------------------------------------------------ */
.contact {
	overflow: hidden;
	background:
		radial-gradient(60rem 40rem at 0% 0%, rgb(14 52 66 / 0.6), transparent 70%),
		linear-gradient(160deg, #0a2733 0%, #061a24 50%, #02101a 100%);
}

.contact__rings { --rings-size: 60rem; --rings-color: rgb(107 206 187 / 0.05); right: -32rem; top: 35%; }

.contact__intro { margin-top: clamp(2rem, 1.5rem + 2vw, 2.5rem); }
.contact__lead { color: var(--c-slate-400); max-width: 31rem; justify-self: end; }

.contact__grid {
	display: grid;
	gap: 3rem;
	margin-top: clamp(2.5rem, 2rem + 2vw, 3.4rem);
}

@media (min-width: 1024px) {
	.contact__grid { grid-template-columns: minmax(0, 452fr) minmax(0, 624fr); gap: clamp(3rem, 5vw, 4.5rem); align-items: start; }
	.contact__info { position: sticky; top: 7rem; }
}

.contact__list { margin: 0; }
.contact__list div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid rgb(241 246 244 / 0.14);
}
.contact__list dt { color: var(--c-slate-400); }
.contact__list dd { margin: 0; text-align: right; color: var(--c-paper); }
.contact__list a { transition: color 0.3s; }
.contact__list a:hover { color: var(--c-mint); }

.contact__promise {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding: 1.75rem clamp(1.25rem, 3vw, 2.4rem) 1.75rem clamp(1.25rem, 3vw, 2.4rem);
	border: 1px solid rgb(107 206 187 / 0.28);
	border-radius: var(--radius);
	background: rgb(15 50 70 / 0.35);
	color: var(--c-slate-400);
	font-size: var(--fs-small);
}

.contact__promise-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--c-mint); }
.contact__promise-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-body); color: var(--c-white); margin-bottom: 0.15rem; }


/* Opravy po vizuálnej kontrole */
.case__media .play { position: absolute; inset: 0; margin: auto; }


/* Kontakt – doladenie podľa Figmy */
.contact { background: var(--c-ink-900); isolation: isolate; }
.contact::before {
	content: "";
	position: absolute;
	inset: 0;
	mask-image: linear-gradient(90deg, transparent 10%, #000 55%);
	-webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 55%);
	z-index: -2;
	background: linear-gradient(61deg, var(--c-mint) 24%, var(--c-ink-700) 77%);
	mix-blend-mode: overlay;
	opacity: 0.4;
	pointer-events: none;
}
.contact .section-head { border-top-color: rgb(241 246 244 / 0.2); }
.contact .section-head__right { font-family: var(--f-mono); opacity: 0.6; }
.contact__promise { background: rgb(107 206 187 / 0.08); border-color: rgb(107 206 187 / 0.3); }

/* Štatistiky – kompaktnejšie na mobile */
.stats__label { margin-top: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem); font-size: clamp(0.6875rem, 0.5rem + 0.55vw, 1.05rem); }
.stats__text { margin-top: clamp(0.3rem, 0.1rem + 0.6vw, 0.9rem); font-size: clamp(0.75rem, 0.6rem + 0.42vw, 0.9rem); }

@media (max-width: 767px) {
	.stats__item { padding: 1.25rem 0.75rem; }
	.stats__value { font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.25rem); }
}

/* Riešenia – svetelný horizont (video, čierna sa cez „screen“ stratí) */
.areas__sun {
	position: absolute;
	z-index: -1;
	left: 42%;
	top: clamp(13rem, 9rem + 10vw, 18.5rem);
	opacity: 0.38; /* vo Figme je žiara tlmená – jas nameraný z renderu Figmy */
	width: max(130%, 62rem);
	aspect-ratio: 16 / 9;
	translate: -50% -50%;
	mix-blend-mode: screen;
	pointer-events: none;
}

.areas__sun video,
.areas__sun img { width: 100%; height: 100%; object-fit: cover; }

.areas__list:has(.areas__sun) .areas__horizon { display: none; }

/* Know-how – mobil: video dostane priestor, karty v posuvnom páse ------- */
@media (max-width: 899px) {
	.knowhow { min-height: 0; }
	.knowhow__bg img,
	.knowhow__bg video { object-position: 38% 50%; }
	.knowhow__bg::after {
		background:
			linear-gradient(0deg, rgb(6 22 32 / 0.9) 6%, rgb(6 22 32 / 0) 30%),
			linear-gradient(180deg, #05121a 12%, rgb(6 22 32 / 0.55) 38%, rgb(6 22 32 / 0) 55%);
	}

	.talks {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(78%, 20rem);
		gap: 0.75rem;
		margin-right: calc(-1 * var(--gutter));
		padding: clamp(13rem, 62vw, 24rem) var(--gutter) 0.25rem 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.talks::-webkit-scrollbar { display: none; }
	.talks li { scroll-snap-align: start; }

	.talk { --play-size: 40px; gap: 0.9rem; min-height: 0; padding: 1rem 1.1rem; }
	.talk .play::before { border-width: 6px 0 6px 10px; margin-left: 3px; }
	.talk__text { gap: 0.4rem; }
	.talk__title { font-size: 1.0625rem; line-height: 1.25; }

	.knowhow__venues { margin-top: 1.5rem; padding-block: 1.25rem; }
}

/* Odznaky (O nás) – mobil v mriežke */
@media (max-width: 767px) {
	.about__bottom { justify-content: center; }
	.badges {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: center;
		justify-items: center;
		gap: 1.5rem 1rem;
		width: 100%;
	}
	.badges img { max-height: 2.75rem; max-width: 100%; }
	.about__cta { width: 100%; }
}

/* Platformy – mobil 2 stĺpce, jednotná výška log */
@media (max-width: 1023px) {
	.platforms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }
	.platform { padding-inline: 0; }
	.platform__logo { height: clamp(4.5rem, 3rem + 6vw, 7rem); }
	.platform__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; }
	.platform__name { margin-top: 0.9rem; }
}

/* Know-how – mobil: nadpis hore, perex dole nad kartami, osoba v strede */
@media (max-width: 899px) {
	.knowhow__inner { min-height: clamp(36rem, 175vw, 50rem); }
	.knowhow__intro { display: contents; }
	.knowhow__intro .h2 { margin-top: 2rem; }
	.knowhow__intro .lead { margin-top: auto; padding-top: 2rem; }
	.talks { margin-top: 0; padding-top: 1.25rem; }
	.knowhow__bg img,
	.knowhow__bg video { object-position: 48% 50%; }
	.knowhow__bg::after {
		background:
			linear-gradient(0deg, rgb(6 22 32 / 0.92) 8%, rgb(6 22 32 / 0.55) 30%, rgb(6 22 32 / 0) 48%),
			linear-gradient(180deg, #05121a 8%, rgb(6 22 32 / 0.5) 26%, rgb(6 22 32 / 0) 40%);
	}
}

/* Ocenenie – veľké monitory: vyšší blok, výrez hore (text na plátne), nohy sa orežú */
@media (min-width: 1600px) {
	.award { min-height: clamp(24rem, 50vw, 62rem); }
	.award__bg img { object-position: 50% 14%; }
}

/* O nás – mobil/tablet v2: väčšia fotka cez okraje, plynulý prechod hore, ľudia za štatistikami */
@media (max-width: 1023px) {
	/* Farby steny na fotke v mieste výrezu (vľavo → vpravo) */
	.about__top::before {
		bottom: -9rem;
		background: linear-gradient(90deg, rgb(102 180 157), rgb(118 189 168) 50%, rgb(154 212 197));
	}

	.about__media {
		aspect-ratio: 1 / 1.08;
		mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
	}

	.about__media img {
		left: -32%;
		width: 162%;
	}

	.about__media::after { background: linear-gradient(0deg, #03141a 2%, rgb(3 20 26 / 0) 34%); }

	.about .stats { margin-top: -8.5rem; }
}

@media (min-width: 600px) and (max-width: 1023px) {
	.about__media { aspect-ratio: 1 / 0.9; mask-image: linear-gradient(to bottom, transparent 0, #000 8%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%); }
	.about__media img { left: -15%; width: 130%; }
	.about .stats { margin-top: -9rem; }
}

/* Komunity – fotka a logo sa menia podľa vybranej komunity */
.communities__photo { position: relative; }
.communities__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.6s var(--ease-out), transform 1.2s var(--ease-out);
}
.communities__photo img.is-active { opacity: 1; transform: none; }
.communities__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(107 206 187 / 0.55), rgb(107 206 187 / 0) 38%);
	pointer-events: none;
}
.communities__brand-item img { height: clamp(3.5rem, 2.8rem + 2.2vw, 5.5rem); width: auto; max-height: none; max-width: 100%; object-fit: contain; object-position: left center; }
.communities__brand-item:first-child img { height: clamp(4.5rem, 3.5rem + 3vw, 8rem); }
.community { cursor: pointer; }

/* Naše práce – mobil/tablet: náhľady hneď pod tabmi, tlačidlo až pod nimi */
@media (max-width: 1023px) {
	.work__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.work__side { display: contents; }
	.work__stage { order: 2; margin-top: 1.75rem; }
	.work__cta { order: 3; }
}

/* Naše práce – bočné náhľady čiernobielo (podľa Figmy), farba pri hoveri */
.work__shot--1 img,
.work__shot--2 img { filter: grayscale(1); transition: transform 1s var(--ease-out), filter 0.5s; }
.work__shot--1:hover img,
.work__shot--2:hover img,
.work__shot--1:focus-visible img,
.work__shot--2:focus-visible img { filter: none; }

/* Naše práce – mobil: akordeón (obsah sa otvorí pod kliknutým tabom) */
@media (max-width: 767px) {
	.work__tabs,
	.work__stage { display: contents; }
	.work__rings { display: none; }
	.work__tab[data-tab="0"] { order: 1; border-top: 1px solid rgb(241 246 244 / 0.14); margin-top: 1.75rem; }
	.work__panel[data-panel="0"] { order: 2; }
	.work__tab[data-tab="1"] { order: 3; }
	.work__panel[data-panel="1"] { order: 4; }
	.work__tab[data-tab="2"] { order: 5; }
	.work__panel[data-panel="2"] { order: 6; }
	.work__tab[data-tab="3"] { order: 7; }
	.work__panel[data-panel="3"] { order: 8; }
	.work__tab[data-tab="4"] { order: 9; }
	.work__panel[data-panel="4"] { order: 10; }
	.work__cta { order: 11; }

	.work__panel { position: relative; inset: auto; display: none; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding-block: 0.9rem 1.1rem; border-bottom: 1px solid rgb(241 246 244 / 0.14); }
	.work__panel.is-active { display: grid; }
	.work__shot { position: relative; inset: auto !important; width: auto !important; height: auto !important; aspect-ratio: 4 / 3; }
	.work__shot--0 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
	.work__tab { min-height: 3.4rem; }
	.work__tab::after { content: "+"; margin-left: 0.75rem; font-weight: 400; color: var(--c-slate-400); transition: transform 0.4s var(--ease-out); }
	.work__tab.is-active::after { transform: rotate(45deg); color: var(--c-mint); }
	.work__count { margin-left: auto; }
}

/* Komunity – mobil/tablet: akordeón (logo + fotka sa otvoria pod komunitou) */
.community__media { display: none; }

@media (max-width: 1023px) {
	.communities__photo,
	.communities__brand { display: none; }

	.community { cursor: pointer; }
	/* Cez celú šírku položky (aj pod číslom), okraje stránky ostávajú */
	.community__media {
		display: grid;
		position: relative;
		z-index: 1; /* nad zvislou čiarou aktívnej položky */
		grid-column: 1 / -1;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.55s var(--ease-out);
	}
	.community.is-active .community__media { grid-template-rows: 1fr; }
	.community__media-in { display: grid; gap: 1.25rem; overflow: hidden; min-height: 0; }
	.community__media-logo { margin-top: 1.25rem; width: auto; height: 3.25rem; max-width: 80%; object-fit: contain; object-position: left center; }
	.community__media-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-sm); }
	.community__name::after { content: "+"; float: right; margin-left: 0.75rem; font-weight: 400; color: var(--c-slate-600); transition: transform 0.4s var(--ease-out); }
	.community.is-active .community__name::after { transform: rotate(45deg); color: var(--c-ink-700); }
}

/* Recenzie – na úvode dlhé texty skrátené na 9 riadkov, „Čítať viac“ rozbalí celý text */
.review__text p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
/* Referencie: recenzie vždy celé */
.reviews--full .review__text p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.review.is-open .review__text p { display: block; -webkit-line-clamp: unset; }
.review__more {
	align-self: flex-start;
	margin-top: 0.6rem;
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-slate-600);
	cursor: pointer;
}
.review__more:hover { color: var(--c-ink-700); }
.review__text { flex: 0 1 auto; }
.review__more[hidden] + .review__author,
.review__text + .review__author { margin-top: auto; }